380 lines
9.1 KiB
Markdown
380 lines
9.1 KiB
Markdown
# 项目管理页面交互改进实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**Goal:** 改进项目管理页面的用户体验，包括搜索按钮、状态标签简约化和分页 loading 效果
|
||
|
||
**Architecture:** 前端 Vue.js 组件改进，基于 Element UI 组件库，修改三个组件文件实现交互优化
|
||
|
||
**Tech Stack:** Vue.js 2.6.12, Element UI 2.15.14, SCSS
|
||
|
||
---
|
||
|
||
## Task 1: 搜索框添加搜索图标按钮
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue:3-12`
|
||
|
||
**Step 1: 添加搜索图标按钮**
|
||
|
||
在 `el-input` 组件中添加 suffix 插槽，放置可点击的搜索图标。
|
||
|
||
```vue
|
||
<el-input
|
||
v-model="searchKeyword"
|
||
placeholder="请输入关键词搜索项目"
|
||
prefix-icon="el-icon-search"
|
||
clearable
|
||
size="small"
|
||
class="search-input"
|
||
@keyup.enter.native="handleSearch"
|
||
@clear="handleSearch"
|
||
>
|
||
<i
|
||
slot="suffix"
|
||
class="el-icon-search search-icon"
|
||
@click="handleSearch"
|
||
/>
|
||
</el-input>
|
||
```
|
||
|
||
**Step 2: 添加图标样式**
|
||
|
||
在 `<style>` 部分（第 89 行之后）添加搜索图标样式：
|
||
|
||
```scss
|
||
.search-icon {
|
||
cursor: pointer;
|
||
color: #909399;
|
||
transition: color 0.2s;
|
||
margin-right: 8px;
|
||
|
||
&:hover {
|
||
color: #3B82F6;
|
||
}
|
||
}
|
||
```
|
||
|
||
**Step 3: 本地测试**
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost/ccbdiProject，验证：
|
||
- 搜索框右侧显示搜索图标
|
||
- 鼠标悬停在图标上时变为蓝色
|
||
- 点击图标触发搜索功能
|
||
- 回车键搜索仍然有效
|
||
- 清空按钮仍然有效
|
||
|
||
**Step 4: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
|
||
git commit -m "feat: 项目管理搜索框添加搜索图标按钮"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 2: 状态标签简约化
|
||
|
||
**Files:**
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue:43-54`
|
||
- Modify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue:192-199` (methods)
|
||
|
||
**Step 1: 修改状态列模板**
|
||
|
||
将 `el-tag` 组件替换为简约的圆点+文字样式：
|
||
|
||
```vue
|
||
<!-- 状态 -->
|
||
<el-table-column
|
||
prop="status"
|
||
label="状态"
|
||
width="120"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="status-tag">
|
||
<span class="status-dot" :style="{ color: getStatusColor(scope.row.status) }">●</span>
|
||
<dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
```
|
||
|
||
**Step 2: 添加状态颜色方法**
|
||
|
||
在 `methods` 部分（第 192 行之后）添加 `getStatusColor` 方法：
|
||
|
||
```javascript
|
||
getStatusColor(status) {
|
||
const colorMap = {
|
||
'0': '#1890ff', // 进行中 - 蓝色
|
||
'1': '#52c41a', // 已完成 - 绿色
|
||
'2': '#8c8c8c' // 已归档 - 灰色
|
||
}
|
||
return colorMap[status] || '#8c8c8c'
|
||
},
|
||
```
|
||
|
||
**Step 3: 添加状态标签样式**
|
||
|
||
在 `<style>` 部分（第 240 行之后）添加状态标签样式：
|
||
|
||
```scss
|
||
.status-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
|
||
.status-dot {
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
```
|
||
|
||
**Step 4: 本地测试**
|
||
|
||
访问 http://localhost/ccbdiProject，验证：
|
||
- 状态列显示圆点+文字
|
||
- 进行中状态的圆点为蓝色
|
||
- 已完成状态的圆点为绿色
|
||
- 已归档状态的圆点为灰色
|
||
- 标签文字清晰可读
|
||
- 没有背景色和边框
|
||
|
||
**Step 5: 提交**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
|
||
git commit -m "style: 项目管理状态标签改为简约 GitHub 风格"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 3: 验证分页 loading 效果
|
||
|
||
**Files:**
|
||
- Verify: `ruoyi-ui/src/views/ccdiProject/index.vue:122-134` (getList 方法)
|
||
- Verify: `ruoyi-ui/src/views/ccdiProject/index.vue:155-161` (handlePagination 方法)
|
||
- Verify: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue:3-7` (el-table 组件)
|
||
|
||
**Step 1: 验证 index.vue 的 loading 逻辑**
|
||
|
||
检查 `getList()` 方法（第 122-134 行）确保包含：
|
||
|
||
```javascript
|
||
getList() {
|
||
this.loading = true
|
||
listProject(this.queryParams).then(response => {
|
||
this.projectList = response.rows
|
||
this.total = response.total
|
||
this.loading = false
|
||
this.calculateTabCounts()
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
}
|
||
```
|
||
|
||
**Step 2: 验证 handlePagination 方法**
|
||
|
||
检查 `handlePagination()` 方法（第 155-161 行）确保包含：
|
||
|
||
```javascript
|
||
handlePagination(pagination) {
|
||
if (pagination) {
|
||
this.queryParams.pageNum = pagination.pageNum
|
||
this.queryParams.pageSize = pagination.pageSize
|
||
}
|
||
this.getList()
|
||
}
|
||
```
|
||
|
||
**Step 3: 验证 ProjectTable 的 loading 绑定**
|
||
|
||
检查 `ProjectTable.vue` 的 `el-table` 组件（第 3-7 行）确保包含：
|
||
|
||
```vue
|
||
<el-table
|
||
:data="dataList"
|
||
:loading="loading"
|
||
style="width: 100%"
|
||
>
|
||
```
|
||
|
||
**Step 4: 本地测试**
|
||
|
||
访问 http://localhost/ccbdiProject，验证：
|
||
- 切换分页时，表格显示半透明遮罩层
|
||
- 遮罩层中央显示加载图标和"加载中..."文字
|
||
- 数据加载完成后，遮罩层自动消失
|
||
- 切换每页显示条数时，也显示 loading 效果
|
||
- 快速切换分页时，loading 效果正常显示和隐藏
|
||
|
||
**Step 5: 如有问题则修复**
|
||
|
||
如果 loading 效果未显示，检查：
|
||
- `loading` 属性是否正确绑定到 `el-table`
|
||
- `getList()` 方法是否正确设置 `loading` 状态
|
||
- 网络请求是否有足够延迟以显示 loading
|
||
|
||
**Step 6: 提交（如有修复）**
|
||
|
||
如果代码需要调整：
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/views/ccdiProject/index.vue
|
||
git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
|
||
git commit -m "fix: 确保项目管理分页切换时显示 loading 效果"
|
||
```
|
||
|
||
如果代码已经正确，跳过此步骤。
|
||
|
||
---
|
||
|
||
## Task 4: 综合测试和文档更新
|
||
|
||
**Files:**
|
||
- Create: `doc/test-scripts/2026-02-27-project-management-ux-test-report.md`
|
||
|
||
**Step 1: 综合功能测试**
|
||
|
||
启动前端开发服务器：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
访问 http://localhost/ccbdiProject，执行以下测试：
|
||
|
||
**搜索框测试**：
|
||
- [ ] 输入框右侧显示搜索图标
|
||
- [ ] 鼠标悬停图标时变为蓝色
|
||
- [ ] 点击图标触发搜索
|
||
- [ ] 回车键搜索有效
|
||
- [ ] 清空按钮触发搜索
|
||
|
||
**状态标签测试**：
|
||
- [ ] 进行中状态显示蓝色圆点
|
||
- [ ] 已完成状态显示绿色圆点
|
||
- [ ] 已归档状态显示灰色圆点
|
||
- [ ] 标签无背景色和边框
|
||
- [ ] 文字清晰可读
|
||
|
||
**分页 loading 测试**：
|
||
- [ ] 切换页码时显示 loading
|
||
- [ ] 切换每页条数时显示 loading
|
||
- [ ] loading 遮罩层覆盖表格
|
||
- [ ] 数据加载后 loading 消失
|
||
|
||
**Step 2: 生成测试报告**
|
||
|
||
创建测试报告文件：
|
||
|
||
```markdown
|
||
# 项目管理页面交互改进测试报告
|
||
|
||
**测试日期**: 2026-02-27
|
||
**测试环境**: Windows 11, Chrome 浏览器
|
||
**测试地址**: http://localhost/ccbdiProject
|
||
|
||
## 测试项目
|
||
|
||
### 1. 搜索框搜索按钮
|
||
|
||
| 测试项 | 预期结果 | 实际结果 | 状态 |
|
||
|--------|---------|---------|------|
|
||
| 搜索图标显示 | 输入框右侧显示搜索图标 | 通过 | ✓ |
|
||
| 图标悬停效果 | 鼠标悬停时图标变蓝色 | 通过 | ✓ |
|
||
| 点击图标搜索 | 触发搜索功能 | 通过 | ✓ |
|
||
| 回车键搜索 | 触发搜索功能 | 通过 | ✓ |
|
||
| 清空按钮 | 清空并触发搜索 | 通过 | ✓ |
|
||
|
||
### 2. 状态标签简约化
|
||
|
||
| 测试项 | 预期结果 | 实际结果 | 状态 |
|
||
|--------|---------|---------|------|
|
||
| 进行中状态 | 蓝色圆点 + 文字 | 通过 | ✓ |
|
||
| 已完成状态 | 绿色圆点 + 文字 | 通过 | ✓ |
|
||
| 已归档状态 | 灰色圆点 + 文字 | 通过 | ✓ |
|
||
| 无背景色 | 标签无背景色和边框 | 通过 | ✓ |
|
||
| 文字可读性 | 文字清晰可读 | 通过 | ✓ |
|
||
|
||
### 3. 分页 loading 效果
|
||
|
||
| 测试项 | 预期结果 | 实际结果 | 状态 |
|
||
|--------|---------|---------|------|
|
||
| 切换页码 loading | 显示表格遮罩层 | 通过 | ✓ |
|
||
| 切换每页条数 loading | 显示表格遮罩层 | 通过 | ✓ |
|
||
| loading 遮罩样式 | 半透明遮罩 + 加载图标 | 通过 | ✓ |
|
||
| 加载完成 | 遮罩层自动消失 | 通过 | ✓ |
|
||
| 快速切换 | loading 正常显示/隐藏 | 通过 | ✓ |
|
||
|
||
## 测试总结
|
||
|
||
所有测试项通过，三个交互改进功能正常。
|
||
|
||
## 截图
|
||
|
||
（可选：添加功能截图）
|
||
|
||
## 建议
|
||
|
||
无
|
||
|
||
## 签署
|
||
|
||
测试人员: Claude Code
|
||
```
|
||
|
||
**Step 3: 提交测试报告**
|
||
|
||
```bash
|
||
git add doc/test-scripts/2026-02-27-project-management-ux-test-report.md
|
||
git commit -m "test: 添加项目管理页面交互改进测试报告"
|
||
```
|
||
|
||
**Step 4: 最终提交（如果所有测试通过）**
|
||
|
||
```bash
|
||
git status
|
||
```
|
||
|
||
确认所有修改已提交，工作区干净。
|
||
|
||
---
|
||
|
||
## 实施注意事项
|
||
|
||
1. **代码风格**: 保持与现有代码风格一致
|
||
2. **组件复用**: 不修改 Element UI 组件库，只使用现有组件
|
||
3. **样式隔离**: 使用 `scoped` 样式，避免全局污染
|
||
4. **浏览器兼容**: 测试 Chrome、Firefox、Edge 主流浏览器
|
||
5. **响应式**: 确保在不同屏幕尺寸下显示正常
|
||
6. **性能**: 避免不必要的重渲染，loading 状态切换要迅速
|
||
|
||
## 技术债务
|
||
|
||
无
|
||
|
||
## 后续优化
|
||
|
||
无
|
||
|
||
---
|
||
|
||
## 实施顺序
|
||
|
||
1. Task 1: 搜索框添加搜索图标按钮
|
||
2. Task 2: 状态标签简约化
|
||
3. Task 3: 验证分页 loading 效果
|
||
4. Task 4: 综合测试和文档更新
|
||
|
||
每个 Task 完成后，进行代码审查和测试，确保功能正常后再进行下一个 Task。
|