From 122b1ba74808e8dfcc5147aced7ebe4bf517a96f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 28 Apr 2026 08:48:38 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E4=BC=98=E5=8C=96=20me?=
 =?UTF-8?q?ssage=20=E7=9A=84=E5=AF=BC=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/components/UserInfoCard.vue            | 7 ++++---
 .../components/conversation/ConversationItem.vue         | 9 ++++-----
 .../pages/conversation/components/input/MessageInput.vue | 9 +++++----
 .../conversation/components/input/VoiceRecorder.vue      | 8 +++++---
 .../conversation/components/message/MessageHistory.vue   | 5 +++--
 .../conversation/components/message/MessageItem.vue      | 7 ++++---
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/views/im/home/components/UserInfoCard.vue b/src/views/im/home/components/UserInfoCard.vue
index 2aa71762e..9750dbfd5 100644
--- a/src/views/im/home/components/UserInfoCard.vue
+++ b/src/views/im/home/components/UserInfoCard.vue
@@ -51,7 +51,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
 
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
 import { getSimpleUser } from '@/api/system/user'
@@ -70,6 +70,7 @@ const conversationStore = useConversationStore()
 const friendStore = useFriendStore()
 const userStore = useUserStore()
 const router = useRouter()
+const message = useMessage()
 
 const card = computed(() => uiStore.userInfoCard)
 const user = computed(() => card.value.user)
@@ -161,14 +162,14 @@ async function handleAddFriend() {
       nickname: user.value.nickname,
       avatar: user.value.avatar
     })
-    ElMessage.success('已添加好友')
+    message.success('已添加好友')
   } catch (e: any) {
     console.error(
       '[IM] 添加好友失败',
       { userId: user.value?.id, nickname: user.value?.nickname },
       e
     )
-    ElMessage.error(e?.message || '添加好友失败')
+    message.error(e?.message || '添加好友失败')
   }
 }
 </script>
diff --git a/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue b/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
index a3852576e..5b2883e7f 100644
--- a/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
+++ b/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
@@ -71,10 +71,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import dayjs from 'dayjs'
 
 import Icon from '@/components/Icon/src/Icon.vue'
+import { useMessage } from '@/hooks/web/useMessage'
 import { useConversationStore } from '../../../../store/conversationStore'
 import { useFriendStore } from '../../../../store/friendStore'
 import { useGroupStore } from '../../../../store/groupStore'
@@ -96,6 +96,7 @@ const conversationStore = useConversationStore()
 const friendStore = useFriendStore()
 const groupStore = useGroupStore()
 const uiStore = useImUiStore()
+const message = useMessage()
 
 const isActive = computed(
   () =>
@@ -163,7 +164,7 @@ function handleMuted() {
       : groupStore.setMuted(targetId, next)
   sync.catch((e) => {
     console.error('[IM] 切换免打扰失败', e)
-    ElMessage.error('切换免打扰失败')
+    message.error('切换免打扰失败')
     conversationStore.setMuted(type, targetId, !next)
   })
 }
@@ -171,9 +172,7 @@ function handleMuted() {
 /** 删除会话：二次确认后软删（用户取消走 catch 静默） */
 async function handleDelete() {
   try {
-    await ElMessageBox.confirm(`确定删除与「${props.conversation.name}」的会话吗？`, '删除会话', {
-      type: 'warning'
-    })
+    await message.confirm(`确定删除与「${props.conversation.name}」的会话吗？`, '删除会话')
     conversationStore.removeConversation(props.conversation.type, props.conversation.targetId)
   } catch {
     // 用户取消
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 cc8563187..86649a688 100644
--- a/src/views/im/home/pages/conversation/components/input/MessageInput.vue
+++ b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
@@ -117,7 +117,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
-import { ElMessage } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
 
 import Icon from '@/components/Icon/src/Icon.vue'
 import { updateFile } from '@/api/infra/file'
@@ -142,6 +142,7 @@ defineOptions({ name: 'ImMessageInput' })
 const conversationStore = useConversationStore()
 const groupStore = useGroupStore()
 const { send, sendRaw } = useMessageSender()
+const message = useMessage()
 
 const editorRef = useTemplateRef<HTMLDivElement>('editorRef')
 const imageInputRef = useTemplateRef<HTMLInputElement>('imageInputRef')
@@ -627,7 +628,7 @@ async function uploadAndSendImage(file: File) {
     await sendRaw(ImMessageType.IMAGE, serializeMessage<ImageMessage>({ url }))
   } catch (err) {
     console.error('[IM] 图片上传失败:', err)
-    ElMessage.error('图片上传失败')
+    message.error('图片上传失败')
   }
 }
 
@@ -646,7 +647,7 @@ async function uploadAndSendFile(file: File) {
     )
   } catch (err) {
     console.error('[IM] 文件上传失败:', err)
-    ElMessage.error('文件上传失败')
+    message.error('文件上传失败')
   }
 }
 
@@ -689,7 +690,7 @@ async function onVoiceSend(payload: { blob: Blob; duration: number }) {
     )
   } catch (err) {
     console.error('[IM] 语音上传失败:', err)
-    ElMessage.error('语音上传失败')
+    message.error('语音上传失败')
   }
 }
 </script>
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 526820348..1bbb91541 100644
--- a/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
+++ b/src/views/im/home/pages/conversation/components/input/VoiceRecorder.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
 import { formatSeconds } from '@/utils/formatTime'
 
 defineOptions({ name: 'ImVoiceRecorder' })
