feat: Web服务区域新增添加Web服务功能

- 添加新增Web服务按钮到筛选栏
- 实现完整的Web服务添加表单（ID、名称、端口、目录、启动命令等）
- 新增的Web服务具有所有现有功能（启停、日志、状态监控）
- 移除之前的文本块功能

config.py

@@ -21,7 +21,7 @@ ALERT_CONFIG_FILE = 'alert_config.json'
 # 应用配置
 APP_NAME = "项目服务管理面板"
 APP_VERSION = "v3.4.1"
-APP_PORT = 16022
+APP_PORT = 16023
 
 # 监控配置
 DEFAULT_THRESHOLDS = {

logs/watchdog.log

@@ -0,0 +1 @@
+[2026-06-01 20:29:22] 守护进程启动，监控端口 16022

projects.json

@@ -10,29 +10,35 @@
       "id": "pdf-translate-web",
       "name": "PDF翻译助手",
       "type": "web",
-      "ports": [16021],
-      "directory": "works/pdf-translate-web",
+      "ports": [
+        16021
+      ],
+      "directory": "pdf-translate-web",
       "start_cmd": "mkdir -p logs && nohup /home/hz1/miniconda3/envs/openclaw/bin/python3.12 app.py > logs/app.log 2>&1 & disown",
       "stop_cmd": "pkill -f 'python.*pdf-translate-web.*app.py' || true",
       "health_url": "http://localhost:16021/",
       "description": "英文PDF翻译中文网站，支持用户系统、会员体系",
       "admin_url": "http://localhost:16021/admin",
       "git_repo": "http://121.40.164.32:12007/coder/pdf-translate-web",
-      "version": "v2.0.0"
+      "version": "v2.0.0",
+      "log_file": ""
     },
     {
       "id": "project-panel",
       "name": "项目服务管理面板",
       "type": "web",
-      "ports": [16022],
-      "directory": "works/project-panel",
+      "ports": [
+        16022
+      ],
+      "directory": "project-panel",
       "start_cmd": "mkdir -p logs && nohup /home/hz1/miniconda3/envs/openclaw/bin/python3.12 app.py > logs/app.log 2>&1 & disown",
-      "stop_cmd": "pkill -f 'python.*project-panel.*app.py' || true",
+      "stop_cmd": "pkill -f python.*project-panel.*app.py || true",
       "health_url": "http://localhost:16022/",
       "description": "统一管理所有 Web 服务项目，支持 Docker 监控、系统资源监控、Cron 管理",
       "admin_url": "http://localhost:16022",
       "git_repo": "http://121.40.164.32:12007/hz4th_coder/project-panel",
-      "version": "v3.0.0"
+      "version": "v3.0.0",
+      "log_file": "logs/app.log"
     }
   ],
   "external_services": [
@@ -40,7 +46,9 @@
       "id": "meilisearch",
       "name": "Meilisearch 搜索引擎",
       "type": "external",
-      "ports": [16001],
+      "ports": [
+        16001
+      ],
       "health_url": "http://localhost:16001/health",
       "description": "高性能搜索引擎，只读监控"
     }

routes_project.py

@@ -68,9 +68,11 @@ def register_project_routes(app):
         
         if project.get('start_cmds'):
             for name, info in project['start_cmds'].items():
+                log_message(f"[API-START] 项目={project_id} 命令={info['cmd']} 目录={cwd}")
                 run_command(info['cmd'], cwd, project_id, f'start-{name}')
         else:
             cmd = project.get('start_cmd', 'python3 app.py')
+            log_message(f"[API-START] 项目={project_id} 命令={cmd} 目录={cwd}")
             run_command(cmd, cwd, project_id, 'start')
         
         return jsonify({'message': '服务启动中...'})
@@ -128,7 +130,9 @@ def register_project_routes(app):
             'directory': data.get('directory', ''),
             'start_cmd': data.get('start_cmd', ''),
             'stop_cmd': data.get('stop_cmd', ''),
+            'log_file': data.get('log_file', ''),
             'health_url': data.get('health_url', ''),
+            'admin_url': data.get('admin_url', ''),
             'description': data.get('description', ''),
             'git_repo': data.get('git_repo', ''),
             'version': data.get('version', 'v1.0.0')
@@ -152,7 +156,7 @@ def register_project_routes(app):
             return jsonify({'error': '项目不存在'}), 404
         
         # 更新字段
-        for key in ['name', 'ports', 'directory', 'start_cmd', 'stop_cmd', 'health_url', 'description', 'git_repo', 'version']:
+        for key in ['name', 'ports', 'directory', 'log_file', 'start_cmd', 'stop_cmd', 'health_url', 'admin_url', 'description', 'git_repo', 'version']:
             if key in data:
                 project[key] = data[key]
         
@@ -162,6 +166,55 @@ def register_project_routes(app):
         
         return jsonify({'message': '项目更新成功'})
     
