DeployStatus
deploy-status部署/构建生命周期态 · 排队/构建中(转圈)/已上线/失败/已取消/已跳过 六态(→success/danger/primary/neutral 软填充) · badge 徽标/dot 圆点(building 脉冲)/icon 紧凑三形态 · 区别健康态 StatusDot 语义 · CI/CD/Pages/流水线刚需(纯CSS·RSC)
用法
基础用法
传 status 渲染 badge 软填充徽标，building 态图标自旋。
构建中已上线失败
tsx
<>
<DeployStatus status="building" />
<DeployStatus status="ready" />
<DeployStatus status="error" />
</>六态光谱
覆盖排队/构建/上线/失败/取消/跳过全生命周期。
排队中构建中已上线失败已取消已跳过
tsx
<>
{(["queued","building","ready","error","canceled","skipped"] as const).map((s) => (
<DeployStatus key={s} status={s} />
))}
</>形态变体
variant dot 圆点+文字（building 脉冲）/ icon 仅图标（紧凑单元格）。
构建中已上线
tsx
<>
<DeployStatus status="building" variant="dot" />
<DeployStatus status="ready" variant="dot" />
<DeployStatus status="ready" variant="icon" />
<DeployStatus status="error" variant="icon" />
</>小尺寸 · 行内
size="sm" 嵌入文本流。
上次部署 已上线 ，预览环境 构建中
tsx
<p>上次部署 <DeployStatus status="ready" size="sm" /></p>何时用
表达一次部署/构建的生命周期阶段（排队 → 构建中 → 上线/失败/取消/跳过）。与表达「在线/降级/离线」健康态的 StatusDot 区分：本组件是「这次构建走到哪一步」，StatusDot 是「服务此刻是否健康」。CI/CD、Pages、流水线列表用本组件。
导入
ts
import { DeployStatus } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| status* | "queued" | "building" | "ready" | "error" | "canceled" | "skipped" | — | 生命周期状态 |
| variant | "badge" | "dot" | "icon" | "badge" | 形态：badge 软填充徽标 / dot 圆点+文字 / icon 仅图标（紧凑表格单元格） |
| size | "sm" | "md" | "md" | 尺寸 |
| spin | boolean | true | building 态图标是否旋转 |
| className | string | — | 透传类名 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label | ReactNode | 覆盖默认中文文案 |
禁忌 / 坑
暂无已知坑。注意语义边界：本组件是部署生命周期态，不要拿它当服务健康指示灯（那是 StatusDot）。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
已上线
<DeployStatus status={deploy.status} />