# 页面与组件操作
画布（图示中的中间区域）是页面设计中特定的可视化区域，为开发者提供直观的操作空间，开发者拖拉拽放置组件后可实时预览页面设计效果。点击画布区域、画布中的页面组件时，设计器右侧均可查看与配置“页面/组件属性”。
# 页面属性
# 基础设置
1、页面布局类型： 创建全新页面时，支持选择「流式布局」（默认）或「栅格布局」
2、页面描述： 通过添加文本内容，便于多人协同，亦可用于提AI能力模块（如作为提示词）。
# 布局
- 流式布局型页面：支持选择“Block布局”与“Flex布局”，细节详见“页面布局类型”
- 栅格布局型页面：支持配置默认的“行高、行间距、列间距”，细节详见“页面布局类型”
详见“页面布局类型 (opens new window)”。
# 边距、背景（页面样式）
页面支持设置内外边距、背景色（纯色）、背景图片。
# 事件
页面支持「页面JS事件扩展 (opens new window)」
# 组件操作
# 复制
复制「组件」后，将生成样式与参数完全一致的副本，包括组件中的事件、JS、CSS、脚本等。
注：复制的组件，「组件唯一标识」重新生成
# 拖动
在画布中，拖拽组件即可完成组件位置移动。
注意：在“栅格型页面”中，要将组件拖入“布局组件”，需要点击拖拽左上角的「拖动标识」。
# 组件样式
点击组件后，可在设计器右侧属性区，设置功能属性（见各组件说明文档）与「组件样式」
组件样式，可设置组件的：尺寸、边距、边框、背景、悬停效果、自定义样式类（高级设置）
- 尺寸： 控制组件在画布/布局容器组件中占用的大小
- 宽度：栅格宽度（12列均分）、适应内容（按组件内容为宽度）、固定宽度（固定像素数值）、填充容器（以所在容器的剩余空间为宽度）
- 高度：适应内容（按组件内容为高度）、固定高度（固定像素数值）、填充容器（以所在容器的剩余空间为高度）
- 边距： 控制组件与所在容器或其他组件之间的距离
- 内边距：控制「组件内容」与「组件边框」之间的距离
- 外边距：控制「组件整体」与「其他元素」之间的距离
- 边框： 可为组件设置边框，支持圆角、边框宽度、类型、颜色
- 背景：
- 自定义样式类： 支持使用自定义样式类，CSS代码，对组件进行个性化样式修改。
# 组件联动
# 列表联动列表
两个列表之间的联动，可以配置出效果：当点击A列表中某个单元格的值，可以联动刷新B列表的数据。
场景示意：A表为客户列表（展示所有客户的基础信息），B表为订单表（其中有一个外键字段关联的是A表的客户名称）。当点击A表的某个客户名称（X客户)时，可以在B表中显示X客户的所有订单。
配置方法： 在组合页面的【列表】组件中，点击列表字段右侧字段（需要传参的字段）右侧的“设置”按钮.
选择【关联当前页面的】，然后选择需要关联的目标列表。 “组件字段”需要选择“客户名称”。
# 列表联动表单
操作列表时联动显示表单内容，可以配置效果：当点击A列表中某个单元格的值，在B组件中显示对应表单记录。
- 需要注意的是，列表联动到表单，必须是1对1的关系，否则配置的联动将无效。
场景示意：A列表是客户订单表，其中有一个外键字段关联的是A表的“客户名称。当点击A列表的某个客户名称（X客户）时，则会在B表单（”表单属性”为“详情”）中展示X客户的基本信息（如联系方式、地址等）。
- 列表联动表单，还可以实现效果：点击列表的某个单元格的字段，可以在同一页面的B表单组件（“表单属性”为“编辑”）中打开这行数据的“编辑”界面进行编辑。
场景示意：需要连续编辑多条列表数据时，在同个页面编辑可以让操作更加快捷、直观。
配置方法：
- 在页面的「列表」组件中，点击属性面板列表字段（需要传参的字段）右侧的“设置”按钮.进入“字段设置”弹窗；
- 选择「关联当前页面的」，然后选择需要关联的目标表单即可；
- “组件字段”默认为空不用选择。系统将自动将列表的字段传递给表单。
# 表单联动列表（刷新关联对象）
表单联动到列表，主要是指在添加或编辑表单数据时，提交表单后，会刷新对应的列表。 **场景示意：**A表单组件（“表单属性”为“添加”）绑定的是表单a，B列表绑定的也是表单a。当在A表单填写数并提交后，在B列表可以实时看到刚刚已提交成功的数据。
配置方法：
- 在组合页面的「表单」组件中，点击属性面板中“操作按钮”的“编辑”图标按钮，进入表单操作按钮的“设置”弹窗；注：只有属性为“添加”和“编辑”类型的表单，才能配置联动属性（刷新关联对象）；
- 在「刷新关联对象」下拉框，选择需要关联的目标列表即可；
- 可以选择多个列表。
# 组件常用事件（通用）
部分页面组件，包含“常用事件”（点击事件）配置，包含：
- 打开链接：可填写URL地址，点击后可跳转对应页面。（新页面/当前页面打开）
- 打开应用界面：可绑定当前应用的任一页面，点击后跳转到对应页面。
- 发起表单：可绑定表单，用于添加表单数据。
- 发起流程：可绑定流程，用于发起流程。
- 刷新页面：设置后，点击可刷新当前页面。
