## 23 · 头像 Avatar

### 23.1 用途
用一张图或一两个字符代表一个主体（用户、企业、群组）；移动端列表与详情页里大量出现，必须能单手扫读，因此尺寸只有三档、形状只有两种，且图片不可用时必须立刻退回文字，不能出现裂图。

### 23.2 结构（anatomy）
- `avatar`：根元素，正方形圆角容器，尺寸由 size 决定
- `image`：图片，铺满容器并按形状裁切
- `text`：文字内容（姓名首字或简称），图片缺失时它就是主体
- `fallback`：兜底节点，图片加载失败后退回的形状（文字或图标）
- `badge`：可选右下角角标位，挂在线状态或未读数

### 23.3 变体维度
- `size`：`small`（32px）/ `default`（40px）/ `large`（56px）
- `shape`：`circle`（圆形，用于人）/ `square`（圆角方形，用于企业或群组）
- `type`：`text`（文字头像）/ `image`（图片头像，失败退文字）

### 23.4 状态
- default：常态
- fallback：图片加载失败，退回文字或图标
- disabled：置灰（如成员已离职）

### 23.5 交互与触控
- 头像本身不是按钮；可点时必须由宿主包一层原生 `button` 或 `a`，热区不小于 44×44
- 图片 `alt` 或根节点 `aria-label` 必填其一，读屏读「姓名 + 头像」
- 图片加载失败只触发一次 `error` 事件，是否替换资源由宿主决定

### 23.6 无障碍
- 文字头像根节点 `role="img"` 并带 `aria-label`（内容为姓名）
- 图片头像直接用 `<img alt>`，`alt` 为空时视为装饰并对读屏隐藏
- 角标不改变头像的可访问名

### 23.7 doNotInvent
- 图片裁剪的 focal point（人脸居中）算法
- 角标位置随形状（圆 / 方）的微调规则

### 23.8 unknowns
- 文字头像的底色是否按名字散列取多色
- 姓名超过两个汉字时的截断规则

---