# 项目管理页面重构设计方案

**创建日期：** 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 组件库文档
- 原型图设计稿

---

**文档状态：** ✅ 已批准，准备实施
