版本时间线 <TupleVersions />

一条事务号坐标轴上，每个版本是一段从 xmin 到 xmax 的横条，仍有效的版本用强调色；快照是一条竖虚线，下方注明它看到哪个版本。

Template and style descriptions are currently available in Chinese only.

See it in the demo deck →

Group: 技术 · 并发 · 一行数据的多个版本
Component: TupleVersions · #tuple-versions
Interaction: build 模式下每按一次 → 出现一个版本，最后出现快照

Good for

讲 MVCC、多版本、快照隔离
讲任何“同一对象在不同时段有不同值”的有效期

Avoid when

版本超过 4 个
时间是真实日期且需要刻度精确：用 Gantt

Content limits

1	versions 2–4 个；value ≤ 20 个字符
2	snapshots 0–2 个；label ≤ 10 字
3	range 两个整数
4	axis ≤ 12 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`versions` · required	`{ value, xmin, xmax? }[]`	版本，从旧到新
`snapshots`	`{ at, label }[]`	快照位置
`range` · required	`[number, number]`	坐标轴范围
`axis`	`string`	坐标轴说明

Example

<TupleVersions kicker="MVCC" title="…" range={[100, 120]} versions={[{ value: 'balance = 100', xmin: 101, xmax: 108 }, …]} snapshots={[{ at: 105, label: '快照 105' }]} />