针对现状问题:① 日日志色条/竖线断开;② classic 评论挂在卡外,与设计稿不一致; ③ 卡右下角 🎤 / ⋯ 与「评论进卡内」抢空间。本稿给出推荐定稿结构, 并说明 classic 的 emoji 轨如何兼容。
::before 从组头拉到组底)。为什么不把 emoji 挪进卡内?因为 classic 的识别符号是「轨上的点与表情」,进卡后轨会空、时间轴感变弱; 头像负责评论归属,emoji 负责时间轴装饰与筛选感,分职更清晰。
左轨 spine 不断开;有评论时轨上可出现 emoji 节点。评论在白卡底部浅底分区,非满宽气泡 + 头像。
正文 → 工具行 → 分隔线 → 评论区。emoji 在轨,头像在评论行。
若某条有带 emoji 的评论,在卡中部轨上叠 emoji;spine 仍连续穿过。
子项目色条从组标题贯穿组内所有卡片(含有评论的高卡片),不再「每卡一段断开」。
日头 → 色条组 → 卡(时间含间隔 · 正文 · 工具 · 评论)。无评论则无底部分区。
ASCII 示意卡内层级(classic / journal 共用评论区规则)。
【现在 · 易碎】
┌ rail ┐ ┌ card ─────────────┐
│ • │ │ title · time │
│ │ │ │ body │
│ │ │ │ tags [mic][···] │ ← 按钮贴底
└──│───┘ └───────────────────┘
│ ┌ comment (卡外) ───┐ ← 断开、不统一
emoji │ bubble │
└───────────────────┘
【定稿 · 卡内】
┌ rail ┐ ┌ card ─────────────────────┐
│ • │ │ title · time │
│ │ │ │ body │
│ │ │ │ tags │
│ │ │ │ [mic] [···] │ ← 工具行
│ │ │ ├─ 评论区 ──────────────── │
│ emoji│ │ (头) 语音条 │
│ │ │ │ (头) 文字气泡 │
└──┴───┘ └───────────────────────────┘
↑ spine 连续穿过 gap / 多卡
| Classic 卡结构 |
单 Container 卡片:
① 正文(现 RecordItem 内容,去掉底栏外挂评论);
② 工具行(voice / more,右对齐);
③ 若有评论 → 顶部分隔线 + 浅底评论列表(头像 + 非满宽气泡/语音条)。
评论不再作为 ListView 里独立的 TimelineListItem.comment 行(classic 路径可改为卡内渲染)。
|
|---|---|
| Classic 轨 | 节点列用统一 spine(column 伪元素或自定义 paint),dot 对齐卡顶标题行; gap pill 行只画 spine 段不画点; emoji:v1 可仅在「该记录存在带 emoji 评论」时在轨中部画主 emoji(首条); C2 精确对齐为可选增强。 |
| Journal 色条 |
子项目组外包一层 Stack/Padding,左侧 3px 色条
top 从组标题到最后一张卡底,不按单卡打断。
|
| Journal 卡 |
时间行(含间隔)+ 正文 + 工具行 + 卡内评论区(与 classic 评论组件复用,
embedInCard: true + 头像)。
|
| 按钮与评论 | 永远:工具行在上、评论在下。避免按钮夹在评论中间。 无评论时工具行贴卡底即可。 |
| Editorial | 维持:正文 → 虚线 → 头像气泡;可不做大白卡。 本定稿不强制改编辑流骨架。 |
| 不做 | 不把 classic emoji 塞进气泡当头像; 不恢复卡外评论列表; 不隐藏间隔。 |
推荐落地顺序:① 抽出共用 RecordCardScaffold(正文/工具/评论区)→
② journal 色条连续 → ③ classic 评论收回卡内 + spine 连续 → ④(可选)轨上 emoji 对齐。
关联:docs/timeline-ui-final.html · 实现变更
openspec/changes/add-project-timeline-list-styles