coder/project-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Web服务卡片添加自定义链接入口功能

Browse Source 
- 端口号/后台后添加绿色+按钮
- 点击弹出模态框输入自定义链接
- 支持端口+路径生成URL或完整URL
- 链接保存到localStorage，支持删除
- 使用网页统一设置的IP生成链接
This commit is contained in:
hubian
2026-04-23 11:33:11 +08:00
parent 854b6b6f82
commit c320066b63
1 changed files with 165 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
app.py
View File

@@ -1,8 +1,8 @@
#!/usr/bin/env python3
"""
项目服务管理面板 v2.1.0
项目服务管理面板 v2.2.0
端口: 19013
修复: 后台链接使用 externalIp 替代 localhost
新增: Web服务卡片添加自定义链接入口（+按钮）
"""
import os
@@ -1218,6 +1218,48 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 自定义链接模态框 -->
<div id="linkModal" class="modal-overlay hidden">
<div class="card rounded-xl modal-content p-6">
<div class="flex items-center justify-between mb-4">
<h3 id="linkModalTitle" class="font-bold text-lg">添加自定义链接</h3>
<button onclick="closeLinkModal()" class="text-gray-400 hover:text-white"><i class="ri-close-line text-xl"></i></button>
</div>
<form id="linkForm" onsubmit="saveCustomLink(event)">
<input type="hidden" id="linkProjectId">
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">链接名称 *</label>
<input type="text" id="linkName" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：API文档、管理后台">
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">端口（使用统一IP）</label>
<input type="text" id="linkPort" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：19001" onchange="updateLinkPreview()">
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">路径（可选）</label>
<input type="text" id="linkPath" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：/admin /api/docs" onchange="updateLinkPreview()">
<p id="linkPreview" class="text-sm text-cyan-400 mt-1"></p>
</div>
<div class="mb-4">
<label class="block text-gray-400 text-sm mb-1">完整URL（不填则用端口生成）</label>
<input type="text" id="linkFullUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://192.168.2.17:19000/docs">
</div>
<div id="existingLinks" class="mb-4"></div>
<div class="flex justify-end gap-2">
<button type="button" onclick="closeLinkModal()" class="btn bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg">取消</button>
<button type="submit" class="btn bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg">添加</button>
</div>
</form>
</div>
</div>
<!-- 导航按钮 -->
<div class="nav-buttons">
<button onclick="scrollToTop()" class="nav-btn" title="回到顶部"><i class="ri-arrow-up-line"></i></button>
@@ -1365,6 +1407,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
adminUrl = adminUrl.replace(/localhost/g, externalIp);
}
// 获取自定义链接
const customLinks = getCustomLinks(p.id);
return `
<div class="card rounded-lg p-3 hover:border-gray-500 transition-colors">
<div class="flex items-center justify-between mb-2">
@@ -1375,13 +1420,15 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
<span class="text-xs ${statusInfo.textColor}">${statusInfo.text}</span>
</div>
${p.ports && p.ports.length > 0 ? `
<div class="flex items-center gap-1 text-xs mb-2">
<div class="flex items-center gap-1 text-xs mb-2 flex-wrap">
${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('')}
${adminUrl ? `<a href="${adminUrl}" target="_blank" class="text-yellow-400 hover:text-yellow-300 ml-1">后台</a>` : ''}
${customLinks.map(link => `<a href="${link.url}" target="_blank" class="text-cyan-400 hover:text-cyan-300 ml-1">${link.name}</a>`).join('')}
<button onclick="showAddLinkModal('${p.id}', '${p.name}')" class="text-green-400 hover:text-green-300 ml-1" title="添加自定义链接"><i class="ri-add-line"></i></button>
</div>
` : ''}
${p.type === 'web' ? `
@@ -1401,6 +1448,121 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
`;
}
// ==================== 自定义链接管理 ====================
function getCustomLinks(projectId) {
const stored = localStorage.getItem('customLinks_' + projectId);
return stored ? JSON.parse(stored) : [];
}
function saveCustomLinks(projectId, links) {
localStorage.setItem('customLinks_' + projectId, JSON.stringify(links));
}
function showAddLinkModal(projectId, projectName) {
document.getElementById('linkModalTitle').textContent = `${projectName} - 添加链接`;
document.getElementById('linkProjectId').value = projectId;
document.getElementById('linkName').value = '';
document.getElementById('linkPort').value = '';
document.getElementById('linkPath').value = '';
document.getElementById('linkFullUrl').value = '';
document.getElementById('linkModal').classList.remove('hidden');
// 显示已有的自定义链接（供删除）
const existingLinks = getCustomLinks(projectId);
const existingList = document.getElementById('existingLinks');
if (existingLinks.length > 0) {
existingList.innerHTML = '<div class="text-gray-400 text-sm mb-2">已有链接：</div>' +
existingLinks.map(link => `
<div class="flex items-center justify-between bg-gray-700 px-2 py-1 rounded mb-1">
<span class="text-cyan-400 text-sm">${link.name}: ${link.url}</span>
<button onclick="deleteCustomLink('${projectId}', '${link.id}')" class="text-red-400 hover:text-red-300"><i class="ri-delete-bin-line"></i></button>
</div>
`).join('');
} else {
existingList.innerHTML = '';
}
}
function closeLinkModal() {
document.getElementById('linkModal').classList.add('hidden');
}
function saveCustomLink(event) {
event.preventDefault();
const projectId = document.getElementById('linkProjectId').value;
const name = document.getElementById('linkName').value.trim();
const port = document.getElementById('linkPort').value.trim();
const path = document.getElementById('linkPath').value.trim();
const fullUrl = document.getElementById('linkFullUrl').value.trim();
if (!name) {
alert('请输入链接名称');
return;
}
let url;
if (fullUrl) {
url = fullUrl;
} else if (port) {
url = `http://${externalIp}:${port}${path || ''}`;
} else {
alert('请输入端口或完整URL');
return;
}
const links = getCustomLinks(projectId);
const newLink = {
id: Date.now().toString(),
name: name,
url: url
};
links.push(newLink);
saveCustomLinks(projectId, links);
closeLinkModal();
renderProjects();
}
function deleteCustomLink(projectId, linkId) {
if (!confirm('确定删除此链接？')) return;
const links = getCustomLinks(projectId);
const filtered = links.filter(l => l.id !== linkId);
saveCustomLinks(projectId, filtered);
// 更新模态框中的显示
const existingLinks = getCustomLinks(projectId);
const existingList = document.getElementById('existingLinks');
if (existingLinks.length > 0) {
existingList.innerHTML = '<div class="text-gray-400 text-sm mb-2">已有链接：</div>' +
existingLinks.map(link => `
<div class="flex items-center justify-between bg-gray-700 px-2 py-1 rounded mb-1">
<span class="text-cyan-400 text-sm">${link.name}: ${link.url}</span>
<button onclick="deleteCustomLink('${projectId}', '${link.id}')" class="text-red-400 hover:text-red-300"><i class="ri-delete-bin-line"></i></button>
</div>
`).join('');
} else {
existingList.innerHTML = '<div class="text-gray-500 text-sm">暂无自定义链接</div>';
}
renderProjects();
}
// 自动生成URL预览
function updateLinkPreview() {
const port = document.getElementById('linkPort').value.trim();
const path = document.getElementById('linkPath').value.trim();
const preview = document.getElementById('linkPreview');
if (port) {
preview.textContent = `预览: http://${externalIp}:${port}${path || ''}`;
} else {
preview.textContent = '';
}
}
function getStatusInfo(status) {
const map = {