chore: update logs loading sytle
This commit is contained in:
@@ -62,8 +62,9 @@ let logSocket: WebSocket | null = null
|
|||||||
import { decompressFromBase64 } from '@/utils/decompress'
|
import { decompressFromBase64 } from '@/utils/decompress'
|
||||||
|
|
||||||
const decompressedOutput = computed(() => {
|
const decompressedOutput = computed(() => {
|
||||||
if (!wsContent.value) return '无输出'
|
if (!wsContent.value) return ''
|
||||||
return decompressFromBase64(wsContent.value)
|
const decoded = decompressFromBase64(wsContent.value)
|
||||||
|
return decoded
|
||||||
})
|
})
|
||||||
|
|
||||||
async function loadLogs() {
|
async function loadLogs() {
|
||||||
@@ -581,9 +582,31 @@ watch(() => route.query, (newQuery) => {
|
|||||||
<Maximize2 class="h-3.5 w-3.5" />
|
<Maximize2 class="h-3.5 w-3.5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 overflow-auto bg-black/5 dark:bg-white/5 min-h-[160px]">
|
<div class="flex-1 overflow-auto bg-black/5 dark:bg-white/5 min-h-[240px] flex flex-col">
|
||||||
<div class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed"><Ansi>{{ decompressedOutput }}</Ansi></div>
|
<template v-if="isWsLoading">
|
||||||
<div v-if="isWsLoading" class="p-4 text-sm text-muted-foreground italic">连接中...</div>
|
<div class="flex-1 flex flex-col items-center justify-center p-8 select-none">
|
||||||
|
<div class="relative w-12 h-12 mb-4">
|
||||||
|
<div class="absolute inset-0 rounded-full border-2 border-primary/10"></div>
|
||||||
|
<div class="absolute inset-0 rounded-full border-2 border-primary border-t-transparent animate-spin"></div>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-muted-foreground font-medium animate-pulse">正在获取日志内容</span>
|
||||||
|
<p class="text-[10px] text-muted-foreground/50 mt-1.5 uppercase tracking-wider">Establishing connection...</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="!decompressedOutput.trim()">
|
||||||
|
<div class="flex-1 flex flex-col items-center justify-center p-8 select-none">
|
||||||
|
<div class="w-12 h-12 rounded-2xl bg-muted/30 flex items-center justify-center mb-4 border border-muted-foreground/5">
|
||||||
|
<AlertCircle class="h-6 w-6 text-muted-foreground/40" />
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-muted-foreground font-medium">无输出内容</span>
|
||||||
|
<p class="text-[11px] text-muted-foreground/50 mt-1">此任务执行期间未产生标准输出日志</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="p-4 text-xs font-mono whitespace-pre-wrap break-all log-pre leading-relaxed">
|
||||||
|
<Ansi>{{ decompressedOutput }}</Ansi>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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 } from 'lucide-vue-next'
|
import { X, Search, AlertCircle } from 'lucide-vue-next'
|
||||||
import Ansi from 'ansi-to-vue3'
|
import Ansi from 'ansi-to-vue3'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
@@ -111,8 +111,17 @@ onUnmounted(() => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div ref="scrollContainer" class="flex-1 overflow-auto bg-black/5 dark:bg-white/5" @scroll="handleScroll">
|
<div ref="scrollContainer" class="flex-1 overflow-auto bg-black/5 dark:bg-white/5 flex flex-col" @scroll="handleScroll">
|
||||||
<div class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed"><Ansi>{{ content }}</Ansi></div>
|
<div v-if="!content.trim()" class="flex-1 flex flex-col items-center justify-center p-8 select-none text-center">
|
||||||
|
<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" />
|
||||||
|
</div>
|
||||||
|
<span class="text-base text-muted-foreground font-semibold">未检测到输出内容</span>
|
||||||
|
<p class="text-xs text-muted-foreground/40 mt-2 max-w-[280px] leading-relaxed mx-auto">
|
||||||
|
此任务已执行完毕,但在标准输出(Stdout)和错误输出(Stderr)通道中均未捕获到任何有效数据。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-else class="p-3 sm:p-4 text-xs font-mono whitespace-pre-wrap break-all leading-relaxed"><Ansi>{{ content }}</Ansi></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user