fix: logs viewer zip error style

This commit is contained in:
engigu
2026-02-13 21:51:26 +08:00
parent e270d6c260
commit ef801b23dd
2 changed files with 25 additions and 15 deletions
+18 -11
View File
@@ -6,7 +6,11 @@ import { Label } from '@/components/ui/label'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog' import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { RefreshCw, Trash2, Edit, Copy, Server, Search, Download, RotateCw, Plus, Ticket, ListTodo, Eye, WifiOff, Zap, Check, X } from 'lucide-vue-next' import {
RefreshCw, Trash2, Edit, Copy, Server, Search, Download, RotateCw,
Plus, Ticket, ListTodo, Eye, Wifi as WifiIcon, WifiOff as WifiOffIcon,
Zap as ZapIcon, ZapOff as ZapOffIcon, Check, X
} from 'lucide-vue-next'
import { api, type Agent, type AgentToken } from '@/api' import { api, type Agent, type AgentToken } from '@/api'
import { toast } from 'vue-sonner' import { toast } from 'vue-sonner'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
@@ -249,10 +253,10 @@ onUnmounted(() => {
<span class="flex items-center shrink-0" :title="isOnline(agent) ? '在线' : '离线'"> <span class="flex items-center shrink-0" :title="isOnline(agent) ? '在线' : '离线'">
<div v-if="isOnline(agent)" <div v-if="isOnline(agent)"
class="h-5 w-5 rounded-full bg-green-500/10 flex items-center justify-center"> class="h-5 w-5 rounded-full bg-green-500/10 flex items-center justify-center">
<Zap class="h-3 w-3 text-green-500 fill-green-500" /> <WifiIcon class="h-3 w-3 text-green-500" />
</div> </div>
<div v-else class="h-5 w-5 rounded-full bg-muted flex items-center justify-center"> <div v-else class="h-5 w-5 rounded-full bg-muted flex items-center justify-center">
<WifiOff class="h-3 w-3 text-muted-foreground" /> <WifiOffIcon class="h-3 w-3 text-muted-foreground" />
</div> </div>
</span> </span>
<span class="font-medium text-sm truncate cursor-pointer hover:text-primary" <span class="font-medium text-sm truncate cursor-pointer hover:text-primary"
@@ -263,11 +267,11 @@ onUnmounted(() => {
:title="agent.enabled ? '点击禁用' : '点击启用'"> :title="agent.enabled ? '点击禁用' : '点击启用'">
<div v-if="agent.enabled" <div v-if="agent.enabled"
class="h-6 w-6 rounded-md bg-green-500/10 flex items-center justify-center group-hover:bg-green-500/20 transition-colors"> class="h-6 w-6 rounded-md bg-green-500/10 flex items-center justify-center group-hover:bg-green-500/20 transition-colors">
<Zap class="h-3.5 w-3.5 text-green-500 fill-green-500" /> <ZapIcon class="h-3.5 w-3.5 text-green-500 fill-green-500" />
</div> </div>
<div v-else <div v-else
class="h-6 w-6 rounded-md bg-muted flex items-center justify-center group-hover:bg-muted/80 transition-colors"> class="h-6 w-6 rounded-md bg-muted flex items-center justify-center group-hover:bg-muted/80 transition-colors">
<ZapOff class="h-3.5 w-3.5 text-muted-foreground" /> <ZapOffIcon class="h-3.5 w-3.5 text-muted-foreground" />
</div> </div>
</span> </span>
<Button variant="ghost" size="icon" class="h-7 w-7" @click="viewDetail(agent)" title="详情"> <Button variant="ghost" size="icon" class="h-7 w-7" @click="viewDetail(agent)" title="详情">
@@ -312,10 +316,10 @@ onUnmounted(() => {
<span class="flex justify-center shrink-0" :title="isOnline(agent) ? '在线' : '离线'"> <span class="flex justify-center shrink-0" :title="isOnline(agent) ? '在线' : '离线'">
<div v-if="isOnline(agent)" <div v-if="isOnline(agent)"
class="h-6 w-6 rounded-full bg-green-500/10 flex items-center justify-center"> class="h-6 w-6 rounded-full bg-green-500/10 flex items-center justify-center">
<Zap class="h-3.5 w-3.5 text-green-500 fill-green-500" /> <WifiIcon class="h-3.5 w-3.5 text-green-500" />
</div> </div>
<div v-else class="h-6 w-6 rounded-full bg-muted flex items-center justify-center"> <div v-else class="h-6 w-6 rounded-full bg-muted flex items-center justify-center">
<WifiOff class="h-3.5 w-3.5 text-muted-foreground" /> <WifiOffIcon class="h-3.5 w-3.5 text-muted-foreground" />
</div> </div>
</span> </span>
</span> </span>
@@ -337,11 +341,11 @@ onUnmounted(() => {
:title="agent.enabled ? '点击禁用' : '点击启用'"> :title="agent.enabled ? '点击禁用' : '点击启用'">
<div v-if="agent.enabled" <div v-if="agent.enabled"
class="h-6 w-6 rounded-md bg-green-500/10 flex items-center justify-center group-hover:bg-green-500/20 transition-colors"> class="h-6 w-6 rounded-md bg-green-500/10 flex items-center justify-center group-hover:bg-green-500/20 transition-colors">
<Zap class="h-3.5 w-3.5 text-green-500 fill-green-500" /> <ZapIcon class="h-3.5 w-3.5 text-green-500 fill-green-500" />
</div> </div>
<div v-else <div v-else
class="h-6 w-6 rounded-md bg-muted flex items-center justify-center group-hover:bg-muted/80 transition-colors"> class="h-6 w-6 rounded-md bg-muted flex items-center justify-center group-hover:bg-muted/80 transition-colors">
<ZapOff class="h-3.5 w-3.5 text-muted-foreground" /> <ZapOffIcon class="h-3.5 w-3.5 text-muted-foreground" />
</div> </div>
</span> </span>
<Button variant="ghost" size="icon" class="h-7 w-7" @click="viewDetail(agent)" title="详情"> <Button variant="ghost" size="icon" class="h-7 w-7" @click="viewDetail(agent)" title="详情">
@@ -426,6 +430,7 @@ onUnmounted(() => {
<DialogContent class="sm:max-w-md md:max-w-lg" @openAutoFocus.prevent> <DialogContent class="sm:max-w-md md:max-w-lg" @openAutoFocus.prevent>
<DialogHeader> <DialogHeader>
<DialogTitle>Agent 详情</DialogTitle> <DialogTitle>Agent 详情</DialogTitle>
<DialogDescription class="sr-only">显示 Agent 的详细配置和状态信息</DialogDescription>
</DialogHeader> </DialogHeader>
<div v-if="viewingAgent" class="space-y-3"> <div v-if="viewingAgent" class="space-y-3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -464,8 +469,8 @@ onUnmounted(() => {
<div class="flex items-center justify-between sm:block"> <div class="flex items-center justify-between sm:block">
<Label class="text-muted-foreground text-xs">在线状态</Label> <Label class="text-muted-foreground text-xs">在线状态</Label>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Wifi v-if="isOnline(viewingAgent)" class="h-4 w-4 text-green-500" /> <WifiIcon v-if="isOnline(viewingAgent)" class="h-4 w-4 text-green-500" />
<WifiOff v-else class="h-4 w-4 text-muted-foreground" /> <WifiOffIcon v-else class="h-4 w-4 text-muted-foreground" />
<span class="text-sm">{{ isOnline(viewingAgent) ? '在线' : '离线' }}</span> <span class="text-sm">{{ isOnline(viewingAgent) ? '在线' : '离线' }}</span>
</div> </div>
</div> </div>
@@ -495,6 +500,7 @@ onUnmounted(() => {
<DialogContent @openAutoFocus.prevent> <DialogContent @openAutoFocus.prevent>
<DialogHeader> <DialogHeader>
<DialogTitle>编辑 Agent</DialogTitle> <DialogTitle>编辑 Agent</DialogTitle>
<DialogDescription class="sr-only">修改 Agent 的名称和描述信息</DialogDescription>
</DialogHeader> </DialogHeader>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
@@ -583,6 +589,7 @@ onUnmounted(() => {
<DialogContent @openAutoFocus.prevent> <DialogContent @openAutoFocus.prevent>
<DialogHeader> <DialogHeader>
<DialogTitle>生成令牌</DialogTitle> <DialogTitle>生成令牌</DialogTitle>
<DialogDescription class="sr-only">创建一个新的注册令牌用于 Agent 认证</DialogDescription>
</DialogHeader> </DialogHeader>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
+7 -4
View File
@@ -6,7 +6,10 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import Pagination from '@/components/Pagination.vue' import Pagination from '@/components/Pagination.vue'
import LogViewer from './LogViewer.vue' import LogViewer from './LogViewer.vue'
import { RefreshCw, X, Search, Maximize2, GitBranch, Terminal, CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap, Check } from 'lucide-vue-next' import {
RefreshCw, X, Search, Maximize2, GitBranch, Terminal,
CheckCircle2, XCircle, AlertCircle, Ban, Clock, Zap as ZapIcon, Check
} from 'lucide-vue-next'
import { api, type TaskLog } from '@/api' import { api, type TaskLog } from '@/api'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
import { toast } from 'vue-sonner' import { toast } from 'vue-sonner'
@@ -310,7 +313,7 @@ watch(() => route.query.task_id, (newTaskId) => {
</div> </div>
<div v-else-if="log.status === TASK_STATUS.RUNNING" <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"> class="h-5 w-5 rounded-full bg-yellow-500/10 flex items-center justify-center">
<Zap class="h-3 w-3 text-yellow-500 fill-yellow-500 animate-pulse" /> <ZapIcon class="h-3 w-3 text-yellow-500 fill-yellow-500 animate-pulse" />
</div> </div>
<div v-else-if="log.status === TASK_STATUS.PENDING" <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"> class="h-5 w-5 rounded-full bg-yellow-500/10 flex items-center justify-center">
@@ -350,7 +353,7 @@ watch(() => route.query.task_id, (newTaskId) => {
</div> </div>
<div v-else-if="log.status === TASK_STATUS.RUNNING" <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"> class="h-6 w-6 rounded-full bg-yellow-500/10 flex items-center justify-center">
<Zap class="h-3.5 w-3.5 text-yellow-500 fill-yellow-500 animate-pulse" /> <ZapIcon class="h-3.5 w-3.5 text-yellow-500 fill-yellow-500 animate-pulse" />
</div> </div>
<div v-else-if="log.status === TASK_STATUS.PENDING" <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"> class="h-6 w-6 rounded-full bg-yellow-500/10 flex items-center justify-center">
@@ -406,7 +409,7 @@ watch(() => route.query.task_id, (newTaskId) => {
<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" />
<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" />
<Zap 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" />
<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" />