refactor(home): 将首页组件拆分为独立模块并优化代码结构

将首页的加载动画、介绍动画和英雄区域拆分为独立的组件文件
移除index.vue中冗余的样式和逻辑，通过组件引用方式重构
优化代码组织结构，提高可维护性

app/components/home/HomeHero.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+import type Lenis from 'lenis'
+import gsap from 'gsap'
+
+const heroPinDistance = 1200
+
+const heroGalleryColumns = [
+  {
+    side: 'left',
+    images: [
+      'https://picsum.photos/id/1018/900/1200',
+      'https://picsum.photos/id/1015/900/1200',
+      'https://picsum.photos/id/1024/900/1200',
+      'https://picsum.photos/id/1039/900/1200',
+    ],
+  },
+  {
+    side: 'right',
+    images: [
+      'https://picsum.photos/id/1043/900/1200',
+      'https://picsum.photos/id/1050/900/1200',
+      'https://picsum.photos/id/1067/900/1200',
+      'https://picsum.photos/id/1074/900/1200',
+    ],
+  },
+] as const
+
+const heroStageRef = ref<HTMLElement | null>(null)
+const heroRef = ref<HTMLElement | null>(null)
+const heroPanelRef = ref<HTMLElement | null>(null)
+
+let cleanupHeroScroll: (() => void) | null = null
+
+onMounted(() => {
+  const heroStageElement = heroStageRef.value
+  const heroPanelElement = heroPanelRef.value
+
+  if (!heroStageElement || !heroPanelElement) {
+    return
+  }
+
+  const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
+  const pinEndScale = 0.65
+  const finalScale = 0.18
+  const getExitDistance = () => window.innerHeight
+
+  const setupHeroScroll = () => {
+    cleanupHeroScroll?.()
+
+    gsap.set(heroPanelElement, {
+      scale: 1,
+      force3D: true,
+      transformOrigin: 'center center',
+    })
+
+    let renderedScale = -1
+
+    const setHeroPanelScale = (scale: number) => {
+      if (Math.abs(renderedScale - scale) < 0.001) {
+        return
+      }
+
+      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)
+    }
+  }
+
+  setupHeroScroll()
+})
+
+onBeforeUnmount(() => {
+  cleanupHeroScroll?.()
+  cleanupHeroScroll = null
+})
+
+defineExpose({
+  heroStageRef,
+  heroRef,
+})
+</script>
+
+<template>
+  <section
+    ref="heroStageRef"
+    class="hero-stage"
+    :style="{ '--hero-pin-distance': `${heroPinDistance}px` }"
+  >
+    <section ref="heroRef" class="hero-section" v-once>
+      <div class="hero-backdrop" aria-hidden="true">
+        <div
+          v-for="column in heroGalleryColumns"
+          :key="column.side"
+          class="hero-gallery"
+          :class="`hero-gallery-${column.side}`"
+        >
+          <!-- 复制两份图片组，配合 translateY(-50%) 做无缝循环。 -->
+          <div
+            class="hero-gallery-track"
+            :class="{ 'hero-gallery-track-slow': column.side === 'right' }"
+          >
+            <div v-for="copy in 2" :key="`${column.side}-copy-${copy}`" class="hero-gallery-group">
+              <img
+                v-for="image in column.images"
+                :key="`${column.side}-${copy}-${image}`"
+                class="hero-gallery-image"
+                :src="image"
+                alt=""
+                decoding="async"
+                loading="eager"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div ref="heroPanelRef" class="hero-panel">
+        <p>Hero Section</p>
+      </div>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.hero-stage {
+  position: relative;
+  height: calc(100svh + var(--hero-pin-distance));
+  background: #000;
+}
+
+.hero-section {
+  position: sticky;
+  top: 0;
+  height: 100svh;
+  overflow: hidden;
+  background: #111;
+}
+
+.hero-backdrop {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: #000;
+}
+
+.hero-gallery {
+  position: absolute;
+  top: -40px;
+  bottom: -40px;
+  width: 49vw;
+  overflow: hidden;
+}
+
+.hero-gallery-left {
+  left: 0;
+}
+
+.hero-gallery-right {
+  right: 0;
+}
+
+.hero-gallery-track {
+  will-change: transform;
+  animation: hero-gallery-scroll 28s linear infinite;
+}
+
+.hero-gallery-track-slow {
+  animation-duration: 42s;
+}
+
+.hero-gallery-group {
+  display: grid;
+  gap: 36px;
+  padding-bottom: 36px;
+}
+
+.hero-gallery-image {
+  display: block;
+  width: 100%;
+  height: clamp(260px, 42vh, 430px);
+  border-radius: 0;
+  object-fit: cover;
+}
+
+@keyframes hero-gallery-scroll {
+  to {
+    transform: translateY(-50%);
+  }
+}
+
+.hero-panel {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: #fff;
+  font-size: 48px;
+  will-change: transform;
+}
+</style>

