form-create-designer翻译站点

项目定位

form-create-designer 是一个基于 Vue 的低代码表单设计器，面向需要快速构建动态表单的开发场景。它将表单的创建过程从手写模板代码转变为可视化拖拽操作，同时内置 AI 辅助能力，用于生成表单结构或字段建议。

项目托管于 GitHub，采用开源方式维护，适用于管理后台、数据录入、审批流程等常见业务模块。

核心能力

可视化拖拽设计

设计器提供组件面板与画布区域，用户从左侧组件库中选择输入框、下拉选择、日期选择、单选框等常用控件，拖入画布即可完成字段添加。组件属性通过右侧配置面板调整，包括校验规则、默认值、占位提示、联动逻辑等，操作过程无需直接编写模板代码。

表单组件覆盖

内置组件涵盖基础字段、高级字段与布局容器三类：

组件支持自定义扩展，开发者可注册业务专用组件进入设计器组件库。

AI 辅助生成

设计器集成了 AI 能力，用户以自然语言描述需求，系统可生成对应的表单结构 JSON。例如输入“创建一个员工入职信息登记表单，包含姓名、部门、入职日期、紧急联系人”，系统将产出匹配的字段列表与基础配置。生成结果仍可在可视化界面中继续调整，保留了人工干预空间。

双端适配

设计器针对 PC 与移动端分别提供渲染方案。PC 端采用多列表单布局，移动端自动切换为单列堆叠样式，同一份表单配置可在两端保持字段逻辑一致，减少重复配置工作。

技术集成方式

项目以 npm 包形式发布，支持在现有 Vue 项目中按需引入。核心依赖为 form-create 渲染引擎，设计器负责产出 JSON Schema，渲染引擎负责最终表单展示与数据收集。

npm install @form-create/designer

引入后通过组件方式挂载：

<template>
  <fc-designer ref="designer" />
</template>

生成的 JSON Schema 可存储至数据库，运行时由 form-create 渲染为可交互表单，实现表单配置的持久化与动态加载。

适用场景

• 管理后台表单配置：允许运营或产品人员自行调整表单字段，减少开发介入
• 审批流程表单：不同流程节点挂载不同表单模板，动态渲染
• 数据采集页面：快速搭建问卷、报名、信息登记类页面
• 低代码平台基础模块：作为表单设计能力嵌入更大的低代码产品中

项目状态与使用建议

项目在 GitHub 上保持活跃更新，文档覆盖基础用法与进阶配置。使用前建议关注以下要点：

• 确认项目 Vue 版本与依赖兼容性
• 对 AI 生成结果进行人工复核，确保字段校验与业务规则符合预期
• 自定义组件需遵循 form-create 的组件规范进行封装

对于需要将表单设计能力嵌入自有产品的团队，该项目的模块化设计降低了集成成本，可作为表单设计器选型的参考方案之一。