From cdf43ea71a3e9cc42cca08cfcbd3f69ce7d7a88e Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Thu, 2 Jul 2026 20:25:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=8F=8C=E5=88=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=AC=A1=E7=BA=A7=E8=8F=9C=E5=8D=95=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=8F=8A=E4=B8=89=E6=A1=A3=E5=93=8D=E5=BA=94=E5=BC=8F?=
 =?UTF-8?q?=E6=96=AD=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  2 +-
 src/layouts/BaseLayout.vue                 | 16 ++++++-
 src/layouts/components/LayoutNavbar.vue    | 24 +++++++---
 src/layouts/components/LayoutSidebar.vue   |  7 ++-
 src/layouts/composables/useLayoutDevice.ts | 13 +++--
 src/layouts/modes/DoubleLayout.vue         | 56 ++++++++++++++++++----
 src/layouts/modes/MixLayout.vue            | 32 +++++--------
 src/stores/app.ts                          | 16 +++++++
 src/styles/layout.scss                     |  6 ++-
 9 files changed, 130 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 0e4bb3dc..c4398c0d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-element-admin",
   "description": "Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板，vue-element-admin 的 Vue3 版本",
-  "version": "4.7.2",
+  "version": "4.7.3",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/layouts/BaseLayout.vue b/src/layouts/BaseLayout.vue
index df862e6c..250a0ab3 100644
--- a/src/layouts/BaseLayout.vue
+++ b/src/layouts/BaseLayout.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="layout-root" :class="layoutClass">
-    <div v-if="isMobile && isSidebarOpen" class="layout-root__overlay" @click="closeSidebar" />
+    <div
+      v-if="showOverlay && isMobile && isSidebarOpen"
+      class="layout-root__overlay"
+      @click="closeSidebar"
+    />
 
     <slot />
   </div>
@@ -9,6 +13,16 @@
 <script setup lang="ts">
 import { useLayout } from "./composables/useLayout";
 
+withDefaults(
+  defineProps<{
+    /** 移动端展开侧边栏时是否显示遮罩层（LeftLayout 需要，MixLayout 不需要） */
+    showOverlay?: boolean;
+  }>(),
+  {
+    showOverlay: true,
+  }
+);
+
 const { layoutClass, isSidebarOpen, isMobile, closeSidebar } = useLayout();
 </script>
 
diff --git a/src/layouts/components/LayoutNavbar.vue b/src/layouts/components/LayoutNavbar.vue
index 47d27bb9..28c72b1a 100644
--- a/src/layouts/components/LayoutNavbar.vue
+++ b/src/layouts/components/LayoutNavbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout-navbar">
     <div class="flex-y-center">
-      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
+      <Hamburger :is-active="sidebarState.opened" @toggle-click="sidebarState.toggle" />
       <Breadcrumb />
     </div>
 
@@ -16,13 +16,25 @@ import { useAppStore } from "@/stores";
 import Hamburger from "@/components/Hamburger/index.vue";
 import Breadcrumb from "@/components/Breadcrumb/index.vue";
 
+const props = withDefaults(
+  defineProps<{
+    toggleTarget?: "primary" | "secondary";
+  }>(),
+  {
+    toggleTarget: "primary",
+  }
+);
+
 const appStore = useAppStore();
 
-const isSidebarOpened = computed(() => appStore.sidebar.opened);
-
-function toggleSideBar() {
-  appStore.toggleSidebar();
-}
+const sidebarState = computed(() =>
+  props.toggleTarget === "secondary"
+    ? {
+        opened: appStore.secondarySidebar?.opened ?? true,
+        toggle: () => appStore.toggleSecondarySidebar(),
+      }
+    : { opened: appStore.sidebar.opened, toggle: () => appStore.toggleSidebar() }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layouts/components/LayoutSidebar.vue b/src/layouts/components/LayoutSidebar.vue
index 6dcd39dd..2b84e69f 100644
--- a/src/layouts/components/LayoutSidebar.vue
+++ b/src/layouts/components/LayoutSidebar.vue
@@ -2,7 +2,7 @@
   <el-menu
     ref="menuRef"
     :default-active="activeMenuPath"
-    :collapse="props.alwaysExpand ? false : !appStore.sidebar.opened"
+    :collapse="props.collapseOverride ?? (props.alwaysExpand ? false : !appStore.sidebar.opened)"
     :background-color="menuThemeProps.backgroundColor"
     :text-color="menuThemeProps.textColor"
     :active-text-color="menuThemeProps.activeTextColor"
@@ -52,6 +52,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  /** 显式覆盖 collapse 状态，优先级高于 alwaysExpand 和全局 sidebar.opened */
+  collapseOverride: {
+    type: Boolean,
+    default: null,
+  },
 });
 
 const menuRef = ref<MenuInstance>();
