联调真是接口数据，进行表单渲染及提交

frontend/package-lock.json

@@ -18,7 +18,7 @@
         "lodash-es": "^4.17.21",
         "marked": "^17.0.1",
         "pako": "^2.1.0",
-        "pangea-ui": "^0.14.2-beta.9",
+        "pangea-ui": "1.0.1-beta.2",
         "pinia": "^2.1.7",
         "snabbdom": "^3.6.3",
         "vue": "^3.4.0",
@@ -5441,9 +5441,9 @@
       "integrity": "sha512-VLv+FacZ/vjwgPIg39//bAr+KPAKE08kscnpXFfTFJ1mZ2OMVeyYDrGDVY3z0CY+wfQRzuzd3c8LCUK9KgLRPw=="
     },
     "node_modules/pangea-ui": {
-      "version": "0.14.2-beta.9",
-      "resolved": "http://nexus.hisense.com/repository/npm-public/pangea-ui/-/pangea-ui-0.14.2-beta.9.tgz",
-      "integrity": "sha512-kQAc8hy/1XiRR64n8TQmcxATu6TBrr4HtKar2NxzOShl8NHVsXoMgb4AcI2ZAg32JVb7mTZ0lEwqw7HQCzs/BQ==",
+      "version": "1.0.1-beta.2",
+      "resolved": "http://nexus.hisense.com/repository/npm-public/pangea-ui/-/pangea-ui-1.0.1-beta.2.tgz",
+      "integrity": "sha512-jiwofEV32keFFbYb/duW4TJzbyogJu+VA9nIbJcYaZepEMLbzbWhhbkqgP5JEHoNeMNHqiuJNvNlh1lXrd+Stw==",
       "dependencies": {
         "@arco-iconbox/vue-syma-component": "1.0.24",
         "@arco-iconbox/vue-syma-supplement": "1.0.17",
@@ -5462,9 +5462,9 @@
         "mavon-editor": "3.0.2",
         "mitt": "^3.0.0",
         "mockjs": "^1.1.0",
-        "pangea-component": "^1.2.2-beta.3",
+        "pangea-component": "^1.3.1",
         "pangea-formula": "^1.2.11",
-        "pangea-ui-common": "^1.0.1-beta.6",
+        "pangea-ui-common": "^1.1.1",
         "sortablejs": "1.14.0",
         "tinycolor2": "1.6.0",
         "tinymce": "^6.4.2",

frontend/package.json

@@ -20,7 +20,7 @@
     "lodash-es": "^4.17.21",
     "marked": "^17.0.1",
     "pako": "^2.1.0",
-    "pangea-ui": "^0.14.2-beta.9",
+    "pangea-ui": "1.0.1-beta.2",
     "pinia": "^2.1.7",
     "snabbdom": "^3.6.3",
     "vue": "^3.4.0",

frontend/src/components/ChatArea.vue

@@ -413,7 +413,6 @@ const processSSELine = async (
 ) => {
   if (!line.trim()) return false;
 
-  console.log("line", line);
   if (line.startsWith("event:")) {
     currentEventRef.value = line.slice(6).trim();
     return false;
@@ -583,6 +582,7 @@ const processSSELine = async (
           break;
 
         case "tool_call":
+
         case "embed":
           // 处理工具调用和嵌入事件，将其发送到时间轴面板
           // 构建事件标题
@@ -651,38 +651,40 @@ const processSSELine = async (
             );
           }
           break;
+
+        case "form":
+          if (data && data.coms) {
+            // formJson.value = data;
+            formJson.value = data;
+          }
+          break;
       }
 
       // 模拟后端返回form类型的时间，并将form表单的json存到store
-      formJson.value = {
-        coms: [
-          {
-            key: 1766473421208,
-            name: "输入框",
-            code: "HiInput",
-            props: {
-              title: "输入框",
-              status: "default",
-              placeholder: "请输入",
-              name: "INPUT_6CP8HIBK",
-            },
-            bindProps: {},
-          },
-          {
-            key: 1766476676439,
-            name: "日期",
-            code: "HiDatePicker",
-            props: {
-              title: "日期",
-              type: "date",
-              format: "YYYY-MM-DD",
-              status: "default",
-              name: "DATE_PA9TUPQQ",
-            },
-            bindProps: {},
-          },
-        ],
-      };
+      // formJson.value = {
+      //   coms: [
+      //     {
+      //       key: 1766626350013,
+      //       name: "输入框",
+      //       code: "HiInput",
+      //       props: {
+      //         title: "访问园区",
+      //         status: "default",
+      //         name: "INPUT_8USD455B",
+      //       },
+      //     },
+      //     {
+      //       key: 1766626350014,
+      //       name: "日期",
+      //       code: "HiDatePicker",
+      //       props: {
+      //         title: "开始日期",
+      //         status: "default",
+      //         name: "DATE_8USD455D",
+      //       },
+      //     },
+      //   ],
+      // };
 
       // 重置当前事件类型
       currentEventRef.value = "";
@@ -868,6 +870,15 @@ const sendMessage = async () => {
     }
 
     if (formJson.value) {
+      // 设置表单提交回调函数
+      formStore.setSubmitCallback((formData: any) => {
+        console.log("表单提交数据:", formData);
+        // 将表单数据作为消息发送
+        inputMessage.value = JSON.stringify(formData);
+        sendMessage();
+      });
+
+      // 打开表单
       formStore.openForm(formJson.value);
     }
 

frontend/src/components/FormRender.vue

@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useFormStore } from "@/stores/form";
+import { ElMessage } from "element-plus";
 import HiPageTemplate from "pangea-ui/hi-page-template";
 
 // 获取表单 store
@@ -23,8 +24,16 @@ const templateRef = ref();
 
 // 表单提交回调
 const submit = () => {
-  templateRef.value?.ctx.validate(1, (res: boolean, data: any) => {
-    console.log(res, data);
+  templateRef.value?.ctx.validate(1, (isValid: boolean, formData: any) => {
+    if (isValid) {
+      console.log("表单验证通过，提交数据:", formData);
+      // 调用 store 的 submitForm 方法，触发回调
+      formStore.submitForm(formData);
+      ElMessage.success("表单提交成功");
+    } else {
+      console.log("表单验证失败");
+      ElMessage.error("请检查表单填写是否正确");
+    }
   });
 };
 </script>

frontend/src/stores/form.ts

@@ -8,8 +8,11 @@
 import { defineStore } from "pinia";
 import { cloneDeep } from "lodash-es";
 
-// 初始页面json外层
-const INIT_FORM_JSON = {
+/**
+ * 获取初始表单 JSON 配置
+ * 使用函数返回新对象，避免共享引用
+ */
+const getInitFormJson = () => ({
   pages: [
     {
       key: 0,
@@ -54,15 +57,18 @@ const INIT_FORM_JSON = {
   apis: [],
   funcs: [],
   pageTemplate: {},
-};
+});
 
 export const useFormStore = defineStore("form", {
   state: () => ({
-    // 表单 JSON 配置（使用深拷贝避免共享引用）
-    formJson: cloneDeep(INIT_FORM_JSON),
+    // 表单 JSON 配置
+    formJson: getInitFormJson(),
 
     // 是否显示表单页面
     showForm: false,
+
+    // 表单提交回调函数
+    onSubmitCallback: null as ((data: any) => void) | null,
   }),
 
   actions: {
@@ -78,7 +84,27 @@ export const useFormStore = defineStore("form", {
      * 清空表单 JSON 配置
      */
     clearFormJson() {
-      this.formJson = cloneDeep(INIT_FORM_JSON);
+      this.formJson = getInitFormJson();
+    },
+
+    /**
+     * 设置表单提交回调函数
+     * @param callback 回调函数
+     */
+    setSubmitCallback(callback: (data: any) => void) {
+      this.onSubmitCallback = callback;
+    },
+
+    /**
+     * 触发表单提交
+     * @param data 表单数据
+     */
+    submitForm(data: any) {
+      if (this.onSubmitCallback) {
+        this.onSubmitCallback(data);
+      }
+      // 提交后关闭表单
+      this.closeForm();
     },
 
     /**
@@ -93,8 +119,8 @@ export const useFormStore = defineStore("form", {
           return;
         }
 
-        // 深拷贝 INIT_FORM_JSON 避免修改原始对象
-        const formConfig = cloneDeep(INIT_FORM_JSON);
+        // 获取初始表单配置
+        const formConfig = getInitFormJson();
 
         // 将接收到的 coms 放入表单容器的 coms 数组中
         // 表单容器位于 pages[0].coms[0]（HiFormContainer）