ccdi/doc/plans/2026-02-27-项目管理首页优化.md

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

> **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: 添加重置按钮到模板**

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

```vue
<!-- 在 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` 中添加：

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

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

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

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

**Step 4: 更新样式**

调整按钮间距：

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

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

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

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

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

1. 启动前端开发服务器：
   ```bash
   cd ruoyi-ui && npm run dev
   ```

2. 访问项目管理页面：http://localhost:80

3. 测试搜索功能：
   - 输入项目名称，点击搜索按钮
   - 验证列表正确过滤
   - 选择状态，验证列表正确过滤

4. 测试重置功能：
   - 点击重置按钮
   - 验证输入框和下拉框被清空
   - 验证列表显示全部项目

**Step 6: 提交更改**

```bash
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：

```vue
<!-- 项目状态 -->
<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: 测试状态列显示**

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

**Step 3: 提交更改**

```bash
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: 修改操作列模板**

替换操作列的模板：

```vue
<!-- 操作列 -->
<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` 中添加：

```javascript
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 方法**

移除不再需要的方法：

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

**Step 4: 测试条件渲染**

1. 确保数据库中有不同状态的项目数据

2. 访问项目管理页面

3. 验证按钮根据状态正确显示：
   - 进行中项目：只显示"进入项目"
   - 已完成项目：显示"查看结果"、"重新分析"、"归档"
   - 已归档项目：只显示"查看结果"

4. 点击各个按钮，验证点击事件正常触发（可在浏览器控制台查看）

**Step 5: 提交更改**

```bash
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>` 部分：

```scss
<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: 测试表格视觉效果**

1. 访问项目管理页面

2. 验证表格样式：
   - 表头背景为浅灰色（#f5f5f5）
   - 表头文字为深灰色粗体
   - 数据行高度约 50px
   - 鼠标悬停时行背景变为浅灰色
   - 列之间无分隔线或极浅
   - 行分隔线为浅灰色

3. 验证操作按钮样式：
   - 按钮文字为蓝色（#1890ff）
   - 悬停时变为深蓝色（#096dd9）并显示下划线
   - 按钮间距为 8px

**Step 3: 提交更改**

```bash
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` 中已有以下方法（从代码审查看已经存在）：

```javascript
/** 进入项目 */
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` 组件中移除不再使用的事件：

```vue
<!-- 项目列表表格 -->
<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: 全面功能测试**

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

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

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

4. **响应式测试**：
   ```
   - 在不同分辨率下测试（1366x768, 1920x1080）
   - 测试表格滚动是否正常
   ```

**Step 4: 修复发现的问题**

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

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

**Step 5: 最终提交**

```bash
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（如有必要）**

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

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

**Step 3: 生成变更总结**

```bash
git log --oneline --decorate --graph -10
```

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

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

```bash
git push origin dev
```

---

## 验收标准

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

### 功能验收

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

### 视觉验收

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

### 代码质量验收

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

---

## 风险与注意事项

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

---

## 参考资源

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