From 88460d3bb12d26d35a0faa8bc99f0fcd5b5dd97b Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Tue, 14 Apr 2026 16:17:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20http=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/flow.js                             |  49 ++++
 src/views/flow/components/NodeTitle.vue       |   5 +-
 src/views/flow/components/ParamsDrawer.vue    | 254 +++++++++++++-----
 src/views/flow/config.js                      |  51 ++--
 src/views/flow/index.vue                      |  33 ++-
 .../flow/nodes/common/FormItemRecursive.vue   | 217 ---------------
 6 files changed, 284 insertions(+), 325 deletions(-)
 delete mode 100644 src/views/flow/nodes/common/FormItemRecursive.vue

diff --git a/src/utils/flow.js b/src/utils/flow.js
index ddcced4..fb1372f 100644
--- a/src/utils/flow.js
+++ b/src/utils/flow.js
@@ -294,4 +294,53 @@ export const filterEmptyName = (obj) => {
 
   // 基础类型直接返回
   return obj;
+}
+
+/**
+ * 将原始表单配置数组 转换为 目标对象格式
+ * @param {Array} source - 原始数据数组
+ * @returns {Object} 转换后的目标格式对象
+ */
+export const transformHttpNodeData = (source) => {
+  // 初始化结果对象
+  const result = {};
+
+  // 遍历每一个顶级节点
+  source.forEach(item => {
+    const { name, children } = item;
+    if (!name) return; // 过滤无name的无效节点
+
+    // 处理普通节点（config/headers/params）：直接取 children 数组
+    if (name !== 'body') {
+      result[name] = children || [];
+      return;
+    }
+
+    // 专门处理 body 节点（特殊结构）
+    if (name === 'body') {
+      const bodyObj = {
+        type: '',
+        json: '',
+        formData: []
+      };
+
+      // 遍历body的子项，赋值到对应字段
+      children?.forEach(child => {
+        const childName = child.name;
+        if (childName === 'bodyType') {
+          bodyObj.type = child.input;
+        }
+        if (childName === 'json') {
+          bodyObj.json = child.input;
+        }
+        if (childName === 'formData') {
+          bodyObj.formData = child.children || [];
+        }
+      });
+
+      result.body = bodyObj;
+    }
+  });
+
+  return result;
 }
\ No newline at end of file
diff --git a/src/views/flow/components/NodeTitle.vue b/src/views/flow/components/NodeTitle.vue
index 9ef336c..2d47b0d 100644
--- a/src/views/flow/components/NodeTitle.vue
+++ b/src/views/flow/components/NodeTitle.vue
@@ -6,9 +6,7 @@
         <div class="text__container">
           <div class="text__title" v-if="showTextTitle">
             <span class="text">{{ nodeName }}</span>
-            <el-icon class="editIcon" @click="showTextTitle = false"
-              ><EditPen
-            /></el-icon>
+            <el-icon class="editIcon" @click="showTextTitle = false"><EditPen/></el-icon>
           </div>
           <div class="input_name_container" v-else>
             <el-input v-model="nodeName" @keydown="handleInputKeydown" />
