From e5bba07dec84f610e7bb74df211814c5b2cf4566 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 17 Jun 2026 19:51:59 +0800
Subject: [PATCH] =?UTF-8?q?fix(im):=20=E8=A1=A5=E5=9B=9E=E5=BD=95=E9=9F=B3?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E6=8E=A2=E6=B5=8B=E5=92=8C=20IM=20=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E9=97=A8=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 录音前按浏览器能力选择 MIME 类型，并按实际格式生成语音文件后缀
- 频道消息发送表单改用 UserSelectV2 多选接收人
- IM 外层壳完成本地库和缓存恢复后再挂载子路由
---
 src/views/im/home/index.vue                   |  6 ++-
 .../components/input/MessageInput.vue         | 13 ++++--
 .../components/input/VoiceRecorder.vue        | 40 +++++++++++++++++--
 .../message/ChannelMessageSendForm.vue        | 31 ++++++--------
 4 files changed, 62 insertions(+), 28 deletions(-)

diff --git a/src/views/im/home/index.vue b/src/views/im/home/index.vue
index 1d8e0e5f9..781b1d9de 100644
--- a/src/views/im/home/index.vue
+++ b/src/views/im/home/index.vue
@@ -12,7 +12,7 @@
       - 切 Tab 不重建组件，MessagePanel 滚动位置、输入框草稿等 UI 状态不丢
       - Vue 3 里 keep-alive 不能直接包 <router-view>（会有警告），必须走 v-slot 拿 Component
     -->
-    <router-view v-slot="{ Component }">
+    <router-view v-if="childRouteReady" v-slot="{ Component }">
       <keep-alive>
         <component :is="Component" />
       </keep-alive>
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { useAppStore } from '@/store/modules/app'
@@ -68,6 +68,7 @@ const channelStore = useChannelStore()
 const { pullOnce, cancelPull } = useMessagePuller()
 const { readActive, syncPrivateReadStatus } = useMessageSender()
 const voicePlayer = useVoicePlayer()
