From 0a50277d3d3d6aadc36e4dd6b4d55ebabf4bc89a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 27 Feb 2025 18:14:02 +0800
Subject: [PATCH] perf: Optimization of modifying node names in workflow

---
 ui/src/locales/lang/en-US/common.ts           |   3 +-
 .../lang/en-US/views/application-workflow.ts  |   1 +
 ui/src/locales/lang/zh-CN/common.ts           |   3 +-
 .../lang/zh-CN/views/application-workflow.ts  |   1 +
 ui/src/locales/lang/zh-Hant/common.ts         |   5 +-
 .../zh-Hant/views/application-workflow.ts     |   1 +
 ui/src/workflow/common/NodeContainer.vue      |  95 +++++++----
 .../nodes/variable-assign-node/index.vue      | 149 +++++++++---------
 8 files changed, 155 insertions(+), 103 deletions(-)

diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts
index 7c2996d3561..e8fbb87e9b4 100644
--- a/ui/src/locales/lang/en-US/common.ts
+++ b/ui/src/locales/lang/en-US/common.ts
@@ -57,5 +57,6 @@ export default {
 
   inputPlaceholder: 'Please input',
   title: 'Title',
-  content: 'Content'
+  content: 'Content',
+  rename: 'Rename'
 }
diff --git a/ui/src/locales/lang/en-US/views/application-workflow.ts b/ui/src/locales/lang/en-US/views/application-workflow.ts
index 3ac6c265c83..6e1aa8c673c 100644
--- a/ui/src/locales/lang/en-US/views/application-workflow.ts
+++ b/ui/src/locales/lang/en-US/views/application-workflow.ts
@@ -1,5 +1,6 @@
 export default {
   node: 'Node',
+  nodeName: 'Node Name',
   baseComponent: 'Basic',
   nodeSetting: 'Node Settings',
   workflow: 'Workflow',
diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts
index 1bd88784f5c..cdcde3d6072 100644
--- a/ui/src/locales/lang/zh-CN/common.ts
+++ b/ui/src/locales/lang/zh-CN/common.ts
@@ -56,5 +56,6 @@ export default {
   param: {
     outputParam: '输出参数',
     inputParam:'输入参数'
-  }
+  },
+  rename:'重命名'
 }
diff --git a/ui/src/locales/lang/zh-CN/views/application-workflow.ts b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
index 95d73605fd7..010964bb004 100644
--- a/ui/src/locales/lang/zh-CN/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-CN/views/application-workflow.ts
@@ -1,5 +1,6 @@
 export default {
   node: '节点',
+  nodeName: '节点名称',
   baseComponent: '基础组件',
   nodeSetting: '节点设置',
   workflow: '工作流',
diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts
index 9adcf372b25..3281456de96 100644
--- a/ui/src/locales/lang/zh-Hant/common.ts
+++ b/ui/src/locales/lang/zh-Hant/common.ts
@@ -55,6 +55,7 @@ export default {
   content: '内容',
   param: {
     outputParam: '輸出參數',
-    inputParam:'輸入參數'
-  }
+    inputParam: '輸入參數'
+  },
+  rename: '重命名'
 }
