时间线

Timeline

布局模式也叫：时间轴、进度轨迹、历史记录、Timeline

一句话：沿一条竖线按时间先后排列事件节点，每个节点标明时间和发生了什么，用来展示过程、历史或物流进度。

详细解释

时间线用一条贯穿上下的竖线把多个事件串起来，每个事件是线上的一个圆点，旁边写着时间和描述，比如「2026-09-01 10:20 订单已提交」「2026-09-02 08:00 已发货」。最新的事件通常放在最上面，并用深色圆点突出。

它的重点是先后顺序和时间点：用户一眼就能看出一件事经历了哪些阶段、现在进行到哪一步、每一步是什么时候发生的。常见于物流跟踪、审批记录、操作日志、项目里程碑、版本更新历史。

它和信息流的区别是：信息流里每条是独立的内容，时间只是附属信息；时间线里每条都是同一件事的一个阶段，彼此有前后关系。它和分步向导也不同：分步向导引导用户去完成接下来的步骤，时间线记录的是已经发生的事。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

用时间线（Timeline）展示订单物流：左侧一条竖线，每个节点是一个圆点，右边显示事件描述和灰色小字时间；按时间倒序排列，最新节点用深色实心圆点和加粗文字突出，其余节点用浅灰圆点。节点超过 5 个时只显示最近 5 个，底部放「展开全部」。

一条纵向竖线贯穿始终，线上按时间顺序分布圆点节点，每个节点旁边是事件描述和发生时间。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。