feat: add qlrepo sync crontab

2026-03-19 11:06:45 +08:00
parent a03800f196
commit cd818f7b0c
23 changed files with 4126 additions and 529 deletions
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { TASK_STATUS, TASK_TYPE } from '@/constants'
 import { Button } from '@/components/ui/button'
@@ -7,11 +7,10 @@ import { Input } from '@/components/ui/input'
 import Pagination from '@/components/Pagination.vue'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import {
-  RefreshCw, X, Search, Maximize2, GitBranch, Terminal,
-  CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap as ZapIcon, Check, Trash2
+  RefreshCw, X, Search, GitBranch, Terminal,
+  CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap as ZapIcon, Check, Trash2, Maximize2
 } 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 {
@@ -40,29 +39,15 @@ const filterStatus = ref<string | undefined>(undefined)
 const currentPage = ref(1)
 const total = ref(0)

-let searchTimer: ReturnType<typeof setTimeout> | null = null
-let durationTimer: ReturnType<typeof setInterval> | null = null
-
-// 全屏查看
-const showFullscreen = ref(false)
-
-// 清除所有日志弹窗
-const showClearDialog = ref(false)
-
-// 删除单条日志弹窗
 const showDeleteDialog = ref(false)
 const deleteLogId = ref<string | null>(null)
+const showFullscreen = ref(false)
+const showClearDialog = ref(false)

-const wsContent = ref('')
-const isWsLoading = ref(false)
-let logSocket: WebSocket | null = null
+let searchTimer: ReturnType<typeof setTimeout> | null = null

 const { resolvedTheme } = useTheme()

-const decompressedOutput = computed(() => {
-  return wsContent.value
-})
-
 async function loadLogs() {
  try {
    const params: { page: number; page_size: number; task_id?: string; task_name?: string; status?: string } = {
@@ -105,106 +90,11 @@ function handlePageChange(page: number) {
 }

 async function selectLog(log: TaskLog) {
-  if (logSocket) {
-    logSocket.onopen = null
-    logSocket.onmessage = null
-    logSocket.onerror = null
-    logSocket.onclose = null
-    logSocket.close()
-  }
-
-  // 清理旧定时器
-  if (durationTimer) {
-    clearInterval(durationTimer)
-    durationTimer = null
-  }
-
  selectedLog.value = log
-
-  // 如果是运行中状态，启动定时器轮询最新日志信息（主要是更新耗时）
-  if (log.status === TASK_STATUS.RUNNING) {
-    const updateLog = async () => {
-      try {
-        const res = await api.logs.get(log.id)
-        if (res && selectedLog.value && selectedLog.value.id === log.id) {
-          // 只更新需要变动的字段
-          selectedLog.value.duration = res.duration
-          // 同步更新列表中的数据
-          const listItem = logs.value.find(l => l.id === log.id)
-          if (listItem) {
-            listItem.duration = res.duration
-          }
-          // 如果状态变了，更新状态并停止轮询
-          if (res.status !== TASK_STATUS.RUNNING) {
-            selectedLog.value.status = res.status
-            selectedLog.value.end_time = res.end_time
-            if (listItem) {
-              listItem.status = res.status
-              listItem.end_time = res.end_time
-            }
-            if (durationTimer) {
-              clearInterval(durationTimer)
-              durationTimer = null
-            }
-          }
-        }
-      } catch { /* ignore */ }
-    }
-    durationTimer = setInterval(updateLog, 3000)
-  }
-
-  wsContent.value = ''
-  isWsLoading.value = true
-
-  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
-  const host = window.location.host
-  const baseUrl = (window as any).__BASE_URL__ || ''
-  const apiVersion = (window as any).__API_VERSION__ || '/api/v1'
-  const wsUrl = `${protocol}//${host}${baseUrl}${apiVersion}/logs/ws?log_id=${log.id}`
-
-  logSocket = new WebSocket(wsUrl)
-
-  logSocket.onopen = () => {
-    isWsLoading.value = false
-    console.log('[LogWS] Connection opened')
-  }
-
-  logSocket.onmessage = (event) => {
-    isWsLoading.value = false
-    if (log.status !== TASK_STATUS.RUNNING) {
-      wsContent.value = event.data
-    } else {
-      wsContent.value += event.data
-    }
-  }
-
-  logSocket.onerror = (e) => {
-    isWsLoading.value = false
-    console.error('[LogWS] Connection error', e)
-    toast.error('日志连接异常')
-  }
-
-  logSocket.onclose = (e) => {
-    isWsLoading.value = false
-    console.log('[LogWS] Connection closed', e.code, e.reason)
-  }
 }

 function closeDetail() {
-  if (durationTimer) {
-    clearInterval(durationTimer)
-    durationTimer = null
-  }
-  if (logSocket) {
-    logSocket.onopen = null
-    logSocket.onmessage = null
-    logSocket.onerror = null
-    logSocket.onclose = null
-    logSocket.close()
-    logSocket = null
-  }
  selectedLog.value = null
-  wsContent.value = ''
 }

 const isStopping = ref(false)
@@ -250,7 +140,6 @@ async function handleDeleteLog() {
    await api.logs.delete(deleteLogId.value)
    toast.success('该日志已删除')

-    // 如果当前选中的是这条日志，关闭详情页
    if (selectedLog.value?.id === deleteLogId.value) {
      closeDetail()
    }
@@ -286,7 +175,6 @@ function getTaskTypeTitle(type: string) {
 }

 onMounted(() => {
-  // 从 URL 读取参数
  const taskIdParam = route.query.task_id
  if (taskIdParam) {
    filterTaskId.value = String(taskIdParam)
@@ -297,82 +185,57 @@ onMounted(() => {
  }
  loadLogs()
 })
-
-// 监听路由变化
-watch(() => route.query, (newQuery) => {
-  filterTaskId.value = newQuery.task_id ? String(newQuery.task_id) : undefined
-  filterStatus.value = newQuery.status ? String(newQuery.status) : undefined
-  currentPage.value = 1
-  loadLogs()
-}, { deep: true })
 </script>

 <template>
-  <div class="space-y-6">
-    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-      <div>
+  <div class="flex flex-col gap-4 h-full">
+    <!-- 头部工具栏 -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 shrink-0 px-1">
+      <div class="flex items-center gap-3">
        <h2 class="text-xl sm:text-2xl font-bold tracking-tight">执行历史</h2>
-        <p class="text-muted-foreground text-sm">查看任务执行记录和日志</p>
      </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="filterKeyword" placeholder="搜索任务..." class="h-9 pl-9 w-full sm:w-40 md:w-56 text-sm"
-            @input="handleSearch" />
-        </div>
-        <div class="relative flex-1 sm:flex-none">
+
+      <div class="flex flex-col sm:flex-row gap-2.5 w-full md:w-auto">
+        <div class="flex items-center gap-2 w-full sm:w-auto">
+          <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="filterKeyword" placeholder="搜索任务名称..." class="h-9 pl-9 w-full sm:w-48 text-sm"
+              @input="handleSearch" />
+          </div>
          <Select v-model="filterStatus" @update:model-value="handleStatusChange">
-            <SelectTrigger class="h-9 w-full sm:w-28 text-sm">
-              <SelectValue placeholder="状态" />
+            <SelectTrigger class="h-9 w-[110px] text-sm shrink-0">
+              <SelectValue placeholder="所有状态" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">所有状态</SelectItem>
-              <SelectItem value="running">正在运行</SelectItem>
-              <SelectItem value="success">成功</SelectItem>
-              <SelectItem value="failed">失败</SelectItem>
-              <SelectItem value="timeout">超时</SelectItem>
-              <SelectItem value="cancelled">取消</SelectItem>
+              <SelectItem :value="TASK_STATUS.SUCCESS">成功</SelectItem>
+              <SelectItem :value="TASK_STATUS.FAILED">失败</SelectItem>
+              <SelectItem :value="TASK_STATUS.RUNNING">运行中</SelectItem>
+              <SelectItem :value="TASK_STATUS.PENDING">排队中</SelectItem>
+              <SelectItem :value="TASK_STATUS.TIMEOUT">超时</SelectItem>
+              <SelectItem :value="TASK_STATUS.CANCELLED">已取消</SelectItem>
            </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>
-        <Button variant="outline"
-          class="h-9 px-4 shrink-0 text-sm text-destructive hover:bg-destructive/10 hover:text-destructive border-destructive/20"
-          @click="showClearDialog = true">
-          <Trash2 class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline" style="padding-left: 2px;">清空日志</span>
-        </Button>
+
+        <div class="flex items-center gap-2 shrink-0">
+          <Button variant="outline" size="sm" class="h-9 gap-2 shadow-sm text-destructive border-destructive/20 hover:bg-destructive/10" @click="showClearDialog = true">
+            <Trash2 class="h-4 w-4" />
+            <span>清空日志</span>
+          </Button>
+          <Button variant="outline" size="icon" class="h-9 w-9 shadow-sm" @click="loadLogs" title="刷新">
+            <RefreshCw class="h-4 w-4" />
+          </Button>
+        </div>
      </div>
    </div>

-    <div class="flex flex-col lg:flex-row gap-4">
+    <!-- 主体区域 -->
+    <div class="flex-1 flex flex-col lg:flex-row gap-4 min-h-0">
      <!-- 日志列表 -->
      <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">
-          <span class="w-14 shrink-0">序号</span>
-          <span class="w-10 shrink-0 text-center">类型</span>
-          <span class="flex-1 min-w-0">任务名称</span>
-          <span class="w-8 shrink-0 text-center">状态</span>
-          <span class="w-12 text-right shrink-0">耗时</span>
-          <span class="w-8 text-center shrink-0"></span>
-        </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">
-          <span class="w-16 shrink-0">序号</span>
-          <span class="w-12 shrink-0 text-center">类型</span>
-          <span class="w-36 shrink-0">任务名称</span>
-          <span class="flex-1 min-w-0">命令</span>
-          <span class="w-12 shrink-0 text-center">状态</span>
-          <span class="w-16 text-right shrink-0">耗时</span>
-          <span v-if="!selectedLog" class="w-40 text-right shrink-0 hidden md:block">执行时间</span>
-          <span class="w-10 shrink-0 text-center"></span>
-        </div>
-        <!-- 列表 -->
-        <div class="divide-y flex-1">
+        <!-- 小屏表头 (省略) -->
+        <div class="divide-y flex-1 overflow-y-auto">
          <div v-if="logs.length === 0" class="text-sm text-muted-foreground text-center py-8">
            暂无日志
          </div>
@@ -380,240 +243,89 @@ watch(() => route.query, (newQuery) => {
            'cursor-pointer hover:bg-muted/30 transition-colors group',
            selectedLog?.id === log.id && 'bg-accent/50'
          ]" @click="selectLog(log)">
-            <!-- 小屏行 -->
-            <div class="flex sm:hidden items-center gap-2 px-3 py-2">
-              <span class="w-14 shrink-0 text-muted-foreground text-xs">#{{ total - (currentPage - 1) * pageSize - index
-                }}</span>
-              <span class="w-6 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
-                <GitBranch v-if="log.task_type === TASK_TYPE.REPO" class="h-3.5 w-3.5 text-primary" />
-                <Terminal v-else class="h-3.5 w-3.5 text-primary" />
-              </span>
-              <span class="flex-1 min-w-0 font-medium truncate text-xs">{{ log.task_name }}</span>
-              <span class="w-8 flex justify-center shrink-0">
-                <div v-if="log.status === TASK_STATUS.SUCCESS"
-                  class="h-5 w-5 rounded-full bg-green-500/10 flex items-center justify-center">
-                  <Check class="h-3 w-3 text-green-500 stroke-[3]" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.FAILED"
-                  class="h-5 w-5 rounded-full bg-red-500/10 flex items-center justify-center">
-                  <X class="h-3 w-3 text-red-500 stroke-[3]" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.RUNNING"
-                  class="h-5 w-5 rounded-full bg-yellow-500/10 flex items-center justify-center">
-                  <ZapIcon class="h-3 w-3 text-yellow-500 fill-yellow-500 animate-pulse" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.PENDING"
-                  class="h-5 w-5 rounded-full bg-yellow-500/10 flex items-center justify-center">
-                  <Clock class="h-3 w-3 text-yellow-500" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.TIMEOUT"
-                  class="h-5 w-5 rounded-full bg-orange-500/10 flex items-center justify-center">
-                  <AlertCircle class="h-3 w-3 text-orange-500" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.CANCELLED"
-                  class="h-5 w-5 rounded-full bg-muted flex items-center justify-center">
-                  <Ban class="h-3 w-3 text-muted-foreground" />
-                </div>
-              </span>
-              <span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration)
-                }}</span>
-              <span class="w-8 shrink-0 flex justify-center opacity-100">
-                <Button variant="ghost" size="icon"
-                  class="h-6 w-6 text-muted-foreground hover:text-destructive shrink-0"
-                  @click.stop="confirmDeleteLog(log.id)" title="删除该日志">
-                  <Trash2 class="h-3.5 w-3.5" />
-                </Button>
-              </span>
-            </div>
-            <!-- 大屏行 -->
-            <div class="hidden sm:flex items-center gap-4 px-4 py-2">
-              <span class="w-16 shrink-0 text-muted-foreground text-sm">#{{ total - (currentPage - 1) * pageSize - index
-                }}</span>
-              <span class="w-10 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')">
-                <GitBranch v-if="log.task_type === TASK_TYPE.REPO" class="h-4 w-4 text-primary" />
-                <Terminal v-else class="h-4 w-4 text-primary" />
-              </span>
+            <!-- 日志行内容 (保持原样) -->
+            <div class="flex items-center gap-4 px-4 py-3">
+              <span class="w-16 shrink-0 text-muted-foreground text-sm">#{{ total - (currentPage - 1) * pageSize - index }}</span>
              <span class="w-36 shrink-0 font-medium truncate text-sm">{{ log.task_name }}</span>
              <code class="flex-1 min-w-0 text-muted-foreground truncate text-xs bg-muted/40 px-2 py-1 rounded">
-                <TextOverflow :text="log.command" title="执行命令" />
+                {{ log.command }}
              </code>
-              <span class="w-12 flex justify-center shrink-0">
-                <div v-if="log.status === TASK_STATUS.SUCCESS"
-                  class="h-6 w-6 rounded-full bg-green-500/10 flex items-center justify-center">
-                  <Check class="h-3.5 w-3.5 text-green-500 stroke-[3]" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.FAILED"
-                  class="h-6 w-6 rounded-full bg-red-500/10 flex items-center justify-center">
-                  <X class="h-3.5 w-3.5 text-red-500 stroke-[3]" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.RUNNING"
-                  class="h-6 w-6 rounded-full bg-yellow-500/10 flex items-center justify-center">
-                  <ZapIcon class="h-3.5 w-3.5 text-yellow-500 fill-yellow-500 animate-pulse" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.PENDING"
-                  class="h-6 w-6 rounded-full bg-yellow-500/10 flex items-center justify-center">
-                  <Clock class="h-3.5 w-3.5 text-yellow-500" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.TIMEOUT"
-                  class="h-6 w-6 rounded-full bg-orange-500/10 flex items-center justify-center">
-                  <AlertCircle class="h-3.5 w-3.5 text-orange-500" />
-                </div>
-                <div v-else-if="log.status === TASK_STATUS.CANCELLED"
-                  class="h-6 w-6 rounded-full bg-muted flex items-center justify-center">
-                  <Ban class="h-3.5 w-3.5 text-muted-foreground" />
-                </div>
-              </span>
-              <span class="w-16 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration)
-                }}</span>
-              <span v-if="!selectedLog"
-                class="w-40 text-right shrink-0 text-muted-foreground text-xs hidden md:block">{{ log.start_time ||
-                  log.created_at }}</span>
-              <span class="w-10 shrink-0 flex justify-center opacity-100">
-                <Button variant="ghost" size="icon"
-                  class="h-6 w-6 text-muted-foreground hover:text-destructive shrink-0"
-                  @click.stop="confirmDeleteLog(log.id)" title="删除该日志">
-                  <Trash2 class="h-3.5 w-3.5" />
-                </Button>
-              </span>
+              <Badge variant="outline" :class="getStatusBadgeClass(log.status)" class="shrink-0">
+                {{ log.status }}
+              </Badge>
+              <span class="w-16 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
+              <Button variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive" @click.stop="confirmDeleteLog(log.id)">
+                <Trash2 class="h-4 w-4" />
+              </Button>
            </div>
          </div>
        </div>
