chore: update task style #20

web/src/components/LogContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { AlertCircle, Loader2 } from 'lucide-vue-next'
+import Ansi from 'ansi-to-vue3'
+
+interface Props {
+  content?: string
+  loading?: boolean
+  loadingText?: string
+  emptyTitle?: string
+  emptyDescription?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  content: '',
+  loading: false,
+  loadingText: '正在获取日志内容',
+  emptyTitle: '未检测到输出内容',
+  emptyDescription: '此任务执行期间未产生标准输出（Stdout）或错误输出（Stderr）日志。'
+})
+</script>
+
+<template>
+  <div class="flex-1 flex flex-col h-full">
+    <!-- 加载状态 -->
+    <template v-if="loading">
+      <div class="flex-1 flex flex-col items-center justify-center p-4 select-none text-center">
+        <Loader2 class="h-10 w-10 animate-spin text-primary/30 mb-4" />
+        <span class="text-sm text-muted-foreground font-medium animate-pulse">{{ loadingText }}</span>
+      </div>
+    </template>
+
+    <!-- 空状态 -->
+    <template v-else-if="!content || !content.trim()">
+      <div class="flex-1 flex flex-col items-center justify-center p-4 select-none text-center">
+        <div class="w-14 h-14 rounded-3xl bg-muted/20 flex items-center justify-center mb-4 border border-muted-foreground/10 mx-auto">
+          <AlertCircle class="h-7 w-8 text-muted-foreground/20" />
+        </div>
+        <span class="text-sm text-muted-foreground font-medium">{{ emptyTitle }}</span>
+        <p class="text-[11px] text-muted-foreground/40 mt-1.5 max-w-[280px] leading-relaxed mx-auto">
+          {{ emptyDescription }}
+        </p>
+      </div>
+    </template>
+
+    <!-- 正常内容 -->
+    <template v-else>
+      <div class="p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed">
+        <Ansi>{{ content }}</Ansi>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+:deep(code) {
+  display: block;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+:deep(span) {
+  vertical-align: top;
+}
+</style>

web/src/components/LogDetailCard.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { 
+  X, Trash2, Maximize2, CheckCircle2, XCircle, AlertCircle, Clock, Ban, 
+  Zap as ZapIcon, Search
+} from 'lucide-vue-next'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import LogContent from './LogContent.vue'
+import { TASK_STATUS } from '@/constants'
+import type { TaskLog } from '@/api'
+
+interface Props {
+  log: TaskLog | null
+  content: string
+  title?: string
+  loading?: boolean
+  isStopping?: boolean
+  showClose?: boolean
+  variant?: 'full' | 'simple'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  log: null,
+  content: '',
+  title: '日志详情',
+  loading: false,
+  isStopping: false,
+  showClose: true,
+  variant: 'full'
+})
+
+defineEmits<{
+  'close': []
+  'stop': []
+  'delete': [id: string]
+  'maximize': []
+}>()
+
+const searchKeyword = ref('')
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}毫秒`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}秒`
+  return `${(ms / 60000).toFixed(1)}分钟`
+}
+
+function getStatusBadgeClass(status: string) {
+  switch (status) {
+    case TASK_STATUS.SUCCESS:
+      return 'bg-green-500/10 text-green-600 border-green-500/20 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30 shadow-[0_0_8px_-2px_rgba(34,197,94,0.15)]'
+    case TASK_STATUS.FAILED:
+      return 'bg-red-500/10 text-red-600 border-red-500/20 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30'
+    case TASK_STATUS.RUNNING:
+      return 'bg-blue-500/10 text-blue-600 border-blue-500/20 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30'
+    case TASK_STATUS.PENDING:
+      return 'bg-amber-500/10 text-amber-600 border-amber-500/20 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30'
+    case TASK_STATUS.TIMEOUT:
+      return 'bg-orange-500/10 text-orange-600 border-orange-500/20 dark:bg-orange-500/20 dark:text-orange-400 dark:border-orange-500/30'
+    case TASK_STATUS.CANCELLED:
+      return 'bg-muted/50 text-muted-foreground border-muted-foreground/10'
+    default:
+      return 'bg-secondary text-secondary-foreground border-transparent'
+  }
+}
+</script>
+
+<template>
+  <div v-if="log" class="w-full h-full flex flex-col overflow-hidden bg-card">
+    <!-- 头部菜单 -->
+    <div class="flex items-center justify-between px-4 h-11 border-b bg-muted/20 shrink-0 gap-4">
+      <div class="flex items-center gap-3 min-w-0">
+        <span class="text-sm font-normal text-muted-foreground whitespace-nowrap">{{ title }}</span>
+        
+        <!-- Simple 模式下的状态显示 -->
+        <Badge v-if="variant === 'simple'" variant="outline" :class="[
+          'capitalize px-2 py-0.5 font-normal rounded-full border text-[10px] hidden sm:flex',
+          getStatusBadgeClass(log.status)
+        ]">
+          {{ log.status }}
+        </Badge>
+
+        <Button v-if="log.status === TASK_STATUS.RUNNING" variant="destructive" size="sm"
+          class="h-6 px-2 text-[10px]" :disabled="isStopping" @click="$emit('stop')">
+          {{ isStopping ? '停止中...' : '停止任务' }}
+        </Button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Searchbox for Simple mode -->
+        <div v-if="variant === 'simple'" class="relative flex-1 sm:flex-none">
+          <Search class="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <Input v-model="searchKeyword" placeholder="搜索内容..." class="h-7 pl-8 w-full sm:w-48 text-xs bg-muted/30" />
+        </div>
+
+        <Button v-if="variant === 'simple'" variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground"
+          title="全屏切换" @click="$emit('maximize')">
+          <Maximize2 class="h-3.5 w-3.5" />
+        </Button>
+
+        <Button variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground hover:text-destructive"
+          title="删除该日志" @click="$emit('delete', log.id)">
+          <Trash2 class="h-3.5 w-3.5" />
+        </Button>
+        <Button v-if="showClose" variant="ghost" size="icon" class="h-7 w-7" @click="$emit('close')" title="关闭">
+          <X class="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+
+    <!-- 任务元数据 (仅在 Full 模式下展示) -->
+    <div v-if="variant === 'full'"
+      class="px-4 py-3 border-b space-y-2 text-sm text-foreground/80 shrink-0 overflow-y-auto max-h-[40vh]">
+      <div class="flex justify-between items-center h-6">
+        <span class="text-sm font-normal text-muted-foreground">任务名称</span>
+        <span class="text-sm font-normal text-muted-foreground">{{ log.task_name }}</span>
+      </div>
+      <div class="flex justify-between items-center h-8">
+        <span class="text-sm font-normal text-muted-foreground">状态</span>
+        <Badge variant="outline" :class="[
+          'capitalize px-3 py-1 font-normal rounded-full border shadow-sm transition-all duration-300 ring-4 ring-transparent hover:ring-primary/5',
+          getStatusBadgeClass(log.status)
+        ]">
+          <div class="flex items-center gap-1.5">
+            <CheckCircle2 v-if="log.status === TASK_STATUS.SUCCESS" class="h-3.5 w-3.5 fill-green-500/20" />
+            <XCircle v-else-if="log.status === TASK_STATUS.FAILED" class="h-3.5 w-3.5 fill-red-500/20" />
+            <ZapIcon v-else-if="log.status === TASK_STATUS.RUNNING"
+              class="h-3.5 w-3.5 fill-current animate-pulse text-blue-500" />
+            <Clock v-else-if="log.status === TASK_STATUS.PENDING" class="h-3.5 w-3.5 fill-amber-500/20" />
+            <AlertCircle v-else-if="log.status === TASK_STATUS.TIMEOUT" class="h-3.5 w-3.5 fill-orange-500/20" />
+            <Ban v-else-if="log.status === TASK_STATUS.CANCELLED" class="h-3.5 w-3.5" />
+            <span class="text-[10px] font-normal uppercase">{{ log.status === TASK_STATUS.SUCCESS ? 'SUCCESS' : log.status }}</span>
+          </div>
+        </Badge>
+      </div>
+      <div class="flex justify-between items-center h-6">
+        <span class="text-sm font-normal text-muted-foreground">耗时</span>
+        <span class="text-sm font-normal text-muted-foreground">{{ formatDuration(log.duration) }}</span>
+      </div>
+      <div class="flex justify-between items-center h-6">
+        <span class="text-sm font-normal text-muted-foreground">开始时间</span>
+        <span class="text-sm font-normal text-muted-foreground">{{ log.start_time || '-' }}</span>
+      </div>
+      <div class="flex justify-between items-center h-6">
+        <span class="text-sm font-normal text-muted-foreground">结束时间</span>
+        <span class="text-sm font-normal text-muted-foreground">{{ log.end_time || '-' }}</span>
+      </div>
+      <div class="pt-1.5 pb-1">
+        <span class="text-sm font-normal text-muted-foreground block mb-1">执行命令</span>
+        <code
+          class="block font-mono bg-muted/40 px-3 py-2 rounded text-xs break-all border border-muted-foreground/10 leading-relaxed overflow-y-auto max-h-24 font-normal">
+          {{ log.command }}
+        </code>
+      </div>
+    </div>
+
+    <!-- 日志输出容器 -->
+    <div class="flex-1 flex flex-col overflow-hidden"
+      :class="variant === 'simple' ? 'bg-black/5 dark:bg-white/5' : 'bg-black/[0.02] dark:bg-white/[0.02]'">
+      <!-- 错误信息提示 -->
+      <div v-if="log.error" class="px-4 py-3 border-b bg-red-500/5 space-y-2 text-sm shrink-0">
+        <div class="flex items-center gap-2 text-red-500 font-medium">
+          <XCircle class="h-4 w-4" />
+          <span class="font-normal">系统错误</span>
+        </div>
+        <code class="block font-mono bg-red-500/10 text-red-600 px-2 py-1 rounded text-xs break-all">
+          {{ log.error }}
+        </code>
+      </div>
+      
+      <!-- 日志工具栏 (仅在 Full 模式展示，Simple 模式直接显示内容) -->
+      <div v-if="variant === 'full'" 
+        class="px-4 py-2.5 text-sm text-muted-foreground border-b bg-muted/20 flex items-center justify-between shrink-0">
+        <span class="text-sm font-normal text-muted-foreground text-[12px]">日志输出</span>
+        <Button variant="ghost" size="icon" class="h-6 w-6" @click="$emit('maximize')" title="全屏查看">
+          <Maximize2 class="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      <!-- 日志列表 -->
+      <div class="flex-1 overflow-auto">
+        <LogContent 
+          class="h-full"
+          :content="content" 
+          :loading="loading" 
+          empty-description="此任务执行期间未产生标准输出日志" 
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(code) {
+  display: block;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+}
+
+:deep(span) {
+  vertical-align: top;
+}
+</style>

