docs: 添加项目管理页面交互改进设计文档
- 搜索框添加搜索图标按钮 - 状态标签改为 GitHub 风格简约样式 - 分页切换添加 loading 效果验证
This commit is contained in:
@@ -0,0 +1,250 @@
|
|||||||
|
# 项目管理页面交互改进设计文档
|
||||||
|
|
||||||
|
**日期**: 2026-02-27
|
||||||
|
**模块**: 初核项目管理 (ccdiProject)
|
||||||
|
**作者**: Claude Code
|
||||||
|
|
||||||
|
## 概述
|
||||||
|
|
||||||
|
本文档描述了项目管理页面的三个交互改进：搜索框按钮、状态标签简约化和分页 loading 效果。
|
||||||
|
|
||||||
|
## 改进项目
|
||||||
|
|
||||||
|
### 1. 搜索框添加搜索按钮
|
||||||
|
|
||||||
|
#### 当前状态
|
||||||
|
- 搜索框只支持回车键搜索和清空按钮
|
||||||
|
- 没有明确的搜索按钮，用户可能不知道如何触发搜索
|
||||||
|
|
||||||
|
#### 改进方案
|
||||||
|
- 在输入框内右侧添加一个可点击的搜索图标按钮
|
||||||
|
- 使用 Element UI 的 `suffix` 插槽实现
|
||||||
|
- 图标使用 `el-icon-search`
|
||||||
|
- 点击图标触发 `handleSearch` 方法，与回车键效果一致
|
||||||
|
|
||||||
|
#### 实现位置
|
||||||
|
- 文件: `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue`
|
||||||
|
- 行数: 第 3-12 行（el-input 组件）
|
||||||
|
|
||||||
|
#### 技术细节
|
||||||
|
```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>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 样式
|
||||||
|
```scss
|
||||||
|
.search-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #909399;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #3B82F6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. 状态标签简约化
|
||||||
|
|
||||||
|
#### 当前状态
|
||||||
|
- 使用 `el-tag` 组件显示状态
|
||||||
|
- 有背景色：蓝色（进行中）、绿色（已完成）、灰色（已归档）
|
||||||
|
- 视觉上较为突出，占用空间较大
|
||||||
|
|
||||||
|
#### 改进方案
|
||||||
|
- 移除 `el-tag` 组件，使用自定义简约样式
|
||||||
|
- GitHub 风格标签：左侧彩色圆点 + 右侧文字
|
||||||
|
- 无背景色，无边框
|
||||||
|
- 圆点颜色：
|
||||||
|
- 进行中 (`status='0'`): 蓝色 `#1890ff`
|
||||||
|
- 已完成 (`status='1'`): 绿色 `#52c41a`
|
||||||
|
- 已归档 (`status='2'`): 灰色 `#8c8c8c`
|
||||||
|
|
||||||
|
#### 实现位置
|
||||||
|
- 文件: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
|
||||||
|
- 行数: 第 43-54 行（状态列）
|
||||||
|
|
||||||
|
#### 技术细节
|
||||||
|
```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>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 新增方法
|
||||||
|
```javascript
|
||||||
|
getStatusColor(status) {
|
||||||
|
const colorMap = {
|
||||||
|
'0': '#1890ff', // 进行中 - 蓝色
|
||||||
|
'1': '#52c41a', // 已完成 - 绿色
|
||||||
|
'2': '#8c8c8c' // 已归档 - 灰色
|
||||||
|
}
|
||||||
|
return colorMap[status] || '#8c8c8c'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 样式
|
||||||
|
```scss
|
||||||
|
.status-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
.status-dot {
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. 分页 loading 效果
|
||||||
|
|
||||||
|
#### 当前状态
|
||||||
|
- 分页切换时调用 `getList()` 方法
|
||||||
|
- `getList()` 内部会设置 `loading = true`
|
||||||
|
- `el-table` 有 `:loading="loading"` 属性绑定
|
||||||
|
- 理论上应该显示 loading 效果
|
||||||
|
|
||||||
|
#### 改进方案
|
||||||
|
- 确认 `el-table` 的 loading 属性正确绑定
|
||||||
|
- 确保分页切换时 loading 状态正确设置
|
||||||
|
- Element UI 会自动显示表格遮罩层和加载动画
|
||||||
|
|
||||||
|
#### 实现位置
|
||||||
|
- 文件: `ruoyi-ui/src/views/ccdiProject/index.vue`
|
||||||
|
- `handlePagination` 方法（第 155-161 行）
|
||||||
|
- `getList` 方法（第 122-134 行）
|
||||||
|
- 文件: `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue`
|
||||||
|
- `el-table` 组件（第 3-7 行）
|
||||||
|
|
||||||
|
#### 技术细节
|
||||||
|
|
||||||
|
**index.vue - 分页处理**
|
||||||
|
```javascript
|
||||||
|
handlePagination(pagination) {
|
||||||
|
if (pagination) {
|
||||||
|
this.queryParams.pageNum = pagination.pageNum
|
||||||
|
this.queryParams.pageSize = pagination.pageSize
|
||||||
|
}
|
||||||
|
this.getList() // 开始加载，loading = true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**index.vue - 数据加载**
|
||||||
|
```javascript
|
||||||
|
getList() {
|
||||||
|
this.loading = true // 立即显示 loading
|
||||||
|
listProject(this.queryParams).then(response => {
|
||||||
|
this.projectList = response.rows
|
||||||
|
this.total = response.total
|
||||||
|
this.loading = false // 加载完成，隐藏 loading
|
||||||
|
this.calculateTabCounts()
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false // 加载失败，隐藏 loading
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**ProjectTable.vue - 表格绑定**
|
||||||
|
```vue
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:loading="loading"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 验证要点
|
||||||
|
- 分页切换时，表格应立即显示半透明遮罩层
|
||||||
|
- 遮罩层中央显示加载图标和"加载中..."文字
|
||||||
|
- 数据加载完成后，遮罩层自动消失
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 视觉效果对比
|
||||||
|
|
||||||
|
### 搜索框
|
||||||
|
- **改进前**: 只有输入框，用户不知道如何触发搜索
|
||||||
|
- **改进后**: 输入框右侧有可点击的搜索图标，鼠标悬停时变蓝色
|
||||||
|
|
||||||
|
### 状态标签
|
||||||
|
- **改进前**: 彩色背景标签，视觉突出
|
||||||
|
- **改进后**: 简约的圆点+文字，更轻量现代
|
||||||
|
|
||||||
|
### 分页 loading
|
||||||
|
- **改进前**: 分页切换时无明显反馈
|
||||||
|
- **改进后**: 表格显示 loading 遮罩，明确告知用户正在加载
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 兼容性
|
||||||
|
|
||||||
|
- 所有改进基于现有 Element UI 组件，无需引入新的依赖
|
||||||
|
- 保持与现有代码风格一致
|
||||||
|
- 不影响其他功能模块
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 测试要点
|
||||||
|
|
||||||
|
1. **搜索按钮**:
|
||||||
|
- 点击搜索图标，应触发搜索
|
||||||
|
- 图标悬停时变蓝色
|
||||||
|
- 回车键仍然有效
|
||||||
|
|
||||||
|
2. **状态标签**:
|
||||||
|
- 三种状态显示正确的圆点颜色
|
||||||
|
- 文字显示正常
|
||||||
|
- 标签对齐居中
|
||||||
|
|
||||||
|
3. **分页 loading**:
|
||||||
|
- 切换分页时，表格显示 loading
|
||||||
|
- 数据加载完成后，loading 消失
|
||||||
|
- 加载失败时，loading 也应消失
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 实施步骤
|
||||||
|
|
||||||
|
1. 修改 `SearchBar.vue`，添加搜索图标按钮
|
||||||
|
2. 修改 `ProjectTable.vue`，实现简约状态标签
|
||||||
|
3. 验证 `index.vue` 和 `ProjectTable.vue` 的 loading 绑定
|
||||||
|
4. 测试三个改进点的功能
|
||||||
|
5. 生成测试报告
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 文件清单
|
||||||
|
|
||||||
|
- `ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue` - 搜索框改进
|
||||||
|
- `ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue` - 状态标签和 loading 验证
|
||||||
|
- `ruoyi-ui/src/views/ccdiProject/index.vue` - loading 逻辑验证
|
||||||
Reference in New Issue
Block a user