时间轴 · 评论进卡内 + 竖线连续

针对现状问题:① 日日志色条/竖线断开;② classic 评论挂在卡外,与设计稿不一致; ③ 卡右下角 🎤 / ⋯ 与「评论进卡内」抢空间。本稿给出推荐定稿结构, 并说明 classic 的 emoji 轨如何兼容。

推荐:评论一律在卡内底部区 操作钮:正文区底栏,评论区之上 classic emoji:留在左轨,不进评论气泡 文件:docs/timeline-comments-in-card-design.html

结论(先看这个)

  1. 评论进卡内:classic / journal 都采用「同一张白卡 = 正文 + 操作 + 评论」;编辑流保持正文下虚线 + 轻气泡(可无大卡包裹)。
  2. 操作钮位置:🎤 / ⋯ 放在正文与评论分隔线之上的右对齐工具行——仍属卡内,但不和评论抢同一行。
  3. classic emoji 兼容:emoji 继续画在左侧时间轨(与评论一一对应的轨位点),不塞进气泡;气泡旁用小头像(与 journal 一致)表示「发言者」,emoji 表示「评论情绪/标记」。两套语义不冲突。
  4. 竖线连续:classic 用整列 spine(伪元素贯穿节点),dot/emoji 叠在 spine 上;journal 用子项目色条贯穿该组全部卡片(::before 从组头拉到组底)。

为什么不把 emoji 挪进卡内?因为 classic 的识别符号是「轨上的点与表情」,进卡后轨会空、时间轴感变弱; 头像负责评论归属,emoji 负责时间轴装饰与筛选感,分职更清晰。

一、Classic:连续轨 + 卡内评论

左轨 spine 不断开;有评论时轨上可出现 emoji 节点。评论在白卡底部浅底分区,非满宽气泡 + 头像。

C1 · 推荐结构(定稿候选)

正文 → 工具行 → 分隔线 → 评论区。emoji 在轨,头像在评论行。

9:415G ●
‹
北海道自驾
+
⋯
薄野晚饭
7/12 18:40
成吉思汗烤肉,啤酒很上头。
🎤⋯
评论 · 2
我
▶
0:12
18:55
同
那家店排队值了。
19:05
3 小时
抵达新千岁
7/12 14:20
天气很好,租车顺利。末端无间隔。
🎤⋯
推荐 工具行在评论上 无评论不占区分隔

C2 · emoji 轨对齐评论(增强)

若某条有带 emoji 的评论,在卡中部轨上叠 emoji;spine 仍连续穿过。

9:415G ●
‹
北海道自驾
+
⋯
🔥
😋
薄野晚饭
18:40
成吉思汗烤肉,啤酒很上头。
🎤⋯
评论 · 2
我
火候刚好 🔥
18:55 · emoji 对齐左轨
同
还想再来 😋
19:05
3 小时
抵达新千岁
14:20
无评论 · 轨上仅圆点。
🎤⋯
可选增强 实现成本中 需量测评论行 y
二、Journal:连续色条 + 卡内评论

子项目色条从组标题贯穿组内所有卡片(含有评论的高卡片),不再「每卡一段断开」。

J1 · 推荐结构

日头 → 色条组 → 卡(时间含间隔 · 正文 · 工具 · 评论)。无评论则无底部分区。

9:415G ●
‹
北海道自驾
+
⋯
127 月 · 周六
Day 1 札幌 · 2 条
18:40 · 间隔 3 小时
薄野晚饭
成吉思汗烤肉,啤酒很上头。
🎤⋯
我
▶
0:12
同
那家店排队值了。
19:05
14:20
抵达新千岁
末端 · 仅时间 · 无评论区。
🎤⋯
137 月 · 周日
Day 2 富良野 · 1 条
09:10 · 间隔 14 小时
花田公路
色条贯穿整组,不在卡片间隙断开。
🎤⋯
推荐 色条连续 与 classic 评论区同构

结构对比:现在 vs 定稿

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