From dba0c18001612c4b4dd2823ecf419ee616fe9ba0 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Mon, 27 Apr 2026 02:51:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(composables):=20=E6=94=B9=E8=BF=9B?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=E9=94=81=E5=AE=9A=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=B9=B6=E4=BF=AE=E5=A4=8D=E6=BD=9C=E5=9C=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

确保在客户端插件加载完成后再获取 Lenis 实例
修复组件卸载时可能的状态不一致问题
将 useHead 配置整合到 usePageScrollLock 中
---
 app/components/common/AppLoader.vue  |  6 +++---
 app/composables/usePageScrollLock.ts | 26 +++++++++++++++++---------
 app/pages/index.vue                  | 13 +++----------
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/app/components/common/AppLoader.vue b/app/components/common/AppLoader.vue
index 4d9535d..6e4eb69 100644
--- a/app/components/common/AppLoader.vue
+++ b/app/components/common/AppLoader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import gsap from 'gsap'
 import { useAppStore } from '~/stores/app'
 import { usePageScrollLock } from '~/composables/usePageScrollLock'
@@ -8,8 +8,8 @@ const loaderRef = ref<HTMLElement | null>(null)
 const loaderBarRef = ref<HTMLElement | null>(null)
 const appStore = useAppStore()
 
-// 加载期间锁定页面滚动
-usePageScrollLock(appStore.isAppLoading)
+// 加载期间锁定页面滚动（注意：Pinia 的 state 是自动解包的，必须用 computed 包装才能保持响应式）
+usePageScrollLock(computed(() => appStore.isAppLoading))
 
 let loaderTween: gsap.core.Tween | null = null
 let removeLoadListener: (() => void) | null = null
diff --git a/app/composables/usePageScrollLock.ts b/app/composables/usePageScrollLock.ts
index 9a4568c..b059aa0 100644
--- a/app/composables/usePageScrollLock.ts
+++ b/app/composables/usePageScrollLock.ts
@@ -6,8 +6,10 @@ import type Lenis from 'lenis'
 let lenisLockCount = 0
 
 export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
-  const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
-
+  const nuxtApp = useNuxtApp()
+  // 由于 $lenis 是从 client 插件中注入的，SSR 期间可能为 undefined
+  // 而且在 setup 期间解构可能拿不到最新的值，我们改为在函数内部动态获取
+  
   // SSR 和 CSR 都支持：自动将 class 注入到 HTML 标签上
   useHead({
     htmlAttrs: {
@@ -22,16 +24,18 @@ export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
     if (locked === currentlyLocked) return
     currentlyLocked = locked
 
-    // Lenis 控制仅在客户端有效
+    // Lenis 控制仅在客户端有效，不需要依赖 $lenis 立即存在
     if (import.meta.client) {
       if (locked) {
         lenisLockCount++
         // 只有第一个锁请求时，才真正停止 Lenis 并滚动到顶部
         if (lenisLockCount === 1) {
           document.documentElement.classList.add('is-home-intro-active')
-          if ($lenis) {
-            $lenis.scrollTo(0, { immediate: true })
-            $lenis.stop()
+          // 注意：需要在这里动态获取 $lenis，因为此时 client 插件才可能挂载完成
+          const lenisInstance = (nuxtApp as any).$lenis
+          if (lenisInstance) {
+            lenisInstance.scrollTo(0, { immediate: true })
+            lenisInstance.stop()
           }
         }
       } else {
@@ -39,8 +43,10 @@ export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
         // 只有当所有锁请求都释放时，才重新启动 Lenis
         if (lenisLockCount === 0) {
           document.documentElement.classList.remove('is-home-intro-active')
-          if ($lenis) {
-            $lenis.start()
+          // 同理，动态获取
+          const lenisInstance = (nuxtApp as any).$lenis
+          if (lenisInstance) {
+            lenisInstance.start()
           }
         }
       }
@@ -56,6 +62,8 @@ export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
 
   // 组件卸载时安全释放当前持有的锁
   onBeforeUnmount(() => {
-    updateLock(false)
+    if (currentlyLocked) {
+      updateLock(false)
+    }
   })
 }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 956b71a..72cc296 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useHead, useSeoMeta } from '#imports'
+import { useSeoMeta } from '#imports'
 import { useAppStore } from '~/stores/app'
 import { usePageScrollLock } from '~/composables/usePageScrollLock'
 import HomeIntro from '~/components/home/HomeIntro.vue'
@@ -12,14 +12,7 @@ const appStore = useAppStore()
 
 const isIntroActive = ref(true)
 
-// 保证即使 Lenis 还没加载完成，也能通过原生 CSS 锁定页面
-useHead({
-  htmlAttrs: {
-    class: computed(() => (isIntroActive.value ? 'is-home-intro-active' : '')),
-  },
-})
-
-// 使用组合式函数管理 Lenis 滚动锁定
+// 使用组合式函数管理 Lenis 滚动锁定（已包含 useHead 配置）
 usePageScrollLock(isIntroActive)
 
 // 首页的 SEO 和 Meta 优化，支持国际化响应式