梧桐设计语言v0.4.1

状态芯片StatusPill

状态芯片:浅底同色深字、圆角 radius-chip(4px)、必须带图标chip 字号 12.5。不用胶囊形、不用描边、不只靠颜色。


五态与 token:正常 / 已验收 → successsuccess-soft;超期 / 需关注 → warning;故障 / 失败 → destructive;进行中 / 已派单 → info;待派单 / 未开始 → pending。跨主题恒定,不随换肤改。

松墨主题下「已验收」改成实心 success 底 + on-status 字,因为主色也是绿。文字要说具体状态(「超期 2 天」比「超期」好)。

消费者提供:状态类型、文案、可选的数字(超期天数)。

示例

import
import { StatusPill } from "@wutong/ui";

五态

浅底同色深字、4px 圆角、必须带图标

已验收超期 2 天故障进行中待派单

实心

松墨主题下的「完成」、现场端要 7:1 时用

已验收超期 2 天故障

API

属性类型默认说明
status"ok" | "warn" | "bad" | "info" | "pending"正常 / 超期 / 故障 / 进行中 / 待处理。跨主题恒定
solidbooleanfalse实心状态底 + on-status 字
iconboolean | ReactNodetrue默认带对应状态图标