Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布，支持导出 SQL功能!

无懈可击2026-11-09 11:11

FcDesigner 是基于 Vue 的低代码可视化 AI 表单设计器。用自然语言描述业务即可生成表单结构，也可以拖拽组件并导出 JSON，再由渲染器还原成可交互表单，适合政务、OA、ERP、电商和流程审批。

源码地址: Github | Gitee | 文档 | 在线演示

核心功能

  • 内置表单多语言体系，轻松打破语言隔阂。
  • 提供 30+ 常用组件，涵盖表单组件、布局组件、辅助类组件等各类实用模块。
  • 支持灵活扩展自定义组件，个性化开发轻松拿捏。支持二次扩展开发，深度定制不在话下。
  • 支持组件样式配置，动态调整组件尺寸、颜色、间距等样式属性。
  • 支持事件交互配置，灵活配置组件事件响应逻辑，实现复杂交互场景。
  • 内置 AI 表单助理，让表单开发更快、更稳、更智能。
  • 表单大纲、操作记录、数据录入、组件生成、事件配置、表单验证、栅格布局、表格布局等。

3.6 版本更新内容

1. 预览支持导出 SQL

预览弹窗新增「生成 SQL」面板，可根据当前表单生成建表语句，并对比历史表结构，输出新增表、删除表、新增字段、删除字段、修改字段和重命名字段的变更语句。设计器同时提供 getSQL、getSQLDiff 方法，方便在业务侧直接取用。只有字段设置了必填时，才会生成 NOT NULL。

2. 提示信息支持 HTML 编辑

组件的提示信息现在可以直接用 HTML 编写。内容里包含换行时，输入框会变为只读，点击后打开编辑弹窗，避免长文本在输入框里难以维护。 (需要 formCreate 版本>= 3.3.6或2.7.32)

3. 新增按钮组组件

Element Plus 与 Ant Design Vue 新增按钮组组件，可在一组按钮中统一配置尺寸和类型，并直接编辑每个按钮的文字。Element Plus 的按钮还支持文字按钮样式，以及文字按钮背景色。

4. 预览弹窗可按需显示

预览弹窗中的表单、生成组件、生成 HTML、生成 SQL 四个面板，现在都可以单独控制是否显示，方便按使用场景收起不需要的内容。

5. 表格表单列标题支持多语言

表格表单的列标题已接入多语言配置，不同语言下可以分别维护列名，预览和渲染时会按当前语言显示。

6. 校验与事件编辑更容易上手

验证规则的下拉选项补充了说明文字，选规则时就能看到适用场景。事件函数和自定义校验的代码编辑器也增加了占位示例，打开编辑器就能看到参数说明和写法参考。

7. 功能优化及 BUG 修复

✅ 新增 Ant Design Vue 选择器支持搜索，并可指定按选项标签或选项值匹配

✅ 新增 Element Plus 树形控件支持禁用配置

✅ 新增 Vant 选择器支持清除图标

✅ 优化 多语言选择列表的表头样式

✅ 优化 设计器图标字体

Element Plus版本表单设计器

@form-create/designer 支持 Vue 3 环境，以下是如何在 Vue 3 项目中安装和使用该库的指南。

演示站

安装

首先，安装 @form-create/designer 的 Vue 3 版本

