From afffc4b3f0e05f6ed8443c5d2da3f6d21c6456d8 Mon Sep 17 00:00:00 2001
From: zouawen <846027729@qq.com>
Date: Fri, 27 Feb 2026 10:53:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E6=8B=96=E6=8B=BD=E9=80=BB=E8=BE=91=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B1=95=E5=BC=80=E5=92=8C=E6=8A=98=E5=8F=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@core/composables/src/index.ts       |  1 -
 .../src/components/layout-sidebar.vue         | 31 +++++++++++++------
 .../layout-ui/src/hooks/use-sidebar-drag.ts}  | 19 +++++-------
 .../ui-kit/layout-ui/src/vben-layout.vue      |  9 ++++--
 4 files changed, 35 insertions(+), 25 deletions(-)
 rename packages/@core/{composables/src/use-resizable.ts => ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts} (89%)

diff --git a/packages/@core/composables/src/index.ts b/packages/@core/composables/src/index.ts
index 2f6826f2..2dbd4b80 100644
--- a/packages/@core/composables/src/index.ts
+++ b/packages/@core/composables/src/index.ts
@@ -2,7 +2,6 @@ export * from './use-is-mobile';
 export * from './use-layout-style';
 export * from './use-namespace';
 export * from './use-priority-value';
-export * from './use-resizable';
 export * from './use-scroll-lock';
 export * from './use-simple-locale';
 export * from './use-sortable';
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 2f56bdc6..feca2045 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
@@ -3,11 +3,11 @@ import type { CSSProperties } from 'vue';
 
 import { computed, shallowRef, useSlots, watchEffect } from 'vue';
 
-import { useResizable } from '@vben-core/composables';
 import { VbenScrollbar } from '@vben-core/shadcn-ui';
 
 import { useScrollLock } from '@vueuse/core';
 
+import { useSidebarDrag } from '../hooks/use-sidebar-drag';
 import { SidebarCollapseButton, SidebarFixedButton } from './widgets';
 
 interface Props {
@@ -256,18 +256,29 @@ function handleMouseleave() {
   extraVisible.value = false;
 }
 
-const { startDrag } = useResizable({
-  min: 160,
-  max: 320,
-  onChange: (newWidth) => {
-    emit('update:width', newWidth);
-  },
-});
+const { startDrag } = useSidebarDrag();
 
 const handleDragSidebar = (e: MouseEvent) => {
-  const { isSidebarMixed, extraWidth, width } = props;
+  const { isSidebarMixed, collapseWidth, extraWidth, width } = props;
+  const minLimit = isSidebarMixed ? width + collapseWidth : collapseWidth;
+  const maxLimit = isSidebarMixed ? width + 320 : 320;
   const currentWidth = isSidebarMixed ? extraWidth : width;
-  startDrag(e, currentWidth, asideRef.value, dragBarRef.value);
+  startDrag(
+    e,
+    minLimit,
+    maxLimit,
+    currentWidth,
+    asideRef.value,
+    dragBarRef.value,
+    (newWidth) => {
+      emit('update:width', newWidth);
+      if (isSidebarMixed) {
+        extraCollapse.value = newWidth <= collapseWidth;
+      } else {
+        collapse.value = newWidth <= collapseWidth;
+      }
+    },
+  );
 };
 </script>
 
diff --git a/packages/@core/composables/src/use-resizable.ts b/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
similarity index 89%
rename from packages/@core/composables/src/use-resizable.ts
rename to packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
index 9939819d..cccddea4 100644
--- a/packages/@core/composables/src/use-resizable.ts
+++ b/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
@@ -1,14 +1,6 @@
 import { onUnmounted } from 'vue';
 
-interface ResizableOptions {
-  max?: number;
-  min?: number;
-  onChange?: (newWidth: number) => void;
-}
-
-export function useResizable(options: ResizableOptions = {}) {
-  const { min = 0, max = 999, onChange } = options;
-
+export function useSidebarDrag() {
   let startX = 0;
   let startWidth = 0;
   let targetTransition = '';
@@ -22,9 +14,12 @@ export function useResizable(options: ResizableOptions = {}) {
 
   const startDrag = (
     e: MouseEvent,
+    min: number,
+    max: number,
     currentWidth: number,
     targetElement: HTMLElement | null,
     dragBarElement: HTMLElement | null,
+    onDrag: (newWidth: number) => void,
   ) => {
     cleanup?.();
 
@@ -57,7 +52,9 @@ export function useResizable(options: ResizableOptions = {}) {
 
     const onMouseMove = (moveEvent: MouseEvent) => {
       const deltaX = moveEvent.clientX - startX;
-      const newLeft = dragBarOffsetLeft + deltaX;
+      let newLeft = dragBarOffsetLeft + deltaX;
+      if (newLeft < min) newLeft = min;
+      if (newLeft > max) newLeft = max;
       dragBarElement.style.left = `${newLeft}px`;
     };
 
@@ -71,7 +68,7 @@ export function useResizable(options: ResizableOptions = {}) {
         dragBarElement.style.right = dragBarRight;
       }
 
-      onChange?.(newWidth);
+      onDrag?.(newWidth);
 
       cleanup?.();
     };
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 92363e61..a7b9ab58 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -124,13 +124,16 @@ const headerWrapperHeight = computed(() => {
 });
 
 const getSideCollapseWidth = computed(() => {
-  const { sidebarCollapseShowTitle, sidebarMixedWidth, sideCollapseWidth } =
-    props;
+  const {
+    sidebarCollapseShowTitle,
+    sidebarExtraCollapsedWidth,
+    sideCollapseWidth,
+  } = props;
 
   return sidebarCollapseShowTitle ||
     isSidebarMixedNav.value ||
     isHeaderMixedNav.value
-    ? sidebarMixedWidth
+    ? sidebarExtraCollapsedWidth
     : sideCollapseWidth;
 });