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

---
 src/views/flow/components/NodeState.vue       | 307 +++++++++---------
 src/views/flow/components/ParamsDrawer.vue    |  24 +-
 src/views/flow/config.js                      |   4 +-
 src/views/flow/nodes/common/serviceNode.vue   |   6 +-
 src/views/flow/nodes/common/startNode.vue     |  10 +-
 src/views/flow/nodes/function/codeNode.vue    |   6 +-
 src/views/flow/nodes/function/currentLoop.vue |  10 +-
 src/views/flow/nodes/function/httpNode.vue    |   8 +-
 src/views/flow/nodes/function/sleep.vue       |  15 +-
 src/views/flow/nodes/function/switch.vue      |   6 +-
 vite.config.js                                |   6 +-
 11 files changed, 220 insertions(+), 182 deletions(-)

diff --git a/src/views/flow/components/NodeState.vue b/src/views/flow/components/NodeState.vue
index 6cc7929..572c702 100644
--- a/src/views/flow/components/NodeState.vue
+++ b/src/views/flow/components/NodeState.vue
@@ -1,151 +1,158 @@
-<template>
-    <div>
-        <div class="state__container" :class="`nodeState-${props.state}`">
-        <div class="context">
-            <div class="state">
-            <el-icon>
-                <SuccessFilled v-if="props.state === 'SUCCESS'" />
-                <CircleCloseFilled v-if="['FAILED', 'STOPPED'].includes(props.state)" />
-                <VideoPause v-if="props.state === 'PAUSED'" />
-                <Loading v-if="props.state === 'RUNNING'" />
-            </el-icon>
-            <div class="text">{{ getStateText() }}</div>
-            </div>
-            <div class="resultText" v-popover="popoverRef" @click="popoverVisible = !popoverVisible">{{ popoverVisible ? '隐藏结果' : '展示结果' }}</div>
-        </div>
-        </div>
-
-        <el-popover
-            ref="popoverRef"
-            virtual-triggering
-            persistent
-            placement="right-start"
-            :visible="popoverVisible"
-            :teleported="false"
-            popper-class="popover__container"
-            >
-            <template #default>
-                <div class="params__container input">
-                  <div class="paramsTitle">输入</div>
-                  <div>
-                      <slot name="input"></slot>
-                  </div>
-                </div>
-                <div class="params__container output" v-if="slots.output">
-                  <div class="paramsTitle">输出</div>
-                  <div>
-                      <slot name="output"></slot>
-                  </div>
-                </div>
-            </template>
-        </el-popover>
-    </div>
-</template>
-<script setup lang="js">
-import { ref, useSlots } from 'vue'
-import { SuccessFilled, CircleCloseFilled, Loading, VideoPause } from '@element-plus/icons-vue'
-
-const props = defineProps({
-    state: {
-        type: String,
-        default: 'NORMAL'
-    }
-})
-
-const slots = useSlots()
-
-const getStateText = () => {
-  const map = {
-    SUCCESS: '成功',
-    RUNNING: '运行中',
-    FAILED: '失败',
-    PAUSED: '已暂停',
-    STOPPED: '已停止',
-    NORMAL: ''
-  }
-  return map[props.state]
-}
-
-const popoverRef = ref();
-const popoverVisible = ref(false);
-
-</script>
-<style lang="scss" scoped>
-.state__container {
-    display: none;
-    margin-bottom: 8px;
-
-    .context {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 4px;
-      font-size: 12px;
-
-      .state {
-        display: flex;
-        align-items: center;
-
-        .text {
-          margin: 0 8px;
-        }
-      }
-
-      .resultText {
-        color: #1664ff;
-        cursor: pointer;
-      }
-    }
-  }
-
-  .nodeState-SUCCESS {
-    display: block;
-    background-color: #eef9f1;
-
-    .el-icon {
-      font-size: 16px;
-      color: #309256;
-    }
-  }
-
-  .nodeState-FAILED {
-    display: block;
-    background-color: #fdf5f5;
-
-    .el-icon {
-      font-size: 16px;
-      color: #ee3f38;
-    }
-  }
-
-  .nodeState-STOPPED {
-    display: block;
-    background-color: #fdf5f5;
-
-    .el-icon {
-      font-size: 16px;
-      color: #ee3f38;
-    }
-  }
-
-  .nodeState-PAUSED {
-    display: block;
-    background-color: #cbcbcb;
-
-    .el-icon {
-      font-size: 16px;
-      color: #666;
-    }
-  }
-
-  .nodeState-RUNNING {
-    display: block;
-    background-color: #f4f7ff;
-
-    .el-icon {
-      color: #68a2e4;
-      font-size: 16px;
-      animation: rotateAnimation 2s linear infinite;
-    }
-  }
+<template>
+    <div>
+        <div class="state__container" :class="`nodeState-${props.state}`">
+        <div class="context">
+            <div class="state">
+              <el-icon>
+                  <SuccessFilled v-if="props.state === 'SUCCESS'" />
+                  <CircleCloseFilled v-if="['FAILED', 'STOPPED'].includes(props.state)" />
+                  <VideoPause v-if="props.state === 'PAUSED'" />
+                  <Loading v-if="props.state === 'RUNNING'" />
+              </el-icon>
+              <div class="text">{{ getStateText() }}</div>
+              <el-tag :type="props.state === 'SUCCESS' ? 'success' : 'danger'">
+                {{ props.runtimes }}ms
+              </el-tag>
+            </div>
+            <div class="resultText" v-popover="popoverRef" @click="popoverVisible = !popoverVisible">{{ popoverVisible ? '隐藏结果' : '展示结果' }}</div>
+        </div>
+        </div>
+
+        <el-popover
+            ref="popoverRef"
+            virtual-triggering
+            persistent
+            placement="right-start"
+            :visible="popoverVisible"
+            :teleported="false"
+            popper-class="popover__container"
+            >
+            <template #default>
+                <div class="params__container input">
+                  <div class="paramsTitle">输入</div>
+                  <div>
+                      <slot name="input"></slot>
+                  </div>
+                </div>
+                <div class="params__container output" v-if="slots.output">
+                  <div class="paramsTitle">输出</div>
+                  <div>
+                      <slot name="output"></slot>
+                  </div>
+                </div>
+            </template>
+        </el-popover>
+    </div>
+</template>
+<script setup lang="js">
+import { ref, useSlots } from 'vue'
+import { SuccessFilled, CircleCloseFilled, Loading, VideoPause } from '@element-plus/icons-vue'
+
+const props = defineProps({
+    state: {
+        type: String,
+        default: 'NORMAL'
+    },
+    runtimes: {
+      type: Number,
+      default: 0
+    }
+})
+
+const slots = useSlots()
+
+const getStateText = () => {
+  const map = {
+    SUCCESS: '成功',
+    RUNNING: '运行中',
+    FAILED: '失败',
+    PAUSED: '已暂停',
+    STOPPED: '已停止',
+    NORMAL: ''
+  }
+  return map[props.state]
+}
+
+const popoverRef = ref();
+const popoverVisible = ref(false);
+
+</script>
+<style lang="scss" scoped>
+.state__container {
+    display: none;
+    margin-bottom: 8px;
+
+    .context {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 4px;
+      font-size: 12px;
+
+      .state {
+        display: flex;
+        align-items: center;
+
+        .text {
+          margin: 0 8px;
+        }
+      }
+
+      .resultText {
+        color: #1664ff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .nodeState-SUCCESS {
+    display: block;
+    background-color: #eef9f1;
+
+    .el-icon {
+      font-size: 16px;
+      color: #309256;
+    }
+  }
+
+  .nodeState-FAILED {
+    display: block;
+    background-color: #fdf5f5;
+
+    .el-icon {
+      font-size: 16px;
+      color: #ee3f38;
+    }
+  }
+
+  .nodeState-STOPPED {
+    display: block;
+    background-color: #fdf5f5;
+
+    .el-icon {
+      font-size: 16px;
+      color: #ee3f38;
+    }
+  }
+
+  .nodeState-PAUSED {
+    display: block;
+    background-color: #cbcbcb;
+
+    .el-icon {
+      font-size: 16px;
+      color: #666;
+    }
+  }
+
+  .nodeState-RUNNING {
+    display: block;
+    background-color: #f4f7ff;
+
+    .el-icon {
+      color: #68a2e4;
+      font-size: 16px;
+      animation: rotateAnimation 2s linear infinite;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/src/views/flow/components/ParamsDrawer.vue b/src/views/flow/components/ParamsDrawer.vue
index f4a2f9b..86831a9 100644
--- a/src/views/flow/components/ParamsDrawer.vue
+++ b/src/views/flow/components/ParamsDrawer.vue
@@ -889,7 +889,7 @@
                           @visible-change="
                             (visible) => visibleChange(visible, index, property.quote)
                           "
-                          @change="(value) => cascaderChange(value, index)"
+                          @change="(value) => cascaderChange(value, index, 'httpBody')"
                         />
                       </el-form-item>
                     </el-form-item>
@@ -955,6 +955,8 @@ const confirm = async () => {
               ElMessage.error('JSON中存在错误，请修正后再保存！');
               return;
             }
+          } else {
+            
           }
           const nodeParams = []
           nodeParams.push({ name: "config", type: "input", input: "", children: httpNodeData.value.config, disabled: true, required: true })
@@ -1065,6 +1067,9 @@ const addFormItem = (e, type) => {
   } else if (type === 'nodeParams' || type === 'outputParams') {
     obj.input = ''
   }
+  if (!formData[type]) {
+    formData[type] = [];
+  }
   formData[type].push(obj);
 };
 
@@ -1086,10 +1091,15 @@ const handleTypeChange = (index) => {
 };
 
 const cascaderRefs = ref([]);
-const cascaderChange = (value, index) => {
+const cascaderChange = (value, index, type = 'default') => {
   const selectedOptions = cascaderRefs.value[index].getCheckedNodes(true);
-  formData.nodeParams[index].quote = value;
-  formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+  if (type === 'default') {
+    formData.nodeParams[index].quote = value;
+    formData.nodeParams[index].quoteType = selectedOptions[0].data.type;
+  } else {
+    formData.nodeParams.find(item => item.name === 'body').children.find(child => child.name === 'formData').children[index].quote = value;
+    formData.nodeParams.find(item => item.name === 'body').children.find(child => child.name === 'formData').children[index].quoteType = selectedOptions[0].data.type;
+  }
 };
 
 const visibleChange = (value, index, quote) => {
@@ -1240,8 +1250,14 @@ const httpNodeData = ref({
 const addHttpNodeFormItem = (e, type) => {
   e.stopPropagation();
   if (type === 'body') {
+    if (!httpNodeData.value.body.formData) {
+      httpNodeData.value.body.formData = [];
+    }
     httpNodeData.value.body.formData.push({ name: "", type: "input", input: ""});
   } else {
+    if (!httpNodeData.value[type]) {
+      httpNodeData.value[type] = [];
+    }
     httpNodeData.value[type].push({ name: "", type: "input", input: ""});
   }
 };
diff --git a/src/views/flow/config.js b/src/views/flow/config.js
index ca410bc..f6d0b46 100644
--- a/src/views/flow/config.js
+++ b/src/views/flow/config.js
@@ -307,9 +307,7 @@ export const collapseList = [
           { 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: ""}
-            ]}
+            { name: 'formData', type: "input", input: "", children: []}
           ], required: true },
         ],
         outputType: 'json',
diff --git a/src/views/flow/nodes/common/serviceNode.vue b/src/views/flow/nodes/common/serviceNode.vue
index 4038cec..0a29d39 100644
--- a/src/views/flow/nodes/common/serviceNode.vue
+++ b/src/views/flow/nodes/common/serviceNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" :class="props.model.id">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -73,6 +73,7 @@ const setNodeName = (name) => {
 }
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
@@ -82,6 +83,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       errorInfoData.value = data?.message || ''
diff --git a/src/views/flow/nodes/common/startNode.vue b/src/views/flow/nodes/common/startNode.vue
index 9b0ea6f..060382a 100644
--- a/src/views/flow/nodes/common/startNode.vue
+++ b/src/views/flow/nodes/common/startNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="node__container" :class="props.model.id">
     <keep-alive>
-      <NodeState :state="nodeOperatingStatus">
+      <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
         <template #input>
           <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
         </template>
@@ -23,9 +23,7 @@
 </template>
 
 <script setup>
-import { watch, reactive, toRaw, ref, onMounted, onUnmounted, nextTick } from "vue";
-import { useFlowStore } from "@/store/modules/flow";
-import { initNodeZoom } from "@/utils/flow";
+import { ref, onMounted, onUnmounted } from "vue";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
 import { emitter } from "@/utils/eventBus";
@@ -38,6 +36,7 @@ const emits = defineEmits(["contentChange"]);
 
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
@@ -45,6 +44,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       try {
diff --git a/src/views/flow/nodes/function/codeNode.vue b/src/views/flow/nodes/function/codeNode.vue
index e1eef4c..ae2028c 100644
--- a/src/views/flow/nodes/function/codeNode.vue
+++ b/src/views/flow/nodes/function/codeNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" :class="props.model.id">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -69,6 +69,7 @@ const setNodeName = (name) => {
 }
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
@@ -77,6 +78,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       errorInfoData.value = data?.message || ''
diff --git a/src/views/flow/nodes/function/currentLoop.vue b/src/views/flow/nodes/function/currentLoop.vue
index 43acc2f..3ddc019 100644
--- a/src/views/flow/nodes/function/currentLoop.vue
+++ b/src/views/flow/nodes/function/currentLoop.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" :class="props.model.id">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -32,9 +32,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
-import { getInput, initNodeZoom } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
+import { ref, reactive, onMounted, onUnmounted } from "vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
@@ -64,6 +62,7 @@ const setNodeName = (name) => {
 }
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
@@ -71,6 +70,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       try {
diff --git a/src/views/flow/nodes/function/httpNode.vue b/src/views/flow/nodes/function/httpNode.vue
index a6af5e9..63e9e57 100644
--- a/src/views/flow/nodes/function/httpNode.vue
+++ b/src/views/flow/nodes/function/httpNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" :class="props.model.id">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -48,7 +48,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
@@ -72,6 +72,7 @@ const setNodeName = (name) => {
 }
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
@@ -81,6 +82,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       errorInfoData.value = data?.message || ''
diff --git a/src/views/flow/nodes/function/sleep.vue b/src/views/flow/nodes/function/sleep.vue
index 1981a42..a1fda74 100644
--- a/src/views/flow/nodes/function/sleep.vue
+++ b/src/views/flow/nodes/function/sleep.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" :class="props.model.id">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -33,9 +33,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
-import { getInput, initNodeZoom } from "@/utils/flow";
-import { useFlowStore } from "@/store/modules/flow";
+import { ref, reactive, onMounted, onUnmounted } from "vue";
 import NodeTitle from "../../components/NodeTitle.vue";
 import NodeState from "../../components/NodeState.vue";
 import "vue3-json-viewer/dist/index.css";
@@ -49,11 +47,6 @@ const props = defineProps({
 
 const emits = defineEmits(["contentChange"]);
 
-const formData = reactive({
-  nodeParams: [],
-});
-
-
 const setNodeName = (name) => {
   const properties = lf.getProperties(props.model.id);
   lf.setProperties(props.model.id, {
@@ -64,6 +57,7 @@ const setNodeName = (name) => {
 }
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 
@@ -71,6 +65,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       try {
diff --git a/src/views/flow/nodes/function/switch.vue b/src/views/flow/nodes/function/switch.vue
index 66133a6..d14c19d 100644
--- a/src/views/flow/nodes/function/switch.vue
+++ b/src/views/flow/nodes/function/switch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node__container" ref="switchRef" @mouseleave="setNodeProperties">
-    <NodeState :state="nodeOperatingStatus">
+    <NodeState :state="nodeOperatingStatus" :runtimes="runtimes">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
       </template>
@@ -385,6 +385,7 @@ const visibleChange = (value) => {
 };
 
 const nodeOperatingStatus = ref("NORMAL");
+const runtimes = ref(0);
 const inputJsonData = ref({});
 const outputJsonData = ref({});
 const errorInfoData = ref('');
@@ -414,6 +415,9 @@ onMounted(() => {
   emitter.on("changeNodeState", (data) => {
     if (data.nodeId === props.model.id) {
       nodeOperatingStatus.value = data.status;
+      if (data.endTime && data.startTime) {
+        runtimes.value = data.endTime - data.startTime;
+      }
       let inputData = {};
       let output = {};
       errorInfoData.value = data?.message || ''
diff --git a/vite.config.js b/vite.config.js
index 723fabc..f353730 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -47,11 +47,11 @@ export default defineConfig(({mode, command}) => {
             proxy: {
                 // https://cn.vitejs.dev/config/#server-proxy
                 '/dev-api': {
-                    //杨 http://192.168.0.10:13080
-                    //赵 http://10.148.108.58:13080
+                    //服务器 http://192.168.0.100:13080
+                    //李小龙 http://192.168.0.5:13080
                     // dev http://10.148.20.34:13080
                     // target: VITE_API_URL,
-                    target: command === 'build' ? VITE_API_URL : 'http://192.168.0.100:13080',
+                    target: command === 'build' ? VITE_API_URL : 'http://192.168.0.5:13080',
                     changeOrigin: true,
                     rewrite: (p) => p.replace(/^\/dev-api/, '')
                 }