From e9be6ef8b322b64e81b4a89239eb2bc9bade22ab Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 27 Apr 2026 23:56:50 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BE=A4=E6=B6=88=E6=81=AF=E7=9A=84=E5=9B=9E=E6=89=A7=E5=BC=80?=
 =?UTF-8?q?=E5=85=B3=EF=BC=8C=E9=80=9A=E8=BF=87=E5=90=91=E4=B8=8B=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/im/home/components/ToolBar.vue      | 20 ++++++++-----------
 .../components/message/MessageItem.vue        |  2 +-
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/views/im/home/components/ToolBar.vue b/src/views/im/home/components/ToolBar.vue
index dd5a64475..519ce7509 100644
--- a/src/views/im/home/components/ToolBar.vue
+++ b/src/views/im/home/components/ToolBar.vue
@@ -4,11 +4,14 @@
     布局：顶部头像 → 中间三 Tab（消息/好友/群聊）→ 底部设置
   -->
   <div class="flex flex-col items-center w-14 pt-4 pb-3 gap-2 flex-shrink-0 bg-[#2b2b2b]">
-    <!-- 顶部用户头像，点击跳个人中心；方块小圆角对齐 UserAvatar 风格 -->
+    <!-- 顶部用户头像，点击跳个人中心；走 UserAvatar 统一首字 / 哈希配色规则 -->
     <div class="mb-2 cursor-pointer" @click="goProfile">
-      <el-avatar :size="36" :src="avatar" shape="square" :style="{ borderRadius: '6px' }">
-        {{ nicknameShort }}
-      </el-avatar>
+      <UserAvatar
+        :url="userStore.getUser?.avatar"
+        :name="userStore.getUser?.nickname"
+        :size="36"
+        :clickable="false"
+      />
     </div>
 
     <!-- 中间三 Tab -->
@@ -54,6 +57,7 @@ import { Setting } from '@element-plus/icons-vue'
 import Icon from '@/components/Icon/src/Icon.vue'
 import { useUserStore } from '@/store/modules/user'
 import { useConversationStore } from '../store/conversationStore'
+import UserAvatar from './UserAvatar.vue'
 
 defineOptions({ name: 'ImToolBar' })
 
@@ -80,14 +84,6 @@ const tabs = [
 /** 当前路由是否命中 Tab：直接比对 route.name */
 const isActive = (name: string) => route.name === name
 
-const avatar = computed(() => userStore.getUser?.avatar || '')
-
-/** 头像兜底：取昵称最后一个字符，避免空头像时的灰底过于突兀 */
-const nicknameShort = computed(() => {
-  const name = userStore.getUser?.nickname || ''
-  return name ? name.slice(-1) : '我'
-})
-
 /** 切换 Tab：当前 Tab 已选中时跳过，避免无意义的导航 */
 const goTab = (name: string) => {
   if (route.name === name) {
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 d0269861d..f627f0d35 100644
--- a/src/views/im/home/pages/conversation/components/message/MessageItem.vue
+++ b/src/views/im/home/pages/conversation/components/message/MessageItem.vue
@@ -538,7 +538,7 @@ async function handleRecall() {
  * 失败消息点击重试：先把 FAILED 的本地占位消息从列表里去掉，再用同样的 type + content 走一遍 sendRaw，
  * 后者会新建 clientMessageId 并重新跑乐观更新流程
  *
- * 不还原原 needReceipt：群回执是发送时的扩展选项、不会持久化到 message，强行猜测可能与原意不符；
+ * 不还原原 receipt：群回执是发送时的扩展选项、不会持久化到 message，强行猜测可能与原意不符；
  * 默认按"无回执"重发，绝大多数场景符合预期，要回执就重新发一次更直观
  */
 async function handleResend() {