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

@@ -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;
     }

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:*",

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>

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