From bfa267120ad98e2ff3e4a6172c8b827fad5815e2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 27 Apr 2026 21:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(im):=20MessageIte?=
 =?UTF-8?q?m=20=E5=A4=B4=E5=83=8F=E9=A1=B6=E5=8F=B3=20+=20MentionPicker/Me?=
 =?UTF-8?q?ssageInput=20=E5=91=BD=E5=90=8D=E6=B8=85=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

【MessageItem.vue】
- 头像合一：双 v-if 头像（左/右）收成单一 <UserAvatar>，DOM 顺序固定为
  [头像, 气泡]，selfSend 靠外层 flex-row-reverse 翻视觉 → 头像顶右、气泡在
  头像左侧。早先双 v-if + row-reverse 让自己消息时气泡顶右、头像反而被
  挤在 bubble 左边，跟微信观感不对齐
- 5 处脚本 TODO 注释补齐：groupMembersForReadStatus / handleContextMenu /
  handleRecall / handleDelete，解释 WHY 而不是 WHAT
- formatTipTime 局部变量按"不缩写"展开：d → messageDate / n → value /
  hm → hourMinute / (a,b) → (left,right) / weeks → weekNames
- senderAvatar / groupMembersForReadStatus 回调参数 m → member、g → group

【MessageInput.vue】
- groupMembers producer 局部变量 g → group、(m) => → (member) =>

【MentionPicker.vue】
- memberItems 过滤回调 (m) => → (member) =>
---
 src/assets/audio/im-message-tip.mp3           | Bin 13059 -> 0 bytes
 .../components/input/MentionPicker.vue        |  11 +-
 .../components/input/MessageInput.vue         |  14 +-
 .../components/message/MessageItem.vue        | 209 ++++++++++++------
 src/views/im/manager/index.vue                |   0
 src/views/im/utils/index.ts                   |  30 ---
 6 files changed, 157 insertions(+), 107 deletions(-)
 delete mode 100644 src/assets/audio/im-message-tip.mp3
 delete mode 100644 src/views/im/manager/index.vue
 delete mode 100644 src/views/im/utils/index.ts

