baizn/lego

📦 基于 react + antd 的可视化布局工具

可视化页面搭建

为什么要做这个东西，https://ltaoo.github.io/2018/02/09/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B8%83%E5%B1%80/

源对象

位于src/source/lib下的每个文件，都导出了一个对象，这个对象的结构如下：

enum SourceObj {
  // antd 组件
  Component,
  // 组件名
  label,
  // 在最终生成的代码 import { xx } from 'antd' 处使用
  import,
  // 在最终生成的代码 import 下方，正文上方使用
  extra,
  // 标志该组件是否为表单，影响编辑组件属性时的模态框
  notfield,
  // 出现在 constructor 函数内的代码
  constructorCode,
  // 就这个意思
  methods,
  // 会被添加到组件上的属性
  props,
}

最终生成的代码只从该对象得到，逻辑位于src/common/create-source.js。

对象实例

在选择组件后，会生成一个新的对象，该对象仅仅在SourceObj上添加uuid属性，

enum SourceInstance {
  uuid,
  // ...
}

组件

|-------------|------------|
|                          |
|      App                 |
|                          |
| |---------||-----------| |
| |         ||           | |
| | Source  || Container | |
| |         ||           | |
| |---------||-----------| |
|                          |
|-----------|--------------|

最顶层的组件是App，Source提供对象实例，Container负责渲染组件并提供编辑功能。

Source

路径为src/components/Sources，点击生成对象实例，并传给App组件。

App

路径为src/App.js，掌控一切，在state中维护了一个instances数组，存放所有的对象实例。

Container

路径为src/components/Container，说这个是掌控一切或许更加合理，内部都是Field组件。

Field

路径为src/components/Field，该组件是实际看到的，不仅是antd组件本身，还有编辑按钮，编辑表单等，对组件的编辑都会反映到实例对象上。

最终生成的代码和该组件没有关系，代码只和实例对象有关。