第五轮 · 数据密集组件
图表 / 时间线 / 详情展示 / 筛选 / 表格空态。Dashboard + 详情页 + 列表场景。
本轮 5 个：① Chart（图表包装）② Timeline（时间线）③ Descriptions（详情键值对）④ Filter（筛选条）⑤ EmptyTableRow（表格空态）
1Chart · 图表包装
基于 Recharts 封装。统一配色 token（深色模式自适应）、tooltip 样式、legend。替换 DashboardCharts 硬编码色。支持 Line/Bar/Area/Pie。
审核趋势
通过驳回
折线图（Line）
渠道分布
柱状图（Bar）
LineChart: { data; series: {key;name}[] } | BarChart: { data; series } | 配色走 --chart-1~5 token，深色自适应
2Timeline · 时间线
垂直时间线。4 种节点状态（成功/警告/错误/待处理）。替换 TaskDetail 自造 timeline、DirectiveAuditTrail。任务流转、审核记录、操作日志。
- 2026-07-24 14:30审核通过已通过由 龙安温 审核
- 2026-07-24 13:15Guard chain 检查内容合规性、品牌规范、质量评分均通过
- 2026-07-24 11:00质量评分预警警告分辨率低于 1080p，已自动优化
- 2026-07-24 09:00任务创建视频号内容生成任务 #1234
props: { items: { status?: 'success'|'warning'|'error'|'pending'|'active'; title; time; description?; tags? }[] }
3Descriptions · 详情键值对
键值对详情展示。左标签右值，整齐对齐。TaskDetail / DirectiveDetail 的元信息区。比手写 grid 规整。
任务 ID
task_2026_1234渠道
视频号
创建者
龙安温
创建时间
2026-07-24 09:00:32
状态
● 已通过
预算消耗
¥ 12.50 / ¥ 50.00（25%）
props: { items: { label; value: ReactNode }[]; column?: number; bordered?; size? }
4Filter · 筛选条
列表筛选区。字段组合（select/date/search）+ 已选条件 chip（可移除）+ 清空。比散落的 select 整齐。
|视频号
props: { fields: FilterField[]; value: Record; onChange } | 受控，fields 定义筛选维度
5EmptyTableRow · 表格空态
表格内空/加载/错误三态行。替换「暂无XX」纯文字 +「加载中...」散落。colSpan 自动适配。
| 任务 | 渠道 | 状态 |
|---|---|---|
暂无任务 新任务到达后将显示在此 | ||
空态
| 任务 | 渠道 | 状态 |
|---|---|---|
加载中 正在获取任务列表... | ||
加载态
props: { colSpan; variant?: 'empty'|'loading'|'error'; title; description?; action?; onRetry? }