✨ 优化监控页面加载体验

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

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

Co-Authored-By: Claude <noreply@anthropic.com>

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><!-- 监控标签页结束 -->
 
       <!-- ========== 用户标签页 ========== -->

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;
     }
 
     // 检查登录状态