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

feat: 自定义新增外部web服务功能

Browse Source
This commit is contained in:
hubian
2026-04-23 12:55:56 +08:00
parent c320066b63
commit 17e946ae56
4 changed files with 209 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
app.py
View File

@@ -3,6 +3,7 @@
项目服务管理面板 v2.2.0
端口: 19013
新增: Web服务卡片添加自定义链接入口（+按钮）
新增: 自定义新增外部web服务功能（新增服务按钮）
"""
import os
@@ -1057,11 +1058,14 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
<!-- 筛选器 -->
<div class="flex gap-2 mb-4">
<div class="flex gap-2 mb-4 flex-wrap">
<button onclick="filterType('all')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="all">全部</button>
<button onclick="filterType('web')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="web">Web服务</button>
<button onclick="filterType('cli')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="cli">CLI工具</button>
<button onclick="filterType('extension')" class="filter-btn px-3 py-1 rounded-lg bg-gray-700 hover:bg-gray-600 text-sm" data-type="extension">插件</button>
<button onclick="showAddServiceModal()" class="btn bg-green-600 hover:bg-green-700 px-3 py-1 rounded-lg text-sm flex items-center gap-1 ml-2">
<i class="ri-add-circle-line"></i> 新增服务
</button>
</div>
<!-- 项目列表 -->
@@ -1260,6 +1264,54 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 新增自定义服务模态框 -->
<div id="addServiceModal" class="modal-overlay hidden">
<div class="card rounded-xl modal-content p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg">新增自定义服务</h3>
<button onclick="closeAddServiceModal()" class="text-gray-400 hover:text-white"><i class="ri-close-line text-xl"></i></button>
</div>
<form id="addServiceForm" onsubmit="saveCustomService(event)">
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">服务名称 *</label>
<input type="text" id="serviceName" 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="servicePort" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：8080" onchange="updateServicePreview()">
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">路径（可选）</label>
<input type="text" id="servicePath" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：/admin" onchange="updateServicePreview()">
<p id="servicePreview" class="text-sm text-cyan-400 mt-1"></p>
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">完整URL（不填则用端口生成）</label>
<input type="text" id="serviceFullUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://external.com:8080">
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">后台URL（可选）</label>
<input type="text" id="serviceAdminUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://external.com:8080/admin">
</div>
<div class="mb-3">
<label class="block text-gray-400 text-sm mb-1">描述</label>
<input type="text" id="serviceDesc" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="简要描述">
</div>
<div class="flex justify-end gap-2">
<button type="button" onclick="closeAddServiceModal()" 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>
@@ -1337,7 +1389,12 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
function renderProjects() {
const list = document.getElementById('projectsList');
const filtered = currentFilter === 'all' ? projects : projects.filter(p => p.type === currentFilter);
// 合合自定义服务到项目列表
const customServices = getCustomServices();
const allProjects = [...projects, ...customServices];
const filtered = currentFilter === 'all' ? allProjects : allProjects.filter(p => p.type === currentFilter || (currentFilter === 'web' && p.isCustom));
if (filtered.length === 0) {
list.innerHTML = '<div class="text-center py-12 text-gray-400"><i class="ri-folder-open-line text-4xl"></i><p class="mt-2">暂无项目</p></div>';
@@ -1347,13 +1404,15 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
const activeStatus = getActiveStatus();
const grouped = {};
filtered.forEach(p => {
if (!grouped[p.type]) grouped[p.type] = [];
grouped[p.type].push(p);
const groupType = p.isCustom ? 'custom' : p.type;
if (!grouped[groupType]) grouped[groupType] = [];
grouped[groupType].push(p);
});
let html = '';
const typeNames = {
'web': { name: 'Web服务', icon: 'ri-server-line', color: 'blue' },
'custom': { name: '自定义服务', icon: 'ri-global-line', color: 'cyan' },
'cron': { name: 'Cron任务', icon: 'ri-time-line', color: 'yellow' },
'cli': { name: 'CLI工具', icon: 'ri-terminal-box-line', color: 'purple' },
'extension': { name: '浏览器插件', icon: 'ri-chrome-line', color: 'pink' }
@@ -1399,6 +1458,27 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
}
function renderProjectCard(p, isActive = true) {
// 自定义服务特殊处理
if (p.isCustom) {
return `
<div class="card rounded-lg p-3 hover:border-cyan-500 transition-colors border-cyan-500/30">
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
<div class="status-dot bg-cyan-400" style="box-shadow: 0 0 8px #22d3ee;" title="外部服务"></div>
<h3 class="font-semibold text-sm truncate">${p.name}</h3>
</div>
<span class="text-xs text-cyan-400">外部</span>
</div>
<p class="text-gray-400 text-xs mb-2 truncate">${p.description || ''}</p>
<div class="flex items-center gap-1 text-xs flex-wrap">
<a href="${p.url}" target="_blank" class="px-2 py-0.5 rounded bg-cyan-500/20 text-cyan-400 hover:bg-cyan-500/30">访问</a>
${p.admin_url ? `<a href="${p.admin_url}" target="_blank" class="text-yellow-400 hover:text-yellow-300 ml-1">后台</a>` : ''}
<button onclick="deleteCustomService('${p.id}')" class="text-red-400 hover:text-red-300 ml-2" title="删除服务"><i class="ri-delete-bin-line"></i></button>
</div>
</div>
`;
}
const statusInfo = getStatusInfo(p.status?.status);
// 处理后台链接：将 localhost 替换为 externalIp
@@ -1564,6 +1644,96 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
}
}
// ==================== 自定义服务管理 ====================
function getCustomServices() {
const stored = localStorage.getItem('customServices');
return stored ? JSON.parse(stored) : [];
}
function saveCustomServices(services) {
localStorage.setItem('customServices', JSON.stringify(services));
}
function showAddServiceModal() {
document.getElementById('serviceName').value = '';
document.getElementById('servicePort').value = '';
document.getElementById('servicePath').value = '';
document.getElementById('serviceFullUrl').value = '';
document.getElementById('serviceAdminUrl').value = '';
document.getElementById('serviceDesc').value = '';
document.getElementById('servicePreview').textContent = '';
document.getElementById('addServiceModal').classList.remove('hidden');
}
function closeAddServiceModal() {
document.getElementById('addServiceModal').classList.add('hidden');
}
function updateServicePreview() {
const port = document.getElementById('servicePort').value.trim();
const path = document.getElementById('servicePath').value.trim();
const preview = document.getElementById('servicePreview');
if (port) {
preview.textContent = `预览: http://${externalIp}:${port}${path || ''}`;
} else {
preview.textContent = '';
}
}
function saveCustomService(event) {
event.preventDefault();
const name = document.getElementById('serviceName').value.trim();
const port = document.getElementById('servicePort').value.trim();
const path = document.getElementById('servicePath').value.trim();
const fullUrl = document.getElementById('serviceFullUrl').value.trim();
const adminUrl = document.getElementById('serviceAdminUrl').value.trim();
const desc = document.getElementById('serviceDesc').value.trim();
if (!name) {
alert('请输入服务名称');
return;
}
let mainUrl;
if (fullUrl) {
mainUrl = fullUrl;
} else if (port) {
mainUrl = `http://${externalIp}:${port}${path || ''}`;
} else {
alert('请输入端口或完整URL');
return;
}
const services = getCustomServices();
const newService = {
id: 'custom_' + Date.now(),
name: name,
url: mainUrl,
admin_url: adminUrl || null,
description: desc || '自定义外部服务',
type: 'custom',
isCustom: true
};
services.push(newService);
saveCustomServices(services);
closeAddServiceModal();
loadProjects();
}
function deleteCustomService(serviceId) {
if (!confirm('确定删除此自定义服务？')) return;
const services = getCustomServices();
const filtered = services.filter(s => s.id !== serviceId);
saveCustomServices(filtered);
loadProjects();
}
function getStatusInfo(status) {
const map = {
'running': { text: '运行中', class: 'status-running', textColor: 'text-green-400' },