示例
直接操作示例，查看组件在具体任务中的状态与反馈。
尺寸和在线状态
林
MZ
MX
Monkeys Design 维护团队（离线）头像尺寸
团队成员
使用建议
身份文本优先于图片
始终提供 name 或 initials 作为稳定回退；图片加载失败时，用户仍能识别对象。
状态需要邻近解释
在线圆点适合快速扫视，但列表或详情中仍应以文本说明在线、忙碌或离线。
按信息密度选择尺寸
紧凑列表使用 sm，常规成员列表使用 md，身份卡片使用 lg，避免用尺寸表达权限。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseAvatar } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Avatar 不负责图片鉴权、裁剪和隐私策略；远程图片的可用性与合规性由宿主应用保证。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseAvatarProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
src?: string;
alt?: string;
name?: string;
initials?: ReactNode;
icon?: ReactNode;
status?: 'online' | 'busy' | 'offline' | 'neutral' | ReactNode;
size?: 'sm' | 'md' | 'lg';
appearance?: BaseAppearance;
className?: string;
classNames?: BaseAvatarClassNames;
style?: CSSProperties;
children?: ReactNode;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
src | 头像图片的资源地址。 | string | — |
alt | 头像图片无法显示时使用的替代文本。 | string | — |
name | 用于生成头像缩写和图片回退内容的名称。 | string | — |
initials | 头像缺少图片时显示的自定义缩写内容。 | ReactNode | — |
icon | 显示在主要内容旁的图标。 | ReactNode | — |
status | 头像旁显示的在线、忙碌、离线或自定义状态标记。 | 'online' | 'busy' | 'offline' | 'neutral' | ReactNode | — |
size | 组件使用的预设尺寸。 | 'sm' | 'md' | 'lg' | 'md' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseAvatarClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
children | 在 BaseAvatar 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |