feat: 迁入 MiGu.Server、平台前端与车辆列表 reflection 回退
从 Simple-FR 拆出 Platform.Server 并重命名为 MiGu.Server；frontends 源码与构建脚本迁入本仓库。地图监控在 projection/cars 失败或为空时回退 reflection 车辆列表；Simple 仓库已移除旧 Platform.Server。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zhaowei.huang
Cursor
@@ -0,0 +1,128 @@
|
||||
# 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% 不破坏栅格
|
||||
Reference in New Issue
Block a user