组件：头像框
头像组件，支持图片、文本、图标三种展示方式，支持圆形/方形。
典型使用场景：
- 用户头像（个人资料页、评论系统、用户列表）
- 团队成员（团队介绍、组织架构、协作平台）
- 产品图标（应用图标、功能图标、品牌标识）
- 评论头像（评论列表、论坛帖子、社交媒体）
- 群组头像（群组列表、聊天界面、社区头像）
📌 继承自视图的成员速查
本组件继承自 视图 类，可直接使用以下属性和方法：
属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用
方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)
事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)
💡 完整成员列表及详细说明请参考：
视图类
常用操作速查
| 操作 | 属性/方法 | 示例 |
|---|---|---|
| 设置头像尺寸 | 尺寸 | 头像框1.尺寸 = 48 |
| 设置头像形状 | 形状 | 头像框1.形状 = "circle" |
| 设置图片头像 | 图片 | 头像框1.图片 = "static/user.jpg" |
| 设置文本头像 | 文本 | 头像框1.文本 = "张" |
| 设置图标头像 | 图标 | 头像框1.图标 = "user" |
| 设置背景颜色 | 背景颜色 | 头像框1.背景颜色 = "#1890ff" |
| 设置文本颜色 | 文本颜色 | 头像框1.文本颜色 = "#ffffff" |
| 设置头像点击回调 | 置被单击回调(回调) | 头像框1.置被单击回调((源对象, 事件对象) => { ... }) |
样式美化参考
头像样式变体：
- 圆形头像：
形状 = "circle"，边框圆角 = "50%"，边框 = "2px solid #d9d9d9" - 方形头像：
形状 = "square"，边框圆角 = "4px"，边框 = "1px solid #e8e8e8" - 圆角头像：
形状 = "rounded"，边框圆角 = "8px"，边框 = "1px solid #e8e8e8"
尺寸样式：
- 小尺寸头像：
尺寸 = 32，宽度 = 32，高度 = 32，字体大小 = "14px" - 中尺寸头像：
尺寸 = 48，宽度 = 48，高度 = 48，字体大小 = "18px" - 大尺寸头像：
尺寸 = 64，宽度 = 64，高度 = 64，字体大小 = "24px" - 超大尺寸头像：
尺寸 = 80，宽度 = 80，高度 = 80，字体大小 = "32px"
类型样式：
- 图片头像：
图片 = "static/user.jpg"，背景颜色 = "#ffffff"，边框 = "none" - 文字头像：
文本 = "张"，背景颜色 = "#1890ff"，文本颜色 = "#ffffff"，字体粗细 = "粗体" - 图标头像：
图标 = "user"，背景颜色 = "#52c41a"，文本颜色 = "#ffffff"，字体大小 = "24px"
状态样式：
- 正常状态：
边框 = "1px solid #d9d9d9"，背景颜色 = "#ffffff"，光标样式 = "pointer" - 悬停状态：
边框 = "2px solid #1890ff"，背景颜色 = "#f0f7ff"，光标样式 = "pointer" - 选中状态：
边框 = "2px solid #1890ff"，背景颜色 = "#e6f7ff"，光标样式 = "pointer" - 禁用状态：
边框 = "1px solid #d9d9d9"，背景颜色 = "#f5f5f5"，透明度 = "0.6"，光标样式 = "not-allowed"
特殊样式：
- 渐变背景：
背景颜色 = "linear-gradient(135deg, #1890ff, #096dd9)"，边框 = "none" - 阴影效果：
阴影 = "0 2px 8px rgba(0,0,0,0.15)"，边框 = "none"，边框圆角 = "50%" - 状态徽章：
徽章 = "在线"，徽章位置 = "右上角"，徽章颜色 = "#52c41a" - 悬浮效果：
悬浮缩放 = 1.1，过渡时间 = "0.2s"，边框 = "2px solid #1890ff"
响应式样式：
- 移动端适配：
尺寸 = 40，宽度 = 40，高度 = 40，字体大小 = "16px" - 桌面端适配：
尺寸 = 48，宽度 = 48，高度 = 48，字体大小 = "18px" - 大屏适配：
尺寸 = 64，宽度 = 64，高度 = 64，字体大小 = "24px"
示例代码
' 示例：完整的头像框使用演示
' 1. 创建头像框
变量 头像框1 = 创建 头像框()
' 2. 设置属性
头像框1.左边 = 100
头像框1.顶边 = 100
头像框1.尺寸 = 48
头像框1.形状 = "circle"
头像框1.图片地址 = "https://example.com/a.jpg"
头像框1.文本 = "A"
' 3. 设置事件回调
头像框1.置头像加载失败回调((源对象) => {
调试输出("图片加载失败，已回退到文本")
})
' 4. 添加到父容器
添加组件(头像框1)
属性：尺寸
- 类型：
数值型 - 说明： 设置或获取头像宽高像素。
属性：形状
- 类型：
文本型 - 说明： 设置或获取形状：circle(圆形) / square(方形)。
属性：图片地址
- 类型：
文本型 - 说明： 设置或获取头像图片 URL，空则展示文本或图标。
属性：文本
- 类型：
文本型 - 说明： 设置或获取文本内容（图片加载失败时展示）。
属性：图标
- 类型：
文本型 - 说明： 设置或获取图标字符（文本为空时使用）。
属性：背景颜色
- 类型：
文本型 - 说明： 设置或获取无图片时的背景色。
函数：置头像加载失败回调(回调函数)
设置图片加载失败时的回调函数，回调函数返回一个参数：(源对象)。
事件：头像加载失败(源对象)
当头像加载失败时触发该事件。