From 044042fe7e6d48969339cbc8f3d546ce846f0669 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Mon, 27 Apr 2026 02:19:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=BA=94=E7=94=A8?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=B5=81=E7=A8=8B=E5=92=8C=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 AppLoader 组件作为全局加载器
- 引入 Pinia 状态管理应用加载状态
- 创建 usePageScrollLock 组合式函数管理滚动锁定
- 重构首页动画流程，使用 Promise 链式调用
- 移除旧的 HomeLoader 组件
- 优化头部导航栏的入场动画触发逻辑
---
 app/components/common/AppLoader.vue           | 140 +++++++++++
 app/components/home/HomeHero.vue              |  98 ++++----
 app/components/home/HomeIntro.vue             |  45 +++-
 app/components/home/HomeLoader.vue            |  65 -----
 app/components/layouts/ArcticNewOneHeader.vue | 148 ++++++-----
 app/composables/usePageScrollLock.ts          |  50 ++++
 app/layouts/default.vue                       |   2 +
 app/pages/index.vue                           | 237 ++----------------
 app/stores/app.ts                             |  15 ++
 9 files changed, 393 insertions(+), 407 deletions(-)
 create mode 100644 app/components/common/AppLoader.vue
 delete mode 100644 app/components/home/HomeLoader.vue
 create mode 100644 app/composables/usePageScrollLock.ts
 create mode 100644 app/stores/app.ts

diff --git a/app/components/common/AppLoader.vue b/app/components/common/AppLoader.vue
new file mode 100644
index 0000000..3d11203
--- /dev/null
+++ b/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>
diff --git a/app/components/home/HomeHero.vue b/app/components/home/HomeHero.vue
index 799e56a..70c2fc0 100644
--- a/app/components/home/HomeHero.vue
+++ b/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>
 
diff --git a/app/components/home/HomeIntro.vue b/app/components/home/HomeIntro.vue
index 5b95e95..58c5e3f 100644
--- a/app/components/home/HomeIntro.vue
+++ b/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;
diff --git a/app/components/home/HomeLoader.vue b/app/components/home/HomeLoader.vue
deleted file mode 100644
index c553fba..0000000
--- a/app/components/home/HomeLoader.vue
+++ /dev/null
@@ -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>
diff --git a/app/components/layouts/ArcticNewOneHeader.vue b/app/components/layouts/ArcticNewOneHeader.vue
index 3a3ae91..6a20c99 100644
--- a/app/components/layouts/ArcticNewOneHeader.vue
+++ b/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>
diff --git a/app/composables/usePageScrollLock.ts b/app/composables/usePageScrollLock.ts
new file mode 100644
index 0000000..961e756
--- /dev/null
+++ b/app/composables/usePageScrollLock.ts
@@ -0,0 +1,50 @@
+import { onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
+import { useNuxtApp } from '#app'
+import type Lenis from 'lenis'
+import { useAppStore } from '~/stores/app'
+
+export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
+  const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
+  
+  const lockScroll = () => {
+    if (import.meta.client) {
+      document.documentElement.classList.add('is-home-intro-active')
+      $lenis?.scrollTo(0, { immediate: true })
+      $lenis?.stop()
+    }
+  }
+
+  const unlockScroll = () => {
+    if (import.meta.client) {
+      document.documentElement.classList.remove('is-home-intro-active')
+      $lenis?.start()
+    }
+  }
+
+  // If passed a boolean, lock immediately and unlock on unmount
+  if (typeof isLocked === 'boolean') {
+    if (isLocked) {
+      onMounted(() => {
+        lockScroll()
+      })
+      onBeforeUnmount(() => {
+        unlockScroll()
+      })
+    }
+  } else {
+    // If passed a ref, watch its value
+    watch(isLocked, (locked) => {
+      if (locked) {
+        lockScroll()
+      } else {
+        unlockScroll()
+      }
+    }, { immediate: true })
+    
+    onBeforeUnmount(() => {
+      unlockScroll()
+    })
+  }
+
+  return { lockScroll, unlockScroll }
+}
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1a080ad..1aa9eb4 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,11 +2,13 @@
 import ArcticNewOneCursor from '~/components/layouts/ArcticNewOneCursor.vue';
 import ArcticNewOneFooter from '~/components/layouts/ArcticNewOneFooter.vue';
 import ArcticNewOneHeader from '~/components/layouts/ArcticNewOneHeader.vue';
+import AppLoader from '~/components/common/AppLoader.vue';
 
 </script>
 
 <template>
   <div>
