feat: 添加刷新间隔时间设置，支持自定义刷新频率

feat: 添加服务器连接状态指示器
2026-04-17 18:31:23 +08:00 · 2026-04-17 18:27:26 +08:00
1 changed files with 71 additions and 2 deletions
--- a/app.py
+++ b/app.py
@@ -248,7 +248,18 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                <button onclick="refreshAll()" class="btn bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center gap-2">
                    <i class="ri-refresh-line"></i> 刷新状态
                </button>
+                <div class="flex items-center gap-1">
+                    <span class="text-gray-400 text-xs">间隔:</span>
+                    <input type="number" id="refreshInterval" value="30" min="5" max="300" 
+                           class="bg-gray-700 text-gray-200 px-2 py-1 rounded text-xs w-12"
+                           onchange="updateRefreshInterval()" title="刷新间隔(秒)">
+                    <span class="text-gray-500 text-xs">s</span>
+                </div>
                <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 +394,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                projects = data.projects;
                renderProjects();
                updateStats();
+                updateConnectionStatus(true);  // 成功时更新连接状态
            } catch (e) {
                console.error('加载失败:', e);
+                updateConnectionStatus(false);  // 失败时更新为断开
            }
        }

@@ -695,12 +708,68 @@ 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);
+        // 动态刷新间隔
+        let refreshIntervalMs = parseInt(localStorage.getItem('refreshInterval') || '30') * 1000;
+        document.getElementById('refreshInterval').value = refreshIntervalMs / 1000;
+        
+        let refreshTimer = setInterval(loadProjects, refreshIntervalMs);
+        
+        function updateRefreshInterval() {
+            const seconds = parseInt(document.getElementById('refreshInterval').value) || 30;
+            const clampedSeconds = Math.max(5, Math.min(300, seconds));  // 限制5-300秒
+            document.getElementById('refreshInterval').value = clampedSeconds;
+            
+            localStorage.setItem('refreshInterval', clampedSeconds);
+            refreshIntervalMs = clampedSeconds * 1000;
+            
+            // 清除旧定时器，设置新定时器
+            clearInterval(refreshTimer);
+            refreshTimer = setInterval(loadProjects, refreshIntervalMs);
+            
+            console.log('刷新间隔已更新为:', clampedSeconds, '秒');
+        }
+        
+        // 每10秒检查连接状态
+        setInterval(checkConnection, 10000);

        async function loadCrons() {
            try {
Author	SHA1	Message	Date
hubian	945ffc257a	feat: 添加刷新间隔时间设置，支持自定义刷新频率	2026-04-17 18:31:23 +08:00
hubian	4a2e8bb6ce	feat: 添加服务器连接状态指示器	2026-04-17 18:27:26 +08:00