指标卡

stat

stat-grid 自适应网格 + stat-card；数字支持 accent / warn 变体。

示例

1,280

用户总数

96.2%

本周可用性

待处理告警

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-num">1,280</div>
    <div class="stat-label">用户总数</div>
  </div>
  <div class="stat-card">
    <div class="stat-num accent">96.2%</div>
    <div class="stat-label">本周可用性</div>
  </div>
  <div class="stat-card">
    <div class="stat-num warn">12</div>
    <div class="stat-label">待处理告警</div>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/stat.css';

用法

<div class="stat-grid">
  <div class="stat-card">
    <div class="stat-num accent">96.2%</div>
    <div class="stat-label">本周可用性</div>
  </div>
</div>