# PRD 计划执行文档 — 返回首页导航栏改造 + 新增服务管理/服务监测模块

> 版本：1.0 ｜ 日期：2026-07-14 ｜ 分支：troubleshoot-ai-assistant

---

## 执行步骤

### 步骤 1：修改 modules.py — 新增模块声明

**文件**：`skill/code/web/utils/modules.py`

**操作**：在 `MODULES` 列表中追加两个模块声明

```python
{
    "id": "service-manage",
    "name": "服务管理",
    "icon": "🛠️",
    "description": "新统一平台服务授权、服务升级、服务信息管理",
    "url": "/service-manage",
    "enabled": True,
    "roles": ["admin"],
    "sort": 2,
},
{
    "id": "service-monitor",
    "name": "服务监测",
    "icon": "📊",
    "description": "通过 SSH 连接监测服务器服务运行状态、输出报告",
    "url": "/service-monitor",
    "enabled": True,
    "roles": [],
    "sort": 3,
},
```

**注意**：原 `service-monitor`（enabled:False, roles:["admin"], sort:2）替换为新声明。

---

### 步骤 2：新建服务管理占位路由

**新建文件**：`skill/code/web/routes/service_manage.py`

- Blueprint: `service-manage`
- 路由: `@bp.route('/service-manage')`
- 装饰器: `@page_login_required`
- 渲染: `service_manage.html`，传入 `user=session.get('user', {})`

---

### 步骤 3：新建服务管理占位模板

**新建文件**：`skill/code/web/templates/service_manage.html`

- 顶部导航栏：`🛠️ 运行维护平台` + `/ 服务管理` + 用户名 + 退出
- 主体：`🚧 服务管理模块开发中` + 计划功能列表（服务授权/服务升级/服务信息）+ 返回首页按钮
- 移动端响应式

---

### 步骤 4：新建服务监测占位路由

**新建文件**：`skill/code/web/routes/service_monitor.py`

- Blueprint: `service-monitor`
- 路由: `@bp.route('/service-monitor')`
- 装饰器: `@page_login_required`
- 渲染: `service_monitor.html`，传入 `user=session.get('user', {})`

---

### 步骤 5：新建服务监测占位模板

**新建文件**：`skill/code/web/templates/service_monitor.html`

- 顶部导航栏：`🛠️ 运行维护平台` + `/ 服务监测` + 用户名 + 退出
- 主体：`🚧 服务监测模块开发中` + 计划功能列表（SSH连接监测/服务状态监测/报告输出）+ 返回首页按钮
- 移动端响应式

---

### 步骤 6：改造 index.html 顶部导航栏

**文件**：`skill/code/web/templates/index.html`

**操作**：
1. 在 `<style>` 中添加 `.navbar` / `.navbar-left` / `.navbar-brand` / `.navbar-module` / `.navbar-user` / `.navbar-logout` 样式
2. 在移动端 `@media` 中添加导航栏适配（面包屑隐藏、触控热区 ≥44px）
3. 在 `<body>` 后、`<div class="container">` 前插入导航栏 HTML
4. 删除 card 内部的 `user-info-bar` div（返回首页 + 用户名 + 退出已移到导航栏）
5. 删除移动端中已无用的 `.user-info` 样式

**导航栏结构**：
```html
<div class="navbar">
    <div class="navbar-left">
        <a href="/" class="navbar-brand">🛠️ 运行维护平台</a>
        <span class="navbar-module">/ 问题排查助手</span>
    </div>
    <div class="navbar-user">
        <span id="userDisplayName">加载中...</span>
        <button class="navbar-logout" onclick="logout()">🚪 退出</button>
    </div>
</div>
```

---

### 步骤 7：server.py 注册新 Blueprint

**文件**：`skill/code/web/server.py`

**操作**：在 `create_app()` 中注册两个新 Blueprint

```python
from routes.service_manage import bp as service_manage_bp
from routes.service_monitor import bp as service_monitor_bp
app.register_blueprint(service_manage_bp)
app.register_blueprint(service_monitor_bp)
```

---

### 步骤 8：部署清单确认

**文件**：`deploy/upload_to_server.py`

**无需修改**：`routes/` 和 `templates/` 目录已在 `DIRS_TO_UPLOAD` 中，新文件自动包含。

---

### 步骤 9：测试验证

1. `cd skill/code && python -m pytest -v` — 145 用例全绿
2. Chrome DevTools 验证：
   - `/` 平台首页显示 3 个模块卡片（问题排查助手 + 服务管理 + 服务监测）
   - 点击"服务管理"进入占位页，顶部导航栏可返回首页
   - 点击"服务监测"进入占位页，顶部导航栏可返回首页
   - 问题排查助手顶部导航栏可返回首页
3. 部署到 5.60 + `verify_deployment.py`

---

## 变更文件清单

| 文件 | 操作 | 说明 |
|------|------|------|
| `skill/code/web/utils/modules.py` | 修改 | 新增 service-manage + service-monitor 声明 |
| `skill/code/web/routes/service_manage.py` | **新建** | 服务管理占位路由 |
| `skill/code/web/routes/service_monitor.py` | **新建** | 服务监测占位路由 |
| `skill/code/web/templates/service_manage.html` | **新建** | 服务管理占位页面 |
| `skill/code/web/templates/service_monitor.html` | **新建** | 服务监测占位页面 |
| `skill/code/web/templates/index.html` | 修改 | 返回首页改为顶部导航栏 |
| `skill/code/web/server.py` | 修改 | 注册新 Blueprint |
