diff --git a/doc/plans/2026-02-27-项目管理首页优化.md b/doc/plans/2026-02-27-项目管理首页优化.md new file mode 100644 index 0000000..f0f3e1f --- /dev/null +++ b/doc/plans/2026-02-27-项目管理首页优化.md @@ -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 + + + + + + + + + + + 搜索 + 重置 + + + 新建项目 + 导入历史项目 + +``` + +**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 + + + + +``` + +**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 + + + + +``` + +**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: 优化表格样式** + +更新 ` +``` + +**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 + + +``` + +移除: +- `@detail` +- `@edit` +- `@delete` + +**Step 3: 全面功能测试** + +1. **搜索功能测试**: + ``` + - 输入项目名称 → 点击搜索 → 验证过滤结果 + - 选择状态筛选 → 验证过滤结果 + - 点击重置 → 验证所有条件清空,显示全部项目 + ``` + +2. **操作按钮测试**: + ``` + - 找到"进行中"项目 → 验证只显示"进入项目"按钮 → 点击测试 + - 找到"已完成"项目 → 验证显示三个按钮 → 逐一点击测试 + - 找到"已归档"项目 → 验证只显示"查看结果"按钮 → 点击测试 + ``` + +3. **视觉测试**: + ``` + - 检查表头样式(背景色、字体) + - 检查行高和间距 + - 检查悬停效果 + - 检查操作按钮颜色和悬停效果 + - 检查状态列宽度和标签样式 + ``` + +4. **响应式测试**: + ``` + - 在不同分辨率下测试(1366x768, 1920x1080) + - 测试表格滚动是否正常 + ``` + +**Step 4: 修复发现的问题** + +如果测试中发现任何问题,记录并修复: + +```bash +# 修复后提交 +git add +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/ diff --git a/doc/test-scripts/test_create_project.bat b/doc/test-scripts/test_create_project.bat new file mode 100644 index 0000000..9f835be --- /dev/null +++ b/doc/test-scripts/test_create_project.bat @@ -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 diff --git a/doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png b/doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png new file mode 100644 index 0000000..9ffd5f4 Binary files /dev/null and b/doc/创建项目功能/ScreenShot_2026-02-27_091429_733.png differ