fix: 优化侧边栏拖拽逻辑，支持展开和折叠

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>
 

packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts

@@ -0,0 +1,106 @@
+import { onUnmounted } from 'vue';
+
+export function useSidebarDrag() {
+  let startX = 0;
+  let startWidth = 0;
+  let targetTransition = '';
+  let dragBarTransition = '';
+  let dragBarOffsetLeft = 0;
+  let dragBarLeft = '';
+  let dragBarRight = '';
+  let userSelect = '';
+  let cursor = '';
+  let cleanup: (() => void) | null = null;
+
+  const startDrag = (
+    e: MouseEvent,
+    min: number,
+    max: number,
+    currentWidth: number,
+    targetElement: HTMLElement | null,
+    dragBarElement: HTMLElement | null,
+    onDrag: (newWidth: number) => void,
+  ) => {
+    cleanup?.();
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!dragBarElement || !targetElement) return;
+
+    startX = e.clientX;
+    startWidth = currentWidth;
+
+    targetTransition = targetElement.style.transition;
+    dragBarTransition = dragBarElement.style.transition;
+
+    dragBarOffsetLeft = dragBarElement.offsetLeft;
+    dragBarLeft = dragBarElement.style.left;
+    dragBarRight = dragBarElement.style.right;
+
+    userSelect = document.body.style.userSelect;
+    cursor = document.body.style.cursor;
+
+    targetElement.style.transition = 'none';
+    dragBarElement.style.transition = 'none';
+
+    dragBarElement.style.left = `${dragBarOffsetLeft}px`;
+    dragBarElement.style.right = 'auto';
+
+    document.body.style.userSelect = 'none';
+    document.body.style.cursor = 'col-resize';
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      let newLeft = dragBarOffsetLeft + deltaX;
+      if (newLeft < min) newLeft = min;
+      if (newLeft > max) newLeft = max;
+      dragBarElement.style.left = `${newLeft}px`;
+    };
+
+    const onMouseUp = (upEvent: MouseEvent) => {
+      const deltaX = upEvent.clientX - startX;
+      let newWidth = startWidth + deltaX;
+      newWidth = Math.min(max, Math.max(min, newWidth));
+
+      if (dragBarElement) {
+        dragBarElement.style.left = dragBarLeft;
+        dragBarElement.style.right = dragBarRight;
+      }
+
+      onDrag?.(newWidth);
+
+      cleanup?.();
+    };
+
+    document.addEventListener('mousemove', onMouseMove, { passive: true });
+    document.addEventListener('mouseup', onMouseUp);
+
+    cleanup = () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+
+      if (targetElement) {
+        targetElement.style.transition = targetTransition;
+      }
+      if (dragBarElement) {
+        dragBarElement.style.transition = dragBarTransition;
+        dragBarElement.style.left = dragBarLeft;
+        dragBarElement.style.right = dragBarRight;
+      }
+
+      document.body.style.userSelect = userSelect;
+      document.body.style.cursor = cursor;
+
+      cleanup = null;
+    };
+  };
+
+  onUnmounted(() => {
+    cleanup?.();
+  });
+
+  return {
+    startDrag,
+  };
+}

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