ICEN UI v0.9.0

来源冲突

来源冲突组 .kb-conflict（市场空白组件）：同一主张的多版本对勘——claim 警示行 + 版本卡横排；is-current 自动判定（官方优先，否则最新日期，都无则首个版本），其余版本 faded（.is-older）+ 满足 >90 天 stale 判定加过期徽标；对勘场景日期用绝对值（相对时间看不出先后）。点击版本卡 → icen:kb-source-open { source }（与来源列表同一契约，宿主据此打开 passage / 外链）；渲染即接线，无 init。

同一主张：差旅住宿标准为一线城市每晚 600 元
同一主张：质保期自验收合格之日起 12 个月

renderKbConflict 动态渲染一组（无官方徽标时 is-current 落在最新日期版本）——点击版本卡派事件

事件日志：点击动态组任一版本卡

<div class="kb-conflict">  <div class="kb-conflict-claim"><i class="kb-dot is-warn"></i>同一主张：差旅住宿标准为一线城市每晚 600 元</div>  <div class="kb-conflict-versions">    <button class="kb-conflict-ver is-current" type="button" data-kb-source-id="cf1">      <span class="kb-conflict-ver-head">        <span class="kb-conflict-ver-date kb-num">2026-08-12</span>        <span class="kb-conflict-ver-badges"><span class="kb-badge kb-badge--official">官方</span></span>      </span>      <span class="kb-conflict-ver-title">差旅费用管理制度（财务部终版）</span>      <span class="kb-conflict-ver-sub">confluence.corp · 责任人 财务部 · 陈静</span>    </button>    <button class="kb-conflict-ver is-older" type="button" data-kb-source-id="cf2">      <span class="kb-conflict-ver-head">        <span class="kb-conflict-ver-date kb-num">2025-11-03</span>        <span class="kb-conflict-ver-badges"><span class="kb-badge kb-badge--stale"><i class="kb-dot is-warn"></i>10 个月前</span></span>      </span>      <span class="kb-conflict-ver-title">差旅报销 FAQ（行政部旧版）</span>      <span class="kb-conflict-ver-sub">confluence.corp · 责任人 行政部 · 刘洋</span>    </button>  </div></div><div class="kb-conflict" style="margin-top:12px">  <div class="kb-conflict-claim"><i class="kb-dot is-warn"></i>同一主张：质保期自验收合格之日起 12 个月</div>  <div class="kb-conflict-versions">    <button class="kb-conflict-ver is-current" type="button" data-kb-source-id="cf3">      <span class="kb-conflict-ver-head"><span class="kb-conflict-ver-date kb-num">2026-06-20</span><span class="kb-conflict-ver-badges"></span></span>      <span class="kb-conflict-ver-title">采购合同模板 v5（法务更新）</span>      <span class="kb-conflict-ver-sub">confluence.corp · 责任人 法务部 · 赵珂</span>    </button>    <button class="kb-conflict-ver is-older" type="button" data-kb-source-id="cf4">      <span class="kb-conflict-ver-head">        <span class="kb-conflict-ver-date kb-num">2025-05-08</span>        <span class="kb-conflict-ver-badges"><span class="kb-badge kb-badge--stale"><i class="kb-dot is-warn"></i>1 年前</span></span>      </span>      <span class="kb-conflict-ver-title">供应商合作须知（2025 版）</span>      <span class="kb-conflict-ver-sub">confluence.corp · 责任人 采购部 · 王莉</span>    </button>  </div></div><p class="demo-label" style="margin:12px 0 8px">renderKbConflict 动态渲染一组（无官方徽标时 is-current 落在最新日期版本）——点击版本卡派事件</p><div id="demo-kb-conflict-live"></div><p class="demo-label" id="demo-kb-conflict-log" style="margin-top:8px">事件日志：点击动态组任一版本卡</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbConflict } from '@icen.ai/ui/kit/kb-conflict';renderKbConflict(el, [  {    claim: '同一主张：差旅住宿标准为一线城市每晚 600 元',    versions: [      { id: 'v1', title: '差旅费用管理制度（财务部终版）', official: true, date: '2026-08-12',        owner: '财务部 · 陈静', url: 'https://confluence.corp/pages/travel' },      { id: 'v2', title: '差旅报销 FAQ（行政部旧版）', date: '2025-11-03', owner: '行政部 · 刘洋' },    ],  },], {  onOpen: (source) => openPassage(source),   // 与 icen:kb-source-open 事件双通道（渲染即接线，无 init）});// is-current 判定：official 优先，否则最新 date；其余 .is-older faded + stale（>90 天）徽标// 版本卡日期给绝对值（对勘要看出先后），域名/责任人做 sub 行