+    @app.route('/api/projects/<project_id>/log')
+    def api_project_log(project_id):
+        """获取项目日志"""
+        projects = load_projects()
+        project = next((p for p in projects if p['id'] == project_id), None)
+        if not project:
+            return jsonify({'error': '项目不存在'}), 404
+        
+        lines = request.args.get('lines', 200, type=int)
+        lines = max(1, min(lines, 5000))  # 限制 1-5000 行
+        
+        log_file = project.get('log_file', '')
+        if not log_file:
+            # 默认：项目目录下的 logs/app.log
+            cwd = project.get('directory', '')
+            if cwd:
+                from config import WORKSPACE_DIR
+                import os
+                abs_dir = cwd if cwd.startswith('/') else os.path.join(WORKSPACE_DIR, cwd)
+                log_file = os.path.join(abs_dir, 'logs', 'app.log')
+        
+        # 支持相对路径和绝对路径
+        import os
+        if not log_file.startswith('/'):
+            cwd = project.get('directory', '')
+            if cwd:
+                from config import WORKSPACE_DIR
+                abs_dir = cwd if cwd.startswith('/') else os.path.join(WORKSPACE_DIR, cwd)
+                log_file = os.path.join(abs_dir, log_file)
+        
+        if not os.path.exists(log_file):
+            return jsonify({'log': f'日志文件不存在: {log_file}'})
+        
+        try:
+            # 读取最后 N 行（高效方式）
+            with open(log_file, 'r', encoding='utf-8', errors='replace') as f:
+                all_lines = f.readlines()
+                tail_lines = all_lines[-lines:] if len(all_lines) > lines else all_lines
+                content = ''.join(tail_lines)
+            
+            return jsonify({
+                'log': content if content else '(日志为空)',
+                'file': log_file,
+                'total_lines': len(all_lines),
+                'shown_lines': len(tail_lines)
+            })
+        except Exception as e:
+            return jsonify({'error': f'读取日志失败: {str(e)}'}), 500
+    
     @app.route('/api/projects/<project_id>', methods=['DELETE'])
     def api_delete_project(project_id):
         """删除项目"""

templates_full.txt

@@ -67,6 +67,9 @@
         .history-item.toggle { border-left-color: #8b5cf6; }
         .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; }
         .modal-content { max-width: 600px; width: 90%; max-height: 80vh; overflow: auto; }
+        .section-header { cursor: pointer; user-select: none; }
+        .section-header:hover { opacity: 0.85; }
+        .chevron { display: inline-block; transition: transform 0.2s ease; font-size: 14px; }
     </style>
 </head>
 <body class="min-h-screen text-gray-100">
@@ -174,6 +177,7 @@
                 <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>
+                <button onclick="showAddWebModal()" class="filter-bar-btn add-btn"><i class="ri-server-line"></i> 新增Web服务</button>
             </div>
 
             <!-- 项目列表 -->
@@ -555,20 +559,20 @@
             </div>
 
             <!-- 容器列表 -->
-            <h3 class="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2">
-                <i class="ri-computer-line text-blue-400"></i> 容器列表
+            <h3 class="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2 section-header" onclick="toggleSection('docker-containers-grid', this.querySelector('.chevron'))">
+                <i class="ri-arrow-down-s-line chevron"></i><i class="ri-computer-line text-blue-400"></i> 容器列表
                 <span id="dockerContainerCount" class="text-xs text-gray-500"></span>
             </h3>
-            <div id="dockerContainersList" class="space-y-2 mb-6">
+            <div id="docker-containers-grid" class="space-y-2 mb-6">
                 <div class="text-gray-500 text-sm py-4 text-center">加载中...</div>
             </div>
 
             <!-- 镜像列表 -->
-            <h3 class="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2">
-                <i class="ri-stack-line text-purple-400"></i> 镜像列表
+            <h3 class="text-sm font-semibold text-gray-300 mb-2 flex items-center gap-2 section-header" onclick="toggleSection('docker-images-grid', this.querySelector('.chevron'))">
+                <i class="ri-arrow-down-s-line chevron"></i><i class="ri-stack-line text-purple-400"></i> 镜像列表
                 <span id="dockerImageCount" class="text-xs text-gray-500"></span>
             </h3>
-            <div id="dockerImagesList" class="space-y-1">
+            <div id="docker-images-grid" class="space-y-1">
                 <div class="text-gray-500 text-sm py-4 text-center">加载中...</div>
             </div>
         </div>
@@ -698,15 +702,16 @@
         </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>
+                <h3 id="addServiceModalTitle" 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)">
+                <input type="hidden" id="editServiceId">
                 <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、监控面板">
@@ -746,6 +751,63 @@
         </div>
     </div>
 
+    <!-- 新增Web服务模态框 -->
+    <div id="addWebModal" 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">新增Web服务</h3>
+                <button onclick="closeAddWebModal()" class="text-gray-400 hover:text-white"><i class="ri-close-line text-xl"></i></button>
+            </div>
+            
+            <form id="addWebForm" onsubmit="saveWebProject(event)">
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">服务ID *</label>
+                    <input type="text" id="webProjectId" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="唯一标识，如：my-service">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">服务名称 *</label>
+                    <input type="text" id="webProjectName" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="显示名称">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">端口 *</label>
+                    <input type="text" id="webProjectPorts" required class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="多个端口用逗号分隔，如：8080,8081">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">项目目录</label>
+                    <input type="text" id="webProjectDir" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="相对于works目录，如：tech-blog">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">启动命令</label>
+                    <input type="text" id="webProjectStartCmd" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="如：python3 app.py">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">停止命令</label>
+                    <input type="text" id="webProjectStopCmd" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="可选">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">后台URL</label>
+                    <input type="text" id="webProjectAdminUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="如：http://localhost:8080/admin">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">描述</label>
+                    <input type="text" id="webProjectDesc" 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="closeAddWebModal()" 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 id="emailRuleModal" class="modal-overlay hidden">
         <div class="card rounded-xl modal-content p-6">
