diff --git a/docs/plans/2026-02-27-project-management-page-redesign.md b/docs/plans/2026-02-27-project-management-page-redesign.md new file mode 100644 index 0000000..f8f887f --- /dev/null +++ b/docs/plans/2026-02-27-project-management-page-redesign.md @@ -0,0 +1,545 @@ +# 项目管理页面重构设计方案 + +**创建日期：** 2026-02-27 +**状态：** 已批准 +**实施方式：** 完全重写前端组件 + +--- + +## 1. 概述 + +### 1.1 背景 + +当前项目管理页面与原型图存在重大差异，需要进行重构以确保严格符合设计规范。 + +### 1.2 目标 + +- 100% 匹配原型图设计 +- 简化页面标题，优化用户体验 +- 统一标签页筛选和搜索交互 +- 规范化快捷方式组件 + +### 1.3 实施方法 + +**方案A：完全重写前端组件（已选定）** + +**优点：** +- 代码清晰，完全符合原型图设计 +- 易于维护，无历史遗留问题 +- 可以优化组件性能和可读性 + +**工作量：** 约 3-4 小时 + +--- + +## 2. 整体架构与布局 + +### 2.1 页面结构 + +``` +┌─────────────────────────────────────────────────────────┐ +│ 面包屑导航：初核项目管理（系统全局组件，保留） │ +├─────────────────────────────────────────────────────────┤ +│ 初核项目管理 [新建项目按钮] │ +├─────────────────────────────────────────────────────────┤ +│ [🔍 请输入关键词搜索项目] [全部项目(4)] [进行中(2)] [已完成(1)] [已归档(1)] │ +├─────────────────────────────────────────────────────────┤ +│ 项目列表（表格）： │ +│ 项目名称 | 更新/创建时间 | 创建人 | 状态 | 目标人数 | │ +│ 预警人数 | 操作 │ +│ ───────────────────────────────────────────────────── │ +│ [项目数据行...] │ +│ ───────────────────────────────────────────────────── │ +│ 共4个项目 [分页控件: 10条/页, 页码] │ +├─────────────────────────────────────────────────────────┤ +│ 快捷方式（卡片组）： │ +│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ +│ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ +│ └─────┘ └─────┘ └─────┘ └─────┘ │ +└─────────────────────────────────────────────────────────┘ +``` + +### 2.2 关键变更 + +**保留组件：** +- ✅ 面包屑导航（系统全局组件） +- ✅ 分页功能（保留功能，调整样式） + +**移除组件：** +- ❌ 页面副标题"管理纪检初核排查项目，跟踪预警信息" + +**新增/修改组件：** +- ✅ 标签页筛选（全部项目/进行中/已完成/已归档） +- ✅ 简化搜索框（移除状态筛选下拉和重置按钮） +- ✅ 快捷方式组件（标题改为"快捷方式"，圆形图标） + +### 2.3 布局参数 + +- 页面背景色：`#F8F9FA`（浅灰色） +- 页面内边距：`24px` +- 标题字号：`20px`，粗体 +- 标题与搜索区域间距：`24px` +- 内容区域背景：`#FFFFFF`（白色卡片） +- 卡片圆角：`8px` +- 卡片阴影：`0 1px 3px rgba(0,0,0,0.1)` +- 列表与快捷方式间距：`32px` + +--- + +## 3. 组件详细设计 + +### 3.1 搜索框组件 + +**设计规格：** +- 宽度：`240px` +- 高度：`40px` +- 背景色：`#FFFFFF` +- 边框：`1px solid #E5E7EB` +- 圆角：`8px` +- 内边距：`0 12px` +- 占位符：`请输入关键词搜索项目` +- 占位符颜色：`#9CA3AF` +- 图标颜色：`#6B7280` + +**布局：** +``` +┌────────────────────────────────────┐ +│ 🔍 请输入关键词搜索项目 │ +└────────────────────────────────────┘ +``` + +### 3.2 标签页筛选组件 + +**设计规格：** + +**未选中状态：** +- 文字颜色：`#6B7280` +- 背景：透明 +- 无边框 +- 字号：`14px` + +**选中状态：** +- 文字颜色：`#3B82F6`（蓝色） +- 背景：`#EFF6FF`（浅蓝色） +- 圆角：`6px` +- 内边距：`6px 12px` + +**标签页列表：** +1. 全部项目(count) +2. 进行中(count) +3. 已完成(count) +4. 已归档(count) + +**交互逻辑：** +- 点击标签切换筛选条件 +- 动态更新项目列表 +- 动态更新数量显示（括号内数字） + +**布局：** +- 搜索框与第一个标签间距：`24px` +- 标签间距：`24px` +- 行高：`40px` + +### 3.3 项目列表表格 + +#### 列定义 + +| 列名 | 宽度 | 对齐方式 | 说明 | +|------|------|----------|------| +| 项目名称 | 自适应 | 左对齐 | 主要信息，字体16px，粗体 | +| 更新/创建时间 | 180px | 左对齐 | 格式：YYYY-MM-DD HH:mm | +| 创建人 | 100px | 左对齐 | 用户名 | +| 状态 | 100px | 左对齐 | 标签样式 | +| 目标人数 | 100px | 右对齐 | 数字 | +| 预警人数 | 100px | 右对齐 | 数字，红色高亮 | +| 操作 | 120px | 右对齐 | "进入项目"按钮 | + +#### 表头样式 + +- 背景色：`#F9FAFB` +- 文字颜色：`#6B7280` +- 字号：`14px` +- 字重：`500` +- 高度：`48px` +- 底部边框：`1px solid #E5E7EB` + +#### 数据行样式 + +- 高度：`64px` +- 底部边框：`1px solid #E5E7EB` +- 悬停背景：`#F9FAFB` + +#### 状态标签样式 + +| 状态 | 背景色 | 文字颜色 | 图标 | +|------|--------|----------|------| +| 进行中 | `#DBEAFE` | `#3B82F6` | 无 | +| 已完成 | `#D1FAE5` | `#10B981` | ✓ | +| 已归档 | `#F3F4F6` | `#6B7280` | 无 | + +### 3.4 快捷方式组件 + +**整体布局：** +``` +快捷方式 +┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ +│ ⭕ 图标 │ │ ⭕ 图标 │ │ ⭕ 图标 │ │ ⭕ 图标 │ +│ │ │ │ │ │ │ │ +│ 从历史项目 │ │ 创建季度 │ │ 创建新员工 │ │ 创建高风险 │ +│ 中导入配置 │ │ 初核 │ │ 排查 │ │ 专项 │ +└─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ +``` + +#### 卡片规格 + +- 宽度：均分（flex: 1，间距24px） +- 背景色：`#FFFFFF` +- 边框：无 +- 圆角：`8px` +- 阴影：`0 1px 3px rgba(0,0,0,0.1)` +- 内边距：`24px` +- 悬停效果：阴影加深 `0 4px 6px rgba(0,0,0,0.1)` + +#### 图标样式（圆形） + +- 直径：`48px` +- 图标颜色：`#FFFFFF`（白色） +- 图标大小：`24px` +- 居中对齐 +- 背景色： + - 卡片1：`#6B7280`（灰色） + - 卡片2：`#3B82F6`（蓝色） + - 卡片3：`#10B981`（绿色） + - 卡片4：`#F59E0B`（橙色） + +#### 文字样式 + +- 描述文字：`14px`，`#374151`，居中对齐 +- 行高：`20px` +- 上边距：`16px` + +#### 四个快捷方式内容 + +1. **从历史项目中导入配置** + - 图标：📁（文件夹/导入） + - 颜色：灰色（#6B7280） + +2. **创建季度初核** + - 图标：📅（日历） + - 颜色：蓝色（#3B82F6） + +3. **创建新员工排查** + - 图标：👥（人员） + - 颜色：绿色（#10B981） + +4. **创建高风险专项** + - 图标：⚠️（警告） + - 颜色：橙色（#F59E0B） + +### 3.5 分页组件 + +**布局：** +``` +共4个项目 [10条/页 ▼] [<] 1 [>] 前往 [1] 页 +``` + +#### 组件规格 + +- 高度：`32px` +- 文字大小：`14px` +- 颜色：`#6B7280` + +#### 下拉选择框 + +- 宽度：`100px` +- 高度：`32px` +- 边框：`1px solid #E5E7EB` +- 圆角：`6px` +- 选项：10条/页、20条/页、50条/页 + +#### 翻页按钮 + +- 宽度：`32px` +- 高度：`32px` +- 边框：`1px solid #E5E7EB` +- 圆角：`6px` +- 禁用状态：opacity 0.5 + +#### 页码输入框 + +- 宽度：`48px` +- 高度：`32px` +- 边框：`1px solid #E5E7EB` +- 圆角：`6px` + +--- + +## 4. 数据流与交互逻辑 + +### 4.1 页面数据结构 + +#### 项目数据模型 + +```javascript +{ + id: String, // 项目ID + name: String, // 项目名称 + description: String, // 项目描述 + status: String, // 状态：ongoing/completed/archived + targetCount: Number, // 目标人数 + warningCount: Number, // 预警人数 + creator: String, // 创建人 + createTime: Date, // 创建时间 + updateTime: Date // 更新时间 +} +``` + +#### 页面状态 + +```javascript +{ + activeTab: 'all', // 当前选中标签：all/ongoing/completed/archived + searchKeyword: '', // 搜索关键词 + projectList: [], // 项目列表数据 + totalCount: 0, // 总数量 + pageSize: 10, // 每页条数 + currentPage: 1 // 当前页码 +} +``` + +### 4.2 筛选逻辑 + +#### 标签页筛选规则 + +| 标签 | 筛选条件 | 说明 | +|------|----------|------| +| 全部项目 | 无筛选 | 显示所有项目 | +| 进行中 | status === 'ongoing' | 仅显示进行中项目 | +| 已完成 | status === 'completed' | 仅显示已完成项目 | +| 已归档 | status === 'archived' | 仅显示已归档项目 | + +#### 搜索筛选规则 + +```javascript +// 搜索匹配字段 +searchFields = ['name', 'description', 'creator'] + +// 筛选逻辑 +filteredProjects = projectList.filter(project => { + // 1. 标签页筛选 + const matchTab = activeTab === 'all' || project.status === activeTab + + // 2. 搜索筛选 + const matchSearch = !searchKeyword || searchFields.some(field => + project[field].toLowerCase().includes(searchKeyword.toLowerCase()) + ) + + return matchTab && matchSearch +}) +``` + +#### 数量统计更新 + +```javascript +// 标签页数量实时更新 +tabCounts = { + all: projectList.length, + ongoing: projectList.filter(p => p.status === 'ongoing').length, + completed: projectList.filter(p => p.status === 'completed').length, + archived: projectList.filter(p => p.status === 'archived').length +} +``` + +### 4.3 API 接口调用 + +#### 获取项目列表 + +```javascript +// GET /api/ccdi/projects +params: { + status: 'all' | 'ongoing' | 'completed' | 'archived', + keyword: String, + pageNum: Number, + pageSize: Number +} + +// 响应 +{ + code: 200, + data: { + list: Project[], + total: Number + } +} +``` + +#### 新建项目 + +```javascript +// 跳转到新建项目页面 +router.push('/ccdi/project/create') +``` + +#### 进入项目 + +```javascript +// 跳转到项目详情页面 +router.push(`/ccdi/project/${projectId}`) +``` + +### 4.4 交互流程 + +#### 搜索流程 + +``` +用户输入关键词 → 输入防抖（300ms） → 调用API → 更新列表 +``` + +#### 标签切换流程 + +``` +用户点击标签 → 更新activeTab → 重置currentPage=1 → 调用API → 更新列表 +``` + +#### 分页流程 + +``` +用户点击翻页/切换每页条数 → 更新currentPage或pageSize → 调用API → 更新列表 +``` + +#### 快捷方式点击 + +``` +点击卡片 → 跳转到对应功能页面（带参数） +``` + +### 4.5 加载状态 + +#### 初始加载 + +- 显示加载动画（骨架屏） +- 加载完成后显示数据 + +#### 空状态 + +- 无项目时显示："暂无项目数据" +- 无搜索结果时显示："未找到匹配的项目" + +#### 加载失败 + +- 显示错误提示："加载失败，请重试" +- 提供"重新加载"按钮 + +--- + +## 5. 实施清单 + +### 5.1 前端组件重构 + +- [ ] 创建新的 `ccdiProject/index.vue` 组件 +- [ ] 实现页面标题区域（简化版） +- [ ] 实现搜索框和标签页筛选组件 +- [ ] 实现项目列表表格（7列，严格按顺序） +- [ ] 实现状态标签（三种颜色） +- [ ] 实现分页组件（简洁样式） +- [ ] 实现快捷方式组件（圆形图标） + +### 5.2 样式系统 + +- [ ] 设置页面背景色（#F8F9FA） +- [ ] 定义卡片样式（圆角、阴影） +- [ ] 定义状态标签颜色 +- [ ] 定义快捷方式图标颜色 + +### 5.3 数据交互 + +- [ ] 实现标签页筛选逻辑 +- [ ] 实现搜索筛选逻辑（防抖） +- [ ] 实现分页逻辑 +- [ ] 实现数量统计更新 +- [ ] 处理加载状态和错误状态 + +### 5.4 测试验证 + +- [ ] 标签页切换功能测试 +- [ ] 搜索功能测试 +- [ ] 分页功能测试 +- [ ] 快捷方式跳转测试 +- [ ] 样式对比验证（与原型图） +- [ ] 响应式布局测试 + +--- + +## 6. 验收标准 + +### 6.1 视觉一致性 + +- ✅ 页面背景色为 #F8F9FA +- ✅ 页面标题简化（无副标题） +- ✅ 搜索框和标签页在同一行 +- ✅ 列表列顺序完全符合原型图 +- ✅ 快捷方式标题为"快捷方式"，圆形图标 + +### 6.2 功能完整性 + +- ✅ 标签页筛选功能正常（包含已归档选项） +- ✅ 搜索功能正常（防抖300ms） +- ✅ 分页功能正常 +- ✅ 快捷方式卡片可点击 +- ✅ 加载状态和错误状态正确显示 + +### 6.3 交互流畅性 + +- ✅ 标签切换流畅，数量实时更新 +- ✅ 搜索响应及时 +- ✅ 分页切换无延迟 +- ✅ 悬停效果正常 + +--- + +## 7. 风险与注意事项 + +### 7.1 潜在风险 + +1. **API 兼容性** + - 风险：现有 API 可能不支持"已归档"状态 + - 缓解措施：与后端确认 API 支持，必要时调整 + +2. **数据迁移** + - 风险：现有项目数据可能缺少状态字段 + - 缓解措施：添加数据迁移脚本，为历史数据设置默认状态 + +3. **样式冲突** + - 风险：全局样式可能影响组件显示 + - 缓解措施：使用 scoped 样式，避免全局污染 + +### 7.2 注意事项 + +1. **保留面包屑导航** + - 面包屑导航是系统全局组件，不在修改范围内 + +2. **保留分页功能** + - 虽然原型图无分页，但考虑到数据量，保留分页功能 + +3. **保留侧边栏** + - 侧边栏是系统全局组件，不在修改范围内 + +--- + +## 8. 附录 + +### 8.1 相关文件 + +- 原型图：`doc/创建项目功能/ScreenShot_2026-02-27_111611_994.png` +- 组件文件：`ruoyi-ui/src/views/ccdiProject/index.vue` +- API 文件：`ruoyi-ui/src/api/ccdi/project.js` + +### 8.2 参考资料 + +- 若依框架文档 +- Element UI 组件库文档 +- 原型图设计稿 + +--- + +**文档状态：** ✅ 已批准，准备实施