- 分组
- 证据 · 一次事件怎么发生
- 组件
OutageBoard·#outage-board- 交互
- 每按一次 → 出现一个服务的轨道
适合
- 复盘一次故障或事件里各服务的受影响时段
- 同一天内、几小时尺度的时间线
不适合
- 跨天或跨月：用 Gantt
- 只有一条时间线：用 Timeline
内容上限
| 1 | rows 2–6 个：name ≤ 10 字，note ≤ 20 字 |
| 2 | ticks 3–8 个，时间写 HH:MM，同一天 |
| 3 | events 0–3 个，label ≤ 10 字，相邻两个至少隔开窗口的 15% |
| 4 | legend 每项 ≤ 6 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
from · 必填 | string | 窗口开始 HH:MM |
to · 必填 | string | 窗口结束 HH:MM |
ticks · 必填 | string[] | 刻度 |
rows · 必填 | { name, note?, spans: { from, to, state: 'down' | 'degraded' }[] }[] | 服务，每行一步 |
events | { at, label }[] | 关键时刻 |
zone | string | 时区 |
legend | { down, degraded } | 图例文字 |
示例代码
<OutageBoard kicker="可靠性" title="…" from="11:00" to="17:30" ticks={['11:00', …]} rows={[{ name: '核心 CDN', spans: [{ from: '11:28', to: '14:30', state: 'down' }] }, …]} zone="UTC" />