4.2.3 运维前端开发
基础概念
SREWorks为提升前端功能迭代效率，基于React前端框架，设计了一套完整的组件映射、布局、解析、渲染的工程：用户通过前端设计器，可对组件进行自由布局，进而快速落地功能需求。
在技术原理上，通过本前端设计器经过编排设计的前端页面，产生的制品为JSON配置文件，需要搭配SREWorks-frontend的渲染引擎方能正常使用，与直接产出js+css代码的低代码设计方案存在一定差异。
SREWorks的低代码前端设计方案，旨在提升管理控制类应用的前端开发速度，故整体方案较少考虑炫酷的交互设计。
开发第一个应用
我们以开发一个简单的应用为例，由浅入深了解一下SREWorks前端设计器的交互流程和功能特性。
菜单树与路由
对于一个前端应用而言，开始设计应用前，就需要考虑页面及路由。在SREWorks前端设计器中，菜单树是一个非常重要的组成部分。它用于管理应用的各个页面，使得用户可以方便地切换页面和访问所需的功能。
在编辑器的右侧，即为菜单节点树，用户点击 齿轮⚙️ 按钮即可 新增子菜单。网页在渲染的时候，会根据URL来渲染不同的子菜单，如果不传入特定URL，则默认渲染第一个子菜单中的元素。当前最多支持5级的子菜单，超过5级的子菜单页面将不进行渲染。
菜单路径
菜单路径 属性为浏览器上访问的路径：点击进入该菜单后，浏览器的地址栏将该路径刷入。如果用户直接将这个浏览器地址复制发给另外一个人，另外那个人也能看到完全一样的内容。
这个菜单路径是相对路径，而不是绝对路径，菜单路径与整个页面的访问关系示意如下：
├── 第一级菜单 菜单路径: a1 完整访问路径 #/a1
└── 第一级菜单 菜单路径: a2 完整访问路径 #/a2
└── 第二级菜单 菜单路径: b1 完整访问路径 #/a2/b1
└── 第三级菜单 菜单路径: c1 完整访问路径 #/a2/b1/c1
隐藏子菜单
默认情况下，在每个页面中都会有一个导航栏展示所有的子菜单，用户开启菜单的 是否隐藏 属性后，该菜单即会从导航栏中消失。该功能多使用于带参数的明细页，不在导航中展示，通过列表带参数进入。
菜单序号
如果用户需要对导航栏中展示的子菜单进行排序，需要配置该参数：数字越小，排序位置越靠前。
页面设计器
画布
点击菜单节点后，能看到一个 主页面 ，我们可以在主页面的画布上进行前端组件的设计与编排。
点击页面中的 +添加行容器 ，就可以增加一个行容器用于放置前端组件。最中间的 选择组件 按钮，可以快捷地为这个容器设置上各种你想要的前端组件。
默认一个 行容器 可放置一个前端组件，点击行容器左上角的 编辑✒️，可以调整这个行容器中的布局，调整分割后的 行容器 可按需并列放置多个前端组件。
前端组件
在具体设置了某个组件后，这个组件的上方会出现 编辑✒️，可以对这个前端组件的属性进行设置，使其这个组件按照用户的需求展示。
组件配置
通用属性
每个组件均会包含下面这些属性：
- 组件标题：在组件头部的标题文本
- 组件卡片：这个组件外部是否包裹一层卡片，以增强布局的外观。
- 基础：默认样式，左上角有一个垂直方向上与主题颜色相匹配，高度等于单行文本高度的方块。
- 高级：与基础样式相比，去除了左上角的主题色色块，使之能适配更多的布局场景。
- 标题透明：将标题文本排除在卡片之外，只包裹组件主体。
- 透明：包括标题，但整个组件主体不包裹卡片边框。与 无卡片封装 相比，它增加了一个标题。
- 卡片可收起：在较多组件的时候，用户在浏览数据时，支持用户折叠组件以减少无关信息干扰，多用于控制面板类的场景交互。
- 卡片样式Style：在卡片样式不满足需求的的情况，可以借助该功能增强组件的样式。
组件属性
每个不同的组件均有不同的组件属性选项
组件数据源
每个组件本质上是对一组数据的可视化渲染，在组件数据源中，可以由用户指定不同的数据来源：
- API：最常见的获取数据的方式，提供请求前参数处理以及数据返回后自定义函数清洗能力。
- JSON对象：静态的JSON对象，不可变。
- 函数：数据直接来源于自己定义函数的执行结果，该函数不可获取外部数据，如有该需求建议使用API+自定义函数清洗来实现。