xinnian999/vue-form-craft

Vue Form Craft – 快速概览

它是什么：一个基于 Vue 3 的库，让您能够通过 JSON schema 设计并渲染表单。它包含一个可视化拖放表单构建器 (FormDesign) 和一个运行时渲染器 (FormRender)。该套件还提供可选的 AI 辅助功能，用于生成或编辑 schema。

主要功能

• 可视化设计器 – 拖放组件以创建 JsonSchema。
• 渲染器 – FormRender 使用该 schema 来产生可运行的表单。
• 复杂逻辑 – 字段级表达式、数据/属性链接、嵌套数组 (FormList)。
• 验证 – 内置规则（必填、最小/最大值、正则表达式、自定义 JS）。
• AI 辅助 schema 创建 – 通过简单的 ai 函数连接任何 LLM 端点。
• UI 适配器 – 开箱即用支持 Element Plus；可切换为 Ant Design Vue。

如何在项目中使用

1. 安装 npm 套件：

   npm i vue-form-craft
   

2. 注册全局组件，并可选择 UI 库：

   import ElementPlus from 'element-plus'
   import { createApp } from 'vue'
   import VueFormCraft from 'vue-form-craft'
   import 'element-plus/dist/index.css'
   const app = createApp(App)
   app.use(ElementPlus)
   app.use(VueFormCraft) // 或 app.use(VueFormCraft, { ui: AntdAdapter })
   

3. 使用 FormRender 渲染表单，传入 schema 对象并将 v-model 绑定到您的数据。
4. 或者将可视化构建器 FormDesign 放入页面，让终端用户即时创建表单。
5. 若要启用 AI，请提供一个调用您 LLM 端点的 ai 函数；库将转发提示并预期返回生成的 schema 文本。

项目结构

• lib – 发布的 vue-form-craft 套件源码。
• play – 用于本地开发的游乐场。
• docs – 包含使用文档与实时演示的 VitePress 网站。

适用对象 需要构建管理后台、内部工具或任何需要动态、schema 驱动表单的 Vue 3 应用程序的前端团队，特别是当您需要低代码可视化编辑器与 AI 辅助时。

实时演示与文档

• Demo: https://form.elin521.cn/form-design.html
• Docs: https://form.elin521.cn/