feat(frontend): 终端化重构+策略管理(代码→实例→4运行)+撮合设计+回测参数 [nas]

- 终端化: 科幻色板(tokens/EP/reset/chips/echarts)+Layout(Cmd+K/时钟/状态灯)+mock全接口+Dashboard/Result/Monitor样板+6图表配色
- 策略管理: 策略库三层(代码→实例→4运行)+新建策略(组合/CTA模板+Monaco)+在线代码编辑(Monaco)+实例CRUD(参数反射/标的池type切/interval/match_session)
- 实例→运行关联: backtest/paper/live New页读instance预填
- 撮合设计: match_session(下一根K线开盘/收盘/集合竞价)+interval定频率+实走限日线/分钟走miniQMT
- 回测参数: 基准下拉+日期默认1年localStorage记忆+滑点/手续费UI
- 账户管理页+命名重整(模拟盘/实盘,消除撞名)
- spec §11-13(菜单/策略管理/撮合设计) + Monaco编辑器 + 策略实例删除/编辑入口 + 列表实例列

frontend/src/styles/chips.css

@@ -1,63 +1,77 @@
-/* 全局 chip / 状态色 —— 所有页面复用（红涨绿跌 A 股配色，深色主题） */
+/* 全局 chip / 状态色 —— 科幻终端（荧光青+琥珀+红涨绿跌，深色主题） */
 .chip {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: 1px 8px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-weight: 500;
+  border-radius: var(--r-sm);
+  font-size: 11.5px;
+  font-weight: 600;
   line-height: 18px;
+  letter-spacing: 0.3px;
   white-space: nowrap;
+  font-family: var(--mono);
+  border: 1px solid transparent;
 }
 
 /* 任务类型 */
 .chip-cta {
   color: var(--brand);
-  background: rgba(24, 144, 255, 0.14);
+  background: rgba(0, 229, 255, 0.1);
+  border-color: rgba(0, 229, 255, 0.3);
 }
 .chip-optimize {
-  color: #13c2c2;
-  background: rgba(19, 194, 194, 0.14);
+  color: var(--brand);
+  background: rgba(0, 229, 255, 0.06);
+  border-color: rgba(0, 229, 255, 0.2);
 }
 .chip-factor {
-  color: #b37feb;
-  background: rgba(179, 127, 235, 0.14);
+  color: #b48cff;
+  background: rgba(180, 140, 255, 0.1);
+  border-color: rgba(180, 140, 255, 0.3);
 }
 .chip-paper {
-  color: #d29922;
-  background: rgba(210, 153, 34, 0.14);
+  color: var(--amber);
+  background: rgba(255, 176, 0, 0.1);
+  border-color: rgba(255, 176, 0, 0.3);
+}
+.chip-portfolio {
+  color: var(--amber);
+  background: rgba(255, 176, 0, 0.08);
+  border-color: rgba(255, 176, 0, 0.25);
 }
 
-/* 状态 */
+/* 状态（终端信号灯配色） */
 .st-done {
-  color: var(--down);
-  background: rgba(63, 185, 80, 0.14);
+  color: var(--lamp-ok);
+  background: rgba(46, 230, 138, 0.1);
+  border-color: rgba(46, 230, 138, 0.3);
 }
 .st-failed {
-  color: var(--danger);
-  background: rgba(248, 81, 73, 0.14);
+  color: var(--lamp-crit);
+  background: rgba(255, 77, 94, 0.1);
+  border-color: rgba(255, 77, 94, 0.3);
 }
 .st-running {
   color: var(--brand);
-  background: rgba(24, 144, 255, 0.14);
+  background: rgba(0, 229, 255, 0.1);
+  border-color: rgba(0, 229, 255, 0.3);
 }
 .st-pending {
-  color: var(--warn);
-  background: rgba(210, 153, 34, 0.14);
+  color: var(--lamp-warn);
+  background: rgba(255, 176, 0, 0.1);
+  border-color: rgba(255, 176, 0, 0.3);
 }
 
 /* 涨跌（红涨绿跌） */
-.up {
-  color: var(--up);
-}
-.down {
-  color: var(--down);
-}
+.up { color: var(--up); }
+.down { color: var(--down); }
 
 /* 通用文字层级 */
 .mono {
   font-family: var(--mono);
   font-size: 12px;
   color: var(--text);
+  font-variant-numeric: tabular-nums;
 }
 .muted {
   color: var(--text-2);
@@ -70,13 +84,52 @@
   margin-left: 8px;
   padding: 0 8px;
   min-width: 24px;
-  height: 22px;
-  line-height: 22px;
+  height: 20px;
+  line-height: 20px;
   text-align: center;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
+  font-family: var(--mono);
   color: var(--text-2);
   background: var(--bg-hover);
-  border-radius: 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
   vertical-align: middle;
 }