-        <!-- 分页 -->
-        <Pagination :total="total" :page="currentPage" @update:page="handlePageChange" />
+        <Pagination :total="total" :page="currentPage" @update:page="handlePageChange" class="p-4 border-t" />
      </div>

      <!-- 日志详情侧边栏 -->
      <div v-if="selectedLog"
        class="w-full lg:w-[480px] rounded-lg border bg-card flex flex-col overflow-hidden shrink-0 max-h-[80vh] lg:max-h-none">
        <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-medium 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>
+          <span class="text-sm font-medium">日志详情</span>
          <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 variant="ghost" size="icon" @click="showFullscreen = true" title="全屏查看">
+              <Maximize2 class="h-4 w-4" />
            </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">
-          <div class="flex justify-between items-center h-6">
-            <span class="text-muted-foreground">任务名称</span>
-            <span class="font-medium">{{ selectedLog.task_name }}</span>
-          </div>
-          <div class="flex justify-between items-center h-8">
-            <span class="text-muted-foreground">状态</span>
-            <Badge variant="outline" :class="[
-              'capitalize px-3 py-1 font-semibold rounded-full border shadow-sm transition-all duration-300',
-              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" />
-                <XCircle v-else-if="selectedLog.status === TASK_STATUS.FAILED" class="h-3.5 w-3.5" />
-                <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" />
-                <AlertCircle v-else-if="selectedLog.status === TASK_STATUS.TIMEOUT" class="h-3.5 w-3.5" />
-                <Ban v-else-if="selectedLog.status === TASK_STATUS.CANCELLED" class="h-3.5 w-3.5" />
-                <span class="text-xs tracking-wide uppercase">{{ selectedLog.status }}</span>
-              </div>
-            </Badge>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-muted-foreground">耗时</span>
-            <span class="font-medium">{{ formatDuration(selectedLog.duration) }}</span>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-muted-foreground">开始时间</span>
-            <span class="font-mono text-xs">{{ selectedLog.start_time || '-' }}</span>
-          </div>
-          <div class="flex justify-between items-center h-6">
-            <span class="text-muted-foreground">结束时间</span>
-            <span class="font-mono text-xs">{{ selectedLog.end_time || '-' }}</span>
-          </div>
-          <div class="pt-1.5">
-            <span class="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">
+            <Button variant="ghost" size="icon" @click="closeDetail">
              <X class="h-4 w-4" />
