zhaowei.huangandCursor
95c1a74122
统一 outpost-light/purple/blue 壳层 token，修复扩展字段与操作按钮在浅色下的可读性。 Co-authored-by: Cursor <cursoragent@cursor.com>
274 lines
12 KiB
Markdown
274 lines
12 KiB
Markdown
# 迷毂平台 UI · 锁定 Outpost 浅色设计规格
|
||
|
||
> 状态：待用户审查（主题策略已按反馈修订）
|
||
> 日期：2026-07-25
|
||
> 参考站：[Outpost · Fairyland Technology](https://fairylandtech.amerc.ai)
|
||
> 决策：方案 1 壳层气质（Outpost）+ **主路径精选 3 套配色（浅色 / 紫色 / 蓝色）**；旧深色霓虹主题**保留并藏入高级**
|
||
> 范围前端：`Migu2.0/frontends/apps/simple-platform-vue`
|
||
> 不改：SimpleLite ImGui / CycleGUI 桌面壳、后端 API 契约
|
||
|
||
---
|
||
|
||
## 1. 目标与非目标
|
||
|
||
### 1.1 目标
|
||
|
||
- 迷毂 Web（登录 → AppShell → 业务页 → 地图编辑器 chrome）在视觉与壳层气质上对齐 Outpost。
|
||
- **壳层统一为 Outpost 结构**：浅主区 + 深色纹理侧栏 + 纸白卡片 + 柔阴影；无默认霓虹 orb。
|
||
- **主路径提供 3 套精选配色**（可一键切换）：浅色（默认）、紫色、蓝色——同结构、不同主色/侧栏色相。
|
||
- 旧深色霓虹主题（星云紫等）**代码保留**，放入「高级 / 兼容主题」，不进主切换列表。
|
||
- 保留调度业务信息架构；**不**把 Outpost 会话列表硬套进调度导航。
|
||
- 状态色（绿/琥珀/红/蓝/灰）与品牌色解耦，语义不变。
|
||
|
||
### 1.2 非目标
|
||
|
||
- 不重写业务逻辑、路由权限、Projection/SSE 协议。
|
||
- 不第一阶段替换 Element Plus（以 CSS 变量 + 皮肤覆盖为主）。
|
||
- 不强制 3D 画布（webVRender）改浅色底。
|
||
- 不把 Outpost 的 Agent 对话 IA 迁移为迷毂主导航。
|
||
- 主路径不堆砌过多主题（精选 3 + 高级兼容即可）。
|
||
|
||
---
|
||
|
||
## 2. 产品决策（已确认）
|
||
|
||
| 项 | 决策 |
|
||
|---|---|
|
||
| 壳层气质 | Outpost：浅主区 + 深侧栏 + 纸白卡 + 柔阴影 |
|
||
| 主路径配色 | **3 套精选**：浅色（默认）/ 紫色 / 蓝色 |
|
||
| 旧深色主题 | **保留**，藏入用户菜单「高级 → 兼容主题」 |
|
||
| ThemeSwitcher | **保留在顶栏**，只列出精选 3 套；兼容主题在高级入口 |
|
||
| 登录页 | 跟当前精选主题（默认浅色 Outpost）；去掉星空霓虹主导 |
|
||
| 地图编辑器 | Chrome 跟精选浅色壳；**3D 画布保持深色** |
|
||
| AI 助手抽屉 | 视觉跟 Outpost 对话区，不改后端权限 |
|
||
|
||
---
|
||
|
||
## 3. 参考站提炼（Outpost）
|
||
|
||
### 3.1 信息架构（借壳不借业务）
|
||
|
||
```
|
||
┌────────────┬──────────────────────────────────────┐
|
||
│ Sidebar │ Top context (optional, light) │
|
||
│ ~256px ├──────────────────────────────────────┤
|
||
│ dark plum │ Main workspace │
|
||
│ textured │ paper cards / lists / forms │
|
||
│ brand+nav │ │
|
||
└────────────┴──────────────────────────────────────┘
|
||
```
|
||
|
||
迷毂映射：
|
||
|
||
| Outpost | 迷毂 |
|
||
|---|---|
|
||
| Sidebar brand + list | `AppShell` 侧栏 logo + `el-menu` |
|
||
| Workspace | `el-main` + 各业务 View |
|
||
| Artifact / card | KPI 卡、列表卡、属性面板、抽屉 |
|
||
| Conversation chrome | AI 助手抽屉（仅视觉） |
|
||
|
||
### 3.2 设计 Token（锁定值）
|
||
|
||
来源：Outpost 线上 CSS（`color-scheme: light`）。
|
||
|
||
| Token | 值 | 用途 |
|
||
|---|---|---|
|
||
| `--op-page` | `#f6f3fb` | 应用主区底 |
|
||
| `--op-paper` | `#fffefd` | 卡片/面板底 |
|
||
| `--op-paper-soft` | `#fbf9fd` | 次级表面 |
|
||
| `--op-ink` | `#28213a` | 主文字 |
|
||
| `--op-muted` | `#756d85` | 次级文字 |
|
||
| `--op-faint` | `#9a93a7` | 弱化/占位 |
|
||
| `--op-line` | `#e8e2ef` | 分割线 |
|
||
| `--op-line-strong` | `#ddd4e8` | 强调边框 |
|
||
| `--op-violet` | `#7543e8` | 品牌主色 |
|
||
| `--op-violet-strong` | `#5d2ecb` | 主色按下/深 |
|
||
| `--op-violet-soft` | `#eee8ff` | 主色浅底 |
|
||
| `--op-mint` / `--op-amber` / `--op-danger` / `--op-blue` | 见参考站 | 仅作辅助；**业务状态仍用既有 `--mg-status-*`** |
|
||
| `--op-shadow` | `0 12px 35px rgba(54,35,78,.08)` | 默认浮起 |
|
||
| `--op-shadow-strong` | `0 22px 65px rgba(46,24,72,.18)` | 弹层/强调卡 |
|
||
| `--op-radius` | `16px` | 默认圆角 |
|
||
| Sidebar | `linear-gradient(160deg,#3f2454,#2c193c 45%,#241530)` + 细纹理 | 侧栏底 |
|
||
| Font | Inter + 系统无衬线；数据位保留 JetBrains Mono | 与现 `--mg-font-*` 对齐 |
|
||
|
||
### 3.3 明确禁止（相对当前「星云紫」）
|
||
|
||
- 主路径禁用：大面积霓虹 glow、多层 orb 背景、深色玻璃卡片作默认表面。
|
||
- 主路径禁用：把品牌紫当 success/warning。
|
||
- 避免再引入第三套互不兼容的色板命名；Outpost token **映射进**既有 `--mg-*`，业务组件继续只读 `--mg-*`。
|
||
|
||
---
|
||
|
||
## 4. 精选三套主题 + Token 映射
|
||
|
||
三套均遵守同一 Outpost 壳层规则（浅主区 / 纸白卡 / 柔阴影 / orb=0 / radius≈16），仅 **主色 + 侧栏色相 + 主区底轻微染色** 不同。
|
||
|
||
### 4.1 主路径精选（`PRIMARY_THEMES`）
|
||
|
||
| id | 显示名 | 定位 | 主色 | 侧栏 | 主区底 |
|
||
|---|---|---|---|---|---|
|
||
| `outpost-light` | **浅色**（默认） | 最贴近参考站 | `#7543e8` | `#3f2454 → #241530`（plum） | `#f6f3fb` |
|
||
| `outpost-purple` | **紫色** | 同结构、更饱和紫品牌 | `#7c3aed` | `#2d1b69 → #1a1040` | `#f3eefc`（略偏紫） |
|
||
| `outpost-blue` | **蓝色** | 同结构、蓝科技感 | `#3c78d2` | `#0f2744 → #0a1a30` | `#f3f6fb`（略偏蓝） |
|
||
|
||
共用表面：
|
||
|
||
| `--mg-*` | 值 |
|
||
|---|---|
|
||
| `--mg-bg-card-rgb` | paper `255,254,253` |
|
||
| `--mg-text` 系 | ink `#28213a` / muted `#756d85`（浅底深字） |
|
||
| `--mg-glass-*` | 白卡片 + 细边 + 柔阴影（无强 blur glow） |
|
||
| `--mg-radius*` | 基准 16px |
|
||
| `--mg-orb-*-opacity` | **0** |
|
||
| 状态色 | 继续 `--mg-status-*`，不随主题主色改语义 |
|
||
|
||
### 4.2 高级兼容主题（`LEGACY_THEMES`，保留）
|
||
|
||
现有深色霓虹预设移入此列表（至少含）：
|
||
|
||
- `industrial-purple` 星云紫
|
||
- `deep-azure` 深邃蓝
|
||
- `emerald-forge` / `crimson-iron` / `graphite-steel` / `amber-forge`（若仍在代码中）
|
||
- 旧 `fame-lavender`：合并进 `outpost-purple` 或标 deprecated 后从主列表移除
|
||
|
||
入口：用户头像菜单 → **高级 → 兼容主题**（折叠）。主顶栏 `ThemeSwitcher` **只显示 3 个精选**。
|
||
|
||
### 4.3 默认与迁移
|
||
|
||
- `DEFAULT_THEME_ID = 'outpost-light'`
|
||
- `:root` 默认 CSS 与 `outpost-light` 一致，避免闪屏
|
||
- localStorage 若为未知 / 已 deprecated id → 迁移到 `outpost-light`
|
||
- 若为 `LEGACY_THEMES` 中的 id → **尊重用户选择**（不强制踢回浅色）
|
||
- 登录页品牌区跟当前主题侧栏色；`--lg-*` 随精选主题切换或登录页固定跟 `outpost-light`（实现时二选一，推荐：**登录固定 outpost-light，进壳后再跟用户主题**）
|
||
|
||
---
|
||
|
||
## 5. 壳层与页面改造要点
|
||
|
||
### 5.1 AppShell
|
||
|
||
- 侧栏：纹理渐变（随主题色相）、品牌区分隔线、菜单选中用 soft 底或左侧高光条。
|
||
- 主区装饰 orb：`opacity=0`。
|
||
- 顶栏：浅底、细边、弱阴影；breadcrumb + **精选 ThemeSwitcher（3 项）** + 用户区。
|
||
- 用户菜单增加「高级 → 兼容主题」子菜单（列出 `LEGACY_THEMES`）。
|
||
- 底栏：弱化字色或并入顶栏次级信息（可选后续）。
|
||
- `aside-footer`：版本号；可选极简当前主题名。
|
||
|
||
### 5.2 登录 / 配置向导
|
||
|
||
- 布局可保留左右分栏，但：
|
||
- 背景：浅底 + 可选极轻纹理，不用星空粒子主导。
|
||
- 左：深色品牌板（默认跟 `outpost-light` 侧栏）。
|
||
- 右：paper 表单卡 + 主色按钮。
|
||
- 配置向导与登录同肤。
|
||
|
||
### 5.3 Element Plus 皮肤
|
||
|
||
统一覆盖（全局）：
|
||
|
||
- Button primary / default
|
||
- Card / Dialog / Drawer / MessageBox
|
||
- Table / Pagination
|
||
- Menu（侧栏已透明底，补选中态）
|
||
- Input / Select / Tabs / Tag
|
||
|
||
原则：纸白表面、ink 文字、violet 主按钮、radius≈14–16、阴影用 `--op-shadow`。
|
||
|
||
### 5.4 业务页（渐进，同一皮肤）
|
||
|
||
优先级：
|
||
|
||
1. Dashboard / 地图监控 / 调度工作台
|
||
2. 任务 / 告警 / 车辆中心
|
||
3. OTA / 配置中心 / 服务状态
|
||
4. AI 助手抽屉
|
||
|
||
统一模式：`page-header` + paper 卡片栅格 + 紫 CTA；清理页面内 `industrial-purple` 专用覆盖或改为仅在「兼容主题」下生效。
|
||
|
||
### 5.5 地图编辑器
|
||
|
||
| 层 | 皮肤 |
|
||
|---|---|
|
||
| EditTopBar / ToolRail / PropertyPanel / StatusBar / AI 侧栏 | Outpost 浅色 |
|
||
| Workspace3D / webVRender 画布 | **保持深色视口** |
|
||
| 与壳层交界 | 1px `--op-line`，避免深浅硬切刺眼 |
|
||
|
||
### 5.6 主题列表处理
|
||
|
||
| 分组 | 主题 | 处理 |
|
||
|---|---|---|
|
||
| 精选 | `outpost-light` / `outpost-purple` / `outpost-blue` | 新建或由现有浅色主题改版；顶栏可切换 |
|
||
| 合并 | `fame-lavender` | 并入 `outpost-purple` 或启动时 remap |
|
||
| 高级兼容 | `industrial-purple`、`deep-azure`、绿/赤/钢/琥珀等 | 保留完整 vars，仅高级菜单可选 |
|
||
| 持久化 | 精选或 legacy id | 精选正常读写；未知 id → `outpost-light`；legacy id **不强制迁移** |
|
||
|
||
---
|
||
|
||
## 6. 文件影响面（实现时）
|
||
|
||
| 文件/目录 | 职责 |
|
||
|---|---|
|
||
| `src/styles/theme.css` | 默认 token、Element 覆盖、禁 orb |
|
||
| `src/styles/themes.ts` | `PRIMARY_THEMES`（3）+ `LEGACY_THEMES`；默认 `outpost-light` |
|
||
| `src/stores/ui.ts`（或等价） | 默认主题、未知 id 迁移、legacy 可选 |
|
||
| `src/components/ThemeSwitcher.vue` | 只渲染精选 3；样式 Outpost 化 |
|
||
| `src/layouts/AppShell.vue` | 侧栏/顶栏；用户菜单挂「兼容主题」 |
|
||
| `src/views/LoginView.vue` | 登录换肤 |
|
||
| `design-system/MASTER.md` | 产品风格改为 Outpost 浅色工作台 |
|
||
| `design-system/outpost.md` | Token 与组件规范（新建） |
|
||
| 各 View 内 `:root[data-theme="industrial-purple"]` 块 | 降级为 legacy 或删除 |
|
||
| 地图编辑器 chrome 组件 | 浅色适配 |
|
||
|
||
---
|
||
|
||
## 7. 分阶段交付
|
||
|
||
| Phase | 内容 | 验收 |
|
||
|---|---|---|
|
||
| **P0** | 三套精选 token + 默认 `outpost-light` + legacy 分组 + 文档 | 冷启动浅色 Outpost；可切紫/蓝 |
|
||
| **P1** | AppShell + 登录 + Element 皮肤 + ThemeSwitcher(3) + 高级兼容入口 | 壳层/登录 Outpost 化；高级仍能开星云紫等 |
|
||
| **P2** | Dashboard / 监控 / 调度 / 列表页 | 主业务无霓虹玻璃默认态 |
|
||
| **P3** | 地图编辑器 chrome + AI 抽屉 | 外围浅、画布深；助手区纸白气泡 |
|
||
| **P4** | 清理 legacy 覆盖、MASTER 更新、回归清单 | 无残留 `industrial-purple` 主路径样式 |
|
||
|
||
每阶段可独立合并；**不在本规格内自动改 SimpleLite 原生菜单皮肤**。
|
||
|
||
---
|
||
|
||
## 8. 风险与缓解
|
||
|
||
| 风险 | 缓解 |
|
||
|---|---|
|
||
| 深色主题下写死的白字/半透明在浅底不可读 | P0 强制迁移 + P2 逐页扫对比度 |
|
||
| 地图页信息密度高，浅色易显脏 | 卡片分区 + 表格紧凑密度，状态色保留 |
|
||
| Element 覆盖不全 | 先覆盖高频控件，缺口记入回归清单 |
|
||
| 用户 localStorage 旧主题 | 启动迁移 + 一次性提示（可选） |
|
||
|
||
---
|
||
|
||
## 9. 验收清单（整站）
|
||
|
||
- [ ] 未登录：登录页为 Outpost 浅色气质
|
||
- [ ] 登录后：侧栏深紫纹理 + 主区 `#f6f3fb` + 纸白卡片
|
||
- [ ] 顶栏可切换 **浅色 / 紫色 / 蓝色** 三套精选
|
||
- [ ] 用户菜单「高级 → 兼容主题」仍能选星云紫等旧深色
|
||
- [ ] 监控/调度/OTA/配置：纸白卡、ink 字、无默认霓虹 orb
|
||
- [ ] 地图编辑器：工具/属性浅色，3D 画布仍深色可读
|
||
- [ ] 告警/成功/故障色不被品牌色替换
|
||
- [ ] 刷新后主题保持；未知 id 回落 `outpost-light`
|
||
|
||
---
|
||
|
||
## 10. 开放项（审查时确认）
|
||
|
||
1. ~~旧深色主题~~ → **已确认：保留并藏入高级**
|
||
2. **底栏 footer**：保留弱化版，还是删除并入顶栏？（建议：P1 先弱化保留）
|
||
3. 实现计划：`Migu2.0/docs/superpowers/plans/2026-07-25-migu-outpost-ui-lock.md`（本规格通过后编写）
|
||
|
||
---
|
||
|
||
## 11. 审查结论（请用户勾选）
|
||
|
||
- [ ] 同意本规格（含精选三色 + 高级保留旧主题），可编写实现计划并开工
|
||
- [ ] 需要修改：________
|