时间轴Timeline
你可能会说
物流到哪一步了，按时间排出来，让用户看得明白。
时间轴是按时间顺序展示一组事件、状态或记录的数据组件物流记录可依次显示“已下单、已发货、运输中”。需统一最新事件放在上方或下方，并用文字说明状态，不能只靠颜色和圆点。
你可以这样告诉 AI Agent
请把工单操作记录做成时间轴，统一从新到旧或从旧到新排列，每个节点显示操作者、时间、动作和结果。不要做成待办步骤条；用转交失败和重新打开事件验证顺序仍清楚。
什么时候用
- 物流 / 订单进度：已下单 → 已发货 → 已签收已签收 · 今天 14:32运输中 · 昨天 09:15已下单 · 前天 20:02
- 审批 / 操作记录：谁在什么时候做了什么ans-studio 通过了审批林小hu 提交了审批创建了审批单
- 更新日志：版本记录按时间排开v2.4 新增暗色模式v2.3 修复 12 个问题v2.2 上线协作功能
- 节点有成败状态时，用文字或图标说明结果，颜色只作辅助部署成功构建中…测试失败
组成结构 · Anatomy
包裹已签收07-20 14:32
轴线 + 一串节点的容器
辅助标记节点位置和状态，具体结果仍由文字或图标说明
这一步发生了什么
具体到分钟更好
常见变体 · Variants
基础竖排Vertical
已发货07-19 09:15
已下单07-18 20:02
默认款，事件多就竖着往下排
带状态Status
部署成功
构建中…
测试失败
节点用文字说明结果，并以颜色辅助区分
水平式Horizontal
立项03-01
设计04-10
开发进行中
上线待定
节点少、横向空间够，看整体进度
典型使用场景
物流跟踪
运单 SF1024888运输中
运输中 · 深圳南山转运中心今天 09:15
已揽收 · 杭州余杭网点昨天 20:02
已下单昨天 18:40
审批流转记录
请假审批 · 3 天年假已通过
ans-studio 审批通过07-21 10:24 · 同意
阿麦 审批通过07-20 16:08 · 同意林小hu 提交申请07-20 09:30
版本更新日志
更新日志
v2.4.0 最新2026-07-18 · 新增暗色模式、组件搜索
v2.3.22026-06-30 · 修复 12 个已知问题
v2.3.02026-06-12 · 上线团队协作功能
项目里程碑
新版官网 · 里程碑开发中
立项
03-01
设计
04-10
开发
进行中
上线
待定
快速练习