---
order: 3
navTitle: SPG设计器
---
# SuperPage设计器界面介绍

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

![设计器](./images/2020-09-21-17-42-38.png)

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

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

## 设计器快捷键{#hotkey}

设计器支持快捷键如下：

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

## 查看引用{#view-reference}

使用查看引用可以快速查看以及定位当前[模型表](./design/datasourse.md)、[组件](./components/common/text.md)或[参数](../../data-viz/dash/design/data/param.md)在页面中被引用的地方。在设计器中，选中模型表或组件，点击鼠标右键，在弹出的菜单中选择**查看引用**选项即可查看引用列表，点击内容，可定位到对应组件或数据源引用的位置，如下所示：

![查看引用](./images/2021-12-09-16-21-28.gif)

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

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

### 快速修改引用错误{#modify-reference-errors}

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

![查看引用](./images/2021-12-09-16-50-28.gif)

## 调整组件图层{#adjust-layer}

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

调整图层选项有**上移一层**、**下移一层**、**置于顶层**、**置于底层**四个，具体可参考[仪表板调整组件图层](../../data-viz/dash/designer.md#adjust-layer)。

![调整组件图层](./images/2021-12-09-16-58-54.png)

## 组件大纲树{#outline-tree}

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

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

![组件大纲树](./images/2021-12-09-17-10-28.gif)