状态芯片StatusPill
状态芯片:浅底同色深字、圆角 radius-chip(4px)、必须带图标、chip 字号 12.5。不用胶囊形、不用描边、不只靠颜色。
五态与 token:正常 / 已验收 → success 压 success-soft;超期 / 需关注 → warning;故障 / 失败 → destructive;进行中 / 已派单 → info;待派单 / 未开始 → pending。跨主题恒定,不随换肤改。
松墨主题下「已验收」改成实心 success 底 + on-status 字,因为主色也是绿。文字要说具体状态(「超期 2 天」比「超期」好)。
消费者提供:状态类型、文案、可选的数字(超期天数)。
示例
import { StatusPill } from "@wutong/ui";
API
| 属性 | 类型 | 默认 | 说明 |
|---|
| status | "ok" | "warn" | "bad" | "info" | "pending" | — | 正常 / 超期 / 故障 / 进行中 / 待处理。跨主题恒定 |
| solid | boolean | false | 实心状态底 + on-status 字 |
| icon | boolean | ReactNode | true | 默认带对应状态图标 |