feat: Web服务多列卡片布局，一行显示多个服务

docs: 添加 README.md，记录正确的启动方式和端口规范
- 重要发现：服务被 OpenClaw 杀掉（SIGTERM） - 解决方案：使用 nohup + disown 脱离进程树 - 更新所有项目的 start_cmd 为正确的启动方式 - 记录端口规范（19000-19100） - 记录故障排查步骤
2026-04-17 18:00:57 +08:00 · 2026-04-15 09:59:39 +08:00
3 changed files with 190 additions and 36 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,131 @@
+# 项目服务管理面板
+
+统一管理所有 Web 服务项目，提供状态检测、启动/停止控制、日志查看等功能。
+
+## 端口
+
+- **服务端口**: 19013
+- **访问地址**: http://localhost:19013
+
+## 功能
+
+- 项目列表展示（状态、端口、版本）
+- 服务状态健康检测
+- 启动/停止/重启控制
+- 日志查看（实时滚动）
+- Git 仓库链接
+
+## 启动方式 ⭐
+
+**重要：必须使用 `nohup + disown` 方式启动，脱离进程树！**
+
+```bash
+cd ~/.openclaw/workspace-coder/works/project-panel
+nohup python3 app.py > logs/app.log 2>&1 & disown
+```
+
+### 为什么需要 disown？
+
+如果通过 OpenClaw 的 exec 启动服务，当 OpenClaw 清理进程时（如超时、重启），会发送 SIGTERM 杀掉所有子进程。
+
+使用 `nohup + disown` 可以：
+1. `nohup` - 让进程忽略 SIGHUP（终端关闭信号）
+2. `disown` - 从 shell 进程树中移除，避免被连带杀掉
+3. `> logs/app.log 2>&1` - 重定向输出到日志文件
+
+### ❌ 错误方式
+
+```bash
+# 不要用这种方式（会被 OpenClaw 杀掉）
+python3 app.py
+```
+
+### ✅ 正确方式
+
+```bash
+nohup python3 app.py > logs/app.log 2>&1 & disown
+```
+
+## 项目配置
+
+项目配置在 `projects.json` 中，每个项目包含：
+
+```json
+{
+  "id": "project-id",
+  "name": "项目名称",
+  "ports": [19000],
+  "directory": "works/project-dir",
+  "start_cmd": "nohup python3 app.py > logs/app.log 2>&1 & disown",
+  "health_url": "http://localhost:19000/api/health",
+  "admin_url": "http://localhost:19000/admin",
+  "git_repo": "http://192.168.2.8:12007/coder/project",
+  "version": "v1.0.0"
+}
+```
+
+## 端口规范
+
+所有 Web 服务必须使用 **19000-19100** 端口范围：
+
+| 端口 | 项目 |
+|------|------|
+| 19000 | PDF翻译助手 V2 |
+| 19001 | LLM Index RAG |
+| 19009 | 碎片信息记录 |
+| 19010 | ParamHub Python |
+| 19013 | 项目服务管理面板（本服务） |
+| 19014 | Xian Favor 收藏系统 |
+| 19020 | AI对话系统 |
+| 19007 | LLM Proxy |
+| 19011 | 产品参数爬取系统 |
+| 19004 | 技术论坛 |
+| 19015 | 多智能体竞标调度系统 |
+
+## API 接口
+
+- `GET /api/projects` - 获取所有项目列表
+- `GET /api/project/:id` - 获取单个项目详情
+- `POST /api/project/:id/start` - 启动项目
+- `POST /api/project/:id/stop` - 停止项目
+- `POST /api/project/:id/restart` - 重启项目
+- `GET /api/project/:id/logs` - 获取项目日志
+
+## 监控
+
+服务监控由 `service-monitor` 负责，每 20 分钟检查一次，发送邮件通知。
+
+## 故障排查
+
+### 服务频繁停止？
+
+检查是否使用了正确的启动方式：
+1. 确认使用了 `nohup + disown`
+2. 确认日志目录存在：`mkdir -p logs/`
+3. 查看日志：`cat logs/app.log`
+
+### OpenClaw 杀进程？
+
+如果日志突然停止（约凌晨 01:10），可能是被 OpenClaw 清理进程杀掉了。
+
+**证据：**
+- OpenClaw 日志：`[tools] exec failed: Command aborted by signal SIGTERM`
+- 服务日志最后记录时间：01:09 左右
+
+**解决：** 使用 `disown` 脱离进程树。
+
+## Git 仓库
+
+http://192.168.2.8:12007/coder/project-panel
+
+## 更新日志
+
+### v1.0.1
+- 添加 README.md 文档
+- 记录正确的启动方式（nohup + disown）
+- 记录端口规范
+
+### v1.0.0
+- 项目服务管理面板
+- 状态检测、启动/停止控制
+- 日志查看
--- a/app.py
+++ b/app.py
@@ -434,7 +434,7 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
                            ${typeInfo.name}
                            <span class="text-sm text-gray-500">(${projs.length})</span>
                        </h2>
