AiMention AI 提及
基于 Mention 组件扩展，专为 AI 助手设计。支持通过 @ 呼叫 Agent（智能体）、引用 Context（文档、表格、知识库）等 AI 场景下的常用交互。
基础用法
展示 AI 提及组件的标准样式，包括不同类型的图标区分、描述信息展示以及类型标签。
基础用法
类型过滤
通过 types 属性，可以实现不同触发前缀下的类型过滤，例如 @ 用于唤醒智能体，# 用于引用知识库文件。
仅选择 Agent (@ 呼叫...)
仅选择 Context (# 引用...)
类型过滤与自定义前缀
文件树选择
通过 enable-file-tree 属性启用文件树选择功能，支持 @文档、@表格、@文件、@知识库 等触发词。注意：仅输入 @ 会走普通提及候选列表，输入 @文档 等前缀才会展示目录树。
文件树选择
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4 SSR 渲染。在 Nuxt 项目中，组件会自动注册，无需手动导入。
有关详细配置，请参考 Nuxt 集成文档。
SSR 友好
AiMention 已通过完整的 SSR 测试，支持服务端渲染，确保首屏加载性能。
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string | '' |
| options | 提及选项列表 | AiMentionOption[] | [] |
| types | 允许显示的类型列表 | ('agent'|'document'|'table'|'knowledge'|'file')[] | ['agent', 'document', 'table', 'knowledge', 'file'] |
| triggers | 触发字符列表 | string[] | ['@'] |
| type | 输入类型 | 'input' | 'textarea' | 'textarea' |
| placeholder | 占位符 | string | '' |
| disabled | 是否禁用 | boolean | false |
| size | 尺寸 | 'large' | 'default' | 'small' | default |
| max-length | 最大长度 | number | — |
| rows | 文本域行数 | number | 3 |
| loading | 是否处于加载中 | boolean | false |
| theme-overrides | 组件级别的主题定制 | ComponentThemeVars | {} |
| filter-option | 自定义选项过滤函数 / 关闭内置过滤逻辑 | (keyword: string, option: MentionOption) => boolean | false | undefined |
| enable-file-tree | 是否启用文件树选择器 | boolean | true |
| file-loader | 文件树数据加载函数 | AiMentionFileLoader | undefined |
| file-root | 文件树根路径 | string | '/' |
| file-tree-expanded-level | 文件树默认展开层级 | number | 2 |
| show-file-icon | 是否显示文件图标 | boolean | true |
| show-file-size | 是否显示文件大小 | boolean | true |
| show-modified-time | 是否显示最后修改时间 | boolean | true |
| format-file-size | 文件大小格式化函数 | (size: number) => string | 内置格式化实现 |
| search-debounce | 搜索防抖延迟（毫秒） | number | 300 |
AiMentionOption
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 显示文本 | string | — |
| value | 选中值 | string | — |
| type | AI 类型 | 'agent' | 'document' | 'table' | 'knowledge' | 'file' | — |
| icon | 自定义图标 | string | — |
| description | 描述文本 | string | — |
| path | 文件/文档路径 | string | — |
| size | 文件大小（字节） | number | — |
| modifiedAt | 最后修改时间戳 | number | — |
| children | 子节点（文件树） | AiMentionOption[] | — |
| isFolder | 是否为文件夹 | boolean | — |
| expanded | 是否展开 | boolean | — |
Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| label | 自定义选项内容 | { option: AiMentionOption } |
| empty | 无匹配项内容 | — |
| loading | 加载中内容 | — |
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-mention-option-height | 选项高度 | 56px |
--yh-ai-mention-agent-color | 智能体类型主题色 | var(--yh-color-primary) |
--yh-ai-mention-doc-color | 文档类型主题色 | #47c2ff |
--yh-ai-mention-table-color | 表格类型主题色 | #10b981 |
--yh-ai-mention-knowledge-color | 知识库类型主题色 | #f59e0b |