ICEN UI 设计系统

AI 差异审阅

差异审阅卡 .ai-diff：parseUnifiedDiff(text) 解析 unified diff（git / 传统头、add/del/rename/binary 均可）→ renderAiDiff(el, {files}) DOM 渲染（行号 + add/del 着色 + hunk 头，全 textContent）；initAiDiff 委托展开 / 接受 / 拒绝——icen:ai-diff-accept / icen:ai-diff-reject（detail {path}），决策后盖状态章并淡化。

点头展开行号与着色 · 「接受 / 拒绝」后盖状态章（icen:ai-diff-accept / icen:ai-diff-reject）

<div id="ai-diff-demo" style="width:100%"></div><p class="demo-label" id="ai-diff-log" style="margin-top:8px">点头展开行号与着色 · 「接受 / 拒绝」后盖状态章（icen:ai-diff-accept / icen:ai-diff-reject）</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { initAiDiff, renderAiDiff, parseUnifiedDiff } from '@icen.ai/ui/kit/ai-diff'; // 真实 unified diff → 结构化 files → DOM 渲染（重复调用替换内容）renderAiDiff(el, { files: parseUnifiedDiff(diffText) });initAiDiff();   // 展开/折叠 + 接受/拒绝（icen:ai-diff-accept / icen:ai-diff-reject，detail {path}） // AiDiffFile：{ path, oldPath?, status: added|modified|deleted|renamed, addCount, delCount, hunks }// hunk：{ oldStart, oldCount, newStart, newCount, header, lines: [{ type: ctx|add|del, oldNo, newNo, text }] }