ICEN UI 设计系统

AI 总览

一段可播放的完整对话《分析 AI 迭代历史》——把 AI 族全部能力按真实工作流串起来：思考（reasoning 流式+自动折叠）→ 规划（todo activeForm 推进）→ 网络搜索 / 接口调用（工具卡）→ 二次思考 → 正文流式 → render_chart 可视化（默认展开）→ 人工审批（点「允许」继续）→ history.md 差异审阅（accept/reject）→ 文件标签 → 子智能体（嵌套活动流）→ 失败重试（自动展开）→ 多模态回执（架构图）→ 收尾（token/成本、上下文抽屉、审计面板）。输入台 v2（模型切换/命令/@引用/上下文环）全程参与。

场景：分析 AI 迭代历史 · 全组件走一遍（约 30 秒，中途有一处需要你点「允许」）

审计 随流程累计 
<div class="toolbar" style="margin-bottom:10px">  <button class="btn btn-sm btn-primary" type="button" id="ai-ov-play">▶ 播放全流程</button>  <button class="btn btn-sm" type="button" id="ai-ov-reset">↺ 重置</button>  <span class="toolbar-spacer"></span>  <button class="btn btn-sm" type="button" data-ai-context-open="#ai-ov-ctx-host">上下文</button></div><p class="demo-label" id="ai-ov-stage" style="margin:0 0 10px">场景：分析 AI 迭代历史 · 全组件走一遍（约 30 秒，中途有一处需要你点「允许」）</p><div class="ai-chat" id="ai-ov-chat" style="height:520px;border:1px solid var(--token-line-soft);border-radius:var(--radius-md);padding:10px">  <div class="ai-chat-scroll" id="ai-ov-scroll"></div></div><div class="ai-composer" data-ai-composer id="ai-ov-composer" style="margin-top:10px">  <div class="ai-composer-queue" hidden></div>  <div class="ai-composer-attach" hidden></div>  <div class="ai-composer-box control">    <textarea class="ai-composer-input" rows="1" placeholder="播放中回车会排队（icen:ai-queue）· / 命令 · @ 引用"></textarea>    <div class="ai-composer-actions">      <button class="ai-composer-btn" data-ai-attach type="button" aria-label="附件"></button>      <button class="ai-composer-send" data-ai-send type="button" aria-label="发送"></button>    </div>  </div></div><div id="ai-ov-ctx-host"></div><div class="toolbar" style="margin-top:14px">  <span class="toolbar-label">审计</span>  <span class="toolbar-spacer"></span>  <span class="toolbar-label" id="ai-ov-audit-meta">随流程累计</span></div><div id="ai-ov-audit" style="margin-top:8px"></div>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

<!-- 本页是「活文档」：全部子组件的独立文档见侧栏 AI 分组各页 -->