企业官网建设流程全解析

form-create-designer工作原理剖析：设计器如何渲染、生成与实时更新JSON表单规则

【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer

form-create-designer（FcDesigner）是一款 Vue 低代码可视化表单设计器，你只需拖拽组件、点击配置，它就能实时渲染出表单画布，并生成可落库的标准 JSON 表单规则。本文将从源码视角剖析它的工作原理：画布如何渲染、JSON 规则如何生成、配置修改又是如何实时更新并双向同步的。

一、整体架构：三栏式布局的可视化表单设计器

整个设计器由一个核心组件撑起——FcDesigner.vue，采用经典的三栏布局：

左侧组件菜单来自 menu.js 定义的分组结构，具体组件则由 config/index.js 中注册的 40+ 条规则（ruleList）填充。

💡 一个有意思的事实：设计器自己就是一个"表单"——它用 FormCreate 渲染了"用来设计表单的表单"，这是理解其工作原理的钥匙。

二、画布渲染：每个组件如何被"包装"成可拖拽单元

1. 规则定义：组件 = 一份 JSON 模板

以输入框为例，看 config/rule/input.js，每个组件规则都定义了：

• rule()：创建组件时的初始 JSON 规则（type、field、title 等）
• props()：右侧属性面板的"元表单"规则（disabled、type、maxlength……）

也就是说，组件本身和它的配置面板，都是用 JSON 规则描述出来的——这就是低代码"表单描述表单"的核心思想。

2. makeRule：给规则套上拖拽外壳

当组件被拖入画布，FcDesigner.vue 中的makeRule()会做三件事：

1. 注入元信息：打上_fc_id（唯一标识）、_menu（原始配置）、自动生成的name与field；
2. 包裹 DragTool：把真实规则包进一层 DragTool.vue 壳，提供选中高亮、移动、复制、追加子项、删除等操作按钮；
3. 可嵌套容器加 DragBox：若组件支持子项（如 Row、Tabs），则通过 DragBox.vue 结合 vuedraggable 生成嵌套拖拽容器，并挂载dragAdd / dragEnd / dragStart回调。

最终，画布上你看到的每一个"虚线框 + 按钮"，都是DragTool（外壳）→ DragBox（可嵌套容器）→ 真实组件的三层结构。

3. 用表单渲染画布：designerForm 工厂

utils/form.js 里有两个关键实例：

• viewForm：负责渲染"预览态"表单（打开预览、数据录入时使用）
• designerForm：由formCreate.factory()创建的设计态专用工厂，渲染中间画布

初始化时执行data.dragForm.rule = makeDragRule(children)，把整棵规则树交给 FormCreate 递归渲染。由于规则是 Vue 响应式数据，只要数据变化，画布自动重渲染——不需要任何手动刷新逻辑。

三、配置面板：字段修改如何实时写回 JSON 规则

选中组件后，右侧面板会出现 5 个由 JSON 规则驱动的"元表单"（baseForm / propsForm / styleForm / validateForm / eventConfig），面板模板分别来自 base/field.js、base/style.js、base/validate.js。

实时同步靠一对"双向函数"：

1. 拉取：updateRuleFormData（规则 → 面板）

updateRuleFormData() 在激活组件时把activeRule的每个字段、props 子项展开成表单值（如formCreateProps>label），填充到配置面板中。

2. 回写：handleChange（面板 → 规则）

当你在面板里修改任意值，handleChange() 会解析字段路径（支持props>这类深层路径），直接修改activeRule上的对应属性。空值自动删除字段，保证 JSON 干净。

⚡ 因为规则对象本身是响应式的，这一改就触发画布组件即时重渲染——改即所见，全程零延迟。

四、JSON 表单规则生成：parseRule 如何"脱壳还原"

画布里存的是带 DragTool/DragBox 外壳的"设计态"规则，而对外输出需要纯净的业务 JSON。关键在 parseRule()：

