背景
日常开发中，前端对接后端接口，调试后端接口，接受返回响应参数。根据后端提供的字段匹配UI元素，平凡且频繁的工作。日常的开发中，更多是对类似的页面做代码文件的复制粘贴，类似的页面还得是前端开发者较为熟悉，然后才能对复制的内容进行修改、对齐接口、对接请求字段、对接响应字段。前端开发者在联调前，想要得到一个较为完善的模板代码较为麻烦。
介绍
在约定式的组件库中，我们可以通过配置化，解决一部分封装组件的UI构建问题，并且在工具的配合下，读取接口文档地址，生成我们所需要的组件元素，快速对齐接口。同时又能做代码做调整，快速插入组件代码、业务代码片段，辅助开发者快速实现重复性工作。
系统设计
-
web端使用的技术
文件操作api ( File System Access API )
由于Chrome 浏览器提供了File System Access API，前端web可以在浏览器操作编辑本地文件。同样浏览器也对于web运行环境进行了限制，允许在安全环境（HTTPS环境可用）下由用户操作调起api。具体接口信息请查阅文档，此处不一一介绍。
前端存储 (IndexedDB)
IndexedDB是客户端大量存储结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。具体接口信息请查阅文档，此处不一一介绍。
-
客户端功能点
swagger 解析：根据后端提供swagger 接口地址，解析api-docs，获取接口传参实体、接口响应实体，接口信息调用IndexedDB前端存储api存储接口信息。
生成ts类型代码：根据后端接口信息，生成ts类型代码。
代码编辑：编辑代码字符串
1、调用Chrome File System Access API 选择代码文件，获取代码字符串。
2、根据管理端配置的代码模板，获取模板代码字符串。
3、模板代码根据swagger接口信息，导入字段拓展字段
代码解析：获取代码字符串，并解析代码。
1、获取视图 html 树型结构，属性节点调整
2、获取组件属性、关联管理端配置
3、配置属性拓展，根据swagger解析结果匹配拓展字段