web/src/views/history/History.vue

@@ -7,13 +7,12 @@ 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 Ansi from 'ansi-to-vue3'
 import {
-  RefreshCw, X, Search, Maximize2, GitBranch, Terminal,
-  CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap as ZapIcon, Check, Trash2
+  RefreshCw, X, Search, GitBranch, Terminal,
+  AlertCircle, Ban, Clock, Zap as ZapIcon, Check, Trash2
 } from 'lucide-vue-next'
 import { api, type TaskLog } from '@/api'
-import { Badge } from '@/components/ui/badge'
+import LogDetailCard from '@/components/LogDetailCard.vue'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -282,24 +281,7 @@ async function handleDeleteLog() {
   }
 }
 
-function getStatusBadgeClass(status: string) {
-  switch (status) {
-    case TASK_STATUS.SUCCESS:
-      return 'bg-green-500/10 text-green-600 border-green-500/20 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30 shadow-[0_0_8px_-2px_rgba(34,197,94,0.15)]'
-    case TASK_STATUS.FAILED:
-      return 'bg-red-500/10 text-red-600 border-red-500/20 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30'
-    case TASK_STATUS.RUNNING:
-      return 'bg-blue-500/10 text-blue-600 border-blue-500/20 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30'
-    case TASK_STATUS.PENDING:
-      return 'bg-amber-500/10 text-amber-600 border-amber-500/20 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30'
-    case TASK_STATUS.TIMEOUT:
-      return 'bg-orange-500/10 text-orange-600 border-orange-500/20 dark:bg-orange-500/20 dark:text-orange-400 dark:border-orange-500/30'
-    case TASK_STATUS.CANCELLED:
-      return 'bg-muted/50 text-muted-foreground border-muted-foreground/10'
-    default:
-      return 'bg-secondary text-secondary-foreground border-transparent'
-  }
-}
+
 
 function getTaskTypeTitle(type: string) {
   return type === TASK_TYPE.REPO ? '仓库同步' : '普通任务'
@@ -505,115 +487,23 @@ watch(() => route.query, (newQuery) => {
       <!-- 日志详情侧边栏 -->
       <div v-if="selectedLog"
         class="w-full lg:w-[480px] rounded-lg border bg-card flex flex-col overflow-hidden shrink-0">
-        <div class="flex items-center justify-between px-4 h-11 border-b bg-muted/20">
-          <div class="flex items-center gap-2">
-            <span class="text-sm font-normal text-muted-foreground">日志详情</span>
-            <Button v-if="selectedLog.status === TASK_STATUS.RUNNING" variant="destructive" size="sm"
-              class="h-6 px-2 text-[10px]" :disabled="isStopping" @click="stopTask">
-              {{ isStopping ? '停止中...' : '停止任务' }}
-            </Button>
-          </div>
-          <div class="flex items-center gap-1">
-            <Button variant="ghost" size="icon" class="h-7 w-7 text-muted-foreground hover:text-destructive"
-              title="删除该日志" @click="confirmDeleteLog(selectedLog.id)">
-              <Trash2 class="h-3.5 w-3.5" />
-            </Button>
-            <Button variant="ghost" size="icon" class="h-7 w-7" @click="closeDetail" title="关闭">
-              <X class="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </div>
-        <div class="px-4 py-3 border-b space-y-2 text-sm text-foreground/80">
-          <div class="flex justify-between items-center h-6">
-            <span class="text-sm font-normal text-muted-foreground">任务名称</span>
-            <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.task_name }}</span>
-          </div>
-          <div class="flex justify-between items-center h-8">
-            <span class="text-sm font-normal text-muted-foreground">状态</span>
-            <Badge variant="outline" :class="[
-              'capitalize px-3 py-1 font-normal rounded-full border shadow-sm transition-all duration-300 ring-4 ring-transparent hover:ring-primary/5',
-              getStatusBadgeClass(selectedLog.status)
-            ]">
-              <div class="flex items-center gap-1.5">
-                <CheckCircle2 v-if="selectedLog.status === TASK_STATUS.SUCCESS" class="h-3.5 w-3.5 fill-green-500/20" />
-                <XCircle v-else-if="selectedLog.status === TASK_STATUS.FAILED" class="h-3.5 w-3.5 fill-red-500/20" />
-                <ZapIcon v-else-if="selectedLog.status === TASK_STATUS.RUNNING"
-                  class="h-3.5 w-3.5 fill-current animate-pulse text-blue-500" />
-                <Clock v-else-if="selectedLog.status === TASK_STATUS.PENDING" class="h-3.5 w-3.5 fill-amber-500/20" />
-                <AlertCircle v-else-if="selectedLog.status === TASK_STATUS.TIMEOUT" class="h-3.5 w-3.5 fill-orange-500/20" />
-                <Ban v-else-if="selectedLog.status === TASK_STATUS.CANCELLED" class="h-3.5 w-3.5" />
-                <span class="text-[10px] font-normal uppercase">{{ selectedLog.status === TASK_STATUS.SUCCESS ? 'SUCCESS' : selectedLog.status }}</span>
-              </div>
-            </Badge>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-sm font-normal text-muted-foreground">耗时</span>
-            <span class="text-sm font-normal text-muted-foreground">{{ formatDuration(selectedLog.duration) }}</span>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-sm font-normal text-muted-foreground">开始时间</span>
-            <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.start_time || '-' }}</span>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-sm font-normal text-muted-foreground">结束时间</span>
-            <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.end_time || '-' }}</span>
-          </div>
-          <div class="pt-1.5">
-            <span class="text-sm font-normal text-muted-foreground block mb-1">执行命令</span>
-            <code
-              class="block font-mono bg-muted/40 px-3 py-2 rounded text-xs break-all border border-muted-foreground/10">
-              {{ selectedLog.command }}
-            </code>
-          </div>
-        </div>
-        <div class="flex-1 flex flex-col overflow-hidden">
-          <div v-if="selectedLog.error" class="px-4 py-3 border-b bg-red-500/5 space-y-2 text-sm">
-            <div class="flex items-center gap-2 text-red-500 font-medium">
-              <X class="h-4 w-4" />
-              <span class="font-normal">系统错误</span>
-            </div>
-            <code class="block font-mono bg-red-500/10 text-red-600 px-2 py-1 rounded text-xs break-all">
-              {{ selectedLog.error }}
-            </code>
-          </div>
-          <div class="px-4 py-2.5 text-sm text-muted-foreground border-b bg-muted/20 flex items-center justify-between">
-            <span class="text-sm font-normal text-muted-foreground">日志输出</span>
-            <Button variant="ghost" size="icon" class="h-6 w-6" @click="showFullscreen = true" title="全屏查看">
-              <Maximize2 class="h-3.5 w-3.5" />
-            </Button>
-          </div>
-          <div class="flex-1 overflow-auto bg-black/5 dark:bg-white/5 min-h-[240px] flex flex-col">
-            <template v-if="isWsLoading">
-              <div class="flex-1 flex flex-col items-center justify-center p-8 select-none">
-                <div class="relative w-12 h-12 mb-4">
-                  <div class="absolute inset-0 rounded-full border-2 border-primary/10"></div>
-                  <div class="absolute inset-0 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
-                </div>
-                <span class="text-sm text-muted-foreground font-medium animate-pulse">正在获取日志内容</span>
-              </div>
-            </template>
-            <template v-else-if="!decompressedOutput.trim()">
-              <div class="flex-1 flex flex-col items-center justify-center p-8 select-none">
-                <div class="w-12 h-12 rounded-2xl bg-muted/30 flex items-center justify-center mb-4 border border-muted-foreground/5">
-                  <AlertCircle class="h-6 w-6 text-muted-foreground/40" />
-                </div>
-                <span class="text-sm text-muted-foreground font-medium">无输出内容</span>
-                <p class="text-[11px] text-muted-foreground/50 mt-1">此任务执行期间未产生标准输出日志</p>
-              </div>
-            </template>
-            <template v-else>
-              <div class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed">
-                <Ansi>{{ decompressedOutput }}</Ansi>
-              </div>
-            </template>
-          </div>
-        </div>
+        <LogDetailCard 
+          :log="selectedLog" 
+          :content="decompressedOutput" 
+          :loading="isWsLoading" 
+          :is-stopping="isStopping"
+          @close="closeDetail"
+          @stop="stopTask"
+          @delete="confirmDeleteLog"
+          @maximize="showFullscreen = true"
+        />
       </div>
     </div>
 
     <!-- 全屏查看日志 -->
