ICEN UI · 设计系统

组件

8 个无框架 CSS 组件，全部消费 --token-* 设计变量——切换右上角预设 / 明暗 / 风格可实时预览效果。

btn

btn · 按钮

基础按钮：默认 / primary / danger / sm 四种变体。

<button class="btn">默认</button>
<button class="btn btn-primary">主要</button>
<button class="btn btn-danger">危险</button>
<button class="btn btn-sm">小号</button>
panel

panel · 面板

白卡片容器（panel-block）+ 标题栏（panel-title），本站每一节都是它的实例。

面板标题PANEL
白卡片容器 + 标题栏，用于承载一组相关内容。 
<div class="panel-block">
  <div class="panel-title"><span>面板标题</span><span>PANEL</span></div>
  <div class="panel-body">
    白卡片容器 + 标题栏，用于承载一组相关内容。
  </div>
</div>
pill

pill · 状态徽章

语义色纪律：仅绿 / 黄 / 红 + 品牌 accent。

默认 正常 警告 异常 强调
<span class="pill">默认</span>
<span class="pill ok">正常</span>
<span class="pill warn">警告</span>
<span class="pill bad">异常</span>
<span class="pill accent">强调</span>
form

form · 表单

字段标签 / 输入框 / 错误与成功提示（静态展示）。

× 用户名已被占用，请换一个。
✓ 邮箱验证通过。
<div class="form-field">
  <label class="form-label" for="demo-user">用户名</label>
  <input class="form-input" id="demo-user" placeholder="letters & digits" />
</div>
<div class="form-error">× 用户名已被占用，请换一个。</div>
<div class="form-ok">✓ 邮箱验证通过。</div>
tabs

tabs · 分区导航

与 behaviors/tabs 配套的 data 契约组件——下面是可点击切换的 live demo。

三分区可点击切换。激活态 = .active 类，未激活面板挂 hidden。

<div data-tabs>
  <nav class="page-tabs">
    <button class="page-tab active" data-tab="overview">概览</button>
    <button class="page-tab" data-tab="usage">用法</button>
    <button class="page-tab" data-tab="api">契约</button>
  </nav>
  <section data-tab-panel="overview">
    <p>三分区可点击切换。激活态 = .active 类，未激活面板挂 hidden。</p>
  </section>
  <section data-tab-panel="usage" hidden>
    <p>引入 behaviors/tabs 后调用 initTabs()，事件委托在 [data-tabs] 容器上。</p>
  </section>
  <section data-tab-panel="api" hidden>
    <p>契约：data-tabs（容器）→ data-tab（页签）→ data-tab-panel（面板）；可选 data-tabs-hash 与 location.hash 同步。</p>
  </section>
</div>
import { initTabs } from '@icen.ai/ui/behaviors/tabs';
initTabs();
stat

stat · 指标卡

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

1,280
用户总数
96.2%
本周可用性
12
待处理告警
<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>
table

table · 数据表

table-wrap 负责窄屏横向滚动；行 hover 高亮，ops 列右对齐放 btn-sm。

名称状态操作
gateway运行中
accounts运行中
billing降级
archive已停止
 
<div class="table-wrap">
  <table class="admin-table">
    <thead>
      <tr><th>名称</th><th>状态</th><th class="ops">操作</th></tr>
    </thead>
    <tbody>
      <tr><td>gateway</td><td><span class="pill ok">运行中</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr>
      <tr><td>accounts</td><td><span class="pill ok">运行中</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr>
      <tr><td>billing</td><td><span class="pill warn">降级</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">停用</button></td></tr>
      <tr><td>archive</td><td><span class="pill bad">已停止</span></td><td class="ops"><button class="btn btn-sm">编辑</button><button class="btn btn-sm">启用</button></td></tr>
    </tbody>
  </table>
</div>
toast

toast · 轻提示

与 behaviors/toast 配套（toast.css 提供容器与滑入动画）：点击按钮调用 toast.ok / err / warn。

<button class="btn" id="toast-demo-ok">成功提示</button>
<button class="btn" id="toast-demo-err">错误提示</button>
<button class="btn" id="toast-demo-warn">警告提示</button>
import { toast } from '@icen.ai/ui/behaviors/toast';
toast.ok('已保存');
toast.err('保存失败');
toast.warn('配额将尽');