feat: 实时监控显示CPU占用最高的进程列表

app.py

@@ -799,6 +799,58 @@ def api_system_stats():
         return jsonify({'error': str(e), 'available': False})
 
 
+@app.route('/api/system/processes')
+def api_system_processes():
+    """获取CPU占用最高的进程列表"""
+    if not HAS_PSUTIL:
+        return jsonify({'error': 'psutil未安装', 'available': False})
+    
+    try:
+        limit = int(request.args.get('limit', 10))
+        limit = max(1, min(50, limit))  # 限制1-50
+        
+        processes = []
+        for proc in psutil.process_iter(['pid', 'name', 'memory_percent', 'status', 'create_time', 'exe', 'cmdline']):
+            try:
+                pinfo = proc.info
+                # 获取实时CPU占用（需要单独调用）
+                cpu_percent = proc.cpu_percent(interval=0.1)
+                
+                # 格式化命令行
+                cmdline = pinfo.get('cmdline', [])
+                cmdline_str = ' '.join(cmdline) if cmdline else pinfo['name']
+                if len(cmdline_str) > 60:
+                    cmdline_str = cmdline_str[:60] + '...'
+                
+                # 启动时间
+                create_time = datetime.fromtimestamp(pinfo['create_time']).strftime('%m-%d %H:%M')
+                
+                processes.append({
+                    'pid': pinfo['pid'],
+                    'name': pinfo['name'],
+                    'cpu': cpu_percent,
+                    'memory': pinfo['memory_percent'] or 0,
+                    'status': pinfo['status'],
+                    'create_time': create_time,
+                    'exe': pinfo.get('exe', '') or '',
+                    'cmdline': cmdline_str
+                })
+            except (psutil.NoSuchProcess, psutil.AccessDenied):
+                continue
+        
+        # 按CPU占用排序，取前N个
+        processes.sort(key=lambda x: x['cpu'], reverse=True)
+        top_processes = processes[:limit]
+        
+        return jsonify({
+            'available': True,
+            'processes': top_processes,
+            'count': len(top_processes)
+        })
+    except Exception as e:
+        return jsonify({'error': str(e), 'available': False})
+
+
 def guess_cron_name(command):
     """从命令推断任务名称"""
     keywords = {
@@ -851,6 +903,69 @@ def get_next_run_time(expression):
         return '无法计算'
 
 
+# ==================== 邮件通知 API ====================
+
+@app.route('/api/email/send', methods=['POST'])
+def api_email_send():
+    """发送邮件通知"""
+    data = request.get_json()
+    if not data:
+        return jsonify({'error': '无效数据'}), 400
+    
+    to_email = data.get('to')
+    subject = data.get('subject')
+    body = data.get('body')
+    
+    if not to_email or not subject or not body:
+        return jsonify({'error': '缺少必要参数'}), 400
+    
+    try:
+        import smtplib
+        from email.mime.text import MIMEText
+        from email.mime.multipart import MIMEMultipart
+        from datetime import datetime
+        
+        # SMTP配置 (从环境变量或默认值)
+        smtp_host = os.environ.get('SMTP_HOST', 'mail.tphai.com')
+        smtp_port = int(os.environ.get('SMTP_PORT', 587))
+        smtp_user = os.environ.get('SMTP_USER', 'favor@tphai.com')
+        smtp_pass = os.environ.get('SMTP_PASS', 'favor@!')
+        
+        server = smtplib.SMTP(smtp_host, smtp_port)
+        server.ehlo()
+        server.login(smtp_user, smtp_pass)
+        
+        msg = MIMEMultipart()
+        msg['From'] = smtp_user
+        msg['To'] = to_email
+        msg['Subject'] = subject
+        msg['Date'] = datetime.now().strftime('%a, %d %b %Y %H:%M:%S +0800')
+        msg['Reply-To'] = to_email
+        msg.attach(MIMEText(body, 'plain', 'utf-8'))
+        
+        server.sendmail(smtp_user, to_email, msg.as_string())
+        server.quit()
+        
+        return jsonify({'success': True, 'message': '邮件已发送'})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/api/email/config', methods=['GET', 'POST'])
+def api_email_config():
+    """获取/设置邮件配置"""
+    if request.method == 'GET':
+        return jsonify({
+            'host': os.environ.get('SMTP_HOST', 'mail.tphai.com'),
+            'port': int(os.environ.get('SMTP_PORT', 587)),
+            'user': os.environ.get('SMTP_USER', 'favor@tphai.com')
+        })
+    else:
+        data = request.get_json()
+        # 只保存到环境变量说明，实际使用需要配置环境变量
+        return jsonify({'message': '邮件配置需要通过环境变量设置'})
+
+
 @app.route('/api/crons')
 def api_crons():
     """获取系统 cron 列表（兼容旧接口）"""
@@ -1040,7 +1155,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>项目服务管理面板 v2.7</title>
+    <title>项目服务管理面板 v3.3</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">
@@ -1075,6 +1190,23 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
         .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; }
