e-coding

前端低代码平台 e-coding
通过json配置生成组件，组件合成页面

• 一、 开发前准备
  • 1. 思路与计划
  • 2. 主要依赖
• 二、editor编辑器
  • 1. 整体布局
  • 2. 功能实现

一、 开发前准备

1. 思路与计划

1. 计划采用turborepo管理项目，分模块开发，包括editor编辑器，example示例；core核心包。通过拖拽组件，生成json配置，再将json配置转换为组件渲染。
2. editor编辑器，包含组件库，拖拽编辑，组件配置项等。
3. core核心包，包含组件渲染等。

2. 主要依赖

1. antd
2. react-dnd
3. redux

二、editor编辑器

1. 整体布局

1. 分三栏，左侧为组件库/json预览，中间为拖拽编辑区域，右侧为组件配置项。

2. 功能实现

1. 定义组件和页面的数据结构
   • ComponentSchema： 组件的json结构，包括id、type、children等。
   • PageSchema：页面的json结构，组件构成的数组。
2. 拖拽生成json
   • 使用react-dnd实现组件拖拽。
   • 中间画布接受拖拽事件，识别拖拽的组件类型，并生成唯一的组件id。
   • 创建组件Schema，并添加到页面中。
   • 如果将组件拖拽到容器组件中，则仅在容器组件中接受拖拽事件，阻止事件冒泡。
3. 组件渲染
   • renderComponent：递归渲染组件及子组件。
4. 组件选中
   • 在画布中，点击组件，组件进入选中状态。
   • 选中的组件id存入redux store中。
   • 右侧组件配置项，可调整选中组件的配置updateComponent。
   • 可删除选中组件，同时删除redux的选中组件id。
5. 组件面板
   • 组件配置项（包括组件内文本；组件样式：宽、高、位置、字体颜色、背景颜色等）。
   • 设置后可保存，保存后重新render组件。
6. json预览
   • 左侧可切换tab，查看生成的json配置。
7. 页面预览
   • 点击预览按钮，查看页面效果。