From c376f31c20f26574bec15b1b969c1b207026ce40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9A=93=E6=9C=88?= <zhangwenhaoyue@163.com>
Date: Wed, 15 May 2024 12:07:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=97=B6=E6=A0=B7=E5=BC=8F=E4=B9=B1=E8=B7=B3?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/app/about.vue        |  3 ++-
 components/app/header.vue       | 16 +++++++++++-----
 composables/state.ts            |  5 +++++
 composables/useSectionInView.ts |  7 ++++---
 layouts/default.vue             |  4 ----
 5 files changed, 22 insertions(+), 13 deletions(-)
 create mode 100644 composables/state.ts

diff --git a/components/app/about.vue b/components/app/about.vue
index 987ca17..82fd19f 100644
--- a/components/app/about.vue
+++ b/components/app/about.vue
@@ -16,7 +16,8 @@ useSectionInView(aboutRef, "关于我");
     <p>
       在本科阶段，我学习了计算机基础、数据库原理与实践、Vue等课程，并在大三时深入接触前端开发。在编程的挑战中，我乐在其中，与团队合作开发项目、解决复杂问题的过程带来了巨大的满足感。我擅长使用
       Vue3、Vite 和 Nuxt.js 等技术，对 JavaScript, TypeScript 和 HTML/CSS
-      也有很深的理解 💻。平时，我喜欢学习新技能并做一些有趣的项目 🛠️。如果不在电脑前，我喜欢做饭、看电影
+      也有很深的理解 💻。平时，我喜欢学习新技能并做一些有趣的项目
+      🛠️。如果不在电脑前，我喜欢做饭、看电影
       🍳🎥💪，规律的睡眠和饮食是我精力充沛的秘诀 🌟。
     </p>
   </section>
diff --git a/components/app/header.vue b/components/app/header.vue
index cc116c9..b7bd7a2 100644
--- a/components/app/header.vue
+++ b/components/app/header.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { links } from "~/assets/data";
 
-const useActiveSection = useState("activeSection");
+const activeSection = useActiveSection();
+const timeOfLastClick = useTimeOfLastClick();
 </script>
 
 <template>
@@ -23,14 +24,19 @@ const useActiveSection = useState("activeSection");
             :to="link.hash"
             class="flex w-full items-center justify-center px-3 py-3 no-wrap hover:text-gray-950 dark:hover:text-gray-300 transition"
             :class="{
-              'text-gray-950': useActiveSection === link.name,
-              'dark:hover:text-gray-600': useActiveSection === link.name,
+              'text-gray-950': activeSection === link.name,
+              'dark:hover:text-gray-600': activeSection === link.name,
             }"
-            @click="useActiveSection = link.name"
+            @click="
+              () => {
+                activeSection = link.name;
+                timeOfLastClick = Date.now();
+              }
+            "
           >
             {{ link.name }}
             <span
-              v-if="useActiveSection === link.name"
+              v-if="activeSection === link.name"
               class="bg-gray-50 rounded-full absolute inset-0 -z-10"
               layoutId="activeSection"
             ></span>
diff --git a/composables/state.ts b/composables/state.ts
new file mode 100644
index 0000000..fbc6686
--- /dev/null
+++ b/composables/state.ts
@@ -0,0 +1,5 @@
+export const useActiveSection = () =>
+  useState<string>("activeSection", () => "首页");
+
+export const useTimeOfLastClick = () =>
+  useState<number>("timeOfLastClick", () => 0);
diff --git a/composables/useSectionInView.ts b/composables/useSectionInView.ts
index b1b9247..cb85c63 100644
--- a/composables/useSectionInView.ts
+++ b/composables/useSectionInView.ts
@@ -4,14 +4,15 @@ export const useSectionInView = (el: Ref<HTMLElement>, name: string) => {
   const target = el;
   const targetIsVisible = ref(false);
 
-  const useActiveSection = useState("activeSection");
+  const activeSection = useActiveSection();
+  const timeOfLastClick = useTimeOfLastClick();
 
   useIntersectionObserver(
     target,
     ([{ isIntersecting }]) => {
       targetIsVisible.value = isIntersecting;
-      if (isIntersecting) {
-        useActiveSection.value = name;
+      if (isIntersecting && Date.now() - timeOfLastClick.value > 1000) {
+        activeSection.value = name;
       }
     },
     {
diff --git a/layouts/default.vue b/layouts/default.vue
index ede0b39..f1540f2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-useState("activeSection", () => "首页");
-</script>
-
 <template>
   <div class="relative">
     <div