From 8cff03e4abbe684b29ee91f9897682314d360af5 Mon Sep 17 00:00:00 2001
From: duorameng <2997944583@qq.com>
Date: Tue, 9 Jun 2026 17:08:40 +0800
Subject: [PATCH] style: fix header alignment and code block padding in log
 details

---
 web/src/components/LogDetailCard.vue | 28 ++++++++--------------------
 web/src/views/history/History.vue    | 16 ++--------------
 2 files changed, 10 insertions(+), 34 deletions(-)

diff --git a/web/src/components/LogDetailCard.vue b/web/src/components/LogDetailCard.vue
index 379efde..40bf2ca 100644
--- a/web/src/components/LogDetailCard.vue
+++ b/web/src/components/LogDetailCard.vue
@@ -120,9 +120,9 @@ function getStatusBadgeClass(status: string) {
     <!-- 头部菜单 (响应式两行布局) -->
     <div class="flex flex-col border-b bg-muted/20 shrink-0">
       <!-- 第一行: 标题与核心控制按钮 -->
-      <div class="flex items-center justify-between px-4 h-11 gap-4">
+      <div class="flex items-center justify-between px-4 h-[28px] gap-4">
         <div class="flex items-center gap-2 min-w-0">
-          <span class="text-sm font-medium text-foreground whitespace-nowrap truncate">{{ title }}</span>
+          <span class="text-xs font-medium text-foreground whitespace-nowrap truncate">{{ title }}</span>
           
           <!-- Simple 模式下的状态显示 -->
           <Badge v-if="variant === 'simple'" variant="outline" :class="[
@@ -147,18 +147,18 @@ function getStatusBadgeClass(status: string) {
           </Button>
 
           <div class="flex items-center">
-            <Button v-if="variant === 'simple'" variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground"
+            <Button v-if="variant === 'simple'" variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground"
               title="全屏切换" @click="$emit('maximize')">
-              <Maximize2 class="h-4 w-4" />
+              <Maximize2 class="h-3.5 w-3.5" />
             </Button>
 
-            <Button variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive"
+            <Button variant="ghost" size="icon" class="h-6 w-6 text-muted-foreground hover:text-destructive"
               title="删除该日志" @click="$emit('delete', log.id)">
-              <Trash2 class="h-4 w-4" />
+              <Trash2 class="h-3.5 w-3.5" />
             </Button>
             
-            <Button v-if="showClose" variant="ghost" size="icon" class="h-8 w-8" @click="$emit('close')" title="关闭">
-              <X class="h-4 w-4" />
+            <Button v-if="showClose" variant="ghost" size="icon" class="h-6 w-6" @click="$emit('close')" title="关闭">
+              <X class="h-3.5 w-3.5" />
             </Button>
           </div>
         </div>
@@ -277,15 +277,3 @@ function getStatusBadgeClass(status: string) {
   </div>
 </template>
 
-<style scoped>
-:deep(code) {
-  display: block;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: transparent !important;
-}
-
-:deep(span) {
-  vertical-align: top;
-}
-</style>
diff --git a/web/src/views/history/History.vue b/web/src/views/history/History.vue
index a6c3928..211e66e 100644
--- a/web/src/views/history/History.vue
+++ b/web/src/views/history/History.vue
@@ -378,7 +378,7 @@ watch(() => route.query, (newQuery) => {
       <div class="flex-1 min-w-0 rounded-lg border bg-card overflow-hidden flex flex-col">
         <!-- 小屏表头 -->
         <div
-          class="flex sm:hidden items-center gap-2 px-3 py-2 border-b bg-muted/20 text-xs text-muted-foreground font-medium">
+          class="flex sm:hidden items-center gap-2 px-3 h-[28px] border-b bg-muted/20 text-xs text-muted-foreground font-medium">
           <span class="w-14 shrink-0 pl-1">序号</span>
           <span class="w-8 shrink-0 text-center">类型</span>
           <span class="flex-1 min-w-0">任务名称</span>
@@ -387,7 +387,7 @@ watch(() => route.query, (newQuery) => {
         </div>
         <!-- 大屏表头 -->
         <div
-          class="hidden sm:flex items-center gap-4 px-4 h-11 border-b bg-muted/20 text-sm text-muted-foreground font-medium">
+          class="hidden sm:flex items-center gap-4 px-4 h-[28px] border-b bg-muted/20 text-xs text-muted-foreground font-medium">
           <span class="w-16 shrink-0 pl-1">序号</span>
           <span class="w-12 shrink-0 text-center">类型</span>
           <span class="w-36 shrink-0">任务名称</span>
@@ -503,15 +503,3 @@ watch(() => route.query, (newQuery) => {
   </div>
 </template>
 
-<style scoped>
-:deep(.log-pre code) {
-  display: block;
-  padding: 0 !important;
-  margin: 0 !important;
-  background: transparent !important;
-}
-
-:deep(.log-pre span) {
-  vertical-align: top;
-}
-</style>