14 KiB
14 KiB
项目管理页面重构设计方案
创建日期： 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
标签页列表：
- 全部项目(count)
- 进行中(count)
- 已完成(count)
- 已归档(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（橙色）
- 卡片1：
文字样式
- 描述文字：
14px，#374151，居中对齐 - 行高：
20px - 上边距：
16px
四个快捷方式内容
-
从历史项目中导入配置
- 图标：📁（文件夹/导入）
- 颜色：灰色（#6B7280）
-
创建季度初核
- 图标：📅（日历）
- 颜色：蓝色（#3B82F6）
-
创建新员工排查
- 图标：👥（人员）
- 颜色：绿色（#10B981）
-
创建高风险专项
- 图标：⚠️（警告）
- 颜色：橙色（#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 页面数据结构
项目数据模型
{
id: String, // 项目ID
name: String, // 项目名称
description: String, // 项目描述
status: String, // 状态：ongoing/completed/archived
targetCount: Number, // 目标人数
warningCount: Number, // 预警人数
creator: String, // 创建人
createTime: Date, // 创建时间
updateTime: Date // 更新时间
}
页面状态
{
activeTab: 'all', // 当前选中标签：all/ongoing/completed/archived
searchKeyword: '', // 搜索关键词
projectList: [], // 项目列表数据
totalCount: 0, // 总数量
pageSize: 10, // 每页条数
currentPage: 1 // 当前页码
}
4.2 筛选逻辑
标签页筛选规则
| 标签 | 筛选条件 | 说明 |
|---|---|---|
| 全部项目 | 无筛选 | 显示所有项目 |
| 进行中 | status === 'ongoing' | 仅显示进行中项目 |
| 已完成 | status === 'completed' | 仅显示已完成项目 |
| 已归档 | status === 'archived' | 仅显示已归档项目 |
搜索筛选规则
// 搜索匹配字段
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
})
数量统计更新
// 标签页数量实时更新
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 接口调用
获取项目列表
// GET /api/ccdi/projects
params: {
status: 'all' | 'ongoing' | 'completed' | 'archived',
keyword: String,
pageNum: Number,
pageSize: Number
}
// 响应
{
code: 200,
data: {
list: Project[],
total: Number
}
}
新建项目
// 跳转到新建项目页面
router.push('/ccdi/project/create')
进入项目
// 跳转到项目详情页面
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 潜在风险
-
API 兼容性
- 风险：现有 API 可能不支持"已归档"状态
- 缓解措施：与后端确认 API 支持，必要时调整
-
数据迁移
- 风险：现有项目数据可能缺少状态字段
- 缓解措施：添加数据迁移脚本，为历史数据设置默认状态
-
样式冲突
- 风险：全局样式可能影响组件显示
- 缓解措施：使用 scoped 样式，避免全局污染
7.2 注意事项
-
保留面包屑导航
- 面包屑导航是系统全局组件，不在修改范围内
-
保留分页功能
- 虽然原型图无分页，但考虑到数据量，保留分页功能
-
保留侧边栏
- 侧边栏是系统全局组件，不在修改范围内
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 组件库文档
- 原型图设计稿
文档状态： ✅ 已批准，准备实施