@@ -1294,6 +1426,79 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                 </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 class="mt-4 pt-4 border-t border-gray-600">
+                    <div class="flex items-center justify-between mb-3">
+                        <h4 class="text-gray-200 text-sm font-medium flex items-center gap-2">
+                            <i class="ri-mail-line text-green-400"></i> 邮件通知规则
+                        </h4>
+                        <button onclick="showAddEmailRuleModal()" class="btn bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-xs flex items-center gap-1">
+                            <i class="ri-add-line"></i> 添加规则
+                        </button>
+                    </div>
+                    <div id="emailRulesList" class="space-y-2 text-sm">
+                        <div class="text-gray-500 text-center py-4">暂无邮件通知规则</div>
+                    </div>
+                </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">
@@ -1312,6 +1517,28 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                     <span id="realtimeIndicator" class="text-xs text-green-400 ml-1 hidden">●</span>
                 </div>
             </div>
+
+            <!-- 进程列表（实时监控时显示） -->
+            <div id="processListSection" class="hidden mt-6">
+                <div class="flex items-center justify-between mb-3">
+                    <h3 class="font-bold text-gray-200 flex items-center gap-2">
+                        <i class="ri-bar-chart-horizontal text-purple-400"></i> CPU占用最高的进程
+                    </h3>
+                    <div class="flex items-center gap-2">
+                        <span class="text-gray-400 text-xs">显示数量:</span>
+                        <select id="processLimitSelect" class="bg-gray-700 text-gray-200 px-2 py-1 rounded text-xs" onchange="loadTopProcesses()">
+                            <option value="5">5</option>
+                            <option value="10" selected>10</option>
+                            <option value="15">15</option>
+                            <option value="20">20</option>
+                            <option value="30">30</option>
+                        </select>
+                    </div>
+                </div>
+                <div id="processList" class="space-y-2">
+                    <div class="text-gray-500 text-center py-4"><i class="ri-loader-4-line animate-spin"></i> 加载中...</div>
+                </div>
+            </div>
         </div>
 
         <!-- Cron 管理 Tab -->
@@ -1552,6 +1779,96 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
         </div>
     </div>
 
