# 迷毂平台 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. 审查结论（请用户勾选）

- [ ] 同意本规格（含精选三色 + 高级保留旧主题），可编写实现计划并开工  
- [ ] 需要修改：________