数据展示

card · 卡片

四变体（默认 / elevated / outlined / glass）+ interactive 浮起 + is-selected 双圈选中。

<div class="card" style="width:230px">
  <div class="card-head">
    <div>
      <h3 class="card-title">默认卡片</h3>
      <p class="card-desc">bg card + 内阴影</p>
    </div>
  </div>
  <div class="card-body">纸面质感的基础容器，适合承载一组相关信息。</div>
  <div class="card-foot">
    <span class="card-meta">更新于 2 小时前</span>
    <span class="card-action"><button class="btn btn-sm">查看</button></span>
  </div>
</div>
<div class="card card--elevated" style="width:230px">
  <div class="card-head"><div><h3 class="card-title">浮起卡片</h3><p class="card-desc">shadow-card 硬投影</p></div></div>
  <div class="card-body">比默认更靠前一级，用于强调。</div>
</div>
<div class="card card--outlined" style="width:230px">
  <div class="card-head"><div><h3 class="card-title">描边卡片</h3><p class="card-desc">粗描边、无阴影</p></div></div>
  <div class="card-body">低噪声场景使用，如嵌套在面板里。</div>
</div>
<div style="padding:18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--token-glow),var(--token-glow-cold))">
  <div class="card card--glass" style="width:210px">
    <div class="card-head"><div><h3 class="card-title">玻璃卡片</h3><p class="card-desc">surface-glass + 背景模糊</p></div></div>
    <div class="card-body">叠在彩色背景上呈现磨砂质感。</div>
  </div>
</div>
<div class="card card--interactive" style="width:230px">
  <div class="card-head"><div><h3 class="card-title">可交互卡片</h3><p class="card-desc">hover 浮起（.lift 同款）</p></div></div>
  <div class="card-body">鼠标悬停试试：上移 1px + 投影 + 描边变色。</div>
</div>
<div class="card is-selected" style="width:230px">
  <div class="card-head"><div><h3 class="card-title">选中态</h3><p class="card-desc">.is-selected 双圈高亮</p></div></div>
  <div class="card-body">accent 2px 内圈 + 底色 4px 外圈。</div>
</div>

empty · 空状态

图标 + 标题 + 描述 + 可选动作按钮。

<div class="empty">
  <div class="empty-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg></div>
  <p class="empty-title">暂无收藏</p>
  <p class="empty-desc">你还没有收藏任何作品，去逛逛找点喜欢的吧。</p>
  <div class="empty-action"><button class="btn btn-primary btn-sm">去发现</button></div>
</div>

alert · 警示条

info / success / warning / error 四态，带关闭按钮（页面级演示 JS，点击移除）。

<div class="alert alert--info">
  <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>
  <div class="alert-content">
    <p class="alert-title">版本更新</p>
    <div class="alert-body">v0.2.0 已发布：新增数据展示族组件。</div>
  </div>
  <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>
<div class="alert alert--success">
  <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></span>
  <div class="alert-content">
    <p class="alert-title">构建成功</p>
    <div class="alert-body">dist 产物已生成，耗时 42 秒。</div>
  </div>
  <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>
<div class="alert alert--warning">
  <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="alert-content">
    <p class="alert-title">配额将尽</p>
    <div class="alert-body">本月构建时长已用 80%，超出后将排队执行。</div>
  </div>
  <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>
<div class="alert alert--error">
  <span class="alert-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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 class="alert-content">
    <p class="alert-title">发布失败</p>
    <div class="alert-body">资源校验未通过：封面图尺寸不足 640×960。</div>
  </div>
  <button class="alert-close" type="button" aria-label="关闭"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
</div>

result · 结果页

终态展示（success 一例；另有 error / warning / info 变体）。

<div class="result result--success">
  <div class="result-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></div>
  <h3 class="result-title">发布成功</h3>
  <p class="result-desc">作品「星野之下」已上架，预计 5 分钟后全量生效。</p>
  <div class="result-extra">
    <button class="btn btn-primary btn-sm">查看作品</button>
    <button class="btn btn-sm">返回列表</button>
  </div>
