StatusDot
status-dot健康状态点 · 在线/降级/离线/维护四语义态(→success/warning/danger/neutral 映射) + 默认仅在线脉冲 + 状态文字 + 尾部数值槽(延迟/成功率)(封装 Dot·网关渠道健康墙刚需·纯CSS·RSC)
用法
健康状态
四种语义态:online 在线 / degraded 降级 / offline 离线 / maintenance 维护,颜色随 tone 自动派生。
<>
<StatusDot status="online" label="在线" />
<StatusDot status="degraded" label="降级" />
<StatusDot status="offline" label="离线" />
<StatusDot status="maintenance" label="维护中" />
</>尾部数值槽
extra 槽放延迟 / 成功率等数值,tabular-nums 对齐。
<>
<StatusDot status="online" label="网关 A" extra="86ms" />
<StatusDot status="degraded" label="网关 B" extra="412ms" />
</>脉冲
online 默认呼吸脉冲;可用 pulse 显式开关。
<>
<StatusDot status="online" label="自动脉冲" />
<StatusDot status="degraded" label="强制脉冲" pulse />
<StatusDot status="online" label="关闭脉冲" pulse={false} />
</>尺寸 & 仅圆点
size 控制圆点大小;省略 label 时仅渲染圆点。
<>
<StatusDot status="online" size="sm" />
<StatusDot status="online" size="md" />
<StatusDot status="online" size="lg" />
</>何时用
展示一个渠道/模型/服务的健康态成品行(圆点 + 状态文字 + 延迟/成功率数值)时用,典型场景是网关渠道健康墙。它在 Dot 之上封装了「四语义态映射 + 文字 + 尾槽」;只要一个裸状态圆点(自定 tone)用 Dot;要的是计数角标用 Badge。
导入
import { StatusDot } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| status* | "online"|"degraded"|"offline"|"maintenance" | — | 健康态:在线/降级/离线/维护(内部映射 success/warning/danger/neutral)。 |
| pulse | boolean | 仅 online 自动脉冲 | 呼吸脉冲;可显式覆盖默认。 |
| size | "sm"|"md"|"lg" | md | 尺寸。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| label | ReactNode | 状态文字(如「在线」),提供则随圆点一起播报。 |
| extra | ReactNode | 尾部数值槽(如延迟「128ms」)。 |
禁忌 / 坑
暂无已知坑。pulse 默认只有 online 态自动呼吸,其余态静止;要让降级态也脉冲须显式 pulse。候选坑均不适用:status-enum-whitelist-negate-filter、multi-identity-bind-status-authoritative-field、batch-loop-break-terminal-status-overwritten-by-finalizer 讲后端状态枚举/字段权威性,menubarextra-app-body-observation-tears-down-status-item 讲 macOS 菜单栏,与本展示组件无关。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
<StatusDot status="online" size="md" pulse label="在线" />