From 70e7a1c900556df3dfa101edbd4aa8a3cfa76376 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 8 May 2026 18:27:53 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91IM=EF=BC=9A?=
 =?UTF-8?q?=E7=BE=A4=E5=A4=B4=E5=83=8F=E6=94=AF=E6=8C=81=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E4=B9=9D=E5=AE=AB=E6=A0=BC=E5=85=9C=E5=BA=95?=
 =?UTF-8?q?=20=E7=BE=A4=E5=A4=B4=E5=83=8F=E4=B8=BA=E7=A9=BA=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=8F=96=E5=89=8D=209=20=E4=B8=AA=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=E5=9C=A8=20Canvas=20=E4=B8=8A=E6=8B=BC?=
 =?UTF-8?q?=E4=B9=9D=E5=AE=AB=E6=A0=BC=20dataURL=EF=BC=9B=E7=A9=BA?=
 =?UTF-8?q?=E5=A4=B4=E5=83=8F=20/=20=E5=8A=A0=E8=BD=BD=E5=A4=B1=E8=B4=A5?=
 =?UTF-8?q?=E7=9A=84=E6=A0=BC=E5=AD=90=E7=94=BB=E8=B7=9F=20UserAvatar=20?=
 =?UTF-8?q?=E5=90=8C=E6=AC=BE=E8=89=B2=E5=8D=A1=EF=BC=88=E9=A6=96=E5=AD=97?=
 =?UTF-8?q?=20+=20charCode=20=E5=93=88=E5=B8=8C=E8=B0=83=E8=89=B2=E6=9D=BF?=
 =?UTF-8?q?=EF=BC=89=E3=80=82=20-=20=E6=96=B0=E5=A2=9E=20GroupAvatar=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8C=85=E4=B8=80=E5=B1=82=20UserAvatar?=
 =?UTF-8?q?=EF=BC=9B=E6=8C=89=E5=AE=B9=E5=99=A8=20size=20=C3=97=20DPR=20?=
 =?UTF-8?q?=E8=87=AA=E9=80=82=E5=BA=94=E7=94=BB=E5=B8=83=E5=83=8F=E7=B4=A0?=
 =?UTF-8?q?=EF=BC=8C=E9=81=BF=E5=85=8D=20retina=20=E5=B1=8F=E7=B3=8A=20-?=
 =?UTF-8?q?=20utils/group.ts=20=E5=8A=A0=20buildGroupAvatar=20=E4=B8=8E=20?=
 =?UTF-8?q?LRU=20=E7=BC=93=E5=AD=98=20facade=EF=BC=88=E4=B8=8A=E9=99=90=20?=
 =?UTF-8?q?200=EF=BC=89=EF=BC=9Butils/image.ts=20=E6=8A=BD=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=20loadImage=EF=BC=9Butils/user.ts=20=E6=8A=BD=20getAv?=
 =?UTF-8?q?atarText=20/=20getAvatarBgColor=20=E4=BE=9B=20UserAvatar=20?=
 =?UTF-8?q?=E4=B8=8E=E6=8B=BC=E5=9B=BE=E5=85=B1=E7=94=A8=20-=20GroupItem?=
 =?UTF-8?q?=20/=20GroupInfo=20/=20ConversationItem=20/=20ConversationPicke?=
 =?UTF-8?q?rPanel=20=E6=8C=89=E4=BC=9A=E8=AF=9D=E7=B1=BB=E5=9E=8B=E5=88=86?=
 =?UTF-8?q?=E6=94=AF=E6=8D=A2=E7=94=A8=20GroupAvatar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../im/home/components/group/GroupInfo.vue    |   6 +-
 .../im/home/components/group/GroupItem.vue    |   6 +-
 .../picker/ConversationPickerPanel.vue        |  26 ++
 .../im/home/components/user/UserAvatar.vue    |  33 +-
 .../conversation/ConversationItem.vue         |   9 +
 src/views/im/utils/group.ts                   | 299 ++++++++++++++++++
 src/views/im/utils/image.ts                   |  22 +-
 src/views/im/utils/user.ts                    |  33 ++
 8 files changed, 398 insertions(+), 36 deletions(-)

