From 7d5a230007aeabc642e3777bb58b501c20b6f04b Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Sun, 30 Nov 2025 12:00:43 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E4=BC=98=E5=8C=96=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E9=A1=B5=E9=9D=A2=E5=8A=A0=E8=BD=BD=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加monitorTabLoading整体加载遮罩
- 创建openMonitorTab()和initMonitorTab()方法
- 使用Promise.all并行加载健康检测和系统日志
- 数据全部加载完成后才显示监控内容，彻底解决刷新闪烁问题

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html |  8 +++++++-
 frontend/app.js   | 36 ++++++++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

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' }">
             <i class="fas fa-cog"></i> 设置
           </button>
-          <button @click="adminTab = 'monitor'; loadHealthCheck(); loadSystemLogs(1);"
+          <button @click="openMonitorTab"
                   :style="{ padding: '15px 25px', border: 'none', background: adminTab === 'monitor' ? '#667eea' : 'transparent', color: adminTab === 'monitor' ? 'white' : '#666', cursor: 'pointer', fontWeight: '600', fontSize: '14px', borderRadius: adminTab === 'monitor' ? '8px 8px 0 0' : '0', transition: 'all 0.2s' }">
             <i class="fas fa-chart-line"></i> 监控
           </button>
@@ -2241,6 +2241,11 @@
 
       <!-- ========== 监控标签页 ========== -->
       <div v-show="adminTab === 'monitor'">
+      <div v-if="monitorTabLoading" class="card" style="margin-bottom: 30px; text-align: center; padding: 40px;">
+        <i class="fas fa-spinner fa-spin" style="font-size: 36px; margin-bottom: 10px;"></i>
+        <div style="color: var(--text-secondary); font-size: 14px;">正在加载监控数据...</div>
+      </div>
+      <template v-else>
       <!-- 健康检测 -->
       <div class="card" style="margin-bottom: 30px;">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
@@ -2479,6 +2484,7 @@
           </button>
         </div>
       </div>
+      </template>
       </div><!-- 监控标签页结束 -->
 
       <!-- ========== 用户标签页 ========== -->
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;
     }
 
     // 检查登录状态