feat: 重构应用加载流程和动画管理

- 新增 AppLoader 组件作为全局加载器
- 引入 Pinia 状态管理应用加载状态
- 创建 usePageScrollLock 组合式函数管理滚动锁定
- 重构首页动画流程，使用 Promise 链式调用
- 移除旧的 HomeLoader 组件
- 优化头部导航栏的入场动画触发逻辑

app/components/layouts/ArcticNewOneHeader.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, computed } from 'vue'
+import { onBeforeUnmount, onMounted, ref, computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { useAppStore } from '~/stores/app'
 
 gsap.registerPlugin(ScrollTrigger)
 
 const { t } = useI18n()
+const route = useRoute()
+const appStore = useAppStore()
 
 // 导航菜单数据配置
 const navItems = computed<Array<{name: string, path: string}>>(() => [
@@ -22,6 +26,7 @@ const bottomHeaderRef = ref<HTMLElement | null>(null)
 let topHeaderTween: gsap.core.Tween | null = null
 let bottomHeaderScrollTrigger: ReturnType<typeof ScrollTrigger.create> | null = null
 let isBottomHeaderVisible = false
+let fallbackTimer: ReturnType<typeof setTimeout> | null = null
 
 const setBottomHeaderVisible = (visible: boolean) => {
   if (!bottomHeaderRef.value || isBottomHeaderVisible === visible) {
@@ -39,10 +44,53 @@ const setBottomHeaderVisible = (visible: boolean) => {
   })
 }
 
-onMounted(() => {
-  // 移除之前这里强制设置透明度的代码，直接依靠 css 控制
-  // gsap.set(topHeaderRef.value, { y: '100vh', opacity: 0 })
+// 定义一个供外部或延迟调用的入场动画方法
+const playHeaderIntro = () => {
+  if (!topHeaderRef.value) return
 
+  // 如果已经触发过，清理可能存在的保底定时器
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
+  }
+
+  gsap.fromTo(topHeaderRef.value, 
+    {
+      y: '100vh', 
+      opacity: 0 // 恢复初始透明度为0，让它在屏幕最底部时是隐形的
+    },
+    {
+      y: 0, 
+      opacity: 1, // 伴随飞入的过程逐渐完全显示
+      duration: 1.4, 
+      ease: 'power4.out', 
+      delay: 0, 
+      clearProps: 'transform',
+      onComplete: () => {
+        // 动画完成时，强制把 style 的 opacity 移除，防止被内联样式锁死
+        if (topHeaderRef.value) {
+          topHeaderRef.value.style.opacity = ''
+        }
+        // 进场动画完毕后，再将滚动消失动画挂载到 ScrollTrigger
+        if (topHeaderTween) {
+          ScrollTrigger.create({
+            animation: topHeaderTween,
+            start: 0,
+            end: 200,
+            scrub: true,
+          })
+          ScrollTrigger.refresh()
+        }
+      }
+  })
+}
+
+// 监听自定义事件，当首页的 Hero 动画完成或到达特定阶段时触发导航栏入场
+const handleHeroReady = () => {
+  playHeaderIntro()
+}
+
+onMounted(() => {
   // 顶部导航在页面刚开始滚动的前 200px 内逐渐上移并隐藏。
   topHeaderTween = gsap.to(topHeaderRef.value, {
     yPercent: -140,
@@ -51,66 +99,6 @@ onMounted(() => {
     paused: true, // 初始不执行，等进场动画完毕再绑定到 ScrollTrigger
   })
 
-  // 定义一个供外部或延迟调用的入场动画方法
-  const playHeaderIntro = () => {
-    if (!topHeaderRef.value) return
-
-    gsap.fromTo(topHeaderRef.value, 
-      {
-        y: '100vh', 
-        opacity: 0 // 恢复初始透明度为0，让它在屏幕最底部时是隐形的
-      },
-      {
-        y: 0, 
-        opacity: 1, // 伴随飞入的过程逐渐完全显示
-        duration: 1.4, 
-        ease: 'power4.out', 
-        delay: 0, 
-        clearProps: 'transform',
-        onComplete: () => {
-          // 动画完成时，强制把 style 的 opacity 移除，防止被内联样式锁死
-          if (topHeaderRef.value) {
-            topHeaderRef.value.style.opacity = ''
-          // 进场动画完毕后，再将滚动消失动画挂载到 ScrollTrigger
-          if (topHeaderTween) {
-            ScrollTrigger.create({
-              animation: topHeaderTween,
-              start: 0,
-              end: 200,
-              scrub: true,
-            })
-            ScrollTrigger.refresh()
-          }
-        }
-      }
-    })
-  }
-
-  // 监听自定义事件，当首页的 Hero 动画完成或到达特定阶段时触发导航栏入场
-  const handleHeroReady = () => {
-    playHeaderIntro()
-  }
-
-  // 如果是在客户端执行，判断是否在首页
-  if (typeof window !== 'undefined') {
-    // 使用 setTimeout 宏任务确保所有 GSAP 设置生效，并且跳过初始渲染卡顿
-    setTimeout(() => {
-      if (window.location.pathname === '/') {
-        // 首页：等待自定义事件
-        window.addEventListener('hero-intro-done', handleHeroReady, { once: true })
-        
-        // 增加一个保底的 setTimeout，防止首页的动画事件因为某种原因未能触发（例如用户快速切换路由）
-        setTimeout(() => {
-          // 不再判断太复杂的 opacity 计算，只要 3.5s 到了，且 topHeaderRef 还有，直接执行，防止各种 bug 导致锁死
-          playHeaderIntro()
-        }, 3500) // 等待 3.5 秒（足够首页 intro 动画执行完）
-      } else {
-        // 非首页的保底进场
-        playHeaderIntro()
-      }
-    }, 0)
-  }
-
   // 底部导航默认藏在视口下方，只有滚动到深处并向上滚时才出现。
   gsap.set(bottomHeaderRef.value, {
     yPercent: 140,
@@ -139,16 +127,44 @@ onMounted(() => {
   ScrollTrigger.refresh()
 })
 
+// 监听全局加载状态，当加载完成后再决定 Header 的进场时机
+watch(() => appStore.isAppLoading, (isLoading) => {
+  if (!isLoading && typeof window !== 'undefined') {
+    if (route.path === '/') {
+      // 首页：等待自定义事件
+      window.addEventListener('hero-intro-done', handleHeroReady, { once: true })
+      
+      // 增加一个保底的 setTimeout，防止首页的动画事件因为某种原因未能触发
+      // 从 loading 结束开始算起，首页的 intro 和 hero 动画加起来大约 3~4 秒
+      fallbackTimer = setTimeout(() => {
+        window.removeEventListener('hero-intro-done', handleHeroReady)
+        playHeaderIntro()
+      }, 5000) 
+    } else {
+      // 非首页：加载完成后直接进场
+      playHeaderIntro()
+    }
+  }
+}, { immediate: true })
+
 onBeforeUnmount(() => {
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
+  }
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('hero-intro-done', handleHeroReady)
+  }
   topHeaderTween?.scrollTrigger?.kill()
   topHeaderTween?.kill()
   bottomHeaderScrollTrigger?.kill()
   topHeaderTween = null
   bottomHeaderScrollTrigger = null
   isBottomHeaderVisible = false
-  gsap.killTweensOf([topHeaderRef.value, bottomHeaderRef.value])
+  if (topHeaderRef.value && bottomHeaderRef.value) {
+    gsap.killTweensOf([topHeaderRef.value, bottomHeaderRef.value])
+  }
 })
-
 </script>
 
 <template>