ICEN UI

提及输入

在文字中选择一个人，继续完成原来的表达。支持中文输入、异步查找与失败重试。

选择成员后可继续输入。删掉完整名称时，提及记录会同步移除。

目录查询会稍作等待。可模拟失败，再在面板中重试。

html
<div class="demo-col" style="width:100%"><label class="demo-label" for="mentions-text">参与讨论的成员</label><div class="icen-mentions" id="demo-mentions"><textarea id="mentions-text" class="icen-input" rows="3" placeholder="输入 @ 选择成员，也可以用姓名或拼音查找"></textarea></div><p class="demo-label" id="mentions-log" role="status"><bdi>选择成员后可继续输入。删掉完整名称时，提及记录会同步移除。</bdi></p><label class="demo-label" for="mentions-async-text">从团队目录查找</label><div class="icen-mentions" id="demo-mentions-async"><textarea id="mentions-async-text" class="icen-input" rows="2" placeholder="输入 @林 或 @ali，体验异步查找"></textarea></div><div class="demo-row"><button class="icen-btn icen-btn-sm" type="button" id="mentions-fail">模拟一次查询失败</button></div><p class="demo-label" id="mentions-async-log" role="status"><bdi>目录查询会稍作等待。可模拟失败，再在面板中重试。</bdi></p></div>
行为与接口说明

行首或空白后的 @query 打开成员建议。方向键跳过不可选成员，Enter 插入名称，Escape 关闭当前建议；组合输入不被打断。新查询、关闭和卸载会取消旧结果，错误与无匹配独立呈现，候选可自定义渲染。

安装

bun add @icen.ai/ui

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

js
import '@icen.ai/ui/kit/mentions';

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

bash
bunx --bun @icen.ai/ui add mentions

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

用法

js
import {createMentions} from '@icen.ai/ui/kit/mentions';const handle = createMentions(textarea, {  source: async (query, {signal}) => {    const response = await fetch('/api/members?q=' + encodeURIComponent(query), {signal});    if(!response.ok) throw new Error('Member lookup failed');    return response.json(); // { id, label, keywords?, disabled? }[]  },  trigger:'@', minChars:0, debounceMs:160, max:8,  loadingLabel:'正在查找成员…', errorLabel:'暂时无法查询成员，请重试。',  noResultsLabel:'没有匹配的成员',  // renderItem: (item, query) => Node | string, // 安全的展示槽位  onSelect: (item) => console.log(item.id, item.label),});// 支持 textarea 原生 input，以及 icen:mention-select {id,label,query}。// getMentions() 按当前文本校验完整名称，不将 @alice2 当成 @alice。handle.getMentions();handle.close();   // 取消查询并关闭面板，不改正文handle.destroy(); // 卸载；恢复原 ARIA，回收面板、镜像与监听