wkc/ccdi

Fork 0

Files

wkc 29dfe67007 docs: 添加项目管理首页优化实现计划

2026-02-27 09:35:00 +08:00

14 KiB

Raw Blame History

项目管理首页优化实现计划

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: 优化项目管理首页的搜索栏、表格样式和操作按钮，提升用户体验和视觉效果

Architecture: 采用混合方案，在现有组件结构基础上优化布局、样式和交互逻辑，不进行大规模重构

Tech Stack: Vue.js 2.6.12, Element UI 2.15.14, SCSS

Task 1: 优化 SearchBar 组件

Files:

Modify: ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue

Step 1: 添加重置按钮到模板

在搜索按钮后添加重置按钮：

<!-- 在 el-col :span="11" 的按钮组之前，先调整搜索和重置按钮 -->
<el-col :span="8">
  <el-input
    v-model="searchKeyword"
    placeholder="请输入项目名称"
    prefix-icon="el-icon-search"
    clearable
    size="medium"
    @keyup.enter.native="handleSearch"
  />
</el-col>
<el-col :span="5">
  <el-select
    v-model="selectedStatus"
    placeholder="项目状态"
    clearable
    size="medium"
    style="width: 100%"
    @change="handleStatusChange"
  >
    <el-option
      v-for="item in statusOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</el-col>
<el-col :span="4">
  <el-button
    type="primary"
    icon="el-icon-search"
    size="medium"
    @click="handleSearch"
  >搜索</el-button>
  <el-button
    icon="el-icon-refresh"
    size="medium"
    @click="handleReset"
  >重置</el-button>
</el-col>
<el-col :span="7" style="text-align: right">
  <el-button
    type="primary"
    icon="el-icon-plus"
    size="medium"
    @click="handleAdd"
  >新建项目</el-button>
  <el-button
    icon="el-icon-folder-opened"
    size="medium"
    @click="handleImport"
  >导入历史项目</el-button>
</el-col>

Step 2: 添加重置方法

在 methods 中添加：

/** 重置 */
handleReset() {
  this.searchKeyword = ''
  this.selectedStatus = ''
  this.emitQuery()
}

Step 3: 移除 watch 中的自动重置逻辑

删除或注释掉 watch 中的 searchKeyword 监听：

// watch: {
//   searchKeyword(newVal) {
//     if (newVal === '') {
//       this.emitQuery()
//     }
//   }
// }

Step 4: 更新样式

调整按钮间距：

:deep(.el-button--medium) {
  padding: 10px 16px;
  margin-left: 8px;

  &:first-child {
    margin-left: 0;
  }
}

移除输入框内的搜索按钮样式（因为已移出）：

// 删除这段样式
// :deep(.el-input-group__append) {
//   background-color: #409EFF;
//   color: white;
//   border-color: #409EFF;
//   cursor: pointer;
//
//   &:hover {
//     background-color: #66b1ff;
//   }
// }

Step 5: 测试搜索和重置功能

启动前端开发服务器：
```
cd ruoyi-ui && npm run dev
```
访问项目管理页面：http://localhost:80
测试搜索功能：
- 输入项目名称，点击搜索按钮
- 验证列表正确过滤
- 选择状态，验证列表正确过滤
测试重置功能：
- 点击重置按钮
- 验证输入框和下拉框被清空
- 验证列表显示全部项目

Step 6: 提交更改

git add ruoyi-ui/src/views/ccdiProject/components/SearchBar.vue
git commit -m "feat: SearchBar 组件添加重置按钮并优化布局"

Task 2: 优化 ProjectTable 状态列

Files:

Modify: ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue

Step 1: 调整状态列宽度

将状态列宽度从 100px 改为 160px：

<!-- 项目状态 -->
<el-table-column
  prop="status"
  label="项目状态"
  width="160"
  align="center"
>
  <template slot-scope="scope">
    <el-tag :type="getStatusType(scope.row.status)">
      <dict-tag :options="dict.type.ccdi_project_status" :value="scope.row.status"/>
    </el-tag>
  </template>
</el-table-column>

Step 2: 测试状态列显示

访问项目管理页面
验证状态列宽度足够显示标签
验证不同状态的标签颜色正确：
- 进行中：蓝色
- 已完成：绿色
- 已归档：灰色

Step 3: 提交更改

git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
git commit -m "feat: 项目状态列宽度调整为 160px"

Task 3: 实现操作按钮条件渲染

Files:

Modify: ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue

Step 1: 修改操作列模板

替换操作列的模板：

<!-- 操作列 -->
<el-table-column
  label="操作"
  width="200"
  align="center"
  fixed="right"
