Migu2.0/frontends/apps/simple-platform-vue/design-system/MASTER.md

# 迷毂智能调度平台 · 设计系统 (MASTER)

> 由 ui-ux-pro-max skill 推导生成 (v1)。本文档是项目的**单一设计真理**。
> 页面级覆盖请放在 `design-system/pages/<page-name>.md`，覆盖优先级高于本 MASTER。

---

## 1. 产品定位 (Product Identity)

| 维度 | 取值 |
|---|---|
| **产品类型** | B2B 工业 SaaS · AGV 智能调度平台 · 实时监控仪表板 |
| **行业** | 智能制造 / 物流自动化 / 仓储机器人 |
| **匹配 reasoning rule** | `Autonomous Drone Fleet` (id=97) 主匹配 / `Logistics-Delivery` (id=25) + `Smart Home/IoT Dashboard` (id=54) + `SaaS Dashboard` (id=19) 辅助 |
| **目标用户** | 现场调度员、运维工程师、车队管理员、平台管理员 |
| **使用环境** | 桌面端为主 (1920×1080 / 2560×1440)、长时间在线、信息密集 |

---

## 2. 设计模式与风格 (Pattern & Style)

| 维度 | 主选 | 辅助 |
|---|---|---|
| **Landing/页面模式** | Real-Time + Feature-Rich | Bento Grid (主体布局) |
| **核心 UI 风格** | Real-Time Monitoring + Data-Dense Dashboard | Glassmorphism (卡片层级) + Dimensional Layering (z-轴层级) |
| **可选风格元素** | HUD/Sci-Fi FUI 微元素 (装饰用,不主导) | — |

### Real-Time Monitoring 必备特征
- 实时状态指示器（脉动 dot / pulsing badge）
- 流式图表（数值平滑过渡而非跳变）
- 告警通知层级（critical → warning → info）
- 连接状态/自动刷新指示
- 数值用 `font-variant-numeric: tabular-nums` 防抖动

### Data-Dense Dashboard 必备特征
- 多 widget 并排（KPI 行 + 主图 + 列表）
- 紧凑 padding（卡片 12-18px、KPI 项 10-12px）
- 高效栅格布局（CSS Grid）
- 表头常驻 hover tooltip
- 列表行 hover 高亮 + 平滑过渡

---

## 3. 颜色系统 (Color System)

### 3.1 状态色（项目级强约束 · 跨主题保持语义）

> **关键原则**：状态色与品牌色解耦。不要把品牌紫色当 "执行中"、把品牌橙色当 "警告"。

| Token | 浅色主题 (light) | 深色主题 (dark) | 语义 |
|---|---|---|---|
| `--mg-status-success` | `#16A34A` | `#22C55E` | 正常 / 成功 / 已完成 |
| `--mg-status-warning` | `#D97706` | `#F59E0B` | 异常 / 警告 / 等待人工 |
| `--mg-status-danger` | `#DC2626` | `#EF4444` | 严重故障 / critical / 阻断 |
| `--mg-status-info` | `#2563EB` | `#3B82F6` | 信息 / 进行中 / 通信 |
| `--mg-status-idle` | `#64748B` | `#94A3B8` | 待执行 / 已暂停 / 静默 |

### 3.2 数据可视化色板 (ECharts / Progress / Chart)

按"冷色→暖色"递进，避免单一色相被多 series 共用：

```
'#3B82F6'   蓝   优先级 1
'#22C55E'   绿   优先级 2
'#A855F7'   紫   优先级 3 (品牌色复用)
'#F59E0B'   琥珀  优先级 4
'#EF4444'   红   优先级 5 (告警语义保留时慎用)
'#06B6D4'   青   优先级 6
'#EC4899'   粉   优先级 7
'#84CC16'   黄绿  优先级 8
```

### 3.3 品牌主色（保留现有 7 套主题）

当前默认 `fame-lavender`（浅紫白主区 + 深紫侧栏）保持不变，所有变量在 `themes.ts` 中维护。
新增的状态色变量在每个主题预设里要补齐。

### 3.4 文字与对比度

| Context | 浅色主题 | 深色主题 |
|---|---|---|
| `text-light` (主文字) | `#0F172A` (slate-900) | `#FFFFFF` |
| `text-muted` (次要) | `#475569` (slate-600 ≥ 4.5:1) | `rgba(255,255,255,0.72)` |
| `text-dim` (装饰) | `#94A3B8` | `rgba(255,255,255,0.50)` |
| `text-faint` (占位) | `#CBD5E1` | `rgba(255,255,255,0.35)` |

> ⚠ 不要用 `slate-400 (#94A3B8)` 做正文 (light mode) ——对比度不够。

---

## 4. 字体 (Typography)

> 选自 `Minimal Swiss` (Inter) + `Developer Mono` (JetBrains Mono) 组合，Dashboard Data 类目最佳实践。

| 用途 | 字体栈 | 备注 |
|---|---|---|
| **UI 主字体** | `'PingFang SC', 'Microsoft YaHei', Inter, -apple-system, 'Segoe UI', sans-serif` | 中文优先,英文 fallback Inter |
| **数据数字** (KPI/坐标/ID) | `'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace` | 等宽,`font-variant-numeric: tabular-nums` |
| **代码/JSON** | 同数据数字 | — |

