diff --git a/ui/src/assets/hit-test-empty.png b/ui/src/assets/hit-test-empty.png
index 83a2c9a06..c25303859 100644
Binary files a/ui/src/assets/hit-test-empty.png and b/ui/src/assets/hit-test-empty.png differ
diff --git a/ui/src/components/ai-chat/component/operation-button/LogOperationButton.vue b/ui/src/components/ai-chat/component/operation-button/LogOperationButton.vue
index d1622f124..59ddfd4f6 100644
--- a/ui/src/components/ai-chat/component/operation-button/LogOperationButton.vue
+++ b/ui/src/components/ai-chat/component/operation-button/LogOperationButton.vue
@@ -8,7 +8,12 @@
     <div>
       <!-- 语音播放 -->
       <span v-if="tts">
-        <el-tooltip effect="dark" :content="$t('chat.operation.play')" placement="top" v-if="!audioPlayerStatus">
+        <el-tooltip
+          effect="dark"
+          :content="$t('chat.operation.play')"
+          placement="top"
+          v-if="!audioPlayerStatus"
+        >
           <el-button text @click="playAnswerText(data?.answer_text)">
             <AppIcon iconName="app-video-play"></AppIcon>
           </el-button>
@@ -33,7 +38,7 @@
         placement="top"
       >
         <el-button text @click="editContent(data)">
-          <el-icon><EditPen /></el-icon>
+          <AppIcon iconName="app-edit"></AppIcon>
         </el-button>
       </el-tooltip>
 
@@ -54,7 +59,13 @@
       <EditContentDialog ref="EditContentDialogRef" @refresh="refreshContent" />
       <EditMarkDialog ref="EditMarkDialogRef" @refresh="refreshMark" />
       <!-- 先渲染，不然不能播放   -->
-      <audio ref="audioPlayer" v-for="item in audioList" :key="item" controls hidden="hidden"></audio>
+      <audio
+        ref="audioPlayer"
+        v-for="item in audioList"
+        :key="item"
+        controls
+        hidden="hidden"
+      ></audio>
     </div>
   </div>
 </template>
@@ -70,20 +81,20 @@ import { MsgError } from '@/utils/message'
 import { t } from '@/locales'
 const route = useRoute()
 const {
-  params: { id }
+  params: { id },
 } = route as any
 
 const props = defineProps({
   data: {
     type: Object,
-    default: () => {}
+    default: () => {},
   },
   applicationId: {
     type: String,
-    default: ''
+    default: '',
   },
   tts: Boolean,
-  tts_type: String
+  tts_type: String,
 })
 
 const emit = defineEmits(['update:data'])
@@ -135,12 +146,9 @@ function markdownToPlainText(md: string) {
 }
 
 function removeFormRander(text: string) {
-  return text
-    .replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '')
-    .trim()
+  return text.replace(/<form_rander>[\s\S]*?<\/form_rander>/g, '').trim()
 }
 
-
 const playAnswerText = (text: string) => {
   if (!text) {
     text = t('chat.tip.answerMessage')
@@ -165,7 +173,8 @@ const playAnswerTextPart = () => {
   }
   if (audioList.value[currentAudioIndex.value].includes('<audio')) {
     if (audioPlayer.value) {
-      audioPlayer.value[currentAudioIndex.value].src = audioList.value[currentAudioIndex.value].match(/src="([^"]*)"/)?.[1] || ''
+      audioPlayer.value[currentAudioIndex.value].src =
+        audioList.value[currentAudioIndex.value].match(/src="([^"]*)"/)?.[1] || ''
       audioPlayer.value[currentAudioIndex.value].play() // 自动播放音频
       audioPlayer.value[currentAudioIndex.value].onended = () => {
         currentAudioIndex.value += 1
@@ -176,7 +185,10 @@ const playAnswerTextPart = () => {
     if (audioList.value[currentAudioIndex.value] !== utterance.value?.text) {
       window.speechSynthesis.cancel()
     }
-    if (window.speechSynthesis.paused && audioList.value[currentAudioIndex.value] === utterance.value?.text) {
+    if (
+      window.speechSynthesis.paused &&
+      audioList.value[currentAudioIndex.value] === utterance.value?.text
+    ) {
       window.speechSynthesis.resume()
       return
     }
@@ -200,7 +212,11 @@ const playAnswerTextPart = () => {
       return
     }
     applicationApi
-      .postTextToSpeech((props.applicationId as string) || (id as string), { text: audioList.value[currentAudioIndex.value] }, loading)
+      .postTextToSpeech(
+        (props.applicationId as string) || (id as string),
+        { text: audioList.value[currentAudioIndex.value] },
+        loading,
+      )
       .then(async (res: any) => {
         if (res.type === 'application/json') {
           const text = await res.text()
@@ -252,7 +268,6 @@ const pausePlayAnswerText = () => {
   }
 }
 
-
 function refreshMark() {
   buttonData.value.improve_paragraph_id_list = []
   emit('update:data', buttonData.value)
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index a3d707134..8d6f8eced 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -85,7 +85,7 @@
             class="user-input-button mb-8"
             @click="toggleUserInput"
           >
-            <el-icon :size="16" class="mr-4"><EditPen /></el-icon>
+            <AppIcon iconName="app-edit" :size="16" class="mr-4"></AppIcon>
             <span class="ellipsis">
               {{ userInputTitle || $t('chat.userInput') }}
             </span>
diff --git a/ui/src/components/app-icon/index.ts b/ui/src/components/app-icon/index.ts
index dfb08dbc5..d9cf580ce 100644
--- a/ui/src/components/app-icon/index.ts
+++ b/ui/src/components/app-icon/index.ts
@@ -263,6 +263,69 @@ export const iconMap: any = {
       ])
     },
   },
+  'app-edit': {
+    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: 'M524.032 239.701333l85.973333 85.973334 63.786667-63.829334-86.314667-86.784-63.445333 64.64z m25.685333 146.346667l-85.418666-85.418667-292.266667 297.984v0.128l82.56 82.56h0.170667l294.954666-295.253333z m199.68-77.226667l0.256 0.256L290.730667 768H128a42.666667 42.666667 0 0 1-42.666667-42.666667v-162.730666l443.306667-446.72-0.426667-0.426667 30.08-30.037333a42.666667 42.666667 0 0 1 60.330667 0l0.085333 0.042666 146.517334 147.328a42.666667 42.666667 0 0 1-0.085334 60.245334l-15.786666 15.786666zM106.666667 853.333333h810.666666a21.333333 21.333333 0 0 1 21.333334 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333334 21.333334h-810.666666a21.333333 21.333333 0 0 1-21.333334-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333334-21.333334z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-delete': {
+    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: 'M341.333333 170.666667V128a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 1 42.666667 42.666667v42.666667h228.650666c9.514667 0 12.970667 0.981333 16.426667 2.858666a19.370667 19.370667 0 0 1 8.106667 8.064c1.834667 3.456 2.816 6.912 2.816 16.426667v30.634667c0 9.514667-0.981333 12.970667-2.858667 16.426666a19.370667 19.370667 0 0 1-8.064 8.106667c-3.456 1.834667-6.912 2.816-16.426667 2.816H853.333333v640a42.666667 42.666667 0 0 1-42.666666 42.666667H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666667V256H112.682667c-9.514667 0-12.970667-0.981333-16.426667-2.858667a19.370667 19.370667 0 0 1-8.106667-8.064C86.357333 241.621333 85.333333 238.165333 85.333333 228.693333v-30.634666c0-9.514667 0.981333-12.970667 2.858667-16.426667a19.370667 19.370667 0 0 1 8.064-8.106667C99.712 171.690667 103.168 170.666667 112.64 170.666667H341.333333zM256 256v597.333333h512V256H256z m149.333333 85.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v384a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-384a21.333333 21.333333 0 0 1 21.333333-21.333334z m170.666667 0h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v384a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-384a21.333333 21.333333 0 0 1 21.333333-21.333334z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
+  'app-more': {
+    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: 'M768 448h85.333333a21.248 21.248 0 0 1 21.333334 21.333333v85.333334a21.248 21.248 0 0 1-21.333334 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333333-21.333333v-85.333334a21.248 21.248 0 0 1 21.333333-21.333333z m-597.333333 0h85.333333a21.290667 21.290667 0 0 1 21.333333 21.333333v85.333334a21.333333 21.333333 0 0 1-21.333333 21.333333H170.666667a21.290667 21.290667 0 0 1-21.333334-21.333333v-85.333334a21.333333 21.333333 0 0 1 21.333334-21.333333z m298.666666 0h85.333334a21.248 21.248 0 0 1 21.333333 21.333333v85.333334a21.248 21.248 0 0 1-21.333333 21.333333h-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-85.333334a21.248 21.248 0 0 1 21.333333-21.333333z',
+              fill: 'currentColor',
+            }),
+          ],
+        ),
+      ])
+    },
+  },
   // 动态加载的图标
   ...dynamicIcons,
 }
diff --git a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
index 8dc7a186d..5ff808668 100644
--- a/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/MultiSelectConstructor.vue
@@ -16,10 +16,10 @@
         <div class="grid-content ep-bg-purple" />
         {{ $t('dynamicsForm.tag.label') }}
       </el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
-        {{ $t('dynamicsForm.Select.label') }}</el-col
-      >
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
+        {{ $t('dynamicsForm.Select.label') }}
+      </el-col>
     </el-row>
     <el-row
       style="width: 100%"
@@ -28,23 +28,26 @@
       :gutter="10"
       class="mb-8"
     >
-      <el-col :span="10"
-        ><div class="grid-content ep-bg-purple" />
-        <el-input v-model="formValue.option_list[$index].label" :placeholder="$t('dynamicsForm.tag.placeholder')"
-      /></el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
+      <el-col :span="10">
+        <div class="grid-content ep-bg-purple" />
+        <el-input
+          v-model="formValue.option_list[$index].label"
+          :placeholder="$t('dynamicsForm.tag.placeholder')"
+        />
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
         <el-input
           v-model="formValue.option_list[$index].value"
           :placeholder="$t('dynamicsForm.Select.label')"
-      /></el-col>
-      <el-col :span="1"
-        ><div class="grid-content ep-bg-purple" />
+        />
+      </el-col>
+      <el-col :span="1">
+        <div class="grid-content ep-bg-purple" />
         <el-button link class="ml-8" @click.stop="delOption($index)">
-          <el-icon>
-            <Delete />
-          </el-icon> </el-button
-      ></el-col>
+          <AppIcon iconName="app-delete"></AppIcon>
+        </el-button>
+      </el-col>
     </el-row>
   </el-form-item>
   <el-form-item
@@ -54,7 +57,12 @@
     prop="default_value"
     :rules="
       formValue.required
-        ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }]
+        ? [
+            {
+              required: true,
+              message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}`,
+            },
+          ]
         : []
     "
   >
@@ -96,7 +104,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const addOption = () => {
@@ -119,7 +127,7 @@ const getData = () => {
     show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
-    option_list: formValue.value.option_list
+    option_list: formValue.value.option_list,
   }
 }
 const rander = (form_data: any) => {
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
index 51ca7ca29..f52f7caf8 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioCardConstructor.vue
@@ -17,10 +17,10 @@
         <div class="grid-content ep-bg-purple" />
         {{ $t('dynamicsForm.tag.label') }}
       </el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
-        {{ $t('dynamicsForm.Select.label') }}</el-col
-      >
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
+        {{ $t('dynamicsForm.Select.label') }}
+      </el-col>
     </el-row>
     <el-row
       style="width: 100%"
@@ -29,23 +29,26 @@
       :gutter="10"
       class="mb-8"
     >
-      <el-col :span="10"
-        ><div class="grid-content ep-bg-purple" />
-        <el-input v-model="formValue.option_list[$index].label" :placeholder="$t('dynamicsForm.tag.placeholder')"
-      /></el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
+      <el-col :span="10">
+        <div class="grid-content ep-bg-purple" />
+        <el-input
+          v-model="formValue.option_list[$index].label"
+          :placeholder="$t('dynamicsForm.tag.placeholder')"
+        />
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
         <el-input
           v-model="formValue.option_list[$index].value"
           :placeholder="$t('dynamicsForm.Select.label')"
-      /></el-col>
-      <el-col :span="1"
-        ><div class="grid-content ep-bg-purple" />
+        />
+      </el-col>
+      <el-col :span="1">
+        <div class="grid-content ep-bg-purple" />
         <el-button link class="ml-8" @click.stop="delOption($index)">
-          <el-icon>
-            <Delete />
-          </el-icon> </el-button
-      ></el-col>
+          <AppIcon iconName="app-delete"></AppIcon>
+        </el-button>
+      </el-col>
     </el-row>
   </el-form-item>
   <el-form-item
@@ -55,7 +58,12 @@
     prop="default_value"
     :rules="
       formValue.required
-        ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }]
+        ? [
+            {
+              required: true,
+              message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}`,
+            },
+          ]
         : []
     "
   >