@@ -213,6 +211,7 @@ const imageUrl = () => {
 
           .el-input {
             margin-left: 12px;
+            width: 120px;
           }
 
           .input_name_select {
diff --git a/src/views/flow/components/ParamsDrawer.vue b/src/views/flow/components/ParamsDrawer.vue
index 9fa8067..f4a2f9b 100644
--- a/src/views/flow/components/ParamsDrawer.vue
+++ b/src/views/flow/components/ParamsDrawer.vue
@@ -4,7 +4,9 @@
       custom-class="custom-drawer-header"
       class="no-header-margin"
       :title="props.data.properties?.name || '参数配置'"
-      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
   >
     <div class="input__container" v-if="props.data.type === 'start'">
       <el-collapse v-model="activeNames">
@@ -169,6 +171,7 @@
                     :icon="Minus"
                     circle
                     size="small"
+                    :disabled="property?.disabled || false"
                     @click="handleDelete(index)"
                     class="deleteBtn"
                   />
@@ -343,6 +346,7 @@
                     circle
                     size="small"
                     @click="handleDelete(index)"
+                    :disabled="property?.disabled || false"
                     class="deleteBtn"
                   />
                 </el-row>
@@ -541,7 +545,7 @@
                 <el-row>
                   <el-form-item
                     :label="index === 0 ? '参数名' : ''"
-                    :prop="`headers.${index}.name`"
+                    :prop="httpNodeData.headers.length > index ? `headers.${index}.name` : undefined"
                     :rules="[
                       { required: true, message: '请输入参数名', trigger: 'blur' },
                     ]"
@@ -555,7 +559,7 @@
                   </el-form-item>
                   <el-form-item
                     :label="index === 0 ? '参数值' : ''"
-                    :prop="`headers.${index}.input`"
+                    :prop="httpNodeData.headers.length > index ? `headers.${index}.input` : undefined"
                   >
                     <el-select
                       v-model="property.type"
@@ -635,6 +639,13 @@
                       />
                     </el-form-item>
                   </el-form-item>
+                  <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleHttpNodeDelete('headers', index)"
+                    class="deleteBtn"
+                  />
                 </el-row>
               </div>
             </div>
@@ -656,9 +667,9 @@
                 <el-row>
                   <el-form-item
                     :label="index === 0 ? '参数名' : ''"
-                    :prop="`params.${index}.name`"
+                    :prop="httpNodeData.params.length > index ? `params.${index}.name` : undefined"
                     :rules="[
-                      { required: true, message: '请输入参数名', trigger: 'blur' },
+                      { required: true, message: '请输入参数名123', trigger: 'blur' },
                     ]"
                   >
                     <el-input
@@ -670,7 +681,7 @@
                   </el-form-item>
                   <el-form-item
                     :label="index === 0 ? '参数值' : ''"
-                    :prop="`params.${index}.input`"
+                    :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
                   >
                     <el-select
                       v-model="property.type"
@@ -689,7 +700,7 @@
                           trigger: 'blur',
                         },
                       ]"
-                      :prop="`params.${index}.input`"
+                      :prop="httpNodeData.params.length > index ? `params.${index}.input` : undefined"
                     >
                       <el-input-number
                         class="param-value"
@@ -750,6 +761,13 @@
                       />
                     </el-form-item>
                   </el-form-item>
+                  <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleHttpNodeDelete('params', index)"
+                    class="deleteBtn"
+                  />
                 </el-row>
               </div>
             </div>
@@ -762,6 +780,7 @@
                 size="small"
                 @click="(e) => addHttpNodeFormItem(e, 'body')"
                 class="addFormItem"
+                v-if="httpNodeData.body.type === 'form-data'"
               >
                 <el-icon :size="14"><Plus /></el-icon>
               </el-button>
@@ -775,12 +794,12 @@
               <div class="code__container" v-show="httpNodeData.body.type === 'json'">
                 <div ref="codeRef" style="width: 100%; height: 100%"></div>
               </div>
-              <div class="test" v-show="httpNodeData.body.type === 'form-data'">
+              <div class="test" v-if="httpNodeData.body.type === 'form-data'">
                 <div v-for="(property, index) in httpNodeData.body.formData" :key="index">
                   <el-row>
                     <el-form-item
                       :label="index === 0 ? '参数名' : ''"
-                      :prop="`params.${index}.name`"
+                      :prop="`body.formData.${index}.name`"
                       :rules="[
                         { required: true, message: '请输入参数名', trigger: 'blur' },
                       ]"
@@ -874,6 +893,13 @@
                         />
                       </el-form-item>
                     </el-form-item>
+                    <el-button
+                    :icon="Minus"
+                    circle
+                    size="small"
+                    @click="handleHttpNodeDelete('body', index)"
+                    class="deleteBtn"
+                  />
                   </el-row>
                 </div>
               </div>
@@ -884,8 +910,7 @@
     </div>
 
     <template #footer>
