XSender 智能输入框

最复杂的单文件组件，封装底层 @flowporr/x-sender。支持 @提及、触发符指令、选择标签、语音输入。

在线演示

Props

Prop	类型	默认值	说明
placeholder	string	'请输入内容'	占位文本
device	'pc' | 'h5' | 'auto'	'auto'	设备类型
autoFocus	boolean	false	自动聚焦
variant	'default' | 'updown'	'default'	布局变体
maxLength	number	-1	最大字符数
submitType	'enter' | 'shiftEnter'	'enter'	发送快捷键
customStyle	Partial<CSSStyleDeclaration>	{}	透传到输入框
loading	boolean	false	加载中（显示取消）
disabled	boolean	false	禁用输入
clearable	boolean	false	清除按钮
mentionConfig	MentionConfig	undefined	@提及配置
triggerConfig	TriggerConfig[]	undefined	触发符指令（如 /）
selectConfig	SelectConfig[]	undefined	选择标签配置
tipConfig	boolean | TipConfig	true	前置提示标签

Events

Event	参数	说明
submit	—	点击发送或按 Enter
change	—	输入内容变化
cancel	—	点击取消（loading 时）
pasteFile	(firstFile, fileList)	粘贴文件

Expose 方法

getPlugin / getSender       // 获取底层 x-sender 实例
senderState                 // { isEmpty, textLength, tipShow }
blur / focus / clear / selectAll
getModelValue               // { html, text, mention, trigger, select, input }
setText / setHtml / setMention / setTrigger / setSelect / setInput / setChatNode
showTip / closeTip / showSelect

基本用法

<script setup lang="ts">
import { ref } from 'vue'
import { XSender } from '@flowporr/ai-chat-vue'

function send() {
  console.log('发送')
}
</script>

<template>
  <XSender placeholder="输入消息，Enter 发送…" @submit="send" />
</template>

@提及配置

<script setup lang="ts">
const mentionConfig = {
  dialogTitle: '选择成员',
  asyncMatch: (matchStr) => searchMembers(matchStr),  // 异步搜索
  emptyText: '无匹配结果',
}
</script>

<template>
  <XSender :mention-config="mentionConfig" />
</template>

触发符指令（命令面板）

<script setup lang="ts">
const triggerConfig = [{
  dialogTitle: '命令面板',
  key: '/',
  options: [
    { label: '/总结', value: 'summary' },
    { label: '/翻译', value: 'translate' },
    { label: '/改写', value: 'rewrite' },
  ],
}]
</script>

<template>
  <XSender :trigger-config="triggerConfig" />
</template>

读取内容

const senderRef = ref()

function handleCustomAction() {
  const model = senderRef.value.getModelValue()
  // { html, text, mention: [...], trigger: {...}, select: [...], input: {...} }
  senderRef.value.setMention('user-123')  // 插入 @标签
  senderRef.value.clear()
}

与底层 x-sender 的关系

XSender 封装了 @flowporr/x-sender（vanilla JS 引擎）。需要完全定制输入交互时可直接用底层引擎（见 x-sender 参考）。