-                        <div class="grid gap-4">
+                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                `;
                
                projs.forEach(p => {
@@ -544,32 +544,42 @@ HTML_TEMPLATE = '''<!DOCTYPE html>
            }

            return `
-                <div class="card rounded-xl p-4 hover:border-gray-500 transition-colors">
-                    <div class="flex items-start justify-between">
-                        <div class="flex-1">
-                            <div class="flex items-center gap-3 mb-2">
-                                <div class="status-dot ${statusInfo.class}" title="${statusInfo.text}"></div>
-                                <h3 class="font-semibold text-lg">${p.name}</h3>
-                                <span class="type-badge ${typeColors[p.type]}">${p.type.toUpperCase()}</span>
-                                ${p.version ? `<span class="text-xs text-gray-500">${p.version}</span>` : ''}
-                            </div>
-                            <p class="text-gray-400 text-sm mb-2">${p.description || ''}</p>
-                            ${portsHtml}
-                            <div class="flex items-center gap-4 mt-2 text-sm">
-                                ${linksHtml}
-                            </div>
-                        </div>
-                        <div class="text-right">
-                            <span class="text-sm ${statusInfo.textColor}">${statusInfo.text}</span>
-                            ${p.status?.health !== null && p.status?.health !== undefined ? `
-                                <div class="text-xs mt-1 ${p.status.health ? 'text-green-400' : 'text-red-400'}">
-                                    <i class="ri-${p.status.health ? 'heart' : 'heart-line'}"></i>
-                                    ${p.status.health ? '健康' : '异常'}
-                                </div>
-                            ` : ''}
+                <div class="card rounded-lg p-3 hover:border-gray-500 transition-colors">
+                    <div class="flex items-center justify-between mb-2">
+                        <div class="flex items-center gap-2">
+                            <div class="status-dot ${statusInfo.class}" title="${statusInfo.text}"></div>
+                            <h3 class="font-semibold text-sm truncate">${p.name}</h3>
                        </div>
+                        <span class="text-xs ${statusInfo.textColor}">${statusInfo.text}</span>
                    </div>
-                    ${actionsHtml}
+                    ${p.ports && p.ports.length > 0 ? `
+                    <div class="flex items-center gap-1 text-xs mb-2">
+                        ${p.ports.map(port => {
+                            const portStatus = p.status?.ports?.[port];
+                            const isRunning = portStatus?.running;
+                            return `<a href="http://localhost:${port}" target="_blank" class="px-2 py-0.5 rounded ${isRunning ? 'bg-green-500/20 text-green-400 hover:bg-green-500/30' : 'bg-red-500/20 text-red-400'}">${port}</a>`;
+                        }).join('')}
+                        ${p.admin_url ? `<a href="${p.admin_url}" target="_blank" class="text-yellow-400 hover:text-yellow-300">后台</a>` : ''}
+                    </div>
+                    ` : ''}
+                    ${p.type === 'web' ? `
+                    <div class="flex items-center gap-1 mt-2">
+                        ${(p.status?.status === 'running' || p.status?.status === 'partial') ? `
+                            <button onclick="stopProject('${p.id}')" class="btn bg-red-600 hover:bg-red-700 px-2 py-0.5 rounded text-xs">停止</button>
+                            <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>
+                    </div>
+                    ` : ''}
+                    ${p.type === 'cron' ? `
+                    <div class="text-xs text-gray-400 mt-1">
+                        <i class="ri-${p.status?.cron_configured ? 'check' : 'close'}-line"></i>
+                        ${p.status?.cron_configured ? '已配置' : '未配置'}
+                        ${p.cron ? ` · ${p.cron}` : ''}
+                    </div>
+                    ` : ''}
                </div>
            `;
        }