</div>

progress · 进度条

默认 6px 轨道 / progress--sm 4px，右侧 tabular-nums 百分比标签。

<div class="progress">
  <div class="progress-track"><div class="progress-bar" style="width:64%"></div></div>
  <span class="progress-label">64%</span>
</div>
<div class="progress progress--sm" style="margin-top:14px">
  <div class="progress-track"><div class="progress-bar" style="width:32%"></div></div>
  <span class="progress-label">32%</span>
</div>

spinner · 加载圈

sm 16px / 默认 20px / lg 32px，1s 线性旋转。

<div class="spinner spinner--sm"></div>
<div class="spinner"></div>
<div class="spinner spinner--lg"></div>

skeleton · 骨架屏

呼吸脉冲占位块；skeleton--circle 为圆形。

<div style="display:flex;align-items:center;gap:12px">
  <div class="skeleton skeleton--circle" style="width:40px;height:40px"></div>
  <div style="flex:1;display:flex;flex-direction:column;gap:8px">
    <div class="skeleton" style="height:12px;width:45%"></div>
    <div class="skeleton" style="height:12px;width:80%"></div>
  </div>
</div>
<div class="skeleton" style="height:12px;width:100%;margin-top:12px"></div>
<div class="skeleton" style="height:12px;width:66%;margin-top:8px"></div>

avatar · 头像

xs 20 / sm 28 / 默认 36 / lg 48；文字兜底或 img 填充（object-fit: cover）。

沈 顾 林

<span class="avatar avatar--xs">沈</span>
<span class="avatar avatar--sm">顾</span>
<span class="avatar"><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%23d97757'/><circle cx='24' cy='18' r='8' fill='%23fffdf9'/><path d='M8 44c3-10 10-14 16-14s13 4 16 14z' fill='%23fffdf9'/></svg>" alt="林晚晴" /></span>
<span class="avatar avatar--lg">林</span>

media-card · 媒体卡

2/3 封面（此处用色块代替图片）；hover 上浮 6px + accent 辉光，底部信息条滑出（延迟 80ms）。

<div class="media-card" style="width:148px">
  <div class="media-card-cover" style="background:linear-gradient(160deg,var(--token-accent),var(--token-accent-deep))"></div>
  <div class="media-card-overlay">
    <div style="font-size:12px;font-weight:600">星野之下</div>
    <div style="font-size:10px;opacity:.85">视觉小说 · 全年龄</div>
  </div>
</div>
<div class="media-card" style="width:148px">
  <div class="media-card-cover" style="background:linear-gradient(160deg,var(--token-accent-cold),var(--token-info))"></div>
  <div class="media-card-overlay">
    <div style="font-size:12px;font-weight:600">雨停之前</div>
    <div style="font-size:10px;opacity:.85">悬疑短篇 · 连载中</div>
  </div>
</div>

rating · 星级评分

is-filled 实星 / is-half 半星（warning 色）；另有 rating--sm / rating--lg 尺寸。

<div class="rating" role="group" aria-label="评分 3.5 星，满分 5 星">
  <button class="rating-star is-filled" type="button" aria-label="1 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button>
  <button class="rating-star is-filled" type="button" aria-label="2 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button>
  <button class="rating-star is-filled" type="button" aria-label="3 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button>
  <button class="rating-star is-half" type="button" aria-label="4 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button>
  <button class="rating-star" type="button" aria-label="5 星"><svg viewBox="0 0 24 24" stroke-linejoin="round"><path d="M12 2.5l2.95 6.26 6.85.72-5.1 4.63 1.4 6.74L12 17.6l-6.1 3.25 1.4-6.74-5.1-4.63 6.85-.72z"/></svg></button>
</div>

kbd / code-inline · 行内元素

按键帽（含 kbd--sm）与行内代码片。