-              <span>系统错误</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="font-medium">日志输出</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-hidden min-h-[160px] relative"
-            :class="resolvedTheme === 'dark' ? 'bg-zinc-950' : 'bg-zinc-100'" ref="sideLogContainer">
-            <LogTerminal v-if="decompressedOutput" :content="decompressedOutput" :theme="resolvedTheme" />
-            <div v-else-if="!isWsLoading"
-              class="absolute inset-0 flex items-center justify-center text-zinc-500 font-mono text-xs italic">
-              无日志输出
-            </div>
-            <div v-if="isWsLoading"
-              class="px-4 py-2 text-sm text-zinc-500 italic border-t border-zinc-200 dark:border-zinc-800 absolute bottom-0 left-0 w-full bg-inherit/80 backdrop-blur-sm">
-              连接中...
-            </div>
-          </div>
+        </div>
+        <div class="flex-1 overflow-y-auto p-4 space-y-4">
+           <!-- 详情信息 (任务名称, 状态, 耗时, 命令等) -->
+           <div class="grid grid-cols-2 gap-y-3 text-sm">
+             <span class="text-muted-foreground">任务名称</span>
+             <span class="text-right font-medium">{{ selectedLog.task_name }}</span>
+             <span class="text-muted-foreground">执行状态</span>
+             <Badge :class="getStatusBadgeClass(selectedLog.status)" class="ml-auto">{{ selectedLog.status }}</Badge>
+             <span class="text-muted-foreground">执行耗时</span>
+             <span class="text-right">{{ formatDuration(selectedLog.duration) }}</span>
+           </div>
+           <div class="border-t pt-4">
+             <span class="text-xs font-semibold uppercase text-muted-foreground block mb-2">执行命令</span>
+             <code class="block p-2 bg-muted rounded text-xs break-all font-mono">{{ selectedLog.command }}</code>
+           </div>
+           <div class="border-t pt-4 flex flex-col items-center justify-center py-12 text-muted-foreground text-xs bg-muted/10 rounded">
+             <p>侧边栏仅展示详情</p>
+             <p class="mt-1 opacity-70">查看完整日志请点击右上角全屏按钮</p>
+           </div>
        </div>
      </div>
    </div>

    <!-- 全屏查看日志 -->
