Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 945ffc257a | |||
| 4a2e8bb6ce | |||
| fc5d77075f |
93
app.py
93
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); // 失败时更新为断开
|
||||
}
|
||||
}
|
||||
|
||||
@@ -521,7 +550,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 +586,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>
|
||||
@@ -679,12 +708,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 {
|
||||
|
||||
Reference in New Issue
Block a user