指标卡

stat-grid 自适应网格 + stat-card；支持趋势 delta、图标、交互 hover。增强：横向布局（dashboard 顶栏）、迷你 sparkline 槽、SVG 进度环、加载骨架态。

用户总数

1,280

+12.4% 比上周

可用性

96.2%

+2.1%

待处理告警

-3 比昨日

请求/秒

8,452

— 稳定

<div class="stat-grid">  <div class="stat-card stat-card--interactive">    <div class="stat-head">      <span class="stat-label">用户总数</span>      <span class="stat-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></span>    </div>    <div class="stat-body">      <div class="stat-num">1,280</div>      <div class="stat-delta up">        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 15 6-6 6 6"/></svg>        +12.4% <span class="stat-period">比上周</span>      </div>    </div>  </div>  <div class="stat-card stat-card--interactive">    <div class="stat-head">      <span class="stat-label">可用性</span>      <span class="stat-icon icon--ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span>    </div>    <div class="stat-body">      <div class="stat-num accent">96.2%</div>      <div class="stat-delta up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 15 6-6 6 6"/></svg> +2.1%</div>    </div>    <div class="stat-progress">      <svg class="stat-ring" viewBox="0 0 36 36">        <circle class="stat-ring-track" cx="18" cy="18" r="15.5" fill="none" />        <circle class="stat-ring-fill" cx="18" cy="18" r="15.5" fill="none" style="stroke-dasharray:93.6,97.4" />      </svg>    </div>  </div>  <div class="stat-card stat-card--interactive">    <div class="stat-head">      <span class="stat-label">待处理告警</span>      <span class="stat-icon icon--bad"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>    </div>    <div class="stat-body">      <div class="stat-num warn">12</div>      <div class="stat-delta down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 9-6 6-6-6"/></svg> -3 <span class="stat-period">比昨日</span></div>    </div>  </div>  <div class="stat-card stat-card--horizontal">    <div class="stat-head">      <span class="stat-label">请求/秒</span>      <span class="stat-icon icon--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>    </div>    <div class="stat-body">      <div class="stat-num">8,452</div>      <div class="stat-delta flat">— <span class="stat-period">稳定</span></div>    </div>  </div></div>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn add @icen.ai/ui

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

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

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

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 项目无此问题。

用法

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