From 2ee25c88214d14371c521b56e874b7eaef827996 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 18 Jun 2026 06:57:24 -0700
Subject: [PATCH] =?UTF-8?q?fix(im)=EF=BC=9A=E5=90=8C=E6=AD=A5=E7=BE=A4?=
 =?UTF-8?q?=E6=98=B5=E7=A7=B0=E9=9D=99=E9=BB=98=E6=9B=B4=E6=96=B0=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 群聊侧栏从当前群成员的 displayUserName 回填「我在本群的昵称」
- WebSocket 收到 GROUP_MEMBER_NICKNAME_UPDATE 时只同步 groupStore，不再插入消息列表
- 保持与 Vue3 + EP 群昵称修改交互一致
---
 .../components/message/message-panel.vue         |  3 +++
 .../src/views/im/home/store/websocketStore.ts    | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
index d405185c4..cd1abcdab 100644
--- a/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
+++ b/apps/web-antd/src/views/im/home/pages/conversation/components/message/message-panel.vue
@@ -9,6 +9,7 @@ import { IconifyIcon as Icon } from '@vben/icons'
 import { message, Popover, Tooltip } from 'ant-design-vue'
 
 import { createCall } from '#/api/im/rtc'
+import { getCurrentUserId } from '#/views/im/utils/auth'
 import { ImConversationType, ImRtcCallMediaType, ImRtcCallStatus } from '#/views/im/utils/constants'
 import { getClientConversationId } from '#/views/im/utils/db'
 import { resolveCallEndReasonText } from '#/views/im/utils/message'
@@ -183,12 +184,14 @@ const groupInfo = computed<
     return undefined
   }
   const group = groupStore.getGroup(conversation.targetId)
+  const selfMember = group?.members?.find((member) => member.userId === getCurrentUserId())
   return {
     id: conversation.targetId,
     name: group?.name || conversation.name,
     showGroupName: group?.name || conversation.name,
     showImage: group?.avatar || conversation.avatar,
     notice: group?.notice,
+    remarkNickName: selfMember?.displayUserName,
     groupRemark: group?.groupRemark,
     ownerId: group?.ownerUserId,
     memberCount: group?.memberCount,
diff --git a/apps/web-antd/src/views/im/home/store/websocketStore.ts b/apps/web-antd/src/views/im/home/store/websocketStore.ts
index aff2922df..03e4da9f8 100644
--- a/apps/web-antd/src/views/im/home/store/websocketStore.ts
+++ b/apps/web-antd/src/views/im/home/store/websocketStore.ts
@@ -204,6 +204,7 @@ const convertGroupMessage = (
  *    - 已读 / 回执（READ / RECEIPT）：多端已读同步、对方读后回执
  *    - 好友变更（FRIEND_*）：同步 friendStore + 级联刷新私聊会话；FRIEND_ADD / FRIEND_DELETE 额外插入会话气泡
  *    - 群个人信号（GROUP_MEMBER_SETTING_UPDATE）：同步 groupStore + 级联刷新群聊会话
+ *    - 群成员昵称变更（GROUP_MEMBER_NICKNAME_UPDATE）：同步 groupStore，不插入消息列表
  *    - 群广播事件（GROUP_*）：走 handleGroupMessage + applyGroupNotification 旁路（含 DISSOLVE / QUIT / KICK 自判清群）
  */
 export const useImWebSocketStore = defineStore('imWebSocketStore', {
@@ -538,11 +539,15 @@ export const useImWebSocketStore = defineStore('imWebSocketStore', {
     /**
      * 群聊统一帧分发：按 payload.type（ImContentType）分到已读 / 回执 / 群个人信号 / 普通消息
      *
-     * 1530 GROUP_MEMBER_SETTING_UPDATE 是个人信号；其它（普通消息 + 1501-1520 段位群广播事件）走 handleGroupMessage 入库 + 触发 applyGroupNotification 旁路
+     * GROUP_MEMBER_SETTING_UPDATE / GROUP_MEMBER_NICKNAME_UPDATE 是成员资料同步信号；其它群广播事件走 handleGroupMessage 入库 + 触发 applyGroupNotification 旁路
      */
     dispatchGroupFrame(websocketMessage: ImGroupMessageNotification) {
       try {
         switch (websocketMessage.type) {
+          case ImContentType.GROUP_MEMBER_NICKNAME_UPDATE: {
+            this.handleGroupMemberNicknameUpdate(websocketMessage)
+            break
+          }
           case ImContentType.GROUP_MEMBER_SETTING_UPDATE: {
             this.handleGroupMemberSettingUpdate(websocketMessage)
             break
@@ -984,6 +989,15 @@ export const useImWebSocketStore = defineStore('imWebSocketStore', {
       }
     },
 
+    /** GROUP_MEMBER_NICKNAME_UPDATE：同步成员在群里的昵称 */
+    handleGroupMemberNicknameUpdate(websocketMessage: ImGroupMessageNotification) {
+      useGroupStore().applyGroupNotification(
+        websocketMessage.groupId,
+        websocketMessage.type,
+        websocketMessage.content
+      )
+    },
+
     // ==================== 心跳 / 重连 ====================
 
     /** 心跳包：纯文本 'ping'，对应服务端 'pong'（后端这层用纯字符串约定，避免 JSON 解析开销） */