feat: Web服务活跃开关，归档服务单独显示区域

feat: 添加刷新间隔时间设置，支持自定义刷新频率
feat: 添加服务器连接状态指示器
2026-04-17 22:02:01 +08:00 · 2026-04-17 18:31:23 +08:00 · 2026-04-17 18:27:26 +08:00 · 2026-04-17 18:23:29 +08:00 · 2026-04-17 18:00:57 +08:00
1 changed files with 200 additions and 42 deletions
--- a/app.py
+++ b/app.py
@@ -236,13 +236,30 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                <p class="text-gray-400 mt-1">统一管理所有项目和服务</p>
            </div>
            <div class="flex items-center gap-3">
+                <div class="flex items-center gap-2">
+                    <span class="text-gray-400 text-sm">对外IP:</span>
+                    <input type="text" id="externalIp" value="192.168.2.17" 
+                           class="bg-gray-700 text-gray-200 px-2 py-1 rounded text-sm w-28"
+                           onchange="saveExternalIp()" placeholder="输入IP">
+                </div>
                <button onclick="scrollToCrons()" class="btn bg-orange-600 hover:bg-orange-700 px-3 py-2 rounded-lg flex items-center gap-2">
                    <i class="ri-timer-line"></i> Cron 列表
                </button>
                <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>
+                    <span class="text-green-400 text-xs">已连接</span>
+                </div>
            </div>
        </div>

@@ -359,6 +376,16 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
    <script>
        let projects = [];
        let currentFilter = 'all';
+        let externalIp = localStorage.getItem('externalIp') || '192.168.2.17';
+
+        // 初始化IP输入框
+        document.getElementById('externalIp').value = externalIp;
+
+        function saveExternalIp() {
+            externalIp = document.getElementById('externalIp').value.trim();
+            localStorage.setItem('externalIp', externalIp);
+            renderProjects();  // 重新渲染以更新链接
+        }

        async function loadProjects() {
            try {
@@ -367,8 +394,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                projects = data.projects;
                renderProjects();
                updateStats();
+                updateConnectionStatus(true);  // 成功时更新连接状态
            } catch (e) {
                console.error('加载失败:', e);
+                updateConnectionStatus(false);  // 失败时更新为断开
            }
        }

@@ -410,6 +439,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                return;
            }

+            // 获取服务活跃状态
+            const activeStatus = getActiveStatus();
+            
            // 按类型分组
            const grouped = {};
            filtered.forEach(p => {
@@ -427,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 gap-4">
-                `;
                
-                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',
@@ -521,7 +608,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
            if (p.ports && p.ports.length > 0) {
                const mainPort = p.ports[0];
                linksHtml = `
-                    <a href="http://localhost:${mainPort}" target="_blank" class="text-blue-400 hover:text-blue-300 text-sm">
+                    <a href="http://${externalIp}:${mainPort}" target="_blank" class="text-blue-400 hover:text-blue-300 text-sm">
                        <i class="ri-external-link-line"></i> 访问
                    </a>
                `;
@@ -544,32 +631,47 @@ 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://${externalIp}:${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 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' ? `
+                    <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>
            `;
        }
@@ -669,12 +771,68 @@ 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);
+        // 动态刷新间隔
+        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);

        async function loadCrons() {
            try {
Author	SHA1	Message	Date
hubian	a669242d39	feat: Web服务活跃开关，归档服务单独显示区域	2026-04-17 22:02:01 +08:00
hubian	945ffc257a	feat: 添加刷新间隔时间设置，支持自定义刷新频率	2026-04-17 18:31:23 +08:00
hubian	4a2e8bb6ce	feat: 添加服务器连接状态指示器	2026-04-17 18:27:26 +08:00
hubian	fc5d77075f	feat: 添加对外IP配置输入框，端口链接使用动态IP	2026-04-17 18:23:29 +08:00
hubian	cb80aff261	feat: Web服务多列卡片布局，一行显示多个服务	2026-04-17 18:00:57 +08:00