+    <AppLoader />
     <ArcticNewOneHeader />
     <slot />
     <ArcticNewOneFooter />
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b271480..6f5795c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type Lenis from 'lenis'
-import gsap from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import { useUserStore } from '~/stores/user'
-import HomeLoader from '~/components/home/HomeLoader.vue'
+import { useAppStore } from '~/stores/app'
+import { usePageScrollLock } from '~/composables/usePageScrollLock'
 import HomeIntro from '~/components/home/HomeIntro.vue'
 import HomeHero from '~/components/home/HomeHero.vue'
 
-gsap.registerPlugin(ScrollTrigger)
-
 const { t } = useI18n()
-const isIntroActive = ref(true)
 const userStore = useUserStore()
+const appStore = useAppStore()
+
+const isIntroActive = ref(true)
+
 const demoUserName = computed(() => userStore.displayName)
 const demoUserRole = computed(() => userStore.role)
 
@@ -28,6 +27,9 @@ useHead({
   },
 })
 
+// 使用组合式函数管理 Lenis 滚动锁定
+usePageScrollLock(isIntroActive)
+
 // 首页的 SEO 和 Meta 优化，支持国际化响应式
 useSeoMeta({
   title: () => t('home.title'),
@@ -38,228 +40,27 @@ useSeoMeta({
   twitterDescription: () => t('home.welcome'),
 })
 
-const pageRef = ref<HTMLElement | null>(null)
-const homeLoaderRef = ref<InstanceType<typeof HomeLoader> | null>(null)
 const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
 const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
 
-let heroAnimationContext: gsap.Context | null = null
-let removeLoadListener: (() => void) | null = null
-let restorePageScroll: (() => void) | null = null
-let hasIntroStarted = false
-let loaderTween: gsap.core.Tween | null = null
-let introTimeline: gsap.core.Timeline | null = null
-let introStartTimer: ReturnType<typeof window.setTimeout> | null = null
-
-const setHomeIntroActive = (active: boolean) => {
-  isIntroActive.value = active
-  document.documentElement.classList.toggle('is-home-intro-active', active)
-}
-
-onMounted(() => {
-  const pageElement = pageRef.value
-  const loaderElement = homeLoaderRef.value?.loaderRef
-  const loaderBarElement = homeLoaderRef.value?.loaderBarRef
-  const introElement = homeIntroRef.value?.introRef
-  const introTitleElement = homeIntroRef.value?.introTitleRef
-  const heroElement = homeHeroRef.value?.heroRef
-
-  if (
-    !pageElement
-    || !loaderElement
-    || !loaderBarElement
-    || !introElement
-    || !introTitleElement
-    || !heroElement
-  ) {
-    return
+// 监听全局加载状态，加载完成后依次播放开场和首屏动画
+watch(() => appStore.isAppLoading, async (isLoading) => {
+  if (!isLoading) {
+    await homeIntroRef.value?.play()
+    await homeHeroRef.value?.play()
+    
+    // 动画播放完毕后解除页面滚动锁定
+    isIntroActive.value = false
   }
-
-  const introCharElements = gsap.utils.toArray('.hero-intro-char', introElement)
-  const tmElement = introElement.querySelector('.hero-intro-tm')
-
-  if (introCharElements.length === 0 || !tmElement) {
-    return
-  }
-
-  const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
-
-  heroAnimationContext = gsap.context(() => {
-    const playIntro = () => {
-      if (hasIntroStarted) {
-        return
-      }
-
-      hasIntroStarted = true
-      removeLoadListener?.()
-      removeLoadListener = null
-      if (introStartTimer) {
-        window.clearTimeout(introStartTimer)
-        introStartTimer = null
-      }
-      loaderTween?.kill()
-      loaderTween = null
-      introTimeline?.kill()
-
-      introTimeline = gsap.timeline({
-        defaults: { ease: 'power3.out' },
-        onComplete: () => {
-          gsap.set(introElement, { display: 'none' })
-          gsap.set(heroElement, { clearProps: 'transform' })
-          restorePageScroll?.()
-          restorePageScroll = null
-          ScrollTrigger.refresh()
-          introTimeline = null
-        },
-      })
-
-      introTimeline
-        .to(loaderBarElement, {
-          scaleX: 1,
-          duration: 0.25,
-          ease: 'power2.out',
-        })
-        .to(loaderElement, {
-          yPercent: -100,
-          duration: 0.75,
-          ease: 'power4.inOut',
-        })
-        .set(loaderElement, {
-          display: 'none',
-        })
-        .set(introElement, {
-          display: 'grid',
-          yPercent: 0,
-          autoAlpha: 1,
-        })
-        .set(introTitleElement, {
-          y: 0,
-          autoAlpha: 1,
-        })
-        .set(tmElement, {
-          autoAlpha: 0,
-        })
-        .fromTo(introCharElements, {
-          yPercent: 110,
-          y: 0,
-        }, {
-          yPercent: 0,
-          y: 0,
-          duration: 0.75,
-          stagger: 0.055,
-        })
-        .to(tmElement, {
-          autoAlpha: 1,
-          duration: 0.4,
-          ease: 'power2.out',
-        })
-        .addLabel('introOut', '+=0.35')
-        .to(introTitleElement, {
-          autoAlpha: 0,
-          duration: 1.05,
-          ease: 'power4.inOut',
-        }, 'introOut')
-        .to(introElement, {
-          yPercent: -100,
-          duration: 1.05,
-          ease: 'power4.inOut',
-        }, 'introOut')
-        .to(heroElement, {
-          yPercent: 0,
-          duration: 1.05,
-          ease: 'power4.inOut',
-          onUpdate: function() {
-            // 当 Hero (白色背景) 的 yPercent 运动到 40% 的时候（即大部分背景已经上浮到了屏幕内，还没完全贴顶），触发导航栏出场
-            const progress = this.progress()
-            // 使用一个标记防止重复触发
-            if (progress > 0.6 && !this._headerTriggered) {
-              this._headerTriggered = true
-              window.dispatchEvent(new Event('hero-intro-done'))
-            }
-          },
-          onStart: function() {
-            this._headerTriggered = false
-          }
-        }, 'introOut')
-    }
-
-    const releasePageScroll = () => {
-      setHomeIntroActive(false)
-      $lenis?.start()
-    }
-
-    // 首屏入场期间只通过 html class 锁滚动，避免 class 和 inline overflow 两套状态互相覆盖。
-    setHomeIntroActive(true)
-    $lenis?.scrollTo(0, { immediate: true })
-    $lenis?.stop()
-    restorePageScroll = releasePageScroll
-
-    // Loading 层先接管首屏；真正的品牌入场等 window.load 完成后再开始。
-    gsap.set(loaderElement, { display: 'grid', yPercent: 0, autoAlpha: 1 })
-    gsap.set(loaderBarElement, { scaleX: 0.18, transformOrigin: 'left center' })
-    gsap.set(introElement, { display: 'grid', yPercent: 0, autoAlpha: 0 })
-    gsap.set(introTitleElement, { y: 0, autoAlpha: 1 })
-    // 强制清除 CSS 中的 translateY 像素值，避免被 GSAP 解析为固定 y 像素导致一直不可见
-    gsap.set(introCharElements, { y: 0, yPercent: 110 })
-    gsap.set(tmElement, { autoAlpha: 0 })
-    gsap.set(heroElement, { yPercent: 100 })
-
-    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 queueIntro = () => {
-      const remainingTime = Math.max(0, minLoaderDuration - (window.performance.now() - loaderStartedAt))
-
-      introStartTimer = window.setTimeout(() => {
-        window.requestAnimationFrame(playIntro)
-      }, remainingTime)
-    }
-
-    if (document.readyState === 'complete') {
-      queueIntro()
-      return
-    }
-
-    window.addEventListener('load', queueIntro, { once: true })
-    removeLoadListener = () => window.removeEventListener('load', queueIntro)
-  }, pageElement)
-})
-
-onBeforeUnmount(() => {
-  setHomeIntroActive(false)
-  hasIntroStarted = false
-  if (introStartTimer) {
-    window.clearTimeout(introStartTimer)
-    introStartTimer = null
-  }
-  loaderTween?.kill()
-  loaderTween = null
-  introTimeline?.kill()
-  introTimeline = null
-  removeLoadListener?.()
-  removeLoadListener = null
-  restorePageScroll?.()
-  restorePageScroll = null
-  heroAnimationContext?.revert()
-  heroAnimationContext = null
-})
+}, { immediate: true })
 </script>
 
 <template>
   <main
-    ref="pageRef"
     id="top"
     :data-demo-user="demoUserName"
     :data-demo-user-role="demoUserRole"
   >
-    <HomeLoader ref="homeLoaderRef" />
     <HomeIntro ref="homeIntroRef" />
     <HomeHero ref="homeHeroRef" />
 
diff --git a/app/stores/app.ts b/app/stores/app.ts
new file mode 100644
index 0000000..c7bf489
--- /dev/null
+++ b/app/stores/app.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useAppStore = defineStore('app', () => {
+  const isAppLoading = ref(true)
+
+  const setAppLoading = (loading: boolean) => {
+    isAppLoading.value = loading
+  }
+
+  return {
+    isAppLoading,
+    setAppLoading,
+  }
+})