Status 状态标签

状态组件用于直观展示实体（如用户、服务器、订单）的在线/离线、健康/异常等状态信息。提供了三种子组件，满足不同粒度的视觉需求。

组件总览

组件	说明	典型场景
<TStatus>	文字标签 + 可选前置圆点	表格列、详情描述
<TStatusDot>	独立圆点，可控制动画	导航栏、头像状态标记
<TStatusIndicator>	三圆点弹跳动画，始终运行	加载中、实时连接指示

---

TStatus — 文字状态标签

在文字前添加一个语义化的状态圆点，支持 13 种预设色彩。

基础用法

查看代码

<div class="d-flex gap-3">
  <TStatus color="blue">Blue</TStatus>
  <TStatus color="azure">Azure</TStatus>
  <TStatus color="indigo">Indigo</TStatus>
  <TStatus color="purple">Purple</TStatus>
  <TStatus color="pink">Pink</TStatus>
  <TStatus color="red">Red</TStatus>
  <TStatus color="orange">Orange</TStatus>
  <TStatus color="yellow">Yellow</TStatus>
  <TStatus color="lime">Lime</TStatus>
  <TStatus color="green">Green</TStatus>
  <TStatus color="teal">Teal</TStatus>
  <TStatus color="cyan">Cyan</TStatus>
</div>

带圆点 Dot 模式

启用 dot 属性后，文字前方会出现一个圆点，适合用于表示实时状态。

<div class="d-flex gap-3">
  <TStatus dot>Default</TStatus>
  <TStatus dot color="green">Online</TStatus>
  <TStatus dot color="red">Offline</TStatus>
  <TStatus dot color="orange">Away</TStatus>
  <TStatus dot color="yellow">Busy</TStatus>
</div>

圆点脉搏动画

启用 animated 属性后，圆点会呈现脉搏动画效果，更加醒目地提示实时状态变化。

<div class="d-flex gap-3">
  <TStatus dot animated color="green">Online</TStatus>
  <TStatus dot animated color="red">Offline</TStatus>
  <TStatus dot animated color="orange">Away</TStatus>
</div>

浅色变体 Dot + Lite

lite 属性使标签背景变为浅色填充，更加柔和。建议搭配 dot 一起使用，单独使用 lite 在浅色背景文档下视觉区分度较低。

<div class="d-flex gap-3">
  <TStatus dot lite color="green">Online</TStatus>
  <TStatus dot lite color="red">Offline</TStatus>
  <TStatus dot lite color="orange">Away</TStatus>
  <TStatus dot lite color="blue">Info</TStatus>
</div>

---

TStatusDot — 独立状态圆点

不附带文字，仅展示一个带脉搏动画（默认启用）的圆点，通常用于头像状态标记、导航栏在线指示等紧凑场景。

<div class="d-flex gap-3 align-items-center">
  <TStatusDot color="green"/>
  <TStatusDot color="red"/>
  <TStatusDot color="orange"/>
  <TStatusDot color="blue"/>
  <TStatusDot color="purple"/>
  <TStatusDot color="teal"/>
</div>

禁用动画

设置 :animated="false" 可获得静态圆点，适合非实时场景或性能敏感区域。

<div class="d-flex gap-3 align-items-center">
  <TStatusDot color="green" :animated="false"/>
  <TStatusDot color="red" :animated="false"/>
  <TStatusDot color="orange" :animated="false"/>
  <TStatusDot color="blue" :animated="false"/>
</div>

---

TStatusIndicator — 三圆点状态指示器

三个弹性跳动的圆环，适合用于"加载中"、"正在连接"等持续性的等待反馈场景。动画始终运行，不支持关闭。

<div class="d-flex gap-3 align-items-center">
  <TStatusIndicator color="green"/>
  <TStatusIndicator color="blue"/>
  <TStatusIndicator color="red"/>
  <TStatusIndicator color="orange"/>
  <TStatusIndicator color="purple"/>
  <TStatusIndicator color="teal"/>
</div>

---

API

TStatus 属性 (Props)

属性	类型	默认值	说明
color	BaseColor	'blue'	颜色：blue / azure / indigo / purple / pink / red / orange / yellow / lime / green / teal / cyan
dot	boolean	false	是否显示前置状态圆点
animated	boolean	false	圆点是否需要脉搏动画（需与 dot 同时使用）
lite	boolean	false	是否使用浅色填充背景（建议与 dot 搭配使用）

TStatus 插槽 (Slots)

插槽	说明
default	状态标签的文字内容

TStatusDot 属性 (Props)

属性	类型	默认值	说明
color	BaseColor	'blue'	圆点颜色
animated	boolean	true	是否启用脉搏动画

TStatusIndicator 属性 (Props)

属性	类型	默认值	说明
color	BaseColor	'blue'	指示器颜色，不支持禁用动画