# 执行计划：新增系统管理父菜单（系统配置 / 系统信息 / 操作日志）

> **版本**：v1.0  
> **创建日期**：2026-07-29  
> **来源**：`_PRD_需求文档_新增系统管理父菜单.md`  
> **状态**：待执行

---

## 一、任务分解

| 阶段 | 任务 | 预计文件数 | 优先级 |
|------|------|-----------|--------|
| Phase 1 | 后端新增 `/api/system/info` 接口 | 2 文件 | P0 |
| Phase 2 | 前端路由改造：新增 `/system` 父路由 + 子路由 | 1 文件 | P0 |
| Phase 3 | 侧边栏改造：替换单菜单为父菜单 | 1 文件 | P0 |
| Phase 4 | 迁移 Settings.vue 到新路径 | 1 文件 | P0 |
| Phase 5 | 新建 SystemInfo.vue 页面 | 1 文件 | P0 |
| Phase 6 | 新建 OperationLogs.vue 页面 | 1 文件 | P0 |
| Phase 7 | 验证：启动服务 + 检查所有路由 | — | P1 |

---

## 二、详细实现步骤

### Phase 1: 后端新增 `/api/system/info` 接口

**文件**：`backend/app/routers/system.py`（新建）

**接口定义**：
```
GET /api/system/info → {
  "app_name": "平台自动化测试可视化系统",
  "backend_version": "2.0.0",
  "python_version": "3.10.x",
  "uptime": "运行时间（秒）",
  "db_type": "mysql" | "sqlite",
  "db_size": "数据库大小（MB）",
  "total_modules": 28,
  "total_cases": 283,
  "frontend_version": "1.0.0"
}
```

**文件**：`backend/app/main.py`（修改）
- 导入 `system` 路由
- 注册 `app.include_router(system.router)` 在 `app_include_router` 列表中

### Phase 2: 前端路由改造

**文件**：`frontend/src/router/index.ts`（修改）

变更内容：
1. 删除旧的 `/settings` 路由
2. 新增 `/system` 父路由，包含 3 个子路由

```typescript
{
  path: '/system',
  name: 'System',
  redirect: '/system/settings',
  meta: { title: '系统管理' },
  children: [
    {
      path: 'settings',
      name: 'SystemSettings',
      component: () => import('@/views/system/Settings.vue'),
      meta: { title: '系统配置' }
    },
    {
      path: 'info',
      name: 'SystemInfo',
      component: () => import('@/views/system/Info.vue'),
      meta: { title: '系统信息' }
    },
    {
      path: 'logs',
      name: 'OperationLogs',
      component: () => import('@/views/system/Logs.vue'),
      meta: { title: '操作日志' }
    }
  ]
}
```

3. 保留旧路由 `/settings` 作为重定向：
```typescript
{
  path: '/settings',
  redirect: '/system/settings'
}
```

### Phase 3: 侧边栏改造

**文件**：`frontend/src/App.vue`（修改）

变更内容：
1. 删除原有的 `<el-menu-item index="/settings">` 菜单项
2. 新增 "系统管理" 父菜单（`<el-sub-menu>`）：

```html
<el-sub-menu index="/system">
  <template #title>
    <el-icon><Tools /></el-icon>
    <span>系统管理</span>
  </template>
  <el-menu-item index="/system/settings">系统配置</el-menu-item>
  <el-menu-item index="/system/info">系统信息</el-menu-item>
  <el-menu-item index="/system/logs">操作日志</el-menu-item>
</el-sub-menu>
```

3. 导入 `Tools` 图标（从 element-plus/icons-vue）
4. 更新 `currentRoute` 计算属性中的 `defaultType` 回退逻辑，添加 `/system` 支持
5. 更新 `pageTitle` 计算属性中的 `baseMap`，添加 `/system` 映射

### Phase 4: 迁移 Settings.vue

