feat: Optimize the interface when there are too many interface parameters.(#2795)

* perf: Optimization drag sorting condition nodes

* feat: Optimize the interface when there are too many interface parameters.（#2795）

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>

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="variable" :label="$t('dynamicsForm.paramForm.field.label')">
-    <el-table-column prop="default_value" :label="$t('dynamicsForm.default.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>

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>

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