fix(动画): 修复首页动画重复播放和顶部导航显示问题

修复首页动画在特定条件下可能重复播放的问题，通过添加 hasPlayedIntro 状态控制
优化顶部导航的显示逻辑，增加即时显示和隐藏功能，并清理事件监听和定时器

app/pages/index.vue

@@ -27,17 +27,24 @@ useSeoMeta({
 
 const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
 const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
+const hasPlayedIntro = ref(false)
 
 // 监听全局加载状态，加载完成后依次播放开场和首屏动画
-watch(() => appStore.isAppLoading, async (isLoading) => {
-  if (!isLoading) {
-    await homeIntroRef.value?.play()
-    await homeHeroRef.value?.play()
-    
-    // 动画播放完毕后解除页面滚动锁定
+watch(
+  () => [appStore.isAppLoading, homeIntroRef.value, homeHeroRef.value] as const,
+  async ([isLoading, intro, hero]) => {
+    if (hasPlayedIntro.value) return
+    if (isLoading || !intro || !hero) return
+
+    hasPlayedIntro.value = true
+
+    await intro.play()
+    await hero.play()
+
     isIntroActive.value = false
-  }
-}, { immediate: true })
+  },
+  { immediate: true }
+)
 </script>
 
 <template>