ccdi/doc/test-scripts/2026-02-28-frontend-test-report.md

前端功能测试报告

测试概述

测试日期: 2026-02-28 测试人员: Claude Code 测试环境:

• 后端: http://localhost:8080
• 前端: http://localhost:84
• 浏览器: Chrome 145.0.0.0
• 测试账号: admin/admin123

测试目标

验证项目管理页面状态统计数字显示正确，并在用户交互（搜索、分页、状态切换）过程中保持稳定。

测试场景

✅ 场景 1: 页面初始加载

操作步骤:

1. 访问前端应用 http://localhost:84
2. 使用 admin/admin123 登录系统
3. 导航到"初核项目管理"页面

预期结果:

• 页面正常加载
• 标签页显示正确的统计数字
• 两个 API 请求成功（list 和 statusCounts）

实际结果: ✅ 通过

验证数据:

• 标签页统计:
  • 全部项目(29) ✅
  • 进行中(27) ✅
  • 已完成(1) ✅
  • 已归档(1) ✅
• 列表显示: 共 29 条 ✅
• API 请求:
  • /ccdi/project/list?pageNum=1&pageSize=10 → 200 OK
  • /ccdi/project/statusCounts → 200 OK

响应数据验证:

// list 接口响应
{
  "total": 29,
  "rows": [ ...10条记录... ],
  "code": 200,
  "msg": "查询成功"
}

// statusCounts 接口响应
{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "all": 29,
    "status0": 27,
    "status1": 1,
    "status2": 1
  }
}

---

✅ 场景 2: 搜索功能

操作步骤:

1. 在搜索框输入 "测试4"
2. 按回车键触发搜索

预期结果:

• 列表只显示匹配的项目
• 标签页数字保持不变（显示总数）

实际结果: ✅ 通过

验证数据:

• 搜索结果: 1 条（测试4） ✅
• 标签页统计（保持不变）:
  • 全部项目(29) ✅
  • 进行中(27) ✅
  • 已完成(1) ✅
  • 已归档(1) ✅
• 分页显示: 共 1 条 ✅

API 请求验证:

GET /ccdi/project/list?pageNum=1&pageSize=10&projectName=测试4 → 200 OK

---

✅ 场景 3: 分页功能

操作步骤:

1. 清空搜索框，刷新页面恢复初始状态
2. 点击分页组件的"2"按钮，切换到第 2 页

预期结果:

• 列表切换到第 2 页数据
• 标签页数字保持不变

实际结果: ✅ 通过

验证数据:

• 当前页码: 第 2 页 ✅
• 标签页统计（保持不变）:
  • 全部项目(29) ✅
  • 进行中(27) ✅
  • 已完成(1) ✅
  • 已归档(1) ✅
• 分页显示: 共 29 条 ✅

API 请求验证:

GET /ccdi/project/list?pageNum=2&pageSize=10 → 200 OK
GET /ccdi/project/statusCounts → 200 OK

---

✅ 场景 4: 状态切换功能

操作步骤:

1. 点击"进行中"标签

预期结果:

• 列表只显示"进行中"状态的项目
• 标签页数字保持不变（仍显示总数）

实际结果: ✅ 通过

验证数据:

• 列表过滤: 所有项目状态都是"进行中" ✅
• 标签页统计（保持不变）:
  • 全部项目(29) ✅
  • 进行中(27) ✅
  • 已完成(1) ✅
  • 已归档(1) ✅
• 分页显示: 共 27 条（正确反映当前状态的项目数） ✅

API 请求验证:

GET /ccdi/project/list?pageNum=1&pageSize=10&status=0 → 200 OK
GET /ccdi/project/statusCounts → 200 OK

响应数据验证:

// status=0 过滤后的列表
{
  "total": 27,
  "rows": [
    {"projectId": 31, "projectName": "测试123", "status": "0", ...},
    {"projectId": 23, "projectName": "测试23", "status": "0", ...},
    ...
  ],
  "code": 200,
  "msg": "查询成功"
}

// 状态统计（始终返回总数）
{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "all": 29,
    "status0": 27,
    "status1": 1,
    "status2": 1
  }
}

---

✅ 场景 5: 浏览器控制台检查

