SuperPage设计器界面介绍

SuperPage设计器是用来设计SuperPage页面的可视化工具，SuperPage设计器界面如下图：

可以将其划分为如下几个区域：

1. 数据源：数据源区域列出了用于可视化分析的数据模型，也可以添加数据模型、数据集、表内数据加工、定义模型间的关联关系、增加计算字段、删除数据模型等
2. 组件区：提供了丰富的可视化组件，如常用、布局、导航组件等，可以使用拖拽的方式从组件区中将组件快速添加到画布
3. 画布：画布是可视化组件布局的区域，可以在画布中添加任意组件，并通过拖拽的方式，任意布局组件的位置
4. 属性栏：显示画布中当前选中组件的可配置属性，包括：数据、样式、交互等
5. 工具栏：工具栏中提供了对SuperPage页面的全局设置，如全局参数、定时刷新等

设计器快捷键

设计器支持快捷键如下：

功能	Windows/Linux	macOS
剪切	Ctrl + X	Command + X
复制	Ctrl + C	Command + C
粘贴	Ctrl + V	Command + V

查看引用

使用查看引用可以快速查看以及定位当前模型表、组件或参数在页面中被引用的地方。在设计器中，选中模型表或组件，点击鼠标右键，在弹出的菜单中选择查看引用选项即可查看引用列表，点击内容，可定位到对应组件或数据源引用的位置，如下所示：

设计器中支持查看引用的内容如下：

• 数据模型查看引用：可以查看模型或字段被哪些组件属性引用
• 组件查看引用：可以查看选中组件被其他组件或数据源引用情况
• 参数查看引用：可以查看引用该参数的组件或数据源列表

快速修改引用错误

删除被引用的模型表、组件以及参数时，会弹出引用该内容的列表，当强制删除后，被引用的地方出现报错。同时右上角信息处会显示错误提示，点击可快速定位错误，也就是删除内容被引用的地方。

调整组件图层

在制作SuperPage过程中，需要将组件固定在某个位置时会使用绝对位置，设置绝对位置后，该组件可能会被其他组件遮挡，此时可通过调整组件图层将其置于顶部，即选中组件>右键菜单，点击置于顶层即可。只有设置绝对位置的组件可以调整图层顺序。

调整图层选项有上移一层、下移一层、置于顶层、置于底层四个，具体可参考仪表板调整组件图层。

组件大纲树

在设计器中拖入组件制作内容时，会依据拖入顺序以及包含关系自动生成组件大纲树，点击左上角文件>显示/隐藏组件大纲即可查看，大纲树可点击左上角图标拖动出来，也可移动到页面中的任何位置。大纲树提供了如下操作：

1. 选中组件可快速定位在画布中的位置
2. 可展开/收起面板等容器，快速查看组件之间的包含关系
3. 使用拖拽快速调整组件的位置
4. 右键弹出菜单可对其进行快捷操作，如复制、重命名等