@@ -909,6 +971,83 @@
         </div>
     </div>
 
+    <!-- 编辑项目配置模态框 -->
+    <div id="editProjectModal" class="modal-overlay hidden">
+        <div class="card rounded-xl modal-content p-6">
+            <div class="flex items-center justify-between mb-4">
+                <h3 id="editProjectModalTitle" class="font-bold text-lg">编辑项目配置</h3>
+                <button onclick="closeEditProjectModal()" class="text-gray-400 hover:text-white"><i class="ri-close-line text-xl"></i></button>
+            </div>
+            
+            <form id="editProjectForm" onsubmit="saveProjectEdit(event)">
+                <input type="hidden" id="editProjectId">
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">项目名称</label>
+                    <input type="text" id="editProjectName" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">项目目录 <span class="text-xs text-gray-500">(相对或绝对路径)</span></label>
+                    <input type="text" id="editProjectDir" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="相对：works/my-project 或 绝对：/home/user/project">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">端口（逗号分隔）</label>
+                    <input type="text" id="editProjectPorts" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：16022,16023">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">健康检查URL</label>
+                    <input type="text" id="editProjectHealthUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://localhost:16022/">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">后台URL</label>
+                    <input type="text" id="editProjectAdminUrl" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://localhost:16022/admin">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">Git 仓库地址</label>
+                    <input type="text" id="editProjectGitRepo" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="例如：http://.../project.git">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">版本</label>
+                    <input type="text" id="editProjectVersion" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg" placeholder="v1.0.0">
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">📁 日志文件路径 <span class="text-xs text-gray-500">(相对或绝对路径)</span></label>
+                    <input type="text" id="editProjectLogFile" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg font-mono text-sm" placeholder="相对：logs/app.log 或绝对路径。留空则默认 项目目录/logs/app.log">
+                    <p class="text-xs text-gray-500 mt-1">服务日志文件的位置，点击「日志」按钮时读取此文件</p>
+                </div>
+                
+                <div class="mb-3">
+                    <label class="block text-gray-400 text-sm mb-1">📋 启动命令</label>
+                    <textarea id="editProjectStartCmd" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg font-mono text-sm" rows="3" placeholder="例如：nohup python3 app.py > logs/app.log 2>&1 & disown"></textarea>
+                    <p class="text-xs text-gray-500 mt-1">服务启动时执行的命令</p>
+                </div>
+                
+                <div class="mb-4">
+                    <label class="block text-gray-400 text-sm mb-1">🛑 停止命令</label>
+                    <textarea id="editProjectStopCmd" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg font-mono text-sm" rows="2" placeholder="例如：pkill -f 'python.*project.*app.py' || true"></textarea>
+                    <p class="text-xs text-gray-500 mt-1">服务停止时执行的命令</p>
+                </div>
+                
+                <div class="mb-4">
+                    <label class="block text-gray-400 text-sm mb-1">描述</label>
+                    <input type="text" id="editProjectDesc" class="w-full bg-gray-700 text-gray-200 px-3 py-2 rounded-lg">
+                </div>
+                
+                <div class="flex justify-end gap-2">
+                    <button type="button" onclick="closeEditProjectModal()" class="btn bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-lg">取消</button>
+                    <button type="submit" class="btn bg-blue-600 hover:bg-blue-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>
@@ -929,11 +1068,46 @@
         // Tab 切换
         // 系统资源监控变量（必须先声明）
         let realtimeTimer = null;
+        let systemRefreshTimer = null;
         let realtimeInterval = 2; // 秒
         let lastAlertTime = 0; // 上次警告时间
         let thresholds = { cpu: 80, cpu_temp: 80, memory: 85, disk: 90, interval: 60 };
         let desktopNotifyEnabled = false;
 
