Files

T

zhaowei.huangandCursor 42978930ca feat: 迁入 MiGu.Server、平台前端与车辆列表 reflection 回退

从 Simple-FR 拆出 Platform.Server 并重命名为 MiGu.Server；frontends 源码与构建脚本迁入本仓库。地图监控在 projection/cars 失败或为空时回退 reflection 车辆列表；Simple 仓库已移除旧 Platform.Server。

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-05-29 18:16:34 +08:00

5.5 KiB

Raw Blame History

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,跨主题保持工业沉浸感。

.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% 不破坏栅格

5.5 KiB Raw Blame History Unescape Escape