操作步骤:

1. 打开浏览器开发者工具的 Console 标签

预期结果:

• 没有 JavaScript 错误
• 看到两个 API 请求成功

实际结果: ✅ 通过

控制台消息:

• ✅ 没有 JavaScript 错误
• ⚠️ 1 个警告: "A form field element should have an id or name attribute" (不影响功能)

---

网络请求统计

总请求数: 40 个

关键 API 请求:

1. 初始加载:

   • /ccdi/project/list?pageNum=1&pageSize=10 → 200 OK
   • /ccdi/project/statusCounts → 200 OK

2. 搜索功能:

   • /ccdi/project/list?pageNum=1&pageSize=10&projectName=测试4 → 200 OK

3. 分页功能:

   • /ccdi/project/list?pageNum=2&pageSize=10 → 200 OK
   • /ccdi/project/statusCounts → 200 OK

4. 状态切换:

   • /ccdi/project/list?pageNum=1&pageSize=10&status=0 → 200 OK
   • /ccdi/project/statusCounts → 200 OK

所有请求状态: ✅ 全部成功（200 OK）

---

核心修复验证

问题回顾

原始问题: 标签页数字随分页变化，不稳定

根本原因: 前端使用列表响应的 total 字段来更新标签页数字，导致搜索/分页/过滤时数字会变化

解决方案:

1. 后端新增 /statusCounts 接口，始终返回所有状态的总数
2. 前端在每次加载时并行请求 list 和 statusCounts
3. 标签页数字只使用 statusCounts 的数据，不受列表过滤影响

修复效果验证

✅ 搜索时: 标签页数字保持 29/27/1/1 不变 ✅ 分页时: 标签页数字保持 29/27/1/1 不变 ✅ 状态切换时: 标签页数字保持 29/27/1/1 不变

---

测试结论

✅ 所有测试场景通过

测试场景	状态	备注
页面初始加载	✅ 通过	标签页数字正确显示
搜索功能	✅ 通过	数字保持稳定
分页功能	✅ 通过	数字保持稳定
状态切换功能	✅ 通过	数字保持稳定
浏览器控制台	✅ 通过	无 JavaScript 错误

关键指标

• ✅ 功能正确性: 100% 通过
• ✅ 数据一致性: 标签页数字在所有操作中保持稳定
• ✅ 用户体验: 符合预期，数字显示直观清晰
• ✅ 性能: API 请求并行执行，响应迅速
• ✅ 代码质量: 无 JavaScript 错误，警告不影响功能

建议

1. ✅ 功能完善: 建议将此修复方案应用到其他类似的列表页面
2. ⚠️ 警告处理: 建议为搜索框添加 id 或 name 属性以消除控制台警告
3. ✅ 文档更新: 更新用户手册，说明标签页数字表示总数而非当前过滤结果

---

附录

测试环境信息

操作系统: Windows 11 Pro 10.0.26200
浏览器: Chrome 145.0.0.0
后端服务: http://localhost:8080
前端服务: http://localhost:84
数据库: MySQL 8.2.0
Java 版本: 17
Spring Boot 版本: 3.5.8
Vue.js 版本: 2.6.12

相关文件

后端:

• D:/ccdi/ccdi/ruoyi-info-collection/src/main/java/com/ruoyi/info/collection/domain/vo/ProjectStatusCountsVO.java
• D:/ccdi/ccdi/ruoyi-info-collection/src/main/java/com/ruoyi/info/collection/service/ICcdiProjectService.java
• D:/ccdi/ccdi/ruoyi-info-collection/src/main/java/com/ruoyi/info/collection/service/impl/CcdiProjectServiceImpl.java
• D:/ccdi/ccdi/ruoyi-info-collection/src/main/java/com/ruoyi/info/collection/controller/CcdiProjectController.java

前端:

• D:/ccdi/ccdi/ruoyi-ui/src/api/ccdiProject.js
• D:/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/index.vue
• D:/ccdi/ccdi/ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue

测试执行时间

• 开始时间: 2026-02-28 09:46:48
• 结束时间: 2026-02-28 09:50:00
• 总耗时: 约 3 分钟

---

测试人员签名: Claude Code 测试日期: 2026-02-28