From ea9b7747e2249edbc142848bc2872fe4375caaf4 Mon Sep 17 00:00:00 2001
From: chenchun <chenchun@virtheart.com>
Date: Mon, 27 Apr 2026 02:42:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E9=A6=96=E9=A1=B5):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=85=A5=E5=9C=BA=E5=8A=A8=E7=94=BB=E6=9C=9F=E9=97=B4=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E9=94=81=E5=AE=9A=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

确保在 Lenis 加载完成前后都能正确锁定页面滚动
修复滚动锁定计数逻辑，避免重复操作
---
 app/assets/css/tailwind.css          |  2 +-
 app/composables/usePageScrollLock.ts | 18 ++++++++++++------
 app/pages/index.vue                  |  8 ++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/app/assets/css/tailwind.css b/app/assets/css/tailwind.css
index e462bf9..97444cc 100644
--- a/app/assets/css/tailwind.css
+++ b/app/assets/css/tailwind.css
@@ -26,7 +26,7 @@
   /* 首页入场动画期间首帧就隐藏滚动条，避免黑色遮罩边缘露出白色滚动槽。 */
   html.is-home-intro-active,
   html.is-home-intro-active body {
-    overflow: hidden;
+    overflow: hidden !important;
     background: #000;
   }
 }
diff --git a/app/composables/usePageScrollLock.ts b/app/composables/usePageScrollLock.ts
index 8426b1b..9a4568c 100644
--- a/app/composables/usePageScrollLock.ts
+++ b/app/composables/usePageScrollLock.ts
@@ -7,11 +7,11 @@ let lenisLockCount = 0
 
 export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
   const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
-  
+
   // SSR 和 CSR 都支持：自动将 class 注入到 HTML 标签上
   useHead({
     htmlAttrs: {
-      class: computed(() => unref(isLocked) ? 'is-home-intro-active' : undefined)
+      class: computed(() => unref(isLocked) ? 'is-home-intro-active' : '')
     }
   })
 
@@ -23,19 +23,25 @@ export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
     currentlyLocked = locked
 
     // Lenis 控制仅在客户端有效
-    if (import.meta.client && $lenis) {
+    if (import.meta.client) {
       if (locked) {
         lenisLockCount++
         // 只有第一个锁请求时，才真正停止 Lenis 并滚动到顶部
         if (lenisLockCount === 1) {
-          $lenis.scrollTo(0, { immediate: true })
-          $lenis.stop()
+          document.documentElement.classList.add('is-home-intro-active')
+          if ($lenis) {
+            $lenis.scrollTo(0, { immediate: true })
+            $lenis.stop()
+          }
         }
       } else {
         lenisLockCount = Math.max(0, lenisLockCount - 1)
         // 只有当所有锁请求都释放时，才重新启动 Lenis
         if (lenisLockCount === 0) {
-          $lenis.start()
+          document.documentElement.classList.remove('is-home-intro-active')
+          if ($lenis) {
+            $lenis.start()
+          }
         }
       }
     }
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c857907..e198d9b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead, useSeoMeta } from '#imports'
 import { useUserStore } from '~/stores/user'
 import { useAppStore } from '~/stores/app'
 import { usePageScrollLock } from '~/composables/usePageScrollLock'
@@ -20,6 +21,13 @@ if (!userStore.isLoggedIn) {
   userStore.loadDemoUser()
 }
 
+// 保证即使 Lenis 还没加载完成，也能通过原生 CSS 锁定页面
+useHead({
+  htmlAttrs: {
+    class: computed(() => (isIntroActive.value ? 'is-home-intro-active' : '')),
+  },
+})
+
 // 使用组合式函数管理 Lenis 滚动锁定
 usePageScrollLock(isIntroActive)