diff --git a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
index e3491eb77f7..b8cf464693a 100644
--- a/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application-workflow.ts
@@ -1,5 +1,6 @@
 export default {
   node: '節點',
+  nodeName: '節點名稱',
   baseComponent: '基礎組件',
   nodeSetting: '節點設置',
   workflow: '工作流',
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index 82665934595..265634ad016 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -7,28 +7,14 @@
     >
       <div v-resize="resizeStepContainer">
         <div class="flex-between">
-          <div
-            class="flex align-center"
-            :style="{ maxWidth: node_status == 200 ? 'calc(100% - 85px)' : 'calc(100% - 85px)' }"
-          >
+          <div class="flex align-center" style="width: 70%;">
             <component
               :is="iconComponent(`${nodeModel.type}-icon`)"
               class="mr-8"
               :size="24"
               :item="nodeModel?.properties.node_data"
             />
-            <h4 v-if="showOperate(nodeModel.type)" style="max-width: 90%">
-              <ReadWrite
-                @mousemove.stop
-                @mousedown.stop
-                @keydown.stop
-                @click.stop
-                @change="editName"
-                :data="nodeModel.properties.stepName"
-                trigger="dblclick"
-              />
-            </h4>
-            <h4 v-else>{{ nodeModel.properties.stepName }}</h4>
+            <h4 class="ellipsis-1 break-all">{{ nodeModel.properties.stepName }}</h4>
           </div>
 
           <div @mousemove.stop @mousedown.stop @keydown.stop @click.stop>
@@ -70,6 +56,9 @@
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu style="min-width: 80px">
+                  <el-dropdown-item @click="renameNode" class="p-8">{{
+                    $t('common.rename')
+                  }}</el-dropdown-item>
                   <el-dropdown-item @click="copyNode" class="p-8">{{
                     $t('common.copy')
                   }}</el-dropdown-item>
@@ -138,6 +127,40 @@
         @clickNodes="clickNodes"
       />
     </el-collapse-transition>
+
+    <el-dialog
+      :title="$t('views.applicationWorkflow.nodeName')"
+      v-model="nodeNameDialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      append-to-body
+    >
+      <el-form label-position="top" ref="titleFormRef" :model="form">
+        <el-form-item
+          prop="title"
+          :rules="[
+            {
+              required: true,
+              message: $t('common.inputPlaceholder'),
+              trigger: 'blur'
+            }
+          ]"
+        >
+          <el-input v-model="form.title" @blur="form.title = form.title.trim()" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click.prevent="nodeNameDialogVisible = false">
+            {{ $t('common.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="editName(titleFormRef)">
+            {{ $t('common.save') }}
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
@@ -149,6 +172,7 @@ import { iconComponent } from '../icons/utils'
 import { copyClick } from '@/utils/clipboard'
 import { WorkflowType } from '@/enums/workflow'
 import { MsgError, MsgConfirm } from '@/utils/message'
+import type { FormInstance } from 'element-plus'
 import { t } from '@/locales'
 const {
   params: { id }
@@ -165,6 +189,11 @@ const height = ref<{
 })
 const showAnchor = ref<boolean>(false)
 const anchorData = ref<any>()
+const titleFormRef = ref()
+const nodeNameDialogVisible = ref<boolean>(false)
+const form = ref<any>({
+  title: ''
+})
 
 const condition = computed({
   set: (v) => {
@@ -190,6 +219,7 @@ const showNode = computed({
     return true
   }
 })
+
 const handleWheel = (event: any) => {
   const isCombinationKeyPressed = event.ctrlKey || event.metaKey
   if (!isCombinationKeyPressed) {
@@ -202,19 +232,30 @@ const node_status = computed(() => {
   }
   return 200
 })
-function editName(val: string) {
-  if (val.trim() && val.trim() !== props.nodeModel.properties.stepName) {
-    if (
-      !props.nodeModel.graphModel.nodes?.some(
-        (node: any) => node.properties.stepName === val.trim()
-      )
-    ) {
-      set(props.nodeModel.properties, 'stepName', val.trim())
-    } else {
-      MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
+
+function renameNode() {
+  form.value.title = props.nodeModel.properties.stepName
+  nodeNameDialogVisible.value = true
+}
+const editName = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      if (
+        !props.nodeModel.graphModel.nodes?.some(
+          (node: any) => node.properties.stepName === form.value.title
+        )
+      ) {
+        set(props.nodeModel.properties, 'stepName', form.value.title)
+        nodeNameDialogVisible.value = false
+        formEl.resetFields()
+      } else {
+        MsgError(t('views.applicationWorkflow.tip.repeatedNodeError'))
+      }
     }
-  }
+  })
 }
+
 const mousedown = () => {
   props.nodeModel.graphModel.clearSelectElements()
   set(props.nodeModel, 'isSelected', true)
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.vue b/ui/src/workflow/nodes/variable-assign-node/index.vue
index 4c24bd6c7fc..ecd8fd31ba1 100644
--- a/ui/src/workflow/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@@ -39,7 +39,7 @@
               <div class="flex-between">
                 <div>
                   <span
-                  >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
+                    >{{ $t('views.applicationWorkflow.nodes.variableAssignNode.assign')
                     }}<span class="danger">*</span></span
                   >
                 </div>
@@ -60,77 +60,83 @@
                 </el-select>
               </div>
             </template>
-          </el-form-item>
-          <div v-if="item.source === 'custom'" class="flex">
-            <el-row :gutter="8">
-              <el-col :span="8">
-                <el-select v-model="item.type" style="width: 130px;">
-                  <el-option v-for="item in typeOptions" :key="item" :label="item"
-                             :value="item" />
-                </el-select>
-              </el-col>
-              <el-col :span="16">
-                <el-form-item v-if="item.type === 'string'"
-                              :prop="'variable_list.' + index + '.value'"
-                              :rules="{
-                                message: t('dynamicsForm.tip.requiredMessage'),
-                                trigger: 'blur',
-                                required: true
-                              }"
-                >
-                  <el-input
-                    class="ml-4"
-                    v-model="item.value"
-                    :placeholder="$t('common.inputPlaceholder')"
-                    show-word-limit
-                    clearable
-                    @wheel="wheel"
-                  ></el-input>
-                </el-form-item>
-                <el-form-item v-else-if="item.type ==='num'"
-                              :prop="'variable_list.' + index + '.value'"
-                              :rules="{
-                                message: t('dynamicsForm.tip.requiredMessage'),
-                                trigger: 'blur',
-                                required: true
-                              }"
-                >
-                  <el-input-number
-                    class="ml-4"
-                    v-model="item.value"
-                  ></el-input-number>
-                </el-form-item>
-                <el-form-item v-else-if="item.type === 'json'"
-                              :prop="'variable_list.' + index + '.value'"
-                              :rules="[{
-                                message: t('dynamicsForm.tip.requiredMessage'),
-                                trigger: 'blur',
-                                required: true
-                              },
-                              {
-                                validator: (rule:any, value:any, callback:any) => {
-                                  try {
-                                    JSON.parse(value);
-                                    callback();  // Valid JSON
-                                  } catch (e) {
-                                    callback(new Error('Invalid JSON format'));
-                                  }
-                                },
-                                trigger: 'blur',
-                              }]"
-                >
-                  <el-input
-                    class="ml-4"
-                    v-model="item.value"
-                    :placeholder="$t('common.inputPlaceholder')"
-                    type="textarea"
-                  ></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </div>
-          <el-form-item v-else>
+            <div v-if="item.source === 'custom'" class="flex">
+              <el-row :gutter="8">
+                <el-col :span="8">
+                  <el-select v-model="item.type" style="width: 85px">
+                    <el-option
+                      v-for="item in typeOptions"
+                      :key="item"
+                      :label="item"
+                      :value="item"
+                    />
+                  </el-select>
+                </el-col>
+                <el-col :span="16">
+                  <el-form-item
+                    v-if="item.type === 'string'"
+                    :prop="'variable_list.' + index + '.value'"
+                    :rules="{
+                      message: t('dynamicsForm.tip.requiredMessage'),
+                      trigger: 'blur',
+                      required: true
+                    }"
+                  >
+                    <el-input
+                      class="ml-4"
+                      v-model="item.value"
+                      :placeholder="$t('common.inputPlaceholder')"
+                      show-word-limit
+                      clearable
+                      @wheel="wheel"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item
+                    v-else-if="item.type === 'num'"
+                    :prop="'variable_list.' + index + '.value'"
+                    :rules="{
+                      message: $t('common.inputPlaceholder'),
+                      trigger: 'blur',
+                      required: true
+                    }"
+                  >
+                    <el-input-number class="ml-4" v-model="item.value"></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-else-if="item.type === 'json'"
+                    :prop="'variable_list.' + index + '.value'"
+                    :rules="[
+                      {
+                        message: $t('common.inputPlaceholder'),
+                        trigger: 'blur',
+                        required: true
+                      },
+                      {
+                        validator: (rule: any, value: any, callback: any) => {
+                          try {
+                            JSON.parse(value)
+                            callback() // Valid JSON
+                          } catch (e) {
+                            callback(new Error('Invalid JSON format'))
+                          }
+                        },
+                        trigger: 'blur'
+                      }
+                    ]"
+                  >
+                    <el-input
+                      class="ml-4"
+                      v-model="item.value"
+                      :placeholder="$t('common.inputPlaceholder')"
+                      type="textarea"
+                      autosize
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
             <NodeCascader
+              v-else
               ref="nodeCascaderRef2"
               :nodeModel="nodeModel"
               class="w-full"
@@ -138,7 +144,6 @@
               v-model="item.reference"
             />
           </el-form-item>
-
         </el-card>
       </template>
       <el-button link type="primary" @click="addVariable">