引言：《海马体设计中台- 低代码引擎》将分为两个篇章与大家进行详细介绍。今天我们先聚焦的是使用介绍篇，从项目背景、核心优势、内部研发流程优化、试用Demo以及分区功能等方面与大家展开交流，让大家更加深入地了解该项目的各项功能。在后续的篇章中，我们将进一步深入探讨项目架构、设计思想等内容。
1 海马体设计中台项目背景
随着公司业务增长，开发阶段会遇到诸多问题，如B端系统存在至少50% Crud 相似交互场景的页面，造成重复的开发成本和迭代成本；每个系统的ui视觉不一致，靠研发和ui设计对规范进行落地成本较高，很难让新伙伴快速落地规范；产品针对类似功能设计出不一样的交互，导致交互不一致，造成重复的研发成本。
针对以上问题，低代码引擎应运而生。它是一种通用的开发框架，通过对低代码平台系统常用的功能进行解构，将其划分为多个功能模块，并为每个模块定义了相应的协议和开发范式，使得开发者可以根据自身的业务需求，轻松定制开发出自己的业务系统。
图1 基于低代码引擎的开发流程
2 核心亮点
图2 低代码核心引擎的亮点
设计中台低代码引擎采用灵活的系统架构，和其出色的整体架构提供了高度的自定义自由度，使用户能够像搭建积木一样选择不同的模块来构建自己的专属设计器。此外，插件化的架构使得用户可以方便地扩展与业务相关的功能。
在设计中台低代码引擎中，插件根据位置大致分为三类：toolbars/plugins/settings，分别对应顶部区域、左侧区域和右侧区域。toolbars 插件主要偏向于无需 UI 或者 UI 较为简单的工具插件，plugins 是业务功能插件，显示在左（或下方）抽屉页面，可以通过点击进行展开收起或切换。
这些功能都像是独立的积木块，用户可以选择性地保留或删除。同时，用户也可以开发自己的插件或工具，并将其安装到对应的位置。设计中台低代码引擎的灵活性极强，可以自由地决定他们想要开发的业务界面。
3 常规研发流程和设计中台对比
「常规前端研发」和「设计中台」流程对比，以『设计中台标准化构建』为核心，详细介绍设计中台在业务中的使用流程，同时多维度讲解在使用过程的优势和开发体验。
图3 常规前端研发体系和设计中台研发体系的对比
通过对比常规前端研发体系和设计中台研发体系的4个阶段，可以直观的发现在页面设计、上下游协作、开发阶段、构建阶段都可以进行标准化、规范化和流程化。也可以发现通过设计中台完成的效率和错误率都大大减少。
- 提高研发效率：通过搭建平台快速搭建页面，并产出相应的代码。从单页面8h提升到1h时间
- 交互视觉设计一致性：通过搭建平台，规范了组件的视觉和交互效果，因为不能定制化开发功能，从而达到一致性
- 产品prd一致性：通过搭建平台，约束了产品 prd 的绘制方式，让产品能快速产出高还原的 prd
- 团队代码规范：利用交互一致、组件沉淀、标准化接口规范、直接生成代码文件规范化提升开发体验
4 试用设计中台（低代码引擎）Demo
低代码编辑器中的区块主要包含以下功能点：
图4 低代码编辑器的功能介绍
4.2 分区块功能介绍
4.2.1 左侧：面板与操作区
- 物料面板
可以查找组件，并在此拖动组件到编辑器画布中
- 大纲面板
可以调整页面内的组件树结构
- 源码面板
可以编辑页面组件数据的配置
- 出码
用于搭建完成的VUE3项目代码
4.2.2 中部：可视化页面编辑画布区域
点击组件在右侧面板中能够显示出对应组件的属性配置选项
拖拽修改组件的排列顺序
4.2.3 右侧：组件级别配置
- 选中的组件
从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上
- 选中组件的配置
当前组件的大类目选项，根据组件类型不同，包含如下子类目：
- 属性
组件的基础属性值设置
- 样式
组件的样式配置，如表格背景颜色
- 事件
绑定组件对外暴露的事件
- 高级
循环、条件渲染与 key 设置
4.2.4 实践-搭建列表查询页
- 创建tableData
- 接口绑定tableData
5 物料建设
图5 物料体系建设
强大的搭建能力少不了物料、组件、区块的支持，目前支持能力如下：
- 首先，建设前端物料体系，定义和统一前端的开发标准，建设前端物料资源体系，其中包括设计和单元测试等资源；
- 第二，实行工具化管理，完善工程体系，统一前端的开发流程和技术栈，保证资源复用率；
- 第三，制定协作流程，包括多人参与的发布流程、代码review流程、版本号管理等
- 最后也是最重要的就是渐进式开发，因为它决定了物料完成之后能不能达到最佳的复用率。
图6 海马体前端物料库文档
图7 海马体物料组件工具概览
6 总结
本文深入探讨了海马体设计中台的低代码引擎，一种灵活且高效的开发工具，旨在解决企业在业务发展过程中遇到的重复开发、视觉不一致以及交互不一致等问题。低代码引擎通过解构常用功能并划分为多个功能模块，为开发者提供了定制开发业务的自由度和便捷性。
本文重点介绍了如何通过搭建平台实现交互视觉设计的一致性和产品PRD的一致性。通过规范组件的视觉和交互效果，约束产品PRD的绘制方式，有效提升了开发体验。低代码编辑器中的功能点，如物料板、大纲板、源码板和出码等，使得开发者能更高效地搭建页面并产出代码。
海马体设计中台的低代码引擎是一种强大而灵活的开发工具，能够显著提高企业的研发效率和代码质量，推动业务快速发展。随着技术的不断进步和应用的深入，低代码引擎将在未来发挥更加重要的作用，为企业创造更大的价值。
本文作者
墨瑞，来自缦图互联网中心前端团队。
来源-微信公众号:缦图coder
出处:https://mp.weixin.qq.com/s/C9N8gIuR6kKFqnbrCiNPzQ