diff --git a/src/layouts/composables/useLayoutDevice.ts b/src/layouts/composables/useLayoutDevice.ts
index cb2ffd94..69709493 100644
--- a/src/layouts/composables/useLayoutDevice.ts
+++ b/src/layouts/composables/useLayoutDevice.ts
@@ -2,23 +2,30 @@ import { useWindowSize } from "@vueuse/core";
 import { useAppStore } from "@/stores";
 import { DeviceEnum } from "@/enums/settings";
 
-const DESKTOP_BREAKPOINT = 992;
+const WIDE_BREAKPOINT = 992;
+const MOBILE_BREAKPOINT = 768;
 
 /**
  * 根据窗口宽度同步设备类型和侧边栏展开状态
+ *
+ * 三档断点：
+ * - ≥992px：桌面宽屏，侧边栏展开（完整菜单）
+ * - 768~992px：桌面窄屏，侧边栏收缩（仅图标）
+ * - <768px：移动端，侧边栏完全隐藏
  */
 export function useLayoutDevice() {
   const appStore = useAppStore();
   const { width } = useWindowSize();
 
-  const isDesktop = computed(() => width.value >= DESKTOP_BREAKPOINT);
+  const isDesktop = computed(() => width.value >= MOBILE_BREAKPOINT);
+  const isWideDesktop = computed(() => width.value >= WIDE_BREAKPOINT);
 
   watchEffect(() => {
     const device = isDesktop.value ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
 
     appStore.toggleDevice(device);
 
-    if (isDesktop.value) {
+    if (isWideDesktop.value) {
       appStore.openSidebar();
     } else {
       appStore.closeSidebar();
diff --git a/src/layouts/modes/DoubleLayout.vue b/src/layouts/modes/DoubleLayout.vue
index 3137e410..8cc10275 100644
--- a/src/layouts/modes/DoubleLayout.vue
+++ b/src/layouts/modes/DoubleLayout.vue
@@ -3,7 +3,10 @@
     <aside
       v-show="!appStore.contentFullscreen"
       class="layout-double"
-      :class="{ 'is-collapsed': !isSidebarOpen }"
+      :class="{
+        'is-collapsed': !isSidebarOpen,
+        'is-secondary-collapsed': !secondaryExpanded,
+      }"
     >
       <div class="layout-double__primary">
         <LayoutLogo v-if="showLogo" :collapse="true" />
@@ -33,7 +36,7 @@
         </button>
       </div>
 
-      <div class="layout-double__secondary">
+      <div class="layout-double__secondary" :class="{ 'is-collapsed': !secondaryExpanded }">
         <div v-if="showLogo" class="layout-double__title">
           {{ appConfig.title }}
         </div>
@@ -42,7 +45,7 @@
           <LayoutSidebar
             :data="sideMenuRoutes"
             :base-path="activeTopMenuPath"
-            :always-expand="true"
+            :collapse-override="!secondaryExpanded"
           />
         </el-scrollbar>
       </div>
@@ -52,10 +55,11 @@
       class="layout-main"
       :class="{
         'is-collapsed': !isSidebarOpen,
+        'is-secondary-collapsed': !secondaryExpanded,
         'is-fullscreen': appStore.contentFullscreen,
       }"
     >
-      <LayoutNavbar v-show="!appStore.contentFullscreen" />
+      <LayoutNavbar v-show="!appStore.contentFullscreen" toggle-target="secondary" />
       <LayoutTagsView v-if="showTagsView" />
       <LayoutMain />
     </main>
@@ -79,6 +83,8 @@ import LayoutMenuIcon from "../components/LayoutMenuIcon.vue";
 const appStore = useAppStore();
 const { showTagsView, showLogo, isSidebarOpen, toggleSidebar } = useLayout();
 
+const secondaryExpanded = computed(() => appStore.secondarySidebar?.opened ?? true);
+
 const { topMenuItems, activeTopMenuPath, sideMenuRoutes, handleTopMenuSelect } = useMixMenu();
 </script>
 
@@ -115,13 +121,24 @@ $double-sidebar-width: $sidebar-primary-width + $sidebar-secondary-width;
         display: none;
       }
     }
+  }
+
+  &.is-secondary-collapsed {
+    width: $sidebar-primary-width + $sidebar-width-collapsed;
 
     .layout-double__secondary {
-      flex: 0 0 $sidebar-secondary-width;
-      width: $sidebar-secondary-width;
-      min-width: $sidebar-secondary-width;
-      border-right: 1px solid var(--menu-border);
+      flex: 0 0 $sidebar-width-collapsed;
+      width: $sidebar-width-collapsed;
+      min-width: $sidebar-width-collapsed;
     }
+
+    .layout-double__title {
+      display: none;
+    }
+  }
+
+  &.is-collapsed.is-secondary-collapsed {
+    width: $sidebar-width-collapsed * 2;
   }
 
   &__primary {
@@ -263,6 +280,21 @@ $double-sidebar-width: $sidebar-primary-width + $sidebar-secondary-width;
     :deep(.el-sub-menu__icon-arrow) {
       display: inline-flex !important;
     }
+
+    &.is-collapsed {
+      width: $sidebar-width-collapsed;
+
+      :deep(.el-menu--collapse) {
+        .el-menu-item span,
+        .el-sub-menu__title span {
+          display: none !important;
+        }
+
+        .el-sub-menu__icon-arrow {
+          display: none !important;
+        }
+      }
+    }
   }
 
   &__secondary-scroll {
@@ -294,6 +326,14 @@ $double-sidebar-width: $sidebar-primary-width + $sidebar-secondary-width;
     margin-left: $sidebar-width-collapsed + $sidebar-secondary-width;
   }
 
