# Avatar 组件文档

## 概述

Avatar 组件用于显示用户头像和状态，支持多种形状和大小的头像展示。它可以用于聊天应用、社交平台、用户管理系统等场景，提供用户身份的可视化表示。

## Props 速查表

| 字段 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| src | string | undefined | 头像图片的 URL |
| size | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number | 'md' | 头像的大小，支持多种预设大小或自定义大小 |
| shape | 'circular' | 'square' | 'rounded' | 'circular' | 头像的形状，支持圆形、方形和圆角矩形 |
| alt | string | '' | 图片的替代文本，用于生成文本头像 |
| children | ReactNode | undefined | 自定义内容，优先于 src 和 alt 的内容 |
| className | string | undefined | 自定义 CSS 类名 |
| style | React.CSSProperties | undefined | 自定义样式 |
| onClick | () => void | undefined | 点击事件处理函数 |
| isShowOnlineStatus | boolean | false | 是否显示在线状态指示器 |
| isOnline | boolean | false | 用户是否在线 |
| unreadCount | number | 0 | 未读消息数量，若为 true 则显示小红点，若为数字则显示具体数量 |
| maxUnreadCount | number | 99 | 最大未读消息数量，超过则显示 +N |
| isDotUnreadCount | boolean | false | 是否显示小红点 |
| children | ReactNode | undefined | 自定义内容，优先于 src 和 alt 的内容 |

## Props 详细介绍

### `src`

`类型`: `string`
`描述`: 头像图片的 URL，若未提供则显示默认头像。
`默认值`: `undefined`

### `size`

`类型`: `'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | number`
`描述`: 头像的大小，支持多种预设大小或自定义大小。
`默认值`: `'md'`

### `shape`

`类型`: `'circular' | 'square' | 'rounded'`
`描述`: 头像的形状，支持圆形、方形和圆角矩形。
`默认值`: `'circular'`

### `alt`

`类型`: `string`
`描述`: 图片的替代文本，用于生成文本头像。
`默认值`: `''`

### `children`

`类型`: `ReactNode`
`描述`: 自定义内容，优先于 src 和 alt 的内容。
`默认值`: `undefined`

### `className`

`类型`: `string | undefined`
`描述`: 自定义 CSS 类名。
`默认值`: `undefined`

### `style`

`类型`: `React.CSSProperties | undefined`
`描述`: 自定义样式。
`默认值`: `undefined`

### `onClick`

`类型`: `() => void`
`描述`: 点击事件处理函数。
`默认值`: `undefined`

### `isShowOnlineStatus`

`类型`: `boolean`
`描述`: 是否显示在线状态指示器。
`默认值`: `false`

### `isOnline`

`类型`: `boolean`
`描述`: 用户是否在线。
`默认值`: `false`

### `unreadCount`

`类型`: `number`
`描述`: 未读消息数量，若为 true 则显示小红点，若为数字则显示具体数量。
`默认值`: `0`

### `maxUnreadCount`

`类型`: `number`
`描述`: 最大未读消息数量，超过则显示 +N。
`默认值`: `99`

### isDotUnreadCount

`类型`: `boolean`
`描述`: 是否显示小红点。
`默认值`: `false`