@@ -56,6 +56,8 @@ const emit = defineEmits<{
   send: [payload: { blob: Blob; duration: number }] // 录制完成：返回录音 Blob 和时长（秒）
 }>()
 
+const message = useMessage()
+
 const visible = computed({
   get: () => props.modelValue,
   set: (v) => emit('update:modelValue', v)
@@ -76,13 +78,13 @@ watch(visible, (v) => {
 
 async function startRecord() {
   if (!navigator.mediaDevices?.getUserMedia) {
-    ElMessage.error('当前浏览器不支持录音（需要 HTTPS 或 localhost）')
+    message.error('当前浏览器不支持录音（需要 HTTPS 或 localhost）')
     return
   }
   try {
     mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true })
   } catch (e) {
-    ElMessage.error('无法获取麦克风权限')
+    message.error('无法获取麦克风权限')
     return
   }
   audioChunks = []
diff --git a/src/views/im/home/pages/conversation/components/message/MessageHistory.vue b/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
index d4dfcaf83..fa55cb957 100644
--- a/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessageHistory.vue
@@ -297,7 +297,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { useMessage } from '@/hooks/web/useMessage'
 import dayjs from 'dayjs'
 
 import Icon from '@/components/Icon/src/Icon.vue'
@@ -338,6 +338,7 @@ const userStore = useUserStore()
 const conversationStore = useConversationStore()
 const groupStore = useGroupStore()
 const { convertPrivateMessage, convertGroupMessage } = useMessagePuller()
+const message = useMessage()
 
 const visible = computed({
   get: () => props.modelValue,
@@ -568,7 +569,7 @@ async function loadEarlier() {
     )
   } catch (error) {
     console.error('[IM] 加载更早历史消息失败', error)
-    ElMessage.error('加载历史消息失败')
+    message.error('加载历史消息失败')
   } finally {
     loadingMore.value = false
   }
diff --git a/src/views/im/home/pages/conversation/components/message/MessageItem.vue b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
index 8fdf7e312..17de75c8f 100644
--- a/src/views/im/home/pages/conversation/components/message/MessageItem.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
@@ -211,9 +211,8 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref } from 'vue'
-import { ElMessageBox } from 'element-plus'
-
 import Icon from '@/components/Icon/src/Icon.vue'
+import { useMessage } from '@/hooks/web/useMessage'
 
 import {
   ImMessageType,
@@ -254,6 +253,8 @@ const conversationStore = useConversationStore()
 const groupStore = useGroupStore()
 const uiStore = useImUiStore()
 const { recall, sendRaw } = useMessageSender()
+// 仅用 confirm，避免 message 跟 props.message 同名冲突（vue/no-dupe-keys）
+const { confirm: confirmDialog } = useMessage()
 
 /** 是否已撤回：pull / WS 两路都会调 recallMessage 把原消息更新为 type=RECALL，渲染只需识别 type */
 const isRecall = computed(() => props.message.type === ImMessageType.RECALL)
@@ -527,7 +528,7 @@ async function handleContextMenu(e: MouseEvent) {
  */
 async function handleRecall() {
   try {
-    await ElMessageBox.confirm('确定要撤回这条消息吗？', '撤回消息', { type: 'warning' })
+    await confirmDialog('确定要撤回这条消息吗？', '撤回消息')
     await recall(props.message)
   } catch {
     // ElMessageBox 在用户点取消时会 reject，吃掉即可