From 87cc8a154c0ef80ce5cdc806f9b7a2b685a2ec53 Mon Sep 17 00:00:00 2001
From: Vben <ann.vben@gmail.com>
Date: Mon, 26 Aug 2024 22:09:18 +0800
Subject: [PATCH] fix: sidebar scrolling does not meet expectations (#4241)

---
 packages/@core/composables/src/use-content-style.ts          | 2 +-
 .../@core/ui-kit/layout-ui/src/components/layout-sidebar.vue | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/@core/composables/src/use-content-style.ts b/packages/@core/composables/src/use-content-style.ts
index 94aa2148..384d0fa3 100644
--- a/packages/@core/composables/src/use-content-style.ts
+++ b/packages/@core/composables/src/use-content-style.ts
@@ -28,7 +28,7 @@ function useContentStyle() {
       position: 'fixed',
       top: `${top}px`,
       width: `${width}px`,
-      zIndex: 1000,
+      zIndex: 150,
     };
   });
 
diff --git a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
index 0de22d29..b887005c 100644
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@@ -4,6 +4,8 @@ import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
 
+import { useScrollLock } from '@vueuse/core';
+
 import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 
 interface Props {
@@ -102,6 +104,7 @@ const expandOnHovering = defineModel<boolean>('expandOnHovering');
 const expandOnHover = defineModel<boolean>('expandOnHover');
 const extraVisible = defineModel<boolean>('extraVisible');
 
+const isLocked = useScrollLock(document.body);
 const slots = useSlots();
 
 const asideRef = shallowRef<HTMLDivElement | null>();
@@ -214,6 +217,7 @@ function handleMouseenter() {
   if (!expandOnHovering.value) {
     collapse.value = false;
   }
+  isLocked.value = true;
   expandOnHovering.value = true;
 }
 
@@ -224,6 +228,7 @@ function handleMouseleave() {
     return;
   }
 
+  isLocked.value = false;
   expandOnHovering.value = false;
   collapse.value = true;
   extraVisible.value = false;