From 9fa2a3a28d93f1893a5cbc8d25848829edcb67dc Mon Sep 17 00:00:00 2001
From: myltx <summmayl@gmail.com>
Date: Fri, 28 Feb 2025 14:02:14 +0800
Subject: [PATCH] feat(client): add mobile-friendly responsive design for index
 page #22

- Implement mobile-specific tab navigation for categories- Update scroll watcher to support mobile
interaction- Adjust layout and styling for mobile view- Add dynamic tab switching based on scroll
position- Enhance mobile user experience with responsive components
---
 apps/client/src/components/Footer/index.vue   |  5 +-
 .../src/composables/useScrollWatcher.ts       | 81 +++++++++++++-----
 apps/client/src/pages/index.vue               | 82 ++++++++++++-------
 3 files changed, 115 insertions(+), 53 deletions(-)

diff --git a/apps/client/src/components/Footer/index.vue b/apps/client/src/components/Footer/index.vue
index 5c51568..85b141e 100644
--- a/apps/client/src/components/Footer/index.vue
+++ b/apps/client/src/components/Footer/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="text-center text-gray-500 text-sm py-2">
+  <div
+    class="text-center text-gray-500 text-sm"
+    :class="isMobile() ? 'pt-1' : 'py-2'"
+  >
     <!-- <UDivider :label="$config.public.projectName" :ui="{
 
     }" /> -->
diff --git a/apps/client/src/composables/useScrollWatcher.ts b/apps/client/src/composables/useScrollWatcher.ts
index 463f181..912b473 100644
--- a/apps/client/src/composables/useScrollWatcher.ts
+++ b/apps/client/src/composables/useScrollWatcher.ts
@@ -1,10 +1,12 @@
-// composables/useScrollWatcher.ts
-import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 
 export function useScrollWatcher() {
   const selectedAnchor = ref(''); // 当前选中的锚点
-  const thresholdDistance = 100; // 设置标题距离顶部的最小距离（单位：px），可以根据需求调整
+  const thresholdDistance = 100; // 设置标题距离顶部的最小距离（单位：px）
   const headerHeight = ref(0); // 页面上方固定元素的高度
+  const debounceTimeout = 200; // 防抖延迟时间（单位：毫秒）
+
+  let scrollTimeout: number | null = null; // 防抖定时器
 
   // 获取页面上方固定元素的高度
   const setHeaderHeight = () => {
@@ -14,43 +16,80 @@ export function useScrollWatcher() {
     }
   };
 
+  // 获取距离顶部最近的锚点标题
+  const getNearestAnchor = () => {
+    const titles = document.querySelectorAll('.anchor-title');
+    let nearest = null;
+    let minDistance = Infinity;
+
+    titles.forEach((title) => {
+      const rect = title.getBoundingClientRect();
+      const distance = rect.top - headerHeight.value; // 计算与顶部的距离
+      if (distance >= 0 && distance < minDistance) {
+        nearest = title;
+        minDistance = distance;
+      }
+    });
+
+    return nearest;
+  };
+
+  // 更新选中的锚点
+  const updateSelectedAnchor = () => {
+    const nearest = getNearestAnchor();
+    if (nearest) {
+      selectedAnchor.value = nearest.id;
+    }
+  };
+
+  // 延迟触发选中更新
+  const handleScroll = () => {
+    // 如果有已经存在的定时器，清除
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
+
+    // 设置一个新的定时器，在滚动停止一定时间后更新选中的锚点
+    scrollTimeout = setTimeout(() => {
+      updateSelectedAnchor(); // 滚动结束后更新选中的锚点
+    }, debounceTimeout);
+  };
+
+  // 观察新的标题元素
+  const observeTitles = () => {
+    nextTick(() => {
+      const newTitles = document.querySelectorAll('.anchor-title');
+      newTitles.forEach((title) => observer.observe(title));
+    });
+  };
+
   // 使用 IntersectionObserver 来监听元素是否进入视口
   const observer = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
         const rect = entry.target.getBoundingClientRect();
-
-        // 判断目标 title 元素与视口顶部的距离
         if (rect.top <= headerHeight.value + thresholdDistance) {
-          // 如果标题元素距离顶部小于等于阈值并考虑了上方元素的高度
           selectedAnchor.value = entry.target.id;
         }
       });
     },
     {
-      threshold: 0, // 设置最低阈值，当元素至少显示 10% 时才会触发
+      threshold: 0,
     }
   );
 
-  // 延迟观察新渲染的元素
-  // 定义一个函数，用于观察锚点标题
-  const observeTitles = () => {
-    // 使用nextTick函数，在下一个事件循环中执行
-    nextTick(() => {
-      // 获取所有的锚点标题
-      const newTitles = document.querySelectorAll('.anchor-title');
-      // 遍历所有的锚点标题
-      newTitles.forEach((title) => observer.observe(title));
-    });
-  };
-
   onMounted(() => {
     setHeaderHeight(); // 在组件挂载时获取上方元素的高度
-    observeTitles();
+    // observeTitles(); // 观察页面中的标题
+    window.addEventListener('scroll', handleScroll); // 添加滚动事件监听
   });
 
   onBeforeUnmount(() => {
-    observer.disconnect(); // 销毁时断开监听
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout); // 清除定时器
+    }
+    window.removeEventListener('scroll', handleScroll); // 移除滚动事件监听
+    observer.disconnect(); // 销毁时断开 IntersectionObserver 监听
   });
 
   // 手动滚动到指定锚点
