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

```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。