# PRD 需求文档 - 菜单分类架构与步骤编辑

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

---

## 一、需求背景

### 1.1 总体目标

当前平台采用扁平菜单结构，用例/模块/执行记录**未按类型区分**。随着测试范围扩展（UI、接口、安全、部署、性能、功能），需要：

1. **模块管理**新增子菜单：标准模块、项目定制模块
2. **用例管理**新增子菜单：UI自动化、接口自动化、安全自动化测试、自动化部署测试、性能测试、功能测试
3. **执行中心**新增对应子菜单（与用例管理一致）
4. **报告中心**新增子菜单：UI自动化测试、接口测试、安全测试、性能测试、功能测试
5. **新建/编辑用例**补充"步骤可填入"功能

目的是区分用例/模块的专项类型，让不同测试领域各自独立管理。

### 1.2 菜单结构（目标）

```
├─ 总览
├─ 模块管理（父）
│   ├─ 标准模块
│   └─ 项目定制模块
├─ 用例管理（父）
│   ├─ UI自动化            (ui)
│   ├─ 接口自动化          (api)
│   ├─ 安全自动化测试      (security)
│   ├─ 自动化部署测试      (deploy)
│   ├─ 性能测试            (performance)
│   └─ 功能测试            (functional)
├─ 用例录制
├─ 执行中心（父）  ← 与用例管理一致的6种类型
│   ├─ UI自动化 / 接口自动化 / 安全自动化测试
│   ├─ 自动化部署测试 / 性能测试 / 功能测试
├─ 报告中心（父）
│   ├─ UI自动化测试        (ui)
│   ├─ 接口测试            (api)
│   ├─ 安全测试            (security)
│   ├─ 性能测试            (performance)
│   └─ 功能测试            (functional)
└─ 系统配置
```

### 1.3 本次实现范围（已确认）

| 范围 | 本次 | 后续迭代 |
|------|------|----------|
| 菜单结构（父-子菜单） | ✅ | — |
| 模块分类字段 module_type | ✅ | — |
| 用例分类字段 case_type | ✅ | — |
| UI自动化用例的步骤编辑与执行 | ✅ | — |
| 接口自动化执行器（HTTP请求） | ❌ 预留 | 后续 |
| 安全自动化执行器 | ❌ 预留 | 后续 |
| 自动化部署测试 | ❌ 预留页面 | 后续 |
| 各类型专属步骤表单（接口/安全/部署） | ❌ | 随执行器一起做 |

**核心原则**：本次搭好分类框架，UI自动化全链路可用，其余类型先建分类与预留页面，执行器后续迭代。

---

## 二、分类字段定义

### 2.1 模块分类 module_type

| 取值 | 含义 | 说明 |
|------|------|------|
| `standard` | 标准模块 | 通用、可复用的标准功能模块 |
| `custom` | 项目定制模块 | 针对特定项目定制的模块 |

- 默认值：`standard`
- 影响：模块管理列表按类型筛选，新建模块时选择类型

### 2.2 用例分类 case_type

| 取值 | 含义 | 用例管理/执行中心菜单 | 报告中心菜单 | 执行器 |
|------|------|----------|--------|--------|
| `ui` | UI自动化 | UI自动化 | UI自动化测试 | Playwright（已实现） |
| `api` | 接口自动化 | 接口自动化 | 接口测试 | 后续实现 |
| `security` | 安全自动化 | 安全自动化测试 | 安全测试 | 后续实现 |
| `deploy` | 部署测试 | 自动化部署测试 | —（暂不显示） | 后续实现 |
| `performance` | 性能测试 | 性能测试 | 性能测试 | 后续实现 |
| `functional` | 功能测试 | 功能测试 | 功能测试 | 后续实现 |

- 默认值：`ui`
- 影响：用例管理/执行中心/报告中心列表按类型筛选
- **说明**：报告中心暂不含"自动化部署测试"子菜单（部署测试不产生常规报告），但底层 case_type 仍支持 deploy

---

## 三、功能需求

### 3.1 菜单与路由

#### 路由设计（复用组件 + 类型参数）

| 路由 | 组件 | 类型参数 |
|------|------|----------|
| `/modules/:type?` | Modules.vue | standard / custom |
| `/cases/:type?` | Cases.vue | ui / api / security / deploy |
| `/execution/:type?` | Execution.vue | ui / api / security / deploy |

- 使用**可选路由参数** `:type?`，默认值由组件内处理
- 复用现有页面组件，通过 `route.params.type` 读取类型并筛选
- 兼容旧路径 `/cases`（无 type 参数时默认 ui 或全部）

#### 菜单组件

- App.vue 中模块管理/用例管理/执行中心改为 `el-sub-menu`
- 每个子菜单项为 `el-menu-item`，`index` 指向对应路由

### 3.2 模块管理

- Modules.vue 读取 `route.params.type`，按 module_type 筛选
- 新建模块弹窗增加"模块类型"选择（标准/定制）
- 标题随类型变化（"标准模块管理"/"项目定制模块管理"）

### 3.3 用例管理

- Cases.vue 读取 `route.params.type`，按 case_type 筛选
- 新建用例时自动填入当前 case_type
- 新建/编辑弹窗增加"用例类型"字段（默认当前菜单类型，可改）
- **步骤编辑器**（见 3.5）

### 3.4 执行中心

