docs: 添加项目管理首页优化实现计划
This commit is contained in:
690
doc/plans/2026-02-27-项目管理首页优化.md
Normal file
690
doc/plans/2026-02-27-项目管理首页优化.md
Normal file
@@ -0,0 +1,690 @@
|
|||||||
|
# 项目管理首页优化实现计划
|
||||||
|
|
||||||
|
> **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/
|
||||||
81
doc/test-scripts/test_create_project.bat
Normal file
81
doc/test-scripts/test_create_project.bat
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
@echo off
|
||||||
|
chcp 65001 >nul
|
||||||
|
setlocal enabledelayedexpansion
|
||||||
|
|
||||||
|
echo ========================================
|
||||||
|
echo 纪检初核系统 - 创建项目接口测试
|
||||||
|
echo ========================================
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 配置
|
||||||
|
set BASE_URL=http://localhost:8080
|
||||||
|
set USERNAME=admin
|
||||||
|
set PASSWORD=admin123
|
||||||
|
|
||||||
|
:: 第一步：获取Token
|
||||||
|
echo [1/2] 获取登录Token...
|
||||||
|
curl -s -X POST "%BASE_URL%/login/test?username=%USERNAME%&password=%PASSWORD%" -H "Content-Type: application/json" > token_response.json
|
||||||
|
|
||||||
|
:: 使用jq或findstr提取token（Windows兼容方式）
|
||||||
|
for /f "tokens=2 delims=:" %%a in ('type token_response.json ^| findstr "token"') do (
|
||||||
|
set TOKEN_RAW=%%a
|
||||||
|
)
|
||||||
|
:: 去除引号和逗号
|
||||||
|
set TOKEN=%TOKEN_RAW:"=%
|
||||||
|
set TOKEN=%TOKEN:,=%
|
||||||
|
set TOKEN=%TOKEN: =%
|
||||||
|
|
||||||
|
echo Token获取成功: %TOKEN%
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 第二步：创建项目
|
||||||
|
echo [2/2] 测试创建项目接口...
|
||||||
|
|
||||||
|
:: 测试用例1：使用default配置方式创建项目
|
||||||
|
echo.
|
||||||
|
echo === 测试用例1: 创建全局默认配置项目 ===
|
||||||
|
curl -s -X POST "%BASE_URL%/ccdi/project" ^
|
||||||
|
-H "Content-Type: application/json" ^
|
||||||
|
-H "Authorization: Bearer %TOKEN%" ^
|
||||||
|
-d "{\"projectName\":\"测试项目001\",\"description\":\"这是一个测试项目\",\"configType\":\"default\"}"
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 测试用例2：使用custom配置方式创建项目
|
||||||
|
echo === 测试用例2: 创建自定义配置项目 ===
|
||||||
|
curl -s -X POST "%BASE_URL%/ccdi/project" ^
|
||||||
|
-H "Content-Type: application/json" ^
|
||||||
|
-H "Authorization: Bearer %TOKEN%" ^
|
||||||
|
-d "{\"projectName\":\"测试项目002\",\"description\":\"自定义配置的测试项目\",\"configType\":\"custom\"}"
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 测试用例3：缺少必填字段（预期失败）
|
||||||
|
echo === 测试用例3: 缺少必填字段（预期失败） ===
|
||||||
|
curl -s -X POST "%BASE_URL%/ccdi/project" ^
|
||||||
|
-H "Content-Type: application/json" ^
|
||||||
|
-H "Authorization: Bearer %TOKEN%" ^
|
||||||
|
-d "{\"description\":\"缺少项目名称\"}"
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 测试用例4：configType值无效（预期失败）
|
||||||
|
echo === 测试用例4: configType值无效（预期失败） ===
|
||||||
|
curl -s -X POST "%BASE_URL%/ccdi/project" ^
|
||||||
|
-H "Content-Type: application/json" ^
|
||||||
|
-H "Authorization: Bearer %TOKEN%" ^
|
||||||
|
-d "{\"projectName\":\"测试项目003\",\"configType\":\"invalid\"}"
|
||||||
|
|
||||||
|
echo.
|
||||||
|
echo.
|
||||||
|
|
||||||
|
:: 清理临时文件
|
||||||
|
del token_response.json 2>nul
|
||||||
|
|
||||||
|
echo ========================================
|
||||||
|
echo 测试完成
|
||||||
|
echo ========================================
|
||||||
|
pause
|
||||||
BIN
doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png
Normal file
BIN
doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Reference in New Issue
Block a user