app/components/home/HomeIntro.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const introTitle = 'ArcticNewOne'
+const introLetters = introTitle.split('')
+
+const introRef = ref<HTMLElement | null>(null)
+const introTitleRef = ref<HTMLElement | null>(null)
+
+defineExpose({
+  introRef,
+  introTitleRef
+})
+</script>
+
+<template>
+  <div ref="introRef" class="hero-intro" aria-hidden="true">
+    <h1 ref="introTitleRef" class="hero-intro-title" :aria-label="introTitle" v-once>
+      <span class="hero-intro-word">
+        <span
+          v-for="(letter, index) in introLetters"
+          :key="`${letter}-${index}`"
+          class="hero-intro-char-wrap"
+        >
+          <span class="hero-intro-char">{{ letter }}</span>
+        </span>
+        <span class="hero-intro-tm">TM</span>
+      </span>
+    </h1>
+  </div>
+</template>
+
+<style scoped>
+.hero-intro {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  color: #fff;
+  background: #000;
+  opacity: 0;
+  visibility: hidden;
+  will-change: transform;
+}
+
+.hero-intro-title {
+  display: flex;
+  margin: 0;
+  font-size: clamp(36px, 6.2vw, 104px);
+  font-weight: 700;
+  line-height: 0.9;
+  letter-spacing: -0.07em;
+  white-space: nowrap;
+}
+
+.hero-intro-word {
+  position: relative;
+  display: inline-flex;
+}
+
+.hero-intro-char-wrap,
+.hero-intro-char {
+  display: inline-block;
+}
+
+.hero-intro-char-wrap {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-intro-char {
+  will-change: transform;
+}
+
+.hero-intro-tm {
+  position: absolute;
+  left: calc(100% + 0.12em);
+  top: 0.08em;
+  font-size: 0.13em;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  opacity: 0;
+  visibility: hidden;
+}
+</style>

app/components/home/HomeLoader.vue

@@ -0,0 +1,65 @@
+<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/pages/index.vue

@@ -5,13 +5,13 @@ 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 HomeIntro from '~/components/home/HomeIntro.vue'
+import HomeHero from '~/components/home/HomeHero.vue'
 
 gsap.registerPlugin(ScrollTrigger)
 
 const { t } = useI18n()
-const introTitle = 'ArcticNewOne'
-const introLetters = introTitle.split('')
-const heroPinDistance = 1200
 const isIntroActive = ref(true)
 const userStore = useUserStore()
 const demoUserName = computed(() => userStore.displayName)
@@ -38,39 +38,14 @@ useSeoMeta({
   twitterDescription: () => t('home.welcome'),
 })
 
-// 背景图是装饰层，左右两列共用同一套模板，只通过 side 区分位置和速度。
-const heroGalleryColumns = [
-  {
-    side: 'left',
-    images: [
-      'https://picsum.photos/id/1018/900/1200',
-      'https://picsum.photos/id/1015/900/1200',
-      'https://picsum.photos/id/1024/900/1200',
-      'https://picsum.photos/id/1039/900/1200',
-    ],
-  },
-  {
-    side: 'right',
-    images: [
-      'https://picsum.photos/id/1043/900/1200',
-      'https://picsum.photos/id/1050/900/1200',
-      'https://picsum.photos/id/1067/900/1200',
-      'https://picsum.photos/id/1074/900/1200',
-    ],
-  },
-] as const
 const pageRef = ref<HTMLElement | null>(null)
-const loaderRef = ref<HTMLElement | null>(null)
+const homeLoaderRef = ref<InstanceType<typeof HomeLoader> | null>(null)
-const loaderBarRef = ref<HTMLElement | null>(null)
+const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
-const introRef = ref<HTMLElement | null>(null)
+const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
-const introTitleRef = ref<HTMLElement | null>(null)
+
-const heroStageRef = ref<HTMLElement | null>(null)
-const heroRef = ref<HTMLElement | null>(null)
-const heroPanelRef = ref<HTMLElement | null>(null)
 let heroAnimationContext: gsap.Context | null = null
 let removeLoadListener: (() => void) | null = null
 let restorePageScroll: (() => void) | null = null
-let cleanupHeroScroll: (() => void) | null = null
 let hasIntroStarted = false
 let loaderTween: gsap.core.Tween | null = null
 let introTimeline: gsap.core.Timeline | null = null
@@ -83,13 +58,11 @@ const setHomeIntroActive = (active: boolean) => {
 
 onMounted(() => {
   const pageElement = pageRef.value
-  const loaderElement = loaderRef.value
+  const loaderElement = homeLoaderRef.value?.loaderRef
-  const loaderBarElement = loaderBarRef.value
+  const loaderBarElement = homeLoaderRef.value?.loaderBarRef
-  const introElement = introRef.value
+  const introElement = homeIntroRef.value?.introRef
-  const introTitleElement = introTitleRef.value
+  const introTitleElement = homeIntroRef.value?.introTitleRef
-  const heroStageElement = heroStageRef.value
+  const heroElement = homeHeroRef.value?.heroRef
-  const heroElement = heroRef.value
-  const heroPanelElement = heroPanelRef.value
 
   if (
     !pageElement
@@ -97,9 +70,7 @@ onMounted(() => {
     || !loaderBarElement
     || !introElement
     || !introTitleElement
-    || !heroStageElement
     || !heroElement
-    || !heroPanelElement
   ) {
     return
   }
@@ -112,63 +83,8 @@ onMounted(() => {
   }
 
   const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
-  const topHeader = document.querySelector<HTMLElement>('.site-header-top')
 
   heroAnimationContext = gsap.context(() => {
-    const pinEndScale = 0.65
-    const finalScale = 0.18
-    const getExitDistance = () => window.innerHeight
-
-    const setupHeroScroll = () => {
-      cleanupHeroScroll?.()
-
-      gsap.set(heroPanelElement, {
-        scale: 1,
-        force3D: true,
-        transformOrigin: 'center center',
-      })
-
-      let renderedScale = -1
-
-      const setHeroPanelScale = (scale: number) => {
-        if (Math.abs(renderedScale - scale) < 0.001) {
-          return
-        }
-
-        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)
-      }
-    }
-
     const playIntro = () => {
       if (hasIntroStarted) {
         return
@@ -265,22 +181,6 @@ onMounted(() => {
             this._headerTriggered = false
           }
         }, 'introOut')
-      // 取消原本通过 index.vue 直接控制导航栏 yPercent 的行为
-      // 因为我们要让 Header 自己执行从屏幕底部（y: 100vh）飞入的高级动画
-      // if (topHeader) {
-      //   introTimeline.to(topHeader, {
-      //     yPercent: 0,
-      //     autoAlpha: 1,
-      //     duration: 0.55,
-      //     ease: 'power3.out',
-      //   }, 'introOut+=0.45')
-      // }
-
-      // 在动画即将完成或者 Hero 入场时触发自定义事件，通知导航栏执行自身的从下往上飞入动画
-      // 将触发时机再延后，等白色背景开始渲染的瞬间就触发
-      // introTimeline.add(() => {
-      //   window.dispatchEvent(new Event('hero-intro-done'))
-      // }, 'introOut')
     }
 
     const releasePageScroll = () => {
@@ -303,7 +203,6 @@ onMounted(() => {
     gsap.set(introCharElements, { y: 0, yPercent: 110 })
     gsap.set(tmElement, { autoAlpha: 0 })
     gsap.set(heroElement, { yPercent: 100 })
-    setupHeroScroll()
 
     loaderTween = gsap.to(loaderBarElement, {
       scaleX: 0.82,
@@ -344,8 +243,6 @@ onBeforeUnmount(() => {
   loaderTween = null
   introTimeline?.kill()
   introTimeline = null
-  cleanupHeroScroll?.()
-  cleanupHeroScroll = null
   removeLoadListener?.()
   removeLoadListener = null
   restorePageScroll?.()
@@ -353,7 +250,6 @@ onBeforeUnmount(() => {
   heroAnimationContext?.revert()
   heroAnimationContext = null
 })
-
 </script>
 
 <template>
@@ -363,67 +259,10 @@ onBeforeUnmount(() => {
     :data-demo-user="demoUserName"
     :data-demo-user-role="demoUserRole"
   >
-    <div ref="loaderRef" class="page-loader" aria-hidden="true" v-once>
+    <HomeLoader ref="homeLoaderRef" />
-      <div class="page-loader-content">
+    <HomeIntro ref="homeIntroRef" />
-        <p>Loading</p>
+    <HomeHero ref="homeHeroRef" />
-        <span class="page-loader-line">
-          <span ref="loaderBarRef" class="page-loader-line-inner" />
-        </span>
-      </div>
-    </div>
 
-    <div ref="introRef" class="hero-intro" aria-hidden="true">
-      <h1 ref="introTitleRef" class="hero-intro-title" :aria-label="introTitle" v-once>
-        <span class="hero-intro-word">
-          <span
-            v-for="(letter, index) in introLetters"
-            :key="`${letter}-${index}`"
-            class="hero-intro-char-wrap"
-          >
-            <span class="hero-intro-char">{{ letter }}</span>
-          </span>
-          <span class="hero-intro-tm">TM</span>
-        </span>
-      </h1>
-    </div>
-
-    <section
-      ref="heroStageRef"
-      class="hero-stage"
-      :style="{ '--hero-pin-distance': `${heroPinDistance}px` }"
-    >
-      <section ref="heroRef" class="hero-section" v-once>
-        <div class="hero-backdrop" aria-hidden="true">
-          <div
-            v-for="column in heroGalleryColumns"
-            :key="column.side"
-            class="hero-gallery"
-            :class="`hero-gallery-${column.side}`"
-          >
-            <!-- 复制两份图片组，配合 translateY(-50%) 做无缝循环。 -->
-            <div
-              class="hero-gallery-track"
-              :class="{ 'hero-gallery-track-slow': column.side === 'right' }"
-            >
-              <div v-for="copy in 2" :key="`${column.side}-copy-${copy}`" class="hero-gallery-group">
-                <img
-                  v-for="image in column.images"
-                  :key="`${column.side}-${copy}-${image}`"
-                  class="hero-gallery-image"
-                  :src="image"
-                  alt=""
-                  decoding="async"
-                  loading="eager"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div ref="heroPanelRef" class="hero-panel">
-          <p>Hero Section</p>
-        </div>
-      </section>
-    </section>
     <section class="next-section">
       <h2>Next Section</h2>
     </section>
@@ -434,176 +273,6 @@ onBeforeUnmount(() => {
 </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;
-}
-
-.hero-intro {
-  position: fixed;
-  inset: 0;
-  z-index: 80;
-  display: grid;
-  place-items: center;
-  overflow: hidden;
-  color: #fff;
-  background: #000;
-  opacity: 0;
-  visibility: hidden;
-  will-change: transform;
-}
-
-.hero-intro-title {
-  display: flex;
-  margin: 0;
-  font-size: clamp(36px, 6.2vw, 104px);
-  font-weight: 700;
-  line-height: 0.9;
-  letter-spacing: -0.07em;
-  white-space: nowrap;
-}
-
-.hero-intro-word {
-  position: relative;
-  display: inline-flex;
-}
-
-.hero-intro-char-wrap,
-.hero-intro-char {
-  display: inline-block;
-}
-
-.hero-intro-char-wrap {
-  position: relative;
-  overflow: hidden;
-}
-
-.hero-intro-char {
-  will-change: transform;
-}
-
-.hero-intro-tm {
-  position: absolute;
-  left: calc(100% + 0.12em);
-  top: 0.08em;
-  font-size: 0.13em;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.hero-stage {
-  position: relative;
-  height: calc(100svh + var(--hero-pin-distance));
-  background: #000;
-}
-
-.hero-section {
-  position: sticky;
-  top: 0;
-  height: 100svh;
-  overflow: hidden;
-  background: #111;
-}
-
-.hero-backdrop {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  background: #000;
-}
-
-.hero-gallery {
-  position: absolute;
-  top: -40px;
-  bottom: -40px;
-  width: 49vw;
-  overflow: hidden;
-}
-
-.hero-gallery-left {
-  left: 0;
-}
-
-.hero-gallery-right {
-  right: 0;
-}
-
-.hero-gallery-track {
-  will-change: transform;
-  animation: hero-gallery-scroll 28s linear infinite;
-}
-
-.hero-gallery-track-slow {
-  animation-duration: 42s;
-}
-
-.hero-gallery-group {
-  display: grid;
-  gap: 36px;
-  padding-bottom: 36px;
-}
-
-.hero-gallery-image {
-  display: block;
-  width: 100%;
-  height: clamp(260px, 42vh, 430px);
-  border-radius: 0;
-  object-fit: cover;
-}
-
-@keyframes hero-gallery-scroll {
-  to {
-    transform: translateY(-50%);
-  }
-}
-
-.hero-panel {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  background: #fff;
-  font-size: 48px;
-  will-change: transform;
-}
-
 .next-section,
 .work-section {
   min-height: 100svh;