# PRD 需求文档 - 用例执行后跳转执行中心对应子菜单

> **文档类型**: PRD 需求文档
> **创建日期**: 2026-07-15
> **作者**: czj
> **优先级**: P1
> **状态**: 待开发

---

## 一、需求背景

### 1.1 问题描述

当前用例管理页面（Cases.vue）勾选用例点击"执行选中"后，跳转到执行中心的路由是 `/execution`，**未携带类型参数**。而执行中心已按菜单分类架构拆分为子菜单（UI自动化、接口自动化等），路由格式为 `/execution/:type?`。

**现状问题**：
1. 从"用例管理 > UI自动化"执行用例后，跳转到 `/execution`，由于路由无 type 参数，`currentType` 默认为 `ui`，看似正常——但这是因为默认值恰好是 `ui`
2. 从"用例管理 > 接口自动化"执行用例后，同样跳到 `/execution`，默认显示 ui 类型的执行记录，**无法看到刚执行的 api 类型记录**
3. 从"用例管理 > 安全自动化测试"等其他类型执行后同理，**跳转后看不到对应的执行结果**
4. 侧边栏菜单高亮也会不正确——无 type 参数时菜单项无法正确匹配高亮

### 1.2 目标

用例管理页面执行用例后，**自动跳转到执行中心对应的类型子菜单**，确保用户能立即看到刚创建的执行记录，操作更流畅。

**期望行为**：
- 在"用例管理 > UI自动化"执行 → 跳转到 `/execution/ui`
- 在"用例管理 > 接口自动化"执行 → 跳转到 `/execution/api`
- 在"用例管理 > 安全自动化测试"执行 → 跳转到 `/execution/security`
- 其他类型同理

---

## 二、功能需求

### 2.1 核心改动：执行后跳转携带类型参数

**改动位置**：`frontend/src/views/Cases.vue` — `runSelectedCases` 方法

**当前代码**（第 677-692 行）：

```typescript
const runSelectedCases = async () => {
  if (selectedCases.value.length === 0) return
  try {
    const caseIds = selectedCases.value.map(c => c.id)
    const execution = await executionApi.create({
      case_ids: caseIds,
      name: `手动执行-${new Date().toLocaleDateString()}`,
    })
    await executionApi.run(execution.id)
    ElMessage.success('执行任务已启动')
    router.push('/execution')           // ← 问题：未带类型参数
  } catch (error: any) {
    ElMessage.error('启动执行失败: ' + error.message)
  }
}
```

**改为**：

```typescript
router.push(`/execution/${currentType.value}`)   // ← 携带当前用例类型
```

`currentType` 已在 Cases.vue 第 423 行定义为 `computed(() => (route.params.type as string) || 'ui')`，直接复用即可。

### 2.2 跳转后的执行中心行为

跳转到 `/execution/ui` 后，Execution.vue 的 `currentType` 计算属性会自动读取 `route.params.type` 为 `ui`，`loadExecutions` 会按 `case_type: 'ui'` 筛选执行记录。**无需额外修改**。

### 2.3 菜单高亮

跳转到 `/execution/ui` 后，App.vue 中 `el-menu` 的 `default-active` 会匹配到 `/execution/ui` 这个 `el-menu-item`，侧边栏"执行中心 > UI自动化"子菜单会正确高亮。**无需额外修改**。

---

## 三、影响分析

### 3.1 影响范围

| 层级 | 文件 | 改动 | 影响 |
|------|------|------|------|
| 前端 | `Cases.vue` | 1 行路由跳转路径 | 仅跳转目标变化 |
| 后端 | — | 无 | — |
| 数据库 | — | 无 | — |
| 其他前端页面 | — | 无 | — |

### 3.2 边界场景

| 场景 | 处理方式 |
|------|----------|
| 选中多个不同类型的用例执行 | `currentType` 取当前页面的类型（即路由参数），创建执行时后端自动取首个用例的 case_type，跳转目标与当前页面类型一致 |
| 直接访问 `/cases`（无 type 参数） | `currentType` 默认 `ui`，跳转到 `/execution/ui`，符合预期 |
| 选中 0 个用例点击执行 | 按钮已 `disabled`，不会触发 |

---

## 四、验收标准

| 测试项 | 预期结果 |
|--------|----------|
| 在"用例管理 > UI自动化"勾选用例点击执行 | 跳转到 `/execution/ui`，侧边栏"执行中心 > UI自动化"高亮，列表显示 ui 类型执行记录 |
| 在"用例管理 > 接口自动化"勾选用例点击执行 | 跳转到 `/execution/api`，侧边栏"执行中心 > 接口自动化"高亮，列表显示 api 类型执行记录 |
| 在"用例管理 > 安全自动化测试"勾选用例点击执行 | 跳转到 `/execution/security`，列表显示 security 类型执行记录 |
| 直接访问 `/cases`（无 type）执行用例 | 跳转到 `/execution/ui`，默认行为正确 |
| 执行后跳转的执行中心列表能立即看到刚创建的执行记录 | ✅ 列表自动加载 |

---

## 五、相关文档

- `frontend/src/views/Cases.vue` — 用例管理页面（改动点）
- `frontend/src/views/Execution.vue` — 执行中心页面（已有类型筛选逻辑）
- `frontend/src/App.vue` — 侧边栏菜单（已有子菜单结构）
- `frontend/src/router/index.ts` — 路由定义（已有 `/:type?` 参数）

---

*本文档由 Claude Code 生成，遵循项目 PRD 文档规范。*
