Vue 全开源的 AI 低代码表单设计器组件，内置 AI 表单助理

优质文章学习记录

— 7 min read
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 # 安装依赖pnpminstall

2. 环境变量配置

创建 .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=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.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 密钥可以通过以下方式提供：

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

在设计器配置中设置 token：

const config ={ai:{api:'http://localhost:3001/api/chat/completions',token:'Bearer your-api-key-here'}}
  1. 环境变量配置（可选）：

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

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

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

使用实例

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

基础表单生成

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

组件操作

  1. 添加一个标签组件，显示文本为 “Tag”
  2. 删除商品简介字段
  3. 商品价格字段使用数字输入框组件

条件逻辑

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

验证规则

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

样式优化

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

高级功能

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

最佳实践

1. 清晰的指令描述

推荐做法：

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

避免：

做一个注册表单

2. 分步骤操作

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

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

3. 利用上下文

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

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

4. 错误处理

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

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

对话管理

消息操作

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

历史记录

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

思考过程

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

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

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

Read more

告别复杂操作：灵感画廊极简AI绘画体验

告别复杂操作：灵感画廊极简AI绘画体验 "见微知著，凝光成影。将梦境的碎片，凝结为永恒的视觉诗篇。" 你是否曾经被复杂的AI绘画工具劝退？参数太多、界面太乱、学习成本太高...现在，这一切都将成为过去。灵感画廊（Atelier of Light and Shadow）基于Stable Diffusion XL 1.0打造，却彻底摒弃了工业化的复杂界面，为你提供一个如艺术沙龙般恬静的创作空间。 1. 为什么选择灵感画廊？ 传统的AI绘画工具往往让人望而生畏。密密麻麻的参数滑块、晦涩难懂的技术术语、需要反复调试的复杂设置...这些都不是创作者想要的。 灵感画廊完全不同。它相信：真正的创作应该专注于灵感本身，而不是技术细节。 这里没有"提示词"，只有"梦境描述"；没有"反向词"
当 Vibe Coding 遇上汽车 PID 开发：AIGC 重构嵌入式创意落地范式

当 Vibe Coding 遇上汽车 PID 开发：AIGC 重构嵌入式创意落地范式

在汽车定速巡航 PID 参数调试的传统开发流程中，开发者往往陷入 “公式推导→代码敲写→硬件烧录→实车测试” 的低效循环 —— 哪怕只是微调一个比例系数，都要经历数小时的代码修改、环境适配和实车验证，创意被繁琐的技术细节层层束缚。而当我以 Vibe Coding（AIGC 驱动的沉浸式编码）为核心，借助 TRAE 工具完成「汽车定速巡航 PID 参数调优可视化」项目（GitHub 仓库：https://github.com/LQY-hh/PID_Vibe_Coding）时，真切感受到了 AIGC 为嵌入式开发带来的创造性变革：它不是简单的 “代码生成工具”，而是让开发者从 “代码的执行者” 彻底回归为 “创意的设计者”，重构了嵌入式开发的创作逻辑。 一、从 “细节纠缠” 到

GitHub 教育认证通过后如何领取 Copilot Pro

最近我通过了 GitHub 教育认证（Student Developer Pack），但是发现并没有立刻拿到 Copilot Pro。折腾了一番之后终于搞定了，这里记录一下过程，方便后面遇到同样问题的同学。 1. 教育认证通过 ≠ 立即开通 当你刚刚通过认证时，Student Pack 页面可能显示绿标，提示福利稍后开放，这时候需要等待几天到两周左右。 * 绿标：福利还在处理阶段（will be available soon）。 * 紫标：福利已经激活（benefits are now available）。 所以，如果你刚过认证但没看到 Copilot Pro，不用急，先等等。 2. 手动领取 Copilot Pro 即使福利已经激活，你也需要手动去领取： 👉 访问这个链接： https://github.com/github-copilot/

老手机 本地部署小龙虾OpenClaw（使用本地千问大模型）实机演示 Termux+Ubuntu+Llama 新手完整安装教程（含代码）

本教程提供从 0 到 1 的详细步骤，在安卓手机上通过 Termux 运行 Ubuntu，部署本地 Llama 大模型，并集成 OpenClaw 进行 AI 交互，全程无需 Root。建议手机配置：≥4GB 内存，≥64GB 存储，Android 7+。 一、准备工作 1.1 安装 Termux 1. 从F-Droid或GitHub下载最新版 Termux（避免应用商店旧版本） 2. 安装并打开，首次启动会自动配置基础环境 1.2 手机设置优化 1. 开启开发者选项（设置→关于手机→连续点击版本号 7 次） 2.