# 计划执行文档 — 安全测试模块 P1 待办任务

> **文档版本**: v1.0
> **创建日期**: 2026-07-22
> **作者**: Claude
> **关联需求文档**: `_PRD_安全测试模块P1待办任务_需求文档.md`
> **状态**: 待执行

---

## 一、执行概述

### 1.1 执行目标

完成安全测试模块 2 个 P1 优先级任务：

1. **前端报告中心适配安全报告** — 在 Reports.vue 中增加 Markdown 渲染能力，支持安全测试报告展示
2. **补充 API3/4/6/7/9/10 安全测试用例** — 为 6 个缺失模块新增 18 个测试用例

### 1.2 执行范围

| 类别 | 涉及文件 | 变更类型 |
|------|---------|---------|
| **前端** | `frontend/package.json` | 新增依赖 |
| **前端** | `frontend/src/views/Reports.vue` | 功能增强 |
| **后端脚本** | `backend/scripts/create_security_cases.py` | 用例补充 |

### 1.3 执行策略

- **并行开发**：两个任务可并行执行，互不阻塞
- **协调点**：用例创建脚本执行时需与会议管理窗口错开数据库写入时间
- **技术选型**：Markdown 渲染使用 `marked` 库（轻量、成熟）

---

## 二、任务分解与实施计划

### 任务 1：前端报告中心适配安全报告

#### Phase 1.1：环境准备

| 步骤 | 描述 | 命令/操作 |
|------|------|----------|
| 1.1.1 | 安装 marked 依赖 | `cd frontend && npm install marked` |
| 1.1.2 | 安装类型定义（可选） | `npm install -D @types/marked` |

**预计时间**: 5 分钟

#### Phase 1.2：Reports.vue 改造

| 步骤 | 描述 | 代码变更 |
|------|------|---------|
| 1.2.1 | 导入 marked 库 | `import { marked } from 'marked'` |
| 1.2.2 | 添加安全报告状态 | 新增 `securityReportContent`、`loadingSecurity` 状态 |
| 1.2.3 | 实现 case_type 分支 | 在 `watch(currentType)` 中增加 `security` 分支 |
| 1.2.4 | 实现安全报告加载 | 调用 `/api/security/executions/{id}/report` 获取 Markdown |
| 1.2.5 | 实现 Markdown 渲染 | 使用 `marked.parse(content)` 渲染为 HTML |
| 1.2.6 | 实现样式适配 | 添加 `.markdown-body` CSS 类，适配深色/浅色主题 |
| 1.2.7 | 实现下载功能 | 调用 `/api/security/executions/{id}/report/download` |

**预计时间**: 30 分钟

#### Phase 1.3：报告列表适配

| 步骤 | 描述 | 代码变更 |
|------|------|---------|
| 1.3.1 | 加载安全执行记录 | 从 `/api/security/executions` 获取列表 |
| 1.3.2 | 合并显示执行记录 | 与 UI 自动化执行记录合并显示 |
| 1.3.3 | 区分报告类型 | 列表项显示"安全测试"或"UI自动化"标签 |

**预计时间**: 15 分钟

#### Phase 1.4：样式与主题适配

| 步骤 | 描述 | 代码变更 |
|------|------|---------|
| 1.4.1 | 定义 Markdown 样式 | 参考 GitHub Markdown 样式 |
| 1.4.2 | 适配深色主题 | 使用 CSS 变量或条件类名 |
| 1.4.3 | 适配浅色主题 | 使用 CSS 变量或条件类名 |

**预计时间**: 15 分钟

#### Phase 1.5：测试验证

| 步骤 | 描述 | 验证内容 |
|------|------|---------|
| 1.5.1 | 启动后端服务 | `uvicorn app.main:app --port 8001` |
| 1.5.2 | 启动前端服务 | `npm run dev --port 3001` |
| 1.5.3 | 访问安全报告页面 | `http://localhost:3001/reports/security` |
| 1.5.4 | 验证 Markdown 渲染 | 表格、代码块、列表等元素正确显示 |
| 1.5.5 | 验证主题切换 | 深色/浅色主题切换正常 |
| 1.5.6 | 验证下载功能 | 点击下载按钮能下载 .md 文件 |

**预计时间**: 15 分钟

**任务 1 总预计时间**: 80 分钟

---

### 任务 2：补充 API3/4/6/7/9/10 安全测试用例

#### Phase 2.1：用例设计确认

| 步骤 | 描述 | 输出 |
|------|------|------|
| 2.1.1 | 确认用例清单 | 18 个用例的详细设计（已在需求文档中定义） |
| 2.1.2 | 确认测试目标 API | 根据被测系统 API 文档调整测试路径 |

**预计时间**: 10 分钟

#### Phase 2.2：修改 create_security_cases.py

| 步骤 | 描述 | 代码变更 |
|------|------|---------|
| 2.2.1 | 新增 API3 用例 | 3 个用例：sec_2_3_001/002/003 |
| 2.2.2 | 新增 API4 用例 | 3 个用例：sec_2_4_001/002/003 |
| 2.2.3 | 新增 API6 用例 | 3 个用例：sec_2_6_001/002/003 |
| 2.2.4 | 新增 API7 用例 | 3 个用例：sec_2_7_001/002/003 |
| 2.2.5 | 新增 API9 用例 | 3 个用例：sec_2_9_001/002/003 |
| 2.2.6 | 新增 API10 用例 | 3 个用例：sec_2_10_001/002/003 |
| 2.2.7 | 更新模块用例数统计 | 更新各模块的 case_count 字段 |

**预计时间**: 30 分钟

