ICEN UI 设计系统

AI 用量条

上下文用量 .ai-usage 双形态：分段条（renderAiUsage）+ 上下文窗口环形指示器（renderAiUsageRing，Claude Desktop 式常驻小环，点击弹出完整分解，弹层复用 popover）。分段条 = 分段条 + 图例 + 占比行；配色契约 input=accent / output=success / cacheRead=info / cacheWrite=warning / reasoning=faint。缓存分列计费诚实：cacheRead ≈ 0.1× 输入价、cacheWrite ≈ 1.25× 输入价（行业惯例，展示与算账口径一致）。

上下文窗口环（Claude Desktop 式）：点击弹出完整分解

缓存读 ≈ 0.1× 输入价、缓存写 ≈ 1.25× 输入价——分列展示，计费口径诚实

<div style="display:flex;align-items:center;gap:12px;width:100%;margin-bottom:14px">  <div id="ai-usage-ring-demo"></div>  <span class="demo-label">上下文窗口环（Claude Desktop 式）：点击弹出完整分解</span></div><div id="ai-usage-demo" style="width:100%"></div><p class="demo-label" style="margin-top:8px">缓存读 ≈ 0.1× 输入价、缓存写 ≈ 1.25× 输入价——分列展示，计费口径诚实</p>

安装

bun add @icen.ai/ui

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

import '@icen.ai/ui/kit/ai-usage';

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

bunx --bun @icen.ai/ui add ai-usage

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

用法

import { renderAiUsage, renderAiUsageRing } from '@icen.ai/ui/kit/ai-usage'; // 分段条形态renderAiUsage(el, {  input: 42000, output: 18000, cacheRead: 96000, cacheWrite: 12000, reasoning: 8000,}, { total: 200000, cost: 0.3124 }); // 上下文窗口环形指示器（点击弹出完整分解，复用 popover）renderAiUsageRing(el, { input: 42000, /* … */ }, { total: 200000 });// 状态档：<60% accent / 60–85% warning / >85% error + 脉冲 // 缓存分列的计费语义：cacheRead ≈ 0.1× 输入价，cacheWrite ≈ 1.25× 输入价