+        // ==================== 折叠/展开 ====================
+        function getCollapsedState() {
+            const stored = localStorage.getItem('collapsedSections');
+            return stored ? JSON.parse(stored) : {};
+        }
+        function saveCollapsedState(state) {
+            localStorage.setItem('collapsedSections', JSON.stringify(state));
+        }
+        function toggleSection(sectionId, chevronEl) {
+            const grid = document.getElementById(sectionId);
+            if (!grid) return;
+            const state = getCollapsedState();
+            if (grid.classList.contains('hidden')) {
+                grid.classList.remove('hidden');
+                if (chevronEl) chevronEl.style.transform = 'rotate(0deg)';
+                state[sectionId] = false;
+            } else {
+                grid.classList.add('hidden');
+                if (chevronEl) chevronEl.style.transform = 'rotate(-90deg)';
+                state[sectionId] = true;
+            }
+            saveCollapsedState(state);
+        }
+        function applyCollapsedState(sectionId, gridEl, chevronEl) {
+            const state = getCollapsedState();
+            if (state[sectionId]) {
+                gridEl.classList.add('hidden');
+                if (chevronEl) chevronEl.style.transform = 'rotate(-90deg)';
+            } else {
+                gridEl.classList.remove('hidden');
+                if (chevronEl) chevronEl.style.transform = 'rotate(0deg)';
+            }
+        }
+
         function switchTab(tab) {
             currentTab = tab;
             document.querySelectorAll('.tab-btn').forEach(btn => {
@@ -957,6 +1131,12 @@
                 document.getElementById('processListSection').classList.add('hidden');
             }
             
+            // 离开系统Tab时关闭非实时刷新定时器
+            if (tab !== 'system' && systemRefreshTimer) {
+                clearInterval(systemRefreshTimer);
+                systemRefreshTimer = null;
+            }
+            
             if (tab === 'cron') {
                 loadCronTasks();
             }
@@ -965,6 +1145,8 @@
                 loadDesktopNotifySetting();
                 renderEmailRules();
                 loadSystemStats();
+                // 启动系统资源定时刷新（按页面刷新间隔）
+                startSystemRefresh();
             }
         }
 
@@ -1281,14 +1463,17 @@
             const toggle = document.getElementById('realtimeToggle');
             const indicator = document.getElementById('realtimeIndicator');
             
+            // 先停止系统定时刷新
+            if (systemRefreshTimer) {
+                clearInterval(systemRefreshTimer);
+                systemRefreshTimer = null;
+            }
+            
             if (checked) {
                 toggle.classList.add('active');
                 indicator.classList.remove('hidden');
-                // 立即加载一次
                 loadSystemStats();
-                // 启动定时器
                 realtimeTimer = setInterval(loadSystemStats, realtimeInterval * 1000);
-                // 如果进程列表开关也开启，则显示并加载
                 if (document.getElementById('showProcessListCheck').checked) {
                     document.getElementById('processListSection').classList.remove('hidden');
                     loadTopProcesses();
@@ -1297,14 +1482,28 @@
                 toggle.classList.remove('active');
                 indicator.classList.add('hidden');
                 document.getElementById('processListSection').classList.add('hidden');
-                // 停止定时器
                 if (realtimeTimer) {
                     clearInterval(realtimeTimer);
                     realtimeTimer = null;
                 }
+                // 关闭实时后，按页面刷新间隔继续刷新系统资源
+                startSystemRefresh();
             }
         }
         
+        function startSystemRefresh() {
+            // 先停掉旧定时器
+            if (systemRefreshTimer) {
+                clearInterval(systemRefreshTimer);
+                systemRefreshTimer = null;
+            }
+            // 如果在实时监控模式则不启动（由realtimeTimer负责）
+            if (document.getElementById('realtimeCheck').checked) return;
+            // 按页面刷新间隔定时刷新
+            const intervalSec = parseInt(document.getElementById('refreshInterval').value) || 30;
+            systemRefreshTimer = setInterval(loadSystemStats, intervalSec * 1000);
+        }
+        
         function toggleProcessList() {
             const checked = document.getElementById('showProcessListCheck').checked;
             const realtimeChecked = document.getElementById('realtimeCheck').checked;
@@ -1341,6 +1540,16 @@
                 const res = await fetch('/api/projects');
                 const data = await res.json();
                 projects = data.projects;
+                
+                // 加载外部服务列表
+                try {
+                    const extRes = await fetch('/api/external-services');
+                    const extData = await extRes.json();
+                    window._externalServices = extData.services || [];
+                } catch (e) {
+                    window._externalServices = [];
+                }
+                
                 renderProjects();
                 updateStats();
                 updateConnectionStatus(true);
@@ -1419,23 +1628,38 @@
                     const archivedProjs = projs.filter(p => activeStatus[p.id] === false);
                     
                     if (activeProjs.length > 0) {
-                        html += `<div class="mb-6"><h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2"><i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>${typeInfo.name}<span class="text-sm text-gray-500">(${activeProjs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">`;
+                        const secId = 'section-web-active';
+                        html += `<div class="mb-6"><h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2 section-header" onclick="toggleSection('${secId}', this.querySelector('.chevron'))"><i class="ri-arrow-down-s-line chevron"></i><i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>${typeInfo.name}<span class="text-sm text-gray-500">(${activeProjs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3" id="${secId}">`;
                         activeProjs.forEach(p => { html += renderProjectCard(p, true); });
                         html += '</div></div>';
                     }
                     
                     if (archivedProjs.length > 0) {
-                        html += `<div class="mb-6 opacity-60"><h2 class="text-lg font-semibold text-gray-400 mb-3 flex items-center gap-2"><i class="ri-archive-line text-gray-400"></i>归档服务<span class="text-sm text-gray-500">(${archivedProjs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">`;
+                        const secId = 'section-web-archived';
+                        html += `<div class="mb-6 opacity-60"><h2 class="text-lg font-semibold text-gray-400 mb-3 flex items-center gap-2 section-header" onclick="toggleSection('${secId}', this.querySelector('.chevron'))"><i class="ri-arrow-down-s-line chevron"></i><i class="ri-archive-line text-gray-400"></i>归档服务<span class="text-sm text-gray-500">(${archivedProjs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3" id="${secId}">`;
                         archivedProjs.forEach(p => { html += renderProjectCard(p, false); });
                         html += '</div></div>';
                     }
                 } else {
-                    html += `<div class="mb-6"><h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2"><i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>${typeInfo.name}<span class="text-sm text-gray-500">(${projs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">`;
+                    const secId = 'section-' + type;
+                    html += `<div class="mb-6"><h2 class="text-lg font-semibold text-gray-300 mb-3 flex items-center gap-2 section-header" onclick="toggleSection('${secId}', this.querySelector('.chevron'))"><i class="ri-arrow-down-s-line chevron"></i><i class="${typeInfo.icon} text-${typeInfo.color}-400"></i>${typeInfo.name}<span class="text-sm text-gray-500">(${projs.length})</span></h2><div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3" id="${secId}">`;
                     projs.forEach(p => { html += renderProjectCard(p, true); });
                     html += '</div></div>';
                 }
             }
             list.innerHTML = html;
