---
title: 编辑器界面
source: https://vjmap.com/guide/visual/editor.html
---

---
group: 入门
description: 编辑器每块区域的用法：顶栏与三个菜单、图层面板、组件库、画布与选区工具栏、右键菜单、属性面板、页面条和快捷键。
---

# 编辑器界面

在首页打开或新建一个工程后进入编辑器。左边选组件、中间摆画布、右边调属性，是搭大屏的主要场所。本篇用访客工作区里的「综合工程-智慧供热能源站三维组态联控」做例子，逐块介绍。

## 界面总览

![编辑器的各个区域](./images/editor-overview.webp)

1. **顶栏**：「项目」「数据」「操作」三个菜单、工程名，以及撤销、屏幕尺寸、预览、保存、历史、发布等按钮。
2. **图层面板**：当前页面的组件树和页面列表。
3. **组件库**：分类浏览、搜索和添加组件。
4. **画布**：摆放和编辑组件，顶部和左侧有标尺，画布外是带网格点的留白区。
5. **属性面板**：选中对象的「样式」「数据」「事件」「代码」。
6. **页面条**：前景、各页面、背景和画面的页签。
7. **缩放**：画布缩放比例。
8. **AI 助手**：打开 AI 对话，可以拖动到别的位置，见[AI 助手](./ai.html)。

## 顶栏

工程名在顶栏正中，点一下就能直接改名。右侧一排按钮：

![顶栏右侧的按钮](./images/editor-topbar.webp)

1. **撤销 / 恢复**：`Ctrl+Z` / `Ctrl+Y`（或 `Ctrl+Shift+Z`）。
2. **屏幕尺寸**：「大」「中」「小」分别是大屏 / 桌面、平板 / 中等屏、手机 / 小屏。响应式页面可以分别调整三档下的摆放，见[画布适配与布局](./layout.html)。
3. **外观主题**：编辑器界面的配色，有「深邃蓝」「曜石灰」两种深色和「云隙白」浅色，还可以换强调色。只保存在本机浏览器，不影响大屏内容。
4. **快捷键**：打开快捷键速查表（`Ctrl+/`）。
5. **预览**：在编辑器里查看运行效果，按 `Esc` 退出。
6. **保存**：保存到服务器（`Ctrl+S`）。
7. **历史**：查看和还原历史版本。
8. **发布**：生成运行态链接，见[保存、发布与嵌入](./publish.html)。

左侧的「项目」菜单管理整个工程：

![「项目」菜单](./images/editor-menu-project.webp)

1. **项目菜单**：「保存」「历史版本...」「另存为」（导出工程文件）、「项目部署...」（运行链接与导出部署文件）、「项目设置...」（项目参数、演示顺序、地图默认服务地址等）、「素材库...」（上传和管理图片、矢量图、视频）、「素材检查...」（找出失效的素材引用）和「返回首页」。

「数据」菜单有三项：「编辑数据(D)...」（`Ctrl+D`，打开「连接数据」管理所有数据源）、「刷新数据」（`Ctrl+F5`）和「数据规则...」，用法见[数据接入与绑定](./data.html)。

「操作」菜单是常用编辑命令的集合：

![「操作」菜单](./images/editor-menu-ops.webp)

1. **操作菜单**：撤销、恢复、复制、粘贴、删除、全选、成组、取消分组，以及「对齐」（左、水平居中、右、顶、垂直居中、底）、「分布」（横向、纵向）和「图层」（置顶、置底、上移、下移）三个子菜单。没有选中组件时，用不了的命令显示为灰色。

## 图层面板

![图层面板](./images/editor-layers.webp)

1. **页面图层 / 页面**：「页面图层」是当前页面的组件树；「页面」列出工程里的所有页面和画面，点一下切换编辑对象。
2. **筛选**：按「前景」「页面」「背景」「画面」过滤图层树。
3. **页面根节点**：点它选中页面本身，右侧显示页面属性（布局画像、适配方式、大屏尺寸、背景等）。
4. **组件行**：越靠上层级越高。悬停时右侧出现锁定和显示 / 隐藏图标；锁定后在画布上点不中，适合固定背景装饰。双击行可以重命名，右键打开和画布上一样的组件菜单。

把组件「移入待处理」后，图层面板上会多出「待处理」页签，里面的组件可以「加回原位」或彻底删除。双击进入地图、三维场景、组态等组件内部时，图层面板会换成这个组件内部的图层、元素或图元列表。

## 组件库

![组件库](./images/editor-library.webp)

1. **视图与折叠**：切换大卡片 / 小卡片，以及展开、收起组件库。
2. **搜索组件**：按名称搜索，支持拼音；右边的按钮刷新列表。
3. **深色 / 浅色 / 资产库**：内置组件分深色和浅色两套风格；「资产库」里是你保存的组件，可以跨工程使用。
4. **分类**：「常用」按最近使用排序，「全部」是 81 个内置组件，下面是各分类及数量。
5. **组件卡片**：添加组件有四种方式。

| 操作 | 效果 |
|---|---|
| 单击卡片 | 高亮预览，不添加 |
| 双击卡片 | 添加到画布 |
| 悬停卡片点「+」 | 添加到画布 |
| 拖到画布上 | 在落点添加，也可以直接拖进容器或网格的格子里 |

