简介 ⛏️
- Github
- 点我体验
- 当时写这个平台主要是因为毕业几年基本做的都是后台管理系统。后台管理系统用的最多且需要配置的组件的就是Table、Form和弹窗这三个组件。
- 这几个组件都已经写的滚瓜烂熟,但是表格字段、表单项都是根据业务需求一直变化的。
- 这就导致我们我们需要一直重复的写Tbale、Form这些表单组件,然后把字段信息填上去。
- 工作一年后,我就在想可不可以写一个平台,提供方便配置表格字段和表单项的方式,然后把重复的代码根据模板生成出来,提供代码预览、复制和导出功能。
基本功能 🔥
如下图所示,左侧分别是对应Table、Form、Modal和自定义内容的组件(组件可以添加表格、表单和普通文本)。
中间部分是预览区域,根据配置生成预览界面。同时预览区域也可以做一下配置,比如添加字段,拖拽改变字段顺序等等
右边则是配置区域,一般会有组件的属性配置,比如下图的Table配置就是全部填充到Table组件里面的参数
全部配置则有导出代码时。导出文件名及后缀名的配置(目前支持jsx和tsx两种文件导出)
此外还有组件的名称、保存配置生成模板的名称都在此处配置
此外点击中间预览区域的表头,还会出现字段的配置
基本操作 ✏️
一. 代码预览
当你做好配置时,可以点击左上角的预览按钮,右边就会打开一个抽屉
里面是包含该组件根据定义的配置生成的代码,可以直接复制到项目里使用
二. 导出代码
如果希望将其导出为一个jsx或者tsx文件,复制到项目里使用可点击导出代码按钮,会下载一个文件
文件名后缀名可以在全局配置里面自定义
三. 保存配置
点击保存按钮,会将本次配置的保存为一个模板,下次进来可以点击模板Tag快速加载配置。可以保存多个模板。
四. 导出模板 & 导入模板
- 将保存的模板导出为配置文件,可以分享给别人,然后通过导入配置的方式,加载别人定义的模板配置
- 比如我把这个平台丢给后端,然后说表格、表单的接口字段名可以在这上面进行配置,接口定义好之后将其保存为
模板,然后导出发给我 - 直接减少接口定义之前,静态页面的开发时间。前提是后端会配合,哈哈哈,大概率不会。
- 希望后续可以把这个平台开发成产品经理可用的,产品在这里画简单的原型,然后导出给前端使用。前端又有时间Touch Fish了,嘻嘻嘻
组件介绍 🏆
这里只介绍弹窗组件,因为弹窗的内容可以配置表格、表单Form和文本DOM
- 各个组件的全局配置需要点击中间预览区域的空白处
- 弹窗的内容,文本、表格、表单都是可以增删、拖拽排序的
- 表格和表单的全局配置则需要点在表单、表格的空白处,但不是字段的区域
- 那字段的配置,则是直接点击字段区域右侧就会加载对应的字段配置
- 表格字段配置和字段拖拽排序都是需要点击表头
- Form表单直接点击拖拽表单字段即可
最后 🚁
功能其实非常简单,大家在上面的点我体验几分钟就能熟悉使用
既然看到这里了,码字不易多谢各位靓仔靓妹给个点赞收藏,最好Github上能给我点个小小的Star,万分感谢
最后觉得这个项目可以提高开发效率,可以加我微信vgbire。
我们拉群探讨一下低代码相关的知识、技能来完善这个项目。以减少开发时间,提高摸鱼效率(坏笑.jpg)