ICEN UI v0.9.0

口径解释

renderKbExplain 口径解释折叠面板（快照渲染，默认折叠）：摘要行「这个数字是怎么算出来的」+ 参与要素计数徽标；展开体为 表/列/筛选/聚合 四组 chips（有才渲）+ 指标口径行（name + ref 深链「查看口径」），全空给空态无死路。切换派 icen:kb-explain-toggle {el, open}；kb-answer 的口径槽内部复用本组件。

点摘要行展开 · 计数徽标 = 参与要素总数 · 「查看口径」深链语义层指标定义 · 上面是经营分析场景，下面是供应链库存场景

<div style="display:flex;flex-direction:column;gap:12px;width:100%">  <div id="demo-kb-explain"></div>  <div id="demo-kb-explain-2"></div></div><p class="demo-label" id="kb-explain-log" style="margin-top:8px">点摘要行展开 · 计数徽标 = 参与要素总数 · 「查看口径」深链语义层指标定义 · 上面是经营分析场景，下面是供应链库存场景</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbExplain } from '@icen.ai/ui/kit/kb-explain'; renderKbExplain(el, {  tables: ['dws.sales_order_detail', 'dim.region'],      // 四组要素各有才渲  columns: ['region_id', 'quarter', 'amount_tax_inc'],  filters: ['year = 2026', 'is_return = false'],  aggregates: ['SUM(amount_tax_inc)'],  metrics: [{ name: '销售额（含税）', ref: 'https://semantic.icen.ai/metrics/gmv-tax-inc' }],  // ref 有才渲「查看口径」深链；四组与指标全空 → 展开体给空态（无死路）});// 折叠切换派 icen:kb-explain-toggle {el, open}