fix: 修复点击菜单时样式乱跳的问题

components/app/about.vue

@@ -16,7 +16,8 @@ useSectionInView(aboutRef, "关于我");
     <p>
       在本科阶段，我学习了计算机基础、数据库原理与实践、Vue等课程，并在大三时深入接触前端开发。在编程的挑战中，我乐在其中，与团队合作开发项目、解决复杂问题的过程带来了巨大的满足感。我擅长使用
       Vue3、Vite 和 Nuxt.js 等技术，对 JavaScript, TypeScript 和 HTML/CSS
-      也有很深的理解 💻。平时，我喜欢学习新技能并做一些有趣的项目 🛠️。如果不在电脑前，我喜欢做饭、看电影
+      也有很深的理解 💻。平时，我喜欢学习新技能并做一些有趣的项目
+      🛠️。如果不在电脑前，我喜欢做饭、看电影
       🍳🎥💪，规律的睡眠和饮食是我精力充沛的秘诀 🌟。
     </p>
   </section>

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>

composables/state.ts

@@ -0,0 +1,5 @@
+export const useActiveSection = () =>
+  useState<string>("activeSection", () => "首页");
+
+export const useTimeOfLastClick = () =>
+  useState<number>("timeOfLastClick", () => 0);

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;
       }
     },
     {

layouts/default.vue

@@ -1,7 +1,3 @@
-<script setup lang="ts">
-useState("activeSection", () => "首页");
-</script>
-
 <template>
   <div class="relative">
     <div