>
  <template slot-scope="scope">
    <!-- 进行中状态 (status = '0') -->
    <el-button
      v-if="scope.row.status === '0'"
      size="mini"
      type="text"
      icon="el-icon-right"
      @click="handleEnter(scope.row)"
    >进入项目</el-button>

    <!-- 已完成状态 (status = '1') -->
    <template v-if="scope.row.status === '1'">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-view"
        @click="handleViewResult(scope.row)"
      >查看结果</el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-refresh"
        @click="handleReAnalyze(scope.row)"
      >重新分析</el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-folder"
        @click="handleArchive(scope.row)"
      >归档</el-button>
    </template>

    <!-- 已归档状态 (status = '2') -->
    <el-button
      v-if="scope.row.status === '2'"
      size="mini"
      type="text"
      icon="el-icon-view"
      @click="handleViewResult(scope.row)"
    >查看结果</el-button>
  </template>
</el-table-column>

Step 2: 添加新的事件发射方法

在 methods 中添加：

handleEnter(row) {
  this.$emit('enter', row)
},

handleViewResult(row) {
  this.$emit('view-result', row)
},

handleReAnalyze(row) {
  this.$emit('re-analyze', row)
},

handleArchive(row) {
  this.$emit('archive', row)
}

Step 3: 删除旧的 handleDetail, handleEdit, handleDelete 方法

移除不再需要的方法：

// 删除以下方法
// handleDetail(row) {
//   this.$emit('detail', row)
// },
// handleEdit(row) {
//   this.$emit('edit', row)
// },
// handleDelete(row) {
//   this.$emit('delete', row)
// }

Step 4: 测试条件渲染

确保数据库中有不同状态的项目数据
访问项目管理页面
验证按钮根据状态正确显示：
- 进行中项目：只显示"进入项目"
- 已完成项目：显示"查看结果"、"重新分析"、"归档"
- 已归档项目：只显示"查看结果"
点击各个按钮，验证点击事件正常触发（可在浏览器控制台查看）

Step 5: 提交更改

git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
git commit -m "feat: 操作按钮根据项目状态条件渲染"

Task 4: 优化表格样式

Files:

Modify: ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue

Step 1: 优化表格样式

更新 <style> 部分：

<style lang="scss" scoped>
.project-table-container {
  margin-top: 16px;

  // 表格整体样式
  :deep(.el-table) {
    border: 1px solid #eee;
    border-radius: 4px;

    // 表头样式
    th {
      background-color: #f5f5f5;
      color: #333;
      font-weight: 600;
      font-size: 14px;
      height: 48px;
      padding: 12px;
    }

    // 数据行样式
    td {
      color: #333;
      font-size: 14px;
      height: 50px;
      padding: 12px;
      border-bottom: 1px solid #f0f0f0;
    }

    // 移除列分隔线
    .el-table__body-wrapper {
      .cell {
        border-right: none;
      }
    }

    // 悬停效果
    .el-table__row:hover > td {
      background-color: #f5f5f5 !important;
      transition: background-color 0.3s;
    }

    // 表格内容无额外边框
    &::before {
      height: 0;
    }

    &::after {
      width: 0;
    }
  }
}