--- a/projects.json
+++ b/projects.json
@@ -6,7 +6,7 @@
      "type": "web",
      "ports": [19000],
      "directory": "works/pdf-translate-web-v2",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19000/api/health",
      "description": "英文PDF翻译中文网站，支持用户系统、会员体系",
      "admin_url": "http://localhost:19000/admin",
@@ -19,7 +19,7 @@
      "type": "web",
      "ports": [19001],
      "directory": "works/llm-index-rag",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19001/api/stats",
      "description": "基于索引和搜索的知识检索系统",
      "admin_url": "http://localhost:19001/settings",
@@ -32,7 +32,7 @@
      "type": "web",
      "ports": [19009],
      "directory": "works/snippet-notes",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19009/api/notes",
      "description": "碎片信息记录工具，AI自动生成标题",
      "git_repo": null,
@@ -44,7 +44,7 @@
      "type": "web",
      "ports": [19010],
      "directory": "works/param-hub-python",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19010/api/stats",
      "description": "AI大模型与硬件参数速查平台",
      "admin_url": "http://localhost:19010/admin",
@@ -57,12 +57,12 @@
      "type": "web",
      "ports": [19020],
      "directory": "works/ai-chat",
-      "start_cmd": "python3 main.py",
+      "start_cmd": "mkdir -p logs && nohup python3 main_v2.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19020/api/admin/stats",
      "description": "网页端和Matrix端实时同步的AI聊天系统",
      "admin_url": "http://localhost:19020/admin",
      "git_repo": "http://192.168.2.8:12007/coder/ai-chat-system",
-      "version": "v1.0.0"
+      "version": "v2.5.4"
    },
    {
      "id": "product-crawler",
@@ -70,7 +70,7 @@
      "type": "web",
      "ports": [19011],
      "directory": "/home/xian/.openclaw/common/projects/product-crawler",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19011/api/products",
      "description": "自动从官网爬取产品参数信息",
      "admin_url": "http://localhost:19011/admin",
@@ -83,13 +83,26 @@
      "type": "web",
      "ports": [19007],
      "directory": "/home/xian/.openclaw/common/projects/llm-proxy",
-      "start_cmd": "python3 app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19007/health",
      "description": "大模型API中转系统，多提供商调度",
      "admin_url": "http://localhost:19007/admin",
      "git_repo": "http://192.168.2.8:12007/coder/llm-proxy",
      "version": "v2.0.0"
    },
+    {
+      "id": "project-panel",
+      "name": "项目服务管理面板",
+      "type": "web",
+      "ports": [19013],
+      "directory": "works/project-panel",
+      "start_cmd": "mkdir -p logs && nohup python3 app.py > logs/app.log 2>&1 & disown",
+      "health_url": "http://localhost:19013/",
+      "description": "统一管理所有Web服务项目",
+      "admin_url": "http://localhost:19013",
+      "git_repo": "http://192.168.2.8:12007/coder/project-panel",
+      "version": "v1.0.1"
+    },
    {
      "id": "web-context-extension",
      "name": "网页助手插件",
@@ -147,7 +160,7 @@
      "type": "web",
      "ports": [19014],
      "directory": "works/xian-favor",
-      "start_cmd": "xian_favor serve --port 19014",
+      "start_cmd": "mkdir -p logs && nohup xian_favor serve --port 19014 > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19014/api/health",
      "description": "文本笔记、链接收藏、待办事项管理系统",
      "admin_url": "http://localhost:19014",
@@ -160,7 +173,7 @@
      "type": "web",
      "ports": [19015],
      "directory": "works/multi-agent-bidding",
-      "start_cmd": "python3 -m app.app --port 19015",
+      "start_cmd": "mkdir -p logs && nohup python3 -m app.app --port 19015 > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19015/api/agents",
      "description": "基于竞标机制的多智能体任务调度系统",
      "admin_url": "http://localhost:19015",
@@ -173,7 +186,7 @@
      "type": "web",
      "ports": [19004],
      "directory": "/home/xian/.openclaw/common/projects/tech-forum",
-      "start_cmd": "python3 backend/app.py",
+      "start_cmd": "mkdir -p logs && nohup python3 backend/app.py > logs/app.log 2>&1 & disown",
      "health_url": "http://localhost:19004/api/health",
      "description": "技术交流、工具分享、问答讨论社区",
      "admin_url": "http://localhost:19004/admin",