第五轮 · 数据密集组件
Dashboard / 列表 / 详情页的数据展示。
本轮 5 个：① Chart（图表包装）② Timeline（时间线）③ Descriptions（详情键值对）④ Filter（筛选条）⑤ EmptyTableRow（表格空态）
1Chart · 图表包装
基于 Recharts 封装。统一配色 token（深色模式自适应）、tooltip 样式、legend。替换 DashboardCharts 硬编码色。支持 Line/Bar/Area/Pie。
近 7 日审核量趋势
LineChart: { data; series: {key;color}[] } | 配色走 --chart-1~5 token，深色自适应
2Timeline · 时间线
垂直时间线。4 种节点状态（成功/警告/错误/待处理）。替换 TaskDetail 自造 timeline、DirectiveAuditTrail。任务流转、审核记录、操作日志。
- 14:30审核通过评分 92 分，符合发布标准
- 13:15Guard chain 检查内容合规性 + 品牌一致性通过
- 12:00内容生成中AI 生成视频脚本 + 分镜
- 09:00任务创建龙安温 创建任务
props: { items: { status?: 'success'|'warning'|'error'|'pending'|'active'; title; time; description?; tags? }[] }
3Descriptions · 详情键值对
键值对详情展示。左标签右值，整齐对齐。TaskDetail / DirectiveDetail 的元信息区。比手写 grid 规整。
任务 ID
task_12345678
渠道
视频号
创建者
龙安温
创建时间
2026-07-24 09:00
状态
审核中
优先级
高
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 自动适配。
empty
暂无数据 新数据到达后将显示在此 |
loading
加载中 正在获取数据... |
error
加载失败 请稍后重试 |
props: { colSpan; variant?: 'empty'|'loading'|'error'; title; description?; action?; onRetry? }