From b7776c514854fe41d563ec555c25643a0e082fee Mon Sep 17 00:00:00 2001
From: Squall2017 <252766926@qq.com>
Date: Sun, 29 Sep 2024 21:45:56 +0800
Subject: [PATCH] fix: fix abnormal display of scroll bar on lock screen page
 (#4546)

*  fix abnormal display of scroll bar on lock screen page
---
 packages/@core/composables/src/use-scroll-lock.ts             | 4 ++--
 packages/effects/layouts/package.json                         | 1 +
 .../effects/layouts/src/widgets/lock-screen/lock-screen.vue   | 3 +++
 pnpm-lock.yaml                                                | 3 +++
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/@core/composables/src/use-scroll-lock.ts b/packages/@core/composables/src/use-scroll-lock.ts
index 3703d222..d1c14975 100644
--- a/packages/@core/composables/src/use-scroll-lock.ts
+++ b/packages/@core/composables/src/use-scroll-lock.ts
@@ -2,8 +2,8 @@ import { getScrollbarWidth, needsScrollbar } from '@vben-core/shared/utils';
 
 import {
   useScrollLock as _useScrollLock,
-  tryOnBeforeMount,
   tryOnBeforeUnmount,
+  tryOnMounted,
 } from '@vueuse/core';
 
 export const SCROLL_FIXED_CLASS = `_scroll__fixed_`;
@@ -12,7 +12,7 @@ export function useScrollLock() {
   const isLocked = _useScrollLock(document.body);
   const scrollbarWidth = getScrollbarWidth();
 
-  tryOnBeforeMount(() => {
+  tryOnMounted(() => {
     if (!needsScrollbar()) {
       return;
     }
diff --git a/packages/effects/layouts/package.json b/packages/effects/layouts/package.json
index 1f052604..f5b4b22b 100644
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -20,6 +20,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/composables": "workspace:*",
     "@vben-core/form-ui": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
     "@vben-core/menu-ui": "workspace:*",
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index 2b7e2e9d..8153de7c 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -4,6 +4,7 @@ import { computed, reactive, ref } from 'vue';
 import { LockKeyhole } from '@vben/icons';
 import { $t, useI18n } from '@vben/locales';
 import { storeToRefs, useLockStore } from '@vben/stores';
+import { useScrollLock } from '@vben-core/composables';
 import { useVbenForm, z } from '@vben-core/form-ui';
 import { VbenAvatar, VbenButton } from '@vben-core/shadcn-ui';
 
@@ -74,6 +75,8 @@ async function handleSubmit() {
 function toggleUnlockForm() {
   showUnlockForm.value = !showUnlockForm.value;
 }
+
+useScrollLock();
 </script>
 
 <template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ce50834..1503b951 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1524,6 +1524,9 @@ importers:
 
   packages/effects/layouts:
     dependencies:
+      '@vben-core/composables':
+        specifier: workspace:*
+        version: link:../../@core/composables
       '@vben-core/form-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/form-ui