691 lines
14 KiB
Markdown
691 lines
14 KiB
Markdown
# 项目管理首页优化实现计划
|
||
|
||
> **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/
|