Migu2.0/docs/superpowers/specs/2026-07-25-migu-outpost-ui-lock-design.md

迷毂平台 UI · 锁定 Outpost 浅色设计规格

状态：待用户审查（主题策略已按反馈修订）
日期：2026-07-25
参考站：Outpost · Fairyland Technology
决策：方案 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. 审查结论（请用户勾选）

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