每类组件的用法见[组件库与样式](./components.html)。

## 画布与选区工具栏

在画布上点一下组件就选中它，选中后画布上方浮出一条选区工具栏：

![选中组件和选区工具栏](./images/editor-select.webp)

1. **选中的组件**：四周八个控制点，拖动本体移动，拖控制点改大小。
2. **选区工具栏**：可以拖到别的位置，双击把手回到居中。

![选区工具栏的按钮](./images/editor-toolbar.webp)

1. **拖动把手与名称**：左边是把手，右边是选中组件的名称；在容器里时会显示「页面 → 容器 → 当前组件」的路径，点前面的层级可以跳出容器。
2. **对齐**：吸附到父级的左、右、顶、底，或水平、垂直居中。多选时是六向对齐，三个以上还能横向、纵向等距分布。
3. **拉伸到父容器**：撑满宽度、高度或整个尺寸。
4. **层级**：置顶、上移、下移、置底。
5. **锁定 / 复制 / 删除**：网格容器的子项还会多出插入行、列的按钮。打开 AI 助手后，这里还会出现「拖给 AI」。

画布上的常用操作：

- `Ctrl` + 点击：加选或取消加选；在画布空白处按住拖出方框，也能一次框选多个组件，工具栏会显示「3 个组件」之类的数量，并多出「分布」按钮。
- 双击组件：进入容器、地图、三维、组态的内部编辑；双击空白处或按 `Esc` 退出。
- `Alt` + 点击：出现旋转手柄，拖动旋转，按住 `Shift` 每 15° 吸附。
- `Ctrl` + 滚轮：以鼠标位置为中心缩放画布；只滚动滚轮则移动画布。

## 右键菜单

在组件上点右键，打开组件菜单；在空白处点右键，可以「添加组件...」「粘贴」「全选」。

![组件的右键菜单](./images/editor-context.webp)

1. **组件菜单**：「添加组件...」「重新加载」「重命名」「删除」「移入待处理」「隐藏」「锁定」，以及「复制」「分组」「移动到页面」「复制到页面」「图层」「选择图层」几个子菜单。「选择图层」在多个组件叠在一起时，列出鼠标位置下的所有组件供精确选择。
2. **复制子菜单**：「复制组件」「复制交互」「复制样式」「添加到资产库」。复制样式后，在另一个组件上就可以粘贴样式，快速统一外观。「分组」子菜单里是「成组」「移入到分组」「合并到分组」「取消分组」。

## 属性面板

![属性面板](./images/editor-props.webp)

1. **样式 / 数据 / 事件 / 代码**：「样式」调外观和尺寸；「数据」选数据来源、绑定字段；「事件」配置交互规则；「代码」给组件或页面写二次开发脚本。
2. **状态**：默认是「默认状态」。在这里「新建状态」「管理状态」，给同一个组件准备几套样式，运行时由事件或数据切换，见[事件交互与多状态](./events.html)。
3. **名称与操作**：组件名和类型，双击名称可以重命名；星形按钮把组件存进资产库，垃圾桶删除组件。
4. **基本设置**：不透明度、鼠标穿透等通用设置，容器类组件还有内部布局方式。
5. **大小&位置**：宽高、X / Y 坐标、单位（像素或百分比）和旋转角度。

下面还有「响应式布局」「边框设置」「背景设置」「组件封面」「悬浮弹层」等分组，以及每种组件自己的设置，如图表的坐标轴、图例、系列。分组标题右边的「⋮」里可以重置这一组。

## 页面条

画布下方是页面条，最右边是缩放：

![页面条](./images/editor-pagebar.webp)

1. **+前景**：覆盖在所有页面之上的一层，适合放全局标题栏、导航。
2. **页面**：工程里的各个页面，点页签切换，页签上的「×」删除页面。
3. **+子页面**：新建页面，可以选空白页或组态页。
4. **+背景**：所有页面共用的底层。
5. **画面**：独立于页面的内容，既能作为弹窗、抽屉打开，也能嵌进页面。页签上的「★」设为启动画面（打开工程就弹出）。
6. **+画面**：新建画面。

页签放不下时，最右边的「⋯」收纳被挡住的页签。缩放控件有缩小、放大、百分比输入（10%–500%）和「最佳显示比例」。页面和画面的详细用法见[多页面、画面与弹窗](./pages-windows.html)。

## 快捷键

点顶栏的「?」或按 `Ctrl+/`，打开快捷键速查表：

![快捷键速查表](./images/editor-shortcuts.webp)

最常用的几个：

| 快捷键 | 作用 |
|---|---|
| `Ctrl+S` / `Ctrl+Shift+S` | 保存 / 另存为 |
| `Ctrl+D` / `Ctrl+F5` | 编辑数据 / 刷新数据 |
| `Ctrl+Z` / `Ctrl+Y` | 撤销 / 恢复 |
| `Ctrl+C` / `Ctrl+V` / `Ctrl+A` | 复制 / 粘贴 / 全选 |
| `Ctrl+G` / `Ctrl+Shift+G` | 成组 / 取消分组 |
| `Delete` / `Backspace` | 删除选中的组件或图元 |
| `Ctrl` + 滚轮 | 缩放画布 |
| `Esc` | 退出预览、容器内部编辑或图元编辑 |