头像

Avatar

UI 组件也叫：用户头像、头像框、Profile Picture、头像组

一句话：用圆形或圆角方形的小图片代表一个人或一个账号，没有图片时显示姓名首字或默认图标。

详细解释

头像是一个小尺寸的圆形或圆角方形图片，用来代表用户、团队成员或某个账号。它常出现在导航栏右上角、评论和消息列表的左侧、成员名单里。用户没有上传图片时，一般显示姓名的第一个字或默认人像图标，配上灰色或按名字生成的底色。

多个头像可以错开叠成一排，组成头像组，超出数量时显示「+5」这样的计数。头像右下角的小圆点表示在线状态，右上角的红色数字表示未读消息，这两者属于徽标的用法。

头像和普通图片的区别在于用途：头像只用来识别「这是谁」，尺寸小、统一裁成圆形；商品图、文章配图这类内容图片应该用图片组件展示。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

在导航栏右上角放一个 32px 的圆形用户头像，有头像图时裁剪居中显示，没有时显示姓名首字、浅灰底深灰字。头像右下角有一个 8px 小圆点表示在线状态，点击头像弹出下拉菜单，包含「个人中心」和「退出登录」。图片加载失败时自动回退为姓名首字。

由圆形或圆角方形的容器和其中的图片、姓名首字或默认图标组成，可附带在线状态点或徽标。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。