用于管理前端的菜单和页面，如果是移动端项目，每个菜单项即为手机端的底部菜单；如果是PC项目，每个菜单项即为左侧菜单栏。每个菜单会由多个页面组成并完成一整套业务功能。

页面绘制

前端页面开发分为移动手机端和PC电脑端，不同设备提供了不同的页面基础组件。基础组件几乎覆盖了常用的所有功能，包含了布局组件、输入组件、图表组件等，可以满足不同的页面设计需要。

页面调整

我们通过对组件的交互定义，可以实现不同页面之间的交互跳转；

数据交互

我们可以通过对组件数据来源的定义实现我们所需要数据的展示，数据配置功能为页面组件提供了后端的动态数据。数据的引用来源包含了我们编写的后端服务，配置的接口以及直接引用数据库表。

菜单

如图，我们可以在左侧菜单看到两个菜单，分别是【PC端页面】与【移动端页面】。点击后，出现页面设置弹框。由三个部分构成，分别为页面、菜单；

「页面」主要添加我们所需要的页面；同时我们可以通过添加文件夹对页面进行归类，以便进行区分；

「菜单」主要定义大的菜单模块，如果是移动端，手机端的菜单显示在底部，鉴于手机的底部宽度，建议菜单数量不要超过5个。PC电脑端的菜单显示在左侧，并且支持层级菜单，目前最多支持二级菜单。每个菜单可以定义主页面，通过主页面跳转至其他不同的页面模块；

页面

一个菜单通常由一个主页面以及多个子页面共同沟通，通过对页面上组件（如按钮）的配置，实现不同页面之间的来回跳转。页面的添加与修改如上所介绍；

当您需要对相似页面进行复用时，可以使用创建副本的形式复制页面，以提高页面的设计效率。

【PC端/移动端页面】

点击画布空白区域，可是定义页面的显示样式，包括页面边距和页面背景等

• 边距：定义页面四周的距离。
• 背景：定义页面的背景颜色和背景图片，是布局容器的重要配置项。背景图片可以精细化每个图片显示属性。包括background-position、background-repeat各种配置。
• 页面入参：定义前一个页面传入到本页面的数值，实现跨页面的数据传递。

页面完整开发功能如下图：

整个页面分为以下几个区域

【1】页面名称

【2】组件区域，组件分为基础组件和业务组件，基础组件由平台提供的最小组件元素，业务组件由多个基础组件组成的复合组件，业务组件可以在本项目中创建符合组件然后保存，可以在本项目中多个页面中重复使用，但是不能跨项目使用。

【3】功能菜单，此区域包含撤销、重做、保存、预览、清空、删除、市场下载、全局变量等功能，这些功能操作后都是针对整个页面。其中保存功能是保存页面的修改内容到平台上，修改内容被保存后才能预览。清空功能是清空当前页面的所有组件和相关配置。删除功能是删除当前页面。市场下载为从页面市场下载模板并覆盖当前页面所有组件。

【4】页面画布，在页面画布上添加组件并配置，生成前端页面。手机端的屏幕宽度大小不一，此处的页面宽度只是参考，具体显示效果需要在具体设备上测试。

【5】组件配置，组件配置分为样式、数据、行为配置。其中样式面板设置组件的显示样式，如大小，颜色和边框。数据配置组件的数据显示规则，定义数据来源和显示的数据项。行为则定义了组件的事件行为，如点击后页面跳转，接口调用，弹框等。

【大屏页面】

大屏页面与上面相似，但是大屏页面展示的组件更加强大，页面的布局也更加灵活，效果也更加酷炫，可以更加生动的活化数据。

基础组件

开发平台拥有丰富的基础组件，这些基础组件是页面的最小单位。通过对基础组件的布局、组合可配置出各种各样的页面，满足所有业务需求。为了便于使用，基础组件被归为常用组件、图表组件、输入组件和其他组件等四类组件。

每个基础组件都有一些特殊化样式配置，也有一些通用的配置项，通用的配置项如下：