**文件**：`frontend/src/views/Settings.vue` → `frontend/src/views/system/Settings.vue`（移动）

- 内容不变，保持当前占位状态
- 仅更新文件头部注释中的路径信息

### Phase 5: 新建 SystemInfo.vue

**文件**：`frontend/src/views/system/Info.vue`（新建）

页面内容：
- 标题：系统信息
- 展示卡片：应用信息、运行环境、数据库状态
- 调用 `GET /api/system/info` 获取数据
- 使用 el-descriptions 或 el-card 展示

**文件**：`frontend/src/api/system.ts`（新建）

```typescript
import request from '@/utils/request'

export function getSystemInfo() {
  return request.get('/api/system/info')
}
```

### Phase 6: 新建 OperationLogs.vue

**文件**：`frontend/src/views/system/Logs.vue`（新建）

页面内容：
- 标题：操作日志
- 展示最近执行记录列表
- 复用现有 `/api/executions` 接口
- 表格展示：执行时间、用例数、通过数、失败数、状态、操作人
- 支持按时间范围筛选

### Phase 7: 验证

| 验证项 | 预期结果 |
|--------|---------|
| 侧边栏显示「系统管理」父菜单 | 展开后含 3 个子菜单 |
| 点击「系统配置」 | 跳转 `/system/settings`，显示占位页面 |
| 点击「系统信息」 | 跳转 `/system/info`，显示系统信息 |
| 点击「操作日志」 | 跳转 `/system/logs`，显示执行记录 |
| 旧路由 `/settings` | 301 重定向到 `/system/settings` |
| 页面标题 | 各页面标题正确显示 |
| 其他菜单 | 不受影响（总览、模块管理、用例管理等） |

---

## 三、文件变更清单

### 新增文件

| # | 文件 | 说明 |
|---|------|------|
| 1 | `backend/app/routers/system.py` | 系统信息 API 路由 |
| 2 | `frontend/src/api/system.ts` | 系统信息 API 客户端 |
| 3 | `frontend/src/views/system/Info.vue` | 系统信息页面 |
| 4 | `frontend/src/views/system/Logs.vue` | 操作日志页面 |
| 5 | `Docs/PRD/需求文档/系统管理/_PRD_需求文档_新增系统管理父菜单.md` | PRD 需求文档 |
| 6 | `Docs/PRD/需求文档/系统管理/_PRD_需求文档_新增系统管理父菜单_计划执行.md` | 本执行计划文档 |

### 修改文件

| # | 文件 | 变更说明 |
|---|------|---------|
| 1 | `backend/app/main.py` | 注册 system 路由 |
| 2 | `frontend/src/router/index.ts` | 新增 `/system` 父路由 + 子路由，`/settings` 重定向 |
| 3 | `frontend/src/App.vue` | 侧边栏替换为系统管理父菜单 |

### 移动文件

| # | 文件 | 说明 |
|---|------|------|
| 1 | `frontend/src/views/Settings.vue` → `frontend/src/views/system/Settings.vue` | 迁移至新路径 |

---

## 四、多窗口开发注意事项

根据 `Docs/多窗口并行开发指南.md`，本次开发属于「纯代码开发」类型：

| 检查项 | 本次操作 |
|--------|---------|
| 后端端口 | 使用 8001（如已被占用则用 8002） |
| 数据库操作 | **不涉及**（无模型变更） |
| Playwright 执行 | **不涉及** |
| Git 冲突风险 | 低 — 修改的文件（router/index.ts / App.vue / main.py）与其他窗口交集小 |
| 提交前 Pull | 是，先拉取其他窗口的变更 |

---

## 五、回滚方案

若需回滚：
1. 路由：删除 `/system` 路由，恢复 `/settings` 路由
2. 侧边栏：恢复 `<el-menu-item index="/settings">`
3. 页面：Settings.vue 移回 `views/` 根目录
4. 后端：删除 `system` 路由注册
5. 删除新增文件