1. 递归脱壳：遇到DragBox直接取 children 展开，遇到DragTool取其内部第一个子规则；
2. 剥离内部字段：删除_menu、key、component、_fc_drag_tag、所有__开头的运行时属性；
3. 还原别名：把_control、_on、_hidden等带下划线前缀的临时字段还原为正式字段；
4. 清理空值：空对象、空数组、null 属性一律剔除。

最终对外接口非常简洁：

• getRule()：parseRule(deepCopy(dragForm.rule[0].children))，得到纯净规则对象
• getJson()：交给designerForm.toJson()输出 JSON 字符串
• getOptionsJson()：同理导出表单级配置（提交按钮、事件、多语言等）

反向流程由 loadRule() 完成：把外部 JSON 重新匹配组件配置、补全_fc_id与 field，再经makeRule包壳，交给 setRule() 重建画布——这就是"导入已有表单继续编辑"的底层原理。

五、实时更新机制：双向同步、操作记录与结构树

1. JSON 面板双向同步

左侧 JSON 面板由 JsonPreview.vue 实现，双向机制很精巧：

• 画布 → JSON：mounted时 deep watchchildren，画布任何变动都会实时刷新 JSON 编辑器（JsonPreview.vue）；
• JSON → 画布：编辑器blur时对比旧值，若 JSON 有改动则调用setRule/setOptions反向重建画布（JsonPreview.vue）。

因此无论是拖拽组件还是手改 JSON，两边永远一致。

2. 操作记录与撤销重做

watchActiveRule() 对activeRule做深度监听；拖拽、删除、复制、排序等操作统一收敛到 addOperationRecord()，最多保存 20 步快照，配合 Ctrl+Z / Ctrl+Shift+Z 实现撤销重做。属性连续修改则走 3 秒节流的记录策略，避免记录爆炸。

3. 结构树的防抖更新

左侧结构树依赖 updateTree()，以 300ms 防抖 + nextTick 重新遍历规则树生成treeInfo，在高频拖拽场景下保持流畅。

4. 快捷键与复制粘贴

设计器还内置了一整套效率快捷键：Ctrl+C / Ctrl+X 复制规则（以FormCreate:前缀写入剪贴板）、Ctrl+V 粘贴、↑↓ 调整顺序、Delete 删除、1~4 切换面板（FcDesigner.vue）。粘贴时自动批量替换 field 与 ID，避免字段冲突——细节决定体验。

六、从设计到交付：预览与模板导出

点击"预览"按钮时，openPreview() 会先调用getJson()生成纯净规则，再用 template.js 中的三套模板一键产出可运行代码：

• 表单模式：viewForm渲染真实表单，可直接填写、提交验证；
• 组件模式：生成 Vue 组件完整代码（含script setup写法）；
• HTML 模式：生成引入 CDN 的独立 HTML 页面。

再配合左侧的 AI 助理面板，用自然语言描述需求即可批量修改表单规则，进一步压缩开发链路。

总结：一张图看懂数据流

组件规则(config/rule/*.js) │ makeRule 包壳 ▼ 设计态规则树(data.children) ──响应式渲染──▶ 中间画布(DragForm) │ ▲ │ 选中/配置修改 拖拽事件 ▼ │ 右侧配置面板(updateRuleFormData) ──handleChange──┘ │ │ getRule → parseRule 脱壳 ▼ 纯净 JSON 规则 ──▶ JsonPreview 实时预览 / 预览 / 导出模板 / 落库

form-create-designer 的精髓可以概括为一句话：用 JSON 描述组件、用 JSON 描述配置面板、再用 Vue 响应式把三者串成实时闭环。理解了这个"表单描述表单"的架构，你不仅能用好它，还能通过addMenu/addDragRule轻松扩展自己的业务组件。

【免费下载链接】FcDesigner好用的Vue低代码可视化 AI 表单设计器，可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率。支持PC端和移动端，目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。项目地址: https://gitcode.com/xaboy/form-create-designer