4.6 KiB
4.6 KiB
暗金荒野主题技术设计
实施结论
沿用现有纯前端 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-themetarget。server.js：不修改，现有 WebP/PNG MIME 已满足。
验证
git diff --checknpm run regression -- --target gilded-themenpm run regression -- --target wasteland-themenpm run regression- 浏览器桌面视口 1672×941、1440×900，以及窄屏 390×844；验证两个主题均可选择、刷新持久化、背景/图标加载、文本可读、无横向溢出。
研究引用
research/theme-architecture.md：主题注册、持久化、CSS 分层、回归入口和脏文件边界。research/asset-slicing.md：背景构图、图标网格、17 个 bbox、透明化算法和输出格式。