fix(layout): 🐛 修复 TopLayout 顶部横向菜单提前省略

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

@@ -1,10 +1,14 @@
 <template>
   <BaseLayout>
-    <!-- 顶部è<EFBFBD>œå<EFBFBD>•æ ?-->
+    <!-- 顶部菜单-->
     <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,19 +65,31 @@ const isLogoCollapsed = computed(() => width.value < 768);
       align-items: center;
       min-width: 0;
       height: 100%;
-
-      :deep(.logo) {
-        flex-shrink: 0;
-        height: $navbar-height;
-      }
     }
 
-    &-right {
+    &-logo {
       display: flex;
       flex-shrink: 0;
       align-items: center;
       height: 100%;
-      padding-left: 12px;
+
+      :deep(.logo) {
+        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) {
@@ -107,6 +130,15 @@ const isLogoCollapsed = computed(() => width.value < 768);
       }
     }
 
+    &-right {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+      padding-left: 12px;
+    }
+  }
+
   &__main {
     height: calc(100vh - $navbar-height);
     overflow-y: auto;

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,