# Dashboard 页面 · 设计覆盖 (page override)

> 作用域：`/admin/dashboard` (DashboardView.vue) + AppShell 左侧导航。
> 优先级：本文件 > MASTER.md。仅记录 deviation,共性规则继承自 MASTER。

---

## 1. 页面布局结构 (Bento Grid)

```
┌────────────────────────────────────────────────────────────────┐
│ Hero Banner  (深色沉浸 · 跨主题保持工业感)                       │
│   Left: tag + title + 8 个 quick-entry (4×2)                  │
│   Right: AGV 工业 SVG 插画 (主题色驱动 gradient)                 │
├──────────────────────────────────┬─────────────────────────────┤
│ KPI Strip (6 项 · 等宽数字)       │ 待办事项 (Tabs)              │
│ 任务占比 (4 行 · progress)         │   - 故障告警 (danger)        │
│ 任务执行情况 (donut + legend)     │   - 异常任务 (warning)       │
│                                  │   - 通信异常 (info)          │
│                                  │   - 服务器报警 (warning)     │
└──────────────────────────────────┴─────────────────────────────┘
```

栅格：1.45fr : 1fr,断点见 MASTER §6。

---

## 2. Hero Banner 颜色规则（关键变更）

**原问题**：`hero-banner` 内嵌 `linear-gradient(135deg, #1a0b3d 0%, #2d1b69 50%, #14082e 100%)` 这种**硬编码紫色**,在切换到 `deep-azure` / `emerald-forge` 等主题时会"撞色"。

**新规则**：使用 `--mg-bg-aside-1` / `--mg-bg-aside-2` + 主色 RGB,跨主题保持工业沉浸感。

```css
.hero-banner {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(var(--mg-primary-hover-rgb), 0.50) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(var(--mg-accent-rgb), 0.45) 0%, transparent 55%),
    linear-gradient(135deg, var(--mg-bg-aside-1) 0%, var(--mg-bg-aside-2) 100%);
  border: 1px solid rgba(var(--mg-accent-rgb), 0.30);
}
```

SVG `linearGradient` 中的 `#3b1e7a/#0e0a24` 等也建议改为接受 `var()` 注入,但 SVG 内联色本身允许多套主题保留紫色装饰风（hero scene 是装饰艺术,可保留 stylized 颜色）。

---

## 3. KPI 数字 (高优先级 · 必改)

| 元素 | 原 | 新 |
|---|---|---|
| 字体 | 默认 sans (PingFang/Inter) | `var(--mg-font-mono)` JetBrains Mono |
| `font-variant-numeric` | normal | `tabular-nums` |
| 颜色 (light theme) | `var(--mg-text-light)` | 同 — 保留 |
| 颜色 (industrial-purple) | gradient text | 保留 |
| 字号 | 22px | 26px (突出主指标) |
| `letter-spacing` | 0.5px | 0 (mono 自带间距) |

实现：在 `.kpi-value` 中加 `font-family: var(--mg-font-mono); font-variant-numeric: tabular-nums;`

---

## 4. 状态色规范化 (DashboardView.vue 强约束)

### 4.1 任务执行情况 (donut)

| 状态 | 原 (hardcoded) | 新 (token) |
|---|---|---|
| 待执行 | `#a78bfa` (品牌紫色挪用) | `var(--mg-status-idle)` |
| 执行中 | `#7c3aed` (品牌紫色挪用) | `var(--mg-status-info)` |
| 待整理 | `#f59e0b` | `var(--mg-status-warning)` |

不要再用品牌紫色当作运行状态——会造成"系统色"和"品牌色"语义混淆。

### 4.2 待办事项 tab tone

| Tab | tone class | 颜色 (light) | 颜色 (dark) |
|---|---|---|---|
| 故障告警 | `danger` | `--mg-status-danger` | 同 |
| 异常任务 | `warning` | `--mg-status-warning` | 同 |
| 通信异常 | `info` | `--mg-status-info` | 同 |
| 服务器报警 | `warning` | `--mg-status-warning` | 同 |

`.tab-count.danger / .warning / .info / .success` 在 theme.css 内统一,不再每个组件 hardcode。

---

## 5. 卡片层级 (Bento)

| 卡片 | z-level | 浮起 |
|---|---|---|
| Hero Banner | z-2 | 不浮起（始终展示） |
| 主体两栏 (map-card / todo-card) | z-2 | hover 升 z-3 (translateY -2px) |
| KPI 项 (.kpi-item) | z-2 inner | hover translateY -1px |
| 待办列表 (.todo-list li) | z-2 inner | hover bg 加深 |

---

## 6. AppShell 侧栏调整

### 6.1 active 菜单项 (高优先级 · 减噪)

**原问题**：active 菜单堆叠了 5 重 box-shadow + text-shadow + 多重 background gradient。

**新规则**：
- 用单一 left-border (`inset 3px 0 0 var(--mg-accent)`) + 一层柔和 bg gradient (角度从 90° 改为 270° 减少撞色) + 一层窄阴影
- 删除 text-shadow（在浅色主题里不可见,在深色里造成模糊）
- font-weight 600 即可强调,不需要发光

### 6.2 子菜单缩进
- 父菜单 padding-left 16px,子菜单 24px
- 子菜单 active 颜色不再用霓虹紫,而是 `color: var(--mg-accent); border-left: 2px solid var(--mg-primary-hover)` 提供清晰但克制的视觉线索

### 6.3 滚动条
- 侧栏菜单 `.menu` 自定义滚动条宽 4px、半透明色,避免影响紧凑视觉

---

## 7. 检查清单（与 MASTER §8 互补）

实施完成后核对：

- [ ] DashboardView 中无任何 `#7c3aed/#a78bfa` 状态色 hardcode
- [ ] KPI value 等宽对齐（tabular-nums）
- [ ] 切换主题：fame-lavender → deep-azure → emerald-forge,Hero/卡片/侧栏色彩跟随
- [ ] 侧栏 active 项视觉清晰,无 5+ shadow 叠加
- [ ] `prefers-reduced-motion: reduce` 下 quick-item 入场动画 / live dot 关闭
- [ ] 浏览器缩放到 100%/125%/150% 不破坏栅格