58 lines
3.6 KiB
Markdown
58 lines
3.6 KiB
Markdown
# 暗金荒野主题定制计划
|
||
|
||
## 目标
|
||
|
||
基于用户提供的纵向《星际战甲》画面，为 cc-web 定制一套协调、可读、响应式的主题；
|
||
优先保留原图，不进行不必要的生成式裁切或扩图，并确保导航栏、按钮、输入框、
|
||
背景与插画色彩统一。
|
||
|
||
## 视觉策略
|
||
|
||
- **视觉论点：** 烧蚀羊皮纸质感的《星际战甲》角色，以煤黑界面承接旧纸、铜棕与暗金。
|
||
- **内容规划：** 左侧导航负责定位，中部工作区负责会话，消息区负责阅读，底部输入区负责操作。
|
||
- **交互论点：** 暗金边缘高亮导航选择；按钮悬停呈轻微暖色提亮；输入框聚焦出现克制的金棕光环；遵守减少动态偏好。
|
||
- **图片决策门槛：** 先比较桌面宽屏、普通桌面和平板/手机视口。若 `contain`、
|
||
`cover`、背景定位与遮罩能同时保证核心操作可读、角色主体不被破坏，则保留原图；
|
||
仅当所有 CSS 构图方案都会遮挡操作或丢失关键主体时，才考虑实体裁切；仅当目标
|
||
容器必须展示原图不存在的画面区域时，才考虑扩图，并记录理由。
|
||
- **当前图片结论：** 原图主体、边框、四角铆孔和前景草丛均完整；角色轮廓靠近
|
||
左右边缘，实体裁切收益低。桌面端采用独立竖向侧展，窄屏通过 CSS 定位和遮罩
|
||
作为低对比氛围层即可满足门槛，因此保留原文件，不做生成式改图。
|
||
- **色板产物：** 提取并建立主背景、面板、浮层、文字、弱文字、边框、主强调、
|
||
次强调、输入焦点、成功、警告、危险等语义变量；状态色需由插画综合色相派生，
|
||
不保留与主题冲突的固定色。
|
||
|
||
## 执行步骤
|
||
|
||
1. [complete] 分析图片构图并提炼主题配色
|
||
2. [complete] 定位现有主题结构与样式入口
|
||
3. [complete] 引入原图资源并建立主题资产路径
|
||
4. [complete] 实现暗金荒野主题变量与背景层
|
||
5. [complete] 统一导航按钮输入框及响应式细节
|
||
6. [complete] 补充主题资源与样式回归检查
|
||
7. [complete] 运行回归测试并完成浏览器视觉验收
|
||
|
||
## 完成标准
|
||
|
||
- 已按图片决策门槛记录构图方案；当前结论为原图原样保留，无生成式改图。
|
||
- 图片在桌面与移动视口均不遮挡核心操作，主题具有足够文本对比度。
|
||
- 导航栏、按钮、输入框、背景、选中态、焦点态均来自同一主题变量体系。
|
||
- 现有回归测试通过，并新增与主题关键资源/变量相关的自动化断言。
|
||
- 浏览器实测至少覆盖 1440×900、1024×768、390×844 三类视口；逐项检查导航、
|
||
主次按钮、输入框、背景层、焦点态、选中态、正文对比度、图片主体保留程度，
|
||
不得出现核心操作遮挡、横向溢出或不可读区域。
|
||
|
||
## 风险与约束
|
||
|
||
- 保留用户现有未提交改动，不覆盖 `public/app.js`、`scripts/regression.js` 的无关变化。
|
||
- 不重启 cc-web，除非确认除当前会话外没有其他 `running` 会话。
|
||
- 不覆盖当前指向其他任务的 `.trellis/.current-task`。
|
||
|
||
## 错误记录
|
||
|
||
- ImageMagick 命令不可用（尝试 1）；后续改用 Pillow 或浏览器取样分析，不重复尝试。
|
||
- 首次主题补丁因 `Cinder Rose` 描述文本与预期上下文不一致而未应用；改为读取精确
|
||
行内容后使用更小的稳定锚点分别修改，不重复提交原补丁。
|
||
- 浏览器视觉验收运行时不可用；已采用三视口构图几何、WCAG 对比度、静态资源 HTTP、
|
||
CSS 结构、专项/完整回归与两轮独立代码审查组合降级，限制将在最终交付中披露。
|