feat: 添加服务器连接状态指示器

2026-04-17 18:27:26 +08:00
1 changed files with 44 additions and 0 deletions
--- a/app.py
+++ b/app.py
@@ -249,6 +249,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                    <i class="ri-refresh-line"></i> 刷新状态
                </button>
                <span id="updateTime" class="text-gray-400 text-sm"></span>
+                <div id="connectionStatus" class="flex items-center gap-1 px-2 py-1 rounded bg-green-500/20">
+                    <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
+                    <span class="text-green-400 text-xs">已连接</span>
+                </div>
            </div>
        </div>

@@ -383,8 +387,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                projects = data.projects;
                renderProjects();
                updateStats();
+                updateConnectionStatus(true);  // 成功时更新连接状态
            } catch (e) {
                console.error('加载失败:', e);
+                updateConnectionStatus(false);  // 失败时更新为断开
            }
        }

@@ -695,12 +701,50 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
            }
        }

+        // 连接状态检查
+        let connectionOk = true;
+        
+        function updateConnectionStatus(ok) {
+            connectionOk = ok;
+            const statusEl = document.getElementById('connectionStatus');
+            if (ok) {
+                statusEl.innerHTML = `
+                    <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
+                    <span class="text-green-400 text-xs">已连接</span>
+                `;
+                statusEl.className = 'flex items-center gap-1 px-2 py-1 rounded bg-green-500/20';
+            } else {
+                statusEl.innerHTML = `
+                    <div class="w-2 h-2 rounded-full bg-red-400"></div>
+                    <span class="text-red-400 text-xs">断开</span>
+                `;
+                statusEl.className = 'flex items-center gap-1 px-2 py-1 rounded bg-red-500/20';
+            }
+        }
+
+        async function checkConnection() {
+            try {
+                const res = await fetch('/api/projects', { timeout: 5000 });
+                if (res.ok) {
+                    updateConnectionStatus(true);
+                    return true;
+                }
+            } catch (e) {
+                updateConnectionStatus(false);
+                console.error('连接断开:', e);
+            }
+            return false;
+        }
+
        // 初始化
        loadProjects();
        loadCrons();
        
        // 每30秒自动刷新
        setInterval(loadProjects, 30000);
+        
+        // 每10秒检查连接状态
+        setInterval(checkConnection, 10000);

        async function loadCrons() {
            try {