From 24b36bf90f8c9616f4e4bd46f7abea3da71ce396 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 28 Aug 2025 16:21:33 +0800
Subject: [PATCH] fix: Fix form node drag-and-drop issues and some style errors

---
 ui/src/components/app-icon/icons/knowledge.ts | 21 -------
 ui/src/components/app-icon/index.ts           | 42 +++++++++++++
 ui/src/components/app-table/index.vue         |  2 +-
 .../items/MultiSelectConstructor.vue          |  4 +-
 .../items/RadioCardConstructor.vue            |  4 +-
 .../constructor/items/RadioRowConstructor.vue |  4 +-
 .../items/SingleSelectConstructor.vue         |  4 +-
 ui/src/components/model-select/index.vue      |  8 +--
 ui/src/styles/element-plus.scss               | 17 +++++
 .../views/application/ApplicationSetting.vue  |  4 +-
 .../component/CreateApplicationDialog.vue     |  2 +-
 .../component/EditParagraphDialog.vue         | 22 +++++--
 .../paragraph/component/ProblemComponent.vue  |  9 +--
 ui/src/views/system-chat-user/group/index.vue |  4 +-
 ui/src/views/system-setting/theme/index.vue   |  5 --
 .../role/component/MemberFormContent.vue      |  4 +-
 ui/src/views/system/role/index.vue            |  2 +-
 ui/src/views/system/workspace/index.vue       |  2 +-
 ui/src/views/tool/ToolFormDrawer.vue          | 10 +--
 .../component/ApiInputFieldTable.vue          | 14 ++---
 .../base-node/component/ChatFieldTable.vue    |  4 +-
 .../component/UserInputFieldTable.vue         |  8 +--
 .../workflow/nodes/condition-node/index.vue   |  4 +-
 ui/src/workflow/nodes/form-node/index.vue     |  6 +-
 ui/src/workflow/nodes/mcp-node/index.vue      | 63 ++++++++++---------
 ui/src/workflow/nodes/reranker-node/index.vue |  2 +-
 .../nodes/search-knowledge-node/index.vue     |  2 +-
 ui/src/workflow/nodes/start-node/index.vue    |  1 -
 ui/src/workflow/nodes/tool-node/index.vue     |  2 +-
 .../nodes/variable-assign-node/index.vue      |  4 +-
 30 files changed, 146 insertions(+), 134 deletions(-)

diff --git a/ui/src/components/app-icon/icons/knowledge.ts b/ui/src/components/app-icon/icons/knowledge.ts
index 06848014e..205418dab 100644
--- a/ui/src/components/app-icon/icons/knowledge.ts
+++ b/ui/src/components/app-icon/icons/knowledge.ts
@@ -127,25 +127,4 @@ export default {
       ])
     },
   },
-  'app-add-circle-outlined': {
-    iconReader: () => {
-      return h('i', [
-        h(
-          'svg',
-          {
-            style: { height: '100%', width: '100%' },
-            viewBox: '0 0 1024 1024',
-            version: '1.1',
-            xmlns: 'http://www.w3.org/2000/svg',
-          },
-          [
-            h('path', {
-              d: 'M469.333333 469.333333V320a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V469.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H554.666667v149.333333a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V554.666667H320a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H469.333333z m42.666667 426.666667a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m0 85.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z',
-              fill: 'currentColor',
-            }),
-          ],
-        ),
-      ])
-    },
-  },
 }
diff --git a/ui/src/components/app-icon/index.ts b/ui/src/components/app-icon/index.ts
index 9d723a764..f8887cc12 100644
--- a/ui/src/components/app-icon/index.ts
+++ b/ui/src/components/app-icon/index.ts
@@ -453,6 +453,48 @@ export const iconMap: any = {
       ])
     },
   },