diff --git a/apps/client/src/pages/index.vue b/apps/client/src/pages/index.vue
index d490c0e..2a6e34a 100644
--- a/apps/client/src/pages/index.vue
+++ b/apps/client/src/pages/index.vue
@@ -25,16 +25,23 @@ const categoriesKey = 'categories-';
 
 const { openDialog } = useDialog();
 
-const onChangeTab = (id: number) => {
-  loading.value = true;
+const onChangeTab = (id: number, type: string = 'manual') => {
+  // loading.value = true;
   activeTab.value = id;
   // 滚动到当前 Tab 的可见区域
   const tabElement = document.querySelector(`.tab[data-id="${id}"]`);
   if (tabElement) {
     tabElement.scrollIntoView({ behavior: 'smooth', inline: 'center' });
   }
+  type === 'manual' && scrollToSection(`${categoriesKey}${id}`);
   // getWebSites();
 };
+watchEffect(() => {
+  if (isMobile()) {
+    const id = Number(selectedAnchor.value.replace(categoriesKey, ''));
+    onChangeTab(id, 'auto');
+  }
+});
 
 const getSelectData = async () => {
   const { data: categorysData } = await getCategoryList();
@@ -67,10 +74,8 @@ const goLink = (data: any) => {
 };
 const getWebSites = () => {
   getWebsiteQueryAllGroup().then((res) => {
-    console.log(res, 'r');
     websites.value = res.data.groupedData;
     categorys.value = res.data.groupedData.map((item: any) => item.categories);
-    console.log(categorys.value, 'categorys.value');
     loading.value = false;
     observeTitles();
   });
@@ -125,7 +130,7 @@ onMounted(async () => {
 
 <template>
   <div class="h-100% flex justify-between w-full">
-    <div class="w-80 bg-bgColor px-2">
+    <div class="bg-bgColor px-4 w-60" v-if="!isMobile()">
       <div
         class="cursor-pointer py-2 flex items-center gap-2 hover:text-#0066FF"
         :class="{
@@ -141,8 +146,10 @@ onMounted(async () => {
     </div>
     <div class="flex-grow-1 h-100%">
       <!-- 内容区顶部 -->
+      <!-- web端选择器样式 -->
       <div
         class="h-48 bg-bgColor py-4 b-l-1 b-solid b-bColor page-header shadow dark:shadow-otherBgColor 100 backdrop-blur shadow-"
+        v-if="!isMobile()"
       >
         <div class="px-30 flex gap-10">
           <div
@@ -183,7 +190,34 @@ onMounted(async () => {
           </div>
         </div>
       </div>
-      <div class="h-77.7% overflow-y-auto bg-otherBgColor px-30 pb-5">
+      <!-- 移动端选择器样式 -->
+      <div
+        class="px-2 mt-2 h-auto shadow-md rounded-lg w-100vw overflow-x-hidden"
+        v-else
+      >
+        <div
+          class="w-99% flex items-center whitespace-nowrap overflow-x-auto h-100% py-2"
+        >
+          <div
+            v-for="tab in categorys"
+            :key="tab.id"
+            :data-id="tab.id"
+            class="tab p-5 cursor-pointer text-4 h-10 rounded-5 flex items-center justify-center mr-3 bg-bgColor shadow hover:text-blue hover:font-500"
+            :class="[
+              activeTab === tab.id
+                ? 'text-blue-500 border-blue-500 font-500'
+                : 'text-gray-500 border-gray-500',
+            ]"
+            @click="onChangeTab(tab.id)"
+          >
+            {{ tab.name }}
+          </div>
+        </div>
+      </div>
+      <div
+        class="overflow-y-auto bg-otherBgColor pb-5"
+        :class="isMobile() ? 'h-92%  px-8' : 'h-77.7% px-30'"
+      >
         <div
           class=""
           v-for="categories in websites"
@@ -240,7 +274,8 @@ onMounted(async () => {
                   class="mt-2 text-2 text-gray-500 flex items-center justify-between"
                 >
                   <span class="mr-2 text-sm flex items-center">
-                    👀
+                    <!-- 👀 -->
+                    <Icon name="line-md:watch" class="text-xl mr-1" />
                     {{ website.visitCount }}
                   </span>
                   <div class="flex items-center">
@@ -261,29 +296,7 @@ onMounted(async () => {
   </div>
 
   <!-- <div class="h-100%">
-    <div
-      class="px-2 mt-2 h-auto mx-2 shadow-md rounded-lg w-100% overflow-x-hidden"
-    >
-      <div
-        class="w-99% flex items-center whitespace-nowrap overflow-x-auto h-100% py-2"
-      >
-        <div
-          v-for="tab in categorys"
-          :key="tab.id"
-          :data-id="tab.id"
-          class="tab p-5 cursor-pointer text-4 h-10 rounded-5 flex items-center justify-center mr-3 shadow hover:text-blue hover:font-500"
-          :class="[
-            tab.id == activeTab
-              ? 'text-blue-500 border-blue-500 font-500'
-              : 'text-gray-500 border-gray-500',
-            $colorMode.value === 'dark' ? 'bg-gray-800' : '',
-          ]"
-          @click="onChangeTab(tab.id)"
-        >
-          {{ tab.name }}
-        </div>
-      </div>
-    </div>
+  
     <div class="mt-5 overflow-y-auto h-89%">
       <div
         class="grid gap-5 w-full justify-center"
@@ -373,8 +386,15 @@ body {
   color: #433422;
 }
 
+.item {
+  transition:
+    transform 0.2s ease-in-out,
+    opacity 0.2s ease-in-out;
+}
+
 .item:hover {
   transform: scale(1.05);
-  transition: transform 0.2s ease-in-out;
+  opacity: 0.95;
+  /* 添加透明度变化，使放大的效果更自然 */
 }
 </style>