fix: Fix form node drag-and-drop issues and some style errors

2025-12-26 01:33:05 +00:00 · 2025-08-28 16:21:33 +08:00 · 2025-08-28 16:21:33 +08:00 · 24b36bf90f
parent d53b4dcd00
commit 24b36bf90f
30 changed files with 146 additions and 134 deletions
--- 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',
-            }),
-          ],
-        ),
-      ])
-    },
-  },
 }
--- 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,
 }
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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);
+}
--- 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>
--- 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>
--- 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
  }
--- 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
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>
--- 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
--- 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>
--- 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
--- 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,
+      )
    })
 }

--- 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>
--- 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>
--- 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 = () => {
--- 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
--- 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>