ICEN UI v0.9.0

分段策略

分段策略编辑器 .kb-segment：左表单（模式 auto / custom / parent-child + 分隔符 + 最大长度 + 重叠 + 三项清洗勾选）右实时预览——预览走 kb-core segmentText 纯函数真实切分（非估算），N 段 / 均长 / ≈tokens 三指标 + 前 20 段卡片（200px 截断点击展开）。locked 锁模式不锁参数（Dify 纪律）；重叠 ≥ 最大长度即时校验且不阻断预览。任一变更派 icen:kb-segment-change { config }，句柄 getConfig / setConfig / refresh(sample) 程序化读写。

样本：《供应商准入手册》第 3–6 条（真实切分，非估算）

事件日志：改动左侧任一参数，或点上方按钮程序化赋值

<div class="toolbar" style="margin-bottom:10px">  <button class="btn btn-sm" type="button" id="demo-kb-segment-lock">setConfig({ mode: 'parent-child', locked: true })</button>  <span class="toolbar-label">样本：《供应商准入手册》第 3–6 条（真实切分，非估算）</span></div><div id="demo-kb-segment"></div><p class="demo-label" id="demo-kb-segment-log" style="margin-top:8px">事件日志：改动左侧任一参数，或点上方按钮程序化赋值</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { createKbSegment } from '@icen.ai/ui/kit/kb-segment';const seg = createKbSegment(el, {  config: { mode: 'auto', maxLength: 500, overlap: 50, clean: ['collapse-blank'] },  sample: '第 3 条 准入评分\n\n第 4 条 ESG 加分\n\n…',   // 预览素材（segmentText 真实切分）  onChange: (config) => saveDraft(config),        // 与 icen:kb-segment-change 事件双通道});seg.getConfig();                  // 归一化副本（调用方可安全改写）seg.setConfig({ locked: true });  // 程序化赋值：同步表单 + 重算预览，不派事件不触发 onChangeseg.refresh(newSample);           // 换样本重算seg.destroy();                    // 摘除全部监听// locked：模式 segmented 禁用 + 顶部警示（模式创建后不可更改，参数可随时调整）// parent-child：父段按分隔符切、子段按长度自动生成（提示行）；重叠 ≥ 最大长度即时校验