Vue 全开源的 AI 低代码表单设计器组件，内置 AI 表单助理
FcDesigner 版是一款基于Vue的低代码可视化表单设计器工具，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，内置 AI 表单助理，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。
源码地址: Github | Gitee | 文档 | 在线演示
安装
首先，安装 @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 样式 --><linkhref="https://unpkg.com/element-plus/dist/index.css"rel="stylesheet"/><!-- 引入 Vue 3 --><scriptsrc="https://unpkg.com/vue"></script><!-- 引入 Element Plus --><scriptsrc="https://unpkg.com/element-plus/dist/index.full.js"></script><!-- 引入 form-create 和 designer --><scriptsrc="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script><scriptsrc="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script><divid="app"><fc-designerheight="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-designerref="designer"height="100vh"/></template><scriptsetup>import{ ref }from'vue';// 可以在此处获取设计器实例或进行其他操作const designer =ref(null);</script>
私有化部署AI表单助理
如果您希望在自己的服务器上部署 AI 表单助理服务，可以使用我们开源的 FormCreate AI 表单助理 项目。
安装部署
1. 克隆项目
# 克隆项目git clone https://github.com/xaboy/form-create-assistant/ cd form-create-assistant # 安装依赖pnpminstall2. 环境变量配置
创建 .env 文件（可选）：
# 服务端口（默认: 3001）PORT=3001# 默认 Agent 类型（默认: deepseek）# 可选值: deepseek, zhipu, qwen, otherDEFAULT_AGENT=deepseek # 默认模型（默认: deepseek-chat）DEFAULT_MODEL=deepseek-chat # 默认 API 密钥（可选，当请求中未提供 Authorization header 时使用）DEFAULT_TOKEN=your-api-key-here # Other Agent 的自定义 API 端点（用于自定义 OpenAI 兼容接口）AGENT_API=https://api.example.com/v1/chat/completions # Agent 请求超时时间（毫秒，默认: 180000，即 3 分钟）AGENT_TIMEOUT=1800003. 启动服务
# 使用 tsx 直接运行pnpm start 服务启动后，默认监听 http://localhost:3001
设计器配置
部署好服务后，在设计器中配置私有化 AI 服务地址：
<template> <fc-designer ref="designer" :config="config" /> </template> <script setup> const config = { ai: { // 私有化服务地址 api: 'http://localhost:3001/api/chat/completions', // API 密钥（可选，如果服务端配置了 DEFAULT_TOKEN 可省略） token: 'Bearer your-api-key-here', } } </script> 支持的 AI 服务
DeepSeek（默认）
- Agent 类型:
deepseek - API 端点:
https://api.deepseek.com/v1/chat/completions - 获取密钥: DeepSeek 官网
智谱 AI (ZhipuAI)
- Agent 类型:
zhipu - API 端点:
https://open.bigmodel.cn/api/paas/v4/chat/completions - 获取密钥: 智谱 AI 开放平台
通义千问 (Qwen)
- Agent 类型:
qwen - API 端点:
https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions - 获取密钥: 阿里云 DashScope
自定义 OpenAI 兼容接口
- Agent 类型:
other - API 端点: 通过
AGENT_API环境变量配置 - 适用场景: 部署了 OpenAI 兼容接口的私有化服务
配置示例：
# .envDEFAULT_AGENT=other AGENT_API=https://api.example.com/v1/chat/completions DEFAULT_TOKEN=your-custom-api-key API 密钥配置
API 密钥可以通过以下方式提供：
- 请求头传递（推荐）：
在设计器配置中设置 token：
const config ={ai:{api:'http://localhost:3001/api/chat/completions',token:'Bearer your-api-key-here'}}- 环境变量配置（可选）：
如果请求中未提供 API 密钥，系统会使用服务端 .env 文件中的 DEFAULT_TOKEN 值。
注意：优先使用请求头中的 API 密钥，如果请求头中未提供，才会使用环境变量中的 DEFAULT_TOKEN。
更多详细信息，请参考 FormCreate AI 表单助理。
使用实例
AI 表单助理可以根据不同需求自动生成和修改表单。以下是一些典型使用场景的示例，帮助您快速掌握这些功能：
基础表单生成
- 生成一个就诊满意度问卷表单
- 创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容
- 追加一个用户信息表单
组件操作
- 添加一个标签组件，显示文本为 “Tag”
- 删除商品简介字段
- 商品价格字段使用数字输入框组件
条件逻辑
- 当单选框选择 “选项1” 时，显示输入框组件
- 根据出生日期自动计算年龄
- 根据商品单价和数量自动计算总价
验证规则
- 设置输入框为必填，并限制长度必须大于13
- 添加手机号格式验证
- 添加自定义验证：确认密码必须与密码一致
样式优化
- 给输入类组件补充占位提示文本（placeholder）
- 将姓名和手机号并排显示在同一行
高级功能
- 生成一个Vue组件，实现金额输入框
- 生成一个js版本的高精度加法
最佳实践
1. 清晰的指令描述
推荐做法：
生成一个用户注册表单，包含： - 用户名（必填，3-20个字符） - 邮箱（必填，邮箱格式验证） - 密码（必填，至少8位） - 确认密码（必填，与密码一致） - 手机号（可选，11位数字） 避免：
做一个注册表单 2. 分步骤操作
对于复杂需求，建议分步骤进行：
- 先生成基础表单结构
- 再添加验证规则
- 最后调整样式和布局
3. 利用上下文
AI 表单助理会记住之前的对话内容，您可以：
用户：生成一个商品信息表单 AI：已生成包含商品名称、价格、描述的表单 用户：添加库存字段 AI：已添加库存数量字段 4. 错误处理
如果AI生成的结果不符合预期，您可以：
- 直接说明问题：“这个字段应该是数字类型”
- 提供具体修改要求：“将价格字段改为必填”
- 重新描述需求：“我需要的是下拉选择，不是输入框”
对话管理
消息操作
- 复制消息: 点击消息右下角的复制按钮
- 删除消息: 点击消息右下角的删除按钮
- 清除对话: 点击AI面板头部的清除按钮
历史记录
- 对话历史会自动保存到本地存储
- 刷新页面后可以恢复之前的对话
思考过程
AI 在处理复杂请求时会显示思考步骤：
- 分析需求 - 理解您的具体要求
- 生成方案 - 制定实现计划
- 执行操作 - 实际修改表单
- 验证结果 - 检查生成结果
利用 AI 表单助理，您不但可以大幅减少手动编码的时间，还能灵活调整表单以适应各种业务需求，从而在复杂项目中更高效地创建和管理表单。
