近期DeepSeek可謂是刷遍全網，當然，在DeepSeek等AI技術的推動下，人工智能正以驚人的速度改變著各行各業。AI不僅是一種技術趨勢，更是未來生產力的核心驅動力。

如今，FormCreate設計器也正式邁入AI時代????，推出v5.6版本，搭載AI智能表單助理，讓表單設計從繁瑣的手動操作升級為智能對話模式，徹底釋放您的創造力！

源碼地址: Github | Gitee | 文檔 | 官網

FormCreate AI助理上線

FormCreate 智能表單助理上線：讓表單設計更簡單FormCreate 智能表單助理是您的專屬表單設計助手，只需簡單描述需求，它就能快速生成或修改表單，幫助您輕松高效地完成表單設計。無論是簡單的問卷還是復雜的業務表單，AI助理都能輕松應對。在線演示

示例場景：

• 生成一個就診滿意度問卷表單
• 創建一個建議收集表單，包含聯系人、聯系郵箱、分類和建議內容
• 追加一個用戶信息表單當單選框選擇 "選項1" 時，顯示輸入框組件
• 設置輸入框為必填，并限制長度必須大于13
• 商品價格字段使用數字輸入框組件
• 給輸入類組件補充占位提示文本

只需一句話，智能表單助理就能快速生成您需要的表單，徹底告別繁瑣的手動配置！

上線對外AI接口：賦能您的系統

為了讓更多企業和開發者享受到AI帶來的便利，FormCreate正式推出對外AI接口，支持將智能表單助理集成到您的系統中。無論是OA、ERP還是CRM，都能輕松接入AI表單能力，提升業務效率。

注冊即贈20萬tokens，點擊注冊

v5.6 功能更新

(1) AI智能表單助理幫助您快速生成和修改表單，幫助您輕松高效地完成表單設計。

(2) 新增 10 個圖表組件
提供更豐富的可視化選項，包括折線圖、柱狀圖、餅圖、散點圖、雷達圖等，讓數據呈現更直觀、更具吸引力。

(3) 新增 8 個輔助組件和 4 個表單組件擴展組件庫，新增的輔助組件例如標題、二維碼、視頻等，增強頁面布局的靈活性；新增表單組件例如分段選擇器、手寫簽名等，滿足更多業務場景的數據錄入需求。

(4) 增加快速布局功能提供預設的4種表單布局方式，簡化頁面布局流程，快速構建專業美觀的表單頁面。

安裝

首先，安裝 @form-create/designer 的 Vue 3 版本：

npm install @form-create/designer@^3

安裝 Vue 3 版本的 form-create

npm install @form-create/element-ui@^3

引入

CDN 引入

如果您選擇使用 CDN，可以按照以下步驟在 HTML 文件中引入相關依賴：

<!-- 引入 Element Plus 樣式 -->
<link  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>

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');

使用
在 Vue 3 組件中，您可以通過以下方式使用 fc-designer 組件：

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // 可以在此處獲取設計器實例或進行其他操作
    const designer = ref(null);
</script>