Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a669242d39 | |||
| 945ffc257a |
138
app.py
138
app.py
@@ -248,6 +248,13 @@ 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">
|
<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> 刷新状态
|
<i class="ri-refresh-line"></i> 刷新状态
|
||||||
</button>
|
</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>
|
<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 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>
|
<div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
|
||||||
@@ -432,6 +439,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取服务活跃状态
|
||||||
|
const activeStatus = getActiveStatus();
|
||||||
|
|
||||||
// 按类型分组
|
// 按类型分组
|
||||||
const grouped = {};
|
const grouped = {};
|
||||||
filtered.forEach(p => {
|
filtered.forEach(p => {
|
||||||
@@ -449,27 +459,82 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
|
|
||||||
for (const [type, projs] of Object.entries(grouped)) {
|
for (const [type, projs] of Object.entries(grouped)) {
|
||||||
const typeInfo = typeNames[type] || { name: type, icon: 'ri-folder-line', color: 'gray' };
|
const typeInfo = typeNames[type] || { name: type, icon: 'ri-folder-line', color: 'gray' };
|
||||||
html += `
|
|
||||||
<div class="mb-6">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2">
|
|
||||||
<i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>
|
|
||||||
${typeInfo.name}
|
|
||||||
<span class="text-sm text-gray-500">(${projs.length})</span>
|
|
||||||
</h2>
|
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
|
||||||
`;
|
|
||||||
|
|
||||||
projs.forEach(p => {
|
// Web服务需要分成活跃和归档两组
|
||||||
html += renderProjectCard(p);
|
if (type === 'web') {
|
||||||
});
|
const activeProjs = projs.filter(p => activeStatus[p.id] !== false);
|
||||||
|
const archivedProjs = projs.filter(p => activeStatus[p.id] === false);
|
||||||
html += `</div></div>`;
|
|
||||||
|
// 活跃服务
|
||||||
|
if (activeProjs.length > 0) {
|
||||||
|
html += `
|
||||||
|
<div class="mb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2">
|
||||||
|
<i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>
|
||||||
|
${typeInfo.name}
|
||||||
|
<span class="text-sm text-gray-500">(${activeProjs.length})</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
`;
|
||||||
|
activeProjs.forEach(p => {
|
||||||
|
html += renderProjectCard(p, true);
|
||||||
|
});
|
||||||
|
html += `</div></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 归档服务
|
||||||
|
if (archivedProjs.length > 0) {
|
||||||
|
html += `
|
||||||
|
<div class="mb-6 opacity-60">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-400 mb-3 flex items-center gap-2">
|
||||||
|
<i class="ri-archive-line text-gray-400"></i>
|
||||||
|
归档服务
|
||||||
|
<span class="text-sm text-gray-500">(${archivedProjs.length})</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
`;
|
||||||
|
archivedProjs.forEach(p => {
|
||||||
|
html += renderProjectCard(p, false);
|
||||||
|
});
|
||||||
|
html += `</div></div>`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 其他类型正常显示
|
||||||
|
html += `
|
||||||
|
<div class="mb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2">
|
||||||
|
<i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>
|
||||||
|
${typeInfo.name}
|
||||||
|
<span class="text-sm text-gray-500">(${projs.length})</span>
|
||||||
|
</h2>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
`;
|
||||||
|
projs.forEach(p => {
|
||||||
|
html += renderProjectCard(p, true);
|
||||||
|
});
|
||||||
|
html += `</div></div>`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
list.innerHTML = html;
|
list.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderProjectCard(p) {
|
function getActiveStatus() {
|
||||||
|
const stored = localStorage.getItem('serviceActiveStatus');
|
||||||
|
if (stored) {
|
||||||
|
return JSON.parse(stored);
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleServiceActive(id) {
|
||||||
|
const status = getActiveStatus();
|
||||||
|
status[id] = status[id] === false ? true : false;
|
||||||
|
localStorage.setItem('serviceActiveStatus', JSON.stringify(status));
|
||||||
|
renderProjects();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderProjectCard(p, isActive = true) {
|
||||||
const statusInfo = getStatusInfo(p.status?.status);
|
const statusInfo = getStatusInfo(p.status?.status);
|
||||||
const typeColors = {
|
const typeColors = {
|
||||||
'web': 'bg-blue-500/20 text-blue-400',
|
'web': 'bg-blue-500/20 text-blue-400',
|
||||||
@@ -585,14 +650,19 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
</div>
|
</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
${p.type === 'web' ? `
|
${p.type === 'web' ? `
|
||||||
<div class="flex items-center gap-1 mt-2">
|
<div class="flex items-center justify-between mt-2">
|
||||||
${(p.status?.status === 'running' || p.status?.status === 'partial') ? `
|
<div class="flex items-center gap-1">
|
||||||
<button onclick="stopProject('${p.id}')" class="btn bg-red-600 hover:bg-red-700 px-2 py-0.5 rounded text-xs">停止</button>
|
${(p.status?.status === 'running' || p.status?.status === 'partial') ? `
|
||||||
<button onclick="restartProject('${p.id}')" class="btn bg-yellow-600 hover:bg-yellow-700 px-2 py-0.5 rounded text-xs">重启</button>
|
<button onclick="stopProject('${p.id}')" class="btn bg-red-600 hover:bg-red-700 px-2 py-0.5 rounded text-xs">停止</button>
|
||||||
` : `
|
<button onclick="restartProject('${p.id}')" class="btn bg-yellow-600 hover:bg-yellow-700 px-2 py-0.5 rounded text-xs">重启</button>
|
||||||
<button onclick="startProject('${p.id}')" class="btn bg-green-600 hover:bg-green-700 px-2 py-0.5 rounded text-xs">启动</button>
|
` : `
|
||||||
`}
|
<button onclick="startProject('${p.id}')" class="btn bg-green-600 hover:bg-green-700 px-2 py-0.5 rounded text-xs">启动</button>
|
||||||
<button onclick="viewLog('${p.id}')" class="btn bg-gray-600 hover:bg-gray-700 px-2 py-0.5 rounded text-xs">日志</button>
|
`}
|
||||||
|
<button onclick="viewLog('${p.id}')" class="btn bg-gray-600 hover:bg-gray-700 px-2 py-0.5 rounded text-xs">日志</button>
|
||||||
|
</div>
|
||||||
|
<button onclick="toggleServiceActive('${p.id}')" class="text-xs ${isActive ? 'text-green-400 hover:text-green-300' : 'text-gray-400 hover:text-gray-300'}" title="${isActive ? '点击归档' : '点击激活'}">
|
||||||
|
<i class="ri-${isActive ? 'checkbox-circle' : 'archive'}-line"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
${p.type === 'cron' ? `
|
${p.type === 'cron' ? `
|
||||||
@@ -740,8 +810,26 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
loadProjects();
|
loadProjects();
|
||||||
loadCrons();
|
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秒检查连接状态
|
// 每10秒检查连接状态
|
||||||
setInterval(checkConnection, 10000);
|
setInterval(checkConnection, 10000);
|
||||||
|
|||||||
Reference in New Issue
Block a user