+  'app-add-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M469.333333 469.333333V112.682667c0-9.514667 0.981333-12.970667 2.858667-16.426667a19.370667 19.370667 0 0 1 8.064-8.106667c3.456-1.834667 6.912-2.816 16.426667-2.816h30.634666c9.514667 0 12.970667 0.981333 16.426667 2.858667a19.370667 19.370667 0 0 1 8.106667 8.064c1.834667 3.456 2.816 6.912 2.816 16.426667V469.333333h356.650666c9.514667 0 12.970667 0.981333 16.426667 2.858667a19.370667 19.370667 0 0 1 8.106667 8.064c1.834667 3.456 2.816 6.912 2.816 16.426667v30.634666c0 9.514667-0.981333 12.970667-2.858667 16.426667a19.370667 19.370667 0 0 1-8.064 8.106667c-3.456 1.834667-6.912 2.816-16.426667 2.816H554.666667v356.650666c0 9.514667-0.981333 12.970667-2.858667 16.426667a19.370667 19.370667 0 0 1-8.064 8.106667c-3.456 1.834667-6.912 2.816-16.426667 2.816h-30.634666c-9.514667 0-12.970667-0.981333-16.426667-2.858667a19.370667 19.370667 0 0 1-8.106667-8.064c-1.834667-3.456-2.816-6.912-2.816-16.426667V554.666667H112.682667c-9.514667 0-12.970667-0.981333-16.426667-2.858667a19.370667 19.370667 0 0 1-8.106667-8.064C86.357333 540.288 85.333333 536.832 85.333333 527.36v-30.634667c0-9.514667 0.981333-12.970667 2.858667-16.426666a19.370667 19.370667 0 0 1 8.064-8.106667c3.456-1.834667 6.912-2.816 16.426667-2.816H469.333333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-add-circle-outlined': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            style: { height: '100%', width: '100%' },
+            viewBox: '0 0 1024 1024',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg',
+          },
+          [
+            h('path', {
+              d: 'M469.333333 469.333333V320a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V469.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H554.666667v149.333333a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333V554.666667H320a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334H469.333333z m42.666667 426.666667a384 384 0 1 0 0-768 384 384 0 0 0 0 768z m0 85.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
   // 动态加载的图标
   ...dynamicIcons,
 }
diff --git a/ui/src/components/app-table/index.vue b/ui/src/components/app-table/index.vue
index a92a352a5..eb82af3f1 100644
--- a/ui/src/components/app-table/index.vue
+++ b/ui/src/components/app-table/index.vue
@@ -24,7 +24,7 @@
         </div>
         <div v-else @click="quickCreateHandle" class="w-full">
           <el-button type="primary" link class="quich-button">
-            <el-icon><Plus /></el-icon>
+            <AppIcon iconName="app-add-outlined"></AppIcon>
             <span class="ml-4">{{ quickCreatePlaceholder }}</span>
           </el-button>
         </div>
diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
index c581d0458..77fd661b2 100644
--- a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -57,9 +57,7 @@
       <div class="flex-between">
         {{ $t('dynamicsForm.Select.label') }}
         <el-button link type="primary" @click.stop="addOption()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
index 90a0d1666..5d68e6f12 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -56,9 +56,7 @@
       <div class="flex-between">
         {{ $t('dynamicsForm.Select.label') }}
         <el-button link type="primary" @click.stop="addOption()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
index d818022d8..0da545193 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -56,9 +56,7 @@
       <div class="flex-between">
         {{ $t('dynamicsForm.Select.label') }}
         <el-button link type="primary" @click.stop="addOption()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
diff --git a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
index ca675a180..14239c406 100644
--- a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -55,9 +55,7 @@
       <div class="flex-between">
         {{ $t('dynamicsForm.Select.label') }}
         <el-button link type="primary" @click.stop="addOption()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
diff --git a/ui/src/components/model-select/index.vue b/ui/src/components/model-select/index.vue
index 18debb491..bf7a0bb24 100644
--- a/ui/src/components/model-select/index.vue
+++ b/ui/src/components/model-select/index.vue
@@ -53,12 +53,8 @@
       <template #footer v-if="showFooter">
         <slot name="footer">
           <div class="w-full text-left cursor" @click="openCreateModel(undefined, props.modelType)">
-            <el-button type="primary" link
-              v-if="permissionPrecise.create()"
-            >
-              <el-icon class="mr-4">
-                <Plus />
-              </el-icon>
+            <el-button type="primary" link v-if="permissionPrecise.create()">
+              <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
               {{ $t('views.application.operation.addModel') }}
             </el-button>
           </div>
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 680c4e4f6..56da129e3 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -304,3 +304,20 @@
 .el-pagination .el-select {
   width: 105px;
 }
+
+// el-checkbox
+.el-checkbox {
+  --el-checkbox-font-weight: 400;
+  --el-checkbox-text-color: var(--el-text-color-primary);
+}
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--el-text-color-primary);
+}
+
+// el-radio
+.el-radio {
+  --el-radio-font-weight: 400;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: var(--el-text-color-primary);
+}
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index f472eb4c9..ca28665b8 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -175,9 +175,7 @@
                           {{ $t('common.paramSetting') }}
                         </el-button>
                         <el-button type="primary" link @click="openKnowledgeDialog">