+  &.is-secondary-collapsed {
+    margin-left: $sidebar-primary-width + $sidebar-width-collapsed;
+
+    &.is-collapsed {
+      margin-left: $sidebar-width-collapsed + $sidebar-width-collapsed;
+    }
+  }
+
   &.is-fullscreen {
     margin-left: 0 !important;
   }
diff --git a/src/layouts/modes/MixLayout.vue b/src/layouts/modes/MixLayout.vue
index 20a44cf3..7413a5b9 100644
--- a/src/layouts/modes/MixLayout.vue
+++ b/src/layouts/modes/MixLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseLayout>
+  <BaseLayout :show-overlay="false">
     <div v-show="!appStore.contentFullscreen" class="layout-header">
       <div class="layout-header__content">
         <div v-if="showLogo" class="layout-header__logo">
@@ -240,10 +240,20 @@ const useMenuColors = computed(
 
   &.is-collapsed {
     width: $sidebar-width-collapsed !important;
+    min-width: 0; // 覆盖 flex 子元素默认 min-width: auto，防止 .el-menu--collapse 64px 推挤容器
+    overflow: hidden; // 裁剪 .el-menu--collapse 溢出，防止其可见溢出推挤 .layout-container 宽度
   }
 
   :deep(.el-scrollbar) {
     @include sidebar-scroll-height-with-toggle;
+
+    .el-scrollbar__wrap {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-horizontal {
+      display: none;
+    }
   }
 
   :deep(.el-menu) {
@@ -286,26 +296,6 @@ const useMenuColors = computed(
   overflow-y: auto;
 }
 
-:deep(.is-mobile) {
-  .layout-container {
-    .layout-sidebar {
-      position: fixed;
-      top: $navbar-height;
-      bottom: 0;
-      left: 0;
-      z-index: 1000;
-      transition: transform 0.28s;
-    }
-  }
-
-  &.is-sidebar-collapsed {
-    .layout-sidebar {
-      width: $sidebar-width !important;
-      transform: translateX(-$sidebar-width);
-    }
-  }
-}
-
 :global(html.dark),
 :global(html.sidebar-color-blue) {
   .layout-header__menu {
diff --git a/src/stores/app.ts b/src/stores/app.ts
index 973df83c..fffa0298 100644
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@@ -34,6 +34,13 @@ export const useAppStore = defineStore("app", () => {
     withoutAnimation: false,
   });
 
+  /**
+   * 双列布局第二列（次级菜单）展开状态
+   */
+  const secondarySidebar = reactive({
+    opened: true,
+  });
+
   /**
    * 当前激活的顶部菜单路径
    */
@@ -73,6 +80,13 @@ export const useAppStore = defineStore("app", () => {
     sidebarStatus.value = SidebarStatus.OPENED;
   }
 
+  /**
+   * 切换第二列（次级菜单）展开状态
+   */
+  function toggleSecondarySidebar() {
+    secondarySidebar.opened = !secondarySidebar.opened;
+  }
+
   /**
    * 切换设备类型
    */
@@ -111,6 +125,7 @@ export const useAppStore = defineStore("app", () => {
   return {
     device,
     sidebar,
+    secondarySidebar,
     language,
     locale,
     size,
@@ -121,6 +136,7 @@ export const useAppStore = defineStore("app", () => {
     toggleSidebar,
     closeSidebar,
     openSidebar,
+    toggleSecondarySidebar,
     setActiveTopMenuPath,
     toggleContentFullscreen,
     activeTopMenuPath,
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index a9f4d235..2317c507 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -124,7 +124,11 @@
   }
 }
 
-html.dark .layout-root,
+/* 隐藏侧边栏 el-scrollbar 的水平滚动条（el-scrollbar 的 wrap 宽度因滚动条 gutter 比内容少 1px，导致 .el-menu--collapse 始终溢出） */
+.layout-sidebar .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+}
+
 html.sidebar-color-blue .layout-root,
 html.dark .el-menu--popup,
 html.sidebar-color-blue .el-menu--popup {