From c848333c9cbc2dc45b1041c55c1831a79b72e055 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 2 Nov 2026 14:57:14 +0800
Subject: [PATCH] fix: drawer style

---
 .../resource-authorization-drawer/index.vue   |   4 +-
 ui/src/styles/element-plus.scss               |   7 +
 .../components/ApplicationRankingDrawer.vue   | 120 +++++++++--------
 .../home/components/ranking/RankingDrawer.vue |   6 +-
 .../library/tags/AssociatedDocumentDrawer.vue | 122 +++++++++---------
 .../workflow/tool/debug/ResultDrawer.vue      |   5 +-
 6 files changed, 133 insertions(+), 131 deletions(-)

diff --git a/ui/src/components/business/resource-authorization-drawer/index.vue b/ui/src/components/business/resource-authorization-drawer/index.vue
index 2c78662a6f8..148f35aeea0 100644
--- a/ui/src/components/business/resource-authorization-drawer/index.vue
+++ b/ui/src/components/business/resource-authorization-drawer/index.vue
@@ -153,12 +153,12 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDrawer v-model="drawerVisible" title="资源授权" :size="920" @closed="handleClosed">
+  <MkDrawer v-model="drawerVisible" title="资源授权" class="mk-drawer-with-tabs" contentClass="pt-0" :size="920" @closed="handleClosed">
     <el-tabs v-model="targetType" :before-leave="() => !submitting">
       <el-tab-pane label="按用户组" name="user-group" />
       <el-tab-pane label="按用户" name="user" />
     </el-tabs>
-    <div class="mt-4">
+    <div class="mt-6">
       <UserGroupAuthorization
         ref="userGroupAuthorizationRef"
         v-if="targetType === 'user-group' && targetId && workspaceId"
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index df5126b34fd..1db10057f31 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -535,6 +535,7 @@
     margin: 0;
     padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5) calc(var(--spacing) * 4) calc(var(--spacing) * 6);
   }
+
   &__title {
     font-weight: 500;
   }
@@ -559,6 +560,12 @@
   &.btt {
     height: calc(100% - 60px) !important;
   }
