三种头像样式（64px 标准尺寸）
三丰
姓名后两字
张
姓名首字
v1.1.0 · 圆形头像 · 图片/姓名后两字/姓名首字 · G05默认背景+白色描边 · 姓名头像DB60背景+白色文字 · 6种尺寸 24/32/40/48/56/64px
| 属性 | 规格 |
|---|---|
| 组件名称 | Avatar 头像 |
| 默认尺寸 | 64×64px（圆形） |
| 形状 | 圆形（border-radius: 50%） |
| 默认背景 | G05 #F5F7FA（图片头像占位背景） |
| 默认描边 | 白色 G0 #FFFFFF，2px solid |
| 姓名头像背景 | DB60 #3388FF |
| 姓名头像文字颜色 | 白色 G0 #FFFFFF |
| 姓名头像字重 | 500（Medium） |
| 样式一：图片头像 | 使用 img 标签，object-fit: cover 填满圆形区域 |
| 样式二：姓名后两字 | 取姓名最后两个字，如"张三丰"→"三丰"，"李四"→"李四" |
| 样式三：姓名首字 | 取姓名第一个字，如"张三"→"张" |
| 尺寸 24px | 24×24px，文字 10px |
| 尺寸 32px | 32×32px，文字 12px |
| 尺寸 40px | 40×40px，文字 14px |
| 尺寸 48px | 48×48px，文字 16px |
| 尺寸 56px | 56×56px，文字 18px |
| 尺寸 64px | 64×64px，文字 20px |
| 变量名 | 值 |
|---|---|
| --avatar-default-size | 64px |
| --avatar-default-bg | var(--G05) #F5F7FA |
| --avatar-default-border | 2px solid var(--G0) #FFFFFF |
| --avatar-text-bg | var(--DB60) #3388FF |
| --avatar-text-color | var(--G0) #FFFFFF |
| --avatar-font-weight | 500 |
| --avatar-radius | 50% |
| 类名 | 说明 |
|---|---|
| .avatar | 头像基础类，圆形 + G05背景 + 白色描边 |
| .avatar-img | 图片头像 img 标签，object-fit: cover |
| .avatar-text | 文字头像修饰类，叠加 DB60 背景 + 白色文字 |
| .avatar-24 | 24×24px，文字 10px |
| .avatar-32 | 32×32px，文字 12px |
| .avatar-40 | 40×40px，文字 14px |
| .avatar-48 | 48×48px，文字 16px |
| .avatar-56 | 56×56px，文字 18px |
| .avatar-64 | 64×64px，文字 20px |