198 lines
4.2 KiB
Markdown
198 lines
4.2 KiB
Markdown
# 项目列表页面 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 搜索功能
|
|
- [ ] 点击搜索按钮触发搜索
|
|
- [ ] 输入框回车触发搜索
|
|
- [ ] 输入框清空触发搜索
|
|
|
|
**测试步骤**:
|
|
1. 在搜索框输入关键词"测试"
|
|
2. 点击"搜索"按钮
|
|
3. 验证列表只显示包含"测试"的项目
|
|
|
|
**结果**: [待测试]
|
|
|
|
### 3.2 标签页切换
|
|
- [ ] 点击"全部项目"显示所有项目
|
|
- [ ] 点击"进行中"显示进行中的项目
|
|
- [ ] 点击"已完成"显示已完成的项目
|
|
- [ ] 点击"已归档"显示已归档的项目
|
|
|
|
**测试步骤**:
|
|
1. 点击"进行中"标签
|
|
2. 验证列表只显示状态为"进行中"的项目
|
|
3. 验证标签计数与实际数量一致
|
|
|
|
**结果**: [待测试]
|
|
|
|
---
|
|
|
|
## 4. 兼容性测试
|
|
|
|
### 4.1 Chrome 浏览器
|
|
- [ ] 页面正常显示
|
|
- [ ] 功能正常工作
|
|
|
|
**结果**: [待测试]
|
|
|
|
### 4.2 Firefox 浏览器
|
|
- [ ] 页面正常显示
|
|
- [ ] 功能正常工作
|
|
|
|
**结果**: [待测试]
|
|
|
|
### 4.3 Edge 浏览器
|
|
- [ ] 页面正常显示
|
|
- [ ] 功能正常工作
|
|
|
|
**结果**: [待测试]
|
|
|
|
---
|
|
|
|
## 5. 浏览器截图
|
|
|
|
### 5.1 页面整体效果
|
|
|
|
[待添加截图：显示页面标题、搜索区域和表格]
|
|
|
|
### 5.2 搜索按钮特写
|
|
|
|
[待添加截图：显示搜索按钮与输入框的布局]
|
|
|
|
### 5.3 表格表头效果
|
|
|
|
[待添加截图：显示表格扁平化设计和透明表头]
|
|
|
|
---
|
|
|
|
## 6. 测试总结
|
|
|
|
**测试结果**: [待填写]
|
|
|
|
**发现问题**: [待填写]
|
|
|
|
**改进建议**: [待填写]
|
|
|
|
---
|
|
|
|
## 7. 附录
|
|
|
|
### 7.1 实施变更清单
|
|
|
|
**文件修改**:
|
|
1. `ruoyi-ui/src/views/ccdiProject/index.vue`
|
|
- 移除页面标题的卡片样式（背景、圆角、阴影）
|
|
|
|
2. `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
|
|
- 移除输入框内搜索图标
|
|
- 添加独立搜索按钮
|
|
- 移除输入框固定高度
|
|
|
|
3. `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 如何开始测试
|
|
|
|
1. **启动后端服务**（如果未运行）:
|
|
```bash
|
|
cd D:/ccdi/ccdi
|
|
mvn spring-boot:run
|
|
# 或运行 ry.bat
|
|
```
|
|
|
|
2. **启动前端服务**（如果未运行）:
|
|
```bash
|
|
cd ruoyi-ui
|
|
npm run dev
|
|
```
|
|
|
|
3. **访问测试页面**:
|
|
- 打开浏览器访问 http://localhost:80
|
|
- 使用账号 admin/admin123 登录
|
|
- 导航到"初核项目管理"页面
|
|
|
|
### 8.2 验收标准
|
|
|
|
**视觉验收**:
|
|
- 页面标题扁平化，无卡片装饰
|
|
- 搜索区域有独立按钮
|
|
- 表格扁平化，无卡片背景
|
|
- 表头透明，显示页面背景色
|
|
- 整体风格统一，简洁现代
|
|
|
|
**功能验收**:
|
|
- 搜索功能正常（按钮、回车、清空）
|
|
- 标签页切换正常
|
|
- 表格数据正常显示
|
|
- 分页功能正常
|
|
|
|
### 8.3 测试完成标志
|
|
|
|
- [ ] 所有样式测试通过
|
|
- [ ] 所有功能测试通过
|
|
- [ ] 至少在一个浏览器中测试通过
|
|
- [ ] 截图已添加到本报告
|
|
- [ ] 测试总结已填写
|