🎨 4 个 variant
Variant 1 · 字母占位（无图片时 fallback）
A
JD
B
U
Variant 2 · 图片（真实头像）
Variant 3 · 状态点（在线 / 离线 / 忙碌）
JD
Variant 4 · 头像组（多人参与）
+5
📐 Spec Details
圆角
50%（圆）
尺寸
24 / 32 / 40 / 56 / 80 px
字母 fallback
首字母（自动取用户名前 1-2 字）
默认背景色
--yellow-500（品牌主色）
字号
尺寸 × 0.36（自适应）
字重
600（Semi Bold）
状态点
右下 25% · 2px 白边
状态点色
绿/灰/红（在线/离线/忙碌）
头像组重叠
-8px margin-left + 2px 白边
🎯 使用规则
- 图片 fallback：无图片时显示字母（首字母 · 品牌主色背景）
- 尺寸选择：评论/列表=32 · 个人资料=56 · 大头像=80 · 内联=24
- 状态点：实时系统（聊天 / 协作）才需要，普通页面不加
- 头像组：协作者 / 团队成员 / 多人头像 · 最多显示 3-4 个 + "N+" 提示
- 占位符：用户未上传头像时 fallback 到首字母
- ARIA：加
alt描述用户名 - 不要：跨用户混用不同尺寸（同一区域尺寸应一致）