- 分组
- 技术 · 并发 · 谁先谁后
- 组件
SessionSequence·#session-sequence- 交互
- build 模式下每按一次 → 出现下一个事件
适合
- 讲事务隔离、锁等待、竞态
- 讲两三方之间的调用先后
不适合
- 事件超过 7 个
- 只有一方：用 StepTrack 或 Timeline
- 要讲跨部门流程：用 Swimlane
内容上限
| 1 | lanes 2–3 个，每个 ≤ 10 字 |
| 2 | events 3–7 个：text ≤ 30 个字符，note ≤ 12 字 |
| 3 | axis ≤ 4 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
lanes · 必填 | string[] | 会话名 |
events · 必填 | { lane, text, note?, kind?: 'wait' | 'ok' }[] | 按时间排序的事件 |
axis | string | 时间轴标签，默认“时间” |
示例代码
<SessionSequence kicker="隔离" title="…" lanes={['会话 A', '会话 B']} events={[{ lane: 0, text: 'BEGIN;' }, { lane: 1, text: 'UPDATE …', note: '等待 A', kind: 'wait' }, …]} />