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

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

app/components/common/AppLoader.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import gsap from 'gsap'
+import { useAppStore } from '~/stores/app'
+import { usePageScrollLock } from '~/composables/usePageScrollLock'
+
+const loaderRef = ref<HTMLElement | null>(null)
+const loaderBarRef = ref<HTMLElement | null>(null)
+const appStore = useAppStore()
+
+// Lock scroll while app is loading
+usePageScrollLock(appStore.isAppLoading)
+
+let loaderTween: gsap.core.Tween | null = null
+let removeLoadListener: (() => void) | null = null
+let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
+
+onMounted(() => {
+  const loaderElement = loaderRef.value
+  const loaderBarElement = loaderBarRef.value
+
+  if (!loaderElement || !loaderBarElement) return
+
+  // Initial GSAP setup
+  gsap.set(loaderElement, { display: 'grid', yPercent: 0, autoAlpha: 1 })
+  gsap.set(loaderBarElement, { scaleX: 0.18, transformOrigin: 'left center' })
+
+  // Loader bar bouncing animation
+  loaderTween = gsap.to(loaderBarElement, {
+    scaleX: 0.82,
+    duration: 1.2,
+    ease: 'power1.inOut',
+    repeat: -1,
+    yoyo: true,
+  })
+
+  const loaderStartedAt = window.performance.now()
+  const minLoaderDuration = 1200
+
+  const finishLoading = () => {
+    removeLoadListener?.()
+    removeLoadListener = null
+
+    if (introStartTimer) {
+      window.clearTimeout(introStartTimer)
+      introStartTimer = null
+    }
+
+    const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
+
+    introStartTimer = window.setTimeout(() => {
+      // End the loader loop and slide out
+      loaderTween?.kill()
+      loaderTween = null
+
+      const tl = gsap.timeline({
+        onComplete: () => {
+          gsap.set(loaderElement, { display: 'none' })
+          appStore.setAppLoading(false)
+        }
+      })
+
+      tl.to(loaderBarElement, {
+        scaleX: 1,
+        duration: 0.25,
+        ease: 'power2.out',
+      }).to(loaderElement, {
+        yPercent: -100,
+        duration: 0.75,
+        ease: 'power4.inOut',
+      })
+    }, remainingTime)
+  }
+
+  if (document.readyState === 'complete') {
+    finishLoading()
+  } else {
+    window.addEventListener('load', finishLoading, { once: true })
+    removeLoadListener = () => window.removeEventListener('load', finishLoading)
+  }
+})
+
+onBeforeUnmount(() => {
+  loaderTween?.kill()
+  if (introStartTimer) window.clearTimeout(introStartTimer)
+  removeLoadListener?.()
+})
+</script>
+
+<template>
+  <div ref="loaderRef" class="page-loader" aria-hidden="true">
+    <div class="page-loader-content">
+      <p>Loading</p>
+      <span class="page-loader-line">
+        <span ref="loaderBarRef" class="page-loader-line-inner" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.page-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  background: #000;
+  will-change: transform;
+}
+
+.page-loader-content {
+  width: min(220px, calc(100vw - 48px));
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.page-loader-content p {
+  margin: 0 0 14px;
+}
+
+.page-loader-line {
+  display: block;
+  width: 100%;
+  height: 1px;
+  overflow: hidden;
+  background: rgb(255 255 255 / 20%);
+}
+
+.page-loader-line-inner {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  transform: scaleX(0);
+  transform-origin: left center;
+}
+</style>

app/components/home/HomeHero.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref } from 'vue'
 import { useNuxtApp } from '#app'
-import type Lenis from 'lenis'
 import gsap from 'gsap'
 
 const heroPinDistance = 1200
@@ -33,70 +32,64 @@ const heroPanelRef = ref<HTMLElement | null>(null)
 
 let cleanupHeroScroll: (() => void) | null = null
 
