背景
在日常开发过程中,管理端的开发是比较常见的,管理端页面开发重复性工作占比较高,模式化开发更容易在复制粘贴中完成。常常在开发阶段,确定了稳定的脚手架后,开发人员参与开发,前端UI的构建、接口对接会耗费较多的时间。UI组件需要遵循固定的UI风格,UI组件库是否需要细微调节,UI组件是否满足业务需求,UI组件跟接口字段对接等问题,都需要开发一一解决。因此想建立一条开发管理端生产线,提供核心能力,减少重复工作,减少开发者初始化成本。
介绍
本次设计主要做的是设计一个完整的生产流程,本次流程囊括了生产需要的物料、开发标准、开发工具、CI/CD、消息通知。
- 物料UI库:基于antd pro 定制业务组件,统一交互,快速实现功能。基于dumi文档组件说明。
- 代码工具:快速对接swagger文档,配置化组件属性,提供组件、模板、代码片段编辑能力,提供代码模板生成能力。
- 持续构建:集成持续构建能力,集成构建消息通知
系统设计
设计基本实现:
设计的核心为代码工具、业务UI。开发者通过代码工具基于业务UI组件快速生成可以二次编辑的代码。 业务UI作为一个单独工程提供给开发项目物料组件。开发者完成代码二次开发后,触发持续构建用于部署开发、测试、生成环境。
业务UI
1、业务组件封装能力
antd pro 阿里提供的高级组件,再经过业务二次封装,把业务上统一的UI风格、统一的业务二次封装。沉淀业务组件物料。
2、组件文档
dumi 阿里使用的一款为组件开发场景而生的静态站点框架。构建我们完成的UI物料说明
代码工具功能架构
通过管理端配置的组件、代码间关系,在服务端生成目标代码串,客户端提供对文件代码输入、输出能力,生产可以二次编辑开发的代码文件。
功能清单
*第一次写项目介绍,如果不准确之处,请斧正。感谢阅读