FcDesigner 是一款基于Vue的开源低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

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

随着 AI 在表单开发中的使用越来越深入，开发者对 AI 的要求，也不再只是“生成一个表单”。

在真实业务场景中，更多需求其实来自于已有表单的局部调整、事件逻辑编写、复杂交互处理以及组件能力扩展。因此，本次版本重点带来了AI 表单助理 3.0，支持局部修改、函数生成与逻辑编写，让 AI 不再只是“从零生成”，而是能够直接参与现有表单的维护与优化。

同时，本次版本还对简易插槽、移动端布局、数据绑定、生命周期以及代码编辑器能力进行了增强。

01 AI 表单助理 3.0：支持局部修改与函数编写

在之前版本中，AI 助理更偏向“从零生成表单”。但实际开发中，更常见的是对已有表单进行修改，比如调整某个字段规则或优化局部逻辑。

在 3.0 中，AI 助理支持直接定位到具体组件进行修改，例如只调整手机号字段的校验规则，或修改金额输入框的限制逻辑，其它结构保持不变。开发者不再需要重新生成整个表单，而是可以针对局部进行修改****。

同时，AI 助理也支持生成和修改事件函数、**校验逻辑代码。例如可以描述“提交前金额必须大于 1000，否则阻止提交”，系统会生成对应 JavaScript 逻辑。

02 增强简易插槽：更灵活的 UI 表达

插槽用于扩展组件内部结构。本次主要增强其表达能力，使其可以适配更多业务 UI 场景。

现在插槽支持单独配置样式能力，可以用于调整局部视觉表现，例如提示高亮、弱化说明或强调内容，而无需额外封装组件。

同时支持直接配置 HTML 内容，可以用于复杂说明、链接或结构化提示信息。

此外，所有组件都增加了组件前缀与后缀插槽，允许在组件的输入框或选择框之前或之后添加内容。

03 移动端独立布局：同一张表单，两种布局

现在支持为移动端单独配置布局方式，不再与 PC 端完全共享结构。

04 beforeUnmount 生命周期支持

新增 beforeUnmount 生命周期，用于组件销毁前的处理逻辑。

常见用途包括清理定时器、保存临时数据或移除事件监听，避免页面长时间运行时出现资源残留问题。

05 数据绑定增强：支持自定义映射

以前的数据绑定更偏向约定式，而现在你可以自己定义 prop 的映射关系。减少变量字段与组件结构之间的强依赖，这一能力更适用于字段结构复杂或频繁变化的业务系统。

06 代码编辑器增强：增加智能提示

代码编辑器新增 API 与字段提示能力，在编写事件函数或逻辑时可以减少记忆成本。

07 功能优化及 BUG 修复

✅ 优化 HTML 录入方式，支持通过富文本方式编辑

✅ 优化 左侧组件分组，支持默认折叠指定分组

✅ 优化 计算公式示例，让示例展示更清晰，减少理解成本

🐞 修复 切换多语言后扩展公式和行为的简介不显示问题

🐞 修复 计算逻辑条件清空时可能报错问题

🐞 修复 VxeTable 组件树形层级不显示问题

🐞 修复 切换阅读模式时可能会报错问题(Vue2)

安装

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

npm install @form-create/designer@^3

npm install @form-create/element-ui@^3

npm install element-plus

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

npm update @form-create/element-ui@^3

Node.js 引入

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

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 文件中引入相关依赖：

<!-- 引入 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 组件：

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