130 lines
5.1 KiB
Markdown
130 lines
5.1 KiB
Markdown
# 前端实现计划：测试平台页面与接口
|
||
|
||
## 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. 检查并修正页面间跳转与基础请求
|