diff --git a/src/views/im/home/components/group/GroupInfo.vue b/src/views/im/home/components/group/GroupInfo.vue
index 2cf079ac1..522e5eb03 100644
--- a/src/views/im/home/components/group/GroupInfo.vue
+++ b/src/views/im/home/components/group/GroupInfo.vue
@@ -7,11 +7,11 @@
   -->
   <div class="flex justify-center">
     <div class="w-full max-w-[320px] flex flex-col gap-3 items-center">
-      <UserAvatar
+      <GroupAvatar
+        :group-id="group.id"
         :url="group.showImage || group.showImageThumb"
         :name="group.showGroupName || group.name"
         :size="72"
-        :clickable="false"
         :previewable="isMember"
       />
       <div
@@ -47,7 +47,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 
-import UserAvatar from '../user/UserAvatar.vue'
+import GroupAvatar from './GroupAvatar.vue'
 import GroupMemberGrid from './GroupMemberGrid.vue'
 import { useUserStore } from '@/store/modules/user'
 import { CommonStatusEnum } from '@/utils/constants'
diff --git a/src/views/im/home/components/group/GroupItem.vue b/src/views/im/home/components/group/GroupItem.vue
index 23a7403ae..fc5fe13fe 100644
--- a/src/views/im/home/components/group/GroupItem.vue
+++ b/src/views/im/home/components/group/GroupItem.vue
@@ -9,11 +9,11 @@
     :class="{ '!bg-[#d9ecff] dark:!bg-[var(--el-color-primary-light-8)]': active }"
     @click="$emit('click', group)"
   >
-    <UserAvatar
+    <GroupAvatar
+      :group-id="group.id"
       :url="group.showImage || group.showImageThumb"
       :name="group.showGroupName || group.name"
       :size="42"
-      :clickable="false"
     />
     <div class="flex flex-1 min-w-0">
       <!-- 单行展示群名；成员数仅在群详情面板展示，列表里不重复 -->
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts" setup>
-import UserAvatar from '../user/UserAvatar.vue'
+import GroupAvatar from './GroupAvatar.vue'
 import type { GroupLite } from '../../types'
 
 defineOptions({ name: 'ImGroupItem' })
diff --git a/src/views/im/home/components/picker/ConversationPickerPanel.vue b/src/views/im/home/components/picker/ConversationPickerPanel.vue
index 2c50d23ca..a90cac3f2 100644
--- a/src/views/im/home/components/picker/ConversationPickerPanel.vue
+++ b/src/views/im/home/components/picker/ConversationPickerPanel.vue
@@ -43,7 +43,15 @@
               @click="handleRecentTileClick(conversation)"
             >
               <div class="relative">
+                <GroupAvatar
+                  v-if="conversation.type === ImConversationType.GROUP"
+                  :group-id="conversation.targetId"
+                  :url="conversation.avatar"
+                  :name="conversation.name"
+                  :size="36"
+                />
                 <UserAvatar
+                  v-else
                   :url="conversation.avatar"
                   :name="conversation.name"
                   :size="36"
@@ -124,7 +132,15 @@
               color="#fff"
             />
           </span>
+          <GroupAvatar
+            v-if="conversation.type === ImConversationType.GROUP"
+            :group-id="conversation.targetId"
+            :url="conversation.avatar"
+            :name="conversation.name"
+            :size="32"
+          />
           <UserAvatar
+            v-else
             :url="conversation.avatar"
             :name="conversation.name"
             :size="32"
@@ -163,7 +179,15 @@
           :key="getConversationKey(conversation)"
           class="flex gap-2.5 items-center px-4 py-2"
         >
+          <GroupAvatar
+            v-if="conversation.type === ImConversationType.GROUP"
+            :group-id="conversation.targetId"
+            :url="conversation.avatar"
+            :name="conversation.name"
+            :size="32"
+          />
           <UserAvatar
