ICEN UI v0.9.0

权限审计时间线

Microsoft Purview / Box 审计骨架的权限时间线：通道过滤 chips（全部 / 读取 / 权限变更 / 申请 / 系统）+ 导出 CSV；权限异味节（admin 治理发现六枚举：过度暴露 / 组织级链接 / 过宽组授权 / 敏感度错配 / 断继承 / 负责人缺位——源系统权限卫生问题，RAG 只是放大器）分高 / 中 / 低级；时间线行 actor 三类（human / app / system），读取与预览分列（Purview 范式）；break-glass 行常驻警示色 +「实时告警已通知安全团队」，审计粒度 ≥ 常规。renderKbAudit(el, { entries, hygiene? }) 快照 + initKbAudit(root?) document 级委托（通道过滤 / 导出 / 异味处置）；同用户同资源 5 分钟读取去重是数据侧纪律——UI 不重复渲染也不声明条数。

过度暴露 2026 财务规划 对 1,204 人可见
  1. 10-03 14:22系统审计员应急访问双人复核中
  2. 10-03 13:05张三读取全文读取

通道 chips 过滤时间线 · 异味行「处置」与「导出 CSV」走事件 · break-glass 行常驻警示（审计粒度 ≥ 常规）

<div id="kb-audit-demo">  <div class="kb-audit">    <div class="kb-audit-bar">      <div class="kb-audit-channels">        <button class="kb-chip" type="button" aria-pressed="true">全部</button>        <button class="kb-chip" type="button" aria-pressed="false">读取</button>        <button class="kb-chip" type="button" aria-pressed="false">权限变更</button>      </div>    </div>    <div class="kb-audit-hygiene">      <div class="kb-hygiene is-high"><span class="kb-badge">过度暴露</span> 2026 财务规划 <span class="kb-meta">对 1,204 人可见</span> <button class="kb-hygiene-act kb-chip" type="button">处置</button></div>    </div>    <ol class="kb-audit-list">      <li class="kb-audit-entry is-breakglass"><span class="kb-audit-at kb-num">10-03 14:22</span><span class="kb-audit-actor" data-kind="app">系统审计员</span><span class="kb-audit-action kb-chip">应急访问</span><span class="kb-audit-detail">双人复核中</span></li>      <li class="kb-audit-entry"><span class="kb-audit-at kb-num">10-03 13:05</span><span class="kb-audit-actor" data-kind="human">张三</span><span class="kb-audit-action kb-chip">读取</span><span class="kb-audit-detail">全文读取</span></li>    </ol>  </div></div><p class="demo-label" id="kb-audit-log" style="margin-top:8px">通道 chips 过滤时间线 · 异味行「处置」与「导出 CSV」走事件 · break-glass 行常驻警示（审计粒度 ≥ 常规）</p>

安装

bun add @icen.ai/ui

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

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

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

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

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

用法

import { renderKbAudit, initKbAudit } from '@icen.ai/ui/kit/kb-audit'; initKbAudit();   // document 级委托（通道过滤 / 导出 / 异味处置；幂等 + 返回销毁函数）renderKbAudit(el, {  entries: [    { id: 'au-1', at: new Date().toISOString(), actor: { kind: 'human', name: '张三' },      action: 'read', resource: '2026 财务规划', detail: '全文读取' },    { id: 'au-2', at: new Date().toISOString(), actor: { kind: 'app', name: '系统审计员' },      action: 'break_glass', resource: 'Q3 并购草案.docx', detail: '双人复核中', breakGlass: true },  ],  hygiene: [    { id: 'hyg-1', kind: 'overexposed', resource: '2026 财务规划', metric: '对 1,204 人可见',      hint: '继承链带来的宽授权——按最小知悉改为定向组', severity: 'high' },  ],});// 事件：icen:kb-audit-filter {channel} / icen:kb-audit-export {channel} / icen:kb-hygiene-action {issue}// 读取去重（同用户同资源 5 分钟）是数据侧纪律——UI 不重复渲染，也不声明条数