路线图 <Roadmap />

2–4 条工作线 × 3–5 个时间段；事项可以跨段，分已完成（灰底带勾）、进行中（强调色，带呼吸点）、计划（虚线框）；一条“今天”竖线标出当前位置。

Template and style descriptions are currently available in Chinese only.

Group: 规划 · 按季度看方向
Component: Roadmap · #roadmap
Interaction: 事项按工作线依次升起；进行中的事项带呼吸点。

Good for

季度或半年粒度的产品、市场、销售路线图
要同时表达方向和进度

Avoid when

按周排期：用 Gantt
没有时间段，只分现在 / 下一步 / 之后：用 Lanes

Content limits

1	periods 3–5 个，每个 ≤ 8 个字符
2	tracks 2–4 条；label ≤ 6 字
3	items 4–12 个；只占一段时 title ≤ 8 字，跨段时 ≤ 12 字
4	同一条工作线同一时间段最多两个事项

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`periods` · required	`string[]`	时间段
`tracks` · required	`{ label, icon? }[]`	工作线
`items` · required	`{ track, from, to?, title, status }[]`	事项；status 为 'done' \| 'doing' \| 'next'
`now`	`number`	“今天”的位置，以时间段为单位，如 1.4
`labels`	`{ done?, doing?, next? }`	图例文字

Example

<Roadmap
  kicker="路线图"
  title="上市后的四个季度"
  periods={['第 1 季度', '第 2 季度', '第 3 季度', '第 4 季度']}
  tracks={[{ label: '产品', icon: 'widget' }, { label: '市场', icon: 'presentation' }]}
  items={[
    { track: 0, from: 0, title: '公开测试版', status: 'done' },
    { track: 0, from: 1, title: '团队协作', status: 'doing' },
    { track: 1, from: 1, to: 2, title: '行业案例系列', status: 'next' },
  ]}
  now={1.4}
  source="示意"
/>