9 Commits

4 changed files with 800 additions and 81 deletions

774
app.py
View File

@@ -3,6 +3,7 @@
项目服务管理面板 v2.2.0
端口: 19013
新增: Web服务卡片添加自定义链接入口+按钮)
新增: 自定义新增外部web服务功能新增服务按钮
"""
import os
@@ -19,6 +20,16 @@ from flask import Flask, render_template_string, jsonify, request, g
import urllib.request
import urllib.error
# 系统资源监控
try:
import psutil
import time
HAS_PSUTIL = True
# 网速计算用的上次数据
_last_net_stats = {'bytes_sent': 0, 'bytes_recv': 0, 'time': 0}
except ImportError:
HAS_PSUTIL = False
app = Flask(__name__)
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
@@ -693,6 +704,101 @@ def api_cron_sync():
return jsonify({'message': f'同步完成,新增 {synced_count} 个任务'})
# ==================== 系统资源监控 API ====================
@app.route('/api/system/stats')
def api_system_stats():
"""获取系统资源信息"""
if not HAS_PSUTIL:
return jsonify({'error': 'psutil未安装', 'available': False})
try:
# CPU
cpu_percent = psutil.cpu_percent(interval=0.5)
cpu_count = psutil.cpu_count(logical=False) or psutil.cpu_count()
cpu_count_logical = psutil.cpu_count(logical=True)
# 内存
mem = psutil.virtual_memory()
mem_total_gb = round(mem.total / (1024**3), 2)
mem_used_gb = round(mem.used / (1024**3), 2)
mem_available_gb = round(mem.available / (1024**3), 2)
mem_percent = mem.percent
# 磁盘
disk = psutil.disk_usage('/')
disk_total_gb = round(disk.total / (1024**3), 2)
disk_used_gb = round(disk.used / (1024**3), 2)
disk_free_gb = round(disk.free / (1024**3), 2)
disk_percent = disk.percent
# 网络流量和网速计算
net = psutil.net_io_counters()
current_time = time.time()
# 计算网速 (bytes/s)
time_diff = current_time - _last_net_stats['time'] if _last_net_stats['time'] > 0 else 1
sent_speed = (net.bytes_sent - _last_net_stats['bytes_sent']) / time_diff if time_diff > 0 else 0
recv_speed = (net.bytes_recv - _last_net_stats['bytes_recv']) / time_diff if time_diff > 0 else 0
# 保存当前数据用于下次计算
_last_net_stats['bytes_sent'] = net.bytes_sent
_last_net_stats['bytes_recv'] = net.bytes_recv
_last_net_stats['time'] = current_time
# 转换为 KB/s 或 MB/s
sent_speed_kb = sent_speed / 1024
recv_speed_kb = recv_speed / 1024
sent_speed_display = f"{sent_speed_kb:.1f} KB/s" if sent_speed_kb < 1024 else f"{sent_speed_kb/1024:.2f} MB/s"
recv_speed_display = f"{recv_speed_kb:.1f} KB/s" if recv_speed_kb < 1024 else f"{recv_speed_kb/1024:.2f} MB/s"
net_sent_mb = round(net.bytes_sent / (1024**2), 2)
net_recv_mb = round(net.bytes_recv / (1024**2), 2)
# 系统启动时间
boot_time = datetime.fromtimestamp(psutil.boot_time()).strftime('%Y-%m-%d %H:%M:%S')
uptime_seconds = int(datetime.now().timestamp() - psutil.boot_time())
uptime_hours = uptime_seconds // 3600
uptime_minutes = (uptime_seconds % 3600) // 60
# 进程数
process_count = len(psutil.pids())
return jsonify({
'available': True,
'cpu': {
'percent': cpu_percent,
'count': cpu_count,
'logical': cpu_count_logical
},
'memory': {
'total_gb': mem_total_gb,
'used_gb': mem_used_gb,
'available_gb': mem_available_gb,
'percent': mem_percent
},
'disk': {
'total_gb': disk_total_gb,
'used_gb': disk_used_gb,
'free_gb': disk_free_gb,
'percent': disk_percent
},
'network': {
'sent_mb': net_sent_mb,
'recv_mb': net_recv_mb,
'sent_speed': sent_speed_display,
'recv_speed': recv_speed_display
},
'system': {
'boot_time': boot_time,
'uptime': f'{uptime_hours}小时{uptime_minutes}分钟',
'process_count': process_count
}
})
except Exception as e:
return jsonify({'error': str(e), 'available': False})
def guess_cron_name(command):
"""从命令推断任务名称"""
keywords = {
@@ -934,7 +1040,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目服务管理面板 v2.1</title>
<title>项目服务管理面板 v2.9</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
@@ -958,6 +1064,34 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
.nav-btn:hover { background: #475569; transform: scale(1.1); }
.nav-btn i { font-size: 20px; color: #94a3b8; }
.nav-btn:hover i { color: #f1f5f9; }
.filter-bar { position: sticky; top: 0; z-index: 50; display: flex; gap: 8px; padding: 12px 0; background: #0f172a; margin-bottom: 16px; flex-wrap: wrap; }
.filter-bar-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.filter-bar-btn:hover { background: #334155; color: #f1f5f9; }
.filter-bar-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.filter-bar-btn.add-btn { background: #22c55e; border-color: #22c55e; color: #fff; }
.filter-bar-btn.add-btn:hover { background: #16a34a; }
.realtime-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: #1e293b; border: 1px solid #334155; }
.realtime-toggle.active { background: #22c55e/20; border-color: #22c55e; }
.speed-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; background: #334155; font-size: 13px; }
.speed-badge.upload { color: #f97316; }
.speed-badge.download { color: #3b82f6; }
.threshold-section { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.threshold-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #334155; }
.threshold-item:last-child { border-bottom: none; }
.notification-toggle { display: flex; align-items: center; gap: 8px; padding: 12px; background: #334155; border-radius: 8px; margin-top: 12px; }
.notification-toggle label { cursor: pointer; }
.threshold-label { flex: 1; display: flex; align-items: center; gap: 8px; }
.threshold-input { width: 60px; background: #334155; border: 1px solid #475569; border-radius: 6px; padding: 4px 8px; color: #f1f5f9; text-align: center; }
.threshold-input:focus { outline: none; border-color: #3b82f6; }
.threshold-icon { font-size: 18px; }
.threshold-warning { color: #f97316; }
.alert-popup { position: fixed; top: 20px; right: 20px; z-index: 1000; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); border-radius: 12px; padding: 16px 20px; color: white; box-shadow: 0 10px 40px rgba(0,0,0,0.3); animation: slideIn 0.3s ease-out; max-width: 320px; }
.alert-popup .alert-title { font-weight: bold; font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.alert-popup .alert-content { font-size: 14px; }
.alert-popup .alert-close { position: absolute; top: 8px; right: 12px; cursor: pointer; opacity: 0.7; }
.alert-popup .alert-close:hover { opacity: 1; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }
.tab-btn { border-bottom: 2px solid transparent; }
.tab-btn.active { border-bottom-color: #3b82f6; }
.cron-card { transition: all 0.2s; }
@@ -1009,6 +1143,9 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
<button onclick="switchTab('projects')" class="tab-btn active px-4 py-2 text-gray-300 hover:text-white" data-tab="projects">
<i class="ri-apps-line"></i> 项目服务
</button>
<button onclick="switchTab('system')" class="tab-btn px-4 py-2 text-gray-300 hover:text-white" data-tab="system">
<i class="ri-dashboard-2-line"></i> 系统资源
</button>
<button onclick="switchTab('cron')" class="tab-btn px-4 py-2 text-gray-300 hover:text-white" data-tab="cron">
<i class="ri-timer-line"></i> Cron 管理
</button>
@@ -1056,12 +1193,14 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 筛选器 -->
<div class="flex gap-2 mb-4">
<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>
<!-- 筛选器(顶部固定) -->
<div class="filter-bar">
<button onclick="filterType('all')" class="filter-bar-btn active" data-type="all"><i class="ri-apps-line"></i> 全部</button>
<button onclick="filterType('web')" class="filter-bar-btn" data-type="web"><i class="ri-server-line"></i> Web服务</button>
<button onclick="filterType('custom')" class="filter-bar-btn" data-type="custom"><i class="ri-global-line"></i> 自定义</button>
<button onclick="filterType('cli')" class="filter-bar-btn" data-type="cli"><i class="ri-terminal-box-line"></i> CLI工具</button>
<button onclick="filterType('extension')" class="filter-bar-btn" data-type="extension"><i class="ri-chrome-line"></i> 插件</button>
<button onclick="showAddServiceModal()" class="filter-bar-btn add-btn"><i class="ri-add-circle-line"></i> 新增服务</button>
</div>
<!-- 项目列表 -->
@@ -1070,6 +1209,186 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
</div>
</div>
<!-- 系统资源 Tab -->
<div id="systemTab" class="hidden">
<!-- 系统概览 -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="card rounded-xl p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">系统运行时间</p>
<p id="sysUptime" class="text-lg font-bold text-green-400">-</p>
</div>
<i class="ri-time-line text-3xl text-green-400 opacity-50"></i>
</div>
</div>
<div class="card rounded-xl p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">启动时间</p>
<p id="sysBootTime" class="text-lg font-bold text-blue-400">-</p>
</div>
<i class="ri-calendar-line text-3xl text-blue-400 opacity-50"></i>
</div>
</div>
<div class="card rounded-xl p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">进程数</p>
<p id="sysProcessCount" class="text-lg font-bold text-yellow-400">-</p>
</div>
<i class="ri-terminal-line text-3xl text-yellow-400 opacity-50"></i>
</div>
</div>
<div class="card rounded-xl p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-gray-400 text-sm">CPU核心</p>
<p id="sysCpuCount" class="text-lg font-bold text-purple-400">-</p>
</div>
<i class="ri-cpu-line text-3xl text-purple-400 opacity-50"></i>
</div>
</div>
</div>
<!-- CPU & 内存 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="card rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg flex items-center gap-2"><i class="ri-cpu-line text-blue-400"></i> CPU 使用率</h3>
<span id="cpuPercent" class="text-2xl font-bold text-blue-400">-</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4 mb-2">
<div id="cpuBar" class="bg-blue-500 h-4 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<p class="text-gray-400 text-sm">物理核心: <span id="cpuPhysical">-</span> | 逻辑核心: <span id="cpuLogical">-</span></p>
</div>
<div class="card rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg flex items-center gap-2"><i class="ri-memory-card-line text-green-400"></i> 内存使用</h3>
<span id="memPercent" class="text-2xl font-bold text-green-400">-</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4 mb-2">
<div id="memBar" class="bg-green-500 h-4 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<p class="text-gray-400 text-sm">已用: <span id="memUsed">-</span> GB / 总量: <span id="memTotal">-</span> GB | 可用: <span id="memAvailable">-</span> GB</p>
</div>
</div>
<!-- 磁盘 & 网络 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<div class="card rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg flex items-center gap-2"><i class="ri-hard-drive-2-line text-orange-400"></i> 磁盘使用</h3>
<span id="diskPercent" class="text-2xl font-bold text-orange-400">-</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4 mb-2">
<div id="diskBar" class="bg-orange-500 h-4 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<p class="text-gray-400 text-sm">已用: <span id="diskUsed">-</span> GB / 总量: <span id="diskTotal">-</span> GB | 剩余: <span id="diskFree">-</span> GB</p>
</div>
<div class="card rounded-xl p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg flex items-center gap-2"><i class="ri-wifi-line text-cyan-400"></i> 网络流量</h3>
</div>
<!-- 实时网速 -->
<div class="flex gap-3 mb-4">
<span class="speed-badge upload"><i class="ri-upload-line"></i> ↑ <span id="netSentSpeed">-</span></span>
<span class="speed-badge download"><i class="ri-download-line"></i> ↓ <span id="netRecvSpeed">-</span></span>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-400 text-sm mb-1">累计发送</p>
<p id="netSent" class="text-xl font-bold text-cyan-400">-</p>
<p class="text-gray-500 text-xs">MB</p>
</div>
<div>
<p class="text-gray-400 text-sm mb-1">累计接收</p>
<p id="netRecv" class="text-xl font-bold text-purple-400">-</p>
<p class="text-gray-500 text-xs">MB</p>
</div>
</div>
</div>
</div>
<!-- 阈值监控设置 -->
<div class="threshold-section">
<div class="flex items-center justify-between mb-3">
<h3 class="font-bold text-gray-200 flex items-center gap-2">
<i class="ri-alarm-warning-line text-orange-400"></i> 监控阈值设置
</h3>
<span class="text-xs text-gray-500">超过阈值将弹窗警告</span>
</div>
<div class="threshold-item">
<div class="threshold-label">
<i class="ri-cpu-line threshold-icon text-blue-400"></i>
<span class="text-gray-300 text-sm">CPU 使用率</span>
</div>
<div class="flex items-center gap-2">
<input type="number" id="thresholdCpu" class="threshold-input" min="0" max="100" value="80" onchange="saveThresholds()">
<span class="text-gray-500 text-xs">%</span>
</div>
</div>
<div class="threshold-item">
<div class="threshold-label">
<i class="ri-memory-card-line threshold-icon text-green-400"></i>
<span class="text-gray-300 text-sm">内存使用率</span>
</div>
<div class="flex items-center gap-2">
<input type="number" id="thresholdMemory" class="threshold-input" min="0" max="100" value="85" onchange="saveThresholds()">
<span class="text-gray-500 text-xs">%</span>
</div>
</div>
<div class="threshold-item">
<div class="threshold-label">
<i class="ri-hard-drive-2-line threshold-icon text-orange-400"></i>
<span class="text-gray-300 text-sm">磁盘使用率</span>
</div>
<div class="flex items-center gap-2">
<input type="number" id="thresholdDisk" class="threshold-input" min="0" max="100" value="90" onchange="saveThresholds()">
<span class="text-gray-500 text-xs">%</span>
</div>
</div>
<div class="threshold-item">
<div class="threshold-label">
<i class="ri-timer-line threshold-icon text-purple-400"></i>
<span class="text-gray-300 text-sm">警告间隔</span>
</div>
<div class="flex items-center gap-2">
<input type="number" id="thresholdInterval" class="threshold-input" min="10" max="300" value="60" onchange="saveThresholds()">
<span class="text-gray-500 text-xs">秒</span>
</div>
</div>
<!-- 桌面通知开关 -->
<div class="notification-toggle">
<input type="checkbox" id="enableDesktopNotify" onchange="toggleDesktopNotify()" class="w-4 h-4 cursor-pointer">
<label for="enableDesktopNotify" class="text-gray-300 text-sm cursor-pointer">
<i class="ri-notification-line text-yellow-400"></i> 系统桌面通知
</label>
<span id="notifyStatus" class="text-xs text-gray-500 ml-1"></span>
</div>
</div>
<!-- 控制按钮 -->
<div class="flex gap-3 mb-4 items-center">
<button onclick="loadSystemStats()" 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="realtime-toggle" id="realtimeToggle">
<input type="checkbox" id="realtimeCheck" onchange="toggleRealtime()" class="w-4 h-4 cursor-pointer">
<label for="realtimeCheck" class="text-gray-300 text-sm cursor-pointer">实时监控</label>
<select id="realtimeIntervalSelect" class="bg-gray-700 text-gray-200 px-2 py-1 rounded text-xs ml-2 cursor-pointer" onchange="updateRealtimeInterval()">
<option value="1">1秒</option>
<option value="2" selected>2秒</option>
<option value="3">3秒</option>
<option value="5">5秒</option>
<option value="10">10秒</option>
</select>
<span id="realtimeIndicator" class="text-xs text-green-400 ml-1 hidden">●</span>
</div>
</div>
</div>
<!-- Cron 管理 Tab -->
<div id="cronTab" class="hidden">
<!-- Cron 统计 -->
@@ -1260,6 +1579,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>
@@ -1284,11 +1651,268 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
btn.classList.toggle('active', btn.dataset.tab === tab);
});
document.getElementById('projectsTab').classList.toggle('hidden', tab !== 'projects');
document.getElementById('systemTab').classList.toggle('hidden', tab !== 'system');
document.getElementById('cronTab').classList.toggle('hidden', tab !== 'cron');
// 切换Tab时关闭实时监控
if (tab !== 'system' && realtimeTimer) {
clearInterval(realtimeTimer);
realtimeTimer = null;
document.getElementById('realtimeCheck').checked = false;
document.getElementById('realtimeToggle').classList.remove('active');
document.getElementById('realtimeIndicator').classList.add('hidden');
}
if (tab === 'cron') {
loadCronTasks();
}
if (tab === 'system') {
loadThresholds();
loadDesktopNotifySetting();
loadSystemStats();
}
}
// 系统资源加载
let realtimeTimer = null;
let realtimeInterval = 2; // 秒
let lastAlertTime = 0; // 上次警告时间
let thresholds = { cpu: 80, memory: 85, disk: 90, interval: 60 };
// 加载阈值设置
function loadThresholds() {
const saved = localStorage.getItem('systemThresholds');
if (saved) {
thresholds = JSON.parse(saved);
document.getElementById('thresholdCpu').value = thresholds.cpu || 80;
document.getElementById('thresholdMemory').value = thresholds.memory || 85;
document.getElementById('thresholdDisk').value = thresholds.disk || 90;
document.getElementById('thresholdInterval').value = thresholds.interval || 60;
}
}
// 保存阈值设置
function saveThresholds() {
thresholds.cpu = parseInt(document.getElementById('thresholdCpu').value) || 80;
thresholds.memory = parseInt(document.getElementById('thresholdMemory').value) || 85;
thresholds.disk = parseInt(document.getElementById('thresholdDisk').value) || 90;
thresholds.interval = parseInt(document.getElementById('thresholdInterval').value) || 60;
localStorage.setItem('systemThresholds', JSON.stringify(thresholds));
}
// 桌面通知开关
let desktopNotifyEnabled = false;
function toggleDesktopNotify() {
const checked = document.getElementById('enableDesktopNotify').checked;
const status = document.getElementById('notifyStatus');
if (checked) {
// 检查浏览器支持
if (!('Notification' in window)) {
status.textContent = '不支持';
status.className = 'text-xs text-red-500 ml-1';
document.getElementById('enableDesktopNotify').checked = false;
return;
}
// 检查权限状态
if (Notification.permission === 'granted') {
desktopNotifyEnabled = true;
status.textContent = '已启用';
status.className = 'text-xs text-green-400 ml-1';
localStorage.setItem('desktopNotify', 'true');
} else if (Notification.permission === 'denied') {
status.textContent = '已拒绝';
status.className = 'text-xs text-red-500 ml-1';
document.getElementById('enableDesktopNotify').checked = false;
} else {
// 请求权限
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
desktopNotifyEnabled = true;
status.textContent = '已启用';
status.className = 'text-xs text-green-400 ml-1';
localStorage.setItem('desktopNotify', 'true');
} else {
status.textContent = '已拒绝';
status.className = 'text-xs text-red-500 ml-1';
document.getElementById('enableDesktopNotify').checked = false;
}
});
}
} else {
desktopNotifyEnabled = false;
status.textContent = '';
localStorage.setItem('desktopNotify', 'false');
}
}
// 加载桌面通知设置
function loadDesktopNotifySetting() {
const saved = localStorage.getItem('desktopNotify');
if (saved === 'true' && Notification.permission === 'granted') {
desktopNotifyEnabled = true;
document.getElementById('enableDesktopNotify').checked = true;
document.getElementById('notifyStatus').textContent = '已启用';
document.getElementById('notifyStatus').className = 'text-xs text-green-400 ml-1';
}
}
// 发送桌面通知
function sendDesktopNotification(warnings) {
if (!desktopNotifyEnabled || Notification.permission !== 'granted') return;
const notification = new Notification('⚠️ 系统资源告警', {
body: warnings.join('\n'),
icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">📊</text></svg>',
tag: 'system-alert',
requireInteraction: false
});
// 点击后聚焦窗口
notification.onclick = () => {
window.focus();
notification.close();
};
// 5秒后自动关闭
setTimeout(() => notification.close(), 5000);
}
// 检查阈值并弹窗警告
function checkThresholds(data) {
const now = Date.now();
const intervalMs = thresholds.interval * 1000;
// 检查是否超过间隔时间
if (now - lastAlertTime < intervalMs) return;
const warnings = [];
if (data.cpu.percent >= thresholds.cpu) {
warnings.push(`CPU使用率 ${data.cpu.percent.toFixed(1)}% 超过阈值 ${thresholds.cpu}%`);
}
if (data.memory.percent >= thresholds.memory) {
warnings.push(`内存使用率 ${data.memory.percent.toFixed(1)}% 超过阈值 ${thresholds.memory}%`);
}
if (data.disk.percent >= thresholds.disk) {
warnings.push(`磁盘使用率 ${data.disk.percent.toFixed(1)}% 超过阈值 ${thresholds.disk}%`);
}
if (warnings.length > 0) {
lastAlertTime = now;
showAlertPopup(warnings);
}
}
// 显示警告弹窗(同时发送桌面通知)
function showAlertPopup(warnings) {
// 发送桌面通知
sendDesktopNotification(warnings);
// 移除已有弹窗
const existing = document.querySelector('.alert-popup');
if (existing) existing.remove();
const popup = document.createElement('div');
popup.className = 'alert-popup';
popup.innerHTML = `
<span class="alert-close" onclick="this.parentElement.remove()"><i class="ri-close-line"></i></span>
<div class="alert-title"><i class="ri-alarm-warning-line"></i> 资源告警</div>
<div class="alert-content">${warnings.map(w => `<p>⚠️ ${w}</p>`).join('')}</div>
`;
document.body.appendChild(popup);
// 自动关闭10秒后
setTimeout(() => {
popup.style.animation = 'slideOut 0.3s ease-out forwards';
setTimeout(() => popup.remove(), 300);
}, 10000);
}
function updateRealtimeInterval() {
realtimeInterval = parseInt(document.getElementById('realtimeIntervalSelect').value) || 2;
// 如果正在监控,重新启动定时器
if (realtimeTimer) {
clearInterval(realtimeTimer);
realtimeTimer = setInterval(loadSystemStats, realtimeInterval * 1000);
}
}
async function loadSystemStats() {
try {
const res = await fetch('/api/system/stats');
const data = await res.json();
if (!data.available) {
document.getElementById('sysUptime').textContent = 'psutil未安装';
document.getElementById('sysBootTime').textContent = '-';
return;
}
// 系统概览
document.getElementById('sysUptime').textContent = data.system.uptime;
document.getElementById('sysBootTime').textContent = data.system.boot_time;
document.getElementById('sysProcessCount').textContent = data.system.process_count;
document.getElementById('sysCpuCount').textContent = data.cpu.logical + '';
// CPU
document.getElementById('cpuPercent').textContent = data.cpu.percent.toFixed(1) + '%';
document.getElementById('cpuBar').style.width = data.cpu.percent + '%';
document.getElementById('cpuPhysical').textContent = data.cpu.count;
document.getElementById('cpuLogical').textContent = data.cpu.logical;
// 内存
document.getElementById('memPercent').textContent = data.memory.percent.toFixed(1) + '%';
document.getElementById('memBar').style.width = data.memory.percent + '%';
document.getElementById('memUsed').textContent = data.memory.used_gb;
document.getElementById('memTotal').textContent = data.memory.total_gb;
document.getElementById('memAvailable').textContent = data.memory.available_gb;
// 磁盘
document.getElementById('diskPercent').textContent = data.disk.percent.toFixed(1) + '%';
document.getElementById('diskBar').style.width = data.disk.percent + '%';
document.getElementById('diskUsed').textContent = data.disk.used_gb;
document.getElementById('diskTotal').textContent = data.disk.total_gb;
document.getElementById('diskFree').textContent = data.disk.free_gb;
// 网络 - 累计流量
document.getElementById('netSent').textContent = data.network.sent_mb;
document.getElementById('netRecv').textContent = data.network.recv_mb;
// 实时网速
document.getElementById('netSentSpeed').textContent = data.network.sent_speed || '-';
document.getElementById('netRecvSpeed').textContent = data.network.recv_speed || '-';
// 检查阈值
checkThresholds(data);
} catch (e) {
console.error('系统资源加载失败:', e);
}
}
function toggleRealtime() {
const checked = document.getElementById('realtimeCheck').checked;
const toggle = document.getElementById('realtimeToggle');
const indicator = document.getElementById('realtimeIndicator');
if (checked) {
toggle.classList.add('active');
indicator.classList.remove('hidden');
// 立即加载一次
loadSystemStats();
// 启动定时器
realtimeTimer = setInterval(loadSystemStats, realtimeInterval * 1000);
} else {
toggle.classList.remove('active');
indicator.classList.add('hidden');
// 停止定时器
if (realtimeTimer) {
clearInterval(realtimeTimer);
realtimeTimer = null;
}
}
}
// IP 保存
@@ -1307,6 +1931,13 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
renderProjects();
updateStats();
updateConnectionStatus(true);
// 同时检查系统资源阈值(主页也有效)
loadThresholds();
fetch('/api/system/stats').then(r => r.json()).then(sysData => {
if (sysData.available) checkThresholds(sysData);
}).catch(() => {});
} catch (e) {
console.error('加载失败:', e);
updateConnectionStatus(false);
@@ -1328,16 +1959,20 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
function filterType(type) {
currentFilter = type;
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.classList.toggle('bg-blue-600', btn.dataset.type === type);
btn.classList.toggle('bg-gray-700', btn.dataset.type !== type);
document.querySelectorAll('.filter-bar-btn').forEach(btn => {
btn.classList.toggle('active', btn.dataset.type === type);
});
renderProjects();
}
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 +1982,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 +2036,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 +2222,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' },

View File

@@ -1,8 +1,8 @@
[2026-04-20 12:33:54] ==================================================
[2026-04-20 12:33:54] 项目服务管理面板 v2.0.0 启动
[2026-04-20 12:33:54] 访问地址: http://localhost:19013
[2026-04-20 12:33:54] 进程PID: 3711750
[2026-04-20 12:33:54] ==================================================
[2026-04-23 17:53:14] ==================================================
[2026-04-23 17:53:14] 项目服务管理面板 v2.0.0 启动
[2026-04-23 17:53:14] 访问地址: http://localhost:19013
[2026-04-23 17:53:14] 进程PID: 1140936
[2026-04-23 17:53:14] ==================================================
* Serving Flask app 'app'
* Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
@@ -10,66 +10,25 @@ WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://127.0.0.1:19013
* Running on http://192.168.2.17:19013
Press CTRL+C to quit
127.0.0.1 - - [20/Apr/2026 12:33:58] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:33:59] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:08] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:09] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:18] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:19] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:24] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:26] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:28] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:29] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:30] "GET / HTTP/1.1" 200 -
192.168.2.10 - - [20/Apr/2026 12:34:32] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:35] "GET / HTTP/1.1" 200 -
192.168.2.10 - - [20/Apr/2026 12:34:37] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:38] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:39] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:48] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:49] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:54] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:56] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:34:58] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:34:59] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:35:08] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:35:09] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:35:18] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:35:19] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:35:24] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:35:26] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:35:28] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [20/Apr/2026 12:35:29] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [20/Apr/2026 12:35:30] "GET / HTTP/1.1" 200 -
192.168.2.10 - - [20/Apr/2026 12:35:32] "GET /api/projects HTTP/1.1" 200 -
[2026-04-20 12:35:32] ⚠️ 进程收到 SIGTERM 信号,即将退出!
[2026-04-20 16:25:05] ==================================================
[2026-04-20 16:25:05] 项目服务管理面板 v2.0.0 启动
[2026-04-20 16:25:05] 访问地址: http://localhost:19013
[2026-04-20 16:25:05] 进程PID: 3729863
[2026-04-20 16:25:05] ==================================================
[2026-04-20 16:29:02] 从系统 crontab 同步了 12 个任务
[2026-04-20 16:30:55] 更新 Cron 任务 ID=1: 版本 1
[2026-04-20 16:32:42] 更新 Cron 任务 ID=11: 版本 1
[2026-04-20 21:28:14] ⚠️ 进程收到 SIGTERM 信号,即将退出!
[2026-04-20 22:08:29] ==================================================
[2026-04-20 22:08:29] 项目服务管理面板 v2.0.0 启动
[2026-04-20 22:08:29] 访问地址: http://localhost:19013
[2026-04-20 22:08:29] 进程PID: 3871388
[2026-04-20 22:08:29] ==================================================
[2026-04-20 23:20:05] ⚠️ 进程收到 SIGTERM 信号,即将退出!
[2026-04-20 23:20:06] ==================================================
[2026-04-20 23:20:06] 项目服务管理面板 v2.0.0 启动
[2026-04-20 23:20:06] 访问地址: http://localhost:19013
[2026-04-20 23:20:06] 进程PID: 3894049
[2026-04-20 23:20:06] ==================================================
[2026-04-21 15:44:37] ==================================================
[2026-04-21 15:44:37] 项目服务管理面板 v2.0.0 启动
[2026-04-21 15:44:37] 访问地址: http://localhost:19013
[2026-04-21 15:44:37] 进程PID: 66363
[2026-04-21 15:44:37] ==================================================
[2026-04-21 19:00:30] ==================================================
[2026-04-21 19:00:30] 项目服务管理面板 v2.0.0 启动
[2026-04-21 19:00:30] 访问地址: http://localhost:19013
[2026-04-21 19:00:30] 进程PID: 120669
[2026-04-21 19:00:30] ==================================================
127.0.0.1 - - [23/Apr/2026 17:53:19] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:23] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:25] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:26] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 17:53:27] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:34] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:36] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:36] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 17:53:37] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:44] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:44] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 17:53:46] "GET /api/projects HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:46] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:46] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:46] "GET /api/system/stats HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:47] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 17:53:47] "GET /api/projects HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:49] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:54] "GET / HTTP/1.1" 200 -
192.168.2.14 - - [23/Apr/2026 17:53:56] "GET /api/projects HTTP/1.1" 200 -
127.0.0.1 - - [23/Apr/2026 17:53:56] "GET / HTTP/1.1" 200 -
192.168.2.8 - - [23/Apr/2026 17:53:58] "GET /api/projects HTTP/1.1" 200 -

6
logs/voice-chat-web.log Normal file
View File

@@ -0,0 +1,6 @@
==================================================
[2026-04-22T12:29:26.685865] start
Command: mkdir -p logs && MODEL_SERVICE_URL=http://192.168.2.5:12001 nohup python3 main.py > logs/server.log 2>&1 & disown
Directory: /home/xian/.openclaw/workspace-coder/works/voice-chat-web
/bin/sh: 1: disown: not found

View File

@@ -79,3 +79,9 @@ Directory: /home/xian/.openclaw/workspace-coder/works/xian-favor
Command: mkdir -p logs && nohup python3 -c "from xian_favor.api import start_server; start_server(port=19014)" > logs/app.log 2>&1 & disown
Directory: /home/xian/.openclaw/workspace-coder/works/xian-favor
/bin/sh: 1: disown: not found
==================================================
[2026-04-23T00:57:27.686904] start
Command: mkdir -p logs && nohup python3 -c "from xian_favor.api import start_server; start_server(port=19014)" > logs/app.log 2>&1 & disown
Directory: /home/xian/.openclaw/workspace-coder/works/xian-favor
/bin/sh: 1: disown: not found