Vue 低代码可视化 AI 表单设计器 FcDesigner v3.5 版本发布！

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

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

核心功能

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

3.5 版本更新内容

1. 字段 ID 支持下拉级联选择

新版中，字段 ID 已支持下拉级联选择能力，能够更快速完成字段关联与映射，减少手动输入带来的错误率。对于大型业务表单来说，配置效率会明显提升。

2. 选项组件新增多种录入方式

选项类组件新增两种录入模式：文本录入、JSON 数据录入。同时，对选项配置区域的布局进行了重新调整。

3. 大纲支持拖拽排序

现在大纲列表已支持拖拽排序能力。开发者可以直接在大纲面板中调整组件位置，系统会实时同步画布结构。

4. beforeUnmount 生命周期支持

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

5. 设计器新增 Header 插槽

设计器顶部区域现已支持通过插槽扩展，可用于扩展品牌信息、快捷操作入口或业务按钮，让设计器更贴合你的使用场景。

6. 代码编辑器增强：增加代码提示

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

7. 功能优化及 BUG 修复

✅ 新增 设计规则导出功能

✅ 新增 支持快捷查看组件配置项的 field

✅ 新增 左侧菜单支持默认收起

✅ 新增 样式支持配置背景图

✅ 新增 表格布局增加表格表单样式

✅ 优化 拖入限制功能增加递归校验

✅ 优化 样式录入交互

✅ 优化 表格表单组件功能

快速开始

Element Plus 版本

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

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')

<template>
  <fc-designer ref="designer" height="100vh" />
</template>

Ant Design Vue 版本

npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

import { createApp } from 'vue'
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App)
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
app.mount('#app')

<template>
  <fc-designer ref="designer" height="100vh" />
</template>

Vant 移动端版本

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

import { createApp } from 'vue'
import FcDesignerMobile from '@form-create/vant-designer'
import ElementPlus from 'element-plus'
import vant from 'vant'
import 'vant/lib/index.css'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
app.mount('#app')

<template>
  <fc-designer-mobile ref="designer" height="100vh" />
</template>

欢迎 Star 支持开源项目：github.com/xaboy/form-...