组件：对话框

对话框组件是一个用于在页面中弹出自定义内容窗口的不可视组件，支持设置标题、内容（视图/HTML/URL）、宽度、高度、最大高度，并可控制点击遮罩层是否关闭。它常用于信息确认、表单编辑、内容展示等需要临时浮层交互的场景。

典型使用场景：

信息确认（删除确认、操作确认）
表单编辑（在弹窗中编辑数据）
内容展示（详情查看、图片放大）
通知提示（重要通知、系统消息）
自定义弹窗（替代浏览器原生 alert/confirm）

快速索引

你想知道什么	直接看这里
如何设置对话框标题	`标题` 属性
如何设置对话框尺寸	`宽度` / `高度` / `最大高度` 属性
如何设置对话框内容（视图组件）	`置视图(视图对象)`
如何设置对话框内容（HTML）	`置HTML(HTML内容)`
如何加载外部页面	`加载URL(URL地址)`
如何显示对话框	`显示()`
如何关闭对话框	`关闭()`
如何监听关闭事件	`置被关闭回调(回调函数)`
如何控制点击遮罩是否关闭	`点击遮罩层关闭` 属性

基础示例

最简单的对话框使用流程：创建对话框 → 设置内容 → 显示 → 关闭。

变量 对话框1 = 创建 对话框()

' 1. 设置基本属性
对话框1.标题 = "提示"
对话框1.宽度 = 400
对话框1.高度 = 200
对话框1.最大高度 = 500
对话框1.点击遮罩层关闭 = 真

' 2. 设置内容（HTML 方式）
对话框1.置HTML("<p style='padding:20px;'>这是一个简单的对话框内容</p>")

' 3. 设置关闭回调
对话框1.置被关闭回调((源对象) => {
    调试输出("对话框已关闭")
})

' 4. 显示对话框
对话框1.显示()

' 5. 延时自动关闭
延时执行(() => {
    对话框1.关闭()
}, 5000)

综合示例：表单编辑对话框

本示例展示一个完整的表单编辑对话框，包含输入字段、保存/取消按钮，并演示数据回填和保存逻辑。

' ========== 创建对话框 ==========
变量 编辑对话框 = 创建 对话框()
编辑对话框.标题 = "编辑用户信息"
编辑对话框.宽度 = 480
编辑对话框.高度 = 360
编辑对话框.最大高度 = 500
编辑对话框.点击遮罩层关闭 = 假  ' 禁止点击遮罩关闭，防止误操作

' ========== 创建对话框内容（使用视图组件） ==========
' 创建一个弹性布局作为内容容器
变量 内容容器 = 创建 弹性布局()
内容容器.方向 = "column"
内容容器.内边距 = "20px"
内容容器.宽度 = 匹配父

' 姓名输入
变量 姓名标签 = 创建 标签()
姓名标签.文本 = "姓名"
姓名标签.字体大小 = "14px"
姓名标签.文本颜色 = "#666"
姓名标签.内边距 = "0 0 4px 0"
内容容器.添加组件(姓名标签)

变量 姓名输入 = 创建 单行输入框()
姓名输入.宽度 = 匹配父
姓名输入.高度 = 36
姓名输入.提示文本 = "请输入姓名"
姓名输入.边框 = "1px solid #d9d9d9"
姓名输入.边框圆角 = "4px"
姓名输入.内边距 = "8px 12px"
内容容器.添加组件(姓名输入)

' 邮箱输入
变量 邮箱标签 = 创建 标签()
邮箱标签.文本 = "邮箱"
邮箱标签.字体大小 = "14px"
邮箱标签.文本颜色 = "#666"
邮箱标签.内边距 = "12px 0 4px"
内容容器.添加组件(邮箱标签)

