我们接下来来介绍我们的编辑器，以及简要的使用方法。

按区域从左到右依次是 功能区、画布区域、属性区、底部操作区。我们接下来来依次介绍。

一、功能区

功能区包含了三个tab，分别是组件、大纲和代码。

1. 组件tab

组件tab中包含了目前编辑器支持的所有组件，组件分为三类，容器类、基础类、和商品类，由这三种组件，可以组合出许多复杂的交互以及展示效果。比如图片容器作为背景，内嵌一个多状态组件，就可以做出类似于tab切换的效果。

2. 大纲tab

组件可以互相嵌套、然后位置也可以覆盖和重叠，因此有时候比如我们想要选中某个被覆盖的组件，那如果在画布中就比较难选择，而在大纲视图中，就可以通过选择组件树种的组件，轻松选中要设置和修改的组件。

3. 代码tab

这个tab主要是用来展示当前编辑器生成的代码，这个主要是给有代码经验的同学调试用。

二、画布区

画布区主要用来展示和操作组件，主要可操作内容包括：

1. 撤销、重做按钮，对应图中③。

如果操作过程中，我们误操作，可以通过撤销和重做按钮来撤销和复现操作。我们也可以通过快捷键ctrl/cmd + z，或者ctrl/cmd +y来快速撤销和重做。

2. 缩放按钮，对应图中④。

如果操作过程中，图片很大，我们如果需要操作窗口区域之外的内容，可以通过缩放来放大和缩小展示的倍数。

3. 预览按钮，对应图中⑤。

我们可以通过点击预览，来隐藏其他元素，来观察当前画布中的实际展示效果。

4. 主操作画布，对应图中的⑥。

画布中展示了我们要操作的组件和元素，我们可以从左侧的组件列表中拖动组件到画布中，来增加组件。也可以通过点击画布中的组件，来聚焦组件，以修改右侧的属性。

5. 组件操作区域，对应图中⑦。

该区域会在选中组件的时候展示在右上角，分别包括置顶、移动、复制和删除。

置顶：会将该组件放到同层级的组件的最前面。

移动：可以按住并拖动组件，完成组件的移动。

复制：会复制组件的所有属性，并生成一个新的组件。

删除：删除组件,如果不慎误删除，可以点击撤销或者用快捷键ctrl/cmd + z来撤销操作。

三、属性区

属性区，包含了2个tab，一个是属性，一个是外观。

1. 属性tab

属性tab中包含了选中组件能够设置的主要属性，比如图片背景容器，右侧主要就是设置图片属性。

2. 外观tab。

外观tab中包含了组件的可以设置的外观选项，比如宽高、边距等信息。

四、底部操作区

底部操作区目前只有一个重要的操作就是保存，作用是将当前画布中的设计保存到阿里国际站后台。

经常保存是一个好习惯，尤其是区域操作比较复杂的时候，分步保存，可以防止未保存导致的意外丢失。