修复 AGC DirectProject 运行中过程卡的读秒粒度与样式 #508

2026-09-24T11:53:12+08:00

suzmii commented

2026-09-24 11:53:12 +08:00

问题

AGC DirectProject 对话区底部的运行中状态条（「陶泥儿正在处理 / 已耗时 12.4秒」）有两处退化：

读秒粒度变成 1 秒一跳：耗时文案不足一分钟保留一位小数（formatElapsedDuration），但状态条自己新写了一份 setInterval(..., 1000)，绕过了对话侧唯一的 useLiveNow（LIVE_TIMER_TICK_MS = 100）。小数位一秒才动一格，看着像读数卡住。team-conventions.md 里「运行时用 100ms 叶子时钟刷新一位小数」这条约定此前已写好，改动没有对齐它。
样式退化：卡片按「多行摘要 + 单行标题」的旧面板设计留了 min-height: 78px 与 gap: 9px，摘要行在 DirectProject 收敛后已经不存在，那张卡实际只是 12px 单行文字撑在一只 78px 的空盒子里；状态点写死绿色、扫光是白色高光（在浅底上几乎不可见），而工作台里想覆盖成主色的两条规则选择器写的是 … .project-chat-message-list > .project-chat-process-card —— 卡片渲染在消息列表外，那两条规则一直没生效。

改动

读秒恢复 100ms

DirectTurnElapsed 改用共享 useLiveNow，删掉组件自带的 1000ms interval 与 now state；tick 仍只订在显示耗时的那一行（叶子节点），不牵动回合列表。

样式

卡片收敛为单行状态条：padding: 8px 12px，去掉 min-height: 78px / gap: 9px / 死掉的 margin-top；保持 display: grid（单列）让 header 被拉满行宽，右侧「已耗时」的 margin-left: auto 才有余量可吃。
状态点与扫光改走 --platform-accent（含同色光晕、color-mix 渐变）；标题提到 --platform-text-strong，耗时改 --platform-text-base 并加 font-variant-numeric: tabular-nums（100ms 一跳不抖）。
删除两条永不命中的选择器，以及只服务已不存在的 <p> 摘要行的 -webkit-line-clamp 样式。
补 12px 上间距：margin: 0 16px 8px 是简写，会把上间距清零，卡片原先贴着最后一条消息。

前后对照

	改前	改后
高度	78px（内容垂直居中，下方一片空白）	36px 单行状态条
状态点	硬编码 `#2f855a` 绿色，挂在浅色卡上	`--platform-accent` + 同色光晕
标题	过程层级次要色 `#988476`	`--platform-text-strong`
已耗时	右对齐	右对齐，`--platform-text-base` + 等宽数字
扫光	白色 28% 高光，浅底上几乎不可见	主色 18% 渐变，肉眼可见
读秒	1 秒一跳（小数位一格一格跳）	100ms 一跳

验证

真实 Chromium（一次性 Vite 夹具挂 DirectProjectConversation + 工作台外壳）：状态条 36px 单行；600ms 内文案从 18.0秒 走到 18.6秒（每 100ms 一格）；420px 宽面板无横向溢出；prefers-reduced-motion: reduce 下状态点与扫光动画均为 none。
新增 apps/ai-game-creator-shell/tests/directProjectProcessStatus.test.tsx：假时钟下 0.0 → 0.1 → 0.5秒，把 LIVE_TIMER_TICK_MS 临时改回 1000 时即红；另一条钉住「没有运行中的回合时不订阅时钟」。
npx vitest run apps/ai-game-creator-shell/tests：186 passed / 1 skipped，1856 tests passed / 14 skipped。
npm run typecheck（AGC）、npm run check:encoding、npm run check:doc-index、git diff --check 均通过。

文档

docs/project-memory/shared-memory/pitfalls.md 新增一条：耗时文案的刷新粒度必须与显示精度同格，刷新一律走 useLiveNow，不在视图组件里另起 interval。

