PU 设计系统 · Playground

Muji×Stripe 融合 · 配色 OPaper + Emerald

第二轮 · 反馈数据组件

操作终态反馈 + 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(复合预设)