+    <!-- 邮件通知规则模态框 -->
+    <div id="emailRuleModal" class="modal-overlay hidden">
+        <div class="card rounded-xl modal-content p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 id="emailRuleModalTitle" class="font-bold text-lg">添加邮件通知规则</h3>
+                <button onclick="closeEmailRuleModal()" class="text-gray-400 hover:text-white"><i class="ri-close-line text-xl"></i></button>
+            </div>
+            
+            <form id="emailRuleForm" onsubmit="saveEmailRule(event)">
+                <input type="hidden" id="emailRuleId">
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">规则名称 *</label>
+                    <input type="text" id="emailRuleName" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：CPU告警通知">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">监控资源 *</label>
+                    <select id="emailRuleResource" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                        <option value="cpu">CPU 使用率</option>
+                        <option value="memory">内存使用率</option>
+                        <option value="disk">磁盘使用率</option>
+                    </select>
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">触发阈值 *</label>
+                    <div class="flex items-center gap-2">
+                        <input type="number" id="emailRuleThreshold" required min="1" max="100" value="80" class="w-20 bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                        <span class="text-gray-400">%</span>
+                    </div>
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">触发机制 *</label>
+                    <select id="emailRuleTriggerType" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" onchange="updateTriggerParams()">
+                        <option value="single">一次性触发 - 超过阈值立即通知</option>
+                        <option value="continuous">连续触发 - 连续超过阈值N次</option>
+                        <option value="duration">持续时间触发 - 累计超过阈值N秒</option>
+                        <option value="average">平均值触发 - 最近N次平均值超过阈值</option>
+                    </select>
+                </div>
+                
+                <div class="mb-3" id="triggerParamsDiv" style="display:none;">
+                    <label class="block text-gray-400 text-sm mb-1" id="triggerParamsLabel">触发参数</label>
+                    <div class="flex items-center gap-2">
+                        <input type="number" id="emailRuleTriggerParam" min="1" max="100" value="3" class="w-20 bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                        <span class="text-gray-400" id="triggerParamUnit">次</span>
+                    </div>
+                    <p class="text-gray-500 text-xs mt-1" id="triggerParamHint">连续超过阈值多少次才触发</p>
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">收件邮箱 *</label>
+                    <input type="email" id="emailRuleAddress" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="alert@example.com">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">通知间隔</label>
+                    <div class="flex items-center gap-2">
+                        <input type="number" id="emailRuleInterval" min="60" max="3600" value="300" class="w-20 bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                        <span class="text-gray-400">秒（最少60秒）</span>
+                    </div>
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">静默时间区间</label>
+                    <p class="text-gray-500 text-xs mb-2">在此时间段内不发送邮件通知（如夜间休息时段）</p>
+                    <div class="flex items-center gap-2">
+                        <input type="time" id="emailRuleSilentStart" class="bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" value="23:00">
+                        <span class="text-gray-400">至</span>
+                        <input type="time" id="emailRuleSilentEnd" class="bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" value="08:00">
+                        <input type="checkbox" id="emailRuleSilentEnabled" class="w-4 h-4 cursor-pointer ml-2">
+                        <label for="emailRuleSilentEnabled" class="text-gray-300 text-xs cursor-pointer">启用静默</label>
+                    </div>
+                </div>
+                
+                <div class="mb-3 flex items-center gap-2">
+                    <input type="checkbox" id="emailRuleEnabled" checked class="w-4 h-4 cursor-pointer">
+                    <label for="emailRuleEnabled" class="text-gray-300 text-sm cursor-pointer">启用此规则</label>
+                </div>
+                
+                <div class="flex justify-end gap-2">
+                    <button type="button" onclick="closeEmailRuleModal()" 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>
@@ -1570,6 +1887,13 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
         document.getElementById('enableLogs').checked = enableLogs;
 
         // Tab 切换
+        // 系统资源监控变量（必须先声明）
+        let realtimeTimer = null;
+        let realtimeInterval = 2; // 秒
+        let lastAlertTime = 0; // 上次警告时间
+        let thresholds = { cpu: 80, memory: 85, disk: 90, interval: 60 };
+        let desktopNotifyEnabled = false;
+
         function switchTab(tab) {
             currentTab = tab;
             document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -1586,19 +1910,173 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                 document.getElementById('realtimeCheck').checked = false;
                 document.getElementById('realtimeToggle').classList.remove('active');
                 document.getElementById('realtimeIndicator').classList.add('hidden');
+                document.getElementById('processListSection').classList.add('hidden');
             }
             
             if (tab === 'cron') {
                 loadCronTasks();
             }
             if (tab === 'system') {
+                loadThresholds();
+                loadDesktopNotifySetting();
+                renderEmailRules();
                 loadSystemStats();
             }
         }
 
