Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
4.1 KiB
4.1 KiB
任务书 · 校正页移动端:时间轴读数被裁、「跳到最新」压住选项(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-inset44px 与两侧--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-timelinepadding 不含 inset);组件测试在 compact 视口宽 375 下渲染,五项文本都在 DOM 且 readoutscrollWidth <= 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. 让步顺序
- T1 若合并两项撞 VOICE 口径,先只做去 inset + 缩 gap,进度记录写明剩余裁切宽度。
- T2 不可让步。
6. 开工前置命令
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 宽下读数完整、浮层不遮选项,留真机清单。