ICEN UI 设计系统

AI 上下文面板

上下文抽屉 .ai-context：触发器 [data-ai-context-open] 全局委托开合（属性值可为 #id 选择器），fixed 右侧滑入（--z-chrome），Esc / 外点关闭、Tab 焦点圈禁；renderAiContext 组合渲染用量（renderAiUsage）+ 文件 chips + MCP server 行（.ai-item：connected→is-done / disconnected→is-error）+ Skills 列表；.ai-context--inline 为页面流内嵌变体（不参与开合）。

Esc / 外点关闭 · Tab 焦点圈禁 · 滑入动画走 --z-chrome 标尺 
<div class="toolbar">  <button class="btn btn-sm btn-primary" type="button" data-ai-context-open>打开上下文面板</button>  <span class="toolbar-label">Esc / 外点关闭 · Tab 焦点圈禁 · 滑入动画走 --z-chrome 标尺</span></div><div id="ai-context-demo"></div>

安装

bun add @icen.ai/ui

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

import { initAiContext } from '@icen.ai/ui/kit/ai-context';initAiContext();

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

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

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

用法

import { initAiContext, renderAiContext } from '@icen.ai/ui/kit/ai-context'; renderAiContext(document.getElementById('ctx'), {  usage: { input: 42000, cacheRead: 96000, cacheWrite: 12000, output: 18000, reasoning: 8000 },  usageTotal: 200000,          // 传给 renderAiUsage 的 opts.total  usageCost: 0.3124,           // 追加 $ 成本行  files: [{ path: 'src/foo.ts', status: 'modified' }],  mcpServers: [{ name: 'github', tools: 24 }],          // connected（默认）→ is-done  skills: [{ name: 'webbridge', description: '浏览器自动化' }],});initAiContext();   // 触发器 [data-ai-context-open] 全局委托；Esc / 外点关闭；焦点圈禁 <!-- 触发器（任意元素；属性值可为 #id 选择器定位指定抽屉） --><button data-ai-context-open>上下文</button><div id="ctx"></div><!-- .ai-context--inline 为页面流内嵌变体：不做 fixed、不参与开合 -->