时间线 <Timeline />

共享日历轴上的分段条，自动标注每个分界日期、画出“今天”并给过去的时间加斜纹；可选 3 个按浏览者时钟实时计算的倒计时。

版型與風格的說明目前僅提供簡體中文。

分組: 时间 · 周期与路线图
元件: Timeline · #timeline
互動: 分段依次生长；“今天”与倒计时在每次打开时按当前日期计算，演示不会过期。

適合

支持周期、合同期限、版本路线图、项目阶段
想让听众意识到“还剩多久”

不適合

只有一个日期：放进 Cover 的 facts
超过 3 行：拆成两页
事件是离散的点而不是区间：用 StepTrack

內容上限

1	rows 1–3 行；有 countdowns 时 ≤ 2 行
2	每行 segments 首尾相接，1–3 段
3	段内 label 要比段短：一年长的段 ≤ 6 字
4	countdowns ≤ 3 个
5	轴两端各留约半年空白

欄位

欄位	型別
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`axis` · 必填	`{ from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' }`	可见范围，年份刻度自动生成
`rows` · 必填	`TimelineRow[]`	name, code?, segments[{ from, to, label?, tone }], planned?
`legend` · 必填	`{ ink, accent }`	两种色调的图例文字
`today`	`boolean`	是否画“今天”线与过去斜纹，默认 true
`countdowns`	`{ label, until, note? }[]`	图下方的剩余月数

範例程式碼

<Timeline
  kicker="支持周期"
  title="birch 已转入 LTS"
  axis={{ from: '2023-01-01', to: '2031-01-01' }}
  legend={{ ink: '常规安全支持', accent: 'LTS 长期支持' }}
  rows={[{
    name: 'Lumen 12', code: 'birch',
    segments: [
      { from: '2023-06-10', to: '2026-07-12', label: '常规安全支持', tone: 'ink' },
      { from: '2026-07-12', to: '2028-06-30', label: 'LTS', tone: 'accent' },
    ],
  }]}
  countdowns={[{ label: 'birch 剩余维护', until: '2028-06-30' }]}
  source="wiki.example.org/LTS"
/>