<p style="margin:0">按 <kbd class="kbd">Ctrl</kbd> + <kbd class="kbd">K</kbd> 打开命令面板，输入 <code class="code-inline">preset piano dark</code> 切换预设，<kbd class="kbd kbd--sm">Esc</kbd> 关闭。</p>

list · 分隔列表

行间 1px 分隔线 + hover 底色。

<ul class="list">
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>账号安全</span><span class="faint" style="margin-left:auto;font-size:11px">已开启二次验证</span></li>
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>消息通知</span><span class="faint" style="margin-left:auto;font-size:11px">仅关注的人</span></li>
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>数据同步</span><span class="faint" style="margin-left:auto;font-size:11px">每 15 分钟</span></li>
</ul>

accordion · 手风琴

与 behaviors/accordion 配套；本例容器带 data-single（展开一项自动收起其余）。

<div class="accordion" data-single>
  <div class="accordion-item is-open">
    <button class="accordion-trigger" type="button" aria-expanded="true"><span>什么是 @icen.ai/ui？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">icen.ai 生态的统一设计系统：设计 tokens + 无框架组件 CSS + 行为 JS，所有前端从这里取设计资产。</div></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger" type="button" aria-expanded="false"><span>如何切换色彩预设？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">预设类挂在 html 上：clay（默认）/ piano / art / vangogh / ink / retro，各含 .dark 变体，可与 .style-* 风格配置正交组合。</div></div>
  </div>
  <div class="accordion-item">
    <button class="accordion-trigger" type="button" aria-expanded="false"><span>组件可以直接写死颜色吗？</span><svg class="accordion-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
    <div class="accordion-panel"><div class="accordion-panel-inner">不可以。组件 CSS 只消费 --token-* 变量，语义色仅绿 / 黄 / 红 + 品牌 accent 四档。</div></div>
  </div>
</div>

import { initAccordion } from '@icen.ai/ui/behaviors/accordion';
initAccordion();
// 容器带 data-single 时展开一项会收起其余

timeline · 时间线

五档语义色圆点 + 连接线，时间右对齐 tabular-nums。

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">构建完成</span><span class="timeline-time">10:24</span></div>
      <p class="timeline-desc">dist 产物 18 个文件，耗时 42 秒。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--accent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">发布到预发环境</span><span class="timeline-time">10:31</span></div>
      <p class="timeline-desc">预发域名已更新，开始回归验证。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">发现一处视觉回归</span><span class="timeline-time">10:46</span></div>
      <p class="timeline-desc">暗色模式下卡片描边对比度偏低，已回滚待修。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">重新发布</span><span class="timeline-time">11:20</span></div>
      <p class="timeline-desc">修复后全量生效，监控指标正常。</p>
    </div>
  </div>
</div>

desc · 描述列表

desc--bordered 两列格线（--desc-cols 控制列数，--desc-span 跨列）。

<div class="desc desc--bordered">
  <p class="desc-title">发布信息</p>
  <dl class="desc-grid" style="--desc-cols:2">
    <div class="desc-item"><dt>作品名称</dt><dd>星野之下</dd></div>
    <div class="desc-item"><dt>版本</dt><dd>v1.3.0</dd></div>
    <div class="desc-item"><dt>构建状态</dt><dd>成功</dd></div>
    <div class="desc-item"><dt>更新时间</dt><dd>2026-07-28 10:24</dd></div>
    <div class="desc-item" style="--desc-span:2"><dt>简介</dt><dd>一款关于星空与约定的短篇视觉小说。</dd></div>
  </dl>
</div>

tree · 树形

与 behaviors/tree 配套：三层可折叠 + 叶子单选 + 禁用节点。

