# 暗金荒野主题技术设计

## 实施结论

沿用现有纯前端 `THEME_OPTIONS + html[data-theme] + CSS 变量` 架构，不新增依赖、不改服务端。原 Warframe 主题 `gilded` 恢复为可见选项；新主题使用独立 ID `wasteland`，以用户背景图作为全画布主视觉，并用半透明黑铁面板和旧金描边覆盖现有工作台。

## 主题契约

- 默认主题仍为 `washi`。
- `gilded`：保留现有 Warframe Wasteland 注册、四图 welcome 舞台和样式；删除 `hidden: true`。
- `wasteland`：新增可见注册，label 为“暗金荒野”，swatches 为 `#050707/#171511/#c49a5a/#6f783f`。
- 删除 `public/index.html` 中 `gilded -> washi` 的首屏迁移；不新增任何主题迁移。
- `normalizeTheme()` 与 picker 保留现有统一逻辑，两个主题都应正常持久化和选择。
- cache bust 更新为 `20260717-wasteland-theme`。

## 资产方案

- 将 `sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp` 原样复制到 `public/assets/themes/wasteland/background.webp`。
- 从 `sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp` 的 32px 档裁切 17 个常用图标，生成 `public/assets/themes/wasteland/icons/*.png`。
- 图标输出统一使用 64×64 透明 PNG 画布；源主体先按研究文档给出的 bbox 裁剪，再用亮度/色相 mask 去掉暗色背景，保留旧金高光和 status 的绿色中心，边缘做 1px 以内羽化。
- 创建 `public/assets/themes/wasteland/icons/manifest.json`，每项记录 `source`、`card`、`variant`、`bbox`、`output`。
- 至少在新主题的 new chat、search、attachment、send、stop、settings 等可见控件中实际使用切分图标；其余图标作为主题资产集供弹层和后续控件复用。

## CSS 设计

### 变量层

新增 `html[data-theme='wasteland']`：

- 页面：`#070807`、黑铁半透明面板 `rgba(13,15,14,.82)`。
- 文字：主文字 `#efe8d8`、次文字 `#cfc3aa`、弱文字 `#9e927d`。
- 强调：旧金 `#c49a5a`，状态绿 `#6f783f`，危险余烬 `#a65b3d`。
- 角切：复用单一 `--wasteland-cut`，不要给所有容器叠加厚边框。

### 主视觉与层级

- `body` 使用多层遮罩 + `background.webp`，`background-size: cover`、桌面 `background-position: center`；人物保持在右半区。
- `.app`、`.chat-main`、`.messages-wrap` 允许背景透出；侧栏、顶栏、消息、输入区使用不同透明度的不透明化玻璃面板，正文区域对比度优先。
- 左侧遮罩更深，人物核心区域只叠轻微暖金径向光；移动端提高整体遮罩并使用 `background-position: 70% 50%`。
- 现有 `.welcome-visual` 仍只属于 `gilded`，`wasteland` 不复用 Warframe 四图舞台。

### 组件与交互

- 侧栏/顶栏/输入区使用细旧金分隔线，不做大面积亮金渐变。
- 用户消息使用暗棕黑，助手消息使用黑铁；工具调用块用左侧旧金标记强化层级。
- 主按钮仅在 hover/focus 时出现短促微光；列表 hover 位移不超过 2px。
- 主题切入使用 320–420ms 淡入，按钮/边框反馈 140–180ms。
- `prefers-reduced-motion: reduce` 下禁用 `wasteland` 的动画与过渡。
- 不改现有布局结构、不新增营销 hero、卡片只用于实际交互对象。

## 业务文件最小改动

- `public/app.js`：只在 `THEME_OPTIONS` 附近移除 `gilded.hidden` 并新增 `wasteland`；不要触碰后半文件的子代理卡片改动。
- `public/index.html`：删除 3 行 `gilded` 迁移，更新 cache bust；必要时只给现有静态控件增加主题图标所需的无障碍钩子。
- `public/style.css`：在变量区新增 `wasteland` 变量并加入共享暗色 selector；在文件尾追加独立 `wasteland` 组件层，不重写 `gilded` 区块。
- `scripts/regression.js`：保留现有 Warframe 资产检查，改写“隐藏/迁移”断言；新增 Wasteland 资产清单、ID/选择器/背景/图标/对比度/reduced-motion/cache bust 契约和 `wasteland-theme` target。
- `server.js`：不修改，现有 WebP/PNG MIME 已满足。

## 验证

1. `git diff --check`
2. `npm run regression -- --target gilded-theme`
3. `npm run regression -- --target wasteland-theme`
4. `npm run regression`
5. 浏览器桌面视口 1672×941、1440×900，以及窄屏 390×844；验证两个主题均可选择、刷新持久化、背景/图标加载、文本可读、无横向溢出。

## 研究引用

- `research/theme-architecture.md`：主题注册、持久化、CSS 分层、回归入口和脏文件边界。
- `research/asset-slicing.md`：背景构图、图标网格、17 个 bbox、透明化算法和输出格式。