### 字号分级

| Token | 用途 | 字号 |
|---|---|---|
| `text-xs` | 标签/时间戳 | 11-12px |
| `text-sm` | 次要说明 | 12.5-13px |
| `text-base` | 正文/列表 | 14px |
| `text-md` | 卡片标题 | 15-16px |
| `text-lg` | 模块标题 | 18-20px |
| `text-xl` | 页面标题 | 24-28px |
| `text-2xl` | KPI 数值 | 28-32px |
| `text-hero` | Hero 标题 | 36-44px |

---

## 5. 间距与圆角 (Spacing & Radius)

### 5.1 间距尺度 (8pt 网格)

`4 / 8 / 12 / 16 / 18 / 24 / 32 / 48 / 64`

### 5.2 圆角

| Token | 值 | 用途 |
|---|---|---|
| `--mg-radius-sm` | 8px | 小标签、按钮、tag |
| `--mg-radius` | 14px | 卡片、面板 |
| `--mg-radius-lg` | 20px | Hero 区、对话框 |
| `--mg-radius-xl` | 24px | 全屏覆盖、巨型卡片 |

### 5.3 卡片层级 (Dimensional Layering)

```
z-0  背景 / orb / 网格
z-1  body 主区
z-2  普通卡片        shadow: 0 4px 14px rgba(_, .06)  light / 0 12px 30px rgba(0,0,0,.5) dark
z-3  浮起卡片 (hover) shadow: 0 8px 24px rgba(_, .10) light / 0 18px 40px rgba(0,0,0,.6) dark
z-4  Header / 侧栏  shadow: 0 1px 6px rgba(_, .05)
z-5  Dropdown / Toast
z-6  Modal / Dialog
```

---

## 6. 动画 (Motion)

| 场景 | 时长 | 缓动 |
|---|---|---|
| 颜色/边框变化 | 200ms | `ease-out` |
| 卡片 hover (transform) | 250ms | `cubic-bezier(.25, .8, .25, 1)` |
| 路由切换 | 250ms | 同上 |
| 状态脉动 (live dot) | 1.5-2s | `ease-in-out infinite` |
| Real-time 数值平滑 | 600-800ms | 同卡片 hover |

> ⚠ 严禁 hover 用 `transform: scale()` 引起 layout shift；用 `translateY(-2px)` + `box-shadow` 增强即可。
> ⚠ 必须遵守 `prefers-reduced-motion: reduce` —— 关闭装饰性动画。

---

## 7. 反模式清单 (Anti-Patterns)

来自 ui-reasoning.csv (Autonomous Drone Fleet + SaaS Dashboard) + Common Rules：

| 禁忌 | 原因 |
|---|---|
| ❌ 把品牌紫当作 "执行中" 状态色 | 状态色与品牌色冲突,扫读时干扰 |
| ❌ KPI 数值用变宽字体 | 实时跳动时数字晃动,影响阅读 |
| ❌ 浅色主题用 `slate-400` 做正文 | 对比度 < 4.5:1,违反 WCAG AA |
| ❌ 侧栏 active 用 4+ 重 box-shadow + text-shadow | 视觉噪音,装饰过度 |
| ❌ 硬编码 `#1a0b3d` 等颜色 | 跨主题切换失效 |
| ❌ 用 emoji 做 UI icon (🚀⚙️🎨) | 不统一,在不同 OS 渲染差异大 — 用 Heroicons / Element Plus icons |
| ❌ 实时图表用 hard refresh (闪一下) | 视觉干扰 — 用 `series.universalTransition` 或 `dataset` 平滑过渡 |

---

## 8. 实施清单 (Pre-Delivery Checklist)

每次发版前对照检查：

- [ ] 所有状态色用 `--mg-status-*` token,不直接 hardcode `#22c55e`
- [ ] 所有 KPI / 坐标 / ID 数字用 `font-family: var(--mg-font-mono)` + `font-variant-numeric: tabular-nums`
- [ ] 卡片/表单 hover 不引起 layout shift
- [ ] 浅色主题文字对比度 ≥ 4.5:1 (WCAG AA)
- [ ] 浮动元素 (header / aside) 在两套主题下都可见
- [ ] 响应式断点：375 / 768 / 1024 / 1440 / 1920 都过一遍
- [ ] 主题切换时无硬编码色 (grep `#[0-9a-f]{3,6}` in DashboardView/AppShell)

---

## 9. 引用与扩展

- **设计系统生成依据**：`.cursor/skills/ui-ux-pro-max/data/ui-reasoning.csv` (rows 19, 25, 54, 97), `colors.csv` (rows 26, 51, 53), `styles.csv` (rows 28, 31, 39, 46), `typography.csv` (rows 5, 9, 42)
- **页面级覆盖**：`design-system/pages/<page-name>.md`
- **变量来源**：`src/styles/theme.css` (CSS 变量声明) + `src/styles/themes.ts` (TS 主题预设)
- **Element Plus 适配**：`theme.css` 中 `.mg-content .el-*` 选择器统一管理

---

> **Generated**: ui-ux-pro-max v2.0 推理 + 项目实际代码 cross-check  
> **Last sync**: 2026-05-24