From 102b95e288e9d3f7057bc0c822122621e08fdb65 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Sun, 18 Jan 2026 09:36:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(layout):=20:bug:=20=E4=BF=AE=E5=A4=8D=20Top?=
 =?UTF-8?q?Layout=20=E9=A1=B6=E9=83=A8=E6=A8=AA=E5=90=91=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=8F=90=E5=89=8D=E7=9C=81=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TopLayout 顶部菜单仅渲染顶级可见路由（避免全量路由树导致 scrollWidth 过大）
顶部 header 拆分 logo/menu 容器并补齐 flex + min-width:0，确保横向菜单占满剩余宽度
common.scss 补充 Top/Mix 横向 el-menu 的全局 flex 规则，省略仅在真实溢出时触发

ISSUES has been processed #IDKBWO
---
 src/layouts/TopLayout.vue | 116 ++++++++++++++++++++++++--------------
 src/styles/common.scss    |  11 ++++
 2 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/src/layouts/TopLayout.vue b/src/layouts/TopLayout.vue
index 47a7512d..72ae60d8 100644
--- a/src/layouts/TopLayout.vue
+++ b/src/layouts/TopLayout.vue
@@ -1,10 +1,14 @@
 <template>
   <BaseLayout>
-    <!-- 顶部菜单�?-->
+    <!-- 顶部菜单-->
     <div class="layout__header">
       <div class="layout__header-left">
-        <LayoutLogo v-if="showLogo" :collapse="isLogoCollapsed" />
-        <LayoutSidebar :data="routes" menu-mode="horizontal" base-path="" />
+        <div v-if="showLogo" class="layout__header-logo">
+          <LayoutLogo :collapse="isLogoCollapsed" />
+        </div>
+        <div class="layout__header-menu">
+          <LayoutSidebar :data="topMenuItems" menu-mode="horizontal" base-path="" />
+        </div>
       </div>
       <div class="layout__header-right">
         <LayoutToolbar />
@@ -22,6 +26,7 @@
 <script setup lang="ts">
 import { useWindowSize } from "@vueuse/core";
 import { useLayout } from "./useLayout";
+import { usePermissionStore } from "@/store";
 import BaseLayout from "./BaseLayout.vue";
 import LayoutLogo from "./components/LayoutLogo.vue";
 import LayoutSidebar from "./components/LayoutSidebar.vue";
@@ -29,9 +34,15 @@ import LayoutToolbar from "./components/LayoutToolbar.vue";
 import LayoutTagsView from "./components/LayoutTagsView.vue";
 import LayoutMain from "./components/LayoutMain.vue";
 
-const { showTagsView, showLogo, routes } = useLayout();
+const { showTagsView, showLogo } = useLayout();
 const { width } = useWindowSize();
 
+const permissionStore = usePermissionStore();
+
+const topMenuItems = computed(() => {
+  return permissionStore.routes.filter((item) => !item.meta?.hidden);
+});
+
 const isLogoCollapsed = computed(() => width.value < 768);
 </script>
 
@@ -54,13 +65,71 @@ const isLogoCollapsed = computed(() => width.value < 768);
       align-items: center;
       min-width: 0;
       height: 100%;
+    }
+
+    &-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
 
       :deep(.logo) {
-        flex-shrink: 0;
         height: $navbar-height;
       }
     }
 
+    &-menu {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        background-color: transparent;
+        border: none;
+      }
+
+      :deep(.el-menu--horizontal) {
+        flex: 1;
+        min-width: 0;
+        height: $navbar-height;
+        overflow: hidden;
+        line-height: $navbar-height;
+        background-color: transparent;
+        border: none;
+
+        .el-menu-item {
+          height: $navbar-height;
+          line-height: $navbar-height;
+        }
+
+        .el-sub-menu {
+          .el-sub-menu__title {
+            height: $navbar-height;
+            line-height: $navbar-height;
+          }
+
+          &.has-active-child {
+            .el-sub-menu__title {
+              color: var(--el-color-primary) !important;
+              border-bottom: 2px solid var(--el-color-primary) !important;
+
+              .menu-icon {
+                color: var(--el-color-primary) !important;
+              }
+            }
+          }
+        }
+
+        .el-menu--popup {
+          min-width: 160px;
+        }
+      }
+    }
+
     &-right {
       display: flex;
       flex-shrink: 0;
@@ -68,43 +137,6 @@ const isLogoCollapsed = computed(() => width.value < 768);
       height: 100%;
       padding-left: 12px;
     }
-
-    :deep(.el-menu--horizontal) {
-      flex: 1;
-      min-width: 0;
-      height: $navbar-height;
-      overflow: hidden;
-      line-height: $navbar-height;
-      background-color: transparent;
-      border: none;
-
-      .el-menu-item {
-        height: $navbar-height;
-        line-height: $navbar-height;
-      }
-
-      .el-sub-menu {
-        .el-sub-menu__title {
-          height: $navbar-height;
-          line-height: $navbar-height;
-        }
-
-        &.has-active-child {
-          .el-sub-menu__title {
-            color: var(--el-color-primary) !important;
-            border-bottom: 2px solid var(--el-color-primary) !important;
-
-            .menu-icon {
-              color: var(--el-color-primary) !important;
-            }
-          }
-        }
-      }
-
-      .el-menu--popup {
-        min-width: 160px;
-      }
-    }
   }
 
   &__main {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index ad7afc33..b74931d1 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -37,6 +37,17 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
   }
 }
 
+/* Top layout: let horizontal menu fill the remaining header space */
+.layout-top .layout__header-left .el-menu--horizontal,
+.layout-mix .layout__header-menu .el-menu--horizontal {
+  display: flex;
+  flex: 1 1 0% !important;
+  align-items: center;
+  width: 100% !important;
+  min-width: 0 !important;
+  overflow: hidden;
+}
+
 /* 窄屏隐藏菜单文字，仅保留图标 */
 .hideSidebar {
   &.layout-top .layout__header .el-menu--horizontal,