Merge pull request MuxiKeStack#220 from MuxiKeStack/feat-cache

Feat cache
eleliauk · Dec 25, 2024 · b60ee25 · b60ee25
2 parents 0fd5f0d + cea6610
commit b60ee25
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 57 deletions.
diff --git a/src/common/components/Comment/style.scss b/src/common/components/Comment/style.scss
@@ -109,10 +109,10 @@ $content-line-height: 30;
         Segoe UI-Regular,
         Segoe UI;
       font-weight: 400;
-      line-height: calc(#{$content-line-height}rpx);
+      line-height: calc(#{$content-line-height + 6}rpx);
       color: #565552;
       margin: 30rpx 0;
-      height: calc(#{$content-line-height}rpx);
+      // height: calc(#{$content-line-height}rpx);
       overflow: hidden;
     }
     .likes {
@@ -150,11 +150,13 @@ $content-line-height: 30;
   }
 }
 .text-overflow {
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
   display: -webkit-box;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
+  -webkit-line-clamp: 3; //多行在这里修改数字即可
+  overflow: hidden;
+  /* autoprefixer: ignore next */
   -webkit-box-orient: vertical;
-  /*! autoprefixer: off */
 }
 .text-showAll {
   height: auto !important;

diff --git a/src/common/components/SearchInput/SearchInput.scss b/src/common/components/SearchInput/SearchInput.scss
@@ -1,17 +1,15 @@
 .searchInput {
-  left: 79.71rpx;
-  top: 80rpx;
-  position: relative;
-  background-color: black;
   background-color: #f9f9f2;
-  width: 592.39rpx;
-  height: 108.7rpx;
+  width: 80vw;
+  height: 4vh;
   border-radius: 18.12rpx 18.12rpx 18.12rpx 18.12rpx;
-  padding-left: 27.17rpx;
+  padding: 4vw;
 }
 .search {
-  left: 614.13rpx;
-  top: 11.67rpx;
-  position: relative;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 4vw;
   z-index: 999;
+  display: flex;
 }
diff --git a/src/common/components/SearchInput/SearchInput.tsx b/src/common/components/SearchInput/SearchInput.tsx
@@ -53,9 +53,8 @@ const SearchInput: React.FC<SearchInputProps> = ({
   // ...组件的其余部分
 
   return (
-    <View>
+    <View className="relative mt-[4vh] flex w-[80vw] justify-center">
       <Input
-        // onBlur={handleBlur}
         onClick={handleClick} // 点击输入框时切换搜索状态
         value={searchText} // 绑定输入框的值
         onInput={handleInputChange} // 绑定输入框的值变化事件

diff --git a/src/pages/main/index.scss b/src/pages/main/index.scss
@@ -11,7 +11,6 @@
   text-align: center;
   font-style: normal;
   text-transform: none;
-  margin-right: 27.17rpx;
   background: #f9f9f2;
   color: #a5a29c;
 }
@@ -22,8 +21,9 @@
 }
 
 .classLine {
-  margin-left: 45.29rpx;
-  margin-top: 75rpx;
+  margin-top: 35rpx;
   display: flex;
-  margin-bottom: 70rpx;
+  margin-bottom: 35rpx;
+  justify-content: space-evenly;
+  gap: 20rpx;
 }
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -3,6 +3,7 @@
 import { Image, ScrollView, Text, View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AtIcon } from 'taro-ui';
 
 import './index.scss';
 
@@ -41,23 +42,41 @@ export default function Index() {
       changeType,
     })
   );
+  // 存储每个tab的scrollTop
+  const scrollTopMap = useRef({
+    [COURSE_TYPE.ANY]: 0,
+    [COURSE_TYPE.MAJOR]: 0,
+    [COURSE_TYPE.GENERAL_ELECT]: 0,
+    [COURSE_TYPE.GENERAL_CORE]: 0,
+  });
+  // 用于回到顶部
+  const [scrollTop, setScrollTop] = useState(0);
+  // 用于监听横向滚动
   const touchStartX = useRef(0); // 记录触摸起始点
   const touchEndX = useRef(0); // 记录触摸结束点
+  const touchStartY = useRef(0); // 记录触摸起始点
+  const touchEndY = useRef(0); // 记录触摸结束点
 
   const handleTouchStart = (e) => {
     //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     touchStartX.current = e?.touches[0].pageX as number; // 记录起始触摸点
+    //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    touchStartY.current = e?.touches[0].pageY as number; // 记录起始触摸点
   };
   const handleTouchMove = (e) => {
     //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     touchEndX.current = e?.touches[0].pageX as number; // 实时记录滑动点
+    //eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    touchEndY.current = e?.touches[0].pageY as number; // 实时记录滑动点
   };
 
-  const handleTouchEnd = () => {
+  const handleTouchEnd = (e) => {
     const deltaX = touchEndX.current - touchStartX.current; // 计算滑动距离
+    const deltaY = touchEndY.current - touchStartY.current;
     const tabs = Object.entries(COURSE_NAME_MAP);
     const currentTab = tabs.findIndex(([name, value]) => name === classType);
-    if (Math.abs(deltaX) > 50) {
+    console.log(deltaX, deltaY);
+    if (Math.abs(deltaX) > 120 && Math.abs(deltaY) < 50) {
       // 判断滑动距离是否足够切换 Tab
       if (deltaX > 0 && currentTab > 0) {
         // 向右滑动且不是第一个 Tab
@@ -75,11 +94,13 @@ export default function Index() {
   useEffect(() => {
     void dispatch.loadMoreComments();
   }, [dispatch.loadMoreComments]);
-
+  const handleScroll = (e: { detail: { scrollTop: number } }) => {
+    scrollTopMap.current = { ...scrollTopMap.current, [classType]: e.detail.scrollTop };
+  };
   const handleChangeType = (type) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     dispatch.changeType(type);
-    void dispatch.refershComments();
+    setScrollTop(scrollTopMap.current[type as string] as number);
   };
   useEffect(() => {
     if (!comments[classType].length) {
@@ -119,16 +140,7 @@ export default function Index() {
   const geneHandler = () => {
     let timeNow = Date.now();
     return (e) => {
-      console.log(e);
-
-      if (
-        !useCourseStore.getState().loading &&
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        e.detail.scrollTop > e.detail.scrollHeight / 2 &&
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        e.detail.deltaY < 0 &&
-        Date.now() - timeNow > 1000
-      ) {
+      if (!useCourseStore.getState().loading && Date.now() - timeNow > 1000) {
         void Taro.showLoading({ title: '加载中...' });
         void dispatch
           .loadMoreComments()
@@ -166,7 +178,7 @@ export default function Index() {
       </View>
     </View>
   ) : (
-    <View className="flex flex-col">
+    <View className="flex flex-col items-center justify-center">
       <SearchInput
         onSearch={handleSearch} // 传递搜索逻辑
         onSearchToggle={handleSearchToggle}
@@ -193,11 +205,16 @@ export default function Index() {
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
+        scrollWithAnimation
+        onScroll={handleScroll}
+        scrollTop={scrollTop}
+        scrollAnimationDuration="300"
+        onScrollToLower={loadMoreHandler}
+        lowerThreshold={200}
         refresherEnabled
         style={{ height: '70vh' }}
         refresherTriggered={refresherTriggered}
         scrollY
-        onScroll={(e) => loadMoreHandler(e)}
         onRefresherRefresh={() => {
           setRefresherTriggered(true);
           void dispatch.refershComments().then(() => {
@@ -219,6 +236,22 @@ export default function Index() {
             </>
           ))}
       </ScrollView>
+      {/* 刷新按钮 */}
+      <View
+        className="fixed bottom-[16vh] right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-[#FFF] shadow-lg active:opacity-80"
+        onClick={() => {
+          // 设置滚动条回到顶部
+          setScrollTop((prev) => (prev ? 0 : 1));
+          setTimeout(() => {
+            setRefresherTriggered(true);
+            void dispatch.refershComments().then(() => {
+              setRefresherTriggered(false);
+            });
+          }, 600);
+        }}
+      >
+        <AtIcon value="chevron-up" size="30" color="#FFD777"></AtIcon>
+      </View>
     </View>
   );
 }
diff --git a/src/pages/research/research.scss b/src/pages/research/research.scss
@@ -1,26 +1,18 @@
 .lsss {
-  position: absolute;
-  top: 257rpx;
-  left: 79.71rpx;
   width: auto;
   height: 60rpx;
   font-size: 45rpx;
   font-family: Inter-Bold-, Inter-Bold;
   font-weight: normal;
   color: #565656;
-  line-height: 0rpx;
 }
 .historyResult {
-  position: absolute;
-  top: 320.45rpx;
-  left: 79.71rpx;
-  width: 603rpx;
+  width: 80vw;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
 }
 .button {
-  position: absolute;
   background-color: #f9f9f2;
   height: 48.91rpx;
   width: 48.91rpx;
@@ -34,7 +26,10 @@
 }
 
 .tj {
-  position: absolute;
-  top: 248rpx;
-  left: 45rpx;
+  margin-top: 50rpx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/pages/research/research.tsx b/src/pages/research/research.tsx
@@ -91,7 +91,7 @@ const Research: React.FC = () => {
 
   return (
     <View
-      className="index h-[100vh] w-[100vw]"
+      className="flex h-[100vh] w-[100vw] flex-col items-center overflow-auto"
       onClick={() => {
         handleClick();
       }}
@@ -124,13 +124,15 @@ const ConditionalRender = ({ isSpread, classes, hrs, handleSearch }) => {
       ))}
     </View>
   ) : (
-    <View>
-      <Text className="lsss">历史搜索</Text>
-      <View className="button">
-        <Image
-          style={{ width: '29.37rpx', height: '30.83rpx' }}
-          src="https://s2.loli.net/2023/08/26/3XBEGlN2UuJdejv.png"
-        />
+    <View className="relative flex flex-col items-center">
+      <View className="mt-[4vh] flex w-[80vw] flex-row justify-between">
+        <Text className="lsss">历史搜索</Text>
+        <View className="button">
+          <Image
+            style={{ width: '29.37rpx', height: '30.83rpx' }}
+            src="https://s2.loli.net/2023/08/26/3XBEGlN2UuJdejv.png"
+          />
+        </View>
       </View>
       <View
         className="historyResult"