@@ -87,7 +95,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const addOption = () => {
@@ -112,7 +120,7 @@ const getData = () => {
     show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
-    option_list: formValue.value.option_list
+    option_list: formValue.value.option_list,
   }
 }
 const rander = (form_data: any) => {
diff --git a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
index 0b91d6acd..f193ab2d3 100644
--- a/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/RadioRowConstructor.vue
@@ -29,25 +29,26 @@
       :gutter="10"
       class="mb-8"
     >
-      <el-col :span="10"
-        ><div class="grid-content ep-bg-purple" />
+      <el-col :span="10">
+        <div class="grid-content ep-bg-purple" />
         <el-input
           v-model="formValue.option_list[$index].label"
           :placeholder="$t('dynamicsForm.tag.placeholder')"
-      /></el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
+        />
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
         <el-input
           v-model="formValue.option_list[$index].value"
           :placeholder="$t('dynamicsForm.Select.label')"
-      /></el-col>
-      <el-col :span="1"
-        ><div class="grid-content ep-bg-purple" />
+        />
+      </el-col>
+      <el-col :span="1">
+        <div class="grid-content ep-bg-purple" />
         <el-button link class="ml-8" @click.stop="delOption($index)">
-          <el-icon>
-            <Delete />
-          </el-icon> </el-button
-      ></el-col>
+          <AppIcon iconName="app-delete"></AppIcon>
+        </el-button>
+      </el-col>
     </el-row>
   </el-form-item>
   <el-form-item
@@ -57,7 +58,12 @@
     prop="default_value"
     :rules="
       formValue.required
-        ? [{ required: true, message:`${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }]
+        ? [
+            {
+              required: true,
+              message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}`,
+            },
+          ]
         : []
     "
   >
@@ -90,7 +96,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const addOption = () => {
@@ -114,7 +120,7 @@ const getData = () => {
     default_value: formValue.value.default_value,
     text_field: 'label',
     value_field: 'value',
-    option_list: formValue.value.option_list
+    option_list: formValue.value.option_list,
   }
 }
 const rander = (form_data: any) => {
diff --git a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
index eb671ee84..2131edf35 100644
--- a/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/SingleSelectConstructor.vue
@@ -13,10 +13,10 @@
     </template>
 
     <el-row style="width: 100%" :gutter="10">
-      <el-col :span="10"
-        ><div class="grid-content ep-bg-purple" />
-        {{ $t('dynamicsForm.tag.label') }}</el-col
-      >
+      <el-col :span="10">
+        <div class="grid-content ep-bg-purple" />
+        {{ $t('dynamicsForm.tag.label') }}
+      </el-col>
       <el-col :span="12">
         <div class="grid-content ep-bg-purple" />
         {{ $t('dynamicsForm.Select.label') }}
@@ -29,23 +29,26 @@
       :gutter="10"
       class="mb-8"
     >
-      <el-col :span="10"
-        ><div class="grid-content ep-bg-purple" />
-        <el-input v-model="formValue.option_list[$index].label" :placeholder="$t('dynamicsForm.tag.placeholder')"
-      /></el-col>
-      <el-col :span="12"
-        ><div class="grid-content ep-bg-purple" />
+      <el-col :span="10">
+        <div class="grid-content ep-bg-purple" />
+        <el-input
+          v-model="formValue.option_list[$index].label"
+          :placeholder="$t('dynamicsForm.tag.placeholder')"
+        />
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content ep-bg-purple" />
         <el-input
           v-model="formValue.option_list[$index].value"
           :placeholder="$t('dynamicsForm.Select.label')"
-      /></el-col>
-      <el-col :span="1"
-        ><div class="grid-content ep-bg-purple" />
+        />
+      </el-col>
+      <el-col :span="1">
+        <div class="grid-content ep-bg-purple" />
         <el-button link class="ml-8" @click.stop="delOption($index)">
-          <el-icon>
-            <Delete />
-          </el-icon> </el-button
-      ></el-col>
+          <AppIcon iconName="app-delete"></AppIcon>
+        </el-button>
+      </el-col>
     </el-row>
   </el-form-item>
   <el-form-item
@@ -55,7 +58,12 @@
     :label="$t('dynamicsForm.default.label')"
     :rules="
       formValue.required
-        ? [{ required: true, message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}` }]
+        ? [
+            {
+              required: true,
+              message: `${$t('dynamicsForm.default.label')}${$t('dynamicsForm.default.requiredMessage')}`,
+            },
+          ]
         : []
     "
   >
@@ -89,7 +97,7 @@ const formValue = computed({
   },
   get: () => {
     return props.modelValue
-  }
+  },
 })
 
 const addOption = () => {
@@ -112,7 +120,7 @@ const getData = () => {
     show_default_value: formValue.value.show_default_value,
     text_field: 'label',
     value_field: 'value',
-    option_list: formValue.value.option_list
+    option_list: formValue.value.option_list,
   }
 }
 const rander = (form_data: any) => {
diff --git a/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue b/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
index b621af0b9..49d09b158 100644
--- a/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
+++ b/ui/src/components/dynamics-form/items/complex/ArrayObjectCard.vue
@@ -16,7 +16,7 @@
       ></DynamicsForm>
       <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
         <el-button text @click.stop="deleteKnowledge(item)" class="delete-button">
-          <el-icon><Delete /></el-icon>
+          <AppIcon iconName="app-delete"></AppIcon>
         </el-button>
       </el-tooltip>
     </el-card>
@@ -66,7 +66,7 @@ const _data = computed<Array<any>>({
   },
   set(value) {
     emit('update:modelValue', value)
-  }
+  },
 })
 
 const props_info = computed(() => {
@@ -110,7 +110,7 @@ const other = computed(() => {
 
 defineExpose({
   validate,
-  field: props.field
+  field: props.field,
 })
 </script>
 <style lang="scss" scoped>
@@ -129,7 +129,7 @@ defineExpose({
     cursor: pointer;
     min-height: var(--card-min-height);
     border: 1px dashed var(--el-color-primary);
-    background: var(--el-disabled-bg-color);;
+    background: var(--el-disabled-bg-color);
     padding-bottom: 20px;
 
     .add-icon {
diff --git a/ui/src/components/folder-tree/index.vue b/ui/src/components/folder-tree/index.vue
index 54a76f520..0bf13b27b 100644
--- a/ui/src/components/folder-tree/index.vue
+++ b/ui/src/components/folder-tree/index.vue
@@ -54,10 +54,8 @@
                 class="mr-16"
               >
                 <el-dropdown trigger="click" :teleported="false">
-                  <el-button text class="w-full"
-                    v-if="MoreFilledPermission(node)"
-                  >
-                    <el-icon><MoreFilled /></el-icon>
+                  <el-button text class="w-full" v-if="MoreFilledPermission(node)">
+                    <AppIcon iconName="app-more"></AppIcon>
                   </el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
@@ -72,7 +70,7 @@
                         @click.stop="openEditFolder(data)"
                         v-if="permissionPrecise.folderEdit()"
                       >
-                        <el-icon><EditPen /></el-icon>
+                        <AppIcon iconName="app-edit"></AppIcon>
                         {{ $t('common.edit') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -81,7 +79,7 @@
                         :disabled="!data.parent_id"
                         v-if="permissionPrecise.folderDelete()"
                       >
-                        <el-icon><Delete /></el-icon>
+                        <AppIcon iconName="app-delete"></AppIcon>
                         {{ $t('common.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
@@ -158,7 +156,7 @@ const permissionPrecise = computed(() => {
   return permissionMap[resourceType.value!]['workspace']
 })
 
-const MoreFilledPermission = (node: any) =>{
+const MoreFilledPermission = (node: any) => {
   return (
     (node.level !== 3 && permissionPrecise.value.folderCreate()) ||
     permissionPrecise.value.folderEdit() ||
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index d1014a33f..5182c68f2 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -9,9 +9,7 @@
         class="problem-button mt-4 mb-4 flex"
         :class="sendMessage ? 'cursor' : 'disabled'"
       >
-        <el-icon class="mr-8" style="margin-top: 2px">
-          <EditPen />
-        </el-icon>
+        <AppIcon iconName="app-edit" class="mr-8" style="margin-top: 2px"></AppIcon>
         {{ item.content }}
       </div>
       <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
diff --git a/ui/src/components/read-write/index.vue b/ui/src/components/read-write/index.vue
index f01cbb9b7..bb6311c39 100644
--- a/ui/src/components/read-write/index.vue
+++ b/ui/src/components/read-write/index.vue
@@ -12,7 +12,7 @@
           @click.stop="editNameHandle"
           text
         >
-          <el-icon><EditPen /></el-icon>
+          <AppIcon iconName="app-edit"></AppIcon>
         </el-button>
       </div>
     </slot>
@@ -52,25 +52,25 @@ defineOptions({ name: 'ReadWrite' })
 const props = defineProps({
   data: {
     type: String,
-    default: ''
+    default: '',
   },
   showEditIcon: {
     type: Boolean,
-    default: false
+    default: false,
   },
   maxlength: {
     type: Number,
-    default: () => 0
+    default: () => 0,
   },
   trigger: {
     type: String,
     default: 'default',
-    validator: (value: string) => ['default', 'dblclick', 'manual'].includes(value)
+    validator: (value: string) => ['default', 'dblclick', 'manual'].includes(value),
   },
   write: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 })
 const emit = defineEmits(['change', 'close'])
 const inputRef = ref()
@@ -99,7 +99,7 @@ watch(
     } else {
       isEdit.value = false
     }
-  }
+  },
 )
 
 function dblclick() {
diff --git a/ui/src/components/workspace-dropdown/index.vue b/ui/src/components/workspace-dropdown/index.vue
index 93ed7795f..ce788bbae 100644
--- a/ui/src/components/workspace-dropdown/index.vue
+++ b/ui/src/components/workspace-dropdown/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <el-dropdown trigger="click" placement="bottom-start" class="workspace-dropdown" popper-class="workspace-dropdown-popper">
+  <el-dropdown
+    trigger="click"
+    placement="bottom-start"
+    class="workspace-dropdown"
+    popper-class="workspace-dropdown-popper"
+  >
     <el-button text style="font-size: 14px" class="workspace-dropdown__button">
       <AppIcon iconName="app-workspace" style="font-size: 18px"></AppIcon>
       <span class="ellipsis" style="max-width: 155px" :title="currentWorkspace?.name">
@@ -11,31 +16,39 @@
     </el-button>
     <template #dropdown>
       <div class="w-full p-8" style="box-sizing: border-box">
-        <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
+        <el-input
+          v-model="filterText"
+          :placeholder="$t('common.search')"
+          prefix-icon="Search"
+          clearable
+        />
       </div>
       <el-scrollbar max-height="300">
         <el-dropdown-menu v-loading="loading">
-          <el-dropdown-item v-for="item in filterData" :key="item.id"
-            :class="`${item.id === currentWorkspace?.id ? 'active' : ''} flex-between`" @click="changeWorkspace(item)">
-            <div class="flex align-center" style="overflow: hidden;">
+          <el-dropdown-item
+            v-for="item in filterData"
+            :key="item.id"
+            :class="`${item.id === currentWorkspace?.id ? 'active' : ''} flex-between`"
+            @click="changeWorkspace(item)"
+          >
+            <div class="flex align-center" style="overflow: hidden">
               <AppIcon class="mr-8" iconName="app-workspace" style="font-size: 16px"></AppIcon>
-              <span class="ellipsis" style="flex:1" :title="item.name">
+              <span class="ellipsis" style="flex: 1" :title="item.name">
                 {{ item.name }}
               </span>
-              <TagGroup
-                v-if="item.role_name"
-                class="ml-8"
-                size="small"
-                :tags="item.role_name"
-              />
+              <TagGroup v-if="item.role_name" class="ml-8" size="small" :tags="item.role_name" />
             </div>
-            <el-icon v-show="item.id === currentWorkspace?.id" class="ml-8" style="font-size: 16px; margin-right: 0">
+            <el-icon
+              v-show="item.id === currentWorkspace?.id"
+              class="ml-8"
+              style="font-size: 16px; margin-right: 0"
+            >
               <Check />
             </el-icon>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-scrollbar>
-      <div class="no-data color-info" v-if="!filterData.length"> {{ $t('common.noData') }} </div>
+      <div class="no-data color-info" v-if="!filterData.length">{{ $t('common.noData') }}</div>
     </template>
   </el-dropdown>
 </template>
@@ -66,14 +79,18 @@ function changeWorkspace(item: WorkspaceItem) {
 const filterText = ref('')
 const filterData = ref<any[]>([])
 
-watch([() => props.data, () => filterText.value], () => {
-  if (!filterText.value.length) {
-    filterData.value = props.data
-  }
-  filterData.value = props.data.filter((v: any) =>
-    v.name.toLowerCase().includes(filterText.value.toLowerCase()),
-  )
-}, { immediate: true })
+watch(
+  [() => props.data, () => filterText.value],
+  () => {
+    if (!filterText.value.length) {
+      filterData.value = props.data
+    }
+    filterData.value = props.data.filter((v: any) =>
+      v.name.toLowerCase().includes(filterText.value.toLowerCase()),
+    )
+  },
+  { immediate: true },
+)
 </script>
 <style lang="scss" scoped>
 .workspace-dropdown {
@@ -81,6 +98,7 @@ watch([() => props.data, () => filterText.value], () => {
     font-size: 14px;
     padding: 0 12px !important;
     max-height: 32px;
+    color: var(--el-text-color-primary) !important;
   }
 }
 
diff --git a/ui/src/layout/layout-header/SystemHeader.vue b/ui/src/layout/layout-header/SystemHeader.vue
index 36a4a0e9d..89768fa3d 100644
--- a/ui/src/layout/layout-header/SystemHeader.vue
+++ b/ui/src/layout/layout-header/SystemHeader.vue
@@ -10,10 +10,21 @@
       <div class="flex align-center mr-8">
         <TopAbout></TopAbout>
         <el-divider class="ml-8 mr-8" direction="vertical" />
-        <el-button link @click="router.push({ path: '/' })"
-          v-if="hasPermission([RoleConst.USER.getWorkspaceRole,RoleConst.EXTENDS_USER.getWorkspaceRole,
-            RoleConst.EXTENDS_WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole
-          ],'OR')"
+        <el-button
+          link
+          @click="router.push({ path: '/' })"
+          style="color: var(--el-text-color-primary)"
+          v-if="
+            hasPermission(
+              [
+                RoleConst.USER.getWorkspaceRole,
+                RoleConst.EXTENDS_USER.getWorkspaceRole,
+                RoleConst.EXTENDS_WORKSPACE_MANAGE.getWorkspaceRole,
+                RoleConst.WORKSPACE_MANAGE.getWorkspaceRole,
+              ],
+              'OR',
+            )
+          "
         >
           <AppIcon class="mr-8" iconName="app-workspace" style="font-size: 16px"></AppIcon>
           {{ $t('views.workspace.toWorkspace') }}</el-button
diff --git a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
index 7ce83a345..ce49455d0 100644
--- a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
+++ b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
@@ -55,9 +55,7 @@
           </span>
           <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
             <el-button type="primary" text @click="deleteApiKey(row)">
-              <el-icon>
-                <Delete />
-              </el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </el-tooltip>
         </template>
@@ -78,14 +76,14 @@ import SettingAPIKeyDialog from '@/views/application-overview/component/SettingA
 
 const route = useRoute()
 const {
-  params: { id }
+  params: { id },
 } = route
 
 const props = defineProps({
   userId: {
     type: String,
-    default: ''
-  }
+    default: '',
+  },
 })
 const emit = defineEmits(['addData'])
 
@@ -113,8 +111,8 @@ function deleteApiKey(row: any) {
     {
       confirmButtonText: t('common.confirm'),
       cancelButtonText: t('common.cancel'),
-      confirmButtonClass: 'color-danger'
-    }
+      confirmButtonClass: 'color-danger',
+    },
   )
     .then(() => {
       systemKeyApi.delAPIKey(row.id, loading).then(() => {
@@ -127,7 +125,7 @@ function deleteApiKey(row: any) {
 
 function changeState(bool: boolean, row: any) {
   const obj = {
-    is_active: bool
+    is_active: bool,
   }
   const str = bool
     ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
@@ -151,7 +149,7 @@ const open = () => {
 
 function getApiKeyList() {
   systemKeyApi.getAPIKey().then((res) => {
-    res.data.sort((x:any,y:any)=>x.name < y.name ? 1 : -1)
+    res.data.sort((x: any, y: any) => (x.name < y.name ? 1 : -1))
     apiKey.value = res.data
   })
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 421b0ef47..2c921f82f 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -48,7 +48,9 @@
 // button
 .el-button {
   --el-button-font-weight: 400;
+  --el-button-text-color: var(--el-text-color-primary);
   padding: 5px 12px;
+  // color: var(--el-text-color-primary);
   &.is-text {
     padding: 4px !important;
     font-size: 16px;
@@ -58,7 +60,6 @@
     }
   }
   &:focus {
-    color: var(--el-button-text-color);
     background-color: none;
     border-color: none;
   }
@@ -79,7 +80,9 @@
 .el-button--large {
   font-size: 16px;
 }
-
+.el-button--primary {
+  --el-button-text-color: var(--el-color-white);
+}
 // dropdown
 .el-dropdown {
   color: var(--el-text-color-primary);
@@ -266,3 +269,16 @@
   right: 10px;
   left: auto;
 }
+
+.el-anchor {
+  --el-anchor-font-size: 14px;
+}
+
+.el-breadcrumb__separator.el-icon {
+  font-size: 12px;
+}
+
+// el-tag
+.el-tag {
+  padding: 0 6px;
+}
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 7d2bda1f5..9902e11ca 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -48,7 +48,7 @@
           </span>
           <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
             <el-button type="primary" text @click="deleteApiKey(row)">
-              <el-icon><Delete /></el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </el-tooltip>
         </template>
diff --git a/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
index 831ce9b9f..6b9612cd7 100644
--- a/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
@@ -15,7 +15,7 @@
           {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.dialogTitle') }}
         </h4>
         <div class="flex align-center">
-          <el-button type="primary" @click.prevent="resetForm" link>
+          <el-button @click.prevent="resetForm" link>
             <el-icon class="mr-4">
               <Refresh />
             </el-icon>
diff --git a/ui/src/views/application-workflow/component/PublishHistory.vue b/ui/src/views/application-workflow/component/PublishHistory.vue
index a96073cad..8a5f3a6d7 100644
--- a/ui/src/views/application-workflow/component/PublishHistory.vue
+++ b/ui/src/views/application-workflow/component/PublishHistory.vue
@@ -38,12 +38,12 @@
                 <div @click.stop v-show="mouseId === row.id">
                   <el-dropdown trigger="click" :teleported="false">
                     <el-button text>
-                      <el-icon><MoreFilled /></el-icon>
+                      <AppIcon iconName="app-more"></AppIcon>
                     </el-button>
                     <template #dropdown>
                       <el-dropdown-menu>
                         <el-dropdown-item @click.stop="openEditVersion(row)">
-                          <el-icon><EditPen /></el-icon>
+                          <AppIcon iconName="app-edit"></AppIcon>
                           {{ $t('common.edit') }}
                         </el-dropdown-item>
                         <el-dropdown-item @click="refreshVersion(row)">
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 00917ee5f..366cbfc20 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -42,7 +42,7 @@
 
         <el-dropdown trigger="click">
           <el-button text @click.stop class="ml-8 mt-4">
-            <el-icon class="rotate-90"><MoreFilled /></el-icon>
+            <AppIcon iconName="app-more" class="rotate-90"></AppIcon>
           </el-button>
           <template #dropdown>
             <el-dropdown-menu>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 8db5e0975..e161f33d1 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -222,9 +222,7 @@
                     <div @click.stop>
                       <el-dropdown trigger="click">
                         <el-button text @click.stop>
-                          <el-icon>
-                            <MoreFilled />
-                          </el-icon>
+                          <AppIcon iconName="app-more"></AppIcon>
                         </el-button>
                         <template #dropdown>
                           <el-dropdown-menu>
@@ -265,10 +263,11 @@
                             </el-dropdown-item>
                             <el-dropdown-item
                               divided
-                              icon="Delete"
                               @click.stop="deleteApplication(item)"
                               v-if="permissionPrecise.delete(item.id)"
-                              >{{ $t('common.delete') }}
+                            >
+                              <AppIcon iconName="app-delete"></AppIcon>
+                              {{ $t('common.delete') }}
                             </el-dropdown-item>
                           </el-dropdown-menu>
                         </template>
diff --git a/ui/src/views/chat-log/component/EditMarkDialog.vue b/ui/src/views/chat-log/component/EditMarkDialog.vue
index fe97b39cc..aee8a528d 100644
--- a/ui/src/views/chat-log/component/EditMarkDialog.vue
+++ b/ui/src/views/chat-log/component/EditMarkDialog.vue
@@ -12,14 +12,10 @@
         <h4 :id="titleId" :class="titleClass">{{ $t('views.chatLog.editMark') }}</h4>
         <div class="text-right">
           <el-button text @click="isEdit = true" v-if="!isEdit">
-            <el-icon>
-              <EditPen />
-            </el-icon>
+            <AppIcon iconName="app-edit"></AppIcon>
           </el-button>
           <el-button text style="margin-left: 4px" @click="deleteMark">
-            <el-icon>
-              <Delete />
-            </el-icon>
+            <AppIcon iconName="app-delete"></AppIcon>
           </el-button>
           <el-divider direction="vertical" />
         </div>
diff --git a/ui/src/views/chat/component/HistoryPanel.vue b/ui/src/views/chat/component/HistoryPanel.vue
index d134d9918..d31c7c3cd 100644
--- a/ui/src/views/chat/component/HistoryPanel.vue
+++ b/ui/src/views/chat/component/HistoryPanel.vue
@@ -41,9 +41,7 @@
           <span>{{ $t('chat.history') }}</span>
           <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
             <el-button text @click.stop="clearChat">
-              <el-icon>
-                <Delete />
-              </el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </el-tooltip>
         </div>
@@ -68,17 +66,17 @@
                   <div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
                     <el-dropdown trigger="click" :teleported="false">
                       <el-button text>
-                        <el-icon><MoreFilled /></el-icon>
+                        <AppIcon iconName="app-more"></AppIcon>
                       </el-button>
 
                       <template #dropdown>
                         <el-dropdown-menu>
                           <el-dropdown-item @click.stop="editLogTitle(row)">
-                            <el-icon><EditPen /></el-icon>
+                            <AppIcon iconName="app-edit"></AppIcon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
                           <el-dropdown-item @click.stop="deleteChatLog(row)">
-                            <el-icon><Delete /></el-icon>
+                            <AppIcon iconName="app-delete"></AppIcon>
                             {{ $t('common.delete') }}
                           </el-dropdown-item>
                         </el-dropdown-menu>
@@ -115,9 +113,7 @@
               <span>{{ $t('chat.history') }}</span>
               <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
                 <el-button text @click.stop="clearChat">
-                  <el-icon>
-                    <Delete />
-                  </el-icon>
+                  <AppIcon iconName="app-delete"></AppIcon>
                 </el-button>
               </el-tooltip>
             </div>
@@ -136,21 +132,15 @@
               </span>
               <div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
                 <el-dropdown trigger="click" :teleported="false">
-                  <el-icon class="mt-4 lighter">
-                    <MoreFilled />
-                  </el-icon>
+                  <AppIcon iconName="app-more" class="mt-4 lighter"></AppIcon>
                   <template #dropdown>
                     <el-dropdown-menu>
                       <el-dropdown-item @click.stop="editLogTitle(row)">
-                        <el-icon>
-                          <EditPen />
-                        </el-icon>
+                        <AppIcon iconName="app-edit"></AppIcon>
                         {{ $t('common.edit') }}
                       </el-dropdown-item>
                       <el-dropdown-item @click.stop="deleteChatLog(row)">
-                        <el-icon>
-                          <Delete />
-                        </el-icon>
+                        <AppIcon iconName="app-delete"></AppIcon>
                         {{ $t('common.delete') }}
                       </el-dropdown-item>
                     </el-dropdown-menu>
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 626341605..b0607d492 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -58,7 +58,7 @@
                 </el-button>
                 <el-dropdown v-if="MoreFilledPermission0(id)">
                   <el-button class="ml-12 mr-12">
-                    <el-icon><MoreFilled /></el-icon>
+                    <AppIcon iconName="app-more"></AppIcon>
                   </el-button>
                   <template #dropdown>
                     <el-dropdown-menu>
@@ -422,7 +422,7 @@
                   <span @click.stop>
                     <el-dropdown trigger="click" v-if="MoreFilledPermission1(id)">
                       <el-button text type="primary">
-                        <el-icon><MoreFilled /></el-icon>
+                        <AppIcon iconName="app-more"></AppIcon>
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
@@ -474,10 +474,10 @@
                             {{ $t('views.document.setting.download') }}
                           </el-dropdown-item>
                           <el-dropdown-item
-                            icon="Delete"
                             @click.stop="deleteDocument(row)"
                             v-if="permissionPrecise.doc_delete(id)"
                           >
+                            <AppIcon iconName="app-delete"></AppIcon>
                             {{ $t('common.delete') }}</el-dropdown-item
                           >
                         </el-dropdown-menu>
@@ -533,7 +533,7 @@
                   <span @click.stop>
                     <el-dropdown trigger="click" v-if="MoreFilledPermission2(id)">
                       <el-button text type="primary">
-                        <el-icon><MoreFilled /></el-icon>
+                        <AppIcon iconName="app-more"></AppIcon>
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
@@ -585,10 +585,10 @@
                             {{ $t('views.document.setting.export') }} Zip
                           </el-dropdown-item>
                           <el-dropdown-item
-                            icon="Delete"
                             @click.stop="deleteDocument(row)"
                             v-if="permissionPrecise.doc_delete(id)"
                           >
+                            <AppIcon iconName="app-delete"></AppIcon>
                             {{ $t('common.delete') }}
                           </el-dropdown-item>
                         </el-dropdown-menu>
diff --git a/ui/src/views/document/upload/UploadComponent.vue b/ui/src/views/document/upload/UploadComponent.vue
index 13b6be4be..55447c236 100644
--- a/ui/src/views/document/upload/UploadComponent.vue
+++ b/ui/src/views/document/upload/UploadComponent.vue
@@ -199,7 +199,7 @@
               </div>
             </div>
             <el-button text @click="deleteFile(index)">
-              <el-icon><Delete /></el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </div>
         </el-card>
diff --git a/ui/src/views/knowledge/component/KnowledgeListContainer.vue b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
index 2c5fcc3ab..26aa983f3 100644
--- a/ui/src/views/knowledge/component/KnowledgeListContainer.vue
+++ b/ui/src/views/knowledge/component/KnowledgeListContainer.vue
@@ -219,12 +219,8 @@
                 <template #mouseEnter>
                   <div @click.stop v-if="!isShared">
                     <el-dropdown trigger="click">
-                      <el-button text @click.stop
-                        v-if="MoreFilledPermission(item)"
-                      >
-                        <el-icon>
-                          <MoreFilled />
-                        </el-icon>
+                      <el-button text @click.stop v-if="MoreFilledPermission(item)">
+                        <AppIcon iconName="app-more"></AppIcon>
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
@@ -289,11 +285,11 @@
                             >{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
                           >
                           <el-dropdown-item
-                            icon="Delete"
                             type="danger"
                             @click.stop="deleteKnowledge(item)"
                             v-if="permissionPrecise.delete(item.id)"
                           >
+                            <AppIcon iconName="app-delete"></AppIcon>
                             {{ $t('common.delete') }}</el-dropdown-item
                           >
                         </el-dropdown-menu>
@@ -376,10 +372,15 @@ const isSystemShare = computed(() => {
 })
 
 const MoreFilledPermission = (item: any) => {
-  return (item.type === 1 && permissionPrecise.value.sync(item.id)) ||
-  permissionPrecise.value.vector(item.id) || permissionPrecise.value.generate(item.id) ||
-  (permissionPrecise.value.edit(item.id) && apiType.value) === 'workspace' ||
-  permissionPrecise.value.export(item.id) || permissionPrecise.value.delete(item.id) || isSystemShare.value
+  return (
+    (item.type === 1 && permissionPrecise.value.sync(item.id)) ||
+    permissionPrecise.value.vector(item.id) ||
+    permissionPrecise.value.generate(item.id) ||
+    (permissionPrecise.value.edit(item.id) && apiType.value) === 'workspace' ||
+    permissionPrecise.value.export(item.id) ||
+    permissionPrecise.value.delete(item.id) ||
+    isSystemShare.value
+  )
 }
 
 const loading = ref(false)
diff --git a/ui/src/views/knowledge/component/ParagraphList.vue b/ui/src/views/knowledge/component/ParagraphList.vue
index b5862bb6c..7d1b8a0b6 100644
--- a/ui/src/views/knowledge/component/ParagraphList.vue
+++ b/ui/src/views/knowledge/component/ParagraphList.vue
@@ -19,11 +19,11 @@
           <div>
             <!-- 编辑分段按钮 -->
             <el-button link @click="editHandle(child, cIndex)">
-              <el-icon><EditPen /></el-icon>
+              <AppIcon iconName="app-edit"></AppIcon>
             </el-button>
             <!-- 删除分段按钮  -->
             <el-button link @click="deleteHandle(child, cIndex)">
-              <el-icon><Delete /></el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </div>
         </div>
@@ -64,43 +64,43 @@ const localParagraphList = ref<any[]>([])
 const props = defineProps({
   modelValue: {
     type: Array<any>,
-    default: () => []
+    default: () => [],
   },
   isConnect: Boolean,
-  knowledgeId: String
+  knowledgeId: String,
 })
 
 // 初始化加载数据
 watchEffect(() => {
   if (props.modelValue && props.modelValue.length > 0) {
-    const end = page_size.value * current_page.value;
-    localParagraphList.value = props.modelValue.slice(0, Math.min(end, props.modelValue.length));
+    const end = page_size.value * current_page.value
+    localParagraphList.value = props.modelValue.slice(0, Math.min(end, props.modelValue.length))
   }
 })
 
 // 监听分页变化，只加载需要的数据
 watchEffect(() => {
-  const start = 0;
-  const end = page_size.value * current_page.value;
+  const start = 0
+  const end = page_size.value * current_page.value
   // 不管数据量多少，都确保获取所有应该显示的数据
-  localParagraphList.value = props.modelValue.slice(start, Math.min(end, props.modelValue.length));
+  localParagraphList.value = props.modelValue.slice(start, Math.min(end, props.modelValue.length))
 })
 
 const paragraph_list = computed(() => {
-  return localParagraphList.value;
+  return localParagraphList.value
 })
 
 const next = () => {
-  loading.value = true;
+  loading.value = true
   setTimeout(() => {
-    current_page.value += 1;
-    loading.value = false;
-  }, 100); // 添加小延迟让UI有时间更新
+    current_page.value += 1
+    loading.value = false
+  }, 100) // 添加小延迟让UI有时间更新
 }
 
 const editHandle = (item: any, cIndex: number) => {
   // 计算实际索引，考虑分页
-  currentCIndex.value = cIndex + (page_size.value * (current_page.value - 1));
+  currentCIndex.value = cIndex + page_size.value * (current_page.value - 1)
   EditParagraphDialogRef.value.open(item)
 }
 
@@ -112,28 +112,27 @@ const updateContent = (data: any) => {
     !data?.problem_list.some((item: any) => item.content === data.title.trim())
   ) {
     data['problem_list'].push({
-      content: data.title.trim()
+      content: data.title.trim(),
     })
   }
   new_value[currentCIndex.value] = cloneDeep(data)
   emit('update:modelValue', new_value)
 
   // 更新本地列表
-  const localIndex = currentCIndex.value - (page_size.value * (current_page.value - 1));
+  const localIndex = currentCIndex.value - page_size.value * (current_page.value - 1)
   if (localIndex >= 0 && localIndex < localParagraphList.value.length) {
-    localParagraphList.value[localIndex] = cloneDeep(data);
+    localParagraphList.value[localIndex] = cloneDeep(data)
   }
 }
 
 const deleteHandle = (item: any, cIndex: number) => {
-
   MsgConfirm(
     `${t('views.paragraph.delete.confirmTitle')}${item.title || '-'} ?`,
     t('views.paragraph.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'color-danger'
-    }
+      confirmButtonClass: 'color-danger',
+    },
   )
     .then(() => {
       const new_value = [...props.modelValue]
@@ -141,12 +140,12 @@ const deleteHandle = (item: any, cIndex: number) => {
       emit('update:modelValue', new_value)
 
       // 更新本地列表
-      localParagraphList.value.splice(cIndex, 1);
+      localParagraphList.value.splice(cIndex, 1)
       // 如果当前页删除完了，从总数据中再取一条添加到末尾
       if (props.modelValue.length > localParagraphList.value.length * current_page.value) {
-        const nextItem = props.modelValue[localParagraphList.value.length * current_page.value];
+        const nextItem = props.modelValue[localParagraphList.value.length * current_page.value]
         if (nextItem) {
-          localParagraphList.value.push(nextItem);
+          localParagraphList.value.push(nextItem)
         }
       }
     })
diff --git a/ui/src/views/model/component/CreateModelDialog.vue b/ui/src/views/model/component/CreateModelDialog.vue
index 3ea0c2a30..5a08d3a0a 100644
--- a/ui/src/views/model/component/CreateModelDialog.vue
+++ b/ui/src/views/model/component/CreateModelDialog.vue
@@ -207,15 +207,13 @@
               <span class="mr-4">
                 <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
                   <el-button type="primary" text @click.stop="openAddDrawer(row, $index)">
-                    <el-icon><EditPen /></el-icon>
+                    <AppIcon iconName="app-edit"></AppIcon>
                   </el-button>
                 </el-tooltip>
               </span>
               <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
                 <el-button type="primary" text @click="deleteParam($index)">
-                  <el-icon>
-                    <Delete />
-                  </el-icon>
+                  <AppIcon iconName="app-delete"></AppIcon>
                 </el-button>
               </el-tooltip>
             </template>
diff --git a/ui/src/views/model/component/ModelCard.vue b/ui/src/views/model/component/ModelCard.vue
index d07e40035..7b76ebaba 100644
--- a/ui/src/views/model/component/ModelCard.vue
+++ b/ui/src/views/model/component/ModelCard.vue
@@ -67,19 +67,17 @@
     <template #mouseEnter v-if="MoreFilledPermission(model.id)">
       <el-dropdown trigger="click" v-if="!isShared">
         <el-button text @click.stop>
-          <el-icon>
-            <MoreFilled />
-          </el-icon>
+          <AppIcon iconName="app-more"></AppIcon>
         </el-button>
         <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item
               v-if="permissionPrecise.modify(model.id)"
-              icon="EditPen"
               text
               @click.stop="openEditModel"
             >
-              {{ $t('common.modify') }}
+              <AppIcon iconName="app-edit"></AppIcon>
+              {{ $t('common.edit') }}
             </el-dropdown-item>
             <el-dropdown-item
               v-if="isSystemShare"
@@ -103,11 +101,11 @@
             </el-dropdown-item>
             <el-dropdown-item
               divided
-              icon="Delete"
               text
               @click.stop="deleteModel"
               v-if="permissionPrecise.delete(model.id)"
             >
+              <AppIcon iconName="app-delete"></AppIcon>
               {{ $t('common.delete') }}
             </el-dropdown-item>
           </el-dropdown-menu>
diff --git a/ui/src/views/model/component/ParamSettingDialog.vue b/ui/src/views/model/component/ParamSettingDialog.vue
index aa854e392..1ed9efa4e 100644
--- a/ui/src/views/model/component/ParamSettingDialog.vue
+++ b/ui/src/views/model/component/ParamSettingDialog.vue
@@ -54,15 +54,13 @@
           <span class="mr-4">
             <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
               <el-button type="primary" text @click.stop="openAddDrawer(row, $index)">
-                <el-icon><EditPen /></el-icon>
+                <AppIcon iconName="app-edit"></AppIcon>
               </el-button>
             </el-tooltip>
           </span>
           <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
             <el-button type="primary" text @click="deleteParam($index)">
-              <el-icon>
-                <Delete />
-              </el-icon>
+              <AppIcon iconName="app-delete"></AppIcon>
             </el-button>
           </el-tooltip>
         </template>
diff --git a/ui/src/views/paragraph/component/ParagraphCard.vue b/ui/src/views/paragraph/component/ParagraphCard.vue
index fdc89eaff..02a0d18a3 100644
--- a/ui/src/views/paragraph/component/ParagraphCard.vue
+++ b/ui/src/views/paragraph/component/ParagraphCard.vue
@@ -26,59 +26,58 @@
 
         <el-divider direction="vertical" />
         <span class="mr-8">
-          <el-button link @click.stop="editParagraph(data)"
-            v-if="permissionPrecise.doc_edit(id)"
-          >
-            <el-icon :size="16" :title="$t('common.edit')">
-              <EditPen />
-            </el-icon>
+          <el-button link @click.stop="editParagraph(data)" v-if="permissionPrecise.doc_edit(id)">
+            <AppIcon iconName="app-edit" :size="16" :title="$t('common.edit')"></AppIcon>
           </el-button>
         </span>
         <span class="mr-8">
-          <el-button link @click.stop="addParagraph(data)"
-            v-if="permissionPrecise.doc_edit(id)"
-          >
+          <el-button link @click.stop="addParagraph(data)" v-if="permissionPrecise.doc_edit(id)">
             <el-icon :size="16" :title="$t('common.add')">
               <el-icon><CirclePlus /></el-icon>
             </el-icon>
           </el-button>
         </span>
-        <el-dropdown trigger="click" :teleported="false"
-          v-if="MoreFieldPermission(id)"
-        >
+        <el-dropdown trigger="click" :teleported="false" v-if="MoreFieldPermission(id)">
           <el-button text>
-            <el-icon><MoreFilled /></el-icon>
+            <AppIcon iconName="app-more"></AppIcon>
           </el-button>
           <template #dropdown>
-            <el-dropdown-menu style="min-width: 140px;">
-              <el-dropdown-item @click.stop="openGenerateDialog(data)"
+            <el-dropdown-menu style="min-width: 140px">
+              <el-dropdown-item
+                @click.stop="openGenerateDialog(data)"
                 v-if="permissionPrecise.doc_generate(id)"
               >
                 <el-icon><Connection /></el-icon>
                 {{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
               >
-              <el-dropdown-item @click.stop="openSelectDocumentDialog(data)"
+              <el-dropdown-item
+                @click.stop="openSelectDocumentDialog(data)"
                 v-if="permissionPrecise.doc_edit(id)"
               >
                 <AppIcon iconName="app-migrate"></AppIcon>
                 {{ $t('views.document.setting.migration') }}</el-dropdown-item
               >
-               <el-dropdown-item v-if="permissionPrecise.doc_edit(id)">
-                <el-dropdown class="w-full" trigger="hover" :show-arrow="false" placement="right-start" popper-class="move-position-popper">
-                  <div class="w-full flex-between" style="line-height: 22px;">
+              <el-dropdown-item v-if="permissionPrecise.doc_edit(id)">
+                <el-dropdown
+                  class="w-full"
+                  trigger="hover"
+                  :show-arrow="false"
+                  placement="right-start"
+                  popper-class="move-position-popper"
+                >
+                  <div class="w-full flex-between" style="line-height: 22px">
                     <div class="flex align-center">
                       <!-- TODO 更换icon -->
                       <AppIcon iconName="app-migrate"></AppIcon>
                       {{ $t('views.document.movePosition.title') }}
                     </div>
-                    <el-icon class="color-input-placeholder" :size="16" style="margin-right: 0;"><ArrowRight /></el-icon>
+                    <el-icon class="color-input-placeholder" :size="16" style="margin-right: 0"
+                      ><ArrowRight
+                    /></el-icon>
                   </div>
                   <template #dropdown>
                     <el-dropdown-menu>
-                      <el-dropdown-item
-                        v-if="props.showMoveUp"
-                        @click.stop="emit('move', 'up')"
-                      >
+                      <el-dropdown-item v-if="props.showMoveUp" @click.stop="emit('move', 'up')">
                         {{ $t('views.document.movePosition.moveUp') }}
                       </el-dropdown-item>
                       <el-dropdown-item
@@ -91,11 +90,13 @@
                   </template>
                 </el-dropdown>
               </el-dropdown-item>
-              <el-dropdown-item icon="Delete" @click.stop="deleteParagraph(data)"
+              <el-dropdown-item
+                @click.stop="deleteParagraph(data)"
                 v-if="permissionPrecise.doc_edit(id)"
-              >{{
-                $t('common.delete')
-              }}</el-dropdown-item>
+              >
+                <AppIcon iconName="app-delete"></AppIcon>
+                {{ $t('common.delete') }}</el-dropdown-item
+              >
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -142,7 +143,6 @@ const props = defineProps<{
   showMoveDown?: boolean
 }>()
 
-
 const route = useRoute()
 const {
   params: { id, documentId },
@@ -153,16 +153,23 @@ const apiType = computed(() => {
   return from as 'systemShare' | 'workspace' | 'systemManage'
 })
 
-const permissionPrecise = computed (() => {
+const permissionPrecise = computed(() => {
   return permissionMap['knowledge'][apiType.value]
 })
 
-const MoreFieldPermission = (id:any) => {
-  return permissionPrecise.value.doc_generate(id) ||
-  permissionPrecise.value.doc_edit(id)
+const MoreFieldPermission = (id: any) => {
+  return permissionPrecise.value.doc_generate(id) || permissionPrecise.value.doc_edit(id)
 }
 
-const emit = defineEmits(['dialogVisibleChange','clickCard','changeState', 'deleteParagraph', 'refresh', 'refreshMigrateParagraph','move'])
+const emit = defineEmits([
+  'dialogVisibleChange',
+  'clickCard',
+  'changeState',
+  'deleteParagraph',
+  'refresh',
+  'refreshMigrateParagraph',
+  'move',
+])
 const loading = ref(false)
 const changeStateloading = ref(false)
 const show = ref(false)
@@ -230,11 +237,12 @@ function editParagraph(row: any) {
 const cardClick = permissionPrecise.value.doc_edit(id)
 
 function handleClickCard(row: any) {
-  if (!cardClick || dialogVisible.value)
-  {return }
+  if (!cardClick || dialogVisible.value) {
+    return
+  }
   if (!props.disabled) {
     editParagraph(row)
-  }else {
+  } else {
     emit('clickCard')
   }
 }
@@ -257,8 +265,13 @@ function refreshMigrateParagraph() {
   emit('refreshMigrateParagraph', props.data)
 }
 
-const dialogVisible = computed(()=> ParagraphDialogRef.value?.dialogVisible || SelectDocumentDialogRef.value?.dialogVisible || GenerateRelatedDialogRef.value?.dialogVisible)
-watch(dialogVisible, (val: boolean)=>{
+const dialogVisible = computed(
+  () =>
+    ParagraphDialogRef.value?.dialogVisible ||
+    SelectDocumentDialogRef.value?.dialogVisible ||
+    GenerateRelatedDialogRef.value?.dialogVisible,
+)
+watch(dialogVisible, (val: boolean) => {
   emit('dialogVisibleChange', val)
 })
 </script>
diff --git a/ui/src/views/paragraph/component/ParagraphDialog.vue b/ui/src/views/paragraph/component/ParagraphDialog.vue
index 0d2193aa7..caba69fff 100644
--- a/ui/src/views/paragraph/component/ParagraphDialog.vue
+++ b/ui/src/views/paragraph/component/ParagraphDialog.vue
@@ -15,7 +15,7 @@
           <div class="p-24" style="padding-bottom: 8px">
             <div style="position: absolute; right: 20px; top: 20px">
               <el-button text @click="isEdit = true" v-if="paragraphId && !isEdit">
-                <el-icon><EditPen /></el-icon>
+                <AppIcon iconName="app-edit"></AppIcon>
               </el-button>
             </div>
 
diff --git a/ui/src/views/paragraph/index.vue b/ui/src/views/paragraph/index.vue
index 222cdf6f8..25b3e2bce 100644
--- a/ui/src/views/paragraph/index.vue
+++ b/ui/src/views/paragraph/index.vue
@@ -104,6 +104,9 @@
                             <ParagraphCard
                               :data="item"
                               class="mb-8 w-full"
+                              :class="{
+                                'is-selected': multipleSelection.includes(item.id),
+                              }"
                               :disabled="true"
                               @clickCard="toggleSelect(item.id)"
                             />
@@ -438,6 +441,9 @@ onMounted(() => {
     }
   }
   .paragraph-card {
+    .is-selected {
+      border: 1px solid var(--el-color-primary);
+    }
     &.handle {
       .handle-img {
         visibility: hidden;
diff --git a/ui/src/views/problem/index.vue b/ui/src/views/problem/index.vue
index 3f5472694..1423dd6fe 100644
--- a/ui/src/views/problem/index.vue
+++ b/ui/src/views/problem/index.vue
@@ -129,7 +129,7 @@
                         @click.stop="deleteProblem(row)"
                         v-if="permissionPrecise.problem_delete(id)"
                       >
-                        <el-icon><Delete /></el-icon>
+                        <AppIcon iconName="app-delete"></AppIcon>
                       </el-button>
                     </el-tooltip>
                   </span>
diff --git a/ui/src/views/system-chat-user/chat-user/index.vue b/ui/src/views/system-chat-user/chat-user/index.vue
index 3ecf8213e..b120afe02 100644
--- a/ui/src/views/system-chat-user/chat-user/index.vue
+++ b/ui/src/views/system-chat-user/chat-user/index.vue
@@ -220,9 +220,7 @@
                   )
                 "
               >
-                <el-icon>
-                  <EditPen />
-                </el-icon>
+                <AppIcon iconName="app-edit"></AppIcon>
               </el-button>
             </span>
 
@@ -271,9 +269,7 @@
                   )
                 "
               >
-                <el-icon>
-                  <Delete />
-                </el-icon>
+                <AppIcon iconName="app-delete"></AppIcon>
               </el-button>
             </span>
           </template>
diff --git a/ui/src/views/system-chat-user/group/index.vue b/ui/src/views/system-chat-user/group/index.vue
index ff3f5b7c2..45dd9d95b 100644
--- a/ui/src/views/system-chat-user/group/index.vue
+++ b/ui/src/views/system-chat-user/group/index.vue
@@ -63,13 +63,13 @@
                     <div class="flex-between">
                       <span class="ellipsis" :title="row.name">{{ row.name }}</span>
                       <div @click.stop v-show="mouseId === row.id">
-                        <el-dropdown :teleported="false" trigger="click"
+                        <el-dropdown
+                          :teleported="false"
+                          trigger="click"
                           v-if="editPermission() || dlePermission()"
                         >
                           <el-button text>
-                            <el-icon class="color-secondary">
-                              <MoreFilled />
-                            </el-icon>
+                            <AppIcon iconName="app-more"></AppIcon>
                           </el-button>
                           <template #dropdown>
                             <el-dropdown-menu style="min-width: 80px">
@@ -78,9 +78,7 @@
                                 class="p-8"
                                 v-if="editPermission()"
                               >
-                                <el-icon>
-                                  <EditPen />
-                                </el-icon>
+                                <AppIcon iconName="app-edit"></AppIcon>
                                 {{ $t('common.rename') }}
                               </el-dropdown-item>
                               <el-dropdown-item
@@ -88,9 +86,7 @@
                                 class="border-t p-8"
                                 v-if="dlePermission()"
                               >
-                                <el-icon>
-                                  <Delete />
-                                </el-icon>
+                                <AppIcon iconName="app-delete"></AppIcon>
                                 {{ $t('common.delete') }}
                               </el-dropdown-item>
                             </el-dropdown-menu>
@@ -284,19 +280,27 @@ async function getUserGroupList() {
 }
 
 const editPermission = () => {
-  return hasPermission(new ComplexPermission(
-                      [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
-                      [PermissionConst.WORKSPACE_USER_GROUP_EDIT,
-                       PermissionConst.USER_GROUP_EDIT,],[],
-                       'OR',),'OR',)
+  return hasPermission(
+    new ComplexPermission(
+      [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
+      [PermissionConst.WORKSPACE_USER_GROUP_EDIT, PermissionConst.USER_GROUP_EDIT],
+      [],
+      'OR',
+    ),
+    'OR',
+  )
 }
 
 const dlePermission = () => {
-  return hasPermission(new ComplexPermission(
-                      [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
-                      [PermissionConst.WORKSPACE_USER_GROUP_DELETE,
-                       PermissionConst.USER_GROUP_DELETE,],[],
-                       'OR',),'OR',)
+  return hasPermission(
+    new ComplexPermission(
+      [RoleConst.ADMIN, RoleConst.WORKSPACE_MANAGE],
+      [PermissionConst.WORKSPACE_USER_GROUP_DELETE, PermissionConst.USER_GROUP_DELETE],
+      [],
+      'OR',
+    ),
+    'OR',
+  )
 }
 
 onMounted(async () => {
diff --git a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
index fd257d055..37cc876a1 100644
--- a/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ApplicationResourceIndex.vue
@@ -258,13 +258,9 @@
                 </el-button>
               </span>
             </el-tooltip>
-            <el-dropdown trigger="click"
-              v-if="MoreFilledPermission()"
-            >
+            <el-dropdown trigger="click" v-if="MoreFilledPermission()">
               <el-button text @click.stop>
-                <el-icon>
-                  <MoreFilled />
-                </el-icon>
+                <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -276,10 +272,11 @@
                     {{ $t('common.export') }}
                   </el-dropdown-item>
                   <el-dropdown-item
-                    icon="Delete"
                     @click.stop="deleteApplication(row)"
                     v-if="permissionPrecise.delete()"
-                    >{{ $t('common.delete') }}
+                  >
+                    <AppIcon iconName="app-delete"></AppIcon>
+                    {{ $t('common.delete') }}
                   </el-dropdown-item>
                 </el-dropdown-menu>
               </template>
@@ -314,16 +311,17 @@ const permissionPrecise = computed(() => {
 })
 
 const managePermission = () => {
-  return permissionPrecise.value.overview_read() || 
-  permissionPrecise.value.access_read() || 
-  permissionPrecise.value.edit() || 
-  permissionPrecise.value.chat_log_read() || 
-  permissionPrecise.value.chat_user_read()
+  return (
+    permissionPrecise.value.overview_read() ||
+    permissionPrecise.value.access_read() ||
+    permissionPrecise.value.edit() ||
+    permissionPrecise.value.chat_log_read() ||
+    permissionPrecise.value.chat_user_read()
+  )
 }
 
 const MoreFilledPermission = () => {
-  return permissionPrecise.value.export() || 
-  permissionPrecise.value.delete()
+  return permissionPrecise.value.export() || permissionPrecise.value.delete()
 }
 
 const apiInputParams = ref([])
@@ -413,7 +411,6 @@ const paginationConfig = reactive({
   total: 0,
 })
 
-
 const workspaceOptions = ref<any[]>([])
 const workspaceVisible = ref(false)
 const workspaceArr = ref<any[]>([])
diff --git a/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue b/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
index 926ba5a19..deae8174a 100644
--- a/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
+++ b/ui/src/views/system-resource-management/KnowledgeResourceIndex.vue
@@ -146,9 +146,7 @@
               :content="$t('views.system.resource_management.management')"
               placement="top"
             >
-              <span class="mr-8"
-                v-if="ManagePermission()"
-              >
+              <span class="mr-8" v-if="ManagePermission()">
                 <el-button
                   type="primary"
                   text
@@ -180,13 +178,9 @@
                 </el-button>
               </span>
             </el-tooltip>
-            <el-dropdown trigger="click"
-              v-if="MoreFilledPermission()"
-            >
+            <el-dropdown trigger="click" v-if="MoreFilledPermission()">
               <el-button text @click.stop>
-                <el-icon>
-                  <MoreFilled />
-                </el-icon>
+                <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -229,11 +223,11 @@
                     >{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
                   >
                   <el-dropdown-item
-                    icon="Delete"
                     type="danger"
                     @click.stop="deleteKnowledge(row)"
                     v-if="permissionPrecise.delete()"
                   >
+                    <AppIcon iconName="app-delete"></AppIcon>
                     {{ $t('common.delete') }}</el-dropdown-item
                   >
                 </el-dropdown-menu>
@@ -269,22 +263,25 @@ const permissionPrecise = computed(() => {
 })
 
 const ManagePermission = () => {
-  return permissionPrecise.value.doc_read() || 
-    permissionPrecise.value.problem_read() || 
-    permissionPrecise.value.edit() || 
+  return (
+    permissionPrecise.value.doc_read() ||
+    permissionPrecise.value.problem_read() ||
+    permissionPrecise.value.edit() ||
     permissionPrecise.value.knowledge_chat_user_read() ||
     permissionPrecise.value.hit_test()
+  )
 }
 // sync generete edit export delete
 const MoreFilledPermission = () => {
-  return permissionPrecise.value.sync() || 
-  permissionPrecise.value.generate() || 
-  permissionPrecise.value.edit() || 
-  permissionPrecise.value.export() || 
-  permissionPrecise.value.delete()
+  return (
+    permissionPrecise.value.sync() ||
+    permissionPrecise.value.generate() ||
+    permissionPrecise.value.edit() ||
+    permissionPrecise.value.export() ||
+    permissionPrecise.value.delete()
+  )
 }
 
-
 const search_type = ref('name')
 const search_form = ref<any>({
   name: '',
diff --git a/ui/src/views/system-resource-management/ModelResourceIndex.vue b/ui/src/views/system-resource-management/ModelResourceIndex.vue
index 9d11600f9..c67bb2cfb 100644
--- a/ui/src/views/system-resource-management/ModelResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ModelResourceIndex.vue
@@ -176,7 +176,7 @@
                   :title="$t('common.modify')"
                   @click.stop="openEditModel(row)"
                 >
-                  <el-icon><EditPen /></el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </span>
             </el-tooltip>
@@ -216,7 +216,7 @@
                   :title="$t('common.delete')"
                   @click.stop="deleteModel(row)"
                 >
-                  <el-icon><Delete /></el-icon>
+                  <AppIcon iconName="app-delete"></AppIcon>
                 </el-button>
               </span>
             </el-tooltip>
diff --git a/ui/src/views/system-resource-management/ToolResourceIndex.vue b/ui/src/views/system-resource-management/ToolResourceIndex.vue
index 548efba37..71ace29f6 100644
--- a/ui/src/views/system-resource-management/ToolResourceIndex.vue
+++ b/ui/src/views/system-resource-management/ToolResourceIndex.vue
@@ -184,9 +184,7 @@
                   @click.stop="addInternalTool(row, true)"
                   :title="$t('common.edit')"
                 >
-                  <el-icon>
-                    <EditPen />
-                  </el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </span>
             </el-tooltip>
@@ -203,9 +201,7 @@
                   @click.stop="openCreateDialog(row)"
                   :title="$t('common.edit')"
                 >
-                  <el-icon>
-                    <EditPen />
-                  </el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </span>
             </el-tooltip>
@@ -227,13 +223,9 @@
                 </el-button>
               </span>
             </el-tooltip>
-            <el-dropdown trigger="click"
-              v-if="MoreFilledPermission(row)"
-            >
+            <el-dropdown trigger="click" v-if="MoreFilledPermission(row)">
               <el-button text @click.stop>
-                <el-icon>
-                  <MoreFilled />
-                </el-icon>
+                <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu>
@@ -257,7 +249,7 @@
                     divided
                     @click.stop="deleteTool(row)"
                   >
-                    <el-icon><Delete /></el-icon>
+                    <AppIcon iconName="app-delete"></AppIcon>
                     {{ $t('common.delete') }}
                   </el-dropdown-item>
                 </el-dropdown-menu>
@@ -317,9 +309,11 @@ const permissionPrecise = computed(() => {
 })
 
 const MoreFilledPermission = (row: any) => {
-  return permissionPrecise.value.export() || 
-          permissionPrecise.value.delete() || 
-          (row.init_field_list?.length > 0 && permissionPrecise.value.edit())
+  return (
+    permissionPrecise.value.export() ||
+    permissionPrecise.value.delete() ||
+    (row.init_field_list?.length > 0 && permissionPrecise.value.edit())
+  )
 }
 
 function exportTool(row: any) {
diff --git a/ui/src/views/system-setting/authentication/index.vue b/ui/src/views/system-setting/authentication/index.vue
index 6711d329c..f3bf3ec34 100644
--- a/ui/src/views/system-setting/authentication/index.vue
+++ b/ui/src/views/system-setting/authentication/index.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="authentication-setting p-16-24">
-    <h4 class="mb-16">{{ $t('views.system.authentication.title') }}</h4>
-
+    <el-breadcrumb separator-icon="ArrowRight" class="mb-16">
+      <el-breadcrumb-item>{{ t('views.system.subTitle') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <h5 class="ml-4 color-text-primary">{{ $t('views.system.authentication.title') }}</h5>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
     <el-tabs v-model="activeName" class="mt-4">
       <template v-for="(item, index) in tabList" :key="index">
         <el-tab-pane :label="item.label" :name="item.name">
@@ -22,7 +26,6 @@ import OAuth2 from './component/OAuth2.vue'
 import { t } from '@/locales'
 import useStore from '@/stores'
 
-
 const { user } = useStore()
 const router = useRouter()
 
@@ -55,7 +58,6 @@ const tabList = [
   },
 ]
 
-
 onMounted(() => {
   if (user.isExpire()) {
     router.push({ path: `/application` })
diff --git a/ui/src/views/system-setting/email/index.vue b/ui/src/views/system-setting/email/index.vue
index b3864c268..cb89674a7 100644
--- a/ui/src/views/system-setting/email/index.vue
+++ b/ui/src/views/system-setting/email/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="email-setting p-16-24">
-    <h4 class="mb-16">{{ $t('views.system.email.title') }}</h4>
+    <el-breadcrumb separator-icon="ArrowRight" class="mb-16">
+      <el-breadcrumb-item>{{ t('views.system.subTitle') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <h5 class="ml-4 color-text-primary">{{ $t('views.system.email.title') }}</h5>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
     <el-card style="--el-card-padding: 16px" v-loading="loading">
       <el-scrollbar>
         <div class="email-setting__main p-16">
diff --git a/ui/src/views/system-setting/theme/index.vue b/ui/src/views/system-setting/theme/index.vue
index e556ca9ba..4c9822048 100644
--- a/ui/src/views/system-setting/theme/index.vue
+++ b/ui/src/views/system-setting/theme/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="theme-setting p-16-24" v-loading="loading">
-    <h4 class="mb-16">{{ $t('theme.title') }}</h4>
+    <el-breadcrumb separator-icon="ArrowRight" class="mb-16">
+      <el-breadcrumb-item>{{ t('views.system.subTitle') }}</el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <h5 class="ml-4 color-text-primary">{{ $t('theme.title') }}</h5>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
     <el-scrollbar>
       <el-card style="--el-card-padding: 16px">
         <h5 class="mb-16">{{ $t('theme.platformDisplayTheme') }}</h5>
@@ -10,13 +15,13 @@
           @change="changeThemeHandle"
         >
           <template v-for="(item, index) in themeList" :key="index">
-            <el-radio-button :label="item.label" :value="item.value"/>
+            <el-radio-button :label="item.label" :value="item.value" />
           </template>
-          <el-radio-button :label="$t('theme.custom')" value="custom"/>
+          <el-radio-button :label="$t('theme.custom')" value="custom" />
         </el-radio-group>
         <div v-if="themeRadio === 'custom'">
           <h5 class="mt-16 mb-8">{{ $t('theme.customTheme') }}</h5>
-          <el-color-picker v-model="customColor" @change="customColorHandle"/>
+          <el-color-picker v-model="customColor" @change="customColorHandle" />
         </div>
       </el-card>
 
@@ -33,7 +38,7 @@
             <div class="theme-preview">
               <el-row :gutter="8">
                 <el-col :span="16">
-                  <LoginPreview :data="themeForm"/>
+                  <LoginPreview :data="themeForm" />
                 </el-col>
                 <el-col :span="8">
                   <div class="theme-form">
@@ -55,9 +60,7 @@
                           </el-button>
                         </el-upload>
                       </div>
-                      <el-text type="info" size="small"
-                      >{{ $t('theme.websiteLogoTip') }}
-                      </el-text>
+                      <el-text type="info" size="small">{{ $t('theme.websiteLogoTip') }} </el-text>
                     </el-card>
                     <el-card shadow="never" class="mb-8">
                       <div class="flex-between mb-8">
@@ -77,9 +80,7 @@
                           </el-button>
                         </el-upload>
                       </div>
-                      <el-text type="info" size="small"
-                      >{{ $t('theme.loginLogoTip') }}
-                      </el-text>
+                      <el-text type="info" size="small">{{ $t('theme.loginLogoTip') }} </el-text>
                     </el-card>
                     <el-card shadow="never" class="mb-8">
                       <div class="flex-between mb-8">
@@ -120,9 +121,7 @@
                           maxlength="128"
                         >
                         </el-input>
-                        <el-text type="info"
-                        >{{ $t('theme.websiteNameTip') }}
-                        </el-text>
+                        <el-text type="info">{{ $t('theme.websiteNameTip') }} </el-text>
                       </el-form-item>
                       <el-form-item :label="$t('theme.websiteSlogan')" prop="slogan">
                         <el-input
@@ -132,9 +131,7 @@
                           show-word-limit
                         >
                         </el-input>
-                        <el-text type="info"
-                        >{{ $t('theme.websiteSloganTip') }}
-                        </el-text>
+                        <el-text type="info">{{ $t('theme.websiteSloganTip') }} </el-text>
                       </el-form-item>
                     </el-form>
                   </div>
@@ -168,7 +165,7 @@
                       <div class="flex-center h-full">
                         <div class="app-title-container cursor">
                           <div class="logo flex-center">
-                            <LogoFull height="25px"/>
+                            <LogoFull height="25px" />
                           </div>
                         </div>
                       </div>
@@ -212,10 +209,7 @@
                       </div>
                     </div>
                     <div class="mt-4">
-                      <el-checkbox
-                        v-model="themeForm.showForum"
-                        :label="$t('theme.showForum')"
-                      />
+                      <el-checkbox v-model="themeForm.showForum" :label="$t('theme.showForum')" />
                       <div class="ml-24">
                         <el-input
                           v-model="themeForm.forumUrl"
@@ -252,12 +246,17 @@
     </el-scrollbar>
     <div class="theme-setting__operate w-full p-16-24">
       <el-button @click="resetTheme">{{ $t('theme.abandonUpdate') }}</el-button>
-      <el-button type="primary" @click="updateTheme(themeFormRef)"
-                 v-hasPermission="
-                      new ComplexPermission(
-                        [RoleConst.ADMIN],
-                        [PermissionConst.APPEARANCE_SETTINGS_EDIT],
-                        [],'OR',)"
+      <el-button
+        type="primary"
+        @click="updateTheme(themeFormRef)"
+        v-hasPermission="
+          new ComplexPermission(
+            [RoleConst.ADMIN],
+            [PermissionConst.APPEARANCE_SETTINGS_EDIT],
+            [],
+            'OR',
+          )
+        "
       >
         {{ $t('theme.saveAndApply') }}
       </el-button>
@@ -266,20 +265,20 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, onMounted, computed} from 'vue'
-import {useRouter, onBeforeRouteLeave} from 'vue-router'
-import type {FormInstance, FormRules, UploadFiles} from 'element-plus'
-import {cloneDeep} from 'lodash'
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter, onBeforeRouteLeave } from 'vue-router'
+import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
+import { cloneDeep } from 'lodash'
 import LoginPreview from './LoginPreview.vue'
-import {themeList, defaultSetting, defaultPlatformSetting} from '@/utils/theme'
+import { themeList, defaultSetting, defaultPlatformSetting } from '@/utils/theme'
 import ThemeApi from '@/api/system-settings/theme'
-import {MsgSuccess, MsgError} from '@/utils/message'
+import { MsgSuccess, MsgError } from '@/utils/message'
 import useStore from '@/stores'
-import {t} from '@/locales'
-import {PermissionConst, RoleConst} from '@/utils/permission/data'
-import {ComplexPermission} from '@/utils/permission/type'
+import { t } from '@/locales'
+import { PermissionConst, RoleConst } from '@/utils/permission/data'
+import { ComplexPermission } from '@/utils/permission/type'
 
-const {theme} = useStore()
+const { theme } = useStore()
 const router = useRouter()
 
 onBeforeRouteLeave((to, from) => {
@@ -307,12 +306,8 @@ const themeRadio = ref('')
 const customColor = ref('')
 
 const rules = reactive<FormRules>({
-  title: [
-    {required: true, message: t('theme.websiteNamePlaceholder'), trigger: 'blur'},
-  ],
-  slogan: [
-    {required: true, message: t('theme.websiteSloganPlaceholder'), trigger: 'blur'},
-  ],
+  title: [{ required: true, message: t('theme.websiteNamePlaceholder'), trigger: 'blur' }],
+  slogan: [{ required: true, message: t('theme.websiteSloganPlaceholder'), trigger: 'blur' }],
 })
 
 const onChange = (file: any, fileList: UploadFiles, attr: string) => {
@@ -348,15 +343,15 @@ function resetForm(val: string) {
   themeForm.value =
     val === 'login'
       ? {
-        ...themeForm.value,
-        theme: themeForm.value.theme,
-        ...defaultSetting,
-      }
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultSetting,
+        }
       : {
-        ...themeForm.value,
-        theme: themeForm.value.theme,
-        ...defaultPlatformSetting,
-      }
+          ...themeForm.value,
+          theme: themeForm.value.theme,
+          ...defaultPlatformSetting,
+        }
 
   theme.setTheme(themeForm.value)
 }
diff --git a/ui/src/views/system/role/component/MemberFormContent.vue b/ui/src/views/system/role/component/MemberFormContent.vue
index 56274ca11..7e23abf7c 100644
--- a/ui/src/views/system/role/component/MemberFormContent.vue
+++ b/ui/src/views/system/role/component/MemberFormContent.vue
@@ -2,25 +2,56 @@
   <el-form :model="form" ref="formRef" label-position="top" require-asterisk-position="right">
     <el-scrollbar>
       <div v-for="(element, index) in form" :key="index" class="flex w-full">
-        <el-form-item v-for="model of props.models" :key="model.path" :prop="`[${index}].${model.path}`"
-          :rules="model.rules" :label="index === 0 && model.label ? model.label : ''" class="mr-8" style="flex: 1">
-          <el-select v-if="!model?.hidden?.(element)" v-model="element[model.path]"
-            :placeholder="model.selectProps?.placeholder ?? $t('common.selectPlaceholder')" :clearable="model.selectProps?.clearableFunction?model.selectProps?.clearableFunction?.(element): true" filterable
-            multiple style="width: 100%" collapse-tags collapse-tags-tooltip v-bind="model.selectProps">
-            <el-option v-for="opt in model.selectProps?.options" :key="opt.value" :label="opt.label"
-              :value="opt.value" :disabled="opt.disabledFunction?.(element)">
-               <el-tooltip effect="dark" :content="opt.label" placement="top" :show-after="500">
-                <div class="ellipsis" style="max-width: 190px;">{{ opt.label }}</div>
+        <el-form-item
+          v-for="model of props.models"
+          :key="model.path"
+          :prop="`[${index}].${model.path}`"
+          :rules="model.rules"
+          :label="index === 0 && model.label ? model.label : ''"
+          class="mr-8"
+          style="flex: 1"
+        >
+          <el-select
+            v-if="!model?.hidden?.(element)"
+            v-model="element[model.path]"
+            :placeholder="model.selectProps?.placeholder ?? $t('common.selectPlaceholder')"
+            :clearable="
+              model.selectProps?.clearableFunction
+                ? model.selectProps?.clearableFunction?.(element)
+                : true
+            "
+            filterable
+            multiple
+            style="width: 100%"
+            collapse-tags
+            collapse-tags-tooltip
+            v-bind="model.selectProps"
+          >
+            <el-option
+              v-for="opt in model.selectProps?.options"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+              :disabled="opt.disabledFunction?.(element)"
+            >
+              <el-tooltip effect="dark" :content="opt.label" placement="top" :show-after="500">
+                <div class="ellipsis" style="max-width: 190px">{{ opt.label }}</div>
               </el-tooltip>
             </el-option>
           </el-select>
         </el-form-item>
         <!-- 删除按钮 -->
-        <el-button :disabled="props.keepOneLine && form.length === 1 || props.deleteButtonDisabled?.(element)" @click="handleDelete(index)" text
-          :style="{ 'margin-top': index === 0 && props.models.some((item) => item.label) ? '32px' : '2px' }">
-          <el-icon>
-            <Delete />
-          </el-icon>
+        <el-button
+          :disabled="
+            (props.keepOneLine && form.length === 1) || props.deleteButtonDisabled?.(element)
+          "
+          @click="handleDelete(index)"
+          text
+          :style="{
+            'margin-top': index === 0 && props.models.some((item) => item.label) ? '32px' : '2px',
+          }"
+        >
+          <AppIcon iconName="app-delete"></AppIcon>
         </el-button>
       </div>
     </el-scrollbar>
@@ -40,30 +71,34 @@ import { ref, watch } from 'vue'
 import type { FormItemModel } from '@/api/type/role'
 
 const props = defineProps<{
-  models: FormItemModel[];
-  addText?: string;
-  keepOneLine?: boolean; // 至少保留一行
+  models: FormItemModel[]
+  addText?: string
+  keepOneLine?: boolean // 至少保留一行
   deleteButtonDisabled?: (model: any) => boolean
 }>()
 
 const formRef = ref()
-const formItem: Record<string, any> = {};
+const formItem: Record<string, any> = {}
 const form = defineModel<Record<string, any>[]>('form', {
   default: [],
-});
+})
 
 function handleAdd() {
-  form.value.push({ ...formItem });
+  form.value.push({ ...formItem })
 }
 
-watch(() => props.models, () => {
-  props.models.forEach((e) => {
-    formItem[e.path] = [];
-  });
-}, { immediate: true })
+watch(
+  () => props.models,
+  () => {
+    props.models.forEach((e) => {
+      formItem[e.path] = []
+    })
+  },
+  { immediate: true },
+)
 
 function handleDelete(index: number) {
-  form.value.splice(index, 1);
+  form.value.splice(index, 1)
 }
 
 const validate = () => {
diff --git a/ui/src/views/system/role/index.vue b/ui/src/views/system/role/index.vue
index 2937ee6e7..f058b7386 100644
--- a/ui/src/views/system/role/index.vue
+++ b/ui/src/views/system/role/index.vue
@@ -72,13 +72,14 @@
                           >({{ roleTypeMap[row.type as RoleTypeEnum] }})</span
                         >
                       </span>
-                      <div @click.stop v-show="mouseId === row.id" 
-                        v-if="editPermission() || delPermission()">
+                      <div
+                        @click.stop
+                        v-show="mouseId === row.id"
+                        v-if="editPermission() || delPermission()"
+                      >
                         <el-dropdown :teleported="false" trigger="click">
                           <el-button text>
-                            <el-icon class="color-secondary">
-                              <MoreFilled />
-                            </el-icon>
+                            <AppIcon iconName="app-more"></AppIcon>
                           </el-button>
                           <template #dropdown>
                             <el-dropdown-menu style="min-width: 80px">
@@ -87,7 +88,7 @@
                                 class="p-8"
                                 v-if="editPermission()"
                               >
-                                <el-icon><EditPen /></el-icon>
+                                <AppIcon iconName="app-edit"></AppIcon>
                                 {{ $t('common.rename') }}
                               </el-dropdown-item>
                               <el-dropdown-item
@@ -95,7 +96,7 @@
                                 class="border-t p-8"
                                 v-if="delPermission()"
                               >
-                                <el-icon><Delete /></el-icon>
+                                <AppIcon iconName="app-delete"></AppIcon>
                                 {{ $t('common.delete') }}
                               </el-dropdown-item>
                             </el-dropdown-menu>
@@ -187,13 +188,17 @@ async function getRole() {
 }
 
 const editPermission = () => {
-  return hasPermission(new ComplexPermission([RoleConst.ADMIN],
-                      [PermissionConst.ROLE_EDIT],[],'OR',),'OR',)
+  return hasPermission(
+    new ComplexPermission([RoleConst.ADMIN], [PermissionConst.ROLE_EDIT], [], 'OR'),
+    'OR',
+  )
 }
 
 const delPermission = () => {
-  return hasPermission(new ComplexPermission([RoleConst.ADMIN],
-                      [PermissionConst.ROLE_DELETE],[],'OR',),'OR',)
+  return hasPermission(
+    new ComplexPermission([RoleConst.ADMIN], [PermissionConst.ROLE_DELETE], [], 'OR'),
+    'OR',
+  )
 }
 
 onMounted(async () => {
diff --git a/ui/src/views/system/user-manage/index.vue b/ui/src/views/system/user-manage/index.vue
index 59cf5c199..fabf537a6 100644
--- a/ui/src/views/system/user-manage/index.vue
+++ b/ui/src/views/system/user-manage/index.vue
@@ -7,7 +7,7 @@
           type="primary"
           @click="createUser"
           v-hasPermission="[RoleConst.ADMIN, PermissionConst.USER_CREATE]"
-        >{{ $t('views.userManage.createUser') }}
+          >{{ $t('views.userManage.createUser') }}
         </el-button>
         <div class="flex-between complex-search">
           <el-select
@@ -16,13 +16,10 @@
             style="width: 120px"
             @change="search_type_change"
           >
-            <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
-            <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name"/>
-            <el-option :label="$t('views.login.loginForm.email.label')" value="email"/>
-            <el-option
-              :label="$t('common.status.label')"
-              value="is_active"
-            />
+            <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
+            <el-option :label="$t('views.userManage.userForm.nick_name.label')" value="nick_name" />
+            <el-option :label="$t('views.login.loginForm.email.label')" value="email" />
+            <el-option :label="$t('common.status.label')" value="is_active" />
             <el-option
               v-if="user.isEE() || user.isPE()"
               :label="$t('views.userManage.source.label')"
@@ -59,14 +56,8 @@
             @change="getList"
             style="width: 220px"
           >
-            <el-option
-              :label="$t('common.status.enabled')"
-              :value="true"
-            />
-            <el-option
-              :label="$t('common.status.disabled')"
-              :value="false"
-            />
+            <el-option :label="$t('common.status.enabled')" :value="true" />
+            <el-option :label="$t('common.status.disabled')" :value="false" />
           </el-select>
           <el-select
             v-else-if="search_type === 'source'"
@@ -76,40 +67,15 @@
             clearable
             :placeholder="$t('common.inputPlaceholder')"
           >
-            <el-option
-              :label="$t('views.userManage.source.local')"
-              value="LOCAL"
-            />
-            <el-option
-              label="CAS"
-              value="CAS"
-            />
-            <el-option
-              label="LDAP"
-              value="LDAP"
-            />
-            <el-option
-              label="OIDC"
-              value="OIDC"
-            />
-            <el-option
-              label="OAuth2"
-              value="OAuth2"
-            />
-            <el-option
-              :label="$t('views.userManage.source.wecom')"
-              value="wecom"
-            />
-            <el-option
-              :label="$t('views.userManage.source.lark')"
-              value="lark"
-            />
-            <el-option
-              :label="$t('views.userManage.source.dingtalk')"
-              value="dingtalk"
-            />
+            <el-option :label="$t('views.userManage.source.local')" value="LOCAL" />
+            <el-option label="CAS" value="CAS" />
+            <el-option label="LDAP" value="LDAP" />
+            <el-option label="OIDC" value="OIDC" />
+            <el-option label="OAuth2" value="OAuth2" />
+            <el-option :label="$t('views.userManage.source.wecom')" value="wecom" />
+            <el-option :label="$t('views.userManage.source.lark')" value="lark" />
+            <el-option :label="$t('views.userManage.source.dingtalk')" value="dingtalk" />
           </el-select>
-
         </div>
       </div>
       <app-table
@@ -137,7 +103,7 @@
           <template #default="{ row }">
             <div v-if="row.is_active" class="flex align-center">
               <el-icon class="color-success mr-8" style="font-size: 16px">
-                <SuccessFilled/>
+                <SuccessFilled />
               </el-icon>
               <span class="color-secondary">
                 {{ $t('common.status.enabled') }}
@@ -233,7 +199,7 @@
                 v-if="hasPermission([RoleConst.ADMIN, PermissionConst.USER_EDIT], 'OR')"
               />
             </span>
-            <el-divider direction="vertical"/>
+            <el-divider direction="vertical" />
             <el-tooltip effect="dark" :content="$t('common.edit')" placement="top">
               <span class="mr-8">
                 <el-button
@@ -243,7 +209,7 @@
                   :title="$t('common.edit')"
                   v-if="hasPermission([RoleConst.ADMIN, PermissionConst.USER_EDIT], 'OR')"
                 >
-                  <el-icon><EditPen/></el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </span>
             </el-tooltip>
@@ -260,7 +226,7 @@
                   :title="$t('views.userManage.setting.updatePwd')"
                   v-if="hasPermission([RoleConst.ADMIN, PermissionConst.USER_EDIT], 'OR')"
                 >
-                  <el-icon><Lock/></el-icon>
+                  <el-icon><Lock /></el-icon>
                 </el-button>
               </span>
             </el-tooltip>
@@ -273,34 +239,32 @@
                 :title="$t('common.delete')"
                 v-if="hasPermission([RoleConst.ADMIN, PermissionConst.USER_DELETE], 'OR')"
               >
-                <el-icon>
-                  <Delete/>
-                </el-icon>
+                <AppIcon iconName="app-delete"></AppIcon>
               </el-button>
             </el-tooltip>
           </template>
         </el-table-column>
       </app-table>
     </el-card>
-    <UserDrawer :title="title" ref="UserDrawerRef" @refresh="refresh"/>
-    <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh"/>
+    <UserDrawer :title="title" ref="UserDrawerRef" @refresh="refresh" />
+    <UserPwdDialog ref="UserPwdDialogRef" @refresh="refresh" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref, reactive, watch} from 'vue'
+import { onMounted, ref, reactive, watch } from 'vue'
 import UserDrawer from './component/UserDrawer.vue'
 import UserPwdDialog from './component/UserPwdDialog.vue'
 import userManageApi from '@/api/system/user-manage'
-import {datetimeFormat} from '@/utils/time'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
-import {t} from '@/locales'
-import {ValidCount, ValidType} from '@/enums/common.ts'
+import { datetimeFormat } from '@/utils/time'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
+import { ValidCount, ValidType } from '@/enums/common.ts'
 import useStore from '@/stores'
-import {PermissionConst, RoleConst} from '@/utils/permission/data'
-import {hasPermission} from '@/utils/permission/index'
+import { PermissionConst, RoleConst } from '@/utils/permission/data'
+import { hasPermission } from '@/utils/permission/index'
 
-const {user, common} = useStore()
+const { user, common } = useStore()
 const search_type = ref('username')
 const search_form = ref<{
   username: string
@@ -329,7 +293,7 @@ const paginationConfig = reactive({
 const userTableData = ref<any[]>([])
 
 const search_type_change = () => {
-  search_form.value = {username: '', nick_name: '', email: '', is_active: null}
+  search_form.value = { username: '', nick_name: '', email: '', is_active: null }
 }
 
 function handleSizeChange() {
@@ -339,9 +303,9 @@ function handleSizeChange() {
 
 function getList() {
   const params: any = {}
-  const searchValue = search_form.value[search_type.value as keyof typeof search_form.value];
+  const searchValue = search_form.value[search_type.value as keyof typeof search_form.value]
   if (searchValue !== undefined && searchValue !== null && searchValue !== '') {
-    params[search_type.value] = searchValue;
+    params[search_type.value] = searchValue
   }
   return userManageApi.getUserManage(paginationConfig, params, loading).then((res) => {
     userTableData.value = res.data.records.map((item: any) => ({
@@ -401,8 +365,7 @@ function deleteUserManage(row: any) {
         getList()
       })
     })
-    .catch(() => {
-    })
+    .catch(() => {})
 }
 
 function editPwdUser(row: any) {
diff --git a/ui/src/views/system/workspace/index.vue b/ui/src/views/system/workspace/index.vue
index f9bda2531..b1608efbc 100644
--- a/ui/src/views/system/workspace/index.vue
+++ b/ui/src/views/system/workspace/index.vue
@@ -43,13 +43,13 @@
                     <div class="flex-between">
                       <span class="ellipsis" :title="row.name">{{ row.name }}</span>
                       <div @click.stop v-show="mouseId === row.id">
-                        <el-dropdown :teleported="false" trigger="click"
-                          v-if="editPermission() || dlePermission()"  
+                        <el-dropdown
+                          :teleported="false"
+                          trigger="click"
+                          v-if="editPermission() || dlePermission()"
                         >
                           <el-button text>
-                            <el-icon class="color-secondary">
-                              <MoreFilled />
-                            </el-icon>
+                            <AppIcon iconName="app-more"></AppIcon>
                           </el-button>
                           <template #dropdown>
                             <el-dropdown-menu style="min-width: 80px">
@@ -58,7 +58,7 @@
                                 class="p-8"
                                 v-if="editPermission()"
                               >
-                                <el-icon><EditPen /></el-icon>
+                                <AppIcon iconName="app-edit"></AppIcon>
                                 {{ $t('common.rename') }}
                               </el-dropdown-item>
                               <el-dropdown-item
@@ -66,7 +66,7 @@
                                 class="border-t p-8"
                                 v-if="dlePermission()"
                               >
-                                <el-icon><Delete /></el-icon>
+                                <AppIcon iconName="app-delete"></AppIcon>
                                 {{ $t('common.delete') }}
                               </el-dropdown-item>
                             </el-dropdown-menu>
@@ -136,13 +136,11 @@ onMounted(async () => {
 })
 
 const editPermission = () => {
-  return hasPermission([RoleConst.ADMIN, 
-  PermissionConst.WORKSPACE_EDIT],'OR',)
+  return hasPermission([RoleConst.ADMIN, PermissionConst.WORKSPACE_EDIT], 'OR')
 }
 
 const dlePermission = () => {
-  return hasPermission([RoleConst.ADMIN, 
-  PermissionConst.WORKSPACE_DELETE],'OR',)
+  return hasPermission([RoleConst.ADMIN, PermissionConst.WORKSPACE_DELETE], 'OR')
 }
 
 async function refresh(workspace?: WorkspaceItem) {
diff --git a/ui/src/views/tool/ToolFormDrawer.vue b/ui/src/views/tool/ToolFormDrawer.vue
index 2f0a4cb6e..6bb4817e6 100644
--- a/ui/src/views/tool/ToolFormDrawer.vue
+++ b/ui/src/views/tool/ToolFormDrawer.vue
@@ -44,12 +44,10 @@
                 :size="32"
                 @click="openEditAvatar"
               >
-                <el-icon>
-                  <EditPen />
-                </el-icon>
+                <AppIcon iconName="app-edit"></AppIcon>
               </el-Avatar>
             </div>
-            <el-avatar v-else class="avatar-green  mr-12" shape="square" :size="32">
+            <el-avatar v-else class="avatar-green mr-12" shape="square" :size="32">
               <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
             </el-avatar>
             <el-input
@@ -131,15 +129,13 @@
             <span class="mr-4">
               <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
                 <el-button type="primary" text @click.stop="openAddInitDialog(row, $index)">
-                  <el-icon><EditPen /></el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </el-tooltip>
             </span>
             <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
               <el-button type="primary" text @click="deleteInitField($index)">
-                <el-icon>
-                  <Delete />
-                </el-icon>
+                <AppIcon iconName="app-delete"></AppIcon>
               </el-button>
             </el-tooltip>
           </template>
@@ -177,9 +173,7 @@
         <el-table-column prop="source" :label="$t('views.tool.form.source.label')">
           <template #default="{ row }">
             {{
-              row.source === 'custom'
-                ? $t('common.custom')
-                : $t('views.tool.form.source.reference')
+              row.source === 'custom' ? $t('common.custom') : $t('views.tool.form.source.reference')
             }}
           </template>
         </el-table-column>
@@ -188,15 +182,13 @@
             <span class="mr-4">
               <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
                 <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
-                  <el-icon><EditPen /></el-icon>
+                  <AppIcon iconName="app-edit"></AppIcon>
                 </el-button>
               </el-tooltip>
             </span>
             <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
               <el-button type="primary" text @click="deleteField($index)">
-                <el-icon>
-                  <Delete />
-                </el-icon>
+                <AppIcon iconName="app-delete"></AppIcon>
               </el-button>
             </el-tooltip>
           </template>
@@ -231,10 +223,15 @@
     <template #footer>
       <div>
         <el-button :loading="loading" @click="visible = false">{{ $t('common.cancel') }}</el-button>
-        <el-button :loading="loading" @click="openDebug" v-if="permissionPrecise.debug() ">{{
+        <el-button :loading="loading" @click="openDebug" v-if="permissionPrecise.debug()">{{
           $t('common.debug')
         }}</el-button>
-        <el-button type="primary" @click="submit(FormRef)" :loading="loading" v-if="isEdit ?  permissionPrecise.edit(form?.id as string) : permissionPrecise.create()" >
+        <el-button
+          type="primary"
+          @click="submit(FormRef)"
+          :loading="loading"
+          v-if="isEdit ? permissionPrecise.edit(form?.id as string) : permissionPrecise.create()"
+        >
           {{ isEdit ? $t('common.save') : $t('common.create') }}
         </el-button>
       </div>
@@ -284,8 +281,6 @@ const permissionPrecise = computed(() => {
   return permissionMap['tool'][apiType.value]
 })
 
-
-
 const emit = defineEmits(['refresh'])
 const FieldFormDialogRef = ref()
 const ToolDebugDrawerRef = ref()
@@ -433,7 +428,9 @@ const submit = async (formEl: FormInstance | undefined) => {
             emit('refresh', res.data)
             return user.profile()
           })
-          .then(() => {visible.value = false})
+          .then(() => {
+            visible.value = false
+          })
       } else {
         const obj = {
           folder_id: folder.currentFolder?.id,
@@ -446,7 +443,9 @@ const submit = async (formEl: FormInstance | undefined) => {
             emit('refresh')
             return user.profile()
           })
-          .then(() => {visible.value = false})
+          .then(() => {
+            visible.value = false
+          })
       }
     }
   })
diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index 86a734dd3..ebc7536a0 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -65,9 +65,7 @@
                 :on-change="(file: any, fileList: any) => importTool(file)"
                 class="import-button"
               >
-                <el-dropdown-item
-                  v-if="permissionPrecise.import()"
-                >
+                <el-dropdown-item v-if="permissionPrecise.import()">
                   <div class="flex align-center w-full">
                     <el-avatar shape="square" class="mt-4" :size="36" style="background: none">
                       <img src="@/assets/icon_import.svg" alt="" />
@@ -197,8 +195,7 @@
                   </div>
                 </template>
                 <template #mouseEnter>
-                  <div @click.stop v-if="!isShared &&
-                    MoreFieldPermission(item.id)">
+                  <div @click.stop v-if="!isShared && MoreFieldPermission(item.id)">
                     <el-switch
                       v-model="item.is_active"
                       :before-change="() => changeState(item)"
@@ -209,9 +206,7 @@
                     <el-divider direction="vertical" />
                     <el-dropdown trigger="click">
                       <el-button text @click.stop>
-                        <el-icon>
-                          <MoreFilled />
-                        </el-icon>
+                        <AppIcon iconName="app-more"></AppIcon>
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
@@ -219,18 +214,14 @@
                             v-if="item.template_id && permissionPrecise.edit(item.id)"
                             @click.stop="addInternalTool(item, true)"
                           >
-                            <el-icon>
-                              <EditPen />
-                            </el-icon>
+                            <AppIcon iconName="app-edit"></AppIcon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
                           <el-dropdown-item
                             v-if="!item.template_id && permissionPrecise.edit(item.id)"
                             @click.stop="openCreateDialog(item)"
                           >
-                            <el-icon>
-                              <EditPen />
-                            </el-icon>
+                            <AppIcon iconName="app-edit"></AppIcon>
                             {{ $t('common.edit') }}
                           </el-dropdown-item>
                           <el-dropdown-item
@@ -274,7 +265,7 @@
                             divided
                             @click.stop="deleteTool(item)"
                           >
-                            <el-icon><Delete /></el-icon>
+                            <AppIcon iconName="app-delete"></AppIcon>
                             {{ $t('common.delete') }}
                           </el-dropdown-item>
                         </el-dropdown-menu>
@@ -354,9 +345,12 @@ const permissionPrecise = computed(() => {
 })
 
 const MoreFieldPermission = (id: any) => {
-  return (permissionPrecise.value.edit(id) ||
-   permissionPrecise.value.export(id) ||
-  permissionPrecise.value.delete(id) || isSystemShare.value)
+  return (
+    permissionPrecise.value.edit(id) ||
+    permissionPrecise.value.export(id) ||
+    permissionPrecise.value.delete(id) ||
+    isSystemShare.value
+  )
 }
 
 const InitParamDrawerRef = ref()
diff --git a/ui/src/workflow/common/NodeContainer.vue b/ui/src/workflow/common/NodeContainer.vue
index 09b554141..15b4ae02a 100644
--- a/ui/src/workflow/common/NodeContainer.vue
+++ b/ui/src/workflow/common/NodeContainer.vue
@@ -52,7 +52,7 @@
             </el-dropdown>
             <el-dropdown v-if="showOperate(nodeModel.type)" :teleported="false" trigger="click">
               <el-button text>
-                <el-icon class="color-secondary"><MoreFilled /></el-icon>
+                <AppIcon iconName="app-more"></AppIcon>
               </el-button>
               <template #dropdown>
                 <el-dropdown-menu style="min-width: 80px">
diff --git a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
index f3ea9332f..c316dc76d 100644
--- a/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/ApiInputFieldTable.vue
@@ -41,15 +41,13 @@
         <span class="mr-4">
           <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
             <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
-              <el-icon><EditPen /></el-icon>
+              <AppIcon iconName="app-edit"></AppIcon>
             </el-button>
           </el-tooltip>
         </span>
         <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
           <el-button type="primary" text @click="deleteField($index)">
-            <el-icon>
-              <Delete />
-            </el-icon>
+            <AppIcon iconName="app-delete"></AppIcon>
           </el-button>
         </el-tooltip>
       </template>
@@ -132,7 +130,7 @@ function onDragHandle() {
       items.splice(evt.newIndex, 0, movedItem)
       inputFieldList.value = items
       props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
-    }
+    },
   })
 }
 
diff --git a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
index fa4a502a0..109277e3f 100644
--- a/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
+++ b/ui/src/workflow/nodes/base-node/component/UserInputFieldTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex-between mb-16">
-    <h5 class="break-all ellipsis lighter" style="max-width:80%" :title="inputFieldConfig.title">
+    <h5 class="break-all ellipsis lighter" style="max-width: 80%" :title="inputFieldConfig.title">
       {{ inputFieldConfig.title }}
     </h5>
     <div>
@@ -92,15 +92,13 @@
         <span class="mr-4">
           <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
             <el-button type="primary" text @click.stop="openAddDialog(row, $index)">
-              <el-icon><EditPen /></el-icon>
+              <AppIcon iconName="app-edit"></AppIcon>
             </el-button>
           </el-tooltip>
         </span>
         <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
           <el-button type="primary" text @click="deleteField($index)">
-            <el-icon>
-              <Delete />
-            </el-icon>
+            <AppIcon iconName="app-delete"></AppIcon>
           </el-button>
         </el-tooltip>
       </template>
@@ -209,7 +207,7 @@ function onDragHandle() {
       items.splice(evt.newIndex, 0, movedItem)
       inputFieldList.value = items
       props.nodeModel.graphModel.eventCenter.emit('refreshFieldList')
-    }
+    },
   })
 }
 
diff --git a/ui/src/workflow/nodes/condition-node/index.vue b/ui/src/workflow/nodes/condition-node/index.vue
index f9ebd0df2..ba7dc8c30 100644
--- a/ui/src/workflow/nodes/condition-node/index.vue
+++ b/ui/src/workflow/nodes/condition-node/index.vue
@@ -131,7 +131,7 @@
                       class="mt-4"
                       @click="deleteCondition(index, cIndex)"
                     >
-                      <el-icon><Delete /></el-icon>
+                      <AppIcon iconName="app-delete"></AppIcon>
                     </el-button>
                   </el-col>
                 </el-row>
diff --git a/ui/src/workflow/nodes/form-node/index.vue b/ui/src/workflow/nodes/form-node/index.vue
index bd57fbcbc..c38ed735e 100644
--- a/ui/src/workflow/nodes/form-node/index.vue
+++ b/ui/src/workflow/nodes/form-node/index.vue
@@ -17,7 +17,7 @@
           :rules="{
             required: true,
             message: $t('views.applicationWorkflow.nodes.formNode.formContent.requiredMessage'),
-            trigger: 'blur'
+            trigger: 'blur',
           }"
         >
           <template #label>
@@ -32,7 +32,7 @@
                 <template #content>
                   {{
                     $t('views.applicationWorkflow.nodes.formNode.formContent.tooltip', {
-                      form: '{ form }'
+                      form: '{ form }',
                     })
                   }}
                 </template>
@@ -123,15 +123,13 @@
                 <span class="mr-4">
                   <el-tooltip effect="dark" :content="$t('common.modify')" placement="top">
                     <el-button type="primary" text @click.stop="openEditFormCollect(row, $index)">
-                      <el-icon><EditPen /></el-icon>
+                      <AppIcon iconName="app-edit"></AppIcon>
                     </el-button>
                   </el-tooltip>
                 </span>
                 <el-tooltip effect="dark" :content="$t('common.delete')" placement="top">
                   <el-button type="primary" text @click="deleteField(row)">
-                    <el-icon>
-                      <Delete />
-                    </el-icon>
+                    <AppIcon iconName="app-delete"></AppIcon>
                   </el-button>
                 </el-tooltip>
               </template>
@@ -180,12 +178,12 @@ const sync_form_field_list = () => {
   const fields = [
     {
       label: t('views.applicationWorkflow.nodes.formNode.formAllContent'),
-      value: 'form_data'
+      value: 'form_data',
     },
     ...form_data.value.form_field_list.map((item: any) => ({
       value: item.field,
-      label: typeof item.label == 'string' ? item.label : item.label.label
-    }))
+      label: typeof item.label == 'string' ? item.label : item.label.label,
+    })),
   ]
   set(props.nodeModel.properties.config, 'fields', fields)
   props.nodeModel.clear_next_node_field(false)
@@ -201,7 +199,7 @@ const openEditFormCollect = (form_field_data: any, index: number) => {
 }
 const deleteField = (form_field_data: any) => {
   form_data.value.form_field_list = form_data.value.form_field_list.filter(
-    (field: any) => field.field !== form_field_data.field
+    (field: any) => field.field !== form_field_data.field,
   )
   sync_form_field_list()
 }
@@ -210,7 +208,7 @@ const form = ref<any>({
   form_content_format: `${t('views.applicationWorkflow.nodes.formNode.form_content_format1')}
 {{form}}
 ${t('views.applicationWorkflow.nodes.formNode.form_content_format2')}`,
-  form_field_list: []
+  form_field_list: [],
 })
 const form_data = computed({
   get: () => {
@@ -223,7 +221,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 const getDefaultValue = (row: any) => {
@@ -269,7 +267,7 @@ function onDragHandle() {
       items.splice(evt.newIndex, 0, movedItem)
       form_data.value.form_field_list = items
       sync_form_field_list()
-    }
+    },
   })
 }
 onMounted(() => {
diff --git a/ui/src/workflow/nodes/question-node/index.vue b/ui/src/workflow/nodes/question-node/index.vue
index 79322aeb8..e988210c6 100644
--- a/ui/src/workflow/nodes/question-node/index.vue
+++ b/ui/src/workflow/nodes/question-node/index.vue
@@ -80,7 +80,6 @@
               <el-tooltip effect="dark" placement="right" popper-class="max-w-200">
                 <template #content>{{ $t('views.application.form.prompt.tooltip') }}</template>
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
-                <el-icon><EditPen /></el-icon>
               </el-tooltip>
             </div>
           </template>
diff --git a/ui/src/workflow/nodes/reranker-node/index.vue b/ui/src/workflow/nodes/reranker-node/index.vue
index d1f7ba823..8ac74498b 100644
--- a/ui/src/workflow/nodes/reranker-node/index.vue
+++ b/ui/src/workflow/nodes/reranker-node/index.vue
@@ -65,7 +65,7 @@
             </el-col>
             <el-col :span="2">
               <el-button link type="info" @click="deleteCondition(index)">
-                <el-icon><Delete /></el-icon>
+                <AppIcon iconName="app-delete"></AppIcon>
               </el-button>
             </el-col>
           </el-row>
diff --git a/ui/src/workflow/nodes/tool-node/index.vue b/ui/src/workflow/nodes/tool-node/index.vue
index f168d508c..aa92a21e7 100644
--- a/ui/src/workflow/nodes/tool-node/index.vue
+++ b/ui/src/workflow/nodes/tool-node/index.vue
@@ -27,7 +27,7 @@
                   item.source === 'reference'
                     ? $t('views.tool.form.param.selectPlaceholder')
                     : $t('views.tool.form.param.inputPlaceholder'),
-                trigger: 'blur'
+                trigger: 'blur',
               }"
             >
               <template #label>
@@ -43,12 +43,10 @@
                   </div>
                   <div>
                     <el-button text @click.stop="openAddDialog(item, index)">
-                      <el-icon><EditPen /></el-icon>
+                      <AppIcon iconName="app-edit"></AppIcon>
                     </el-button>
                     <el-button text @click="deleteField(index)" style="margin-left: 4px !important">
-                      <el-icon>
-                        <Delete />
-                      </el-icon>
+                      <AppIcon iconName="app-delete"></AppIcon>
                     </el-button>
                   </div>
                 </div>
@@ -138,7 +136,7 @@ const nodeCascaderRef = ref()
 const form = {
   code: '',
   input_field_list: [],
-  is_result: false
+  is_result: false,
 }
 
 const currentIndex = ref<any>(null)
@@ -155,7 +153,7 @@ const chat_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 const ToolNodeFormRef = ref<FormInstance>()
@@ -188,7 +186,7 @@ function refreshFieldList(data: any) {
   const list = cloneDeep(props.nodeModel.properties.node_data.input_field_list)
   const obj = {
     ...data,
-    value: data.source === 'reference' ? [] : ''
+    value: data.source === 'reference' ? [] : '',
   }
   if (currentIndex.value !== null) {
     list.splice(currentIndex.value, 1, obj)
diff --git a/ui/src/workflow/nodes/variable-assign-node/index.vue b/ui/src/workflow/nodes/variable-assign-node/index.vue
index f3675208c..2cef1eb7c 100644
--- a/ui/src/workflow/nodes/variable-assign-node/index.vue
+++ b/ui/src/workflow/nodes/variable-assign-node/index.vue
@@ -23,9 +23,7 @@
                   @click="deleteVariable(index)"
                   v-if="form_data.variable_list.length > 1"
                 >
-                  <el-icon>
-                    <Delete />
-                  </el-icon>
+                  <AppIcon iconName="app-delete"></AppIcon>
                 </el-button>
               </div>
             </template>
@@ -49,10 +47,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>
 
@@ -72,7 +67,7 @@
               :rules="{
                 message: t('common.inputPlaceholder'),
                 trigger: 'blur',
-                required: true
+                required: true,
               }"
             >
               <el-input
@@ -89,7 +84,7 @@
               :rules="{
                 message: $t('common.inputPlaceholder'),
                 trigger: 'blur',
-                required: true
+                required: true,
               }"
             >
               <el-input-number v-model="item.value"></el-input-number>
@@ -102,7 +97,7 @@
                 {
                   message: $t('common.inputPlaceholder'),
                   trigger: 'blur',
-                  required: true
+                  required: true,
                 },
                 {
                   validator: (rule: any, value: any, callback: any) => {
@@ -113,8 +108,8 @@
                       callback(new Error('Invalid JSON format'))
                     }
                   },
-                  trigger: 'blur'
-                }
+                  trigger: 'blur',
+                },
               ]"
             >
               <CodemirrorEditor
@@ -122,7 +117,7 @@
                 v-model="item.value"
                 :style="{
                   height: '100px',
-                  width: '155px'
+                  width: '155px',
                 }"
                 @submitDialog="(val: string) => (form_data.variable_list[index].value = val)"
               />
@@ -180,9 +175,9 @@ const form = {
       reference: [],
       type: 'string',
       source: 'custom',
-      name: ''
-    }
-  ]
+      name: '',
+    },
+  ],
 }
 
 const form_data = computed({
@@ -196,7 +191,7 @@ const form_data = computed({
   },
   set: (value) => {
     set(props.nodeModel.properties, 'node_data', value)
-  }
+  },
 })
 
 function submitDialog(val: string) {
@@ -211,7 +206,7 @@ const validate = async () => {
   // console.log(replyNodeFormRef.value.validate())
   let ps = [
     replyNodeFormRef.value?.validate(),
-    ...nodeCascaderRef.value.map((item: any) => item.validate())
+    ...nodeCascaderRef.value.map((item: any) => item.validate()),
   ]
   if (nodeCascaderRef2.value) {
     ps = [...ps, ...nodeCascaderRef.value.map((item: any) => item.validate())]
@@ -230,7 +225,7 @@ function addVariable() {
     reference: [],
     type: 'string',
     source: 'custom',
-    name: ''
+    name: '',
   }
   list.push(obj)
   set(props.nodeModel.properties.node_data, 'variable_list', list)