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

feat: add qlrepo sync crontab

Browse Source
This commit is contained in:
engigu
2026-03-19 11:06:45 +08:00
parent a03800f196
commit cd818f7b0c
23 changed files with 4126 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/history/History.vue
+83 -371
View File
@@ -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>
web/src/views/history/LogViewer.vue
+102 -32
View File
@@ -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>
web/src/views/settings/AboutSettings.vue
+26 -6
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Badge } from '@/components/ui/badge'
import { ExternalLink, TriangleAlert } from 'lucide-vue-next'
import { ExternalLink, TriangleAlert, History } from 'lucide-vue-next'
import { api, type AboutInfo } from '@/api'
const aboutInfo = ref<AboutInfo | null>(null)
@@ -21,9 +21,16 @@ onMounted(loadAbout)
<template>
<div>
<!-- 站点关于 -->
<div class="mb-6">
<h3 class="text-lg font-semibold mb-1">白虎面板 (Baihu Panel)</h3>
<p class="text-sm text-muted-foreground">极致轻量、高性能的自动化任务调度平台。深度集成 Mise 运行时管理，支持多语言环境动态切换与全自动依赖管理。</p>
<div class="mb-8 flex flex-col sm:flex-row justify-between items-start gap-4">
<div class="flex-1 min-w-0">
<h3 class="text-xl font-bold mb-1.5">白虎面板 (Baihu Panel)</h3>
<p class="text-sm text-muted-foreground leading-relaxed">极致轻量、高性能的自动化任务调度平台。深度集成 Mise 运行时管理，支持多语言环境动态切换与全自动依赖管理。</p>
</div>
<a href="https://engigu.github.io/baihu-panel/guide/changelog.html" target="_blank"
class="inline-flex items-center gap-1.5 h-9 px-4 rounded-full border border-primary/20 bg-primary/5 text-primary text-xs font-semibold hover:bg-primary/10 transition-all whitespace-nowrap shadow-sm shadow-primary/5">
<History class="h-3.5 w-3.5" />
查看更新日志
</a>
</div>
<div class="grid sm:grid-cols-2 gap-x-8 gap-y-5">
@@ -51,8 +58,21 @@ onMounted(loadAbout)
<h4 class="text-sm font-medium mb-2">系统信息</h4>
<div class="space-y-2">
<div class="flex justify-between items-center">
<span class="text-muted-foreground text-sm">系统版本:</span>
<Badge variant="outline" class="font-mono text-xs">{{ aboutInfo?.version || 'dev' }}</Badge>
<span class="text-muted-foreground text-sm">当前版本:</span>
<div class="flex items-center gap-1.5">
<Badge variant="outline" class="font-mono text-xs">{{ aboutInfo?.version || 'dev' }}</Badge>
<Badge v-if="aboutInfo?.remote_version && aboutInfo.remote_version === aboutInfo.version" variant="secondary"
class="text-[10px] h-4 px-1 bg-green-500/10 text-green-600 border-green-500/20">
最新版本
</Badge>
</div>
</div>
<div v-if="aboutInfo?.remote_version && aboutInfo.remote_version !== aboutInfo.version"
class="flex justify-between items-center">
<span class="text-muted-foreground text-sm">最新版本:</span>
<Badge variant="secondary" class="font-mono text-xs bg-primary/10 text-primary border-primary/20">
{{ aboutInfo.remote_version }}
</Badge>
</div>
<div class="flex justify-between items-center">
<span class="text-muted-foreground text-sm">构建时间:</span>
web/src/views/tasks/RepoDialog.vue
+407 -53
View File
@@ -1,16 +1,17 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { Checkbox } from '@/components/ui/checkbox'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import DirTreeSelect from '@/components/DirTreeSelect.vue'
import { X, Globe, GitBranch, Shield, Zap, Clock } from 'lucide-vue-next'
import { api, type Task, type RepoConfig, type Agent } from '@/api'
import { X, Globe, GitBranch, Shield, Zap, Clock, Download, Plus, Search, Check, ChevronsUpDown, Loader2, AlertCircle } from 'lucide-vue-next'
import { api, type Task, type RepoConfig, type Agent, type MiseLanguage } from '@/api'
import { toast } from 'vue-sonner'
import { cn } from '@/lib/utils'
import { getCronDescription } from '@/utils/cron'
@@ -56,7 +57,12 @@ const repoConfig = ref<RepoConfig>({
proxy_url: '',
auth_token: '',
whitelist_paths: '',
blacklist: '',
dependence: '',
extensions: '',
auto_add_cron: false,
concurrency: 1,
repo_source: '',
proxy: ''
})
const cleanType = ref('none')
@@ -64,7 +70,171 @@ const cleanKeep = ref(30)
const allAgents = ref<Agent[]>([])
const selectedAgentId = ref<string>('local')
const tagInput = ref('')
const whitelistInput = ref('')
const autoAddCron = computed({
get: () => !!repoConfig.value.auto_add_cron,
set: (val: boolean) => {
repoConfig.value.auto_add_cron = val
}
})
// === 语言环境相关 ===
const installedLangs = ref<MiseLanguage[]>([])
const loadingLangs = ref(false)
const selectedLangs = ref<{ name: string; version: string; availableVersions: string[] }[]>([])
const availablePlugins = ref<string[]>([])
const pluginSearch = ref('')
const versionSearch = ref('')
const filteredPlugins = computed(() => {
if (!pluginSearch.value) return availablePlugins.value
const s = pluginSearch.value.toLowerCase()
return availablePlugins.value.filter(p => p.toLowerCase().includes(s))
})
function getFilteredVersions(versions: string[]) {
if (!versionSearch.value) return versions
const s = versionSearch.value.toLowerCase()
return versions.filter(v => v.toLowerCase().includes(s))
}
async function fetchInstalledLangs() {
loadingLangs.value = true
try {
installedLangs.value = await api.mise.list()
const plugins = new Set<string>()
installedLangs.value.forEach(l => plugins.add(l.plugin))
availablePlugins.value = Array.from(plugins).sort()
} catch (e) {
console.error('Fetch installed langs failed', e)
} finally {
loadingLangs.value = false
}
}
function getLangIcon(plugin: string) {
const name = plugin?.toLowerCase().trim()
const mapping: Record<string, string> = {
'python': 'python/python-original.svg',
'node': 'nodejs/nodejs-original.svg',
'nodejs': 'nodejs/nodejs-original.svg',
'go': 'go/go-original.svg',
'rust': 'rust/rust-original.svg',
'ruby': 'ruby/ruby-plain.svg',
'php': 'php/php-plain.svg',
'java': 'java/java-plain.svg',
'deno': 'deno/deno-plain.svg',
'bun': 'bun/bun-plain.svg',
'zig': 'zig/zig-original.svg',
'dotnet': 'dot-net/dot-net-original.svg',
'.net': 'dot-net/dot-net-original.svg',
'elixir': 'elixir/elixir-original.svg',
'erlang': 'erlang/erlang-original.svg',
'crystal': 'crystal/crystal-original.svg',
'lua': 'lua/lua-original.svg',
'julia': 'julia/julia-original.svg',
'nim': 'nim/nim-original.svg',
'perl': 'perl/perl-original.svg',
'scala': 'scala/scala-original.svg',
'kotlin': 'kotlin/kotlin-original.svg',
'clojure': 'clojure/clojure-line.svg',
'dart': 'dart/dart-original.svg',
'flutter': 'flutter/flutter-original.svg',
'terraform': 'terraform/terraform-original.svg',
'docker': 'docker/docker-original.svg',
'kubernetes': 'kubernetes/kubernetes-plain.svg',
'ansible': 'ansible/ansible-original.svg',
}
if (mapping[name]) {
return `https://fastly.jsdelivr.net/gh/devicons/devicon/icons/${mapping[name]}`
}
return ''
}
function updateAvailableVersions(lang: { name: string; version: string; availableVersions: string[] }) {
if (lang.name) {
lang.availableVersions = installedLangs.value
.filter(l => l.plugin === lang.name)
.map(l => l.version)
.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }))
} else {
lang.availableVersions = []
}
}
function addLang() {
selectedLangs.value.push({ name: '', version: '', availableVersions: [] })
}
function removeLang(index: number) {
selectedLangs.value.splice(index, 1)
}
function updateLangName(index: number, name: string) {
const lang = selectedLangs.value[index]
if (!lang) return
lang.name = name
lang.version = '' // reset version
updateAvailableVersions(lang)
}
const showQlImportDialog = ref(false)
const qlCommandInput = ref('')
function importFromQl() {
qlCommandInput.value = ''
showQlImportDialog.value = true
}
function submitQlImport() {
const s = qlCommandInput.value.trim()
if (!s) {
showQlImportDialog.value = false
return
}
if (!s.startsWith('ql repo')) {
toast.error('无效的指令：必须以 ql repo 开头')
return
}
// Parse arguments handling quotes
const args: string[] = []
const regex = /[^\s"']+|"([^"]*)"|'([^']*)'/g
let match
while ((match = regex.exec(s)) !== null) {
args.push(match[1] || match[2] || match[0])
}
if (args[2]) {
repoConfig.value.source_url = args[2]
repoConfig.value.source_type = 'git'
// form task name
let name = '同步 '
try {
const urlPaths = args[2].split('/')
if (urlPaths.length > 0) {
name += urlPaths[urlPaths.length - 1].replace('.git', '')
} else {
name += '未命名仓库'
}
} catch {
name += '未命名仓库'
}
form.value.name = name
}
if (args[3]) repoConfig.value.whitelist_paths = args[3]
if (args[4]) repoConfig.value.blacklist = args[4]
if (args[5]) repoConfig.value.dependence = args[5]
if (args[6]) repoConfig.value.branch = args[6]
if (args[7]) repoConfig.value.extensions = args[7]
repoConfig.value.auto_add_cron = true
repoConfig.value.repo_source = 'ql'
toast.success('指令解析成功，已开启自动添加任务，请继续完善其他设置')
showQlImportDialog.value = false
}
const cronDescription = computed(() => {
if (!form.value.schedule) return ''
@@ -87,21 +257,6 @@ function removeTag(tagToRemove: string) {
form.value.tags = currentTags.filter(t => t !== tagToRemove).join(',')
}
function addWhitelistPath() {
const val = whitelistInput.value.trim()
if (!val) return
const current = repoConfig.value.whitelist_paths ? repoConfig.value.whitelist_paths.split(',').filter(Boolean) : []
if (!current.includes(val)) {
current.push(val)
repoConfig.value.whitelist_paths = current.join(',')
}
whitelistInput.value = ''
}
function removeWhitelistPath(path: string) {
const current = repoConfig.value.whitelist_paths ? repoConfig.value.whitelist_paths.split(',').filter(Boolean) : []
repoConfig.value.whitelist_paths = current.filter(p => p !== path).join(',')
}
const concurrencyEnabled = computed({
get: () => repoConfig.value.concurrency === 1,
@@ -162,7 +317,12 @@ watch(() => props.open, async (val) => {
proxy_url: '',
auth_token: '',
whitelist_paths: '',
concurrency: 1
blacklist: '',
dependence: '',
extensions: '',
auto_add_cron: false,
concurrency: 1,
repo_source: ''
}
const configStr = props.task?.config
if (configStr) {
@@ -180,10 +340,27 @@ watch(() => props.open, async (val) => {
} else {
repoConfig.value = defaultConfig
}
// 解析语言环境
selectedLangs.value = []
if (props.task?.languages && Array.isArray(props.task.languages)) {
selectedLangs.value = props.task.languages.map((l: any) => ({
name: l.name || '',
version: l.version || '',
availableVersions: []
}))
}
// 仓库任务暂时仅支持本地执行
selectedAgentId.value = 'local'
// 加载 Agent 列表
await loadAgents()
if (selectedAgentId.value === 'local') {
await fetchInstalledLangs()
selectedLangs.value.forEach(lang => {
updateAvailableVersions(lang)
})
}
}
})
@@ -194,6 +371,13 @@ async function loadAgents() {
}
async function save() {
if (repoConfig.value.auto_add_cron) {
if (selectedLangs.value.length === 0 || !selectedLangs.value[0].name) {
toast.error('您开启了“自动添加任务”，请先至少添加并选择一个运行语言环境和版本')
return
}
}
try {
form.value.clean_config = cleanConfig.value
form.value.type = 'repo'
@@ -205,6 +389,12 @@ async function save() {
'$task_concurrency': concurrencyEnabled.value ? 1 : 0
}
// 保存语言环境
form.value.languages = selectedLangs.value.map(l => ({
name: l.name,
version: l.version
}))
form.value.config = JSON.stringify(configToSave)
form.value.command = `[${repoConfig.value.source_type}] ${repoConfig.value.source_url}`
form.value.agent_id = selectedAgentId.value === 'local' ? null : selectedAgentId.value
@@ -228,9 +418,15 @@ async function save() {
<div class="flex flex-col max-h-[85vh]">
<DialogHeader class="px-6 pt-6 pb-2 shrink-0">
<DialogTitle class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}
</DialogTitle>
<div class="flex items-center justify-between">
<DialogTitle class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
{{ isEdit ? '编辑仓库同步' : '新建仓库同步' }}
</DialogTitle>
<Button v-if="!isEdit" variant="outline" size="sm" @click="importFromQl" class="h-8 gap-1.5 bg-primary/5 hover:bg-primary/10 border-primary/20 hover:border-primary/40 text-primary">
<Download class="w-3.5 h-3.5" />
青龙格式导入
</Button>
</div>
</DialogHeader>
<ScrollArea class="flex-1 min-h-0 px-6">
@@ -325,36 +521,6 @@ async function save() {
<Input v-else v-model="repoConfig.target_path" placeholder="Agent 上的目标路径" class="h-9 bg-muted/30 border-muted-foreground/20" />
</div>
</div>
<!-- 新增：白名单路径 -->
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider pt-2.5">
白名单路径
</Label>
<div class="sm:col-span-3 space-y-2">
<div class="flex gap-2">
<div class="relative flex-1">
<Input v-model="whitelistInput" placeholder="输入路径或通配符按回车... (如 logs/ 或 *.db)" class="h-9 bg-muted/30 border-muted-foreground/20 pr-12 focus:bg-background" @keydown.enter.prevent="addWhitelistPath" />
<Button type="button" variant="ghost" size="sm" class="absolute right-1 top-1 h-7 px-2 text-xs hover:bg-primary/10 hover:text-primary transition-colors" @click="addWhitelistPath">
添加
</Button>
</div>
</div>
<div class="flex flex-wrap gap-1.5 pt-1 min-h-[1.5rem]" v-if="repoConfig.whitelist_paths">
<span v-for="path in repoConfig.whitelist_paths.split(',').filter(Boolean)" :key="path"
class="flex items-center gap-1.5 bg-blue-500/5 text-blue-500 px-2.5 py-1 rounded-md text-[11px] font-medium border border-blue-500/10 group transition-all hover:bg-blue-500/10">
{{ path }}
<button type="button" class="text-blue-500/40 hover:text-destructive transition-colors shrink-0" @click.prevent="removeWhitelistPath(path)">
<X class="h-3 w-3" />
</button>
</span>
</div>
<p class="text-[10px] text-muted-foreground mt-1 px-1 leading-relaxed">
同步时将保留匹配上述路径的内容（支持 * 通配符）。匹配项在同步前会被暂存，并在同步完成后自动回填还原。
</p>
</div>
</div>
<div v-if="repoConfig.source_type === 'git'" class="grid grid-cols-1 sm:grid-cols-4 items-center gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">分支</Label>
<Input v-model="repoConfig.branch" placeholder="main (默认)" class="sm:col-span-3 h-9 bg-muted/30 border-muted-foreground/20 focus:bg-background transition-all" autocomplete="off" />
@@ -414,6 +580,150 @@ async function save() {
</div>
</section>
<!-- 脚本过滤 Section -->
<section class="space-y-4">
<div class="flex items-center gap-2 mb-1">
<div class="h-4 w-1 bg-primary rounded-full" />
<h3 class="text-sm font-semibold text-foreground/80">脚本过滤</h3>
</div>
<div class="grid gap-4 pl-3 border-l border-muted">
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">白名单</Label>
<div class="sm:col-span-3 relative">
<Input v-model="repoConfig.whitelist_paths" placeholder="保活路径或脚本关键词 (如: logs/ | jd_ )" class="h-9 bg-muted/30 border-muted-foreground/20 focus:bg-background transition-all" autocomplete="off" />
<p class="text-[10px] text-muted-foreground mt-1 px-1 leading-relaxed">请输入脚本筛选白名单关键词或保活路径（支持 *），多个关键词或路径使用竖线(|)或逗号(,)分割</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">脚本黑名单</Label>
<div class="sm:col-span-3 relative">
<Input v-model="repoConfig.blacklist" placeholder="黑名单关键词 (如: help)" class="h-9 bg-muted/30 border-muted-foreground/20 focus:bg-background transition-all" autocomplete="off" />
<p class="text-[10px] text-muted-foreground mt-1 px-1">脚本筛选黑名单关键词，多个关键词竖线(|)分割</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">依赖文件</Label>
<div class="sm:col-span-3 relative">
<Input v-model="repoConfig.dependence" placeholder="依赖文件关键词 (如: ccav | notify)" class="h-9 bg-muted/30 border-muted-foreground/20 focus:bg-background transition-all" autocomplete="off" />
<p class="text-[10px] text-muted-foreground mt-1 px-1">脚本依赖文件关键词，多个关键词竖线(|)分割</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-4 items-center gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">文件后缀</Label>
<div class="sm:col-span-3 relative">
<Input v-model="repoConfig.extensions" placeholder="文件后缀 (如: js | py | sh)" class="h-9 bg-muted/30 border-muted-foreground/20 focus:bg-background transition-all" autocomplete="off" />
<p class="text-[10px] text-muted-foreground mt-1 px-1">脚本文件后缀，多个后缀竖线(|)分割</p>
</div>
</div>
</div>
</section>
<!-- 运行环境 Section -->
<section v-if="selectedAgentId === 'local'" class="space-y-4">
<div class="flex items-center gap-2 mb-1">
<div class="h-4 w-1 bg-primary rounded-full" />
<h3 class="text-sm font-semibold text-foreground/80">运行环境</h3>
</div>
<div class="grid gap-4 pl-3 border-l border-muted">
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-3 mt-2">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider pt-2.5">语言环境</Label>
<div class="sm:col-span-3 space-y-2">
<div class="flex items-start gap-2.5 p-3 rounded-xl bg-amber-500/5 border border-amber-500/10 text-amber-600 dark:text-amber-400 text-[11px] leading-relaxed mb-2">
<AlertCircle class="h-4 w-4 shrink-0 text-amber-500 mt-0.5" />
<p>同步后生成的任务将自动继承此运行环境。如果不指定语言版本，某些依赖特定语言的脚本（如 js, py）将无法顺利解析和运行！</p>
</div>
<div v-for="(clang, idx) in selectedLangs" :key="idx"
class="flex gap-2 p-2 rounded-lg bg-muted/20 border border-muted-foreground/10 group/lang relative overflow-hidden">
<div class="absolute left-0 top-0 bottom-0 w-0.5 bg-primary/20 group-hover/lang:bg-primary transition-colors" />
<Popover>
<PopoverTrigger asChild>
<Button variant="ghost" role="combobox" class="justify-between flex-1 h-8 text-xs font-normal hover:bg-background/50">
<div class="flex items-center gap-2 truncate">
<div v-if="clang.name && getLangIcon(clang.name)" class="w-4 h-4 shrink-0 rounded-sm bg-white p-0.5 border shadow-sm">
<img :src="getLangIcon(clang.name)" class="w-full h-full object-contain" />
</div>
<span class="font-medium">{{ clang.name || "选择插件..." }}</span>
</div>
<ChevronsUpDown class="ml-1 h-3 w-3 opacity-40" />
</Button>
</PopoverTrigger>
<PopoverContent class="p-0 w-[240px]" align="start">
<div class="p-2 border-b bg-muted/30">
<div class="relative">
<Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input v-model="pluginSearch" placeholder="搜索已安装语言..." class="h-8 pl-8 text-xs bg-background" />
</div>
</div>
<ScrollArea class="h-48 p-1">
<div v-if="loadingLangs" class="flex items-center justify-center py-6">
<Loader2 class="h-5 w-5 animate-spin text-primary/50" />
</div>
<div v-else-if="filteredPlugins.length === 0" class="py-6 text-center text-xs text-muted-foreground">
未找到匹配项
</div>
<button v-else v-for="p in filteredPlugins" :key="p" @click="updateLangName(idx, p)"
class="w-full flex items-center px-3 py-2 text-xs rounded-md hover:bg-accent text-left transition-all group/item mb-0.5">
<div class="mr-3 h-5 w-5 shrink-0 flex items-center justify-center transition-transform group-hover/item:scale-110">
<img v-if="getLangIcon(p)" :src="getLangIcon(p)" class="w-full h-full object-contain p-0.5 bg-white rounded border" />
<div v-else class="w-full h-full flex items-center justify-center bg-primary/10 rounded-sm text-[8px] font-bold border">
{{ p.substring(0, 2) }}
</div>
</div>
<span class="flex-1" :class="{ 'font-bold text-primary': clang.name === p }">{{ p }}</span>
<Check v-if="clang.name === p" class="h-3 w-3 text-primary" />
</button>
</ScrollArea>
</PopoverContent>
</Popover>
<Popover>
<PopoverTrigger asChild :disabled="!clang.name">
<Button variant="ghost" role="combobox" class="justify-between w-28 h-8 text-xs font-normal hover:bg-background/50" :disabled="!clang.name">
<span class="truncate">{{ clang.version || "版本..." }}</span>
<ChevronsUpDown class="h-3 w-3 opacity-40 ml-1" />
</Button>
</PopoverTrigger>
<PopoverContent class="p-0 w-[160px]" align="start">
<div class="p-2 border-b bg-muted/30">
<div class="relative">
<Search class="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
<Input v-model="versionSearch" placeholder="搜索版本..." class="h-8 pl-8 text-xs bg-background" />
</div>
</div>
<ScrollArea class="h-48 p-1">
<div v-if="getFilteredVersions(clang.availableVersions).length === 0" class="py-6 text-center text-xs text-muted-foreground">
无可用版本
</div>
<button v-else v-for="v in getFilteredVersions(clang.availableVersions)" :key="v" @click="clang.version = v"
class="w-full flex items-center px-3 py-2 text-xs rounded-md hover:bg-accent text-left mb-0.5 font-mono">
<span class="flex-1 truncate" :class="{ 'font-bold text-primary': clang.version === v }">{{ v }}</span>
<Check v-if="clang.version === v" class="h-3 w-3 text-primary" />
</button>
</ScrollArea>
</PopoverContent>
</Popover>
<Button variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 shrink-0"
@click="removeLang(idx)">
<X class="h-4 w-4" />
</Button>
</div>
<Button variant="outline" size="sm" class="w-full h-9 text-xs border-dashed border-muted-foreground/30 text-muted-foreground hover:text-primary hover:border-primary/50 transition-all bg-muted/10 hover:bg-primary/5"
@click="addLang">
<Plus class="h-4 w-4 mr-2" /> 必须添加运行语言和版本
</Button>
</div>
</div>
</div>
</section>
<!-- 调度策略 Section -->
<section class="space-y-4">
<div class="flex items-center gap-2 mb-1">
@@ -461,6 +771,20 @@ async function save() {
<div class="grid grid-cols-1 sm:grid-cols-4 items-start gap-3">
<Label class="sm:text-right text-xs text-muted-foreground uppercase tracking-wider">运行策略</Label>
<div class="sm:col-span-3 space-y-4">
<div class="p-3 rounded-xl bg-muted/20 border border-muted-foreground/10 space-y-2.5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs font-semibold">
<Zap :class="cn('h-3.5 w-3.5', autoAddCron ? 'text-primary' : 'text-muted-foreground')" />
自动添加任务
</div>
<Switch :model-value="autoAddCron" @update:model-value="v => autoAddCron = v" />
</div>
<p class="text-[11px] text-muted-foreground leading-relaxed">
{{ autoAddCron ? '同步完成后将尝试自动分析脚本并注册定时任务。' : '仅拉取脚本，不自动注册成面板任务。' }}
</p>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<Input :model-value="form.timeout" @update:model-value="v => form.timeout = Number(v || 0)" type="number" :min="0" class="w-20 h-9 bg-muted/30 text-center" />
@@ -512,4 +836,34 @@ async function save() {
</div>
</DialogContent>
</Dialog>
<!-- 青龙导入提示对话框 -->
<Dialog :open="showQlImportDialog" @update:open="v => showQlImportDialog = v">
<DialogContent class="sm:max-w-[425px] p-0 border-none bg-background/95 backdrop-blur-xl shadow-2xl">
<DialogHeader class="px-6 pt-6 pb-2">
<DialogTitle class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/70">
请输入青龙面板的 ql repo 指令
</DialogTitle>
</DialogHeader>
<div class="px-6 py-4 space-y-4 text-sm text-muted-foreground leading-relaxed">
<p>例如：</p>
<div class="p-2 rounded-md bg-muted/50 font-mono text-xs select-all text-primary/80 break-all border border-muted-foreground/10">
ql repo "https://github.com/a/b.git" "jd_|jx_" "activity" "^jd[^_]" "main" "js|py"
</div>
<div class="relative mt-2">
<Input v-model="qlCommandInput" placeholder="在此处粘贴完整指令，如 ql repo ..." class="h-10 pr-10 focus:ring-primary/20 bg-muted/20" @keydown.enter.prevent="submitQlImport" />
</div>
</div>
<DialogFooter class="px-6 pb-6 pt-2">
<Button variant="outline" size="sm" @click="showQlImportDialog = false" class="border-border/40 hover:bg-muted/30">
取消
</Button>
<Button size="sm" @click="submitQlImport" class="shadow-sm">
确定 <Download class="h-3 w-3 ml-1.5" />
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</template>
web/src/views/tasks/Tasks.vue
+111 -27
View File
@@ -6,8 +6,10 @@ import { Input } from '@/components/ui/input'
import Pagination from '@/components/Pagination.vue'
import TaskDialog from './TaskDialog.vue'
import RepoDialog from './RepoDialog.vue'
import LogViewer from '@/views/history/LogViewer.vue'
import { Plus, Play, Pencil, Trash2, Search, ScrollText, GitBranch, Terminal, Server, Monitor, X, Loader2, 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 { toast } from 'vue-sonner'
import { useSiteSettings } from '@/composables/useSiteSettings'
@@ -30,7 +32,7 @@ const deleteTaskId = ref<string | null>(null)
const filterName = ref('')
const filterTags = ref('')
const filterType = ref('all')
const filterType = ref<string>(TASK_TYPE.NORMAL)
const filterAgentId = ref<string | null>(null)
const currentPage = ref(1)
const total = ref(0)
@@ -147,18 +149,41 @@ function duplicateTask(task: Task) {
}
}
const showBatchDeleteDialog = ref(false)
function confirmDelete(id: string) {
deleteTaskId.value = id
showDeleteDialog.value = true
}
function confirmBatchDelete() {
if (total.value === 0) return
showBatchDeleteDialog.value = true
}
async function batchDeleteTasks() {
try {
const res = await api.tasks.batchDeleteByQuery({
name: filterName.value || undefined,
tags: filterTags.value || undefined,
type: filterType.value === 'all' ? undefined : filterType.value,
agent_id: filterAgentId.value || undefined
})
toast.success(`成功删除 ${res.count} 个任务`)
loadTasks()
} catch {
toast.error('批量删除失败')
}
showBatchDeleteDialog.value = false
}
async function deleteTask() {
if (!deleteTaskId.value) return
try {
await api.tasks.delete(deleteTaskId.value)
toast.success('任务已删除')
loadTasks()
} catch { toast.error('删除失败') }
} catch { toast.error('删除失败') }
showDeleteDialog.value = false
deleteTaskId.value = null
}
@@ -189,8 +214,27 @@ async function toggleTask(task: Task, enabled: boolean) {
} catch { toast.error('操作失败') }
}
function viewLogs(taskId: string) {
router.push({ path: '/history', query: { task_id: taskId } })
const showLogViewer = ref(false)
const selectedLogId = ref<string | undefined>()
const latestLogStatus = ref('')
const latestLogTitle = ref('')
async function viewLogs(taskId: string) {
try {
const res = await api.logs.list({ task_id: taskId, page: 1, page_size: 1 })
if (res.data && res.data.length > 0) {
const latestLog = res.data[0]
if (!latestLog) return
latestLogTitle.value = latestLog.task_name || ''
latestLogStatus.value = latestLog.status || ''
selectedLogId.value = latestLog.id
showLogViewer.value = true
} else {
toast.info('该任务暂无执行日志')
}
} catch {
toast.error('获取日志失败')
}
}
function getTaskTypeTitle(type: string) {
@@ -221,12 +265,12 @@ watch(() => route.query.agent_id, (newVal) => {
<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 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 flex-col sm:flex-row gap-2.5 w-full md:w-auto">
<!-- 第1行: 搜索框 -->
<!-- 搜索与标签 -->
<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" />
@@ -239,34 +283,48 @@ watch(() => route.query.agent_id, (newVal) => {
@input="handleSearch" />
</div>
</div>
<!-- 第2行: 下拉框与按钮 -->
<div class="flex items-center gap-2 w-full sm:w-auto mt-1 sm:mt-0">
<div class="relative flex-1 sm:flex-none">
<Select v-model="filterType" @update:model-value="handleTypeChange">
<SelectTrigger class="h-9 w-full sm:w-28 text-sm">
<SelectValue placeholder="所有类型" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">所有类型</SelectItem>
<SelectItem :value="TASK_TYPE.NORMAL">定时任务</SelectItem>
<SelectItem :value="TASK_TYPE.REPO">仓库同步</SelectItem>
</SelectContent>
</Select>
<div class="flex items-center gap-3 w-full sm:w-auto">
<!-- 移动端类型切换 -->
<div class="md:hidden flex-1 shrink-0">
<Select v-model="filterType" @update:model-value="handleTypeChange">
<SelectTrigger class="h-9 w-full text-sm">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem :value="TASK_TYPE.NORMAL">定时任务</SelectItem>
<SelectItem :value="TASK_TYPE.REPO">仓库同步</SelectItem>
</SelectContent>
</Select>
</div>
<div v-if="filterAgentId"
class="hidden sm:flex items-center gap-1 px-2 py-1 bg-primary/10 text-primary rounded-md text-sm shrink-0">
<Server class="h-3.5 w-3.5" />
<span>{{ filterAgentName }}</span>
<X class="h-3.5 w-3.5 cursor-pointer hover:text-destructive" @click="clearAgentFilter" />
</div>
<div class="flex items-center gap-2 shrink-0 justify-end">
<Button variant="outline" @click="openCreateRepo" class="shrink-0 px-3 h-9">
<GitBranch class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">仓库同步</span>
<!-- 动态新增按钮 -->
<Button variant="outline" class="shrink-0 px-3 h-9 shadow-sm text-destructive border-destructive/20 hover:bg-destructive/10" @click="confirmBatchDelete">
<Trash2 class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">批量删除</span>
</Button>
<Button @click="openCreate" class="shrink-0 px-3 h-9">
<Button v-if="filterType === TASK_TYPE.NORMAL" @click="openCreate" class="shrink-0 px-3 h-9 shadow-sm">
<Plus class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">新建任务</span>
</Button>
<Button v-else-if="filterType === TASK_TYPE.REPO" @click="openCreateRepo" class="shrink-0 px-3 h-9 shadow-sm">
<GitBranch class="h-4 w-4 sm:mr-2" /> <span class="hidden sm:inline">同步仓库</span>
</Button>
</div>
<!-- 桌面端类型切换移到后面 -->
<Tabs :model-value="filterType" @update:model-value="v => { filterType = String(v); handleTypeChange() }" class="shrink-0 hidden md:block">
<TabsList class="h-9 p-1 bg-muted/30 border">
<TabsTrigger :value="TASK_TYPE.NORMAL" class="px-4 h-7 text-[13px]">定时任务</TabsTrigger>
<TabsTrigger :value="TASK_TYPE.REPO" class="px-4 h-7 text-[13px]">仓库同步</TabsTrigger>
</TabsList>
</Tabs>
</div>
<!-- 移动端 agent 过滤标签 -->
<div v-if="filterAgentId"
@@ -282,7 +340,9 @@ watch(() => route.query.agent_id, (newVal) => {
<!-- 表头 -->
<div
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-2 sm:gap-4 px-3 sm:px-4 py-2 sm:py-1.5 border-b bg-muted/20 text-xs sm:text-sm text-muted-foreground font-medium min-w-0 sm:min-w-[1000px]">
<span class="w-10 sm:w-12 shrink-0 max-sm:order-1">序号</span>
<div class="w-10 sm:w-12 shrink-0 flex items-center gap-2 max-sm:order-1 pl-1">
<span class="text-xs sm:text-sm">序号</span>
</div>
<span class="w-8 shrink-0 text-center max-sm:order-2">类型</span>
<span class="flex-1 min-w-0 sm:flex-none sm:w-40 md:w-48 lg:w-56 shrink-0 max-sm:order-3">名称</span>
<span class="w-24 sm:w-32 shrink-0 hidden md:block">执行位置</span>
@@ -304,8 +364,10 @@ watch(() => route.query.agent_id, (newVal) => {
</div>
<div v-for="(task, index) in tasks" :key="task.id"
class="flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-2 sm:gap-4 px-3 sm:px-4 py-2.5 sm:py-1.5 hover:bg-muted/30 transition-colors">
<span class="w-10 sm:w-12 shrink-0 text-muted-foreground text-xs sm:text-sm max-sm:order-1">#{{ total -
(currentPage - 1) * pageSize - index }}</span>
<div class="w-10 sm:w-12 shrink-0 flex items-center gap-2 max-sm:order-1 pl-1">
<span class="text-muted-foreground text-xs sm:text-sm">#{{ total -
(currentPage - 1) * pageSize - index }}</span>
</div>
<span class="w-8 shrink-0 flex justify-center max-sm:order-2" :title="getTaskTypeTitle(task.type || 'task')">
<GitBranch v-if="task.type === TASK_TYPE.REPO" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
<Terminal v-else class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-primary" />
@@ -397,7 +459,29 @@ watch(() => route.query.agent_id, (newVal) => {
<!-- 仓库同步弹窗 -->
<RepoDialog v-model:open="showRepoDialog" :task="editingTask" :is-edit="isEdit" @saved="loadTasks" />
<!-- 删除确认 -->
<!-- 最新日志全屏查看 -->
<LogViewer v-model:open="showLogViewer" :task-name="latestLogTitle"
:log-id="selectedLogId" :initial-status="latestLogStatus" />
<!-- 删除确认 (批量) -->
<AlertDialog v-model:open="showBatchDeleteDialog">
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>确认批量删除</AlertDialogTitle>
<AlertDialogDescription>
将会删除当前所有过滤条件下匹配的 <b>{{ total }}</b> 个任务。操作不可撤销。
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>取消</AlertDialogCancel>
<AlertDialogAction class="bg-destructive text-white hover:bg-destructive/90" @click="batchDeleteTasks">
确认删除
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<!-- 删除确认 (单个) -->
<AlertDialog v-model:open="showDeleteDialog">
<AlertDialogContent>
<AlertDialogHeader>