gouki/vps-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 综合平台services多服务支持+SW网络优先缓存修复+适配层/定时任务完善

Browse Source
This commit is contained in:
gouki
2026-08-05 11:57:17 +00:00
parent 7f1268f508
commit 1b7d4823c3
47 changed files with 2895 additions and 1189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/views/servers.js
+106
View File
@@ -0,0 +1,106 @@
/* 服务器监控视图 */
const ServersView = {
template: `
<div class="space-y-4">
<div v-if="!m.asset" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-8 text-center text-slate-400 text-sm">
请在「资产」页点击 VPS 的「监控」查看服务器资源与安全状态
</div>
<template v-else>
<div class="flex items-center gap-2">
<button @click="goBack" class="text-sm text-slate-500 hover:text-slate-700">← 返回</button>
<h2 class="font-semibold">{{ m.asset.name }}</h2>
</div>
<div v-if="m.info" class="grid grid-cols-2 lg:grid-cols-4 gap-3">
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="text-xs text-slate-500">CPU</div>
<div class="text-xl font-bold mt-1">{{ latest ? latest.cpu_pct : '—' }}%</div>
<div class="text-xs text-slate-400 mt-1">{{ m.info.cpu_cores }} 核</div>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="text-xs text-slate-500">内存</div>
<div class="text-xl font-bold mt-1">{{ latest ? latest.mem_pct : '—' }}%</div>
<div class="text-xs text-slate-400 mt-1">{{ m.info.mem_total_gb }} GB</div>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="text-xs text-slate-500">磁盘</div>
<div class="text-xl font-bold mt-1">{{ latest ? latest.disk_pct : '—' }}%</div>
<div class="text-xs text-slate-400 mt-1">{{ m.info.disk_total_gb }} GB</div>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="text-xs text-slate-500">负载/在线</div>
<div class="text-xl font-bold mt-1">{{ latest && latest.load_1m !== null ? latest.load_1m : '—' }}</div>
<div class="text-xs text-slate-400 mt-1">{{ m.info.hostname }}</div>
</div>
</div>
<div v-if="m.info" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4 text-sm">
<h3 class="font-semibold mb-2">服务器信息</h3>
<div class="grid grid-cols-2 gap-y-1 text-xs text-slate-500">
<div>系统：{{ m.info.os }}</div><div>内核：{{ m.info.kernel }}</div>
<div>公网 IP：{{ m.info.public_ip || '—' }}</div><div>状态：{{ m.info.status }}</div>
</div>
</div>
<div v-if="m.metrics && m.metrics.length > 1" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<h3 class="font-semibold mb-2 text-sm">资源趋势（最近 {{ m.metrics.length }} 次采样）</h3>
<canvas id="metricsChart" height="90"></canvas>
</div>
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 p-4">
<div class="flex justify-between items-center mb-2">
<h3 class="font-semibold text-sm">安全检查</h3>
<div v-if="m.security && m.security.score !== null && m.security.score !== undefined" class="flex items-center gap-2">
<span class="text-xs text-slate-500">安全评分</span>
<span class="text-lg font-bold" :class="scoreClass(m.security.level)">{{ m.security.score }}</span>
</div>
</div>
<div class="space-y-2">
<div v-for="c in m.checks" :key="c.id" class="flex items-start gap-2 text-sm">
<span class="text-xs px-2 py-0.5 rounded-full shrink-0" :class="Fmt.checkBadge(c.status)">{{ c.status }}</span>
<div class="min-w-0">
<div class="font-medium text-xs">{{ c.check_item }}</div>
<div class="text-xs text-slate-500">{{ c.detail }}</div>
<div v-if="c.suggestion" class="text-xs text-amber-600 dark:text-amber-400">建议：{{ c.suggestion }}</div>
</div>
</div>
<div v-if="!m.checks.length" class="text-xs text-slate-400">暂无安全检查数据（需 Agent 上报）</div>
</div>
</div>
</template>
</div>`,
setup() {
const m = Vue.computed(() => store.serverMetrics);
const latest = Vue.computed(() => (m.value.metrics && m.value.metrics.length) ? m.value.metrics[0] : null);
let chartInstance = null;
function renderChart() {
const canvas = document.getElementById('metricsChart');
if (!canvas || !window.Chart) return;
if (!m.value.metrics || m.value.metrics.length < 2) return;
if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
const data = [...m.value.metrics].reverse();
const labels = data.map(p => new Date(p.ts).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }));
chartInstance = new Chart(canvas, {
type: 'line',
data: {
labels,
datasets: [
{ label: 'CPU %', data: data.map(p => p.cpu_pct), borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.1)', tension: 0.3, pointRadius: 0 },
{ label: '内存 %', data: data.map(p => p.mem_pct), borderColor: '#10b981', backgroundColor: 'rgba(16,185,129,0.1)', tension: 0.3, pointRadius: 0 },
{ label: '磁盘 %', data: data.map(p => p.disk_pct), borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)', tension: 0.3, pointRadius: 0 },
],
},
options: {
responsive: true,
interaction: { mode: 'index', intersect: false },
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
plugins: { legend: { position: 'top' } },
},
});
}
Vue.watch(m, () => { Vue.nextTick(renderChart); }, { deep: true });
Vue.onMounted(() => { Vue.nextTick(renderChart); });
Vue.onUnmounted(() => { if (chartInstance) { chartInstance.destroy(); chartInstance = null; } });
function scoreClass(level) {
return { good: 'text-emerald-600 dark:text-emerald-400', warning: 'text-amber-600 dark:text-amber-400', risk: 'text-red-600 dark:text-red-400', unknown: 'text-slate-400' }[level] || 'text-slate-400';
}
function goBack() { window.location.hash = '#assets'; }
return { store, Fmt, m, latest, scoreClass, goBack };
},
};