Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a669242d39 |
109
app.py
109
app.py
@@ -439,6 +439,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取服务活跃状态
|
||||
const activeStatus = getActiveStatus();
|
||||
|
||||
// 按类型分组
|
||||
const grouped = {};
|
||||
filtered.forEach(p => {
|
||||
@@ -456,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',
|
||||
@@ -592,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' ? `
|
||||
|
||||
Reference in New Issue
Block a user