## 问题 AGC DirectProject 对话区底部的运行中状态条（「陶泥儿正在处理 / 已耗时 12.4秒」）有两处退化： 1. **读秒粒度变成 1 秒一跳**：耗时文案不足一分钟保留一位小数（`formatElapsedDuration`），但状态条自己新写了一份 `setInterval(..., 1000)`，绕过了对话侧唯一的 `useLiveNow`（`LIVE_TIMER_TICK_MS = 100`）。小数位一秒才动一格，看着像读数卡住。`team-conventions.md` 里「运行时用 100ms 叶子时钟刷新一位小数」这条约定此前已写好，改动没有对齐它。 2. **样式退化**：卡片按「多行摘要 + 单行标题」的旧面板设计留了 `min-height: 78px` 与 `gap: 9px`，摘要行在 DirectProject 收敛后已经不存在，那张卡实际只是 12px 单行文字撑在一只 78px 的空盒子里；状态点写死绿色、扫光是白色高光（在浅底上几乎不可见），而工作台里想覆盖成主色的两条规则选择器写的是 `… .project-chat-message-list > .project-chat-process-card` —— 卡片渲染在消息列表**外**，那两条规则一直没生效。 ## 改动 ### 读秒恢复 100ms `DirectTurnElapsed` 改用共享 `useLiveNow`，删掉组件自带的 1000ms interval 与 `now` state；tick 仍只订在显示耗时的那一行（叶子节点），不牵动回合列表。 ### 样式 - 卡片收敛为单行状态条：`padding: 8px 12px`，去掉 `min-height: 78px` / `gap: 9px` / 死掉的 `margin-top`；保持 `display: grid`（单列）让 `header` 被拉满行宽，右侧「已耗时」的 `margin-left: auto` 才有余量可吃。 - 状态点与扫光改走 `--platform-accent`（含同色光晕、`color-mix` 渐变）；标题提到 `--platform-text-strong`，耗时改 `--platform-text-base` 并加 `font-variant-numeric: tabular-nums`（100ms 一跳不抖）。 - 删除两条永不命中的选择器，以及只服务已不存在的 `<p>` 摘要行的 `-webkit-line-clamp` 样式。 - 补 12px 上间距：`margin: 0 16px 8px` 是简写，会把上间距清零，卡片原先贴着最后一条消息。 ## 前后对照 | | 改前 | 改后 | |---|---|---| | 高度 | 78px（内容垂直居中，下方一片空白） | 36px 单行状态条 | | 状态点 | 硬编码 `#2f855a` 绿色，挂在浅色卡上 | `--platform-accent` + 同色光晕 | | 标题 | 过程层级次要色 `#988476` | `--platform-text-strong` | | 已耗时 | 右对齐 | 右对齐，`--platform-text-base` + 等宽数字 | | 扫光 | 白色 28% 高光，浅底上几乎不可见 | 主色 18% 渐变，肉眼可见 | | 读秒 | 1 秒一跳（小数位一格一格跳） | 100ms 一跳 | ## 验证 - 真实 Chromium（一次性 Vite 夹具挂 `DirectProjectConversation` + 工作台外壳）：状态条 36px 单行；600ms 内文案从 `18.0秒` 走到 `18.6秒`（每 100ms 一格）；420px 宽面板无横向溢出；`prefers-reduced-motion: reduce` 下状态点与扫光动画均为 `none`。 - 新增 `apps/ai-game-creator-shell/tests/directProjectProcessStatus.test.tsx`：假时钟下 `0.0 → 0.1 → 0.5秒`，把 `LIVE_TIMER_TICK_MS` 临时改回 1000 时即红；另一条钉住「没有运行中的回合时不订阅时钟」。 - `npx vitest run apps/ai-game-creator-shell/tests`：186 passed / 1 skipped，1856 tests passed / 14 skipped。 - `npm run typecheck`（AGC）、`npm run check:encoding`、`npm run check:doc-index`、`git diff --check` 均通过。 ## 文档 `docs/project-memory/shared-memory/pitfalls.md` 新增一条：耗时文案的刷新粒度必须与显示精度同格，刷新一律走 `useLiveNow`，不在视图组件里另起 interval。

suzmii added 1 commit 2026-09-24 11:53:12 +08:00

修复 AGC DirectProject 运行中过程卡的读秒粒度与样式

Project CI / AI game creator shell Rust smoke (pull_request) Successful in 1m8s

Details

Project CI / AI game creator shell Rust crates (pull_request) Successful in 53s

Details

Project CI / AI game creator shell Rust lane 2/2 (pull_request) Successful in 8m21s

Details

Project CI / Backend tests (pull_request) Successful in 4m12s

Details

Project CI / AI game creator shell Rust lane 1/2 (pull_request) Successful in 10m2s

Details

Project CI / Frontend tests (pull_request) Successful in 2m11s

Details

Project CI / Repository checks (pull_request) Successful in 2m33s

Details

Project CI / AI game creator shell web tests (pull_request) Successful in 2m1s

Details

Project CI / Native shell tests (pull_request) Successful in 6m27s

Details

e80279c174

- apps/ai-game-creator-shell/src/view/project-development/chat/components/DirectProjectConversation/DirectProjectConversation.tsx 的 DirectTurnElapsed 改用对话侧共享时钟 useLiveNow（100ms），删掉组件自带的 1000ms setInterval 与 now state：耗时文案不足一分钟保留一位小数，秒级 tick 会让小数位一秒才动一格
- apps/ai-game-creator-shell/src/styles.css 重写 .project-chat-process-card：去掉旧面板遗留的 78px 最小高度与 9px 行距，收敛为单行状态条（padding 8px 12px）
- apps/ai-game-creator-shell/src/styles.css 状态点与扫光改走 --platform-accent（原先写死绿色），标题提到 --platform-text-strong，耗时改 --platform-text-base 并加 tabular-nums
- apps/ai-game-creator-shell/src/styles.css 删除两条永不命中的选择器（卡片渲染在消息列表外，规则却写着 …message-list > .project-chat-process-card）与已无 <p> 渲染的多行摘要样式
- apps/ai-game-creator-shell/src/styles.css 过程卡与最后一条消息之间补 12px 上间距，原先 margin 简写把它清零
- apps/ai-game-creator-shell/tests/directProjectProcessStatus.test.tsx 新增读秒粒度回归用例与「无运行中回合不订阅时钟」用例
- apps/ai-game-creator-shell/tests/appSurface/project-development.suite.ts 与 tests/AgentMessageContent.test.tsx 的选择器契约同步到现行 DOM 结构
- docs/project-memory/shared-memory/pitfalls.md 记录「刷新粒度必须与显示精度同格」这条复发坑

suzmii merged commit dcb4f2a1c1 into master

2026-09-24 11:57:12 +08:00

suzmii deleted branch fix/recover-100ms

2026-09-24 11:57:12 +08:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GenarrativeAI/Genarrative#508