+            // 应用已保存的折叠状态
+            setTimeout(() => {
+                const state = getCollapsedState();
+                for (const [secId, collapsed] of Object.entries(state)) {
+                    const grid = document.getElementById(secId);
+                    const chevron = grid?.parentElement?.querySelector('.chevron');
+                    if (grid && collapsed) {
+                        grid.classList.add('hidden');
+                        if (chevron) chevron.style.transform = 'rotate(-90deg)';
+                    }
+                }
+            }, 10);
         }
 
         function getActiveStatus() {
@@ -1466,7 +1690,8 @@
                         <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>
+                            <button onclick="editCustomService('${p.id}')" class="text-blue-400 hover:text-blue-300 ml-1" title="编辑服务"><i class="ri-edit-line"></i></button>
+                            <button onclick="deleteCustomService('${p.id}')" class="text-red-400 hover:text-red-300 ml-1" title="删除服务"><i class="ri-delete-bin-line"></i></button>
                         </div>
                     </div>
                 `;
@@ -1512,6 +1737,7 @@
                                 <button onclick="restartProject('${p.id}')" class="btn bg-yellow-600 hover:bg-yellow-700 px-2 py-0.5 rounded text-xs">重启</button>
                             ` : `<button onclick="startProject('${p.id}')" class="btn bg-green-600 hover:bg-green-700 px-2 py-0.5 rounded text-xs">启动</button>`}
                             <button onclick="viewLog('${p.id}')" class="btn bg-gray-600 hover:bg-gray-700 px-2 py-0.5 rounded text-xs">日志</button>
+                            <button onclick="editProject('${p.id}')" class="btn bg-blue-600 hover:bg-blue-700 px-2 py-0.5 rounded text-xs">编辑</button>
                         </div>
                         <button onclick="toggleServiceActive('${p.id}')" class="text-xs ${isActive ? 'text-green-400 hover:text-green-300' : 'text-gray-400 hover:text-gray-300'}" title="${isActive ? '点击归档' : '点击激活'}">
                             <i class="ri-${isActive ? 'checkbox-circle' : 'archive'}-line"></i>
@@ -1648,6 +1874,68 @@
             localStorage.setItem('customServices', JSON.stringify(services));
         }
         
+        // ==================== 新增Web服务管理 ====================
+        
+        function showAddWebModal() {
+            document.getElementById('addWebForm').reset();
+            document.getElementById('addWebModal').classList.remove('hidden');
+        }
+        
+        function closeAddWebModal() {
+            document.getElementById('addWebModal').classList.add('hidden');
+        }
+        
+        function saveWebProject(event) {
+            event.preventDefault();
+            
+            const id = document.getElementById('webProjectId').value.trim();
+            const name = document.getElementById('webProjectName').value.trim();
+            const portsStr = document.getElementById('webProjectPorts').value.trim();
+            const directory = document.getElementById('webProjectDir').value.trim();
+            const startCmd = document.getElementById('webProjectStartCmd').value.trim();
+            const stopCmd = document.getElementById('webProjectStopCmd').value.trim();
+            const adminUrl = document.getElementById('webProjectAdminUrl').value.trim();
+            const description = document.getElementById('webProjectDesc').value.trim();
+            
+            // 解析端口
+            const ports = portsStr.split(',').map(p => parseInt(p.trim())).filter(p => !isNaN(p));
+            if (ports.length === 0) {
+                alert('请输入有效的端口号');
+                return;
+            }
+            
+            const data = {
+                id: id,
+                name: name,
+                type: 'web',
+                ports: ports,
+                directory: directory,
+                start_cmd: startCmd || 'python3 app.py',
+                stop_cmd: stopCmd,
+                admin_url: adminUrl,
+                description: description
+            };
+            
+            fetch('/api/projects/add', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data)
+            })
+            .then(res => res.json())
+            .then(result => {
+                if (result.error) {
+                    alert('错误: ' + result.error);
+                    return;
+                }
+                closeAddWebModal();
+                loadProjects();
+                alert('Web服务添加成功！');
+            })
+            .catch(err => {
+                alert('添加失败: ' + err.message);
+            });
+        }
+        
         // ==================== 邮件通知规则管理 ====================
         
         function getEmailRules() {
@@ -1741,7 +2029,7 @@
             return Array.from(checkboxes).map(cb => cb.value);
         }
         
