From 2a86404ba54de1f180dcd917f7829891c277a3cf Mon Sep 17 00:00:00 2001
From: zouawen <846027729@qq.com>
Date: Mon, 2 Mar 2026 15:31:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B7=B7=E5=90=88?=
 =?UTF-8?q?=E5=8F=8C=E5=88=97=E5=B8=83=E5=B1=80=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E7=BA=BF=E6=9D=A1=E4=BD=8D=E7=BD=AE=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BAbug=EF=BC=8C=E5=90=8C=E6=AD=A5=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=99=AE=E9=80=9A=E5=B8=83=E5=B1=80=E5=92=8C=E6=B7=B7=E5=90=88?=
 =?UTF-8?q?=E5=8F=8C=E5=88=97=E5=B8=83=E5=B1=80=E5=88=87=E6=8D=A2=E6=97=B6?=
 =?UTF-8?q?width=E8=AE=A1=E7=AE=97=E5=AF=BC=E8=87=B4=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=AE=BD=E5=BA=A6=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=99=AE=E9=80=9A?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E5=92=8C=E6=B7=B7=E5=90=88=E5=8F=8C=E5=88=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E4=BE=A7=E8=BE=B9=E6=A0=8F=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0=E7=8A=B6=E6=80=81=E5=90=8C=E6=AD=A5=20(#7596?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/layout-sidebar.vue         | 33 +++++++++++--------
 .../ui-kit/layout-ui/src/vben-layout.vue      | 16 +++++----
 2 files changed, 29 insertions(+), 20 deletions(-)

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 dfeca386..e717c905 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
@@ -157,9 +157,9 @@ const extraTitleStyle = computed((): CSSProperties => {
 });
 
 const contentWidthStyle = computed((): CSSProperties => {
-  const { collapseWidth, fixedExtra, isSidebarMixed, mixedWidth } = props;
+  const { fixedExtra, isSidebarMixed, mixedWidth } = props;
   if (isSidebarMixed && fixedExtra) {
-    return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
+    return { width: `${mixedWidth}px` };
   }
   return {};
 });
@@ -202,19 +202,24 @@ watchEffect(() => {
 });
 
 function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
-  const { extraWidth, fixedExtra, isSidebarMixed, show, width } = props;
+  const {
+    collapseWidth,
+    extraWidth,
+    mixedWidth,
+    fixedExtra,
+    isSidebarMixed,
+    show,
+    width,
+  } = props;
 
   let widthValue =
     width === 0
       ? '0px'
       : `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
 
-  const { collapseWidth } = props;
-
   if (isHiddenDom && expandOnHovering.value && !expandOnHover.value) {
-    widthValue = `${collapseWidth}px`;
+    widthValue = isSidebarMixed ? `${mixedWidth}px` : `${collapseWidth}px`;
   }
-
   return {
     ...(widthValue === '0px' ? { overflow: 'hidden' } : {}),
     flex: `0 0 ${widthValue}`,
@@ -261,9 +266,9 @@ const { startDrag } = useSidebarDrag();
 
 const handleDragSidebar = (e: MouseEvent) => {
   const { isSidebarMixed, collapseWidth, extraWidth, width } = props;
-  const minLimit = collapseWidth;
-  const maxLimit = 320;
-  const startWidth = isSidebarMixed ? extraWidth : width;
+  const minLimit = isSidebarMixed ? width + collapseWidth : collapseWidth;
+  const maxLimit = isSidebarMixed ? width + 320 : 320;
+  const startWidth = isSidebarMixed ? width + extraWidth : width;
 
   startDrag(
     e,
@@ -277,11 +282,13 @@ const handleDragSidebar = (e: MouseEvent) => {
       dragBar: dragBarRef.value,
     },
     (newWidth) => {
-      emit('update:width', newWidth);
       if (isSidebarMixed) {
-        extraCollapse.value = newWidth <= collapseWidth;
+        emit('update:width', newWidth - width);
+        extraCollapse.value = collapse.value =
+          newWidth - width <= collapseWidth;
       } else {
-        collapse.value = newWidth <= collapseWidth;
+        emit('update:width', newWidth);
+        collapse.value = extraCollapse.value = newWidth <= collapseWidth;
       }
     },
   );
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 2ab4aaa2..7e444068 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -247,9 +247,7 @@ const mainStyle = computed(() => {
       sidebarExtraVisible.value;
 
     if (isSideNavEffective) {
-      const sideCollapseWidth = sidebarCollapse.value
-        ? getSideCollapseWidth.value
-        : props.sidebarMixedWidth;
+      const sideCollapseWidth = props.sidebarMixedWidth;
       const sideWidth = sidebarExtraCollapse.value
         ? props.sidebarExtraCollapsedWidth
         : props.sidebarWidth;
@@ -258,10 +256,14 @@ const mainStyle = computed(() => {
       sidebarAndExtraWidth = `${sideCollapseWidth + sideWidth}px`;
       width = `calc(100% - ${sidebarAndExtraWidth})`;
     } else {
-      sidebarAndExtraWidth =
-        sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
-          ? `${getSideCollapseWidth.value}px`
-          : `${getSidebarWidth.value}px`;
+      let sidebarWidth = getSidebarWidth.value;
+      if (sidebarExpandOnHovering.value && !sidebarExpandOnHover.value) {
+        sidebarWidth =
+          isSidebarMixedNav.value || isHeaderMixedNav.value
+            ? props.sidebarMixedWidth
+            : getSideCollapseWidth.value;
+      }
+      sidebarAndExtraWidth = `${sidebarWidth}px`;
       width = `calc(100% - ${sidebarAndExtraWidth})`;
     }
   }