【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^3npm install form-create/element-ui^3npm 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)。【CDN引入】如果选择使用CDN可以按照以下步骤在HTML文件中引入相关依赖引入Element Plus样式引入Vue 3引入Element Plus引入form-create和designer。创建Vue应用并挂载。【使用】在Vue 3组件中可以通过以下方式使用fc-designer组件在template中使用fc-designer组件在script setup中获取设计器实例或进行其他操作。