From 4437361eed762416037e646d92c8916f42c77a03 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 10 Jul 2025 22:33:39 +0800
Subject: [PATCH] feat: style

---
 apps/chat/template/embed.js                   |   4 +-
 ui/src/api/application/application-xpack.ts   |  48 --
 ui/src/api/application/application.ts         |  22 +
 .../component/answer-content/index.vue        |  13 +-
 .../ExecutionDetailContent.vue                |   4 +-
 .../ParagraphSourceContent.vue                |   2 +-
 .../knowledge-source-component/index.vue      |   9 +-
 .../component/prologue-content/index.vue      |   9 +-
 .../component/question-content/index.vue      |   4 +-
 ui/src/components/ai-chat/index.vue           |  12 +-
 ui/src/locales/lang/en-US/ai-chat.ts          |   1 +
 ui/src/locales/lang/en-US/common.ts           |   2 +-
 ui/src/locales/lang/zh-CN/ai-chat.ts          |   1 +
 ui/src/locales/lang/zh-CN/common.ts           |   2 +-
 ui/src/locales/lang/zh-Hant/ai-chat.ts        |   1 +
 ui/src/locales/lang/zh-Hant/common.ts         |   2 +-
 ui/src/stores/modules/application.ts          |  31 +-
 ui/src/stores/modules/chat-user.ts            |   9 -
 .../component/APIKeyDialog.vue                |   4 +-
 ui/src/views/application-overview/index.vue   |   4 +-
 .../XPackDisplaySettingDialog.vue             | 573 +++++++++---------
 .../component/NodeContent.vue                 |  51 +-
 ui/src/views/application-workflow/index.vue   |   8 +-
 ui/src/views/chat/embed/index.vue             |  25 +-
 ui/src/views/chat/mobile/index.vue            |  29 +-
 ui/src/views/chat/pc/index.vue                |  17 +-
 ui/src/views/document/index.vue               | 190 +++---
 .../paragraph/component/ParagraphCard.vue     |   4 +-
 .../system-chat-user/chat-user/index.vue      |   4 +-
 ui/src/views/system/user-manage/index.vue     |   4 +-
 30 files changed, 567 insertions(+), 522 deletions(-)
 delete mode 100644 ui/src/api/application/application-xpack.ts

diff --git a/apps/chat/template/embed.js b/apps/chat/template/embed.js
index a64e6379c..202b52db7 100644
--- a/apps/chat/template/embed.js
+++ b/apps/chat/template/embed.js
@@ -240,8 +240,8 @@ function initMaxkbStyle(root, maxkbId){
 
   }
   #maxkb-chat-container {
-        width: 450px;
-        height: 600px;
+        width: 460px;
+        height: 680px;
         display:none;
       }
   @media only screen and (max-width: 768px) {
diff --git a/ui/src/api/application/application-xpack.ts b/ui/src/api/application/application-xpack.ts
deleted file mode 100644
index 6209e6d73..000000000
--- a/ui/src/api/application/application-xpack.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Result } from '@/request/Result'
-import { get, put } from '@/request/index'
-import useStore from '@/stores'
-import { type Ref } from 'vue'
-
-const prefix: any = { _value: '/workspace/' }
-Object.defineProperty(prefix, 'value', {
-  get: function () {
-    const { user } = useStore()
-    return this._value + user.getWorkspaceId() + '/application'
-  },
-})
-
-/**
- * 替换社区版-获取AccessToken
- * @param 参数 application_id
- */
-const getAccessToken: (application_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
-  application_id,
-  loading,
-) => {
-  return get(`${prefix.value}/${application_id}/setting`, undefined, loading)
-}
-
-/**
- * 替换社区版-修改AccessToken
- * @param 参数 application_id
- * data {
- *  "show_source": boolean,
- *  "show_history": boolean,
- *  "draggable": boolean,
- *  "show_guide": boolean,
- *  "avatar": file,
- *  "float_icon": file,
- * }
- */
-const putAccessToken: (
-  application_id: string,
-  data: any,
-  loading?: Ref<boolean>,
-) => Promise<Result<any>> = (application_id, data, loading) => {
-  return put(`${prefix.value}/${application_id}/setting`, data, undefined, loading)
-}
-
-export default {
-  getAccessToken,
-  putAccessToken,
-}
diff --git a/ui/src/api/application/application.ts b/ui/src/api/application/application.ts
index df5491403..583f1c721 100644
--- a/ui/src/api/application/application.ts
+++ b/ui/src/api/application/application.ts
@@ -120,6 +120,27 @@ const putAccessToken: (
   return put(`${prefix.value}/${application_id}/access_token`, data, undefined, loading)
 }
 
