refactor(composables): 改进页面滚动锁定逻辑并修复潜在问题

确保在客户端插件加载完成后再获取 Lenis 实例
修复组件卸载时可能的状态不一致问题
将 useHead 配置整合到 usePageScrollLock 中
This commit is contained in:
2026-04-27 02:51:45 +08:00
parent a353322454
commit dba0c18001
3 changed files with 23 additions and 22 deletions
+3 -10
View File
@@ -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 优化,支持国际化响应式