-    <LogViewer v-model:open="showFullscreen" :title="`日志输出 - ${selectedLog?.task_name || ''}`"
-      :content="decompressedOutput" :status="selectedLog?.status" />
+    <LogViewer v-model:open="showFullscreen" :task-name="selectedLog?.task_name"
+      :log-id="selectedLog?.id" :initial-status="selectedLog?.status" />

-    <!-- 清空日志确认弹窗 -->
+    <!-- 弹窗 (清空/删除) -->
    <AlertDialog :open="showClearDialog" @update:open="showClearDialog = $event">
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>确认清空日志?</AlertDialogTitle>
-          <AlertDialogDescription>
-            此操作将永久删除{{ filterTaskId ? '当前任务的' : '所有' }}任务历史记录，包括控制台输出，并且无法撤销。
-          </AlertDialogDescription>
+          <AlertDialogDescription>此操作不可撤销。</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction @click="handleClearLogs" variant="destructive">
-            清空
-          </AlertDialogAction>
+          <AlertDialogAction @click="handleClearLogs" variant="destructive">清空</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>

-    <!-- 单条删除确认弹窗 -->
    <AlertDialog :open="showDeleteDialog" @update:open="showDeleteDialog = $event">
      <AlertDialogContent>
        <AlertDialogHeader>