-        function onResourceChange() {
+        function onResourceChange(preselectedServiceId) {
             const selected = getSelectedResources();
             const unitEl = document.getElementById('emailRuleThresholdUnit');
             const thresholdEl = document.getElementById('emailRuleThreshold');
@@ -1755,7 +2043,7 @@
             // 显示/隐藏服务选择器
             if (hasServiceDown) {
                 serviceSelector.style.display = 'block';
-                populateServiceSelector();
+                populateServiceSelector(preselectedServiceId);
                 // 服务下线使用分钟作为阈值单位
                 unitEl.textContent = '分钟';
                 thresholdEl.value = 5;
@@ -1794,17 +2082,63 @@
             }
         }
         
-        function populateServiceSelector() {
+        function populateServiceSelector(preselectedId) {
             const sel = document.getElementById('emailRuleServiceId');
-            const currentVal = sel.value;
-            // 收集所有web类型服务
-            const webServices = projects.filter(p => p.type === 'web');
-            let options = '<option value="">-- 请选择要监控的服务 --</option>';
-            webServices.forEach(p => {
-                const portsStr = p.ports ? p.ports.join(',') : '';
-                const selected = p.id === currentVal ? ' selected' : '';
-                options += `<option value="${p.id}"${selected}>${p.name} (端口: ${portsStr})</option>`;
+            const currentVal = preselectedId || sel.value;
+            
+            // 收集所有可监控的服务
+            const allServices = [];
+            
+            // 1. Web 类型项目
+            const webProjects = projects.filter(p => p.type === 'web');
+            webProjects.forEach(p => {
+                allServices.push({
+                    id: p.id,
+                    name: p.name,
+                    ports: p.ports || [],
+                    type: 'web',
+                    description: p.description || ''
+                });
             });
+            
+            // 2. 自定义服务（localStorage）
+            const customServices = getCustomServices();
+            customServices.forEach(s => {
+                const port = s.port ? [parseInt(s.port)] : [];
+                allServices.push({
+                    id: s.id,
+                    name: s.name,
+                    ports: port,
+                    type: 'custom',
+                    description: s.description || '自定义外部服务'
+                });
+            });
+            
+            // 3. 外部服务（从 projects.json 中的 external_services）
+            const externalServices = window._externalServices || [];
+            externalServices.forEach(s => {
+                allServices.push({
+                    id: s.id,
+                    name: s.name,
+                    ports: s.ports || [],
+                    type: 'external',
+                    description: s.description || ''
+                });
+            });
+            
+            const typeLabels = { web: 'Web服务', custom: '自定义', external: '外部' };
+            let options = '<option value="">-- 请选择要监控的服务 --</option>';
+            allServices.forEach(s => {
+                const portsStr = s.ports.length > 0 ? s.ports.join(',') : '无端口';
+                const label = s.type !== 'web' ? ` [${typeLabels[s.type]}]` : '';
+                const selected = s.id === currentVal ? ' selected' : '';
+                options += `<option value="${s.id}"${selected}>${s.name}${label} (端口: ${portsStr})</option>`;
+            });
+            
+            if (allServices.length === 0) {
+                options += '<option value="" disabled>暂无可用服务</option>';
+            }
+            
             sel.innerHTML = options;
         }
         
@@ -1868,11 +2202,8 @@
                 const cb = document.querySelector(`.email-rule-resource[value="${r}"]`);
                 if (cb) cb.checked = true;
             });
-            onResourceChange();
-            // 服务下线相关
-            if (rule.serviceId) {
-                document.getElementById('emailRuleServiceId').value = rule.serviceId;
-            }
+            onResourceChange(rule.serviceId);
+            // 服务下线相关 - serviceId 已通过 onResourceChange 传入
             document.getElementById('emailRuleThreshold').value = rule.threshold;
             document.getElementById('emailRuleTriggerType').value = rule.triggerType || 'single';
             document.getElementById('emailRuleTriggerParam').value = rule.triggerParam || 3;
@@ -2183,6 +2514,8 @@
         }
         
         function showAddServiceModal() {
+            document.getElementById('addServiceModalTitle').textContent = '新增自定义服务';
+            document.getElementById('editServiceId').value = '';
             document.getElementById('serviceName').value = '';
             document.getElementById('servicePort').value = '';
             document.getElementById('servicePath').value = '';
@@ -2193,6 +2526,36 @@
             document.getElementById('addServiceModal').classList.remove('hidden');
         }
         
+        function editCustomService(serviceId) {
+            const services = getCustomServices();
+            const svc = services.find(s => s.id === serviceId);
+            if (!svc) return;
+            
+            document.getElementById('addServiceModalTitle').textContent = `编辑自定义服务: ${svc.name}`;
+            document.getElementById('editServiceId').value = svc.id;
+            document.getElementById('serviceName').value = svc.name || '';
+            document.getElementById('servicePort').value = svc.port || '';
+            
+            // 尝试从 url 中解析 path
+            let path = '';
+            if (svc.url && svc.port) {
+                const prefix = `http://${externalIp}:${svc.port}`;
+                if (svc.url.startsWith(prefix)) {
+                    path = svc.url.substring(prefix.length);
+                }
+            }
+            document.getElementById('servicePath').value = path;
+            document.getElementById('serviceFullUrl').value = svc.url || '';
+            document.getElementById('serviceAdminUrl').value = svc.admin_url || '';
+            document.getElementById('serviceDesc').value = svc.description || '';
+            
+            if (svc.port) {
+                updateServicePreview();
+            }
+            
+            document.getElementById('addServiceModal').classList.remove('hidden');
+        }
+        
         function closeAddServiceModal() {
             document.getElementById('addServiceModal').classList.add('hidden');
         }
@@ -2212,6 +2575,7 @@
         function saveCustomService(event) {
             event.preventDefault();
             
+            const editId = document.getElementById('editServiceId').value;
             const name = document.getElementById('serviceName').value.trim();
             const port = document.getElementById('servicePort').value.trim();
             const path = document.getElementById('servicePath').value.trim();
@@ -2235,19 +2599,35 @@
             }
             
             const services = getCustomServices();
-            const newService = {
-                id: 'custom_' + Date.now(),
-                name: name,
-                port: port || '',
-                url: mainUrl,
-                admin_url: adminUrl || null,
-                description: desc || '自定义外部服务',
-                type: 'custom',
-                isCustom: true
-            };
-            services.push(newService);
-            saveCustomServices(services);
             
+            if (editId) {
+                // 编辑模式：更新已有服务
+                const idx = services.findIndex(s => s.id === editId);
+                if (idx === -1) {
+                    alert('服务不存在');
+                    return;
+                }
+                services[idx].name = name;
+                services[idx].port = port || '';
+                services[idx].url = mainUrl;
+                services[idx].admin_url = adminUrl || null;
+                services[idx].description = desc || '自定义外部服务';
+            } else {
+                // 新增模式
+                const newService = {
+                    id: 'custom_' + Date.now(),
+                    name: name,
+                    port: port || '',
+                    url: mainUrl,
+                    admin_url: adminUrl || null,
+                    description: desc || '自定义外部服务',
+                    type: 'custom',
+                    isCustom: true
+                };
+                services.push(newService);
+            }
+            
+            saveCustomServices(services);
             closeAddServiceModal();
             loadProjects();
         }
