71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<h2 class="text-2xl font-bold">部署日志</h2>
|
||
|
|
<select v-model="statusFilter" @change="load"
|
||
|
|
class="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm">
|
||
|
|
<option value="">全部状态</option>
|
||
|
|
<option value="success">成功</option>
|
||
|
|
<option value="failed">失败</option>
|
||
|
|
<option value="skipped">跳过</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||
|
|
<table class="w-full text-sm">
|
||
|
|
<thead class="bg-gray-50">
|
||
|
|
<tr>
|
||
|
|
<th class="px-6 py-3 text-left text-gray-500 font-medium">时间</th>
|
||
|
|
<th class="px-6 py-3 text-left text-gray-500 font-medium">服务器</th>
|
||
|
|
<th class="px-6 py-3 text-left text-gray-500 font-medium">域名</th>
|
||
|
|
<th class="px-6 py-3 text-left text-gray-500 font-medium">状态</th>
|
||
|
|
<th class="px-6 py-3 text-left text-gray-500 font-medium">消息</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="divide-y divide-gray-50">
|
||
|
|
<tr v-for="log in logs" :key="log.id">
|
||
|
|
<td class="px-6 py-3 text-gray-500">{{ formatTime(log.created_at) }}</td>
|
||
|
|
<td class="px-6 py-3">{{ log.server }}</td>
|
||
|
|
<td class="px-6 py-3">{{ log.domain }}</td>
|
||
|
|
<td class="px-6 py-3">
|
||
|
|
<span :class="statusClass(log.status)" class="px-2 py-0.5 rounded-full text-xs">
|
||
|
|
{{ log.status }}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-3 text-gray-500">{{ log.message }}</td>
|
||
|
|
</tr>
|
||
|
|
<tr v-if="!logs.length">
|
||
|
|
<td colspan="5" class="px-6 py-8 text-center text-gray-400">暂无日志</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { getLogs } from '../api'
|
||
|
|
|
||
|
|
const logs = ref([])
|
||
|
|
const statusFilter = ref('')
|
||
|
|
|
||
|
|
const formatTime = (iso) => {
|
||
|
|
if (!iso) return '-'
|
||
|
|
return new Date(iso).toLocaleString('zh-CN')
|
||
|
|
}
|
||
|
|
|
||
|
|
const statusClass = (status) => ({
|
||
|
|
'bg-green-100 text-green-700': status === 'success',
|
||
|
|
'bg-red-100 text-red-700': status === 'failed',
|
||
|
|
'bg-gray-100 text-gray-700': status === 'skipped',
|
||
|
|
})
|
||
|
|
|
||
|
|
const load = async () => {
|
||
|
|
const { data } = await getLogs(statusFilter.value || undefined)
|
||
|
|
logs.value = data
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(load)
|
||
|
|
</script>
|