-      <el-button @click="handleClose">关闭</el-button>
-      <el-button type="primary" @click="confirm">确定</el-button>
+      <el-button type="primary" @click="confirm">保存</el-button>
     </template>
   </el-drawer>
 </template>
@@ -893,9 +918,9 @@
 <script setup>
 import FormItemRecursive from "./FormItemRecursive.vue";
 import { Plus, Minus } from "@element-plus/icons-vue";
-import { getInput, filterEmptyName } from "@/utils/flow";
+import { ElMessage } from 'element-plus'
+import { getInput, filterEmptyName, transformHttpNodeData } from "@/utils/flow";
 import { emitter } from "@/utils/eventBus";
-import "vue3-json-viewer/dist/index.css";
 import * as monaco from 'monaco-editor';
 import { nextTick, onUnmounted, watch } from "vue";
 
@@ -917,46 +942,97 @@ const rules = reactive({});
 const codeRef = ref()
 let editorInstance
 
-const handleClose = (done) => {
+const dynamicForm = ref()
+const outputFormRef = ref()
+
+const confirm = async () => {
   if (props.data.type === 'http') {
-    const nodeParams = []
-    nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
-    if (httpNodeData.value.headers.length) {
-      nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
+    if (dynamicForm.value) {
+      await dynamicForm.value.validate((valid, fields) => {
+        if (valid) {
+          if (httpNodeData.value.body.type === 'json') {
+            if (hasErrors()) {
+              ElMessage.error('JSON中存在错误，请修正后再保存！');
+              return;
+            }
+          }
+          const nodeParams = []
+          nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
+          console.log('httpNodeData.value:', httpNodeData.value)
+          if (httpNodeData.value?.headers?.length > 0) {
+            nodeParams.push({ name: "headers", type: "input", input: "", children: httpNodeData.value.headers, disabled: true, required: true })
+          }
+          if (httpNodeData.value?.params?.length > 0) {
+            nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
+          }
+          if (httpNodeData.value.body.type !== 'none') {
+            const bodyObj = { 
+              name: "body", type: "input", input: "", children: [
+                { name: 'bodyType', type: "input", input: "json", disabled: true },
+                { name: 'json', type: "input", input: editorInstance.getValue() || '' },
+                { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
+              ]
+            }
+            nodeParams.push(bodyObj)
+          }
+          lf.setProperties(props.data.id, {
+            ...props.data.properties,
+            nodeParams
+          });
+
+          emitter.emit("setProperties", { id: props.data.id});
+          emits('close')
+        } else {
+          console.log('error submit!', fields)
+        }
+      });
     }
-    if (httpNodeData.value.params.length) {
-      nodeParams.push({ name: "params", type: "input", input: "", children: httpNodeData.value.params, disabled: true, required: true })
-    }
-    if (httpNodeData.value.body.type !== 'none') {
-      const bodyObj = { 
-        name: "body", type: "input", input: "", children: [
-          { name: 'bodyType', type: "input", input: "json", disabled: true },
-          { name: 'json', type: "input", input: editorInstance.getValue() || '' },
-          { name: 'formData', type: "input", input: "", children: httpNodeData.value.body.formData }
-        ]
-      }
-      nodeParams.push(bodyObj)
-    }
-    lf.setProperties(props.data.id, {
-      ...props.data.properties,
-      nodeParams
-    });
   } else {
-    const filteredObj = {
-      inputParams: filterEmptyName(formData.inputParams),
-      nodeParams: filterEmptyName(formData.nodeParams),
-      outputParams: filterEmptyName(formData.outputParams),
-    };
-    
-    lf.setProperties(props.data.id, {
-      ...props.data.properties,
-      ...filteredObj
-    });
+    if (props.data.type === 'code') {
+      if (hasErrors()) {
+        ElMessage.error('代码中存在错误，请修正后再保存！');
+        return;
+      }
+
+      const targetObj = formData.nodeParams.find(item => item.name === 'code');
+      if (targetObj) {
+        // 存在：修改该对象的 input 属性
+        targetObj.input = editorInstance.getValue();
+      } else {
+        formData.nodeParams.push(
+          { name: "code", type: "input", input: editorInstance.getValue() }
+        )
+      }
+
+    }
+    let inputValidate = true
+    let outputValidate = true
+    if (dynamicForm.value) {
+      await dynamicForm.value.validate((valid) => {
+        if (!valid) {
+          inputValidate = false
+        }
+      });
+    }
+    if (outputFormRef.value) {
+      await outputFormRef.value.validate((valid) => {
+        if (!valid) {
+          outputValidate = false
+        }
+      })
+    }
+
+    // 验证通过
+    if (inputValidate && outputValidate) {
+      lf.setProperties(props.data.id, {
+        ...props.data.properties,
+        ...formData
+      });
+
+      emitter.emit("setProperties", { id: props.data.id});
+      emits('close')
+    }
   }
-
-  emitter.emit("setProperties", { id: props.data.id});
-
-  emits('close')
 }
 
 // 删除顶层表单项
@@ -992,6 +1068,10 @@ const addFormItem = (e, type) => {
   formData[type].push(obj);
 };
 
+const handleDelete = (index) => {
+  formData.nodeParams.splice(index, 1);
+};
+
 const quoteOptions = ref([]);
 const handleTypeChange = (index) => {
   if (formData.nodeParams[index].type === "input") {
@@ -1137,25 +1217,24 @@ const httpMethodOptions = () => {
 }
 
 const httpNodeData = ref({
-  config: [
-    { name: "url", type: "input", input: "",  disabled: true, required: true },
-    { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
-    { name: "timeout", type: "input", input: "10000", componentType: 'number', disabled: true }
-  ],
-  headers: [
-    { name: "", type: "input", input: ""}
-  ],
-  params: [
-    { name: "", type: "input", input: ""}
-  ],
-  body: {
-    type: 'json',
-    json: '{}',
-    formData: [
-      { name: "", type: "input", input: ""}
-    ]
-  },
-  timeout: 10000
+  // config: [
+  //   { name: "url", type: "input", input: "",  disabled: true, required: true },
+  //   { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
+  //   { name: "timeout", type: "input", input: "10000", componentType: 'number', disabled: true }
+  // ],
+  // headers: [
+  //   { name: "", type: "input", input: ""}
+  // ],
+  // params: [
+  //   { name: "", type: "input", input: ""}
+  // ],
+  // body: {
+  //   type: 'json',
+  //   json: '{}',
+  //   formData: [
+  //     { name: "", type: "input", input: ""}
+  //   ]
+  // }
 });
 
 const addHttpNodeFormItem = (e, type) => {
@@ -1167,17 +1246,33 @@ const addHttpNodeFormItem = (e, type) => {
   }
 };
 
+const handleHttpNodeDelete = (type, index) => {
+  if (type === 'body') {
+    httpNodeData.value.body.formData.splice(index, 1);
+  } else {
+    httpNodeData.value[type].splice(index, 1);
+  }
+  // nextTick(() => {
+  //   dynamicForm.value?.clearValidate()
+  // });
+};
+
 watch(
   () => props.data,
   () => {
     if (props.data.type === "start") {
-      formData.inputParams = props.data.properties?.inputParams || [];
+      const inputParams = JSON.parse(JSON.stringify(props.data.properties.inputParams || []))
+      formData.inputParams = inputParams;
     } else if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(props.data.type)) {
-      formData.nodeParams = props.data.properties.nodeParams;
-      formData.outputParams = props.data.properties.outputParams;
+      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
+      formData.nodeParams = nodeParams;
+      formData.outputParams = outputParams;
     } else if (props.data.type === "code") {
-      formData.nodeParams = props.data.properties.nodeParams;
-      formData.outputParams = props.data.properties.outputParams;
+      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+      const outputParams = JSON.parse(JSON.stringify(props.data.properties.outputParams || []))
+      formData.nodeParams = nodeParams;
+      formData.outputParams = outputParams;
       const codeParams = props.data.properties.nodeParams.find(item => item.name === 'code')
       if (codeParams) {
         setTimeout(() => {
@@ -1187,7 +1282,18 @@ watch(
         }, 100)
       }
     } else if (props.data.type === 'http') {
-      
+      const nodeParams = JSON.parse(JSON.stringify(props.data.properties.nodeParams || []))
+      const transformedData = transformHttpNodeData(nodeParams);
+      console.log('transformedData', transformedData);
+      httpNodeData.value = transformedData;
+      if (transformedData.body.type === 'json') {
+        setTimeout(() => {
+          if (editorInstance) {
+            setValue(transformedData.body.json || '{}')
+          }
+        }, 100)
+
+      }
     }
   },
   {
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index 3b26a6c..ca410bc 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -253,20 +253,20 @@ export const collapseList = [
         action: 'STOP_LOOP',
         desc: "用于立即终止当前所在的循环，跳出循环体",
       },
-      {
-        icon: startSvg,
-        name: "单次循环开始",
-        type: "subStart",
-        action: 'SUB_START',
-        desc: "循环体内部工作流的开始节点，开始循环体内部的单次流程",
-      },
-      {
-        icon: endSvg,
-        name: "单次循环结束",
-        type: "subEnd",
-        action: 'SUB_END',
-        desc: "循环体内部工作流的终止节点，结束循环体内部的单次流程",
-      },
+      // {
+      //   icon: startSvg,
+      //   name: "单次循环开始",
+      //   type: "subStart",
+      //   action: 'SUB_START',
+      //   desc: "循环体内部工作流的开始节点，开始循环体内部的单次流程",
+      // },
+      // {
+      //   icon: endSvg,
+      //   name: "单次循环结束",
+      //   type: "subEnd",
+      //   action: 'SUB_END',
+      //   desc: "循环体内部工作流的终止节点，结束循环体内部的单次流程",
+      // },
       {
         icon: switchSvg,
         name: "分支",
@@ -293,11 +293,24 @@ export const collapseList = [
         desc: "HTTP请求",
         action: 'HTTP',
         nodeParams: [
-          { name: "url", type: "input", input: "",  disabled: true, required: true },
-          { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
-          { name: "timeout", type: "input", input: "10000", componentType: 'number', required: false },
-          { name: "headers", type: "input", input: "", disabled: true, required: false },
-          { name: "body", type: "input", input: "", disabled: true, required: true },
+          { name: "config", type: "input", input: "", children: [
+            { name: "url", type: "input", input: "",  disabled: true, required: true },
+            { name: "method", type: "input", input: "POST", componentType: 'select', selectOptions: httpMethodOptions(), disabled: true },
+            { name: "timeout", type: "input", input: "10000", componentType: 'number', required: false, disabled: true }
+          ], disabled: true, required: true },
+          { name: "headers", type: "input", input: "", children: [
+            { name: "", type: "input", input: ""}
+          ], disabled: true, required: true },
+          { name: "params", type: "input", input: "", children: [
+            { name: "", type: "input", input: ""}
+          ], disabled: true, required: true },
+          { name: "body", type: "input", input: "", children: [
+            { name: 'bodyType', type: "input", input: "json", disabled: true },
+            { name: 'json', type: "input", input: '{}' },
+            { name: 'formData', type: "input", input: "", children: [
+              { name: "", type: "input", input: ""}
+            ]}
+          ], required: true },
         ],
         outputType: 'json',
         outputParams: [{ name: 'result', type: 'Object', children: [], desc: 'HTTP请求结果'}]
diff --git a/src/views/flow/index.vue b/src/views/flow/index.vue
index 1688fd2..f0f173b 100644
--- a/src/views/flow/index.vue
+++ b/src/views/flow/index.vue
@@ -224,7 +224,7 @@ const drop = (e) => {
   }
   const point = lf.getPointByClient(e.clientX, e.clientY);
   const { type, ...other } = node;
-  lf.addNode({
+  const newNode = lf.addNode({
     type,
     x: point.canvasOverlayPosition.x,
     y: point.canvasOverlayPosition.y,
@@ -232,6 +232,12 @@ const drop = (e) => {
       ...other,
     },
   });
+
+  if (!["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(newNode.type)) {
+    showParamsDrawer.value = true;
+    console.log('newNode', newNode)
+    paramsDrawerData.value = newNode;
+  }
 };
 
 const flowStore = useFlowStore();
@@ -621,16 +627,16 @@ const initFlow = () => {
     });
 
     // 监听历史记录变化
-    // lf.on("history:change", ({ data }) => {
-    //   if (flowStore.disableForm) {
-    //     return;
-    //   }
-    //   const flowData = lf.getGraphData();
-    //   if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
-    //     return;
-    //   }
-    //   flowState.value = "updateData";
-    // });
+    lf.on("history:change", ({ data }) => {
+      if (flowStore.disableForm) {
+        return;
+      }
+      const flowData = lf.getGraphData();
+      if (JSON.stringify(oldFlowData) === JSON.stringify(flowData)) {
+        return;
+      }
+      flowState.value = "updateData";
+    });
 
     // 监听子节点拖动事件
     lf.on("node:mousemove", ({ data, e }) => {
@@ -651,9 +657,12 @@ const initFlow = () => {
     });
 
     lf.on("node:dbclick", ({ data, e }) => {
+      if (["selectArea", 'branch', 'stopLoop', 'subStart', 'subEnd'].includes(data.type)) {
+        return;
+      }
+      console.log('data', data)
       showParamsDrawer.value = true;
       paramsDrawerData.value = data;
-      console.log(data)
     });
 
     lfRef.value = lf;
diff --git a/src/views/flow/nodes/common/FormItemRecursive.vue b/src/views/flow/nodes/common/FormItemRecursive.vue
deleted file mode 100644
index 08db478..0000000
--- a/src/views/flow/nodes/common/FormItemRecursive.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<!-- components/FormItemRecursive.vue -->
-<template>
-  <div class="form-item-recursive">
-    <!-- 循环渲染当前层级的所有表单项 -->
-    <div v-for="(item, index) in currentList" :key="index">
-      <el-row>
-        <!-- 名称输入 -->
-        <el-form-item
-          :label="isFirstLevel && index === 0 ? '参数名' : ''"
-          :prop="`${propPath}.${index}.name`"
-          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
-        >
-          <el-input
-            :disabled="item.disabled"
-            v-model="item.name"
-            placeholder="请输入"
-            clearable
-          />
-        </el-form-item>
-
-        <!-- 类型选择 -->
-        <el-form-item
-          :label="isFirstLevel && index === 0 ? '参数类型' : ''"
-          :prop="`${propPath}.${index}.type`"
-          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
-        >
-          <el-select
-            :disabled="item.disabled"
-            v-model="item.type"
-            @change="handleTypeChange(item)"
-          >
-            <el-option label="String" value="string" />
-            <el-option label="Number" value="number" />
-            <el-option label="Boolean" value="boolean" />
-            <el-option v-if="depth < endDepth" label="Object" value="object" />
-            <el-option label="Array<String>" value="array<string>" />
-            <el-option label="Array<Number>" value="array<number>" />
-            <el-option label="Array<Boolean>" value="array<boolean>" />
-            <el-option v-if="depth < endDepth" label="Array<Object>" value="array<object>" />
-          </el-select>
-        </el-form-item>
-
-        <!-- 描述输入 -->
-        <el-form-item
-          :label="isFirstLevel && index === 0 ? '描述' : ''"
-          :prop="`${propPath}.${index}.desc`"
-          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
-        >
-          <el-input
-            :disabled="item.disabled"
-            v-model="item.desc"
-            placeholder="请输入"
-            clearable
-          />
-        </el-form-item>
-
-        <!-- 是否必填 -->
-        <el-form-item v-if="formType === 'input'" :label="isFirstLevel && index === 0 ? '必填' : ''">
-          <el-switch
-            :disabled="item.disabled"
-            v-model="item.required"
-          />
-        </el-form-item>
-
-        <!-- 删除按钮（第一层第一个不能删） -->
-        <el-button
-          v-if="!item?.disabled"
-          :icon="Minus"
-          circle
-          size="small"
-          @click="handleDelete(index)"
-          class="deleteBtn"
-        />
-
-        <!-- 添加子项按钮（当类型是object/array<object>时） -->
-        <el-button
-          v-if="['object', 'array<object>'].includes(item.type)"
-          :icon="Plus"
-          circle
-          size="small"
-          @click="handleAddChild(item)"
-          class="addBtn"
-        />
-      </el-row>
-
-      <!-- 递归渲染子项（如果有子项且类型匹配） -->
-      <!-- 层级越深，缩进越多 -->
-      <div
-        v-if="['object', 'array<object>'].includes(item.type) && item.children.length"
-        class="nested-form-items"
-        :style="{ marginLeft: `${depth * 20}px` }"
-      >
-        <!-- 递归调用自身，处理下一层级 -->
-        <!-- 非第一层 -->
-        <!-- 复用添加逻辑 -->
-        <FormItemRecursive
-          :formType="formType"
-          :current-list="item.children"
-          :prop-path="`${propPath}.${index}.children`"
-          :depth="depth + 1"
-          :is-first-level="false"
-          :endDepth="endDepth"
-          :parent-path="[...parentPath, index] "
-          @add-item="handleAddChild(item)"
-          @delete-item="handleChildDelete"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Plus, Minus } from "@element-plus/icons-vue";
-
-// 定义props
-const { formType, currentList, propPath, depth, isFirstLevel, endDepth, parentPath } = defineProps({
-  formType: {
-    type: String,
-    default: 'input'
-  },
-  currentList: {
-    type: Array,
-    default: () => []
-  },
-  propPath: {
-    type: String,
-    default: ''
-  },
-  depth: {
-    type: Number,
-    default: 0
-  },
-  isFirstLevel: {
-    type: Boolean,
-    default: true
-  },
-  endDepth: {
-    type: Number,
-    default: 2
-  },
-  parentPath: {
-    type: String,
-    default: ''
-  },
-});
-
-// 定义emit事件
-const emit = defineEmits(['add-item', 'delete-item'])
-
-// 处理类型变化（清空或添加子项）
-const handleTypeChange = (item) => {
-  if (!["object", "array<object>"].includes(item.type)) {
-    item.children = []; // 非对象类型清空子项
-  } else if (item.children.length === 0) {
-    handleAddChild(item); // 首次切换为对象类型时添加一个子项
-  }
-};
-
-// 添加子项
-const handleAddChild = (parentItem) => {
-  parentItem.children.push({
-    name: "",
-    type: "",
-    desc: "",
-    required: false,
-    children: [],
-  });
-  // emit("add-item", parentItem); // 通知父组件（可选）
-};
-
-// 删除当前项
-const handleDelete = (index) => {
-  // 完整路径 = 父级路径 + 当前索引（如果是顶层，parentPath为undefined）
-  const fullPath = parentPath ? [...parentPath, index] : [index];
-  emit("delete-item", fullPath); // 向上传递完整路径
-}
-
-// 接收子组件的删除事件，继续向上传递
-const handleChildDelete = (childFullPath) => {
-  emit("delete-item", childFullPath);
-}
-</script>
-
-<style lang="scss" scoped>
-.nested-form-items {
-  border-left: 1px dashed #ccc; /* 层级连接线 */
-  padding-left: 16px;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-.deleteBtn {
-  margin-bottom: 22px;
-  cursor: pointer;
-}
-
-.addBtn {
-  margin-bottom: 22px;
-  cursor: pointer;
-}
-
-:deep(.el-row) {
-  align-items: end;
-  
-  .el-input {
-      --el-input-width: 140px;
-  }
-
-  .el-select {
-      --el-select-width: 140px;
-  }
-
-  .el-cascader {
-  --el-form-inline-content-width: 140px;
-  }
-}
-</style>
\ No newline at end of file