effekt-interface-frontend/.plan/MEVsZvRZopyrJGc3cNsiN.md

前端实现计划：测试平台页面与接口

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. 检查并修正页面间跳转与基础请求