diff --git a/ui/src/components/ai-chat/ExecutionDetailDialog.vue b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
index 98ec1e6fa..0ea0faabe 100644
--- a/ui/src/components/ai-chat/ExecutionDetailDialog.vue
+++ b/ui/src/components/ai-chat/ExecutionDetailDialog.vue
@@ -38,10 +38,10 @@
                   >{{ item?.message_tokens + item?.answer_tokens }} tokens</span
                 >
                 <span class="mr-16 color-secondary">{{ item?.run_time?.toFixed(2) || 0.0 }} s</span>
-                <el-icon class="success" :size="16" v-if="item.status === 200">
+                <el-icon class="color-success" :size="16" v-if="item.status === 200">
                   <CircleCheck />
                 </el-icon>
-                <el-icon class="danger" :size="16" v-else>
+                <el-icon class="color-danger" :size="16" v-else>
                   <CircleClose />
                 </el-icon>
               </div>
diff --git a/ui/src/components/model-select/index.vue b/ui/src/components/model-select/index.vue
index 7c68925db..664ca9930 100644
--- a/ui/src/components/model-select/index.vue
+++ b/ui/src/components/model-select/index.vue
@@ -42,7 +42,7 @@
               class="model-icon mr-8"
             ></span>
             <span>{{ item.name }}</span>
-            <span class="danger">{{ $t('common.unavailable') }}</span>
+            <span class="color-danger">{{ $t('common.unavailable') }}</span>
           </div>
           <el-icon class="check-icon" v-if="item.id === modelValue">
             <Check />
