diff --git a/admin/dashboard/templates/system_status.html b/admin/dashboard/templates/system_status.html index f5a3e69..6805fd2 100644 --- a/admin/dashboard/templates/system_status.html +++ b/admin/dashboard/templates/system_status.html @@ -46,24 +46,76 @@ + +
+
+

观察摘要

+

把当前最值得关注的风险先提到最上面，避免你每次都要自己扫完整页。

+
+ + {% raw %}{{ alertItems.length ? `${alertItems.length} 条关注项` : '状态平稳' }}{% endraw %} + +
+
+
+ {% raw %}{{ item.title }}{% endraw %} + {% raw %}{{ item.text }}{% endraw %} +
+
+
+ 当前没有明显异常项，主机资源、进程和基础设施都处于可接受范围。 +
+ +
CPU 使用率
{% raw %}{{ formatPercent(cpu.usage_percent) }}{% endraw %}
{% raw %}{{ cpu.logical_count || 0 }}{% endraw %} 线程 · load1 {% raw %}{{ formatNumber(cpu.load_1, 2) }}{% endraw %}
+
+
+ 最近趋势 + {% raw %}{{ trendSummary('cpu') }}{% endraw %} +
+ + + +
内存使用率
{% raw %}{{ formatPercent(memory.usage_percent) }}{% endraw %}
{% raw %}{{ formatBytes(memory.used_bytes) }}{% endraw %} / {% raw %}{{ formatBytes(memory.total_bytes) }}{% endraw %}
+
+
+ 最近趋势 + {% raw %}{{ trendSummary('memory') }}{% endraw %} +
+ + + +
主盘使用率
{% raw %}{{ formatPercent(disk.primary_usage_percent) }}{% endraw %}
{% raw %}{{ formatBytes(disk.primary_used_bytes) }}{% endraw %} / {% raw %}{{ formatBytes(disk.primary_total_bytes) }}{% endraw %}
+
+
+ 最近趋势 + {% raw %}{{ trendSummary('disk') }}{% endraw %} +
+ + + +
网络速率
@@ -73,6 +125,15 @@ 累计上行 {% raw %}{{ formatBytes(network.bytes_sent) }}{% endraw %} 累计下行 {% raw %}{{ formatBytes(network.bytes_recv) }}{% endraw %}
+
+
+ 下载趋势 + {% raw %}{{ trendSummary('network') }}{% endraw %} +
+ + + +
@@ -269,6 +330,12 @@ md2imgWarming: false, autoRefreshTimer: null, md2imgHealth: null, + trendHistory: { + cpu: [], + memory: [], + disk: [], + network: [] + }, statusOverview: { timestamp: '', server: {}, @@ -330,6 +397,91 @@ const pidText = browser.pid ? `pid=${browser.pid}` : 'pid=-'; const sourceText = browser.launch_source ? `source=${browser.launch_source}` : 'source=-'; return `${loopText} · ${pidText} · ${sourceText}`; + }, + alertItems() { + const items = []; + const cpuUsage = this.normalizePercent(this.cpu.usage_percent); + const memoryUsage = this.normalizePercent(this.memory.usage_percent); + const diskUsage = this.normalizePercent(this.disk.primary_usage_percent); + const mysqlStatus = this.infrastructure.mysql.status || 'healthy'; + const redisStatus = this.infrastructure.redis.status || 'healthy'; + + if (cpuUsage >= 85) { + items.push({ + key: 'cpu-danger', + level: 'danger', + title: 'CPU 过高', + text: `当前 CPU 使用率 ${this.formatPercent(cpuUsage)}，建议先排查是否存在短时计算高峰或死循环。` + }); + } else if (cpuUsage >= 65) { + items.push({ + key: 'cpu-warning', + level: 'warning', + title: 'CPU 偏高', + text: `当前 CPU 使用率 ${this.formatPercent(cpuUsage)}，建议继续观察最近几轮走势。` + }); + } + + if (memoryUsage >= 88) { + items.push({ + key: 'memory-danger', + level: 'danger', + title: '内存紧张', + text: `当前内存使用率 ${this.formatPercent(memoryUsage)}，可能会影响模型调用和浏览器截图稳定性。` + }); + } else if (memoryUsage >= 70) { + items.push({ + key: 'memory-warning', + level: 'warning', + title: '内存偏高', + text: `当前内存使用率 ${this.formatPercent(memoryUsage)}，建议留意后续是否持续抬升。` + }); + } + + if (diskUsage >= 90) { + items.push({ + key: 'disk-danger', + level: 'danger', + title: '磁盘接近满载', + text: `主盘使用率 ${this.formatPercent(diskUsage)}，建议尽快清理日志、缓存或下载目录。` + }); + } else if (diskUsage >= 75) { + items.push({ + key: 'disk-warning', + level: 'warning', + title: '磁盘占用偏高', + text: `主盘使用率 ${this.formatPercent(diskUsage)}，建议关注媒体目录和日志增长速度。` + }); + } + + if (mysqlStatus !== 'healthy') { + items.push({ + key: 'mysql-status', + level: mysqlStatus === 'danger' ? 'danger' : 'warning', + title: 'MySQL 需要关注', + text: this.infrastructure.mysql.summary || 'MySQL 当前状态异常' + }); + } + + if (redisStatus !== 'healthy') { + items.push({ + key: 'redis-status', + level: redisStatus === 'danger' ? 'danger' : 'warning', + title: 'Redis 需要关注', + text: this.infrastructure.redis.summary || 'Redis 当前状态异常' + }); + } + + if ((this.process.open_files || 0) >= 500) { + items.push({ + key: 'process-open-files', + level: 'warning', + title: '打开文件数偏多', + text: `当前进程已打开 ${this.process.open_files || 0} 个文件，若持续增长可能存在句柄泄漏。` + }); + } + + return items.slice(0, 5); } }, mounted() { @@ -355,6 +507,11 @@ const response = await axios.get('/api/system_status_overview'); if (response.data && response.data.success) { this.statusOverview = response.data.data || this.statusOverview; + // 趋势只保留页面级最近若干采样点： + // 1. 不落库，避免为了可视化引入额外存储复杂度； + // 2. 足够支撑“我刚刷新几轮，它是在升还是在降”的观察场景； + // 3. 同一页内只看短时变化，比长期历史更符合当前需求。 + this.recordTrendSnapshot(); if (showToast) { this.$message.success('资源监控已刷新'); } @@ -372,6 +529,55 @@ if (Number.isNaN(number)) return 0; return Math.max(0, Math.min(100, Number(number.toFixed(1)))); }, + recordTrendSnapshot() { + this.pushTrendPoint('cpu', this.normalizePercent(this.cpu.usage_percent)); + this.pushTrendPoint('memory', this.normalizePercent(this.memory.usage_percent)); + this.pushTrendPoint('disk', this.normalizePercent(this.disk.primary_usage_percent)); + this.pushTrendPoint('network', Number(this.network.download_speed_bps || 0)); + }, + pushTrendPoint(key, value) { + const numeric = Number(value || 0); + if (!Object.prototype.hasOwnProperty.call(this.trendHistory, key) || Number.isNaN(numeric)) { + return; + } + const next = (this.trendHistory[key] || []).slice(); + next.push({ + value: numeric, + timestamp: Date.now() + }); + // 只保留最近 18 个点，10 秒轮询时大约能覆盖近 3 分钟。 + while (next.length > 18) { + next.shift(); + } + this.$set(this.trendHistory, key, next); + }, + trendSummary(key) { + const points = this.trendHistory[key] || []; + if (points.length < 2) return '采样中'; + const firstValue = Number(points[0].value || 0); + const lastValue = Number(points[points.length - 1].value || 0); + const delta = lastValue - firstValue; + if (Math.abs(delta) < 0.5) return '基本持平'; + if (key === 'network') { + return delta > 0 ? '下载升高' : '下载回落'; + } + return delta > 0 ? `较前上升 ${delta.toFixed(1)}` : `较前下降 ${Math.abs(delta).toFixed(1)}`; + }, + trendPath(key) { + const points = this.trendHistory[key] || []; + if (!points.length) return ''; + const width = 120; + const height = 36; + const values = points.map(item => Number(item.value || 0)); + const maxValue = Math.max(...values, 1); + const minValue = Math.min(...values, 0); + const range = Math.max(maxValue - minValue, 1); + return values.map((value, index) => { + const x = values.length === 1 ? 0 : (index / (values.length - 1)) * width; + const y = height - (((value - minValue) / range) * (height - 4)) - 2; + return `${index === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`; + }).join(' '); + }, progressStatus(value, warningThreshold, dangerThreshold) { const percent = this.normalizePercent(value); if (percent >= dangerThreshold) return 'exception'; @@ -523,12 +729,39 @@ .health-title { font-size: 12px; font-weight: 700; color: #334155; } .health-brief { font-size: 12px; color: #475569; } .health-time { font-size: 12px; color: #94a3b8; } + .alert-strip-card { border-radius: 20px; } + .alert-strip-card__head { + display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; + } + .alert-strip-card__head h3 { font-size: 18px; margin-bottom: 4px; color: #0f172a; } + .alert-strip-card__head p { font-size: 13px; color: #64748b; } + .alert-strip-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } + .alert-pill { + display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 16px; + border: 1px solid rgba(148,163,184,0.12); background: rgba(248,250,252,0.78); + } + .alert-pill--warning { box-shadow: inset 0 0 0 1px rgba(245,158,11,0.10); } + .alert-pill--danger { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.12); } + .alert-pill__title { color: #0f172a; font-size: 14px; font-weight: 700; } + .alert-pill__text { color: #64748b; font-size: 12px; line-height: 1.7; } + .alert-strip-empty { + padding: 14px 16px; border-radius: 16px; background: rgba(240,253,244,0.7); + border: 1px solid rgba(134,239,172,0.5); color: #166534; font-size: 13px; + } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .stat-card { border-radius: 20px; } .stat-card__label { color: #64748b; font-size: 13px; margin-bottom: 10px; } .stat-card__value { color: #0f172a; font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 10px; } .stat-card__meta { color: #475569; font-size: 12px; margin-bottom: 12px; min-height: 18px; } .network-balance { margin-top: 12px; display: flex; justify-content: space-between; gap: 10px; color: #64748b; font-size: 12px; } + .trend-mini { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(148,163,184,0.20); } + .trend-mini__head { + display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64748b; font-size: 12px; margin-bottom: 8px; + } + .trend-mini__svg { width: 100%; height: 36px; display: block; } + .trend-mini__path { + fill: none; stroke: #2563eb; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; + } .monitor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .workspace-card { border-radius: 20px; } .workspace-card--wide { grid-column: 1 / -1; } @@ -565,6 +798,7 @@ .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .monitor-grid { grid-template-columns: 1fr; } .infra-grid { grid-template-columns: 1fr; } + .alert-strip-list { grid-template-columns: 1fr; } } @media (max-width: 960px) { .page-hero { flex-direction: column; align-items: flex-start; }