chat-pc/src/components/avatar-module/index.vue

<template>
<div class="relative">
  <div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
    <img :src="avatar" v-if="avatar" />
    <span v-else :style="customTextStyle">{{ text_avatar }}</span>
  </div>
  <div 
    v-if="[2,3,4].includes(groupType)&&showGroupType" 
    class="absolute border-2px border-solid rounded-3px bg-#fff flex justify-center items-center leading-none" 
    :style="[
      groupLabelStyle,
      `color:${labelColor.find(x=>x.group_type===groupType)?.color};border-color:${labelColor.find(x=>x.group_type===groupType)?.color}`
    ]"
  >
    {{ labelColor.find(x=>x.group_type===groupType)?.label }}
  </div>
</div>
</template>
<script setup>
//群聊默认头像
import groupNormal from '@/assets/image/groupNormal.png'
import groupDepartment from '@/assets/image/groupDepartment.png'
import groupProject from '@/assets/image/groupProject.png'
import groupCompany from '@/assets/image/groupCompany.png'
import { computed, defineProps } from 'vue'
//群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
const labelColor=[
  {group_type:2,color:'#377EC6',label:'部门'},
  {group_type:3,color:'#C1691C',label:'项目'},
  {group_type:4,color:'#7A58DE',label:'公司'},
]
const props = defineProps({
  mode: {
    //模式：1=人；2=群
    type: Number,
    default: 0,
  },
  showGroupType:{
    type:Boolean,
    default:false
  },
  avatar: {
    //头像
    type: String,
    default: '',
  },
  userName: {
    //用户名称
    type: String,
    default: '',
  },
  groupType: {
    //群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
    type: Number,
    default: 0,
  },
  customStyle: {
    //自定义样式
    type: Object,
    default() {
      return {}
    },
  },
  customTextStyle: {
    //自定义文字样式
    type: Object,
    default() {
      return {}
    },
  },
})

//头像
const avatar = computed(() => {
  let avatar_img = props?.avatar
  if (!avatar_img) {
    if (props?.mode === 1) {
    } else if (props?.mode === 2) {
      if (props?.groupType === 1) {
        avatar_img = groupNormal
      } else if (props?.groupType === 2) {
        avatar_img = groupDepartment
      } else if (props?.groupType === 3) {
        avatar_img = groupProject
      } else if (props?.groupType === 4) {
        avatar_img = groupCompany
      }
    }
  }
  return avatar_img
})

//文字头像
const text_avatar = computed(() => {
  return props?.userName.length >= 2
    ? props?.userName.slice(-2)
    : props?.userName
})

// 计算群标签的动态样式
const groupLabelStyle = computed(() => {
  // 获取头像的宽高
  const avatarWidth = parseInt(props.customStyle.width) || 42
  const avatarHeight = parseInt(props.customStyle.height) || 42
  
  // 计算标签的尺寸比例（基于原始尺寸：头像42px，标签宽32px高18px，文字10px）
  const widthRatio = avatarWidth / 42
  const heightRatio = avatarHeight / 42
  
  // 计算标签的尺寸
  const labelWidth = Math.round(32 * widthRatio)
  const labelHeight = Math.round(18 * heightRatio)
  const fontSize = Math.round(10 * widthRatio)
  
  // 计算标签的位置（基于原始位置：top-28px）
  const topPosition = Math.round(28 * heightRatio)
  
  return {
    width: `${labelWidth}px`,
    height: `${labelHeight}px`,
    fontSize: `${fontSize}px`,
    top: `${topPosition}px`,
    left: '50%',
    transform: 'translateX(-50%)'
  }
})
</script>
<style lang="less" scoped>
.avatar-module {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #674bbc, #46299d);
  flex-shrink: 0;
  img {
    width: 42px;
    height: 42px;
    object-fit: cover;
  }
}
</style>