AiSender 智能输入
支持多行自适应的智能输入框，内衬发送图标。
基础用法
可以支持按下回车键（Enter）自动提交！
基础用法
加载状态
结合 :loading 使用表示正在回复禁止输入的情况。
加载状态
进阶与多模态扩展
提供了诸如字数限制 max-length，自动计数 show-word-limit，一键重置 clearable 等高阶能力。 通过插入 prefix / actions，还能极其轻松地实现文件上传、语音识别的高级智能组件拼装容器！
13 / 200
进阶模态
预设交互 (AiInputAction 模式)
通过 #actions 插槽，您可以轻松集成常用的预设操作指令，如总结、润色等。
预设操作面板
完全自定义发送槽
您可以通过 #submit 插槽完全接管发出请求区域的视图逻辑。
快捷命令 (Slash Commands)
输入 / 即可触发命令面板，通过键盘或鼠标快速选择预设的 Prompt 模板。
快捷命令
附件预览 (Attachments)
支持在发送前预览图片及文件列表，内置上传进度显示及一键移除能力。
附件预览
在 Nuxt 中使用
该组件完美支持 Nuxt 3/4。在 Nuxt 项目中，组件会被自动按需导入。
有关详细配置，请阅读 Nuxt 集成文档。
主题变量
| 变量名 | 说明 | 默认值 |
|---|---|---|
--yh-ai-sender-bg | 输入框背景色 | var(--yh-bg-color) |
--yh-ai-sender-border-color | 边框颜色 | var(--yh-border-color) |
--yh-ai-sender-border-radius | 圆角大小 | var(--yh-border-radius-base) |
--yh-ai-sender-focus-border-color | 聚焦时的边框色 | var(--yh-color-primary) |
--yh-ai-sender-text-color | 输入文字颜色 | var(--yh-text-color-primary) |
--yh-ai-sender-placeholder-color | 占位文字颜色 | var(--yh-text-color-placeholder) |
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue / v-model | 输入内容绑定值 | string | '' |
placeholder | 占位文本 | string | 'Send a message...' |
loading | 是否在等待AI响应 | boolean | false |
disabled | 是否禁用 | boolean | false |
maxLength | 原生 maxlength 输入限制 | number | — |
clearable | 是否展示清空一键按钮 | boolean | false |
showWordLimit | 是否展示底部字数统计数字 | boolean | false |
commands | 快捷命令列表 | AiCommand[] | [] |
attachments | 已选附件列表 | AiAttachment[] | [] |
themeOverrides | 主题变量覆盖 | ComponentThemeVars | — |
AiCommand
| 属性名 | 说明 | 类型 |
|---|---|---|
key | 命令关键字（如 summary） | string |
label | 显示名称 | string |
icon | 图标名称 | string |
description | 简短描述 | string |
prompt | 选中后填充的指令前缀 | string |
AiAttachment
| 属性名 | 说明 | 类型 |
|---|---|---|
id | 唯一标识 | string |
name | 文件名 | string |
type | 文件类型 | string |
url | 预览图 or URL | string |
status | 状态 | 'uploading' | 'success' | 'error' |
progress | 上传进度 (0-100) | number |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
send | 按下发送按钮或者回车时 | (value: string) => void |
clear | 点击清空按钮时触发 | () => void |
command | 选中快捷命令时触发 | (command: AiCommand) => void |
remove-attachment | 移除附件时触发 | (file: AiAttachment) => void |
Slots
| 插槽名 | 说明 |
|---|---|
prefix | 输入框左上内容前缀 |
actions | 发送按钮外层包裹 |
submit | 替换默认发送按钮，暴露 disabled, loading, submit |