-    <LogViewer v-model:open="showFullscreen" :title="`日志输出 - ${selectedLog?.task_name || ''}`"
-      :content="decompressedOutput" :status="selectedLog?.status" />
+    <LogViewer v-model:open="showFullscreen"
+      :log="selectedLog"
+      :content="decompressedOutput" />
 
     <!-- 清空日志确认弹窗 -->
     <AlertDialog :open="showClearDialog" @update:open="showClearDialog = $event">

web/src/views/history/LogViewer.vue

@@ -1,56 +1,30 @@
 <script setup lang="ts">
-import { ref, watch, onUnmounted, nextTick } from 'vue'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { X, Search, AlertCircle, Check } from 'lucide-vue-next'
-import Ansi from 'ansi-to-vue3'
+import { ref, watch, onUnmounted } from 'vue'
+import LogDetailCard from '@/components/LogDetailCard.vue'
+import type { TaskLog } from '@/api'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   open: boolean
-  title: string
+  log: TaskLog | null
   content: string
-  status?: string
-}>()
+  title?: string
+  loading?: boolean
+  variant?: 'full' | 'simple'
+}>(), {
+  variant: 'simple'
+})
 
 const emit = defineEmits<{
   'update:open': [value: boolean]
 }>()
 
-const searchKeyword = ref('')
-const scrollContainer = ref<HTMLElement | null>(null)
-const shouldAutoScroll = ref(true)
+const isFullscreen = ref(false)
 
 function close() {
+  isFullscreen.value = false
   emit('update:open', false)
 }
 