-                          <el-icon class="mr-4">
-                            <Plus />
-                          </el-icon>
+                          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
                           {{ $t('common.add') }}
                         </el-button>
                       </div>
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
index eaf2a3437..f373ef1d9 100644
--- a/ui/src/views/application/component/CreateApplicationDialog.vue
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -53,7 +53,7 @@
                 :class="appTemplate === 'blank' ? 'active' : ''"
               >
                 <div class="flex-center p-24">
-                  <el-icon class="mr-12"><Plus /></el-icon>
+                  <AppIcon iconName="app-add-outlined" class="mr-12"></AppIcon>
                   {{ $t('views.application.form.appTemplate.blankApp.title') }}
                 </div>
               </el-card>
diff --git a/ui/src/views/knowledge/component/EditParagraphDialog.vue b/ui/src/views/knowledge/component/EditParagraphDialog.vue
index 37e104625..389800e2d 100644
--- a/ui/src/views/knowledge/component/EditParagraphDialog.vue
+++ b/ui/src/views/knowledge/component/EditParagraphDialog.vue
@@ -10,7 +10,12 @@
   >
     <el-row v-if="isConnect">
       <el-col :span="18" class="p-24">
-        <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" :knowledge-id="knowledgeId"/>
+        <ParagraphForm
+          ref="paragraphFormRef"
+          :data="detail"
+          :isEdit="true"
+          :knowledge-id="knowledgeId"
+        />
       </el-col>
       <el-col :span="6" class="border-l" style="width: 300px">
         <p class="bold title p-24" style="padding-bottom: 0">
@@ -18,7 +23,7 @@
             <span>{{ $t('views.paragraph.relatedProblem.title') }}</span>
             <el-divider direction="vertical" class="mr-4" />
             <el-button text @click="addProblem">
-              <el-icon><Plus /></el-icon>
+              <AppIcon iconName="app-add-outlined"></AppIcon>
             </el-button>
           </span>
         </p>
@@ -52,7 +57,12 @@
       </el-col>
     </el-row>
     <div v-else class="p-24">
-      <ParagraphForm ref="paragraphFormRef" :data="detail" :isEdit="true" :knowledge-id="knowledgeId"/>
+      <ParagraphForm
+        ref="paragraphFormRef"
+        :data="detail"
+        :isEdit="true"
+        :knowledge-id="knowledgeId"
+      />
     </div>
 
     <template #footer>
@@ -70,7 +80,7 @@ import ParagraphForm from '@/views/paragraph/component/ParagraphForm.vue'
 
 const props = defineProps({
   isConnect: Boolean,
-  knowledgeId: String
+  knowledgeId: String,
 })
 
 const emit = defineEmits(['updateContent'])
@@ -106,7 +116,7 @@ function addProblemHandle() {
       !detail.value?.problem_list.some((item: any) => item.content === problemValue.value.trim())
     ) {
       detail.value?.problem_list?.push({
-        content: problemValue.value.trim()
+        content: problemValue.value.trim(),
       })
     }
 
