chore: rebuild release package
This commit is contained in:
113
.planning/dark-gilded-theme/findings.md
Normal file
113
.planning/dark-gilded-theme/findings.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# 暗金荒野主题调研记录
|
||||
|
||||
## 图片观察
|
||||
|
||||
- 原图尺寸为 1000×1500,纵向 2:3 构图。
|
||||
- 人物从头盔到腿部完整,披风、法杖、四角铆孔和烧蚀边框均属于有效视觉信息。
|
||||
- 主体位于中部偏左,右上与人物两侧存在较平静的灰米色留白。
|
||||
- 下方深色山坡与橙棕草丛适合衔接煤黑界面底色。
|
||||
- 结论:原图已经适合作为竖向主题画面,不裁切、不扩图、不生成替代图。
|
||||
- 原图复核后确认右侧法杖与左侧披风均接近边缘,任何实体裁切都容易损失角色轮廓;
|
||||
应保留资产本身,仅在容器层使用 `object-fit`/背景定位适配视口。
|
||||
|
||||
## 初始色彩方向
|
||||
|
||||
- 煤黑:人物盔甲与前景阴影,用作主背景和深色控件。
|
||||
- 旧纸米灰:天空与纸面,用作高对比文本和柔和边界。
|
||||
- 铜棕/赭石:烧蚀边框与山体,用作导航悬停和次级强调。
|
||||
- 暗金:盔甲纹饰,用作主操作、焦点与选中态,严格控制面积。
|
||||
- 深褐:人物中间调,用作面板层级和输入框背景。
|
||||
|
||||
## 量化色板
|
||||
|
||||
Pillow 对原图缩小后进行 16 色中位切分量化,主要颜色如下:
|
||||
|
||||
- `#1d1f20`(10.10%):煤黑主背景。
|
||||
- `#bead8a`(9.04%):旧纸主文字/柔和高亮。
|
||||
- `#857e6e`(8.56%):灰褐弱文字。
|
||||
- `#a16a38`(8.15%):铜棕次强调。
|
||||
- `#b0a182`(6.97%):暖灰浅层级。
|
||||
- `#161b1d`(6.32%):蓝煤黑面板。
|
||||
- `#713e1e`(6.07%):深赭边框/警告。
|
||||
- `#3a291f`(5.99%):深褐输入层。
|
||||
- `#d8c396`(5.91%):浅金米色主强调。
|
||||
- `#44392f`(5.73%):褐灰浮层。
|
||||
|
||||
色板实测表明界面应避免纯黑、纯白、亮黄和蓝紫色,优先使用带灰度的暖色。
|
||||
|
||||
## 降级视觉验收数据
|
||||
|
||||
- CSS 注释/字符串感知的花括号检查通过:1041 个规则块,结构闭合。
|
||||
- 对比度:主文字/主背景 12.97:1,次文字/主背景 8.77:1,弱文字/主背景
|
||||
4.79:1,按钮文字/暗金按钮 10.07:1,主文字/面板 11.11:1,均达到常规文本
|
||||
WCAG AA,主要组合达到 AAA。
|
||||
- 构图几何:1440×900 时原图显示 600×900,1024×768 时显示 512×768,
|
||||
390×844 时移动规则显示 358.8×538.2;三类视口均无图像裁切。
|
||||
- 未发现可复用的浏览器服务端口;11011 返回通用 400,现有 Docker 服务也不包含
|
||||
browserless/Chromium。
|
||||
|
||||
## 独立代码审查
|
||||
|
||||
- 审查结论整体通过,但发现 gilded 在会话 ID 按钮、信息态系统消息、拖拽上传焦点环
|
||||
和 select 箭头上仍可能继承旧蓝/青色固定值,需要主题专属覆盖。
|
||||
- 主按钮 hover 渐变的铜棕端 `#a16a38` 与 `#161b1d` 约 3.83:1,需要换成
|
||||
对比度更高的矿物棕端点。
|
||||
- 回归测试需从 PNG 尺寸提升到固定 SHA-256,并显式断言上述状态覆盖,避免测试通过
|
||||
但细节泄漏。
|
||||
- 图片为未跟踪新文件是正常交付状态;最终需在交付清单明确列出,不能只看 tracked diff。
|
||||
|
||||
## 审查修复结果
|
||||
|
||||
- 会话 ID、信息态消息、拖拽上传焦点环与 select 箭头均已有 gilded 专属暖色覆盖。
|
||||
- 主按钮 hover 深色端改为 `#a2865f`,与 `#161b1d` 的最低对比度为 5.06:1。
|
||||
- PNG 回归增加固定 SHA-256;状态覆盖与旧蓝/青色禁止项已加入专项契约。
|
||||
- 修复后 `gilded-theme` 专项回归通过,完整回归再次输出 `Regression checks passed.`。
|
||||
|
||||
## 图片适配决策门槛
|
||||
|
||||
1. CSS 的完整侧展或氛围背景能保证操作区可读、关键主体完整时,保留原图。
|
||||
2. 只有 CSS 构图必然丢失关键主体时才做实体裁切。
|
||||
3. 只有目标容器必须展示画布外区域时才做扩图。
|
||||
4. 当前图像可通过桌面独立侧展、移动低对比背景满足第 1 条,因此不裁切、不扩图。
|
||||
|
||||
## 主题资产
|
||||
|
||||
- 原图已无损复制到 `public/assets/themes/gilded-wasteland.png`。
|
||||
- 源文件与目标文件 SHA-256 均为
|
||||
`11bf3ffed4422c08f6be217c63060ba68d63367e747a3604fc2d7b877e9c5955`。
|
||||
- 目标仍为 1000×1500 RGBA PNG,没有重新编码、裁切或扩图。
|
||||
|
||||
## 仓库状态
|
||||
|
||||
- `home-cc-web` codebase-memory 索引状态为 ready(3264 节点、7795 边)。
|
||||
- 当前工作树存在用户的未提交修改,主要涉及另一项子代理卡片任务。
|
||||
- 当前 Trellis 任务属于其他工作,本任务使用独立 `.planning/dark-gilded-theme/` 记录。
|
||||
|
||||
## 主题实现入口
|
||||
|
||||
- `public/app.js` 的 `THEME_OPTIONS` 注册 9 个主题;`normalizeTheme` 校验主题名,
|
||||
`applyTheme` 写入 `html[data-theme]` 与 `localStorage`。
|
||||
- `public/style.css` 顶部定义主题变量;`carbon`、`nocturne`、`cinder` 共用暗色组件层,
|
||||
文件尾部还有一组补充暗色覆盖。
|
||||
- `public/index.html` 提供稳定的 `.sidebar`、`.chat-main`、`.input-wrapper` DOM 入口,
|
||||
不需要为了主题改动页面结构。
|
||||
- `scripts/regression.js` 已有 CSS 源码契约断言,可新增主题注册、资源路径、变量和
|
||||
响应式规则断言;该文件已有用户未提交改动,新增测试必须落在独立函数/调用点。
|
||||
- 现有 `public/app.js` 未提交改动集中在 6541 行后的子代理卡片逻辑,与 109 行附近的
|
||||
主题注册无重叠;可以在保留现有差异的前提下修改。
|
||||
- 暗色完成层共有 230 个相同的 `:is(carbon, nocturne, cinder)` 选择器;新增暗色主题
|
||||
若不加入该共用层,会让设置面板、附件、工具调用等次级控件回退到浅色固定背景。
|
||||
- 实现采用两层:将 `gilded` 纳入暗色完成层以保证全量控件一致,再在文件末尾追加
|
||||
该主题专属的图片构图、导航、按钮、输入聚焦与状态色覆盖,消除共用层里的蓝色焦点环。
|
||||
|
||||
## 工具限制
|
||||
|
||||
- 本机未安装 ImageMagick(`identify`、`magick` 均不可用);色板量化改用已安装的
|
||||
图像读取库或浏览器取样,不重复执行相同命令。
|
||||
- 当前工具集中没有 Playwright/Chrome DevTools MCP,本机也没有 Chromium、Firefox、
|
||||
Playwright、Puppeteer、WeasyPrint 或 wkhtmltoimage;不能直接生成真实浏览器截图。
|
||||
- 现有 cc-web 进程会实时提供静态资源,无需重启;首页与新主题 PNG 均通过
|
||||
`http://127.0.0.1:8002` 返回 200。
|
||||
- 完成后按项目约定尝试 `index_repository(mode=full, persistence=false)`,但
|
||||
codebase-memory MCP 连接已关闭并返回 `Transport closed`;未重复调用,待服务恢复
|
||||
后可再刷新本地索引,不影响运行代码。
|
||||
34
.planning/dark-gilded-theme/progress.md
Normal file
34
.planning/dark-gilded-theme/progress.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 暗金荒野主题进展
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
- 已读取 `frontend-skill`、`planning-with-files`、`todo-list-csv` 与 Trellis 工作流。
|
||||
- 已确认 codebase-memory 索引可用。
|
||||
- 已检查工作树与现有任务状态,决定隔离本任务规划并保留用户改动。
|
||||
- 已完成图片构图初判:保留原图,通过 CSS 做响应式呈现。
|
||||
- 已用原始分辨率复核构图;ImageMagick 不可用,已记录并切换色板分析方案。
|
||||
- 计划审查第 1 轮发现构图门槛与验收标准缺口;修订后第 2 轮已通过。
|
||||
- 已使用 Pillow 得到 16 色量化色板,完成构图与配色分析,进入样式入口定位。
|
||||
- 已通过 codebase-memory 定位 `applyTheme`、主题选择器及 CSS 暗色共用层,并用
|
||||
`rg`/`sed` 核对具体文件与未提交差异;进入主题图片资产引入。
|
||||
- 已将原图无损复制到静态主题资源目录并核对 SHA-256,一致无差异;开始实现主题变量。
|
||||
- 已确认暗色完成层的覆盖规模与核心布局样式,确定复用共用层并追加主题专属覆盖。
|
||||
- 首次代码补丁上下文校验失败且没有产生代码变更;已记录,准备使用精确锚点拆分补丁。
|
||||
- 已用精确锚点注册 `gilded` 主题、建立图片色板语义变量,并将其纳入全部 230 个
|
||||
暗色共用选择器;进入导航、按钮、输入框与响应式细节实现。
|
||||
- 已完成导航、按钮、输入框、消息气泡、主题预览、桌面/移动背景构图和减少动态偏好;
|
||||
同时更新 CSS/JS 缓存版本,进入自动化回归契约补充。
|
||||
- 已新增 `gilded-theme` 回归目标;`public/app.js`、`scripts/regression.js` 语法检查和
|
||||
主题目标回归均通过,进入完整回归与浏览器视觉验收。
|
||||
- 完整 `npm run regression` 已输出 `Regression checks passed.`。
|
||||
- 已确认本环境没有可用浏览器渲染器;继续以静态资源 HTTP、CSS 结构、色彩对比度与
|
||||
多视口构图规则检查进行降级验收,并在最终风险中明确这一局限。
|
||||
- 已完成 CSS 结构、WCAG 对比度与三类计划视口的构图几何检查,结果均通过。
|
||||
- Trellis 独立代码审查已返回:整体通过,存在 1 组主题固定色泄漏与 2 项低风险测试/
|
||||
对比度问题;正在修复并准备复验。
|
||||
- 已修复全部审查项并完成专项/完整回归复验,正在等待独立审查代理最终复核。
|
||||
- 独立审查最终复核通过,无阻塞或中高风险问题;所有 7 个计划步骤完成。
|
||||
- 最终本地索引刷新因 codebase-memory MCP `Transport closed` 未执行,已作为非阻塞
|
||||
运维限制记录;代码交付状态不变。
|
||||
- 用户确认图片来自《星际战甲》;已修正主题显示名称、说明、CSS 注释与回归文案,
|
||||
保留内部 `gilded` 标识以兼容已保存的主题偏好。
|
||||
57
.planning/dark-gilded-theme/task_plan.md
Normal file
57
.planning/dark-gilded-theme/task_plan.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 暗金荒野主题定制计划
|
||||
|
||||
## 目标
|
||||
|
||||
基于用户提供的纵向《星际战甲》画面,为 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 结构、专项/完整回归与两轮独立代码审查组合降级,限制将在最终交付中披露。
|
||||
Reference in New Issue
Block a user