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

chore: update logs style

Browse Source
This commit is contained in:
duorameng
2026-04-02 23:17:45 +08:00
parent eda4073cad
commit 73c6e559d5
2 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/history/History.vue
+30 -30
View File
@@ -285,17 +285,17 @@ async function handleDeleteLog() {
function getStatusBadgeClass(status: string) { function getStatusBadgeClass(status: string) {
switch (status) { switch (status) {
case TASK_STATUS.SUCCESS: case TASK_STATUS.SUCCESS:
return 'bg-green-500/10 text-green-700 border-green-200/50 dark:bg-green-500/20 dark:text-green-400 dark:border-green-900/50' return 'bg-green-500/10 text-green-600 border-green-500/20 dark:bg-green-500/20 dark:text-green-400 dark:border-green-500/30 shadow-[0_0_8px_-2px_rgba(34,197,94,0.15)]'
case TASK_STATUS.FAILED: case TASK_STATUS.FAILED:
return 'bg-red-500/10 text-red-700 border-red-200/50 dark:bg-red-500/20 dark:text-red-400 dark:border-red-900/50' return 'bg-red-500/10 text-red-600 border-red-500/20 dark:bg-red-500/20 dark:text-red-400 dark:border-red-500/30'
case TASK_STATUS.RUNNING: case TASK_STATUS.RUNNING:
return 'bg-blue-500/10 text-blue-700 border-blue-200/50 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-900/50' return 'bg-blue-500/10 text-blue-600 border-blue-500/20 dark:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30'
case TASK_STATUS.PENDING: case TASK_STATUS.PENDING:
return 'bg-amber-500/10 text-amber-700 border-amber-200/50 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-900/50' return 'bg-amber-500/10 text-amber-600 border-amber-500/20 dark:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30'
case TASK_STATUS.TIMEOUT: case TASK_STATUS.TIMEOUT:
return 'bg-orange-500/10 text-orange-700 border-orange-200/50 dark:bg-orange-500/20 dark:text-orange-400 dark:border-orange-900/50' return 'bg-orange-500/10 text-orange-600 border-orange-500/20 dark:bg-orange-500/20 dark:text-orange-400 dark:border-orange-500/30'
case TASK_STATUS.CANCELLED: case TASK_STATUS.CANCELLED:
return 'bg-muted text-muted-foreground border-transparent' return 'bg-muted/50 text-muted-foreground border-muted-foreground/10'
default: default:
return 'bg-secondary text-secondary-foreground border-transparent' return 'bg-secondary text-secondary-foreground border-transparent'
} }
@@ -373,10 +373,10 @@ watch(() => route.query, (newQuery) => {
<div <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"> 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-14 shrink-0">序号</span>
<span class="w-10 shrink-0 text-center">类型</span> <span class="w-8 shrink-0 text-center">类型</span>
<span class="flex-1 min-w-0">任务名称</span> <span class="flex-1 min-w-0">任务名称</span>
<span class="w-8 shrink-0 text-center">状态</span> <span class="w-8 shrink-0 text-center">状态</span>
<span class="w-12 text-right shrink-0">耗时</span> <span class="w-16 text-right shrink-0">耗时</span>
<span class="w-8 text-center shrink-0"></span> <span class="w-8 text-center shrink-0"></span>
</div> </div>
<!-- 大屏表头 --> <!-- 大屏表头 -->
@@ -404,7 +404,7 @@ watch(() => route.query, (newQuery) => {
<div class="flex sm:hidden items-center gap-2 px-3 py-2"> <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 class="w-14 shrink-0 text-muted-foreground text-xs">#{{ total - (currentPage - 1) * pageSize - index
}}</span> }}</span>
<span class="w-6 shrink-0 flex justify-center" :title="getTaskTypeTitle(log.task_type || 'task')"> <span class="w-8 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" /> <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" /> <Terminal v-else class="h-3.5 w-3.5 text-primary" />
</span> </span>
@@ -435,7 +435,7 @@ watch(() => route.query, (newQuery) => {
<Ban class="h-3 w-3 text-muted-foreground" /> <Ban class="h-3 w-3 text-muted-foreground" />
</div> </div>
</span> </span>
<span class="w-12 text-right shrink-0 text-muted-foreground text-xs">{{ formatDuration(log.duration) <span class="w-16 text-right shrink-0 text-muted-foreground text-xs whitespace-nowrap">{{ formatDuration(log.duration)
}}</span> }}</span>
<span class="w-8 shrink-0 flex justify-center opacity-100"> <span class="w-8 shrink-0 flex justify-center opacity-100">
<Button variant="ghost" size="icon" <Button variant="ghost" size="icon"
@@ -507,7 +507,7 @@ watch(() => route.query, (newQuery) => {
class="w-full lg:w-[480px] rounded-lg border bg-card flex flex-col overflow-hidden shrink-0"> class="w-full lg:w-[480px] rounded-lg border bg-card flex flex-col overflow-hidden shrink-0">
<div class="flex items-center justify-between px-4 h-11 border-b bg-muted/20"> <div class="flex items-center justify-between px-4 h-11 border-b bg-muted/20">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-sm font-medium text-muted-foreground">日志详情</span> <span class="text-sm font-normal text-muted-foreground">日志详情</span>
<Button v-if="selectedLog.status === TASK_STATUS.RUNNING" variant="destructive" size="sm" <Button v-if="selectedLog.status === TASK_STATUS.RUNNING" variant="destructive" size="sm"
class="h-6 px-2 text-[10px]" :disabled="isStopping" @click="stopTask"> class="h-6 px-2 text-[10px]" :disabled="isStopping" @click="stopTask">
{{ isStopping ? '停止中...' : '停止任务' }} {{ isStopping ? '停止中...' : '停止任务' }}
@@ -523,43 +523,43 @@ watch(() => route.query, (newQuery) => {
</Button> </Button>
</div> </div>
</div> </div>
<div class="px-4 py-3 border-b space-y-2 text-sm"> <div class="px-4 py-3 border-b space-y-2 text-sm text-foreground/80">
<div class="flex justify-between items-center h-6"> <div class="flex justify-between items-center h-6">
<span class="text-muted-foreground">任务名称</span> <span class="text-sm font-normal text-muted-foreground">任务名称</span>
<span class="font-medium">{{ selectedLog.task_name }}</span> <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.task_name }}</span>
</div> </div>
<div class="flex justify-between items-center h-8"> <div class="flex justify-between items-center h-8">
<span class="text-muted-foreground">状态</span> <span class="text-sm font-normal text-muted-foreground">状态</span>
<Badge variant="outline" :class="[ <Badge variant="outline" :class="[
'capitalize px-3 py-1 font-semibold rounded-full border shadow-sm transition-all duration-300', 'capitalize px-3 py-1 font-normal rounded-full border shadow-sm transition-all duration-300 ring-4 ring-transparent hover:ring-primary/5',
getStatusBadgeClass(selectedLog.status) getStatusBadgeClass(selectedLog.status)
]"> ]">
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<CheckCircle2 v-if="selectedLog.status === TASK_STATUS.SUCCESS" class="h-3.5 w-3.5" /> <CheckCircle2 v-if="selectedLog.status === TASK_STATUS.SUCCESS" class="h-3.5 w-3.5 fill-green-500/20" />
<XCircle v-else-if="selectedLog.status === TASK_STATUS.FAILED" class="h-3.5 w-3.5" /> <XCircle v-else-if="selectedLog.status === TASK_STATUS.FAILED" class="h-3.5 w-3.5 fill-red-500/20" />
<ZapIcon v-else-if="selectedLog.status === TASK_STATUS.RUNNING" <ZapIcon v-else-if="selectedLog.status === TASK_STATUS.RUNNING"
class="h-3.5 w-3.5 fill-current animate-pulse text-blue-500" /> 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" /> <Clock v-else-if="selectedLog.status === TASK_STATUS.PENDING" class="h-3.5 w-3.5 fill-amber-500/20" />
<AlertCircle v-else-if="selectedLog.status === TASK_STATUS.TIMEOUT" class="h-3.5 w-3.5" /> <AlertCircle v-else-if="selectedLog.status === TASK_STATUS.TIMEOUT" class="h-3.5 w-3.5 fill-orange-500/20" />
<Ban v-else-if="selectedLog.status === TASK_STATUS.CANCELLED" class="h-3.5 w-3.5" /> <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> <span class="text-[10px] font-normal uppercase">{{ selectedLog.status === TASK_STATUS.SUCCESS ? 'SUCCESS' : selectedLog.status }}</span>
</div> </div>
</Badge> </Badge>
</div> </div>
<div class="flex justify-between items-center h-6"> <div class="flex justify-between items-center h-6">
<span class="text-muted-foreground">耗时</span> <span class="text-sm font-normal text-muted-foreground">耗时</span>
<span class="font-medium">{{ formatDuration(selectedLog.duration) }}</span> <span class="text-sm font-normal text-muted-foreground">{{ formatDuration(selectedLog.duration) }}</span>
</div> </div>
<div class="flex justify-between items-center h-6"> <div class="flex justify-between items-center h-6">
<span class="text-muted-foreground">开始时间</span> <span class="text-sm font-normal text-muted-foreground">开始时间</span>
<span class="font-mono text-xs">{{ selectedLog.start_time || '-' }}</span> <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.start_time || '-' }}</span>
</div> </div>
<div class="flex justify-between items-center h-6"> <div class="flex justify-between items-center h-6">
<span class="text-muted-foreground">结束时间</span> <span class="text-sm font-normal text-muted-foreground">结束时间</span>
<span class="font-mono text-xs">{{ selectedLog.end_time || '-' }}</span> <span class="text-sm font-normal text-muted-foreground">{{ selectedLog.end_time || '-' }}</span>
</div> </div>
<div class="pt-1.5"> <div class="pt-1.5">
<span class="text-muted-foreground block mb-1">执行命令</span> <span class="text-sm font-normal text-muted-foreground block mb-1">执行命令</span>
<code <code
class="block font-mono bg-muted/40 px-3 py-2 rounded text-xs break-all border border-muted-foreground/10"> class="block font-mono bg-muted/40 px-3 py-2 rounded text-xs break-all border border-muted-foreground/10">
{{ selectedLog.command }} {{ selectedLog.command }}
@@ -570,14 +570,14 @@ watch(() => route.query, (newQuery) => {
<div v-if="selectedLog.error" class="px-4 py-3 border-b bg-red-500/5 space-y-2 text-sm"> <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"> <div class="flex items-center gap-2 text-red-500 font-medium">
<X class="h-4 w-4" /> <X class="h-4 w-4" />
<span>系统错误</span> <span class="font-normal">系统错误</span>
</div> </div>
<code class="block font-mono bg-red-500/10 text-red-600 px-2 py-1 rounded text-xs break-all"> <code class="block font-mono bg-red-500/10 text-red-600 px-2 py-1 rounded text-xs break-all">
{{ selectedLog.error }} {{ selectedLog.error }}
</code> </code>
</div> </div>
<div class="px-4 py-2.5 text-sm text-muted-foreground border-b bg-muted/20 flex items-center justify-between"> <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> <span class="text-sm font-normal text-muted-foreground">日志输出</span>
<Button variant="ghost" size="icon" class="h-6 w-6" @click="showFullscreen = true" title="全屏查看"> <Button variant="ghost" size="icon" class="h-6 w-6" @click="showFullscreen = true" title="全屏查看">
<Maximize2 class="h-3.5 w-3.5" /> <Maximize2 class="h-3.5 w-3.5" />
</Button> </Button>
web/src/views/history/LogViewer.vue
+12 -10
View File
@@ -2,7 +2,7 @@
import { ref, watch, onUnmounted, nextTick } from 'vue' import { ref, watch, onUnmounted, nextTick } from 'vue'
import { Button } from '@/components/ui/button' import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { X, Search, AlertCircle } from 'lucide-vue-next' import { X, Search, AlertCircle, Check } from 'lucide-vue-next'
import Ansi from 'ansi-to-vue3' import Ansi from 'ansi-to-vue3'
const props = defineProps<{ const props = defineProps<{
@@ -87,18 +87,20 @@ onUnmounted(() => {
<div <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"> class="flex flex-col sm:flex-row sm:items-center justify-between px-3 sm:px-4 py-2 sm:py-3 border-b shrink-0 gap-2">
<div class="flex items-center gap-3 min-w-0"> <div class="flex items-center gap-3 min-w-0">
<span class="text-sm font-medium truncate">{{ title }}</span> <span class="text-sm font-normal text-muted-foreground truncate">{{ title }}</span>
<div v-if="status" <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="flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-normal uppercase transition-all shrink-0 border shadow-sm ring-4 ring-transparent hover:ring-primary/5"
:class="status === 'success' ? 'bg-green-500/10 text-green-500 border border-green-500/20' : :class="status === 'success' ? 'bg-green-500/10 text-green-600 border-green-500/20' :
status === 'failed' ? 'bg-red-500/10 text-red-500 border border-red-500/20' : status === 'failed' ? 'bg-red-500/10 text-red-600 border-red-500/20' :
'bg-yellow-500/10 text-yellow-500 border border-yellow-500/20'"> 'bg-blue-500/10 text-blue-600 border-blue-500/20'">
<Check v-if="status === 'success'" class="h-3 w-3 fill-green-500/20" />
<X v-else-if="status === 'failed'" class="h-3 w-3 fill-red-500/20" />
<span v-if="status === 'running'" class="relative flex h-1.5 w-1.5 mr-0.5"> <span v-if="status === 'running'" class="relative flex h-1.5 w-1.5 mr-0.5">
<span <span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span> class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-yellow-500"></span> <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-blue-500"></span>
</span> </span>
{{ status === 'success' ? '成功' : status === 'failed' ? '失败' : '执行中' }} {{ status === 'success' ? 'SUCCESS' : status === 'failed' ? 'FAILED' : 'RUNNING' }}
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -116,7 +118,7 @@ onUnmounted(() => {
<div class="w-16 h-16 rounded-3xl bg-muted/20 flex items-center justify-center mb-6 border border-muted-foreground/10 mx-auto"> <div class="w-16 h-16 rounded-3xl bg-muted/20 flex items-center justify-center mb-6 border border-muted-foreground/10 mx-auto">
<AlertCircle class="h-8 w-8 text-muted-foreground/20" /> <AlertCircle class="h-8 w-8 text-muted-foreground/20" />
</div> </div>
<span class="text-base text-muted-foreground font-semibold">未检测到输出内容</span> <span class="text-base text-muted-foreground font-normal">未检测到输出内容</span>
<p class="text-xs text-muted-foreground/40 mt-2 max-w-[280px] leading-relaxed mx-auto"> <p class="text-xs text-muted-foreground/40 mt-2 max-w-[280px] leading-relaxed mx-auto">
此任务已执行完毕，但在标准输出（Stdout）和错误输出（Stderr）通道中均未捕获到任何有效数据。 此任务已执行完毕，但在标准输出（Stdout）和错误输出（Stderr）通道中均未捕获到任何有效数据。
</p> </p>