@@ -125,7 +135,7 @@ const submitHandle = async () => {
   if (await paragraphFormRef.value?.validate()) {
     emit('updateContent', {
       problem_list: detail.value.problem_list,
-      ...paragraphFormRef.value?.form
+      ...paragraphFormRef.value?.form,
     })
     dialogVisible.value = false
   }
diff --git a/ui/src/views/paragraph/component/ProblemComponent.vue b/ui/src/views/paragraph/component/ProblemComponent.vue
index 4d8679c07..4a379dbaf 100644
--- a/ui/src/views/paragraph/component/ProblemComponent.vue
+++ b/ui/src/views/paragraph/component/ProblemComponent.vue
@@ -3,10 +3,8 @@
     <span class="flex align-center">
       <span>{{ $t('views.paragraph.relatedProblem.title') }}</span>
       <el-divider direction="vertical" class="mr-4" />
-      <el-button text @click="addProblem"
-        v-if="permissionPrecise.problem_relate(id)"
-      >
-        <el-icon><Plus /></el-icon>
+      <el-button text @click="addProblem" v-if="permissionPrecise.problem_relate(id)">
+        <AppIcon iconName="app-add-outlined"></AppIcon>
       </el-button>
     </span>
   </p>
@@ -45,7 +43,7 @@
             class="question-tag"
             type="info"
             effect="plain"
-            v-bind="permissionPrecise.problem_relate(id) ? {closable:true} : {} "
+            v-bind="permissionPrecise.problem_relate(id) ? { closable: true } : {}"
           >
             <auto-tooltip :content="item.content">
               {{ item.content }}
@@ -62,7 +60,6 @@ import { useRoute } from 'vue-router'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
 import permissionMap from '@/permission'
 
-
 const props = defineProps<{
   paragraphId: string
   docId: string
diff --git a/ui/src/views/system-chat-user/group/index.vue b/ui/src/views/system-chat-user/group/index.vue
index 743af8e59..76ddf67ff 100644
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@@ -33,9 +33,7 @@
                     )
                   "
                 >
-                  <el-icon :size="18">
-                    <Plus />
-                  </el-icon>
+                  <AppIcon iconName="app-add-outlined"></AppIcon>
                 </el-button>
               </el-tooltip>
             </div>
diff --git a/ui/src/views/system-setting/theme/index.vue b/ui/src/views/system-setting/theme/index.vue
index 81f983b6e..4d2d7e4ab 100644
--- a/ui/src/views/system-setting/theme/index.vue
+++ b/ui/src/views/system-setting/theme/index.vue
@@ -420,10 +420,5 @@ onMounted(() => {
       background: var(--app-header-bg-color);
     }
   }
-  .theme-form {
-    :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
-      color: var(--el-checkbox-text-color);
-    }
-  }
 }
 </style>
diff --git a/ui/src/views/system/role/component/MemberFormContent.vue b/ui/src/views/system/role/component/MemberFormContent.vue
index cbad1e5ff..fb07e611b 100644
--- a/ui/src/views/system/role/component/MemberFormContent.vue
+++ b/ui/src/views/system/role/component/MemberFormContent.vue
@@ -57,9 +57,7 @@
     </el-scrollbar>
     <!-- 添加按钮 -->
     <el-button type="primary" text class="mt-2" @click="handleAdd">
-      <el-icon class="mr-4">
-        <Plus />
-      </el-icon>
+      <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
       {{ props.addText ?? $t('views.role.member.add') }}
     </el-button>
   </el-form>
diff --git a/ui/src/views/system/role/index.vue b/ui/src/views/system/role/index.vue
index aeaf41c15..28de69d50 100644
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@@ -53,7 +53,7 @@
                         )
                       "
                     >
-                      <el-icon :size="18"><Plus /></el-icon>
+                      <AppIcon iconName="app-add-outlined"></AppIcon>
                     </el-button>
                   </el-tooltip>
                 </div>