-onMounted(() => {
-  const heroStageElement = heroStageRef.value
-  const heroPanelElement = heroPanelRef.value
+const play = () => new Promise<void>((resolve) => {
+  if (!heroRef.value) return resolve()
 
-  if (!heroStageElement || !heroPanelElement) {
-    return
+  let eventDispatched = false
+
+  gsap.to(heroRef.value, {
+    yPercent: 0,
+    duration: 1.2,
+    ease: 'power3.out',
+    onUpdate() {
+      if (!eventDispatched && this.progress() > 0.6) {
+        eventDispatched = true
+        window.dispatchEvent(new CustomEvent('hero-intro-done'))
+      }
+    },
+    onComplete: resolve,
+  })
+})
+
+onMounted(() => {
+  if (heroRef.value) {
+    gsap.set(heroRef.value, { yPercent: 100 })
   }
 
-  const { $lenis } = useNuxtApp()
+  if (!heroStageRef.value || !heroPanelRef.value) return
+
+  const { $lenis } = useNuxtApp() as { $lenis?: { scroll: number } }
   const pinEndScale = 0.65
   const finalScale = 0.18
-  const getExitDistance = () => window.innerHeight
+  const stageTop = heroStageRef.value.offsetTop
 
-  const setupHeroScroll = () => {
-    cleanupHeroScroll?.()
+  gsap.set(heroPanelRef.value, {
+    scale: 1,
+    force3D: true,
+    transformOrigin: 'center center',
+  })
 
-    gsap.set(heroPanelElement, {
-      scale: 1,
-      force3D: true,
-      transformOrigin: 'center center',
-    })
+  let renderedScale = -1
 
-    let renderedScale = -1
+  const updateHeroPanelScale = () => {
+    const exitDistance = window.innerHeight
+    const totalDistance = heroPinDistance + exitDistance
+    const currentScroll = $lenis ? $lenis.scroll : window.scrollY
+    const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - stageTop)
 
-    const setHeroPanelScale = (scale: number) => {
-      if (Math.abs(renderedScale - scale) < 0.001) {
-        return
-      }
+    const newScale = currentDistance <= heroPinDistance
+      ? gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance)
+      : gsap.utils.interpolate(pinEndScale, finalScale, (currentDistance - heroPinDistance) / exitDistance)
 
-      renderedScale = scale
-      gsap.set(heroPanelElement, { scale })
-    }
-
-    const updateHeroPanelScale = () => {
-      const exitDistance = getExitDistance()
-      const totalDistance = heroPinDistance + exitDistance
-      // Lenis 存在时只读 Lenis 的平滑滚动值，避免向上滚时 window.scrollY 和 Lenis 值互相打架。
-      const currentScroll = $lenis ? $lenis.scroll : window.scrollY
-      const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - heroStageElement.offsetTop)
-
-      if (currentDistance <= heroPinDistance) {
-        setHeroPanelScale(gsap.utils.interpolate(1, pinEndScale, currentDistance / heroPinDistance))
-        return
-      }
-
-      setHeroPanelScale(
-        gsap.utils.interpolate(
-          pinEndScale,
-          finalScale,
-          (currentDistance - heroPinDistance) / exitDistance,
-        ),
-      )
-    }
-
-    // CSS sticky 负责固定；ticker 每帧读取当前滚动距离，避免依赖 scroll/ScrollTrigger 事件链。
-    updateHeroPanelScale()
-    gsap.ticker.add(updateHeroPanelScale)
-
-    cleanupHeroScroll = () => {
-      gsap.ticker.remove(updateHeroPanelScale)
+    if (Math.abs(renderedScale - newScale) > 0.001) {
+      renderedScale = newScale
+      gsap.set(heroPanelRef.value, { scale: newScale })
     }
   }
 
-  setupHeroScroll()
+  updateHeroPanelScale()
+  gsap.ticker.add(updateHeroPanelScale)
+  cleanupHeroScroll = () => gsap.ticker.remove(updateHeroPanelScale)
 })
 
 onBeforeUnmount(() => {
@@ -107,6 +100,7 @@ onBeforeUnmount(() => {
 defineExpose({
   heroStageRef,
   heroRef,
+  play,
 })
 </script>
 

app/components/home/HomeIntro.vue

@@ -1,16 +1,49 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onBeforeUnmount } from 'vue'
+import gsap from 'gsap'
 
 const introTitle = 'ArcticNewOne'
 const introLetters = introTitle.split('')
-
 const introRef = ref<HTMLElement | null>(null)
 const introTitleRef = ref<HTMLElement | null>(null)
+let ctx: gsap.Context | null = null
 
-defineExpose({
-  introRef,
-  introTitleRef
+const play = () => new Promise<void>((resolve) => {
+  if (!introRef.value || !introTitleRef.value) return resolve()
+
+  const chars = gsap.utils.toArray('.hero-intro-char', introRef.value)
+  const tm = introRef.value.querySelector('.hero-intro-tm')
+
+  if (!chars.length || !tm) return resolve()
+
+  ctx = gsap.context(() => {
+    // 初始化样式
+    gsap.set(introRef.value, { display: 'grid', yPercent: 0, autoAlpha: 1 })
+    gsap.set(introTitleRef.value, { y: 0, autoAlpha: 1 })
+    gsap.set(chars, { y: 0, yPercent: 110 })
+    gsap.set(tm, { autoAlpha: 0 })
+
+    gsap.timeline({
+      defaults: { ease: 'power3.out' },
+      onComplete: () => {
+        gsap.set(introRef.value, { display: 'none' })
+        resolve()
+      }
+    })
+      // 逐字升起
+      .to(chars, { yPercent: 0, duration: 0.75, stagger: 0.055 })
+      // TM 渐显
+      .to(tm, { autoAlpha: 1, duration: 0.4, ease: 'power2.out' })
+      // 停顿 0.35s 后，整体上移并淡出标题
+      .addLabel('introOut', '+=0.35')
+      .to(introTitleRef.value, { autoAlpha: 0, duration: 1.05, ease: 'power4.inOut' }, 'introOut')
+      .to(introRef.value, { yPercent: -100, duration: 1.05, ease: 'power4.inOut' }, 'introOut')
+  }, introRef.value)
 })
+
+onBeforeUnmount(() => ctx?.revert())
+
+defineExpose({ play })
 </script>
 
 <template>
@@ -35,7 +68,7 @@ defineExpose({
   position: fixed;
   inset: 0;
   z-index: 80;
-  display: grid;
+  display: none;
   place-items: center;
   overflow: hidden;
   color: #fff;

app/components/home/HomeLoader.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-// 定义 loader 相关的 DOM 引用
-const loaderRef = ref<HTMLElement | null>(null)
-const loaderBarRef = ref<HTMLElement | null>(null)
-
-// 暴露这两个 ref 供外部使用
-defineExpose({
-  loaderRef,
-  loaderBarRef
-})
-</script>
-
-<template>
-  <div ref="loaderRef" class="page-loader" aria-hidden="true" v-once>
-    <div class="page-loader-content">
-      <p>Loading</p>
-      <span class="page-loader-line">
-        <span ref="loaderBarRef" class="page-loader-line-inner" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 90;
-  display: grid;
-  place-items: center;
-  color: #fff;
-  background: #000;
-  will-change: transform;
-}
-
-.page-loader-content {
-  width: min(220px, calc(100vw - 48px));
-  font-size: 12px;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-}
-
-.page-loader-content p {
-  margin: 0 0 14px;
-}
-
-.page-loader-line {
-  display: block;
-  width: 100%;
-  height: 1px;
-  overflow: hidden;
-  background: rgb(255 255 255 / 20%);
-}
-
-.page-loader-line-inner {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: #fff;
-  transform: scaleX(0);
-  transform-origin: left center;
-}
-</style>

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>