<ul class="tree">
  <li>
    <div class="tree-node" style="--depth:0">
      <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
      <span class="tree-label">素材库</span>
    </div>
    <ul>
      <li>
        <div class="tree-node" style="--depth:1">
          <button class="tree-toggle" type="button" aria-expanded="true" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
          <span class="tree-label">角色立绘</span>
        </div>
        <ul>
          <li><div class="tree-node is-selected" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·常服.png</span></div></li>
          <li><div class="tree-node" style="--depth:2"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">主角·礼服.png</span></div></li>
        </ul>
      </li>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">背景音乐</span></div></li>
      <li><div class="tree-node is-disabled" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">未授权素材（禁用）</span></div></li>
    </ul>
  </li>
  <li>
    <div class="tree-node" style="--depth:0">
      <button class="tree-toggle is-collapsed" type="button" aria-expanded="false" aria-label="折叠/展开"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg></button>
      <span class="tree-label">剧本（默认折叠）</span>
    </div>
    <ul hidden>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第一章.txt</span></div></li>
      <li><div class="tree-node" style="--depth:1"><span class="tree-toggle" aria-hidden="true"></span><span class="tree-label">第二章.txt</span></div></li>
    </ul>
  </li>
</ul>

import { initTree } from '@icen.ai/ui/behaviors/tree';
initTree();
// toggle 折叠/展开子 ul；点击叶子节点单选（.is-selected）

carousel · 轮播

与 behaviors/carousel 配套：箭头 / 自动圆点 / 循环切换（三张色块幻灯）。

<div class="carousel">
  <div class="carousel-track">
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-accent),var(--token-accent-deep));color:#fff">第一张 · 陶土橙</div></div>
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-success),var(--token-info));color:#fff">第二张 · 青绿过渡</div></div>
    <div class="carousel-slide"><div style="height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--token-accent-cold),var(--token-accent));color:#fff">第三张 · 冷蓝回暖</div></div>
  </div>
  <button class="carousel-arrow carousel-arrow--prev" type="button" aria-label="上一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>
  <button class="carousel-arrow carousel-arrow--next" type="button" aria-label="下一张"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg></button>
  <div class="carousel-dots"></div>
</div>

import { initCarousel } from '@icen.ai/ui/behaviors/carousel';
initCarousel();
// dots 自动生成；首尾循环；当前 dot 挂 .active

charts · 图表

与 behaviors/charts 配套：vbar / hbar / stack / donut / line 五种，DOM 全部由 behavior 渲染。

<div class="chart-grid">
  <div>
    <p class="chart-cap">垂直柱状 · 每月投稿</p>
    <div class="chart" id="chart-vbar"></div>
  </div>
  <div>
    <p class="chart-cap">水平条形 · 流量来源</p>
    <div class="chart" id="chart-hbar"></div>
  </div>
  <div>
    <p class="chart-cap">堆叠条 · 任务进度</p>
    <div class="chart" id="chart-stack"></div>
  </div>
  <div>
    <p class="chart-cap">环形 · 工时分布</p>
    <div class="chart" id="chart-donut"></div>
  </div>
  <div style="grid-column:1/-1">
    <p class="chart-cap">折线 · 一周活跃</p>
    <div class="chart" id="chart-line"></div>
  </div>
</div>

import { renderVBar, renderHBar, renderStack, renderDonut, renderLine } from '@icen.ai/ui/behaviors/charts';
renderVBar(el,  { labels: ['一月','二月','三月','四月','五月','六月'], values: [12,19,8,24,16,28] });
renderHBar(el,  { labels: ['搜索','推荐','分享','直接访问'], values: [320,240,160,80], tone: 'success' });
renderStack(el, { segments: [{label:'已完成',value:45,tone:'success'},{label:'进行中',value:30},{label:'待处理',value:25,tone:'warning'}] });
renderDonut(el, { segments: [{label:'研发',value:48},{label:'设计',value:32,tone:'success'},{label:'测试',value:20,tone:'warning'}] });
renderLine(el,  { labels: ['周一','周二','周三','周四','周五','周六','周日'], values: [8,14,9,18,22,16,25] });