• 组件名称：定义组件的名称，以便在其他配置中该组件被引用时，用于区分；
• 组件样式：每个组件都可以自定义他们样式，如上图文本框，可以定义颜色、字体大小、对齐顺序、是否加粗等、通过灵活的配置以及多加利用，可以配置出非常完美的UI效果；
• 事件行为：通过对组件的配置，可以触发行为交互，比如点击按钮或者文本框内容变化时进行页面跳转；

• 当然不同的组件存在一定的区别，比如上图文本框相比按钮多了「校验」，可以配置该文本框是否为必填等；

布局容器

布局容器时页面布局中最为常用的组件，通过布局容器的多层嵌套可以构建出非常负责的布局样式。 布局容器的背景设置更加提高了布局容器的使用频率。所有基础组件中只有布局容器具有背景设置功能

• 列配置：栅格宽度默认被分为24等分，通过数值来定义每个等分的宽度。默认有八个快捷分配方案，分别时24、12:12、6:18、18:6、8:8:8、6:12:6、6:6:6:6、4:4:4:4:4:4。也可以设置每列数值单独定义每列的宽高。
• 对齐方式：定义布局容器内部的组件的对齐方式，分别是向左对齐、居中对齐、向右对齐
• 背景：设置布局容器的背景颜色和背景图片，是布局容器的重要配置项。背景图片可以精细化每个图片显示属性。包括background-position、background-repeat各种配置

文本组件

文本组件也是最为常用的组件之一，所有的指标数值类显示，标题类显示等需要文字表达之处，都会使用到文本

• 文本内容：定义文本的静态显示内容，也即是文本的默认值。如果文本定义了动态数据，会显示文本的静态内容，待动态数据被状态完成后，显示动态数据。
• 样式：定义文本的显示样式，包括字体大小、字体颜色、对齐方式、粗体、斜体等。内置了标题、副标题、正文、文本、提示、备注等基础样式

图标

  图标组件是修饰页面UI的重要组件，通过各色图标的点缀，页面的美观度可以很大限度的提高。特别是表意的图标可以提高用户的理解速度和深度。目前平台提供一整套的图标库，包括面性和线性图标。平台暂不支持自己上传图标。如果需要上传自定义图标，建议使用图片组件。

• 图标：定义图标样式。点击从图标库选择图标，暂不支持自定义图标
• 图标颜色：定义图标的显示颜色
• 图标大小：定义图标的显示大小

图片

图片是页面的重要组成部分，用于装饰页面或展示商品。图片的来源可以页面开发时自定义上传静态页面，也可以来自于后端的动态图片地址。

• 图片：配置静态自定义图片，通过上传本地图片在页面中显示。通过后端数据配置图片的地址，从后端加载动态图片。
• 填充样式：定义图片的填充样式，选项有contain、conver、fill、none、scale-down
• 宽度/高度：定义图片的显示高度和宽度
• 圆角：定义图片四周圆角
• 圆形显示：定义是否圆形显示图片

按钮

按钮组件用于引导用户操作的组件，用户点击后可以完成一系列交互行为，如数据刷新，提交数据，弹出提示框等。按钮一般都要定义行为来完成交互行为

• 按钮名称：定义按钮的显示名称
• 按钮颜色：定义按钮的显示颜色
• 按钮形状：定义按钮的显示形状，有圆形、方形、默认等形状可选
• 按钮大小：定义按钮的显示大小
• 按钮图标：定义按钮名称前的图标
• 自适应：根据按钮的环境自适应显示按钮样式

图表

图表组件用于表示多维复杂数据，是数据可视化的重要工具。主要包括环形图、条形图、柱状图线性图，占比条、进度条、环形进度条等。所有图表都具有类似的配置项，如数据源、横坐标，纵坐标

• 数据配置：图表最为重要的配置，先定义数据来源，再定义该图表如何显示数据，即图标的横轴和纵轴。部分图表支持多个纵轴
• 配色方案：定义图表的颜色方案，平台内置了最为流行的配色方案以便选择。

表格

  表格是一种常用的数据展现形式，选择展示的数据源后，可以如下图展示需要的列数据。

