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

项目管理页面交互改进设计文档

日期: 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 组件）

技术细节

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

样式

.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 行（状态列）

技术细节

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

新增方法

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

样式

.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 - 分页处理

handlePagination(pagination) {
  if (pagination) {
    this.queryParams.pageNum = pagination.pageNum
    this.queryParams.pageSize = pagination.pageSize
  }
  this.getList() // 开始加载，loading = true
}

index.vue - 数据加载

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 - 表格绑定

<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 逻辑验证