feat: 添加服务器连接状态指示器
This commit is contained in:
44
app.py
44
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 {
|
||||
|
||||
Reference in New Issue
Block a user