修复群聊头像透明背景

src/client/components/common/AgentAvatar.vue

@@ -12,7 +12,12 @@ const hasAvatar = computed(() => /^data:image\/(png|jpeg|webp);base64,/i.test(pr
 </script>
 
 <template>
-  <span class="agent-avatar" :style="{ width: `${size}px`, height: `${size}px` }" :aria-label="`${name} 的头像`">
+  <span
+    class="agent-avatar"
+    :class="{ 'agent-avatar--image': hasAvatar }"
+    :style="{ width: `${size}px`, height: `${size}px` }"
+    :aria-label="`${name} 的头像`"
+  >
     <img v-if="hasAvatar" :src="avatar" alt="" />
     <span v-else>{{ initials }}</span>
   </span>
@@ -20,5 +25,6 @@ const hasAvatar = computed(() => /^data:image\/(png|jpeg|webp);base64,/i.test(pr
 
 <style scoped>
 .agent-avatar { display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: calc(v-bind(size) * .36); font-weight: 700; line-height: 1; }
+.agent-avatar.agent-avatar--image { background: transparent; }
 .agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
 </style>

tests/client/agentAvatar.test.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import AgentAvatar from '@/components/common/AgentAvatar.vue'
+import MessageTimeline from '@/components/messages/MessageTimeline.vue'
+
+const transparentPng = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII='
+
+describe('AgentAvatar', () => {
+  it('marks real images so caller backgrounds cannot show through transparent pixels', () => {
+    const wrapper = mount(AgentAvatar, { props: { name: '丫头', avatar: transparentPng } })
+
+    expect(wrapper.classes()).toContain('agent-avatar--image')
+    expect(wrapper.find('img').attributes('src')).toBe(transparentPng)
+  })
+
+  it('keeps the caller background available for the text fallback', () => {
+    const wrapper = mount(AgentAvatar, { props: { name: '丫头' } })
+
+    expect(wrapper.classes()).not.toContain('agent-avatar--image')
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.text()).toBe('丫')
+  })
+
+  it('keeps a group-message image transparent when MessageTimeline adds its fallback class', () => {
+    const wrapper = mount(MessageTimeline, {
+      attachTo: document.body,
+      props: {
+        messages: [{ id: 'assistant-1', role: 'assistant', profile: 'default', author: '丫头', content: '收到，测试正常。' }],
+        agentAvatars: { default: transparentPng },
+      },
+    })
+    const avatar = wrapper.get('.message__avatar')
+
+    expect(avatar.classes()).toEqual(expect.arrayContaining(['agent-avatar--image', 'message__avatar']))
+    expect(getComputedStyle(avatar.element).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    wrapper.unmount()
+  })
+})