按时间展示审批节点、处理人、意见和当前等待对象。A timeline showing approval steps, owners, comments, and the person currently blocking progress.
B 端后台B2B admin时间轴Timeline详情Detail时间轴Timeline双栏Split view专业Professional密集Dense
审批详情
采购审批 #PR-0831设计工具年度订阅
等待财务确认
财务确认等待周宁处理，已等待 3 小时直属负责人通过陈一 · 今天 09:42
预算归属清楚，同意采购。
申请已提交林然 · 昨天 17:26
确认审批意见通过后将进入采购执行。
提交失败审批意见已保留。
审批已通过采购负责人将收到通知。
标本可交互，可以切换不同状态。Interactive specimen — switch between the available states.
适用场景Use cases
进度追踪、责任定位、审批处理进度追踪 · 责任定位 · 审批处理
关键状态Key states
默认Default待确认Pending错误Error成功反馈Success
布局结构Structure
当前审批摘要Current approval summary
主要时间轴Primary timeline
关联单据侧栏Related-record sidebar
处理操作区Decision area
视觉特征Visual traits
当前节点最突出The current step leads
历史节点可快速扫描History scans quickly
意见与系统事件视觉区分Comments and system events look different
实现约束Implementation guardrails
需要做到Do
显示当前等待对象和已等待时长Show the current owner and wait time
系统事件与人工意见分开Separate system events from human comments
处理失败保留填写内容Preserve form input after a failed action
避免Avoid
所有节点使用相同强调级别Give every node the same emphasis
只显示状态不显示处理人Show status without the responsible person
AI 风格说明AI design brief
构建一个能快速回答当前卡在哪里的审批时间轴。
适用场景：进度追踪、责任定位、审批处理。
页面结构：当前审批摘要；主要时间轴；关联单据侧栏；处理操作区。
视觉特征：当前节点最突出；历史节点可快速扫描；意见与系统事件视觉区分。
关键状态：默认、待确认、错误、成功反馈。
需要做到：显示当前等待对象和已等待时长；系统事件与人工意见分开；处理失败保留填写内容。
避免：所有节点使用相同强调级别；只显示状态不显示处理人。Build an approval timeline that answers where the request is blocked.
Use cases: Progress tracking, Ownership, Approval handling.
Structure: Current approval summary; Primary timeline; Related-record sidebar; Decision area.
Visual traits: The current step leads; History scans quickly; Comments and system events look different.
Key states: Default, Pending, Error, Success.
Do: Show the current owner and wait time; Separate system events from human comments; Preserve form input after a failed action.
Avoid: Give every node the same emphasis; Show status without the responsible person.
# 审批活动时间轴 (Approval Activity Timeline)
按时间展示审批节点、处理人、意见和当前等待对象。
A timeline showing approval steps, owners, comments, and the person currently blocking progress.
## 分类
- 产品类型：B 端后台 / B2B admin
- 页面类型：时间轴、详情 / Timeline, Detail
- 布局方式：时间轴、双栏 / Timeline, Split view
- 视觉气质：专业、密集 / Professional, Dense
- 关键状态：默认、待确认、错误、成功反馈 / Default, Pending, Error, Success
## 页面结构
- 当前审批摘要 / Current approval summary
- 主要时间轴 / Primary timeline
- 关联单据侧栏 / Related-record sidebar
- 处理操作区 / Decision area
## 视觉特征
- 当前节点最突出 / The current step leads
- 历史节点可快速扫描 / History scans quickly
- 意见与系统事件视觉区分 / Comments and system events look different
## AI 风格说明 / AI design brief
构建一个能快速回答当前卡在哪里的审批时间轴。
适用场景：进度追踪、责任定位、审批处理。
页面结构：当前审批摘要；主要时间轴；关联单据侧栏；处理操作区。
视觉特征：当前节点最突出；历史节点可快速扫描；意见与系统事件视觉区分。
关键状态：默认、待确认、错误、成功反馈。
需要做到：显示当前等待对象和已等待时长；系统事件与人工意见分开；处理失败保留填写内容。
避免：所有节点使用相同强调级别；只显示状态不显示处理人。
Build an approval timeline that answers where the request is blocked.
Use cases: Progress tracking, Ownership, Approval handling.
Structure: Current approval summary; Primary timeline; Related-record sidebar; Decision area.
Visual traits: The current step leads; History scans quickly; Comments and system events look different.
Key states: Default, Pending, Error, Success.
Do: Show the current owner and wait time; Separate system events from human comments; Preserve form input after a failed action.
Avoid: Give every node the same emphasis; Show status without the responsible person.
来源：LearnUI PM 原创示例，MIT License
