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 {