第二轮 · 反馈数据组件
操作终态反馈 + Dashboard 数据展示 + 可操作标签 + 复合骨架屏。
本轮 4 个:① Result(结果页大图态)② Statistic(KPI 数据卡)③ Tag(可关闭/选中/状态点)④ Skeleton 增强(文本/头像/卡片复合)
1Result · 结果页
操作完成后的整页/大块反馈(提交成功/失败/警告)。比 EmptyState 更重,比 toast 更正式。用于任务完成、审核驳回、支付成功等终态。
审核通过
已进入发布队列,预计 14:30 自动发布。
审核驳回
Guard chain 检测到内容不合规,请修改后重新提交。
预算预警
今日 token 消耗达 80%,剩余预算 ¥120。
等待审核
内容已提交,前方还有 3 条排队中。
props: { status: 'success'|'error'|'warning'|'info'; title; description?; icon?; extra?; actions?: ReactNode[] }
2Statistic · KPI 数据卡
Dashboard 数据展示。数值 + 前后缀 + 趋势(涨/跌)+ 图标。替换 DashboardCharts 自造的数字块。
今日审核
47
↑12%
预算消耗
¥328
↓8%
完成率
94%
props: { label; value; prefix?; suffix?; trend?: { dir:'up'|'down'; text }; icon?; extra?; loading? }
3Tag · 可操作标签
区别 Badge(纯展示)。Tag 支持:可关闭、可选中、带状态点、outline 样式。用于筛选器、标签输入、分类选择。
6 种 variant
主色成功警告错误描边
可关闭
家居好物已发布待审核
状态点
进行中已发布草稿
props: { variant?: 'default'|'accent'|'success'|'warning'|'error'|'outline'; closable?; onClose?; selectable?; selected?; dot?; icon? }
4Skeleton · 骨架屏增强
现有 Skeleton 是单块。增强为复合:SkeletonText(多行文本)、SkeletonAvatar、SkeletonCard(卡片组合)。替换业务页 loading 态。
SkeletonText(文本段落)
SkeletonCard(卡片项)
SkeletonStatistic(数据卡)
SkeletonAvatar(头像)
SkeletonText: { lines?; width? } | SkeletonAvatar: { size? } | SkeletonCard / SkeletonStatistic / SkeletonChart(复合预设)