Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4a2e8bb6ce | |||
| fc5d77075f |
64
app.py
64
app.py
@@ -236,6 +236,12 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
<p class="text-gray-400 mt-1">统一管理所有项目和服务</p>
|
<p class="text-gray-400 mt-1">统一管理所有项目和服务</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3">
|
<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">
|
<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 列表
|
<i class="ri-timer-line"></i> Cron 列表
|
||||||
</button>
|
</button>
|
||||||
@@ -243,6 +249,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
<i class="ri-refresh-line"></i> 刷新状态
|
<i class="ri-refresh-line"></i> 刷新状态
|
||||||
</button>
|
</button>
|
||||||
<span id="updateTime" class="text-gray-400 text-sm"></span>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -359,6 +369,16 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
<script>
|
<script>
|
||||||
let projects = [];
|
let projects = [];
|
||||||
let currentFilter = 'all';
|
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() {
|
async function loadProjects() {
|
||||||
try {
|
try {
|
||||||
@@ -367,8 +387,10 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
projects = data.projects;
|
projects = data.projects;
|
||||||
renderProjects();
|
renderProjects();
|
||||||
updateStats();
|
updateStats();
|
||||||
|
updateConnectionStatus(true); // 成功时更新连接状态
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载失败:', e);
|
console.error('加载失败:', e);
|
||||||
|
updateConnectionStatus(false); // 失败时更新为断开
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -521,7 +543,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
if (p.ports && p.ports.length > 0) {
|
if (p.ports && p.ports.length > 0) {
|
||||||
const mainPort = p.ports[0];
|
const mainPort = p.ports[0];
|
||||||
linksHtml = `
|
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> 访问
|
<i class="ri-external-link-line"></i> 访问
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
@@ -557,7 +579,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
|
|||||||
${p.ports.map(port => {
|
${p.ports.map(port => {
|
||||||
const portStatus = p.status?.ports?.[port];
|
const portStatus = p.status?.ports?.[port];
|
||||||
const isRunning = portStatus?.running;
|
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('')}
|
}).join('')}
|
||||||
${p.admin_url ? `<a href="${p.admin_url}" target="_blank" class="text-yellow-400 hover:text-yellow-300">后台</a>` : ''}
|
${p.admin_url ? `<a href="${p.admin_url}" target="_blank" class="text-yellow-400 hover:text-yellow-300">后台</a>` : ''}
|
||||||
</div>
|
</div>
|
||||||
@@ -679,12 +701,50 @@ 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();
|
loadProjects();
|
||||||
loadCrons();
|
loadCrons();
|
||||||
|
|
||||||
// 每30秒自动刷新
|
// 每30秒自动刷新
|
||||||
setInterval(loadProjects, 30000);
|
setInterval(loadProjects, 30000);
|
||||||
|
|
||||||
|
// 每10秒检查连接状态
|
||||||
|
setInterval(checkConnection, 10000);
|
||||||
|
|
||||||
async function loadCrons() {
|
async function loadCrons() {
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user