增加测试平台功能，系统设置，支持多个角色，分配菜单

2026-04-22 10:00:17 +08:00
parent 6d5d69cbde
commit 4395d9fb22
42 changed files with 4239 additions and 81 deletions
--- a/.plan/MEVsZvRZopyrJGc3cNsiN.md
+++ b/.plan/MEVsZvRZopyrJGc3cNsiN.md
@@ -0,0 +1,129 @@
+# 前端实现计划：测试平台页面与接口
+
+## 1. 现状确认
+- 当前项目不是 React 18 + TypeScript，而是 **Vue 2 + Element UI + vue-router + vuex + axios**。
+- 已有页面以“效能平台/造数工具”为主，目录集中在：
+  - `src/components/`
+  - `src/api/`
+  - `src/router/index.js`
+- 已存在一套造数相关接口封装：`src/api/CreateDtapi.js`
+- 已存在基础布局页：`src/components/Home.vue`
+- 因此本次应遵循**现有 Vue 2 结构**落地，不直接按你给出的 React 目录硬切，否则与当前代码库不兼容。
+
+## 2. 实施目标
+按你提供的详细设计，在当前项目结构下补齐并升级前端代码，重点实现：
+- 测试平台导航结构
+- 项目/用例/计划/报告/造数 五大功能入口页面
+- 对应 API 封装层
+- 页面级列表、详情、表单、执行、报告查看等基础交互
+- 复用当前 Element UI 风格，保持现有代码可运行
+
+## 3. 实施范围拆分
+
+### 阶段 A：基础设施与路由改造
+1. 梳理现有路由与导航。
+2. 扩展左侧菜单，新增模块入口：
+   - 项目管理
+   - 用例管理
+   - 测试计划
+   - 测试报告
+   - 造数工厂
+3. 在 `src/router/index.js` 注册对应页面路由。
+4. 保留现有造数页面入口，避免破坏已有功能。
+
+### 阶段 B：API 服务层补齐
+1. 新增 API 文件，按你给出的接口定义封装：
+   - `src/api/projectApi.js`
+   - `src/api/caseApi.js`
+   - `src/api/planApi.js`
+   - `src/api/reportApi.js`
+   - `src/api/dataFactoryApi.js`
+2. 统一复用 `src/utils/request.js`。
+3. 尽量映射到 REST 风格路径，例如：
+   - `/api/v1/projects/{projectId}/cases`
+   - `/api/v1/projects/{projectId}/plans`
+   - `/api/v1/projects/{projectId}/reports`
+   - `/api/v1/projects/{projectId}/data/*`
+4. 对分页、详情、创建、更新、执行、导出等接口做最小可用封装。
+
+### 阶段 C：页面骨架实现
+在 `src/components/` 下新增测试平台模块页面，优先做可运行页面骨架与核心交互：
+
+1. 项目模块
+   - `src/components/TestPlatform/Project/ProjectList.vue`
+   - `src/components/TestPlatform/Project/ProjectDetail.vue`
+   - `src/components/TestPlatform/Project/ProjectSettings.vue`
+
+2. 用例模块
+   - `src/components/TestPlatform/Case/CaseList.vue`
+   - `src/components/TestPlatform/Case/CaseEditor.vue`
+   - `src/components/TestPlatform/Case/CaseReview.vue`
+
+3. 测试计划模块
+   - `src/components/TestPlatform/Plan/PlanList.vue`
+   - `src/components/TestPlatform/Plan/PlanBuilder.vue`
+   - `src/components/TestPlatform/Plan/PlanExecute.vue`
+   - `src/components/TestPlatform/Plan/PlanProgress.vue`
+
+4. 报告模块
+   - `src/components/TestPlatform/Report/ReportList.vue`
+   - `src/components/TestPlatform/Report/ReportViewer.vue`
+
+5. 造数模块升级
+   - 保留现有 `CreateData/*`
+   - 新增测试平台语义下页面：
+     - `src/components/TestPlatform/DataFactory/BuilderList.vue`
+     - `src/components/TestPlatform/DataFactory/BuilderEditor.vue`
+     - `src/components/TestPlatform/DataFactory/TaskHistory.vue`
+     - `src/components/TestPlatform/DataFactory/MockService.vue`
+
+### 阶段 D：公共组件抽取
+新增可复用基础组件，减少页面重复：
+- `src/components/TestPlatform/common/JsonViewer.vue`
+- `src/components/TestPlatform/common/KeyValueDescriptions.vue`
+- `src/components/TestPlatform/common/PageSection.vue`
+
+### 阶段 E：联调友好处理
+1. 页面初版支持后端未完成时的容错：
+   - 空数据态
+   - 请求失败提示
+   - 默认 projectId 占位
+2. 不引入新依赖，避免额外安装。
+3. 保持接口函数独立，后续联调时只需替换 URL 或参数格式。
+
+## 4. 执行顺序
+1. 先改路由与主页导航。
+2. 再补 API 封装。
+3. 再按模块逐步落页面：
+   - 项目
+   - 用例
+   - 计划
+   - 报告
+   - 造数
+4. 最后做公共组件复用与样式收口。
+
+## 5. 每阶段交付物
+- 阶段 A：可点击进入的菜单与路由
+- 阶段 B：完整接口文件
+- 阶段 C：各模块页面可打开、可发请求、可展示表格/表单
+- 阶段 D：重复 UI 收敛
+- 阶段 E：整体自检，确保不破坏原有功能
+
+## 6. 风险与约束
+- 当前代码库是旧版 Vue 2 工程，不能直接生成 React/TSX 代码。
+- 你的接口设计是目标态，实际后端返回结构可能与设计不完全一致，因此前端会适当做字段兼容。
+- 由于当前 `request.js` 已固定 `baseURL`，本次先复用，不额外改动接口基础配置，避免影响现有功能。
+
+## 7. 本次建议执行策略
+按“先骨架、再细化”的方式推进：
+- 第一步：完成导航、路由、API 文件、页面骨架
+- 第二步：优先把列表页和详情/编辑页做成可联调版本
+- 第三步：再补计划执行、报告查看、造数编排等复杂交互
+
+## 8. 下一步实际执行内容
+获批后，我将从以下顺序开始落地：
+1. 修改 `src/components/Home.vue` 增加测试平台菜单
+2. 修改 `src/router/index.js` 注册测试平台路由
+3. 新增五类 API 文件
+4. 新增项目/用例/计划/报告/造数页面骨架
+5. 检查并修正页面间跳转与基础请求