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

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

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>