低代码平台或表单生成器应该怎样设计?

先理解原理和示例,再练习完整口述与追问。

核心是 Schema 驱动:用 JSON 描述组件类型、属性、校验、布局与联动规则;设计器负责拖拽编辑并产出 Schema;渲染器根据组件注册表把 Schema 渲染为页面。联动用声明式表达式或规则引擎,撤销重做基于命令或快照历史,Schema 需要版本号和迁移脚本,自定义能力通过受控的插槽或扩展组件开放。

组件注册表把 Schema 中的 type: 'input' 映射到真实组件,并提供属性面板配置描述(可编辑哪些属性、类型、默认值),这样新增物料只需注册而不改核心。表单值存储在统一的 model 中,字段通过路径(如 address.city)读写;校验规则可以复用 async-validator 或 JSON Schema 的约束。

联动包括显示隐藏、禁用、选项来源、值计算,例如 visible: "{{ model.type === 'company' }}"。执行表达式时不能用 eval 或 new Function 运行任意代码,应使用受限的表达式解析器或白名单函数,防止配置者注入脚本。撤销重做可以记录每次操作的正向与反向补丁(Immer 的 patches),设计器中的选中态、拖拽状态不进入历史。

json
{
  "version": 2,
  "fields": [
    { "id": "type", "type": "radio", "label": "主体类型", "options": ["person", "company"], "required": true },
    { "id": "companyName", "type": "input", "label": "公司名称", "rules": [{ "required": true }],
      "visibleWhen": { "field": "type", "equals": "company" } }
  ]
}

渲染器遍历 fields,根据 visibleWhen 计算显隐;隐藏字段不参与校验,提交时按业务规则决定是否清空。

一开始就追求“万能”会让 Schema 复杂到难以维护,应从高频场景抽象;配置化程度越高,调试越难,需要提供预览、校验和错误定位。权限与数据接口仍需服务端控制。

我会以 Schema 为核心:JSON 描述组件类型、属性、校验和联动;设计器负责拖拽和属性编辑生成 Schema,渲染器通过组件注册表把 Schema 映射成真实组件,新增物料只需注册。联动用声明式规则或受限表达式,不直接 eval;撤销重做记录操作补丁;Schema 带版本号并提供迁移。先覆盖高频场景,复杂逻辑留扩展点,不追求万能配置。