fix: logviewer style

web/src/views/history/History.vue

@@ -6,11 +6,12 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import Pagination from '@/components/Pagination.vue'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import LogViewer from './LogViewer.vue'
 import {
   RefreshCw, X, Search, Maximize2, GitBranch, Terminal,
   CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap as ZapIcon, Check, Trash2
 } from 'lucide-vue-next'
+import LogViewer from './LogViewer.vue'
+import LogTerminal from '@/components/LogTerminal.vue'
 import { api, type TaskLog } from '@/api'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -26,6 +27,7 @@ import {
 import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 import TextOverflow from '@/components/TextOverflow.vue'
+import { useTheme } from '@/composables/useTheme'
 
 const route = useRoute()
 const { pageSize } = useSiteSettings()
@@ -55,15 +57,10 @@ const wsContent = ref('')
 const isWsLoading = ref(false)
 let logSocket: WebSocket | null = null
 
-
-import { ansiToHtml } from '@/utils/ansi'
+const { resolvedTheme } = useTheme()
 
 const decompressedOutput = computed(() => {
-  return wsContent.value || '无输出'
-})
-
-const renderedOutput = computed(() => {
-  return ansiToHtml(decompressedOutput.value)
+  return wsContent.value
 })
 
 async function loadLogs() {
@@ -570,10 +567,18 @@ watch(() => route.query, (newQuery) => {
               <Maximize2 class="h-3.5 w-3.5" />
             </Button>
           </div>
-          <div class="flex-1 overflow-auto bg-zinc-950 min-h-[160px]">
-            <pre
-              class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed text-zinc-300" v-html="renderedOutput"></pre>
-            <div v-if="isWsLoading" class="p-4 text-sm text-zinc-500 italic">连接中...</div>
+          <div
+            class="flex-1 overflow-hidden min-h-[160px]"
+            :class="resolvedTheme === 'dark' ? 'bg-zinc-950' : 'bg-zinc-100'"
+            ref="sideLogContainer"
+          >
+            <LogTerminal 
+              :content="decompressedOutput" 
+              :theme="resolvedTheme"
+            />
+            <div v-if="isWsLoading" class="px-4 py-2 text-sm text-zinc-500 italic border-t border-zinc-200 dark:border-zinc-800">
+              连接中...
+            </div>
           </div>
         </div>
       </div>

web/src/views/history/LogViewer.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, watch, onUnmounted } from 'vue'
+import { watch, onUnmounted } from 'vue'
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { X, Search } from 'lucide-vue-next'
+import { X } from 'lucide-vue-next'
+import LogTerminal from '@/components/LogTerminal.vue'
+import { useTheme } from '@/composables/useTheme'
+
+const { resolvedTheme } = useTheme()
 
 const props = defineProps<{
   open: boolean
@@ -15,15 +18,8 @@ const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
-const searchKeyword = ref('')
-
-import { ansiToHtml, highlightHtml } from '@/utils/ansi'
-
-// 高亮搜索结果并处理 ANSI 颜色
-const highlightedContent = computed(() => {
-  const html = ansiToHtml(props.content)
-  return highlightHtml(html, searchKeyword.value)
-})
+const lightLogBackgroundClass = 'bg-zinc-100'
+const darkLogBackgroundClass = 'bg-zinc-950'
 
 function close() {
   emit('update:open', false)
@@ -41,7 +37,6 @@ function toggleBodyScroll(lock: boolean) {
 // 监听打开状态
 watch(() => props.open, (val) => {
   if (val) {
-    searchKeyword.value = ''
     toggleBodyScroll(true)
   } else {
     toggleBodyScroll(false)
@@ -78,19 +73,19 @@ onUnmounted(() => {
             </div>
           </div>
           <div class="flex items-center gap-2">
-            <div class="relative flex-1 sm:flex-none">
-              <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input v-model="searchKeyword" placeholder="搜索内容..." class="h-8 pl-9 w-full sm:w-56 text-sm" />
-            </div>
             <Button variant="ghost" size="icon" class="h-7 w-7 shrink-0" @click="close">
               <X class="h-4 w-4" />
             </Button>
           </div>
         </div>
-        <div class="flex-1 overflow-auto bg-zinc-950">
-          <pre class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all text-zinc-300" v-html="highlightedContent"></pre>
+        <div class="flex-1 overflow-hidden" :class="resolvedTheme === 'dark' ? darkLogBackgroundClass : lightLogBackgroundClass">
+          <LogTerminal 
+            :content="content" 
+            :theme="resolvedTheme"
+          />
         </div>
       </div>
     </div>
   </Teleport>
 </template>
+