fix: 修复混合双列布局侧边栏拖拽线条位置显示bug，同步修复普通布局和混合双列布局切换时width计算导致侧边栏宽度显示异常问题，新增普通布局和混合双列布局侧边栏菜单折叠状态同步 (#7596)

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 minLimit = isSidebarMixed ? width + collapseWidth : collapseWidth;
-  const maxLimit = 320;
+  const maxLimit = isSidebarMixed ? width + 320 : 320;
-  const startWidth = isSidebarMixed ? extraWidth : width;
+  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;
       }
     },
   );

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
+      const sideCollapseWidth = props.sidebarMixedWidth;
-        ? getSideCollapseWidth.value
-        : 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 =
+      let sidebarWidth = getSidebarWidth.value;
-        sidebarExpandOnHovering.value && !sidebarExpandOnHover.value
+      if (sidebarExpandOnHovering.value && !sidebarExpandOnHover.value) {
-          ? `${getSideCollapseWidth.value}px`
+        sidebarWidth =
-          : `${getSidebarWidth.value}px`;
+          isSidebarMixedNav.value || isHeaderMixedNav.value
+            ? props.sidebarMixedWidth
+            : getSideCollapseWidth.value;
+      }
+      sidebarAndExtraWidth = `${sidebarWidth}px`;
       width = `calc(100% - ${sidebarAndExtraWidth})`;
     }
   }