ICEN UI v0.9.0

问数答案

renderKbAnswer 问数答案组合容器（快照渲染，各槽有才渲）：认证徽章（verified 命中可信资产，数字本身永远中性）+ 权限提示（行级过滤 + 已脱敏列，不可关闭）+ 正文 [n] 角标流（无效编号降级纯文本）+ 澄清反问 / 口径解释内嵌槽 + 结果表（sticky 表头、null「—」、截断声明、导出）+ ChartSpec 图表（折线/柱状/饼图切换，复用 renderChart）+ 追问建议。事件与回调双通道：icen:kb-verified-open / onExport / onFollowUp。

点认证徽章 / 图表类型 chips（折线→柱状→饼图）/ 追问 chips / 导出 → 事件与回调双通道回显 · 结果表含截断声明与 null「—」· 权限提示不可关闭（诚实呈现）

<div id="demo-kb-answer"></div><p class="demo-label" id="kb-answer-log" style="margin-top:8px">点认证徽章 / 图表类型 chips（折线→柱状→饼图）/ 追问 chips / 导出 → 事件与回调双通道回显 · 结果表含截断声明与 null「—」· 权限提示不可关闭（诚实呈现）</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbAnswer } from '@icen.ai/ui/kit/kb-answer'; renderKbAnswer(el, {  kind: 'verified',              // 认证优先于生成；数字本身永远中性  verifiedVia: { assetId: 'pq-region-quarter-sales', assetType: 'parameterized-query', note: '口径：含税' },  permissionNotice: { rowLevelPolicy: '华东大区 · 仅本人管辖门店', maskedColumns: ['customer_phone'] },  body: '华东大区 Q3 销售额 3.42 亿，环比下滑 6.8% [1]，华南逆势增长 4.1% [2]。',   // [n] 角标流  citations: [{ id: 's1', title: '2026 年三季度经营分析月报', kind: 'doc' }, /* … */],  clarify: { question: '「Q3」按自然季度还是财季统计？', options: [{ label: '自然季度', value: 'calendar' }] },  explain: { tables: ['dws.sales_order_detail'], columns: ['amount_tax_inc'], filters: ['year = 2026'],             aggregates: ['SUM(amount_tax_inc)'], metrics: [{ name: '销售额（含税）', ref: 'https://…' }] },  result: { columns: [{ name: '区域' }, { name: '销售额', type: 'number' }], rows: [['华东', 34200.9]],            truncated: true, totalRows: 128, limit: 8, rowCount: 8, durationMs: 460, exportFormats: ['csv', 'xlsx'] },  chartSpec: { type: 'line', labels: ['Q1', 'Q2', 'Q3', 'Q4'], series: [{ name: '华东', values: [3.9, 3.8, 3.42, 3.6] }] },  followUps: ['按门店拆分看明细', '对比去年同期'],}, {  onExport: (fmt) => {},          // 未提供则导出钮禁用（不给假按钮）  onFollowUp: (text) => {},  onVerifiedOpen: (assetId) => {},  // 与 icen:kb-verified-open 同语义});