From 45a530e8c7c5d6a6be9377d4e28489d52e56e8b2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 27 Apr 2026 09:20:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E6=96=B0=E5=A2=9E=20Me?=
 =?UTF-8?q?ntionPicker.vue=E3=80=81MessageInput.vue=E3=80=81VoiceRecorder.?=
 =?UTF-8?q?vue=20=E4=B8=89=E4=B8=AA=E7=BB=84=E4=BB=B6=EF=BC=8Cvibe~?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input/MentionPicker.vue        | 155 +++++++
 .../components/input/MessageInput.vue         | 407 ++++++++++++++++++
 .../components/input/VoiceRecorder.vue        | 177 ++++++++
 3 files changed, 739 insertions(+)
 create mode 100644 src/views/im/home/pages/conversation/components/input/MentionPicker.vue
 create mode 100644 src/views/im/home/pages/conversation/components/input/MessageInput.vue
 create mode 100644 src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue

diff --git a/src/views/im/home/pages/conversation/components/input/MentionPicker.vue b/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
new file mode 100644
index 000000000..458996d80
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
@@ -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>
+
diff --git a/src/views/im/home/pages/conversation/components/input/MessageInput.vue b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
new file mode 100644
index 000000000..b7596a0a0
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
@@ -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>
diff --git a/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue b/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
new file mode 100644
index 000000000..526820348
--- /dev/null
+++ b/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
@@ -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>