feat: Web服务多列卡片布局，一行显示多个服务

2026-04-17 18:00:57 +08:00
1 changed files with 35 additions and 25 deletions
--- a/app.py
+++ b/app.py
@@ -434,7 +434,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                            ${typeInfo.name}
                            <span class="text-sm text-gray-500">(${projs.length})</span>
                        </h2>
-                        <div class="grid gap-4">
+                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                `;
                
                projs.forEach(p => {
@@ -544,32 +544,42 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
            }

            return `
-                <div class="card rounded-xl p-4 hover:border-gray-500 transition-colors">
-                    <div class="flex items-start justify-between">
-                        <div class="flex-1">
-                            <div class="flex items-center gap-3 mb-2">
-                                <div class="status-dot ${statusInfo.class}" title="${statusInfo.text}"></div>
-                                <h3 class="font-semibold text-lg">${p.name}</h3>
-                                <span class="type-badge ${typeColors[p.type]}">${p.type.toUpperCase()}</span>
-                                ${p.version ? `<span class="text-xs text-gray-500">${p.version}</span>` : ''}
-                            </div>
-                            <p class="text-gray-400 text-sm mb-2">${p.description || ''}</p>
-                            ${portsHtml}
-                            <div class="flex items-center gap-4 mt-2 text-sm">
-                                ${linksHtml}
-                            </div>
-                        </div>
-                        <div class="text-right">
-                            <span class="text-sm ${statusInfo.textColor}">${statusInfo.text}</span>
-                            ${p.status?.health !== null && p.status?.health !== undefined ? `
-                                <div class="text-xs mt-1 ${p.status.health ? 'text-green-400' : 'text-red-400'}">
-                                    <i class="ri-${p.status.health ? 'heart' : 'heart-line'}"></i>
-                                    ${p.status.health ? '健康' : '异常'}
-                                </div>
-                            ` : ''}
+                <div class="card rounded-lg p-3 hover:border-gray-500 transition-colors">
+                    <div class="flex items-center justify-between mb-2">
+                        <div class="flex items-center gap-2">
+                            <div class="status-dot ${statusInfo.class}" title="${statusInfo.text}"></div>
+                            <h3 class="font-semibold text-sm truncate">${p.name}</h3>
                        </div>
+                        <span class="text-xs ${statusInfo.textColor}">${statusInfo.text}</span>
                    </div>
-                    ${actionsHtml}
+                    ${p.ports && p.ports.length > 0 ? `
+                    <div class="flex items-center gap-1 text-xs mb-2">
+                        ${p.ports.map(port => {
+                            const portStatus = p.status?.ports?.[port];
+                            const isRunning = portStatus?.running;
+                            return `<a href="http://localhost:${port}" target="_blank" class="px-2 py-0.5 rounded ${isRunning ? 'bg-green-500/20 text-green-400 hover:bg-green-500/30' : 'bg-red-500/20 text-red-400'}">${port}</a>`;
+                        }).join('')}
+                        ${p.admin_url ? `<a href="${p.admin_url}" target="_blank" class="text-yellow-400 hover:text-yellow-300">后台</a>` : ''}
+                    </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>
+                    ` : ''}
+                    ${p.type === 'cron' ? `
+                    <div class="text-xs text-gray-400 mt-1">
+                        <i class="ri-${p.status?.cron_configured ? 'check' : 'close'}-line"></i>
+                        ${p.status?.cron_configured ? '已配置' : '未配置'}
+                        ${p.cron ? ` · ${p.cron}` : ''}
+                    </div>
+                    ` : ''}
                </div>
            `;
        }