Upload monitor.html

templates/monitor.html

@@ -55,8 +55,8 @@
         <h1>账号状态监控</h1>
     </div>
     <div class="summary">
-        <div>共 <span id="online-count">{{ valid_accounts }}/{{ total_accounts }}</span> 个账号在线</div>
-        <div>请求总数: <span id="total-requests">{{ total_requests }}</span></div>
+        <div>共 {{ valid_accounts }}/{{ total_accounts }} 个账号在线</div>
+        <div>请求总数: {{ total_requests }}</div>
     </div>
     <div class="grid">
         {% for account in accounts %}
@@ -76,37 +76,55 @@
         {% endfor %}
     </div>
     <div class="refresh-time">
-        最后更新时间: <span id="last-update">{{ last_update }}</span>
+        最后更新时间: {{ last_update }}
     </div>
+
     <script>
+        function updatePage(data) {
+            // 更新摘要信息
+            document.querySelector('.summary').innerHTML = `
+                <div>共 ${data.valid_accounts}/${data.total_accounts} 个账号在线</div>
+                <div>请求总数: ${data.total_requests}</div>
+            `;
+
+            // 更新账号卡片
+            const grid = document.querySelector('.grid');
+            grid.innerHTML = data.accounts.map((account, index) => `
+                <div class="account-card">
+                    <h3>账号${index + 1}: ${account.email.replace(/(?<=.).(?=.*@)/g, '*')}</h3>
+                    <div class="metric">总请求数: ${account.total_requests}</div>
+                    <div class="metric">成功请求数: ${account.success_requests}</div>
+                    <div class="metric">失败请求数: ${account.failed_requests}</div>
+                    <div class="metric">成功率: ${account.success_rate.toFixed(2)}%</div>
+                    <div class="metric">最后使用时间: ${account.last_used_time}</div>
+                    <div class="metric">状态: 
+                        <span class="status-${account.is_valid ? 'available' : 'unavailable'}">
+                            ${account.is_valid ? '可用' : '不可用'}
+                        </span>
+                    </div>
+                </div>
+            `).join('');
+
+            // 更新刷新时间
+            document.querySelector('.refresh-time').textContent = 
+                `最后更新时间: ${data.last_update}`;
+        }
+
         function refreshData() {
-            fetch(window.location.href)
-                .then(response => response.json())
-                .then(data => {
-                    document.getElementById('online-count').textContent = 
-                        `${data.valid_accounts}/${data.total_accounts}`;
-                    document.getElementById('total-requests').textContent = data.total_requests;
-                    document.getElementById('last-update').textContent = data.last_update;
-                    // 更新账号卡片
-                    const grid = document.querySelector('.grid');
-                    grid.innerHTML = data.accounts.map((account, index) => `
-                        <div class="account-card">
-                            <h3>账号${index + 1}: ${account.email.replace(/(?<=.).(?=.*@)/g, '*')}</h3>
-                            <div class="metric">总请求数: ${account.total_requests}</div>
-                            <div class="metric">成功请求数: ${account.success_requests}</div>
-                            <div class="metric">失败请求数: ${account.failed_requests}</div>
-                            <div class="metric">成功率: ${account.success_rate.toFixed(2)}%</div>
-                            <div class="metric">最后使用时间: ${account.last_used_time}</div>
-                            <div class="metric">状态: 
-                                <span class="status-${account.is_valid ? 'available' : 'unavailable'}">
-                                    ${account.is_valid ? '可用' : '不可用'}
-                                </span>
-                            </div>
-                        </div>
-                    `).join('');
-                });
+            fetch(window.location.href, {
+                headers: {
+                    'Accept': 'application/json'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                updatePage(data);
+            })
+            .catch(error => console.error('Error:', error));
         }
-        setInterval(refreshData, 60000); // 每分钟刷新一次
+
+        // 每分钟刷新一次
+        setInterval(refreshData, 60000);
     </script>
 </body>
 </html>