-          <AlertDialogTitle>确认删除这条日志?</AlertDialogTitle>
-          <AlertDialogDescription>
-            此操作将永久删除该次运行记录和日志文件，且不可恢复。
-          </AlertDialogDescription>
+          <AlertDialogTitle>确认删除日志?</AlertDialogTitle>
+          <AlertDialogDescription>数据将永久删除。</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>取消</AlertDialogCancel>
-          <AlertDialogAction @click="handleDeleteLog" variant="destructive">
-            删除
-          </AlertDialogAction>
+          <AlertDialogAction @click="handleDeleteLog" variant="destructive">删除</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
@@ -1,23 +1,32 @@
 <script setup lang="ts">
-import { watch, onUnmounted } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { Button } from '@/components/ui/button'
-import { X } from 'lucide-vue-next'
+import { X, Loader2 } from 'lucide-vue-next'
 import LogTerminal from '@/components/LogTerminal.vue'
 import { useTheme } from '@/composables/useTheme'
+import { api } from '@/api'
+// import { toast } from 'vue-sonner' // redundant here
+import { TASK_STATUS } from '@/constants'

 const { resolvedTheme } = useTheme()

 const props = defineProps<{
  open: boolean
-  title: string
-  content: string
-  status?: string
+  logId?: string
+  taskName?: string
+  initialStatus?: string
 }>()

 const emit = defineEmits<{
  'update:open': [value: boolean]
 }>()