+            v-else
             :url="conversation.avatar"
             :name="conversation.name"
             :size="32"
@@ -206,7 +230,9 @@ import Icon from '@/components/Icon/src/Icon.vue'
 import { useMessage } from '@/hooks/web/useMessage'
 
 import UserAvatar from '../user/UserAvatar.vue'
+import GroupAvatar from '../group/GroupAvatar.vue'
 import { filterConversationsByKeyword, getConversationKey } from '../../../utils/conversation'
+import { ImConversationType } from '../../../utils/constants'
 import type { Conversation } from '../../types'
 
 defineOptions({ name: 'ImConversationPickerPanel' })
diff --git a/src/views/im/home/components/user/UserAvatar.vue b/src/views/im/home/components/user/UserAvatar.vue
index 905da49f9..61b424b06 100644
--- a/src/views/im/home/components/user/UserAvatar.vue
+++ b/src/views/im/home/components/user/UserAvatar.vue
@@ -46,6 +46,7 @@ import { computed } from 'vue'
 
 import { useImUiStore } from '../../store/uiStore'
 import { ImFriendAddSource } from '../../../utils/constants'
+import { getAvatarBgColor, getAvatarText } from '../../../utils/user'
 import type { User } from '../../types'
 
 defineOptions({ name: 'ImUserAvatar', inheritAttrs: false })
@@ -90,35 +91,11 @@ const textStyle = computed(() => ({
   borderRadius: props.radius
 }))
 
-/** 色卡首字：中文取 1 个字；英文/拉丁取前 2 个字母（跳过数字、空格、符号） */
-const avatarText = computed(() => {
-  const trimmed = props.name?.trim()
-  if (!trimmed) {
-    return ''
-  }
-  const first = trimmed.charAt(0)
-  const code = first.charCodeAt(0)
-  if (code >= 0x4e00 && code <= 0x9fa5) {
-    return first
-  }
-  const letters = trimmed.match(/[A-Za-z]/g)
-  if (!letters || letters.length === 0) {
-    return first.toUpperCase()
-  }
-  return letters.slice(0, 2).join('').toUpperCase()
-})
+/** 色卡首字：中文取 1 个字、英文 / 拉丁取前 2 个字母 */
+const avatarText = computed(() => getAvatarText(props.name))
 
