PU 设计系统 · Playground

Muji×Stripe 融合 · 配色 O(Paper + Emerald)

第二轮 · 反馈数据组件

操作终态反馈 + Dashboard 数据展示 + 可操作标签 + 复合骨架屏。

本轮 4 个:① Result(结果页大图态)② Statistic(KPI 数据卡)③ Tag(可关闭/选中/状态点)④ Skeleton 增强(文本/头像/卡片/图表复合)
1Result · 结果页

操作完成后的整页/大块反馈(提交成功/失败/警告)。比 EmptyState 更重,比 toast 更正式。用于任务完成、审核驳回、支付成功等终态。

审核已通过

内容已进入发布队列,预计 5 分钟后上线。

提交被驳回

Guard chain 检测到内容不符合品牌规范,请修改后重试。

预算即将耗尽

今日 LLM token 预算剩余 18%,继续操作可能中断。

同步进行中

知识库正在后台同步,完成后将自动刷新。
props: { status: 'success'|'error'|'warning'|'info'; title; description?; icon?; extra?; actions?: ReactNode[] }
2Statistic · KPI 数据卡

Dashboard 数据展示。数值 + 前后缀 + 趋势(涨/跌)+ 图标。替换 DashboardCharts 自造的数字块。

今日审核
47
↑12% 较昨日
预算消耗
¥328.50
↓8% 较昨日
活跃任务
12
3 个待审核
完成率
94%
↑2.3%
平均耗时
3.2分
↓0.4 分
知识条目
1,247
本周新增 23
props: { label; value; prefix?; suffix?; trend?: { dir:'up'|'down'; text }; icon?; extra?; loading? }
3Tag · 可操作标签

区别 Badge(纯展示)。Tag 支持:可关闭、可选中、带状态点、outline 样式。用于筛选器、标签输入、分类选择。

基本类型(5 色 + outline)
默认主色成功警告错误描边
可关闭(筛选器场景)
视频号小红书抖音B站
带状态点(语义状态)
已通过审核中已驳回待处理
可选中(单选/多选切换)
全部本周本月本季
props: { variant?: 'default'|'accent'|'success'|'warning'|'error'|'outline'; closable?; onClose?; selectable?; selected?; dot?; icon? }
4Skeleton · 骨架屏增强

现有 Skeleton 是单块。增强为复合:SkeletonText(多行文本)、SkeletonAvatar、SkeletonCard(卡片组合)、SkeletonChart(图表占位)。替换业务页 loading 态。

SkeletonText(多行段落)
SkeletonCard(列表项)
SkeletonStatistic(数据卡)
SkeletonChart(图表占位)
SkeletonText: { lines?; width? } | SkeletonAvatar: { size? } | SkeletonCard / SkeletonStatistic / SkeletonChart(复合预设)