fix: 恢复首页动画序列控制逻辑

🐛 根本问题:
- 添加新板块时误删了首页的核心动画控制代码
- 导致 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>
This commit is contained in:
陈春
2026-06-03 19:34:56 +08:00
parent 0c5ad55621
commit 89c4c4c7b5
+47 -16
View File
@@ -1,21 +1,9 @@
<template>
<div>
<HomeIntro />
<HomeHero />
<HomePartnersWork />
<HomeServices />
<HomeAchievements />
<HomeTestimonials />
<HomeTechStack />
<HomeProcess />
<HomeUpdates />
<HomeCTA />
</div>
</template>
<script setup lang="ts"> <script setup lang="ts">
import { useSeoMeta } from '#imports' import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' 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 HomeIntro from '~/components/home/HomeIntro.vue'
import HomeHero from '~/components/home/HomeHero.vue' import HomeHero from '~/components/home/HomeHero.vue'
import HomePartnersWork from '~/components/home/HomePartnersWork.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' import HomeCTA from '~/components/home/HomeCTA.vue'
const { t } = useI18n() const { t } = useI18n()
const appStore = useAppStore()
const isIntroActive = ref(true)
// 使用组合式函数管理 Lenis 滚动锁定(已包含 useHead 配置)
usePageScrollLock(isIntroActive)
// 首页的 SEO 和 Meta 优化,支持国际化响应式
useSeoMeta({ useSeoMeta({
title: () => t('home.title'), title: () => t('home.title'),
description: () => t('app.description'), 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> </script>
<template>
<main id="top">
<HomeIntro ref="homeIntroRef" />
<HomeHero ref="homeHeroRef" />
<HomePartnersWork />
<HomeServices />
<HomeAchievements />
<HomeTestimonials />
<HomeTechStack />
<HomeProcess />
<HomeUpdates />
<HomeCTA />
</main>
</template>