Avatar 头像
头像用于在界面中展示个人、团队或品牌的缩略信息。Rue 版 Avatar 现在既支持src / icon / text / size / shape / onError这类语义 API，也展示基础基于 daisyUI 的自由组合方式。
组件补了什么
- 语义化头像：图片、图标、文字、颜色、尺寸、形状都能直接声明。
- 图片失败回退：默认回到 icon、text 或 children；返回 false 可阻止回退。
- Avatar.Group：支持数据驱动、默认 size/shape 和 max 溢出聚合。
- 依赖 children 自由拼装的写法仍然可用。
# 语义化基础头像
直接通过 src、icon、text、size 渲染头像，不再需要先手写内层容器。
JS
AI
# 图标、文字与颜色
文字头像会自动使用更适合阅读的字号，图标头像则保持更紧凑的视觉中心。
Rue
Dev
PM
# 自动缩放文字
gap 用来控制文字两侧留白，文本越长，Avatar 会收紧字号避免溢出。
U
Lucy
Edward
SYSTEM
# 图片失败回退
当图片地址失效时，会优先回退到 icon，再回退到 text 或 children。
AI
Rue# Avatar.Group 聚合与溢出
Group 可以直接消费 items 数组，并用 max 自动折叠超出的成员。
JS
+2
支持组合方式
下面这些示例 来自 Rue 之前的 Avatar 页面，保持了基础的 children 插槽写法，用来说明升级后仍然可以继续拼 daisyUI 原子类。
# Avatar
# Avatar in custom sizes
# Avatar rounded
# Avatar with mask
# Avatar group
# Avatar group 通过数据渲染（数组，组件内部）
+99
# Avatar group with counter
+99
# Avatar with ring
# Avatar with presence indicator
# Avatar placeholder
D
AI
SY
UI
API
Avatar 现在既能作为语义化组件使用，也能继续承载基础 children 插槽。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
alt | 图片头像的替代文本 | string | `Avatar` |
bodyClassName | 头像主体容器类名，适合加 ring 或 mask | string | - |
children | 文字、图标、fallback，或基础自定义内容插槽 | RenderOutput | - |
className | 头像根节点类名 | string | - |
color | 语义化背景色，主要作用于文字或图标头像 | `base` | `neutral` | `primary` | `secondary` | `accent` | `info` | `success` | `warning` | `error` | 根据场景自动决定 |
crossOrigin | 图片跨域属性 | `anonymous` | `use-credentials` | `` | - |
fit | 图片填充模式 | `cover` | `contain` | `cover` |
gap | 文字头像左右预留间距，用于自动缩放 | number | 4 |
icon | 图标头像内容；图片失败后也会优先回退到这里 | RenderOutput | - |
imgClassName | img 节点类名 | string | - |
onError | 图片加载失败回调；返回 false 可阻止默认回退 | (event: Event) => boolean | void | - |
shape | 头像形状 | `circle` | `square` | `circle` |
size | 头像尺寸，支持数字像素和语义尺寸别名 | number | `xs` | `sm` | `md` | `lg` | `xl` | `small` | `default` | `medium` | `middle` | `large` | `md` |
src | 图片地址或自定义媒体节点 | string | RenderOutput | - |
srcSet | 图片多分辨率资源集合 | string | - |
status | 在线、离线、占位三种状态标记 | `online` | `offline` | `placeholder` | - |
text | 显式指定文字头像内容 | string | - |
Avatar.Group
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 手写 Avatar 子节点，展示基础组合方式 | RenderOutput | - |
className | 群组容器类名 | string | - |
items | 数据驱动渲染头像列表，单项可复用 AvatarProps | AvatarGroupItem[] | - |
max | 最多显示多少个头像，超出后自动合并成 +N | number | { count?: number; placeholder?: RenderOutput; className?: string; bodyClassName?: string } | - |
shape | 为 items 模式和聚合头像提供默认形状 | `circle` | `square` | - |
size | 为 items 模式和聚合头像提供默认尺寸 | AvatarProps[`size`] | - |