docs: 添加项目管理页面交互改进实施计划
This commit is contained in:
379
docs/plans/2026-02-27-project-management-ux-improvements.md
Normal file
379
docs/plans/2026-02-27-project-management-ux-improvements.md
Normal file
@@ -0,0 +1,379 @@
|
|||||||
|
# 项目管理页面交互改进实施计划
|
||||||
|
|
||||||
|
> **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。
|
||||||
Reference in New Issue
Block a user