变量 邮箱输入 = 创建 单行输入框()
邮箱输入.宽度 = 匹配父
邮箱输入.高度 = 36
邮箱输入.提示文本 = "请输入邮箱"
邮箱输入.边框 = "1px solid #d9d9d9"
邮箱输入.边框圆角 = "4px"
邮箱输入.内边距 = "8px 12px"
内容容器.添加组件(邮箱输入)

' 按钮组（使用弹性布局水平排列）
变量 按钮组 = 创建 弹性布局()
按钮组.方向 = "row"
按钮组.主轴对齐 = "flex-end"
按钮组.间距 = 12
按钮组.内边距 = "16px 0 0 0"
内容容器.添加组件(按钮组)

变量 取消按钮 = 创建 按钮()
取消按钮.文本 = "取消"
取消按钮.宽度 = 80
取消按钮.高度 = 36
取消按钮.背景颜色 = "#d9d9d9"
取消按钮.文本颜色 = "#333"
取消按钮.边框圆角 = "4px"
按钮组.添加组件(取消按钮)

变量 保存按钮 = 创建 按钮()
保存按钮.文本 = "保存"
保存按钮.宽度 = 80
保存按钮.高度 = 36
保存按钮.背景颜色 = "#1890ff"
保存按钮.文本颜色 = "#ffffff"
保存按钮.边框圆角 = "4px"
按钮组.添加组件(保存按钮)

' ========== 设置对话框内容 ==========
编辑对话框.置视图(内容容器)

' ========== 数据回填（模拟编辑场景） ==========
函数 打开编辑对话框(用户名, 邮箱)
    姓名输入.内容 = 用户名
    邮箱输入.内容 = 邮箱
    编辑对话框.显示()
结束 函数

' ========== 按钮事件绑定 ==========
取消按钮.置被单击回调((源对象) => {
    编辑对话框.关闭()
})

保存按钮.置被单击回调((源对象) => {
    变量 姓名 = 删首尾空(姓名输入.内容)
    变量 邮箱 = 删首尾空(邮箱输入.内容)
    
    如果(姓名 == "")
        弹出提示("请输入姓名")
        姓名输入.获取焦点()
        返回
    结束 如果
    如果(邮箱 == "")
        弹出提示("请输入邮箱")
        邮箱输入.获取焦点()
        返回
    结束 如果
    
    弹出提示("保存成功！\n姓名：" + 姓名 + "\n邮箱：" + 邮箱)
    编辑对话框.关闭()
})

' ========== 对话框关闭回调 ==========
编辑对话框.置被关闭回调((源对象) => {
    调试输出("编辑对话框已关闭")
})

' ========== 打开对话框（模拟点击编辑按钮） ==========
' 实际使用中，可由某个按钮触发
延时执行(() => {
    打开编辑对话框("张三", "zhangsan@example.com")
}, 500)

属性详解

标题

类型： 文本型
说明： 设置或获取对话框的标题文本，显示在对话框顶部。若为空，标题栏可能仍保留（取决于组件实现）。

宽度

类型： 文本型 或 数值型
说明： 设置或获取对话框内容区域的宽度。支持数值（默认像素）或带单位的字符串（如 "80%"）。

高度

类型： 文本型 或 数值型
说明： 设置或获取对话框内容区域的高度。支持数值或带单位的字符串。

最大高度

类型： 文本型 或 数值型
说明： 设置或获取对话框内容区域的最大高度。当内容超出时，会出现滚动条。

点击遮罩层关闭

类型： 逻辑型
说明： 设置或获取点击对话框背景遮罩层时是否关闭对话框。默认为 假（不关闭）。若设为 真，用户点击遮罩即可关闭，适合轻量提示场景。

函数详解

置视图(视图对象 | HTML | DOM节点)

功能： 设置对话框的内容区域，支持传入视图组件、HTML 字符串或原生 DOM 节点。
参数：
- 视图对象：继承自 视图 的组件实例（如 标签、弹性布局 等）
- HTML：文本型 HTML 字符串
- DOM节点：原生 DOM 元素
返回值： 无。
示例： 对话框1.置视图(面板1)