ICEN UI v0.9.0

元数据

元数据管理 .kb-metadata：字段定义表（类型徽标 string / number / time）+ 值绑定行内编辑；内置字段（title 等）值只读、不可移除（「内置」旗标）；底部新增行自定义字段名 + 类型三选。三类动作统一派 icen:kb-metadata-change { action: bind | define | remove, key }——define / remove 同时做本地 DOM 更新（直接操纵纪律），消费方可凭事件重渲染纠偏；空字段名即时标 aria-invalid 不动作。

改自定义字段的值（change 提交）/ 底部新增字段（类型三选，空字段名即时校验）/ 移除自定义字段——内置字段 title 只读

事件日志：等待交互

<p class="demo-label" style="margin:0 0 8px">改自定义字段的值（change 提交）/ 底部新增字段（类型三选，空字段名即时校验）/ 移除自定义字段——内置字段 title 只读</p><div id="demo-kb-metadata"></div><p class="demo-label" id="demo-kb-metadata-log" style="margin-top:8px">事件日志：等待交互</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbMetadata, initKbMetadata } from '@icen.ai/ui/kit/kb-metadata';initKbMetadata();   // 值绑定 / 新增 / 移除 委托（root 缺省 document，幂等 + 销毁函数） renderKbMetadata(el, {  fields: [    { key: 'title', type: 'string', builtin: true, label: '标题' },   // 内置：只读、不可移除    { key: 'department', type: 'string' },    { key: 'reviewDate', type: 'time' },    { key: 'scoreWeight', type: 'number' },  ],  values: { title: '供应商准入手册', department: '采购部', reviewDate: '2026-08-12', scoreWeight: 15 },});// 事件：icen:kb-metadata-change { action: 'bind' | 'define' | 'remove', key }// define/remove 已做本地 DOM 更新（追加行 / 删行），消费方凭事件重渲染纠偏