@@ -2315,16 +2695,21 @@
             }
         }
 
-        async function viewLog(id) {
+        async function viewLog(id, lines = 200) {
             const project = projects.find(p => p.id === id);
-            document.getElementById('logTitle').textContent = `${project?.name || id} - 日志`;
+            document.getElementById('logTitle').textContent = `${project?.name || id} - 日志 (最近${lines}行)`;
+            document.getElementById('logContent').textContent = '加载中...';
             document.getElementById('logModal').classList.remove('hidden');
             document.getElementById('logModal').classList.add('flex');
             
             try {
-                const res = await fetch(`/api/projects/${id}/log`);
+                const res = await fetch(`/api/projects/${id}/log?lines=${lines}`);
                 const data = await res.json();
-                document.getElementById('logContent').textContent = data.log || '暂无日志';
+                let display = data.log || '暂无日志';
+                if (data.file) {
+                    display = `📁 日志文件: ${data.file}\n📊 共 ${data.total_lines} 行，显示最近 ${data.shown_lines} 行\n${'─'.repeat(60)}\n\n${display}`;
+                }
+                document.getElementById('logContent').textContent = display;
             } catch (e) {
                 document.getElementById('logContent').textContent = '获取日志失败: ' + e.message;
             }
@@ -2335,6 +2720,86 @@
             document.getElementById('logModal').classList.remove('flex');
         }
 
+        // ==================== 项目编辑 ====================
+
+        function editProject(id) {
+            const project = projects.find(p => p.id === id);
+            if (!project || project.type !== 'web') return;
+            
+            document.getElementById('editProjectModalTitle').textContent = `${project.name} - 编辑配置`;
+            document.getElementById('editProjectId').value = project.id;
+            document.getElementById('editProjectName').value = project.name || '';
+            document.getElementById('editProjectDir').value = project.directory || '';
+            document.getElementById('editProjectPorts').value = (project.ports || []).join(',');
+            document.getElementById('editProjectHealthUrl').value = project.health_url || '';
+            document.getElementById('editProjectAdminUrl').value = project.admin_url || '';
+            document.getElementById('editProjectGitRepo').value = project.git_repo || '';
+            document.getElementById('editProjectVersion').value = project.version || '';
+            document.getElementById('editProjectLogFile').value = project.log_file || '';
+            document.getElementById('editProjectStartCmd').value = project.start_cmd || '';
+            document.getElementById('editProjectStopCmd').value = project.stop_cmd || '';
+            document.getElementById('editProjectDesc').value = project.description || '';
+            
+            document.getElementById('editProjectModal').classList.remove('hidden');
+        }
+
+        function closeEditProjectModal() {
+            document.getElementById('editProjectModal').classList.add('hidden');
+        }
+
+        async function saveProjectEdit(event) {
+            event.preventDefault();
+            
+            const id = document.getElementById('editProjectId').value;
+            const name = document.getElementById('editProjectName').value.trim();
+            const directory = document.getElementById('editProjectDir').value.trim();
+            const portsStr = document.getElementById('editProjectPorts').value.trim();
+            const healthUrl = document.getElementById('editProjectHealthUrl').value.trim();
+            const adminUrl = document.getElementById('editProjectAdminUrl').value.trim();
+            const gitRepo = document.getElementById('editProjectGitRepo').value.trim();
+            const version = document.getElementById('editProjectVersion').value.trim();
+            const logFile = document.getElementById('editProjectLogFile').value.trim();
+            const startCmd = document.getElementById('editProjectStartCmd').value.trim();
+            const stopCmd = document.getElementById('editProjectStopCmd').value.trim();
+            const description = document.getElementById('editProjectDesc').value.trim();
+            
+            if (!name) { alert('请输入项目名称'); return; }
+            
+            const ports = portsStr ? portsStr.split(',').map(p => parseInt(p.trim())).filter(p => !isNaN(p)) : [];
+            
+            const data = {
+                name,
+                ports,
+                directory,
+                start_cmd: startCmd,
+                stop_cmd: stopCmd,
+                health_url: healthUrl,
+                admin_url: adminUrl,
+                git_repo: gitRepo,
+                log_file: logFile,
+                version,
+                description
+            };
+            
+            try {
+                const res = await fetch(`/api/projects/${id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(data)
+                });
+                const result = await res.json();
+                if (result.error) {
+                    alert('保存失败: ' + result.error);
+                } else {
+                    alert(result.message || '保存成功');
+                    closeEditProjectModal();
+                    loadProjects();
+                }
+            } catch (e) {
+                alert('保存失败: ' + e.message);
+            }
+        }
+
         // ==================== Cron 管理 ====================
 
         async function loadCronTasks() {
@@ -2751,6 +3216,11 @@
             
             clearInterval(refreshTimer);
             refreshTimer = setInterval(() => { if (currentTab === 'projects') loadProjects(); }, seconds * 1000);
+            
+            // 如果当前在系统Tab且非实时模式，更新系统刷新间隔
+            if (currentTab === 'system' && !document.getElementById('realtimeCheck').checked) {
+                startSystemRefresh();
+            }
         }
 
         setInterval(() => {
@@ -2797,7 +3267,7 @@
         }
         
         function renderDockerContainers(containers) {
-            const list = document.getElementById('dockerContainersList');
+            const list = document.getElementById('docker-containers-grid');
             if (containers.length === 0) {
                 list.innerHTML = '<div class="text-gray-500 text-sm py-4 text-center">暂无容器</div>';
                 return;
@@ -2829,7 +3299,7 @@
         }
         
         function renderDockerImages(images) {
-            const list = document.getElementById('dockerImagesList');
+            const list = document.getElementById('docker-images-grid');
             if (images.length === 0) {
                 list.innerHTML = '<div class="text-gray-500 text-sm py-4 text-center">暂无镜像</div>';
                 return;

utils.py

@@ -50,9 +50,11 @@ def load_projects_full():
 
 
 def save_projects(projects):
-    """保存项目配置"""
+    """保存项目配置（保留 server 和 external_services）"""
+    full_data = load_projects_full()
+    full_data['projects'] = projects
     with open(PROJECTS_FILE, 'w', encoding='utf-8') as f:
-        json.dump({'projects': projects}, f, ensure_ascii=False, indent=2)
+        json.dump(full_data, f, ensure_ascii=False, indent=2)
 
 
 def check_port(port):

watchdog.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+# project-panel 守护脚本 - 进程挂了自动重启
+SERVICE_DIR="/home/openclaw/.openclaw/workspace-hz4th_coder/works/project-panel"
+PYTHON="/home/hz1/miniconda3/envs/openclaw/bin/python3.12"
+PORT=16022
+LOG="$SERVICE_DIR/logs/watchdog.log"
+
+echo "[$(date '+%Y-%m-%d %H:%M:%S')] 守护进程启动，监控端口 $PORT" >> "$LOG"
+
+while true; do
+    if ! ss -tlnp 2>/dev/null | grep -q ":$PORT "; then
+        echo "[$(date '+%Y-%m-%d %H:%M:%S')] 检测到 $PORT 端口离线，重启服务..." >> "$LOG"
+        cd "$SERVICE_DIR"
+        mkdir -p logs
+        nohup "$PYTHON" app.py > logs/app.log 2>&1 &
+        sleep 3
+        if ss -tlnp 2>/dev/null | grep -q ":$PORT "; then
+            echo "[$(date '+%Y-%m-%d %H:%M:%S')] 服务重启成功" >> "$LOG"
+        else
+            echo "[$(date '+%Y-%m-%d %H:%M:%S')] 服务重启失败！" >> "$LOG"
+        fi
+    fi
+    sleep 10
+done