- Execution.vue 读取 `route.params.type`
- 按用例类型筛选执行记录（通过 execution.case_type）
- 创建执行时，取首个用例的 case_type 填入执行记录

### 3.4.1 报告中心

- Reports.vue 读取 `route.params.type`
- 按用例类型筛选报告（通过关联执行的 case_type）
- 报告中心子菜单5个：UI自动化测试、接口测试、安全测试、性能测试、功能测试（不含部署测试）

### 3.5 步骤编辑器（UI自动化）⭐

新建/编辑用例弹窗增加**步骤编辑区域**，支持：

| 功能 | 说明 |
|------|------|
| 添加步骤 | 点击【+ 添加步骤】新增一行 |
| 删除步骤 | 每行末尾删除按钮 |
| 上移/下移 | 调整步骤顺序，自动重排 order |
| 编辑步骤 | 序号、步骤名称、动作类型、参数（选择器/值等） |

#### UI自动化步骤字段

| 字段 | 类型 | 说明 |
|------|------|------|
| order | int | 步骤顺序（自动维护） |
| name | string | 步骤名称 |
| action | select | 动作类型（navigate/click/fill/wait/assert/select/hover/scroll/press 等） |
| params.selector | string | 元素选择器（click/fill/wait/assert 等需要） |
| params.value | string | 输入值（fill/select 需要） |
| params.url | string | 导航URL（navigate 需要） |
| params.timeout | number | 超时时间（wait 可选） |

动作类型下拉项对应执行器已支持的 13 种动作。

#### 动作与参数的动态显示

不同 action 显示不同参数输入框：
- `navigate` → URL
- `click` → 选择器
- `fill` → 选择器 + 值
- `wait` → 选择器 + 超时
- `assert` → 选择器 + 断言类型
- `select`/`hover` → 选择器
- `scroll` → 方向
- `press` → 按键

---

## 四、技术方案

### 4.1 数据库改动

#### Module 模型新增字段

```python
module_type: Mapped[str] = mapped_column(
    String(20), default="standard",
    comment="模块类型: standard/custom"
)
```

#### TestCase 模型新增字段

```python
case_type: Mapped[str] = mapped_column(
    String(20), default="ui",
    comment="用例类型: ui/api/security/deploy/performance/functional"
)
```

#### 数据迁移

现有 5 个模块 → module_type='standard'；现有 25 个用例 → case_type='ui'。

SQLite 通过 `ALTER TABLE ADD COLUMN` 加列（lifespan 建表逻辑需支持字段存在性检查，避免已存在时报错）。

### 4.2 后端改动

| 文件 | 改动 |
|------|------|
| `models/module.py` | 新增 module_type |
| `models/test_case.py` | 新增 case_type |
| `schemas/module.py` | 新增 module_type 字段 |
| `schemas/test_case.py` | 新增 case_type 字段 |
| `routers/modules.py` | list 支持 module_type 筛选；create 透传 |
| `routers/cases.py` | list 支持 case_type 筛选；create 透传 |
| `routers/executions.py` | list 支持按 case_type 筛选（join 用例） |

### 4.3 前端改动

| 文件 | 改动 |
|------|------|
| `router/index.ts` | 3 个路由改为 `/:type?` 可选参数 |
| `App.vue` | 3 个菜单改 el-sub-menu + 子菜单项；pageTitle 适配 |
| `views/Modules.vue` | 读 type 筛选；新建弹窗加类型 |
| `views/Cases.vue` | 读 type 筛选；新建带 type；集成步骤编辑器 |
| `views/Execution.vue` | 读 type 筛选 |
| `components/CaseStepEditor.vue` | 新建：UI自动化步骤编辑器组件 |
| `api/modules.ts` `api/cases.ts` | list 传 type 参数 |

### 4.4 预留页面处理

接口自动化/安全自动化/部署测试的子菜单指向同一路由（如 `/cases/api`），Cases.vue 渲染列表但：
- 这些类型目前无执行器，列表可能为空
- 新建用例时可选择类型，但执行时若非 ui 类型提示"执行器待实现"
- 自动化部署测试执行中心子菜单可显示空列表 + 提示

---

## 五、验收标准

| 测试项 | 预期结果 |
|--------|----------|
| 侧边栏显示3个父菜单+子菜单 | ✅ 可展开 |
| 点击"用例管理>UI自动化" | ✅ 只显示 ui 类型用例 |
| 点击"模块管理>项目定制模块" | ✅ 只显示 custom 模块 |
| 新建用例默认类型=当前菜单类型 | ✅ 自动填入 |
| 新建用例可添加/删除/排序步骤 | ✅ 步骤编辑可用 |
| 不同动作显示不同参数 | ✅ 动态表单 |
| 保存后步骤数据持久化 | ✅ 数据库存储 |
| 现有用例/模块分类正确 | ✅ 迁移后全为 ui/standard |
| 执行中心按类型筛选 | ✅ 列表正确 |
| 非UI类型执行提示 | ✅ 友好提示 |

---

## 六、相关文档

- `frontend/src/router/index.ts` - 路由
- `frontend/src/App.vue` - 菜单
- `backend/app/models/module.py` - 模块模型
- `backend/app/models/test_case.py` - 用例模型
- `frontend/src/views/Cases.vue` - 用例管理（步骤编辑集成点）

---

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