From 89c4c4c7b5c819fc4b8353dd8708be9472f98939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=A5?= <chenchun@chenchundeMacBook-Air.local>
Date: Wed, 3 Jun 2026 19:34:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=BA=8F=E5=88=97=E6=8E=A7=E5=88=B6=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 根本问题:
- 添加新板块时误删了首页的核心动画控制代码
- 导致 HomeIntro 和 HomeHero 的 play() 方法从未被调用
- 动画序列完全失效

❌ 缺失的关键代码:
1. HomeIntro 和 HomeHero 的 ref 引用
2. watch 监听 appStore.isAppLoading 状态
3. 依次调用 intro.play() 和 hero.play()
4. usePageScrollLock 滚动锁定
5. isIntroActive 状态管理

✅ 修复内容:
- 恢复完整的动画序列控制逻辑
- 重新添加 ref 引用和 watch 监听
- 确保动画按正确顺序播放：
  AppLoader → HomeIntro → HomeHero → 解锁滚动
- 保留所有新增的板块组件

🎯 现在的加载流程:
1. AppLoader (1.2s)
2. HomeIntro - ArcticNewOne 文字动画
3. HomeHero - 主视觉滑入
4. Header 菜单出现
5. 解锁页面滚动
6. 用户可以滚动浏览后续板块

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/pages/index.vue | 63 +++++++++++++++++++++++++++++++++------------
 1 file changed, 47 insertions(+), 16 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index b0700c2..78a2664 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,21 +1,9 @@
-<template>
-  <div>
-    <HomeIntro />
-    <HomeHero />
-    <HomePartnersWork />
-    <HomeServices />
-    <HomeAchievements />
-    <HomeTestimonials />
-    <HomeTechStack />
-    <HomeProcess />
-    <HomeUpdates />
-    <HomeCTA />
-  </div>
-</template>
-
 <script setup lang="ts">
-import { useSeoMeta } from '#imports'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useSeoMeta } from '#imports'
+import { useAppStore } from '~/stores/app'
+import { usePageScrollLock } from '~/composables/usePageScrollLock'
 import HomeIntro from '~/components/home/HomeIntro.vue'
 import HomeHero from '~/components/home/HomeHero.vue'
 import HomePartnersWork from '~/components/home/HomePartnersWork.vue'
@@ -28,9 +16,52 @@ import HomeUpdates from '~/components/home/HomeUpdates.vue'
 import HomeCTA from '~/components/home/HomeCTA.vue'
 
 const { t } = useI18n()
+const appStore = useAppStore()
 
+const isIntroActive = ref(true)
+
+// 使用组合式函数管理 Lenis 滚动锁定（已包含 useHead 配置）
+usePageScrollLock(isIntroActive)
+
+// 首页的 SEO 和 Meta 优化，支持国际化响应式
 useSeoMeta({
   title: () => t('home.title'),
   description: () => t('app.description'),
 })
+
+const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
+const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
+const hasPlayedIntro = ref(false)
+
+// 监听全局加载状态，加载完成后依次播放开场和首屏动画
+watch(
+  () => [appStore.isAppLoading, homeIntroRef.value, homeHeroRef.value] as const,
+  async ([isLoading, intro, hero]) => {
+    if (hasPlayedIntro.value) return
+    if (isLoading || !intro || !hero) return
+
+    hasPlayedIntro.value = true
+
+    await intro.play()
+    await hero.play()
+
+    isIntroActive.value = false
+  },
+  { immediate: true }
+)
 </script>
+
+<template>
+  <main id="top">
+    <HomeIntro ref="homeIntroRef" />
+    <HomeHero ref="homeHeroRef" />
+    <HomePartnersWork />
+    <HomeServices />
+    <HomeAchievements />
+    <HomeTestimonials />
+    <HomeTechStack />
+    <HomeProcess />
+    <HomeUpdates />
+    <HomeCTA />
+  </main>
+</template>