-const colors = ['#07C160', '#1A95FF', '#FA9D3B', '#9163E0', '#F76760', '#1ABC9C'] // 基于用户名哈希的色卡色，参考微信调色板
-const textColor = computed(() => {
-  if (!props.name) {
-    return '#909399'
-  }
-  let hash = 0
-  for (let i = 0; i < props.name.length; i++) {
-    hash += props.name.charCodeAt(i)
-  }
-  return colors[hash % colors.length]
-})
+/** 色卡底色：按昵称 charCode 哈希取调色板色 */
+const textColor = computed(() => getAvatarBgColor(props.name))
 
 /** 头像点击：previewable 走 el-image 预览不弹名片；否则按 user / id 任一入参打开名片 */
 function handleClick(e: MouseEvent) {
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 12edd6db0..eaa4ec630 100644
--- a/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
+++ b/src/views/im/home/pages/conversation/components/conversation/ConversationItem.vue
@@ -7,7 +7,15 @@
   >
     <!-- 头像 + 未读徽标；免打扰会话不显示徽标 -->
     <div class="relative">
+      <GroupAvatar
+        v-if="isGroup"
+        :group-id="conversation.targetId"
+        :url="conversation.avatar"
+        :name="conversation.name"
+        :size="40"
+      />
       <UserAvatar
+        v-else
         :url="conversation.avatar"
         :name="conversation.name"
         :size="40"
@@ -90,6 +98,7 @@ import { getSenderDisplayName } from '@/views/im/utils/user'
 import { buildRecallTip } from '@/views/im/utils/conversation'
 import type { Conversation } from '../../../../types'
 import UserAvatar from '../../../../components/user/UserAvatar.vue'
+import GroupAvatar from '../../../../components/group/GroupAvatar.vue'
 
 defineOptions({ name: 'ImConversationItem' })
 
diff --git a/src/views/im/utils/group.ts b/src/views/im/utils/group.ts
index 6d7f47b38..bff86b92b 100644
--- a/src/views/im/utils/group.ts
+++ b/src/views/im/utils/group.ts
@@ -1,4 +1,6 @@
 import type { FriendLite } from '../home/types'
+import { loadImage } from './image'
+import { getAvatarBgColor, getAvatarText } from './user'
 
 /** 默认群名生成：所选好友前 4 个名字拼接，超过补「等 N 人」；为空兜底「群聊」 */
 export function buildDefaultGroupName(members: FriendLite[]): string {
@@ -12,3 +14,300 @@ export function buildDefaultGroupName(members: FriendLite[]): string {
   }
   return head || '群聊'
 }
+
+/** 群头像单格的输入：头像 URL + 名字 ，至少给一个，二者都缺时走灰底空格 */
+export interface GroupAvatarMember {
+  /** 头像 URL；缺失或加载失败时按 name 画色卡 */
+  avatar?: string
+  /** 显示名（昵称 / 备注）；色卡文字 + 底色 hash 来源 */
+  name?: string
+}
+
+/** 群头像拼接的可选参数 */
+export interface BuildGroupAvatarOptions {
+  /** 输出画布边长（像素）；默认 64 */
+  targetSize?: number
+  /** 单格之间的间隔（像素）；默认 1 */
+  divider?: number
+  /** 画布底色；默认透明，让上下留白透出宿主容器底色 */
+  background?: string
+}
+
+/** 单格在画布上的位置 + 尺寸 */
+interface CellRect {
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+/** 单格的最终绘制内容 */
+type Cell =
+  | { kind: 'image'; img: HTMLImageElement }
+  | { kind: 'color'; text: string; bg: string }
+
+/**
+ * 把群成员头像拼成一张方形群头像 dataURL，按 1 ~ 9 张走九宫格变体布局
+ *
+ * - 仅取前 9 个成员
+ * - 单格 avatar 为空 / 加载失败：按 name 在 canvas 上画色卡兜底
+ * - 跨域要求图片源开启 CORS（img.crossOrigin = 'anonymous'）
+ */
+export async function buildGroupAvatar(
+  members: GroupAvatarMember[],
+  options: BuildGroupAvatarOptions = {}
+): Promise<string> {
+  const targetSize = options.targetSize ?? 64
+  const divider = options.divider ?? 1
+  const background = options.background
+
+  const top = members.slice(0, 9)
+  if (top.length === 0) {
+    return ''
+  }
+
+  const cells = await Promise.all(top.map((m) => resolveCell(m)))
+  const rects = computeCellRects(cells.length, targetSize, divider)
+
+  const canvas = document.createElement('canvas')
+  canvas.width = targetSize
+  canvas.height = targetSize
+  const ctx = canvas.getContext('2d')
+  if (!ctx) {
+    return ''
+  }
+  if (background) {
+    ctx.fillStyle = background
+    ctx.fillRect(0, 0, targetSize, targetSize)
+  }
+  cells.forEach((cell, idx) => {
+    const rect = rects[idx]
+    if (!rect) {
+      return
+    }
+    drawCell(ctx, rect, cell)
+  })
+  return canvas.toDataURL('image/png')
+}
+
+/** 群头像 dataURL 缓存上限：每条约 5 ~ 30KB，200 条软封顶约 5MB 常驻 */
+const MERGED_AVATAR_CACHE_MAX = 200
+const mergedAvatarCache = new Map<string, string>()
+
+/** 取群头像 dataURL 缓存；命中时按 LRU 提到末尾 */
+export function getCachedGroupAvatar(key: string): string | undefined {
+  const cached = mergedAvatarCache.get(key)
+  if (cached === undefined) {
+    return undefined
+  }
+  mergedAvatarCache.delete(key)
+  mergedAvatarCache.set(key, cached)
+  return cached
+}
+
+/** 写群头像 dataURL 缓存；超上限时丢弃最早一条（Map 迭代顺序 = 插入顺序，配合 get 的提升即 LRU） */
+export function setCachedGroupAvatar(key: string, value: string): void {
+  if (mergedAvatarCache.has(key)) {
+    mergedAvatarCache.delete(key)
+  } else if (mergedAvatarCache.size >= MERGED_AVATAR_CACHE_MAX) {
+    const oldest = mergedAvatarCache.keys().next().value
+    if (oldest !== undefined) {
+      mergedAvatarCache.delete(oldest)
+    }
+  }
+  mergedAvatarCache.set(key, value)
+}
+
+/** 单成员 → Cell：有 avatar 且加载成功走 image，否则走 color */
+async function resolveCell(member: GroupAvatarMember): Promise<Cell> {
+  if (member.avatar) {
+    const img = await loadImage(member.avatar)
+    if (img) {
+      return { kind: 'image', img }
+    }
+  }
+  return {
+    kind: 'color',
+    text: getAvatarText(member.name),
+    bg: getAvatarBgColor(member.name)
+  }
+}
+
+/** 把单个 Cell 画到 ctx 上指定格子里；image 走 cover 裁剪保比例，color 走 fillRect + 居中文字 */
+function drawCell(
+  ctx: CanvasRenderingContext2D,
+  rect: CellRect,
+  cell: Cell
+): void {
+  const { x, y, w, h } = rect
+  if (cell.kind === 'image') {
+    drawImageCover(ctx, cell.img, x, y, w, h)
+    return
+  }
+  ctx.fillStyle = cell.bg
+  ctx.fillRect(x, y, w, h)
+  if (!cell.text) {
+    return
+  }
+  // 字号按短边算；单字 0.42、双字 0.34
+  const baseSize = Math.min(w, h)
+  const fontSize = Math.floor(baseSize * (cell.text.length > 1 ? 0.34 : 0.42))
+  ctx.fillStyle = '#FFFFFF'
+  ctx.font = `500 ${fontSize}px -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif`
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(cell.text, x + w / 2, y + h / 2)
+}
+
+/** cover 裁剪：从源图中心裁出与目标矩形同比例的子区域，画到目标矩形（保持比例不变形） */
+function drawImageCover(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  dx: number,
+  dy: number,
+  dw: number,
+  dh: number
+): void {
+  const srcAspect = img.width / img.height
+  const dstAspect = dw / dh
+  let sx = 0
+  let sy = 0
+  let sw = img.width
+  let sh = img.height
+  if (srcAspect > dstAspect) {
+    sw = sh * dstAspect
+    sx = (img.width - sw) / 2
+  } else if (srcAspect < dstAspect) {
+    sh = sw / dstAspect
+    sy = (img.height - sh) / 2
+  }
+  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
+}
+
+/**
+ * 按张数计算每格的位置 + 尺寸
+ *
+ * - 1 张：占满画布
+ * - 2~4 张：2 列 2 行正方形单格
+ * - 5~6 张：3 列 2 行正方形单格 + 垂直居中
+ * - 7~9 张：3 列 3 行正方形单格
+ */
+function computeCellRects(count: number, target: number, divider: number): CellRect[] {
+  if (count <= 0) {
+    return []
+  }
+  if (count === 1) {
+    return [{ x: 0, y: 0, w: target, h: target }]
+  }
+  if (count <= 4) {
+    return computeCellRectsSmall(count, target, divider)
+  }
+  if (count <= 6) {
+    return computeCellRectsMedium(count, target, divider)
+  }
+  return computeCellRectsLarge(count, target, divider)
+}
+
+/** 2~4 张：2 列 2 行正方形 */
+function computeCellRectsSmall(count: number, target: number, divider: number): CellRect[] {
+  const s = (target - 3 * divider) / 2
+  const step = s + divider
+  const rects: CellRect[] = []
+  switch (count) {
+    case 2: {
+      // 居中 1 行（留上下空白）
+      const y = target / 4
+      rects.push({ x: divider, y, w: s, h: s })
+      rects.push({ x: divider + step, y, w: s, h: s })
+      break
+    }
+    case 3: {
+      // 上 1 居中 + 下 2
+      rects.push({ x: target / 4, y: divider, w: s, h: s })
+      const y1 = divider + step
+      rects.push({ x: divider, y: y1, w: s, h: s })
+      rects.push({ x: divider + step, y: y1, w: s, h: s })
+      break
+    }
+    case 4: {
+      // 2×2 满铺
+      rects.push({ x: divider, y: divider, w: s, h: s })
+      rects.push({ x: divider + step, y: divider, w: s, h: s })
+      const y1 = divider + step
+      rects.push({ x: divider, y: y1, w: s, h: s })
+      rects.push({ x: divider + step, y: y1, w: s, h: s })
+      break
+    }
+  }
+  return rects
+}
+
+/** 5~6 张：3 列 2 行正方形单格 + 垂直居中；上下留白由透明背景透出 GroupAvatar 容器底色 */
+function computeCellRectsMedium(count: number, target: number, divider: number): CellRect[] {
+  const s = (target - 4 * divider) / 3
+  const step = s + divider
+  const xs = [divider, divider + step, divider + 2 * step]
+  // 2 行高 + 1 行间 div
+  const totalH = 2 * s + divider
+  const y0 = (target - totalH) / 2
+  const y1 = y0 + step
+  const rects: CellRect[] = []
+  if (count === 5) {
+    // 上 2 居中（左右对称留白） + 下 3 左右贴边
+    const upX0 = (target - 2 * s - divider) / 2
+    rects.push({ x: upX0, y: y0, w: s, h: s })
+    rects.push({ x: upX0 + step, y: y0, w: s, h: s })
+    rects.push({ x: xs[0], y: y1, w: s, h: s })
+    rects.push({ x: xs[1], y: y1, w: s, h: s })
+    rects.push({ x: xs[2], y: y1, w: s, h: s })
+    return rects
+  }
+  // count === 6：上 3 + 下 3 满铺
+  rects.push({ x: xs[0], y: y0, w: s, h: s })
+  rects.push({ x: xs[1], y: y0, w: s, h: s })
+  rects.push({ x: xs[2], y: y0, w: s, h: s })
+  rects.push({ x: xs[0], y: y1, w: s, h: s })
+  rects.push({ x: xs[1], y: y1, w: s, h: s })
+  rects.push({ x: xs[2], y: y1, w: s, h: s })
+  return rects
+}
+
+/** 7~9 张：3 列 3 行正方形单格 */
+function computeCellRectsLarge(count: number, target: number, divider: number): CellRect[] {
+  const s = (target - 4 * divider) / 3
+  const step = s + divider
+  const xs = [divider, divider + step, divider + 2 * step]
+  const ys = [divider, divider + step, divider + 2 * step]
+  const rects: CellRect[] = []
+  if (count === 7) {
+    // 上 1 居中 + 中 3 + 下 3
+    rects.push({ x: xs[1], y: ys[0], w: s, h: s })
+    rects.push({ x: xs[0], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[1], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[2], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[0], y: ys[2], w: s, h: s })
+    rects.push({ x: xs[1], y: ys[2], w: s, h: s })
+    rects.push({ x: xs[2], y: ys[2], w: s, h: s })
+    return rects
+  }
+  if (count === 8) {
+    // 上 2 居中 + 中 3 + 下 3
+    const upX0 = (target - 2 * s - divider) / 2
+    rects.push({ x: upX0, y: ys[0], w: s, h: s })
+    rects.push({ x: upX0 + step, y: ys[0], w: s, h: s })
+    rects.push({ x: xs[0], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[1], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[2], y: ys[1], w: s, h: s })
+    rects.push({ x: xs[0], y: ys[2], w: s, h: s })
+    rects.push({ x: xs[1], y: ys[2], w: s, h: s })
+    rects.push({ x: xs[2], y: ys[2], w: s, h: s })
+    return rects
+  }
+  // count === 9：3×3 满铺
+  for (let row = 0; row < 3; row++) {
+    for (let col = 0; col < 3; col++) {
+      rects.push({ x: xs[col], y: ys[row], w: s, h: s })
+    }
+  }
+  return rects
+}
diff --git a/src/views/im/utils/image.ts b/src/views/im/utils/image.ts
index b30a6331e..992114440 100644
--- a/src/views/im/utils/image.ts
+++ b/src/views/im/utils/image.ts
@@ -1,12 +1,30 @@
 // ====================================================================
-// IM 图片探针 utility
+// IM 图片工具
 // ====================================================================
-// 加载本地 File 或远程 URL，读出 naturalWidth / naturalHeight
+// - probeImageSize：加载本地 File 或远程 URL，读出 naturalWidth / naturalHeight
+// - loadImage：加载远程 URL 到 HTMLImageElement（失败返回 null，不抛错），供 canvas 绘制使用
 // ====================================================================
 
 /** 默认占位尺寸：probe 失败 / 解码异常时兜底，避免 width/height 为 0 让消息渲染塌掉 */
 const DEFAULT_FALLBACK_SIZE = { width: 200, height: 200 } as const
 
+/** 加载远程 URL 到 HTMLImageElement，失败返回 null；canvas 绘制要求 crossOrigin=anonymous（默认开） */
+export function loadImage(
+  src: string,
+  options: { crossOrigin?: 'anonymous' | 'use-credentials' | null } = {}
+): Promise<HTMLImageElement | null> {
+  const crossOrigin = options.crossOrigin === undefined ? 'anonymous' : options.crossOrigin
+  return new Promise((resolve) => {
+    const img = new Image()
+    if (crossOrigin) {
+      img.crossOrigin = crossOrigin
+    }
+    img.onload = () => resolve(img)
+    img.onerror = () => resolve(null)
+    img.src = src
+  })
+}
+
 /**
  * 加载本地 File 或远程 URL，解出 naturalWidth / naturalHeight
  *
diff --git a/src/views/im/utils/user.ts b/src/views/im/utils/user.ts
index b20f986bf..5d76335a6 100644
--- a/src/views/im/utils/user.ts
+++ b/src/views/im/utils/user.ts
@@ -499,3 +499,36 @@ export function getGenderColor(sex?: number): string {
   }
   return ''
 }
+
+/** 头像色卡底色调色板（参考微信） */
+const AVATAR_BG_COLORS = ['#07C160', '#1A95FF', '#FA9D3B', '#9163E0', '#F76760', '#1ABC9C']
+
+/** 头像色卡文字：中文取首字、英文取前 2 字母大写、其他取首字大写、空名返回空串 */
+export function getAvatarText(name?: string): string {
+  const trimmed = name?.trim()
+  if (!trimmed) {
+    return ''
+  }
+  const first = trimmed.charAt(0)
+  const code = first.charCodeAt(0)
+  if (code >= 0x4e00 && code <= 0x9fa5) {
+    return first
+  }
+  const letters = trimmed.match(/[A-Za-z]/g)
+  if (!letters || letters.length === 0) {
+    return first.toUpperCase()
+  }
+  return letters.slice(0, 2).join('').toUpperCase()
+}
+
+/** 头像色卡底色：按 name charCode 之和取调色板色，空名走默认灰 */
+export function getAvatarBgColor(name?: string): string {
+  if (!name) {
+    return '#909399'
+  }
+  let hash = 0
+  for (let i = 0; i < name.length; i++) {
+    hash += name.charCodeAt(i)
+  }
+  return AVATAR_BG_COLORS[hash % AVATAR_BG_COLORS.length]
+}