ICEN UI 设计系统

AI 文件标签

文件 chips .ai-file-chip（纯 CSS 族，无 behavior）：is-added / is-modified / is-deleted 三态 × 类型修饰类（--ts/--js/--css/--json/--md/--img/--other，图标由消费方注入 svg）；renderAiContext 的文件区复用同款 chips。

src/utils/format.ts src/components/ai-chat.css package.json README.md scripts/old-build.js assets/cover.png

纯 CSS 族：is-added（绿）/ is-modified（accent）/ is-deleted（红，删除线）× 文件类型图标 · renderAiContext 文件区同款

<div class="ai-files">  <span class="ai-file-chip is-added ai-file-chip--ts"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/></svg></span>src/utils/format.ts</span>  <span class="ai-file-chip is-modified ai-file-chip--css"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"/></svg></span>src/components/ai-chat.css</span>  <span class="ai-file-chip is-modified ai-file-chip--json"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1"/></svg></span>package.json</span>  <span class="ai-file-chip is-modified ai-file-chip--md"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/></svg></span>README.md</span>  <span class="ai-file-chip is-deleted ai-file-chip--js"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/></svg></span>scripts/old-build.js</span>  <span class="ai-file-chip is-added ai-file-chip--img"><span class="ai-file-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/></svg></span>assets/cover.png</span></div><p class="demo-label" style="margin-top:8px">纯 CSS 族：is-added（绿）/ is-modified（accent）/ is-deleted（红，删除线）× 文件类型图标 · renderAiContext 文件区同款</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

<!-- 纯 CSS 组件，无 behavior；文件图标由消费方注入 svg --><div class="ai-files">  <span class="ai-file-chip is-added ai-file-chip--ts">    <span class="ai-file-icon">…svg…</span>src/foo.ts  </span></div><!-- 类型修饰类：--ts / --js / --css / --json / --md / --img / --other -->