diff --git a/ui/src/views/system/workspace/index.vue b/ui/src/views/system/workspace/index.vue
index a65b3e402..45dbfde1a 100644
--- a/ui/src/views/system/workspace/index.vue
+++ b/ui/src/views/system/workspace/index.vue
@@ -18,7 +18,7 @@
                   @click="createOrUpdateWorkspace()"
                   v-hasPermission="[RoleConst.ADMIN, PermissionConst.WORKSPACE_CREATE]"
                 >
-                  <el-icon :size="18"><Plus /></el-icon>
+                  <AppIcon iconName="app-add-outlined"></AppIcon>
                 </el-button>
               </el-tooltip>
             </div>
diff --git a/ui/src/views/tool/ToolFormDrawer.vue b/ui/src/views/tool/ToolFormDrawer.vue
index bb3427bc2..8ffb0286a 100644
--- a/ui/src/views/tool/ToolFormDrawer.vue
+++ b/ui/src/views/tool/ToolFormDrawer.vue
@@ -77,9 +77,7 @@
           {{ $t('common.param.initParam') }}
         </h4>
         <el-button link type="primary" @click="openAddInitDialog()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
@@ -149,9 +147,7 @@
           </el-text>
         </h4>
         <el-button link type="primary" @click="openAddDialog()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </div>
@@ -196,7 +192,7 @@
       </el-table>
       <h4 class="title-decoration-1 mb-16">
         {{ $t('views.tool.form.param.code') }}
-        <span  class="color-danger" style="margin-left: -10px">*</span>
+        <span class="color-danger" style="margin-left: -10px">*</span>
         <el-text type="info" class="color-secondary">
           {{ $t('views.tool.form.param.paramInfo2') }}
         </el-text>
diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
index 19045ed74..0a22ba76e 100644
--- a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -2,18 +2,16 @@
   <div class="flex-between mb-16">
     <h5 class="lighter">{{ $t('views.model.modelForm.title.apiParamPassing') }}</h5>
     <el-button link type="primary" @click="openAddDialog()">
-      <el-icon class="mr-4">
-        <Plus />
-      </el-icon>
+      <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
       {{ $t('common.add') }}
     </el-button>
   </div>
   <el-table
     v-if="props.nodeModel.properties.api_input_field_list?.length > 0"
     :data="props.nodeModel.properties.api_input_field_list"
-    class="mb-16"
+    class="mb-16 api-input-field-table"
     ref="tableRef"
-    row-key="field"
+    row-key="variable"
   >
     <el-table-column prop="variable" :label="$t('dynamicsForm.paramForm.field.label')">
       <template #default="{ row }">
@@ -59,7 +57,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { set } from 'lodash'
+import { set, cloneDeep } from 'lodash'
 import Sortable from 'sortablejs'
 import ApiFieldFormDialog from './ApiFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
