当前位置：首页 > news >正文

FcDesigner新版本发布：AI表单助理升级，多方面功能增强！

news 2026/5/12 21:03:03

【FcDesigner简介】

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

【源码与文档】

源码地址有Github、Gitee ，还有文档和在线演示。

【AI在表单开发的需求变化】

随着AI在表单开发中的使用越来越深入，开发者对AI的要求，也不再只是"生成一个表单"。在真实业务场景中，更多需求其实来自于已有表单的局部调整、事件逻辑编写、复杂交互处理以及组件能力扩展。

【本次版本重点更新】

本次版本重点带来了AI表单助理3.0，支持局部修改、函数生成与逻辑编写，让AI不再只是"从零生成"，而是能够直接参与现有表单的维护与优化。同时，本次版本还对简易插槽、移动端布局、数据绑定、生命周期以及代码编辑器能力进行了增强。

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

在之前版本中，AI助理更偏向"从零生成表单"。但实际开发中，更常见的是对已有表单进行修改，比如调整某个字段规则或优化局部逻辑。在3.0中，AI助理支持直接定位到具体组件进行修改，例如只调整手机号字段的校验规则，或修改金额输入框的限制逻辑，其它结构保持不变。开发者不再需要重新生成整个表单，而是可以针对局部进行修改。同时，AI助理也支持生成和修改事件函数、校验逻辑代码。例如可以描述 "提交前金额必须大于1000，否则阻止提交"，系统会生成对应JavaScript逻辑。

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

插槽用于扩展组件内部结构。本次主要增强其表达能力，使其可以适配更多业务UI场景。现在插槽支持单独配置样式能力，可以用于调整局部视觉表现，例如提示高亮、弱化说明或强调内容，而无需额外封装组件。同时支持直接配置HTML内容，可以用于复杂说明、链接或结构化提示信息。此外，所有组件都增加了组件前缀与后缀插槽，允许在组件的输入框或选择框之前或之后添加内容。

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

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

【beforeUnmount生命周期支持】

新增beforeUnmount生命周期，用于组件销毁前的处理逻辑。常见用途包括清理定时器、保存临时数据或移除事件监听，避免页面长时间运行时出现资源残留问题。

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

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

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

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

【功能优化及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'; const app = createApp(App); app.use(ElementPlus); app.use(FcDesigner); app.use(FcDesigner.formCreate); app.mount('#app')。