diff --git a/frontend/app.html b/frontend/app.html index b2fa4c4..0582ae5 100644 --- a/frontend/app.html +++ b/frontend/app.html @@ -2012,7 +2012,7 @@ :style="{ padding: '15px 25px', border: 'none', background: adminTab === 'settings' ? '#667eea' : 'transparent', color: adminTab === 'settings' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'settings' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }"> 设置 - @@ -2241,6 +2241,11 @@
+
+ +
正在加载监控数据...
+
+
diff --git a/frontend/app.js b/frontend/app.js index 3668d3c..d27399f 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -189,6 +189,9 @@ createApp({ } }, + // 监控页整体加载遮罩(避免刷新时闪一下空态) + monitorTabLoading: initialAdminTab === 'monitor', + // Toast通知 toasts: [], toastIdCounter: 0, @@ -2314,8 +2317,12 @@ handleDragLeave(e) { if (this.user && this.user.is_admin) { this.loadUsers(); this.loadServerStorageStats(); - this.loadHealthCheck(); - this.loadSystemLogs(1); + if (this.adminTab === 'monitor') { + this.initMonitorTab(); + } else { + this.loadHealthCheck(); + this.loadSystemLogs(1); + } } break; case 'settings': @@ -2530,6 +2537,30 @@ handleDragLeave(e) { } }, + // 打开监控标签页(带整体loading遮罩) + openMonitorTab() { + this.adminTab = 'monitor'; + this.initMonitorTab(); + }, + + // 统一加载监控数据,避免初次渲染空态闪烁 + async initMonitorTab() { + this.monitorTabLoading = true; + this.healthCheck.loading = true; + this.systemLogs.loading = true; + + try { + await Promise.all([ + this.loadHealthCheck(), + this.loadSystemLogs(1) + ]); + } catch (e) { + // 子方法内部已处理错误 + } finally { + this.monitorTabLoading = false; + } + }, + // ===== 健康检测 ===== async loadHealthCheck() { @@ -2883,6 +2914,7 @@ handleDragLeave(e) { if (this.adminTab === 'monitor') { this.healthCheck.loading = true; this.systemLogs.loading = true; + this.monitorTabLoading = true; } // 检查登录状态