From 88080ff1076ced5b60706de1ac1dbdd4c47efa96 Mon Sep 17 00:00:00 2001
From: "William.wan" <william.wan@vdano.com>
Date: Fri, 17 Apr 2026 10:34:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=A0=8F?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 analytics-demo-web/src/layouts/AppLayout.vue | 36 ++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/analytics-demo-web/src/layouts/AppLayout.vue b/analytics-demo-web/src/layouts/AppLayout.vue
index 5e76285..581f47b 100644
--- a/analytics-demo-web/src/layouts/AppLayout.vue
+++ b/analytics-demo-web/src/layouts/AppLayout.vue
@@ -37,7 +37,14 @@ const breadcrumbItems = computed(() => {
   <el-container class="app-shell">
     <el-aside width="280px" class="side">
       <div class="brand">贝朗医疗数据分析 Demo</div>
-      <el-menu :default-active="activePath" class="menu" @select="onSelect">
+      <el-menu
+        :default-active="activePath"
+        class="menu"
+        background-color="#050d18"
+        text-color="#cbd5e1"
+        active-text-color="#ffffff"
+        @select="onSelect"
+      >
         <el-sub-menu v-for="section in menuSections" :key="section.title" :index="section.basePath">
           <template #title>{{ section.title }}</template>
           <el-sub-menu
@@ -81,21 +88,38 @@ const breadcrumbItems = computed(() => {
 }
 
 .side {
-  background: #001529;
-  color: #fff;
-  border-right: 1px solid var(--border-color, #e5e7eb);
+  background: #050d18;
+  color: #f1f5f9;
+  /* 与主区浅灰底形成清晰分界，避免浅色描边在深色侧栏上发灰 */
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35);
 }
 
 .brand {
   padding: 18px 16px;
   font-size: 16px;
   font-weight: 600;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+  color: #f8fafc;
+  letter-spacing: 0.02em;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
 }
 
 .menu {
   border-right: none;
-  background: transparent;
+  --el-menu-bg-color: #050d18;
+  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.1);
+  --el-menu-text-color: #cbd5e1;
+  --el-menu-active-color: #ffffff;
+}
+
+.menu :deep(.el-sub-menu__title),
+.menu :deep(.el-menu-item) {
+  font-weight: 500;
+}
+
+.menu :deep(.el-menu-item.is-active) {
+  background-color: rgba(64, 158, 255, 0.22) !important;
+  border-right: 3px solid var(--el-color-primary);
 }
 
 .header {