feat: 添加 Pinia 状态管理并重构首页动画逻辑

- 添加 Pinia 作为状态管理工具，创建用户 store 管理登录状态
- 重构首页动画逻辑，使用 CSS sticky 替代 ScrollTrigger 实现更流畅的滚动效果
- 优化首屏加载和动画播放流程，修复热更新时的样式残留问题
- 添加演示用户数据并展示在页面属性中

app/pages/index.vue

@@ -4,13 +4,22 @@ import { useI18n } from 'vue-i18n'
 import type Lenis from 'lenis'
 import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { useUserStore } from '~/stores/user'
 
 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)
+const demoUserRole = computed(() => userStore.role)
+
+if (!userStore.isLoggedIn) {
+  userStore.loadDemoUser()
+}
 
 // 让首屏入场的锁滚动在 SSR/首帧就生效，避免等 onMounted 才隐藏滚动条。
 useHead({
@@ -42,15 +51,16 @@ const heroGalleryColumns = [
 ] as const
 const pageRef = ref<HTMLElement | null>(null)
 const introRef = ref<HTMLElement | null>(null)
+const heroStageRef = ref<HTMLElement | null>(null)
 const heroRef = ref<HTMLElement | null>(null)
 const heroPanelRef = ref<HTMLElement | null>(null)
-const nextSectionRef = 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
 
 onMounted(() => {
-  if (!pageRef.value || !introRef.value || !heroRef.value || !nextSectionRef.value) {
+  if (!pageRef.value || !introRef.value || !heroStageRef.value || !heroRef.value || !heroPanelRef.value) {
     return
   }
 
@@ -58,46 +68,58 @@ onMounted(() => {
   const topHeader = document.querySelector<HTMLElement>('.site-header-top')
 
   heroAnimationContext = gsap.context(() => {
-    // pinDistance 控制 Hero 固定阶段的滚动长度；scrollScrub 控制滚动追随的柔和程度。
+    const pinEndScale = 0.65
-    const pinDistance = 1200
+    const finalScale = 0.18
-    const scrollScrub = 0.65
+    const getExitDistance = () => window.innerHeight
 
     const setupHeroScroll = () => {
+      cleanupHeroScroll?.()
+
       gsap.set(heroPanelRef.value, {
         scale: 1,
+        force3D: true,
         transformOrigin: 'center center',
       })
 
-      // 第一段：Hero 停在屏幕中，前景白色面板先缩小，露出背后的图片列。
+      const setHeroPanelScale = (scale: number) => {
-      gsap.timeline({
+        if (!heroPanelRef.value) {
-        scrollTrigger: {
+          return
-          trigger: heroRef.value,
+        }
-          start: 'top top',
-          end: `+=${pinDistance}`,
-          scrub: scrollScrub,
-          pin: true,
-          anticipatePin: 1,
-        },
-      })
-        .to(heroPanelRef.value, {
-          scale: 0.65,
-          ease: 'none',
-        })
 
-      // 第二段：取消 pin 后，下一个板块开始进入，白色面板继续缩小。
+        heroPanelRef.value.style.transform = `scale(${scale})`
-      gsap.fromTo(heroPanelRef.value, {
+      }
-        scale: 0.65,
+
-      }, {
+      const updateHeroPanelScale = () => {
-        scale: 0.18,
+        if (!heroStageRef.value) {
-        ease: 'none',
+          return
-        immediateRender: false,
+        }
-        scrollTrigger: {
+
-          trigger: nextSectionRef.value,
+        const exitDistance = getExitDistance()
-          start: 'top bottom',
+        const totalDistance = heroPinDistance + exitDistance
-          end: 'top top',
+        const currentScroll = Math.max(window.scrollY, $lenis?.scroll ?? 0)
-          scrub: scrollScrub,
+        const currentDistance = gsap.utils.clamp(0, totalDistance, currentScroll - heroStageRef.value.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 = () => {
@@ -107,13 +129,11 @@ onMounted(() => {
       const introTimeline = gsap.timeline({
         defaults: { ease: 'power3.out' },
         onComplete: () => {
-          gsap.set(heroRef.value, { clearProps: 'transform' })
           gsap.set(introRef.value, { display: 'none' })
-          setupHeroScroll()
+          gsap.set(heroRef.value, { clearProps: 'transform' })
-          ScrollTrigger.refresh()
-          isIntroActive.value = false
           restorePageScroll?.()
           restorePageScroll = null
+          ScrollTrigger.refresh()
         },
       })
 
@@ -123,13 +143,12 @@ onMounted(() => {
           duration: 0.75,
           stagger: 0.055,
         })
+        .addLabel('introOut', '+=0.35')
         .to('.hero-intro-title', {
-          y: -28,
           autoAlpha: 0,
-          duration: 0.45,
+          duration: 1.05,
-          ease: 'power2.in',
+          ease: 'power4.inOut',
-        }, '+=0.35')
+        }, 'introOut')
-        .addLabel('introOut')
         .to(introRef.value, {
           yPercent: -100,
           duration: 1.05,
@@ -154,21 +173,30 @@ onMounted(() => {
     const previousHtmlOverflow = document.documentElement.style.overflow
     const previousBodyOverflow = document.body.style.overflow
 
-    $lenis?.scrollTo(0, { immediate: true })
+    const releasePageScroll = () => {
-    $lenis?.stop()
+      isIntroActive.value = false
-    document.documentElement.style.overflow = 'hidden'
+      document.documentElement.classList.remove('is-home-intro-active')
-    document.body.style.overflow = 'hidden'
-    restorePageScroll = () => {
       document.documentElement.style.overflow = previousHtmlOverflow
       document.body.style.overflow = previousBodyOverflow
       $lenis?.start()
     }
 
-    gsap.set(heroRef.value, { yPercent: 100 })
+    document.documentElement.classList.add('is-home-intro-active')
+    document.documentElement.style.overflow = 'hidden'
+    document.body.style.overflow = 'hidden'
+    $lenis?.scrollTo(0, { immediate: true })
+    $lenis?.stop()
+    restorePageScroll = releasePageScroll
+
+    // 每次播放前都重置首屏状态，避免热更新或页面返回时残留上一次的 inline style。
+    gsap.set(introRef.value, { display: 'grid', yPercent: 0, autoAlpha: 1 })
+    gsap.set('.hero-intro-title', { y: 0, autoAlpha: 1 })
     gsap.set('.hero-intro-char', { yPercent: 110 })
+    gsap.set(heroRef.value, { yPercent: 100 })
     if (topHeader) {
       gsap.set(topHeader, { yPercent: -140, autoAlpha: 0 })
     }
+    setupHeroScroll()
 
     if (document.readyState === 'complete') {
       requestAnimationFrame(playIntro)
@@ -182,6 +210,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   isIntroActive.value = false
+  cleanupHeroScroll?.()
+  cleanupHeroScroll = null
   removeLoadListener?.()
   removeLoadListener = null
   restorePageScroll?.()
@@ -193,7 +223,12 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <main ref="pageRef" id="top">
+  <main
+    ref="pageRef"
+    id="top"
+    :data-demo-user="demoUserName"
+    :data-demo-user-role="demoUserRole"
+  >
     <div ref="introRef" class="hero-intro" aria-hidden="true">
       <h1 class="hero-intro-title" :aria-label="introTitle">
         <span
@@ -207,6 +242,11 @@ onBeforeUnmount(() => {
       </h1>
     </div>
 
+    <section
+      ref="heroStageRef"
+      class="hero-stage"
+      :style="{ '--hero-pin-distance': `${heroPinDistance}px` }"
+    >
       <section ref="heroRef" class="hero-section">
         <div class="hero-backdrop" aria-hidden="true">
           <div
@@ -238,7 +278,8 @@ onBeforeUnmount(() => {
           <p>Hero Section</p>
         </div>
       </section>
-    <section ref="nextSectionRef" class="next-section">
+    </section>
+    <section class="next-section">
       <h2>Next Section</h2>
     </section>
     <section id="work" class="work-section" data-cursor-label="Read more">
@@ -295,12 +336,18 @@ onBeforeUnmount(() => {
   line-height: 1;
 }
 
-.hero-section {
+.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;
-  will-change: transform;
 }
 
 .hero-backdrop {

app/stores/user.ts

@@ -0,0 +1,26 @@
+import { computed, ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', () => {
+  const id = ref('')
+  const displayName = ref('')
+  const role = ref('')
+  const locale = ref('zh-CN')
+
+  const isLoggedIn = computed(() => Boolean(id.value))
+
+  function loadDemoUser() {
+    id.value = 'demo-user'
+    displayName.value = 'Arctic Demo User'
+    role.value = 'Viewer'
+  }
+
+  return {
+    id,
+    displayName,
+    role,
+    locale,
+    isLoggedIn,
+    loadDemoUser,
+  }
+})

package.json

@@ -17,6 +17,7 @@
     "gsap": "^3.15.0",
     "lenis": "^1.3.23",
     "nuxt": "^4.4.2",
+    "pinia": "^3.0.4",
     "vue": "^3.5.32",
     "vue-router": "^5.0.4"
   },

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       nuxt:
         specifier: ^4.4.2
         version: 4.4.2(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0))(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@parcel/watcher@2.5.6)(@vue/compiler-sfc@3.5.33)(cac@6.7.14)(db0@0.3.4)(eslint@10.2.1(jiti@2.6.1))(ioredis@5.10.1)(magicast@0.5.2)(optionator@0.9.4)(pinia@3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3)))(rollup-plugin-visualizer@7.0.1(rollup@4.60.2))(rollup@4.60.2)(srvx@0.11.15)(terser@5.46.2)(typescript@6.0.3)(vite@7.3.2(jiti@2.6.1)(terser@5.46.2)(yaml@2.8.3))(yaml@2.8.3)
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@6.0.3)(vue@3.5.33(typescript@6.0.3))
       vue:
         specifier: ^3.5.32
         version: 3.5.33(typescript@6.0.3)