前端名称头像组件
组件说明
NameAvatar 是一个名称头像组件，当用户未上传头像时，自动取用户姓名的后两个字符生成带背景色的圆形头像作为占位显示。同时也支持传入图片地址直接展示头像图片。
基础用法
<NameAvatar :name="用户姓名" />
组件默认尺寸为 40px，圆形样式，白色文字 + 蓝色背景。
自定义尺寸
通过 size 属性控制头像大小，字体会按比例自动缩放。
<!-- 小尺寸：用于导航栏 -->
<NameAvatar :name="用户姓名" :size="25" />
<!-- 中尺寸：用于卡片展示 -->
<NameAvatar :name="用户姓名" :size="64" />
<!-- 大尺寸：用于个人主页 -->
<NameAvatar :name="用户姓名" :size="180" />
配合头像图片使用
当用户头像可能为空时，配合 v-if / v-else 实现自动降级显示：
<img v-if="userData.avatar" :src="baseURL + userData.avatar" class="w-16 h-16 rounded-full" />
<NameAvatar v-else :name="userData.name || userData.username" :size="64" />
显示图片头像
通过 faceUrl 属性直接传入图片地址，组件会优先显示图片：
<NameAvatar :face-url="avatarUrl" :name="用户姓名" :size="40" />
💡降级策略
当 faceUrl 有值时优先显示图片，faceUrl 为空时自动显示名称文字头像，无需额外判断逻辑。
属性说明
| 属性名称 | 描述 | 类型 | 默认值 |
|---|
| name | 用户名称，取后两个字符显示 | string (非必传) | - |
| faceUrl | 头像图片地址 | string (非必传) | - |
| size | 头像尺寸，单位 px | number (非必传) | 40 |
组件位置
src/components/NameAvatar/index.vue
⚠非全局注册
NameAvatar 组件未在全局注册，使用时需要手动导入：
import NameAvatar from '/@/components/NameAvatar/index.vue';