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">
|
||||
<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>
|
||||
@@ -432,6 +439,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取服务活跃状态
|
||||
const activeStatus = getActiveStatus();
|
||||
|
||||
// 按类型分组
|
||||
const grouped = {};
|
||||
filtered.forEach(p => {
|
||||
@@ -449,27 +459,82 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
||||
|
||||
for (const [type, projs] of Object.entries(grouped)) {
|
||||
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 => {
|
||||
html += renderProjectCard(p);
|
||||
});
|
||||
|
||||
html += `</div></div>`;
|
||||
// Web服务需要分成活跃和归档两组
|
||||
if (type === 'web') {
|
||||
const activeProjs = projs.filter(p => activeStatus[p.id] !== false);
|
||||
const archivedProjs = projs.filter(p => activeStatus[p.id] === false);
|
||||
|
||||
// 活跃服务
|
||||
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;
|
||||
}
|
||||
|
||||
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 typeColors = {
|
||||
'web': 'bg-blue-500/20 text-blue-400',
|
||||
@@ -585,14 +650,19 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
||||
</div>
|
||||
` : ''}
|
||||
${p.type === 'web' ? `
|
||||
<div class="flex items-center gap-1 mt-2">
|
||||
${(p.status?.status === 'running' || p.status?.status === 'partial') ? `
|
||||
<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="viewLog('${p.id}')" class="btn bg-gray-600 hover:bg-gray-700 px-2 py-0.5 rounded text-xs">日志</button>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<div class="flex items-center gap-1">
|
||||
${(p.status?.status === 'running' || p.status?.status === 'partial') ? `
|
||||
<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="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>
|
||||
` : ''}
|
||||
${p.type === 'cron' ? `
|
||||
@@ -740,8 +810,26 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user