Jesse_ChenandClaude Fable 5.1
c32f81e76d
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
61 lines
4.1 KiB
Markdown
61 lines
4.1 KiB
Markdown
# 任务书 · 校正页移动端：时间轴读数被裁、「跳到最新」压住选项（2026-09-17）
|
||
|
||
## 0. 基线
|
||
|
||
- 基线 commit：`8d7dfbf0`（staging 已部署）。分支：`codex/rectification-mobile-timeline-readout-20260917`。
|
||
- 串行：与 `TASK-rectification-dead-d9-choice-fix-20260916.md` 无文件交集（本单只动 `globals.css` 时间轴段与 `rectification-timeline.tsx`），可并行；若同时改 `rectification-agentic-chat.tsx`，本单在后。
|
||
- BUG 段：**BUG-918 起**（915～917 归修复单）。纯前端样式，不跑 Python 预检。
|
||
|
||
## 1. 事故实证（产品负责人 2026-09-17 07:58 iPhone 截图，staging）
|
||
|
||
| # | 现象 | 位置 |
|
||
| --- | --- | --- |
|
||
| A | 时间轴读数一行「04:48–05:07 20 分钟 代表分钟 04:53 已…」，第四项被裁成「已…」 | `globals.css:2543-2576`：`.rectification-timeline__readout` `white-space: nowrap; flex-wrap: nowrap`，注释写「Four short items clear 375px with room to spare」，实测 iPhone 宽度下第四项 `__answered`（`rectification-timeline.tsx:47`）放不下，被 `text-overflow: ellipsis` 裁掉；第五项 `__dated` 更看不到 |
|
||
| B | 「跳到最新」浮层压在选项 C 上，选项被遮一半 | `globals.css:1592-1598` `position:absolute; bottom:100%` 挂在输入框上方，与滚动内容重叠；点选卡末项恰在其后 |
|
||
| C | 卡片选项灰显点不了；范围行与输入框占位说「再说一件带年月的事」 | **不是本单**：这是修复单 BUG-915/917 的 P0 表现 |
|
||
|
||
## 2. 根因
|
||
|
||
- A：读数按「四项短文本」设计，实际 `代表分钟 04:53` + `已答 N 题` 两项在 13px 下已超出 375px 可用宽度（内容区还扣掉左侧 `--assistant-content-inset` 44px 与两侧 `--space-8`）。时间轴高度固定是正确性要求（注释说明，不能换行），所以只能减内容或减内边距。
|
||
- B：浮层锚在 composer 顶上而列表底部 padding 不够，最后一条内容顶到了浮层下面。
|
||
|
||
## 3. 决策记录
|
||
|
||
- 产品 2026-09-17：移动端看着不舒服，读数不得被裁；范围与代表分钟必须一直可见（D10 原则不变）。
|
||
- 不改时间轴固定高度，不改滚动锚定逻辑（`use-conversation-scroll-anchor`）。
|
||
|
||
## 4. 任务分解
|
||
|
||
### T1 读数在 375px 内完整可见（BUG-918）
|
||
|
||
- `.is-compact` 下：读数左内边距不再加 `--assistant-content-inset`（时间轴不在消息列里，对齐头像列在手机上没有意义），改为与页面边距同源的 `--space-4`；`已答 N 题` 与 `已记 N 件` 两项在 compact 下合并成一项「N 题 · N 件」或只保留一项，具体以 `frontend/docs/VOICE.md` 口径定；字号保持 13px。
|
||
- 验收：CSS 声明断言（compact 下 `.rectification-timeline` padding 不含 inset）；组件测试在 compact 视口宽 375 下渲染，五项文本都在 DOM 且 readout `scrollWidth <= clientWidth`（jsdom 量不出就改为字符数上限断言，写明）；`DESIGN.md` 时间轴段更新。
|
||
|
||
### T2 「跳到最新」不遮最后一条可点内容（BUG-919）
|
||
|
||
- 列表底部 `padding-bottom` 至少等于浮层高度 + `--space-3`，或浮层出现时给 `.conversation` 加同高的 `scroll-padding-bottom`；浮层可见条件不变。
|
||
- 验收：CSS 断言；真机清单一条。
|
||
|
||
### T3 记录
|
||
|
||
- BUG-918/919、CHANGELOG、`DESIGN.md`、`PROGRESS-rectification-mobile-timeline-readout-20260917.md`、`docs/testing/rectification-mobile-timeline-readout-20260917.md`。
|
||
|
||
## 5. 让步顺序
|
||
|
||
1. T1 若合并两项撞 VOICE 口径，先只做去 inset + 缩 gap，进度记录写明剩余裁切宽度。
|
||
2. T2 不可让步。
|
||
|
||
## 6. 开工前置命令
|
||
|
||
```bash
|
||
git fetch origin --prune
|
||
git worktree add -b codex/rectification-mobile-timeline-readout-20260917 .worktrees/rectification-mobile-timeline-readout-20260917 origin/staging
|
||
cd .worktrees/rectification-mobile-timeline-readout-20260917/frontend && ./node_modules/.bin/tsc --noEmit && npm run lint && npm test 2>&1 | tail -20
|
||
```
|
||
|
||
验收口径：tsc 0 错、lint 0 error、npm test 失败清单与基线一致、`/` Static、gzip ±2%。
|
||
|
||
## 7. 环境缺口
|
||
|
||
- 无 Chrome / 真机：375 与 390 宽下读数完整、浮层不遮选项，留真机清单。
|