组件：空状态面板

空状态面板组件用于在数据为空、无内容或操作失败时展示友好的提示界面，通常包含图标、描述文本和引导操作按钮。它有助于提升用户体验，让用户明确当前状态并知道下一步可以做什么。适用于列表为空、搜索无结果、购物车为空、错误提示等场景。

典型使用场景：

列表数据为空（无订单、无收藏、无消息）
搜索无结果（未找到匹配内容）
购物车为空（提示用户去逛逛）
操作失败或权限不足（提示无权限）
首页或模块的初始状态（引导用户开始使用）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置图标（emoji 或字符）	`图标`	`空状态面板1.图标 = "📭"`
设置描述文本	`描述`	`空状态面板1.描述 = "暂无订单"`
设置图标颜色	`图标颜色`	`空状态面板1.图标颜色 = "#1890ff"`
设置描述文本颜色	`描述颜色`	`空状态面板1.描述颜色 = "#999"`
设置自定义图标（DOM 元素）	`置图标元素(元素)`	`空状态面板1.置图标元素(SVG元素)`
设置操作按钮/区域	`置操作元素(元素)`	`空状态面板1.置操作元素(刷新按钮)`
调整整体尺寸	`宽度` / `高度`	`空状态面板1.宽度 = 400`

样式美化参考

空状态面板的外观可通过继承的视图属性和专用属性进行调整：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #f0f0f0"）、边框圆角（建议 "8px"）等属性美化。
图标区域：图标 支持 emoji（如 "📭"）或文本字符；图标颜色 控制图标颜色。若需更复杂的图标（如 SVG），可使用 置图标元素 传入自定义 DOM 元素。
描述文本：描述 设置提示文字，描述颜色 控制文字颜色，可通过继承的 字体大小（建议 "16px"）、字体粗细 等调整文字样式。
操作区域：通过 置操作元素 可传入按钮、链接或其他交互元素，引导用户进行下一步操作。
布局对齐：默认内容居中，可通过 内容水平对齐方式 和 内容垂直对齐方式（继承自视图）调整对齐。

基础示例

创建一个简单的空状态面板，显示“暂无数据”和刷新按钮。

变量 空状态面板1 = 创建 空状态面板()
空状态面板1.左边 = 50
空状态面板1.顶边 = 50
空状态面板1.宽度 = 300
空状态面板1.高度 = 200
空状态面板1.图标 = "📭"
空状态面板1.描述 = "暂无数据"
空状态面板1.图标颜色 = "#1890ff"
空状态面板1.描述颜色 = "#999"
空状态面板1.字体大小 = "16px"
空状态面板1.边框 = "1px solid #e8e8e8"
空状态面板1.边框圆角 = "8px"
空状态面板1.背景颜色 = "#fafafa"

' 创建操作按钮（原生 DOM 元素）
变量 刷新按钮 = 创建元素("button")
刷新按钮.textContent = "刷新"
刷新按钮.style.padding = "6px 16px"
刷新按钮.style.background = "#1890ff"
刷新按钮.style.color = "#fff"
刷新按钮.style.border = "none"
刷新按钮.style.borderRadius = "4px"
刷新按钮.style.cursor = "pointer"
' 绑定点击事件（原生方式）
刷新按钮.onclick = () => {
    弹出提示("刷新中...")
}

空状态面板1.置操作元素(刷新按钮)

添加组件(空状态面板1)

综合示例：购物车空状态

本示例模拟一个购物车页面，当购物车为空时展示空状态面板，包含购物车图标、提示文字和“去逛逛”按钮，点击按钮跳转到商品列表。

' ========== 创建页面容器 ==========
变量 页面容器 = 创建 绝对布局()
页面容器.左边 = 30
页面容器.顶边 = 30
页面容器.宽度 = 400
页面容器.高度 = 350
页面容器.边框 = "1px solid #e8e8e8"
页面容器.边框圆角 = "12px"
页面容器.背景颜色 = "#ffffff"
添加组件(页面容器)

' 标题栏
变量 标题栏 = 创建 标签()
标题栏.文本 = "🛒 购物车"
标题栏.字体大小 = "18px"
标题栏.字体粗细 = "bold"
标题栏.内边距 = "16px"
标题栏.边框底边 = "1px solid #f0f0f0"
页面容器.添加组件(标题栏)

' ========== 空状态面板 ==========
变量 空状态 = 创建 空状态面板()
空状态.左边 = 40
空状态.顶边 = 60
空状态.宽度 = 320
空状态.高度 = 220
空状态.图标 = "🛒"
空状态.描述 = "购物车是空的"
空状态.图标颜色 = "#d9d9d9"
空状态.描述颜色 = "#999"
空状态.字体大小 = "18px"
空状态.边框 = "none"
空状态.背景颜色 = "transparent"
页面容器.添加组件(空状态)

' 子描述标签（额外补充）
变量 子描述 = 创建 标签()
子描述.文本 = "快去挑选心仪的商品吧！"
子描述.字体大小 = "14px"
子描述.文本颜色 = "#bfbfbf"
子描述.内容水平对齐 = "center"
子描述.左边 = 40
子描述.顶边 = 170
子描述.宽度 = 320
页面容器.添加组件(子描述)

' 操作按钮（“去逛逛”按钮）
变量 逛逛按钮 = 创建元素("button")
逛逛按钮.textContent = "去逛逛"
逛逛按钮.style.padding = "8px 32px"
逛逛按钮.style.background = "#1890ff"
逛逛按钮.style.color = "#fff"
逛逛按钮.style.border = "none"
逛逛按钮.style.borderRadius = "6px"
逛逛按钮.style.fontSize = "16px"
逛逛按钮.style.cursor = "pointer"
逛逛按钮.onclick = () => {
    弹出提示("跳转到商品列表页面")
    ' 实际项目中可调用：切换页面("商品列表")
}
空状态.置操作元素(逛逛按钮)

属性详解

图标

类型： 文本型
说明： 设置或获取空状态显示的图标，支持 emoji（如 "📭"）、Unicode 字符（如 "⚠️"）或简单的 HTML 实体。默认 "📭"。

描述

类型： 文本型
说明： 设置或获取空状态显示的描述文本，用于说明当前状态或提示用户。默认 "暂无数据"。

图标颜色

类型： 文本型
说明： 设置或获取图标的颜色，支持 CSS 颜色值。默认由主题决定（通常为灰色）。

描述颜色

类型： 文本型
说明： 设置或获取描述文本的颜色，支持 CSS 颜色值。默认由主题决定（通常为灰色）。

函数详解

置图标元素(元素)

功能： 使用自定义 DOM 元素替换默认的图标显示。适用于需要使用 SVG 图标、图片或其他复杂图形作为图标的情况。
参数： 元素，原生 DOM 元素（如通过 创建元素("svg") 生成的 SVG 元素）。
返回值： 无。

示例：

变量 svg = 创建元素("svg")
svg.innerHTML = '<path d="..." />'  ' 设置 SVG 路径
空状态面板1.置图标元素(svg)

置操作元素(元素)

功能： 设置空状态面板底部的操作区域元素，通常为按钮或链接，用于引导用户进行下一步操作（如刷新、跳转、重试等）。
参数： 元素，原生 DOM 元素（如按钮、链接或容器）。
返回值： 无。