admin/TaskPool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refact scheduler

Browse Source
This commit is contained in:
engigu
2026-02-07 21:44:09 +08:00
parent cdf3b3dbdc
commit f746c871fa
37 changed files with 2888 additions and 1316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/history/History.vue
+135 -58
View File
@@ -1,14 +1,13 @@
<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue'
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Pagination from '@/components/Pagination.vue'
import LogViewer from './LogViewer.vue'
import { RefreshCw, X, Search, Maximize2, GitBranch, Terminal } from 'lucide-vue-next'
import { api, type TaskLog, type LogDetail } from '@/api'
import { api, type TaskLog } from '@/api'
import { toast } from 'vue-sonner'
import pako from 'pako'
import { useSiteSettings } from '@/composables/useSiteSettings'
import TextOverflow from '@/components/TextOverflow.vue'
@@ -17,34 +16,24 @@ const { pageSize } = useSiteSettings()
const logs = ref<TaskLog[]>([])
const selectedLog = ref<TaskLog | null>(null)
const logDetail = ref<LogDetail | null>(null)
const filterKeyword = ref('')
const filterTaskId = ref<number | 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)
function decompressOutput(compressed: string): string {
if (!compressed) return '无输出'
try {
const binaryString = atob(compressed)
const bytes = new Uint8Array(binaryString.length)
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
const decompressed = pako.inflate(bytes)
return new TextDecoder().decode(decompressed)
} catch {
return compressed
}
}
const wsContent = ref('')
const isWsLoading = ref(false)
let logSocket: WebSocket | null = null
const decompressedOutput = computed(() => {
if (!logDetail.value?.output) return '无输出'
return decompressOutput(logDetail.value.output)
return wsContent.value || '无输出'
})
async function loadLogs() {
@@ -81,24 +70,109 @@ function handlePageChange(page: number) {
}
async function selectLog(log: TaskLog) {
if (logSocket) {
logSocket.close()
}
// 清理旧定时器
if (durationTimer) {
clearInterval(durationTimer)
durationTimer = null
}
selectedLog.value = log
logDetail.value = null
try {
logDetail.value = await api.logs.detail(log.id)
} catch {
toast.error('加载日志详情失败')
// 如果是运行中状态，启动定时器轮询最新日志信息（主要是更新耗时）
if (log.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 !== '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 !== 'running') {
wsContent.value = event.data
} else {
wsContent.value += event.data
// 自动滚动到底部
nextTick(() => {
const pre = document.querySelector('.log-pre')
if (pre) pre.scrollTop = pre.scrollHeight
})
}
}
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.close()
logSocket = null
}
selectedLog.value = null
logDetail.value = null
wsContent.value = ''
}
function formatDuration(ms: number): string {
if (ms < 1000) return `${ms}ms`
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
return `${(ms / 60000).toFixed(1)}m`
if (ms < 1000) return `${ms}毫秒`
if (ms < 60000) return `${(ms / 1000).toFixed(1)}秒`
return `${(ms / 60000).toFixed(1)}分钟`
}
function getTaskTypeTitle(type: string) {
@@ -132,7 +206,8 @@ watch(() => route.query.task_id, (newTaskId) => {
<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-56 text-sm" @input="handleSearch" />
<Input v-model="filterKeyword" placeholder="搜索任务..." class="h-9 pl-9 w-full sm:w-56 text-sm"
@input="handleSearch" />
</div>
<Button variant="outline" size="icon" class="h-9 w-9 shrink-0" @click="loadLogs">
<RefreshCw class="h-4 w-4" />
@@ -144,7 +219,8 @@ watch(() => route.query.task_id, (newTaskId) => {
<!-- 日志列表 -->
<div class="flex-1 min-w-0 rounded-lg border bg-card overflow-hidden">
<!-- 小屏表头 -->
<div class="flex sm:hidden items-center gap-2 px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground font-medium">
<div
class="flex sm:hidden items-center gap-2 px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground font-medium">
<span class="w-14 shrink-0">ID</span>
<span class="w-10 shrink-0 text-center">类型</span>
<span class="flex-1 min-w-0">任务名称</span>
@@ -152,7 +228,8 @@ watch(() => route.query.task_id, (newTaskId) => {
<span class="w-12 text-right shrink-0">耗时</span>
</div>
<!-- 大屏表头 -->
<div class="hidden sm:flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium">
<div
class="hidden sm:flex items-center gap-4 px-4 py-2 border-b bg-muted/50 text-sm text-muted-foreground font-medium">
<span class="w-16 shrink-0">ID</span>
<span class="w-12 shrink-0 text-center">类型</span>
<span class="w-36 shrink-0">任务名称</span>
@@ -166,15 +243,10 @@ watch(() => route.query.task_id, (newTaskId) => {
<div v-if="logs.length === 0" class="text-sm text-muted-foreground text-center py-8">
暂无日志
</div>
<div
v-for="log in logs"
:key="log.id"
:class="[
'cursor-pointer hover:bg-muted/50 transition-colors',
selectedLog?.id === log.id && 'bg-accent'
]"
@click="selectLog(log)"
>
<div v-for="log in logs" :key="log.id" :class="[
'cursor-pointer hover:bg-muted/50 transition-colors',
selectedLog?.id === log.id && 'bg-accent'
]" @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">#{{ log.id }}</span>
@@ -185,10 +257,13 @@ watch(() => route.query.task_id, (newTaskId) => {
<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">
<span class="relative flex h-2.5 w-2.5">
<span :class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
<span
:class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'"
class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
</span>
</span>
<span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) }}</span>
<span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration)
}}</span>
</div>
<!-- 大屏行 -->
<div class="hidden sm:flex items-center gap-4 px-4 py-2">
@@ -203,11 +278,16 @@ watch(() => route.query.task_id, (newTaskId) => {
</code>
<span class="w-12 flex justify-center shrink-0">
<span class="relative flex h-2.5 w-2.5">
<span :class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
<span
:class="log.status === 'success' ? 'bg-green-500' : log.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'"
class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
</span>
</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-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>
</div>
</div>
</div>
@@ -216,10 +296,8 @@ watch(() => route.query.task_id, (newTaskId) => {
</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-[60vh] lg:max-h-[calc(100vh-180px)]"
>
<div v-if="selectedLog"
class="w-full lg:w-[480px] rounded-lg border bg-card flex flex-col overflow-hidden shrink-0 max-h-[60vh] lg:max-h-[calc(100vh-180px)]">
<div class="flex items-center justify-between px-4 py-3 border-b">
<span class="text-sm font-medium">日志详情</span>
<Button variant="ghost" size="icon" class="h-7 w-7" @click="closeDetail">
@@ -235,7 +313,9 @@ watch(() => route.query.task_id, (newTaskId) => {
<span class="text-muted-foreground">状态</span>
<span class="flex items-center gap-1.5">
<span class="relative flex h-2.5 w-2.5">
<span :class="selectedLog.status === 'success' ? 'bg-green-500' : selectedLog.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'" class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
<span
:class="selectedLog.status === 'success' ? 'bg-green-500' : selectedLog.status === 'failed' ? 'bg-red-500' : 'bg-yellow-500'"
class="relative inline-flex rounded-full h-2.5 w-2.5"></span>
</span>
{{ selectedLog.status }}
</span>
@@ -267,18 +347,15 @@ watch(() => route.query.task_id, (newTaskId) => {
</Button>
</div>
<div class="flex-1 overflow-auto">
<pre v-if="logDetail" class="p-4 text-xs font-mono whitespace-pre-wrap break-all">{{ decompressedOutput }}</pre>
<div v-else class="p-4 text-sm text-muted-foreground">加载中...</div>
<pre class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre">{{ decompressedOutput }}</pre>
<div v-if="isWsLoading" class="p-4 text-sm text-muted-foreground italic">连接中...</div>
</div>
</div>
</div>
</div>
<!-- 全屏查看日志 -->
<LogViewer
v-model:open="showFullscreen"
:title="`日志输出 - ${selectedLog?.task_name || ''}`"
:content="decompressedOutput"
/>
<LogViewer v-model:open="showFullscreen" :title="`日志输出 - ${selectedLog?.task_name || ''}`"
:content="decompressedOutput" :status="selectedLog?.status" />
</div>
</template>
web/src/views/history/LogViewer.vue
+17 -2
View File
@@ -8,6 +8,7 @@ const props = defineProps<{
open: boolean
title: string
content: string
status?: string
}>()
const emit = defineEmits<{
@@ -45,7 +46,21 @@ watch(() => props.open, (val) => {
>
<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">
<span class="text-sm font-medium truncate">{{ title }}</span>
<div class="flex items-center gap-3 min-w-0">
<span class="text-sm font-medium truncate">{{ title }}</span>
<div v-if="status"
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' :
'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 class="relative inline-flex rounded-full h-1.5 w-1.5 bg-yellow-500"></span>
</span>
{{ status === 'success' ? '成功' : status === 'failed' ? '失败' : '执行中' }}
</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" />
@@ -56,7 +71,7 @@ watch(() => props.open, (val) => {
</Button>
</div>
</div>
<div class="flex-1 overflow-auto">
<div class="flex-1 overflow-auto bg-black/5 dark:bg-white/5">
<pre class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all" v-html="highlightedContent"></pre>
</div>
</div>