ICEN UI
ICEN UI 指标卡
Docs ⌘K
Core · 稳定

指标卡

关键指标数值卡 + 自适应网格：趋势 delta、图标、进度环与骨架态。

Preview
基础 stat
用户总数
1,280
+12.4% 比上周
可用性
96.2%
+2.1%
待处理告警
12
-3 比昨日
请求/秒
8,452
— 稳定
html
<div class="icen-stat-grid">  <div class="icen-stat-card icen-stat-card--interactive">    <div class="icen-stat-head">      <span class="icen-stat-label">用户总数</span>      <span class="icen-stat-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M13.8 16.5v-1.5a3.5 3.5 0 0 0-3.5-3.5H6.3a3.5 3.5 0 0 0-3.5 3.5v1.5M8.3 8.9a2.7 2.7 0 1 0 0-5.4 2.7 2.7 0 0 0 0 5.4ZM16.5 16.5v-1.3a3.3 3.3 0 0 0-2.3-3.1M12.3 3.7a2.7 2.7 0 0 1 0 5.2"></path></svg></span>    </div>    <div class="icen-stat-body">      <div class="icen-stat-num">1,280</div>      <div class="icen-stat-delta icen-up">        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 14.5l4.2-4.2 2.8 2.8 5.9-5.9M12.4 7.2h4.2v4.2"></path></svg>        +12.4% <span class="icen-stat-period">比上周</span>      </div>    </div>  </div>  <div class="icen-stat-card icen-stat-card--interactive">    <div class="icen-stat-head">      <span class="icen-stat-label">可用性</span>      <span class="icen-stat-icon icen-icon--success"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM6 10l2.7 2.7 5.3-5.4"></path></svg></span>    </div>    <div class="icen-stat-body">      <div class="icen-stat-num icen-stat-num--accent">96.2%</div>      <div class="icen-stat-delta icen-up"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 14.5l4.2-4.2 2.8 2.8 5.9-5.9M12.4 7.2h4.2v4.2"></path></svg> +2.1%</div>    </div>    <div class="icen-stat-progress">      <svg class="icen-stat-ring" viewBox="0 0 36 36">        <circle class="icen-stat-ring-track" cx="18" cy="18" r="15.5" fill="none" />        <circle class="icen-stat-ring-fill" cx="18" cy="18" r="15.5" fill="none" style="stroke-dasharray:93.6,97.4" />      </svg>    </div>  </div>  <div class="icen-stat-card icen-stat-card--interactive">    <div class="icen-stat-head">      <span class="icen-stat-label">待处理告警</span>      <span class="icen-stat-icon icen-icon--error"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8.7 3.5a1.5 1.5 0 0 1 2.6 0l6.4 11.3a1.5 1.5 0 0 1-1.3 2.2H3.6a1.5 1.5 0 0 1-1.3-2.2ZM10 7.2v4.4M10 14v.15"></path></svg></span>    </div>    <div class="icen-stat-body">      <div class="icen-stat-num icen-stat-num--warning">12</div>      <div class="icen-stat-delta icen-down"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 5.5l4.2 4.2 2.8-2.8 5.9 5.9M12.4 12.8h4.2V8.6"></path></svg> -3 <span class="icen-stat-period">比昨日</span></div>    </div>  </div>  <div class="icen-stat-card icen-stat-card--horizontal">    <div class="icen-stat-head">      <span class="icen-stat-label">请求/秒</span>      <span class="icen-stat-icon icen-icon--info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M17 10h-2.6l-2 5.8L8 4.2 6 10H3"></path></svg></span>    </div>    <div class="icen-stat-body">      <div class="icen-stat-num">8,452</div>      <div class="icen-stat-delta icen-flat">— <span class="icen-stat-period">稳定</span></div>    </div>  </div></div>

特性

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/stat';

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add stat

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/stat.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

html
<div class="icen-stat-grid [--2|--3|--4]">  <div class="icen-stat-card [--interactive] [--horizontal] [--sm] [.is-loading]">    <div class="icen-stat-head">      <span class="icen-stat-label">标签</span>      <span class="icen-stat-icon [.icon--success|.icon--warning|.icon--error|.icon--info]">…svg…</span>    </div>    <div class="icen-stat-body">      <div class="icen-stat-num [.stat-num--accent|.stat-num--warning|.stat-num--error|.stat-num--info]">数字</div>      <div class="icen-stat-delta [.up|.down|.flat]">趋势</div>    </div>    <div class="icen-stat-progress">…SVG ring…</div>  </div></div>