✨ feat(im): 新增 MentionPicker.vue、MessageInput.vue、VoiceRecorder.vue 三个组件，vibe~
YunaiV
parent
6add0b0600
commit
45a530e8c7
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<!--
|
||||||
|
@ 成员选择浮层
|
||||||
|
- 父组件通过 v-model:visible 控制显隐，searchText 过滤
|
||||||
|
- 父组件通过 ref 调 moveUp / moveDown / pickActive 实现键盘上下 + Enter 选中
|
||||||
|
- @select 发射被选中的成员
|
||||||
|
-->
|
||||||
|
<el-scrollbar
|
||||||
|
v-show="visible && showMembers.length > 0"
|
||||||
|
ref="scrollRef"
|
||||||
|
class="fixed z-100 w-50 h-75 rounded-md bg-[var(--el-bg-color)] shadow-[0_4px_16px_rgba(0,0,0,0.12)]"
|
||||||
|
:style="{ left: pos.x + 'px', top: pos.y + 'px' }"
|
||||||
|
>
|
||||||
|
<ChatGroupMember
|
||||||
|
v-for="(m, idx) in showMembers"
|
||||||
|
:key="m.userId"
|
||||||
|
:member="m"
|
||||||
|
:height="40"
|
||||||
|
:active="activeIdx === idx"
|
||||||
|
:clickable="false"
|
||||||
|
@click.stop="handleSelect(m)"
|
||||||
|
/>
|
||||||
|
</el-scrollbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, ref, useTemplateRef, watch } from 'vue'
|
||||||
|
import { ElScrollbar } from 'element-plus'
|
||||||
|
|
||||||
|
import { useUserStore } from '@/store/modules/user'
|
||||||
|
import ChatGroupMember, { type GroupMemberLite } from '../ChatGroupMember.vue'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ImMentionPicker' })
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
visible: boolean // 是否显示
|
||||||
|
pos: { x: number; y: number } // 浮层位置（一般贴在 @ 符号上方）
|
||||||
|
members: GroupMemberLite[] // 当前群的成员列表
|
||||||
|
searchText?: string // @ 后输入的过滤文本
|
||||||
|
ownerId?: number // 群主 id，判断是否能展示"全体成员"
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
searchText: '',
|
||||||
|
pos: () => ({ x: 0, y: 0 })
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:visible': [value: boolean]
|
||||||
|
select: [member: GroupMemberLite]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const scrollRef = useTemplateRef<InstanceType<typeof ElScrollbar>>('scrollRef')
|
||||||
|
const activeIdx = ref(0)
|
||||||
|
|
||||||
|
/** 当前登录用户 id（群成员过滤掉自己） */
|
||||||
|
const selfUserId = computed(() => Number(userStore.getUser?.id) || 0)
|
||||||
|
|
||||||
|
/** 是否群主（只有群主能 @ 全体成员） */
|
||||||
|
const isOwner = computed(() => {
|
||||||
|
return props.ownerId != null && props.ownerId === selfUserId.value
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 过滤后的显示列表（最多 100 条） */
|
||||||
|
const showMembers = computed<GroupMemberLite[]>(() => {
|
||||||
|
const result: GroupMemberLite[] = []
|
||||||
|
const keyword = props.searchText
|
||||||
|
// 群主 + 关键字是"全体成员"前缀时，插入虚拟"全体成员"条目
|
||||||
|
const allTag = '全体成员'
|
||||||
|
if (isOwner.value && allTag.startsWith(keyword)) {
|
||||||
|
result.push({ userId: -1, showNickName: allTag })
|
||||||
|
}
|
||||||
|
for (const m of props.members) {
|
||||||
|
if (result.length > 100) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
if (m.userId === selfUserId.value) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (m.quit) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (m.showNickName && m.showNickName.startsWith(keyword)) {
|
||||||
|
result.push(m)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(showMembers, (list) => {
|
||||||
|
activeIdx.value = list.length > 0 ? 0 : -1
|
||||||
|
scrollToTop()
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(v) => {
|
||||||
|
if (v) {
|
||||||
|
activeIdx.value = showMembers.value.length > 0 ? 0 : -1
|
||||||
|
scrollToTop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function scrollToTop() {
|
||||||
|
const wrap = scrollRef.value?.$el?.querySelector('.el-scrollbar__wrap') as HTMLElement | null
|
||||||
|
if (wrap) {
|
||||||
|
wrap.scrollTop = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToActive() {
|
||||||
|
const wrap = scrollRef.value?.$el?.querySelector('.el-scrollbar__wrap') as HTMLElement | null
|
||||||
|
if (!wrap) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const itemH = 40
|
||||||
|
const activeTop = activeIdx.value * itemH
|
||||||
|
if (activeTop + itemH > wrap.scrollTop + wrap.clientHeight) {
|
||||||
|
wrap.scrollTop = activeTop + itemH - wrap.clientHeight
|
||||||
|
} else if (activeTop < wrap.scrollTop) {
|
||||||
|
wrap.scrollTop = activeTop
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSelect(m: GroupMemberLite) {
|
||||||
|
emit('select', m)
|
||||||
|
emit('update:visible', false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露给父组件的键盘导航方法
|
||||||
|
defineExpose({
|
||||||
|
moveUp() {
|
||||||
|
if (activeIdx.value > 0) {
|
||||||
|
activeIdx.value--
|
||||||
|
scrollToActive()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
moveDown() {
|
||||||
|
if (activeIdx.value < showMembers.value.length - 1) {
|
||||||
|
activeIdx.value++
|
||||||
|
scrollToActive()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pickActive() {
|
||||||
|
if (activeIdx.value >= 0 && showMembers.value[activeIdx.value]) {
|
||||||
|
handleSelect(showMembers.value[activeIdx.value])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hasCandidates: () => showMembers.value.length > 0
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,407 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-col bg-[var(--el-bg-color)] border-t border-[var(--el-border-color-lighter)]"
|
||||||
|
>
|
||||||
|
<!-- 顶部工具栏：表情/图片/文件/语音/历史 -->
|
||||||
|
<div class="relative flex items-center gap-2 h-9 px-3">
|
||||||
|
<!--
|
||||||
|
注意：el-icon 默认 box-sizing:border-box + width:1em，所以这里显式 box-content 才能让 p-1.5
|
||||||
|
不把 1em 的图标挤瘪；hover 态走 UnoCSS 的 hover: 前缀
|
||||||
|
-->
|
||||||
|
<el-tooltip content="表情" placement="top">
|
||||||
|
<el-icon
|
||||||
|
class="message-input__tool box-content p-1.5 cursor-pointer rounded transition-colors hover:bg-[var(--el-fill-color)]"
|
||||||
|
@click.stop="toggleEmoji"
|
||||||
|
>
|
||||||
|
<Sunny />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="发送图片" placement="top">
|
||||||
|
<el-icon
|
||||||
|
class="message-input__tool box-content p-1.5 cursor-pointer rounded transition-colors hover:bg-[var(--el-fill-color)]"
|
||||||
|
@click="imageInputRef?.click()"
|
||||||
|
>
|
||||||
|
<Picture />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="发送文件" placement="top">
|
||||||
|
<el-icon
|
||||||
|
class="message-input__tool box-content p-1.5 cursor-pointer rounded transition-colors hover:bg-[var(--el-fill-color)]"
|
||||||
|
@click="fileInputRef?.click()"
|
||||||
|
>
|
||||||
|
<Paperclip />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="语音消息" placement="top">
|
||||||
|
<el-icon
|
||||||
|
class="message-input__tool box-content p-1.5 cursor-pointer rounded transition-colors hover:bg-[var(--el-fill-color)]"
|
||||||
|
@click="voiceVisible = true"
|
||||||
|
>
|
||||||
|
<Microphone />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip content="历史消息" placement="top">
|
||||||
|
<el-icon
|
||||||
|
class="message-input__tool box-content p-1.5 cursor-pointer rounded transition-colors hover:bg-[var(--el-fill-color)]"
|
||||||
|
@click="$emit('openHistory')"
|
||||||
|
>
|
||||||
|
<Tickets />
|
||||||
|
</el-icon>
|
||||||
|
</el-tooltip>
|
||||||
|
|
||||||
|
<!-- 浮层：表情面板；绝对定位到工具栏左上方 -->
|
||||||
|
<EmojiPicker
|
||||||
|
v-model:visible="emojiVisible"
|
||||||
|
class="bottom-9 left-3"
|
||||||
|
@select="insertText"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 输入区 -->
|
||||||
|
<el-input
|
||||||
|
ref="inputRef"
|
||||||
|
v-model="text"
|
||||||
|
type="textarea"
|
||||||
|
:rows="4"
|
||||||
|
resize="none"
|
||||||
|
placeholder="按 Enter 发送，Shift+Enter 换行"
|
||||||
|
class="message-input__textarea"
|
||||||
|
@keydown="onKeydown"
|
||||||
|
@input="onInput"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 发送按钮 -->
|
||||||
|
<div class="flex justify-end px-3 pt-1.5 pb-2.5">
|
||||||
|
<el-button type="primary" :disabled="!canSend" @click="handleSend">发 送</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- @ 选择浮层：群聊才启用 -->
|
||||||
|
<MentionPicker
|
||||||
|
ref="mentionRef"
|
||||||
|
v-model:visible="mentionVisible"
|
||||||
|
:pos="mentionPos"
|
||||||
|
:members="groupMembers"
|
||||||
|
:search-text="mentionSearchText"
|
||||||
|
:owner-id="groupOwnerId"
|
||||||
|
@select="onMentionSelect"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 语音录制对话框 -->
|
||||||
|
<VoiceRecorder v-model="voiceVisible" @send="onVoiceSend" />
|
||||||
|
|
||||||
|
<!-- 隐藏的文件选择器 -->
|
||||||
|
<input ref="imageInputRef" type="file" accept="image/*" hidden @change="onImagePicked" />
|
||||||
|
<input ref="fileInputRef" type="file" hidden @change="onFilePicked" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, nextTick, ref, useTemplateRef } from 'vue'
|
||||||
|
import { Sunny, Picture, Paperclip, Microphone, Tickets } from '@element-plus/icons-vue'
|
||||||
|
import { ElInput, ElMessage } from 'element-plus'
|
||||||
|
|
||||||
|
import { CommonStatusEnum } from '@/utils/constants'
|
||||||
|
import { updateFile } from '@/api/infra/file'
|
||||||
|
import { useConversationStore } from '@/views/im/home/store/conversationStore'
|
||||||
|
import { useGroupStore } from '@/views/im/home/store/groupStore'
|
||||||
|
import { useMessageSender } from '@/views/im/home/composables/useMessageSender'
|
||||||
|
import { ImConversationType, ImMessageType } from '@/views/im/utils/constants'
|
||||||
|
import {
|
||||||
|
serializeMessage,
|
||||||
|
type ImageMessage,
|
||||||
|
type FileMessage,
|
||||||
|
type AudioMessage
|
||||||
|
} from '@/views/im/utils/message'
|
||||||
|
|
||||||
|
import EmojiPicker from './EmojiPicker.vue'
|
||||||
|
import MentionPicker from './MentionPicker.vue'
|
||||||
|
import VoiceRecorder from './VoiceRecorder.vue'
|
||||||
|
import type { GroupMemberLite } from '../ChatGroupMember.vue'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ImMessageInput' })
|
||||||
|
|
||||||
|
defineEmits<{
|
||||||
|
openHistory: [] // 打开历史消息抽屉（由 ChatPanel 或 MessagePage 承接）
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const conversationStore = useConversationStore()
|
||||||
|
const groupStore = useGroupStore()
|
||||||
|
const { send, sendRaw } = useMessageSender()
|
||||||
|
|
||||||
|
const inputRef = useTemplateRef<InstanceType<typeof ElInput>>('inputRef')
|
||||||
|
const imageInputRef = useTemplateRef<HTMLInputElement>('imageInputRef')
|
||||||
|
const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
|
||||||
|
const mentionRef = useTemplateRef<InstanceType<typeof MentionPicker>>('mentionRef')
|
||||||
|
|
||||||
|
// ==================== 文本 / 发送 ====================
|
||||||
|
const text = ref('')
|
||||||
|
const canSend = computed(() => !!text.value.trim() && !!conversationStore.activeConversation)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交时从文本里实际存在的 @ 段重新收集 atUserIds
|
||||||
|
* - 用户先 @ 后又把 "@张三 " 整段删掉时，旧 push 模型仍会带上张三的 id（与文本不一致）
|
||||||
|
* - "@全体成员" 走虚拟 userId=-1，对齐 MentionPicker 里的 allTag 约定
|
||||||
|
* - 同名成员碰撞时第一条匹配胜出（textarea 没有不可编辑 token，也只能这么做）
|
||||||
|
*/
|
||||||
|
function collectAtUserIds(): number[] {
|
||||||
|
if (!isGroup.value) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const userIds = new Set<number>()
|
||||||
|
const regex = /@([^\s@]+)/g
|
||||||
|
let match: RegExpExecArray | null
|
||||||
|
while ((match = regex.exec(text.value)) !== null) {
|
||||||
|
const name = match[1]
|
||||||
|
if (name === '全体成员') {
|
||||||
|
userIds.add(-1)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
const member = groupMembers.value.find((m) => m.showNickName === name)
|
||||||
|
if (member?.userId != null) {
|
||||||
|
userIds.add(member.userId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Array.from(userIds)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSend() {
|
||||||
|
if (!canSend.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const atUserIds = collectAtUserIds()
|
||||||
|
const txt = text.value
|
||||||
|
text.value = ''
|
||||||
|
await send(txt, atUserIds.length > 0 ? { atUserIds } : undefined)
|
||||||
|
}
|
||||||
|
|
||||||
|
function insertText(str: string) {
|
||||||
|
const ta = getTextarea()
|
||||||
|
if (!ta) {
|
||||||
|
text.value += str
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const start = ta.selectionStart ?? text.value.length
|
||||||
|
const end = ta.selectionEnd ?? text.value.length
|
||||||
|
text.value = text.value.slice(0, start) + str + text.value.slice(end)
|
||||||
|
nextTick(() => {
|
||||||
|
ta.focus()
|
||||||
|
const caret = start + str.length
|
||||||
|
ta.setSelectionRange(caret, caret)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTextarea(): HTMLTextAreaElement | null {
|
||||||
|
// ElInput 在 type=textarea 时内部是 <textarea>，需要在 DOM 上查找
|
||||||
|
return (inputRef.value?.$el?.querySelector('textarea') as HTMLTextAreaElement) || null
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 表情 ====================
|
||||||
|
const emojiVisible = ref(false)
|
||||||
|
function toggleEmoji() {
|
||||||
|
emojiVisible.value = !emojiVisible.value
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== @ 成员选择（群聊） ====================
|
||||||
|
const isGroup = computed(
|
||||||
|
() => conversationStore.activeConversation?.type === ImConversationType.GROUP
|
||||||
|
)
|
||||||
|
|
||||||
|
/** 从 groupStore 读当前激活群的成员（切会话时由 ChatPanel 预拉） */
|
||||||
|
const groupMembers = computed<GroupMemberLite[]>(() => {
|
||||||
|
const conversation = conversationStore.activeConversation
|
||||||
|
if (!conversation || conversation.type !== ImConversationType.GROUP) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
const g = groupStore.getGroup(conversation.targetId)
|
||||||
|
return (g?.members || []).map((m) => ({
|
||||||
|
userId: m.userId,
|
||||||
|
showNickName: m.displayUserName || m.nickname,
|
||||||
|
showImage: m.avatar,
|
||||||
|
quit: m.status === CommonStatusEnum.DISABLE
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
const groupOwnerId = computed<number | undefined>(() => {
|
||||||
|
const conversation = conversationStore.activeConversation
|
||||||
|
if (!conversation || conversation.type !== ImConversationType.GROUP) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
return groupStore.getGroup(conversation.targetId)?.ownerUserId
|
||||||
|
})
|
||||||
|
|
||||||
|
const mentionVisible = ref(false)
|
||||||
|
const mentionSearchText = ref('')
|
||||||
|
const mentionPos = ref({ x: 0, y: 0 })
|
||||||
|
|
||||||
|
/** 当前输入里 @ 符号的起始光标位置，用于选中成员后做替换 */
|
||||||
|
let atStartPos = -1
|
||||||
|
|
||||||
|
function onInput() {
|
||||||
|
if (!isGroup.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const ta = getTextarea()
|
||||||
|
if (!ta) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const caret = ta.selectionStart ?? 0
|
||||||
|
const before = text.value.slice(0, caret)
|
||||||
|
// 找最近的 @ 且 @ 后没有空格（允许汉字、字母、数字）
|
||||||
|
const match = before.match(/@([^\s@]*)$/)
|
||||||
|
if (match) {
|
||||||
|
atStartPos = caret - match[0].length
|
||||||
|
mentionSearchText.value = match[1]
|
||||||
|
// 贴在输入框左上方
|
||||||
|
const rect = ta.getBoundingClientRect()
|
||||||
|
mentionPos.value = { x: rect.left + 20, y: rect.top - 10 }
|
||||||
|
mentionVisible.value = true
|
||||||
|
} else {
|
||||||
|
mentionVisible.value = false
|
||||||
|
atStartPos = -1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMentionSelect(member: GroupMemberLite) {
|
||||||
|
const ta = getTextarea()
|
||||||
|
if (!ta || atStartPos < 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const caret = ta.selectionStart ?? atStartPos
|
||||||
|
const insert = `@${member.showNickName} `
|
||||||
|
text.value = text.value.slice(0, atStartPos) + insert + text.value.slice(caret)
|
||||||
|
// userId 不再 push 到本地状态，由 collectAtUserIds 在 send 时从 text 里重新收集
|
||||||
|
nextTick(() => {
|
||||||
|
ta.focus()
|
||||||
|
const newCaret = atStartPos + insert.length
|
||||||
|
ta.setSelectionRange(newCaret, newCaret)
|
||||||
|
})
|
||||||
|
mentionVisible.value = false
|
||||||
|
atStartPos = -1
|
||||||
|
}
|
||||||
|
|
||||||
|
function onKeydown(e: KeyboardEvent) {
|
||||||
|
// @ 浮层打开时，键盘上下 + Enter 由浮层消费
|
||||||
|
if (mentionVisible.value) {
|
||||||
|
if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault()
|
||||||
|
mentionRef.value?.moveUp()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault()
|
||||||
|
mentionRef.value?.moveDown()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (e.key === 'Enter') {
|
||||||
|
e.preventDefault()
|
||||||
|
if (mentionRef.value?.hasCandidates()) {
|
||||||
|
mentionRef.value?.pickActive()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
mentionVisible.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 普通 Enter → 发送；Shift+Enter / Ctrl+Enter → 换行
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.isComposing) {
|
||||||
|
e.preventDefault()
|
||||||
|
handleSend()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 图片 / 文件上传 ====================
|
||||||
|
async function onImagePicked(e: Event) {
|
||||||
|
const input = e.target as HTMLInputElement
|
||||||
|
const file = input.files?.[0]
|
||||||
|
input.value = ''
|
||||||
|
if (!file) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const form = new FormData()
|
||||||
|
form.append('file', file)
|
||||||
|
const url = (await updateFile(form)) as unknown as string
|
||||||
|
if (!url) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await sendRaw(ImMessageType.IMAGE, serializeMessage<ImageMessage>({ url }))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[IM] 图片上传失败:', err)
|
||||||
|
ElMessage.error('图片上传失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onFilePicked(e: Event) {
|
||||||
|
const input = e.target as HTMLInputElement
|
||||||
|
const file = input.files?.[0]
|
||||||
|
input.value = ''
|
||||||
|
if (!file) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const form = new FormData()
|
||||||
|
form.append('file', file)
|
||||||
|
const url = (await updateFile(form)) as unknown as string
|
||||||
|
if (!url) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await sendRaw(
|
||||||
|
ImMessageType.FILE,
|
||||||
|
serializeMessage<FileMessage>({ url, name: file.name, size: file.size })
|
||||||
|
)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[IM] 文件上传失败:', err)
|
||||||
|
ElMessage.error('文件上传失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==================== 语音 ====================
|
||||||
|
const voiceVisible = ref(false)
|
||||||
|
async function onVoiceSend(payload: { blob: Blob; duration: number }) {
|
||||||
|
try {
|
||||||
|
const file = new File([payload.blob], `voice-${Date.now()}.webm`, { type: payload.blob.type })
|
||||||
|
const form = new FormData()
|
||||||
|
form.append('file', file)
|
||||||
|
const url = (await updateFile(form)) as unknown as string
|
||||||
|
if (!url) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await sendRaw(
|
||||||
|
ImMessageType.VOICE,
|
||||||
|
serializeMessage<AudioMessage>({ url, duration: payload.duration })
|
||||||
|
)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[IM] 语音上传失败:', err)
|
||||||
|
ElMessage.error('语音上传失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* el-icon 全局规则 .el-icon{color:var(--color,inherit); font-size:inherit; width:1em; height:1em}
|
||||||
|
会盖过 UnoCSS 原子类；用字面选择器 + !important 兜底。
|
||||||
|
颜色取 Element Plus 主题变量，暗色自动切到浅灰 */
|
||||||
|
.message-input__tool,
|
||||||
|
.message-input__tool:deep(svg) {
|
||||||
|
font-size: 18px !important;
|
||||||
|
color: var(--el-text-color-regular) !important;
|
||||||
|
fill: currentColor !important;
|
||||||
|
}
|
||||||
|
.message-input__tool:hover,
|
||||||
|
.message-input__tool:hover:deep(svg) {
|
||||||
|
color: var(--el-color-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* el-textarea 是 ElInput 内部的 textarea，需要 :deep() 去掉默认边框 / 圆角 */
|
||||||
|
.message-input__textarea :deep(.el-textarea__inner) {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-input__textarea :deep(.el-textarea__inner):focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<!--
|
||||||
|
语音录制对话框
|
||||||
|
- 简化实现：按下开始录，松开结束录；超过 maxDuration 自动停止
|
||||||
|
- 只产出 Blob + 时长，实际上传/消息封装由调用方处理
|
||||||
|
- 需要浏览器支持 MediaRecorder（HTTPS 或 localhost）
|
||||||
|
-->
|
||||||
|
<el-dialog
|
||||||
|
v-model="visible"
|
||||||
|
title="按住空格说话"
|
||||||
|
width="360px"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="handleCancel"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-center gap-4 py-5">
|
||||||
|
<div class="text-[32px] font-medium tabular-nums text-[var(--el-text-color-primary)]">
|
||||||
|
{{ timerText }}
|
||||||
|
</div>
|
||||||
|
<div class="text-13px text-[var(--el-text-color-secondary)]">
|
||||||
|
<span v-if="recording">录制中，松开按钮或按 Esc 取消</span>
|
||||||
|
<span v-else>点击"开始录制"后对着麦克风说话</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-12 h-12 rounded-full bg-[var(--el-border-color)]"
|
||||||
|
:class="{ 'im-voice-recorder__pulse bg-[#f56c6c]': recording }"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<el-button v-if="!recording" @click="handleCancel">取消</el-button>
|
||||||
|
<el-button v-if="!recording" type="primary" @click="startRecord">开始录制</el-button>
|
||||||
|
<el-button v-else type="danger" @click="stopRecord">停止并发送</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { formatSeconds } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
defineOptions({ name: 'ImVoiceRecorder' })
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
modelValue: boolean // 是否显示
|
||||||
|
maxDuration?: number // 最长录制秒数
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
maxDuration: 60
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:modelValue': [value: boolean]
|
||||||
|
send: [payload: { blob: Blob; duration: number }] // 录制完成：返回录音 Blob 和时长（秒）
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const visible = computed({
|
||||||
|
get: () => props.modelValue,
|
||||||
|
set: (v) => emit('update:modelValue', v)
|
||||||
|
})
|
||||||
|
|
||||||
|
const recording = ref(false)
|
||||||
|
const duration = ref(0)
|
||||||
|
let mediaRecorder: MediaRecorder | null = null
|
||||||
|
let audioChunks: Blob[] = []
|
||||||
|
let mediaStream: MediaStream | null = null
|
||||||
|
let timer: ReturnType<typeof setInterval> | null = null
|
||||||
|
|
||||||
|
const timerText = computed(() => formatSeconds(duration.value))
|
||||||
|
|
||||||
|
watch(visible, (v) => {
|
||||||
|
if (!v) resetAll()
|
||||||
|
})
|
||||||
|
|
||||||
|
async function startRecord() {
|
||||||
|
if (!navigator.mediaDevices?.getUserMedia) {
|
||||||
|
ElMessage.error('当前浏览器不支持录音（需要 HTTPS 或 localhost）')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true })
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error('无法获取麦克风权限')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
audioChunks = []
|
||||||
|
mediaRecorder = new MediaRecorder(mediaStream)
|
||||||
|
mediaRecorder.addEventListener('dataavailable', (event: BlobEvent) => {
|
||||||
|
if (event.data.size > 0) {
|
||||||
|
audioChunks.push(event.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
mediaRecorder.addEventListener('stop', () => {
|
||||||
|
const blob = new Blob(audioChunks, { type: 'audio/webm' })
|
||||||
|
emit('send', { blob, duration: duration.value })
|
||||||
|
visible.value = false
|
||||||
|
})
|
||||||
|
mediaRecorder.start()
|
||||||
|
recording.value = true
|
||||||
|
duration.value = 0
|
||||||
|
timer = setInterval(() => {
|
||||||
|
duration.value++
|
||||||
|
if (duration.value >= props.maxDuration) {
|
||||||
|
stopRecord()
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopRecord() {
|
||||||
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||||
|
mediaRecorder.stop()
|
||||||
|
}
|
||||||
|
cleanupStream()
|
||||||
|
recording.value = false
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCancel() {
|
||||||
|
if (recording.value) {
|
||||||
|
// 取消时不触发 send 事件
|
||||||
|
mediaRecorder?.removeEventListener('stop', onStopSilently)
|
||||||
|
mediaRecorder?.addEventListener('stop', onStopSilently, { once: true })
|
||||||
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||||
|
mediaRecorder.stop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
resetAll()
|
||||||
|
visible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function onStopSilently() {
|
||||||
|
// 用户取消：丢弃已录数据，不发送
|
||||||
|
audioChunks = []
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetAll() {
|
||||||
|
recording.value = false
|
||||||
|
duration.value = 0
|
||||||
|
audioChunks = []
|
||||||
|
cleanupStream()
|
||||||
|
if (timer) {
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function cleanupStream() {
|
||||||
|
mediaStream?.getTracks().forEach((t) => t.stop())
|
||||||
|
mediaStream = null
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeUnmount(resetAll)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 脉冲呼吸动画：keyframes 在 UnoCSS 原子类里不好表达，保留 scoped */
|
||||||
|
.im-voice-recorder__pulse {
|
||||||
|
animation: im-voice-pulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes im-voice-pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.6);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 20px rgba(245, 108, 108, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue