refactor(web): 工作台与监控视图 UI 优化

- MonitorSelectionPanel / VehicleMonitorPanel / SelectionDetailPanel 等工作台面板交互与展示优化
- carActionExecute:前往站点遇 404(旧 DLL 无 goto-site 路由)时回退 WebGotoSite,并给出热更新指引
- 地图监控、任务分配、反射管理等视图细节调整;theme.css 补充样式
This commit is contained in:
zhaowei.huang
2026-05-29 23:52:42 +08:00
parent ea036760cb
commit 7877146934
18 changed files with 660 additions and 442 deletions
@@ -115,6 +115,24 @@
--el-color-primary-dark-2: var(--mg-primary-dark-2);
--mg-transition: all .25s cubic-bezier(.25, .8, .25, 1);
/* ── 通用「内嵌表面」veil 令牌 ──
* 面板里的嵌套行 / 子卡 / 统计项常用 rgba(255,255,255,.0x) 当作浅色微透表面,
* 在深色主题里是「白色微透」效果;但 fame-lavender 浅紫主题切到白底后这些白veil
* 直接消失(白叠白)。把它们抽成令牌:深色主题保持白微透,fame-lavender 翻成紫微透,
* 这样所有引用处自动双主题可见,且不影响 6 套深色主题观感。 */
--mg-veil-1: rgba(255, 255, 255, 0.05);
--mg-veil-2: rgba(255, 255, 255, 0.08);
--mg-veil-3: rgba(255, 255, 255, 0.12);
--mg-veil-border: rgba(255, 255, 255, 0.12);
--mg-veil-border-hi: rgba(255, 255, 255, 0.20);
/* ── 面板「动作按钮」令牌 ──
* 深色主题:半透明紫玻璃底 + 白字;fame-lavender:实色紫底 + 白字(对比足够)。 */
--mg-action-bg: rgba(76, 29, 149, 0.45);
--mg-action-bg-hover: rgba(109, 40, 217, 0.75);
--mg-action-border: rgba(167, 139, 250, 0.55);
--mg-action-border-hi: rgba(196, 181, 253, 0.9);
}
html {
@@ -920,6 +938,19 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); }
--mg-status-info-rgb: 29, 78, 216;
--mg-status-idle: #64748b;
--mg-status-idle-rgb: 100, 116, 139;
/* 内嵌表面 veil:浅紫主题翻成紫色微透,保证白底卡片内的嵌套行 / 子卡可见 */
--mg-veil-1: rgba(124, 58, 237, 0.05);
--mg-veil-2: rgba(124, 58, 237, 0.10);
--mg-veil-3: rgba(124, 58, 237, 0.16);
--mg-veil-border: rgba(124, 58, 237, 0.16);
--mg-veil-border-hi: rgba(124, 58, 237, 0.32);
/* 动作按钮:实色紫底 + 白字(对比 ~6.9:1WCAG AA 通过) */
--mg-action-bg: #7c3aed;
--mg-action-bg-hover: #6d28d9;
--mg-action-border: #7c3aed;
--mg-action-border-hi: #6d28d9;
}
/* body:纯净紫白渐变(更柔和、长时间阅读不刺眼) */