-// 处理滚动事件，判断用户是否手动向上滚动
-function handleScroll() {
-  if (!scrollContainer.value) return
-  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
-  // 如果距离底部小于 50px，认为用户想继续跟随滚动
-  const isAtBottom = scrollHeight - scrollTop - clientHeight < 50
-  shouldAutoScroll.value = isAtBottom
-}
-
-// 滚动到底部
-const scrollToBottom = async (smooth = true) => {
-  await nextTick()
-  if (scrollContainer.value && shouldAutoScroll.value) {
-    scrollContainer.value.scrollTo({
-      top: scrollContainer.value.scrollHeight,
-      behavior: smooth ? 'smooth' : 'auto'
-    })
-  }
-}
-
-// 监听内容变化，实现自动滚动
-watch(() => props.content, () => {
-  if (props.open) {
-    scrollToBottom(true)
-  }
-})
-
 // 统一控制 Body 滚动
 function toggleBodyScroll(lock: boolean) {
   if (lock) {
@@ -63,10 +37,8 @@ function toggleBodyScroll(lock: boolean) {
 // 监听打开状态
 watch(() => props.open, (val) => {
   if (val) {
-    searchKeyword.value = ''
-    shouldAutoScroll.value = true // 每次重新打开都开启自动滚动
+    isFullscreen.value = false
     toggleBodyScroll(true)
-    scrollToBottom(false) // 首次打开立刻定位，不滑动
   } else {
     toggleBodyScroll(false)
   }
@@ -80,65 +52,26 @@ onUnmounted(() => {
 
 <template>
   <Teleport to="body">
-    <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-2 sm:p-4"
+    <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-0 sm:p-4"
       @click.self="close">
       <div
-        class="bg-background rounded-lg shadow-lg flex flex-col w-full sm:w-[90vw] md:w-[80vw] max-w-5xl h-[90vh] sm:h-[85vh]">
-        <div
-          class="flex flex-col sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-2">
-          <div class="flex items-center gap-3 min-w-0">
-            <span class="text-sm font-normal text-muted-foreground truncate">{{ title }}</span>
-            <div v-if="status"
-              class="flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-normal uppercase transition-all shrink-0 border shadow-sm ring-4 ring-transparent hover:ring-primary/5"
-              :class="status === 'success' ? 'bg-green-500/10 text-green-600 border-green-500/20' :
-                status === 'failed' ? 'bg-red-500/10 text-red-600 border-red-500/20' :
-                  'bg-blue-500/10 text-blue-600 border-blue-500/20'">
-              <Check v-if="status === 'success'" class="h-3 w-3 fill-green-500/20" />
-              <X v-else-if="status === 'failed'" class="h-3 w-3 fill-red-500/20" />
-              <span v-if="status === 'running'" class="relative flex h-1.5 w-1.5 mr-0.5">
-                <span
-                  class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
-                <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-blue-500"></span>
-              </span>
-              {{ status === 'success' ? 'SUCCESS' : status === 'failed' ? 'FAILED' : 'RUNNING' }}
-            </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 ref="scrollContainer" class="flex-1 overflow-auto bg-black/5 dark:bg-white/5 flex flex-col" @scroll="handleScroll">
-          <div v-if="!content.trim()" class="flex-1 flex flex-col items-center justify-center p-8 select-none text-center">
-            <div class="w-16 h-16 rounded-3xl bg-muted/20 flex items-center justify-center mb-6 border border-muted-foreground/10 mx-auto">
-              <AlertCircle class="h-8 w-8 text-muted-foreground/20" />
-            </div>
-            <span class="text-base text-muted-foreground font-normal">未检测到输出内容</span>
-            <p class="text-xs text-muted-foreground/40 mt-2 max-w-[280px] leading-relaxed mx-auto">
-              此任务已执行完毕，但在标准输出（Stdout）和错误输出（Stderr）通道中均未捕获到任何有效数据。
-            </p>
-          </div>
-          <div v-else class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed"><Ansi>{{ content }}</Ansi></div>
-        </div>
+        :class="[
+          'bg-background shadow-2xl flex flex-col transition-all duration-300 overflow-hidden',
+          isFullscreen 
+            ? 'fixed inset-0 w-screen h-screen z-[60] rounded-none' 
+            : 'w-full sm:w-[90vw] md:w-[80vw] max-w-5xl h-[90vh] sm:h-[85vh] rounded-xl'
+        ]">
+        <LogDetailCard 
+          class="flex-1"
+          :log="log" 
+          :content="content" 
+          :title="title"
+          :loading="loading"
+          :variant="isFullscreen ? 'simple' : variant"
+          @close="close"
+          @maximize="isFullscreen = !isFullscreen"
+        />
       </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>

web/src/views/tasks/Tasks.vue

@@ -10,13 +10,13 @@ import LogViewer from '@/views/history/LogViewer.vue'
 import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, RefreshCw, Wifi, WifiOff, Zap, ZapOff, Copy, Tag } from 'lucide-vue-next'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { api, type Agent, type Task } from '@/api'
+import { api, type Agent, type Task, type TaskLog } from '@/api'
 import { toast } from 'vue-sonner'
 import { useSiteSettings } from '@/composables/useSiteSettings'
 import { useRouter, useRoute } from 'vue-router'
 import { TASK_TYPE, AGENT_STATUS, TRIGGER_TYPE, TASK_STATUS } from '@/constants'
 import TextOverflow from '@/components/TextOverflow.vue'
-import { format } from 'date-fns'
+
 
 const router = useRouter()
 const route = useRoute()
@@ -220,9 +220,7 @@ async function toggleTask(task: Task, enabled: boolean) {
 }
 
 const showLogViewer = ref(false)
-const selectedLogId = ref<string | undefined>()
-const latestLogStatus = ref('')
-const latestLogTitle = ref('')
+const selectedLog = ref<TaskLog | null>(null)
 const logContent = ref('')
 let logSocket: WebSocket | null = null
 
@@ -251,7 +249,7 @@ onUnmounted(() => {
 import { decompressFromBase64 } from '@/utils/decompress'
 
 const displayLogContent = computed(() => {
-  if (!logContent.value) return '无输出'
+  if (!logContent.value) return ''
   return decompressFromBase64(logContent.value)
 })
 
@@ -261,10 +259,7 @@ async function viewLogs(taskId: string) {
     if (res.data && res.data.length > 0) {
       const latestLog = res.data[0]
       if (!latestLog) return
-      const timeStr = latestLog.created_at ? format(new Date(latestLog.created_at), 'yyyy/MM/dd HH:mm:ss') : ''
-      latestLogTitle.value = `${latestLog.task_name || ''}${timeStr ? ` (${timeStr})` : ''}`
-      latestLogStatus.value = latestLog.status || ''
-      selectedLogId.value = latestLog.id
+      selectedLog.value = latestLog
       logContent.value = ''
       showLogViewer.value = true
 
@@ -554,14 +549,20 @@ watch(() => route.query.agent_id, (newVal: any) => {
               <span class="flex-1 text-[11px] truncate">{{ task.remark }}</span>
             </div>
           </div>
-          <div class="flex items-center justify-end gap-0.5 pt-2 border-t border-border/40">
-            <Button variant="ghost" class="h-7 px-1.5 text-[10px] gap-1" @click="runTask(task.id)" :disabled="executingTaskId === task.id">
-              <Loader2 v-if="executingTaskId === task.id" class="h-3 w-3 animate-spin" />
-              <Play v-else class="h-3 w-3" />执行
+          <div class="grid grid-cols-4 items-center pt-2 mt-2 border-t border-border/40 -mx-1">
+            <Button variant="ghost" class="h-9 px-0 text-xs gap-1.5 hover:bg-primary/5 rounded-none" @click="runTask(task.id)" :disabled="executingTaskId === task.id">
+              <Loader2 v-if="executingTaskId === task.id" class="h-3.5 w-3.5 animate-spin" />
+              <Play v-else class="h-3.5 w-3.5" />执行
+            </Button>
+            <Button variant="ghost" class="h-9 px-0 text-xs gap-1.5 hover:bg-primary/5 rounded-none border-l border-border/10" @click="viewLogs(task.id)">
+              <ScrollText class="h-3.5 w-3.5" />日志
+            </Button>
+            <Button variant="ghost" class="h-9 px-0 text-xs gap-1.5 hover:bg-primary/5 rounded-none border-l border-border/10" @click="openEdit(task)">
+              <Pencil class="h-3.5 w-3.5" />编辑
+            </Button>
+            <Button variant="ghost" class="h-9 px-0 text-xs gap-1.5 hover:bg-destructive/5 text-destructive rounded-none border-l border-border/10" @click="confirmDelete(task.id)">
+              <Trash2 class="h-3.5 w-3.5" />删除
             </Button>
-            <Button variant="ghost" class="h-7 px-1.5 text-[10px] gap-1" @click="viewLogs(task.id)"><ScrollText class="h-3 w-3" />日志</Button>
-            <Button variant="ghost" class="h-7 px-1.5 text-[10px] gap-1" @click="openEdit(task)"><Pencil class="h-3 w-3" />编辑</Button>
-            <Button variant="ghost" class="h-7 px-1.5 text-[10px] gap-1 text-destructive" @click="confirmDelete(task.id)"><Trash2 class="h-3 w-3" />删除</Button>
           </div>
         </div>
       </div>
@@ -576,9 +577,11 @@ watch(() => route.query.agent_id, (newVal: any) => {
     <!-- 仓库同步弹窗 -->
     <RepoDialog v-model:open="showRepoDialog" :task="editingTask" :is-edit="isEdit" @saved="loadTasks" />
 
-    <!-- 最新日志全屏查看 -->
-    <LogViewer v-model:open="showLogViewer" :title="`最新日志 - ${latestLogTitle}`"
-      :content="displayLogContent || '无输出'" :status="latestLogStatus" />
+    <LogViewer v-model:open="showLogViewer"
+      title="最新日志"
+      variant="full"
+      :log="selectedLog"
+      :content="displayLogContent" />
 
     <!-- 删除确认 (批量) -->
     <AlertDialog v-model:open="showBatchDeleteDialog">