feat(task-board): refine running state indicator

This commit is contained in:
shiyue
2026-08-13 16:16:19 +08:00
parent 214ff4ec88
commit 93641df1ad
10 changed files with 580 additions and 0 deletions

View File

@@ -0,0 +1,13 @@
# 暗金荒野任务卡运行态动画发现
- 截图主题为 `wasteland / 暗金荒野`
- 服务端 `taskBoardTaskWithRuntime()` 已同时返回 `isRunning` 和中文 `runtimeState`
- 前端 `normalizeTask()` 当前只保留 `runtimeState` 文案,导致 CSS 无法基于可靠布尔状态选择卡片。
- 任务卡 DOM 已有 `data-status-id`;新增独立 `data-runtime-state` 不会混淆任务列。
- 任务卡已有移动/进出场动画;运行态动画不得覆盖 `transform`,避免和卡片移动及 hover 冲突。
- `task-board.css` 已有全局 `prefers-reduced-motion` 门禁,可再给运行卡片明确静态落点。
- Firefox 实测确认 `data-runtime-state="running"` 只来自服务端布尔字段,任务列仍为 `in_progress`;运行态动画不会改变列位置。
- 真实截图:[/tmp/cc-web-wasteland-runtime-animation-1786605817208/animated-desktop-first.png](/tmp/cc-web-wasteland-runtime-animation-1786605817208/animated-desktop-first.png)、[/tmp/cc-web-wasteland-runtime-animation-1786605817208/animated-desktop-second.png](/tmp/cc-web-wasteland-runtime-animation-1786605817208/animated-desktop-second.png)、[/tmp/cc-web-wasteland-runtime-animation-1786605817208/reduced-motion-desktop-first.png](/tmp/cc-web-wasteland-runtime-animation-1786605817208/reduced-motion-desktop-first.png)。完整数据在 `evidence.json`
- 用户确认只保留左侧竖条/活动轨迹;运行卡片本体必须与同列未运行卡片保持相同背景、边框、阴影且没有动画。
- 收敛版 Firefox computed stylerunning/idle 背景均为 `rgba(14, 16, 14, 0.94)`、边框均为 `rgba(196, 154, 90, 0.28)`、阴影均为 `none`、卡片动画均为 `none`;左侧竖条约 3.52px 宽、0.74 opacity。
- 收敛版证据:`/tmp/cc-web-wasteland-runtime-animation-1786607214412/`1024px 与 500px 的页面 scrollWidth 均等于 viewport width。

View File

@@ -0,0 +1,15 @@
# 暗金荒野任务卡运行态动画进度
- 2026-08-13读取主题技能、主题架构和验收清单确认只修改运行态层级。
- 2026-08-13通过 codebase-memory 索引和本地精确检索定位运行态服务端 DTO、任务卡 DOM、样式和前端单测。
- 2026-08-13设计确定为卡片静态强化边框 + 低频呼吸光 + 左侧活动轨迹;不移动内容,不依赖状态文字。
- 2026-08-13独立计划审查通过新增 DOM、主题动画与 reduced-motion 契约后,前端专项测试按预期退出 1。
- 2026-08-13实现 `isRunning` 前端保留、卡片 `data-runtime-state`、暗金荒野运行卡片呼吸边框/左侧活动轨迹/强化徽标,以及 reduced-motion 静态降级。
- 2026-08-13语法检查、前端专项、service 专项、完整 regression 和 `git diff --check` 全部退出 0。
- 2026-08-13新增真实 Firefox 动画验收脚本 `scripts/task-board-runtime-animation-browser.js`,正常动效、减少动态效果和 500px 窄屏均通过;截图与几何数据写入 `/tmp/cc-web-wasteland-runtime-animation-1786605817208/`
- 2026-08-13重启门禁未通过另一个 cc-web 对话仍在运行;未重启服务,等待门禁满足后完成上线与临时清单清理。
- 2026-08-13收到视觉收敛反馈按“先删重”原则准备移除卡片本体渐变、呼吸边框和外发光保留左侧竖条/移动点并把徽标圆点改为静态。
- 2026-08-13返工红灯准确命中旧整卡动画现已删除整卡运行态规则及 `runtime-card` 关键帧,缩小左侧轨迹光晕,并把徽标圆点改为静态。
- 2026-08-13真实浏览器契约改为对比 running/idle 卡片本体 computed style 必须相同,仅左侧 `::before` 竖条和 `::after` 移动点表达运行态。
- 2026-08-13语法检查、service 专项、完整 regression、`git diff --check` 和收敛版 Firefox 验收均退出 0目视确认整卡不再泛光。
- 2026-08-13重启门禁复查仅当前对话为 running门禁已满足进入服务重启与生效确认。

View File

@@ -0,0 +1,36 @@
# 暗金荒野任务卡运行态动画
## 目标
仅在 `wasteland / 暗金荒野` 主题下,让任务看板中真实运行的卡片具备清晰、克制的卡片级动画;运行态继续与动态任务列完全独立。
## 阶段
- [x] 1. 锁定运行态数据与暗金荒野样式边界
- [x] 2. 写出运行态卡片标记和动画契约红灯
- [x] 3. 实现布尔运行态标记和主题专属卡片动画
- [x] 4. 运行专项与完整回归
- [x] 5. 用真实浏览器检查运行/未运行和减少动态效果
- [x] 6. 检查首次重启门禁
- [x] 7. 按反馈移除卡片本体泛光并保留左侧轨迹
- [x] 8. 重新运行专项、回归与真实浏览器验收
- [ ] 9. 再次检查重启门禁并让修改生效(进行中)
## 设计约束
- 只使用服务端明确下发的 `isRunning` 布尔值,不匹配“运行中”等文案。
- 卡片写入 `data-runtime-state="running|idle"`,任务列 `data-status-id` 保持不变。
- 运行中卡片本体与未运行卡片保持相同静态背景、边框和阴影,只保留左侧竖条与活动轨迹;内容和几何位置不抖动。
- 未运行卡片保持静态;其他主题不应用该动画。
- `prefers-reduced-motion: reduce` 下退化为静态高亮。
- 不增加图片资产,不改变前端布局、任务状态或服务端业务逻辑。
## 错误记录
- 2026-08-13此前 `pm2 restart ccweb --update-env` 在执行时被用户新消息中断,重启未完成。
- 2026-08-13前端专项红灯退出 1准确失败在缺少暗金荒野真实运行卡片选择器。
- 2026-08-13Firefox 真实验收通过。正常动效下运行卡片动画名为 `ccweb-task-board-wasteland-runtime-card`2.8s),边缘轨迹动画名为 `ccweb-task-board-wasteland-runtime-tracer`6 次采样中轨迹移动超过 135px卡片 x/y/宽高最大误差小于 0.5px。
- 2026-08-13未运行卡片 animation 为 `none``prefers-reduced-motion` 下运行卡片、轨迹点和徽标圆点均为 `none`但保留静态金色边框1024px 和 500px 视口页面 scrollWidth 均等于 viewport width。
- 2026-08-13重启门禁检查发现除当前对话外`94dba3ea-62cb-45df-bdc5-41623832b2c6` 仍为 running按仓库规则暂不执行 `pm2 restart ccweb --update-env`。临时 TODO CSV 因最后一步未完成而保留。
- 2026-08-13用户确认左侧竖条可以保留但整张卡片呼吸背景与泛光过于花哨返工为仅左侧轨迹表达运行态。
- 2026-08-13收敛版 Firefox 复验通过。运行/未运行卡片的背景、边框、阴影完全一致且卡片动画均为 `none`;左侧轨迹仍以 2.8s 周期移动,减少动态效果时静止。