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

Java Web Web教师个人成果管理系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

Java Web Web教师个人成果管理系统系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

摘要 随着教育信息化的快速发展，教师个人成果管理逐渐成为高校和教育机构的重要需求。传统的成果管理方式依赖纸质档案或简单的电子表格，存在效率低下、数据易丢失、查询不便等问题。教师在教学、科研、竞赛等方面的成果数量庞大，亟需一套系统化的管理工具，以实现成果的分类存储、快速检索和统计分析。该系统能够帮助教师高效管理个人成果，同时为学校或机构提供数据支持，便于绩效考核和资源分配。关键词：教师成果管理、信息化、绩效考核、数据统计、SpringBoot。 本系统采用前后端分离架构，后端基于SpringBoot2框架，结合MyBatis-Plus实现高效数据操作，前端使用Vue3构建响应式用户界面，数据库采用MySQL8.0存储数据。系统功能包括教师成果的增删改查、分类管理、多条件筛选、数据导出及可视化统计。通过权限控制，确保数据安全性；支持文件上传功能，便于教师上传相关证明材料。系统设计注重用户体验，提供简洁直观的操作界面，同时具备高扩展性，便于后续功能迭代。关键词：SpringBoot2、Vue3、MyBatis-Plus、MySQL8.0、权限控制。 数据表 教师基本信息数据表 教师
从 Renderless 架构到 WebAgent：我的 OpenTiny 前端智能化实战之路

从 Renderless 架构到 WebAgent：我的 OpenTiny 前端智能化实战之路

一、缘起：为什么我要给 DialogBox 加上"resizable"能力？ 说起来挺有意思的。作为一名在企业级应用开发一线摸爬滚打多年的前端，DialogBox 这个组件我用了不下百次。但每次用的时候，总觉得差点意思——用户想自己调整弹窗大小？不好意思，不支持。 直到我参加了 OpenTiny NEXT 前端智能化系列直播，听到老师讲 AI Agent 和 WebMCP 的时候，我突然意识到：这不就是我一直在等的那个契机吗？ 传统的组件开发模式是：开发者定义好所有功能，用户只能被动接受。但在 AI 时代，组件应该是"可对话"的——用户说"我想把这个弹窗调大一点"，AI 就能理解意图并调用相应的 API。 但要实现这个愿景，首先得让组件具备足够的能力。

AI Skills：前端新的效率神器！

近来，AI 领域有个火爆的话题：Skills。 Github 上被疯狂 star 的仓库，很多都是和 skills 有关的。 有的仓库仅仅上线三个月就获得了快 50K 的 star，Skills 的火热可见一斑。 不管是大模型，还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。 围绕 Skills，它们在做的就是为了完成一件事情：技能是通过学习和反复练习获得的，而 Skills 是把经验和最佳实践沉淀为 AI 能力，将“知道”转化为“做到”的本领。 详解什么是 Skills 要说清楚什么是 Skills，先来了解一下关于 AI 的 2
基于 Spring Boot 的 Web 三大核心交互案例精讲

基于 Spring Boot 的 Web 三大核心交互案例精讲

—知识点专栏——JavaEE专栏— 作为 Spring Boot 初学者，理解后端接口的编写和前端页面的交互至关重要。本文将通过三个经典的 Web 案例——表单提交、AJAX 登录与状态管理、以及 JSON 数据交互——带您掌握前后端联调的核心技巧和 Spring Boot 的关键注解。 1. 案例一：表单提交与参数绑定（计算求和） 本案例展示最基础、最传统的 Web 交互方式：HTML 表单提交。 1.1 后端代码：CalcController.java 使用 @RestController 简化接口编写，并通过方法参数接收表单数据。 packagecn.overthinker.springboot;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.