From 2d6d16e046574ca7f5bdd48a9133868aed63486d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 8 Apr 2025 15:10:53 +0800
Subject: [PATCH]  feat: Optimize the interface when there are too many
 interface parameters.(#2795)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* perf: Optimization drag sorting condition nodes

* feat: Optimize the interface when there are too many interface parameters.（#2795）
---
 ui/src/assets/sort.svg                        |  1 +
 .../component/ApiInputFieldTable.vue          | 16 ++++++++--
 .../workflow/nodes/condition-node/index.vue   | 29 +++++++++++++++++--
 ui/src/workflow/nodes/start-node/index.vue    |  2 +-
 4 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/assets/sort.svg

diff --git a/ui/src/assets/sort.svg b/ui/src/assets/sort.svg
new file mode 100644
index 000000000..e24e0450a
--- /dev/null
+++ b/ui/src/assets/sort.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744092984968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1250" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M384 768a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m0-320a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m0-320a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m256 640a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m0-320a64 64 0 1 0 0 128 64 64 0 0 0 0-128z m0-320a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" p-id="1251"></path></svg>
\ No newline at end of file
diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
index 0f74d702d..c81ebc94f 100644
--- a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -15,8 +15,20 @@
     ref="tableRef"
     row-key="field"
   >
-    <el-table-column prop="variable" :label="$t('dynamicsForm.paramForm.field.label')" />
-    <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')" />
+    <el-table-column prop="variable" :label="$t('dynamicsForm.paramForm.field.label')">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.variable">
+          {{ row.variable }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="default_value" :label="$t('dynamicsForm.default.label')">
+      <template #default="{ row }">
+        <span class="ellipsis-1" :title="row.default_value">
+          {{ row.default_value }}
+        </span>
+      </template>
+    </el-table-column>
     <el-table-column :label="$t('common.required')">
       <template #default="{ row }">
         <div @click.stop>
diff --git a/ui/src/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
index 8d90bb9ac..2108915a0 100644
--- a/ui/src/workflow/nodes/condition-node/index.vue
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -22,12 +22,15 @@
           <el-card
             v-resize="(wh: any) => resizeCondition(wh, item, index)"
             shadow="never"
-            class="card-never mb-8"
+            class="drag-card card-never mb-8"
             :class="{ 'no-drag': index === form_data.branch.length - 1 }"
             style="--el-card-padding: 12px"
           >
             <div class="handle flex-between lighter">
-              {{ item.type }}
+              <span class="flex align-center">
+                <img src="@/assets/sort.svg" alt="" height="15" class="handle-img mr-4" />
+                {{ item.type }}
+              </span>
               <div class="info" v-if="item.conditions.length > 1">
                 <span>{{
                   $t('views.applicationWorkflow.nodes.conditionNode.conditions.info')
@@ -337,4 +340,24 @@ onMounted(() => {
   set(props.nodeModel, 'validate', validate)
 })
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.drag-card.no-drag {
+  .handle {
+    .handle-img {
+      display: none;
+    }
+  }
+}
+.drag-card:not(.no-drag) {
+  .handle {
+    .handle-img {
+      display: none;
+    }
+    &:hover {
+      .handle-img {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/ui/src/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
index 9414f9251..384b5c37b 100644
--- a/ui/src/workflow/nodes/start-node/index.vue
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -8,7 +8,7 @@
       @mouseenter="showicon = true"
       @mouseleave="showicon = false"
     >
-      <span>{{ item.label }} {{ '{' + item.value + '}' }}</span>
+      <span class="break-all">{{ item.label }} {{ '{' + item.value + '}' }}</span>
       <el-tooltip
         effect="dark"
         :content="$t('views.applicationWorkflow.setting.copyParam')"