71 lines
4.6 KiB
Markdown
71 lines
4.6 KiB
Markdown
# 暗金荒野主题技术设计
|
||
|
||
## 实施结论
|
||
|
||
沿用现有纯前端 `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、透明化算法和输出格式。
|