Vue 开源 AI 低代码表单设计器 FcDesigner 使用指南

<!-- 引入 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>

![FcDesigner 界面示意图]

私有化部署 AI 表单助理

如果您希望在自己的服务器上部署 AI 表单助理服务，可以使用我们开源的 FormCreate AI 表单助理 项目。

安装部署

1. 克隆项目

# 克隆项目
git clone https://github.com/xaboy/form-create-assistant/
cd form-create-assistant
# 安装依赖
pnpm install

2. 环境变量配置

创建 .env 文件（可选）：

# 服务端口（默认：3001）
PORT=3001
# 默认 Agent 类型（默认：deepseek）
# 可选值：deepseek, zhipu, qwen, other
DEFAULT_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=180000

3. 启动服务

# 使用 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.aliyun.com/compatible-mode/v1/chat/completions
• 获取密钥: 阿里云 DashScope

自定义 OpenAI 兼容接口

• Agent 类型: other
• API 端点: 通过 AGENT_API 环境变量配置
• 适用场景: 部署了 OpenAI 兼容接口的私有化服务

配置示例：

# .env
DEFAULT_AGENT=other
AGENT_API=https://api.example.com/v1/chat/completions
DEFAULT_TOKEN=your-custom-api-key

API 密钥配置

API 密钥可以通过以下方式提供：

1. 请求头传递（推荐）：

在设计器配置中设置 token：

const config = {
  ai: {
    api: 'http://localhost:3001/api/chat/completions',
    token: 'Bearer your-api-key-here'
  }
}

2. 环境变量配置（可选）：

如果请求中未提供 API 密钥，系统会使用服务端 .env 文件中的 DEFAULT_TOKEN 值。

注意：优先使用请求头中的 API 密钥，如果请求头中未提供，才会使用环境变量中的 DEFAULT_TOKEN。

更多详细信息，请参考 FormCreate AI 表单助理。

使用实例

AI 表单助理可以根据不同需求自动生成和修改表单。以下是一些典型使用场景的示例，帮助您快速掌握这些功能：

基础表单生成

1. 生成一个就诊满意度问卷表单
2. 创建一个建议收集表单，包含联系人、联系邮箱、分类和建议内容
3. 追加一个用户信息表单

组件操作

4. 添加一个标签组件，显示文本为 "Tag"
5. 删除商品简介字段
6. 商品价格字段使用数字输入框组件

条件逻辑

7. 当单选框选择 "选项 1" 时，显示输入框组件
8. 根据出生日期自动计算年龄
9. 根据商品单价和数量自动计算总价

验证规则

10. 设置输入框为必填，并限制长度必须大于 13
11. 添加手机号格式验证
12. 添加自定义验证：确认密码必须与密码一致

样式优化

13. 给输入类组件补充占位提示文本（placeholder）
14. 将姓名和手机号并排显示在同一行

高级功能

15. 生成一个 Vue 组件，实现金额输入框
16. 生成一个 js 版本的高精度加法

最佳实践

1. 清晰的指令描述

推荐做法：

生成一个用户注册表单，包含：
 - 用户名（必填，3-20 个字符）
 - 邮箱（必填，邮箱格式验证）
 - 密码（必填，至少 8 位）
 - 确认密码（必填，与密码一致）
 - 手机号（可选，11 位数字）

避免：

做一个注册表单

2. 分步骤操作

对于复杂需求，建议分步骤进行：

1. 先生成基础表单结构
2. 再添加验证规则
3. 最后调整样式和布局

3. 利用上下文

AI 表单助理会记住之前的对话内容，您可以：

用户：生成一个商品信息表单
AI：已生成包含商品名称、价格、描述的表单
用户：添加库存字段
AI：已添加库存数量字段

4. 错误处理

如果 AI 生成的结果不符合预期，您可以：

• 直接说明问题：'这个字段应该是数字类型'
• 提供具体修改要求：'将价格字段改为必填'
• 重新描述需求：'我需要的是下拉选择，不是输入框'

对话管理

消息操作

• 复制消息: 点击消息右下角的复制按钮
• 删除消息: 点击消息右下角的删除按钮
• 清除对话: 点击 AI 面板头部的清除按钮

历史记录

• 对话历史会自动保存到本地存储
• 刷新页面后可以恢复之前的对话

思考过程

AI 在处理复杂请求时会显示思考步骤：

1. 分析需求 - 理解您的具体要求
2. 生成方案 - 制定实现计划
3. 执行操作 - 实际修改表单
4. 验证结果 - 检查生成结果

利用 AI 表单助理，您不但可以大幅减少手动编码的时间，还能灵活调整表单以适应各种业务需求，从而在复杂项目中更高效地创建和管理表单。