# 项目管理页面重构设计方案 **创建日期：** 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 组件库文档 - 原型图设计稿 --- **文档状态：** ✅ 已批准，准备实施