ICEN UI v0.9.0

回答反馈

回答级反馈：有帮助 / 无帮助双钮 + 踩后原因枚举 chips（默认五项：答案有误 / 引用不符 / 内容过时 / 无引用依据 / 越权信息，可自定义）+ 提交终态。状态机内建：点赞锁定不展开原因；点踩锁定并展开 chips（单选可切换），提交后进入 .is-done 终态显示感谢文案；再点已选钮回中性。每次投票与提交派 icen:ai-feedback { value: 1|-1|0, reason? }，与 onFeedback 回调双通道。

点「踩」展开原因 chips（默认五项）· 选因提交进入感谢终态 · 再点已选钮回中性 · 点「赞」不展开原因

<div id="ai-feedback-demo"></div><p class="demo-label" id="ai-feedback-log" style="margin-top:8px">点「踩」展开原因 chips（默认五项）· 选因提交进入感谢终态 · 再点已选钮回中性 · 点「赞」不展开原因</p>

安装

bun add @icen.ai/ui

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

import { initAiFeedback } from '@icen.ai/ui/kit/ai-feedback';initAiFeedback();

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

bunx --bun @icen.ai/ui add ai-feedback

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

用法

import { renderAiFeedback, initAiFeedback } from '@icen.ai/ui/kit/ai-feedback'; initAiFeedback();   // 委托驱动全部状态切换（幂等 + 销毁函数）renderAiFeedback(el, {  // reasons 缺省五项：答案有误 / 引用不符 / 内容过时 / 无引用依据 / 越权信息  reasons: ['答案有误', '引用不符', '内容过时'],   // 可自定义枚举  onFeedback: (d) => report(d),                    // 与 icen:ai-feedback 事件双通道});// 状态机：点「踩」锁定并展开原因（单选可切换）→ 提交进入 .is-done 终态；// 点「赞」锁定不展开原因；再点已选钮回中性（value 0）