@@ -116,7 +114,7 @@ function onDragHandle() {
 
   // 获取表格的 tbody DOM 元素
   const wrapper = tableRef.value.$el as HTMLElement
-  const tbody = wrapper.querySelector('.el-table__body-wrapper tbody')
+  const tbody = wrapper.querySelector('.api-input-field-table .el-table__body-wrapper tbody')
   if (!tbody) return
   // 初始化 Sortable
   Sortable.create(tbody as HTMLElement, {
@@ -125,7 +123,7 @@ function onDragHandle() {
     onEnd: (evt) => {
       if (evt.oldIndex === undefined || evt.newIndex === undefined) return
       // 更新数据顺序
-      const items = [...inputFieldList.value]
+      const items = cloneDeep([...inputFieldList.value])
       const [movedItem] = items.splice(evt.oldIndex, 1)
       items.splice(evt.newIndex, 0, movedItem)
       inputFieldList.value = items
diff --git a/ui/src/workflow/nodes/base-node/component/ChatFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ChatFieldTable.vue
index cd62af694..261dc5306 100644
--- a/ui/src/workflow/nodes/base-node/component/ChatFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/ChatFieldTable.vue
@@ -6,9 +6,7 @@
     <div>
       <span class="ml-4">
         <el-button link type="primary" @click="openAddDialog()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </span>
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
index 2b26fc435..9b21c3db1 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -9,9 +9,7 @@
       </el-button>
       <span class="ml-4">
         <el-button link type="primary" @click="openAddDialog()">
-          <el-icon class="mr-4">
-            <Plus />
-          </el-icon>
+          <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
           {{ $t('common.add') }}
         </el-button>
       </span>
@@ -109,7 +107,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { set } from 'lodash'
+import { set,cloneDeep } from 'lodash'
 import Sortable from 'sortablejs'
 import UserFieldFormDialog from './UserFieldFormDialog.vue'
 import { MsgError } from '@/utils/message'
@@ -200,7 +198,7 @@ function onDragHandle() {
     onEnd: (evt) => {
       if (evt.oldIndex === undefined || evt.newIndex === undefined) return
       // 更新数据顺序
-      const items = [...inputFieldList.value]
+      const items = cloneDeep([...inputFieldList.value])
       const [movedItem] = items.splice(evt.oldIndex, 1)
       items.splice(evt.newIndex, 0, movedItem)
       inputFieldList.value = items
diff --git a/ui/src/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
index ba7dc8c30..e9a365d82 100644
--- a/ui/src/workflow/nodes/condition-node/index.vue
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -144,14 +144,14 @@
               @click="addCondition(index)"
               v-if="index !== form_data.branch.length - 1"
             >
-              <el-icon class="mr-4"><Plus /></el-icon>
+              <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
               {{ $t('views.applicationWorkflow.nodes.conditionNode.addCondition') }}
             </el-button>
           </el-card>
         </template>
       </VueDraggable>
       <el-button link type="primary" @click="addBranch">
-        <el-icon class="mr-4"><Plus /></el-icon>
+        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
         {{ $t('views.applicationWorkflow.nodes.conditionNode.addBranch') }}
       </el-button>
     </el-form>
diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue
index d9f28add2..f02ac149e 100644
--- a/ui/src/workflow/nodes/form-node/index.vue
+++ b/ui/src/workflow/nodes/form-node/index.vue
@@ -57,9 +57,7 @@
                 {{ $t('views.applicationWorkflow.nodes.formNode.formSetting') }}
               </h5>
               <el-button link type="primary" @click="openAddFormCollect()">
-                <el-icon class="mr-4">
-                  <Plus />
-                </el-icon>
+                <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
                 {{ $t('common.add') }}
               </el-button>
             </div></template
@@ -263,7 +261,7 @@ function onDragHandle() {
     onEnd: (evt) => {
       if (evt.oldIndex === undefined || evt.newIndex === undefined) return
       // 更新数据顺序
-      const items = [...form_data.value.form_field_list]
+      const items = cloneDeep([...form_data.value.form_field_list])
       const [movedItem] = items.splice(evt.oldIndex, 1)
       items.splice(evt.newIndex, 0, movedItem)
       form_data.value.form_field_list = items
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
index f47a11421..27199029a 100644
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -28,7 +28,7 @@
                   :label="$t('views.applicationWorkflow.nodes.mcpNode.reference')"
                   value="referencing"
                 />
-                <el-option :label="$t('common.custom')" value="custom"/>
+                <el-option :label="$t('common.custom')" value="custom" />
               </el-select>
             </div>
           </template>
@@ -41,8 +41,12 @@
             @submitDialog="submitDialog"
             :placeholder="mcpServerJson"
           />
-          <el-select v-else v-model="form_data.mcp_tool_id" filterable
-                     @change="mcpToolSelectChange">
+          <el-select
+            v-else
+            v-model="form_data.mcp_tool_id"
+            filterable
+            @change="mcpToolSelectChange"
+          >
             <el-option
               v-for="mcpTool in mcpToolSelectOptions"
               :key="mcpTool.id"
@@ -61,9 +65,7 @@
             <div class="flex-between">
               <span>{{ $t('views.tool.title') }}</span>
               <el-button type="primary" link @click="getTools()">
-                <el-icon class="mr-4">
-                  <Plus/>
-                </el-icon>
+                <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
                 {{ $t('views.applicationWorkflow.nodes.mcpNode.getTool') }}
               </el-button>
             </div>
@@ -116,7 +118,7 @@
             <template #label>
               <div class="flex-between">
                 <div>
-                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip"/>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
                   <span v-if="item.required" class="color-danger">*</span>
                 </div>
                 <el-select
@@ -130,7 +132,7 @@
                     :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
                     value="referencing"
                   />
-                  <el-option :label="$t('common.custom')" value="custom"/>
+                  <el-option :label="$t('common.custom')" value="custom" />
                 </el-select>
               </div>
             </template>
@@ -185,7 +187,7 @@
             <template #label>
               <div class="flex-between">
                 <div>
-                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip"/>
+                  <TooltipLabel :label="item.label.label" :tooltip="item.label.attrs.tooltip" />
                   <span v-if="item.required" class="color-danger">*</span>
                 </div>
                 <el-select
@@ -198,7 +200,7 @@
                     :label="$t('views.applicationWorkflow.nodes.replyNode.replyContent.reference')"
                     value="referencing"
                   />
-                  <el-option :label="$t('common.custom')" value="custom"/>
+                  <el-option :label="$t('common.custom')" value="custom" />
                 </el-select>
               </div>
             </template>
@@ -244,14 +246,14 @@ import TooltipLabel from '@/components/dynamics-form/items/label/TooltipLabel.vu
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import { useRoute } from 'vue-router'
 import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
-import useStore from "@/stores";
+import useStore from '@/stores'
 
 const props = defineProps<{ nodeModel: any }>()
-const {user} = useStore()
+const { user } = useStore()
 
 const route = useRoute()
 const {
-  params: {id},
+  params: { id },
 } = route as any
 const getApplicationDetail = inject('getApplicationDetail') as any
 const applicationDetail = getApplicationDetail()
@@ -302,8 +304,10 @@ function submitDialog(val: string) {
 }
 
 async function mcpToolSelectChange() {
-  const tool = await loadSharedApi({type: 'tool', systemType: apiType.value})
-    .getToolById(form_data.value.mcp_tool_id, loading)
+  const tool = await loadSharedApi({ type: 'tool', systemType: apiType.value }).getToolById(
+    form_data.value.mcp_tool_id,
+    loading,
+  )
   form_data.value.mcp_servers = tool.data.code
 }
 
@@ -322,7 +326,7 @@ function getTools() {
     MsgError(t('views.applicationWorkflow.nodes.mcpNode.mcpServerTip'))
     return
   }
-  loadSharedApi({type: 'application', systemType: apiType.value})
+  loadSharedApi({ type: 'application', systemType: apiType.value })
     .getMcpTools(id, form_data.value.mcp_servers, loading)
     .then((res: any) => {
       form_data.value.mcp_tools = res.data
@@ -365,7 +369,7 @@ function changeTool() {
           label: {
             input_type: 'TooltipLabel',
             label: item2,
-            attrs: {tooltip: params[item2].description},
+            attrs: { tooltip: params[item2].description },
             props_info: {},
           },
           input_type: input_type,
@@ -401,7 +405,7 @@ function changeTool() {
         label: {
           input_type: 'TooltipLabel',
           label: item,
-          attrs: {tooltip: args_schema.properties[item].description},
+          attrs: { tooltip: args_schema.properties[item].description },
           props_info: {},
         },
         input_type: input_type,
@@ -421,7 +425,7 @@ function changeTool() {
   }
   //
   if (form_data.value.params_nested) {
-    form_data.value.tool_params = {[form_data.value.params_nested]: {}}
+    form_data.value.tool_params = { [form_data.value.params_nested]: {} }
   } else {
     form_data.value.tool_params = {}
   }
@@ -492,20 +496,21 @@ function getMcpToolSelectOptions() {
   const obj =
     apiType.value === 'systemManage'
       ? {
-        scope: 'WORKSPACE',
-        tool_type: 'MCP',
-        workspace_id: applicationDetail.value?.workspace_id,
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+          workspace_id: applicationDetail.value?.workspace_id,
+        }
       : {
-        scope: 'WORKSPACE',
-        tool_type: 'MCP',
-      }
+          scope: 'WORKSPACE',
+          tool_type: 'MCP',
+        }
 
-  loadSharedApi({type: 'tool', systemType: apiType.value})
+  loadSharedApi({ type: 'tool', systemType: apiType.value })
     .getAllToolList(obj, loading)
     .then((res: any) => {
-      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools]
-        .filter((item: any) => item.is_active)
+      mcpToolSelectOptions.value = [...res.data.shared_tools, ...res.data.tools].filter(
+        (item: any) => item.is_active,
+      )
     })
 }
 
diff --git a/ui/src/workflow/nodes/reranker-node/index.vue b/ui/src/workflow/nodes/reranker-node/index.vue
index 398a652e9..90c91ad4a 100644
--- a/ui/src/workflow/nodes/reranker-node/index.vue
+++ b/ui/src/workflow/nodes/reranker-node/index.vue
@@ -29,7 +29,7 @@
                 }}<span class="color-danger">*</span></span
               >
               <el-button @click="add_reranker_reference" link type="primary">
-                <el-icon class="mr-4"><Plus /></el-icon>
+                <AppIcon iconName="app-add-outlined"></AppIcon>
               </el-button>
             </div>
           </template>
diff --git a/ui/src/workflow/nodes/search-knowledge-node/index.vue b/ui/src/workflow/nodes/search-knowledge-node/index.vue
index a251fd575..4b2870406 100644
--- a/ui/src/workflow/nodes/search-knowledge-node/index.vue
+++ b/ui/src/workflow/nodes/search-knowledge-node/index.vue
@@ -15,7 +15,7 @@
             <div class="flex-between">
               <span>{{ $t('views.chatLog.selectKnowledge') }}</span>
               <el-button type="primary" link @click="openknowledgeDialog">
-                <el-icon><Plus /></el-icon>
+                <AppIcon iconName="app-add-outlined"></AppIcon>
               </el-button>
             </div>
           </template>
diff --git a/ui/src/workflow/nodes/start-node/index.vue b/ui/src/workflow/nodes/start-node/index.vue
index 5daebb975..62d10a09e 100644
--- a/ui/src/workflow/nodes/start-node/index.vue
+++ b/ui/src/workflow/nodes/start-node/index.vue
@@ -90,7 +90,6 @@ const getRefreshFieldList = () => {
     .map((v: any) => cloneDeep(v.properties.api_input_field_list))
     .reduce((x: any, y: any) => [...x, ...y], [])
     .map((i: any) => ({ label: i.name || i.variable, value: i.variable }))
-
   return [...user_input_fields, ...api_input_fields]
 }
 const refreshFieldList = () => {
diff --git a/ui/src/workflow/nodes/tool-node/index.vue b/ui/src/workflow/nodes/tool-node/index.vue
index aa92a21e7..0fe503813 100644
--- a/ui/src/workflow/nodes/tool-node/index.vue
+++ b/ui/src/workflow/nodes/tool-node/index.vue
@@ -4,7 +4,7 @@
     <div class="flex-between">
       <h5 class="lighter mb-8">{{ $t('common.param.inputParam') }}</h5>
       <el-button link type="primary" @click="openAddDialog()">
-        <el-icon class="mr-4"><Plus /></el-icon> {{ $t('common.add') }}
+        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon> {{ $t('common.add') }}
       </el-button>
     </div>
     <el-form
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.vue b/ui/src/workflow/nodes/variable-assign-node/index.vue
index 40140000c..5052fea4a 100644
--- a/ui/src/workflow/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@@ -136,9 +136,7 @@
       </template>
 
       <el-button link type="primary" @click="addVariable">
-        <el-icon class="mr-4">
-          <Plus />
-        </el-icon>
+        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
         {{ $t('common.add') }}
       </el-button>
     </el-form>