From 5df2d6868dba4350147314b268b52052ef129cdc Mon Sep 17 00:00:00 2001
From: engigu <sayheya@qq.com>
Date: Mon, 30 Mar 2026 17:17:58 +0800
Subject: [PATCH] fixL: log viewer alignment problem

---
 web/src/views/history/History.vue   | 22 ++++++++++++++++++++--
 web/src/views/history/LogViewer.vue | 17 ++++++++++++++---
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/web/src/views/history/History.vue b/web/src/views/history/History.vue
index 8534cd1..43fc279 100644
--- a/web/src/views/history/History.vue
+++ b/web/src/views/history/History.vue
@@ -42,6 +42,8 @@ const total = ref(0)
 let searchTimer: ReturnType<typeof setTimeout> | null = null
 let durationTimer: ReturnType<typeof setInterval> | null = null
 
+const isRefreshing = ref(false)
+
 // 全屏查看
 const showFullscreen = ref(false)
 
@@ -62,6 +64,7 @@ const decompressedOutput = computed(() => {
 })
 
 async function loadLogs() {
+  isRefreshing.value = true
   try {
     const params: { page: number; page_size: number; task_id?: string; task_name?: string; status?: string } = {
       page: currentPage.value,
@@ -81,6 +84,8 @@ async function loadLogs() {
     total.value = response.total
   } catch {
     toast.error('加载日志失败')
+  } finally {
+    isRefreshing.value = false
   }
 }
 
@@ -338,8 +343,8 @@ watch(() => route.query, (newQuery) => {
             </SelectContent>
           </Select>
         </div>
-        <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadLogs" title="刷新">
-          <RefreshCw class="h-4 w-4" />
+        <Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadLogs" title="刷新" :disabled="isRefreshing">
+          <RefreshCw class="h-4 w-4" :class="{ 'animate-spin': isRefreshing }" />
         </Button>
         <Button variant="outline"
           class="h-9 px-4 shrink-0 text-sm text-destructive hover:bg-destructive/10 hover:text-destructive border-destructive/20"
@@ -616,3 +621,16 @@ watch(() => route.query, (newQuery) => {
     </AlertDialog>
   </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>
diff --git a/web/src/views/history/LogViewer.vue b/web/src/views/history/LogViewer.vue
index 66b68d2..8eb7dd2 100644
--- a/web/src/views/history/LogViewer.vue
+++ b/web/src/views/history/LogViewer.vue
@@ -112,11 +112,22 @@ onUnmounted(() => {
           </div>
         </div>
         <div ref="scrollContainer" class="flex-1 overflow-auto bg-black/5 dark:bg-white/5" @scroll="handleScroll">
-          <div class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed">
-            <Ansi>{{ content }}</Ansi>
-          </div>
+          <div class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed"><Ansi>{{ content }}</Ansi></div>
         </div>
       </div>
     </div>
   </Teleport>
 </template>
+
+<style scoped>
+:deep(code) {
+  display: block;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+:deep(span) {
+  vertical-align: top;
+}
+</style>