From fb138dbde6df9a8605749cf5a9c538cbded4786b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 25 Dec 2025 17:56:42 +0800
Subject: [PATCH] perf: Fix the styling of the conversation section

---
 ui/src/components/execution-detail-card/index.vue    |  6 +++---
 ui/src/layout/layout-header/avatar/APIKeyDialog.vue  |  9 ++++++++-
 .../application-overview/component/APIKeyDialog.vue  | 12 ++++++++----
 ui/src/views/chat/component/HistoryPanel.vue         |  5 ++---
 .../base-node/component/FileUploadSettingDialog.vue  |  5 +++--
 ui/src/workflow/nodes/mcp-node/index.vue             |  2 ++
 6 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/ui/src/components/execution-detail-card/index.vue b/ui/src/components/execution-detail-card/index.vue
index 3e4658bfd..04b1e89ee 100644
--- a/ui/src/components/execution-detail-card/index.vue
+++ b/ui/src/components/execution-detail-card/index.vue
@@ -458,13 +458,13 @@
           >
             <div class="card-never border-r-6 mt-8" v-if="data.index != 0">
               <h5 class="p-8-12">{{ $t('chat.executionDetails.input') }}</h5>
-              <div class="p-8-12 border-t-dashed lighter pre-wrap">
+              <div class="p-8-12 border-t-dashed lighter break-all">
                 {{ data.params || '-' }}
               </div>
             </div>
             <div class="card-never border-r-6 mt-8">
               <h5 class="p-8-12">{{ $t('chat.executionDetails.output') }}</h5>
-              <div class="p-8-12 border-t-dashed lighter pre-wrap">
+              <div class="p-8-12 border-t-dashed lighter break-all">
                 {{ data.result || '-' }}
               </div>
             </div>
@@ -999,7 +999,7 @@
               <h5 class="p-8-12">
                 {{ $t('common.param.outputParam') }}
               </h5>
-              <div class="p-8-12 border-t-dashed lighter">
+              <div class="p-8-12 border-t-dashed lighter break-all">
                 <div v-for="(f, i) in data.result" :key="i" class="mb-8">
                   <span class="color-secondary">result:</span> {{ f }}
                 </div>
diff --git a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
index 637bcdeae..1a1cc3554 100644
--- a/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
+++ b/ui/src/layout/layout-header/avatar/APIKeyDialog.vue
@@ -5,6 +5,7 @@
     width="800"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    align-center
   >
     <el-card shadow="never" class="layout-bg mb-16">
       <el-text type="info" class="color-secondary">{{ $t('layout.apiServiceAddress') }}</el-text>
@@ -21,7 +22,13 @@
     <el-button type="primary" class="mb-16" @click="createApiKey">
       {{ $t('common.create') }}
     </el-button>
-    <el-table :data="apiKey" class="mb-16" :loading="loading">
+    <el-table
+      :data="apiKey"
+      class="mb-16"
+      :loading="loading"
+      style="min-height: 300px"
+      :max-height="420"
+    >
       <el-table-column prop="secret_key" label="API Key">
         <template #default="{ row }">
           <span class="vertical-middle lighter break-all">
diff --git a/ui/src/views/application-overview/component/APIKeyDialog.vue b/ui/src/views/application-overview/component/APIKeyDialog.vue
index 676366261..47f4c2e6b 100644
--- a/ui/src/views/application-overview/component/APIKeyDialog.vue
+++ b/ui/src/views/application-overview/component/APIKeyDialog.vue
@@ -10,7 +10,13 @@
     <el-button type="primary" class="mb-16" @click="createApiKey">
       {{ $t('common.create') }}
     </el-button>
-    <el-table :data="apiKey" class="mb-16" :loading="loading" height="420">
+    <el-table
+      :data="apiKey"
+      class="mb-16"
+      :loading="loading"
+      style="min-height: 300px"
+      :max-height="500"
+    >
       <el-table-column prop="secret_key" label="API Key">
         <template #default="{ row }">
           <span class="vertical-middle lighter break-all">
@@ -121,9 +127,7 @@ async function changeState(row: any) {
   const obj = {
     is_active: !row.is_active,
   }
-  const str = obj.is_active
-    ? t('common.status.enabled')
-    : t('common.status.disabled')
+  const str = obj.is_active ? t('common.status.enabled') : t('common.status.disabled')
   await loadSharedApi({ type: 'applicationKey', systemType: apiType.value })
     .putAPIKey(id as string, row.id, obj, loading)
     .then(() => {
diff --git a/ui/src/views/chat/component/HistoryPanel.vue b/ui/src/views/chat/component/HistoryPanel.vue
index 43fb783a0..4d695dcd1 100644
--- a/ui/src/views/chat/component/HistoryPanel.vue
+++ b/ui/src/views/chat/component/HistoryPanel.vue
@@ -116,7 +116,7 @@
         <template #title>{{ $t('chat.createChat') }}</template>
       </el-menu-item>
 
-      <el-sub-menu v-show="isPcCollapse" index="2" v-if="showHistory">
+      <el-sub-menu v-show="isPcCollapse" index="2" v-if="showHistory" :teleported="false">
         <template #title>
           <AppIcon iconName="app-history-outlined" />
         </template>
@@ -126,7 +126,7 @@
               <span>{{ $t('chat.history') }}</span>
               <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
                 <el-button text @click.stop="clearChat">
-                  <AppIcon iconName="app-delete"></AppIcon>
+                  <AppIcon iconName="app-delete" class="color-secondary" style="font-size: 16px;"></AppIcon>
                 </el-button>
               </el-tooltip>
             </div>
@@ -280,7 +280,6 @@ function refreshFieldTitle(chatId: string, abstract: string) {
 </style>
 <style lang="scss">
 .chat-pc-popper {
-  background: #ffffff !important;
   .el-menu {
     background: var(--el-color-primary-light-06) !important;
   }
diff --git a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
index e97ad34cd..849bb4fd5 100644
--- a/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
+++ b/ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue
@@ -11,8 +11,8 @@
     align-center
     class="scrollbar-dialog"
   >
-    <el-scrollbar max-height="550">
-      <div class="p-8">
+    <el-scrollbar>
+      <div class="p-8" style="max-height: calc(100vh - 273px)">
         <el-form
           label-position="top"
           ref="fieldFormRef"
@@ -238,6 +238,7 @@
         </el-form>
       </div>
     </el-scrollbar>
+
     <template #footer>
       <span class="dialog-footer">
         <el-button @click.prevent="close"> {{ $t('common.cancel') }} </el-button>
diff --git a/ui/src/workflow/nodes/mcp-node/index.vue b/ui/src/workflow/nodes/mcp-node/index.vue
index b028fb68e..553035e9c 100644
--- a/ui/src/workflow/nodes/mcp-node/index.vue
+++ b/ui/src/workflow/nodes/mcp-node/index.vue
@@ -44,6 +44,7 @@
             v-model="form_data.mcp_tool_id"
             filterable
             @change="mcpToolSelectChange"
+            @wheel="wheel"
           >
             <el-option
               v-for="mcpTool in mcpToolSelectOptions"
@@ -85,6 +86,7 @@
             @change="changeTool"
             filterable
             :teleported="false"
+            @wheel="wheel"
           >
             <el-option
               v-for="item in form_data.mcp_tools"