From d3ceaded07271c8554765c243c9b5845ce5c3499 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Thu, 23 Apr 2026 14:01:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=A1=B6=E6=A0=8F=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=85=A8=E5=AE=BD=E5=8D=95=E8=A1=8C=EF=BC=88=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E5=90=8D+=E7=94=A8=E6=88=B7=E4=BF=A1=E6=81=AF=EF=BC=89?=
 =?UTF-8?q?=EF=BC=8C=E6=9D=90=E6=96=99=E5=88=86=E7=B1=BB=E5=BD=92=E5=85=A5?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=E5=AD=90=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/layouts/MainLayout.vue | 177 ++++++++++++++++------------
 1 file changed, 99 insertions(+), 78 deletions(-)

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index e7a1087..e423e66 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -1,38 +1,39 @@
 <template>
   <div class="layout">
-    <aside class="sidebar">
-      <div class="logo">
-        <div class="logo-title">房地产新材料选材管理数据系统</div>
-        <div class="logo-sub">管理系统</div>
-      </div>
-      <el-menu
-        :default-active="active"
-        class="menu"
-        router
-      >
-        <el-menu-item v-if="isAdmin" index="/users">用户管理</el-menu-item>
-        <el-menu-item index="/factories">供应商库</el-menu-item>
-        <el-menu-item v-if="isAdmin" index="/dictionary">材料分类管理</el-menu-item>
-        <el-menu-item index="/materials">材料管理</el-menu-item>
-        <el-menu-item v-if="isAdmin" index="/screen/overview">数据大屏</el-menu-item>
-      </el-menu>
-    </aside>
-    <main class="main">
-      <header class="topbar">
-        <div class="breadcrumb">{{ title }}</div>
-        <div class="user">
-          <div class="user-info">
-            <div class="name">{{ user?.username || '用户' }}</div>
-            <div class="role">{{ isAdmin ? '管理员' : '普通账号' }}</div>
-          </div>
-          <el-button size="small" @click="openPassword">修改密码</el-button>
-          <el-button size="small" @click="onLogout">退出</el-button>
+    <header class="topbar">
+      <div class="logo-title">房地产新材料选材管理数据系统</div>
+      <div class="user">
+        <div class="user-info">
+          <div class="name">{{ user?.username || '用户' }}</div>
+          <div class="role">{{ isAdmin ? '管理员' : '普通账号' }}</div>
         </div>
-      </header>
-      <section class="content">
-        <router-view />
-      </section>
-    </main>
+        <el-button size="small" @click="openPassword">修改密码</el-button>
+        <el-button size="small" @click="onLogout">退出</el-button>
+      </div>
+    </header>
+    <div class="body">
+      <aside class="sidebar">
+        <el-menu
+          :default-active="active"
+          class="menu"
+          router
+        >
+          <el-menu-item v-if="isAdmin" index="/users">用户管理</el-menu-item>
+          <el-menu-item index="/factories">供应商库</el-menu-item>
+          <el-menu-item index="/materials">材料管理</el-menu-item>
+          <el-menu-item v-if="isAdmin" index="/screen/overview">数据大屏</el-menu-item>
+          <el-sub-menu v-if="isAdmin" index="config">
+            <template #title>配置项</template>
+            <el-menu-item index="/dictionary">材料分类</el-menu-item>
+          </el-sub-menu>
+        </el-menu>
+      </aside>
+      <main class="main">
+        <section class="content">
+          <router-view />
+        </section>
+      </main>
+    </div>
   </div>
 
   <el-dialog v-model="passwordVisible" title="修改密码" width="420px" class="dialog-scroll">
@@ -66,13 +67,6 @@ const router = useRouter()
 const { state, isAdmin, clearAuth } = useAuth()
 
 const active = computed(() => route.path)
-const titleMap = {
-  '/users': '用户管理',
-  '/factories': '供应商库',
-  '/dictionary': '材料分类管理',
-  '/materials': '材料管理'
-}
-const title = computed(() => titleMap[`/${route.path.split('/')[1]}`] || '系统首页')
 const user = computed(() => state.user)
 
 const passwordVisible = ref(false)
@@ -108,36 +102,69 @@ const onLogout = () => {
 <style scoped>
 .layout {
   display: flex;
+  flex-direction: column;
   height: 100vh;
 }
 
+.topbar {
+  height: 64px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  box-shadow: 0 12px 24px rgba(15, 26, 42, 0.08);
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.logo-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--brand-900, #1b2a41);
+  white-space: nowrap;
+}
+
+.user {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.user-info {
+  text-align: right;
+  line-height: 1.2;
+}
+
+.user-info .name {
+  font-weight: 600;
+}
+
+.user-info .role {
+  font-size: 12px;
+  color: #6b7785;
+}
+
+.body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
 .sidebar {
   width: 220px;
+  flex-shrink: 0;
   background: linear-gradient(180deg, var(--brand-900), var(--brand-950));
   color: #fff;
   display: flex;
   flex-direction: column;
 }
 
-.logo {
-  padding: 20px 18px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.logo-title {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.logo-sub {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
 .menu {
   border-right: none;
   background: transparent;
   color: #fff;
+  padding-top: 12px;
 }
 
 :deep(.el-menu-item) {
@@ -156,6 +183,24 @@ const onLogout = () => {
   background-color: rgba(255, 255, 255, 0.08);
 }
 
+:deep(.el-sub-menu__title) {
+  color: #fff;
+  transition: all 0.2s ease;
+}
+
+:deep(.el-sub-menu__title:hover) {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+:deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+  color: #7cb4e3;
+}
+
+:deep(.el-sub-menu .el-menu) {
+  background: transparent;
+}
+
 .main {
   flex: 1;
   display: flex;
@@ -163,34 +208,10 @@ const onLogout = () => {
   min-height: 0;
 }
 
-.topbar {
-  height: 64px;
-  padding: 0 24px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #fff;
-  box-shadow: 0 12px 24px rgba(15, 26, 42, 0.08);
-}
-
-.user {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.user-info {
-  text-align: right;
-}
-
 .content {
   flex: 1;
   background: var(--bg);
   min-height: 0;
   overflow: auto;
 }
-
-.breadcrumb {
-  font-weight: 600;
-}
 </style>