Timeline
timeline时间线 · 复合 Timeline/Item + items 数组 + 彩色节点/自定义 dot + left/right/alternate + pending 加载态(纯皮肤·零依赖·RSC)
用法
基础用法
items 数组驱动，每项 label 作时间戳、children 作正文、color 控制圆点语气色。
- 员工提交报销申请09:12
- 直属经理审批通过10:40
- 财务复核退回（缺发票）14:05
- 员工补充材料并重新提交16:20
tsx
<Timeline
items={[
{ label: "09:12", children: "员工提交报销申请", color: "primary" },
{ label: "10:40", children: "直属经理审批通过", color: "success" },
{ label: "14:05", children: "财务复核退回（缺发票）", color: "danger" },
{ label: "16:20", children: "员工补充材料并重新提交", color: "warning" },
]}
/>进行中（pending）
pending 在末尾追加进行中的幽灵项（加载态圆点 + 虚线连入）。
- 包裹已揽收 · 杭州转运中心06-01 08:00
- 运输中 · 已发往上海06-01 22:30
- 已到达 · 上海浦东派送点06-02 09:15
- 运输中 · 预计明日送达
tsx
<Timeline items={logistics} pending="运输中 · 预计明日送达" />自定义节点
复合用法直接传 <TimelineItem>，dot 可换成图标（用 currentColor 随 color 上色）。
- 账号注册完成步骤一
- 实名认证通过步骤二
- 绑定收款账户（进行中）步骤三
tsx
<Timeline>
<TimelineItem label="步骤一" color="success" dot={CheckIcon}>账号注册完成</TimelineItem>
<TimelineItem label="步骤二" color="success" dot={CheckIcon}>实名认证通过</TimelineItem>
<TimelineItem label="步骤三" color="primary">绑定收款账户（进行中）</TimelineItem>
</Timeline>布局方向
mode 控制节点位置：left（默认）/ right 镜像 / alternate 左右交替。
- 包裹已揽收 · 杭州转运中心06-01 08:00
- 运输中 · 已发往上海06-01 22:30
- 已到达 · 上海浦东派送点06-02 09:15
- 员工提交报销申请09:12
- 直属经理审批通过10:40
- 财务复核退回（缺发票）14:05
- 员工补充材料并重新提交16:20
tsx
<>
<Timeline items={logistics} mode="right" />
<Timeline items={approval} mode="alternate" />
</>何时用
按时间顺序展示一串事件（审批流、物流轨迹、操作历史），每项一个彩色节点 + 内容 + 元信息。要展示单条 git 提交引用用 [GitCommit]（本批近邻 info 组），要展示分步骤的可推进流程用 Steps；本组件是「带连线的纵向事件流」。
导入
ts
import { Timeline, TimelineItem } from "@hulianui/ui"Props
Timeline
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items | TimelineItemProps[] | — | 数据驱动：等价于每项渲染 <TimelineItem {...item} />；与 children 二选一 |
| mode | "left" | "right" | "alternate" | "left" | 布局方向：left=节点在左/内容在右，right=镜像，alternate=逐项左右交替（中轴） |
| …HTMLAttributes | Omit<HTMLAttributes<HTMLOListElement>, "children"> | — | 透传 ol 原生属性 |
TimelineItem
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| color | "default" | "primary" | "success" | "danger" | "warning" | "default" | 默认圆点的语气色；自定义 dot 时忽略 |
| pending | boolean | — | 标记进行中：默认圆点变加载态（旋转环）；连入此项的竖线由 Timeline 自动转虚线 |
| className | string | — | 透传类名 |
Slots
Timeline
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 复合用法：直接传若干 <TimelineItem>；与 items 二选一 |
| pending | boolean | ReactNode | 末尾追加一个进行中幽灵项（加载态圆点）；true=仅图标，传 ReactNode 作其内容 |
TimelineItem
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 主内容 |
| dot | ReactNode | 自定义节点（如图标）；省略则渲染按 color 着色的默认圆点 |
| label | ReactNode | 次要标签（时间戳/元信息），渲染在主内容下方、中性弱化；圆点对齐主内容首行 |
禁忌 / 坑
items与children二选一，不要同时传。label是次要元信息（时间戳），渲染在主内容下方且圆点对齐主内容首行——不要把正文塞 label。dot自定义节点会覆盖color，二者同传时 color 被忽略。
相关
Playground
- 员工提交报销申请09:12
- 直属经理审批通过10:40
- 财务复核退回（缺发票）14:05
- 员工补充材料并重新提交16:20
<Timeline items={items} />