-        // 系统资源加载
-        let realtimeTimer = null;
-        let realtimeInterval = 2; // 秒
+        // 加载阈值设置
+        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));
+        }
+        
+        // 桌面通知开关（已在外部声明 desktopNotifyEnabled）
+        
+        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);
+            }
+            
+            // 检查邮件通知规则
+            checkEmailRules(data);
+        }
+        
+        // 显示警告弹窗（同时发送桌面通知）
+        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;
@@ -1653,26 +2131,85 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                 document.getElementById('netSentSpeed').textContent = data.network.sent_speed || '-';
                 document.getElementById('netRecvSpeed').textContent = data.network.recv_speed || '-';
                 
+                // 检查阈值
+                checkThresholds(data);
+                
+                // 如果实时监控开启，加载进程列表
+                if (document.getElementById('realtimeCheck').checked) {
+                    loadTopProcesses();
+                }
+                
             } catch (e) {
                 console.error('系统资源加载失败:', e);
             }
         }
         
+        // 加载CPU占用最高的进程
+        async function loadTopProcesses() {
+            try {
+                const limit = document.getElementById('processLimitSelect').value;
+                const res = await fetch(`/api/system/processes?limit=${limit}`);
+                const data = await res.json();
+                
+                if (!data.available) {
+                    document.getElementById('processList').innerHTML = '<div class="text-red-400 text-center py-4">无法获取进程信息</div>';
+                    return;
+                }
+                
+                const list = document.getElementById('processList');
+                if (data.processes.length === 0) {
+                    list.innerHTML = '<div class="text-gray-500 text-center py-4">暂无进程数据</div>';
+                    return;
+                }
+                
+                list.innerHTML = data.processes.map(proc => `
+                    <div class="card rounded-lg p-3 hover:border-gray-500 transition-colors">
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-3 min-w-0">
+                                <span class="text-purple-400 font-mono text-sm">${proc.pid}</span>
+                                <div class="min-w-0 flex-1">
+                                    <div class="text-gray-200 truncate">${proc.name}</div>
+                                    <div class="text-gray-500 text-xs truncate">${proc.cmdline || proc.exe}</div>
+                                </div>
+                            </div>
+                            <div class="flex items-center gap-4 text-xs shrink-0">
+                                <div class="text-right">
+                                    <span class="text-blue-400 font-bold">${proc.cpu.toFixed(1)}%</span>
+                                    <span class="text-gray-500 ml-1">CPU</span>
+                                </div>
+                                <div class="text-right">
+                                    <span class="text-green-400 font-bold">${proc.memory.toFixed(1)}%</span>
+                                    <span class="text-gray-500 ml-1">内存</span>
+                                </div>
+                                <div class="text-gray-400">${proc.create_time}</div>
+                            </div>
+                        </div>
+                    </div>
+                `).join('');
+            } catch (e) {
+                console.error('进程列表加载失败:', e);
+            }
+        }
+        
         function toggleRealtime() {
             const checked = document.getElementById('realtimeCheck').checked;
             const toggle = document.getElementById('realtimeToggle');
             const indicator = document.getElementById('realtimeIndicator');
+            const processSection = document.getElementById('processListSection');
             
             if (checked) {
                 toggle.classList.add('active');
                 indicator.classList.remove('hidden');
+                processSection.classList.remove('hidden');
                 // 立即加载一次
                 loadSystemStats();
+                loadTopProcesses();
                 // 启动定时器
                 realtimeTimer = setInterval(loadSystemStats, realtimeInterval * 1000);
             } else {
                 toggle.classList.remove('active');
                 indicator.classList.add('hidden');
+                processSection.classList.add('hidden');
                 // 停止定时器
                 if (realtimeTimer) {
                     clearInterval(realtimeTimer);
@@ -1697,6 +2234,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);
@@ -1992,6 +2536,322 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
             localStorage.setItem('customServices', JSON.stringify(services));
         }
         
+        // ==================== 邮件通知规则管理 ====================
+        
+        function getEmailRules() {
+            const stored = localStorage.getItem('emailNotifyRules');
+            return stored ? JSON.parse(stored) : [];
+        }
+        
+        function saveEmailRules(rules) {
+            localStorage.setItem('emailNotifyRules', JSON.stringify(rules));
+        }
+        
+        function renderEmailRules() {
+            const rules = getEmailRules();
+            const list = document.getElementById('emailRulesList');
+            
+            if (rules.length === 0) {
+                list.innerHTML = '<div class="text-gray-500 text-center py-4">暂无邮件通知规则</div>';
+                return;
+            }
+            
+            const resourceNames = { 'cpu': 'CPU', 'memory': '内存', 'disk': '磁盘' };
+            
+            list.innerHTML = rules.map(rule => {
+                const silentInfo = rule.silentEnabled ? `静默:${rule.silentStart}-${rule.silentEnd}` : '';
+                const triggerType = rule.triggerType || 'single';
+                const triggerParam = rule.triggerParam || 3;
+                let triggerDisplay = '一次性';
+                if (triggerType === 'continuous') triggerDisplay = `连续${triggerParam}次`;
+                else if (triggerType === 'duration') triggerDisplay = `持续${triggerParam}秒`;
+                else if (triggerType === 'average') triggerDisplay = `平均${triggerParam}次`;
+                
+                return `
+                <div class="flex items-center justify-between bg-gray-700/50 px-3 py-2 rounded-lg">
+                    <div class="flex items-center gap-3 flex-wrap">
+                        <span class="px-2 py-0.5 rounded text-xs ${rule.enabled ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'}">${rule.enabled ? '启用' : '禁用'}</span>
+                        <span class="text-gray-200">${rule.name}</span>
+                        <span class="text-gray-400 text-xs">${resourceNames[rule.resource]} ≥ ${rule.threshold}%</span>
+                        <span class="text-blue-400/70 text-xs"><i class="ri-flashlight-line"></i> ${triggerDisplay}</span>
+                        <span class="text-gray-400 text-xs">→ ${rule.email}</span>
+                        ${silentInfo ? `<span class="text-yellow-400/70 text-xs"><i class="ri-moon-line"></i> ${silentInfo}</span>` : ''}
+                    </div>
+                    <div class="flex items-center gap-1">
+                        <button onclick="editEmailRule('${rule.id}')" class="text-blue-400 hover:text-blue-300 px-1" title="编辑"><i class="ri-edit-line"></i></button>
+                        <button onclick="deleteEmailRule('${rule.id}')" class="text-red-400 hover:text-red-300 px-1" title="删除"><i class="ri-delete-bin-line"></i></button>
+                    </div>
+                </div>
+            `;
+            }).join('');
+        }
+        
+        function showAddEmailRuleModal() {
+            document.getElementById('emailRuleModalTitle').textContent = '添加邮件通知规则';
+            document.getElementById('emailRuleId').value = '';
+            document.getElementById('emailRuleName').value = '';
+            document.getElementById('emailRuleResource').value = 'cpu';
+            document.getElementById('emailRuleThreshold').value = 80;
+            document.getElementById('emailRuleTriggerType').value = 'single';
+            document.getElementById('emailRuleTriggerParam').value = 3;
+            document.getElementById('triggerParamsDiv').style.display = 'none';
+            document.getElementById('emailRuleAddress').value = '';
+            document.getElementById('emailRuleInterval').value = 300;
+            document.getElementById('emailRuleSilentStart').value = '23:00';
+            document.getElementById('emailRuleSilentEnd').value = '08:00';
+            document.getElementById('emailRuleSilentEnabled').checked = false;
+            document.getElementById('emailRuleEnabled').checked = true;
+            document.getElementById('emailRuleModal').classList.remove('hidden');
+        }
+        
+        function closeEmailRuleModal() {
+            document.getElementById('emailRuleModal').classList.add('hidden');
+        }
+        
+        function updateTriggerParams() {
+            const triggerType = document.getElementById('emailRuleTriggerType').value;
+            const paramsDiv = document.getElementById('triggerParamsDiv');
+            const labelEl = document.getElementById('triggerParamsLabel');
+            const unitEl = document.getElementById('triggerParamUnit');
+            const hintEl = document.getElementById('triggerParamHint');
+            const paramInput = document.getElementById('emailRuleTriggerParam');
+            
+            // 根据触发类型设置不同的参数
+            switch (triggerType) {
+                case 'single':
+                    paramsDiv.style.display = 'none';
+                    break;
+                case 'continuous':
+                    paramsDiv.style.display = 'flex';
+                    labelEl.textContent = '连续次数';
+                    unitEl.textContent = '次';
+                    hintEl.textContent = '连续超过阈值多少次才触发';
+                    paramInput.max = 100;
+                    paramInput.value = 3;
+                    break;
+                case 'duration':
+                    paramsDiv.style.display = 'flex';
+                    labelEl.textContent = '持续时间';
+                    unitEl.textContent = '秒';
+                    hintEl.textContent = '累计超过阈值多少秒才触发';
+                    paramInput.max = 3600;
+                    paramInput.value = 60;
+                    break;
+                case 'average':
+                    paramsDiv.style.display = 'flex';
+                    labelEl.textContent = '采样次数';
+                    unitEl.textContent = '次';
+                    hintEl.textContent = '最近N次采样的平均值超过阈值才触发';
+                    paramInput.max = 100;
+                    paramInput.value = 5;
+                    break;
+            }
+        }
+        
+        function editEmailRule(ruleId) {
+            const rules = getEmailRules();
+            const rule = rules.find(r => r.id === ruleId);
+            if (!rule) return;
+            
+            document.getElementById('emailRuleModalTitle').textContent = '编辑邮件通知规则';
+            document.getElementById('emailRuleId').value = rule.id;
+            document.getElementById('emailRuleName').value = rule.name;
+            document.getElementById('emailRuleResource').value = rule.resource;
+            document.getElementById('emailRuleThreshold').value = rule.threshold;
+            document.getElementById('emailRuleTriggerType').value = rule.triggerType || 'single';
+            document.getElementById('emailRuleTriggerParam').value = rule.triggerParam || 3;
+            updateTriggerParams();
+            document.getElementById('emailRuleAddress').value = rule.email;
+            document.getElementById('emailRuleInterval').value = rule.interval;
+            document.getElementById('emailRuleSilentStart').value = rule.silentStart || '23:00';
+            document.getElementById('emailRuleSilentEnd').value = rule.silentEnd || '08:00';
+            document.getElementById('emailRuleSilentEnabled').checked = rule.silentEnabled || false;
+            document.getElementById('emailRuleEnabled').checked = rule.enabled;
+            document.getElementById('emailRuleModal').classList.remove('hidden');
+        }
+        
+        function saveEmailRule(event) {
+            event.preventDefault();
+            
+            const ruleId = document.getElementById('emailRuleId').value;
+            const name = document.getElementById('emailRuleName').value.trim();
+            const resource = document.getElementById('emailRuleResource').value;
+            const threshold = parseInt(document.getElementById('emailRuleThreshold').value);
+            const triggerType = document.getElementById('emailRuleTriggerType').value;
+            const triggerParam = parseInt(document.getElementById('emailRuleTriggerParam').value) || 3;
+            const email = document.getElementById('emailRuleAddress').value.trim();
+            const interval = parseInt(document.getElementById('emailRuleInterval').value) || 300;
+            const silentStart = document.getElementById('emailRuleSilentStart').value;
+            const silentEnd = document.getElementById('emailRuleSilentEnd').value;
+            const silentEnabled = document.getElementById('emailRuleSilentEnabled').checked;
+            const enabled = document.getElementById('emailRuleEnabled').checked;
+            
+            if (!name || !email) {
+                alert('请填写完整信息');
+                return;
+            }
+            
+            const rules = getEmailRules();
+            
+            if (ruleId) {
+                // 编辑
+                const idx = rules.findIndex(r => r.id === ruleId);
+                if (idx >= 0) {
+                    rules[idx] = { ...rules[idx], name, resource, threshold, triggerType, triggerParam, email, interval, silentStart, silentEnd, silentEnabled, enabled };
+                }
+            } else {
+                // 新增
+                rules.push({
+                    id: 'rule_' + Date.now(),
+                    name, resource, threshold, triggerType, triggerParam, email, interval, silentStart, silentEnd, silentEnabled, enabled,
+                    lastSent: 0,
+                    exceedCount: 0,  // 连续超过次数
+                    exceedDuration: 0,  // 累计超过时间
+                    recentValues: []  // 最近采样值
+                });
+            }
+            
+            saveEmailRules(rules);
+            closeEmailRuleModal();
+            renderEmailRules();
+        }
+        
+        function deleteEmailRule(ruleId) {
+            if (!confirm('确定删除此邮件通知规则？')) return;
+            const rules = getEmailRules().filter(r => r.id !== ruleId);
+            saveEmailRules(rules);
+            renderEmailRules();
+        }
+        
+        // 检查邮件规则并发送通知
+        async function checkEmailRules(data) {
+            const rules = getEmailRules().filter(r => r.enabled);
+            const now = Date.now();
+            const nowTime = new Date();
+            const currentHour = nowTime.getHours();
+            const currentMin = nowTime.getMinutes();
+            const currentTimeStr = `${currentHour.toString().padStart(2, '0')}:${currentMin.toString().padStart(2, '0')}`;
+            
+            for (const rule of rules) {
+                // 检查间隔
+                if (now - rule.lastSent < rule.interval * 1000) continue;
+                
+                // 检查静默时间
+                if (rule.silentEnabled && rule.silentStart && rule.silentEnd) {
+                    const start = rule.silentStart;
+                    const end = rule.silentEnd;
+                    
+                    // 处理跨越午夜的情况（如23:00到08:00）
+                    let inSilentPeriod = false;
+                    if (start > end) {
+                        // 跨越午夜：如23:00-08:00，则currentTime >= start 或 currentTime < end 都在静默区间
+                        inSilentPeriod = (currentTimeStr >= start || currentTimeStr < end);
+                    } else {
+                        // 同一天内：如01:00-06:00
+                        inSilentPeriod = (currentTimeStr >= start && currentTimeStr < end);
+                    }
+                    
+                    if (inSilentPeriod) {
+                        console.log(`规则 ${rule.name} 当前在静默时间段 ${start}-${end}，跳过发送`);
+                        continue;
+                    }
+                }
+                
+                // 检查阈值和触发机制
+                const value = data[rule.resource]?.percent;
+                if (value === undefined) continue;
+                
+                // 初始化触发相关数据
+                if (!rule.exceedCount) rule.exceedCount = 0;
+                if (!rule.exceedDuration) rule.exceedDuration = 0;
+                if (!rule.recentValues) rule.recentValues = [];
+                if (!rule.triggerType) rule.triggerType = 'single';
+                if (!rule.triggerParam) rule.triggerParam = 3;
+                
+                const triggerType = rule.triggerType;
+                const triggerParam = rule.triggerParam;
+                const isExceedThreshold = value >= rule.threshold;
+                
+                let shouldTrigger = false;
+                
+                // 根据触发类型判断
+                switch (triggerType) {
+                    case 'single':
+                        // 一次性触发：超过阈值立即触发
+                        if (isExceedThreshold) shouldTrigger = true;
+                        break;
+                    
+                    case 'continuous':
+                        // 连续触发：连续超过阈值N次
+                        if (isExceedThreshold) {
+                            rule.exceedCount++;
+                            if (rule.exceedCount >= triggerParam) {
+                                shouldTrigger = true;
+                                rule.exceedCount = 0; // 触发后重置计数
+                            }
+                        } else {
+                            rule.exceedCount = 0; // 未超过阈值时重置计数
+                        }
+                        break;
+                    
+                    case 'duration':
+                        // 持续时间触发：累计超过阈值N秒
+                        if (isExceedThreshold) {
+                            // 增加累计时间（假设实时监控间隔为2秒）
+                            const intervalSeconds = realtimeInterval || 2;
+                            rule.exceedDuration += intervalSeconds;
+                            if (rule.exceedDuration >= triggerParam) {
+                                shouldTrigger = true;
+                                rule.exceedDuration = 0; // 触发后重置
+                            }
+                        } else {
+                            rule.exceedDuration = 0; // 未超过阈值时重置累计时间
+                        }
+                        break;
+                    
+                    case 'average':
+                        // 平均值触发：最近N次平均值超过阈值
+                        rule.recentValues.push(value);
+                        if (rule.recentValues.length > triggerParam) {
+                            rule.recentValues.shift(); // 保持最近N个值
+                        }
+                        if (rule.recentValues.length >= triggerParam) {
+                            const avg = rule.recentValues.reduce((a, b) => a + b, 0) / rule.recentValues.length;
+                            if (avg >= rule.threshold) {
+                                shouldTrigger = true;
+                            }
+                        }
+                        break;
+                }
+                
+                // 保存更新的规则数据
+                saveEmailRules(getEmailRules().map(r => r.id === rule.id ? rule : r));
+                
+                if (!shouldTrigger) continue;
+                
+                // 发送邮件
+                try {
+                    const res = await fetch('/api/email/send', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            to: rule.email,
+                            subject: `[系统告警] ${rule.name}`,
+                            body: `${rule.name} 触发告警\n\n${rule.resource.toUpperCase()} 使用率: ${value.toFixed(1)}%\n阈值: ${rule.threshold}%\n时间: ${new Date().toLocaleString()}\n\n请及时处理。`
+                        })
+                    });
+                    
+                    if (res.ok) {
+                        // 更新发送时间
+                        rule.lastSent = now;
+                        saveEmailRules(getEmailRules().map(r => r.id === rule.id ? rule : r));
+                    }
+                } catch (e) {
+                    console.error('邮件发送失败:', e);
+                }
+            }
+        }
+        
         function showAddServiceModal() {
             document.getElementById('serviceName').value = '';
             document.getElementById('servicePort').value = '';

logs/app.log

@@ -1,8 +1,8 @@
-[2026-04-23 17:35:41] ==================================================
-[2026-04-23 17:35:41] 项目服务管理面板 v2.0.0 启动
-[2026-04-23 17:35:41] 访问地址: http://localhost:19013
-[2026-04-23 17:35:41] 进程PID: 1133475
-[2026-04-23 17:35:41] ==================================================
+[2026-04-23 23:57:38] ==================================================
+[2026-04-23 23:57:38] 项目服务管理面板 v2.0.0 启动
+[2026-04-23 23:57:38] 访问地址: http://localhost:19013
+[2026-04-23 23:57:38] 进程PID: 1274690
+[2026-04-23 23:57:38] ==================================================
  * 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,8 +10,32 @@ 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 - - [23/Apr/2026 17:35:43] "GET / HTTP/1.1" 200 -
-127.0.0.1 - - [23/Apr/2026 17:35:44] "GET / HTTP/1.1" 200 -
-192.168.2.8 - - [23/Apr/2026 17:35:45] "GET /api/projects HTTP/1.1" 200 -
-127.0.0.1 - - [23/Apr/2026 17:35:53] "GET / HTTP/1.1" 200 -
-192.168.2.8 - - [23/Apr/2026 17:35:55] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:57:42] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:57:43] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:57:45] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:57:47] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:57:52] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:57:53] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:57:55] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:57:57] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:02] "GET / HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:02] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:58:03] "GET /api/projects HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:04] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:05] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:07] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:12] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:58:13] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:15] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:17] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:19] "GET /api/system/processes?limit=5 HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:22] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:58:23] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:25] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:27] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:32] "GET / HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:32] "GET / HTTP/1.1" 200 -
+192.168.2.14 - - [23/Apr/2026 23:58:33] "GET /api/projects HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:34] "GET /api/projects HTTP/1.1" 200 -
+127.0.0.1 - - [23/Apr/2026 23:58:35] "GET / HTTP/1.1" 200 -
+192.168.2.8 - - [23/Apr/2026 23:58:37] "GET /api/projects HTTP/1.1" 200 -