+
+/* 终端按钮 · 描边发光风（全站复用） */
+.term-btn {
+  padding: 6px 14px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r-sm);
+  color: var(--text-2);
+  font-family: var(--mono);
+  font-size: 11.5px;
+  letter-spacing: 0.3px;
+  cursor: pointer;
+  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
+}
+.term-btn:hover {
+  border-color: rgba(0, 229, 255, 0.5);
+  color: var(--brand);
+  box-shadow: 0 0 12px rgba(0, 229, 255, 0.18);
+}
+.term-btn.primary {
+  background: var(--cyan-soft);
+  border-color: rgba(0, 229, 255, 0.5);
+  color: var(--brand);
+  font-weight: 600;
+}
+.term-btn.primary:hover {
+  background: rgba(0, 229, 255, 0.22);
+  border-color: var(--brand);
+}
+.term-btn.sm { padding: 3px 9px; font-size: 10.5px; }
+.term-btn.danger { color: var(--lamp-crit); }
+.term-btn.danger:hover {
+  border-color: rgba(255, 77, 94, 0.5);
+  color: var(--lamp-crit);
+  box-shadow: 0 0 12px rgba(255, 77, 94, 0.18);
+}
+.term-btn:disabled { opacity: 0.5; cursor: not-allowed; }

frontend/src/styles/element-dark.css

@@ -1,13 +1,13 @@
-/* Element Plus 深色覆盖 —— html.dark 已启用 EP 官方深色，此处精修到量化主题 */
+/* Element Plus 科幻终端覆盖 —— html.dark 下精修到荧光青 / 深空黑主题 */
 html.dark {
-  /* 主色 → 品牌 */
-  --el-color-primary: #1890ff;
-  --el-color-primary-light-3: #2f7fce;
-  --el-color-primary-light-5: #1f5e9c;
-  --el-color-primary-light-7: #164670;
-  --el-color-primary-light-8: #113a5e;
-  --el-color-primary-light-9: #0e2f4d;
-  --el-color-primary-dark-2: #3a9eff;
+  /* 主色 → 荧光青（深色主题色阶越 light 越深，作 tint 底） */
+  --el-color-primary: #00e5ff;
+  --el-color-primary-light-3: #2a8095;
+  --el-color-primary-light-5: #1c5a6a;
+  --el-color-primary-light-7: #143f4a;
+  --el-color-primary-light-8: #0f3038;
+  --el-color-primary-light-9: #0a2228;
+  --el-color-primary-dark-2: #33eaff;
 
   /* 背景层级 */
   --el-bg-color: var(--bg-card);
@@ -19,7 +19,7 @@ html.dark {
   --el-text-color-regular: var(--text-2);
   --el-text-color-secondary: var(--text-3);
   --el-text-color-placeholder: var(--text-3);
-  --el-text-color-disabled: #4b5158;
+  --el-text-color-disabled: #3a4654;
 
   /* 边框 */
   --el-border-color: var(--border);
@@ -39,39 +39,51 @@ html.dark {
   --el-fill-color-blank: transparent;
 
   /* 遮罩/禁用 */
-  --el-mask-color: rgba(1, 4, 9, 0.72);
+  --el-mask-color: rgba(2, 4, 9, 0.82);
   --el-disabled-bg-color: var(--bg-card);
   --el-disabled-text-color: var(--text-3);
   --el-disabled-border-color: var(--border-2);
 
-  /* 语义色（danger 用红、success 用绿，契合涨跌但保持语义） */
-  --el-color-success: #3fb950;
-  --el-color-warning: #d29922;
-  --el-color-danger: #f85149;
-  --el-color-error: #f85149;
-  --el-color-info: #8b949e;
+  /* 语义色 */
+  --el-color-success: #2ee68a;
+  --el-color-success-light-9: rgba(46, 230, 138, 0.12);
+  --el-color-warning: #ffb000;
+  --el-color-warning-light-9: rgba(255, 176, 0, 0.12);
+  --el-color-danger: #ff4d5e;
+  --el-color-danger-light-9: rgba(255, 77, 94, 0.12);
+  --el-color-error: #ff4d5e;
+  --el-color-info: #7a8a9a;
 }
 
-/* 组件细节精修 */
+/* 组件细节精修 —— 科幻终端 */
 html.dark {
-  /* 卡片更紧凑、去多余阴影 */
+  /* 卡片：去阴影，加顶部荧光高光线 */
   .el-card {
     background-color: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--r-md);
     box-shadow: none;
+    position: relative;
+  }
+  .el-card::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.4), transparent);
+    opacity: 0.6;
   }
   .el-card__header {
-    padding: 12px 16px;
+    padding: 10px 16px;
     border-bottom: 1px solid var(--border);
     font-weight: 600;
+    font-size: 13px;
     color: var(--text);
+    letter-spacing: 0.4px;
   }