+/**
+ * 替换社区版-修改AccessToken
+ * @param 参数 application_id
+ * data {
+ *  "show_source": boolean,
+ *  "show_history": boolean,
+ *  "draggable": boolean,
+ *  "show_guide": boolean,
+ *  "avatar": file,
+ *  "float_icon": file,
+ * }
+ */
+const putXpackAccessToken: (
+  application_id: string,
+  data: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<any>> = (application_id, data, loading) => {
+  return put(`${prefix.value}/${application_id}/setting`, data, undefined, loading)
+}
+
+
 /**
  * 导出应用
  */
@@ -331,6 +352,7 @@ export default {
   getApplicationDetail,
   getAccessToken,
   putAccessToken,
+  putXpackAccessToken,
   exportApplication,
   importApplication,
   getStatistics,
diff --git a/ui/src/components/ai-chat/component/answer-content/index.vue b/ui/src/components/ai-chat/component/answer-content/index.vue
index f544cfd29..ccaf584d4 100644
--- a/ui/src/components/ai-chat/component/answer-content/index.vue
+++ b/ui/src/components/ai-chat/component/answer-content/index.vue
@@ -42,6 +42,7 @@
           <!-- 知识来源 -->
           <KnowledgeSourceComponent
             :data="chatRecord"
+            :application="application"
             :type="application.type"
             :executionIsRightPanel="props.executionIsRightPanel"
             @open-execution-detail="emit('openExecutionDetail')"
@@ -90,8 +91,6 @@ const props = defineProps<{
   executionIsRightPanel?: boolean
 }>()
 
-const { user } = useStore()
-
 const emit = defineEmits([
   'update:chatRecord',
   'openExecutionDetail',
@@ -100,10 +99,10 @@ const emit = defineEmits([
 ])
 
 const showAvatar = computed(() => {
-  return user.isEE() || user.isPE() ? props.application.show_avatar : true
+  return props.application.show_avatar == undefined ? true : props.application.show_avatar
 })
 const showUserAvatar = computed(() => {
-  return user.isEE() || user.isPE() ? props.application.show_user_avatar : true
+  return props.application.show_user_avatar == undefined ? true : props.application.show_user_avatar
 })
 const chatMessage = (question: string, type: 'old' | 'new', other_params_data?: any) => {
   if (type === 'old') {
@@ -150,7 +149,11 @@ function showSource(row: any) {
   if (props.type === 'log') {
     return true
   } else if (row.write_ed && 500 !== row.status) {
-    if (props.type === 'debug-ai-chat' || props.application?.show_source) {
+    if (
+      props.type === 'debug-ai-chat' ||
+      props.application?.show_source ||
+      props.application?.show_exec
+    ) {
       return true
     }
   }
diff --git a/ui/src/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue b/ui/src/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue
index deff5f1cb..dd6750fde 100644
--- a/ui/src/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue
+++ b/ui/src/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue
@@ -193,7 +193,7 @@
                 >
                   <div class="card-never border-r-6" v-if="item.type !== WorkflowType.Application">
                     <h5 class="p-8-12">
-                      {{ $t('views.application.applicationForm.form.roleSettings.label') }}
+                      {{ $t('views.application.form.roleSettings.label') }}
                     </h5>
                     <div class="p-8-12 border-t-dashed lighter">
                       {{ item.system || '-' }}
@@ -503,7 +503,7 @@
                 <template v-if="item.type == WorkflowType.ImageUnderstandNode">
                   <div class="card-never border-r-6" v-if="item.type !== WorkflowType.Application">
                     <h5 class="p-8-12">
-                      {{ $t('views.application.applicationForm.form.roleSettings.label') }}
+                      {{ $t('views.application.form.roleSettings.label') }}
                     </h5>
                     <div class="p-8-12 border-t-dashed lighter">
                       {{ item.system || '-' }}
diff --git a/ui/src/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue b/ui/src/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue
index 568131bb5..982c3147e 100644
--- a/ui/src/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue
+++ b/ui/src/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue
@@ -6,7 +6,7 @@
           <ParagraphCard :data="item" :content="item.content" :index="index" />
         </template>
       </div>
-      <span v-else> - </span>
+      <span v-else> {{ $t('chat.KnowledgeSource.noSource') }}</span>
     </div>
   </el-scrollbar>
 </template>
diff --git a/ui/src/components/ai-chat/component/knowledge-source-component/index.vue b/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
index b454f9cd9..b176750b0 100644
--- a/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
+++ b/ui/src/components/ai-chat/component/knowledge-source-component/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chat-knowledge-source">
-    <div class="flex align-center mt-16">
+    <div class="flex align-center mt-16" v-if="application.show_source">
       <span class="mr-4 color-secondary">{{ $t('chat.KnowledgeSource.title') }}</span>
       <el-divider direction="vertical" />
       <el-button type="primary" class="mr-8" link @click="openParagraph(data)">
@@ -9,7 +9,7 @@
         {{ data.paragraph_list?.length || 0 }}</el-button
       >
     </div>
-    <div class="mt-8">
+    <div class="mt-8" v-if="application.show_source">
       <el-row :gutter="8" v-if="uniqueParagraphList?.length">
         <template v-for="(item, index) in uniqueParagraphList" :key="index">
           <el-col :span="12" class="mb-8">
@@ -44,6 +44,7 @@
     </div>
 
     <div
+      v-if="application.show_exec"
       class="execution-details border-t color-secondary flex-between mt-12"
       style="padding-top: 12px; padding-bottom: 8px"
     >
@@ -104,6 +105,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  application: {
+    type: Object,
+    default: () => {},
+  },
 })
 
 const emit = defineEmits(['openExecutionDetail', 'openParagraph', 'openParagraphDocument'])
diff --git a/ui/src/components/ai-chat/component/prologue-content/index.vue b/ui/src/components/ai-chat/component/prologue-content/index.vue
index a1f92b13e..1445f3e2c 100644
--- a/ui/src/components/ai-chat/component/prologue-content/index.vue
+++ b/ui/src/components/ai-chat/component/prologue-content/index.vue
@@ -9,7 +9,7 @@
       class="content"
       v-if="prologue"
       :style="{
-        'padding-right': showUserAvatar ? 'var(--padding-left)' : '0'
+        'padding-right': showUserAvatar ? 'var(--padding-left)' : '0',
       }"
     >
       <el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
@@ -35,13 +35,12 @@ const props = defineProps<{
   sendMessage: (question: string, other_params_data?: any, chat?: chatType) => void
 }>()
 
-const { user } = useStore()
 
 const showAvatar = computed(() => {
-  return (user.isEE() || user.isPE()) ? props.application.show_avatar : true
+  return props.application.show_avatar == undefined ? true : props.application.show_avatar
 })
 const showUserAvatar = computed(() => {
-  return user.isEE() || user.isPE() ? props.application.show_user_avatar : true
+  return props.application.show_user_avatar == undefined ? true : props.application.show_user_avatar
 })
 
 const toQuickQuestion = (match: string, offset: number, input: string) => {
@@ -54,7 +53,7 @@ const prologue = computed(() => {
       /<html_rander>[\d\D]*?<\/html_rander>/g,
       /<echarts_rander>[\d\D]*?<\/echarts_rander>/g,
       /<quick_question>[\d\D]*?<\/quick_question>/g,
-      /<form_rander>[\d\D]*?<\/form_rander>/g
+      /<form_rander>[\d\D]*?<\/form_rander>/g,
     ]
     let _temp = temp
     for (const index in tag_list) {
diff --git a/ui/src/components/ai-chat/component/question-content/index.vue b/ui/src/components/ai-chat/component/question-content/index.vue
index f7e026fac..e001b119e 100644
--- a/ui/src/components/ai-chat/component/question-content/index.vue
+++ b/ui/src/components/ai-chat/component/question-content/index.vue
@@ -106,10 +106,8 @@ const props = defineProps<{
   type: 'log' | 'ai-chat' | 'debug-ai-chat'
 }>()
 
-const { user } = useStore()
-
 const showAvatar = computed(() => {
-  return user.isEE() || user.isPE() ? props.application.show_user_avatar : true
+  return props.application.show_avatar == undefined ? true : props.application.show_avatar
 })
 
 const document_list = computed(() => {
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 30de096f2..b88cfd53b 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -86,7 +86,9 @@
             @click="toggleUserInput"
           >
             <el-icon :size="16" class="mr-4"><EditPen /></el-icon>
-            {{ $t('chat.userInput') }}
+            <span class="ellipsis">
+              {{ userInputTitle || $t('chat.userInput') }}
+            </span>
           </el-button>
         </template>
       </ChatInputOperate>
@@ -171,6 +173,12 @@ const isUserInput = computed(
     props.applicationDetails.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')[0]
       .properties.user_input_field_list.length > 0,
 )
+
+const userInputTitle = computed(
+  () =>
+    props.applicationDetails.work_flow?.nodes?.filter((v: any) => v.id === 'base-node')[0]
+      .properties?.user_input_config?.title,
+)
 const isAPIInput = computed(
   () =>
     props.type === 'debug-ai-chat' &&
@@ -543,7 +551,7 @@ function chatMessage(chat?: any, problem?: string, re_chat?: boolean, other_para
         if (props.chatId === 'new') {
           emit('refresh', chartOpenId.value)
         }
-        return (id || props.applicationDetails?.show_source) && getSourceDetail(chat)
+        return (id || props.applicationDetails?.show_source || props.applicationDetails?.show_exec) && getSourceDetail(chat)
       })
       .finally(() => {
         ChatManagement.close(chat.id)
diff --git a/ui/src/locales/lang/en-US/ai-chat.ts b/ui/src/locales/lang/en-US/ai-chat.ts
index 30c65d286..267433067 100644
--- a/ui/src/locales/lang/en-US/ai-chat.ts
+++ b/ui/src/locales/lang/en-US/ai-chat.ts
@@ -92,6 +92,7 @@ export default {
     referenceParagraph: 'Cited Segment',
     consume: 'Tokens',
     consumeTime: 'Runtime',
+    noSource: 'No source found',
   },
   paragraphSource: {
     title: 'Knowledge Quote',
diff --git a/ui/src/locales/lang/en-US/common.ts b/ui/src/locales/lang/en-US/common.ts
index 98d1ce80e..c013c2f86 100644
--- a/ui/src/locales/lang/en-US/common.ts
+++ b/ui/src/locales/lang/en-US/common.ts
@@ -93,7 +93,7 @@ export default {
   notFound: {
     title: '404',
     NoService: 'Currently unable to access services',
-    NoPermission: 'No permission to access',
+    NoPermission: 'The current user does not have permission to access, please contact the administrator',
     operate: 'Back to Home',
   },
   custom: 'Custom',
diff --git a/ui/src/locales/lang/zh-CN/ai-chat.ts b/ui/src/locales/lang/zh-CN/ai-chat.ts
index 3149503a3..5186b22ba 100644
--- a/ui/src/locales/lang/zh-CN/ai-chat.ts
+++ b/ui/src/locales/lang/zh-CN/ai-chat.ts
@@ -94,6 +94,7 @@ export default {
     referenceParagraph: '引用分段',
     consume: '消耗tokens',
     consumeTime: '耗时',
+    noSource: '没有检索到知识来源'
   },
   paragraphSource: {
     title: '知识库引用',
diff --git a/ui/src/locales/lang/zh-CN/common.ts b/ui/src/locales/lang/zh-CN/common.ts
index ff808005d..3e001f7a8 100644
--- a/ui/src/locales/lang/zh-CN/common.ts
+++ b/ui/src/locales/lang/zh-CN/common.ts
@@ -97,7 +97,7 @@ export default {
   notFound: {
     title: '404',
     NoService: '暂时无法访问服务',
-    NoPermission:'没有权限访问',
+    NoPermission:'当前用户暂无权限访问，请联系管理员',
     operate: '返回首页',
   },
   custom: '自定义',
diff --git a/ui/src/locales/lang/zh-Hant/ai-chat.ts b/ui/src/locales/lang/zh-Hant/ai-chat.ts
index 165bc54d0..3d750943a 100644
--- a/ui/src/locales/lang/zh-Hant/ai-chat.ts
+++ b/ui/src/locales/lang/zh-Hant/ai-chat.ts
@@ -90,6 +90,7 @@ export default {
     referenceParagraph: '引用段落',
     consume: '消耗tokens',
     consumeTime: '耗時',
+    noSource: '沒有检索到知識來源',
   },
   paragraphSource: {
     title: '知識庫引用',
diff --git a/ui/src/locales/lang/zh-Hant/common.ts b/ui/src/locales/lang/zh-Hant/common.ts
index 28398e093..7cb92b480 100644
--- a/ui/src/locales/lang/zh-Hant/common.ts
+++ b/ui/src/locales/lang/zh-Hant/common.ts
@@ -93,7 +93,7 @@ export default {
   notFound: {
     title: '404',
     NoService: '暫時無法訪問服務',
-    NoPermission: '沒有權限訪問',
+    NoPermission: '當前用戶暫無權限訪問，請聯系管理員',
     operate: '返回首頁',
   },
   custom: '自定義',
diff --git a/ui/src/stores/modules/application.ts b/ui/src/stores/modules/application.ts
index d62c69b28..e0a641398 100644
--- a/ui/src/stores/modules/application.ts
+++ b/ui/src/stores/modules/application.ts
@@ -1,14 +1,11 @@
 import { defineStore } from 'pinia'
 import applicationApi from '@/api/application/application'
-import applicationXpackApi from '@/api/application/application-xpack'
 import { type Ref } from 'vue'
-import useUserStore from './user'
 const useApplicationStore = defineStore('application', {
   state: () => ({
     location: `${window.location.origin}${window.MaxKB.chatPrefix}/`,
   }),
   actions: {
-
     async asyncGetApplicationDetail(id: string, loading?: Ref<boolean>) {
       return new Promise((resolve, reject) => {
         applicationApi
@@ -24,26 +21,14 @@ const useApplicationStore = defineStore('application', {
 
     async asyncGetAccessToken(id: string, loading?: Ref<boolean>) {
       return new Promise((resolve, reject) => {
-        const user = useUserStore()
-        // if (user.isEE() || user.isPE()) {
-        //   applicationXpackApi
-        //     .getAccessToken(id, loading)
-        //     .then((data) => {
-        //       resolve(data)
-        //     })
-        //     .catch((error) => {
-        //       reject(error)
-        //     })
-        // } else {
-          applicationApi
-            .getAccessToken(id, loading)
-            .then((data) => {
-              resolve(data)
-            })
-            .catch((error) => {
-              reject(error)
-            })
-        // }
+        applicationApi
+          .getAccessToken(id, loading)
+          .then((data) => {
+            resolve(data)
+          })
+          .catch((error) => {
+            reject(error)
+          })
       })
     },
 
diff --git a/ui/src/stores/modules/chat-user.ts b/ui/src/stores/modules/chat-user.ts
index b3d23f13c..e825595dc 100644
--- a/ui/src/stores/modules/chat-user.ts
+++ b/ui/src/stores/modules/chat-user.ts
@@ -44,15 +44,6 @@ const useChatUserStore = defineStore('chat-user', {
       return ChatAPI.applicationProfile().then((ok) => {
         this.application = ok.data
         localStorage.setItem(`${this.accessToken}-locale`, ok.data?.language || this.getLanguage())
-
-        if (this.application.custom_theme) {
-          this.application['custom_theme']['theme_color'] =
-            ok.data?.custom_theme?.theme_color || '#3370FF'
-        } else {
-          this.application.custom_theme = {
-            theme_color: ok.data?.custom_theme?.theme_color || '#3370FF',
-          }
-        }
       })
     },
     isAuthentication() {
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 958a6dab8..791ccd2c0 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -108,14 +108,14 @@ function deleteApiKey(row: any) {
     .catch(() => {})
 }
 
-function changeState(row: any) {
+async function changeState(row: any) {
   const obj = {
     is_active: !row.is_active
   }
   const str = obj.is_active
     ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
     : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
-  applicationKeyApi
+  await applicationKeyApi
     .putAPIKey(id as string, row.id, obj, loading)
     .then((res) => {
       MsgSuccess(str)
diff --git a/ui/src/views/application-overview/index.vue b/ui/src/views/application-overview/index.vue
index 8da2409a9..79eb0c5b3 100644
--- a/ui/src/views/application-overview/index.vue
+++ b/ui/src/views/application-overview/index.vue
@@ -376,12 +376,12 @@ function refreshAccessToken() {
     .catch(() => {})
 }
 
-function changeState(bool: boolean) {
+async function changeState(bool: boolean) {
   const obj = {
     is_active: !bool,
   }
   const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
-  updateAccessToken(obj, str)
+  await updateAccessToken(obj, str)
     .then(() => {
       return true
     })
diff --git a/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue b/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
index a4afca559..c2da21e2d 100644
--- a/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
+++ b/ui/src/views/application-overview/xpack-component/XPackDisplaySettingDialog.vue
@@ -26,7 +26,7 @@
       </div>
     </template>
 
-    <div class="flex">
+    <div class="flex" style="height: 570px">
       <div class="setting-preview border border-r-6 mr-16" style="min-width: 400px">
         <div
           class="setting-preview-container"
@@ -167,290 +167,303 @@
           />
         </div>
       </div>
-
-      <el-form ref="displayFormRef" :model="xpackForm">
-        <el-row class="w-full mb-8">
-          <el-col :span="12">
-            <h5 class="mb-8">
-              {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.customThemeColor') }}
-            </h5>
-            <div>
-              <el-color-picker v-model="xpackForm.custom_theme.theme_color" />
-              {{
-                !xpackForm.custom_theme.theme_color
-                  ? $t('views.applicationOverview.appInfo.SettingDisplayDialog.default')
-                  : ''
-              }}
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <h5 class="mb-8">
-              {{
-                $t('views.applicationOverview.appInfo.SettingDisplayDialog.headerTitleFontColor')
-              }}
-            </h5>
-            <el-color-picker v-model="xpackForm.custom_theme.header_font_color" />
-          </el-col>
-        </el-row>
-        <el-row class="w-full mb-8">
-          <h5 class="mb-8">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
-          </h5>
-          <el-select v-model="xpackForm.language" clearable>
-            <el-option
-              v-for="item in langList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-row>
-        <!-- 应用 LOGO -->
-        <el-card shadow="never" class="mb-8">
-          <div class="flex-between mb-8">
-            <span class="lighter">{{ $t('views.application.title') + ' LOGO' }}</span>
-            <span class="flex align-center">
-              <el-upload
-                class="ml-8"
-                ref="uploadRef"
-                action="#"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/jpeg, image/png, image/gif"
-                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'icon')"
-              >
-                <el-button size="small">
-                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-                </el-button>
-              </el-upload>
-            </span>
-          </div>
-          <el-text type="info" size="small">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
-          </el-text>
-        </el-card>
-        <!-- 聊天背景 -->
-        <el-card shadow="never" class="mb-8">
-          <div class="flex-between mb-8">
-            <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.chatBackground')
-            }}</span>
-            <span class="flex align-center">
-              <el-upload
-                class="ml-8"
-                ref="uploadRef"
-                action="#"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/jpeg, image/png, image/gif"
-                :on-change="
-                  (file: any, fileList: any) => onChange(file, fileList, 'chat_background')
-                "
-              >
-                <el-button size="small">
-                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-                </el-button>
-              </el-upload>
-            </span>
-          </div>
-          <el-text type="info" size="small">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.chatBackgroundMessage') }}
-          </el-text>
-        </el-card>
-        <!-- AI回复头像 -->
-        <el-card shadow="never" class="mb-8">
-          <div class="flex-between mb-8">
-            <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
-            }}</span>
-            <span class="flex align-center">
-              <el-checkbox v-model="xpackForm.show_avatar">{{
-                $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
-              }}</el-checkbox>
-              <el-upload
-                class="ml-8"
-                ref="uploadRef"
-                action="#"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/jpeg, image/png, image/gif"
-                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
-              >
-                <el-button size="small">
-                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-                </el-button>
-              </el-upload>
-            </span>
-          </div>
-          <el-text type="info" size="small">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
-          </el-text>
-        </el-card>
-        <!-- 提问头像 -->
-        <el-card shadow="never" class="mb-8">
-          <div class="flex-between mb-8">
-            <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
-            }}</span>
-            <span class="flex align-center">
-              <el-checkbox v-model="xpackForm.show_user_avatar">
-                {{
-                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
-                }}</el-checkbox
-              >
-              <el-upload
-                class="ml-8"
-                ref="uploadRef"
-                action="#"
-                :auto-upload="false"
-                :show-file-list="false"
-                accept="image/jpeg, image/png, image/gif"
-                :on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
-              >
-                <el-button size="small">
-                  {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-                </el-button>
-              </el-upload>
-            </span>
-          </div>
-          <el-text type="info" size="small"
-            >{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
-          </el-text>
-        </el-card>
-        <!-- 浮窗图标 -->
-        <el-card shadow="never" class="mb-8">
-          <div class="flex-between mb-8">
-            <span class="lighter">{{
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.floatIcon')
-            }}</span>
-            <el-upload
-              ref="uploadRef"
-              action="#"
-              :auto-upload="false"
-              :show-file-list="false"
-              accept="image/jpeg, image/png, image/gif"
-              :on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
-            >
-              <el-button size="small">
-                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
-              </el-button>
-            </el-upload>
-          </div>
-          <el-text type="info" size="small">
-            {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
-          </el-text>
-          <div class="border-t mt-8">
-            <div class="flex-between mb-8">
-              <span class="lighter">{{
-                $t('views.applicationOverview.appInfo.SettingDisplayDialog.iconDefaultPosition')
-              }}</span>
-              <el-checkbox
-                v-model="xpackForm.draggable"
-                :label="
-                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.draggablePosition')
-                "
-              />
-            </div>
-            <el-row :gutter="8" class="w-full mb-8">
+      <el-scrollbar>
+        <div class="p-8">
+          <el-form ref="displayFormRef" :model="xpackForm">
+            <el-row class="w-full mb-8">
               <el-col :span="12">
-                <div class="flex align-center">
-                  <el-select v-model="xpackForm.float_location.x.type" style="width: 80px">
-                    <el-option
-                      :label="
-                        $t(
-                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.left',
-                        )
-                      "
-                      value="left"
-                    />
-                    <el-option
-                      :label="
-                        $t(
-                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.right',
-                        )
-                      "
-                      value="right"
-                    />
-                  </el-select>
-                  <el-input-number
-                    v-model="xpackForm.float_location.x.value"
-                    :min="0"
-                    :step="1"
-                    :precision="0"
-                    :value-on-clear="0"
-                    step-strictly
-                    controls-position="right"
-                  />
-                  <span class="ml-4">px</span>
+                <h5 class="mb-8">
+                  {{
+                    $t('views.applicationOverview.appInfo.SettingDisplayDialog.customThemeColor')
+                  }}
+                </h5>
+                <div>
+                  <el-color-picker v-model="xpackForm.custom_theme.theme_color" />
+                  {{
+                    !xpackForm.custom_theme.theme_color
+                      ? $t('views.applicationOverview.appInfo.SettingDisplayDialog.default')
+                      : ''
+                  }}
                 </div>
               </el-col>
               <el-col :span="12">
-                <div class="flex align-center">
-                  <el-select v-model="xpackForm.float_location.y.type" style="width: 80px">
-                    <el-option
-                      :label="
-                        $t(
-                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.top',
-                        )
-                      "
-                      value="top"
-                    />
-                    <el-option
-                      :label="
-                        $t(
-                          'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.bottom',
-                        )
-                      "
-                      value="bottom"
-                    />
-                  </el-select>
-                  <el-input-number
-                    v-model="xpackForm.float_location.y.value"
-                    :min="0"
-                    :step="1"
-                    :precision="0"
-                    :value-on-clear="0"
-                    step-strictly
-                    controls-position="right"
-                  />
-                  <span class="ml-4">px</span>
-                </div>
+                <h5 class="mb-8">
+                  {{
+                    $t(
+                      'views.applicationOverview.appInfo.SettingDisplayDialog.headerTitleFontColor',
+                    )
+                  }}
+                </h5>
+                <el-color-picker v-model="xpackForm.custom_theme.header_font_color" />
               </el-col>
             </el-row>
-          </div>
-        </el-card>
+            <el-row class="w-full mb-8">
+              <h5 class="mb-8">
+                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
+              </h5>
+              <el-select v-model="xpackForm.language" clearable>
+                <el-option
+                  v-for="item in langList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-row>
+            <!-- 应用 LOGO -->
+            <el-card shadow="never" class="mb-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">{{ $t('views.application.title') + ' LOGO' }}</span>
+                <span class="flex align-center">
+                  <el-upload
+                    class="ml-8"
+                    ref="uploadRef"
+                    action="#"
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    accept="image/jpeg, image/png, image/gif"
+                    :on-change="(file: any, fileList: any) => onChange(file, fileList, 'icon')"
+                  >
+                    <el-button size="small">
+                      {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                    </el-button>
+                  </el-upload>
+                </span>
+              </div>
+              <el-text type="info" size="small">
+                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+              </el-text>
+            </el-card>
+            <!-- 聊天背景 -->
+            <el-card shadow="never" class="mb-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">{{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.chatBackground')
+                }}</span>
+                <span class="flex align-center">
+                  <el-upload
+                    class="ml-8"
+                    ref="uploadRef"
+                    action="#"
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    accept="image/jpeg, image/png, image/gif"
+                    :on-change="
+                      (file: any, fileList: any) => onChange(file, fileList, 'chat_background')
+                    "
+                  >
+                    <el-button size="small">
+                      {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                    </el-button>
+                  </el-upload>
+                </span>
+              </div>
+              <el-text type="info" size="small">
+                {{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.chatBackgroundMessage')
+                }}
+              </el-text>
+            </el-card>
+            <!-- AI回复头像 -->
+            <el-card shadow="never" class="mb-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">{{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
+                }}</span>
+                <span class="flex align-center">
+                  <el-checkbox v-model="xpackForm.show_avatar">{{
+                    $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+                  }}</el-checkbox>
+                  <el-upload
+                    class="ml-8"
+                    ref="uploadRef"
+                    action="#"
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    accept="image/jpeg, image/png, image/gif"
+                    :on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
+                  >
+                    <el-button size="small">
+                      {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                    </el-button>
+                  </el-upload>
+                </span>
+              </div>
+              <el-text type="info" size="small">
+                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+              </el-text>
+            </el-card>
+            <!-- 提问头像 -->
+            <el-card shadow="never" class="mb-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">{{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
+                }}</span>
+                <span class="flex align-center">
+                  <el-checkbox v-model="xpackForm.show_user_avatar">
+                    {{
+                      $t('views.applicationOverview.appInfo.SettingDisplayDialog.display')
+                    }}</el-checkbox
+                  >
+                  <el-upload
+                    class="ml-8"
+                    ref="uploadRef"
+                    action="#"
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    accept="image/jpeg, image/png, image/gif"
+                    :on-change="
+                      (file: any, fileList: any) => onChange(file, fileList, 'user_avatar')
+                    "
+                  >
+                    <el-button size="small">
+                      {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                    </el-button>
+                  </el-upload>
+                </span>
+              </div>
+              <el-text type="info" size="small"
+                >{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+              </el-text>
+            </el-card>
+            <!-- 浮窗图标 -->
+            <el-card shadow="never" class="mb-8">
+              <div class="flex-between mb-8">
+                <span class="lighter">{{
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.floatIcon')
+                }}</span>
+                <el-upload
+                  ref="uploadRef"
+                  action="#"
+                  :auto-upload="false"
+                  :show-file-list="false"
+                  accept="image/jpeg, image/png, image/gif"
+                  :on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
+                >
+                  <el-button size="small">
+                    {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
+                  </el-button>
+                </el-upload>
+              </div>
+              <el-text type="info" size="small">
+                {{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
+              </el-text>
+              <div class="border-t mt-8">
+                <div class="flex-between mb-8">
+                  <span class="lighter">{{
+                    $t('views.applicationOverview.appInfo.SettingDisplayDialog.iconDefaultPosition')
+                  }}</span>
+                  <el-checkbox
+                    v-model="xpackForm.draggable"
+                    :label="
+                      $t('views.applicationOverview.appInfo.SettingDisplayDialog.draggablePosition')
+                    "
+                  />
+                </div>
+                <el-row :gutter="8" class="w-full mb-8">
+                  <el-col :span="12">
+                    <div class="flex align-center">
+                      <el-select v-model="xpackForm.float_location.x.type" style="width: 80px">
+                        <el-option
+                          :label="
+                            $t(
+                              'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.left',
+                            )
+                          "
+                          value="left"
+                        />
+                        <el-option
+                          :label="
+                            $t(
+                              'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.right',
+                            )
+                          "
+                          value="right"
+                        />
+                      </el-select>
+                      <el-input-number
+                        v-model="xpackForm.float_location.x.value"
+                        :min="0"
+                        :step="1"
+                        :precision="0"
+                        :value-on-clear="0"
+                        step-strictly
+                        controls-position="right"
+                      />
+                      <span class="ml-4">px</span>
+                    </div>
+                  </el-col>
+                  <el-col :span="12">
+                    <div class="flex align-center">
+                      <el-select v-model="xpackForm.float_location.y.type" style="width: 80px">
+                        <el-option
+                          :label="
+                            $t(
+                              'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.top',
+                            )
+                          "
+                          value="top"
+                        />
+                        <el-option
+                          :label="
+                            $t(
+                              'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.bottom',
+                            )
+                          "
+                          value="bottom"
+                        />
+                      </el-select>
+                      <el-input-number
+                        v-model="xpackForm.float_location.y.value"
+                        :min="0"
+                        :step="1"
+                        :precision="0"
+                        :value-on-clear="0"
+                        step-strictly
+                        controls-position="right"
+                      />
+                      <span class="ml-4">px</span>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </el-card>
 
-        <el-space direction="vertical" alignment="start" :size="2">
-          <el-checkbox
-            v-model="xpackForm.show_source"
-            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')"
-          />
-          <el-checkbox
-            v-model="xpackForm.show_exec"
-            :label="
-              $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
-            "
-          />
-          <el-checkbox
-            v-model="xpackForm.show_guide"
-            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
-          />
-          <el-checkbox
-            v-model="xpackForm.disclaimer"
-            :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimer')"
-            @change="changeDisclaimer"
-          />
-          <span v-if="xpackForm.disclaimer"
-            ><el-tooltip :content="xpackForm.disclaimer_value" placement="top">
-              <el-input
-                v-model="xpackForm.disclaimer_value"
-                style="width: 422px; margin-bottom: 10px"
-                @change="changeValue"
-                :maxlength="128"
-              /> </el-tooltip
-          ></span>
-        </el-space>
-      </el-form>
+            <el-space direction="vertical" alignment="start" :size="2">
+              <el-checkbox
+                v-model="xpackForm.show_source"
+                :label="
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')
+                "
+              />
+              <el-checkbox
+                v-model="xpackForm.show_exec"
+                :label="
+                  $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
+                "
+              />
+              <el-checkbox
+                v-model="xpackForm.show_guide"
+                :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
+              />
+              <el-checkbox
+                v-model="xpackForm.disclaimer"
+                :label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimer')"
+                @change="changeDisclaimer"
+              />
+              <span v-if="xpackForm.disclaimer"
+                ><el-tooltip :content="xpackForm.disclaimer_value" placement="top">
+                  <el-input
+                    v-model="xpackForm.disclaimer_value"
+                    style="width: 422px; margin-bottom: 10px"
+                    @change="changeValue"
+                    :maxlength="128"
+                  /> </el-tooltip
+              ></span>
+            </el-space>
+          </el-form>
+        </div>
+      </el-scrollbar>
     </div>
 
     <template #footer>
@@ -468,7 +481,7 @@ import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance, FormRules, UploadFiles } from 'element-plus'
 import { isAppIcon } from '@/utils/common'
-import applicationXpackApi from '@/api/application/application-xpack'
+import applicationApi from '@/api/application/application'
 import { MsgSuccess, MsgError } from '@/utils/message'
 import { langList, t } from '@/locales'
 import useStore from '@/stores'
@@ -650,7 +663,7 @@ const submit = async (formEl: FormInstance | undefined) => {
           fd.append(item, xpackForm.value[item])
         }
       })
-      applicationXpackApi.putAccessToken(id as string, fd, loading).then((res) => {
+      applicationApi.putXpackAccessToken(id as string, fd, loading).then((res) => {
         emit('refresh')
         // @ts-ignore
         MsgSuccess(t('common.settingSuccess'))
diff --git a/ui/src/views/application-workflow/component/NodeContent.vue b/ui/src/views/application-workflow/component/NodeContent.vue
index f1144f9ce..7129214f9 100644
--- a/ui/src/views/application-workflow/component/NodeContent.vue
+++ b/ui/src/views/application-workflow/component/NodeContent.vue
@@ -2,40 +2,61 @@
   <div class="w-full">
     <div v-if="data" class="flex align-center">
       <AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
-      <span class="ml-8 ellipsis color-text-primary lighter" style="max-width: 110px" :title="data.name">
+      <span
+        class="ml-8 ellipsis color-text-primary lighter"
+        style="max-width: 110px"
+        :title="data.name"
+      >
         {{ data.name }}
       </span>
     </div>
 
     <transition name="el-fade-in-linear">
-      <div v-if="props.list?.length || (props.node?.expanded && toolList.length)"
-        class="list border-r-4 layout-bg flex-wrap" @click.stop>
+      <div
+        v-if="props.list?.length || (props.node?.expanded && toolList.length)"
+        class="list border-r-4 layout-bg flex-wrap"
+        @click.stop
+      >
         <el-popover v-for="item in toolList" :key="item.id" placement="right" :width="280">
           <template #reference>
-            <div class="list-item flex align-center border border-r-6 p-8-12 cursor" style="width: 39%"
-              @click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)">
+            <div
+              class="list-item flex align-center border border-r-6 p-8-12 cursor"
+              style="width: 39%"
+              @click.stop="emit('clickNodes', item)"
+              @mousedown.stop="emit('onmousedown', item)"
+            >
               <LogoIcon v-if="item.resource_type === 'application'" height="32px" />
-              <el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
+              <el-avatar
+                v-else-if="isAppIcon(item?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
                 <img :src="resetUrl(item?.icon)" alt="" />
               </el-avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="32">
                 <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
               </el-avatar>
-              <span class="ml-8 ellipsis">{{ item.name }}</span>
+              <span class="ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
             </div>
           </template>
 
           <template #default>
-            <div class="flex-between mb-8">
+            <div class="flex-between">
               <div class="flex align-center">
                 <LogoIcon v-if="item.resource_type === 'application'" height="32px" />
-                <el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
+                <el-avatar
+                  v-else-if="isAppIcon(item?.icon)"
+                  shape="square"
+                  :size="32"
+                  style="background: none"
+                >
                   <img :src="resetUrl(item?.icon)" alt="" />
                 </el-avatar>
                 <el-avatar v-else class="avatar-green" shape="square" :size="32">
                   <img src="@/assets/workflow/icon_tool.svg" style="width: 58%" alt="" />
                 </el-avatar>
-                <span class="font-medium ml-8">{{ item.name }}</span>
+                <span class="medium ml-8 ellipsis" :title="item.name">{{ item.name }}</span>
               </div>
               <div v-if="item.type" class="status-tag" style="margin-left: auto">
                 <el-tag type="warning" v-if="isWorkFlow(item.type)" style="height: 22px">
@@ -46,7 +67,7 @@
                 </el-tag>
               </div>
             </div>
-            <el-text type="info" size="small">{{ item.desc }}</el-text>
+            <el-text type="info" size="small" class="mt-4">{{ item.desc }}</el-text>
           </template>
         </el-popover>
       </div>
@@ -56,7 +77,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import {isAppIcon, resetUrl} from '@/utils/common'
+import { isAppIcon, resetUrl } from '@/utils/common'
 import { isWorkFlow } from '@/utils/application'
 
 const props = defineProps<{
@@ -66,9 +87,9 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  (e: 'clickNodes', item: any): void;
-  (e: 'onmousedown', item: any): void;
-}>();
+  (e: 'clickNodes', item: any): void
+  (e: 'onmousedown', item: any): void
+}>()
 
 const toolList = computed(() => props.list ?? props.data?.cardList ?? [])
 </script>
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 84941adfd..24bafd1de 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -3,7 +3,7 @@
     <div class="header border-b flex-between p-12-24 white-bg">
       <div class="flex align-center">
         <back-button @click="back"></back-button>
-        <h4>{{ detail?.name }}</h4>
+        <h4 class="ellipsis" style="max-width: 300px" :title="detail?.name">{{ detail?.name }}</h4>
         <div v-if="showHistory && disablePublic">
           <el-text type="info" class="ml-16 color-secondary"
             >{{ $t('views.applicationWorkflow.info.previewVersion') }}
@@ -102,7 +102,7 @@
                 <LogoIcon v-else height="32px" />
               </div>
 
-              <h4>
+              <h4 class="ellipsis" style="max-width: 270px" :title="detail?.name">
                 {{ detail?.name || $t('views.application.form.appName.label') }}
               </h4>
             </div>
@@ -598,8 +598,8 @@ onBeforeUnmount(() => {
   bottom: 16px;
   right: 16px;
   overflow: hidden;
-  width: 450px;
-  height: 600px;
+  width: 460px;
+  height: 680px;
   .workflow-debug-header {
     background: var(--app-header-bg-color);
     height: var(--app-header-height);
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index 9fc0323e5..050d425e7 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -4,12 +4,18 @@
     v-loading="loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
-      '--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
+      '--el-color-primary-light-9': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.1,
+      ),
+      '--el-color-primary-light-6': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.4,
+      ),
       backgroundImage: `url(${applicationDetail?.chat_background})`,
     }"
   >
-    <div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
+    <div class="chat-embed__header" :style="customStyle">
       <div class="flex-between">
         <div class="flex align-center">
           <AppIcon
@@ -33,9 +39,16 @@
             <LogoIcon v-else height="32px" />
           </div>
 
-          <h4>{{ applicationDetail?.name }}</h4>
+          <h4 class="ellipsis" style="max-width: 270px" :title="applicationDetail?.name">
+            {{ applicationDetail?.name }}
+          </h4>
         </div>
-        <el-button text @click="newChat" style="margin-right: 85px">
+        <el-button
+          text
+          @click="newChat"
+          style="margin-right: 85px"
+          :style="{ color: applicationDetail?.custom_theme?.header_font_color }"
+        >
           <AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
         </el-button>
       </div>
@@ -75,12 +88,10 @@
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
 import { isAppIcon } from '@/utils/common'
 import { hexToRgba } from '@/utils/theme'
-import useStore from '@/stores'
 import { t } from '@/locales'
 import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user } = useStore()
 const AiChatRef = ref()
 const loading = ref(false)
 const left_loading = ref(false)
diff --git a/ui/src/views/chat/mobile/index.vue b/ui/src/views/chat/mobile/index.vue
index 8ec097e99..0ad933db2 100644
--- a/ui/src/views/chat/mobile/index.vue
+++ b/ui/src/views/chat/mobile/index.vue
@@ -5,22 +5,24 @@
     :class="classObj"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
-      '--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
-
+      '--el-color-primary-light-9': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.1,
+      ),
+      '--el-color-primary-light-6': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.4,
+      ),
       backgroundImage: `url(${applicationDetail?.chat_background})`,
     }"
   >
-    <div class="chat-mobile__header" :style="(user.isEE() || user.isPE()) && customStyle">
+    <div class="chat-mobile__header" :style="customStyle">
       <div class="flex-between">
         <div class="flex align-center">
           <AppIcon
             iconName="app-mobile-open-history"
             style="font-size: 20px"
             class="ml-16 cursor"
-            :style="{
-              color: applicationDetail?.custom_theme?.header_font_color,
-            }"
             @click.prevent.stop="show = true"
           />
           <div class="mr-12 ml-16 flex">
@@ -35,9 +37,16 @@
             <LogoIcon v-else height="32px" />
           </div>
 
-          <h4>{{ applicationDetail?.name }}</h4>
+          <h4 class="ellipsis" style="max-width: 270px" :title="applicationDetail?.name">
+            {{ applicationDetail?.name }}
+          </h4>
         </div>
-        <el-button text @click="newChat" class="mr-16">
+        <el-button
+          text
+          @click="newChat"
+          class="mr-16"
+          :style="{ color: applicationDetail?.custom_theme?.header_font_color }"
+        >
           <AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
         </el-button>
       </div>
@@ -81,7 +90,7 @@ import { t } from '@/locales'
 import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user, common } = useStore()
+const { common } = useStore()
 
 const AiChatRef = ref()
 const loading = ref(false)
diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue
index e13c92b03..2640e7d39 100644
--- a/ui/src/views/chat/pc/index.vue
+++ b/ui/src/views/chat/pc/index.vue
@@ -5,8 +5,14 @@
     v-loading="loading || left_loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
-      '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
-      '--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
+      '--el-color-primary-light-9': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.1,
+      ),
+      '--el-color-primary-light-6': hexToRgba(
+        applicationDetail?.custom_theme?.theme_color || '#3370FF',
+        0.4,
+      ),
     }"
   >
     <div class="flex h-full w-full">
@@ -157,7 +163,7 @@
             collapsible
           >
             <div class="p-16 flex-between border-b">
-              <h4 class="medium">{{ rightPanelTitle }}</h4>
+              <h4 class="medium ellipsis" :title="rightPanelTitle">{{ rightPanelTitle }}</h4>
               <el-icon size="20" class="cursor" @click="closeExecutionDetail"><Close /></el-icon>
             </div>
             <div class="execution-detail-content" v-loading="rightPanelLoading">
@@ -509,15 +515,14 @@ function closeExecutionDetail() {
     .el-splitter-bar__dragger {
       display: none;
     }
-    .execution-detail-panel {
+    :deep(.execution-detail-panel) {
       background: #ffffff;
       height: 100%;
       overflow: hidden;
-      display: flex;
-      flex-direction: column;
       .execution-detail-content {
         flex: 1;
         overflow: hidden;
+        height: calc(100% - 63px);
         .execution-details {
           padding: 16px;
         }
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index 55c6b42ab..26ed4c8e6 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -374,46 +374,51 @@
                 </span>
                 <el-divider direction="vertical" />
                 <template v-if="knowledgeDetail?.type === 0">
-                  <span
-                    class="mr-4"
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.document.setting.cancelVectorization')"
+                    placement="top"
                     v-if="
                       ([State.STARTED, State.PENDING] as Array<string>).includes(
                         getTaskState(row.status, TaskType.EMBEDDING),
                       )
                     "
                   >
-                    <el-button
-                      type="primary"
-                      text
-                      @click.stop="cancelTask(row, TaskType.EMBEDDING)"
-                      :title="$t('views.document.setting.cancelVectorization')"
-                      v-if="permissionPrecise.doc_vector(id)"
-                    >
-                      <el-icon><Close /></el-icon>
-                    </el-button>
-                  </span>
-                  <span class="mr-4" v-else>
-                    <el-button
-                      type="primary"
-                      text
-                      @click.stop="refreshDocument(row)"
-                      :title="$t('views.knowledge.setting.vectorization')"
-                      v-if="permissionPrecise.doc_vector(id)"
-                    >
-                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
-                    </el-button>
-                  </span>
-                  <span class="mr-4">
-                    <el-button
-                      type="primary"
-                      text
-                      @click.stop="settingDoc(row)"
-                      :title="$t('common.setting')"
-                      v-if="permissionPrecise.doc_edit(id)"
-                    >
-                      <el-icon><Setting /></el-icon>
-                    </el-button>
-                  </span>
+                    <span class="mr-4">
+                      <el-button
+                        type="primary"
+                        text
+                        @click.stop="cancelTask(row, TaskType.EMBEDDING)"
+                        v-if="permissionPrecise.doc_vector(id)"
+                      >
+                        <el-icon><Close /></el-icon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.knowledge.setting.vectorization')"
+                    placement="top"
+                    v-else
+                  >
+                    <span class="mr-4" v-if="permissionPrecise.doc_vector(id)">
+                      <el-button type="primary" text @click.stop="refreshDocument(row)">
+                        <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('common.setting')"
+                    placement="top"
+                    v-if="permissionPrecise.doc_edit(id)"
+                  >
+                    <span class="mr-4">
+                      <el-button type="primary" text @click.stop="settingDoc(row)">
+                        <el-icon><Setting /></el-icon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
                   <span @click.stop>
                     <el-dropdown trigger="click">
                       <el-button text type="primary">
@@ -481,44 +486,50 @@
                   </span>
                 </template>
                 <template v-if="knowledgeDetail?.type === 1 || knowledgeDetail?.type === 2">
-                  <span class="mr-4">
-                    <el-button
-                      type="primary"
-                      text
-                      @click.stop="syncDocument(row)"
-                      :title="$t('views.knowledge.setting.sync')"
-                      v-if="permissionPrecise.sync(id)"
-                    >
-                      <el-icon><Refresh /></el-icon>
-                    </el-button>
-                  </span>
-                  <span class="mr-4">
-                    <el-button
-                      v-if="
-                        ([State.STARTED, State.PENDING] as Array<string>).includes(
-                          getTaskState(row.status, TaskType.EMBEDDING),
-                        ) && permissionPrecise.doc_vector(id)
-                      "
-                      type="primary"
-                      text
-                      @click.stop="cancelTask(row, TaskType.EMBEDDING)"
-                      :title="$t('views.document.setting.cancelVectorization')"
-                    >
-                      <el-icon><Close /></el-icon>
-                    </el-button>
-
-                    <el-button
-                      v-else
-                      type="primary"
-                      text
-                      @click.stop="refreshDocument(row)"
-                      :title="$t('views.knowledge.setting.vectorization')"
-                      v-if="permissionPrecise.vector(id)"
-                    >
-                      <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
-                    </el-button>
-                  </span>
-
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.knowledge.setting.sync')"
+                    placement="top"
+                    v-if="permissionPrecise.sync(id)"
+                  >
+                    <span class="mr-4">
+                      <el-button type="primary" text @click.stop="syncDocument(row)">
+                        <el-icon><Refresh /></el-icon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.document.setting.cancelVectorization')"
+                    placement="top"
+                    v-if="
+                      ([State.STARTED, State.PENDING] as Array<string>).includes(
+                        getTaskState(row.status, TaskType.EMBEDDING),
+                      ) && permissionPrecise.doc_vector(id)
+                    "
+                  >
+                    <span class="mr-4">
+                      <el-button
+                        type="primary"
+                        text
+                        @click.stop="cancelTask(row, TaskType.EMBEDDING)"
+                      >
+                        <el-icon><Close /></el-icon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
+                  <el-tooltip
+                    effect="dark"
+                    :content="$t('views.knowledge.setting.vectorization')"
+                    placement="top"
+                    v-else="permissionPrecise.vector(id)"
+                  >
+                    <span class="mr-4">
+                      <el-button type="primary" text @click.stop="refreshDocument(row)">
+                        <AppIcon iconName="app-document-refresh" style="font-size: 16px"></AppIcon>
+                      </el-button>
+                    </span>
+                  </el-tooltip>
                   <span @click.stop>
                     <el-dropdown trigger="click">
                       <el-button text type="primary">
@@ -526,13 +537,15 @@
                       </el-button>
                       <template #dropdown>
                         <el-dropdown-menu>
-                          <el-dropdown-item icon="Setting" @click="settingDoc(row)"
-                            v-if="permissionPrecise.doc_edit(id)"
-                          >{{
-                            $t('common.setting')
-                          }}</el-dropdown-item>
                           <el-dropdown-item
-                            v-if="permissionPrecise.doc_generate(id) &&
+                            icon="Setting"
+                            @click="settingDoc(row)"
+                            v-if="permissionPrecise.doc_edit(id)"
+                            >{{ $t('common.setting') }}</el-dropdown-item
+                          >
+                          <el-dropdown-item
+                            v-if="
+                              permissionPrecise.doc_generate(id) &&
                               ([State.STARTED, State.PENDING] as Array<string>).includes(
                                 getTaskState(row.status, TaskType.GENERATE_PROBLEM),
                               )
@@ -542,31 +555,38 @@
                             <el-icon><Connection /></el-icon>
                             {{ $t('views.document.setting.cancelGenerateQuestion') }}
                           </el-dropdown-item>
-                          <el-dropdown-item v-else @click="openGenerateDialog(row)"
+                          <el-dropdown-item
+                            v-else
+                            @click="openGenerateDialog(row)"
                             v-if="permissionPrecise.doc_generate(id)"
                           >
                             <el-icon><Connection /></el-icon>
                             {{ $t('views.document.generateQuestion.title') }}
                           </el-dropdown-item>
-                          <el-dropdown-item @click="openknowledgeDialog(row)"
+                          <el-dropdown-item
+                            @click="openknowledgeDialog(row)"
                             v-if="permissionPrecise.doc_migrate(id)"
                           >
                             <AppIcon iconName="app-migrate"></AppIcon>
                             {{ $t('views.document.setting.migration') }}
                           </el-dropdown-item>
-                          <el-dropdown-item @click="exportDocument(row)"
+                          <el-dropdown-item
+                            @click="exportDocument(row)"
                             v-if="permissionPrecise.doc_export(id)"
                           >
                             <AppIcon iconName="app-export"></AppIcon>
                             {{ $t('views.document.setting.export') }} Excel
                           </el-dropdown-item>
-                          <el-dropdown-item @click="exportDocumentZip(row)"
+                          <el-dropdown-item
+                            @click="exportDocumentZip(row)"
                             v-if="permissionPrecise.doc_export(id)"
                           >
                             <AppIcon iconName="app-export"></AppIcon>
                             {{ $t('views.document.setting.export') }} Zip
                           </el-dropdown-item>
-                          <el-dropdown-item icon="Delete" @click.stop="deleteDocument(row)"
+                          <el-dropdown-item
+                            icon="Delete"
+                            @click.stop="deleteDocument(row)"
                             v-if="permissionPrecise.doc_delete(id)"
                           >
                             {{ $t('common.delete') }}
@@ -1025,12 +1045,12 @@ function updateData(documentId: string, data: any, msg: string) {
     })
 }
 
-function changeState(row: any) {
+async function changeState(row: any) {
   const obj = {
     is_active: !row.is_active,
   }
   const str = !row.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
-  currentMouseId.value && updateData(row.id, obj, str)
+  await updateData(row.id, obj, str)
 }
 
 function editName(val: string, id: string) {
diff --git a/ui/src/views/paragraph/component/ParagraphCard.vue b/ui/src/views/paragraph/component/ParagraphCard.vue
index 1213e7b54..09f61c0bd 100644
--- a/ui/src/views/paragraph/component/ParagraphCard.vue
+++ b/ui/src/views/paragraph/component/ParagraphCard.vue
@@ -121,11 +121,11 @@ function cardLeave() {
   show.value = subHovered.value
 }
 
-function changeState(row: any) {
+async function changeState(row: any) {
   const obj = {
     is_active: !row.is_active,
   }
-  loadSharedApi({ type: 'paragraph', systemType: apiType.value })
+  await loadSharedApi({ type: 'paragraph', systemType: apiType.value })
     .putParagraph(id, documentId, row.id, obj, changeStateloading)
     .then(() => {
       emit('changeState', row.id)
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 435069dc3..7ccd8fea2 100644
--- a/ui/src/views/system-chat-user/chat-user/index.vue
+++ b/ui/src/views/system-chat-user/chat-user/index.vue
@@ -364,13 +364,13 @@ function handleSizeChange() {
   getList()
 }
 
-function changeState(row: ChatUserItem) {
+async function changeState(row: ChatUserItem) {
   const obj = {
     ...row,
     is_active: !row.is_active,
   }
   const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
-  loadPermissionApi('chatUser')
+  await loadPermissionApi('chatUser')
     .putUserManage(row.id, obj, loading)
     .then(() => {
       getList()
diff --git a/ui/src/views/system/user-manage/index.vue b/ui/src/views/system/user-manage/index.vue
index 10f12a600..20c12961d 100644
--- a/ui/src/views/system/user-manage/index.vue
+++ b/ui/src/views/system/user-manage/index.vue
@@ -284,12 +284,12 @@ function getList() {
   })
 }
 
-function changeState(row: any) {
+async function changeState(row: any) {
   const obj = {
     is_active: !row.is_active,
   }
   const str = obj.is_active ? t('common.status.enableSuccess') : t('common.status.disableSuccess')
-  userManageApi
+  await userManageApi
     .putUserManage(row.id, obj, loading)
     .then((res) => {
       getList()