- 分组
- 计划 · 按周排开的工作
- 组件
Gantt·#gantt- 交互
- 条形依次从左生长；悬停一行时条形上浮。
适合
- 30–90 天的行动计划、试点排期
- 多条工作流互相重叠，需要看清先后
不适合
- 有真实日期的长期周期（版本支持、合同期）：用 Timeline
- 只有先后没有时长：用 StepTrack
内容上限
| 1 | axis 6–16 个单位；groups 2–4 段 |
| 2 | rows 3–7 行：label ≤ 12 字；按开始时间排序 |
| 3 | 条形少于 2 个单位时，条内的“5–9”标签会放不下 |
| 4 | footnote ≤ 40 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
axis · 必填 | { from, to, unit } | 单位轴，含两端 |
groups | { label, from, to }[] | 上方分组 |
rows · 必填 | { label, from, to, focus? }[] | 工作流 |
footnote | string | 图下注释 |
示例代码
<Gantt
kicker="90 天"
title="第一个 90 天，按周排开"
axis={{ from: 1, to: 13, unit: '周' }}
groups={[{ label: '第 1 个月', from: 1, to: 4 }, { label: '第 2 个月', from: 5, to: 8 }, { label: '第 3 个月', from: 9, to: 13 }]}
rows={[
{ label: '基线测量', from: 2, to: 4 },
{ label: '改写 3–5 个核心页面', from: 5, to: 9 },
{ label: '复测并汇报', from: 10, to: 13, focus: true },
]}
source="示例知识库 · 从零建立品牌"
/>