ccdi/docs/plans/2026-02-27-project-management-ux-improvements.md

项目管理页面交互改进实施计划

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 插槽，放置可点击的搜索图标。

<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 行之后）添加搜索图标样式：

.search-icon {
  cursor: pointer;
  color: #909399;
  transition: color 0.2s;
  margin-right: 8px;

  &:hover {
    color: #3B82F6;
  }
}

Step 3: 本地测试

cd ruoyi-ui
npm run dev

访问 http://localhost/ccbdiProject，验证：

• 搜索框右侧显示搜索图标
• 鼠标悬停在图标上时变为蓝色
• 点击图标触发搜索功能
• 回车键搜索仍然有效
• 清空按钮仍然有效

Step 4: 提交

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 组件替换为简约的圆点+文字样式：

<!-- 状态 -->
<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 方法：

getStatusColor(status) {
  const colorMap = {
    '0': '#1890ff',  // 进行中 - 蓝色
    '1': '#52c41a',  // 已完成 - 绿色
    '2': '#8c8c8c'   // 已归档 - 灰色
  }
  return colorMap[status] || '#8c8c8c'
},

Step 3: 添加状态标签样式

在 <style> 部分（第 240 行之后）添加状态标签样式：

.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: 提交

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 行）确保包含：

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 行）确保包含：

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 行）确保包含：

<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: 提交（如有修复）

如果代码需要调整：

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: 综合功能测试

启动前端开发服务器：

cd ruoyi-ui
npm run dev

访问 http://localhost/ccbdiProject，执行以下测试：

搜索框测试：

• 输入框右侧显示搜索图标
• 鼠标悬停图标时变为蓝色
• 点击图标触发搜索
• 回车键搜索有效
• 清空按钮触发搜索

状态标签测试：

• 进行中状态显示蓝色圆点
• 已完成状态显示绿色圆点
• 已归档状态显示灰色圆点
• 标签无背景色和边框
• 文字清晰可读

分页 loading 测试：

• 切换页码时显示 loading
• 切换每页条数时显示 loading
• loading 遮罩层覆盖表格
• 数据加载后 loading 消失

Step 2: 生成测试报告

创建测试报告文件：

# 项目管理页面交互改进测试报告

**测试日期**: 2026-02-27
**测试环境**: Windows 11, Chrome 浏览器
**测试地址**: http://localhost/ccbdiProject

## 测试项目

### 1. 搜索框搜索按钮

| 测试项 | 预期结果 | 实际结果 | 状态 |
|--------|---------|---------|------|
| 搜索图标显示 | 输入框右侧显示搜索图标 | 通过 | ✓ |
| 图标悬停效果 | 鼠标悬停时图标变蓝色 | 通过 | ✓ |
| 点击图标搜索 | 触发搜索功能 | 通过 | ✓ |
| 回车键搜索 | 触发搜索功能 | 通过 | ✓ |
| 清空按钮 | 清空并触发搜索 | 通过 | ✓ |

### 2. 状态标签简约化

| 测试项 | 预期结果 | 实际结果 | 状态 |
|--------|---------|---------|------|
| 进行中状态 | 蓝色圆点 + 文字 | 通过 | ✓ |
| 已完成状态 | 绿色圆点 + 文字 | 通过 | ✓ |
| 已归档状态 | 灰色圆点 + 文字 | 通过 | ✓ |
| 无背景色 | 标签无背景色和边框 | 通过 | ✓ |
| 文字可读性 | 文字清晰可读 | 通过 | ✓ |

### 3. 分页 loading 效果

| 测试项 | 预期结果 | 实际结果 | 状态 |
|--------|---------|---------|------|
| 切换页码 loading | 显示表格遮罩层 | 通过 | ✓ |
| 切换每页条数 loading | 显示表格遮罩层 | 通过 | ✓ |
| loading 遮罩样式 | 半透明遮罩 + 加载图标 | 通过 | ✓ |
| 加载完成 | 遮罩层自动消失 | 通过 | ✓ |
| 快速切换 | loading 正常显示/隐藏 | 通过 | ✓ |

## 测试总结

所有测试项通过，三个交互改进功能正常。

## 截图

（可选：添加功能截图）

## 建议

无

## 签署

测试人员: Claude Code

Step 3: 提交测试报告

git add doc/test-scripts/2026-02-27-project-management-ux-test-report.md
git commit -m "test: 添加项目管理页面交互改进测试报告"

Step 4: 最终提交（如果所有测试通过）

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。