diff --git a/src/assets/audio/im-message-tip.mp3 b/src/assets/audio/im-message-tip.mp3
deleted file mode 100644
index 5f317dcd466c5430bb0b7a7c1bee9ea8e3f6c430..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 13059
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%0D#7~VnCN+4A3wP^3G94Y}5tr
zb#cajtFme7R{byRPu%^jf@LD|+5@<jBhSYt!Xl0!@c`}j6|DcN{3mrBQ~z_N?EgzA
z{4dhU`ipd0{vw@;zes0tQ|I?f{ZH<nO>V!(R<+6P-@bA91EqfrH@R(c`?e}J*TLpG
w*jxwy<D1)mJvjf+@^{-me@O4&h2Q=!{GWe^{JV+&(6*`b2Oxhk{JU}c2Ujb<i~s-t

diff --git a/src/views/im/home/pages/conversation/components/input/MentionPicker.vue b/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
index 60c3c65ff..2d494a7e7 100644
--- a/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
+++ b/src/views/im/home/pages/conversation/components/input/MentionPicker.vue
@@ -63,6 +63,7 @@ import { ElScrollbar } from 'element-plus'
 
 import Icon from '@/components/Icon/src/Icon.vue'
 import { useUserStore } from '@/store/modules/user'
+import { CommonStatusEnum } from '@/utils/constants'
 import { IM_AT_ALL_NICKNAME, IM_AT_ALL_USER_ID } from '@/views/im/utils/constants'
 import ChatGroupMember, { type GroupMemberLite } from '../ChatGroupMember.vue'
 
@@ -119,11 +120,11 @@ const allItem = computed<GroupMemberLite | null>(() => {
 /** 真成员：过滤自己 / 退群 / 不匹配关键字；不截断数量，浮层 max-height + el-scrollbar 撑滚动 */
 const memberItems = computed<GroupMemberLite[]>(() =>
   props.members.filter(
-    (m) =>
-      m.userId !== selfUserId.value &&
-      !m.quit &&
-      !!m.showNickName &&
-      m.showNickName.startsWith(props.searchText)
+    (member) =>
+      member.userId !== selfUserId.value &&
+      member.status !== CommonStatusEnum.DISABLE &&
+      !!member.showNickName &&
+      member.showNickName.startsWith(props.searchText)
   )
 )
 
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 52b443281..d8244609c 100644
--- a/src/views/im/home/pages/conversation/components/input/MessageInput.vue
+++ b/src/views/im/home/pages/conversation/components/input/MessageInput.vue
@@ -103,7 +103,6 @@ import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
 import { ElMessage } from 'element-plus'
 
 import Icon from '@/components/Icon/src/Icon.vue'
-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'
@@ -395,13 +394,12 @@ const groupMembers = computed<GroupMemberLite[]>(() => {
   if (!conversation || conversation.type !== ImConversationType.GROUP) {
     return []
   }
-  // TODO @AI：g 变 group
-  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 group = groupStore.getGroup(conversation.targetId)
+  return (group?.members || []).map((member) => ({
+    userId: member.userId,
+    showNickName: member.displayUserName || member.nickname,
+    showImage: member.avatar,
+    status: member.status
   }))
 })
 
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 c446da669..d0269861d 100644
--- a/src/views/im/home/pages/conversation/components/message/MessageItem.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
@@ -1,8 +1,10 @@
 <template>
-  <!-- TODO @AI：自己发的消息，是不是头像在最右侧； -->
-  <!-- TODO @AI：消息内容的气泡，是不是指向自己。 -->
   <!-- TODO @AI：@全部、人的消息高亮；在消息内容里 -->
-  <!-- TODO @AI：文件消息，展示的不如微信的好看。可能要优化下； -->
+  <!--
+    布局约定：DOM 顺序永远是「头像在前 / 气泡在后」，对方消息走默认 row（头像顶左），
+    自己消息靠外层 flex-row-reverse 翻视觉（头像顶右、气泡在头像左侧），跟微信对齐。
+    早先双 v-if 头像 + row-reverse 会让自己消息时气泡顶右、头像反而在气泡左边。
+  -->
   <!-- 时间分隔线（TIP_TIME=20）：居中灰色时间 -->
   <div
     v-if="isTipTime"
@@ -34,12 +36,16 @@
     :class="{ 'flex-row-reverse': message.selfSend }"
     @contextmenu.prevent="handleContextMenu"
   >
-    <!-- 对方消息：头像在左，点头像弹 UserInfoCard -->
+    <!-- 头像：DOM 顺序固定为「头像在前 / 气泡在后」，selfSend 走 flex-row-reverse 翻视觉；
+         点头像弹 UserInfoCard 由 UserAvatar 内部承接 -->
     <UserAvatar
-      v-if="!message.selfSend"
-      :id="message.senderId"
-      :name="message.senderNickName || String(message.senderId)"
-      :url="senderAvatar"
+      :id="message.selfSend ? userStore.getUser?.id : message.senderId"
+      :name="
+        message.selfSend
+          ? userStore.getUser?.nickname
+          : message.senderNickName || String(message.senderId)
+      "
+      :url="message.selfSend ? userStore.getUser?.avatar : senderAvatar"
       :size="36"
     />
 
@@ -56,12 +62,13 @@
         <!-- 文本消息 -->
         <div
           v-if="isText"
-          class="px-3.5 py-2.5 text-sm leading-normal break-words whitespace-pre-wrap rounded-lg"
-          :class="
+          class="relative px-3.5 py-2.5 text-sm leading-normal break-words whitespace-pre-wrap rounded-lg"
+          :class="[
+            message.selfSend ? 'message-bubble--self' : 'message-bubble--other',
             message.selfSend
               ? 'text-black bg-[#95ec69]'
               : 'text-[var(--el-text-color-primary)] bg-[var(--el-fill-color-light)]'
-          "
+          ]"
         >
           {{ textContent }}
         </div>
@@ -74,36 +81,43 @@
           :preview-teleported="true"
           fit="contain"
         />
-        <!-- 文件消息 -->
+        <!-- 文件消息：对齐微信观感 —— 文件名 + 大小靠左、按扩展名分配的大彩色图标贴右 -->
         <div
           v-else-if="isFile && filePayload"
-          class="flex gap-2.5 items-center min-w-[220px] max-w-[320px] px-3.5 py-2.5 border rounded cursor-pointer transition-colors"
-          :class="
+          class="relative flex gap-3 items-center min-w-[260px] max-w-[340px] px-3.5 py-3 border rounded cursor-pointer transition-colors"
+          :class="[
+            message.selfSend ? 'message-bubble--self' : 'message-bubble--other',
             message.selfSend
               ? 'bg-[#95ec69] border-[var(--el-border-color-lighter)]'
               : 'bg-[var(--el-bg-color)] border-[var(--el-border-color-light)] hover:border-[#409eff]'
-          "
+          ]"
           @click="handleFileClick"
         >
-          <el-icon class="message-bubble__file-icon flex-shrink-0 !text-[32px]">
-            <Document />
-          </el-icon>
           <div class="flex-1 min-w-0">
             <div
               class="overflow-hidden text-sm font-medium truncate text-[var(--el-text-color-primary)]"
             >
               {{ filePayload.name }}
             </div>
-            <div class="mt-0.5 text-12px text-[var(--el-text-color-secondary)]">
+            <div class="mt-1 text-12px text-[var(--el-text-color-secondary)]">
               {{ formatFileSize(filePayload.size) }}
             </div>
           </div>
+          <Icon
+            :icon="fileIconInfo.icon"
+            :color="fileIconInfo.color"
+            :size="40"
+            class="flex-shrink-0"
+          />
         </div>
         <!-- 语音消息 -->
         <div
           v-else-if="isVoice && voicePayload"
-          class="flex gap-2 items-center min-w-[120px] px-3.5 py-2.5 rounded-lg cursor-pointer"
-          :class="message.selfSend ? 'bg-[#95ec69]' : 'bg-[var(--el-fill-color-light)]'"
+          class="relative flex gap-2 items-center min-w-[120px] px-3.5 py-2.5 rounded-lg cursor-pointer"
+          :class="[
+            message.selfSend ? 'message-bubble--self' : 'message-bubble--other',
+            message.selfSend ? 'bg-[#95ec69]' : 'bg-[var(--el-fill-color-light)]'
+          ]"
           @click="handleVoiceClick"
         >
           <el-icon
@@ -191,29 +205,22 @@
       </div>
     </div>
 
-    <!-- 自己消息：头像在右，点头像也能弹 UserInfoCard -->
-    <UserAvatar
-      v-if="message.selfSend"
-      :id="userStore.getUser?.id"
-      :name="userStore.getUser?.nickname"
-      :url="userStore.getUser?.avatar"
-      :size="36"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, ref } from 'vue'
-import { Loading, WarningFilled, Document, Microphone } from '@element-plus/icons-vue'
+import { Loading, WarningFilled, Microphone } from '@element-plus/icons-vue'
 import { ElMessageBox } from 'element-plus'
 
+import Icon from '@/components/Icon/src/Icon.vue'
+
 import {
   ImMessageType,
   ImMessageStatus,
   ImGroupReceiptStatus,
   ImConversationType
 } from '../../../../../utils/constants'
-import { CommonStatusEnum } from '@/utils/constants'
 import {
   parseMessage,
   buildRecallTip,
@@ -278,7 +285,9 @@ const senderAvatar = computed(() => {
   }
   if (conversation.type === ImConversationType.GROUP) {
     const group = groupStore.getGroup(conversation.targetId)
-    return group?.members?.find((m) => m.userId === props.message.senderId)?.avatar || ''
+    return (
+      group?.members?.find((member) => member.userId === props.message.senderId)?.avatar || ''
+    )
   }
   return conversation.avatar || ''
 })
@@ -294,27 +303,27 @@ function formatTipTime(timestamp: number): string {
   if (!timestamp) {
     return ''
   }
-  const d = new Date(timestamp)
+  const messageDate = new Date(timestamp)
   const now = new Date()
-  const pad = (n: number) => n.toString().padStart(2, '0')
-  const hm = `${pad(d.getHours())}:${pad(d.getMinutes())}`
-  const sameDay = (a: Date, b: Date) =>
-    a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-  if (sameDay(d, now)) {
-    return hm
+  const pad = (value: number) => value.toString().padStart(2, '0')
+  const hourMinute = `${pad(messageDate.getHours())}:${pad(messageDate.getMinutes())}`
+  const sameDay = (left: Date, right: Date) =>
+    left.getFullYear() === right.getFullYear() &&
+    left.getMonth() === right.getMonth() &&
+    left.getDate() === right.getDate()
+  if (sameDay(messageDate, now)) {
+    return hourMinute
   }
   const yesterday = new Date(now)
   yesterday.setDate(now.getDate() - 1)
-  if (sameDay(d, yesterday)) {
-    return `昨天 ${hm}`
+  if (sameDay(messageDate, yesterday)) {
+    return `昨天 ${hourMinute}`
   }
-  if (now.getTime() - d.getTime() < 7 * 24 * 60 * 60 * 1000) {
-    const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-    return `${weeks[d.getDay()]} ${hm}`
+  if (now.getTime() - messageDate.getTime() < 7 * 24 * 60 * 60 * 1000) {
+    const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+    return `${weekNames[messageDate.getDay()]} ${hourMinute}`
   }
-  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
+  return `${pad(messageDate.getMonth() + 1)}-${pad(messageDate.getDate())} ${hourMinute}`
 }
 
 /** 文本内容 */
@@ -335,6 +344,45 @@ const videoPayload = computed(() =>
   isVideo.value ? parseMessage<VideoMessage>(props.message.content) : null
 )
 
+/**
+ * 文件类型图标 + 配色（按扩展名分发）
+ *
+ * 对齐微信观感：PDF 红 / Word 蓝 / Excel 绿 / PPT 橘 / 压缩包 黄 / 媒体 紫 / 文本 灰，
+ * 其它走通用 file-filled。后续多了类型在这里加 case，不动模板
+ */
+const fileIconInfo = computed<{ icon: string; color: string }>(() => {
+  const name = filePayload.value?.name || ''
+  const ext = name.split('.').pop()?.toLowerCase() || ''
+  if (ext === 'pdf') {
+    return { icon: 'ant-design:file-pdf-filled', color: '#ed5757' }
+  }
+  if (['doc', 'docx'].includes(ext)) {
+    return { icon: 'ant-design:file-word-filled', color: '#2b7cd3' }
+  }
+  if (['xls', 'xlsx'].includes(ext)) {
+    return { icon: 'ant-design:file-excel-filled', color: '#1f7244' }
+  }
+  if (['ppt', 'pptx'].includes(ext)) {
+    return { icon: 'ant-design:file-ppt-filled', color: '#d24726' }
+  }
+  if (['zip', 'rar', '7z', 'tar', 'gz'].includes(ext)) {
+    return { icon: 'ant-design:file-zip-filled', color: '#f0ad4e' }
+  }
+  if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext)) {
+    return { icon: 'ant-design:file-image-filled', color: '#9c27b0' }
+  }
+  if (['mp4', 'mov', 'avi', 'mkv', 'wmv', 'flv'].includes(ext)) {
+    return { icon: 'ant-design:video-camera-filled', color: '#9c27b0' }
+  }
+  if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(ext)) {
+    return { icon: 'ant-design:audio-filled', color: '#9c27b0' }
+  }
+  if (['txt', 'md', 'log', 'json', 'xml'].includes(ext)) {
+    return { icon: 'ant-design:file-text-filled', color: '#909399' }
+  }
+  return { icon: 'ant-design:file-filled', color: '#909399' }
+})
+
 /** 文件点击 → 新窗口下载 */
 function handleFileClick() {
   if (!filePayload.value?.url) {
@@ -413,19 +461,23 @@ const showGroupReadStatus = computed(() => {
   return status !== ImGroupReceiptStatus.NO_RECEIPT
 })
 
-// 当前群成员（供 MessageReadStatus 计算未读列表用）
+/**
+ * 当前群成员（供 MessageReadStatus 计算未读列表用）
+ *
+ * 群成员是按需懒加载到 groupStore（loadGroupMembers），未加载完 group?.members 为 undefined →
+ * 兜底空数组，MessageReadStatus 拿空数组就不渲染未读名单，不会出错
+ */
 const groupMembersForReadStatus = computed<GroupMemberLite[]>(() => {
   const conversation = conversationStore.activeConversation
   if (!conversation || conversation.type !== ImConversationType.GROUP) {
     return []
   }
-  // TODO @AI：group；注释；
-  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 group = groupStore.getGroup(conversation.targetId)
+  return (group?.members || []).map((member) => ({
+    userId: member.userId,
+    showNickName: member.displayUserName || member.nickname,
+    showImage: member.avatar,
+    status: member.status
   }))
 })
 
@@ -450,14 +502,14 @@ async function handleContextMenu(e: MouseEvent) {
     return
   }
 
-  // TODO @AI：右键菜单；注释；
+  // "删除"对所有消息开放（纯本地清理，无后端影响）；"撤回"必须满足 自己发 + 已落库（id≠0）+ 未撤回
   const items: Array<{ key: string; name: string; disabled?: boolean }> = [
     { key: 'DELETE', name: '删除' }
   ]
   if (props.message.selfSend && !!props.message.id && !isRecall.value) {
     items.push({ key: 'RECALL', name: '撤回' })
   }
-  // TODO @AI：右键菜单；注释；
+  // 把菜单渲染交给全局 uiStore（单例，避免每条消息都挂一份菜单 DOM）；callback 按 key 分发
   uiStore.openContextMenu({ x: e.clientX, y: e.clientY }, items, async (item) => {
     if (item.key === 'RECALL') {
       await handleRecall()
@@ -467,13 +519,18 @@ async function handleContextMenu(e: MouseEvent) {
   })
 }
 
-// TODO @AI：注释缺少；
+/**
+ * 撤回消息：弹确认框 → 调 useMessageSender.recall → 后端通过 WS RECALL 事件推回，
+ * websocketStore 把对应 message 的 type 改成 RECALL，UI 自动切到"XX 撤回了一条消息"
+ *
+ * 不做乐观撤回：失败 / 超时 / 后端拒绝时本端状态可能与服务端漂移，统一让 WS 回推最稳
+ */
 async function handleRecall() {
   try {
     await ElMessageBox.confirm('确定要撤回这条消息吗？', '撤回消息', { type: 'warning' })
     await recall(props.message)
   } catch {
-    // 用户取消
+    // ElMessageBox 在用户点取消时会 reject，吃掉即可
   }
 }
 
@@ -501,7 +558,10 @@ async function handleResend() {
   })
 }
 
-// TODO @AI：注释缺少；
+/**
+ * 删除消息：本地软删，仅从 conversationStore.messages 移除，不调后端
+ * 区别于"撤回"：服务端没动，多端登录时其它客户端 / 群里其他人依然能看到这条
+ */
 function handleDelete() {
   const conversation = conversationStore.activeConversation
   if (!conversation) {
@@ -515,11 +575,32 @@ function handleDelete() {
 </script>
 
 <style scoped>
-/* el-icon 在暗色模式下全局 color 被 .el-icon{color:var(--color)} 干扰；
-   这里把 file / voice 图标的 fill 锁死，避免字体色跟随主题变白 */
-.message-bubble__file-icon :deep(svg) {
-  fill: #409eff !important;
+/* 气泡尾巴：小三角伪元素，指向对应头像（对方在左、自己在右），对齐微信观感
+   - 用 border 4 边色画三角：透明 3 边 + 实色 1 边，省一张图片
+   - 颜色对应气泡背景，留 1px 视觉吃进去；UnoCSS 写不顺手，索性用 scoped CSS */
+.message-bubble--other::before,
+.message-bubble--self::before {
+  content: '';
+  position: absolute;
+  top: 12px;
+  width: 0;
+  height: 0;
+  border-style: solid;
 }
+.message-bubble--other::before {
+  left: -5px;
+  border-width: 5px 6px 5px 0;
+  border-color: transparent var(--el-fill-color-light) transparent transparent;
+}
+.message-bubble--self::before {
+  right: -5px;
+  border-width: 5px 0 5px 6px;
+  border-color: transparent transparent transparent #95ec69;
+}
+
+/* el-icon 在暗色模式下全局 color 被 .el-icon{color:var(--color)} 干扰；
+   这里把 voice 图标的 fill 锁死，避免字体色跟随主题变白；
+   file 图标已迁到 Iconify 按扩展名走彩色，不在这里强制 */
 .message-bubble__voice-icon :deep(svg) {
   fill: #606266 !important;
 }
diff --git a/src/views/im/manager/index.vue b/src/views/im/manager/index.vue
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/views/im/utils/index.ts b/src/views/im/utils/index.ts
deleted file mode 100644
index e8d18a95c..000000000
--- a/src/views/im/utils/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/** 生成客户端消息 ID（时间戳 + UUID） */
-export const generateClientMessageId = (): string => {
-  const timestamp = Date.now().toString()
-  const randomPart = 'xxxx-xxxx-4xxx-yxxx-xxxx'.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0
-    const v = c === 'x' ? r : (r & 0x3) | 0x8
-    return v.toString(16)
-  })
-  return `${timestamp}-${randomPart}`
-}
-
-/** 生成存储 key（对齐 boxim key 命名 chats-{userId}） */
-export const buildMetaKey = (userId: string): string => {
-  return `chats-${userId}`
-}
-
-/** 解析文本消息 content JSON */
-export const parseTextContent = (content: string): string => {
-  try {
-    const parsed = JSON.parse(content)
-    return parsed.content || ''
-  } catch {
-    return content
-  }
-}
-
-/** 序列化文本消息 content JSON */
-export const serializeTextContent = (text: string): string => {
-  return JSON.stringify({ content: text })
-}