docs: 添加项目管理页面交互改进实施计划

2026-02-27 16:35:20 +08:00
parent beaf4a5d66
commit b78427a7e8
1 changed files with 379 additions and 0 deletions
--- a/docs/plans/2026-02-27-project-management-ux-improvements.md
+++ b/docs/plans/2026-02-27-project-management-ux-improvements.md
@@ -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。