From 46b06b0444f66e7d6bc532c259acc5c625f6e16b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 8 May 2026 18:28:02 +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/GroupAvatar.vue  | 128 ++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/views/im/home/components/group/GroupAvatar.vue

diff --git a/src/views/im/home/components/group/GroupAvatar.vue b/src/views/im/home/components/group/GroupAvatar.vue
new file mode 100644
index 000000000..85eb025c9
--- /dev/null
+++ b/src/views/im/home/components/group/GroupAvatar.vue
@@ -0,0 +1,128 @@
+<template>
+  <!-- url 非空走原图；url 空时取前 9 个成员头像拼九宫格 dataURL，成员未在 store 缓存时走色卡兜底 -->
+  <UserAvatar
+    :url="finalUrl"
+    :name="name"
+    :size="size"
+    :radius="radius"
+    :clickable="clickable"
+    :previewable="previewable"
+    :preview-z-index="previewZIndex"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+
+import UserAvatar from '../user/UserAvatar.vue'
+import { useFriendStore } from '../../store/friendStore'
+import { useGroupStore } from '../../store/groupStore'
+import {
+  buildGroupAvatar,
+  getCachedGroupAvatar,
+  setCachedGroupAvatar
+} from '../../../utils/group'
+import { getMemberDisplayName } from '../../../utils/user'
+import type { GroupMember } from '../../types'
+
+defineOptions({ name: 'ImGroupAvatar' })
+
+const props = withDefaults(
+  defineProps<{
+    groupId: number // 群编号；用于查 store 拿成员头像
+    url?: string // 服务端已设置的群头像 URL；非空则直接用，不拼图
+    name?: string // 群名；色卡兜底文字
+    size?: number // 尺寸（px），正方形
+    radius?: string // 圆角，CSS 长度
+    clickable?: boolean // 是否可点击（默认 false，列表里仅展示）
+    previewable?: boolean // 是否点头像直接放大预览（群详情大头像位用）
+    previewZIndex?: number // 预览层 z-index
+  }>(),
+  {
+    size: 42,
+    radius: '15%',
+    clickable: false,
+    previewable: false,
+    previewZIndex: 2000
+  }
+)
+
+const friendStore = useFriendStore()
+const groupStore = useGroupStore()
+const mergedUrl = ref('')
+// 竞态保护：丢弃过期 await 结果
+let mergeToken = 0
+
+/** 按容器 size × DPR 算 canvas 实际像素，避免 2x / 3x retina 屏拼图糊；DPR 封顶 3 防止超高分辨率画布过大 */
+function getTargetSize(size: number): number {
+  const dpr = Math.min(window.devicePixelRatio || 1, 3)
+  return Math.max(Math.round(size * dpr), 64)
+}
+
+/** store 里整群成员是否「完整加载」过；只在为 true 时才拼图，避免列表场景批量发接口 */
+const loadedMembers = computed<GroupMember[] | null>(() => {
+  const g = groupStore.getGroup(props.groupId)
+  if (!g?.membersLoaded || !g.members) {
+    return null
+  }
+  return g.members
+})
+
+/** 前 9 个成员的拼图入参；name 走 getMemberDisplayName 口径（好友备注 > 群昵称 > 真实昵称） */
+const memberItems = computed(() => {
+  const members = loadedMembers.value
+  if (!members) {
+    return []
+  }
+  return members.slice(0, 9).map((m) => ({
+    avatar: m.avatar || '',
+    name: getMemberDisplayName(m, friendStore.getFriend(m.userId))
+  }))
+})
+
+/** 成员快照签名：拼 (avatar, name) 字段，原地修改任一字段都会让 watch 重算 */
+const memberSignature = computed(() =>
+  memberItems.value.map((it) => `${it.avatar}#${it.name}`).join('|')
+)
+
+/** 走 buildGroupAvatar 拼图并写回 mergedUrl；mergeToken 校验避免老 await 覆盖新结果 */
+async function applyMerge(key: string, targetSize: number): Promise<void> {
+  const myToken = ++mergeToken
+  const cached = getCachedGroupAvatar(key)
+  if (cached) {
+    mergedUrl.value = cached
+    return
+  }
+  const dataUrl = await buildGroupAvatar(memberItems.value, { targetSize })
+  if (myToken !== mergeToken) {
+    return
+  }
+  if (dataUrl) {
+    setCachedGroupAvatar(key, dataUrl)
+  }
+  mergedUrl.value = dataUrl
+}
+
+watch(
+  () => [props.url, props.groupId, props.size, memberSignature.value] as const,
+  ([url, groupId, size, signature]) => {
+    if (url) {
+      mergedUrl.value = ''
+      return
+    }
+    if (!signature) {
+      mergeToken++
+      mergedUrl.value = ''
+      groupStore.loadGroupMembers(groupId)
+      return
+    }
+    const targetSize = getTargetSize(size)
+    const key = `${groupId}:${targetSize}:${signature}`
+    applyMerge(key, targetSize)
+  },
+  { immediate: true }
+)
+
+/** 最终展示 url：服务端 url 优先 → 拼图 → 空字符串（让 UserAvatar 走色卡） */
+const finalUrl = computed(() => props.url || mergedUrl.value)
+</script>