AiEditorSender 面板输入
AiEditorSender 是一个功能更强大的 AI 对话输入组件，灵感源自 Element Plus X EditorSender。它集成了附件展示、工具栏及自定义插槽，适用于复杂的 AI 交互场景。
基础用法
包含默认的输入框、字数统计及发送按钮。
基础用法
附件展示与操作
内置附件列表布局（仅展示用，上传逻辑需外部控制），支持预览和移除。
附件展示与操作
状态与工具栏插槽
通过 toolbar 和 actions 插槽，你可以自由扩展输入框底部的业务逻辑。
状态与工具栏插槽
命令面板 (Command Panel)
通过输入 / 触发命令面板，支持模糊搜索、图标、描述及级联子命令等功能。
基础命令面板
基础命令面板
带描述的命令
带描述的命令
级联命令菜单
级联命令菜单
自定义触发字符
自定义触发字符
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
model-value | 输入内容双向绑定 | string | '' |
placeholder | 占位文本 | string | '' |
disabled | 是否禁用 | boolean | false |
loading | 是否处于加载/发送中状态 | boolean | false |
attachments | 附件列表 | AttachmentItem[] | [] |
show-word-limit | 是否展示字数限制 | boolean | true |
max-length | 最大字数限制 | number | undefined |
rows | 默认初始行数 | number | 1 |
命令面板 Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
enable-commands | 是否启用命令面板 | boolean | true |
command-trigger | 命令触发字符 | string | '/' |
commands | 命令列表 | AiCommandItem[] | [] |
command-panel-position | 命令面板位置 | 'top' | 'bottom' | 'bottom' |
command-panel-align | 命令面板对齐方式 | 'start' | 'center' | 'end' | 'start' |
command-panel-width | 命令面板宽度 | string | number | 320 |
command-panel-max-height | 命令面板最大高度 | number | 400 |
show-command-description | 是否显示命令描述 | boolean | true |
show-command-icon | 是否显示命令图标 | boolean | true |
command-search-delay | 命令搜索防抖延迟（毫秒） | number | 150 |
enable-command-cascade | 是否启用级联菜单 | boolean | true |
cascade-offset | 级联面板偏移量（像素） | number | 4 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:model-value | 内容变化时触发 | (value: string) |
send | 点击发送或按 Enter (不加 Shift) 时触发 | (value: string) |
change | 内容改变完成时触发 | (value: string) |
remove-attachment | 点击附件移除按钮时触发 | (index: number, item: AttachmentItem) |
clear | 清空内容时触发 | () |
命令面板 Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
command-select | 选择命令时触发 | (command: AiCommandItem, parentCommand?: AiCommandItem) |
command-search | 搜索命令时触发 | (keyword: string) |
command-panel-show | 命令面板显示时触发 | () |
command-panel-hide | 命令面板隐藏时触发 | () |
command-cascade | 打开级联子菜单时触发 | (command: AiCommandItem, parentCommand: AiCommandItem) |
Slots
| 插槽名 | 说明 |
|---|---|
header | 顶部附件展示区插槽 |
toolbar | 底部左侧快捷工具栏插槽 |
actions | 底部右侧追加操作插槽（在字数统计后，发送按钮前） |
submit | 自定义发送按钮 |
AiCommandItem
| 属性名 | 说明 | 类型 | 是否必填 |
|---|---|---|---|
id | 唯一标识 | string | ✅ |
label | 显示文本 | string | ✅ |
keywords | 模糊搜索关键词 | string[] | ❌ |
icon | 图标名称 | string | ❌ |
description | 命令描述文本 | string | ❌ |
disabled | 是否禁用该命令 | boolean | ❌ |
children | 子命令列表（级联菜单） | AiCommandItem[] | ❌ |
level | 命令层级深度 | number | ❌ |
data | 自定义扩展数据 | Record<string, unknown> | ❌ |
AttachmentItem
| 属性名 | 说明 | 类型 |
|---|---|---|
name | 文件名 | string |
url | 文件链接 | string |
status | 上传状态 | 'uploading' | 'success' | 'error' |
percentage | 上传进度 | number |
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-editor-sender-bg | 面板背景色 | var(--yh-bg-color-overlay) |
--yh-ai-editor-sender-radius | 圆角大小 | 12px |
--yh-ai-editor-sender-border | 边框样式 | 1px solid var(--yh-border-color) |
--yh-ai-editor-sender-shadow | 面板阴影 | 0 4px 16px rgba(0, 0, 0, 0.08) |
--yh-ai-editor-sender-focus-border | 聚焦边框样式 | 1px solid var(--yh-color-primary) |