+const childRouteReady = ref(false) // 子路由是否允许挂载
 
 /** 初始化：先吃本地缓存让首屏立即渲染，再远端刷新最新数据，最后建实时通信拉离线消息 */
 onMounted(async () => {
@@ -87,6 +88,7 @@ onMounted(async () => {
       channelStore.loadChannelList(),
       groupRequestStore.loadGroupRequestList()
     ])
+    childRouteReady.value = true
     groupStore.markAllGroupMembersExpired()
     // 1.4 我管理的群下未处理加群申请红点：首登用 unhandled-list（服务端直接过滤未处理，语义精准、启动轻）；
     //     pullGroupRequests 只在重连 / 后续补偿时跑（见 useMessagePuller.pullStateEvents），不进首登主链路
diff --git a/src/views/im/home/pages/conversation/components/input/MessageInput.vue b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
index 1c1e07a03..2093ae823 100644
--- a/src/views/im/home/pages/conversation/components/input/MessageInput.vue
+++ b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
@@ -915,13 +915,20 @@ function openVoice() {
   voiceVisible.value = true
   emojiVisible.value = false
 }
-/** VoiceRecorder 录完回传 blob，包成 webm File 后走通用 uploadAndSendMedia；duration 走 context */
-async function onVoiceSend(payload: { blob: Blob; duration: number }) {
+/** VoiceRecorder 录完回传 blob，包成 File 后走通用 uploadAndSendMedia；duration 走 context */
+async function onVoiceSend(payload: {
+  blob: Blob
+  duration: number
+  extension: string
+  mimeType: string
+}) {
   const context = prepareMediaUpload()
   if (!context) {
     return
   }
-  const file = new File([payload.blob], `voice-${Date.now()}.webm`, { type: payload.blob.type })
+  const file = new File([payload.blob], `voice-${Date.now()}.${payload.extension}`, {
+    type: payload.mimeType
+  })
   await uploadAndSendMedia({
     file,
     type: ImContentType.VOICE,
diff --git a/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue b/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
index b776b0976..769c5e154 100644
--- a/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
+++ b/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
@@ -80,7 +80,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
-  send: [payload: { blob: Blob; duration: number }] // 录制完成：返回录音 Blob 和时长（秒）
+  send: [payload: { blob: Blob; duration: number; extension: string; mimeType: string }] // 录制完成：返回录音 Blob 和时长（秒）
 }>()
 
 const message = useMessage()
@@ -103,9 +103,18 @@ let audioChunks: Blob[] = []
 let mediaStream: MediaStream | null = null
 let timer: ReturnType<typeof setInterval> | null = null
 let recordedBlob: Blob | null = null
+let recordedMimeType = ''
+let recordedExtension = 'webm'
 /** 取消标记：录制中触发 resetAll 时让异步 'stop' 监听器丢弃数据，不进 preview */
 let discarding = false
 
+const VOICE_MIME_TYPE_OPTIONS = [
+  { mimeType: 'audio/webm;codecs=opus', extension: 'webm' },
+  { mimeType: 'audio/webm', extension: 'webm' },
+  { mimeType: 'audio/mp4', extension: 'm4a' },
+  { mimeType: 'audio/ogg;codecs=opus', extension: 'ogg' }
+]
+
 /** 计时器展示文案：mm:ss */
 const timerText = computed(() => formatSeconds(duration.value))
 
@@ -147,7 +156,15 @@ async function startRecord() {
   }
   audioChunks = []
   discarding = false
-  mediaRecorder = new MediaRecorder(mediaStream)
+  const voiceMimeType = getSupportedVoiceMimeType()
+  if (!voiceMimeType) {
+    message.error('当前浏览器不支持录音格式')
+    cleanupStream()
+    return
+  }
+  recordedMimeType = voiceMimeType.mimeType
+  recordedExtension = voiceMimeType.extension
+  mediaRecorder = new MediaRecorder(mediaStream, { mimeType: recordedMimeType })
   mediaRecorder.addEventListener('dataavailable', (event: BlobEvent) => {
     if (event.data.size > 0) {
       audioChunks.push(event.data)
@@ -158,7 +175,7 @@ async function startRecord() {
     if (discarding) {
       return
     }
-    recordedBlob = new Blob(audioChunks, { type: 'audio/webm' })
+    recordedBlob = new Blob(audioChunks, { type: recordedMimeType })
     previewUrl.value = URL.createObjectURL(recordedBlob)
     status.value = 'preview'
   })
@@ -202,7 +219,12 @@ function handleSend() {
   if (!recordedBlob) {
     return
   }
-  emit('send', { blob: recordedBlob, duration: duration.value })
+  emit('send', {
+    blob: recordedBlob,
+    duration: duration.value,
+    extension: recordedExtension,
+    mimeType: recordedMimeType
+  })
   visible.value = false
 }
 
@@ -224,6 +246,8 @@ function resetAll() {
     timer = null
   }
   audioChunks = []
+  recordedMimeType = ''
+  recordedExtension = 'webm'
   duration.value = 0
   status.value = 'idle'
   clearPreview()
@@ -244,6 +268,14 @@ function cleanupStream() {
   mediaStream = null
 }
 
+/** 查询浏览器支持的录音格式 */
+function getSupportedVoiceMimeType() {
+  if (typeof MediaRecorder === 'undefined') {
+    return undefined
+  }
+  return VOICE_MIME_TYPE_OPTIONS.find((item) => MediaRecorder.isTypeSupported(item.mimeType))
+}
+
 onMounted(() => {
   if (props.modelValue) {
     document.addEventListener('click', handleDocumentClick)
diff --git a/src/views/im/manager/channel/message/ChannelMessageSendForm.vue b/src/views/im/manager/channel/message/ChannelMessageSendForm.vue
index 2304782f4..95eda691b 100644
--- a/src/views/im/manager/channel/message/ChannelMessageSendForm.vue
+++ b/src/views/im/manager/channel/message/ChannelMessageSendForm.vue
@@ -28,21 +28,12 @@
         label="接收用户"
         prop="receiverUserIds"
       >
-        <!-- TODO @芋艿：后续换成 userselect 组件 -->
-        <el-select
+        <UserSelectV2
           v-model="formData.receiverUserIds"
-          multiple
-          filterable
-          placeholder="选择接收用户"
-          class="!w-full"
-        >
-          <el-option
-            v-for="user in userList"
-            :key="user.id"
-            :label="user.nickname"
-            :value="user.id"
-          />
-        </el-select>
+          :multiple="true"
+          placeholder="请选择接收用户"
+          @change="handleReceiverUserChange"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -54,7 +45,7 @@
 
 <script lang="ts" setup>
 import * as MessageApi from '@/api/im/manager/channel/message'
-import * as UserApi from '@/api/system/user'
+import UserSelectV2 from '@/views/system/user/components/UserSelectV2.vue'
 import ChannelSelect from '../list/components/ChannelSelect.vue'
 import MaterialSelect from '../material/components/MaterialSelect.vue'
 
@@ -69,7 +60,6 @@ const formData = ref({
   receiverUserType: 'all' as 'all' | 'users', // 接收用户类型：全员 / 指定用户
   receiverUserIds: [] as number[]
 })
-const userList = ref<UserApi.UserVO[]>([]) // 全部启用用户（首次打开预拉）
 
 const formRules = reactive({
   channelId: [{ required: true, message: '请选择频道', trigger: 'change' }],
@@ -79,16 +69,19 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async () => {
+const open = () => {
   dialogVisible.value = true
   resetForm()
-  // 加载用户列表
-  userList.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 
+/** 接收用户变化 */
+const handleReceiverUserChange = () => {
+  formRef.value?.validateField('receiverUserIds')
+}
+
 /** 提交表单 */
 const submitForm = async () => {
   await formRef.value.validate()