designable和formily实现简单的低代码平台学习

🧩 Formily 从 Designable 到运行态全流程解析

源码仓库：github.com/alibaba/for...

阶段	框架	作用	输出
🧩 设计态	Designable	拖拽组件、配置字段属性	生成 Schema（JSON 格式）
🗄️ 后端	存储层	保存 Schema 到数据库	`schema: string (JSON)`
🧠 运行态	Formily	前端根据 Schema 渲染真实表单	`const form = createForm(); <SchemaField schema={schema} />`

✅ 复杂表单场景更轻松：适合字段多、联动复杂、条件渲染的表单；
✅ 低代码支持 ：使用 Schema 描述字段、校验、联动逻辑，摆脱大量重复的 <Form.Item>、useState、onChange；
✅ 性能优化良好：针对大规模动态表单优化渲染，不会整表单频繁刷新；
✅ 可扩展：支持自定义组件、响应式计算、设计器接入。

输入：组件元信息（注册表）
输出：Schema（JSON）

用户在可视化设计器中 拖拽组件 → 属性编辑 → 保存；
Designable 内部使用 TreeNode 描述组件层级；
每次操作封装为 Operation（支持撤销 / 重做）；
设计器引擎 Engine 将 NodeTree 转换为标准 JSON Schema：
ts 复制代码
```
const schema = engine.getCurrentTree().serialize();
```
前端通过 API 将 schema 持久化保存到后端。

📦 产物： schema.json（表单结构模板）

输入：schema
输出：schema + config

输入：schema + config
输出：渲染出的动态表单与字段绑定关系

Formily 是一个 Schema 驱动的表单渲染引擎 。

它不会写死表单结构，而是解析 schema 中的层级关系、组件类型与修饰器，动态生成对应的 React 节点。

加载后端返回的 schema 与 config：

ts 复制代码

const { schema, config } = await fetch("/api/schema-config").then((res) =>
  res.json()
);

创建表单实例与组件映射：
ts 复制代码
```
const form = createForm();
const SchemaField = createSchemaField({
  components: { FormItem, Input, Select, Switch, Text },
});
```
每个 x-component 对应一个真实 React 组件：
- "Input" → <Input />
- "Select" → <Select />
- "Switch" → <Switch />
- "x-decorator": "FormItem" 决定是否包裹在 <Form.Item> 内。
初始化表单数据：
ts 复制代码
```
form.setValues(config);
```
渲染阶段：
tsx 复制代码
```
<FormProvider form={form}>
  <SchemaField schema={schema} />
</FormProvider>
```
- Formily 递归遍历 Schema 树；
- 每个节点生成对应的 Field；
- schema.name 映射为 form.values 的字段路径；
- 属性（placeholder、title、x-validator 等）自动绑定。

Schema 字段	数据路径	渲染组件类型	示例
`discord_link`	`form.values.discord_link`	`Input`	Discord 链接输入框
`title`	`form.values.title`	`Text`	静态文本标题
`isVisible`	`form.values.isVisible`	`Switch`	布尔开关

Formily 根据 schema 自动完成 字段注册、依赖追踪与响应式更新。

输入：用户交互数据
输出：新的 config

点击保存按钮后提交到后端：

ts 复制代码

fetch("/api/config", {
  method: "POST",
  body: JSON.stringify(form.values),
});

📄 最终结果：

结构（schema）与数据（config）完全解耦，可复用、可版本化、可低代码配置。