Timeline
按时间顺序展示事件。中文惯用名：时间线。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.timeline |
| 名称 | Timeline |
| 二级分类 | 数据展示（data-display） |
| 用途 | 按时间顺序展示事件 |
| 描述 | 中文惯用名：时间线。 |
预览
静态结构：Timeline 渲染为 <ul>（data-slot="timeline"），节点 <li> 为 flex 行——左侧节点位（有 icon 时渲染 Icon 白名单图标，否则渲染 8px 圆形圆点，缺省品牌色、可被 color 覆盖）+ 右侧 content 与可选 time（弱化小字）。非末节点以绝对定位竖线连接（top 对齐圆点下缘）。pending 为 true 时末尾追加默认文案「进行中」节点，传字符串则用自定义文案；pending 节点为普通圆点样式。
DSL 结构
{
"type": "Timeline",
"props": {
"items": [
{
"content": "提交采购申请",
"time": "09-20 10:24"
},
{
"content": "主管审批通过",
"time": "09-20 14:02"
},
{
"content": "财务付款中",
"time": "09-21 09:15"
}
],
"pending": "待收货确认"
}
}何时用
何时使用
- 按时间顺序展示事件流：物流轨迹、操作记录、版本发布、审批历史。
- 事件以「内容 + 时间」为主，需要表达先后次序而非当前进度。
- 末尾需要挂一个「进行中」占位节点提示流程未完结。
何时不用
- 表达分步任务进度与当前所处步骤（含完成 / 进行 / 失败态）：使用 Steps；Timeline 记录的是已发生事件。
- 展示同类对象集合：使用 List；层级关系：使用 Tree。
- 高频实时数据流：Timeline 无虚拟化与滚动加载，长流水需分页或截断。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 默认 | 品牌色圆点 + 内容 + 可选时间 | 常规事件流（操作记录、物流轨迹） |
| 自定义圆点颜色 | 节点 color 覆盖圆点色 | 按事件性质着色（成功绿、异常红） |
| 图标节点 | 节点位渲染 Icon 白名单图标 | 关键里程碑区别于普通节点 |
| pending 进行中 | 末尾追加「进行中」或自定义文案节点 | 流程未完结的占位提示（如「等待配送」） |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | TimelineItemData[] | [] | 节点列表（可含表达式解析后的数组）；项结构 { content, time?, color?, icon? } |
pending | `boolean | string` | false |
className | string | — | 通用：根节点 class（与内置样式合并） |
style | CSSProperties | — | 通用：根节点内联样式 |
使用规范
- 节点按时间顺序组织（通常最新在上或最旧在上，全页统一），content 为一句话事件描述，time 用统一时间格式。
- icon 与 color 用于标记关键节点，同一条时间线上着色语义保持一致（如红色固定表示异常）。
- pending 节点只表示「未完结」，不承载操作；流程结束后移除 pending。
- 节点内容过长截断或换行由容器控制，正文详情用链接 / 弹层承接，不在节点内堆长文。
- 仅竖向排布；需要横向步骤或进度语义时改用 Steps。
正例
- ✓ 物流详情：items 按时间倒序展示「已揽收 → 运输中 → 派送中」，pending="等待签收"。
- ✓ 审批记录：通过节点 color 标绿、驳回节点标红并配 icon，time 展示操作时间。
- ✓ 发布历史：里程碑版本用 icon 节点，常规迭代用默认圆点。
反例
- ✕ 用 Timeline 表达「当前进行到哪一步」的进度语义（应使用 Steps）。
- ✕ 同一条时间线内颜色语义混乱（同一红色一会儿表示错误一会儿表示强调）。
- ✕ 节点内塞入大段正文或操作按钮组（详情与操作应收纳到链接 / 弹层）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。