+  // 带有tabs的drawer，header不显示border-bottom
+  &.mk-drawer-with-tabs {
+    .el-drawer__header {
+      border-bottom: none;
+    }
+  }
 }
 /* dropdown */
 .el-dropdown {
diff --git a/ui/src/views/application-detail/overview/components/ApplicationRankingDrawer.vue b/ui/src/views/application-detail/overview/components/ApplicationRankingDrawer.vue
index 0fc02bda2fe..a357b233e9b 100644
--- a/ui/src/views/application-detail/overview/components/ApplicationRankingDrawer.vue
+++ b/ui/src/views/application-detail/overview/components/ApplicationRankingDrawer.vue
@@ -93,68 +93,66 @@ onMounted(loadRanking)
 </script>
 
 <template>
-  <MkDrawer v-model="visible" title="排行榜详情" size="1000" @closed="emit('closed')">
-    <div :inert="loading">
-      <el-tabs v-model="activeKind" @tab-change="handleTabChange">
-        <el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
-        <el-tab-pane name="questions" label="对话次数 · Top 用户" />
-      </el-tabs>
-      <div class="my-4 flex-between">
-        <div class="flex gap-3">
-          <MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
-          <MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
-        </div>
-        <!-- 导出当前筛选下的完整用户排行 -->
-        <el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
-          <MkIcon name="icon_export_outlined" />
-          <span>导出</span>
-        </el-button>
+  <MkDrawer v-model="visible" title="排行榜详情" class="mk-drawer-with-tabs" contentClass="pt-0" size="1000" @closed="emit('closed')">
+    <el-tabs v-model="activeKind" @tab-change="handleTabChange">
+      <el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
+      <el-tab-pane name="questions" label="对话次数 · Top 用户" />
+    </el-tabs>
+    <div class="mt-6 mb-4 flex-between">
+      <div class="flex gap-3">
+        <MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
+        <MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
       </div>
-      <MkTable
-        v-loading="loading"
-        v-model:pagination-config="pagination"
-        :data="records"
-        row-key="chat_user_id"
-        @current-change="loadRanking"
-        @size-change="loadRanking"
-      >
-        <el-table-column label="排名" width="60">
-          <template #default="{ $index }">
-            <span
-              class="mk-rank"
-              :class="
-                (pagination.currentPage - 1) * pagination.pageSize + $index < 3
-                  ? `mk-rank-${(pagination.currentPage - 1) * pagination.pageSize + $index + 1}`
-                  : 'text-N600'
-              "
-            >
-              {{ (pagination.currentPage - 1) * pagination.pageSize + $index + 1 }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="用户" min-width="140" show-overflow-tooltip>
-          <template #default="{ row }">{{ row.asker?.username || '-' }}</template>
-        </el-table-column>
-        <el-table-column :label="activeKind === 'userTokens' ? 'Tokens 消耗' : '对话次数'" min-width="125">
-          <template #default="{ row }">
-            {{ formatRankingValue(row) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="占比" min-width="150">
-          <template #default="{ row }">
-            <el-progress v-if="aggregateTotal != null && getRankingValue(row) != null" :percentage="getRankingRatio(row)" />
-            <span v-else>—</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="activeKind === 'userTokens' ? '对话次数' : 'Tokens 消耗'" min-width="125">
-          <template #default="{ row }">
-            {{ formatRankingValue(row, activeKind === 'userTokens' ? 'questions' : 'userTokens') }}
-          </template>
-        </el-table-column>
-        <el-table-column label="均 Tokens/次" min-width="125">
-          <template #default="{ row }">{{ formatTokenNumber(getRankingAverage(row)) }}</template>
-        </el-table-column>
-      </MkTable>
+      <!-- 导出当前筛选下的完整用户排行 -->
+      <el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
+        <MkIcon name="icon_export_outlined" />
+        <span>导出</span>
+      </el-button>
     </div>
+    <MkTable
+      v-loading="loading"
+      v-model:pagination-config="pagination"
+      :data="records"
+      row-key="chat_user_id"
+      @current-change="loadRanking"
+      @size-change="loadRanking"
+    >
+      <el-table-column label="排名" width="60">
+        <template #default="{ $index }">
+          <span
+            class="mk-rank"
+            :class="
+              (pagination.currentPage - 1) * pagination.pageSize + $index < 3
+                ? `mk-rank-${(pagination.currentPage - 1) * pagination.pageSize + $index + 1}`
+                : 'text-N600'
+            "
+          >
+            {{ (pagination.currentPage - 1) * pagination.pageSize + $index + 1 }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户" min-width="140" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.asker?.username || '-' }}</template>
+      </el-table-column>
+      <el-table-column :label="activeKind === 'userTokens' ? 'Tokens 消耗' : '对话次数'" min-width="125">
+        <template #default="{ row }">
+          {{ formatRankingValue(row) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="占比" min-width="150">
+        <template #default="{ row }">
+          <el-progress v-if="aggregateTotal != null && getRankingValue(row) != null" :percentage="getRankingRatio(row)" />
+          <span v-else>—</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="activeKind === 'userTokens' ? '对话次数' : 'Tokens 消耗'" min-width="125">
+        <template #default="{ row }">
+          {{ formatRankingValue(row, activeKind === 'userTokens' ? 'questions' : 'userTokens') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="均 Tokens/次" min-width="125">
+        <template #default="{ row }">{{ formatTokenNumber(getRankingAverage(row)) }}</template>
+      </el-table-column>
+    </MkTable>
   </MkDrawer>
 </template>
diff --git a/ui/src/views/home/components/ranking/RankingDrawer.vue b/ui/src/views/home/components/ranking/RankingDrawer.vue
index 0d665b0bae2..4597c205889 100644
--- a/ui/src/views/home/components/ranking/RankingDrawer.vue
+++ b/ui/src/views/home/components/ranking/RankingDrawer.vue
@@ -80,16 +80,16 @@ function handleExport() {
 onMounted(() => loadRanking())
 </script>
 <template>
-  <MkDrawer v-model="visible" title="排行榜详情" size="1000">
+  <MkDrawer v-model="visible" title="排行榜详情" class="mk-drawer-with-tabs" contentClass="pt-0" size="1000">
     <el-tabs v-model="activeKind" @tab-change="handleTabChange">
       <el-tab-pane name="tokens" label="Tokens 消耗 · Top 智能体" />
       <el-tab-pane name="questions" label="对话次数 · Top 智能体" />
       <el-tab-pane name="userTokens" label="Tokens 消耗 · Top 用户" />
     </el-tabs>
-    <div class="my-4 flex-between">
+    <div class="mt-6 mb-4 flex-between">
       <div class="flex gap-3">
-        <MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
         <MkDateRange :default-value="{ startTime: initialRange.start_time, endTime: initialRange.end_time }" @change="handleRangeChange" />
+        <MkSearchInput v-model="searchName" class="w-55!" @change="handleSearch" />
       </div>
       <!-- 导出当前筛选下的完整排行榜 -->
       <el-button plain :loading="exporting" :disabled="loading" @click="handleExport">
diff --git a/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue b/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
index 5baf1e14a2b..45f8780676c 100644
--- a/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
+++ b/ui/src/views/knowledge-detail/library/tags/AssociatedDocumentDrawer.vue
@@ -134,68 +134,66 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDrawer v-model="visible" :title="title" size="840" @closed="resetData">
-    <div class="flex-column gap-4" :inert="loading">
-      <el-tabs v-model="activeTab" :before-leave="() => !loading" @tab-change="handleTabChange">
-        <el-tab-pane label="已关联文档" name="linked" />
-        <el-tab-pane label="未关联文档" name="unlinked" />
-      </el-tabs>
-      <div class="flex-between gap-3">
-        <!-- 批量关联或取消关联文档 -->
-        <el-button plain :disabled="!selectedDocuments.length || loading" @click="handleBatchLinkDocuments">
-          <MkIcon :name="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'" />
-          <span>{{ activeTab === 'linked' ? '取消关联' : '关联' }}</span>
-        </el-button>
-        <MkComplexSearch :key="activeTab" :fields="[{ label: '名称', value: 'name' }]" @change="handleComplexSearchChange" />
-      </div>
-      <MkTable
-        ref="documentTableRef"
-        v-model:pagination-config="paginationConfig"
-        v-loading="loading"
-        :data="documentData"
-        @current-change="loadDocuments"
-        @size-change="loadDocuments"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="40" />
-        <el-table-column prop="name" label="文档名称" min-width="200">
-          <template #default="{ row }: { row: DocumentItem }">
-            <div class="flex-align-center gap-2">
-              <img :src="getFileIconUrl(row.name)" alt="" class="size-5 shrink-0" />
-              <span class="truncate" :title="row.name">{{ row.name }}</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="is_active" label="启用状态" width="120">
-          <template #header>
-            <MkTableFilter
-              v-model="selectedDocumentActive"
-              mode="single"
-              label="启用状态"
-              :options="documentActiveOptions"
-              @change="handleDocumentFilterChange"
-            />
-          </template>
-          <template #default="{ row }: { row: DocumentItem }">
-            <MkStatusLabel :active="row.is_active" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="create_time" label="创建时间" width="180">
-          <template #default="{ row }: { row: DocumentItem }">{{ datetimeFormat(row.create_time) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" width="70" fixed="right">
-          <template #default="{ row }: { row: DocumentItem }">
-            <!-- 关联或取消关联当前文档 -->
-            <MkAction
-              display="button"
-              :label="activeTab === 'linked' ? '取消关联' : '关联'"
-              :icon="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'"
-              :disabled="loading"
-              @click="handleLinkDocuments([row.id])"
-            />
-          </template>
-        </el-table-column>
-      </MkTable>
+  <MkDrawer v-model="visible" :title="title" class="mk-drawer-with-tabs" contentClass="pt-0" size="840" @closed="resetData">
+    <el-tabs v-model="activeTab" :before-leave="() => !loading" @tab-change="handleTabChange">
+      <el-tab-pane label="已关联文档" name="linked" />
+      <el-tab-pane label="未关联文档" name="unlinked" />
+    </el-tabs>
+    <div class="flex-between gap-3 mt-6 mb-4">
+      <!-- 批量关联或取消关联文档 -->
+      <el-button plain :disabled="!selectedDocuments.length || loading" @click="handleBatchLinkDocuments">
+        <MkIcon :name="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'" />
+        <span>{{ activeTab === 'linked' ? '取消关联' : '关联' }}</span>
+      </el-button>
+      <MkComplexSearch :key="activeTab" :fields="[{ label: '名称', value: 'name' }]" @change="handleComplexSearchChange" />
     </div>
+    <MkTable
+      ref="documentTableRef"
+      v-model:pagination-config="paginationConfig"
+      v-loading="loading"
+      :data="documentData"
+      @current-change="loadDocuments"
+      @size-change="loadDocuments"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="40" />
+      <el-table-column prop="name" label="文档名称" min-width="200">
+        <template #default="{ row }: { row: DocumentItem }">
+          <div class="flex-align-center gap-2">
+            <img :src="getFileIconUrl(row.name)" alt="" class="size-5 shrink-0" />
+            <span class="truncate" :title="row.name">{{ row.name }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="is_active" label="启用状态" width="120">
+        <template #header>
+          <MkTableFilter
+            v-model="selectedDocumentActive"
+            mode="single"
+            label="启用状态"
+            :options="documentActiveOptions"
+            @change="handleDocumentFilterChange"
+          />
+        </template>
+        <template #default="{ row }: { row: DocumentItem }">
+          <MkStatusLabel :active="row.is_active" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="创建时间" width="180">
+        <template #default="{ row }: { row: DocumentItem }">{{ datetimeFormat(row.create_time) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="70" fixed="right">
+        <template #default="{ row }: { row: DocumentItem }">
+          <!-- 关联或取消关联当前文档 -->
+          <MkAction
+            display="button"
+            :label="activeTab === 'linked' ? '取消关联' : '关联'"
+            :icon="activeTab === 'linked' ? 'icon_unlink_outlined' : 'icon_link-record_outlined'"
+            :disabled="loading"
+            @click="handleLinkDocuments([row.id])"
+          />
+        </template>
+      </el-table-column>
+    </MkTable>
   </MkDrawer>
 </template>
diff --git a/ui/src/views/workflow/tool/debug/ResultDrawer.vue b/ui/src/views/workflow/tool/debug/ResultDrawer.vue
index 3146b6a9ccf..c3f7f96faa0 100644
--- a/ui/src/views/workflow/tool/debug/ResultDrawer.vue
+++ b/ui/src/views/workflow/tool/debug/ResultDrawer.vue
@@ -117,7 +117,7 @@ defineExpose({ open, close })
 </script>
 
 <template>
-  <MkDrawer v-model="visible" title="调试结果" :modal="false" @close="close">
+  <MkDrawer v-model="visible" title="调试结果" class="mk-drawer-with-tabs" contentClass="pt-0" :modal="false" @close="close">
     <template #header>
       <div class="-ml-2 flex-align-center">
         <!-- 返回输入参数 -->
@@ -129,9 +129,8 @@ defineExpose({ open, close })
     </template>
     <el-tabs v-model="activeTab">
       <el-tab-pane label="输出" name="output">
-        <h4 class="mk-title-decoration mb-4 mt-4">回复内容</h4>
+        <h4 class="mk-title-decoration mb-4 mt-6">回复内容</h4>
 
-        <!-- // TODO: 回复内容 调样式-->
         <el-card class="small" shadow="never">
           <ContentList :content-list="blocks" />
           <div v-if="running">回答中...</div>