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