ICEN UI v0.9.0

来源列表

来源列表 .kb-sources：--row 答案上方横排 / --rail 侧栏纵列两种布局；useCount 降序（被引 ×N，同计数稳定原序）；徽标覆盖 官方（accent 线框）/ 相对时间（>90 天自动 stale 加警示点）/ 受限（锁形徽标 + 申请访问按钮，行壳降级 role=button 补 Enter/Space 键控）；onlyCited 只保留被引过的来源（流式「随流填充」），空集给引导空态。点击来源行 / 申请访问 → icen:kb-source-open { source }（与冲突组、原文抽屉同一事件契约）。

布局

事件日志：点击来源行或受限行的「申请访问」

<div class="toolbar" style="margin-bottom:10px">  <span class="toolbar-label">布局</span>  <button class="btn btn-sm btn-primary" type="button" data-kb-sources-variant="row">row 横排</button>  <button class="btn btn-sm" type="button" data-kb-sources-variant="rail">rail 纵列</button>  <span class="toolbar-spacer"></span>  <label style="display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--token-text-muted)"><input type="checkbox" id="demo-kb-sources-only">onlyCited（随流填充）</label></div><div id="demo-kb-sources-box" style="max-width:600px"></div><p class="demo-label" id="demo-kb-sources-log" style="margin-top:10px">事件日志：点击来源行或受限行的「申请访问」</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbSources, initKbSources } from '@icen.ai/ui/kit/kb-sources';initKbSources();   // 委托点击 → icen:kb-source-open { source }；受限行补 Enter/Space 键控（幂等 + 销毁函数） renderKbSources(el, sources, {  variant: 'row',          // 'row' 答案上方横排（默认）| 'rail' 侧栏纵列  onlyCited: false,        // true = 只保留被引过的来源（useCount > 0，流式随流填充）  onOpen: (source) => openPassage(source),   // 与事件双通道});// 来源对象即 kb-core KbCitation：official / date（>90 天自动 stale）/ permission 受限加锁与申请入口// 排序：useCount 降序（被引 ×N）；空数组渲染 .kb-empty「下一条答案引用的段落将出现在这里」