除了简单介绍上述组件后，整个平台还包含了其他诸多好用的组件，每个组件虽有差异，但是使用方式大同小异，我们可以自己动手体验尝试；

业务组件

  业务组件是由多个基础组件组成并按照一定布局的复合体。业务组件定义后可以在多个页面中复用，来提高开发效率和保持显示的一致性。业务组件被添加到页面中，业务组件中的每个基础组件可再次自由定义。页面间使用的相同业务组件相互独立不受影响。

后端数据

  数据是应用的灵魂，应用的页面主要功能就是用来展示数据，其中最为重要的是实时后端的动态数据。平台提供了后端数据的可视化配置，我们在页面上可以定义来自后端的接口数据、数据库数据和接口数据。组件比如图表、文本、输入框等都可以引用相应的数据源并展示在页面上。

一个页面可能需要不同形式的数据，即诸多数据源才能满足一个页面的展示需要；我们通过对不同的页面要素引用不同的数据源，从而实现整体的可视化需要；

数据配置

  数据配置是指从后端数据库或其他系统获取数据，处理分析后，定义这些结果数据在前端组件的显示方式。比如定义柱状图的数据来源、横坐标显示日期，纵坐标显示日产量。

  数据配置的前置条件：在数据配置之前首先需要准备好后端服务接口，以便提供数据。

  数据配置的应用场景：图表组件配置，表单数据的修改，下拉选择框的选项配置等

  下面分别介绍不同组件的数据配置方式：

  1、文本组件

如下图，选择对应的数据源工作台指标，选择指标中的销售额

2、图表组件

如下图折现图，选定数据源后，可以定义横轴、纵轴等

3、表格组件

如下图表格，选择数据源后，可以定义表格中需要展示数据源中的哪几个字段，并且可以配置操作项；

4、输入组件设值

如输入组件可以设置，可以设置默认值，可以引用数据源展示相应的值；正常情况下输入组件与按钮组件共同时间，将填写的数据提交保存到数据库中；

因此我们需要强调的是，引用并展示数据只是我们功能的一部分；也可以通过定义一个写入的后端服务，用于向数据库保存数据；

5、选项组件配置

比如多选项时，选项构成可以引用数据源返回的数据；也可以自定义选项；一般也是与按钮或事件行为放在一起时发挥相关的作用；

事件行为

  事件行为是指用户操作页面组件而触发的响应流程。比如用户点击“新增”按钮跳转到新页面，目前平台支持四种事件：点击事件、值变化事件、页面装载和页面重载事件。点击事件用户点击组件触发的响应流程，值变化事件用于输入类组件值发生变化而触发的响应流程，页面装载事件是指在页面第一次构建时的响应流程，页面重载事件是指再次返回已经构建好的页面时触发的响应流程。

四种事件分别演示一下

而针对事件响应最为常见的方式有以下组件

数据刷新

数据刷新是驱动组件主动重新加载数据，并更新组件的数据。组件的数据绑定了数据来源的某一项。当某个组件被执行数据刷新行为，则该组件则调用数据该数据来源加载数据并刷新。比如在页面查询组件中输入查询条件，点击查询按钮，在响应流程上刷新图表组件，图表组件就会根据查询条件获取数据并进行刷新并显示最新查询数据

页面跳转

页面跳转则是把当前页面跳转到一个新页面，如果新页面接受入参，则可以把当前前面的数据值传送到新页面中，实现两个页面间的数据传递。

页面返回

  页面返回则是返回到前一个页面，从那个页面跳转到当前页面，则自动返回到上个页面。

弹出层

弹出层则是在当前页面弹出一层显示其他页面，包含对话框、左右侧弹框和上下侧弹框。弹框中的内容则指向另一个页面。

条件判定

  条件判定则是在页面前端判断值的状态，并根据值的状态执行不同的行为分支。条件判定有两个分支路线，分别是条件为真和条件为假。

接口调用

接口调用是发起后端的接口调用，收集前端的数值通过接口调用传递掉后端服务，进行业务处理并保存到数据库中。