开发指南 ​

功能详解 ​

上图中标记了自定义设计器的所有功能模块，接下来我们将逐一进行介绍：

01、页面名称 ​

显示当前搭建页面的页面名称，点击小铅笔支持快捷编辑页面名称。

02、前进&后退 ​

Hex Lowcode Engine 设计器会记录用户的操作记录，并支持前进后退操作。

03、预览 ​

点击预览按钮，会在页面设计器中唤起预览浮窗进行页面真实预览。

04、保存 ​

将用户编辑的页面信息保存到本地。

05、组件层次结构树面板 ​

通过组件层次结构树面板，用户可以清晰查看当前编辑页面的组件层级结构，在组件层次结构树面板用户可以进行以下操作：

• 点击选中组件：当用户点击组件树中的节点时，画布中将高亮该节点对应的组件；
• 拖拽移动组件：用户可以拖拽组件改变组件位置，拖拽操作支持组件树&画布之间相互拖拽；
• 快捷隐藏组件：点击选中组件树节点时，用户可以看到快捷操作 icon，用户可以快速隐藏组件；

06、组件库面板 ​

用户可以查看当前页面可以使用的所有组件列表，用户可以通过名称搜索操作快速查找需要使用的组件，同时用户可以操作拖拽组件库中的组件并添加到可视编辑区的指定位置。

07、模态框面板 ​

用户可以查看当前页面可以使用的所有模态框列表，用户可以通过名称搜索操作快速查找需要编辑的模态框，同时用户可以新增，编辑和删除操作控制模态框。

08、数据源面板 ​

页面数据源配置，支持两类数据源：

• 变量 - 用于进行页面全局状态管理；
• 远程 API - 用于进行页面的异步数据请求管理；

09、动作面板 ​

用于通过 JS 代码书写业务逻辑，语法支持全量 ES6 语法，具体有以下几类配置场景：

• 页面生命周期配置；
• 动作处理函数配置；
• 页面公共函数配置；

10、多语言文案管理面板 ​

用于配置国际化的多语言文案库，同时提供 i18n API 进行语言库获取。

11、设置面板 ​

• 语言配置；
• 远程 API 配置；

12、组件属性配置面板 ​

用户可以选中可视化编辑区域中的组件，并在右侧属性面板中编辑选中的组件属性 (对应 Vue 组件的 props)，设计器会根据组件接入时设置的属性配置展示不同的属性配置面板。

13、样式属性配置面板 ​

用户可以选中画布中的组件，并在右侧样式面板中编辑选中组件的样式，所有组件的样式面板配置都是一致的，并且都有对应的 css 样式属性。

14、可视化编辑区域 ​

可视化编辑的主体区域，用户可以在画布中进行如下操作：

• 点击选中组件：选中右侧配置面板需要配置的组件；
• 拖拽移动组件：组件树及画布的相互物料拖拽移动；
• 拖拽添加组件：从组件库及区块库选中物料实例拖拽添加到编辑区域；

15、快捷键 ​

点击快捷键 Icon 会唤起快捷键显示弹窗，用户可以查看Hex Lowcode Engine支持的快捷键列表。

常规操作:

• 保存: Ctrl + S
• 复制组件: Ctrl + C
• 粘贴组件: Ctrl + V
• 删除组件: Delete

组件选择和移动:

• 选择父节点: ↑
• 选择子节点: ↓
• 向右选择兄弟节点: →
• 向左选择兄弟节点: ←