Components

Avatar 头像

图像、降级文本与在线状态四态圆点，覆盖团队成员与操作人头像场景。

尺寸与状态

xs 到 xl 五档，状态点位于右上角，浮出头像边界并带描边。

RCRCEDOPGU

<div class="demo-grid">
  <Avatar fallback="RC" size="xs" />
  <Avatar fallback="RC" size="sm" status="online" />
  <Avatar fallback="ED" size="md" status="busy" />
  <Avatar fallback="OP" size="lg" status="away" />
  <Avatar fallback="GU" size="xl" status="offline" class="bg-slate-100 text-slate-500 dark:bg-slate-800" />
</div>

团队行场景

与 Badge 组合的标准运维人员行。

ReCloud Edge

CN-HK1 · 128 个节点在线

健康

<div class="flex items-center justify-between gap-4 max-w-sm">
  <div class="flex items-center gap-3">
    <Avatar fallback="RS" size="lg" status="online" class="bg-blue-100 text-[#1E63CE] dark:bg-blue-950/60 dark:text-[#70ACFE]" />
    <div>
      <div class="text-sm font-semibold text-slate-900 dark:text-white">ReCloud Edge</div>
      <div class="text-sm text-slate-500 dark:text-slate-400">CN-HK1 · 128 个节点在线</div>
    </div>
  </div>
  <Badge color="success" variant="soft" dot>健康</Badge>
</div>

API 参考

属性	类型	默认值	说明
`src`	`string`	`—`	图像地址，加载失败自动降级。
`fallback`	`string`	`—`	降级显示的首字母文本。
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`md`	直径 24–56px。
`status`	`'online' \| 'offline' \| 'busy' \| 'away'`	`—`	右上角状态圆点。