Timeline 时间线
Timeline 用于按时间顺序串起一组事件、阶段或发布动作。Rue 现在同时支持手写 children 布局和更贴近业务组件心智的 items 数据 API；项目页面里的示例 标题与排列也展示，避免增强时把基础示例吞掉。
数据驱动
items、mode、reverse
直接传入 title、content、color、pending 等字段，不用再手写每个 li 的骨架。
精细布局
Start / Middle / End
适合需要把时间、图标和内容排成更强定制结构的场景。
视觉控制
color、snapIcon、compact
在不改 Rue 当前视觉基调的前提下，把状态色、图标吸附和紧凑排布一起补充。
连接线仍然由每个节点前后的 hr 负责；当你使用 items 时，组件会自动推断这些线条。手写 children 时，仍然建议显式保持 hr 以获得最稳定的布局。
# Timeline 通过数据渲染（数组）
展示基础“外部数组 map 成 li”的用法，但示例内容更完整，适合从现成业务数据直接渲染。
- 1984✓LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
- 1998✓RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
- 2001✓PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
- 2007✓TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
- 2015✓WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# Timeline 通过数据渲染（数组，组件内部）
如果你已经习惯 Rue 基础的 start / middle / end 结构，现在仍然可以通过 items 直接交给组件内部渲染。
- 19841LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
19982RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
20013PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
20074TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
# reverse 与 pending
通过数据 API 组合 mode、reverse 和 pending，控制内容侧、顺序和等待节点。
- 质量复核中
BuildStage 2联调完成把视觉稿、交互状态和数据请求在一个里程碑上对齐。
Stage 1需求冻结确定业务范围和验收标准，避免后续迭代反复打断主线。Brief
# 两侧文字与图标
展示基础复合组件写法，适合时间标签与主内容天然分居两侧的场景。
- 19841LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
19982RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
20013PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
20074TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
20155WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# 仅底部一侧
当上侧只需要留出轨道和节点，不需要额外元信息时，可以只渲染 end 一侧。
- 1LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
2RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
3PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
4TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
5WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# 不同侧交替
使用 mode=alternate 后，主内容会在两侧自动切换，不再需要手写交替布局。
- Week 1梳理场景把用户角色、目标和约束收敛成可以执行的启动清单。Discovery
DesignWeek 2交互定稿把关键流转拆到组件、状态和异常提示三个层次。
Week 3上线校验在真实流量前补充埋点、回滚预案和发布检查单。Ship
# 彩色线条
color 会同步作用于默认圆点和连接线，让状态型时间线更清晰。
- Launch1984Macintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
Reboot1998iMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
Pocket2001iPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
Touch2007iPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
# 无图标
如果只想保持轨道和信息块，可以完全省略 middle 区域。
- 1984LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
1998RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
2001PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
2007TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
2015WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# 纵向：两侧文字与图标
纵向布局仍然适合记录里程碑、工单流转或调试过程。
- 19841LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
19982RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
20013PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
20074TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
20155WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# 纵向：仅右侧
纵向时间线最常见的业务形态是只保持内容一侧，把主信息集中在右侧阅读。
- 1LaunchMacintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
2RebootiMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
3PocketiPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
4TouchiPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
5WearApple Watch 成型把通知、健康和轻交互收束到一条更贴身的设备线。
# 纵向：不同侧交替
在纵向模式下配合 mode=alternate，可以做更有节奏感的发布轨迹或品牌时间线。
- Week 1梳理场景把用户角色、目标和约束收敛成可以执行的启动清单。Discovery
DesignWeek 2交互定稿把关键流转拆到组件、状态和异常提示三个层次。
Week 3上线校验在真实流量前补充埋点、回滚预案和发布检查单。Ship
# 纵向：彩色线条
color 在纵向布局下更适合表达节点状态，例如成功、风险、待处理等。
- Launch1984Macintosh 发布用图形界面和桌面工作流把个人计算体验拉到一个新门槛。
Reboot1998iMac 回归让产品语言、品牌和硬件方向重新对齐，快速恢复增长。
Pocket2001iPod 上线把设备、内容和同步体验打通，首次形成轻量生态闭环。
Touch2007iPhone 亮相用多点触控把移动设备从输入工具转成完整的交互平台。
# 图标吸附到起始侧（snap to start）
snapIcon 和 compact 组合后，更适合侧栏式或审计日志式的紧凑纵向布局。
- Plan101项目拆解先把节奏拆成清晰节点，再把每个节点的所有者钉下来。
Review202体验走查在联调前做一次完整路径走查，尽量把细碎问题前置。
Ship303灰度上线展示观察窗口和回滚钩子，让上线是一个可管理过程。
增强能力
本节集中展示数据 API 的组合场景，例如 `reverse`、`pending`、`mode` 等，更适合业务数据直接驱动。
# reverse 与 pending
通过数据 API 组合 mode、reverse 和 pending，控制内容侧、顺序和等待节点。
- 质量复核中
BuildStage 2联调完成把视觉稿、交互状态和数据请求在一个里程碑上对齐。
Stage 1需求冻结确定业务范围和验收标准，避免后续迭代反复打断主线。Brief
API
推荐优先使用 items 进行数据驱动渲染；当你需要极细粒度地控制每个节点结构时，再回到 Start / Middle / End 组合方式。
Timeline
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 展示基础手写布局能力，适合完全自定义每个 li 的内容结构 | any | - |
className | 附加到根节点 ul.timeline 的类名 | string | - |
compact | 启用 daisyUI 的 timeline-compact，让节点更集中地落在单侧 | boolean | false |
direction | 时间线方向，使用 Rue 当前命名 | horizontal | vertical | horizontal |
items | 数据驱动节点列表，支持 title、content、color、icon、loading 等增强能力 | TimelineItemProps[] | - |
mode | 自动决定主内容所在侧，alternate 会按索引在两侧交替 | start | end | alternate | end |
orientation | direction 的别名，方便按常见业务组件的接入写法 | horizontal | vertical | - |
pending | 在尾部追加等待中的节点，可传 true、文本或 JSX | boolean | any | false |
pendingDot | 自定义 pending 节点的图标或圆点 | any | - |
reverse | 反转 items 顺序，适合从最近事件向过去回溯 | boolean | false |
snapIcon | 启用 timeline-snap-icon，让中间图标更贴近起始侧 | boolean | false |
TimelineItemProps
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
afterLine | 显式控制当前项后方是否渲染连接线；未传时自动推断 | boolean | auto |
beforeLine | 显式控制当前项前方是否渲染连接线；未传时自动推断 | boolean | auto |
box | 自动布局下让主内容一侧带上 timeline-box | boolean | false |
color | 为默认圆点和连接线设置语义色，支持 primary、success 或自定义颜色值 | string | - |
content | 自动布局时的主内容，通常映射到时间线的主侧 | any | - |
contentBox | 自动布局时仅让 content 一侧启用 timeline-box | boolean | false |
end | 直接传入 end 段结构，适合使用 Rue 基础的精细布局模式 | TimelineItemPart | - |
icon | 替换默认圆点的图标节点 | any | - |
iconClassName | 附加到自动生成 middle 节点上的类名 | string | - |
label | title 的别名，可用于衔接基础心智 | any | - |
lineClassName | 附加到前后 hr 连接线的类名 | string | - |
loading | 用 loading 圆点渲染当前节点，适合 pending 之前的进行中状态 | boolean | false |
middle | 直接覆盖中间图标区，优先级高于 icon、dot 和 loading | TimelineMiddlePart | - |
placement | 指定主内容落在 start 还是 end 一侧 | start | end | - |
position | placement 的别名，支持 left、right、start、end | left | right | start | end | - |
start | 直接传入 start 段结构，适合整合基础示例 的写法 | TimelineItemPart | - |
title | 自动布局时的辅助信息，通常映射到主内容的对侧 | any | - |
titleBox | 自动布局时仅让 title 一侧启用 timeline-box | boolean | false |