Status
表达运行、审核或业务状态。中文惯用名：状态。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.status |
| 名称 | Status |
| 二级分类 | 通用（general） |
| 用途 | 表达运行、审核或业务状态 |
| 描述 | 中文惯用名：状态。 |
预览
静态结构：<span data-slot="status"> 行内组合——状态点（data-slot="status-dot"，size-2 圆点，success/processing/error/warning/default 分别映射 bg-success / bg-info / bg-destructive / bg-warning / bg-muted-foreground）+ 文本（data-slot="status-text"）；processing 态在圆点下叠加同色系 animate-ping 扩散层（motion-reduce 时退化为静态点）。
DSL 结构
{
"type": "Status",
"props": {
"status": "processing",
"text": "同步中"
}
}何时用
何时使用
- 表达运行、审核或业务状态：服务运行中、任务处理中、审批通过 / 驳回。
- 需要状态点 + 文本的紧凑组合：列表行、详情页头部、统计卡片脚注。
- processing 态需要「进行中」动感：内置 ping 扩散动画。
何时不用
- 纯分类标记、可移除条件：使用 Tag。
- 数量提醒或未读计数：使用 Badge。
- 需要图标 + 大标题的整页结果：使用 Result。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| success | 绿色状态点 | 运行正常、审核通过 |
| processing | 蓝色状态点 + 扩散动画 | 任务进行中、同步中 |
| error | 红色状态点 | 运行异常、审核驳回 |
| warning | 橙色状态点 | 存在风险、即将过期 |
| default | 灰色状态点 | 未启用、已下线等中性态 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
status | `'success' | 'processing' | 'error' |
text | string | — | 状态文本 |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 状态文本与状态点语义必须一致（error 配「失败 / 驳回」类文案，不写中性词）。
- 同一页面的状态枚举保持同一套五态映射，不自定义第六种颜色。
- processing 仅用于真实进行中的状态，不做装饰性动效。
正例
- ✓ 服务列表：每行 Status 展示「运行中 / 已停止 / 异常」，processing 表示部署中。
- ✓ 审批详情头部：Status 展示当前审批结论，旁置时间戳辅助文本。
反例
- ✕ 用 Status 标记商品分类（应使用 Tag）。
- ✕ processing 状态长期停留不做超时收敛（应有终态流转）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。