chore: rebuild release package
This commit is contained in:
shiyue
139
.codex/skills/create-cc-web-theme/SKILL.md
Normal file
139
.codex/skills/create-cc-web-theme/SKILL.md
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
name: create-cc-web-theme
|
||||
description: 为 cc-web 创建、复刻、重做或审计视觉主题，从参考图、概念图、背景图、图标板或素材板完成需求澄清、源素材归档、主题隔离、可复现切图、CSS/DOM 接入、响应式、回归和真实浏览器视觉验收。用户提到新建主题、换肤、复刻设计稿、主题高保真、主题对比、切图、图标重做、欢迎卡、输入框装饰框、消息气泡磨砂、视觉错位或主题返工时使用。
|
||||
---
|
||||
|
||||
# 创建 cc-web 主题
|
||||
|
||||
把参考设计转成一个独立、可切换、可维护并经过真实浏览器验收的 cc-web 主题。保留设计证据和生成链路，避免只留下无法继续扩展的最终切片。
|
||||
|
||||
## 按需读取参考
|
||||
|
||||
- 开始定位主题系统前，读取 [cc-web-theme-architecture.md](references/cc-web-theme-architecture.md)。
|
||||
- 收到背景、图标板、边框板或概念图时，读取 [asset-workflow.md](references/asset-workflow.md)。
|
||||
- 遇到“不像设计图”“改了没变化”“边框/图标/透明度/居中反复不对”时，读取 [lessons-learned.md](references/lessons-learned.md)。
|
||||
- 准备声明完成前，完整读取并执行 [acceptance-checklist.md](references/acceptance-checklist.md)。
|
||||
|
||||
## 遵守硬约束
|
||||
|
||||
1. 为新主题创建新的稳定主题 ID 和独立资产目录。除非用户明确要求，禁止覆盖、重命名或删除现有主题。
|
||||
2. 修改前检查工作树与相关文件差异。保留用户和其他任务的未提交改动，不格式化或重排无关大文件。
|
||||
3. 先归档所有源概念图、素材板和背景，再生成派生资产。保留裁剪脚本、坐标、manifest 和来源哈希。
|
||||
4. 把参考图当作构图与层级契约，不只提取颜色和“氛围”。先量化，再编码。
|
||||
5. 只使用本地主题资产。禁止让产品运行时依赖参考站点、临时附件 URL 或远程图片。
|
||||
6. 同步维护静态首屏 DOM 与动态渲染 DOM。动态项目名、Agent、会话标题等内容禁止写死在静态模板中。
|
||||
7. 只修改用户指出的层级。用户说“气泡背景”时，不得顺手重做所有卡片、工具层或布局。
|
||||
8. 自动化通过不等于视觉完成。没有真实浏览器对照、动态状态检查和多视口验收时，不得声明完成。
|
||||
9. 不删除源图、概念图、素材板、切片或提取脚本；后续功能可能需要重新切片。
|
||||
10. 需要重启 cc-web 时，先按仓库 `AGENTS.md` 检查其他运行中会话；不满足条件时不重启。
|
||||
|
||||
## 执行工作流
|
||||
|
||||
### 1. 固定需求和完成标准
|
||||
|
||||
明确并记录：
|
||||
|
||||
- 新建、复刻、扩展还是修复主题。
|
||||
- 主题稳定 ID、显示名、是否与旧主题并存、默认主题是否变化。
|
||||
- 参考图、背景图、图标板、边框板、字体和其他输入素材的角色。
|
||||
- 用户要求保留的既有视觉与明确禁止改动的区域。
|
||||
- 参考图原始视口、桌面目标视口和移动端目标视口。
|
||||
- 必须覆盖的动态状态：空会话、长消息、多行输入、工具调用、展开菜单、运行/停止、弹层和窄屏。
|
||||
|
||||
在任务资料中建立资产表和验收清单。输入素材含义不明确且会影响构图或切片时，先向用户确认。
|
||||
|
||||
### 2. 建立代码与改动基线
|
||||
|
||||
优先使用 `codebase-memory-mcp`：
|
||||
|
||||
1. 调用 `list_projects` 和 `index_status(project="home-cc-web")`。
|
||||
2. 使用 `search_graph` / `search_code` 定位主题注册、应用、静态 bootstrap、动态 welcome 和回归入口。
|
||||
3. 需要调用关系时使用 `trace_path`，需要源码时先取得 `qualified_name` 再调用 `get_code_snippet`。
|
||||
4. 最后使用 `rg` 和 `git diff` 校验文本、行号与未索引资源。
|
||||
|
||||
记录主题相关脏文件、既有主题 ID、缓存版本、共享选择器和任务开始时的资产清单。只在明确边界内修改。
|
||||
|
||||
### 3. 把参考图拆成可验证规格
|
||||
|
||||
先输出“参考区域 → 实际 DOM → 资产 → CSS 责任”的映射，再实施。
|
||||
|
||||
至少量化：
|
||||
|
||||
- 侧栏、顶栏、消息区、输入区的比例和基线。
|
||||
- 主视觉安全区、文字阅读区和背景裁切/遮罩策略。
|
||||
- 面板层级、透明度感知、边线宽度、阴影和切角使用范围。
|
||||
- 每类控件的容器尺寸、图标视觉主体、间距和光学中心。
|
||||
- 固定尺寸与动态高度组件的区别。
|
||||
- 静态空页面和有内容页面的布局差异。
|
||||
|
||||
先处理背景与大布局，再处理容器层级、边框、图标和微交互。禁止从局部颜色微调开始掩盖结构偏差。
|
||||
|
||||
### 4. 建立可复现资产链路
|
||||
|
||||
把源素材复制到当前主题任务的 `references/source-assets/`，不要只引用会话附件路径。为每个派生资产保存：
|
||||
|
||||
- 源文件名和哈希。
|
||||
- 源裁剪框、规格或素材板单元格。
|
||||
- 输出尺寸、格式和用途。
|
||||
- alpha/颜色分离方法和必要的光学校正。
|
||||
- 生成脚本与 manifest。
|
||||
|
||||
按用途选择实现：
|
||||
|
||||
- 背景保留构图和清晰度，遮罩只服务可读性。
|
||||
- 主交互小图标优先使用干净 mask 或对应尺寸切片；多色状态、头像和装饰图标保留原色。
|
||||
- 非对称图标按 alpha 加权重心校正，不按透明画布机械居中。
|
||||
- 固定尺寸框可使用完整切片；动态高度框优先使用 `border-image`/九宫格或拆分稳定边角，禁止把固定比例整图放在伪元素上随内容拉伸。
|
||||
|
||||
具体方法见 [asset-workflow.md](references/asset-workflow.md)。
|
||||
|
||||
### 5. 分层、隔离地接入主题
|
||||
|
||||
按以下顺序实现：
|
||||
|
||||
1. 在 `THEME_OPTIONS` 新增主题元数据，保持单一数据源。
|
||||
2. 检查首屏 bootstrap、`normalizeTheme()`、`applyTheme()` 和本地持久化是否接受新 ID。
|
||||
3. 在 `html[data-theme='<id>']` 变量块中先定义语义 token。
|
||||
4. 把新暗色主题加入确实需要复用的共享 completion selector。
|
||||
5. 把高风险视觉放在文件后部的主题专属组件层，所有选择器都限定主题 ID。
|
||||
6. 把资产放入 `public/assets/themes/<id>/`，避免根目录同名覆盖。
|
||||
7. 同步静态 `index.html` 和动态构建函数中的 welcome/装饰 DOM。
|
||||
8. 检查真实 DOM 内原生文字、SVG、图片和主题伪元素，防止加号、头像、图标或边框重复。
|
||||
9. 更新 CSS/JS cache bust，并同步回归契约。
|
||||
|
||||
不要为了视觉方便复制第二套业务逻辑、主题列表或交互组件。
|
||||
|
||||
### 6. 用真实浏览器形成短反馈环
|
||||
|
||||
先按参考图原始尺寸验收，再检查常规桌面和窄屏。每轮只解决一个明确层级，并记录修改前后证据。
|
||||
|
||||
遇到异常时按顺序排查：
|
||||
|
||||
1. 浏览器是否实际加载了最新缓存版本和资源。
|
||||
2. 选择器是否命中真实 DOM，伪元素或原生子节点是否重复。
|
||||
3. computed style 的最终来源和 specificity，特别检查 `:is()` 与旧 `!important`。
|
||||
4. 外层看似透明时，内层工具块、标题层或伪元素是否仍不透明。
|
||||
5. 动态高度、文字换行、菜单展开和运行状态是否改变真实尺寸。
|
||||
6. 几何中心、文字基线和图标 alpha 重心是否一致。
|
||||
|
||||
优先测量，不盲调数值。把“看着偏”转换为中心差、边距、主体 bbox、computed background 或溢出量。
|
||||
|
||||
### 7. 完成工程与视觉验收
|
||||
|
||||
执行 [acceptance-checklist.md](references/acceptance-checklist.md) 的全部强制项，至少包含：
|
||||
|
||||
- JS 语法检查、主题专项回归、相关旧主题回归、全量回归和 `git diff --check`。
|
||||
- 本地资产存在性、格式、尺寸、hash/manifest 与 HTTP 200。
|
||||
- 参考视口、常规桌面和窄屏的真实浏览器检查。
|
||||
- 空页面、长内容、多行输入、菜单、工具块、按钮状态和动态文案检查。
|
||||
- 与参考图逐组件对照，确认没有多余边框、重复图标、视觉实心层或明显错位。
|
||||
|
||||
最后报告实际视觉证据、验证命令和保留的源资产/脚本路径。测试失败、浏览器不可用或视觉证据不足时明确说明，保持任务未完成状态。
|
||||
|
||||
## 交付要求
|
||||
|
||||
- 列出新增主题 ID、资产目录、源资产归档和提取脚本。
|
||||
- 列出修改过的主题链路文件与隔离边界。
|
||||
- 给出真实浏览器实测结果，不只写“回归通过”。
|
||||
- 说明仍未覆盖的视口、状态或素材限制。
|
||||
- 保留所有主题概念图、素材板、切片、manifest 和生成脚本。
|
||||
4
.codex/skills/create-cc-web-theme/agents/openai.yaml
Normal file
4
.codex/skills/create-cc-web-theme/agents/openai.yaml
Normal file
@@ -0,0 +1,4 @@
|
||||
interface:
|
||||
display_name: "创建 cc-web 主题"
|
||||
short_description: "从参考设计图到本地切片、主题隔离实现与真实浏览器视觉验收"
|
||||
default_prompt: "使用 $create-cc-web-theme 根据参考图创建一个独立、可切换并经过真实浏览器验收的 cc-web 主题。"
|
||||
@@ -0,0 +1,127 @@
|
||||
# cc-web 主题完成验收清单
|
||||
|
||||
把本清单作为完成门禁。任一强制项未验证时，保持任务未完成并说明原因。
|
||||
|
||||
## 1. 范围与隔离
|
||||
|
||||
- [ ] 新主题使用独立稳定 ID，未覆盖现有主题。
|
||||
- [ ] `THEME_OPTIONS`、bootstrap、持久化和 picker 的语义一致。
|
||||
- [ ] 现有主题仍可选择/迁移，并通过其专项回归。
|
||||
- [ ] 所有专属 selector 都限定新主题 ID。
|
||||
- [ ] 未修改主题无关业务逻辑、交互或大文件格式。
|
||||
- [ ] 已复核相关脏文件，没有覆盖用户或并行任务改动。
|
||||
|
||||
## 2. 源素材与派生资产
|
||||
|
||||
- [ ] 概念图、完整参考、背景和素材板已归档到任务目录。
|
||||
- [ ] 归档文件与原始输入 hash 已核对。
|
||||
- [ ] 生成脚本和 manifest 已保留且可重放。
|
||||
- [ ] 派生资产记录源文件、裁剪框、规格、尺寸和用途。
|
||||
- [ ] 透明 PNG 无棋盘格、黑边或被裁掉的尖角。
|
||||
- [ ] 图标 alpha 主体尺寸和光学中心符合控件层级。
|
||||
- [ ] 所有运行时资产位于 `public/assets/themes/<id>/`。
|
||||
- [ ] 主题实现与 manifest 不包含远程图片 URL。
|
||||
|
||||
## 3. DOM 与组件实现
|
||||
|
||||
- [ ] 静态 `index.html` 与动态 welcome 构建函数结构同步。
|
||||
- [ ] 项目名、Agent、会话标题等动态内容没有写死。
|
||||
- [ ] 新主题图标未与原生文字、SVG、图片或旧伪元素重叠。
|
||||
- [ ] 新会话加号、下拉、操作菜单和设置入口仍可见、可点击。
|
||||
- [ ] 菜单展开不被父级 overflow 裁切。
|
||||
- [ ] 固定框与动态尺寸框使用了合适的切片策略。
|
||||
- [ ] 输入框单行、多行、聚焦、拖拽和特殊模式都没有双边框或错位。
|
||||
- [ ] 工具块、协作卡、弹层和消息嵌套层没有意外不透明底色。
|
||||
- [ ] `prefers-reduced-motion` 能关闭主题动画/过渡。
|
||||
|
||||
## 4. 视觉对照
|
||||
|
||||
### 参考视口
|
||||
|
||||
- [ ] 在参考图原始尺寸或同等宽高比下截图/检查。
|
||||
- [ ] 背景主体、人物、纹理和安全区与参考构图一致。
|
||||
- [ ] 侧栏、顶栏、消息区和输入区比例无明显偏差。
|
||||
- [ ] 面板层级清楚，没有全页面卡片化或遮罩过暗。
|
||||
- [ ] 边框轻重、切角范围和阴影符合参考层级。
|
||||
- [ ] 主文字可读，用户指定的颜色与对比度已满足。
|
||||
- [ ] 没有重复图标、莫名边框、虚线、色块或“一坨”叠层。
|
||||
|
||||
### 几何证据
|
||||
|
||||
- [ ] 主卡片中心与实际聊天画布中心误差可接受。
|
||||
- [ ] 图标以 alpha 主体/光学重心居中，不只看画布。
|
||||
- [ ] 文字与图标基线一致。
|
||||
- [ ] 欢迎卡、输入框和菜单没有横向溢出或裁切。
|
||||
- [ ] 记录关键 bbox、中心差、间距或 computed style。
|
||||
|
||||
### 透明与磨砂
|
||||
|
||||
- [ ] 背景纹理在设计要求透明的层中实际可见。
|
||||
- [ ] 外层气泡与内层工具块分别检查背景。
|
||||
- [ ] blur 没有把背景细节抹成实心色块。
|
||||
- [ ] computed style 的最终 background/backdrop-filter 来自预期 selector。
|
||||
|
||||
## 5. 动态状态
|
||||
|
||||
- [ ] 新建空会话欢迎页。
|
||||
- [ ] 当前项目名称/其他动态文案刷新正确。
|
||||
- [ ] 短消息、长消息、代码块和工具调用。
|
||||
- [ ] 用户/助手/系统/跨会话气泡。
|
||||
- [ ] 单行与多行输入。
|
||||
- [ ] 附件、笔记、队列、发送和停止状态。
|
||||
- [ ] 会话 hover、active、操作菜单展开。
|
||||
- [ ] 设置页、主题选择器、弹层和移动端侧栏。
|
||||
|
||||
## 6. 多视口
|
||||
|
||||
至少检查：
|
||||
|
||||
- [ ] 参考设计原始视口，例如 1672×941。
|
||||
- [ ] 常规桌面，例如 1440×900。
|
||||
- [ ] 窄屏，例如 500px 宽。
|
||||
- [ ] 移动端，例如 390×844。
|
||||
- [ ] 各视口横向溢出为 0 或有明确设计原因。
|
||||
- [ ] 背景定位、侧栏宽度、输入框和欢迎卡在断点处连续。
|
||||
|
||||
## 7. 自动化与静态检查
|
||||
|
||||
根据实际主题 target 调整 `<theme>`：
|
||||
|
||||
```bash
|
||||
timeout 60s node --check public/app.js
|
||||
timeout 60s node --check scripts/regression.js
|
||||
timeout 60s npm run regression -- --target <theme>-theme
|
||||
timeout 60s npm run regression -- --target <related-existing-theme>-theme
|
||||
timeout 60s npm run regression
|
||||
git diff --check
|
||||
```
|
||||
|
||||
- [ ] 新主题专项回归通过。
|
||||
- [ ] 相关旧主题专项回归通过。
|
||||
- [ ] 全量回归通过。
|
||||
- [ ] JS 语法检查通过。
|
||||
- [ ] `git diff --check` 通过。
|
||||
- [ ] 回归覆盖注册、隔离、静态/动态 DOM、资产、响应式、对比度、reduced-motion 和 cache bust。
|
||||
|
||||
## 8. 在线与浏览器校验
|
||||
|
||||
- [ ] 先用 `curl http://127.0.0.1:<port>/` 确认本地服务。
|
||||
- [ ] 如远程浏览器不能访问 localhost，使用 `hostname -I` 中的 `11.144.144.*` 地址。
|
||||
- [ ] CSS、JS 和每个新增资产请求返回 200。
|
||||
- [ ] 浏览器实际加载的 cache-busted URL 是最新版本。
|
||||
- [ ] 使用 Firefox/Playwright/Selenium 读取关键 computed style 和几何值。
|
||||
- [ ] 浏览器截图或实测记录已写入任务进度。
|
||||
|
||||
不要仅因浏览器访问 `127.0.0.1` 失败就判断服务未启动。
|
||||
|
||||
## 9. 交付与保留
|
||||
|
||||
- [ ] 列出新主题 ID、显示名和资产目录。
|
||||
- [ ] 列出修改文件和未触碰的旧主题边界。
|
||||
- [ ] 列出源素材归档、manifest 和提取脚本路径。
|
||||
- [ ] 报告真实浏览器结果和多视口数据。
|
||||
- [ ] 报告专项/全量回归结果。
|
||||
- [ ] 说明任何未验收状态或环境限制。
|
||||
- [ ] 未删除概念图、素材板、切片或生成脚本。
|
||||
|
||||
只有工程检查、真实浏览器视觉和参考图对照全部满足后，才能把主题标记为完成。
|
||||
172
.codex/skills/create-cc-web-theme/references/asset-workflow.md
Normal file
172
.codex/skills/create-cc-web-theme/references/asset-workflow.md
Normal file
@@ -0,0 +1,172 @@
|
||||
# 主题素材归档与切片工作流
|
||||
|
||||
## 目录
|
||||
|
||||
1. 建立素材台账
|
||||
2. 归档源素材
|
||||
3. 分析构图与安全区
|
||||
4. 提取背景、边框、图标和纹理
|
||||
5. 处理动态组件装饰框
|
||||
6. 保存 manifest 和生成脚本
|
||||
7. 资产质量门禁
|
||||
|
||||
## 1. 建立素材台账
|
||||
|
||||
收到素材后立即记录：
|
||||
|
||||
| 字段 | 说明 |
|
||||
|---|---|
|
||||
| 角色 | 完整参考、背景、图标板、边框板、欢迎卡、纹理或字体 |
|
||||
| 原始路径 | 会话附件或用户提供位置 |
|
||||
| 归档路径 | 当前主题任务的 `references/source-assets/` |
|
||||
| 尺寸/格式 | 像素尺寸、RGB/RGBA、PNG/WebP/JPEG 等 |
|
||||
| SHA-256 | 防止后续误换源图 |
|
||||
| 是否含 alpha | 决定是否需要背景分离 |
|
||||
| 允许用途 | 背景、切片源、对照图或仅参考 |
|
||||
|
||||
不要把完整参考图直接当产品背景，也不要把带标题、尺寸标签和卡片底的图标板当 CSS sprite。
|
||||
|
||||
## 2. 归档源素材
|
||||
|
||||
优先归档到：
|
||||
|
||||
```text
|
||||
.trellis/tasks/<date>-<theme-task>/references/source-assets/
|
||||
```
|
||||
|
||||
保留原始文件名或建立清晰映射。归档后核对源附件与归档文件 hash 一致。后续脚本只读取归档路径，避免依赖可能清理的会话附件。
|
||||
|
||||
禁止删除：
|
||||
|
||||
- 完整概念图。
|
||||
- 背景源图。
|
||||
- 图标/边框/欢迎卡素材板。
|
||||
- 视觉对照截图。
|
||||
- 提取脚本和 manifest。
|
||||
|
||||
## 3. 分析构图与安全区
|
||||
|
||||
按原始像素尺寸记录：
|
||||
|
||||
- 主视觉主体 bbox。
|
||||
- 适合侧栏和正文的低干扰区域。
|
||||
- 不能被消息、遮罩或输入区压住的高权重区域。
|
||||
- 顶部、底部和移动端裁切风险。
|
||||
- 参考图中的真实视口与组件坐标。
|
||||
|
||||
遮罩的目标是稳定文字对比，不是继续压暗整张背景。先让背景主体可见，再由局部面板解决可读性。
|
||||
|
||||
## 4. 提取背景、边框、图标和纹理
|
||||
|
||||
### 背景
|
||||
|
||||
- 优先保留用户提供的原图和构图比例。
|
||||
- 使用 WebP/PNG/JPEG 等项目已支持格式。
|
||||
- 记录 `background-size`、`background-position` 和各视口裁切策略。
|
||||
- 不对主视觉背景使用 blur，除非设计稿明确如此。
|
||||
|
||||
### 边框
|
||||
|
||||
- 从参考图提取时保留角线、短高光和必要装饰，清除烘焙背景与棋盘格。
|
||||
- 先确认边框属于固定尺寸还是动态尺寸组件。
|
||||
- 固定尺寸按钮可使用完整透明 PNG。
|
||||
- 动态高度输入框、长工具块或可伸缩卡片使用 `border-image`/九宫格，或拆成角、边和独立装饰。
|
||||
- 不把固定宽高比整框放在 `::before` 后强行覆盖动态内容。
|
||||
|
||||
### 图标
|
||||
|
||||
区分四个概念：
|
||||
|
||||
1. 设计目标尺寸。
|
||||
2. 素材板中的物理像素尺寸。
|
||||
3. 输出透明画布尺寸。
|
||||
4. 实际 alpha 主体 bbox。
|
||||
|
||||
按控件用途选择源规格，不要所有图标统一从最大档裁出后再缩到同一个 CSS 尺寸。
|
||||
|
||||
- 小动作按钮：优先干净单色 mask，主体通常比容器小。
|
||||
- 主操作按钮：使用更高规格源图，允许更大视觉主体。
|
||||
- 多色状态、头像和主题装饰：保留原色，单独处理尺寸。
|
||||
- 非方形图标：保持比例并放入统一画布，不拉伸。
|
||||
- 非对称图标：按 alpha 加权重心校正光学中心。
|
||||
|
||||
alpha 加权中心：
|
||||
|
||||
```text
|
||||
cx = sum(x * alpha) / sum(alpha)
|
||||
cy = sum(y * alpha) / sum(alpha)
|
||||
offset = canvas_center - (cx, cy)
|
||||
```
|
||||
|
||||
### RGB 素材板分离 alpha
|
||||
|
||||
RGB WebP 常含有损压缩噪点，不能只用单一亮度阈值。推荐：
|
||||
|
||||
1. 按主体外扩 2–4px 裁剪。
|
||||
2. 从边缘 flood-fill 识别与暗背景相连区域。
|
||||
3. 结合亮度、色相和局部差值识别金色/浅色/状态色。
|
||||
4. 去除小连通域噪点。
|
||||
5. 对 alpha 轻微羽化，避免黑边。
|
||||
6. 在深色、浅色和半透明背景上人工复核。
|
||||
|
||||
阈值必须针对当前素材板调试，不跨主题硬编码。
|
||||
|
||||
## 5. 处理动态组件装饰框
|
||||
|
||||
### 先问三个问题
|
||||
|
||||
1. 组件宽高是否随内容变化？
|
||||
2. 哪些区域可以拉伸，哪些角/徽记必须保持比例？
|
||||
3. 聚焦、拖拽、笔记、运行等状态是否改变 border 或尺寸？
|
||||
|
||||
### 推荐选择
|
||||
|
||||
| 场景 | 推荐 |
|
||||
|---|---|
|
||||
| 固定 48px 按钮 | 完整透明框图或 mask |
|
||||
| 宽度变化、高度固定 | 水平三段切片或 `border-image` |
|
||||
| 宽高都变化 | 九宫格 `border-image` |
|
||||
| 底部中心徽记不能拉伸 | 框体九宫格 + 独立徽记，或通过不拉伸 slice 保留 |
|
||||
| 装饰只是短角线 | CSS border + 小伪元素，不加载整张框 |
|
||||
|
||||
测试最短、常规和最长内容。只验证单行输入不能证明动态框正确。
|
||||
|
||||
## 6. 保存 manifest 和生成脚本
|
||||
|
||||
每个派生资产至少记录：
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "send",
|
||||
"source": "icon-sheet.webp",
|
||||
"source_sha256": "...",
|
||||
"source_box": [x, y, width, height],
|
||||
"variant": "24px",
|
||||
"detected_box": [x, y, width, height],
|
||||
"output": "icons/send.png",
|
||||
"size": [32, 32],
|
||||
"usage": "composer primary action"
|
||||
}
|
||||
```
|
||||
|
||||
生成脚本应：
|
||||
|
||||
- 使用项目已有依赖，避免为一次切图引入重量级包。
|
||||
- 只读取归档源素材。
|
||||
- 可重复运行并稳定覆盖派生资产。
|
||||
- 写出 manifest，失败时指出具体资产。
|
||||
- 用中文注释说明当前素材板特有的阈值、区域和校正。
|
||||
|
||||
Wasteland 案例脚本位于 `.trellis/tasks/07-17-gilded-wasteland-theme/research/extract_reference_chrome.py`，只可作为方法参考，不要直接复用其坐标和颜色阈值。
|
||||
|
||||
## 7. 资产质量门禁
|
||||
|
||||
- 文件格式、尺寸和 alpha 通道符合用途。
|
||||
- 背景 hash 与归档源一致，或记录过转换原因。
|
||||
- manifest 与实际文件一一对应，没有遗漏或多余派生图。
|
||||
- 透明图在深/浅/半透明背景上无黑边和棋盘格。
|
||||
- 尖角、纸飞机尾部、气泡尾巴和状态色未被裁掉。
|
||||
- 图标实际主体尺寸符合控件层级，不以画布尺寸代替可见尺寸。
|
||||
- 光学中心误差可解释并在按钮中实测。
|
||||
- 浏览器请求所有资产返回 200，MIME 正确。
|
||||
- 源素材、manifest 和提取脚本仍然存在。
|
||||
@@ -0,0 +1,158 @@
|
||||
# cc-web 主题架构与修改边界
|
||||
|
||||
## 目录
|
||||
|
||||
1. 代码定位顺序
|
||||
2. 主题运行链路
|
||||
3. CSS 分层
|
||||
4. DOM 双路径
|
||||
5. 资产与回归
|
||||
6. 脏工作树与服务约束
|
||||
|
||||
## 1. 代码定位顺序
|
||||
|
||||
不要依赖固定行号。按符号和稳定文本定位：
|
||||
|
||||
1. `public/app.js`
|
||||
- `THEME_OPTIONS`
|
||||
- `normalizeTheme`
|
||||
- `applyTheme`
|
||||
- `buildThemePickerHtml` / `mountThemePicker`
|
||||
- `buildWelcomeMarkup`
|
||||
2. `public/index.html`
|
||||
- CSS 加载前的主题 bootstrap
|
||||
- 静态 welcome DOM
|
||||
- CSS/JS cache-busting query
|
||||
3. `public/style.css`
|
||||
- `html[data-theme='<id>']` 语义变量
|
||||
- 共享暗色 `:is(...)` completion selectors
|
||||
- 文件后部的主题专属组件层
|
||||
- 响应式与 `prefers-reduced-motion`
|
||||
4. `scripts/regression.js`
|
||||
- `assertFrontend<Theme>ThemeContract`
|
||||
- `--target <theme>-theme`
|
||||
- 全量回归入口
|
||||
5. `public/assets/themes/<id>/`
|
||||
- background、frames、icons、textures、manifest
|
||||
|
||||
先用 codebase-memory 找符号和调用关系，再用 `rg` 核对资源文本与最终位置。
|
||||
|
||||
## 2. 主题运行链路
|
||||
|
||||
```text
|
||||
THEME_OPTIONS
|
||||
├── 设置页主题候选 / label / desc / swatches
|
||||
├── normalizeTheme() 判断持久化值是否合法
|
||||
└── applyTheme()
|
||||
├── document.documentElement.dataset.theme
|
||||
└── localStorage['cc-web-theme']
|
||||
|
||||
index.html bootstrap
|
||||
└── CSS 加载前写入 data-theme，避免首屏闪烁
|
||||
|
||||
html[data-theme='<id>']
|
||||
└── 语义变量 → 共享组件 → 主题专属组件层
|
||||
```
|
||||
|
||||
主题列表只维护一份。不要在设置页或其他弹层硬编码第二份主题候选。
|
||||
|
||||
### 新主题 ID
|
||||
|
||||
- 使用稳定、小写、可长期保留的 ID。
|
||||
- 新主题默认新建 ID；不要借用隐藏主题、历史主题或另一个风格的 ID。
|
||||
- 保留旧主题用于对比时，不修改其 label、资产和 selector。
|
||||
- 如需迁移旧 ID，明确写出 `旧值 → 新值`，并增加回归断言。
|
||||
|
||||
## 3. CSS 分层
|
||||
|
||||
按以下层次组织：
|
||||
|
||||
1. **语义变量层**：背景、文字、边线、强调色、面板色。
|
||||
2. **共享 completion 层**：只放多个暗色主题确实共用的组件补齐。
|
||||
3. **基础 UI 层**：不因单个主题改变业务布局或交互。
|
||||
4. **主题专属层**：背景、边框、图标、welcome、特殊响应式。
|
||||
|
||||
专属层应放在共享规则之后，并限定 `html[data-theme='<id>']`。当后置规则仍无效时，检查 specificity，而不是继续追加更宽泛的选择器。
|
||||
|
||||
### `:is()` 风险
|
||||
|
||||
`:is()` 的 specificity 取参数中最高值。共享规则例如：
|
||||
|
||||
```css
|
||||
:is(
|
||||
html[data-theme='a'] .msg.assistant .msg-bubble,
|
||||
html[data-theme='b'] .msg.system .msg-bubble[data-tone='info']
|
||||
) { ... }
|
||||
```
|
||||
|
||||
可能比后面的普通主题规则更强。出现“backdrop-filter 变了但 background 没变”时，必须查看 computed style 的规则来源；必要时使用同级 specificity 或只对冲突声明使用精确 `!important`。
|
||||
|
||||
## 4. DOM 双路径
|
||||
|
||||
welcome 页面同时存在：
|
||||
|
||||
- `public/index.html` 的静态首屏结构。
|
||||
- `public/app.js` 的 `buildWelcomeMarkup()` 动态结构。
|
||||
|
||||
新增图层、class、无障碍属性、文案节点或图片时必须同步两处。
|
||||
|
||||
动态数据必须由 JS 统一填充，例如：
|
||||
|
||||
- 当前项目名称来自 `cwd`。
|
||||
- 当前 Agent 名称来自运行时状态。
|
||||
- 当前会话标题来自 snapshot。
|
||||
|
||||
静态 HTML 只保留可定位的空节点或不依赖运行时的数据。回归必须断言静态模板没有写死动态名称。
|
||||
|
||||
### 重复视觉来源
|
||||
|
||||
实现主题图标前检查实际 DOM：
|
||||
|
||||
- 文本 `+`、`▾`、`…`。
|
||||
- 内联 SVG。
|
||||
- `<img>` 头像。
|
||||
- 基础主题已有的 `::before` / `::after`。
|
||||
- 新主题 background/mask。
|
||||
|
||||
同一语义只保留一个可见来源，并只在当前主题下隐藏旧来源。
|
||||
|
||||
## 5. 资产与回归
|
||||
|
||||
推荐目录：
|
||||
|
||||
```text
|
||||
public/assets/themes/<theme-id>/
|
||||
├── background.webp
|
||||
├── frames/
|
||||
│ ├── manifest.json
|
||||
│ └── *.png
|
||||
├── icons/
|
||||
│ ├── manifest.json
|
||||
│ └── *.png
|
||||
└── textures/
|
||||
└── *.webp
|
||||
```
|
||||
|
||||
专项回归至少覆盖：
|
||||
|
||||
- 主题注册、可见性和迁移策略。
|
||||
- 变量块和专属组件层存在。
|
||||
- 新主题加入必要共享 selectors。
|
||||
- 静态/动态 welcome 同步。
|
||||
- 本地资产格式、尺寸、hash 或 manifest。
|
||||
- 禁止远程 URL。
|
||||
- 动态组件的结构契约，例如可伸缩输入框不依赖固定伪元素。
|
||||
- 响应式、reduced-motion、文字对比度。
|
||||
- cache bust 与在线加载版本一致。
|
||||
- 旧主题专项回归继续通过。
|
||||
|
||||
回归验证结构和不变量，不替代像素与构图验收。
|
||||
|
||||
## 6. 脏工作树与服务约束
|
||||
|
||||
- 实施前执行 `git status --short` 和主题相关精确 diff。
|
||||
- 记录相关文件的起始状态；只修改目标区块。
|
||||
- 不使用 `git reset --hard`、`git checkout --` 或整文件还原保护自己生成的改动。
|
||||
- 多会话可能同时修改 `app.js`、`style.css`、`index.html` 和 `regression.js`。发现反复回写时停止覆盖，先协调写入边界。
|
||||
- 修改静态文件通常不需要重启服务。需要重启 cc-web 时，严格执行仓库 `AGENTS.md` 的运行会话检查。
|
||||
- 浏览器访问失败时先用 `curl http://127.0.0.1:<port>` 检查本地服务，再按 `hostname -I` 使用 `11.144.144.*` 地址排除网络命名空间问题。
|
||||
185
.codex/skills/create-cc-web-theme/references/lessons-learned.md
Normal file
185
.codex/skills/create-cc-web-theme/references/lessons-learned.md
Normal file
@@ -0,0 +1,185 @@
|
||||
# 主题创作经验教训
|
||||
|
||||
## 目录
|
||||
|
||||
1. 完成标准
|
||||
2. 构图与装饰
|
||||
3. 边框与动态尺寸
|
||||
4. 图标与重复来源
|
||||
5. 透明度与选择器
|
||||
6. 居中、菜单与动态 DOM
|
||||
7. 范围控制与缓存
|
||||
|
||||
## 1. 完成标准
|
||||
|
||||
### 教训：自动化通过不代表像设计图
|
||||
|
||||
症状：资产存在、选择器命中、回归全绿，但用户第一眼认为“完全不是一个东西”。
|
||||
|
||||
根因：回归只能证明结构契约，不能证明构图比例、边框轻重、视觉层级和图标质感。
|
||||
|
||||
做法：
|
||||
|
||||
- 把真实浏览器视觉对照列为独立完成阶段。
|
||||
- 按参考图原始视口先验收，再做响应式。
|
||||
- 为关键区域记录截图、几何值和 computed style。
|
||||
- 用户未确认或对照差异明显时，回滚“完成”状态。
|
||||
|
||||
## 2. 构图与装饰
|
||||
|
||||
### 教训：参考图不是配色板
|
||||
|
||||
症状：颜色接近，但人物被遮罩压黑、侧栏比例不对、卡片堆叠、整体质感跑偏。
|
||||
|
||||
根因：只抽取黑、金、棕等颜色，没有量化参考图的空间、留白和主视觉安全区。
|
||||
|
||||
做法：先量化侧栏/顶栏/输入区比例、主视觉 bbox、阅读安全区和面板覆盖范围。
|
||||
|
||||
### 教训：主题感不是“给所有组件加边框”
|
||||
|
||||
症状：搜索框、消息、列表、弹层、工具块全都厚金边和切角，界面像重型游戏皮肤。
|
||||
|
||||
根因：把局部装饰语言泛化到所有组件。
|
||||
|
||||
做法：建立装饰预算。只让主按钮、输入框和少数工具框承担强边框；普通消息、列表和小标签使用轻线或无边框。
|
||||
|
||||
### 教训：先删重，再加细节
|
||||
|
||||
症状：越修越多伪元素、渐变、阴影和粒子，参考主体反而更弱。
|
||||
|
||||
做法：按“背景 → 大布局 → 面板 → 边框 → 图标 → 微交互”排序。发现层级错误时先删除多余装饰，不继续叠覆盖规则。
|
||||
|
||||
## 3. 边框与动态尺寸
|
||||
|
||||
### 教训：固定比例伪元素不适合动态输入框
|
||||
|
||||
症状：单行看似正确，多行内容后边框、底线或徽记偏移；窄屏出现非等比压缩。
|
||||
|
||||
根因：把固定 `width/height` 比例的整框放在 `::before`/`::after`，它不跟随真实内容盒的边界语义。
|
||||
|
||||
做法：
|
||||
|
||||
- 动态宽高使用 `border-image`/九宫格。
|
||||
- 把不能拉伸的徽记和可拉伸边线分开。
|
||||
- 测试最短、常规和最大高度。
|
||||
- focus/drag/note 状态不要用 `border: 0` 破坏 frame。
|
||||
|
||||
### 教训：莫名边框通常来自叠层，不是主框
|
||||
|
||||
症状：按钮旁多出框、输入区出现虚线、聚焦后冒出第二层边。
|
||||
|
||||
根因：旧 focus ring、按钮 `::after`、背景素材烘焙线、主框图片内外双线同时存在。
|
||||
|
||||
做法：在 DevTools 逐个关闭伪元素、border、outline、box-shadow 和背景图，确定真实来源后只删那一层。
|
||||
|
||||
## 4. 图标与重复来源
|
||||
|
||||
### 教训：统一画布不等于统一视觉尺寸
|
||||
|
||||
症状：CSS 都是 24px，但图标仍显得过小、过大或偏心。
|
||||
|
||||
根因：透明画布内的 alpha 主体 bbox 不同；不同形状的光学重心也不同。
|
||||
|
||||
做法：记录源规格、输出画布、alpha bbox 和实际 CSS 尺寸；非对称图标按 alpha 重心校正。
|
||||
|
||||
### 教训：最大档切图缩小不一定更清晰
|
||||
|
||||
症状：64px 原色 PNG 缩到 18–24px 后灰边、糊、材质脏。
|
||||
|
||||
根因：有损素材板中的半透明暗边和高光被浏览器重采样到很小区域。
|
||||
|
||||
做法：主交互控件重切对应规格并制作干净 mask；多色状态和头像保留原色但独立裁切。
|
||||
|
||||
### 教训：新图标可能叠在旧图标上
|
||||
|
||||
症状：头像两个图、新会话加号消失/重复、发送按钮出现“一坨”。
|
||||
|
||||
根因：真实 DOM 已有文字、SVG 或 `<img>`，主题又添加了背景图或伪元素。
|
||||
|
||||
做法：先检查 DOM。每个语义只保留一个视觉来源；只在目标主题下隐藏原生子节点。
|
||||
|
||||
## 5. 透明度与选择器
|
||||
|
||||
### 教训：RGBA 很低仍可能看起来不透明
|
||||
|
||||
症状：外层气泡改为 2%–10% alpha，页面仍像实心黑卡片。
|
||||
|
||||
根因可能包括：
|
||||
|
||||
- 内层 tool-call/content/title 仍是 90% 黑底。
|
||||
- blur 太高，把背景细节抹成均匀色块。
|
||||
- 旧规则用更高 specificity 锁住 background。
|
||||
- 伪元素仍覆盖整层。
|
||||
|
||||
做法：从最外层到最内层检查 computed background、background-image、opacity、backdrop-filter 和伪元素。用背景纹理是否可辨判断“透”，不用数值自我证明。
|
||||
|
||||
### 教训：`backdrop-filter` 变了不代表背景色也变了
|
||||
|
||||
症状：DevTools 显示 blur 已更新，但气泡底色完全不变。
|
||||
|
||||
根因：共享 `:is()` 规则的最高参数 specificity 超过后置主题规则。
|
||||
|
||||
做法：查看每个 computed 属性的获胜规则；使用同级 selector 或只对冲突属性精确增加 `!important`。不要把 `!important` 扩散到整个主题。
|
||||
|
||||
### 教训：模糊强度不是越高越有磨砂感
|
||||
|
||||
症状：提高 blur 后背景更像不透明色块。
|
||||
|
||||
根因：暗场细节被平均，透景消失。
|
||||
|
||||
做法：先降低染色层，再用较小 blur 配合适度 saturate/brightness；最终数值按当前背景实测，不把某个主题的 `blur(3px)` 当通用常量。
|
||||
|
||||
## 6. 居中、菜单与动态 DOM
|
||||
|
||||
### 教训：CSS “居中”需要测量证据
|
||||
|
||||
症状：代码有 flex/absolute 50%，视觉仍偏。
|
||||
|
||||
根因：容器本身不在画布中心、baseline 不一致、图片 alpha 主体偏心或滚动条改变内容区中心。
|
||||
|
||||
做法：分别测容器中心、画布中心、图标 alpha 中心和文字 line box；记录像素差后修正。
|
||||
|
||||
### 教训：菜单没显示可能是被父级裁切
|
||||
|
||||
症状：点击后状态正确，菜单 DOM 也存在，但看不到。
|
||||
|
||||
根因：列表项 `overflow: hidden`、错误 stacking context 或按钮被 flex 挤出。
|
||||
|
||||
做法：检查展开态 overflow、定位基准、z-index 和操作区尺寸。只在菜单打开时解除必要裁切。
|
||||
|
||||
### 教训：静态与动态 welcome 会漂移
|
||||
|
||||
症状：首次打开显示旧文案，刷新/切会话后才正确；结构修了一处另一处仍旧。
|
||||
|
||||
根因：`index.html` 与 `buildWelcomeMarkup()` 是两条渲染路径。
|
||||
|
||||
做法：结构同步，动态文案使用同一 formatter/hydration 节点；回归同时读取静态与动态源码。
|
||||
|
||||
## 7. 范围控制与缓存
|
||||
|
||||
### 教训：用户圈的是哪层，就只改哪层
|
||||
|
||||
症状：用户要求气泡透明，却修改了所有卡片、工具层或整页背景，导致更多视觉偏差。
|
||||
|
||||
做法：先用 DOM/DevTools 确认用户所指层级，明确 selector 列表；超出范围的发现只记录，不顺手实施。
|
||||
|
||||
### 教训：选择器写错会让正确元素消失
|
||||
|
||||
症状：加号消失或旧规则继续生效。
|
||||
|
||||
根因：假定 class 名，没有检查真实 DOM；新 selector 命中不存在节点，旧隐藏规则仍命中真实节点。
|
||||
|
||||
做法：实现前用 `rg` 和浏览器检查实际 class，回归断言真实节点保持所需显示状态。
|
||||
|
||||
### 教训：缓存会制造“完全没变化”的假象
|
||||
|
||||
做法：
|
||||
|
||||
- 修改 CSS/JS 后推进 cache-busting query。
|
||||
- 用浏览器读取实际 `<link>`/`<script>` URL。
|
||||
- 用 HTTP 请求确认最新资源内容与 200。
|
||||
- 确认缓存后再判断 CSS 是否无效。
|
||||
|
||||
### 教训：并行会话会反复覆盖共享主题文件
|
||||
|
||||
做法：开始前审计活跃会话和脏文件；为子任务划分不重叠写入面。发现相同区块连续回写时停止互相覆盖，协调后再合并。
|
||||
70
.planning/cc-web-theme-creation-skill/findings.md
Normal file
70
.planning/cc-web-theme-creation-skill/findings.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Findings & Decisions
|
||||
|
||||
## Requirements
|
||||
|
||||
- 把本次主题创作的经验、教训和方法写成一个本地 Skill。
|
||||
- Skill 放在项目的 `.codex/skills/` 下。
|
||||
- 后续创建其他主题时能够直接触发和复用。
|
||||
- 保留现有主题概念图、素材板、切片和研究产物，不做资产清理。
|
||||
|
||||
## Research Findings
|
||||
|
||||
- `skill-creator` 要求从零创建 Skill 时必须使用 `init_skill.py`，完成后运行 `quick_validate.py`。
|
||||
- Skill frontmatter 只允许 `name` 与 `description`；触发条件必须完整写进 description。
|
||||
- `agents/openai.yaml` 应包含 `display_name`、25–64 字符的 `short_description`，以及显式提到 `$create-cc-web-theme` 的 `default_prompt`。
|
||||
- Skill 应采用渐进披露：SKILL.md 保留核心流程，案例教训与细节放进一层 `references/`，避免重复。
|
||||
- 当前仓库存在大量主题相关未提交改动；本任务只能新增 Skill 和任务记录，不能覆盖其他改动。
|
||||
- 现有主题资料已经形成完整证据链：归档源图、切片研究、提取脚本、输出 manifest、CSS 实现、专项回归和浏览器实测记录。未来主题应复用这条链，而不是只保留最终 PNG/CSS。
|
||||
- 最初“源码和回归通过即完成”的判断导致视觉验收失败。主题任务的完成门槛必须包含与参考图逐项对照的真实浏览器截图/计算样式/几何测量。
|
||||
- 参考图是构图契约，不只是配色灵感。背景主角安全区、侧栏宽度、内容中心、边框轻重、图标视觉主体和层级关系都需要先量化。
|
||||
- 可伸缩输入框不能把固定比例完整边框图放在 `::before` 上随容器拉伸；内容增高会导致框体偏移。最终有效方案是九宫格思路的 `border-image`，让角、边和底部装饰分别承担职责。
|
||||
- “CSS 数值已更透明”不代表视觉上真的透明。嵌套工具层、旧高优先级选择器与高 blur 都可能让气泡仍像实心块；必须检查 computed style、逐层背景和实际透景。
|
||||
- `:is()` 使用最高参数 specificity，后追加的低特异性规则可能只覆盖 `backdrop-filter`、覆盖不了背景色。遇到“改了没变化”时先查规则来源与 computed style，不要继续盲调数值。
|
||||
- 图标需要区分容器尺寸、源图规格、alpha 主体边界和光学中心。把所有 64px 原色 PNG 一刀切缩成 22px 会产生灰边、糊边和比例失衡；主交互控件更适合清理后的 mask，多色状态/头像保留原色切图。
|
||||
- 欢迎页同时存在静态首屏与动态 `buildWelcomeMarkup`，任何结构或文案修改必须双路径同步，并用回归断言防止静态写死动态数据。
|
||||
- 浏览器几何验收能快速识别“看着不正”：欢迎卡曾偏左约 147px，加入 `margin: 0 auto` 后中心误差降至约 2px；图标也应以 alpha 重心而不是画布边界衡量。
|
||||
- 主题资产必须保留源概念图、素材板、切片坐标和提取脚本；最终资产只是派生物，后续新增功能往往需要回到源板重新切片。
|
||||
- 当前 cc-web 主题架构以 `THEME_OPTIONS`、`html[data-theme]`、首屏 bootstrap、语义变量、共享暗色 completion selector 和后置主题专属层组成；未来主题应沿用这条单源链路，不再造第二套设置列表或 body class。
|
||||
- Wasteland 专项回归最终覆盖了主题注册、可见性、迁移策略、动态/静态 welcome、共享 selector、本地资产格式/尺寸/hash、manifest、响应式、reduced-motion、对比度、cache bust 和防远程 URL。Skill 的验收清单应保留这些类别，但不能硬编码 Wasteland 数值。
|
||||
- 隔离前向测试使用完全不同的“海底生物机械”主题请求，子代理只依赖新 Skill 即识别出主题隔离、源资产归档、动态输入框、透明嵌套层、welcome 双路径和真实浏览器门禁，证明流程能够泛化。
|
||||
- 当前提取脚本证明可复现资产流程应记录：源文件、裁剪框、源规格、检测框、输出画布和派生关系。阈值与坐标属于主题案例，不应固化为跨主题常量。
|
||||
- 对非对称图标，按 alpha 加权重心校正比按画布中心更可靠；对可伸缩装饰框，应优先采用九宫格/border-image 或拆分稳定区域，禁止直接横纵拉伸整张构图。
|
||||
|
||||
## Technical Decisions
|
||||
|
||||
| Decision | Rationale |
|
||||
|----------|-----------|
|
||||
| 项目级 Skill 路径使用 `.codex/skills/create-cc-web-theme/` | 用户明确指定，且便于随仓库复用 |
|
||||
| 核心流程与案例参考分离 | 降低常驻上下文体积，同时保留本次主题的完整教训 |
|
||||
| 将视觉验收作为强制门禁 | 本次多轮返工证明仅靠源码断言和回归通过无法保证与设计图一致 |
|
||||
| 将“主题隔离、素材保留、动态内容、真实浏览器验证”写成硬约束 | 这些是本次最反复、代价最高的问题 |
|
||||
| Skill references 至少拆分为“经验教训”和“验收清单” | 前者解释判断依据，后者为后续任务提供可执行门禁 |
|
||||
| 复用现有提取脚本的方法，不把 Wasteland 坐标硬编码成通用脚本 | 不同主题素材板结构不同，错误自动化比手工确认成本更高 |
|
||||
| Skill 不新增通用切片脚本 | 现有源板差异大；改为要求每个主题保存可重放的专用提取脚本和 manifest |
|
||||
| Skill 使用 4 个单层 reference | 分别承载经验教训、资产方法、cc-web 架构和验收清单，避免 SKILL.md 膨胀 |
|
||||
| Skill 结构验证已通过 | quick_validate、引用存在性、frontmatter 键和 openai.yaml mention 均符合规范 |
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
| Issue | Resolution |
|
||||
|-------|------------|
|
||||
| 初始把项目级 Skill 路径说成 `.agents/skills` | 用户纠正后立即切换到 `.codex/skills`，且未创建错误目录 |
|
||||
| planning-with-files 检测到根级旧计划和其他活跃计划 | 使用 `.planning/cc-web-theme-creation-skill/` 独立作用域，避免覆盖 |
|
||||
|
||||
## Resources
|
||||
|
||||
- `.trellis/tasks/07-17-gilded-wasteland-theme/`
|
||||
- `.trellis/tasks/07-17-gilded-wasteland-theme/research/extract_reference_chrome.py`
|
||||
- `public/assets/themes/wasteland/`
|
||||
- `public/style.css`
|
||||
- `public/app.js`
|
||||
- `public/index.html`
|
||||
- `scripts/regression.js`
|
||||
- `.codex/skills/planning-with-files/`
|
||||
- `/home/hdzx/.codex/skills/.system/skill-creator/`
|
||||
|
||||
## Visual/Browser Findings
|
||||
|
||||
- 视觉层的高频失败模式集中在：整体过暗、厚金边、全组件切角、图标缩放糊、边框重复、伪元素随内容错位、按钮光学不居中、气泡被嵌套层锁成实心、欢迎卡按参考构图左对齐而非画布居中。
|
||||
- 有效验收至少覆盖桌面参考尺寸、常规桌面、窄屏三个视口，并记录横向溢出、主容器中心差、图标 alpha 重心、动态高度和 computed style。
|
||||
- 参考图中的“磨砂”应通过真实背景细节是否可见判断；仅看 `rgba()`、`blur()` 数值会误判。
|
||||
83
.planning/cc-web-theme-creation-skill/progress.md
Normal file
83
.planning/cc-web-theme-creation-skill/progress.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# Progress Log
|
||||
|
||||
## Session: 2026-07-18
|
||||
|
||||
### Phase 1: 梳理现有主题实现与反馈教训
|
||||
|
||||
- **Status:** in_progress
|
||||
- **Started:** 2026-07-18
|
||||
- Actions taken:
|
||||
- 读取 `planning-with-files`、`skill-creator`、`todo-list-csv` 完整规范。
|
||||
- 运行 session catchup，确认仓库存在其他任务的根级与 scoped 计划。
|
||||
- 检查 Git 差异和项目 Skill 目录，确认目标 Skill 尚不存在。
|
||||
- 按用户纠正将目标目录从 `.agents/skills` 改为 `.codex/skills`。
|
||||
- 使用 codebase-memory 定位主题注册、欢迎渲染、资产提取和 Wasteland 回归入口。
|
||||
- 扫描主题任务、研究报告、归档源资产、切片结果和多轮视觉修正记录。
|
||||
- 将输入框边框、气泡透明度、选择器优先级、图标规格和几何居中等教训写入 findings.md。
|
||||
- 完整阅读主题计划、调研、视觉审计、架构说明、资产切片方法和当前提取脚本。
|
||||
- 核对当前 Wasteland CSS 关键层与专项回归覆盖面。
|
||||
- 独立计划审查通过，无严重缺口。
|
||||
- Phase 1 完成，进入 Skill 结构与触发边界设计。
|
||||
- 确定 Skill 采用 7 阶段核心工作流和四份单层 reference，不新增 assets 或伪通用切片脚本。
|
||||
- Phase 2 完成，进入标准初始化。
|
||||
- 使用 skill-creator 的 init_skill.py 在 `.codex/skills/create-cc-web-theme/` 初始化 Skill。
|
||||
- 初始化时生成 references 目录和符合 openai.yaml 规范的 UI 元数据。
|
||||
- Phase 3 完成，进入核心内容与参考资料编写。
|
||||
- 完整替换初始化模板，SKILL.md 收敛为 139 行的 7 阶段主题执行主线。
|
||||
- 新增架构、资产、经验教训和完成验收四份单层 references，共 642 行。
|
||||
- 检查无 TODO/占位模板残留，四份 reference 均由 SKILL.md 直接引用。
|
||||
- Phase 4 完成，进入规范验证和隔离前向测试。
|
||||
- quick_validate.py 返回 `Skill is valid!`。
|
||||
- 自定义检查确认 frontmatter 仅含 name/description、四份 reference 均存在、openai.yaml 包含显式 Skill mention，且无模板占位。
|
||||
- `git diff --check` 通过。
|
||||
- 已启动隔离只读前向测试，模拟另一套“海底生物机械”主题，不向子代理泄露 Wasteland 复盘结论。
|
||||
- 前向测试独立读取 Skill 与四份 references，提出独立主题 ID、资产归档、九宫格输入框、透明气泡逐层检查、welcome 双路径和多视口门禁。
|
||||
- 子代理未读取被禁止的 Wasteland 历史复盘目录且未修改文件；Skill 的迁移性验证通过，无需返修。
|
||||
- Phase 5 完成，进入最终差异检查和任务清理。
|
||||
- 最终 `git diff --check` 通过；Skill 清单包含 SKILL.md、openai.yaml 和四份 references。
|
||||
- scoped Git 状态只新增本 Skill、独立 planning 记录和待清理 TODO CSV，未修改当前主题视觉文件。
|
||||
- Phase 6 完成；准备删除临时 TODO CSV 并交付。
|
||||
- Files created/modified:
|
||||
- `.codex/skills/create-cc-web-theme/SKILL.md`
|
||||
- `.codex/skills/create-cc-web-theme/agents/openai.yaml`
|
||||
- `.codex/skills/create-cc-web-theme/references/`
|
||||
- `.codex/skills/create-cc-web-theme/references/cc-web-theme-architecture.md`
|
||||
- `.codex/skills/create-cc-web-theme/references/asset-workflow.md`
|
||||
- `.codex/skills/create-cc-web-theme/references/lessons-learned.md`
|
||||
- `.codex/skills/create-cc-web-theme/references/acceptance-checklist.md`
|
||||
- Files created/modified:
|
||||
- `.planning/cc-web-theme-creation-skill/task_plan.md`
|
||||
- `.planning/cc-web-theme-creation-skill/findings.md`
|
||||
- `.planning/cc-web-theme-creation-skill/progress.md`
|
||||
|
||||
## Test Results
|
||||
|
||||
| Test | Input | Expected | Actual | Status |
|
||||
|------|-------|----------|--------|--------|
|
||||
| 目标目录预检 | `.codex/skills/create-cc-web-theme` | 尚不存在，可安全初始化 | 尚不存在 | ✓ |
|
||||
| Skill 标准验证 | `quick_validate.py` | 合法 Skill | Skill is valid | ✓ |
|
||||
| 结构与引用检查 | frontmatter / references / openai.yaml | 结构完整、引用有效 | 全部通过 | ✓ |
|
||||
| 补丁空白检查 | `git diff --check` | 无错误 | 通过 | ✓ |
|
||||
| 隔离前向测试 | 海底生物机械新主题只读规划 | Skill 能独立泛化且不泄露历史答案 | 输出完整实施/资产/验收方案 | ✓ |
|
||||
| 最终差异检查 | `git diff --check` + scoped status | 无空白错误、无主题视觉文件改动 | 通过 | ✓ |
|
||||
|
||||
## Error Log
|
||||
|
||||
| Timestamp | Error | Attempt | Resolution |
|
||||
|-----------|-------|---------|------------|
|
||||
| 2026-07-18T09:03:13+08:00 | 验证记录补丁合并多个文件，因 findings 行顺序不匹配而失败 | 1 | 恢复逐文件最小补丁并先检索精确上下文 |
|
||||
| 2026-07-18T09:03:13+08:00 | 错误日志补丁误把当前时间当成已有上下文 | 2 | 改为锚定稳定表头插入，不再匹配动态时间 |
|
||||
| 2026-07-18 | 初始误判 Skill 目录为 `.agents/skills` | 1 | 用户纠正后改为 `.codex/skills`；未创建错误目录 |
|
||||
| 2026-07-18T08:53:10+08:00 | planning 状态补丁的 JavaScript 模板字符串被反引号截断 | 1 | 改用字符串拼接并移除嵌套反引号 |
|
||||
| 2026-07-18T08:59:49+08:00 | Phase 4 状态补丁再次误用含反引号的模板字符串 | 2 | 停止使用模板字符串，改用字符串数组构造 |
|
||||
| 2026-07-18T08:59:49+08:00 | 合并状态补丁依赖了变化中的精确时间戳上下文 | 3 | 拆成逐文件、小上下文补丁后成功同步 |
|
||||
|
||||
## 5-Question Reboot Check
|
||||
|
||||
| Question | Answer |
|
||||
|----------|--------|
|
||||
| Where am I? | 全部阶段完成 |
|
||||
| Where am I going? | 交付项目级 Skill 并在未来主题任务中复用 |
|
||||
| What's the goal? | 创建 `.codex/skills/create-cc-web-theme/` 可复用主题创作 Skill |
|
||||
| What have I learned? | 见 findings.md |
|
||||
| What have I done? | 已完成 Skill 创建、规范验证、前向测试和最终差异检查 |
|
||||
88
.planning/cc-web-theme-creation-skill/task_plan.md
Normal file
88
.planning/cc-web-theme-creation-skill/task_plan.md
Normal file
@@ -0,0 +1,88 @@
|
||||
# Task Plan: 沉淀 cc-web 主题创作 Skill
|
||||
|
||||
## Goal
|
||||
|
||||
在 `.codex/skills/create-cc-web-theme/` 创建可复用的项目级 Skill，沉淀暗金荒野主题的设计方法、切图流程、实现边界、失败教训与视觉验收标准，供后续其他主题直接复用。
|
||||
|
||||
## Current Phase
|
||||
|
||||
Complete
|
||||
|
||||
## Phases
|
||||
|
||||
### Phase 1: 梳理现有主题实现与反馈教训
|
||||
|
||||
- [x] 审阅主题任务资料、切图脚本、关键 CSS/JS 与回归测试
|
||||
- [x] 提炼反复返工的根因和有效修正方法
|
||||
- [x] 将发现写入 findings.md
|
||||
- **Status:** complete
|
||||
|
||||
### Phase 2: 设计可复用 Skill 结构和触发边界
|
||||
|
||||
- [x] 明确触发语句与适用范围
|
||||
- [x] 区分核心工作流、详细参考和确定性脚本
|
||||
- [x] 完成计划独立审查
|
||||
- **Status:** complete
|
||||
|
||||
### Phase 3: 初始化项目级本地 Skill
|
||||
|
||||
- [x] 使用 skill-creator 初始化脚本创建目录
|
||||
- [x] 生成符合规范的 agents/openai.yaml
|
||||
- [x] 确认模板占位内容待 Phase 4 全量替换
|
||||
- **Status:** complete
|
||||
|
||||
### Phase 4: 编写核心工作流与经验参考
|
||||
|
||||
- [x] 编写 SKILL.md 核心执行流程
|
||||
- [x] 编写经验教训、资产切分和视觉验收参考
|
||||
- [x] 保持资源单层引用与内容不重复
|
||||
- **Status:** complete
|
||||
|
||||
### Phase 5: 验证 Skill 规范并进行前向测试
|
||||
|
||||
- [x] 运行 quick_validate.py
|
||||
- [x] 检查文件引用、触发描述和脚本可执行性
|
||||
- [x] 使用隔离子代理执行只读前向测试并吸收反馈
|
||||
- **Status:** complete
|
||||
|
||||
### Phase 6: 汇总交付并清理任务清单
|
||||
|
||||
- [x] 完成最终差异检查
|
||||
- [x] 更新 planning-with-files 记录
|
||||
- [x] 清理临时 TODO CSV 并交付路径与用法
|
||||
- **Status:** complete
|
||||
|
||||
## Key Questions
|
||||
|
||||
1. 哪些经验属于所有主题都适用的强约束，哪些只属于暗金荒野案例？
|
||||
2. 哪些步骤值得固化为脚本，哪些应保留为可判断的工作流？
|
||||
3. 如何确保未来主题不会覆盖现有主题、误删参考素材或只凭回归测试代替视觉验收？
|
||||
|
||||
## Decisions Made
|
||||
|
||||
| Decision | Rationale |
|
||||
|----------|-----------|
|
||||
| Skill 放在 `.codex/skills/create-cc-web-theme/` | 用户明确指定项目级 `.codex/skills`，可随仓库复用 |
|
||||
| 使用 `create-cc-web-theme` 作为名称 | 符合小写连字符和动词优先的命名规范，触发意图清晰 |
|
||||
| 使用 SKILL.md + references，按需要再增加 scripts | 保持核心上下文精简，把案例细节按需加载 |
|
||||
| 不复制或移动现有主题素材 | 用户要求保留概念图、素材板和切片，Skill 只引用其方法与位置约定 |
|
||||
| 计划审查已通过 | 计划覆盖目标路径、触发边界、references、openai.yaml、验证和只读前向测试 |
|
||||
| SKILL.md 只保留 7 阶段核心流程 | 保证触发后能立即执行，又不把案例细节全部加载进上下文 |
|
||||
| references 拆为 architecture、asset-workflow、lessons-learned、acceptance-checklist | 四类信息使用时机不同，保持一层引用和渐进披露 |
|
||||
| 不创建 assets 或通用切片脚本 | Skill 复用现有主题源资产；各主题的切片算法需按素材板专门编写并保留 |
|
||||
|
||||
## Errors Encountered
|
||||
|
||||
| Error | Attempt | Resolution |
|
||||
|-------|---------|------------|
|
||||
| 验证记录补丁合并多个文件且依赖非稳定上下文 | 2 | 恢复逐文件最小补丁并改用稳定表头/固定文本锚点 |
|
||||
| 初始误判为 `.agents/skills` | 1 | 用户纠正后改用 `.codex/skills`；错误目录尚未创建 |
|
||||
| planning 状态补丁的 JavaScript 模板字符串被反引号截断 | 1 | 改用字符串拼接并移除嵌套反引号后重试 |
|
||||
| Phase 4 状态补丁再次误用含反引号的模板字符串 | 2 | 停止使用模板字符串，改用字符串数组构造 |
|
||||
| 合并状态补丁依赖了变化中的精确时间戳上下文 | 3 | 拆成逐文件、小上下文补丁后成功同步 |
|
||||
|
||||
## Notes
|
||||
|
||||
- 不修改当前 Wasteland/Gilded 主题视觉实现。
|
||||
- 不删除任何概念图、素材板、切片或提取脚本。
|
||||
- Skill 内容必须能泛化到未来不同美术方向的主题。
|
||||
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 结构、专项/完整回归与两轮独立代码审查组合降级，限制将在最终交付中披露。
|
||||
70
.planning/gilded-wasteland-theme/findings.md
Normal file
70
.planning/gilded-wasteland-theme/findings.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# 调研发现
|
||||
|
||||
## 2026-07-17 初始事实
|
||||
|
||||
- 用户要求直接新建主题用于和现有 Warframe 对比，并授权自行切分图标。
|
||||
- 参考图的核心是右侧暗黑骑士主视觉、黑铁底色、低饱和旧金描边、余烬点缀和尖角/切角装饰。
|
||||
- 附件实际像素高度为 941px（参考、背景、图标板均为 1672×941）；人物位于背景右半区，左半区天然适合作为侧栏与聊天内容的低干扰背景。
|
||||
- 图标板为 1672×941，按 6 列网格提供 16/24/32px 三档图标；应优先切出 32px 版本并在 CSS 中缩放，以保留清晰纹理。
|
||||
- codebase-memory 项目 `home-cc-web` 索引状态为 ready（3429 节点、7841 边）。
|
||||
- 工作区已有 17 项未提交改动，包含 `public/app.js`、`public/style.css`、`public/index.html` 和回归脚本；本任务必须保留这些改动。
|
||||
- 当前 Trellis 指针属于无关任务 `07-11-subagent-card-metadata`；本次已创建独立任务 `07-17-gilded-wasteland-theme`。
|
||||
- 主题入口集中在 `public/app.js`：`normalizeTheme`、`applyTheme`、`buildThemePickerHtml` 和 `mountThemePicker`；选择值写入 `document.documentElement.dataset.theme` 与 `localStorage['cc-web-theme']`。
|
||||
- 当前 Warframe 主题 ID 为 `gilded`，注册项带 `hidden: true`；选择器过滤隐藏主题，`public/index.html` 还会在首屏前把已存 `gilded` 迁移到 `washi`。
|
||||
- 现有回归函数 `assertFrontendGildedThemeContract` 明确断言 Warframe 隐藏和启动迁移，新增主题时需要改成“保留并展示 gilded + 独立 wasteland”的新契约。
|
||||
- 计划审查第一次未通过，原因是主题 ID/迁移边界、附件精确路径和相关脏改动审计没有写清；计划已补齐并将重新审查。
|
||||
- 第二次计划审查已通过；审查建议为资产 manifest 记录裁剪框，并在收口执行 `git diff --check`、主题专项回归和全量回归。
|
||||
- 现有 Warframe 实现全部位于未提交改动中：`app.js` 新增 `gilded` 注册和四图欢迎区；`index.html` 新增启动迁移；`style.css` 新增约 1400 行 Warframe 样式；`regression.js` 新增资产哈希与主题契约断言。
|
||||
- `public/app.js` 同时存在与本主题无关的子代理卡片改动；本任务只能修改 `THEME_OPTIONS`/主题逻辑附近，避免触碰后半文件。
|
||||
- 相关文件审计基线 SHA-256：`app.js`=`8b320e88…`、`index.html`=`126c353c…`、`style.css`=`89e5f4a0…`、`regression.js`=`3d2c2db…`。本任务结束时以精确 diff 区块复核，而不是按整文件还原。
|
||||
- 已有 Warframe 资产位于 `public/assets/themes/` 根目录，包含 `gilded-wasteland.png` 和三张 `warframe-*.jpg`；新主题资产将隔离到 `public/assets/themes/wasteland/` 子目录，避免同名覆盖。
|
||||
- 主题系统是纯前端单源：`THEME_OPTIONS` 驱动设置候选，`applyTheme()` 同步 `html[data-theme]` 与 `localStorage['cc-web-theme']`，因此不需要新增后端接口。
|
||||
- 新主题使用 body 全画布背景而不复用 `gilded` 的四图 welcome 舞台；桌面背景居中，移动端定位到 `70% 50%` 并加深遮罩。
|
||||
- 图标板已得到 6 列×6 行卡片边界和 17 个常用 32px 图标 bbox；输出 64×64 透明 PNG，并使用 manifest 记录坐标与用途。
|
||||
- 具体技术设计已写入 Trellis `info.md`，实现/检查上下文已用两份研究文档和前端规范完成配置。
|
||||
- 背景已原样落到 `public/assets/themes/wasteland/background.webp`，SHA-256 为 `ee52b136294a7a31181b67e209253fefe7ace8c2b76885e45621484fecb802cb`。
|
||||
- 17 枚图标均为 64×64 RGBA，具有透明区和非空金色像素；`status.png` 额外保留 714 个绿色有效像素。人工抽检 new-chat/status/send/settings 边缘干净、尖角完整。
|
||||
- 环境没有 ImageMagick；资产代理使用已存在的 Pillow 10.2.0 完成裁剪、连通域去噪与 0.6px 羽化，未新增依赖。
|
||||
- UI 已实现：`gilded` 恢复可见、`wasteland` 独立注册，首屏迁移移除，cache bust 更新为 `20260717-wasteland-theme`。
|
||||
- `style.css` 新增 Wasteland 变量层、230 处共享暗色 selector 纳入和独立组件层；背景直接挂在 body，`.app/.chat-main/.messages` 透明，侧栏与消息使用分层半透明黑铁面板，因此主视觉不会被页面底色完全遮住。
|
||||
- 六个高频控件已引用真实切图：new chat/search/attachment/send/stop/settings；设置 select 额外使用 dropdown 图标。
|
||||
- 主线程 diff 审核发现 new chat 会同时显示切图与原生 `+`，已退回 UI 代理做最小 span 隔离修复。
|
||||
- 实施期间现有未提交 Warframe welcome 从“四图舞台”变化为单图 `.warframe-hero`，说明相关并行任务仍在写共享文件；本任务不回退该变化，回归代理必须以当前 DOM 为准并避免恢复旧四图断言。
|
||||
- new chat 原生 `+` 已包装成仅在 wasteland 隐藏的装饰 span，其他主题仍显示原符号，新主题只显示切图图标。
|
||||
- 用户反馈文字偏暗后，Wasteland 主/次/弱文字分别提亮为 `#fff7e6`、`#eadfc9`、`#c9bda6`，链接为 `#e2c58d`，行内代码为 `#f6ead2`；在助手/用户/通用面板上的最低对比度仍为 9.49:1。
|
||||
- 一次 `rg` 因模式以 `--target` 开头被当作选项而失败；后续同类命令必须用 `rg --` 结束参数解析。
|
||||
- 外部并行会话一度回写 `gilded.hidden`、启动迁移和旧 cache bust；主线程通过运行会话列表定位到另一个 `定制暗金荒野主题` 会话，并在其写入后精确恢复三处契约，没有覆盖其 Warframe 配色/文案/hero。
|
||||
- `assertFrontendGildedThemeContract` 已按当前单图 `.warframe-hero` 实现收敛；新 `assertFrontendWastelandThemeContract` 覆盖 17 项 manifest/PNG、背景 hash、双主题可见、无迁移、共享暗色 selector、六个真实控件图标、响应式、reduced-motion、cache bust 和纯白主文字对比度。
|
||||
- `gilded-theme` 与 `wasteland-theme` 两个专项回归均已通过；下一阶段由主线程执行全量回归和静态复核。
|
||||
- 外部会话在 17:35:19 第三次回写 `app.js`/`index.html`：恢复 `gilded hidden`、`gilded -> washi` 和旧 cache bust；`style.css` 的 `--text-primary: #fff` 与完整 Wasteland 样式仍完好。
|
||||
- 为避免继续互相覆盖，回归代理按约定停止；当前需要用户先停止另一个运行中的 `定制暗金荒野主题` 会话，之后再补回三处小改动并重新执行专项/全量回归。
|
||||
- 用户明确否定当前视觉：边框、图标和整体质感均不像参考图；此前“阶段 4 完成”的结论失效，必须以截图对照为准返工。
|
||||
- 失败根因不是缺少更多装饰，而是层级方向错了：当前给过多普通控件统一金边/切角/渐变，背景遮罩过重，64×64 彩色图标直接缩小后显得糊且杂。
|
||||
- 当前环境无 Playwright/Chromium，但有 `/usr/bin/firefox`；可创建仅用于规划验收的本地 mock HTML，用 headless Firefox 生成 1672×941 截图，不需要安装依赖或重启 ccweb。
|
||||
- 新准则：面板卡片化减少、边框 1px 暗铜、切角只用于三类核心框架、图标使用用户切图 alpha mask 统一旧金材质，人物右侧清晰完整。
|
||||
- 已建立 `.planning/gilded-wasteland-theme/visual-preview.html` 作为可复用的桌面结构 mock；但 Firefox headless 两种 profile 均无法生成截图，第二次明确报 `RenderCompositorSWGL failed mapping default framebuffer`，且系统无 Xvfb。
|
||||
- 不为截图安装浏览器/驱动；后续视觉判断使用用户参考图的几何比例、现有 CSS 静态审计、图标原图抽检和用户在实时页面的反馈闭环。
|
||||
- 用户补充了当前页与设计稿的五张一对一局部对比图，确认具体错误：新会话误用十字星、附件误加方框、输入区外框断裂且缺少中心徽记、侧栏框线不连续、所有图标误用统一 32px 来源。
|
||||
- 已改为直接从完整设计稿提取透明蚀刻框：`frames/new-chat.png`、`search.png`、`project.png`、`active-session.png`、`composer.png`、`tool-call.png`；其中 composer 保留设计稿底部中心徽记。
|
||||
- 已从图标板重新按 16/24px 逻辑档提取 `icons/ui/`：search/dropdown/theme/ai/status/attachment/send/stop/settings/user/terminal，不再复用统一 64px 大图缩小。
|
||||
- Wasteland 尾部新增高保真覆盖层：新会话恢复简单 `+`，附件无按钮框，右侧操作按钮保留独立切角框；侧栏宽 316px、顶栏 57px、输入框 806×74px；消息回到 8px 轻圆角薄线框，背景遮罩显著减轻。
|
||||
- CSS cache bust 已更新为 `20260717-wasteland-hifi`；本地服务已验证 stylesheet、composer frame、attachment icon 均返回 HTTP 200。
|
||||
- 用户刷新后指出输入框存在明显错位与虚边；实际根因是旧 `.input-wrapper:focus-within` 高优先级 3px 光圈仍生效，同时 composer 素材保留了设计稿外/内两层顶线。
|
||||
- 已对 focus/drag/note 三种输入状态强制清除 border/outline/box-shadow，并把 composer 素材左右对称收紧 5px、上移保留主蚀刻线；中心徽记量测仍为资产几何中心 `x=403/807`，未做错误偏移。
|
||||
- CSS cache bust 已推进为 `20260717-wasteland-hifi-2`，新 CSS 与 composer 资产均通过本地 HTTP 200 校验。
|
||||
- 新会话 `+` 消失是选择器错配：DOM 使用 `.new-chat-glyph`，高保真覆盖却写成不存在的 `.new-chat-native-icon`，同时旧高优先级规则仍将真实 span 隐藏。
|
||||
- 顶部下拉图标切图在小尺寸下近乎透明，改用框内 CSS 三角形更稳定；会话 `…` 偏移与菜单不显示分别来自普通 flex 挤压和 `.session-item { overflow: hidden; }` 裁切，现已固定右侧定位并仅在菜单打开时解除裁切。
|
||||
- 消息头像重叠不是重复消息节点：`createMsgElement()` 内联渲染了 `/codex.png`，高保真 Wasteland 又给同一 `.msg-avatar` 设置了 `ui/ai.png` 背景；主题层必须显式隐藏内部 `img/svg`。
|
||||
- 输入框错层来自非等比缩放：真实内容框高度 74px，但 `::after` 固定显示 807×101 整框；主内容宽缩到约 650px 时只有横向被压缩，底部徽记仍按 101px 高度绘制。现已拆为固定框壳和独立徽记两层，分别响应宽高。
|
||||
- 最新截图底部贯穿整宽的“虚线”不属于 composer 框，而是透明 `.input-area` 继续透出了背景素材底部的暖色横线；输入区需要独立黑铁遮罩，不能完全透明。
|
||||
- 输入区原生铅笔/队列 SVG 与主题切图混用，材质必然不统一；现统一使用图标板的 chat/loading/send/stop，并复用从设计稿实际按钮裁出的 46px 蚀刻框。
|
||||
- 框壳、人工底线、独立徽记的三层方案虽然规避非等比拉伸，但引入新的边线叠加和视觉中心误差；最终改为完整 807×101 资产单层等比缩放。源裁区中心徽记原本向右约 8px，已只平移下半部装饰层，中心主体 alpha 重心为 403.7、画布中心为 403.0。
|
||||
- 右侧停止按钮的“色块”来自 Wasteland 专用棕色渐变叠加 24px stop 图标；现取消实心渐变并回退到透明黑铁底和 20px 细节图标。
|
||||
- 用户最后圈出的独立边框来自 `.note-mode-btn/.send-btn/.abort-btn::after` 继续加载 `composer-action.png`，不是输入框主框；已彻底禁用该伪元素。图标几何居中仍不等于视觉居中，发送图标原 alpha 重心向右约 1.6px，因此资产生成器新增 composer 图标 alpha 重心校正。
|
||||
- 24/30px 输出画布不等于有效图形尺寸：30px note 的实际可见区只有 22×20px。最终 note 使用 36px 画布得到 28×24 可见区，send 为 26×24，AI/用户分别达到 31×32 和 32×32，避免小图标在透明画布中显得缩了一圈。
|
||||
|
||||
## 待确认
|
||||
|
||||
- `THEME_OPTIONS` 完整注册内容及当前未提交差异归属。
|
||||
- Warframe 主题样式的隔离方式与可共享的暗色完成选择器。
|
||||
- 当前测试命令与可用的浏览器视觉验收入口。
|
||||
43
.planning/gilded-wasteland-theme/progress.md
Normal file
43
.planning/gilded-wasteland-theme/progress.md
Normal file
@@ -0,0 +1,43 @@
|
||||
# 进度日志
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
- 已读取 `frontend-skill`、`planning-with-files`、`todo-list-csv` 与 Trellis 工作流。
|
||||
- 已初始化 Trellis 上下文，确认工作区存在其他未提交改动。
|
||||
- 已确认 codebase-memory 索引可用。
|
||||
- 已建立 7 步执行计划、TODO CSV 和本地持久化规划文件。
|
||||
- 计划审查首次发现 `gilded` ID、启动迁移、附件路径与脏改动边界不明确；已补充主题 ID 契约、资产清单与强制差异审计步骤。
|
||||
- 第二轮计划审查已通过；已完成相关脏文件、Warframe 新增区块和资产目录的初步审计，并记录开始实施前的文件哈希。
|
||||
- 阶段 1 完成：确定 `gilded`/`wasteland` 双 ID 契约与最小合并边界；进入任务规格、资产裁剪和实施上下文整理。
|
||||
- 已完成主题架构与资产裁剪研究，形成 `info.md` 技术设计，并配置 Trellis implement/check 上下文。
|
||||
- 阶段 2 完成：任务上下文校验通过（implement 5 条、check 4 条）；进入本地背景和透明图标资产生成。
|
||||
- 阶段 3 完成：背景和 17 枚图标/manifest 已生成，格式、尺寸、alpha、像素内容与背景哈希验证通过；进入主题样式与注册实施。
|
||||
- UI 主实现完成并通过语法/静态检查；主线程正在收口 new chat 图标重复的细节问题，随后进入主题回归契约补充。
|
||||
- 阶段 4 完成：重复加号已修复，用户要求的文字提亮已完成并通过 WCAG 对比度计算；进入 Wasteland/Warframe 当前态回归契约更新。
|
||||
- 阶段 5 完成：当前 Warframe 单图契约与新 Wasteland 完整契约均已落盘，两个主题专项 target 通过；进入全量自动化与 diff 审查。
|
||||
- 全量回归首次运行失败：外部并行会话在专项通过后回写了旧的 `gilded hidden` 回归断言；跨会话消息因目标仍在处理中未送达，当前等待共享写入稳定后做最终合并。
|
||||
- 阻塞确认：外部会话第三次覆盖共享主题契约，已停止反复写入。Wasteland 背景、图标、样式和主文字 `#fff` 均保留；待另一个会话停止后继续最终合并、全量回归与浏览器验收。
|
||||
- 用户视觉验收失败，任务回滚到视觉实现阶段：当前版本未完成。已重定视觉准则，并追加“逐项对照参考图”作为最终独立验收步骤。
|
||||
- 已尝试建立本地 mock 并用 Firefox 截图；因容器图形 framebuffer 不可用且无 Xvfb，停止浏览器截图路线，转为并行视觉/图标审计后直接重构 Wasteland 隔离样式。
|
||||
- 根据用户局部对比图完成第一轮高保真返工：直接接入设计稿真实边框与分规格图标，重做侧栏顶部、选中会话、消息、工具块和输入区；静态检查通过，18 项新资源引用无缺失，服务端实际请求返回 200。当前不标记完成，等待用户刷新后的视觉确认。
|
||||
- 根据最新截图完成输入框第二轮校正：移除遗留焦点虚框，压缩双层外线为单一主蚀刻线，保持中心徽记精确居中；`git diff --check` 与线上静态资源请求验证通过。继续等待实际页面视觉确认。
|
||||
- 根据用户标注修复侧栏控件：`+` 改为实际 DOM 文字符号并恢复显示，下拉改为框内 CSS 三角形；会话操作区改为绝对定位并在展开时解除裁切。cache bust 推进到 `wasteland-hifi-3`，新增四项专项回归断言，Wasteland target 与 diff 检查通过。
|
||||
- 根据新截图修复两处结构错误：荒野头像隐藏内联 `codex.png`，只保留主题 AI 图标；composer 不再把 807×101 整图压到窄容器，新增 807×74 框壳和 547×51 独立徽记，并修正误写的 `.input-mode-row` 为真实 `.chat-controls`。cache bust 推进到 `wasteland-hifi-4`，新增资产尺寸与叠图回归断言，专项 target、语法、diff 和在线 200 校验通过。
|
||||
- 按用户最新圈注继续重做 composer：输入区增加不透明黑铁渐变以遮住背景素材透出的底部假线；底边降亮；从设计稿提取 46×46 操作框；新增 note/chat、queue/loading 两枚 24px 图标，并把 stop 升到 24px，统一替换输入区原生 SVG。cache bust 推进到 `wasteland-hifi-5`，专项回归和 7 项线上资产请求通过。
|
||||
- 第三次 composer 收口：撤销框壳/底线/徽记三层拼接，改为设计稿完整 `composer.png` 单层按 807×101 等比绘制；中心主体实测误差 0.7px；停止按钮取消棕色实心背景并换回更轻的 20px stop 图标。cache bust 推进到 `wasteland-hifi-6`，专项回归、语法、diff 与在线资源校验通过。
|
||||
- 按用户反馈调整消息层：助手/系统气泡底色从 0.66 降到 0.34，用户气泡从 0.62 降到 0.40；磨砂提升为 16px blur + 1.12 saturate，并补 WebKit 前缀。cache bust 推进到 `wasteland-hifi-7`。
|
||||
- 输入区按钮最终清理：移除 `composer-action` 伪元素框，普通态/悬停态强制透明且无 border/box-shadow；点击区收为 40px。note/queue/send/stop 在生成阶段按 alpha 重心自动居中，四枚图标中心误差均小于 0.5px。cache bust 推进到 `wasteland-hifi-8`，专项回归、语法、diff 与在线 CSS 校验通过。
|
||||
- 图标尺寸校正：composer 的 note/queue/send 改用图标板 32px 源，note 单独输出 36px（可见 28×24），send 输出 30px（可见 26×24）；AI/用户头像改用 32px 源并输出/显示 36px，容器增至 42px。cache bust 推进到 `wasteland-hifi-10`，中心误差保持在 0.53px 内，专项回归和 4 项在线资产校验通过。
|
||||
- 消息磨砂第二轮：助手/系统底色降到 0.22，用户气泡降到 0.28，边线同步降亮；backdrop blur 提升到 22px、saturate 1.18。cache bust 推进到 `wasteland-hifi-11`。
|
||||
- 根据实际截图纠正“数值透明但视觉实心”的问题：移除用户气泡棕色染层，用户/助手底色改为中性黑 0.08/0.10；强模糊从 22px 回调到 14px，避免背景被抹成色块。cache bust 推进到 `wasteland-hifi-12`。
|
||||
- 新截图确认实心黑块来自嵌套工具层而非外层气泡：`.tool-call-content.reasoning/command/file-change` 仍被早期高优先级规则设为 0.90。现以同级选择器和 `!important` 将 tool-call/tool-group 降到 0.04，内容层降到 0.035，标题层降到 0.02，并保留 10px 轻磨砂。cache bust 推进到 `wasteland-hifi-13`。
|
||||
- 用户再次明确范围仅为消息气泡背景。已撤销本轮协作卡片层改动，只针对助手/跨会话/系统 `.msg-bubble`：去掉黑色染层，改为 2.2% 中性暖色薄膜，并以 12px blur + 1.28 brightness 让暗背景上的磨砂和透景可辨；cache bust 推进到 `wasteland-hifi-14`，专项回归、语法与 diff 检查通过。
|
||||
- 用户截图确认 hifi-14 视觉仍无变化。通过 Firefox WebDriver 读取计算样式，发现旧规则 `html[data-theme='wasteland'] :is(... .msg.system .msg-bubble[data-tone='info'])` 因 `:is()` 采用最高参数 specificity，仍将助手气泡背景锁在 `rgba(12,15,13,0.88)`；hifi-14 实际只覆盖了 backdrop filter。现仅给消息气泡背景/边线/内高光声明增加 `!important`，浏览器计算值已变为 `rgba(226,214,190,0.022)` 且背景图纹理可穿透；cache bust 推进到 `wasteland-hifi-15`，专项回归、语法、diff 与在线资源检查通过。
|
||||
- 修复侧栏页脚品牌错位：图标资产 alpha 重心正常，根因是设置按钮按 `vertical-align: middle`、品牌 `inline-flex` 按 baseline 排版。浏览器实测原设置按钮中心 `22.93px`、品牌中心 `14px`；页脚改为 flex 双轴居中并将品牌行高收为 1 后，页脚中心 `35.5px`、设置按钮与品牌均为 `36px`。cache bust 推进到 `wasteland-hifi-16`，专项回归、语法、diff 与在线资源检查通过。
|
||||
- 修复多行输入时 composer 框错位：移除固定 `807/101` 高宽比的 `.input-wrapper::before`，把原始 `composer.png` 直接绑定为输入框本体的九宫格 `border-image`（slice `10 10 43 10`，底部 outset `27px`）。顶部/四角保持原图，侧边随真实高度拉伸，底部徽记跟随实际底边；焦点/拖拽/笔记态不再用 `border:0` 破坏 frame。Firefox 实测单行 `74px`、多行 `204px` 均正确，伪元素计算值为 `display:none`。cache bust 推进到 `wasteland-hifi-17`，专项回归、语法、diff 与在线资源检查通过。
|
||||
- 按用户指定将助手/跨会话/系统消息气泡的 `backdrop-filter` 从 `blur(12px)` 降为 `blur(3px)`，保留 `saturate(1.16) brightness(1.28)` 与 WebKit 前缀，使背景细节更清楚。cache bust 推进到 `wasteland-hifi-18`，专项回归、语法、diff 与在线 CSS 检查通过。
|
||||
- 按用户反馈精简侧栏页脚：保留可点击的设置齿轮，隐藏 `CC-Web` 前纯装饰性的主题星标，避免两个金色图标并排产生视觉冲突；原有 flex 垂直居中保持不变。cache bust 推进到 `wasteland-hifi-19`，专项回归、语法、diff 与在线资源检查通过。
|
||||
- 修复协作代理卡顶部轻微错位：Wasteland 外框左上有切角，但 `.collab-agent-header` 原先无内边距且标题 token 按 baseline 排列。现标题行设为 `min-height:24px; padding:4px 8px 0`，`collab-agent-title-wrap` 改为几何居中；Firefox 复刻确认标题避开切角且子卡布局未变化。cache bust 推进到 `wasteland-hifi-20`，专项回归、语法、diff 与在线资源检查通过。
|
||||
- 按用户要求移除 `.input-area` 的独立黑色渐变面板，强制设为 `background: transparent !important`，并保持无阴影、无 backdrop filter；输入框本体及动态 `border-image` 不变。cache bust 推进到 `wasteland-hifi-21`，专项回归、语法、diff 与在线 CSS 检查通过。
|
||||
- 实现新建对话欢迎卡：从用户提供的 RGB 素材板中按金色像素分离 `1095×875` RGBA 主框，排除烘焙棋盘格和下方其他组件；另裁出干净 `600×350` 暗纹理 WebP。静态/动态欢迎 DOM 均新增独立 surface/frame 图层，文字置于安全区并使用 `#fff` 主标题与旧金副标题。Firefox 实测桌面卡片 `614.6×491.1`，底部距输入区约 19px；500px 窄屏卡片 `464×370.8` 且横向溢出为 0。cache bust 推进到 `wasteland-hifi-22` / `theme-bundle-2`，Wasteland 与 Gilded 双主题回归、语法、diff、线上资源 200 检查均通过。
|
||||
- 用户指出欢迎卡位置“不正”：根因是按参考图左侧构图保留了块级起始对齐，浏览器实测卡片中心比聊天画布中心偏左约 147px。现给欢迎 hero 增加 `margin:0 auto`，复测卡片中心 `838.49px`、画布中心 `840.5px`，仅余约 2px 滚动条/像素取整差。cache bust 推进到 `wasteland-hifi-23`，Wasteland/Gilded 双主题回归、语法、diff 与在线版本检查通过。
|
||||
69
.planning/gilded-wasteland-theme/task_plan.md
Normal file
69
.planning/gilded-wasteland-theme/task_plan.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# 新增暗金荒野主题计划
|
||||
|
||||
## 目标
|
||||
|
||||
在不替换现有 Warframe 主题的前提下，新增一个可独立选择、可直接对比的“暗金荒野”主题；使用用户提供的背景图和图标板，保持现有功能与响应式布局完整。
|
||||
|
||||
## 阶段
|
||||
|
||||
1. [COMPLETE] 审计现有 `gilded`/Warframe 未提交实现并建立合并边界
|
||||
2. [COMPLETE] 建立主题任务规格与资产方案
|
||||
3. [COMPLETE] 切分并优化暗金主题图像资产
|
||||
4. [COMPLETE] 新增暗金荒野主题样式与主题注册
|
||||
5. [COMPLETE] 补充主题切换和资源回归测试
|
||||
6. [IN_PROGRESS] 执行静态检查与自动化回归
|
||||
7. [TODO] 启动页面并进行多视口视觉验收
|
||||
8. [TODO] 逐项对照参考图复核构图边框与图标
|
||||
|
||||
## 视觉方向
|
||||
|
||||
- 视觉主张：熄灭后的王庭——背景人物必须清晰完整地固定在右侧；界面是悬浮其上的薄黑铁框架，不是把背景压黑后铺满金边卡片。
|
||||
- 内容计划：以现有应用工作台为主体，依次统一侧栏导航、聊天消息、工具执行块、输入区和设置/弹层，不新增无业务意义的装饰区块。
|
||||
- 交互主张：只保留主题短淡入、旧金线条扫光和按钮 1px 位移；取消余烬粒子与消息逐条入场等抢眼装饰。
|
||||
|
||||
## 视觉返工准则（用户验收失败后追加）
|
||||
|
||||
- 当前版本被用户明确判定为“不像参考图”，不得以自动化通过代替视觉完成。
|
||||
- 边框使用 1px、低饱和暗铜和 6–8px 小切角；只在主按钮、输入框、工具执行块保留框架感，普通消息与列表不再全部 `clip-path`。
|
||||
- 面板以近黑半透明层级为主，取消大面积金色渐变、粗边、重投影和卡片化堆叠。
|
||||
- 图标继续来自用户图标板，但小控件改用 PNG alpha 作为 CSS mask，统一旧金材质和 18/22/28px 三档尺寸，避免当前 64px 彩色切图直接缩到 22px 的糊、脏、比例失衡。
|
||||
- 背景人物必须保持原图清晰度，不加 blur；左侧遮罩和消息面板只保证文字可读，不得覆盖右侧人物主体。
|
||||
- 主文字保持用户指定的 `#fff`。
|
||||
|
||||
## 决策与约束
|
||||
|
||||
- 原 Warframe 保留内部 ID `gilded`，移除其 `hidden` 限制和 `gilded -> washi` 启动迁移，使它重新成为可选主题。
|
||||
- 新主题使用独立内部 ID `wasteland`，显示名“暗金荒野”；不得复用或覆盖 `gilded`。
|
||||
- 主题选择器必须同时展示 `gilded`（Warframe Wasteland）和 `wasteland`（暗金荒野），默认主题仍保持 `washi`。
|
||||
- 图标从用户提供的图标板切分为本地主题资产，不依赖运行时 CSS 裁剪。
|
||||
- 优先新增隔离文件；修改已有脏文件前先核对差异，避免覆盖用户改动。
|
||||
- 不新增前端框架或重量级依赖。
|
||||
|
||||
## 资产清单
|
||||
|
||||
- 完整界面参考：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
|
||||
- 新主题背景源图：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`
|
||||
- 图标板源图：`sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp`
|
||||
- 新建对话欢迎页参考：`sessions/_attachments/33cd7ba3-208a-4d7f-9c53-672fcc22f127.webp`
|
||||
- 新建对话欢迎卡素材板：`sessions/_attachments/2b88b81d-c5a8-4d92-a518-afeea691eade.webp`
|
||||
- 目标背景：`public/assets/themes/wasteland/background.webp`
|
||||
- 目标图标目录：`public/assets/themes/wasteland/icons/`，输出透明 PNG，优先切分 32px 档的 16 个常用图标。
|
||||
- 欢迎卡资产：`public/assets/themes/wasteland/frames/welcome-card.png` 与 `public/assets/themes/wasteland/textures/welcome-card-surface.webp`。
|
||||
- 常用图标范围：新会话、搜索、下拉、主题、AI、在线状态、附件、发送、停止、设置、用户、终端、复制、刷新、聊天、关闭/确认。
|
||||
|
||||
## 脏改动合并边界
|
||||
|
||||
- 实施前分别审计 `public/app.js`、`public/index.html`、`public/style.css`、`scripts/regression.js` 和 `public/assets/themes/` 的未提交差异。
|
||||
- 记录本任务开始前相关文件的差异与资产清单；只追加 `wasteland` 注册、样式和断言，并对恢复 `gilded` 可见性做最小精确修改。
|
||||
- 不重排或格式化现有大文件，不修改与主题无关的区块。
|
||||
|
||||
## 错误记录
|
||||
|
||||
| 错误 | 尝试 | 处理 |
|
||||
|---|---:|---|
|
||||
| `rg` 把以 `--target` 开头的模式误解析为命令参数 | 1 | 后续检索使用 `rg -- '<pattern>'`，不重复原命令 |
|
||||
| 全量回归在专项通过后命中旧 `gilded hidden` 断言 | 1 | 判定为外部运行会话回写 `scripts/regression.js`；等待共享写入稳定后重新合并当前契约 |
|
||||
| 跨会话协调消息返回 `target_running` | 1 | 不重复即时发送；先等待目标会话完成当前处理，再查询状态或采用本地最终合并 |
|
||||
| 外部会话第三次回写 `gilded hidden`、启动迁移和旧 cache bust | 3 | 已满足重复冲突阈值；停止反复覆盖，等待用户停止 `定制暗金荒野主题` 会话后再做最终合并与全量回归 |
|
||||
| 用户视觉验收明确失败：边框、图标、整体质感不像参考图 | 1 | 回滚“实现完成”判断；建立本地可截图 mock，逐项按参考图重做并新增最终对照步骤 |
|
||||
| Headless Firefox 无法输出本地视觉 mock 截图 | 2 | 默认 profile 超时；独立 profile 又因 SWGL framebuffer 映射失败，环境无 Xvfb；停止重复尝试，不安装依赖，改用参考图几何审计 + 用户实时页面反馈 |
|
||||
81
.planning/gilded-wasteland-theme/visual-preview.html
Normal file
81
.planning/gilded-wasteland-theme/visual-preview.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN" data-theme="wasteland">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>暗金荒野视觉验收</title>
|
||||
<link rel="stylesheet" href="../../public/style.css">
|
||||
<style>
|
||||
html, body { width: 100%; height: 100%; overflow: hidden; }
|
||||
#app { display: flex !important; width: 100%; height: 100%; }
|
||||
.messages { overflow: hidden; }
|
||||
.visual-preview-note { color: var(--text-muted); font-size: 12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="app">
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="new-chat-split">
|
||||
<button class="new-chat-btn"><span class="new-chat-native-icon" aria-hidden="true">+</span> 新会话</button>
|
||||
<button class="new-chat-arrow" aria-label="更多">▾</button>
|
||||
</div>
|
||||
<div class="session-search">
|
||||
<input class="session-search-input" value="" placeholder="搜索会话 / 项目">
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-list">
|
||||
<div class="session-project-header"><span class="project-toggle">▾</span><span class="session-project-name">cc-web</span><span class="session-project-count">63</span></div>
|
||||
<div class="session-item active"><span class="session-item-title">重新实现暗金荒野主题</span><span class="session-item-time">运行中</span></div>
|
||||
<div class="session-item"><span class="session-item-title">统一主题卡片规范</span><span class="session-item-time">2小时前</span></div>
|
||||
<div class="session-item"><span class="session-item-title">修复对话结束焦点问题</span><span class="session-item-time">5小时前</span></div>
|
||||
<div class="session-item"><span class="session-item-title">优化快捷指令交互体验</span><span class="session-item-time">1天前</span></div>
|
||||
<div class="session-project-header"><span class="project-toggle">›</span><span class="session-project-name">english</span><span class="session-project-count">8</span></div>
|
||||
<div class="session-project-header"><span class="project-toggle">›</span><span class="session-project-name">ERPTTableHelp</span><span class="session-project-count">20</span></div>
|
||||
</div>
|
||||
<div class="sidebar-footer"><button class="settings-btn" title="设置">⚙</button><span class="brand">暗金荒野</span></div>
|
||||
</aside>
|
||||
|
||||
<main class="chat-main">
|
||||
<header class="chat-header">
|
||||
<div class="chat-title">定制暗金荒野主题</div>
|
||||
<div class="chat-header-actions"><button class="chat-session-id-btn">ID d7692e74</button><span class="chat-cwd">~/home/cc-web</span></div>
|
||||
</header>
|
||||
<div class="messages-wrap">
|
||||
<div class="messages">
|
||||
<div class="msg assistant">
|
||||
<div class="msg-avatar">✦</div>
|
||||
<div class="msg-bubble">
|
||||
<p>明白了，这次走暗金荒野风格，整体要有荒芜、神秘、暗金、科幻骑士的感觉。</p>
|
||||
<p>界面会统一成黑铁面板、细旧金描边和克制的状态绿，背景人物保持在右侧。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="msg user"><div class="msg-bubble"><p>边框和图标要严格贴近参考图，不要只改配色。</p></div></div>
|
||||
<div class="msg assistant">
|
||||
<div class="msg-avatar">✦</div>
|
||||
<div class="msg-bubble">
|
||||
<p>正在生成关键页面与组件，并保留现有功能和响应式布局。</p>
|
||||
<details class="tool-call" open>
|
||||
<summary><span>生成主题页面</span><span class="tool-call-state done">运行成功</span></summary>
|
||||
<div class="tool-call-content command">npm run regression -- --target wasteland-theme</div>
|
||||
</details>
|
||||
<details class="tool-call">
|
||||
<summary><span>检查图标与边框</span><span class="tool-call-state running">运行中</span></summary>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-area">
|
||||
<div class="input-mode-row"><span class="chat-runtime-state">● 运行中</span><button class="mode-select">YOLO</button><span class="visual-preview-note">自定义 · 重载 MCP</span></div>
|
||||
<div class="input-wrapper">
|
||||
<button class="attach-btn" title="上传"><svg width="18" height="18"><path d="M3 9h12" stroke="currentColor"/></svg></button>
|
||||
<textarea id="msg-input" placeholder="输入消息... 输入 / 查看指令"></textarea>
|
||||
<button class="send-btn" title="发送"><svg width="18" height="18"><path d="M2 2l14 7-14 7 3-7z" fill="currentColor"/></svg></button>
|
||||
<button class="abort-btn" title="停止"><svg width="18" height="18"><rect x="3" y="3" width="12" height="12" fill="currentColor"/></svg></button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
64
.planning/runtime-image-send/findings.md
Normal file
64
.planning/runtime-image-send/findings.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# 调研发现：排队与运行中图片发送
|
||||
|
||||
## 用户需求
|
||||
|
||||
- 修复截图中的“排队发送暂不支持图片附件”。
|
||||
- 同时接通 Codex App 运行中 `turn/steer` 图片插入，避免只修表层提示。
|
||||
|
||||
## 已确认事实
|
||||
|
||||
- `queueMessageFromInput` 在 `pendingAttachments.length > 0` 时由前端主动拒绝。
|
||||
- 当前排队项只保存 `id/text/createdAt`，`drainQueuedMessages` 只调用 `submitUserMessage(text)`。
|
||||
- `sendMessage` 的 Codex App `runtimeInsert` 分支在前端主动拒绝附件。
|
||||
- `handleCodexAppSteerMessage` 在后端再次拒绝附件，并调用 `codexAppInputFromMessage(runtimeTextValue, [])`。
|
||||
- 普通 Codex App 新 turn 已通过 `codexAppInputFromMessage` 把附件路径映射为 `localImage`。
|
||||
- 本机 `codex-cli 0.144.1` 生成的 `TurnSteerParams` Schema 中，`input` 为 `UserInput[]`，包含 `localImage`。
|
||||
- 工作树已有其他未提交修改，且 `public/app.js`、`server.js`、`scripts/regression.js` 与本任务重叠，必须使用小范围补丁。
|
||||
- `.planning/.active_plan` 和 `.trellis/.current-task` 指向其他任务，本任务不切换共享指针。
|
||||
- `resolveMessageAttachments` 先调用 `normalizeMessageAttachments`，只接受可由服务端元数据记录解析且文件仍存在的附件；前端无法借附件字段直接注入任意本地路径。
|
||||
- `normalizeMessageAttachments` 会把已过期附件标记为 `expired` 并清理存储；因此排队期间如果跨过附件 TTL，出队时会自然降级为不可用附件，不能保证无限期保留。
|
||||
- `sanitizeMessageForPersist` 已对 `attachments` 统一调用 `normalizeMessageAttachments`，steer 路径应复用同一格式而不是手工构造另一种持久化结构。
|
||||
- 目标代码区域本身未被工作树中的其他改动修改：`server.js` 现有差异仅是静态 MIME 新增 jpg/jpeg；`public/app.js` 的重叠 diff 主要来自主题配置，队列与 steer 逻辑仍是原实现。
|
||||
- `scripts/regression.js` 当前已有大量其他回归新增，Codex App 运行中 steer 用例位于现有综合回归中；新增断言必须就地追加，不能重排或覆盖这些改动。
|
||||
- mock app-server 的 `textFromInput` 已把 `localImage` 渲染成 `[image:<basename>]`，可用现有 `text_delta` 直接验证 steer 图片确实进入协议输入，无需新增 mock 观测通道。
|
||||
- 队列卡片目前只展示文本；图片接通后至少应展示附件数量/文件名，避免用户无法确认排队项是否仍带图。
|
||||
- 队列删除目前只移除内存项；图片接通后应主动删除该队列独占的上传记录，避免留下直到 TTL 才清理的孤儿附件。
|
||||
- 排队编辑是卡片内只改文本，附件可以原样保留；无需把附件搬回 composer。
|
||||
- 普通发送支持“只有图片、没有文本”，而现有队列校验强制文本非空。为保持语义一致，队列校验应改为“文本或附件至少一个”，但 slash 限制仍只检查非空文本。
|
||||
- `handleMessage` 已在分派到 steer 之前解析 `resolvedAttachments` 并生成安全的 `savedAttachments`；最小后端改法是把两者通过 `options` 传入 `handleCodexAppSteerMessage`，避免重复解析与格式漂移。
|
||||
- steer 可支持纯图片：只要 `codexAppInputFromMessage('', resolvedAttachments)` 返回非空输入即可；提示文案需要在无文本时回退为图片文件名。
|
||||
- stale turn 恢复调用 `handleCodexAppMessage` 时应传 `resolvedAttachments`，这样 replacement turn 与原 steer 使用同一批已校验路径。
|
||||
- 回归脚本已有 `--target` 机制和独立 stale-running 测试服务器。可新增 `runtime-image-send` 目标，复用该服务器同时覆盖成功 steer、stale fallback 与静态前端队列契约，避免每次运行完整回归超过测试时间预算。
|
||||
- `uploadAttachment` 已返回前端同形态附件记录；mock 会把服务端解析后的本地图片路径显示在输出中，可同时断言协议输入和持久化的原始文件名。
|
||||
- mock 的图片 marker 来自服务端存储 basename（附件 ID + 扩展名），不是用户原始文件名；动态协议断言使用 ID marker，历史持久化断言仍使用原始 filename，分别验证两层契约。
|
||||
- 前端队列实现已审阅：附件快照只在入队时复制，正常出队不触发上传删除；只有明确删除队列项时才调用 `deleteUploadedAttachment`。
|
||||
- 纯图片队列在卡片内编辑时也把原附件传给校验函数，因此清空文本后仍可保存；slash 文本限制保持不变。
|
||||
- 队列卡片复用 `renderAttachmentPreviews`，该函数会转义附件字段并通过服务端附件 ID 加载预览，不引入新的 HTML 注入面。
|
||||
- 定向动态回归暴露了现有竞态：`activeCodexAppTurns` 已存在、UI 已显示 running 时，`entry.turnId` 可能尚未由 `turn/start` 响应填充。steer 现在发送 pending 后最多等待 2 秒，每 50ms 检查一次，并在 entry 被替换/结束时停止。
|
||||
- steer 持久化前重新 `loadSession`，避免 `startCodexAppTurn` 后续保存它持有的旧 session 快照时覆盖刚持久化的插入消息；该处理也保护纯文本 steer。
|
||||
- 会话历史仍只保存去 path 的 `savedAttachments`；`localImage.path` 仅使用 `resolvedAttachments`，stale replacement 复用同一安全对象。
|
||||
- 独立审查发现失效附件的 active steer 之前会在通用 `handleMessage` 校验处提前返回，前端只收到普通 error，已创建的 steer 气泡收不到 `failed` 状态。现在 active turn 先分派到 steer handler，由其统一发送带 `clientMessageId` 的 failed status/error，且失败输入不持久化。
|
||||
- 审查修复后保持普通消息原语义：只有 active steer 会在通用附件/空消息校验前分派；普通消息仍先校验，再取消容量重试，失效附件不会意外取消既有 retry。
|
||||
- stale completion 通过用户消息的精确 `timestamp + content` 把旧 assistant 输出插到该消息之前；附件不会改变定位键，因此在持久化消息附件后仍能保持顺序且不重复用户消息。
|
||||
- Trellis 前后端质量规范目前仍是占位模板，唯一有实质约束的是跨层数据流指南；本任务应以现有代码契约、项目 AGENTS 规则和回归测试为准。
|
||||
- `.codex/agents` 下没有预期的 Trellis 自定义代理定义，后续实现/检查代理必须在任务提示中显式要求读取 PRD、研究和相关规范。
|
||||
|
||||
## 技术决策
|
||||
|
||||
| 决策 | 原因 |
|
||||
|------|------|
|
||||
| 队列项保存附件元数据快照 | 出队发送需要保留用户当时选择的附件，不能依赖全局 composer 状态 |
|
||||
| 后端仍重新解析附件记录 | 防止前端直接注入本地路径，保持既有上传安全边界 |
|
||||
| steer 持久化与请求使用同一份已解析附件 | 避免历史显示与模型实际输入不一致 |
|
||||
| stale fallback 复用已解析附件 | 旧 turn 刚结束时自动新开一轮也不能丢图 |
|
||||
|
||||
## 相关资源
|
||||
|
||||
- `public/app.js`：队列、composer、运行中插入。
|
||||
- `server.js`：附件解析、会话持久化、Codex App turn/steer。
|
||||
- `scripts/mock-codex-app-server.js`：app-server 请求模拟。
|
||||
- `scripts/regression.js`：WebSocket 与 Codex App 回归测试。
|
||||
|
||||
## 截图信息
|
||||
|
||||
- 会话处于“运行中”，composer 已选择一张 PNG；发送时 toast 提示“排队发送暂不支持图片附件，请先移除图片”。
|
||||
116
.planning/runtime-image-send/progress.md
Normal file
116
.planning/runtime-image-send/progress.md
Normal file
@@ -0,0 +1,116 @@
|
||||
# 进度记录：排队与运行中图片发送
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
### 阶段 1：核对附件生命周期与现有改动边界
|
||||
|
||||
- **状态：** complete
|
||||
- 已完成：
|
||||
- 读取 `planning-with-files`、`todo-list-csv` 与 Trellis 工作流。
|
||||
- 运行 session catchup 并检查工作树，确认存在其他活跃任务及重叠文件改动。
|
||||
- 使用 `codebase-memory-mcp` 定位队列、普通发送、steer 和 Codex App 输入构造函数。
|
||||
- 使用本机 Codex 0.144.1 Schema 验证 `turn/steer` 协议接受 `localImage`。
|
||||
- 确认 `resolveMessageAttachments` 提供服务端元数据解析、文件存在性和过期校验，可直接复用于 steer。
|
||||
- 确认会话持久化已有统一的 `attachments` 归一化入口。
|
||||
- 核对目标函数所在 diff，确认可做局部补丁且不会覆盖当前主题与回归改动。
|
||||
- 确认 mock 已能把 `localImage` 反映到 steer 输出，测试可直接断言图片文件名。
|
||||
- 已创建：
|
||||
- `.planning/runtime-image-send/task_plan.md`
|
||||
- `.planning/runtime-image-send/findings.md`
|
||||
- `.planning/runtime-image-send/progress.md`
|
||||
- `.trellis/tasks/07-17-runtime-image-send/` 下的 PRD、技术设计、研究和代理上下文
|
||||
|
||||
### 阶段 2：补充失败回归测试
|
||||
|
||||
- **状态：** complete
|
||||
- 已完成：
|
||||
- 新增 `runtime-image-send` 定向回归目标。
|
||||
- 覆盖前端队列附件契约、成功 steer 图片、stale fallback 图片与历史持久化。
|
||||
- 审阅并修正 mock 图片 marker：协议断言使用服务端附件 ID，历史断言保留原始文件名。
|
||||
|
||||
### 阶段 3：运行目标回归确认失败
|
||||
|
||||
- **状态：** complete
|
||||
- 已执行：
|
||||
- `timeout 60s node scripts/regression.js --target runtime-image-send`
|
||||
- 结果：3.8 秒退出，状态码 1；active steer、stale replacement、前端队列契约均按预期失败。
|
||||
|
||||
### 阶段 4：实现前端附件传递
|
||||
|
||||
- **状态：** complete
|
||||
- 已实现：
|
||||
- 队列附件快照、纯图片校验、摘要、删除清理与出队发送。
|
||||
- 运行中插入附件气泡、WebSocket 发送和 composer 清空。
|
||||
- 卡片编辑保留附件，正常出队不误删上传记录。
|
||||
- 阶段验证：
|
||||
- `node --check public/app.js` 通过。
|
||||
- 定向回归中的前端静态契约已通过，剩余失败均为后端。
|
||||
|
||||
### 阶段 5：实现后端 steer 附件链路
|
||||
|
||||
- **状态：** complete
|
||||
- 已实现：
|
||||
- `handleMessage` 向 steer 传递已解析附件和去 path 的持久化附件。
|
||||
- active steer、纯图片、历史保存和 stale replacement 复用附件。
|
||||
- 最多等待 2 秒获取 ready turn，并在持久化前重载最新 session，修复两个竞态。
|
||||
- 阶段验证：
|
||||
- `node --check server.js` 通过。
|
||||
- 代理运行定向回归已通过。
|
||||
|
||||
### 阶段 6：运行目标回归和静态检查
|
||||
|
||||
- **状态：** complete
|
||||
- 已通过：
|
||||
- `node --check public/app.js`
|
||||
- `node --check server.js`
|
||||
- `node --check scripts/regression.js`
|
||||
- `timeout 60s node scripts/regression.js --target runtime-image-send`（4.9 秒）
|
||||
- `timeout 60s node scripts/regression.js --target codexapp-stale-running`（2.9 秒）
|
||||
- 已通过：
|
||||
- `timeout 60s node scripts/regression.js`（完整回归）。
|
||||
|
||||
### 阶段 7：审查差异并修正问题
|
||||
|
||||
- **状态：** complete
|
||||
- 已完成审查：
|
||||
- 修复 active steer 失效附件只返回普通 error、用户气泡停在 pending 的问题。
|
||||
- error/status 现在带 sessionId/clientMessageId，失败输入不持久化。
|
||||
- 恢复普通消息“校验通过后才取消容量重试”的原有顺序，避免无关语义变化。
|
||||
- 主代理复验：
|
||||
- 三个修改文件的 `node --check` 通过。
|
||||
- `runtime-image-send` 定向回归通过。
|
||||
- 完整回归通过。
|
||||
|
||||
### 阶段 8：检查会话状态并安全重启服务
|
||||
|
||||
- **状态：** in_progress
|
||||
- 待执行：
|
||||
- 查询当前会话列表并排除本对话。
|
||||
- 无其他 running 会话时重启并健康检查；否则暂缓。
|
||||
|
||||
## 测试结果
|
||||
|
||||
| 测试 | 预期 | 实际 | 状态 |
|
||||
|------|------|------|------|
|
||||
| 尚未执行 | - | - | 待执行 |
|
||||
| 定向回归红灯 | `--target runtime-image-send` | 三类缺口失败 | 三类缺口失败，3.8 秒 | ✓ |
|
||||
| 定向回归绿灯 | `--target runtime-image-send` | 通过 | 通过，4.9 秒 | ✓ |
|
||||
| stale-running 回归 | `--target codexapp-stale-running` | 通过 | 通过，2.9 秒 | ✓ |
|
||||
| JavaScript 语法 | 三个修改文件 `node --check` | 通过 | 全部通过 | ✓ |
|
||||
| 完整回归 | `timeout 60s node scripts/regression.js` | 通过 | Regression checks passed | ✓ |
|
||||
|
||||
## 错误日志
|
||||
|
||||
| 时间 | 错误 | 次数 | 处理 |
|
||||
|------|------|------|------|
|
||||
| 2026-07-17 | Trellis 自定义代理 TOML 路径不存在 | 1 | 改用标准协作代理并显式传递任务文件与规范路径 |
|
||||
|
||||
## 5 问恢复检查
|
||||
|
||||
| 问题 | 回答 |
|
||||
|------|------|
|
||||
| 当前在哪？ | 阶段 8，检查会话并安全重启 |
|
||||
| 接下来去哪？ | 先补失败回归，再做前后端最小实现 |
|
||||
| 目标是什么？ | 排队与运行中插入均支持图片附件 |
|
||||
| 已掌握什么？ | 见 `findings.md` |
|
||||
| 已完成什么？ | 见上方进度记录 |
|
||||
90
.planning/runtime-image-send/task_plan.md
Normal file
90
.planning/runtime-image-send/task_plan.md
Normal file
@@ -0,0 +1,90 @@
|
||||
# 任务计划：修复排队与运行中图片发送
|
||||
|
||||
## 目标
|
||||
|
||||
让图片附件能够随排队消息发送，并能够通过 Codex App 的 `turn/steer` 在运行中插入；附件在会话记录、失败回退和界面状态中保持一致，且不破坏现有纯文本路径。
|
||||
|
||||
## 当前阶段
|
||||
|
||||
阶段 8：检查会话状态并安全重启服务。
|
||||
|
||||
## 阶段
|
||||
|
||||
### 阶段 1：核对当前附件生命周期与现有改动边界
|
||||
|
||||
- [x] 梳理上传附件从前端到后端解析、持久化和 Codex App 输入的路径。
|
||||
- [x] 核对工作树中重叠文件的既有改动，避免覆盖其他会话内容。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 2：补充排队图片和运行中插入图片的失败回归测试
|
||||
|
||||
- [x] 覆盖队列保存并发送附件。
|
||||
- [x] 覆盖运行中 `turn/steer` 接收 `localImage`。
|
||||
- [x] 覆盖 stale turn 回退为新 turn 时保留附件。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 3：运行目标回归确认测试失败
|
||||
|
||||
- [x] 只运行相关回归，确认测试能捕获当前缺陷。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 4：实现前端队列和运行中插入附件传递
|
||||
|
||||
- [x] 队列项保存附件快照并在出队时传给普通发送路径。
|
||||
- [x] 运行中插入消息携带附件并正确清空 composer。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 5：实现后端 turn/steer 附件解析持久化与回退
|
||||
|
||||
- [x] 复用现有附件解析与安全校验。
|
||||
- [x] 持久化运行中插入消息的附件元数据。
|
||||
- [x] `turn/steer` 和 stale turn 新轮回退均传递 `localImage`。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 6：运行目标回归和静态检查
|
||||
|
||||
- [x] 运行相关回归、语法检查和项目级快速验证。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 7：审查差异并修正问题
|
||||
|
||||
- [x] 检查规范、跨层一致性、附件生命周期和用户既有改动保护。
|
||||
- [x] 修正审查发现并重新验证。
|
||||
- **状态：** complete
|
||||
|
||||
### 阶段 8：检查会话状态并安全重启服务
|
||||
|
||||
- [ ] 查询除当前对话外的运行中会话。
|
||||
- [ ] 仅在无其他运行中会话时重启 `ccweb` 并做健康检查。
|
||||
- **状态：** in_progress
|
||||
|
||||
## 关键问题
|
||||
|
||||
1. 队列延迟期间附件记录是否仍能被后端安全解析？
|
||||
2. `turn/steer` 失败转新 turn 时如何避免附件丢失或重复持久化？
|
||||
3. 当前回归框架如何断言 `localImage` 已进入 app-server 请求？
|
||||
|
||||
## 决策记录
|
||||
|
||||
| 决策 | 原因 |
|
||||
|------|------|
|
||||
| 使用现有附件上传记录和 `codexAppInputFromMessage` | 避免引入第二套附件格式与安全边界 |
|
||||
| 不切换共享 `.planning/.active_plan` 与 `.trellis/.current-task` | 当前工作树存在其他活跃任务，避免跨会话干扰 |
|
||||
| 先补失败回归再实现 | 同时覆盖队列、steer 与 stale fallback 三条容易丢附件的路径 |
|
||||
| 队列允许纯图片并显示附件摘要 | 与普通消息能力一致，同时让用户可验证图片仍在队列中 |
|
||||
| 删除未发送队列项时清理其上传附件 | 避免无主附件占用存储直到 TTL 到期 |
|
||||
| 新增 `runtime-image-send` 定向回归目标 | 在 60 秒预算内覆盖前端契约、成功 steer 与 stale fallback |
|
||||
| steer 最多等待 2 秒获取 ready turn | 前端 running 状态可能早于 app-server 返回 turnId，短等待避免图片/文本插入竞态误失败 |
|
||||
| steer 持久化前重新加载 session | 避免启动 turn 仍持有的旧 session 快照覆盖刚插入的用户附件消息 |
|
||||
|
||||
## 错误记录
|
||||
|
||||
| 错误 | 次数 | 处理 |
|
||||
|------|------|------|
|
||||
| `.codex/agents/trellis-implement.toml` 与 `trellis-check.toml` 不存在 | 1 | 项目仅将这些代理定义为可选；改用标准协作子代理并在提示中显式注入任务、规范和边界 |
|
||||
|
||||
## 范围边界
|
||||
|
||||
- 只支持现有图片附件类型，不扩展任意文件附件。
|
||||
- 不改变纯文本排队、slash 指令和笔记模式的既有语义。
|
||||
- 不覆盖工作树中与本任务无关的主题、样式和其他功能改动。
|
||||
@@ -42,3 +42,8 @@
|
||||
- 第二轮已改为子状态优先聚合整体状态、runtime 活动输入结构化合并、agentPath 仅提供标题、activity 匹配必须存在 threadId；新增边界回归均通过，等待原检查代理复核。
|
||||
- 原检查代理复核时把 `item/completed` 误等同于 child completed；真实会话反证是 `input.kind=started` 的活动工具本身 `done=true`，因此 transport item 生命周期不能覆盖 activity kind 的 child 生命周期语义。
|
||||
- 正确契约：completed 通知缺少新 kind 时继承 previous activity kind/status；只有活动 kind 明确为 completed/returned/failed/closed 时才改变 child 终态，同时仍保留 started prompt。
|
||||
- 用户明确要求所有子代理统一成完整标题+简介卡片。上游 raw activity 无法追回真实 prompt，因此展示层需以 agentPath/task name 生成可读标题和明确标注的兜底简介，真实 prompt 仍保持最高优先级。
|
||||
- 富卡片独立复核发现 `collabAgentStateEntries` 会重新推断并覆盖 `hasReadableSourceTitle:false`，导致 prompt 派生的 snake_case 标题被误翻译；该标记必须贯穿 merge、entry 与 render。
|
||||
- 最终实现只美化协议/agentPath 来源的自动任务名；prompt 派生标题的 `hasReadableSourceTitle:false` 会贯穿 merge→entry→render，不被误翻译。
|
||||
- 最终 HTTP `app.js` 与源码 SHA-256 均为 `0b3a14a543fa819837eb4d1bf007aa4929d52844af8624696d5f74afe8b7891e`，响应为 `Cache-Control: no-store, max-age=0`，刷新页面即可加载，无需为纯静态改动中断其他运行对话。
|
||||
- 最终 baseline tar SHA-256 为 `c85202fa3ee989689aef3821b6860b1a356267180aa79858140849599f8504d4`，MCP initialize smoke test 成功。
|
||||
|
||||
@@ -35,3 +35,8 @@
|
||||
- 2026-07-16：对复核提出的“item/completed 强制 child completed”意见基于真实 done=true started 活动提出异议；补充协议语义回归后再复核。
|
||||
- 2026-07-16：原 Trellis 检查代理撤回错误意见并最终通过；字段归一与统一渲染完成，进入全量回归。
|
||||
- 2026-07-16：完整 `npm run regression`、服务端/mock 语法和全工作树 diff 检查通过；在 /tmp 安装 baseline Bun，进入发布构建。
|
||||
- 2026-07-17：baseline 发布包、静态资源哈希与 MCP smoke test 已通过；用户进一步要求无 prompt 卡片也统一显示标题和简介，追加展示兜底阶段。
|
||||
- 2026-07-17：标题+兜底简介定向回归通过，但独立复核发现 prompt 派生标题来源标记丢失，进入最小修正循环。
|
||||
- 2026-07-17：修复标题来源标记并通过原检查代理复核；无 prompt 富卡片完成，进入最终全量回归与重建。
|
||||
- 2026-07-17：最终完整 regression、语法与 diff 检查通过；baseline 发布包重建，源码/发布目录/tar 静态资源哈希一致，MCP smoke 通过。
|
||||
- 2026-07-17：因“定制暗金荒野主题”对话仍在运行未重启 PM2；HTTP 已直接返回最新 app.js 且 no-store，本任务完成。
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
## 当前阶段
|
||||
|
||||
Phase 8
|
||||
已完成
|
||||
|
||||
## 阶段
|
||||
|
||||
@@ -60,15 +60,17 @@ Phase 8
|
||||
- [x] 实现 agentThreadId agentPath 状态及 prompt 字段归一
|
||||
- [x] 合并活动与协作工具并隐藏原始工具条及 call ID
|
||||
- [x] 运行语法检查和完整自动化回归
|
||||
- [ ] 重建 CentOS 7 发布包并完成二进制与 tar 核验
|
||||
- **Status:** in_progress
|
||||
- [x] 重建 CentOS 7 发布包并完成二进制与 tar 核验
|
||||
- [x] 为无 prompt 子代理生成可读标题与兜底简介
|
||||
- [x] 重新回归并重建最终发布包
|
||||
- **Status:** complete
|
||||
|
||||
## 完成标准
|
||||
|
||||
- 按 `label → title → nickname → name` 选择第一个非通用、非线程 ID 的协议标题。
|
||||
- 仅有线程 ID 或 `子代理` / `子代理 N` 等通用名称时，从该子代理自己的任务提示词生成稳定标题。
|
||||
- 每个子代理保留自己的简介，多子代理合并不会共用第一个提示词。
|
||||
- 无 prompt 时回退为短线程 ID，空字段不会导致异常。
|
||||
- 无 prompt 但有 agentPath/task name 时生成可读标题和明确的兜底简介；两者都没有时才回退短线程 ID。
|
||||
- 简介最多显示两行，完整简介挂在简介 DOM 的悬浮提示；运行结果保留在卡片容器的独立悬浮详情，两者不互相覆盖。
|
||||
- 现有状态、关闭、复制线程 ID 功能不回退。
|
||||
- 窄屏下标题、状态和关闭按钮不横向溢出。
|
||||
@@ -84,9 +86,10 @@ Phase 8
|
||||
6. 仅有 `subAgentActivity` 与空 `wait` 的历史会话也显示统一富卡片，不再显示原始活动工具条或 `ID call_...`。
|
||||
7. `agentThreadId` 写入 `receiverThreadIds` 并作为 `agentsStates` 键；`agentPath` 的 basename 写入可读标题/角色。
|
||||
8. `started/interacted` 映射为运行态，`completed/returned` 映射为完成态，失败/关闭类活动映射到对应终态。
|
||||
9. 活动或同线程事件能提供 prompt 时写入 `taskDescription`；完全没有 prompt 时不伪造简介。
|
||||
9. 活动或同线程事件能提供 prompt 时写入 `taskDescription`；完全没有 prompt 时显示明确标注的兜底任务说明，不冒充真实 prompt。
|
||||
10. 回归分别覆盖完整 `spawnAgent`、仅 `subAgentActivity + 空 wait`、刷新历史、原始工具条去重、无 `ID call_...` 与 prompt 保留。
|
||||
11. 发布包保持 `bun-linux-x64-baseline` 目标，完成 MCP JSON-RPC 初始化 smoke test，并核对 tarball 内运行文件与静态资源。
|
||||
12. 无 prompt 的 `subAgentActivity` 也必须使用与完整 spawnAgent 相同的标题+简介卡片结构，不再显示裸 snake_case 名称。
|
||||
|
||||
## 范围约束
|
||||
|
||||
@@ -116,3 +119,6 @@ Phase 8
|
||||
| Phase 8 首次计划审查发现字段、去重和发布核验契约不够具体 | 1 | 补充字段级映射、逐项行为断言与 CentOS 7 二进制/tar 验证标准后复审 |
|
||||
| 首轮实现通过定向回归但独立检查发现空 wait 状态冲突与 completed 丢 prompt | 1 | 补充四类边界行为断言，改为子状态聚合整体状态并结构化合并 runtime 活动输入 |
|
||||
| `timeout` 后直接放环境变量导致命令被当成可执行文件 | 1 | 改用 npm `--registry` 单次参数，代理查询与临时 Bun 安装成功 |
|
||||
| 临时 TODO CSV 被外部流程移除 | 1 | 按现有计划状态重建 CSV，并追加新的展示兜底与最终重建步骤 |
|
||||
| 富卡片首轮复核发现 prompt 派生自动名被误翻译 | 1 | 在状态条目归一时保留显式标题来源标记，并补真实 merge→render 回归 |
|
||||
| 最终重启前发现另一个对话仍在运行 | 1 | 按项目规则不重启；确认静态 app.js 由磁盘直接提供且 HTTP 哈希一致、Cache-Control 为 no-store |
|
||||
|
||||
79
.planning/warframe-rich-theme/findings.md
Normal file
79
.planning/warframe-rich-theme/findings.md
Normal file
@@ -0,0 +1,79 @@
|
||||
# Warframe 饱满主题发现
|
||||
|
||||
## 用户参考主题的共同规律
|
||||
|
||||
- 主视觉是经过抠图/扩景后融入横幅的单一角色场景，不是矩形海报或多图拼贴。
|
||||
- 侧栏、标题、装饰、功能入口和输入区重复同一套图形母题，主题覆盖整页而非只覆盖空状态。
|
||||
- 页面“饱满”来自有用信息、插画细节和边角装饰共同填充空间，不是增加无意义卡片。
|
||||
- 输入区始终是最明显的行动终点；参考图中的功能入口只用于判断页面密度，不复制到 cc-web。
|
||||
- 色彩通常只有一个主色系和一个强调色，丰富度来自材质、插画和层级，不来自多色竞争。
|
||||
|
||||
## 本轮 Warframe 对应方式
|
||||
|
||||
- 原始荒野角色作为唯一主角；使用扩图生成横向场景，左侧保留稳定文字区，角色位于右侧。
|
||||
- The Sacrifice 只贡献暗青黑材质与纵向暗金纹样；冷蓝近景只贡献能量青边光；赤红群像
|
||||
只贡献低面积夕阳橙，不把三张参考海报直接摆进欢迎页。
|
||||
- 侧栏与输入区使用同一套 Orokin 圆弧、细金属线和少量能量青；聊天区只保留这些母题的
|
||||
低强度版本，优先保证阅读。
|
||||
- 用户明确要求主题不能改动交互或输入内容；不得实现快捷入口、预设提示词或点击填充逻辑。
|
||||
|
||||
## 三张参考截图的空间规律
|
||||
|
||||
- 主内容区首屏几乎没有无职责空白：横向主视觉约占内容宽度 100%、高度 38%–48%，其下
|
||||
立即衔接 3–4 个功能入口，底部是宽输入区。
|
||||
- 角色不是放在独立图片框里，而是经过扩景或抠图后与横幅背景融合，轮廓会越过背景纹样，
|
||||
但不会压住左侧标题安全区。
|
||||
- 侧栏信息密度约占全页 20%：品牌、主动作、分组、项目/任务、底部状态都有清晰层级；
|
||||
饱满感的一部分来自真实导航内容，而不是纯装饰。
|
||||
- 每套皮肤都重复一个小型图形词汇：ENFP 的手绘闪电/星星、财神的云纹/金币、千玺的
|
||||
折纸/植物线稿；这些母题同时出现在横幅、功能入口、输入区和边角。
|
||||
- 本轮对应母题限定为 Orokin 弧线、暗金日轮、冷青能量节点和少量焦土叶片，避免再次
|
||||
依赖通用科幻切角制造主题感。
|
||||
|
||||
## Warframe 源图生成约束
|
||||
|
||||
- 主图的有效身份是黑金角色、向左飘动的披风、右手武器和焦土橙荒野；原画四角孔洞与
|
||||
锈蚀海报边框属于载体，不应被扩图复制到横幅中。
|
||||
- 横幅需要把主角移到右侧约 58%–82% 区域，完整保留头部、胸甲、披风和武器；左侧约
|
||||
38% 必须扩展为低细节的暗色天空/荒地，作为 HTML 文案安全区。
|
||||
- Sacrifice 图的价值是暗青黑金材质、日轮/中轴和精密雕纹；其底部 `WARFRAME` 文字与
|
||||
群像角色都不能进入生成结果。
|
||||
- 冷蓝近景只提供轮廓边缘的冷青能量光，赤红群像只提供远处低面积落日橙；禁止生成
|
||||
额外人物、海报标题、UI 面板或多图分区。
|
||||
|
||||
## 工具降级后的主视觉方法
|
||||
|
||||
- 三条 GPT Image CLI 获取路径均失败，当前会话也没有 built-in `image_gen`；不再把生成工具
|
||||
作为交付前置条件，也不伪造生成资产。
|
||||
- 原图的暖灰天空本身具有稳定负空间，可通过右侧裁切、边缘 mask 与同色背景扩展形成横幅；
|
||||
这属于重新构图而不是把整张海报放进矩形框。
|
||||
- 其他三张画作只保留在素材目录，不进入 DOM；从根源上避免风格冲突和多海报拼贴。
|
||||
|
||||
## 色彩方向修正
|
||||
|
||||
- 三张完成度参考都是明亮暖色整页皮肤，原始 Warframe 图同样以旧纸灰、沙金、焦土橙和
|
||||
深炭角色为主；上一版大面积黑色既制造空洞，也违背图片本身。
|
||||
- 新主题改为暖象牙/旧纸灰主表面、深炭文字、暗金/焦土铜骨架，冷青只用于小面积能量节点；
|
||||
丰富度来自图片、纹样、原有功能层级和侧栏内容，而不是深色渐变、发光或新增功能。
|
||||
|
||||
## 纯视觉版首轮截图结论
|
||||
|
||||
- 1440×900 首轮中主标题、说明、侧栏和输入区对比清晰，原图已通过左侧渐隐与纸张纹样融入，
|
||||
不再是四图拼贴或独立海报卡片。
|
||||
- Hero 仍偏矮，主工作区上下各留下较多空白；需要把桌面横幅由约 2.4:1 调整到约 2.1:1，
|
||||
让主视觉承担更多首屏面积，但不增加任何功能模块。
|
||||
- 当前裁切切掉了角色头部尖端；源图头部位于上方约 8%–20%，应提高 `object-position` 并取消
|
||||
负向顶部偏移，在保留角色身份的同时继续裁掉原画四角孔洞与锈蚀边框。
|
||||
- 移动端文案动画曾因 `forwards/both` 保留 `translateY(-50%)`；已在 768px 以下禁用该动画，
|
||||
确保首帧和结束帧都不会把文字移出安全区。
|
||||
- 390×844 首轮发现主题桌面规则把 `.sidebar` 重新设为 `position: relative`，其选择器优先级
|
||||
高于基础移动端的 `position: fixed`，导致隐藏后的侧栏仍占 280px 布局宽度；已在 gilded 的
|
||||
768px 媒体查询中显式恢复 `position: fixed`，这是生产样式问题而非预览夹具问题。
|
||||
- 1024×768 修复后截图中侧栏、主视觉、标题与输入区完整且无横向裁切，人物头部和武器身份
|
||||
清楚；整页控件统一性通过。
|
||||
- 390×844 修复侧栏后宽度正常，但 274px Hero 下方留下约半屏空白；移动画幅应使用
|
||||
`clamp(..., 52svh, 430px)` 随可用高度增长，以原图纵向优势填充首屏，不新增内容。
|
||||
- 390×844 最终串行截图中 Hero 为 430px，高度、人物与原有文案都完整，输入区仍固定可见；
|
||||
独立 profile 截图曾出现透明黑块，但默认 profile 串行重拍完全正常，确认不是页面样式缺陷。
|
||||
- 1440×900 终稿中 2.1:1 Hero 与侧栏/输入区共同填满首屏，角色头冠、胸甲、披风和武器清楚，
|
||||
原图孔洞与锈边未进入画面；左侧纸纹安全区和右侧人物通过渐隐连续衔接，正文对比清晰。
|
||||
61
.planning/warframe-rich-theme/progress.md
Normal file
61
.planning/warframe-rich-theme/progress.md
Normal file
@@ -0,0 +1,61 @@
|
||||
# Warframe 饱满主题进展
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
- 已接收用户允许再重做一版，并将三张高完成度 Codex 主题作为新的验收标尺。
|
||||
- 已读取 `frontend-skill`、`gpt-image`、`planning-with-files`、`todo-list-csv` 及 GPT Image
|
||||
Gaming/Edit Gallery 与完整 prompt craft 参考。
|
||||
- 已结束并清理上一版临时 CSV；新版本从单一主视觉、真实快捷入口和全页面主题语言重新规划。
|
||||
- 已用原图查看三张参考主题：冻结“全宽横向主视觉 + 真实快捷入口 + 宽输入区 + 侧栏密度”
|
||||
的首屏结构，并把重复装饰母题限定为 Orokin 弧线、日轮、能量节点和焦土叶片。
|
||||
- 已重新查看四张 Warframe 原始素材并冻结生成约束：只保留荒野主角，其他画作仅提供
|
||||
黑金雕纹、冷青边光和少量落日光；禁止额外角色、Logo、文字、UI 与拼贴。
|
||||
- 计划审查第 1 轮指出参考截图/生成素材混淆、隐藏状态预览路径、生成失败边界和目标资产
|
||||
尺寸不够可执行；已补齐三张标尺路径、四张生成输入、1536×1024 JPEG 契约和临时预览流程。
|
||||
- 计划审查第 2 轮通过。GPT Image 的本地密钥/URL 配置存在，但官方 transient Git 拉取与
|
||||
proxyd 单次前缀均失败且未产生副作用；准备按项目约定尝试局域网代理官方源。
|
||||
- 局域网代理路径也失败，且当前会话没有 built-in imagegen。已停止三条 CLI 重试，方案改为
|
||||
保留原图的无边框渐隐融合横幅；其他三张画作不进入 DOM，三档截图标准保持不变。
|
||||
- 根据三张完成度参考与原图色彩再次修正方向：放弃大面积黑色，改为暖象牙旧纸工作台、
|
||||
深炭文字、暗金/焦土铜骨架与少量冷青节点，更接近“完整主题皮肤”而非暗色换皮。
|
||||
- codebase-memory MCP 本轮不可用，已记录并降级为本地精确检索；Trellis implement/check 上下文
|
||||
已加入新计划并验证通过。
|
||||
- 用户指出主题不应擅自新增快捷入口和输入提示词；已从动态/静态欢迎 DOM 删除三个按钮与
|
||||
点击填充逻辑，并将计划、发现、CSV 与 Trellis 验收口径统一改为纯视觉主题。
|
||||
- 已完成纯视觉版 1440×900 首轮 Firefox 截图：文字对比和单图融合通过；发现 Hero 纵向占比
|
||||
偏低且角色头部裁切过多，下一轮仅调整主视觉高度与原图定位，不增加内容。
|
||||
- 1440×900 第二轮将 Hero 提高到约 2.1:1，首屏密度明显改善，文案与人物互不遮挡；角色
|
||||
头部仍贴近上边缘，继续把桌面裁切焦点上移少量后进入 1024/390 响应式验收。
|
||||
- 390×844 首轮定位到 gilded 主题提高选择器优先级后覆盖基础移动侧栏定位，已在主题媒体
|
||||
查询内恢复固定定位；1024 并行截图因 Firefox 默认 profile 锁未产出，将用独立临时 profile。
|
||||
- 独立 Firefox profile 已成功产出 1024×768 与修复后的 390×844：1024 通过；390 宽度与
|
||||
文案通过，但 Hero 纵向占比不足，已改为随视口高度增长的 320–430px 画幅。
|
||||
- 390×844 默认 profile 串行终稿截图通过：移动侧栏不占宽度，430px Hero、文字和输入区均
|
||||
可见，无横向溢出；进入隐藏缓存与回归契约更新。
|
||||
- 已重写 gilded 专项契约并通过：主题保持隐藏，启动时迁移旧值；欢迎 DOM 只有一张本地图，
|
||||
禁止三张参考画作、快捷入口、预设提示词和点击填充相关标识；暖色 token、对比度、移动端
|
||||
侧栏定位、首帧可见性与缓存版本均有断言。
|
||||
- 1440×900 终稿截图通过；结合已通过的 1024×768、390×844，三档视觉验收完成。终稿
|
||||
保持单图融合、原欢迎文案、原输入行为和高对比暖色工作台，主题继续隐藏。
|
||||
- 最终验证完成：`gilded-theme` 专项与完整 `npm run regression` 均通过；`node --check` 对
|
||||
`public/app.js`、`scripts/regression.js` 通过；主题相关 `git diff --check` 通过。
|
||||
- `gilded-wasteland.png` 保持 1000×1500 PNG，SHA-256 为
|
||||
`11bf3ffed4422c08f6be217c63060ba68d63367e747a3604fc2d7b877e9c5955`；产品 HTML/JS/CSS
|
||||
无快捷入口、预设提示词、旧四图节点或状态条残留。
|
||||
|
||||
## 错误记录补充
|
||||
|
||||
- 第二轮截图的首次编排脚本漏写一个对象属性分隔逗号，JavaScript 在调用 Firefox 前即退出；
|
||||
已修正编排语法后成功截图，未修改项目文件，也未重复执行失败的脚本形态。
|
||||
- 1024 与 390 并行启动 Firefox 时，1024 进程命中默认 profile 锁并提示已有 Firefox 未响应，
|
||||
390 截图正常产出；后续为 1024 指定独立 `/tmp` profile，避免重复同一路径。
|
||||
- 移动画幅与计划状态的第一次补丁因分隔行格式错误被 `apply_patch` 拒绝，未产生部分修改；
|
||||
已纠正补丁结构后一次应用完整变更。
|
||||
- 390 v3 独立 profile PNG 出现与 DOM 无关的透明黑块；改用此前稳定的默认 profile 串行重拍，
|
||||
v4 渲染正常，因此将其记录为 headless Firefox 截图合成异常而非产品缺陷。
|
||||
- 首次 `gilded-theme` 专项回归发现共享工作树中的后续主题改动覆盖了 `hidden: true`、
|
||||
`gilded → washi` 启动迁移和隐藏态缓存版本；已恢复三处闸门后再运行专项。
|
||||
- 完整回归前，独立 `wasteland` 契约再次把 gilded 断言与缓存标识改回可见状态；已把两套
|
||||
主题的缓存版本合并为中性的 `20260717-theme-bundle`，wasteland 保持可见，只有 gilded 迁移。
|
||||
- 第一次合并缓存契约的补丁因 wasteland 断言提示文案与预期差一个词而被拒绝，未产生修改；
|
||||
核对精确行后重新应用完整补丁。
|
||||
113
.planning/warframe-rich-theme/task_plan.md
Normal file
113
.planning/warframe-rich-theme/task_plan.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# Warframe 饱满主题重做计划
|
||||
|
||||
## 目标
|
||||
|
||||
参考用户提供的三套高完成度 Codex 主题，把隐藏的 gilded 重做为真正覆盖完整工作台的
|
||||
Warframe 主题。主题必须使用一个统一主视觉，而不是海报拼贴；图片、侧栏、欢迎区、
|
||||
输入区、按钮、会话选中态和聊天阅读表面共享同一套 Orokin 视觉语言，同时保持高
|
||||
对比度、真实功能和移动端可用性。
|
||||
|
||||
## 视觉策略
|
||||
|
||||
- **视觉论点：** 日照下展开的 Orokin 荒野任务档案；暖象牙与旧纸灰构成整页底色，深炭
|
||||
文字保证阅读，暗金/焦土铜形成骨架，冷青能量只作少量节点。荒野 Warframe 角色是唯一
|
||||
主角，背景扩展成横向场景，界面元素像同一套档案与传识控制台。
|
||||
- **内容规划：** 侧栏继续负责历史与项目；欢迎态只使用原有欢迎标题、说明和一个横向
|
||||
主视觉；输入区保持原有内容与行为；聊天态回归高对比阅读。
|
||||
- **交互论点：** 主视觉仅做轻微景深进场；现有会话项、按钮和输入框沿用统一的短促
|
||||
过渡与焦点反馈；减少动态模式完全关闭。
|
||||
|
||||
## 执行步骤
|
||||
|
||||
1. [complete] 分析参考主题并冻结完整美术策略
|
||||
2. [complete] 审核单一 Warframe 主视觉融合方案
|
||||
3. [complete] 清理欢迎态越界交互并保留纯视觉结构
|
||||
4. [complete] 统一侧栏标题输入聊天的主题语言
|
||||
5. [complete] 完成桌面窄屏移动响应式
|
||||
6. [complete] 更新主题显隐缓存与回归契约
|
||||
7. [complete] 执行 Firefox 三档截图审查并迭代
|
||||
8. [complete] 运行专项全量回归与资源检查
|
||||
|
||||
## 设计边界
|
||||
|
||||
- 保留 `gilded-wasteland.png` 原图和三张本地参考画作，不覆盖或删除源文件。
|
||||
- 新主视觉只使用原始荒野图，通过无边框 `<img>`、渐隐 mask、裁切定位和同色背景扩展为
|
||||
单一连续横幅；其他三张画作只提供材质、光色判断，不作为页面图片节点。
|
||||
- 欢迎态只允许一个强主视觉；不得新增快捷入口、预设提示词、任务/KPI/数据或点击填充逻辑。
|
||||
- 保留项目原有欢迎标题、说明、输入内容和输入行为；主题只改变视觉呈现。
|
||||
- 主题装饰使用低对比纹样、Orokin 圆弧/金属细线和少量能量青；常规表面采用暖象牙/旧纸
|
||||
实色而非大片黑色，正文、菜单、输入和消息均保持不透明，不能让图片进入长文本背后。
|
||||
- 主文字、次文字、弱文字在真实表面分别至少达到 7:1、5.5:1、4.5:1；按钮文字至少 7:1。
|
||||
- 非 gilded 主题结构和视觉不得变化；gilded 在最终截图审查通过前保持隐藏。
|
||||
|
||||
## 完成度参考标尺
|
||||
|
||||
以下三张是“主题完成度与页面密度”参考，不是 Warframe 生成素材：
|
||||
|
||||
1. `sessions/_attachments/8a89945c-786c-45e2-b027-98bd8e71eb6e.png`：全宽人物横幅、
|
||||
4 个紧邻功能入口、手绘母题贯穿侧栏/横幅/输入区，首屏无大面积无职责空白。
|
||||
2. `sessions/_attachments/6730f205-d39c-47fe-b6df-c02e429eb8fd.png`：角色与场景道具融入
|
||||
横幅、云纹/金币贯穿整页、侧栏信息密度高、功能入口和输入区形成连续工作流。
|
||||
3. `sessions/_attachments/f3d3d9b2-67a1-49ab-bab5-d6f250ffd837.png`：单人物横幅、统一低
|
||||
饱和母题、4 个功能入口和宽输入区共同占满首屏，主题不是局部换色。
|
||||
|
||||
本轮对应标准：一个全宽横向 Warframe 主视觉；Orokin 弧线、暗金日轮、冷青能量节点和
|
||||
焦土叶片贯穿侧栏、横幅与输入区；禁止海报拼贴、大面积黑洞和额外功能入口。
|
||||
|
||||
以下四张是 Warframe 主图/材质参考：
|
||||
|
||||
- `public/assets/themes/gilded-wasteland.png`：唯一页面图片与角色/身份来源。
|
||||
- `public/assets/themes/warframe-sacrifice.jpg`：仅提供黑金雕纹和日轮材质。
|
||||
- `public/assets/themes/warframe-orokin-figure.jpg`：仅提供冷青边光。
|
||||
- `public/assets/themes/warframe-ember-squad.jpg`：仅提供少量远景落日橙。
|
||||
|
||||
## 主视觉资产契约
|
||||
|
||||
- 保留 `public/assets/themes/gilded-wasteland.png` 原文件、1000×1500 尺寸与既有 SHA-256。
|
||||
- 横幅容器约 2.4:1；原图作为绝对定位 `<img>` 占右侧约 58%，使用 `object-fit: cover`、
|
||||
`object-position` 和左右/上下 mask 融入容器，不能出现完整矩形海报边框或四角孔洞。
|
||||
- 左侧约 42% 使用从原图提取的暖灰、焦土橙和暗金同色背景扩展，叠加低对比 Orokin 日轮、
|
||||
弧线与焦土叶片，为 HTML 文案提供稳定安全区。
|
||||
- 禁止额外人物、Logo、图片内文字、UI、卡片、面板、拼贴和分屏；其他三张海报不出现在 DOM。
|
||||
|
||||
## 隐藏状态预览路径
|
||||
|
||||
- 在 `/tmp/warframe-rich-preview.html` 建立只读临时预览：`<html data-theme="gilded">`，
|
||||
引用当前服务的 CSS/本地资产并复制真实欢迎 DOM，不加载 `app.js`，从而绕过隐藏主题迁移。
|
||||
- Firefox 使用该预览完成 1440/1024/390 三档截图；主线程查看并通过后，才在 app/index
|
||||
中取消 `hidden` 和 `gilded → washi` 启动迁移，再对真实页面做静态与回归检查。
|
||||
|
||||
## 响应式验收
|
||||
|
||||
- 1440×900：侧栏完整；主视觉、原有欢迎文案和输入区同时进入首屏。
|
||||
- 1024×768：主视觉与文案仍在首屏，不横向裁切，输入区完整。
|
||||
- 390×844：隐藏侧栏后为单列；主视觉保留主体和文字安全区，输入区不遮挡。
|
||||
|
||||
## 完成标准
|
||||
|
||||
- 原始主视觉资产保持固定尺寸/hash，并由本地服务返回 HTTP 200 `image/png`；欢迎横幅通过
|
||||
HTML/CSS 将其融合为连续场景，回归断言页面只有这一张 Warframe 图片节点。
|
||||
- 动态与静态欢迎 DOM 一致；不存在主题专属快捷按钮、预设提示词或输入框填充逻辑。
|
||||
- 侧栏、标题栏、欢迎态、输入区、按钮、菜单、气泡形成统一主题，不是纯换色。
|
||||
- `npm run regression -- --target gilded-theme`、`npm run regression`、`git diff --check` 通过。
|
||||
- Firefox 1440×900、1024×768、390×844 截图均由主线程查看并记录结论；只有通过后才取消隐藏。
|
||||
|
||||
## 风险与约束
|
||||
|
||||
- 工作树已有其他未提交改动，只修改 Warframe 主题相关区块、欢迎态和对应回归。
|
||||
- 已尝试的 GPT Image CLI 获取路径全部失败且 host-native imagegen 未挂载；不继续安装或调用
|
||||
其他模型。最终方案改为保留原图的确定性融合构图，必须通过三档 Firefox 截图；若仍像矩形
|
||||
海报或出现大面积空洞，则保持主题隐藏，不能以“工具不可用”为由降低视觉标准。
|
||||
- 不重启 cc-web，除非必须加载服务端变更且确认只有当前会话在运行。
|
||||
|
||||
## 错误记录
|
||||
|
||||
- `uv run scripts/generate.py --help` 在启动器的 GitHub transient fallback 处失败，输出
|
||||
`Failed to resolve --with requirement / Git operation failed`；未安装全局工具、未产生图片。
|
||||
- 按 `proxyd-accelerator` 将公开 GitHub URL 改为 proxyd 单次前缀后仍出现同一 Git operation
|
||||
failed；不重复代理 URL，下一次按项目说明改用局域网代理 `11.144.144.9:7890` 访问官方源。
|
||||
- 局域网代理访问官方 GitHub 仍返回同一 Git operation failed；三条 CLI 路径均已停止。
|
||||
- 当前会话 `ALL_TOOLS` 未提供 built-in `image_gen`，无法使用 host-native 生成；改用保留原图
|
||||
的 HTML/CSS 渐隐融合构图，验收标准不降低。
|
||||
- codebase-memory MCP 的 `index_status` 与 `search_graph` 本轮返回 `Transport closed`；按项目
|
||||
约定降级为 `rg`/`sed` 精确定位，最终行号再做本地交叉验证。
|
||||
42
.planning/warframe-theme-art-direction/findings.md
Normal file
42
.planning/warframe-theme-art-direction/findings.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Warframe 主题美术重构发现
|
||||
|
||||
## 用户纠正
|
||||
|
||||
- “参考”不等于只提取颜色，也不等于把原图替换掉。
|
||||
- 用户要的是完整主题：图片必须真实显示并参与空间构图，界面组件也必须继承画作的视觉语言。
|
||||
- 简单把几张图并排放置同样不合格；需要连续构图、明确主次和组件级主题表达。
|
||||
|
||||
## 四张图的可用构图信息
|
||||
|
||||
- 原始荒野图：暖灰、焦土橙、黑色角色剪影，主体居中且披风向左展开；适合作为最大主画面，
|
||||
保留人物完整轮廓，允许轻微裁切上下边框但不能切断头部和武器。
|
||||
- 红色群像：太阳位于中上部，四个角色集中在中下部，左右有蓝色闪电和青色能量；适合做
|
||||
横向战场切片，裁切范围以 18%–82% 高度为主，保留太阳和中央角色。
|
||||
- 冷蓝近景：单角色几乎填满纵向画幅，肩部橙红能量点是天然焦点；适合做窄幅前景切片，
|
||||
`object-position` 稍偏上，不能裁掉头肩轮廓。
|
||||
- The Sacrifice：暗青黑背景、群像围绕纵向金色中轴，底部自带标题；适合做深景基底和
|
||||
暗金骨架来源，完整展示时保留底部标题，窄切片时只取金色中轴和上半群像。
|
||||
|
||||
## 设计方向
|
||||
|
||||
- 欢迎态建立一个连续的 `welcome-visual` 舞台，四张图用不规则网格、遮罩和层级共同组成
|
||||
视觉锚点，不使用四张独立卡片的相册布局。
|
||||
- 文案放在独立黑曜石表面，利用暗金竖向骨架与冷青能量短线连接视觉舞台，不直接压在
|
||||
高细节画面上。
|
||||
- 组件语言采用细边骨架、切角、双层边缘和克制能量光；正文气泡保持实色，避免重回费眼。
|
||||
- 使用本地资源避免 Displate 热链失效；图片下载前的临时副本已在 `/tmp` 验证可读。
|
||||
|
||||
## 首轮真实浏览器复核
|
||||
|
||||
- 当前环境实际存在 Snap 内的 Firefox 二进制；绕过 `/usr/bin/firefox` 的 Snap 包装层后，
|
||||
可以对本地临时预览页执行 1440×900、1024×768、390×844 的真实截图，不再只做静态推算。
|
||||
- 首次集成暴露出确定性 DOM/CSS 契约错误：HTML 使用孤立 `--wasteland` 等类，CSS 使用
|
||||
`.warframe-shard--wasteland`，导致图层没有尺寸和位置；已修正为完整 BEM 类名。
|
||||
- 1440×900 最终构图显示四张图、侧栏、文本板和输入区，已经形成暗金骨架、冷青能量与
|
||||
赤红战场的连续视觉场，不再是单图或纯换色。
|
||||
- 原 980px 断点在 1024px 扣除 280px 侧栏和消息 padding 后会导致两列最小宽度溢出；
|
||||
已将堆叠断点提前到 1060px。
|
||||
- 1024/390 首帧截图处于 `warframeShardReveal` 的 opacity=0 阶段，说明首屏约 0.6 秒会先显示
|
||||
黑色骨架再显示图片；需要用禁用动画的临时预览再次检查最终响应式状态，并评估是否缩短首屏延迟。
|
||||
- 本地服务对 PNG 返回 `image/png`，但三张新增 JPEG 初次返回 `application/octet-stream`；
|
||||
浏览器截图证明仍能解码，但为避免严格客户端/代理不稳定，静态 MIME 映射需补 `.jpg/.jpeg`。
|
||||
33
.planning/warframe-theme-art-direction/progress.md
Normal file
33
.planning/warframe-theme-art-direction/progress.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Warframe 主题美术重构进展
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
- 已接收用户纠正：问题不只是图片没显示，而是当前实现没有形成完整主题语言。
|
||||
- 已重新读取 `frontend-skill`、`planning-with-files`、`todo-list-csv`。
|
||||
- 已查看原始荒野图和三张用户提供画作，记录各自焦点、可裁切范围和构图职责。
|
||||
- 已建立四图连续视觉场、Orokin 组件语言和高对比阅读层的返工计划。
|
||||
- codebase-memory MCP 仍因 `Transport closed` 不可用，已按项目规则降级为本地精确检索。
|
||||
- ImageMagick 未安装，不将其作为实现前置条件；继续使用已查看原图和 `file` 元数据判断裁切。
|
||||
- 计划审查第 1 轮指出素材来源/目标路径与四图回归契约不够可执行；已补齐四张素材的
|
||||
精确路径、URL 标识、尺寸、SHA-256、构图职责，以及专项/完整回归必须覆盖的新断言。
|
||||
- 计划审查第 2 轮通过；四张素材路径、尺寸和 SHA-256 均由审查者独立核对无误，进入
|
||||
本地静态资源保存阶段。
|
||||
- 三张参考画作已按素材契约保存为本地静态资源，四图 hash、尺寸和格式再次核验通过；
|
||||
原始荒野图保持字节不变。动态与静态欢迎态均已加入四个真实 `<img>` 图层。
|
||||
- 四图 CSS 与组件级 Orokin 主题层已完成；主线程复核修正了修饰类不匹配导致图片无尺寸的
|
||||
故障，并把响应式堆叠断点从 980px 提前到 1060px。
|
||||
- 已通过 Firefox 获取 1440×900 真实截图；四图与完整界面均显示。1024/390 截图命中进场
|
||||
动画首帧，正在禁用动画复核最终响应式构图。
|
||||
- 禁用动画后的 1024×768 与 390×844 Firefox 最终态截图确认：四张图均清晰可见，原图
|
||||
保持最大主画面，三张参考图分别承担深景、冷青前景和赤红战场切片，整体不是卡片墙。
|
||||
- 导航、标题栏、会话项、主次按钮、输入框、消息气泡和菜单已统一为切角暗金骨架、冷青
|
||||
能量短线与不透明黑曜石表面；1440 截图确认组件与主视觉属于同一套主题语言。
|
||||
- 响应式已在 1060px 提前堆叠，1024 与 390 最终态均无横向溢出；figure 自带暗色骨架
|
||||
fallback。首屏图片动画改为始终保持 opacity=1，只做位移/缩放，避免任何“图片没显示”瞬间。
|
||||
- 新四图专项回归首次运行拦截主按钮暗金端点 6.85:1 的对比度回退，已提亮到 7.81:1。
|
||||
- 回归契约已从旧单图规则替换为四图本地资产 hash/尺寸、动态静态四图 DOM、连续构图、
|
||||
正文无图、组件主题、1060/560 响应式和首帧可见性断言；缓存版本更新为 Warframe Orokin。
|
||||
- 更新后的 `gilded-theme` 专项回归通过，进入全量回归和实际 HTTP 资源验证。
|
||||
- 全量回归首次命中既有 Codex App steer mock 时序失败，正在检查遗留进程并执行有上限复跑。
|
||||
- 全量回归有上限复跑通过；HTTP 检查发现 JPEG Content-Type 为 octet-stream，已补静态服务
|
||||
`.jpg/.jpeg → image/jpeg` 映射和主题专项断言，等待按会话运行状态决定是否重启生效。
|
||||
86
.planning/warframe-theme-art-direction/task_plan.md
Normal file
86
.planning/warframe-theme-art-direction/task_plan.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Warframe 主题美术重构计划
|
||||
|
||||
## 目标
|
||||
|
||||
把 gilded 从“暗色换色皮肤”重构为完整 Warframe 主题：保留原始荒野画作作为主视觉，
|
||||
将用户提供的三张画作作为真实可见的次级画面，通过切片、遮罩、景深和界面骨架融合成
|
||||
一套连续构图；导航、按钮、输入框、选中态和动效统一采用 Orokin/星际战甲视觉语言，
|
||||
同时保持正文阅读表面的高对比度。
|
||||
|
||||
## 视觉策略
|
||||
|
||||
- **视觉论点：** 黑曜石舰舱中展开的 Orokin 档案界面，暗金骨架承载冷青能量与赤红战场，
|
||||
四张画面组成一个连续视觉场，而不是四张并排海报。
|
||||
- **内容规划：** 欢迎态负责完整主题表达；导航负责定位；聊天区负责阅读；输入区负责行动。
|
||||
- **交互论点：** 主视觉分层进场；画面切片在 hover/focus 时产生克制景深；按钮和会话选中态
|
||||
使用切角、能量线和短距离位移；减少动态模式下全部取消。
|
||||
|
||||
## 执行步骤
|
||||
|
||||
1. [complete] 建立四图主题构图与素材契约
|
||||
2. [complete] 保存并校验三张参考画作资源
|
||||
3. [complete] 重构欢迎态为连续多图主视觉
|
||||
4. [complete] 统一导航输入按钮的 Warframe 组件语言
|
||||
5. [complete] 完成桌面移动响应式和加载降级
|
||||
6. [complete] 更新回归契约与缓存版本
|
||||
7. [in_progress] 运行专项全量回归并检查实际资源加载
|
||||
|
||||
## 完成标准
|
||||
|
||||
- 原始 1000×1500 画作继续作为主视觉；三张用户提供的 Displate 画作保存为本地静态资源，
|
||||
不依赖远程热链，四张图在欢迎态真实可见并有明确主次。
|
||||
- 不是相册、卡片墙或简单并排：桌面端通过不规则切片、层叠深度和统一骨架线组成一个连续
|
||||
视觉场；移动端重排成主画面加叙事切片，不能横向溢出。
|
||||
- 导航、标题栏、会话项、按钮、输入框、菜单与焦点态共享切角、暗金骨架、冷青能量高光；
|
||||
不能只改颜色，也不能用图案牺牲文字可读性。
|
||||
- 普通聊天正文仍使用不透明表面；主/次/弱文字最低对比度保持 7:1 / 5.5:1 / 4.5:1。
|
||||
- 所有图片由真实 `<img>` 或稳定本地资源加载；单图失败时保留结构和可读界面，不出现空白块。
|
||||
- `scripts/regression.js` 必须移除旧的“原图只引用 2 次 / 只有 `.welcome-art`”单图契约，
|
||||
改为断言四个本地资源存在且 hash/尺寸固定、动态与静态欢迎态均含四个 `<img>`、连续构图
|
||||
容器和四种图层类存在、UI 不含远程热链、聊天正文不使用图片背景、移动端有明确重排。
|
||||
- `npm run regression -- --target gilded-theme`、`npm run regression`、`git diff --check` 和
|
||||
四张图片的本地 HTTP 200 / 正确 Content-Type 检查全部通过。
|
||||
|
||||
## 素材契约
|
||||
|
||||
1. 主图：`public/assets/themes/gilded-wasteland.png` → 保持原路径；1000×1500 PNG；
|
||||
SHA-256 `11bf3ffed4422c08f6be217c63060ba68d63367e747a3604fc2d7b877e9c5955`；
|
||||
用途为最大荒野主画面，不能被替换。
|
||||
2. 赤红群像：用户 URL `ce5c50d5-7712-494e-9605-0cf6fa28118a.jpg?speedsize=w_480`，
|
||||
当前 `/tmp/warframe-candidate-1.jpg` → 目标
|
||||
`public/assets/themes/warframe-ember-squad.jpg`；480×673 JPEG；SHA-256
|
||||
`a9c89c5ec1f94445fbdce6b24d7a0a54e492d003cfbee395601fbaba405c6d65`；
|
||||
用途为带太阳与中央角色的横向战场切片。
|
||||
3. 冷蓝近景：用户 URL `fc78630c-3914-4140-b64a-8e181f41c62f.jpg?speedsize=w_480`，
|
||||
当前 `/tmp/warframe-candidate-2.jpg` → 目标
|
||||
`public/assets/themes/warframe-orokin-figure.jpg`；480×672 JPEG；SHA-256
|
||||
`80c2dec24353ddc38629ae25568802cf3201d9da67b4b948047201952e5fc95b`；
|
||||
用途为保留头肩轮廓的冷青窄幅前景。
|
||||
4. The Sacrifice：用户 URL `ddd18c99-c3ba-466b-bcbe-690276d29aea.jpg?speedsize=w_480`，
|
||||
当前 `/tmp/warframe-candidate-3.jpg` → 目标
|
||||
`public/assets/themes/warframe-sacrifice.jpg`；480×672 JPEG；SHA-256
|
||||
`792ab3eb2bd0b491f24676c2c42273a2b5167b4450aeb7edd579338f0b777b76`；
|
||||
用途为暗青深景、纵向金色中轴和底部标题层。
|
||||
|
||||
## 约束
|
||||
|
||||
- 保留现有无关未提交改动，尤其子代理卡片逻辑、Trellis 任务和发布包。
|
||||
- 不重启 cc-web；静态文件由当前服务直接提供。
|
||||
- 不伪造浏览器截图；若仍没有可用浏览器运行时，明确记录视觉验证边界。
|
||||
|
||||
## 错误记录
|
||||
|
||||
- 首次在 `/tmp` 全目录检索候选图时命中 systemd 私有目录权限错误；候选文件仍成功定位，
|
||||
后续只读取四个精确路径，不再扫描受限目录。
|
||||
- codebase-memory MCP 的 `list_projects` 与 `index_status` 均返回 `Transport closed`；按项目
|
||||
约定降级为 `rg`/`sed` 精确定位，并保留最终行号交叉验证。
|
||||
- 当前环境没有 ImageMagick 的 `identify`/`convert`；图片尺寸改用 `file` 和已有 JPG/PNG
|
||||
元数据核验，色彩与裁切根据已查看的原始像素图判断，不重复调用缺失命令。
|
||||
- `/usr/bin/firefox` 的 Snap 包装层因 mount namespace 限制超时；改用
|
||||
`/snap/firefox/current/usr/lib/firefox/firefox` 直接运行后截图成功，不重复调用包装层。
|
||||
- 首次修正四图 BEM 类名的组合补丁因 `app.js` 实际为多行模板而未匹配；读取精确上下文后
|
||||
改用逐行小补丁成功，未产生部分修改。
|
||||
- 四图专项回归首次命中按钮金色渐变暗端对比度仅 6.85:1；将暗端由 `#b9995c` 提亮为
|
||||
`#c2a566`（7.81:1），保留渐变层次而不降低 7:1 验收标准。
|
||||
- 首次全量回归在既有 Codex App steer mock 时序处返回 `no active turn to steer`，主题专项
|
||||
断言此前已通过；先检查遗留 mock 进程，再以 60 秒上限复跑，不把该非主题错误算作通过。
|
||||
130
.planning/warframe-theme-rework/findings.md
Normal file
130
.planning/warframe-theme-rework/findings.md
Normal file
@@ -0,0 +1,130 @@
|
||||
# Warframe 主题返工发现
|
||||
|
||||
## 用户反馈根因
|
||||
|
||||
- 上一版将原画放入 `--page-background`，导致图片同时出现在欢迎态和阅读态；图片没有
|
||||
独立布局职责，只是壁纸。
|
||||
- 上一版对比度计算使用纯色变量，没有计算半透明聊天表面叠加图片后的实际背景，
|
||||
因此结果不能反映用户真实阅读体验。
|
||||
- 暖纸色被过度用于正文，长段内容缺少接近中性的高亮文字，视觉疲劳明显。
|
||||
|
||||
## 新构图方向
|
||||
|
||||
- 阅读态：实色主背景、实色消息表面、实色输入表面，图片完全退场。
|
||||
- 欢迎态：利用 `.welcome-msg` 建立左侧操作信息与右侧完整竖幅的单一构图，不给图片
|
||||
叠加正文。
|
||||
- 移动端：欢迎态单列，完整图片作为独立区块；聊天状态不加载可见图片层。
|
||||
|
||||
## 作品检索状态
|
||||
|
||||
- `https://displate.com/search?q=warframe` 直接访问被 Cloudflare challenge 拦截。
|
||||
- DuckDuckGo HTML 公开索引连接超时。
|
||||
- 用户已提供 3 个 Displate CDN 候选和 Pinterest Warframe poster 页面；后续以这些
|
||||
候选为主，不再把拿到产品落地页作为前置条件。
|
||||
- Pinterest ideas 页面直连在 30 秒后超时，无法可靠提取更多公开候选；停止自动搜图，
|
||||
避免绕过站点限制或产生噪声。
|
||||
|
||||
## 用户提供的 Displate CDN 候选
|
||||
|
||||
1. 候选 1（480×673）：红橙落日群像，四个角色、多重能量效果，视觉冲击最强但焦点
|
||||
过多；只能作为完全独立海报，不适合与界面文字共享区域，且与现有暗金色板偏离。
|
||||
2. 候选 2（480×672）：单角色近景、浅蓝建筑背景，轮廓清晰、构图安静，最适合
|
||||
左右分区；采用它意味着主题应整体转为冷蓝钢铁色，不能继续沿用暗金棕。
|
||||
3. 候选 3（480×672）：`WARFRAME THE SACRIFICE` 深青暗金群像，自带完整标题和
|
||||
海报层级；与现有暗金主题最协调，适合欢迎态右侧完整立幅，禁止铺到阅读区背后。
|
||||
|
||||
上述 CDN 图仅下载到 `/tmp` 做只读分析，未写入项目。
|
||||
|
||||
## 多图参考板决策
|
||||
|
||||
- 用户明确说明三张 CDN 图用于“参考”，不是替换主题原图；此前把“继续”解释为授权
|
||||
替换是错误假设，已撤销。项目继续使用最初上传的 1000×1500 原图。
|
||||
- 参考 1：借鉴强对角线、能量方向和前中后景层次；不借用高饱和红色和群像拥挤布局。
|
||||
- 参考 2：借鉴单角色清晰轮廓、主体与浅色负空间分离；不把主题整体改成冷蓝。
|
||||
- 参考 3：借鉴深青暗金材质、完整框景和垂直层级；不复制海报文字或群像素材。
|
||||
- 综合结果：原图作为完整独立立幅；欢迎态用明确的框景、负空间和纵向层级组织；
|
||||
阅读态图片完全退场。三张参考图均不进入 `public/assets`。
|
||||
|
||||
## 代码定位
|
||||
|
||||
- codebase-memory MCP 仍返回 `Transport closed`，已降级为 `rg`/`sed` 精确定位，不重复
|
||||
调用失效通道。
|
||||
- 欢迎态由 `buildWelcomeMarkup()` 生成稳定的 `.welcome-msg`，静态首页也使用同一结构；
|
||||
可以用 `.messages:has(> .welcome-msg)` 限定欢迎构图，无需修改多处分支状态。
|
||||
- 上一版图片同时存在于 `--page-background`、`--login-background`、`.chat-main` 移动规则
|
||||
和主题预览；返工后原图只保留在欢迎态立幅与主题选择器预览两处。
|
||||
|
||||
## 真实表面对比度体系
|
||||
|
||||
- 主背景：`#0b0d0e`；面板/助手消息：`#171a1c`；用户消息：`#34271f`；代码背景：
|
||||
`#101214`，全部使用不透明实色。
|
||||
- 主文字 `#f2eee5`：对主背景 16.82:1，对面板 15.10:1。
|
||||
- 次文字 `#d5cbb8`：对主背景 12.12:1，对面板 10.88:1。
|
||||
- 弱文字 `#aea38f`：对主背景 7.82:1，对面板 7.02:1。
|
||||
- 暗色按钮字 `#111416` 对暗金按钮 `#d4bd83` 为 10.05:1。
|
||||
- 用户消息文字/背景 12.46:1；代码文字/背景 14.44:1；危险与成功状态对面板
|
||||
分别为 7.54:1、9.31:1。
|
||||
- 禁用态使用 0.68 透明度，次文字在面板上的实际合成对比度为 5.65:1；不再沿用
|
||||
0.56 导致的 4.26:1。
|
||||
|
||||
## 欢迎态实现
|
||||
|
||||
- `buildWelcomeMarkup` 与静态首页统一为 `.welcome-copy + .welcome-art` 结构。
|
||||
- gilded 主题用 `.messages:has(> .welcome-msg)` 建立欢迎态专属布局：桌面文字/立幅双区，
|
||||
移动端立幅在上、操作说明在下。
|
||||
- `--page-background` 与 `--login-background` 已改为实色，移动 `.chat-main` 图片背景已
|
||||
删除；原图只在 `.welcome-art` 与主题选择器小预览出现。
|
||||
- 欢迎文案用暗金竖线组织，原图 `contain` 完整展示；没有增加卡片或在图上叠文字。
|
||||
|
||||
## 阅读表面实现
|
||||
|
||||
- gilded 变量已切换为中性暖白文字、墨黑主背景和不透明面板；暗金只用于焦点、选中
|
||||
边缘、欢迎态竖线和主按钮。
|
||||
- 导航、会话 hover/active、聊天头部、输入区、搜索、消息气泡、命令菜单、选项菜单、
|
||||
行内代码与工具代码均使用实色，不再依赖图片或半透明模糊层。
|
||||
- 主按钮由渐变改为单一暗金实色；助手/用户消息使用明确不同但都高对比的实色表面。
|
||||
- placeholder 使用弱文字且 opacity=1；所有禁用表单控件统一 opacity=0.68。
|
||||
|
||||
## 响应式几何
|
||||
|
||||
- 1440×900：主区扣除侧栏和欢迎 padding 后宽 1056.3px，双列最小需求 652px；原图
|
||||
`contain` 约 360×540，无横向溢出。
|
||||
- 1024×768：可用宽 670.3px，双列最小需求 631.2px；原图约 307.2×460.8，仍保持
|
||||
独立完整立幅。
|
||||
- 390×844：切换单列，可用宽 362px，原图约 253.2×379.8；图片在上、操作说明在下，
|
||||
输入区位于 `.messages-wrap` 外部，不被图片挤压，无横向溢出。
|
||||
- 移动头部、输入区和输入框均为完全不透明实色；1024 视口降低欢迎最小高度，避免为
|
||||
海报制造无意义滚动。
|
||||
|
||||
## 回归契约
|
||||
|
||||
- 动态/静态欢迎 DOM 必须同时包含 `.welcome-copy` 与 `.welcome-art`，并移除旧花朵占位。
|
||||
- 原图 URL 必须在 CSS 中恰好出现两次：欢迎立幅和主题选择器预览；变量块和
|
||||
`.chat-main` 禁止出现图片 URL。
|
||||
- 项目 UI 文件禁止出现 `cdn.displate.com`，保证三张参考图不被复制进产品。
|
||||
- 自动计算主/次/弱文字和主按钮真实对比度，并断言欢迎态桌面/移动结构、不透明表面、
|
||||
禁用态透明度、减少动态偏好和缓存版本。
|
||||
- `gilded-theme` 专项回归通过。
|
||||
|
||||
## 独立审查第 1 轮
|
||||
|
||||
- 769–980px 视口扣除 280px 侧栏和消息 padding 后，双列最小宽度可能不足；欢迎态应
|
||||
在 980px 以下提前切单列，1024×768 仍保留双列。
|
||||
- `.msg.user .msg-attachment-card/thumb` 的特异性高于暗色共用层，仍使用旧半透明规则；
|
||||
需要 gilded 专属实色附件卡与缩略图覆盖。
|
||||
- 回归只禁止 `cdn.displate.com` 不够；应禁止主题 CSS 中任何远程 `url(http...)`，并
|
||||
覆盖 Displate/Pinterest/pinimg 参考域名。
|
||||
- 完整回归在恢复既有 Claude 欢迎短语后已通过。
|
||||
|
||||
## 审查修复结果
|
||||
|
||||
- 欢迎态在 `max-width: 980px` 提前切换单列，覆盖所有可能塞不下双列的窄桌面；
|
||||
1024×768 继续使用双区。
|
||||
- 用户消息附件卡、hover、缩略图、占位/说明文字、名称和过期态均增加 gilded 高特异性
|
||||
实色覆盖，消除旧透明规则。
|
||||
- 回归禁止 Displate/Pinterest/pinimg 域名进入 UI 文件，并禁止 Warframe 主题 CSS 使用
|
||||
任意远程 `url(http...)`。
|
||||
- 修复后专项与完整回归再次通过；独立复核确认原图未替换、参考图未进入项目、图片
|
||||
仅用于欢迎态立幅和主题选择器预览，普通聊天与所有阅读表面均保持实色高对比。
|
||||
- 当前服务已实际返回 `20260717-warframe-readable` 版本首页和原始主题图；环境仍无
|
||||
Playwright/Chromium，真实浏览器视觉效果保留为用户刷新后的人工复核项。
|
||||
36
.planning/warframe-theme-rework/progress.md
Normal file
36
.planning/warframe-theme-rework/progress.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Warframe 主题返工进展
|
||||
|
||||
## 2026-07-17
|
||||
|
||||
- 已确认用户反馈指向两个根因：真实对比度不足、图片缺乏构图职责。
|
||||
- 已读取 `frontend-skill`、`planning-with-files`、`todo-list-csv`。
|
||||
- 已尝试 Displate 直连与 DuckDuckGo 索引，均失败并记录降级路径。
|
||||
- 已建立返工视觉策略与验收标准，等待计划审查。
|
||||
- 用户提供 3 个 Displate CDN 候选；已完成临时下载和视觉分析，候选 3 最适合现有
|
||||
暗金方向，候选 2 适合彻底改成冷蓝方向。
|
||||
- 计划审查第 1 轮发现来源路径、真实状态对比、响应式验收和测试范围不够具体；已修订。
|
||||
- 计划审查第 2 轮已通过。Pinterest 页面访问超时，候选集合收敛为用户提供的 3 张
|
||||
CDN 图片；等待用户确认图片方向与使用权限。
|
||||
- 用户澄清 CDN 画作用于多图参考而非替换；已撤销替换假设，确认保留原图，并把三张
|
||||
参考分别映射为动势、留白、框景/材质方法，进入真实表面对比度设计。
|
||||
- codebase-memory MCP 不可用；已用本地检索确认欢迎态 DOM 和上一版所有图片引用位置。
|
||||
- 已建立基于真实不透明表面的高对比 token 与关键状态指标，完成对比度阶段，开始重构
|
||||
欢迎态独立立幅。
|
||||
- 首次组合补丁上下文校验失败，未产生代码变更；已记录并切换为小范围精确补丁。
|
||||
- 已完成欢迎态 DOM、桌面/移动构图、图片退场规则与两段入场动效；Node 语法和 CSS
|
||||
结构检查通过，进入阅读导航与输入区域高对比改造。
|
||||
- 已完成全部主要阅读与交互表面的实色、高对比改造，进入桌面/移动响应式细节核验。
|
||||
- 已完成 1440×900、1024×768、390×844 静态几何与结构核验，均无横向溢出，进入
|
||||
回归契约更新。
|
||||
- 已更新高对比与构图专项回归契约，语法及 `gilded-theme` 目标通过；进入完整回归与
|
||||
独立视觉审查。
|
||||
- 完整回归首次命中既有静态欢迎文案契约，已定位为新文案兼容问题，正在最小修正。
|
||||
- 恢复兼容短语后完整回归通过；独立审查发现窄桌面断点、用户附件半透明和远程图片
|
||||
契约 3 项问题，正在修复。
|
||||
- 已修复首轮审查全部问题，专项/完整回归通过，正在等待独立审查最终复核。
|
||||
- 独立复核最终通过：原图哈希和尺寸不变，三张参考图未写入项目，图片只在欢迎态立幅
|
||||
与主题预览出现，普通聊天、附件、导航、输入、菜单和代码区均为实色高对比表面。
|
||||
- 最终重新执行专项与完整回归，均通过；`git diff --check` 通过；本地 8002 服务返回
|
||||
新缓存版本首页与原始主题图。未执行服务重启。
|
||||
- 并行核验时全量回归超过 30 秒窗口，已续接进程并确认退出码 0；首次域名检索命令
|
||||
引号转义失败，已改用多个 `rg -e` 参数完成复核。
|
||||
65
.planning/warframe-theme-rework/task_plan.md
Normal file
65
.planning/warframe-theme-rework/task_plan.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# Warframe 主题返工计划
|
||||
|
||||
## 目标
|
||||
|
||||
根据用户反馈重做 Warframe Wasteland 主题：优先解决文字费眼与图片构图随意的问题，
|
||||
同时把用户提供的 Displate CDN 与 Pinterest Warframe 画作整理成多图视觉参考板；
|
||||
保留用户最初上传的主题原图，不绕过站点验证，不把参考图复制进项目。
|
||||
|
||||
## 视觉策略
|
||||
|
||||
- **视觉论点：** 墨黑舰舱般的高对比工作台，Warframe 原画只在空会话状态成为完整
|
||||
立幅，进入阅读状态后退场，不再铺在正文背后。
|
||||
- **内容规划：** 导航负责定位；欢迎态左侧负责操作提示、右侧负责完整画作；聊天区
|
||||
只负责阅读；输入区使用稳定不透明表面。
|
||||
- **交互论点：** 欢迎画作短距离淡入；会话选中态只用暗金边缘；输入聚焦使用清晰
|
||||
暖色描边；遵守减少动态偏好。
|
||||
|
||||
## 执行步骤
|
||||
|
||||
1. [complete] 评估用户提供的 Warframe 候选并确定构图
|
||||
2. [complete] 建立真实表面的文字对比度指标
|
||||
3. [complete] 重构欢迎态图片艺术面板
|
||||
4. [complete] 提升阅读导航与输入区域对比度
|
||||
5. [complete] 优化桌面与移动端响应式构图
|
||||
6. [complete] 更新主题资源与样式回归契约
|
||||
7. [complete] 运行回归测试并完成独立视觉审查
|
||||
|
||||
## 完成标准
|
||||
|
||||
- 对用户提供的 CDN/Pinterest 参考记录来源 URL、可访问性、可借鉴的构图方法与
|
||||
禁用方式；至少综合 3 张参考图的方法，保留最初主题原图，参考图不复制进项目。
|
||||
- 普通聊天状态的正文、导航和输入区后方不出现图片；所有阅读表面保持不透明。
|
||||
- 主文字、次文字、弱文字分别相对其真实不透明表面达到至少 7:1、5.5:1、4.5:1；
|
||||
分别检查默认、hover、active、focus、disabled、会话选中、输入占位符、消息气泡、
|
||||
代码块、命令菜单和弹层，不再只计算主题变量。
|
||||
- 欢迎态在 1440×900 和 1024×768 使用明确的文字/立幅双区域；390×844 单列展示，
|
||||
图片完整、不挤压输入框、不产生横向滚动。
|
||||
- `public/style.css` 需移除阅读态图片并实现欢迎态布局、实色 token 和状态覆盖；
|
||||
`public/app.js` 只在确有必要时增加稳定欢迎态标记；`scripts/regression.js` 需断言
|
||||
阅读态无背景图、欢迎态独立图片、关键状态色与响应式规则。
|
||||
- 专项与完整回归通过，独立审查无阻塞或中高风险问题；若仍无浏览器运行时，必须将
|
||||
真实布局视觉验证标为待用户复核，不能用静态检查冒充浏览器验收。
|
||||
|
||||
## 风险与约束
|
||||
|
||||
- 保留用户已有未提交改动，不重写无关子代理卡片逻辑。
|
||||
- 保持内部主题值 `gilded`，避免破坏已保存偏好。
|
||||
- 不重启 cc-web；静态资源由现有服务实时提供。
|
||||
- 当前环境没有 Playwright/Chromium；先检查是否存在可执行截图/DOM 尺寸替代路径。
|
||||
若完全不可用，完成静态结构、对比度和构图规则审查后，保留“用户侧真实视觉复核”
|
||||
未完成项，不虚报浏览器验收通过。
|
||||
|
||||
## 错误记录
|
||||
|
||||
- Displate 搜索页和 robots.txt 均被 Cloudflare 安全检查替代，未获得作品列表。
|
||||
- DuckDuckGo HTML 与 Pinterest ideas 页面均在 30 秒后连接超时；不重复相同请求，
|
||||
后续以用户已提供的 3 个 CDN 候选为决策集合。
|
||||
- 首次欢迎态组合补丁因 CSS 变量块上下文与当前文件不完全一致而未应用；改为分别
|
||||
读取精确行并拆分 app/index、变量、欢迎布局三个小补丁，不重复原补丁。
|
||||
- 欢迎态结构验证命令中的 `rg` 模式以 `--page-background` 开头，被误判为参数；
|
||||
Node/CSS 结构检查已通过，后续使用 `rg -n -- '<pattern>'` 校验，不重复原命令。
|
||||
- 最终并行核验中的全量回归超过单次 30 秒返回窗口，改为续接原进程读取终态；域名
|
||||
检索命令因混合引号转义失败，改为多个 `rg -e` 参数完成同范围复核。
|
||||
- 首次完整回归因现有契约要求静态欢迎文案包含“开始与 Claude 对话”而失败；保留新
|
||||
布局并恢复该兼容短语，再运行完整回归。
|
||||
@@ -20,7 +20,8 @@
|
||||
8. 空的 `wait/close` 协作工具不得把已有子代理数量重置为 0；普通工具调用不得进入子代理状态合并路径。
|
||||
9. 当历史中找不到原 `spawnToolId` 时，服务端应将 child 状态合并到最近的协作工具记录，保证刷新后仍可恢复关闭卡片；不得选择普通工具。
|
||||
10. 原生 `subAgentActivity` 必须归一化进同一子代理卡片：`agentThreadId` 作为线程 ID，`agentPath` 作为角色/标题来源，活动 `kind` 映射为状态；随后空 `wait` 复用这些状态，原始活动工具条不重复显示。
|
||||
11. 若 `subAgentActivity` 没有携带原始 prompt，应保守显示可读角色标题，不伪造任务简介；若同线程的其他事件提供 prompt，则继续按既有优先级保留为简介。
|
||||
11. 若 `subAgentActivity` 没有携带原始 prompt，应显示可读角色标题和明确标注的兜底任务说明；若同线程的其他事件提供 prompt，则继续按既有优先级保留真实简介。
|
||||
12. 产品要求所有子代理统一为“标题 + 简介”富卡片。无 prompt 时，从 `agentPath` basename/task name 生成可读标题，并显示兜底任务说明；不得继续展示裸 snake_case 名称或空白简介区域。
|
||||
|
||||
## 视觉要求
|
||||
|
||||
@@ -39,6 +40,7 @@
|
||||
- 关闭空载荷场景保留原标题、简介、线程 ID，并显示关闭状态与非零数量。
|
||||
- 页面刷新和历史重渲染后仍满足上述关闭卡片要求。
|
||||
- 仅包含 `subAgentActivity + 空 wait` 的历史消息显示非零子代理富卡片，标题来自 `agentPath`，且不再同时显示 `subAgentActivity` 原始工具条或 `ID call_...`。
|
||||
- 无 prompt 的历史子代理也显示可读标题与一行兜底简介，布局层级与有 prompt 的富卡片一致。
|
||||
- JavaScript 语法检查及项目回归测试通过。
|
||||
|
||||
## 范围
|
||||
|
||||
4
.trellis/tasks/07-17-gilded-wasteland-theme/check.jsonl
Normal file
4
.trellis/tasks/07-17-gilded-wasteland-theme/check.jsonl
Normal file
@@ -0,0 +1,4 @@
|
||||
{"file":".trellis/spec/frontend/index.md","reason":"前端规范入口与交付检查"}
|
||||
{"file":".trellis/spec/frontend/quality-guidelines.md","reason":"静态检查、回归和代码审查约束"}
|
||||
{"file":".trellis/tasks/07-17-gilded-wasteland-theme/research/theme-architecture.md","reason":"核对主题链路、最小改动面和验证命令"}
|
||||
{"file":".trellis/tasks/07-17-gilded-wasteland-theme/research/asset-slicing.md","reason":"核对资产尺寸、裁剪框、透明边缘和背景构图"}
|
||||
@@ -0,0 +1,5 @@
|
||||
{"file":".trellis/spec/frontend/index.md","reason":"前端规范入口与质量检查清单"}
|
||||
{"file":".trellis/spec/frontend/component-guidelines.md","reason":"保持现有原生 DOM/CSS 组件模式与可访问性"}
|
||||
{"file":".trellis/spec/frontend/quality-guidelines.md","reason":"前端实现和测试质量约束"}
|
||||
{"file":".trellis/tasks/07-17-gilded-wasteland-theme/research/theme-architecture.md","reason":"主题注册、持久化、CSS 隔离和回归链路"}
|
||||
{"file":".trellis/tasks/07-17-gilded-wasteland-theme/research/asset-slicing.md","reason":"背景定位、图标裁剪坐标、透明化与 manifest 方案"}
|
||||
70
.trellis/tasks/07-17-gilded-wasteland-theme/info.md
Normal file
70
.trellis/tasks/07-17-gilded-wasteland-theme/info.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# 暗金荒野主题技术设计
|
||||
|
||||
## 实施结论
|
||||
|
||||
沿用现有纯前端 `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、透明化算法和输出格式。
|
||||
57
.trellis/tasks/07-17-gilded-wasteland-theme/prd.md
Normal file
57
.trellis/tasks/07-17-gilded-wasteland-theme/prd.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 新增暗金荒野主题
|
||||
|
||||
## Goal
|
||||
|
||||
为 cc-web 新增一个独立的“暗金荒野”视觉主题，忠实吸收用户参考图中的黑铁、旧金、余烬、切角边框和暗黑骑士主视觉，同时保留现有 Warframe 主题供即时切换对比。
|
||||
|
||||
## What I already know
|
||||
|
||||
- 用户明确要求新建主题，不直接覆盖当前 Warframe。
|
||||
- 用户提供一张完整界面参考、一张 1672×941 背景图和一张 1672×941 图标板，并授权自行切图。
|
||||
- 主题必须覆盖现有 cc-web 工作台，而不是单独制作静态展示页。
|
||||
- 工作区有其他未提交改动，实施必须精确合并。
|
||||
|
||||
## Assumptions
|
||||
|
||||
- 本轮保持现有默认主题不变，仅在主题选择器中新增选项。
|
||||
- 原 Warframe 主题保留内部标识 `gilded`；新主题显示名“暗金荒野”，内部标识固定为 `wasteland`。
|
||||
- 主题保持现有信息结构与业务交互，不新增功能入口。
|
||||
|
||||
## Requirements
|
||||
|
||||
- 新主题可在现有设置/主题选择入口中选择并持久化。
|
||||
- 现有 `gilded`（Warframe Wasteland）主题移除隐藏限制和启动迁移，继续可选；用户可在它与 `wasteland`（暗金荒野）之间来回切换对比。
|
||||
- 使用用户提供的暗黑骑士图作为全局主背景，并保证聊天文本、导航和弹层可读。
|
||||
- 从图标板切出主题所需的代表性图标，作为本地资产接入。
|
||||
- 侧栏、顶栏、消息、工具调用块、输入区、按钮、表单、弹层和滚动条使用统一暗金设计语言。
|
||||
- 桌面与窄屏布局均不得退化；动效遵守 `prefers-reduced-motion`。
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] 主题选择器中可看到“暗金荒野”和原 Warframe 两个独立选项。
|
||||
- [ ] 切换至暗金荒野后刷新页面，主题仍保持。
|
||||
- [ ] 用户提供的背景和切分图标均由项目本地静态资源加载。
|
||||
- [ ] 主题在常见桌面与移动视口无明显遮挡、溢出或不可读文本。
|
||||
- [ ] 主题切换、关键悬停和聚焦有一致且克制的视觉反馈。
|
||||
- [ ] 现有自动化回归通过，并补充新主题注册/资源相关断言。
|
||||
|
||||
## Definition of Done
|
||||
|
||||
- 静态检查和相关回归测试通过。
|
||||
- 至少完成桌面和窄屏两种视口的浏览器视觉验收。
|
||||
- 不覆盖用户现有未提交改动，不引入额外前端依赖。
|
||||
- 临时 TODO CSV 清理，Trellis 与持久化计划记录收口。
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 重构现有应用信息架构或业务功能。
|
||||
- 删除、重命名或替换原 Warframe 主题。
|
||||
- 生成新的 AI 背景图或建立通用图标编辑器。
|
||||
|
||||
## Technical Notes
|
||||
|
||||
- 优先使用 codebase-memory-mcp 定位主题注册、持久化和测试调用链，再用 `rg`/`sed` 核验行号与未索引静态内容。
|
||||
- 前端视觉遵循 `frontend-skill`：以强主视觉为锚点，避免卡片堆叠与无意义装饰，最多一个主强调色。
|
||||
- 主题 ID 契约：`gilded` 只对应旧 Warframe，`wasteland` 只对应新暗金荒野，默认 `washi` 不变。
|
||||
- 源资产路径：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`（背景）、`sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp`（图标板）、`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`（完整参考）。
|
||||
- 目标资产路径：`public/assets/themes/wasteland/background.webp` 与 `public/assets/themes/wasteland/icons/*.png`。
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
@@ -0,0 +1,280 @@
|
||||
# 暗金荒野主题资产切片研究
|
||||
|
||||
生成时间：2026-07-17T16:41:28+08:00
|
||||
|
||||
## 输入资产
|
||||
|
||||
- 背景图：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`
|
||||
- 图标板：`sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp`
|
||||
- 完整界面参考：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
|
||||
|
||||
三张图尺寸均为 `1672x941`，格式为 RGB WebP，无 alpha 通道。
|
||||
|
||||
坐标约定：本文所有裁剪框均使用 `[x, y, w, h]`，其中 `x+w` / `y+h` 是右边界 / 下边界的排他坐标。由于源图是有损 WebP，边缘估算建议按 `±3px` 处理；真正导出时可再外扩 `2-4px` 做抗锯齿和阴影保留。
|
||||
|
||||
## 背景图定位与遮罩建议
|
||||
|
||||
### 视觉结构
|
||||
|
||||
- 左侧 `x=0-740` 是较干净的暗色烟雾区，适合承载侧边栏、搜索框、会话列表和中左侧主内容。
|
||||
- 右侧 `x=920-1560, y=80-760` 是人物、法阵和权杖主体，视觉权重高，不适合直接压大段正文。
|
||||
- 下方 `y=780-941` 有烟尘、碎石和暗部，可放输入框，但输入框自身需要较实的半透明面板。
|
||||
- 背景平均亮度很低，左侧安全区采样亮度约 `22/255`，右侧人物区约 `38/255`；遮罩目标不是继续压暗整图，而是稳定文本和边框对比。
|
||||
|
||||
### 推荐 CSS
|
||||
|
||||
桌面端推荐保留人物在右中部，同时让左侧和主聊天区域更稳：
|
||||
|
||||
```css
|
||||
.theme-gilded-wasteland {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
color: var(--gilded-text);
|
||||
background-color: #050707;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-gilded-wasteland::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
background-image: url("/assets/theme/gilded-wasteland/background.webp");
|
||||
background-size: cover;
|
||||
background-position: 62% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.theme-gilded-wasteland::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(4, 6, 6, 0.94) 0%,
|
||||
rgba(4, 6, 6, 0.86) 18%,
|
||||
rgba(4, 6, 6, 0.58) 48%,
|
||||
rgba(4, 6, 6, 0.30) 70%,
|
||||
rgba(4, 6, 6, 0.62) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.40) 0%,
|
||||
rgba(0, 0, 0, 0.08) 24%,
|
||||
rgba(0, 0, 0, 0.16) 70%,
|
||||
rgba(0, 0, 0, 0.70) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at 74% 34%,
|
||||
rgba(216, 168, 92, 0.12) 0%,
|
||||
rgba(216, 168, 92, 0.04) 22%,
|
||||
transparent 42%
|
||||
);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.theme-gilded-wasteland::before {
|
||||
background-position: 70% 50%;
|
||||
}
|
||||
|
||||
.theme-gilded-wasteland::after {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(4, 6, 6, 0.92), rgba(4, 6, 6, 0.76)),
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.72));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 定位取值
|
||||
|
||||
- 常规桌面：`background-position: 62% 50%`，人物仍在右侧，左中区域更可读。
|
||||
- 参考图同尺寸复刻：`background-position: center center` 也可用，因为参考图本身没有裁切。
|
||||
- 侧边栏更宽或主面板偏左时：可调到 `64% 50%`，避免人物头部过早进入主消息卡片。
|
||||
- 移动端：建议 `70% 50%` 并提高遮罩不透明度，优先保证内容可读。
|
||||
|
||||
## 图标板网格边界
|
||||
|
||||
图标板不是透明 sprite，而是「暗色背景 + 金色边框 + 标题 + 三规格图标 + 尺寸标签」的展示板。建议把它作为切片源，不要直接拿整板做 CSS sprite。
|
||||
|
||||
### 列边界
|
||||
|
||||
| 列 | x0 | x1 | 宽度 |
|
||||
| --- | ---: | ---: | ---: |
|
||||
| C1 | 50 | 295 | 245 |
|
||||
| C2 | 315 | 562 | 247 |
|
||||
| C3 | 582 | 829 | 247 |
|
||||
| C4 | 846 | 1092 | 246 |
|
||||
| C5 | 1111 | 1358 | 247 |
|
||||
| C6 | 1377 | 1621 | 244 |
|
||||
|
||||
### 行边界
|
||||
|
||||
| 行 | y0 | y1 | 高度 |
|
||||
| --- | ---: | ---: | ---: |
|
||||
| R1 | 50 | 187 | 137 |
|
||||
| R2 | 201 | 339 | 138 |
|
||||
| R3 | 354 | 490 | 136 |
|
||||
| R4 | 506 | 641 | 135 |
|
||||
| R5 | 655 | 786 | 131 |
|
||||
| R6 | 798 | 927 | 129 |
|
||||
|
||||
### 卡片矩阵
|
||||
|
||||
| 卡片 | 名称 | 整卡裁剪框 `[x,y,w,h]` |
|
||||
| --- | --- | --- |
|
||||
| R1C1 | new chat | `[50,50,245,137]` |
|
||||
| R1C2 | dropdown | `[315,50,247,137]` |
|
||||
| R1C3 | search | `[582,50,247,137]` |
|
||||
| R1C4 | shortcut | `[846,50,246,137]` |
|
||||
| R1C5 | collapse / expand | `[1111,50,247,137]` |
|
||||
| R1C6 | add (circle) | `[1377,50,244,137]` |
|
||||
| R2C1 | theme / star | `[50,201,245,138]` |
|
||||
| R2C2 | ai swirl | `[315,201,247,138]` |
|
||||
| R2C3 | status (online) | `[582,201,247,138]` |
|
||||
| R2C4 | loading | `[846,201,246,138]` |
|
||||
| R2C5 | attachment | `[1111,201,247,138]` |
|
||||
| R2C6 | send | `[1377,201,244,138]` |
|
||||
| R3C1 | stop | `[50,354,245,136]` |
|
||||
| R3C2 | settings | `[315,354,247,136]` |
|
||||
| R3C3 | user / profile | `[582,354,247,136]` |
|
||||
| R3C4 | terminal / prompt | `[846,354,246,136]` |
|
||||
| R3C5 | copy | `[1111,354,247,136]` |
|
||||
| R3C6 | delete | `[1377,354,244,136]` |
|
||||
| R4C1 | refresh | `[50,506,245,135]` |
|
||||
| R4C2 | folder | `[315,506,247,135]` |
|
||||
| R4C3 | chat bubble | `[582,506,247,135]` |
|
||||
| R4C4 | notification | `[846,506,246,135]` |
|
||||
| R4C5 | upload | `[1111,506,247,135]` |
|
||||
| R4C6 | download | `[1377,506,244,135]` |
|
||||
| R5C1 | info | `[50,655,245,131]` |
|
||||
| R5C2 | warning | `[315,655,247,131]` |
|
||||
| R5C3 | close | `[582,655,247,131]` |
|
||||
| R5C4 | check | `[846,655,246,131]` |
|
||||
| R5C5 | lock | `[1111,655,247,131]` |
|
||||
| R5C6 | eye / visibility | `[1377,655,244,131]` |
|
||||
| R6C1 | fullscreen | `[50,798,245,129]` |
|
||||
|
||||
## 常用图标推荐裁剪框
|
||||
|
||||
默认建议切 32px 规格，因为它能向下缩放到 24px / 16px，且保留更多金属高光和阴影。下表是「图标主体裁剪框」，不包含卡片标题、尺寸标签和外框。
|
||||
|
||||
| 图标语义 | 来源卡片 | 32px 主体框 `[x,y,w,h]` | 备注 |
|
||||
| --- | --- | --- | --- |
|
||||
| new chat | R1C1 | `[204,85,69,65]` | 十字星形，外扩较多以保留长尖角 |
|
||||
| search | R1C3 | `[746,86,62,62]` | 放大镜手柄在右下，透明化时保留阴影 |
|
||||
| dropdown | R1C2 | `[480,98,59,45]` | 三角图标高度较小，可居中放入 32px 容器 |
|
||||
| theme / star | R2C1 | `[204,236,70,65]` | 星芒很长，不建议再紧缩 |
|
||||
| ai swirl | R2C2 | `[476,236,65,65]` | 旋涡近似正方形 |
|
||||
| status / online | R2C3 | `[749,242,53,53]` | 需要把绿色填充计入 mask |
|
||||
| attachment | R2C5 | `[1277,236,49,60]` | 回形针纵向更高，容器内垂直居中 |
|
||||
| send | R2C6 | `[1533,237,63,57]` | 纸飞机尖角在右上 |
|
||||
| stop | R3C1 | `[211,392,56,56]` | 方形停止按钮 |
|
||||
| settings | R3C2 | `[476,389,65,62]` | 齿轮外齿需要保留 |
|
||||
| user / profile | R3C3 | `[743,389,65,62]` | 头像圆框 |
|
||||
| terminal / prompt | R3C4 | `[1009,393,59,55]` | 矩形外框有阴影 |
|
||||
| copy | R3C5 | `[1278,392,48,56]` | 双页图标偏窄 |
|
||||
| refresh | R4C1 | `[211,541,57,57]` | 圆箭头 |
|
||||
| chat bubble | R4C3 | `[745,541,62,55]` | 气泡尾巴在左下 |
|
||||
| close | R5C3 | `[749,690,53,53]` | X 形，适合放入 32px 方形容器 |
|
||||
| check | R5C4 | `[1010,693,56,47]` | 勾号高度较小，容器内垂直居中 |
|
||||
|
||||
### 16px / 24px / 32px 自动裁剪规则
|
||||
|
||||
整卡内三个规格的位置基本稳定，推荐通过卡片边界自动切，而不是手工维护所有坐标。
|
||||
|
||||
1. 先按上文卡片矩阵定位目标卡片。
|
||||
2. 在卡片内部建立三个横向检测带：
|
||||
|
||||
```text
|
||||
16px: [card.x + 18, card.x + 70]
|
||||
24px: [card.x + 82, card.x + 145]
|
||||
32px: [card.x + 152, card.x + card.w - 20]
|
||||
```
|
||||
|
||||
3. 纵向检测带取：
|
||||
|
||||
```text
|
||||
[card.y + 35, min(card.y + card.h - 35, card.y + 100)]
|
||||
```
|
||||
|
||||
4. 对检测带内像素建立图标 mask：
|
||||
|
||||
```text
|
||||
gold = r > 75 && g > 48 && b < 90 && r >= g - 8 && r - b > 22
|
||||
pale = r > 135 && g > 105 && b < 95 && r - b > 35
|
||||
green = g > 70 && r < 95 && b < 80 && g - r > 8
|
||||
mask = gold || pale || green
|
||||
```
|
||||
|
||||
5. 对 mask 像素取最小外接矩形，再外扩 `4px` 得到主体裁剪框。
|
||||
6. 如果要导出统一尺寸图标，把主体框透明化后放入固定画布：
|
||||
|
||||
| 源规格 | 推荐输出画布 | 用途 |
|
||||
| --- | ---: | --- |
|
||||
| 16px | `20x20` 或 `24x24` | 列表小图标、状态点 |
|
||||
| 24px | `32x32` | 常规按钮 |
|
||||
| 32px | `40x40` 或 `48x48` | 主操作按钮、头像旁标识 |
|
||||
|
||||
### 自动检测边界算法
|
||||
|
||||
卡片边界可以用金色边缘峰值检测自动恢复，适合后续批量生成 manifest。
|
||||
|
||||
```text
|
||||
1. 读取 RGB WebP。
|
||||
2. 计算相邻像素梯度：
|
||||
edge = abs(r-r0) + abs(g-g0) + abs(b-b0)
|
||||
3. 对 edge > 18 的像素分别累加到 x/y 投影。
|
||||
4. 对投影做半径 1-2px 的平滑。
|
||||
5. 在 x 轴选取强峰并按宽度 239-247px 配对，得到左右边界：
|
||||
[50,295], [315,562], [582,829], [846,1092], [1111,1358], [1377,1621]
|
||||
6. 在 y 轴选取强峰并按高度 129-138px 配对，得到上下边界：
|
||||
[50,187], [201,339], [354,490], [506,641], [655,786], [798,927]
|
||||
7. 用卡片位置矩阵给每个 cell 赋语义标签。
|
||||
8. 在 cell 内按 16/24/32 检测带取主体 mask 外接框。
|
||||
```
|
||||
|
||||
## 透明化与输出格式方案
|
||||
|
||||
### 图标透明化
|
||||
|
||||
源图标板是 RGB WebP，背景和图标都已经混合压缩，不能直接得到完美 alpha。推荐流程：
|
||||
|
||||
1. 从图标板按主体框裁剪，裁剪时外扩 `2-4px`。
|
||||
2. 从裁剪框边缘做暗背景 flood-fill，把与边缘连通且亮度低、饱和度低的区域标记为背景。
|
||||
3. 对非背景像素按亮度和色相生成 alpha：
|
||||
- 金色 / 浅金高光：保留。
|
||||
- 绿色状态图标：单独保留，避免被金色阈值漏掉。
|
||||
- 暗色压缩噪点：alpha 压低到 `0`。
|
||||
4. 对 alpha 做轻微 `1px` 羽化，减少 WebP 黑边。
|
||||
5. 把图标居中放入统一画布，按钮内再用 CSS 控制 `width/height`。
|
||||
|
||||
建议保留一份 manifest，记录源图、源框和输出文件名，后续可重复生成：
|
||||
|
||||
```json
|
||||
{
|
||||
"search": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R1C3",
|
||||
"variant": "32px",
|
||||
"bbox": [746, 86, 62, 62],
|
||||
"output": "icons/search-32.png"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 输出格式
|
||||
|
||||
- 背景：保留 WebP 或转 AVIF/WebP 两套，作为 CSS 背景图，不需要透明通道。
|
||||
- 图标主格式：透明 PNG。它对 alpha 最稳，适合切片后人工复核和 UI 直接引用。
|
||||
- 图标 Web 优化：可额外导出 lossless WebP，使用 `image-set()` 或构建工具按浏览器能力选择。
|
||||
- 不建议：直接用原始图标板做 CSS sprite。它包含展示卡片、标题、尺寸标签和暗纹理背景，透明化与 hover/filter 都会困难。
|
||||
|
||||
### 质量检查点
|
||||
|
||||
- 用深色、浅色、半透明按钮背景分别检查黑边。
|
||||
- 对 `status / online` 单独检查绿色中心是否完整。
|
||||
- 对 `new chat`、`theme / star`、`send` 检查尖角是否被裁掉。
|
||||
- 对 `dropdown`、`check` 这类非方形图标，导出后应放入统一画布居中，而不是强行拉伸。
|
||||
@@ -0,0 +1,294 @@
|
||||
#!/usr/bin/env python3
|
||||
"""从用户提供的设计稿中提取 Wasteland 边框与实际尺寸图标。"""
|
||||
|
||||
from pathlib import Path
|
||||
import json
|
||||
|
||||
from PIL import Image, ImageFilter
|
||||
|
||||
|
||||
ROOT = Path('/home/cc-web')
|
||||
REFERENCE = ROOT / 'sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp'
|
||||
ICON_SHEET = ROOT / 'sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp'
|
||||
WELCOME_MATERIAL = ROOT / 'sessions/_attachments/2b88b81d-c5a8-4d92-a518-afeea691eade.webp'
|
||||
ASSET_ROOT = ROOT / 'public/assets/themes/wasteland'
|
||||
FRAME_DIR = ASSET_ROOT / 'frames'
|
||||
ICON_DIR = ASSET_ROOT / 'icons/ui'
|
||||
TEXTURE_DIR = ASSET_ROOT / 'textures'
|
||||
|
||||
|
||||
def gold_alpha(pixel):
|
||||
r, g, b = pixel
|
||||
warm = max(0, min(r - b, g - b + 8))
|
||||
light = max(0, (r + g) // 2 - 24)
|
||||
if r < 38 or g < 27 or warm < 8:
|
||||
return 0
|
||||
return max(0, min(238, warm * 4 + light * 2))
|
||||
|
||||
|
||||
def icon_alpha(pixel):
|
||||
r, g, b = pixel
|
||||
gold = r > 44 and g > 31 and r - b > 15 and g - b > 7
|
||||
pale = r > 118 and g > 86 and r - b > 28
|
||||
green = g > 58 and g - r > 5 and g - b > 10
|
||||
if not (gold or pale or green):
|
||||
return 0
|
||||
if green:
|
||||
score = (g - min(r, b)) * 4 + g
|
||||
else:
|
||||
score = (r - b) * 3 + (g - b) * 2 + (r + g) // 4
|
||||
return max(0, min(255, score))
|
||||
|
||||
|
||||
def crop_frame(source, name, box, zone):
|
||||
crop = source.crop(box).convert('RGB')
|
||||
width, height = crop.size
|
||||
rgba = Image.new('RGBA', crop.size, (0, 0, 0, 0))
|
||||
src = crop.load()
|
||||
dst = rgba.load()
|
||||
for y in range(height):
|
||||
for x in range(width):
|
||||
if not zone(x, y, width, height):
|
||||
continue
|
||||
alpha = gold_alpha(src[x, y])
|
||||
if alpha:
|
||||
r, g, b = src[x, y]
|
||||
dst[x, y] = (r, g, b, alpha)
|
||||
rgba.save(FRAME_DIR / f'{name}.png')
|
||||
return {'name': name, 'source_box': list(box), 'size': [width, height]}
|
||||
|
||||
|
||||
def extract_welcome_card(material):
|
||||
"""从烘焙棋盘格的素材板中分离欢迎卡金属框和干净暗纹理。"""
|
||||
frame_box = (70, 0, 1165, 875)
|
||||
crop = material.crop(frame_box).convert('RGB')
|
||||
frame = Image.new('RGBA', crop.size, (0, 0, 0, 0))
|
||||
src = crop.load()
|
||||
dst = frame.load()
|
||||
for y in range(crop.height):
|
||||
source_y = y + frame_box[1]
|
||||
for x in range(crop.width):
|
||||
source_x = x + frame_box[0]
|
||||
# 730px 以下只保留主框的中央下坠徽记，排除素材板的其他组件。
|
||||
if source_y >= 730 and not 500 <= source_x <= 780:
|
||||
continue
|
||||
alpha = gold_alpha(src[x, y])
|
||||
if alpha < 18:
|
||||
continue
|
||||
r, g, b = src[x, y]
|
||||
dst[x, y] = (r, g, b, alpha)
|
||||
frame.save(FRAME_DIR / 'welcome-card.png')
|
||||
|
||||
surface_box = (350, 250, 950, 600)
|
||||
surface = material.crop(surface_box).convert('RGB')
|
||||
surface.save(TEXTURE_DIR / 'welcome-card-surface.webp', quality=92, method=6)
|
||||
return [
|
||||
{
|
||||
'name': 'welcome-card',
|
||||
'source': WELCOME_MATERIAL.name,
|
||||
'source_box': list(frame_box),
|
||||
'size': list(frame.size),
|
||||
'output': 'frames/welcome-card.png',
|
||||
},
|
||||
{
|
||||
'name': 'welcome-card-surface',
|
||||
'source': WELCOME_MATERIAL.name,
|
||||
'source_box': list(surface_box),
|
||||
'size': list(surface.size),
|
||||
'output': 'textures/welcome-card-surface.webp',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
def slot_box(card, variant):
|
||||
x, y, width, height = card
|
||||
bands = {
|
||||
'16': (x + 14, x + 74),
|
||||
'24': (x + 76, x + 150),
|
||||
'32': (x + 146, x + width - 12),
|
||||
}
|
||||
sx0, sx1 = bands[variant]
|
||||
return sx0, y + 30, sx1, min(y + 105, y + height - 24)
|
||||
|
||||
|
||||
def crop_icon(sheet, name, card, variant, canvas):
|
||||
sx0, sy0, sx1, sy1 = slot_box(card, variant)
|
||||
region = sheet.crop((sx0, sy0, sx1, sy1)).convert('RGB')
|
||||
width, height = region.size
|
||||
alpha = Image.new('L', region.size, 0)
|
||||
ap = alpha.load()
|
||||
rp = region.load()
|
||||
points = []
|
||||
for y in range(height):
|
||||
for x in range(width):
|
||||
value = icon_alpha(rp[x, y])
|
||||
if value:
|
||||
ap[x, y] = value
|
||||
points.append((x, y))
|
||||
if not points:
|
||||
raise RuntimeError(f'没有检测到图标：{name}')
|
||||
left = max(0, min(p[0] for p in points) - 3)
|
||||
top = max(0, min(p[1] for p in points) - 3)
|
||||
right = min(width, max(p[0] for p in points) + 4)
|
||||
bottom = min(height, max(p[1] for p in points) + 4)
|
||||
icon = region.crop((left, top, right, bottom)).convert('RGBA')
|
||||
icon.putalpha(alpha.crop((left, top, right, bottom)).filter(ImageFilter.GaussianBlur(0.18)))
|
||||
|
||||
target_w, target_h = canvas
|
||||
scale = min((target_w - 2) / icon.width, (target_h - 2) / icon.height)
|
||||
resized = icon.resize(
|
||||
(max(1, round(icon.width * scale)), max(1, round(icon.height * scale))),
|
||||
Image.Resampling.LANCZOS,
|
||||
)
|
||||
output = Image.new('RGBA', canvas, (0, 0, 0, 0))
|
||||
output.alpha_composite(resized, ((target_w - resized.width) // 2, (target_h - resized.height) // 2))
|
||||
|
||||
# 输入区图标按有效像素重心居中，避免纸飞机等非对称轮廓在按钮里视觉偏移。
|
||||
if name in {'note', 'queue', 'send', 'stop'}:
|
||||
alpha = output.getchannel('A')
|
||||
pixels = alpha.load()
|
||||
total = weighted_x = weighted_y = 0
|
||||
for py in range(target_h):
|
||||
for px in range(target_w):
|
||||
value = pixels[px, py]
|
||||
if not value:
|
||||
continue
|
||||
total += value
|
||||
weighted_x += px * value
|
||||
weighted_y += py * value
|
||||
if total:
|
||||
offset_x = round((target_w - 1) / 2 - weighted_x / total)
|
||||
offset_y = round((target_h - 1) / 2 - weighted_y / total)
|
||||
if offset_x or offset_y:
|
||||
centered = Image.new('RGBA', canvas, (0, 0, 0, 0))
|
||||
centered.alpha_composite(output, (offset_x, offset_y))
|
||||
output = centered
|
||||
output.save(ICON_DIR / f'{name}.png')
|
||||
return {
|
||||
'name': name,
|
||||
'variant': variant,
|
||||
'slot_box': [sx0, sy0, sx1 - sx0, sy1 - sy0],
|
||||
'detected_box': [sx0 + left, sy0 + top, right - left, bottom - top],
|
||||
'size': [target_w, target_h],
|
||||
}
|
||||
|
||||
|
||||
def main():
|
||||
FRAME_DIR.mkdir(parents=True, exist_ok=True)
|
||||
ICON_DIR.mkdir(parents=True, exist_ok=True)
|
||||
TEXTURE_DIR.mkdir(parents=True, exist_ok=True)
|
||||
reference = Image.open(REFERENCE).convert('RGB')
|
||||
sheet = Image.open(ICON_SHEET).convert('RGB')
|
||||
welcome_material = Image.open(WELCOME_MATERIAL).convert('RGB')
|
||||
|
||||
border_zone = lambda x, y, w, h: x < 8 or x >= w - 8 or y < 8 or y >= h - 8
|
||||
frames = [
|
||||
crop_frame(reference, 'new-chat', (15, 9, 304, 58), lambda x, y, w, h: border_zone(x, y, w, h) or 225 <= x <= 239),
|
||||
crop_frame(reference, 'search', (15, 67, 304, 103), border_zone),
|
||||
crop_frame(reference, 'project', (15, 117, 304, 164), border_zone),
|
||||
crop_frame(reference, 'active-session', (15, 163, 304, 209), lambda x, y, w, h: x < 12 or x >= w - 7 or y < 7 or y >= h - 7),
|
||||
crop_frame(
|
||||
reference,
|
||||
'composer',
|
||||
(557, 830, 1364, 931),
|
||||
lambda x, y, w, h: (
|
||||
(y < 10)
|
||||
or (x < 10 and y < 77)
|
||||
or (x >= w - 10 and y < 77)
|
||||
or (64 <= y < 79)
|
||||
or (w // 2 - 56 <= x <= w // 2 + 56 and y >= 58)
|
||||
),
|
||||
),
|
||||
crop_frame(reference, 'composer-action', (1211, 845, 1257, 891), border_zone),
|
||||
crop_frame(reference, 'tool-call', (421, 603, 1381, 664), border_zone),
|
||||
]
|
||||
|
||||
# 设计稿输入框含两层顶线。UI 叠加时只保留内侧主蚀刻线，
|
||||
# 同时对称收紧左右 5px，使主竖线贴合真实容器边界；徽记保持几何中心不变。
|
||||
composer_path = FRAME_DIR / 'composer.png'
|
||||
composer = Image.open(composer_path).convert('RGBA')
|
||||
composer = composer.crop((5, 5, composer.width - 5, composer.height))
|
||||
composer = composer.resize((807, 101), Image.Resampling.LANCZOS)
|
||||
|
||||
# 设计稿原始裁区的中心徽记视觉中心比画布中心向右约 8px。
|
||||
# 只校正下半部装饰层，保留左右框边和顶部线的原始几何位置。
|
||||
centered_composer = composer.copy()
|
||||
ornament_region = (96, 50, 711, 101)
|
||||
centered_composer.paste((0, 0, 0, 0), ornament_region)
|
||||
centered_composer.alpha_composite(composer.crop(ornament_region), (88, 50))
|
||||
composer = centered_composer
|
||||
composer.save(composer_path)
|
||||
|
||||
# 输入框不能把 807×101 的整图同时做横纵拉伸：窄窗口会让底部徽记
|
||||
# 与真实 74px 框体错层。拆出只含设计稿顶部/侧边的框壳和独立徽记，
|
||||
# 由 CSS 分别控制尺寸，保证任意宽度下都只出现一条边框。
|
||||
shell_height = 74
|
||||
shell = Image.new('RGBA', (composer.width, shell_height), (0, 0, 0, 0))
|
||||
composer_pixels = composer.load()
|
||||
shell_pixels = shell.load()
|
||||
for y in range(shell_height):
|
||||
for x in range(composer.width):
|
||||
if y < 14 or x < 14 or x >= composer.width - 14:
|
||||
shell_pixels[x, y] = composer_pixels[x, y]
|
||||
shell.save(FRAME_DIR / 'composer-shell.png')
|
||||
|
||||
ornament_box = (130, 50, 677, 101)
|
||||
composer.crop(ornament_box).save(FRAME_DIR / 'composer-ornament.png')
|
||||
frames.extend([
|
||||
{
|
||||
'name': 'composer-shell',
|
||||
'derived_from': 'composer.png',
|
||||
'source_box': [0, 0, composer.width, shell_height],
|
||||
'size': [composer.width, shell_height],
|
||||
},
|
||||
{
|
||||
'name': 'composer-ornament',
|
||||
'derived_from': 'composer.png',
|
||||
'source_box': [
|
||||
ornament_box[0],
|
||||
ornament_box[1],
|
||||
ornament_box[2] - ornament_box[0],
|
||||
ornament_box[3] - ornament_box[1],
|
||||
],
|
||||
'size': [ornament_box[2] - ornament_box[0], ornament_box[3] - ornament_box[1]],
|
||||
},
|
||||
])
|
||||
frames.extend(extract_welcome_card(welcome_material))
|
||||
|
||||
cards = {
|
||||
'search': (582, 50, 247, 137),
|
||||
'dropdown': (315, 50, 247, 137),
|
||||
'theme': (50, 201, 245, 138),
|
||||
'ai': (315, 201, 247, 138),
|
||||
'status': (582, 201, 247, 138),
|
||||
'attachment': (1111, 201, 247, 138),
|
||||
'send': (1377, 201, 244, 138),
|
||||
'queue': (846, 201, 246, 138),
|
||||
'stop': (50, 354, 245, 136),
|
||||
'settings': (315, 354, 247, 136),
|
||||
'user': (582, 354, 247, 136),
|
||||
'terminal': (846, 354, 246, 136),
|
||||
'note': (582, 506, 247, 138),
|
||||
}
|
||||
specs = [
|
||||
('search', '16', (20, 20)),
|
||||
('dropdown', '16', (14, 10)),
|
||||
('theme', '24', (26, 26)),
|
||||
('ai', '32', (36, 36)),
|
||||
('status', '16', (16, 16)),
|
||||
('attachment', '24', (26, 28)),
|
||||
('send', '32', (30, 30)),
|
||||
('queue', '32', (30, 30)),
|
||||
('stop', '24', (26, 26)),
|
||||
('settings', '16', (20, 20)),
|
||||
('user', '32', (36, 36)),
|
||||
('terminal', '16', (20, 18)),
|
||||
('note', '32', (36, 36)),
|
||||
]
|
||||
icons = [crop_icon(sheet, name, cards[name], variant, canvas) for name, variant, canvas in specs]
|
||||
(FRAME_DIR / 'manifest.json').write_text(json.dumps(frames, ensure_ascii=False, indent=2) + '\n', encoding='utf-8')
|
||||
(ICON_DIR / 'manifest.json').write_text(json.dumps(icons, ensure_ascii=False, indent=2) + '\n', encoding='utf-8')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
@@ -0,0 +1,346 @@
|
||||
# Wasteland 图标重做审计
|
||||
|
||||
审计时间：2026-07-17
|
||||
|
||||
输入资产：
|
||||
|
||||
- 图标板：`sessions/_attachments/43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp`
|
||||
- 完整界面参考：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
|
||||
- 现有图标：`public/assets/themes/wasteland/icons/*.png`
|
||||
- 当前样式：`public/style.css`
|
||||
|
||||
结论：主 UI 控件不建议继续直接使用现有原色 PNG。推荐改为“清理后的 24px 单色 mask + CSS 暗金材质”，再按控件容器设置 16/18/20/24px 的显示尺寸。`status` 这类带绿色状态语义、头像/主题装饰类图标可以保留原色，但要重新裁切对应规格。
|
||||
|
||||
## 1. 参考界面实际显示尺寸
|
||||
|
||||
图标板原尺寸为 `1672x941`，每张卡片标注了 `16px / 24px / 32px` 三档逻辑使用尺寸。需要注意：标注是设计目标尺寸，不等同于源图中的物理像素；当前切片来自 32px 档展示图，源图里主体通常有 49-70px 宽高。
|
||||
|
||||
完整参考图同为 `1672x941`。按原尺寸查看和局部放大后，主要控件的实际显示尺寸约为：
|
||||
|
||||
| 区域 | 控件 | 参考图容器尺寸 | 图标视觉主体 | 对齐观察 |
|
||||
| --- | --- | ---: | ---: | --- |
|
||||
| 侧栏顶部 | 新会话主按钮 | `229x48` | `18-20px` | 图标+文字整体居中，图标不贴左边 |
|
||||
| 侧栏顶部 | 新会话下拉按钮 | `51x48` | `10-12px` 宽、`7-9px` 高 | 小三角居中 |
|
||||
| 侧栏顶部 | 搜索框 | `288x34` | `18-20px` | 图标左距约 `13px`，图标到文字约 `10px` |
|
||||
| 项目列表 | 折叠/展开三角 | 行高约 `44-46px` | `10-12px` | 左侧垂直居中 |
|
||||
| 项目列表 | 新建圆形加号 | 约 `28-30px` 圆按钮 | `14-16px` | 圆按钮居中，线条要比搜索更实 |
|
||||
| 输入区上方 | 运行状态/模式 chip | 高约 `30-31px` | 状态点约 `8px`，下拉约 `8px` | 文字与图标同基线 |
|
||||
| 输入区 | 输入框外框 | 约 `804x70` | 附件 `22-24px` | 附件没有明显方形底，靠左居中 |
|
||||
| 输入区右侧 | 发送/队列/停止按钮 | 约 `42x42` | 发送 `24-28px`，停止 `17-20px` | 三个按钮等宽等高，间距约 `6px` |
|
||||
| 消息卡右下 | 小动作按钮 | `29-30px` | `14-16px` | 适合单色小图标，不适合复杂材质 PNG |
|
||||
| 侧栏底部 | 设置按钮 | 可点击区约 `34px` 高 | `18px` | 与文字标签水平对齐 |
|
||||
| 侧栏底部 | 主题/星芒入口 | 可点击区约 `34px` 高 | `22-24px` | 星芒比齿轮略大才接近参考 |
|
||||
|
||||
当前 `public/style.css` 中 Wasteland 图标相关尺寸：
|
||||
|
||||
- `.new-chat-btn::before`：`24x24`
|
||||
- `.session-search::before`：`20x20`
|
||||
- `.attach-btn::before` / `.send-btn::before` / `.abort-btn::before` / `.settings-btn::before`：默认 `22x22`
|
||||
- `.settings-btn`：`34x34`
|
||||
- `:is(.settings-select, .mode-select)` 下拉背景：`14x14`
|
||||
- 移动端 `.attach-btn/.send-btn/.abort-btn::before`：降到 `20x20`
|
||||
|
||||
主要偏差：参考图里“主按钮图标”和“输入区发送图标”不是同一套尺寸；当前 CSS 把大部分伪元素统一为 `22x22`，导致小动作按钮偏脏、大按钮又不够有冲击。
|
||||
|
||||
## 2. 现有 PNG 为什么显得糊、脏、比例怪
|
||||
|
||||
现有 PNG 全部是 `64x64 RGBA`，但它们不是干净矢量导出的图标，而是从有损 WebP 展示板里裁 32px 档，再透明化/统一画布得到的位图。抽检全部 17 个 PNG 后，问题集中在以下几点。
|
||||
|
||||
### 2.1 缩放链路过长
|
||||
|
||||
当前路径大致是：
|
||||
|
||||
```text
|
||||
有损 WebP 展示板
|
||||
→ 裁 32px 档的放大截图区域
|
||||
→ 统一输出 64x64 PNG
|
||||
→ CSS 再缩到 14/20/22/24px
|
||||
```
|
||||
|
||||
浏览器最后会把 64px 的半透明阴影、暗边、高光全部平均到 20-24px。图标不会变“精致”，反而会把阴影糊成灰边。
|
||||
|
||||
### 2.2 alpha 过软，缺少清晰实心主体
|
||||
|
||||
PNG 的非透明像素几乎都是半透明像素。统计结果显示：
|
||||
|
||||
- 多数图标的半透明像素占比在 `96%-100%`
|
||||
- `stop.png` 也有约 `92%` 半透明像素
|
||||
- 非透明像素平均 alpha 普遍只有 `67-142/255`
|
||||
|
||||
这说明边缘和主体都偏软。缩小时，暗边会吞掉金色高光，尤其在黑铁背景上更明显。
|
||||
|
||||
### 2.3 有效主体尺寸不一致
|
||||
|
||||
代表性 PNG 的 alpha 边界如下：
|
||||
|
||||
| 图标 | PNG 画布 | alpha 主体边界 | 视觉问题 |
|
||||
| --- | ---: | ---: | --- |
|
||||
| `new-chat.png` | `64x64` | `55x54` | 星芒长尖角多，缩小后中心笔画变弱 |
|
||||
| `search.png` | `64x64` | `54x54` | 圆环+手柄复杂，20px 时手柄容易糊 |
|
||||
| `attachment.png` | `64x64` | `42x54` | 窄高图标，被统一方形缩放后显得瘦 |
|
||||
| `send.png` | `64x64` | `54x49` | 纸飞机横向强，22px 时尖角仍可辨但高光变灰 |
|
||||
| `stop.png` | `64x64` | `54x54` | 填充和外框过重，小尺寸像脏方块 |
|
||||
| `settings.png` | `64x64` | `54x53` | 齿轮齿太多，22px 以下信息密度过高 |
|
||||
| `dropdown.png` | `64x64` | `54x40` | 横宽纵矮，放进 `14x14` 背景后实际只有约 `14x10` |
|
||||
|
||||
同样放进 `22x22` 伪元素时，`attachment` 会显瘦，`stop/settings` 会显重，`dropdown` 会显矮，整体视觉重量不统一。
|
||||
|
||||
### 2.4 原色 PNG 不能响应 CSS 颜色状态
|
||||
|
||||
当前 hover/focus 主要改变 `color`、`background-color`、`border-color`。PNG 作为 `background-image` 不会跟随 `color` 改变，所以 hover 后按钮变亮，但图标仍是暗铜色，造成“按钮亮、图标脏”的割裂。
|
||||
|
||||
## 3. 逐控件建议尺寸与对齐
|
||||
|
||||
建议把“容器尺寸”和“图标主体尺寸”分开控制，不再一刀切 `22x22`。
|
||||
|
||||
| 控件 | 当前落点 | 建议桌面尺寸 | 建议移动尺寸 | 对齐建议 |
|
||||
| --- | --- | ---: | ---: | --- |
|
||||
| 新会话 | `.new-chat-btn::before` | `20x20` | `18x18` | `.new-chat-btn` 改回图标+文字整体居中，`gap: 10px` |
|
||||
| 新会话下拉 | `.new-chat-arrow::before` | `12x8` 或 `14x9` | `12x8` | 按钮 `48-52px` 宽，三角居中；隐藏原文本 `▾` |
|
||||
| 搜索 | `.session-search::before` | `18x18` 或 `20x20` | `18x18` | `left: 13px`，输入框 `padding-left: 42px` |
|
||||
| 附件 | `.attach-btn::before` | `24x24` | `22x22` | 40px 按钮内居中；不要用实心按钮底色压住图标 |
|
||||
| 发送 | `.send-btn::before` | `24x24`，主发送可到 `26x26` | `22x22` | 桌面建议按钮 `40-42px`，纸飞机略向右上视觉居中 |
|
||||
| 停止 | `.abort-btn::before` | `18x18` 或 `20x20` | `18x18` | 与发送按钮同容器，但图标主体必须小一档 |
|
||||
| 设置 | `.settings-btn::before` | `18x18` | `18x18` | 34px 点击区内居中；避免 22px 齿轮过密 |
|
||||
| 下拉 select | `:is(.settings-select, .mode-select)` | `10x7` 或 `12x8` | `10x7` | `background-position: right 12px center`；不要用 `14x14` 方形 PNG |
|
||||
|
||||
补充建议：
|
||||
|
||||
- 消息卡角落动作按钮：容器 `30x30`，图标只用 `14-16px` mask。
|
||||
- 项目折叠三角：使用 `10-12px` mask，不要复用 24px/32px 原色 PNG。
|
||||
- 状态点/在线图标：如果要保留绿色，应单独重裁 `16px` 或 `20px` 原色图，不建议统一金色 mask。
|
||||
|
||||
## 4. 三种方案对比与推荐
|
||||
|
||||
| 方案 | 优点 | 缺点 | 适用范围 | 结论 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 原色 PNG | 最接近图标板的金属纹理；不需要改 DOM；可保留绿色状态、头像等多色信息 | 当前资产来自有损截图且 alpha 过软；缩到 20px 会糊；hover/focus 不能自动变色；每个尺寸都要维护独立图片 | 装饰图标、状态图标、头像/主题入口、较大 32px 展示 | 不推荐作为主 UI 控件方案 |
|
||||
| CSS mask | 形状和材质分离；可用 CSS 控制金色、hover、禁用、危险色；小尺寸更干净；同一 mask 可按控件调尺寸 | 会损失原图内部金属纹理；如果直接拿现有 PNG 当 mask，软 alpha 仍会残留；严格做好需要清理 mask 资产 | new-chat/search/attach/send/stop/settings/dropdown 等交互控件 | 推荐主路径 |
|
||||
| 重新裁 24px | 保留原色质感；比 64px 再缩小更稳；实现成本中等 | 仍是位图，16px 以下会糊；hover 不能换材质；不同控件仍要分别调视觉重量 | 必须保留原色材质的 24px 常规按钮 | 可作为过渡或备用 |
|
||||
|
||||
推荐路径：
|
||||
|
||||
1. 主交互控件使用 CSS mask，但不要直接依赖当前软 alpha PNG；先从图标板重做清晰的 24px 单色 mask，或从现有 PNG 做阈值化/锐化后生成 `icons/masks/*.png`。
|
||||
2. `new-chat/search/attach/send/stop/settings/dropdown` 全部走 mask + CSS 暗金材质。
|
||||
3. `status/user/theme/ai` 这类多色或装饰语义保留原色，但分别重裁 `16/24/32px`，不要再统一 64px 后缩放。
|
||||
|
||||
## 5. CSS mask 规则建议
|
||||
|
||||
下面是基于当前 DOM 的精确 selector 规则。路径可以先指向现有 PNG 做验证；正式落地时建议替换为清理后的 mask 资产，例如 `assets/themes/wasteland/icons/masks/send.png`。
|
||||
|
||||
### 5.1 通用金色材质
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] {
|
||||
--waste-icon-gold:
|
||||
radial-gradient(circle at 32% 22%, rgba(255, 244, 196, 0.98) 0 10%, transparent 32%),
|
||||
linear-gradient(135deg, #fff0bd 0%, #dfbd82 28%, #c49a5a 48%, #8f592b 72%, #f0d7aa 100%);
|
||||
--waste-icon-gold-muted:
|
||||
linear-gradient(135deg, #ead7ad 0%, #c49a5a 44%, #7b4c27 100%);
|
||||
--waste-icon-danger:
|
||||
linear-gradient(135deg, #f1b68d 0%, #b96849 48%, #6f2f24 100%);
|
||||
--waste-icon-shadow:
|
||||
drop-shadow(0 0 2px rgba(223, 189, 130, 0.42))
|
||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(
|
||||
.new-chat-btn,
|
||||
.new-chat-arrow,
|
||||
.attach-btn,
|
||||
.send-btn,
|
||||
.abort-btn,
|
||||
.settings-btn
|
||||
)::before,
|
||||
html[data-theme='wasteland'] .session-search::before {
|
||||
content: '';
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
background: var(--waste-icon-gold);
|
||||
filter: var(--waste-icon-shadow);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 new-chat
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .new-chat-btn {
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .new-chat-btn .new-chat-glyph {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .new-chat-btn::before {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/new-chat.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/new-chat.png');
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 search
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .session-search::before {
|
||||
position: absolute;
|
||||
left: 13px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/search.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/search.png');
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .session-search-input {
|
||||
padding-left: 42px;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 attach
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .attach-btn::before {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/attachment.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/attachment.png');
|
||||
}
|
||||
```
|
||||
|
||||
### 5.5 send
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .send-btn::before {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/send.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/send.png');
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .send-btn:hover::before {
|
||||
background: var(--waste-icon-gold);
|
||||
filter:
|
||||
drop-shadow(0 0 4px rgba(223, 189, 130, 0.58))
|
||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.82));
|
||||
}
|
||||
```
|
||||
|
||||
### 5.6 stop
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .abort-btn::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--waste-icon-danger);
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/stop.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/stop.png');
|
||||
}
|
||||
```
|
||||
|
||||
### 5.7 settings
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .settings-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .settings-btn::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/settings.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/settings.png');
|
||||
}
|
||||
```
|
||||
|
||||
### 5.8 dropdown
|
||||
|
||||
`new-chat-arrow` 是普通按钮，可以直接用 mask：
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .new-chat-arrow {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .new-chat-arrow::before {
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
background: var(--waste-icon-gold-muted);
|
||||
-webkit-mask-image: url('assets/themes/wasteland/icons/dropdown.png');
|
||||
mask-image: url('assets/themes/wasteland/icons/dropdown.png');
|
||||
}
|
||||
```
|
||||
|
||||
`settings-select` 和 `mode-select` 是原生 `select`，当前 DOM 没有外层专用 wrapper，不能安全地只给箭头使用 `::before` mask。当前结构下推荐继续用金色 SVG 背景；如果强制用 CSS mask，需要新增 wrapper 或自定义 select 结构。
|
||||
|
||||
当前 DOM 兼容规则：
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] :is(.settings-select, .mode-select) {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image:
|
||||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.75 11 1.25Z' fill='%23dfbd82' stroke='%238f592b' stroke-width='0.8'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 12px 8px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .settings-select {
|
||||
background-position: right 12px center;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .mode-select {
|
||||
background-position: right 10px center;
|
||||
}
|
||||
```
|
||||
|
||||
若后续允许改 DOM，建议把 select 放进 `.select-shell`，由 `.select-shell::after` 承载 dropdown mask，这样文本和箭头可以完全分层。
|
||||
|
||||
### 5.9 移动端尺寸
|
||||
|
||||
```css
|
||||
@media (max-width: 560px) {
|
||||
html[data-theme='wasteland'] .new-chat-btn::before,
|
||||
html[data-theme='wasteland'] .session-search::before,
|
||||
html[data-theme='wasteland'] .settings-btn::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(.attach-btn, .send-btn)::before {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .abort-btn::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 6. 实施优先级
|
||||
|
||||
1. 先把 `new-chat/search/attach/send/stop/settings/new-chat-arrow` 改成 mask 方案，解决主路径视觉脏和 hover 不一致。
|
||||
2. 同步把 select 下拉从 `dropdown.png` 改成金色 SVG 背景，尺寸降到 `12x8` 或 `10x7`。
|
||||
3. 再生成清理后的 mask 资产，替换当前 PNG mask 源。清理标准是：去掉暗色投影，只保留形状 alpha；小尺寸下需要比原图更粗、更少内部细节。
|
||||
4. 最后再决定是否为 `status/user/theme/ai` 重裁原色 `16/24/32px`，这些不应阻塞主交互控件修复。
|
||||
@@ -0,0 +1,312 @@
|
||||
# 主题架构研究：新增并存 Warframe/Wasteland 主题
|
||||
|
||||
## 结论
|
||||
|
||||
cc-web 的主题系统是一个纯前端、CSS 变量驱动的架构：
|
||||
|
||||
- 主题注册和设置候选统一来自 `public/app.js` 的 `THEME_OPTIONS`。
|
||||
- 当前主题持久化在 `localStorage['cc-web-theme']`，DOM 状态写到 `html[data-theme]`。
|
||||
- `public/index.html` 在 CSS 加载前执行 bootstrap，负责首屏避免闪烁；当前还会把历史 `gilded` 主动迁移回 `washi`。
|
||||
- 样式主体在 `public/style.css`：先用 `html[data-theme='<id>']` 定义语义变量，再用共享暗色 completion selector 与主题专属组件层覆盖具体 UI。
|
||||
- Warframe 当前 ID 是 `gilded`，但已 `hidden: true`，因此不会出现在设置页，也不会被 `normalizeTheme()` 视为有效持久化主题。
|
||||
|
||||
如果目标是“新增一个可并存、可选择的 Warframe/Wasteland 主题”，最稳妥的路径是新增一个可见 ID（例如 `wasteland`），保留 `gilded` 作为隐藏历史/实验 ID 或迁移别名，避免直接复用当前已被首屏 bootstrap 迁移掉的 `gilded`。
|
||||
|
||||
## codebase-memory 检索记录
|
||||
|
||||
| 项 | 结果 |
|
||||
| --- | --- |
|
||||
| 项目 | `home-cc-web` |
|
||||
| 索引状态 | `ready` |
|
||||
| 主要检索 | `theme settings data theme localStorage`、`gilded warframe regression theme assets CSS` |
|
||||
| 关键符号 | `normalizeTheme`、`applyTheme`、`buildThemePickerHtml`、`mountThemePicker`、`openThemeSubpage`、`assertFrontendGildedThemeContract` |
|
||||
| 调用链核验 | `applyTheme <- mountThemePicker <- openThemeSubpage`；`assertFrontendGildedThemeContract <- main` |
|
||||
|
||||
## 主题注册列表
|
||||
|
||||
主题注册点在 `public/app.js:109` 的 `THEME_OPTIONS`。每个主题对象包含：
|
||||
|
||||
| 字段 | 用途 |
|
||||
| --- | --- |
|
||||
| `value` | 写入 `html[data-theme]` 和 `localStorage` 的稳定主题 ID |
|
||||
| `label` | 设置界面展示名 |
|
||||
| `desc` | 设置界面说明文案 |
|
||||
| `swatches` | 设置主题卡片色块 |
|
||||
| `hidden` | 设置候选过滤与持久化合法性过滤 |
|
||||
|
||||
当前注册列表：
|
||||
|
||||
| ID | Label | 可见性 | 位置 |
|
||||
| --- | --- | --- | --- |
|
||||
| `washi` | `Washi Warm` | 可见 | `public/app.js:111` |
|
||||
| `coolvibe` | `CoolVibe Light` | 可见 | `public/app.js:117` |
|
||||
| `editorial` | `Editorial Sand` | 可见 | `public/app.js:123` |
|
||||
| `sage` | `Sage Console` | 可见 | `public/app.js:129` |
|
||||
| `ink` | `Ink Focus` | 可见 | `public/app.js:135` |
|
||||
| `dawn` | `Dawn Studio` | 可见 | `public/app.js:141` |
|
||||
| `carbon` | `Carbon Mint` | 可见暗色 | `public/app.js:147` |
|
||||
| `nocturne` | `Nocturne Teal` | 可见暗色 | `public/app.js:153` |
|
||||
| `cinder` | `Cinder Rose` | 可见暗色 | `public/app.js:159` |
|
||||
| `gilded` | `Warframe Wasteland` | 隐藏 | `public/app.js:165` |
|
||||
|
||||
`gilded` 当前注册为：
|
||||
|
||||
- `label: 'Warframe Wasteland'`
|
||||
- `desc: '四幅 Warframe 画作融合成 Orokin 档案界面...'`
|
||||
- `swatches: ['#070a0b', '#d8c38f', '#78edf0', '#d86b4c']`
|
||||
- `hidden: true`
|
||||
|
||||
关键含义：只加 CSS 不会让主题进入设置页；必须保证 `THEME_OPTIONS` 中有对应 ID，且没有 `hidden: true`。
|
||||
|
||||
## 主题持久化与 DOM 绑定
|
||||
|
||||
| 链路 | 实现 | 位置 |
|
||||
| --- | --- | --- |
|
||||
| 首屏读取 | `localStorage.getItem('cc-web-theme') || 'washi'` | `public/index.html:17` |
|
||||
| 首屏 DOM 绑定 | `document.documentElement.dataset.theme = theme` | `public/index.html:23` |
|
||||
| 运行时初始状态 | `document.documentElement.dataset.theme || localStorage.getItem(...) || 'washi'` | `public/app.js:200` |
|
||||
| 合法性过滤 | `THEME_OPTIONS.some((item) => item.value === theme && !item.hidden) ? theme : 'washi'` | `public/app.js:1013` |
|
||||
| 运行时应用 | 写 `document.documentElement.dataset.theme` | `public/app.js:1030` |
|
||||
| 运行时持久化 | 写 `localStorage.setItem('cc-web-theme', currentTheme)` | `public/app.js:1031` |
|
||||
| 摘要刷新 | `[data-theme-summary]` 同步当前 label | `public/app.js:1021` |
|
||||
|
||||
当前有一个特别重要的迁移逻辑：
|
||||
|
||||
```js
|
||||
if (theme === 'gilded') {
|
||||
theme = 'washi';
|
||||
localStorage.setItem('cc-web-theme', theme);
|
||||
}
|
||||
```
|
||||
|
||||
位置：`public/index.html:18`
|
||||
|
||||
这意味着用户浏览器里即使已有 `gilded`，首屏也会被改回 `washi`。新增并存主题时有两种策略：
|
||||
|
||||
| 策略 | 做法 | 适用场景 |
|
||||
| --- | --- | --- |
|
||||
| 新 ID 并存 | 新增 `wasteland`，`gilded` 继续隐藏或迁移到 `wasteland` | 推荐，避免污染已有隐藏/历史语义 |
|
||||
| 复活 `gilded` | 删除 `hidden: true`，移除 `index.html` 的 `gilded -> washi` 迁移 | 只适合确认不再需要隐藏 Warframe 时 |
|
||||
|
||||
## 设置界面主题候选
|
||||
|
||||
设置页不维护第二份主题列表，候选直接来自 `THEME_OPTIONS`：
|
||||
|
||||
| 入口 | 实现 | 位置 |
|
||||
| --- | --- | --- |
|
||||
| 设置主面板外观入口 | `buildAppearanceSettingsHtml()` 输出 `data-open-theme-page` 和当前主题摘要 | `public/app.js:1084` |
|
||||
| 入口事件绑定 | `mountAppearanceSettings()` 监听 `data-open-theme-page`，打开主题子页 | `public/app.js:1109` |
|
||||
| 主题卡片 HTML | `buildThemePickerHtml()` | `public/app.js:1055` |
|
||||
| 候选过滤 | `THEME_OPTIONS.filter((theme) => !theme.hidden).map(...)` | `public/app.js:1060` |
|
||||
| 点击切换 | `mountThemePicker()` 调用 `applyTheme(button.dataset.themeValue)` | `public/app.js:1073` |
|
||||
| 子页挂载 | `openThemeSubpage()` 生成 overlay，挂载 picker | `public/app.js:1248` |
|
||||
|
||||
结论：新增可见主题只需在 `THEME_OPTIONS` 中加入非 hidden 条目，设置界面会自动出现；如果只想保留隐藏实验主题，设置候选不会展示。
|
||||
|
||||
## Warframe 主题样式与资产
|
||||
|
||||
### 静态资产
|
||||
|
||||
当前 Warframe 资产位于 `public/assets/themes/`：
|
||||
|
||||
| 文件 | 尺寸/格式约束 | 来源于回归断言 |
|
||||
| --- | --- | --- |
|
||||
| `gilded-wasteland.png` | PNG，1000x1500，SHA-256 固定 | `scripts/regression.js:18` |
|
||||
| `warframe-ember-squad.jpg` | JPEG，480x673，SHA-256 固定 | `scripts/regression.js:25` |
|
||||
| `warframe-orokin-figure.jpg` | JPEG，480x672，SHA-256 固定 | `scripts/regression.js:32` |
|
||||
| `warframe-sacrifice.jpg` | JPEG，480x672，SHA-256 固定 | `scripts/regression.js:39` |
|
||||
|
||||
静态服务器 MIME 映射支持 JPEG：
|
||||
|
||||
- `.jpg -> image/jpeg`：`server.js:1289`
|
||||
- `.jpeg -> image/jpeg`：`server.js:1290`
|
||||
- 读取静态文件时用 `MIME_TYPES[ext]` 写 `Content-Type`：`server.js:6281`
|
||||
|
||||
如果新主题继续使用 WebP/PNG/JPEG，通常不需要改 `server.js`；若引入 AVIF、字体、视频等新类型，需要补 MIME 与回归断言。
|
||||
|
||||
### Welcome DOM
|
||||
|
||||
Warframe welcome 图层同时存在于动态和静态首屏：
|
||||
|
||||
| 文件 | 位置 | 内容 |
|
||||
| --- | --- | --- |
|
||||
| `public/app.js` | `public/app.js:320` | `buildWelcomeMarkup(agent)` 动态生成 `.welcome-copy` + `.welcome-visual` |
|
||||
| `public/index.html` | `public/index.html:91` | 静态首屏 welcome DOM |
|
||||
|
||||
图层类名：
|
||||
|
||||
- `.warframe-visual-core`
|
||||
- `.warframe-shard--wasteland`
|
||||
- `.warframe-shard--sacrifice`
|
||||
- `.warframe-shard--orokin`
|
||||
- `.warframe-shard--ember`
|
||||
- `.warframe-visual-axis`
|
||||
- `.warframe-visual-code`
|
||||
|
||||
关键隔离点：通用主题默认隐藏 `.welcome-visual`：
|
||||
|
||||
- `.welcome-art, .welcome-visual { display: none; }`：`public/style.css:2029`
|
||||
- `html:not([data-theme='gilded']) .welcome-visual { display: none !important; }`：`public/style.css:6558`
|
||||
- 只有 `html[data-theme='gilded'] .welcome-msg > .welcome-copy + .welcome-visual[aria-hidden]` 才显示视觉舞台：`public/style.css:6689`
|
||||
|
||||
如果新增 `wasteland` 并存主题，需要把这些选择器复制/泛化到 `html[data-theme='wasteland']`，或者用 `:is(html[data-theme='gilded'], html[data-theme='wasteland'])` 包住 Warframe 专属层。
|
||||
|
||||
### CSS 分层
|
||||
|
||||
当前 `style.css` 的可复用模式是四层：
|
||||
|
||||
| 层 | 作用 | 位置 |
|
||||
| --- | --- | --- |
|
||||
| 语义变量层 | `html[data-theme='gilded']` 定义颜色、面板、Warframe token | `public/style.css:683` |
|
||||
| 共享暗色 completion 层 | 用 `:is(carbon, nocturne, cinder, gilded)` 给暗色主题补齐通用组件 | `public/style.css:745` 和 `public/style.css:6140` |
|
||||
| 基础 UI 组件层 | `.theme-grid`、`.theme-card` 等设置 UI | `public/style.css:4323` |
|
||||
| Warframe 专属组件层 | welcome 舞台、四图布局、Orokin 面板、暗金交互 | `public/style.css:6557` |
|
||||
|
||||
Warframe 专属层中的关键设计：
|
||||
|
||||
- 常规工作区不把图片铺到消息背后，`.chat-main` 只用渐变和 `--page-background`：`public/style.css:6598`
|
||||
- welcome 页面用 `.messages:has(> .welcome-msg)` 限定视觉舞台：`public/style.css:6605`
|
||||
- 四个真实 `<img>` 图层由 CSS 定位裁切，不用 CSS `url(...)` 壁纸：`public/style.css:6739`
|
||||
- 输入、搜索、面板使用不透明 obsidian surfaces，降低图片干扰：`public/style.css:6965`
|
||||
- 选择器 chevron、focus ring 复用 `--warframe-energy`：`public/style.css:6975`、`public/style.css:7175`
|
||||
- 用户/助手消息和附件卡有专门的不透明覆盖：`public/style.css:7188`、`public/style.css:7222`
|
||||
- 移动布局在 `1060px` 和 `560px` 两档重新堆叠四图：`public/style.css:7316`、`public/style.css:7373`
|
||||
- `prefers-reduced-motion` 禁用 gilded 动画和 transition：`public/style.css:7444`
|
||||
|
||||
## 相关回归测试
|
||||
|
||||
主题相关回归集中在 `scripts/regression.js`：
|
||||
|
||||
| 检查 | 位置 |
|
||||
| --- | --- |
|
||||
| 资产清单与 hash/尺寸 | `scripts/regression.js:16` |
|
||||
| 主题契约函数 | `scripts/regression.js:685` |
|
||||
| target 入口 `gilded-theme` | `scripts/regression.js:2204` |
|
||||
| full regression 会调用该主题契约 | `scripts/regression.js:2219` |
|
||||
|
||||
`assertFrontendGildedThemeContract()` 覆盖的关键面：
|
||||
|
||||
- `gilded` 已注册且 `hidden: true`
|
||||
- `normalizeTheme()` 会排除 hidden 主题
|
||||
- 主题 picker 排除 hidden 主题
|
||||
- `index.html` 首屏会把 `gilded` 迁移回 `washi`
|
||||
- JPEG MIME 映射存在
|
||||
- Warframe label、swatches、desc 正确
|
||||
- 动态与静态 welcome DOM 都有四个 Warframe 图层
|
||||
- 不保留旧 `.welcome-art` 单图 placeholder
|
||||
- 项目 UI 不引入 `cdn.displate.com`、`pinterest.com`、`pinimg.com`
|
||||
- 本地资产 hash、格式、尺寸固定
|
||||
- gilded CSS 变量块不含 `url(...)`
|
||||
- 共享暗色 selector 必须包含 `gilded`
|
||||
- Warframe 专属层必须包含 welcome scope、真实图片节点、无远程 URL、移动布局和 reduced-motion
|
||||
- 关键文本对比度满足断言阈值
|
||||
- `style.css` / `app.js` cache-busting 参数仍是 `20260717-warframe-hidden`
|
||||
|
||||
并存新主题时，需要同步调整这份测试：
|
||||
|
||||
| 目标 | 测试调整 |
|
||||
| --- | --- |
|
||||
| 新 ID `wasteland` 可见 | 断言 `value: 'wasteland'` 且不含 `hidden: true` |
|
||||
| 保留 legacy `gilded` | 断言 `gilded` 隐藏，且 `index.html` 可按策略迁移到 `wasteland` 或 `washi` |
|
||||
| CSS 复用 | 断言共享暗色 selector 包含 `wasteland` |
|
||||
| 专属层泛化 | 断言 Warframe selectors 同时覆盖 `gilded`/`wasteland` 或只覆盖新 ID |
|
||||
| 资产变更 | 更新 `GILDED_THEME_ASSETS` 或新增 `WASTELAND_THEME_ASSETS` |
|
||||
| cache bust | 修改 `index.html` 的 `style.css?v=...` 与 `app.js?v=...` 后更新断言 |
|
||||
|
||||
## 新增并存主题的最小改动面
|
||||
|
||||
### 推荐：新增可见 `wasteland`，保留 `gilded` 隐藏
|
||||
|
||||
| 文件 | 最少改动 |
|
||||
| --- | --- |
|
||||
| `public/app.js` | 在 `THEME_OPTIONS` 新增 `value: 'wasteland'` 可见条目；可保留 `gilded hidden` 作为 legacy；如复用 welcome DOM，无需改 `buildWelcomeMarkup()` |
|
||||
| `public/index.html` | 更新首屏迁移策略：历史 `gilded` 可迁移到 `wasteland`；设置新的 cache-busting query |
|
||||
| `public/style.css` | 新增 `html[data-theme='wasteland']` 变量块；把共享暗色 selectors 纳入 `wasteland`；把 Warframe 专属层 selectors 从 `gilded` 泛化到 `gilded/wasteland` 或迁移为 `wasteland` |
|
||||
| `public/assets/themes/*` | 若复用现有四图则不变；若换图则新增本地资产，不使用远程 URL |
|
||||
| `scripts/regression.js` | 新增/调整主题契约，覆盖新 ID、可见性、迁移、CSS selector、资产 hash/尺寸、cache bust |
|
||||
| `server.js` | 仅在引入新 MIME 类型时修改；当前 PNG/JPEG 已覆盖 |
|
||||
|
||||
### 可选：直接复活 `gilded`
|
||||
|
||||
| 文件 | 最少改动 |
|
||||
| --- | --- |
|
||||
| `public/app.js` | 删除 `hidden: true`，让 picker 与 `normalizeTheme()` 接受它 |
|
||||
| `public/index.html` | 删除或反转 `gilded -> washi` 迁移 |
|
||||
| `scripts/regression.js` | 删除“隐藏主题”相关断言，改成“gilded 可见且可持久化” |
|
||||
| `public/style.css` | 当前大部分 CSS 可复用，按需求微调 |
|
||||
|
||||
不推荐直接复活的原因：当前测试和 bootstrap 已明确把 `gilded` 定义为隐藏状态；复活会同时改变持久化、首屏、设置候选和回归契约，语义冲击更大。
|
||||
|
||||
## 可复用隔离模式
|
||||
|
||||
| 模式 | 价值 | 复用建议 |
|
||||
| --- | --- | --- |
|
||||
| 主题 ID 只写 `data-theme` | 让 CSS 完全接管视觉差异 | 新主题不要创建额外 body class |
|
||||
| `THEME_OPTIONS` 单源 | 设置候选、label、swatch 同源 | 不要在设置页硬编码第二份列表 |
|
||||
| `hidden` 双重隔离 | 同时从 picker 和持久化合法性排除 | legacy/实验主题可继续用 |
|
||||
| 首屏 bootstrap | CSS 前写 `data-theme` 避免闪烁 | 新主题必须能被 bootstrap 识别或迁移 |
|
||||
| 语义变量优先 | 大部分组件吃 `--bg-*`、`--text-*`、`--accent` | 新主题先补变量，再补组件特例 |
|
||||
| 共享暗色 completion selector | 暗色主题共用大量控件适配 | 新暗色主题必须加入 `:is(...)` 列表 |
|
||||
| 专属组件层后置 | 高风险视觉只在主题 selector 下生效 | Warframe 视觉不要污染普通主题 |
|
||||
| 默认隐藏视觉舞台 | 非目标主题不会露出 Warframe DOM | 新主题要显式打开 `.welcome-visual` |
|
||||
| 真实 `<img>` 资产节点 | 可被回归测试验证 hash/尺寸，避免远程 wallpaper | 继续保留本地资产和 `img` DOM |
|
||||
| 回归防远程 URL | 防止参考站点进入产品 UI | 新资产必须落本地并断言 |
|
||||
|
||||
## 潜在脏文件冲突
|
||||
|
||||
当前工作区已经有大量未提交内容。本次研究只应新增该文档；后续实现必须先确认这些脏文件归属，避免覆盖他人工作。
|
||||
|
||||
### 已修改的跟踪文件
|
||||
|
||||
| 文件 | 与主题关系 |
|
||||
| --- | --- |
|
||||
| `public/app.js` | 高相关：主题注册、picker、welcome DOM |
|
||||
| `public/index.html` | 高相关：首屏主题 bootstrap、静态 welcome、cache bust |
|
||||
| `public/style.css` | 高相关：主题变量和 Warframe CSS |
|
||||
| `scripts/regression.js` | 高相关：主题回归契约 |
|
||||
| `server.js` | 中相关：静态 MIME |
|
||||
| `dist-exe/cc-web-bun-linux-x64-baseline.tar.gz` | 发布包脏文件，主题实现一般不应直接改 |
|
||||
| `.planning/subagent-card-metadata/*`、`.trellis/tasks/07-11-subagent-card-metadata/prd.md` | 其他任务痕迹，避免误动 |
|
||||
|
||||
### 未跟踪目录/文件
|
||||
|
||||
| 路径 | 说明 |
|
||||
| --- | --- |
|
||||
| `.trellis/tasks/07-17-gilded-wasteland-theme/` | 当前任务目录未跟踪，本研究文档会落在这里 |
|
||||
| `.trellis/tasks/07-17-warframe-gallery-redesign/` | 相关但独立任务 |
|
||||
| `public/assets/themes/` | Warframe 资产目录未跟踪 |
|
||||
| `.planning/dark-gilded-theme/` 等多个 `.planning/*` | 历史/并行规划产物 |
|
||||
| `新增暗金荒野主题 TO DO list.csv`、`重做 Warframe 饱满主题 TO DO list.csv` | 临时 TODO CSV，后续实现前需确认是否可清理 |
|
||||
|
||||
## 验证命令
|
||||
|
||||
建议按从轻到重执行：
|
||||
|
||||
```bash
|
||||
# 1. 只跑主题契约
|
||||
npm run regression -- --target gilded-theme
|
||||
|
||||
# 2. 跑全量回归
|
||||
npm run regression
|
||||
|
||||
# 3. 检查补丁空白错误
|
||||
git diff --check
|
||||
|
||||
# 4. 检查主题相关文件变更面
|
||||
git diff -- public/app.js public/index.html public/style.css scripts/regression.js server.js
|
||||
```
|
||||
|
||||
如果要做浏览器视觉验证：
|
||||
|
||||
```bash
|
||||
# 启动服务
|
||||
npm start
|
||||
|
||||
# 本地确认服务可用
|
||||
curl http://127.0.0.1:<port>/
|
||||
|
||||
# Playwright 远程环境访问时，优先使用 11.144.144.* 网段地址
|
||||
hostname -I
|
||||
```
|
||||
|
||||
注意：本次研究未运行回归测试；以上命令是后续实现/验收阶段应执行的验证路径。
|
||||
@@ -0,0 +1,374 @@
|
||||
# 暗金荒野视觉返工审计
|
||||
|
||||
审计对象：
|
||||
|
||||
- 参考图：`sessions/_attachments/f01c1388-b603-434a-b226-2ff5771d4925.webp`
|
||||
- 背景图：`sessions/_attachments/094d7907-875d-41f4-9985-992c87c9b9cc.webp`
|
||||
- 当前 CSS：`public/style.css`，重点为 `/* === 暗金荒野` 到文件末尾
|
||||
- 当前 mock：`.planning/gilded-wasteland-theme/visual-preview.html`
|
||||
|
||||
审计结论：当前版本的问题不是主题元素不够多，而是过度把所有组件做成厚金边、硬切角、重阴影卡片。参考图的核心语言是“全画布骑士背景 + 半透明黑铁薄面板 + 1px 旧金蚀刻线 + 局部角饰”，需要删重而不是继续加装饰。
|
||||
|
||||
## 1. 参考图 1672x941 像素比例
|
||||
|
||||
以下尺寸为按原尺寸图像检查后的近似像素坐标，误差约 2-6px，适合作为 CSS 目标值。
|
||||
|
||||
| 区域 | 参考图坐标 | 像素尺寸 | 视口占比 | 当前 CSS/Mock 主要偏差 |
|
||||
|---|---:|---:|---:|---|
|
||||
| 左侧栏整体 | `x=0-316, y=0-941` | `316x941` | 宽 `18.9%`，高 `100%` | 当前 `--sidebar-width: 280px`，仅 `16.7%`，明显偏窄 |
|
||||
| 主工作区 | `x=316-1672, y=0-941` | `1356x941` | 宽 `81.1%` | 当前主区更早暴露背景，但侧栏比例不对 |
|
||||
| 顶栏 | `x=316-1672, y=0-57` | `1356x57` | 高 `6.1%` | 当前 `--header-height: 52px`，略矮 |
|
||||
| 侧栏顶部按钮组 | `x=15-303, y=10-57` | `288x47` | 侧栏内宽 `91.1%` | 当前按钮形状可接近，但金边过亮、切角太统一 |
|
||||
| 新会话主按钮 | `x=15-245, y=10-57` | `230x47` | 侧栏宽 `72.8%` | 当前宽度受 280px 侧栏影响，整体缩窄 |
|
||||
| 新会话下拉 | `x=250-303, y=10-57` | `53x47` | 侧栏宽 `16.8%` | 当前可以保留分裂按钮，但边框需要降亮度 |
|
||||
| 搜索框 | `x=15-303, y=68-102` | `288x34` | 侧栏宽 `91.1%` | 当前 `clip-path` 切角不应扩散到搜索框 |
|
||||
| 会话列表主区 | `x=15-303, y=118-870` | `288x752` | 高 `79.9%` | 当前 active item 过厚、阴影过明显 |
|
||||
| 侧栏底栏 | `x=0-316, y=870-941` | `316x71` | 高 `7.5%` | 当前底栏暗度可保留，但不要成为厚卡片 |
|
||||
| 消息可视带 | `x=316-1672, y=57-795` | `1356x738` | 高 `78.4%` | 当前消息卡片堆叠感更强 |
|
||||
| 第一条 assistant 面板 | `x=400-1043, y=87-431` | `643x344` | 宽 `38.5%`，高 `36.6%` | 当前 max-width 接近，但黑底和切角过重 |
|
||||
| 用户气泡 | `x=1152-1572, y=453-516` | `420x63` | 宽 `25.1%`，高 `6.7%` | 当前用户气泡过暗、阴影厚 |
|
||||
| 第二条 assistant 面板 | `x=400-1397, y=516-774` | `997x258` | 宽 `59.6%`，高 `27.4%` | 当前 tool-call 产生太多内部卡片层 |
|
||||
| 输入区总高度 | `x=316-1672, y=795-941` | `1356x146` | 高 `15.5%` | 当前 `.input-area` 作为整条暗底带太明显 |
|
||||
| 模式按钮行 | `x=563-899, y=795-824` | `336x29` | 主区宽 `24.8%` | 当前状态胶囊可保留，边框和填充应更轻 |
|
||||
| 输入框外框 | `x=557-1363, y=832-905` | `806x73` | 宽 `48.2%`，高 `7.8%` | 当前 max-width `800px` 接近，但高度 `54px` 偏矮，阴影偏重 |
|
||||
|
||||
建议直接落地的布局变量：
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] {
|
||||
--sidebar-width: 316px;
|
||||
--header-height: 57px;
|
||||
}
|
||||
```
|
||||
|
||||
移动端不应照搬 316px，可继续使用 `min(88vw, 320px)`，但桌面 mock 必须先贴近参考图。
|
||||
|
||||
## 2. 边框、透明度、切角和面板层级
|
||||
|
||||
### 边框线宽
|
||||
|
||||
| 元素类型 | 参考图特征 | 建议 CSS 值 | 当前问题 |
|
||||
|---|---|---|---|
|
||||
| 全局旧金线 | 大多是 1px，抗锯齿后局部看似 2px | `1px solid rgba(185, 139, 75, 0.28)` | 当前多处用 `rgba(..., 0.52-0.64)`，视觉太亮 |
|
||||
| 高亮角线 | 只在角、按钮边缘、active 状态短暂增强 | `rgba(223, 180, 108, 0.44-0.58)` | 当前整条边都亮，不像蚀刻线 |
|
||||
| 内发亮线 | 很弱，只用于面板顶部/内侧 | `inset 0 1px rgba(255, 230, 180, 0.04-0.08)` | 当前叠加了大阴影，层级失真 |
|
||||
| active 会话 | 1px 金线 + 微弱背景，不是粗卡片 | `border-color: rgba(196,154,90,.46)` | 当前 `inset 3px` + 外阴影太重 |
|
||||
| tool-call 内框 | 1px 细线，嵌在消息面板内 | `border-color: rgba(185,139,75,.30)` | 当前 `border-left: 2px` 和 `clip-path` 抢层级 |
|
||||
|
||||
### 透明度层级
|
||||
|
||||
参考图不是纯黑 UI，而是让背景纹理穿过面板。建议把层级收敛为 4 档：
|
||||
|
||||
| 层级 | 用途 | 建议值 |
|
||||
|---|---|---|
|
||||
| 页面遮罩 | 保证左侧可读，右侧人物可见 | 左侧最高 `0.72`，人物区 `0.04-0.18`，底部 `0.44` |
|
||||
| 侧栏大底 | 黑铁主面板 | `rgba(5, 7, 7, 0.72-0.78)` |
|
||||
| 消息/输入面板 | 半透明工作区卡面 | `rgba(8, 10, 10, 0.62-0.76)` |
|
||||
| 小按钮/标签 | 状态和工具按钮 | `rgba(12, 14, 12, 0.48-0.66)` |
|
||||
|
||||
当前 CSS 中这些值偏重：
|
||||
|
||||
- `body` 左侧遮罩 `0.96/0.90/0.68`，会把背景压成黑墙。
|
||||
- `.sidebar` 背景 `rgba(7,9,8,0.92)`，比参考图更像实心抽屉。
|
||||
- `.msg.assistant` 背景 `rgba(12,15,13,0.88)`，压掉背景纹理。
|
||||
- `.input-wrapper` 背景 `rgba(8,10,9,0.91)`，过实。
|
||||
- `.wasteland-panel-strong` `0.93` 加上 `--shadow-strong`，弹层会变成厚卡片。
|
||||
|
||||
### 切角位置
|
||||
|
||||
参考图的切角是“局部外框语言”，不是全组件形状规则。
|
||||
|
||||
| 区域 | 参考图切角 | 建议 |
|
||||
|---|---|---|
|
||||
| 新会话主按钮/下拉按钮 | 顶部左右约 `6-8px` 斜切，底边更克制 | 可保留小切角 |
|
||||
| 输入框外框 | 外框角部约 `6-8px`，并带底部中心装饰 | 可保留局部角饰，但不要把内容裁掉 |
|
||||
| 消息面板 | 基本是轻圆角矩形，角部仅有细线高光 | 删除 `clip-path`，用 `border-radius: 8px` |
|
||||
| 会话列表项 | active 项有边框和微弱纹理，不是每一项都硬切 | 删除普通项 `clip-path` |
|
||||
| 搜索框/状态胶囊 | 小圆角/轻边框 | 删除切角 |
|
||||
| tool-call | 内嵌细线框，局部角线即可 | 删除 `clip-path` 和厚左边 |
|
||||
| 弹层/菜单 | 可使用轻角饰，但不能整块重卡片 | 优先用 border/pseudo corner，不用全局裁切 |
|
||||
|
||||
核心建议：不要继续依赖 `--wasteland-cut` 做全局形状。只保留一个小尺寸切角变量给主按钮和输入框外框，其余组件回到圆角或直角薄线。
|
||||
|
||||
## 3. 人物/背景可见范围与遮罩梯度
|
||||
|
||||
背景图与项目资源一致，`public/assets/themes/wasteland/background.webp` 和给定背景附件 hash 一致。背景本身就是 1672x941，桌面 `cover center` 不会裁切，这是好事。
|
||||
|
||||
参考图中人物可见范围：
|
||||
|
||||
| 背景元素 | 参考图大致范围 | 视觉要求 |
|
||||
|---|---:|---|
|
||||
| 骑士头盔/头肩 | `x=1180-1370, y=85-265` | 必须清晰可辨，不能被右侧遮罩压黑 |
|
||||
| 胸甲主体 | `x=1110-1415, y=190-620` | 是第一视觉锚点，应保留高光轮廓 |
|
||||
| 法杖/右臂 | `x=1375-1535, y=330-610` | 需要在用户气泡后仍可见 |
|
||||
| 披风左延展 | `x=660-1230, y=270-730` | 应穿过消息面板背后，增强深度 |
|
||||
| 下摆/地面 | `x=1000-1510, y=610-941` | 输入区背后应能隐约看到，不要全黑 |
|
||||
| 圆环符文 | `x=910-1580, y=15-655` | 右半背景层次的关键，不应被径向金色光斑覆盖 |
|
||||
|
||||
参考图遮罩规律：
|
||||
|
||||
1. 左侧 0-320px 需要更暗，但不是全黑，仍能看到纹理。
|
||||
2. 中间 400-1000px 是消息阅读区，面板负责可读性，页面遮罩不应过重。
|
||||
3. 人物区域 1050-1500px 遮罩最轻，保留胸甲和头肩轮廓。
|
||||
4. 底部 800-941px 有自然暗角，但输入框外部仍可透出地面和披风。
|
||||
5. 人工火星不应叠加到很显眼，背景图已有足够颗粒和火星。
|
||||
|
||||
建议替换 `body` 背景遮罩：
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] body {
|
||||
background-color: #080a09;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(3, 5, 5, 0.72) 0%,
|
||||
rgba(3, 5, 5, 0.58) 18%,
|
||||
rgba(3, 5, 5, 0.34) 43%,
|
||||
rgba(3, 5, 5, 0.08) 66%,
|
||||
rgba(3, 5, 5, 0.18) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.18) 0%,
|
||||
rgba(0, 0, 0, 0.02) 32%,
|
||||
rgba(0, 0, 0, 0.12) 72%,
|
||||
rgba(0, 0, 0, 0.44) 100%
|
||||
),
|
||||
url('assets/themes/wasteland/background.webp');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
```
|
||||
|
||||
建议删除当前 `body::after` 人工火星层。若必须保留，`opacity` 不应超过 `0.18`，且不要动画漂移。
|
||||
|
||||
## 4. 当前 CSS 最不相似的 10 项
|
||||
|
||||
| 排名 | 影响 | 当前位置 | 不相似点 | 返工方向 |
|
||||
|---:|---|---|---|---|
|
||||
| 1 | 极高 | `style.css:7498-7502` | 页面遮罩太黑，左侧 `0.96`、中部 `0.68`、底部 `0.74`，人物和纹理被压扁 | 降低遮罩，人物区保持 `0.04-0.18` |
|
||||
| 2 | 极高 | `style.css:805`、`7589-7594`、`7664-7665`、`7722-7723`、`7739-7744`、`7775-7780`、`7831-7838`、`7942-7948`、`7998-8009` | `clip-path` 被扩散到消息、弹层、输入、会话项、tool-call、按钮、搜索框和欢迎卡片 | 只给新会话按钮、输入外框少量角饰；其余删除 |
|
||||
| 3 | 极高 | `style.css:7831-7838` | 主按钮边框 `rgba(...,0.64)` 加切角和阴影，变成厚金属按钮 | 边框降到 `0.42-0.48`，阴影删掉，角饰局部化 |
|
||||
| 4 | 高 | `style.css:7541-7548` | 侧栏 `0.92` 实心黑 + `18px 48px` 侧向阴影，参考图更轻、更透 | 侧栏背景降到 `0.72-0.78`，只留内侧细线 |
|
||||
| 5 | 高 | `style.css:7566-7572` | 顶栏和输入区阴影过强，形成上下厚压条 | 顶栏保留底线；输入区背景透明、无整条阴影 |
|
||||
| 6 | 高 | `style.css:7584-7617` | 消息面板硬切角、暗底 `0.88-0.90`、外阴影重，不像参考图的薄线半透明面板 | 圆角 `8px`，背景 `0.64-0.70`，删除外阴影 |
|
||||
| 7 | 高 | `style.css:7716-7726` | 输入框高度 `54px` 偏矮，背景 `0.91` 偏实，阴影厚；参考图为约 `806x73` 的长金属薄框 | `max-width:806px`，`min-height:72px`，背景 `0.76`，轻内线 |
|
||||
| 8 | 中高 | `style.css:7739-7759` | 会话项每条切角，active 有 `inset 3px` 和外阴影，列表太卡片化 | 普通项无边框，active 仅 1px 旧金线和轻背景 |
|
||||
| 9 | 中高 | `style.css:7775-7807` | tool-call 独立卡片化，`border-left:2px`、切角、阴影抢走消息层级 | 作为消息内部嵌套细线框，去左粗边和阴影 |
|
||||
| 10 | 中 | `style.css:7913-7968` | 统一 22-24px bitmap pseudo-icon 并隐藏 SVG，图标偏大偏实 | 图标降到 `16-18px`，优先保留线性符号或降低 bitmap opacity |
|
||||
|
||||
补充布局偏差：
|
||||
|
||||
- `style.css:31-32` 当前全局 `--sidebar-width: 280px`、`--header-height: 52px`，参考图约为 `316px` 和 `57px`。
|
||||
- mock 使用 `html data-theme="wasteland"` 并直接引入当前 CSS，因此该比例偏差会直接出现在预览里。
|
||||
|
||||
## 5. 可直接落成 CSS 的具体值
|
||||
|
||||
### 5.1 主题变量
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] {
|
||||
--sidebar-width: 316px;
|
||||
--header-height: 57px;
|
||||
|
||||
--wasteland-iron: #080a09;
|
||||
--wasteland-panel: rgba(8, 10, 10, 0.66);
|
||||
--wasteland-panel-soft: rgba(8, 10, 10, 0.52);
|
||||
--wasteland-panel-strong: rgba(7, 9, 9, 0.74);
|
||||
--wasteland-gold: #b98b4b;
|
||||
--wasteland-gold-bright: #dfb46c;
|
||||
--wasteland-line: rgba(185, 139, 75, 0.30);
|
||||
--wasteland-line-strong: rgba(223, 180, 108, 0.44);
|
||||
--wasteland-corner: rgba(231, 185, 109, 0.58);
|
||||
--shadow-strong: 0 14px 34px rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
```
|
||||
|
||||
### 5.2 侧栏和顶部
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .sidebar {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(185, 139, 75, 0.035), transparent 24%),
|
||||
rgba(5, 7, 7, 0.76);
|
||||
border-right: 1px solid rgba(185, 139, 75, 0.32);
|
||||
box-shadow: inset -1px 0 rgba(255, 230, 180, 0.08);
|
||||
backdrop-filter: blur(4px) saturate(0.9);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(.sidebar-header, .sidebar-footer, .chat-header) {
|
||||
background: rgba(7, 9, 9, 0.46);
|
||||
border-color: rgba(185, 139, 75, 0.26);
|
||||
backdrop-filter: blur(3px) saturate(0.9);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .chat-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.3 消息面板
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .messages {
|
||||
padding-top: 29px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .msg {
|
||||
max-width: min(74%, 997px);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .msg.user {
|
||||
max-width: min(42%, 480px);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .msg-bubble {
|
||||
border: 1px solid rgba(185, 139, 75, 0.28);
|
||||
border-radius: 8px;
|
||||
clip-path: none;
|
||||
backdrop-filter: blur(4px) saturate(0.9);
|
||||
box-shadow: inset 0 1px rgba(255, 230, 180, 0.05);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(
|
||||
.msg.assistant .msg-bubble,
|
||||
.msg.cross-conversation .msg-bubble,
|
||||
.msg.cross-conversation-reply .msg-bubble,
|
||||
.msg.system .msg-bubble[data-tone='info']
|
||||
) {
|
||||
background: rgba(8, 10, 10, 0.66);
|
||||
border-color: rgba(185, 139, 75, 0.28);
|
||||
box-shadow: inset 0 1px rgba(255, 230, 180, 0.05);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .msg.user .msg-bubble {
|
||||
background: rgba(38, 28, 19, 0.62);
|
||||
border-color: rgba(196, 154, 90, 0.42);
|
||||
box-shadow: inset 0 1px rgba(255, 230, 180, 0.06);
|
||||
}
|
||||
```
|
||||
|
||||
### 5.4 输入区
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .input-area {
|
||||
background: transparent;
|
||||
border-top: 0;
|
||||
box-shadow: none;
|
||||
padding: 10px 16px 36px;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .input-wrapper {
|
||||
position: relative;
|
||||
width: min(806px, calc(100% - 48px));
|
||||
max-width: 806px;
|
||||
min-height: 72px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(185, 139, 75, 0.46);
|
||||
border-radius: 6px;
|
||||
clip-path: none;
|
||||
background: rgba(7, 8, 8, 0.76);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(255, 230, 180, 0.06),
|
||||
0 6px 18px rgba(0, 0, 0, 0.18);
|
||||
backdrop-filter: blur(4px) saturate(0.9);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .input-wrapper::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -22px;
|
||||
width: 62px;
|
||||
height: 28px;
|
||||
transform: translateX(-50%);
|
||||
background:
|
||||
linear-gradient(135deg, transparent 42%, rgba(223, 180, 108, 0.58) 43% 47%, transparent 48%),
|
||||
linear-gradient(45deg, transparent 42%, rgba(223, 180, 108, 0.58) 43% 47%, transparent 48%);
|
||||
opacity: 0.72;
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
|
||||
### 5.5 侧栏项、按钮和 tool-call
|
||||
|
||||
```css
|
||||
html[data-theme='wasteland'] .session-item {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
clip-path: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .session-item:hover {
|
||||
background: rgba(185, 139, 75, 0.08);
|
||||
border-color: rgba(185, 139, 75, 0.22);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] .session-item.active {
|
||||
background: rgba(43, 31, 20, 0.50);
|
||||
border-color: rgba(196, 154, 90, 0.46);
|
||||
box-shadow: inset 1px 0 rgba(223, 180, 108, 0.48);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(.tool-call, .ccweb-prompt-card) {
|
||||
border: 1px solid rgba(185, 139, 75, 0.30);
|
||||
border-radius: 4px;
|
||||
background: rgba(8, 10, 10, 0.58);
|
||||
clip-path: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(.new-chat-btn, .new-chat-arrow) {
|
||||
min-height: 48px;
|
||||
border: 1px solid rgba(196, 154, 90, 0.48);
|
||||
border-radius: 2px;
|
||||
background: rgba(10, 12, 11, 0.68);
|
||||
color: #dfbd82;
|
||||
box-shadow: inset 0 1px rgba(255, 230, 180, 0.07);
|
||||
}
|
||||
|
||||
html[data-theme='wasteland'] :is(.attach-btn, .send-btn, .abort-btn)::before {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.82;
|
||||
}
|
||||
```
|
||||
|
||||
## 6. 建议删除或替换的当前规则
|
||||
|
||||
优先删除这些规则，而不是在后面继续覆盖：
|
||||
|
||||
| 当前位置 | 建议动作 | 原因 |
|
||||
|---|---|---|
|
||||
| `style.css:7498-7502` | 替换整个 `background-image` | 当前遮罩太黑，径向金光也会污染符文圆环 |
|
||||
| `style.css:7509-7522` | 删除 `body::after` | 人工火星层太显眼，且动画会让背景像装饰层 |
|
||||
| `style.css:7546` | 删除侧栏大外阴影 | 参考图没有厚侧投影 |
|
||||
| `style.css:7566-7572` | 删除顶栏/输入区外阴影 | 上下压条感过强 |
|
||||
| `style.css:7589-7594` | 删除 `border-radius:0` 和 `clip-path`，降低 blur | 消息面板应轻圆角、半透明 |
|
||||
| `style.css:7596-7617` | 替换用户/assistant 背景和阴影 | 当前背景太实、阴影太厚 |
|
||||
| `style.css:7659-7667` | 删除弹层全局 `clip-path` 和 `--shadow-strong` 套用 | 弹层变成厚金属卡片 |
|
||||
| `style.css:7670-7714` | 拆分大范围组件组 | 所有组件共用一个卡片底会形成卡片堆叠 |
|
||||
| `style.css:7716-7726` | 替换输入框规则 | 高度、背景透明度、阴影、切角都偏离 |
|
||||
| `style.css:7728-7736` | 降低 focus/drag 阴影 | 参考图状态变化克制，不应出现 3px 光圈 |
|
||||
| `style.css:7739-7759` | 删除普通会话项切角、hover 位移、active 厚阴影 | 列表应是薄线面板，不是卡片列表 |
|
||||
| `style.css:7775-7781` | 删除 tool-call 左粗边、切角和阴影 | tool-call 应嵌在消息面板内部 |
|
||||
| `style.css:7821-7858` | 替换按钮组厚金边、clip 和 hover 光圈 | 当前最像“游戏按钮皮肤”，不似参考图薄金属线 |
|
||||
| `style.css:7913-7968` | 缩小或移除统一 pseudo bitmap 图标规则 | 图标过大过实，且隐藏 SVG 后细线感丢失 |
|
||||
| `style.css:7986-8010` | 删除欢迎卡片厚框、切角和大阴影 | 欢迎页不能另起一套卡片重装饰 |
|
||||
| `style.css:8068-8071` | 删除 `wastelandEmberDrift` | 若删除 `body::after`，该动画也应删除 |
|
||||
| `style.css:8074-8087` | 替换移动端重遮罩和 `0.97` 侧栏背景 | 移动端也不应变成纯黑抽屉 |
|
||||
|
||||
## 7. 执行顺序建议
|
||||
|
||||
1. 先改布局变量：`--sidebar-width:316px`、`--header-height:57px`。
|
||||
2. 再改 `body` 遮罩，确保骑士主体、符文圆环、披风透出来。
|
||||
3. 删除全组件 `clip-path`，只保留主按钮和输入框的局部角饰。
|
||||
4. 降低所有面板背景 alpha 和外阴影，统一回 1px 旧金线。
|
||||
5. 最后再处理图标尺寸和 active/hover 状态。
|
||||
|
||||
如果只做配色微调，不删厚边、全局切角和重阴影，mock 仍会偏离参考图。
|
||||
26
.trellis/tasks/07-17-gilded-wasteland-theme/task.json
Normal file
26
.trellis/tasks/07-17-gilded-wasteland-theme/task.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "gilded-wasteland-theme",
|
||||
"name": "gilded-wasteland-theme",
|
||||
"title": "新增暗金荒野主题",
|
||||
"description": "",
|
||||
"status": "in_progress",
|
||||
"dev_type": null,
|
||||
"scope": null,
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "shiyue",
|
||||
"assignee": "shiyue",
|
||||
"createdAt": "2026-07-17",
|
||||
"completedAt": null,
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
2
.trellis/tasks/07-17-runtime-image-send/check.jsonl
Normal file
2
.trellis/tasks/07-17-runtime-image-send/check.jsonl
Normal file
@@ -0,0 +1,2 @@
|
||||
{"file":".trellis/spec/guides/cross-layer-thinking-guide.md","reason":"审查前后端附件格式、验证责任、持久化和协议输入是否一致。"}
|
||||
{"file":".trellis/tasks/07-17-runtime-image-send/research/runtime-image-input.md","reason":"核对协议事实、测试预期和已有工作树改动保护。"}
|
||||
2
.trellis/tasks/07-17-runtime-image-send/implement.jsonl
Normal file
2
.trellis/tasks/07-17-runtime-image-send/implement.jsonl
Normal file
@@ -0,0 +1,2 @@
|
||||
{"file":".trellis/spec/guides/cross-layer-thinking-guide.md","reason":"改动跨越 composer、WebSocket、附件解析、会话持久化和 app-server 协议，需要保持边界数据一致。"}
|
||||
{"file":".trellis/tasks/07-17-runtime-image-send/research/runtime-image-input.md","reason":"包含本机 turn/steer 协议、附件安全边界、mock 测试能力和工作树冲突约束。"}
|
||||
35
.trellis/tasks/07-17-runtime-image-send/info.md
Normal file
35
.trellis/tasks/07-17-runtime-image-send/info.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# 技术设计
|
||||
|
||||
## 数据流
|
||||
|
||||
```text
|
||||
上传接口返回附件元数据
|
||||
├─ 普通 composer → submitUserMessage(text, attachments)
|
||||
├─ 排队 → queueItem.attachments → drain → submitUserMessage
|
||||
└─ 运行中插入 → WebSocket message.attachments
|
||||
↓
|
||||
handleMessage 统一解析
|
||||
↓
|
||||
resolvedAttachments（含服务端 path）
|
||||
savedAttachments（无服务端 path）
|
||||
↓
|
||||
handleCodexAppSteerMessage
|
||||
├─ 会话历史保存 savedAttachments
|
||||
├─ turn/steer 使用 resolvedAttachments
|
||||
└─ stale fallback 使用 resolvedAttachments
|
||||
```
|
||||
|
||||
## 安全边界
|
||||
|
||||
- 前端只发送附件 ID 与公开元数据。
|
||||
- 服务端通过 `resolveMessageAttachments` 重新读取元数据文件、检查 storageState 与真实文件存在性。
|
||||
- `localImage.path` 只能来自服务端解析结果。
|
||||
- 会话 JSON 只保存 `savedAttachments`，不泄露服务端本地路径。
|
||||
|
||||
## 边界情况
|
||||
|
||||
- 纯图片：允许；标题/提示回退为图片文件名。
|
||||
- 部分附件失效：保持现有语义，只发送仍可解析的附件。
|
||||
- 所有附件失效且无文本：返回既有 `attachment_unavailable`/`empty_message` 错误。
|
||||
- 删除队列项：清理该项附件，避免孤儿上传。
|
||||
- stale steer：旧 assistant 输出仍按 timestamp + content 插到已持久化用户消息之前。
|
||||
58
.trellis/tasks/07-17-runtime-image-send/prd.md
Normal file
58
.trellis/tasks/07-17-runtime-image-send/prd.md
Normal file
@@ -0,0 +1,58 @@
|
||||
# 修复排队与运行中图片发送
|
||||
|
||||
## 背景
|
||||
|
||||
cc-web 已支持普通消息附带图片，也已通过 Codex app-server 的 `UserInput.localImage` 向新 turn 发送图片。但当前前端会拒绝排队消息与运行中插入消息携带图片，后端 steer 路径也会再次拒绝附件。
|
||||
|
||||
## 目标
|
||||
|
||||
在不改变现有纯文本、slash 指令和笔记模式语义的前提下，让现有图片附件可以：
|
||||
|
||||
1. 随排队消息保存，并在当前 turn 结束后发送。
|
||||
2. 随 Codex App 运行中消息通过 `turn/steer` 插入。
|
||||
3. 在 stale turn 自动转为新 turn 时继续保留。
|
||||
4. 在会话历史与界面中保持与模型实际输入一致。
|
||||
|
||||
## 功能要求
|
||||
|
||||
### 排队发送
|
||||
|
||||
- 队列项保存创建时的附件元数据快照，不能依赖全局 composer 附件状态。
|
||||
- 文本或附件至少存在一个即可入队；纯图片队列允许发送。
|
||||
- 含 slash 的文本仍按现有规则禁止排队。
|
||||
- 入队成功后清空 composer 文本和附件托盘。
|
||||
- 队列卡片显示附件摘要，使用户能确认附件仍在队列中。
|
||||
- 卡片内编辑只修改文本并保留附件。
|
||||
- 删除未发送队列项时清理其上传附件。
|
||||
- 出队时调用普通发送入口并传入附件数组。
|
||||
|
||||
### Codex App 运行中插入
|
||||
|
||||
- 前端运行中插入消息必须携带附件数组，用户气泡也显示相同附件。
|
||||
- 插入成功提交后清空 composer 文本与附件托盘。
|
||||
- 后端复用 `handleMessage` 已解析的安全附件，不信任前端路径。
|
||||
- 持久化用户消息时保存规范化附件元数据。
|
||||
- `turn/steer.input` 同时包含文本与 `localImage`；允许纯图片插入。
|
||||
- 无文本时，系统提示使用图片文件名生成可读摘要。
|
||||
- app-server 返回 `no active turn to steer` 时，replacement turn 必须继续使用同一批已解析附件。
|
||||
|
||||
## 非目标
|
||||
|
||||
- 不支持图片以外的任意文件附件。
|
||||
- 不延长附件 TTL，也不保证超出既有 TTL 后仍可发送。
|
||||
- 不改变 slash 指令、笔记模式、Claude/Codex CLI 进程模式的行为。
|
||||
- 不重构现有附件存储体系。
|
||||
|
||||
## 验收标准
|
||||
|
||||
- 源码中不再存在排队图片和 Codex App 运行中图片的主动拒绝分支。
|
||||
- 排队项保存附件，出队发送时附件不丢失，删除时清理附件。
|
||||
- 成功 `turn/steer` 的 mock 输出能观察到 `localImage`。
|
||||
- steer 用户历史包含原始附件文件名和可用状态。
|
||||
- stale turn replacement 输出能观察到同一图片，历史中的用户消息只出现一次且保留附件。
|
||||
- 新增 `node scripts/regression.js --target runtime-image-send` 在 60 秒内通过。
|
||||
- `node --check public/app.js`、`node --check server.js`、`node --check scripts/regression.js` 通过。
|
||||
|
||||
## 改动保护
|
||||
|
||||
工作树中已有主题与回归相关未提交改动。实现必须使用局部补丁，禁止覆盖或格式化无关区域。
|
||||
@@ -0,0 +1,22 @@
|
||||
# 运行中图片输入调研
|
||||
|
||||
## 协议事实
|
||||
|
||||
- 本机 `codex-cli 0.144.1` 生成的 `TurnSteerParams` Schema 定义 `input: UserInput[]`。
|
||||
- `UserInput` 联合类型包含 `{ type: "localImage", path, detail? }`。
|
||||
- cc-web 的普通 Codex App turn 已通过 `codexAppInputFromMessage` 使用这一结构。
|
||||
|
||||
## 代码事实
|
||||
|
||||
- `handleMessage` 在选择普通 turn 或 steer 之前已经调用 `resolveMessageAttachments`。
|
||||
- `resolveMessageAttachments` 只返回元数据记录存在、未过期且真实文件仍存在的附件。
|
||||
- `sanitizeMessageForPersist` 对历史附件统一调用 `normalizeMessageAttachments`。
|
||||
- mock app-server 的 `textFromInput` 会把 `localImage` 显示为 `[image:<basename>]`，适合协议回归断言。
|
||||
- stale completion 使用用户消息的 timestamp + content 定位插入点，保存附件不会破坏顺序。
|
||||
|
||||
## 工作树约束
|
||||
|
||||
- `public/app.js` 有其他主题相关改动。
|
||||
- `scripts/regression.js` 有大量其他回归新增。
|
||||
- `server.js` 现有未提交差异仅涉及 jpg/jpeg 静态 MIME。
|
||||
- 所有修改必须限制在相关函数与测试邻近区域。
|
||||
26
.trellis/tasks/07-17-runtime-image-send/task.json
Normal file
26
.trellis/tasks/07-17-runtime-image-send/task.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "runtime-image-send",
|
||||
"name": "runtime-image-send",
|
||||
"title": "修复排队与运行中图片发送",
|
||||
"description": "",
|
||||
"status": "planning",
|
||||
"dev_type": null,
|
||||
"scope": null,
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "shiyue",
|
||||
"assignee": "shiyue",
|
||||
"createdAt": "2026-07-17",
|
||||
"completedAt": null,
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
|
||||
{"file": ".trellis/spec/frontend/index.md", "reason": "前端质量检查规范"}
|
||||
{"file": ".planning/warframe-theme-art-direction/task_plan.md", "reason": "四图主题和回归验收标准"}
|
||||
{"file": ".planning/warframe-rich-theme/task_plan.md", "reason": "新单主视觉、真实快捷入口、三档截图与回归验收"}
|
||||
@@ -0,0 +1,4 @@
|
||||
{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
|
||||
{"file": ".trellis/spec/frontend/index.md", "reason": "前端结构、样式和响应式实现规范"}
|
||||
{"file": ".planning/warframe-theme-art-direction/task_plan.md", "reason": "已审查通过的主题构图、素材与验收契约"}
|
||||
{"file": ".planning/warframe-rich-theme/task_plan.md", "reason": "已审查通过的饱满 Warframe 主题策略、结构与截图验收"}
|
||||
33
.trellis/tasks/07-17-warframe-gallery-redesign/prd.md
Normal file
33
.trellis/tasks/07-17-warframe-gallery-redesign/prd.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Warframe 饱满主题重做
|
||||
|
||||
## 背景
|
||||
|
||||
上一版多图方案已因“海报拼贴、抽象、主题不饱满”被用户否定并隐藏。本轮参考用户提供的
|
||||
三套高完成度 Codex 主题，从单一横向主视觉和全页面视觉语言重新实现。参考图中的功能
|
||||
入口只用于判断视觉密度，不复制到 cc-web，也不改变现有输入行为。
|
||||
|
||||
## 需求
|
||||
|
||||
1. 基于原始荒野角色，通过裁切、定位和渐隐融合为无拼贴的横向连续主视觉，原图不被覆盖。
|
||||
2. 其他三张 Warframe 画作只提供材质/光色参考，不作为独立海报摆放。
|
||||
3. 欢迎态保留原有标题、说明和输入区，不新增快捷入口、预设提示词或点击填充逻辑。
|
||||
4. 导航、按钮、输入框、会话项、菜单和聊天表面采用统一 Orokin 图形与材质语言。
|
||||
5. 聊天正文保持不透明高对比表面；非 gilded 主题不受影响。
|
||||
6. 通过三档 Firefox 截图审查后才取消隐藏并交付。
|
||||
|
||||
## 验收
|
||||
|
||||
- 新主视觉本地资源返回 200 和正确图片类型，hash/尺寸固定。
|
||||
- 欢迎态和聊天态都具备统一主题语言，输入内容与交互保持原样。
|
||||
- 1440、1024、390 三档截图通过；专项与完整回归通过。
|
||||
- 视觉审查确认不是海报拼贴、纯换色或大面积空洞。
|
||||
|
||||
## 原始素材映射
|
||||
|
||||
- 原图：`public/assets/themes/gilded-wasteland.png`，保持原文件与 hash，最大主画面。
|
||||
- `/tmp/warframe-candidate-1.jpg` → `warframe-ember-squad.jpg`，赤红战场切片。
|
||||
- `/tmp/warframe-candidate-2.jpg` → `warframe-orokin-figure.jpg`，冷青人物前景。
|
||||
- `/tmp/warframe-candidate-3.jpg` → `warframe-sacrifice.jpg`，暗青金色中轴深景。
|
||||
|
||||
`scripts/regression.js` 需改为新单主视觉、本地资产、无主题专属快捷交互、主题覆盖、隐藏至
|
||||
截图通过、正文无图片背景和移动重排契约，不得继续保留旧四图拼贴断言。
|
||||
26
.trellis/tasks/07-17-warframe-gallery-redesign/task.json
Normal file
26
.trellis/tasks/07-17-warframe-gallery-redesign/task.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "warframe-gallery-redesign",
|
||||
"name": "warframe-gallery-redesign",
|
||||
"title": "Warframe 单主视觉主题重构",
|
||||
"description": "",
|
||||
"status": "completed",
|
||||
"dev_type": null,
|
||||
"scope": "public/app.js public/index.html public/style.css public/assets/themes scripts/regression.js",
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "shiyue",
|
||||
"assignee": "shiyue",
|
||||
"createdAt": "2026-07-17",
|
||||
"completedAt": "2026-07-17",
|
||||
"branch": null,
|
||||
"base_branch": "main",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
Binary file not shown.
188
public/app.js
188
public/app.js
@@ -161,6 +161,19 @@
|
||||
desc: '炭黑底配低饱和玫瑰色，暗色里保留一点温度。',
|
||||
swatches: ['#151112', '#2a2022', '#e68193', '#67c587'],
|
||||
},
|
||||
{
|
||||
value: 'gilded',
|
||||
label: 'Warframe Wasteland',
|
||||
desc: '暖象牙与焦土铜铺开 Orokin 荒野档案，冷青能量只作细节点缀。',
|
||||
swatches: ['#fbf3e5', '#efe4d2', '#7a3f20', '#147276'],
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
value: 'wasteland',
|
||||
label: '暗金荒野',
|
||||
desc: '黑铁面板悬浮于荒野骑士主视觉之上，以旧金、余烬与状态绿标记工作层级。',
|
||||
swatches: ['#050707', '#171511', '#c49a5a', '#6f783f'],
|
||||
},
|
||||
];
|
||||
|
||||
// --- State ---
|
||||
@@ -310,9 +323,39 @@
|
||||
window.addEventListener('resize', setVH);
|
||||
window.addEventListener('orientationchange', () => setTimeout(setVH, 100));
|
||||
|
||||
function buildWelcomeMarkup(agent) {
|
||||
const label = AGENT_LABELS[agent] || AGENT_LABELS.claude;
|
||||
return `<div class="welcome-msg"><div class="welcome-icon">✿</div><h3>欢迎使用 CC-Web</h3><p>开始与 ${label} 对话</p></div>`;
|
||||
function getWelcomeProjectName(cwd = currentCwd) {
|
||||
return getPathLeaf(cwd) || '当前项目';
|
||||
}
|
||||
|
||||
function getWelcomeCopy(cwd = currentCwd) {
|
||||
return `你正在操作 ${getWelcomeProjectName(cwd)}`;
|
||||
}
|
||||
|
||||
function syncWelcomeCopy(cwd = currentCwd) {
|
||||
const copy = messagesDiv.querySelector('[data-welcome-project-copy]');
|
||||
if (copy) copy.textContent = getWelcomeCopy(cwd);
|
||||
}
|
||||
|
||||
function buildWelcomeMarkup(cwd = currentCwd) {
|
||||
return `<div class="welcome-msg">
|
||||
<section class="warframe-hero" aria-labelledby="warframe-welcome-title">
|
||||
<div class="warframe-hero-art" aria-hidden="true">
|
||||
<img class="warframe-hero-image" src="assets/themes/gilded-wasteland.png" alt="" draggable="false" decoding="async">
|
||||
<span class="warframe-hero-orbit"></span>
|
||||
<span class="warframe-hero-emblem"></span>
|
||||
</div>
|
||||
<div class="wasteland-welcome-art" aria-hidden="true">
|
||||
<div class="wasteland-welcome-surface"></div>
|
||||
<img class="wasteland-welcome-frame" src="assets/themes/wasteland/frames/welcome-card.png" alt="" draggable="false" decoding="async">
|
||||
</div>
|
||||
<div class="welcome-icon">✿</div>
|
||||
<div class="welcome-copy">
|
||||
<div class="welcome-kicker">OROKIN FIELD ARCHIVE · CC-WEB</div>
|
||||
<h3 id="warframe-welcome-title" data-welcome-project-copy>${escapeHtml(getWelcomeCopy(cwd))}</h3>
|
||||
<p>本次你要构建什么？</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function normalizeAgent(agent) {
|
||||
@@ -526,6 +569,8 @@
|
||||
const text = document.createElement('div');
|
||||
text.className = 'note-text';
|
||||
text.textContent = message.text;
|
||||
const attachmentSummary = renderAttachmentPreviews(message.attachments);
|
||||
if (attachmentSummary) text.insertAdjacentHTML('beforeend', attachmentSummary);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.className = 'note-actions';
|
||||
@@ -738,16 +783,21 @@
|
||||
return true;
|
||||
}
|
||||
|
||||
function getQueuedMessageValidationError(content) {
|
||||
function getQueuedMessageValidationError(content, attachments = []) {
|
||||
const text = String(content || '').trim();
|
||||
const attachmentList = Array.isArray(attachments) ? attachments : [];
|
||||
if (!supportsQueuedSend()) return '排队发送仅支持 Codex App。';
|
||||
if (!String(content || '').trim()) return '排队内容不能为空。';
|
||||
if (String(content || '').trim().startsWith('/')) return '排队发送暂不支持 slash 指令。';
|
||||
if (!text && attachmentList.length === 0) return '排队内容不能为空。';
|
||||
if (text.startsWith('/')) return '排队发送暂不支持 slash 指令。';
|
||||
return '';
|
||||
}
|
||||
|
||||
function addQueuedMessage(text, options = {}) {
|
||||
const content = String(text || '').trim();
|
||||
const validationError = getQueuedMessageValidationError(content);
|
||||
const attachments = Array.isArray(options.attachments)
|
||||
? options.attachments.map((attachment) => ({ ...attachment }))
|
||||
: [];
|
||||
const validationError = getQueuedMessageValidationError(content, attachments);
|
||||
if (validationError) {
|
||||
appendError(validationError);
|
||||
return false;
|
||||
@@ -755,6 +805,7 @@
|
||||
const message = {
|
||||
id: `queued-${Date.now().toString(36)}-${++queuedMessageSeq}`,
|
||||
text: content,
|
||||
attachments,
|
||||
createdAt: Date.now(),
|
||||
};
|
||||
getCurrentQueue(true).push(message);
|
||||
@@ -765,15 +816,14 @@
|
||||
|
||||
function queueMessageFromInput() {
|
||||
const text = msgInput.value.trim();
|
||||
if (!text || isBlockingSessionLoad()) return;
|
||||
if ((!text && pendingAttachments.length === 0) || isBlockingSessionLoad()) return;
|
||||
hideCmdMenu();
|
||||
hideOptionPicker();
|
||||
if (pendingAttachments.length > 0) {
|
||||
appendError('排队发送暂不支持图片附件，请先移除图片。');
|
||||
return;
|
||||
}
|
||||
if (addQueuedMessage(text)) {
|
||||
const attachments = pendingAttachments.map((attachment) => ({ ...attachment }));
|
||||
if (addQueuedMessage(text, { attachments })) {
|
||||
msgInput.value = '';
|
||||
pendingAttachments = [];
|
||||
renderPendingAttachments();
|
||||
autoResize();
|
||||
}
|
||||
}
|
||||
@@ -782,7 +832,7 @@
|
||||
const found = findPendingNote(noteId);
|
||||
if (!found) return;
|
||||
const text = String(found.note.text || '').trim();
|
||||
const validationError = getQueuedMessageValidationError(text);
|
||||
const validationError = getQueuedMessageValidationError(text, []);
|
||||
if (validationError) {
|
||||
appendError(validationError);
|
||||
return;
|
||||
@@ -809,7 +859,10 @@
|
||||
}
|
||||
|
||||
function removeQueuedMessage(queueId) {
|
||||
if (!dropQueuedMessage(queueId)) return;
|
||||
const message = dropQueuedMessage(queueId);
|
||||
if (!message) return;
|
||||
(Array.isArray(message.attachments) ? message.attachments : [])
|
||||
.forEach((attachment) => deleteUploadedAttachment(attachment?.id));
|
||||
renderPendingNotes({ scroll: false });
|
||||
}
|
||||
|
||||
@@ -917,7 +970,7 @@
|
||||
|
||||
const save = () => {
|
||||
const next = editor.value.trim();
|
||||
const validationError = getQueuedMessageValidationError(next);
|
||||
const validationError = getQueuedMessageValidationError(next, found.message.attachments);
|
||||
if (validationError) {
|
||||
appendError(validationError);
|
||||
editor.focus();
|
||||
@@ -980,15 +1033,18 @@
|
||||
renderPendingNotes({ scroll: false });
|
||||
|
||||
const text = String(message?.text || '').trim();
|
||||
if (!text) {
|
||||
const attachments = Array.isArray(message?.attachments)
|
||||
? message.attachments.map((attachment) => ({ ...attachment }))
|
||||
: [];
|
||||
if (!text && attachments.length === 0) {
|
||||
scheduleQueuedMessageDrain();
|
||||
return;
|
||||
}
|
||||
submitUserMessage(text);
|
||||
submitUserMessage(text, attachments);
|
||||
}
|
||||
|
||||
function normalizeTheme(theme) {
|
||||
return THEME_OPTIONS.some((item) => item.value === theme) ? theme : 'washi';
|
||||
return THEME_OPTIONS.some((item) => item.value === theme && !item.hidden) ? theme : 'washi';
|
||||
}
|
||||
|
||||
function getThemeOption(theme) {
|
||||
@@ -1034,7 +1090,7 @@
|
||||
return `
|
||||
${showSectionTitle ? '<div class="settings-section-title">界面主题</div>' : ''}
|
||||
<div class="theme-grid">
|
||||
${THEME_OPTIONS.map((theme) => `
|
||||
${THEME_OPTIONS.filter((theme) => !theme.hidden).map((theme) => `
|
||||
<button class="theme-card${theme.value === currentTheme ? ' active' : ''}" type="button" data-theme-value="${theme.value}">
|
||||
<div class="theme-card-preview">
|
||||
${theme.swatches.map((color) => `<span class="theme-card-swatch" style="background:${color}"></span>`).join('')}
|
||||
@@ -4099,6 +4155,7 @@
|
||||
}
|
||||
chatCwd.disabled = !currentCwd;
|
||||
chatCwd.hidden = !currentCwd;
|
||||
syncWelcomeCopy(currentCwd);
|
||||
}
|
||||
|
||||
function currentSessionWaitState() {
|
||||
@@ -4212,7 +4269,7 @@
|
||||
updateSessionIdBadge();
|
||||
updateCwdBadge();
|
||||
updateReloadMcpButtonUI();
|
||||
messagesDiv.innerHTML = buildWelcomeMarkup(currentAgent);
|
||||
messagesDiv.innerHTML = buildWelcomeMarkup(currentCwd);
|
||||
setStatsDisplay(null);
|
||||
renderPendingAttachments();
|
||||
renderPendingNotes({ scroll: false });
|
||||
@@ -6541,6 +6598,48 @@
|
||||
return title.length > 36 ? `${title.slice(0, 36)}…` : title;
|
||||
}
|
||||
|
||||
const COLLAB_AGENT_AUTO_TITLE_TOKEN_LABELS = {
|
||||
plan: '计划',
|
||||
review: '审查',
|
||||
reviewer: '审查',
|
||||
backend: '后端',
|
||||
frontend: '前端',
|
||||
state: '状态',
|
||||
implement: '实现',
|
||||
implementation: '实现',
|
||||
check: '检查',
|
||||
test: '测试',
|
||||
research: '调研',
|
||||
design: '设计',
|
||||
release: '发布',
|
||||
runtime: '运行时',
|
||||
audit: '审计',
|
||||
fix: '修复',
|
||||
document: '文档',
|
||||
docs: '文档',
|
||||
quality: '质量',
|
||||
trellis: 'Trellis',
|
||||
};
|
||||
|
||||
function joinCollabAgentAutoTitleParts(parts) {
|
||||
return parts.reduce((title, part) => {
|
||||
if (!title) return part;
|
||||
const shouldJoinDirectly = /[\u4e00-\u9fff]$/.test(title) && /^[\u4e00-\u9fff]/.test(part);
|
||||
return shouldJoinDirectly ? `${title}${part}` : `${title} ${part}`;
|
||||
}, '');
|
||||
}
|
||||
|
||||
function readableCollabAgentAutoTitle(value) {
|
||||
const text = cleanCollabAgentText(value);
|
||||
if (!/^[a-z0-9]+(?:[_-][a-z0-9]+)+$/.test(text)) return text;
|
||||
const parts = text.split(/[_-]+/).map((token) => {
|
||||
const mapped = COLLAB_AGENT_AUTO_TITLE_TOKEN_LABELS[token];
|
||||
if (mapped) return mapped;
|
||||
return token ? `${token.charAt(0).toUpperCase()}${token.slice(1)}` : '';
|
||||
}).filter(Boolean);
|
||||
return joinCollabAgentAutoTitleParts(parts);
|
||||
}
|
||||
|
||||
function collabAgentTaskDescription(state = {}, fallbackPrompt = '') {
|
||||
return cleanCollabAgentText(
|
||||
state.taskDescription
|
||||
@@ -6556,6 +6655,7 @@
|
||||
|
||||
function pickCollabAgentTitle(state, id, index) {
|
||||
const taskDescription = cleanCollabAgentText(state?.taskDescription || state?.prompt || '');
|
||||
const canReadAutomaticTitle = state?.hasReadableSourceTitle !== false;
|
||||
const titleCandidates = [
|
||||
state.label,
|
||||
state.title,
|
||||
@@ -6564,7 +6664,9 @@
|
||||
];
|
||||
for (const value of titleCandidates) {
|
||||
const candidate = cleanCollabAgentText(value);
|
||||
if (candidate && !isGenericCollabAgentLabel(candidate, id)) return candidate;
|
||||
if (candidate && !isGenericCollabAgentLabel(candidate, id)) {
|
||||
return canReadAutomaticTitle ? readableCollabAgentAutoTitle(candidate) : candidate;
|
||||
}
|
||||
}
|
||||
const promptTitle = collabAgentTitleFromPrompt(taskDescription);
|
||||
if (promptTitle) return promptTitle;
|
||||
@@ -6589,6 +6691,7 @@
|
||||
const incomingHasReadableSourceTitle = incomingState.hasReadableSourceTitle == null
|
||||
? hasReadableCollabAgentTitle(incomingState, id)
|
||||
: incomingState.hasReadableSourceTitle === true;
|
||||
const hasReadableSourceTitle = incomingHasReadableSourceTitle || previousState.hasReadableSourceTitle === true;
|
||||
if (incomingHasReadableSourceTitle) {
|
||||
nextState.label = pickCollabAgentTitle(incomingState, id, index);
|
||||
} else {
|
||||
@@ -6599,6 +6702,7 @@
|
||||
}
|
||||
return {
|
||||
...nextState,
|
||||
hasReadableSourceTitle,
|
||||
label: pickCollabAgentTitle(nextState, id, index),
|
||||
taskDescription,
|
||||
};
|
||||
@@ -6727,7 +6831,10 @@
|
||||
return Object.entries(states).map(([id, value], index) => {
|
||||
const state = value && typeof value === 'object' ? value : { status: value };
|
||||
const taskDescription = collabAgentTaskDescription(state, data?.prompt || '');
|
||||
const label = pickCollabAgentTitle({ ...state, taskDescription }, id, index);
|
||||
const hasReadableSourceTitle = state.hasReadableSourceTitle == null
|
||||
? hasReadableCollabAgentTitle(state, id)
|
||||
: state.hasReadableSourceTitle === true;
|
||||
const label = pickCollabAgentTitle({ ...state, taskDescription, hasReadableSourceTitle }, id, index);
|
||||
const role = cleanCollabAgentText(state.role || state.agent || state.agentType || '');
|
||||
let status = cleanCollabAgentText(state.status || state.state || 'pending') || 'pending';
|
||||
if (state.closedAt && collabStateTone(status) !== 'closed') status = 'closed';
|
||||
@@ -6742,7 +6849,7 @@
|
||||
status,
|
||||
detail,
|
||||
taskDescription,
|
||||
hasReadableSourceTitle: hasReadableCollabAgentTitle(state, id),
|
||||
hasReadableSourceTitle,
|
||||
};
|
||||
});
|
||||
}
|
||||
@@ -7190,11 +7297,14 @@
|
||||
stateEntries.forEach((entry, index) => {
|
||||
const tone = collabStateTone(entry.status);
|
||||
const displayTitle = pickCollabAgentTitle(entry, entry.id, index);
|
||||
const descriptionText = summarizePrompt(entry.taskDescription);
|
||||
const fallbackDescription = `子代理任务：${displayTitle}`;
|
||||
const descriptionText = summarizePrompt(entry.taskDescription) || fallbackDescription;
|
||||
const descriptionTitle = cleanCollabAgentText(entry.taskDescription) || fallbackDescription;
|
||||
const item = document.createElement('div');
|
||||
item.className = 'collab-agent-item';
|
||||
item.title = [
|
||||
displayTitle,
|
||||
descriptionTitle,
|
||||
entry.role ? `角色: ${entry.role}` : '',
|
||||
entry.detail ? `结果: ${entry.detail}` : '',
|
||||
entry.id ? `ID: ${entry.id}` : '',
|
||||
@@ -7218,7 +7328,7 @@
|
||||
|
||||
const label = document.createElement('div');
|
||||
label.className = 'collab-agent-item-label';
|
||||
label.textContent = pickCollabAgentTitle(entry, entry.id, index);
|
||||
label.textContent = displayTitle;
|
||||
row.appendChild(label);
|
||||
|
||||
const chip = document.createElement('span');
|
||||
@@ -7246,13 +7356,11 @@
|
||||
}
|
||||
item.appendChild(row);
|
||||
|
||||
if (descriptionText) {
|
||||
const description = document.createElement('div');
|
||||
description.className = 'collab-agent-item-description';
|
||||
description.textContent = descriptionText;
|
||||
description.title = entry.taskDescription;
|
||||
item.appendChild(description);
|
||||
}
|
||||
const description = document.createElement('div');
|
||||
description.className = 'collab-agent-item-description';
|
||||
description.textContent = descriptionText;
|
||||
description.title = descriptionTitle;
|
||||
item.appendChild(description);
|
||||
|
||||
if (entry.id || entry.role) {
|
||||
const footer = document.createElement('div');
|
||||
@@ -7392,7 +7500,7 @@
|
||||
messagesDiv.innerHTML = '';
|
||||
clearUserMessageIndex();
|
||||
if (messages.length === 0) {
|
||||
messagesDiv.innerHTML = buildWelcomeMarkup(currentAgent);
|
||||
messagesDiv.innerHTML = buildWelcomeMarkup(currentCwd);
|
||||
updateUserOutlinePanel();
|
||||
renderPendingNotes({ scroll: false });
|
||||
scrollToBottom();
|
||||
@@ -8142,6 +8250,7 @@
|
||||
if (!isDragging) scrollbarEl.classList.remove('scrolling');
|
||||
}, 1200);
|
||||
}, { passive: true });
|
||||
|
||||
new ResizeObserver(updateScrollbar).observe(messagesDiv);
|
||||
|
||||
// Drag logic
|
||||
@@ -8809,16 +8918,13 @@
|
||||
hideOptionPicker();
|
||||
|
||||
if (runtimeInsert) {
|
||||
if (pendingAttachments.length > 0) {
|
||||
appendError('Codex App 运行中插入暂不支持图片附件，请先移除图片。');
|
||||
return;
|
||||
}
|
||||
if (isKnownSlashCommandText(text)) {
|
||||
appendError('Codex App 运行中暂不支持 slash 指令插入。');
|
||||
return;
|
||||
}
|
||||
const attachments = pendingAttachments.map((attachment) => ({ ...attachment }));
|
||||
const messageId = createLocalId('user');
|
||||
const element = createMsgElement('user', text, [], { messageId, codexAppSteerStatus: 'pending' });
|
||||
const element = createMsgElement('user', text, attachments, { messageId, codexAppSteerStatus: 'pending' });
|
||||
const streamEl = document.getElementById('streaming-msg');
|
||||
const shouldFollow = isNearBottom();
|
||||
if (streamEl && streamEl.parentNode === messagesDiv) {
|
||||
@@ -8838,8 +8944,10 @@
|
||||
} else {
|
||||
updateScrollbar();
|
||||
}
|
||||
send({ type: 'message', text, sessionId: currentSessionId, mode: currentMode, agent: currentAgent, clientMessageId: messageId });
|
||||
send({ type: 'message', text, attachments, sessionId: currentSessionId, mode: currentMode, agent: currentAgent, clientMessageId: messageId });
|
||||
msgInput.value = '';
|
||||
pendingAttachments = [];
|
||||
renderPendingAttachments();
|
||||
autoResize();
|
||||
return;
|
||||
}
|
||||
|
||||
BIN
public/assets/themes/gilded-wasteland.png
Normal file
BIN
public/assets/themes/gilded-wasteland.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/assets/themes/warframe-ember-squad.jpg
Normal file
BIN
public/assets/themes/warframe-ember-squad.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
public/assets/themes/warframe-orokin-figure.jpg
Normal file
BIN
public/assets/themes/warframe-orokin-figure.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
public/assets/themes/warframe-sacrifice.jpg
Normal file
BIN
public/assets/themes/warframe-sacrifice.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
public/assets/themes/wasteland/background.webp
Normal file
BIN
public/assets/themes/wasteland/background.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
BIN
public/assets/themes/wasteland/frames/active-session.png
Normal file
BIN
public/assets/themes/wasteland/frames/active-session.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
public/assets/themes/wasteland/frames/composer-action.png
Normal file
BIN
public/assets/themes/wasteland/frames/composer-action.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/assets/themes/wasteland/frames/composer-ornament.png
Normal file
BIN
public/assets/themes/wasteland/frames/composer-ornament.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/assets/themes/wasteland/frames/composer-shell.png
Normal file
BIN
public/assets/themes/wasteland/frames/composer-shell.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/assets/themes/wasteland/frames/composer.png
Normal file
BIN
public/assets/themes/wasteland/frames/composer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
151
public/assets/themes/wasteland/frames/manifest.json
Normal file
151
public/assets/themes/wasteland/frames/manifest.json
Normal file
@@ -0,0 +1,151 @@
|
||||
[
|
||||
{
|
||||
"name": "new-chat",
|
||||
"source_box": [
|
||||
15,
|
||||
9,
|
||||
304,
|
||||
58
|
||||
],
|
||||
"size": [
|
||||
289,
|
||||
49
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "search",
|
||||
"source_box": [
|
||||
15,
|
||||
67,
|
||||
304,
|
||||
103
|
||||
],
|
||||
"size": [
|
||||
289,
|
||||
36
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "project",
|
||||
"source_box": [
|
||||
15,
|
||||
117,
|
||||
304,
|
||||
164
|
||||
],
|
||||
"size": [
|
||||
289,
|
||||
47
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "active-session",
|
||||
"source_box": [
|
||||
15,
|
||||
163,
|
||||
304,
|
||||
209
|
||||
],
|
||||
"size": [
|
||||
289,
|
||||
46
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "composer",
|
||||
"source_box": [
|
||||
557,
|
||||
830,
|
||||
1364,
|
||||
931
|
||||
],
|
||||
"size": [
|
||||
807,
|
||||
101
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "composer-action",
|
||||
"source_box": [
|
||||
1211,
|
||||
845,
|
||||
1257,
|
||||
891
|
||||
],
|
||||
"size": [
|
||||
46,
|
||||
46
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "tool-call",
|
||||
"source_box": [
|
||||
421,
|
||||
603,
|
||||
1381,
|
||||
664
|
||||
],
|
||||
"size": [
|
||||
960,
|
||||
61
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "composer-shell",
|
||||
"derived_from": "composer.png",
|
||||
"source_box": [
|
||||
0,
|
||||
0,
|
||||
807,
|
||||
74
|
||||
],
|
||||
"size": [
|
||||
807,
|
||||
74
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "composer-ornament",
|
||||
"derived_from": "composer.png",
|
||||
"source_box": [
|
||||
130,
|
||||
50,
|
||||
547,
|
||||
51
|
||||
],
|
||||
"size": [
|
||||
547,
|
||||
51
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "welcome-card",
|
||||
"source": "2b88b81d-c5a8-4d92-a518-afeea691eade.webp",
|
||||
"source_box": [
|
||||
70,
|
||||
0,
|
||||
1165,
|
||||
875
|
||||
],
|
||||
"size": [
|
||||
1095,
|
||||
875
|
||||
],
|
||||
"output": "frames/welcome-card.png"
|
||||
},
|
||||
{
|
||||
"name": "welcome-card-surface",
|
||||
"source": "2b88b81d-c5a8-4d92-a518-afeea691eade.webp",
|
||||
"source_box": [
|
||||
350,
|
||||
250,
|
||||
950,
|
||||
600
|
||||
],
|
||||
"size": [
|
||||
600,
|
||||
350
|
||||
],
|
||||
"output": "textures/welcome-card-surface.webp"
|
||||
}
|
||||
]
|
||||
BIN
public/assets/themes/wasteland/frames/new-chat.png
Normal file
BIN
public/assets/themes/wasteland/frames/new-chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
public/assets/themes/wasteland/frames/project.png
Normal file
BIN
public/assets/themes/wasteland/frames/project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/assets/themes/wasteland/frames/search.png
Normal file
BIN
public/assets/themes/wasteland/frames/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/assets/themes/wasteland/frames/tool-call.png
Normal file
BIN
public/assets/themes/wasteland/frames/tool-call.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
public/assets/themes/wasteland/frames/welcome-card.png
Normal file
BIN
public/assets/themes/wasteland/frames/welcome-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
BIN
public/assets/themes/wasteland/icons/ai.png
Normal file
BIN
public/assets/themes/wasteland/icons/ai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
public/assets/themes/wasteland/icons/attachment.png
Normal file
BIN
public/assets/themes/wasteland/icons/attachment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
public/assets/themes/wasteland/icons/chat.png
Normal file
BIN
public/assets/themes/wasteland/icons/chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
public/assets/themes/wasteland/icons/check.png
Normal file
BIN
public/assets/themes/wasteland/icons/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/assets/themes/wasteland/icons/close.png
Normal file
BIN
public/assets/themes/wasteland/icons/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/assets/themes/wasteland/icons/copy.png
Normal file
BIN
public/assets/themes/wasteland/icons/copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
public/assets/themes/wasteland/icons/dropdown.png
Normal file
BIN
public/assets/themes/wasteland/icons/dropdown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
121
public/assets/themes/wasteland/icons/manifest.json
Normal file
121
public/assets/themes/wasteland/icons/manifest.json
Normal file
@@ -0,0 +1,121 @@
|
||||
{
|
||||
"new-chat": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R1C1",
|
||||
"variant": "32px",
|
||||
"bbox": [204, 85, 69, 65],
|
||||
"output": "icons/new-chat.png"
|
||||
},
|
||||
"search": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R1C3",
|
||||
"variant": "32px",
|
||||
"bbox": [746, 86, 62, 62],
|
||||
"output": "icons/search.png"
|
||||
},
|
||||
"dropdown": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R1C2",
|
||||
"variant": "32px",
|
||||
"bbox": [480, 98, 59, 45],
|
||||
"output": "icons/dropdown.png"
|
||||
},
|
||||
"theme": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R2C1",
|
||||
"variant": "32px",
|
||||
"bbox": [204, 236, 70, 65],
|
||||
"output": "icons/theme.png"
|
||||
},
|
||||
"ai": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R2C2",
|
||||
"variant": "32px",
|
||||
"bbox": [476, 236, 65, 65],
|
||||
"output": "icons/ai.png"
|
||||
},
|
||||
"status": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R2C3",
|
||||
"variant": "32px",
|
||||
"bbox": [749, 242, 53, 53],
|
||||
"output": "icons/status.png"
|
||||
},
|
||||
"attachment": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R2C5",
|
||||
"variant": "32px",
|
||||
"bbox": [1277, 236, 49, 60],
|
||||
"output": "icons/attachment.png"
|
||||
},
|
||||
"send": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R2C6",
|
||||
"variant": "32px",
|
||||
"bbox": [1533, 237, 63, 57],
|
||||
"output": "icons/send.png"
|
||||
},
|
||||
"stop": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R3C1",
|
||||
"variant": "32px",
|
||||
"bbox": [211, 392, 56, 56],
|
||||
"output": "icons/stop.png"
|
||||
},
|
||||
"settings": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R3C2",
|
||||
"variant": "32px",
|
||||
"bbox": [476, 389, 65, 62],
|
||||
"output": "icons/settings.png"
|
||||
},
|
||||
"user": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R3C3",
|
||||
"variant": "32px",
|
||||
"bbox": [743, 389, 65, 62],
|
||||
"output": "icons/user.png"
|
||||
},
|
||||
"terminal": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R3C4",
|
||||
"variant": "32px",
|
||||
"bbox": [1009, 393, 59, 55],
|
||||
"output": "icons/terminal.png"
|
||||
},
|
||||
"copy": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R3C5",
|
||||
"variant": "32px",
|
||||
"bbox": [1278, 392, 48, 56],
|
||||
"output": "icons/copy.png"
|
||||
},
|
||||
"refresh": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R4C1",
|
||||
"variant": "32px",
|
||||
"bbox": [211, 541, 57, 57],
|
||||
"output": "icons/refresh.png"
|
||||
},
|
||||
"chat": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R4C3",
|
||||
"variant": "32px",
|
||||
"bbox": [745, 541, 62, 55],
|
||||
"output": "icons/chat.png"
|
||||
},
|
||||
"close": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R5C3",
|
||||
"variant": "32px",
|
||||
"bbox": [749, 690, 53, 53],
|
||||
"output": "icons/close.png"
|
||||
},
|
||||
"check": {
|
||||
"source": "43bd9ed6-2ba6-4c9d-bd9d-25b068cb4711.webp",
|
||||
"card": "R5C4",
|
||||
"variant": "32px",
|
||||
"bbox": [1010, 693, 56, 47],
|
||||
"output": "icons/check.png"
|
||||
}
|
||||
}
|
||||
BIN
public/assets/themes/wasteland/icons/new-chat.png
Normal file
BIN
public/assets/themes/wasteland/icons/new-chat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/assets/themes/wasteland/icons/refresh.png
Normal file
BIN
public/assets/themes/wasteland/icons/refresh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
public/assets/themes/wasteland/icons/search.png
Normal file
BIN
public/assets/themes/wasteland/icons/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/assets/themes/wasteland/icons/send.png
Normal file
BIN
public/assets/themes/wasteland/icons/send.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
public/assets/themes/wasteland/icons/settings.png
Normal file
BIN
public/assets/themes/wasteland/icons/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
public/assets/themes/wasteland/icons/status.png
Normal file
BIN
public/assets/themes/wasteland/icons/status.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
public/assets/themes/wasteland/icons/stop.png
Normal file
BIN
public/assets/themes/wasteland/icons/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
public/assets/themes/wasteland/icons/terminal.png
Normal file
BIN
public/assets/themes/wasteland/icons/terminal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
public/assets/themes/wasteland/icons/theme.png
Normal file
BIN
public/assets/themes/wasteland/icons/theme.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
public/assets/themes/wasteland/icons/ui/ai.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/ai.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
public/assets/themes/wasteland/icons/ui/attachment.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/attachment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/assets/themes/wasteland/icons/ui/dropdown.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/dropdown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 336 B |
262
public/assets/themes/wasteland/icons/ui/manifest.json
Normal file
262
public/assets/themes/wasteland/icons/ui/manifest.json
Normal file
@@ -0,0 +1,262 @@
|
||||
[
|
||||
{
|
||||
"name": "search",
|
||||
"variant": "16",
|
||||
"slot_box": [
|
||||
596,
|
||||
80,
|
||||
60,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
607,
|
||||
102,
|
||||
34,
|
||||
35
|
||||
],
|
||||
"size": [
|
||||
20,
|
||||
20
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "dropdown",
|
||||
"variant": "16",
|
||||
"slot_box": [
|
||||
329,
|
||||
80,
|
||||
60,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
343,
|
||||
109,
|
||||
30,
|
||||
24
|
||||
],
|
||||
"size": [
|
||||
14,
|
||||
10
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "theme",
|
||||
"variant": "24",
|
||||
"slot_box": [
|
||||
126,
|
||||
231,
|
||||
74,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
136,
|
||||
245,
|
||||
45,
|
||||
51
|
||||
],
|
||||
"size": [
|
||||
26,
|
||||
26
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ai",
|
||||
"variant": "32",
|
||||
"slot_box": [
|
||||
461,
|
||||
231,
|
||||
89,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
477,
|
||||
236,
|
||||
63,
|
||||
65
|
||||
],
|
||||
"size": [
|
||||
36,
|
||||
36
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "status",
|
||||
"variant": "16",
|
||||
"slot_box": [
|
||||
596,
|
||||
231,
|
||||
60,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
608,
|
||||
255,
|
||||
32,
|
||||
33
|
||||
],
|
||||
"size": [
|
||||
16,
|
||||
16
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "attachment",
|
||||
"variant": "24",
|
||||
"slot_box": [
|
||||
1187,
|
||||
231,
|
||||
74,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
1202,
|
||||
245,
|
||||
40,
|
||||
47
|
||||
],
|
||||
"size": [
|
||||
26,
|
||||
28
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "send",
|
||||
"variant": "32",
|
||||
"slot_box": [
|
||||
1523,
|
||||
231,
|
||||
86,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
1534,
|
||||
238,
|
||||
61,
|
||||
56
|
||||
],
|
||||
"size": [
|
||||
30,
|
||||
30
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "queue",
|
||||
"variant": "32",
|
||||
"slot_box": [
|
||||
992,
|
||||
231,
|
||||
88,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
1012,
|
||||
241,
|
||||
52,
|
||||
53
|
||||
],
|
||||
"size": [
|
||||
30,
|
||||
30
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "stop",
|
||||
"variant": "24",
|
||||
"slot_box": [
|
||||
126,
|
||||
384,
|
||||
74,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
138,
|
||||
401,
|
||||
41,
|
||||
41
|
||||
],
|
||||
"size": [
|
||||
26,
|
||||
26
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "settings",
|
||||
"variant": "16",
|
||||
"slot_box": [
|
||||
329,
|
||||
384,
|
||||
60,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
338,
|
||||
401,
|
||||
41,
|
||||
41
|
||||
],
|
||||
"size": [
|
||||
20,
|
||||
20
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "user",
|
||||
"variant": "32",
|
||||
"slot_box": [
|
||||
728,
|
||||
384,
|
||||
89,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
744,
|
||||
388,
|
||||
63,
|
||||
63
|
||||
],
|
||||
"size": [
|
||||
36,
|
||||
36
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "terminal",
|
||||
"variant": "16",
|
||||
"slot_box": [
|
||||
860,
|
||||
384,
|
||||
60,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
869,
|
||||
407,
|
||||
35,
|
||||
32
|
||||
],
|
||||
"size": [
|
||||
20,
|
||||
18
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "note",
|
||||
"variant": "32",
|
||||
"slot_box": [
|
||||
728,
|
||||
536,
|
||||
89,
|
||||
75
|
||||
],
|
||||
"detected_box": [
|
||||
745,
|
||||
541,
|
||||
61,
|
||||
70
|
||||
],
|
||||
"size": [
|
||||
36,
|
||||
36
|
||||
]
|
||||
}
|
||||
]
|
||||
BIN
public/assets/themes/wasteland/icons/ui/note.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/note.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
public/assets/themes/wasteland/icons/ui/queue.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/queue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/assets/themes/wasteland/icons/ui/search.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 834 B |
BIN
public/assets/themes/wasteland/icons/ui/send.png
Normal file
BIN
public/assets/themes/wasteland/icons/ui/send.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user