feat: 添加对外IP配置输入框，端口链接使用动态IP

2026-04-17 18:23:29 +08:00
1 changed files with 18 additions and 2 deletions
--- a/app.py
+++ b/app.py
@@ -236,6 +236,12 @@ 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>
@@ -359,6 +365,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 {
@@ -521,7 +537,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>
                `;
@@ -557,7 +573,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                        ${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>`;
+                            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>