ICEN UI v0.9.0

过滤构建器

createKbFilter 行式过滤器构建器：rule 行（字段 / 9 种操作符 / 值）+ AND/OR 组嵌套（≤2 层，超层禁用增钮不隐藏）+ DSL 双表示镜像（filterToMongo 的 JSON ↔ filterToOData 字符串，tab 切换可复制）。DOM 即状态（随时从树解析 KbFilterNode，无并行漂移）；任意变更派 icen:kb-filter-change {node, valid}（onChange 双通道）。

任意增删规则 / 切 AND-OR / 输入值 → icen:kb-filter-change · 底部 DSL 镜像实时同步（Mongo / OData tab 可切换复制）· 属于（in）用逗号分隔多值

<div id="demo-kb-filter"></div><p class="demo-label" id="kb-filter-log" style="margin-top:8px">任意增删规则 / 切 AND-OR / 输入值 → icen:kb-filter-change · 底部 DSL 镜像实时同步（Mongo / OData tab 可切换复制）· 属于（in）用逗号分隔多值</p>

安装

bun add @icen.ai/ui

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

import '@icen.ai/ui/kit/kb-filter';

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

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

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

用法

import { createKbFilter } from '@icen.ai/ui/kit/kb-filter'; const handle = createKbFilter(el, {  fields: ['部门', '密级', '年份', '来源系统', '文档类型', '成本中心'],   // 字段建议（datalist，仍可自由输入）  node: { type: 'group', op: 'and', children: [    { type: 'rule', field: '密级', op: 'eq', value: '内部' },    { type: 'rule', field: '年份', op: 'gte', value: 2023 },    { type: 'group', op: 'or', children: [      { type: 'rule', field: '部门', op: 'in', value: ['财务部', '供应链部'] },      { type: 'rule', field: '来源系统', op: 'contains', value: 'SAP' },    ] },  ] },  onChange: (node, valid) => {    console.log(valid, handle.serialize('mongo'), handle.serialize('odata'));  },});handle.get();                       // → KbFilterNode | null（空构建器 = 无过滤 = valid）handle.set({ type: 'rule', field: '密级', op: 'eq', value: '公开' });   // 裸 rule 自动包根组