工具栏

工具栏分为两部分，左侧的二次编辑工具和右侧的代码操作控件。

二次编辑工具

二次编辑工具提供快速编辑页面元素的功能，从左至右依次为：

• 撤销/重做: 用于快速撤销/重做用户在画布中的最后一个或多个操作
• 上移/下移: 用于快速调整DOM层级结构
• 编组: 用于为画布中选择的元素增加一个父节点
• 解组: 用于删除一个 View 节点，但是在界面上保留该 View 节点的所有子孙节点
• 切图: 将画布中选中的节点或子孙节点转换为图片节点
• 标记组件: 为画布中某个节点打上一个组件标签，以便生成更合理的 HTML 代码
• 数据绑定: 为画布中某个节点设置数据来源
• 重置: 将设计稿还原到初始状态

代码操作控件

代码操作控件包含一些和最终代码生成相关的功能。

• 预览: 用于在线预览当前设计稿页面或整个项目的设计稿页面。
• 查看代码: 用于查看和拷贝当前页面的 HTML、CSS、JS、全局样式等代码。

• 下载代码: 用于下载当项目面的 HTML、CSS、JS、全局样式等代码。用户还可以配置代码生成平台、样式长度单位、样式代码格式（CSS/LESS）

• 设置: 用于设置设计稿原始分辨率到需要转换的当前分辨率自动调整单位值。

• 资源管理器: 用于查看和管理当前设计稿用到的全部资源图片

• 数据源：用于API数据源对接，请求后台数据并获取返回值