From beaf4a5d660f2c8d3280dd33d96558e154c6e264 Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Fri, 27 Feb 2026 16:33:23 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2=E4=BA=A4=E4=BA=92=E6=94=B9?= =?UTF-8?q?=E8=BF=9B=E8=AE=BE=E8=AE=A1=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 搜索框添加搜索图标按钮 - 状态标签改为 GitHub 风格简约样式 - 分页切换添加 loading 效果验证 --- ...oject-management-ux-improvements-design.md | 250 ++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 docs/plans/2026-02-27-project-management-ux-improvements-design.md diff --git a/docs/plans/2026-02-27-project-management-ux-improvements-design.md b/docs/plans/2026-02-27-project-management-ux-improvements-design.md new file mode 100644 index 0000000..243e40c --- /dev/null +++ b/docs/plans/2026-02-27-project-management-ux-improvements-design.md @@ -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 + + + +``` + +#### 样式 +```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 + + + +``` + +#### 新增方法 +```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 + +``` + +#### 验证要点 +- 分页切换时，表格应立即显示半透明遮罩层 +- 遮罩层中央显示加载图标和"加载中..."文字 +- 数据加载完成后，遮罩层自动消失 + +--- + +## 视觉效果对比 + +### 搜索框 +- **改进前**: 只有输入框，用户不知道如何触发搜索 +- **改进后**: 输入框右侧有可点击的搜索图标，鼠标悬停时变蓝色 + +### 状态标签 +- **改进前**: 彩色背景标签，视觉突出 +- **改进后**: 简约的圆点+文字，更轻量现代 + +### 分页 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 逻辑验证