diff --git a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
index 62f393fbb..64dd08548 100644
--- a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
+++ b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
@@ -113,7 +113,7 @@ function deleteApiKey(row: any) {
     {
       confirmButtonText: t('common.confirm'),
       cancelButtonText: t('common.cancel'),
-      confirmButtonClass: 'danger'
+      confirmButtonClass: 'color-danger'
     }
   )
     .then(() => {
diff --git a/ui/src/layout/layout-header/avatar/AboutDialog.vue b/ui/src/layout/layout-header/avatar/AboutDialog.vue
index 3e59fde80..e5530c237 100644
--- a/ui/src/layout/layout-header/avatar/AboutDialog.vue
+++ b/ui/src/layout/layout-header/avatar/AboutDialog.vue
@@ -18,7 +18,7 @@
         <span class="label">{{ $t('layout.about.expiredTime') }}</span>
         <span
           >{{ licenseInfo?.expired || '-' }}
-          <span class="danger" v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"
+          <span class="color-danger" v-if="licenseInfo?.expired && fromNowDate(licenseInfo?.expired)"
             >（{{ fromNowDate(licenseInfo?.expired) }}）</span
           ></span
         >
diff --git a/ui/src/locales/lang/en-US/views/application.ts b/ui/src/locales/lang/en-US/views/application.ts
index 1e20c6adb..72010cb83 100644
--- a/ui/src/locales/lang/en-US/views/application.ts
+++ b/ui/src/locales/lang/en-US/views/application.ts
@@ -128,8 +128,8 @@ export default {
     addModel: 'Add Model',
   },
   dialog: {
-    addDataset: 'Add Related Knowledge',
-    addDatasetPlaceholder: 'The selected knowledge must use the same embedding model',
+    addKnowledge: 'Add Related Knowledge',
+    addKnowledgePlaceholder: 'The selected knowledge must use the same embedding model',
     selected: 'Selected',
     countDataset: 'Knowledge',
 
diff --git a/ui/src/locales/lang/zh-CN/views/application.ts b/ui/src/locales/lang/zh-CN/views/application.ts
index 6668f84b1..e2f33277f 100644
--- a/ui/src/locales/lang/zh-CN/views/application.ts
+++ b/ui/src/locales/lang/zh-CN/views/application.ts
@@ -119,8 +119,8 @@ export default {
   },
 
   dialog: {
-    addDataset: '添加关联知识库',
-    addDatasetPlaceholder: '所选知识库必须使用相同的 Embedding 模型',
+    addKnowledge: '添加关联知识库',
+    addKnowledgePlaceholder: '所选知识库必须使用相同的 Embedding 模型',
     selected: '已选',
     countDataset: '个知识库',
 
diff --git a/ui/src/locales/lang/zh-Hant/views/application.ts b/ui/src/locales/lang/zh-Hant/views/application.ts
index 57676fb02..792241a6a 100644
--- a/ui/src/locales/lang/zh-Hant/views/application.ts
+++ b/ui/src/locales/lang/zh-Hant/views/application.ts
@@ -119,8 +119,8 @@ export default {
   },
 
   dialog: {
-    addDataset: '新增關聯知識庫',
-    addDatasetPlaceholder: '所選知識庫必須使用相同的 Embedding 模型',
+    addKnowledge: '新增關聯知識庫',
+    addKnowledgePlaceholder: '所選知識庫必須使用相同的 Embedding 模型',
     selected: '已選',
     countDataset: '個知識庫',
 
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 935fceaae..e2260d2bf 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -373,18 +373,30 @@ h5 {
 }
 
 // 颜色
+
 .color-primary {
   color: var(--el-color-primary);
 }
+
+.color-danger {
+  color: var(--el-color-danger);
+}
+.color-warning {
+  color: var(--el-color-warning);
+}
+.color-success {
+  color: var(--el-color-success);
+}
+.color-info {
+  color: var(--el-color-info);
+}
 .color-text-primary {
   color: var(--el-text-color-primary);
 }
 .color-secondary {
   color: var(--app-text-color-secondary);
 }
-.color-success {
-  color: var(--el-color-success);
-}
+
 .color-input-placeholder {
   color: var(--app-input-color-placeholder);
 }
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index b683294a1..6d056a5b2 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -211,3 +211,32 @@
     font-size: 20px;
   }
 }
+
+// el-form
+
+.el-form {
+  --el-form-inline-content-width: 100%;
+}
+
+.el-form-item {
+  margin-bottom: 16px;
+  .el-form-item {
+    margin-bottom: 16px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
+}
+.el-form-item__label {
+  font-weight: 400;
+  width: 100%;
+}
+
+.el-form-item__error {
+  position: unset;
+  font-size: 14px;
+}
+
+.el-form--label-top .el-form-item .el-form-item__label {
+  padding-right: 0;
+}
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 950c862a6..958a6dab8 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -96,7 +96,7 @@ function deleteApiKey(row: any) {
     {
       confirmButtonText: t('common.confirm'),
       cancelButtonText: t('common.cancel'),
-      confirmButtonClass: 'danger'
+      confirmButtonClass: 'color-danger'
     }
   )
     .then(() => {
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index a8b1681b0..407370dd6 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -33,7 +33,7 @@
                     <div class="flex-between">
                       <span
                         >{{ $t('views.application.form.appName.label') }}
-                        <span class="danger">*</span></span
+                        <span class="color-danger">*</span></span
                       >
                     </div>
                   </template>
@@ -118,7 +118,7 @@
                       >
                         <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                       </el-tooltip>
-                      <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                      <span class="color-danger ml-4" v-if="applicationForm.model_id">*</span>
                     </div>
                   </template>
 
@@ -233,7 +233,7 @@
                       >
                         <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                       </el-tooltip>
-                      <span class="danger ml-4" v-if="applicationForm.model_id">*</span>
+                      <span class="color-danger ml-4" v-if="applicationForm.model_id">*</span>
                     </div>
                   </template>
 
@@ -290,7 +290,7 @@
                     <div class="flex-between">
                       <span class="mr-4">
                         {{ $t('views.application.form.voiceInput.label') }}
-                        <span class="danger" v-if="applicationForm.stt_model_enable">*</span>
+                        <span class="color-danger" v-if="applicationForm.stt_model_enable">*</span>
                       </span>
 
                       <div class="flex">
@@ -330,7 +330,7 @@
                       <span class="mr-4"
                         >{{ $t('views.application.form.voicePlay.label') }}
                         <span
-                          class="danger"
+                          class="color-danger"
                           v-if="
                             applicationForm.tts_type === 'TTS' && applicationForm.tts_model_enable
                           "
@@ -395,41 +395,6 @@
             {{ $t('views.application.appTest') }}
           </h4>
           <div class="dialog-bg">
-            <div class="flex align-center p-16 mb-8">
-              <div
-                class="edit-avatar mr-12"
-                @mouseenter="showEditIcon = true"
-                @mouseleave="showEditIcon = false"
-              >
-                <el-avatar
-                  v-if="isAppIcon(applicationForm?.icon)"
-                  shape="square"
-                  :size="32"
-                  style="background: none"
-                >
-                  <img :src="applicationForm?.icon" alt="" />
-                </el-avatar>
-                <el-avatar
-                  v-else-if="applicationForm?.name"
-                  :name="applicationForm?.name"
-                  pinyinColor
-                  shape="square"
-                  :size="32"
-                />
-                <el-avatar
-                  v-if="showEditIcon"
-                  shape="square"
-                  class="edit-mask"
-                  :size="32"
-                  @click="openEditAvatar"
-                >
-                  <el-icon><EditPen /></el-icon>
-                </el-avatar>
-              </div>
-              <h4>
-                {{ applicationForm?.name || $t('views.application.form.appName.label') }}
-              </h4>
-            </div>
             <div class="scrollbar-height">
               <AiChat :applicationDetails="applicationForm" :type="'debug-ai-chat'"></AiChat>
             </div>
@@ -768,7 +733,8 @@ onMounted(() => {
   }
 
   .scrollbar-height {
-    height: calc(var(--app-main-height) - 166px);
+    padding-top: 16px;
+    height: calc(var(--app-main-height) - 96px);
   }
 }
 
diff --git a/ui/src/views/application/component/AddKnowledgeDialog.vue b/ui/src/views/application/component/AddKnowledgeDialog.vue
index fe3e74614..44feb35b7 100644
--- a/ui/src/views/application/component/AddKnowledgeDialog.vue
+++ b/ui/src/views/application/component/AddKnowledgeDialog.vue
@@ -1,37 +1,38 @@
 <template>
   <el-dialog
-    :title="$t('views.application.form.dialog.addDataset')"
+    :title="$t('views.application.dialog.addKnowledge')"
     v-model="dialogVisible"
-    width="600"
+    width="1000"
     append-to-body
-    class="addDataset-dialog"
+    class="addKnowledge-dialog"
     align-center
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
     <template #header="{ titleId, titleClass }">
       <div class="flex-between mb-8">
-        <h4 :id="titleId" :class="titleClass">
-          {{ $t('views.application.form.dialog.addDataset') }}
-        </h4>
-        <div class="flex align-center mr-8">
-          <el-button link class="ml-16" @click="refresh">
-            <el-icon class="mr-4"><Refresh /></el-icon>{{ $t('common.refresh') }}
-          </el-button>
-          <el-divider direction="vertical" />
+        <div class="flex">
+          <h4 :id="titleId" :class="titleClass" class="mr-8">
+            {{ $t('views.application.dialog.addKnowledge') }}
+          </h4>
+          <el-text type="info">
+            {{ $t('views.application.dialog.addKnowledgePlaceholder') }}
+          </el-text>
+        </div>
+
+        <div class="flex align-center mr-8">
+          <el-input
+            v-model="searchValue"
+            :placeholder="$t('common.search')"
+            prefix-icon="Search"
+            class="w-240 mr-8"
+            clearable
+          />
+          <el-divider direction="vertical" />
+          <el-button link class="mr-16" @click="refresh">
+            <el-icon class="mr-4" :size="18"><Refresh /></el-icon>
+          </el-button>
         </div>
-      </div>
-      <div class="flex-between">
-        <el-text type="info" class="color-secondary">
-          {{ $t('views.application.form.dialog.addDatasetPlaceholder') }}
-        </el-text>
-        <el-input
-          v-model="searchValue"
-          :placeholder="$t('common.search')"
-          prefix-icon="Search"
-          class="w-240"
-          clearable
-        />
       </div>
     </template>
     <el-scrollbar>
@@ -49,8 +50,8 @@
       <div class="flex-between">
         <div class="flex">
           <el-text type="info" class="color-secondary mr-8" v-if="checkList.length > 0">
-            {{ $t('views.application.form.dialog.selected') }} {{ checkList.length }}
-            {{ $t('views.application.form.dialog.countDataset') }}
+            {{ $t('views.application.dialog.selected') }} {{ checkList.length }}
+            {{ $t('views.application.dialog.countDataset') }}
           </el-text>
           <el-button link type="primary" v-if="checkList.length > 0" @click="clearCheck">
             {{ $t('common.clear') }}
@@ -73,9 +74,9 @@ import { computed, ref, watch } from 'vue'
 const props = defineProps({
   data: {
     type: Array<any>,
-    default: () => []
+    default: () => [],
   },
-  loading: Boolean
+  loading: Boolean,
 })
 
 const emit = defineEmits(['addData', 'refresh'])
@@ -111,7 +112,7 @@ watch(searchValue, (val) => {
 function changeHandle() {
   if (checkList.value.length > 0) {
     currentEmbedding.value = props.data.filter(
-      (v) => v.id === checkList.value[0]
+      (v) => v.id === checkList.value[0],
     )[0].embedding_mode_id
   } else if (checkList.value.length === 0) {
     currentEmbedding.value = ''
@@ -127,7 +128,7 @@ const open = (checked: any) => {
   checkList.value = checked
   if (checkList.value.length > 0) {
     currentEmbedding.value = props.data.filter(
-      (v) => v.id === checkList.value[0]
+      (v) => v.id === checkList.value[0],
     )[0].embedding_mode_id
   }
 
@@ -145,20 +146,22 @@ const refresh = () => {
 defineExpose({ open })
 </script>
 <style lang="scss">
-.addDataset-dialog {
+.addKnowledge-dialog {
   padding: 0;
   .el-dialog__header {
-    padding: 24px 24px 8px 24px;
+    padding: 12px 20px 4px 24px;
+    border-bottom: 1px solid var(--el-border-color-light);
   }
   .el-dialog__body {
     padding: 8px !important;
   }
   .el-dialog__footer {
-    padding: 8px 24px 24px 24px;
+    padding: 0 24px 16px 24px;
   }
 
   .el-dialog__headerbtn {
-    top: 9px;
+    top: 6px;
+    right: 6px;
   }
   .max-height {
     max-height: calc(100vh - 260px);
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 620ab6eda..ca56e2184 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -375,7 +375,7 @@ function deleteApplication(row: any) {
     {
       confirmButtonText: t('common.confirm'),
       cancelButtonText: t('common.cancel'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
diff --git a/ui/src/views/chat-log/index.vue b/ui/src/views/chat-log/index.vue
index 05907470b..c09a9c11e 100644
--- a/ui/src/views/chat-log/index.vue
+++ b/ui/src/views/chat-log/index.vue
@@ -463,21 +463,6 @@ const handleSelectionChange = (val: any[]) => {
   multipleSelection.value = val
 }
 
-// function deleteLog(row: any) {
-//   MsgConfirm(`是否删除对话：${row.abstract} ?`, `删除后无法恢复，请谨慎操作。`, {
-//     confirmButtonText: t('common.delete'),
-//     confirmButtonClass: 'danger'
-//   })
-//     .then(() => {
-//       loading.value = true
-//       logApi.delChatLog(id as string, row.id, loading).then(() => {
-//         MsgSuccess(t('common.deleteSuccess'))
-//         getList()
-//       })
-//     })
-//     .catch(() => {})
-// }
-
 function getList() {
   let obj: any = {
     start_time: daterange.value.start_time,
diff --git a/ui/src/views/document-shared-system/component/Status.vue b/ui/src/views/document-shared-system/component/Status.vue
index 13bf0e2f4..6b78d66d0 100644
--- a/ui/src/views/document-shared-system/component/Status.vue
+++ b/ui/src/views/document-shared-system/component/Status.vue
@@ -16,23 +16,23 @@
     </template>
     <template #reference>
       <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
-        <el-icon class="success"><SuccessFilled /></el-icon>
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.FAILURE">
-        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.STARTED">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.PENDING">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.REVOKE">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
     </template>
diff --git a/ui/src/views/document-shared-system/component/StatusTable.vue b/ui/src/views/document-shared-system/component/StatusTable.vue
index 02c7b909a..3f9a9b4ad 100644
--- a/ui/src/views/document-shared-system/component/StatusTable.vue
+++ b/ui/src/views/document-shared-system/component/StatusTable.vue
@@ -3,23 +3,23 @@
     <span> {{ taskTypeMap[status.type] }}：</span>
     <span>
       <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED">
-        <el-icon class="success"><SuccessFilled /></el-icon>
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.FAILURE">
-        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.STARTED">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.PENDING">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.REVOKE">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
     </span>
diff --git a/ui/src/views/document-shared-system/upload/ResultSuccess.vue b/ui/src/views/document-shared-system/upload/ResultSuccess.vue
index 73de7d359..d021318c2 100644
--- a/ui/src/views/document-shared-system/upload/ResultSuccess.vue
+++ b/ui/src/views/document-shared-system/upload/ResultSuccess.vue
@@ -41,15 +41,15 @@
             </div>
           </div>
           <div>
-            <el-text type="info" class="mr-16"
+            <el-text type="color-info" class="mr-16"
               >{{ item && item?.paragraph_count }}
               {{ $t('views.knowledge.ResultSuccess.paragraph_count') }}</el-text
             >
             <el-text v-if="item.status === '1'">
-              <el-icon class="success"><SuccessFilled /></el-icon>
+              <el-icon class="color-success"><SuccessFilled /></el-icon>
             </el-text>
             <el-text v-else-if="item.status === '2'">
-              <el-icon class="danger"><CircleCloseFilled /></el-icon>
+              <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
             </el-text>
             <el-text v-else-if="item.status === '0'">
               <el-icon class="is-loading primary"><Loading /></el-icon> {{ $t('views.knowledge.ResultSuccess.loading') }}...
diff --git a/ui/src/views/document/component/Status.vue b/ui/src/views/document/component/Status.vue
index bb7acc3da..db9bc177b 100644
--- a/ui/src/views/document/component/Status.vue
+++ b/ui/src/views/document/component/Status.vue
@@ -16,23 +16,23 @@
     </template>
     <template #reference>
       <el-text v-if="aggStatus?.value === State.SUCCESS || aggStatus?.value === State.REVOKED">
-        <el-icon class="success"><SuccessFilled /></el-icon>
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.FAILURE">
-        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.STARTED">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.PENDING">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
       <el-text v-else-if="aggStatus?.value === State.REVOKE">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[aggStatus.value](aggStatus.key) }}
       </el-text>
     </template>
diff --git a/ui/src/views/document/component/StatusTable.vue b/ui/src/views/document/component/StatusTable.vue
index 02c7b909a..3f9a9b4ad 100644
--- a/ui/src/views/document/component/StatusTable.vue
+++ b/ui/src/views/document/component/StatusTable.vue
@@ -3,23 +3,23 @@
     <span> {{ taskTypeMap[status.type] }}：</span>
     <span>
       <el-text v-if="status.state === State.SUCCESS || status.state === State.REVOKED">
-        <el-icon class="success"><SuccessFilled /></el-icon>
+        <el-icon class="color-success"><SuccessFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.FAILURE">
-        <el-icon class="danger"><CircleCloseFilled /></el-icon>
+        <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.STARTED">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.PENDING">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
       <el-text v-else-if="status.state === State.REVOKE">
-        <el-icon class="is-loading primary"><Loading /></el-icon>
+        <el-icon class="is-loading color-primary"><Loading /></el-icon>
         {{ stateMap[status.state](status.type) }}
       </el-text>
     </span>
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 29cb8c451..a88c59930 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -723,7 +723,7 @@ function syncDocument(row: any) {
 function syncLarkDocument(row: any) {
   MsgConfirm(t('views.document.sync.confirmTitle'), t('views.document.sync.confirmMessage1'), {
     confirmButtonText: t('views.document.sync.label'),
-    confirmButtonClass: 'danger',
+    confirmButtonClass: 'color-danger',
   })
     .then(() => {
       documentApi.putLarkDocumentSync(id, row.id).then(() => {
@@ -737,7 +737,7 @@ function syncWebDocument(row: any) {
   if (row.meta?.source_url) {
     MsgConfirm(t('views.document.sync.confirmTitle'), t('views.document.sync.confirmMessage1'), {
       confirmButtonText: t('views.document.sync.label'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     })
       .then(() => {
         documentApi.putDocumentSync(row.dataset_id, row.id).then(() => {
@@ -821,7 +821,7 @@ function deleteMulDocument() {
     t('views.document.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
@@ -857,7 +857,7 @@ function deleteDocument(row: any) {
     `${t('views.document.delete.confirmMessage1')} ${row.paragraph_count} ${t('views.document.delete.confirmMessage2')}`,
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
diff --git a/ui/src/views/document/upload/ResultSuccess.vue b/ui/src/views/document/upload/ResultSuccess.vue
index 73de7d359..a9fcb50c5 100644
--- a/ui/src/views/document/upload/ResultSuccess.vue
+++ b/ui/src/views/document/upload/ResultSuccess.vue
@@ -1,6 +1,6 @@
 <template>
   <el-scrollbar>
-    <el-result icon="success" :title="`🎉 ${$t('views.knowledge.ResultSuccess.title')} 🎉`">
+    <el-result icon="color-success" :title="`🎉 ${$t('views.knowledge.ResultSuccess.title')} 🎉`">
       <template #sub-title>
         <div class="mt-8">
           <span class="bold">{{ data?.document_list.length || 0 }}</span>
@@ -46,10 +46,10 @@
               {{ $t('views.knowledge.ResultSuccess.paragraph_count') }}</el-text
             >
             <el-text v-if="item.status === '1'">
-              <el-icon class="success"><SuccessFilled /></el-icon>
+              <el-icon class="color-success"><SuccessFilled /></el-icon>
             </el-text>
             <el-text v-else-if="item.status === '2'">
-              <el-icon class="danger"><CircleCloseFilled /></el-icon>
+              <el-icon class="color-danger"><CircleCloseFilled /></el-icon>
             </el-text>
             <el-text v-else-if="item.status === '0'">
               <el-icon class="is-loading primary"><Loading /></el-icon> {{ $t('views.knowledge.ResultSuccess.loading') }}...
diff --git a/ui/src/views/knowledge-shared-system/SharedWorkspace.vue b/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
index 8ac506b4c..c20471065 100644
--- a/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
+++ b/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
@@ -416,7 +416,7 @@ function deleteKnowledge(row: any) {
     `${t('views.knowledge.delete.confirmMessage1')} ${row.application_mapping_count} ${t('views.knowledge.delete.confirmMessage2')}`,
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
diff --git a/ui/src/views/knowledge-shared-system/index.vue b/ui/src/views/knowledge-shared-system/index.vue
index bbbedc3fd..2d9937c88 100644
--- a/ui/src/views/knowledge-shared-system/index.vue
+++ b/ui/src/views/knowledge-shared-system/index.vue
@@ -425,7 +425,7 @@ function deleteKnowledge(row: any) {
     `${t('views.knowledge.delete.confirmMessage1')} ${row.application_mapping_count} ${t('views.knowledge.delete.confirmMessage2')}`,
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
diff --git a/ui/src/views/knowledge/component/ParagraphList.vue b/ui/src/views/knowledge/component/ParagraphList.vue
index eed592425..ad92f553b 100644
--- a/ui/src/views/knowledge/component/ParagraphList.vue
+++ b/ui/src/views/knowledge/component/ParagraphList.vue
@@ -95,7 +95,7 @@ const deleteHandle = (item: any, cIndex: number) => {
     t('views.paragraph.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger'
+      confirmButtonClass: 'color-danger'
     }
   )
     .then(() => {
diff --git a/ui/src/views/knowledge/component/SyncWebDialog.vue b/ui/src/views/knowledge/component/SyncWebDialog.vue
index 2701cfd73..8f4952450 100644
--- a/ui/src/views/knowledge/component/SyncWebDialog.vue
+++ b/ui/src/views/knowledge/component/SyncWebDialog.vue
@@ -23,7 +23,7 @@
         </el-radio>
       </el-card>
     </el-radio-group>
-    <p class="danger">{{ $t('views.knowledge.syncWeb.tip') }}</p>
+    <p class="color-danger">{{ $t('views.knowledge.syncWeb.tip') }}</p>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="dialogVisible = false"> {{ $t('common.cancel') }} </el-button>
diff --git a/ui/src/views/knowledge/index.vue b/ui/src/views/knowledge/index.vue
index 3c12b1885..23e8170af 100644
--- a/ui/src/views/knowledge/index.vue
+++ b/ui/src/views/knowledge/index.vue
@@ -415,7 +415,7 @@ function deleteKnowledge(row: any) {
     `${t('views.knowledge.delete.confirmMessage1')} ${row.application_mapping_count} ${t('views.knowledge.delete.confirmMessage2')}`,
     {
       confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
+      confirmButtonClass: 'color-danger',
     },
   )
     .then(() => {
diff --git a/ui/src/workflow/nodes/search-dataset-node/index.vue b/ui/src/workflow/nodes/search-dataset-node/index.vue
index 5cb828c55..29a7e5b0c 100644
--- a/ui/src/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/workflow/nodes/search-dataset-node/index.vue
@@ -103,7 +103,7 @@
     <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
     <AddDatasetDialog
       ref="AddDatasetDialogRef"
-      @addData="addDataset"
+      @addData="addKnowledge"
       :data="datasetList"
       @refresh="refresh"
       :loading="datasetLoading"
@@ -173,7 +173,7 @@ function removeDataset(id: any) {
   set(props.nodeModel.properties.node_data, 'dataset_id_list', list)
 }
 
-function addDataset(val: Array<string>) {
+function addKnowledge(val: Array<string>) {
   set(props.nodeModel.properties.node_data, 'dataset_id_list', val)
 }