.project-info-cell {
  padding: 8px 0;
  line-height: 1.5;

  .project-name {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-desc {
    font-size: 12px;
    color: #909399;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.warning-count-wrapper {
  display: inline-block;
}

.text-danger {
  color: #f56c6c;
}

.text-warning {
  color: #e6a23c;
}

.text-info {
  color: #909399;
}

.text-bold {
  font-weight: bold;
}

// 操作按钮样式
:deep(.el-button--text) {
  color: #1890ff;
  padding: 0 8px;

  &:hover {
    color: #096dd9;
    text-decoration: underline;
  }

  &:first-child {
    padding-left: 0;
  }
}

// 分页样式优化
:deep(.el-pagination) {
  margin-top: 16px;
  text-align: right;

  .el-pagination__total,
  .el-pagination__sizes,
  .el-pagination__jump {
    color: #606266;
  }
}
</style>

Step 2: 测试表格视觉效果

访问项目管理页面
验证表格样式：
- 表头背景为浅灰色（#f5f5f5）
- 表头文字为深灰色粗体
- 数据行高度约 50px
- 鼠标悬停时行背景变为浅灰色
- 列之间无分隔线或极浅
- 行分隔线为浅灰色
验证操作按钮样式：
- 按钮文字为蓝色（#1890ff）
- 悬停时变为深蓝色（#096dd9）并显示下划线
- 按钮间距为 8px

Step 3: 提交更改

git add ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
git commit -m "style: 优化表格样式，匹配参考设计"

Task 5: 更新 index.vue 并全面测试

Files:

Modify: ruoyi-ui/src/views/ccdiProject/index.vue

Step 1: 验证事件处理方法

确认 index.vue 中已有以下方法（从代码审查看已经存在）：

/** 进入项目 */
handleEnter(row) {
  console.log('进入项目:', row)
  this.$modal.msgSuccess('进入项目: ' + row.projectName)
},

/** 查看结果 */
handleViewResult(row) {
  console.log('查看结果:', row)
  this.$modal.msgInfo('查看项目结果: ' + row.projectName)
},

/** 重新分析 */
handleReAnalyze(row) {
  console.log('重新分析:', row)
  this.$modal.msgSuccess('正在重新分析项目: ' + row.projectName)
},

/** 归档项目 */
handleArchive(row) {
  this.currentArchiveProject = row
  this.archiveDialogVisible = true
}

Step 2: 移除不需要的事件监听

从 project-table 组件中移除不再使用的事件：

<!-- 项目列表表格 -->
<project-table
  :loading="loading"
  :data-list="projectList"
  :total="total"
  :page-params="queryParams"
  @pagination="getList"
  @enter="handleEnter"
  @view-result="handleViewResult"
  @re-analyze="handleReAnalyze"
  @archive="handleArchive"
/>

移除：

@detail
@edit
@delete

Step 3: 全面功能测试

搜索功能测试：

- 输入项目名称 → 点击搜索 → 验证过滤结果
- 选择状态筛选 → 验证过滤结果
- 点击重置 → 验证所有条件清空，显示全部项目

操作按钮测试：

- 找到"进行中"项目 → 验证只显示"进入项目"按钮 → 点击测试
- 找到"已完成"项目 → 验证显示三个按钮 → 逐一点击测试
- 找到"已归档"项目 → 验证只显示"查看结果"按钮 → 点击测试

视觉测试：

- 检查表头样式（背景色、字体）
- 检查行高和间距
- 检查悬停效果
- 检查操作按钮颜色和悬停效果
- 检查状态列宽度和标签样式

响应式测试：

- 在不同分辨率下测试（1366x768, 1920x1080）
- 测试表格滚动是否正常

Step 4: 修复发现的问题

如果测试中发现任何问题，记录并修复：

# 修复后提交
git add <modified-files>
git commit -m "fix: 修复[具体问题描述]"

Step 5: 最终提交

git add ruoyi-ui/src/views/ccdiProject/index.vue
git commit -m "feat: 完成项目管理首页优化

- SearchBar 添加重置按钮
- 状态列宽度调整为 160px
- 操作按钮根据状态条件显示
- 表格样式优化以匹配参考设计
"

Task 6: 代码审查与文档更新

Step 1: 代码审查清单

检查以下内容：

所有文件路径正确
样式使用 scoped，不影响其他组件
颜色使用标准值（#1890ff 等）
按钮间距和边距符合设计规范
事件命名遵循 kebab-case（view-result, re-analyze）
删除了不再使用的代码和注释

Step 2: 更新 CLAUDE.md（如有必要）

如果修改了重要功能或添加了新的规范，更新项目文档：

# 如果有更新
git add CLAUDE.md
git commit -m "docs: 更新项目管理模块文档"

Step 3: 生成变更总结

git log --oneline --decorate --graph -10

记录所有提交，确保每个功能点都有对应的提交。

Step 4: 推送到远程（如需要）

git push origin dev

验收标准

完成所有任务后，验证以下内容：

功能验收

搜索栏有独立的重置按钮
重置按钮清空所有搜索条件并刷新列表
状态列宽度为 160px
进行中项目只显示"进入项目"按钮
已完成项目显示"查看结果"、"重新分析"、"归档"按钮
已归档项目只显示"查看结果"按钮
所有按钮点击事件正常触发

视觉验收

表头背景为浅灰色（#f5f5f5）
表头文字为深灰色粗体
数据行高度约 50px
悬停效果正常（背景 #f5f5f5）
状态标签颜色正确
操作按钮为蓝色（#1890ff）
悬停时按钮变为深蓝色并显示下划线

代码质量验收

代码使用 scoped style
无冗余代码和注释
遵循项目编码规范
每个功能点有独立提交

风险与注意事项

样式冲突：使用 scoped style 和深度选择器避免影响其他组件
现有功能：只修改样式和条件渲染，不改变数据逻辑
测试覆盖：手动测试所有操作按钮和搜索功能
浏览器兼容：在 Chrome 和 Edge 中测试

参考资源

设计文档：doc/plans/2026-02-27-项目管理首页优化-design.md
参考截图：doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png
Element UI 文档：https://element.eleme.cn/

14 KiB Raw Blame History Unescape Escape

项目管理首页优化实现计划

Task 1: 优化 SearchBar 组件

Task 2: 优化 ProjectTable 状态列

Task 3: 实现操作按钮条件渲染

Task 4: 优化表格样式

Task 5: 更新 index.vue 并全面测试

Task 6: 代码审查与文档更新

验收标准

功能验收

视觉验收

代码质量验收

风险与注意事项

参考资源

14 KiB

Raw Blame History