4.2 KiB
4.2 KiB
项目列表页面 UI 优化测试报告
测试日期: 2026-02-28 测试环境: Chrome/Firefox/Edge 测试人员: [待填写]
1. 测试环境
- 前端地址: http://localhost:80
- 后端地址: http://localhost:8080
- 测试账号: admin/admin123
- 测试页面: 初核项目管理
2. 样式测试
2.1 页面标题
- 无白色背景
- 无圆角
- 无阴影
- 字体大小为 20px
- 字体粗细为 500
结果: [待测试]
2.2 搜索按钮
- 输入框右侧有独立的"搜索"按钮
- 输入框内无搜索图标
- 按钮与输入框高度一致
- 按钮与输入框间距为 8px
结果: [待测试]
2.3 表格样式
- 表格无白色卡片背景
- 表格无圆角
- 表格无阴影
- 表头透明背景（显示页面灰色背景）
- 表头深色加粗文字
- 表头底部有分隔线
结果: [待测试]
3. 功能测试
3.1 搜索功能
- 点击搜索按钮触发搜索
- 输入框回车触发搜索
- 输入框清空触发搜索
测试步骤:
- 在搜索框输入关键词"测试"
- 点击"搜索"按钮
- 验证列表只显示包含"测试"的项目
结果: [待测试]
3.2 标签页切换
- 点击"全部项目"显示所有项目
- 点击"进行中"显示进行中的项目
- 点击"已完成"显示已完成的项目
- 点击"已归档"显示已归档的项目
测试步骤:
- 点击"进行中"标签
- 验证列表只显示状态为"进行中"的项目
- 验证标签计数与实际数量一致
结果: [待测试]
4. 兼容性测试
4.1 Chrome 浏览器
- 页面正常显示
- 功能正常工作
结果: [待测试]
4.2 Firefox 浏览器
- 页面正常显示
- 功能正常工作
结果: [待测试]
4.3 Edge 浏览器
- 页面正常显示
- 功能正常工作
结果: [待测试]
5. 浏览器截图
5.1 页面整体效果
[待添加截图：显示页面标题、搜索区域和表格]
5.2 搜索按钮特写
[待添加截图：显示搜索按钮与输入框的布局]
5.3 表格表头效果
[待添加截图：显示表格扁平化设计和透明表头]
6. 测试总结
测试结果: [待填写]
发现问题: [待填写]
改进建议: [待填写]
7. 附录
7.1 实施变更清单
文件修改:
-
ruoyi-ui/src/views/ccdiProject/index.vue- 移除页面标题的卡片样式（背景、圆角、阴影）
-
ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue- 移除输入框内搜索图标
- 添加独立搜索按钮
- 移除输入框固定高度
-
ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue- 移除表格卡片背景（背景、圆角、阴影）
Git 提交记录:
fa28351- refactor: 移除页面标题的卡片式样式bcabc2a- feat: 添加独立搜索按钮，移除输入框内搜索图标f9cf7e9- refactor: 移除表格卡片背景,实现扁平化设计
7.2 参考文档
- 设计文档:
doc/plans/2026-02-28-project-list-ui-optimization-design.md - 实施计划:
doc/plans/2026-02-28-project-list-ui-optimization.md - 原型图:
doc/创建项目功能/ScreenShot_2026-02-27_111611_994.png
8. 测试说明
8.1 如何开始测试
-
启动后端服务（如果未运行）:
cd D:/ccdi/ccdi mvn spring-boot:run # 或运行 ry.bat -
启动前端服务（如果未运行）:
cd ruoyi-ui npm run dev -
访问测试页面:
- 打开浏览器访问 http://localhost:80
- 使用账号 admin/admin123 登录
- 导航到"初核项目管理"页面
8.2 验收标准
视觉验收:
- 页面标题扁平化，无卡片装饰
- 搜索区域有独立按钮
- 表格扁平化，无卡片背景
- 表头透明，显示页面背景色
- 整体风格统一，简洁现代
功能验收:
- 搜索功能正常（按钮、回车、清空）
- 标签页切换正常
- 表格数据正常显示
- 分页功能正常
8.3 测试完成标志
- 所有样式测试通过
- 所有功能测试通过
- 至少在一个浏览器中测试通过
- 截图已添加到本报告
- 测试总结已填写