后台系统的表单页面，永远是开发量最大、改动最频繁的部分。一个 OA 请假审批、一个政务申报流程、一个电商商品录入——每个场景都要写一堆重复的校验、联动、布局代码。FcDesigner 把这件事压缩到了"拖组件 → 配属性 → 导出 JSON → 渲染表单"这条链路上，v3.5 又补上了多语言和 AI 辅助生成的能力，值得认真看一看它怎么运作。
数据驱动：表单的"源码"是一份 JSON
FcDesigner 的核心思路很简单——表单不是用 Vue template 写的，而是用一份 JSON Schema 描述的。设计器负责生成这份 Schema，渲染器负责消费它。
这意味着：
- 设计态和运行态彻底分离。产品经理在设计器里拖拽调整字段顺序、校验规则，开发者不需要改一行代码，只需替换 JSON。
- 表单可持久化、可版本管理。JSON 可以存数据库、存 Git，回滚和 diff 都有据可查。
- 多端复用。同一份 Schema 可以喂给 Vue 渲染器，也可以喂给移动端或其他框架的渲染器（只要有人实现对应的 runtime）。
一份最简的表单 Schema 大致长这样：
{
"list": [
{
"type": "input",
"field": "username",
"title": "用户名",
"props": {
"placeholder": "请输入用户名"
},
"validate": [
{ "required": true, "message": "用户名不能为空" }
]
},
{
"type": "select",
"field": "department",
"title": "所属部门",
"props": {
"options": [
{ "value": "dev", "label": "研发部" },
{ "value": "hr", "label": "人事部" }
]
}
}
],
"config": {
"layout": "horizontal",
"labelWidth": 100
}
}
渲染器拿到这份 JSON，自动产出带校验、带布局的完整表单——不需要手写 <el-form> 和几十个 <el-form-item>。
拖拽设计器怎么跑起来
把 FcDesigner 装进项目只需要几步。以下示例基于 Vue 3 + Vite 项目，使用 form-create（FcDesigner 的底层渲染引擎）和 fc-designer 组件。
# 安装核心依赖
npm install @form-create/element-ui @form-create/designer
然后在入口文件注册：
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import FcDesigner from '@form-create/designer'
import formCreate from '@form-create/element-ui'
const app = createApp(App)
app.use(ElementPlus)
app.use(formCreate)
app.use(FcDesigner)
app.mount('#app')
在页面里放置设计器组件和渲染器组件：
<!-- FormDesigner.vue -->
<template>
<div style="display: flex; height: 100vh;">
<!-- 左侧：设计器 -->
<fc-designer
ref="designer"
style="flex: 1;"
@save="onSave"
/>
<!-- 右侧：实时预览渲染结果 -->
<div style="flex: 1; padding: 20px; border-left: 1px solid #eee;">
<h3>实时预览</h3>
<form-create
:rule="formRule"
v-model="formData"
:option="formOption"
/>
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue'
const designer = ref(null)
const formRule = ref([])
const formData = ref({})
const formOption = ref({ submitBtn: true, resetBtn: true })
// 设计器保存时拿到 JSON Schema，喂给渲染器
function onSave(schema) {
formRule.value = schema.list
formOption.value = schema.config
}
// 也可以随时从设计器实例取当前 Schema
watch(() => designer.value, (d) => {
if (d) {
formRule.value = d.getRule()
}
}, { immediate: true })
</script>
运行 npm run dev，打开页面就能看到左侧拖拽区、右侧实时渲染。拖一个输入框进去，右侧立刻出现对应的表单项——整个链路没有手写 template 的环节。
v3.5 的两个关键增量
内置多语言
政务和 ERP 系统经常要出中英文甚至更多语种的表单。v3.5 在 Schema 里加入了 i18n 字段，设计器界面本身也支持语言切换：
{
"type": "input",
"field": "email",
"title": "邮箱地址",
"i18n": {
"en": { "title": "Email Address" },
"zh-CN": { "title": "邮箱地址" }
}
}
渲染器根据当前 locale 读取对应文案，不需要为每个语种维护一份独立的表单代码。
AI 辅助生成
v3.5 集成了 AI 表单生成能力——在设计器里输入一段自然语言描述（比如"一个员工入职登记表，包含姓名、身份证号、部门、职位、入职日期"），AI 会直接产出对应的 Schema 并填入设计器。开发者再微调字段顺序和校验规则即可。
这个功能依赖外部 AI 服务接口，需要在配置中指定 endpoint：
// 设计器 AI 配置（伪代码，具体参数以官方文档为准）
const designerOption = {
aiConfig: {
apiUrl: 'https://your-ai-service.com/form-generate',
apiKey: 'your-api-key'
}
}
注意：AI 生成是辅助起步，不是替代设计。复杂联动、跨字段校验、自定义组件映射这些仍然需要人在设计器里手动调整。
什么时候该用，什么时候不该用
FcDesigner 适合的场景很明确：
- 高频变动的后台表单——OA 流程、政务申报、ERP 数据录入，字段经常增删改，用 JSON 替代 template 维护成本低很多。
- 非开发者也需要调整表单——产品或业务人员可以直接在设计器里操作，减少需求到开发的流转时间。
- 多项目复用表单结构——一份 Schema 可以在多个系统间共享。
但也有边界：
- 高度定制化的交互表单不适合。如果表单里有复杂的异步联动、动态计算、自定义绘制组件，拖拽设计器的表达力会不够，最终还是得回手写代码。
- 性能敏感的长表单慎用。几百个字段的表单，JSON 驱动渲染的递归解析会有开销，需要做分步或懒加载优化。
- AI 生成目前是起步加速器，不能指望它一次产出完美 Schema，复杂业务逻辑仍需人工补全。
上手检查清单
| 步骤 | 说明 |
|---|---|
| 确认技术栈 | 项目是 Vue 2 还是 Vue 3？选对应版本的 form-create 和 designer |
| 跑通在线演示 | 先在官方 Demo 里拖一个完整表单，导出 JSON，确认渲染结果符合预期 |
| 评估自定义组件需求 | 列出必须自研的表单控件，看 form-create 的自定义组件扩展接口能否覆盖 |
| 规划 Schema 存储 | JSON 存数据库还是存配置文件？版本变更怎么回滚？ |
| 多语言需求对齐 | 如果需要 i18n，确认 v3.5 的 i18n 字段格式能满足语种数量和切换方式 |
| AI 接口准备 | 如需 AI 生成，提前对接 AI 服务并测试返回 Schema 的准确率 |
FcDesigner 不是万能药，但在"大量重复表单、频繁改动、多人协作"这个特定问题上，它把开发循环从"写代码 → 测试 → 改代码"压缩到了"拖拽 → 导出 JSON → 上线"。v3.5 的多语言和 AI 生成让这个循环的起点更快了一步——值得花半小时跑通 Demo，再决定是否深入。