-  .el-card__body {
-    padding: 16px;
-  }
+  .el-card__body { padding: 16px; }
 
-  /* 表格密度 */
+  /* 表格密度 + 等宽数字 */
   .el-table {
     --el-table-bg-color: transparent;
     --el-table-tr-bg-color: transparent;
@@ -81,17 +93,17 @@ html.dark {
     --el-table-border: 1px solid var(--border-2);
     --el-table-text-color: var(--text);
     --el-table-header-text-color: var(--text-2);
-    font-size: 13px;
+    font-size: 12.5px;
+    font-variant-numeric: tabular-nums;
   }
   .el-table th.el-table__cell {
     background-color: var(--bg-hover) !important;
     font-weight: 600;
+    letter-spacing: 0.3px;
   }
-  .el-table .cell {
-    line-height: 1.5;
-  }
+  .el-table .cell { line-height: 1.5; }
 
-  /* 菜单 */
+  /* 菜单：激活项荧光青 + 左侧发光指示条 */
   .el-menu {
     --el-menu-bg-color: transparent;
     --el-menu-text-color: var(--text-2);
@@ -99,38 +111,56 @@ html.dark {
     --el-menu-active-color: var(--brand);
     border-right: none;
   }
-  .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-menu-item.is-active {
     color: var(--brand);
+    background: var(--cyan-soft) !important;
+    box-shadow: inset 2px 0 0 var(--brand);
   }
+  .el-sub-menu.is-active > .el-sub-menu__title { color: var(--brand); }
 
-  /* 输入/选择器贴主题 */
+  /* 输入/选择器：聚焦荧光发光 */
   .el-input__wrapper,
   .el-textarea__inner,
   .el-select__wrapper {
     background-color: var(--bg) !important;
     box-shadow: 0 0 0 1px var(--border) inset !important;
+    border-radius: var(--r-sm) !important;
   }
   .el-input__wrapper:hover,
   .el-select__wrapper:hover {
-    box-shadow: 0 0 0 1px var(--brand) inset !important;
+    box-shadow: 0 0 0 1px var(--cyan-dim) inset !important;
   }
   .el-input.is-focus .el-input__wrapper,
   .el-select__wrapper.is-focused {
-    box-shadow: 0 0 0 1px var(--brand) inset !important;
+    box-shadow: 0 0 0 1px var(--brand) inset, 0 0 12px rgba(0, 229, 255, 0.18) !important;
   }
 
-  /* 描述列表/标签页 边框 */
-  .el-descriptions__border {
-    background-color: transparent;
+  /* 主按钮：荧光青描边发光风 */
+  .el-button--primary {
+    background: var(--cyan-soft);
+    border-color: rgba(0, 229, 255, 0.5);
+    color: var(--brand);
+    font-weight: 600;
+    letter-spacing: 0.3px;
+  }
+  .el-button--primary:hover {
+    background: rgba(0, 229, 255, 0.22);
+    border-color: var(--brand);
+    box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
   }
 
-  /* 滚动条贴深色 */
-  .el-scrollbar__bar {
-    opacity: 0.5;
-  }
+  /* 标签页激活下划线荧光青 */
+  .el-tabs__active-bar { background-color: var(--brand); }
+  .el-tabs__item.is-active { color: var(--brand); }
+  .el-tabs__item:hover { color: var(--cyan-dim); }
 
-  /* 数字用等宽（涨跌色由业务层控制） */
+  /* 描述列表边框 */
+  .el-descriptions__border { background-color: transparent; }
+
+  /* 滚动条 */
+  .el-scrollbar__bar { opacity: 0.5; }
+
+  /* 数字等宽 */
   .num {
     font-family: var(--mono);
     font-variant-numeric: tabular-nums;

frontend/src/styles/reset.css

@@ -1,4 +1,4 @@
-/* 全局 reset —— 后台基础：深色 / 紧凑 / 高数据密度 */
+/* 全局 reset —— 科幻终端基础：深空黑 / 紧凑 / 高数据密度 */
 *,
 *::before,
 *::after {
@@ -13,11 +13,12 @@ body,
 
 body {
   margin: 0;
-  background: var(--bg);
+  background-color: var(--bg);
   color: var(--text);
   font-family: var(--sans);
   font-size: 13px;
   line-height: 1.5;
+  font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -35,15 +36,139 @@ a {
   color: var(--brand);
   text-decoration: none;
 }
+a:hover { color: var(--cyan-dim); }
 
-/* 深色滚动条 */
+/* 深色滚动条 · 青调 */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }
-::-webkit-scrollbar-thumb:hover { background: #424a53; }
+::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.4); }
+
+/* 选区荧光青 */
+::selection {
+  background: rgba(0, 229, 255, 0.25);
+  color: var(--text);
+}
+
+/* ====== 科幻装饰工具类（页面复用） ====== */
+
+/* 终端网格底 —— 给主内容区/面板叠一层 1px 青网格 */
+.term-grid {
+  background-image:
+    linear-gradient(var(--grid-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+  background-size: var(--grid-size) var(--grid-size);
+}
+
+/* 信号灯 · 圆点 + 脉冲（配合 .lamp-ok/.lamp-warn/.lamp-crit/.lamp-idle） */
+.lamp {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  position: relative;
+  vertical-align: middle;
+}
+.lamp::after {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.35;
+  filter: blur(2px);
+}
+.lamp-ok { background: var(--lamp-ok); }
+.lamp-warn { background: var(--lamp-warn); }
+.lamp-crit { background: var(--lamp-crit); }
+.lamp-idle { background: var(--lamp-idle); }
+.lamp-pulse { animation: lamp-pulse 1.8s var(--ease) infinite; }
+@keyframes lamp-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lamp-pulse { animation: none; }
+}
+
+/* 几何角标 —— 面板四角的 L 形装饰 */
+.term-corners {
+  position: relative;
+}
+.term-corners::before,
+.term-corners::after {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-color: rgba(0, 229, 255, 0.5);
+  border-style: solid;
+  pointer-events: none;
+}
+.term-corners::before {
+  top: 0; left: 0;
+  border-width: 1px 0 0 1px;
+}
+.term-corners::after {
+  bottom: 0; right: 0;
+  border-width: 0 1px 1px 0;
+}
+
+/* 扫描线 —— 叠在监控/实时面板顶部，缓慢下扫 */
+.term-scan {
+  position: relative;
+  overflow: hidden;
+}
+.term-scan::after {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 40%;
+  background: linear-gradient(180deg, rgba(0, 229, 255, 0.06), transparent);
+  animation: term-scan-move 4s linear infinite;
+  pointer-events: none;
+}
+@keyframes term-scan-move {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(250%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .term-scan::after { animation: none; display: none; }
+}
+
+/* 终端面板基类 —— 带 1px 青色顶高光 + 角标 */
+.term-panel {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-md);
+  position: relative;
+}
+.term-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  color: var(--text-2);
+  text-transform: uppercase;
+  font-family: var(--mono);
+}
+.term-panel-head::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 12px;
+  background: var(--brand);
+  margin-right: 8px;
+  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
+}
+.term-panel-body { padding: 14px; }
 
 /* ====== 布局工具类 ====== */
 .page {
@@ -65,18 +190,22 @@ a {
   font-size: 16px;
   font-weight: 600;
   color: var(--text);
+  letter-spacing: 0.3px;
 }
 
 .page-subtitle {
   font-size: 12px;
   color: var(--text-3);
+  font-family: var(--mono);
 }
 
 .section-title {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--text-2);
-  letter-spacing: 0.3px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  font-family: var(--mono);
 }
 
 /* 涨跌色工具 */

frontend/src/styles/tokens.css

@@ -1,28 +1,53 @@
-/* 量化后台设计 token —— 深色 / 高密度 / 红涨绿跌（A股惯例） */
+/* 三国量化研究台 · 科幻终端设计 token
+   深空黑 + 荧光青 + 琥珀 · 高密度数据终端
+   换肤原则：只改值不改名，全站页面零改动即刻生效 */
 :root {
-  /* 背景层级 */
-  --bg: #0d1117;          /* 主背景 */
-  --bg-card: #161b22;     /* 卡片/面板 */
-  --bg-hover: #1c2128;    /* 悬停/表头 */
-  --bg-overlay: #1c2128;  /* 弹层 */
+  /* —— 背景层级（深空黑，蓝调冷底）—— */
+  --bg: #05080d;          /* 主背景 · 深空黑 */
+  --bg-card: #0a0f17;     /* 卡片/面板 · 略亮冷蓝 */
+  --bg-hover: #0e1622;    /* 悬停/表头 */
+  --bg-overlay: #0d1320;  /* 弹层 */
+  --panel: #070b12;       /* 嵌套面板 · 比主背景略深，多层叠 */
 
-  /* 文字 */
-  --text: #e6edf3;        /* 主 */
-  --text-2: #8b949e;      /* 次 */
-  --text-3: #6e7681;      /* 弱/占位 */
+  /* —— 文字（冷调）—— */
+  --text: #d4e4f0;        /* 主 · 冷白 */
+  --text-2: #7a8a9a;      /* 次 */
+  --text-3: #4a5868;      /* 弱/占位 */
 
-  /* 语义色：红涨绿跌 */
-  --up: #f85149;          /* 涨/红 */
-  --down: #3fb950;        /* 跌/绿 */
-  --brand: #1890ff;       /* 品牌/链接/激活 */
-  --warn: #d29922;
-  --danger: #f85149;
+  /* —— 主强调：荧光青 —— */
+  --brand: #00e5ff;       /* 品牌/链接/激活 · 荧光青 */
+  --cyan: #00e5ff;        /* 语义别名 */
+  --cyan-dim: #00b8cc;    /* 暗青（hover/次要激活） */
+  --cyan-soft: rgba(0, 229, 255, 0.14);  /* 青色填充底 */
 
-  /* 边框 */
-  --border: #30363d;
-  --border-2: #21262d;    /* 更弱的分隔线 */
+  /* —— 数据高亮：琥珀 —— */
+  --amber: #ffb000;       /* 数据高亮/警告 */
+  --warn: #ffb000;        /* 语义别名 */
+  --amber-soft: rgba(255, 176, 0, 0.14);
 
-  /* 间距 */
+  /* —— 涨跌（A股：红涨绿跌）—— */
+  --up: #ff4d5e;          /* 涨 · 红 */
+  --down: #2ee68a;        /* 跌 · 绿 */
+  --danger: #ff4d5e;
+
+  /* —— 信号灯（终端状态）—— */
+  --lamp-ok: #2ee68a;     /* 运行/正常 · 绿 */
+  --lamp-warn: #ffb000;   /* 告警 · 琥珀 */
+  --lamp-crit: #ff4d5e;   /* 临界 · 红 */
+  --lamp-idle: #4a5868;   /* 空闲 · 灰 */
+
+  /* —— 边框（冷调，低明度）—— */
+  --border: #16202e;      /* 主边框 */
+  --border-2: #0f1822;    /* 更弱分隔线 */
+
+  /* —— 科幻装饰 —— */
+  --grid-line: rgba(0, 229, 255, 0.035);  /* 1px 网格底 */
+  --grid-size: 32px;
+  --scan: rgba(0, 229, 255, 0.05);        /* 扫描线 */
+  --glow-cyan: 0 0 0 1px rgba(0, 229, 255, 0.22), 0 0 18px rgba(0, 229, 255, 0.08);
+  --glow-amber: 0 0 0 1px rgba(255, 176, 0, 0.22), 0 0 18px rgba(255, 176, 0, 0.08);
+
+  /* —— 间距 —— */
   --sp-1: 4px;
   --sp-2: 8px;
   --sp-3: 12px;
@@ -30,22 +55,22 @@
   --sp-5: 24px;
   --sp-6: 32px;
 
-  /* 圆角 */
-  --r-sm: 4px;
-  --r-md: 6px;
-  --r-lg: 8px;
+  /* —— 圆角（终端：近直角）—— */
+  --r-sm: 2px;
+  --r-md: 3px;
+  --r-lg: 4px;
 
-  /* 阴影 */
-  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+  /* —— 阴影 —— */
+  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
 
-  /* 字体 */
+  /* —— 字体 —— */
   --mono: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
   --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
 
-  /* 布局 */
-  --sidebar-w: 208px;
-  --header-h: 52px;
+  /* —— 布局 —— */
+  --sidebar-w: 200px;
+  --header-h: 48px;
 
   --ease: cubic-bezier(0.4, 0, 0.2, 1);
 }