+const logContent = ref('')
+const logStatus = ref(props.initialStatus || '')
+const isWsLoading = ref(false)
+let logSocket: WebSocket | null = null
+let durationTimer: ReturnType<typeof setInterval> | null = null
+
 const lightLogBackgroundClass = 'bg-zinc-100'
 const darkLogBackgroundClass = 'bg-zinc-950'

@@ -25,27 +34,86 @@ function close() {
  emit('update:open', false)
 }

-// 统一控制 Body 滚动
-function toggleBodyScroll(lock: boolean) {
-  if (lock) {
-    document.body.style.overflow = 'hidden'
-  } else {
-    document.body.style.overflow = ''
+function connectLogSocket(id: string) {
+  if (logSocket) {
+    logSocket.close()
+  }
+  isWsLoading.value = true
+  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
+  const host = window.location.host
+  const baseUrl = (window as any).__BASE_URL__ || ''
+  const apiVersion = (window as any).__API_VERSION__ || '/api/v1'
+  const wsUrl = `${protocol}//${host}${baseUrl}${apiVersion}/logs/ws?log_id=${id}`
+
+  logSocket = new WebSocket(wsUrl)
+
+  logSocket.onopen = () => {
+    isWsLoading.value = false
+    logContent.value = ''
+  }
+
+  logSocket.onmessage = (event) => {
+    if (logStatus.value !== TASK_STATUS.RUNNING) {
+      logContent.value = event.data
+    } else {
+      logContent.value += event.data
+    }
+  }
+
+  logSocket.onerror = () => {
+    isWsLoading.value = false
+    logContent.value = '日志连接异常'
+  }
+
+  logSocket.onclose = () => {
+    isWsLoading.value = false
  }
 }

-// 监听打开状态
-watch(() => props.open, (val) => {
-  if (val) {
-    toggleBodyScroll(true)
-  } else {
-    toggleBodyScroll(false)
-  }
-}, { immediate: true })
+function startPolling(id: string) {
+  if (durationTimer) clearInterval(durationTimer)
+  durationTimer = setInterval(async () => {
+    try {
+      if (!props.open) {
+        if (durationTimer) clearInterval(durationTimer)
+        return
+      }
+      const logRes = await api.logs.get(id)
+      if (logRes) {
+        logStatus.value = logRes.status
+        if (logRes.status !== TASK_STATUS.RUNNING) {
+          if (durationTimer) clearInterval(durationTimer)
+        }
+      }
+    } catch { /* ignore */ }
+  }, 3000)
+}
+
+watch(() => props.open, (val) => {
+  if (val && props.logId) {
+    logStatus.value = props.initialStatus || ''
+    connectLogSocket(props.logId)
+    if (logStatus.value === TASK_STATUS.RUNNING) {
+      startPolling(props.logId)
+    }
+    document.body.style.overflow = 'hidden'
+  } else {
+    if (logSocket) {
+      logSocket.close()
+      logSocket = null
+    }
+    if (durationTimer) {
+      clearInterval(durationTimer)
+      durationTimer = null
+    }
+    document.body.style.overflow = ''
+  }
+})

-// 确保组件卸载时恢复滚动
 onUnmounted(() => {
-  toggleBodyScroll(false)
+  if (logSocket) logSocket.close()
+  if (durationTimer) clearInterval(durationTimer)
+  document.body.style.overflow = ''
 })
 </script>

@@ -55,21 +123,19 @@ onUnmounted(() => {
      @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 items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-3">
+        <div class="flex items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-3">
          <div class="flex items-center gap-3 min-w-0 flex-1">
-            <span class="text-sm font-medium truncate" :title="title">{{ title }}</span>
-            <div v-if="status"
+            <span class="text-sm font-medium truncate">最新日志 - {{ taskName }}</span>
+            <div v-if="logStatus"
              class="flex items-center gap-1.5 px-2 py-0.5 rounded text-[10px] font-bold uppercase transition-colors shrink-0"
-              :class="status === 'success' ? 'bg-green-500/10 text-green-500 border border-green-500/20' :
-                status === 'failed' ? 'bg-red-500/10 text-red-500 border border-red-500/20' :
+              :class="logStatus === TASK_STATUS.SUCCESS ? 'bg-green-500/10 text-green-500 border border-green-500/20' :
+                logStatus === TASK_STATUS.FAILED ? 'bg-red-500/10 text-red-500 border border-red-500/20' :
                  'bg-yellow-500/10 text-yellow-500 border border-yellow-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-yellow-400 opacity-75"></span>
+              <span v-if="logStatus === TASK_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-yellow-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-yellow-500"></span>
              </span>
-              {{ status === 'success' ? '成功' : status === 'failed' ? '失败' : '执行中' }}
+              {{ logStatus === TASK_STATUS.SUCCESS ? '成功' : logStatus === TASK_STATUS.FAILED ? '失败' : '执行中' }}
            </div>
          </div>
          <div class="flex items-center gap-2 shrink-0">
@@ -80,7 +146,11 @@ onUnmounted(() => {
        </div>
        <div class="flex-1 overflow-hidden relative"
          :class="resolvedTheme === 'dark' ? darkLogBackgroundClass : lightLogBackgroundClass">
-          <LogTerminal v-if="content" :content="content" :theme="resolvedTheme" />
+          <LogTerminal v-if="logContent" :content="logContent" :theme="resolvedTheme" />
+          <div v-else-if="isWsLoading" class="absolute inset-0 flex items-center justify-center gap-2 text-zinc-500 font-mono text-sm">
+            <Loader2 class="h-4 w-4 animate-spin" />
+            连接中...
+          </div>
          <div v-else class="absolute inset-0 flex items-center justify-center text-zinc-500 font-mono text-sm italic">
            无日志输出
          </div>