#### Phase 2.3：执行用例创建脚本

| 步骤 | 描述 | 命令/操作 |
|------|------|----------|
| 2.3.1 | 确认会议管理窗口未操作数据库 | 协调确认 |
| 2.3.2 | 执行脚本 | `cd backend && python scripts/create_security_cases.py` |
| 2.3.3 | 验证用例创建成功 | 检查数据库记录数 |

**预计时间**: 5 分钟

#### Phase 2.4：测试验证

| 步骤 | 描述 | 验证内容 |
|------|------|---------|
| 2.4.1 | 启动后端服务 | `uvicorn app.main:app --port 8001` |
| 2.4.2 | 访问用例管理页面 | `http://localhost:3000/cases/security` |
| 2.4.3 | 验证新用例显示 | 18 个新用例正确显示在各模块下 |
| 2.4.4 | 执行测试用例 | 选择 2-3 个新用例执行 |
| 2.4.5 | 验证报告生成 | 执行报告中 OWASP 覆盖矩阵体现新用例 |

**预计时间**: 20 分钟

**任务 2 总预计时间**: 65 分钟

---

## 三、验收标准

### 任务 1 验收标准

- [ ] Reports.vue 能识别 `case_type='security'` 类型
- [ ] 安全测试报告能正确渲染 Markdown 内容
- [ ] 报告样式与 UI 自动化报告风格一致
- [ ] 下载报告功能正常
- [ ] 报告列表能显示安全测试执行记录
- [ ] 深色/浅色主题切换正常

### 任务 2 验收标准

- [ ] 6 个缺失模块各有 3 个测试用例
- [ ] 新增用例能正常创建到数据库
- [ ] 新增用例能正常执行并生成报告
- [ ] 执行报告中 OWASP 覆盖矩阵能体现新增用例

---

## 四、测试计划

### 4.1 测试环境

| 项目 | 配置 |
|------|------|
| 后端端口 | 8001（或 8002 避免冲突） |
| 前端端口 | 3001（避免与会议管理窗口冲突） |
| 数据库 | `backend/data/test_platform.db` |
| 被测系统 | https://192.168.5.44 |

### 4.2 测试用例

| 测试项 | 测试内容 | 预期结果 |
|--------|---------|---------|
| TC1.1 | 访问 `/reports/security` | 显示安全测试执行记录列表 |
| TC1.2 | 点击安全报告详情 | Markdown 报告正确渲染 |
| TC1.3 | 切换深色主题 | 报告样式同步切换 |
| TC1.4 | 点击下载报告 | 下载 .md 文件 |
| TC2.1 | 访问 `/cases/security` | 显示 42 个用例（24+18） |
| TC2.2 | 执行 sec_2_3_001 用例 | 用例正常执行 |
| TC2.3 | 查看执行报告 | OWASP 矩阵显示 API3 覆盖 |

---

## 五、风险评估与应对

| 风险项 | 概率 | 影响 | 缓解措施 |
|--------|------|------|---------|
| Markdown 渲染样式与预期不符 | 中 | 中 | 参考 GitHub Markdown 样式，使用成熟的 CSS 框架 |
| 新增用例设计不够完善 | 中 | 中 | 参考 OWASP 官方测试用例和现有用例模式 |
| 数据库写锁冲突 | 低 | 高 | 与会议管理窗口协调脚本执行时间 |
| marked 库兼容性问题 | 低 | 低 | 使用稳定版本，避免最新版 |

---

## 六、实施记录

### 执行进度

| 阶段 | 状态 | 开始时间 | 完成时间 | 备注 |
|------|------|---------|---------|------|
| Phase 1.1 环境准备 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 安装 marked 依赖 |
| Phase 1.2 Reports.vue 改造 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | Markdown 渲染 + 安全报告弹窗 |
| Phase 1.3 报告列表适配 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 类型标签 + 分流逻辑 |
| Phase 1.4 样式与主题适配 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | GitHub 风格 Markdown + CSS 变量 |
| Phase 1.5 测试验证 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 前端构建通过，API验证通过 |
| Phase 2.1 用例设计确认 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 18 个用例已设计 |
| Phase 2.2 修改脚本 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | API3/4/6/7/9/10 各 3 个用例 |
| Phase 2.3 执行脚本 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 18 个新用例已入库 |
| Phase 2.4 测试验证 | ✅ 已完成 | 2026-07-22 | 2026-07-22 | 42个用例API可查，新用例数据完整 |

---

## 七、后续工作

完成 P1 任务后的后续工作：

| 优先级 | 任务 | 说明 |
|--------|------|------|
| P2 | WebSocket 实时进度推送 | 安全测试目前不推送步骤进度 |
| P3 | 网盘上传 + ERP 任务对接 | 参考实现的功能，平台化后可选 |

---

## 八、附录

### 8.1 参考文档

- `HANDOFF_安全测试.md` — 会话交接文档
- `Docs/PRD/需求文档/_PRD_安全测试模块需求文档.md` — 安全测试模块 PRD
- `backend/app/services/knowledge_base.py` — 知识库
- `backend/app/executors/security_executor.py` — 安全测试执行引擎
- `Docs/多窗口并行开发指南.md` — 并行开发规范

### 8.2 命令速查

```bash
# 后端启动
cd backend
uvicorn app.main:app --port 8001

# 前端启动
cd frontend
npm run dev --port 3001

# 安装依赖
cd frontend
npm install marked

# 执行用例创建脚本
cd backend
python scripts/create_security_cases.py
```

---

*本文档由 Claude 生成，供开发执行参考。*
