ICEN UI v0.9.0

SQL 卡片

renderKbSql 生成 SQL 卡片：头（可见性徽标「仅管理员可见」/ dialect / 引用表 chips / 复制 / 编辑重跑）+ highlightSql 零依赖着色（关键词/字符串/注释/数字/函数名，流式安全）+ prevSql 修正卡（makeSqlDiff 行级 unified diff → 复用 ai-diff 渲染 + 「应用修复并重跑」）+ 编辑态 textarea（Ctrl/Cmd+Enter 确认、Esc 取消）。initKbSql 幂等委托：icen:kb-sql-edit / icen:kb-sql-rerun（内部一并挂 initAiDiff）。

「编辑重跑」→ textarea 改 SQL · Ctrl+Enter 确认 · Esc 取消 · 修正卡是 prevSql → 当前版的 diff（复用 ai-diff，行号 + 着色）· 「应用修复并重跑」派 icen:kb-sql-rerun

<div id="demo-kb-sql"></div><p class="demo-label" id="kb-sql-log" style="margin-top:8px">「编辑重跑」→ textarea 改 SQL · Ctrl+Enter 确认 · Esc 取消 · 修正卡是 prevSql → 当前版的 diff（复用 ai-diff，行号 + 着色）· 「应用修复并重跑」派 icen:kb-sql-rerun</p>

安装

bun add @icen.ai/ui

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

import { initKbSql } from '@icen.ai/ui/kit/kb-sql';initKbSql();

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

bunx --bun @icen.ai/ui add kb-sql

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

用法

import { renderKbSql, initKbSql, highlightSql, makeSqlDiff } from '@icen.ai/ui/kit/kb-sql'; renderKbSql(el, {  sql: 'SELECT r.region_name, d.quarter, SUM(d.amount_tax_inc) …',  dialect: 'postgres',  tables: ['dws.sales_order_detail', 'dim.region'],   // 引用表 chips  visibility: 'admin',        // SQL 可见性是权限问题：admin → 徽标「仅管理员可见」  editable: true,             // 头部出「编辑重跑」，编辑态切 textarea  prevSql: 'SELECT …(上一版报错的 SQL)',     // 存在且 ≠ sql → 修正卡 diff（复用 ai-diff）  reasoning: '按季度聚合区域销售额',}, {  onEdit: (sql) => {},        // 与 icen:kb-sql-edit 同语义  onRerun: (sql) => {},       // 编辑确认与「应用修复」共用（icen:kb-sql-rerun）});initKbSql();                  // 复制 / 编辑态 / 确认 / 应用修复（幂等，返回销毁函数） highlightSql(sql);            // → DocumentFragment（零依赖着色，可单独使用）makeSqlDiff(prev, next);      // → unified diff 文本（纯函数，可交 parseUnifiedDiff）