Files
cc-web/.planning/dark-gilded-theme/task_plan.md
2026-07-18 10:14:38 +08:00

3.6 KiB
Raw Blame History

暗金荒野主题定制计划

目标

基于用户提供的纵向《星际战甲》画面,为 cc-web 定制一套协调、可读、响应式的主题; 优先保留原图,不进行不必要的生成式裁切或扩图,并确保导航栏、按钮、输入框、 背景与插画色彩统一。

视觉策略

  • 视觉论点: 烧蚀羊皮纸质感的《星际战甲》角色,以煤黑界面承接旧纸、铜棕与暗金。
  • 内容规划: 左侧导航负责定位,中部工作区负责会话,消息区负责阅读,底部输入区负责操作。
  • 交互论点: 暗金边缘高亮导航选择;按钮悬停呈轻微暖色提亮;输入框聚焦出现克制的金棕光环;遵守减少动态偏好。
  • 图片决策门槛: 先比较桌面宽屏、普通桌面和平板/手机视口。若 containcover、背景定位与遮罩能同时保证核心操作可读、角色主体不被破坏,则保留原图; 仅当所有 CSS 构图方案都会遮挡操作或丢失关键主体时,才考虑实体裁切;仅当目标 容器必须展示原图不存在的画面区域时,才考虑扩图,并记录理由。
  • 当前图片结论: 原图主体、边框、四角铆孔和前景草丛均完整;角色轮廓靠近 左右边缘,实体裁切收益低。桌面端采用独立竖向侧展,窄屏通过 CSS 定位和遮罩 作为低对比氛围层即可满足门槛,因此保留原文件,不做生成式改图。
  • 色板产物: 提取并建立主背景、面板、浮层、文字、弱文字、边框、主强调、 次强调、输入焦点、成功、警告、危险等语义变量;状态色需由插画综合色相派生, 不保留与主题冲突的固定色。

执行步骤

  1. [complete] 分析图片构图并提炼主题配色
  2. [complete] 定位现有主题结构与样式入口
  3. [complete] 引入原图资源并建立主题资产路径
  4. [complete] 实现暗金荒野主题变量与背景层
  5. [complete] 统一导航按钮输入框及响应式细节
  6. [complete] 补充主题资源与样式回归检查
  7. [complete] 运行回归测试并完成浏览器视觉验收

完成标准

  • 已按图片决策门槛记录构图方案;当前结论为原图原样保留,无生成式改图。
  • 图片在桌面与移动视口均不遮挡核心操作,主题具有足够文本对比度。
  • 导航栏、按钮、输入框、背景、选中态、焦点态均来自同一主题变量体系。
  • 现有回归测试通过,并新增与主题关键资源/变量相关的自动化断言。
  • 浏览器实测至少覆盖 1440×900、1024×768、390×844 三类视口;逐项检查导航、 主次按钮、输入框、背景层、焦点态、选中态、正文对比度、图片主体保留程度, 不得出现核心操作遮挡、横向溢出或不可读区域。

风险与约束

  • 保留用户现有未提交改动,不覆盖 public/app.jsscripts/regression.js 的无关变化。
  • 不重启 cc-web除非确认除当前会话外没有其他 running 会话。
  • 不覆盖当前指向其他任务的 .trellis/.current-task

错误记录

  • ImageMagick 命令不可用(尝试 1后续改用 Pillow 或浏览器取样分析,不重复尝试。
  • 首次主题补丁因 Cinder Rose 描述文本与预期上下文不一致而未应用;改为读取精确 行内容后使用更小的稳定锚点分别修改,不重复提交原补丁。
  • 浏览器视觉验收运行时不可用已采用三视口构图几何、WCAG 对比度、静态资源 HTTP、 CSS 结构、专项/完整回归与两轮独立代码审查组合降级,限制将在最终交付中披露。