Signed-off-by: 吴文峰 <kevin@lmve.net>

This commit is contained in:
2026-04-10 13:08:44 +08:00
parent 12d93d0208
commit cdd11f80cb
2 changed files with 52 additions and 7 deletions
+45 -7
View File
@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { fetchStats, flushIndex, fetchWorkers, setWorkers, fetchBacklink, triggerBacklink } from '../api.js'
import { fetchStats, flushIndex, fetchWorkers, setWorkers, fetchBacklink, triggerBacklink, fetchPriorityStatus } from '../api.js'
const stats = ref(null)
const loading = ref(true)
@@ -14,16 +14,16 @@ const activeWorkers = ref(0) // 实际运行中的 goroutine 数
const workersInput = ref(0)
const workersSaving = ref(false)
// Backlink 相关状态
const backlinkStatus = ref(null) // { running, next_run, last_run?, last_error? }
const backlinkTriggering = ref(false)
// Priority 相关状态
const priorityStatus = ref(null) // { pending, active, max_workers }
onMounted(async () => {
await Promise.all([loadStats(), loadWorkers(), loadBacklink()])
await Promise.all([loadStats(), loadWorkers(), loadBacklink(), loadPriorityStatus()])
refreshInterval = setInterval(() => {
loadStats()
loadWorkers()
loadBacklink()
loadPriorityStatus()
}, 5000)
})
@@ -82,6 +82,14 @@ async function loadBacklink() {
}
}
async function loadPriorityStatus() {
try {
priorityStatus.value = await fetchPriorityStatus()
} catch (e) {
console.error('Failed to load priority status:', e)
}
}
async function doTriggerBacklink() {
backlinkTriggering.value = true
try {
@@ -195,20 +203,50 @@ function langColor(lang) {
<!-- Workers Control -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-4 md:p-5 mb-6 md:mb-8">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<!-- 左侧主线程 -->
<div>
<h2 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">爬虫线程</h2>
<h2 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">爬虫线程</h2>
<div class="flex items-baseline gap-4">
<div>
<div class="text-xs text-gray-500 mb-0.5">实际运行</div>
<div class="text-3xl font-bold" :class="activeWorkers > 0 ? 'text-green-400' : 'text-gray-500'">{{ activeWorkers }}</div>
<div class="text-3xl font-bold" :class="activeWorkers > 0 ? 'text-green-400' : 'text-gray-500'">
{{ activeWorkers }}
</div>
</div>
<div class="text-gray-700 text-xl">/</div>
<div>
<div class="text-xs text-gray-500 mb-0.5">设定上限</div>
<div class="text-3xl font-bold text-white">{{ configuredWorkers }}</div>
</div>
<!-- 新增超出部分 -->
<div v-if="priorityStatus && priorityStatus.active > 0" class="ml-2">
<div class="text-xs text-orange-400 mb-0.5">优先线程</div>
<div class="text-3xl font-bold text-orange-400">+{{ priorityStatus.active }}</div>
</div>
</div>
</div>
<!-- 右侧Priority 队列状态 -->
<div v-if="priorityStatus" class="flex items-center gap-6 text-sm">
<div class="text-center">
<div class="text-xs text-gray-500 mb-1">待处理队列</div>
<div class="text-2xl font-bold" :class="priorityStatus.pending > 0 ? 'text-yellow-400' : 'text-gray-500'">
{{ priorityStatus.pending }}
</div>
</div>
<div class="text-center">
<div class="text-xs text-gray-500 mb-1">正在爬取</div>
<div class="text-2xl font-bold" :class="priorityStatus.active > 0 ? 'text-orange-400' : 'text-gray-500'">
{{ priorityStatus.active }}
</div>
</div>
<div class="text-center">
<div class="text-xs text-gray-500 mb-1">上限</div>
<div class="text-2xl font-bold text-gray-400">{{ priorityStatus.max_workers }}</div>
</div>
</div>
<!-- 调节按钮 -->
<div class="flex items-center gap-2">
<button
class="w-9 h-9 flex items-center justify-center rounded-lg bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white text-lg font-bold transition-colors cursor-pointer"