知识库总览
kb 族伞形入口:ai 族描述思考(ai-chat / ai-tool… 呈现「AI 在做什么」),kb 族呈现证据(「知识从哪来、可信吗、怎么用」)——引用角标、解析管线、chunk、检索分数、SQL、trace 全部是让知识工作可验证的界面。数据契约与纯函数统一在 kb-core,视觉基座 kb.css(.kb-row / .kb-num 等宽数字 / .kb-quote 引用体 / 徽标),六域各持一份合并 CSS;kit/kb 一行装全家,细分 slug 可独立安装。
ai 族描述思考,kb 族呈现证据。六域 27 个组件,共享数据契约 kb-core(类型 + 纯函数 + 来源类型注册表)与视觉基座 kb.css——数字一律等宽、引文一律引用体、来源 / 分数 / 日期只用语义色。
答案的证据链:行内引用角标(hover 引用卡)、来源列表、原文定位抽屉、来源冲突对勘(市场空白组件)。
进知识库之前:解析管线时间线、chunk 编辑器、分段策略实时预览、连接器健康、元数据、认证 QA 对。
检索 playground(topK / 混合权重 / rerank)、过滤器构建器(Mongo / OData 双序列化)、rerank A/B 对比、召回测试集。
生成 SQL 卡(可见性 / 修正 diff)、问数答案容器、澄清反问、口径解释面板。
trace span 树、标注队列(全键盘流)、无答案分析(建文档 / 加同义词)、评估对比(判级徽章)。
双栏画布(划词 AI 操作)、检查点(只回滚内容保留对话)、沙箱容器(postMessage JSON-RPC)、工具链条。
<p class="demo-label" style="margin:0 0 12px">ai 族描述思考,kb 族呈现证据。六域 27 个组件,共享数据契约 kb-core(类型 + 纯函数 + 来源类型注册表)与视觉基座 kb.css——数字一律等宽、引文一律引用体、来源 / 分数 / 日期只用语义色。</p><div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;width:100%"> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-accent);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">证据域 · ground</strong> <span class="kb-badge kb-badge--official">引用是主角</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">答案的证据链:行内引用角标(hover 引用卡)、来源列表、原文定位抽屉、来源冲突对勘(市场空白组件)。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-citation · kb-sources · kb-passage · kb-conflict</div> </div> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-line-soft);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">摄取域 · ingest</strong> <span class="kb-badge">解析先行</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">进知识库之前:解析管线时间线、chunk 编辑器、分段策略实时预览、连接器健康、元数据、认证 QA 对。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-pipeline · kb-chunks · kb-segment · kb-connector · kb-metadata · kb-qa</div> </div> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-line-soft);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">检索域 · search</strong> <span class="kb-badge">可解释分数</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">检索 playground(topK / 混合权重 / rerank)、过滤器构建器(Mongo / OData 双序列化)、rerank A/B 对比、召回测试集。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-retrieval · kb-filter · kb-rerank · kb-hittest</div> </div> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-success);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">问数域 · data</strong> <span class="kb-badge kb-badge--trusted">认证优先于生成</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">生成 SQL 卡(可见性 / 修正 diff)、问数答案容器、澄清反问、口径解释面板。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-sql · kb-answer · kb-clarify · kb-explain</div> </div> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-warning);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">治理域 · ops</strong> <span class="kb-badge">观测与标注</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">trace span 树、标注队列(全键盘流)、无答案分析(建文档 / 加同义词)、评估对比(判级徽章)。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-trace · kb-review · kb-gap · kb-eval</div> </div> <div style="border:1px solid var(--token-line-soft);border-left:2px solid var(--token-accent-cold);border-radius:var(--radius-md);padding:12px 14px"> <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"> <strong style="font-size:13px">工作台域 · agent</strong> <span class="kb-badge">动效非颜色</span> </div> <p style="margin:0 0 8px;font-size:12.5px;color:var(--token-text-muted);line-height:1.7">双栏画布(划词 AI 操作)、检查点(只回滚内容保留对话)、沙箱容器(postMessage JSON-RPC)、工具链条。</p> <div class="mono" style="font-size:11.5px;color:var(--token-text-faint)">kb-canvas · kb-checkpoint · kb-sandbox · kb-chain</div> </div></div> 安装
bun add @icen.ai/ui pnpm add @icen.ai/ui npm install @icen.ai/ui yarn add @icen.ai/ui 一行引入该组件(CSS 与 behavior 自动带上,无需关心内部 CSS 文件名):
import '@icen.ai/ui/kit/kb'; 也可以用脚手架直接打印引入行:
bunx --bun @icen.ai/ui add kb
Astro 项目注意:kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS(import '@icen.ai/ui/components/kb.css';),JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。
用法
// 一行装全家(kb.css 基座 + 六域 CSS 全带上;behavior 按需从各细分 kit 引入)import '@icen.ai/ui/kit/kb'; // 六域一览(规格 docs/spec/kb-family.md;27 个组件):// 证据 ground kb-citation / kb-sources / kb-passage / kb-conflict// 摄取 ingest kb-pipeline / kb-chunks / kb-segment / kb-connector / kb-metadata / kb-qa// 检索 search kb-retrieval / kb-filter / kb-rerank / kb-hittest// 问数 data kb-sql / kb-answer / kb-clarify / kb-explain// 治理 ops kb-trace / kb-review / kb-gap / kb-eval// 工作台 agent kb-canvas / kb-checkpoint / kb-sandbox / kb-chain // 共享数据契约与纯函数(引用 / 分数 / chunk / 分段 / 连接器健康,SSR 安全):import { normalizeCitation, segmentText, connectorHealth, formatScore } from '@icen.ai/ui/behaviors/kb-core';