kotlin 复制代码 
npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sql 复制代码 
npm update @form-create/element-ui@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// 创建 Vue 应用
const app = createApp(App);
// 使用 Element Plus 和 FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<!-- 引入 Element Plus 样式 -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- 引入 Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- 引入 form-create 和 designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer></div><script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(FcDesigner);
    app.use(FcDesigner.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer ref="designer" height="100vh" /></template><script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

AntDesignVue 版本PC端表单设计器

演示站

本项目采用 Vue3.0 和 Ant Design Vue 进行页面构建，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

安装

首先，安装 @form-create/antd-designer

kotlin 复制代码 
npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sql 复制代码 
npm update @form-create/ant-design-vue@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// 创建 Vue 应用
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- 引入 Vue 及所需组件 -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- 引入 form-create 及 fcDesigner --><script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer></div><!-- 挂载组件 --><script>
    // 创建 Vue 应用实例
    const app = Vue.createApp({});
    // 挂载 AntDesignVue
    app.use(antd);
    // 挂载 fcDesignerPro 组件
    app.use(FcDesigner);
    // 挂载 formCreate
    app.use(FcDesigner.formCreate);
    // 挂载 Vue 应用
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer ref="designer" height="100vh" /></template><script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

移动端表单设计器

演示站

本项目采用 Vue3.0 和 ElementPlus 进行移动端页面构建，移动端使用的是vant4.0版本，内置多语言解决方案，支持二次扩展开发，支持自定义组件扩展。

安装

首先，安装 @form-create/vant-designer

kotlin 复制代码 
npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant

如已安装旧版本渲染器，请执行以下命令更新至最新版：

sql 复制代码 
npm update @form-create/element-ui@^3
npm update @form-create/vant@^3

引入

Node.js 引入

对于使用 Node.js 的项目，按照以下步骤在您的 Vue 3 项目中引入并配置：

js 复制代码 
import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// 创建 Vue 应用const app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// 挂载应用
app.mount('#app');

CDN 引入

如果您选择使用 CDN，可以按照以下步骤在 HTML 文件中引入相关依赖：

html 复制代码 
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer-mobile height="100vh"></fc-designer-mobile></div><script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(vant);
    app.use(FcDesignerMobile);
    app.use(FcDesignerMobile.formCreate);
    app.mount('#app');
</script>

使用

在 Vue 3 组件中，您可以通过以下方式使用 fc-designer 组件：

html 复制代码 
<template>
    <fc-designer-mobile ref="designer" height="100vh" /></template><script setup>
    import { ref } from 'vue';
    // 可以在此处获取设计器实例或进行其他操作
    const designer = ref(null);
</script>

获取设计表单的数据 ​

在表单设计器中，可以通过以下方法获取表单的生成规则和配置，这些数据通常会被保存到数据库中，以便后续加载和回显。

js 复制代码 
//获取表单的生成规则
const ruleJson = this.$refs.designer.getJson();
//获取表单的配置
const optionsJson = this.$refs.designer.getOptionsJson();


//todo 保存JSON数据到数据库中

这些数据可以用来保存到数据库中，确保表单的状态和配置可以在页面刷新或重新加载时恢复。

回显设计表单 ​

当需要回显设计好的表单时，您需要加载之前保存的 JSON 规则和配置，并将其应用到设计器中。

js 复制代码 
//todo 加载表单JSON规则
//回显表单
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);

通过这些方法，可以将之前保存的表单规则和配置应用到设计器中，从而恢复表单的状态。

表单渲染 ​

要渲染表单，您需要挂载 form-create 到 Vue 应用中，并加载表单规则和配置。

js 复制代码 
//从设计器中导入 formCreate
import {formCreate} from '@form-create/designer';
//挂载 formCreate
app.use(formCreate);

表单渲染示例

html 复制代码 
<template>
    <div id="app">
        <form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
    </div></template><script>
    import {formCreate} from '@form-create/designer';
    export default {
        data() {
            return {
                //实例对象
                fApi: {},
                //表单数据
                formData: {},
                //表单生成规则
                rule: [],
                //组件参数配置
                option: {}
            }
        },
        beforeCreate(){
            const rule,option;
            // todo 加载表单JSON规则
            this.rule = formCreate.parseJson(rule);
            this.option = formCreate.parseJson(option);
        }
    }
</script>

动态加载和保存表单配置 ​

可以通过 API 请求动态加载表单规则和配置，并将表单数据保存到服务器。

js 复制代码 
import axios from 'axios';


// 加载表单配置
async function loadFormConfig() {
    try {
        const response = await axios.get('/api/form-config');
        return response.data;
    } catch (error) {
        console.error('加载表单配置失败', error);
        return { rule: [], option: {} };
    }
}


// 保存表单配置
async function saveFormConfig(ruleJson, optionsJson) {
    try {
        await axios.post('/api/form-config', { rule: ruleJson, options: optionsJson });
    } catch (error) {
        console.error('保存表单配置失败', error);
    }
}

相关链接

相关推荐
ZzT16 分钟前
vibe coding 做小游戏·玩法重做篇：只留自走棋、去掉羁绊，用电脑自动对局调难度
ai编程·游戏开发
灵感__idea20 分钟前
Claude Code 实战：AI这么强了，为什么还在发明新概念？
aigc·ai编程·claude
Carson带你学Android25 分钟前
AI时代，你的 App 会被 Agent 这三种方式调用
android·ai编程
装不满的克莱因瓶35 分钟前
【SpringAI Alibaba】ReactAgent记忆管理MessageTrimmingHook与MessageDeletionHook
java·人工智能·ai·ai编程·springai·springaialibaba
徐小夕44 分钟前
JitArchives，一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
西安小哥1 小时前
给 LLM 网关加一层熔断：主模型挂了 42 秒以后我做的事
ai编程
狂师2 小时前
把别人的软件拆开看，推荐5个主流逆向工具
安全·程序员·开源
聪明的笨猪猪3 小时前
政务知识库AI架构选型：强合规约束下的架构决策与落地路径
经验分享·架构·ai编程·政务
头发还在的女程序员3 小时前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统：四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04几个好用的ip纯净度检测网站05GitHub 镜像站点06苹果iPA游戏软件资源下载网站07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战10Dify：一站式AI应用开发平台全解析与Windows部署指南