# 项目详情页面设计文档

**创建日期**: 2025-01-30
**设计者**: Claude Code
**状态**: 待实施

## 1. 概述

### 1.1 需求描述

开发一个项目详情页面，在项目管理列表中，点击项目那一行或者查看详情跳转到项目详情页面。顶部有一个导航栏，里面有按钮切换项目详情的不同页面。

### 1.2 功能模块

- **上传数据**（默认）：批量上传流水、征信、员工家庭关系数据，选择名单库
- **参数配置**：配置项目分析参数和排查规则
- **结果总览**：查看项目分析结果的总体概况
- **专项排查**：针对特定风险类型进行深度排查
- **流水明细查询**：查询和筛选具体的流水记录明细

---

## 2. 整体架构设计

### 2.1 路由结构

采用独立页面路由方式：

```
路由: /project-detail/:projectId
组件: @/views/ccdiProject/detail/index.vue
```

### 2.2 页面布局

```
┌─────────────────────────────────────────────┐
│  顶部导航 (PageHeader)                       │
│  [返回] 项目名称 [状态]                      │
│  [上传数据] [参数配置] [结果总览] ...        │
├─────────────────────────────────────────────┤
│                                             │
│  内容区域 (el-tabs)                          │
│  根据选中标签显示对应子页面                   │
│                                             │
└─────────────────────────────────────────────┘
```

### 2.3 组件层次结构

```
detail/
├── index.vue                  # 主页面容器
├── components/
│   ├── PageHeader.vue         # 顶部导航
│   ├── UploadData.vue         # 上传数据
│   ├── ParameterConfig.vue    # 参数配置
│   ├── ResultOverview.vue     # 结果总览
│   ├── SpecialCheck.vue       # 专项排查
│   └── TransactionDetail.vue  # 流水明细查询
└── api.js                     # API 接口定义
```

---

## 3. 上传数据页面详细设计

### 3.1 页面布局

```
┌─────────────────────────────────────────────┐
│  批量上传数据              [生成报告][拉取本行]│
│  支持在一个项目中上传多个主体/账户数据        │
├─────────────────────────────────────────────┤
│  ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐      │
│  │流水   │ │征信   │ │员工   │ │名单   │      │
│  │导入   │ │导入   │ │家庭   │ │库选择 │      │
│  └──────┘ └──────┘ └──────┘ └──────┘      │
├─────────────────────────────────────────────┤
│  数据质量检查区                              │
│  - 检查结果列表                              │
│  - 指标卡片（完整性、一致性、连续性）         │
└─────────────────────────────────────────────┘
```

### 3.2 功能模块

#### 3.2.1 流水导入

- 支持格式：xlsx, xls, pdf
- 拖拽上传 + 点击上传
- 上传进度显示

#### 3.2.2 征信导入

- 支持格式：html
- 解析征信报告

#### 3.2.3 员工家庭关系导入

- 支持格式：xlsx, xls
- Excel 模板上传

#### 3.2.4 名单库选择

- 高风险人员名单（68人）
- 历史可疑人员名单（45人）
- 监管关注名单（32人）

#### 3.2.5 数据质量检查

- 数据完整性：98.5%
- 格式一致性：95.2%
- 余额连续性：92.8%
- 检查结果详情

---

## 4. 其他子页面框架设计

### 4.1 参数配置页面

```
┌─────────────────────────────────────────────┐
│  参数配置                    [保存] [重置]   │
├─────────────────────────────────────────────┤
│  ┌──────────┐  ┌──────────┐                │
│  │ 预警阈值  │  │ 排查规则  │                │
│  └──────────┘  └──────────┘                │
│  ┌────────────────────────────────┐        │
│  │ 高级配置（可折叠）               │        │
│  └────────────────────────────────┘        │
└─────────────────────────────────────────────┘
```

### 4.2 结果总览页面

```
┌─────────────────────────────────────────────┐
│  结果总览                [导出报告] [刷新]  │
├─────────────────────────────────────────────┤
│  ┌────────┐ ┌────────┐ ┌────────┐          │
│  │ 总人数  │ │ 预警数  │ │ 可疑数  │          │
│  └────────┘ └────────┘ └────────┘          │
│  ┌──────────────┐ ┌──────────────┐        │
│  │ 预警分布图   │ │ 趋势图       │        │
│  └──────────────┘ └──────────────┘        │
│  预警排名表格（Top 10）                      │
└─────────────────────────────────────────────┘
```

### 4.3 专项排查页面

```
┌─────────────────────────────────────────────┐
│  专项排查              [新增排查] [批量导出]│
├─────────────────────────────────────────────┤
│  筛选条件：[风险类型] [严重程度] [状态]      │
│  排查任务列表（表格）                         │
└─────────────────────────────────────────────┘
```

### 4.4 流水明细查询页面

```
┌─────────────────────────────────────────────┐
│  流水明细查询            [导出] [高级查询]  │
├─────────────────────────────────────────────┤
│  查询条件：[账户] [日期范围] [金额范围]      │
│  流水明细表格（分页）                         │
└─────────────────────────────────────────────┘
```

---

## 5. 接口设计

### 5.1 接口列表

| 接口名称     | 方法   | 路径                                 | 说明       |
|----------|------|------------------------------------|----------|
| 获取项目详情   | GET  | `/ccdi/project/detail/{projectId}` | 获取项目基本信息 |
| 上传流水文件   | POST | `/ccdi/project/transaction/upload` | 上传流水文件   |
| 上传征信文件   | POST | `/ccdi/project/credit/upload`      | 上传征信报告   |
| 上传员工关系   | POST | `/ccdi/project/employee/upload`    | 上传员工家庭关系 |
| 获取名单库列表  | GET  | `/ccdi/project/namelist/list`      | 获取可选名单库  |
| 保存名单库选择  | POST | `/ccdi/project/namelist/save`      | 保存选择的名单库 |
| 获取数据质量检查 | GET  | `/ccdi/project/quality/check`      | 获取质量检查指标 |
| 生成报告     | POST | `/ccdi/project/report/generate`    | 生成分析报告   |
| 拉取本行信息   | GET  | `/ccdi/project/own/info`           | 获取本行员工信息 |
| 保存参数配置   | POST | `/ccdi/project/config/save`        | 保存项目参数   |
| 获取结果总览   | GET  | `/ccdi/project/overview`           | 获取结果统计数据 |
| 获取排查列表   | GET  | `/ccdi/project/check/list`         | 获取专项排查列表 |
| 查询流水明细   | GET  | `/ccdi/project/transaction/list`   | 分页查询流水   |

### 5.2 Mock 数据示例

**项目详情**

```javascript
{
  code: 200,
  data: {
    projectId: 1,
    projectName: "2025年第一季度初核排查",
    projectDesc: "针对全行员工进行第一季度常规排查",
    projectStatus: "0",
    createTime: "2025-01-15",
    targetCount: 1250,
    warningCount: 23
  }
}
```

**数据质量检查结果**

```javascript
{
  code: 200,
  data: {
    completeness: 98.5,
    consistency: 95.2,
    continuity: 92.8,
    issues: [
      { type: "格式不一致", count: 23 },
      { type: "余额连续性异常", count: 5 },
      { type: "缺失关键字段", count: 12 }
    ]
  }
}
```

---

## 6. 状态管理

### 6.1 Vuex Store

```javascript
// store/modules/projectDetail.js
const state = {
  currentProject: null,
  activeTab: 'upload',
  uploadStatus: {
    transaction: false,
    credit: false,
    employee: false,
    nameList: []
  },
  qualityCheck: null,
  pageCache: {}
}
```

### 6.2 页面缓存

使用 `<keep-alive>` 缓存标签页内容，避免切换时重复加载。

---

## 7. 路由配置

```javascript
// router/index.js
{
  path: '/project-detail',
  component: Layout,
  hidden: true,
  children: [
    {
      path: ':projectId(\\d+)',
      component: () => import('@/views/ccdiProject/detail/index'),
      name: 'ProjectDetail',
      meta: {
        title: '项目详情',
        activeMenu: '/ccdiProject'
      }
    }
  ]
}
```

---

## 8. 文件目录结构

```
ruoyi-ui/src/
├── views/ccdiProject/
│   ├── index.vue                  # 项目列表页（已存在）
│   └── detail/                    # 项目详情目录
│       ├── index.vue              # 主页面
│       └── components/
│           ├── PageHeader.vue
│           ├── UploadData.vue
│           ├── ParameterConfig.vue
│           ├── ResultOverview.vue
│           ├── SpecialCheck.vue
│           └── TransactionDetail.vue
├── api/
│   └── ccdiProject/
│       └── detail.js              # 项目详情 API
├── store/
│   └── modules/
│       └── projectDetail.js       # Vuex 状态管理
└── mock/
    └── projectDetail.js           # Mock 数据
```

---

## 9. 待实现功能清单

- [ ] 创建路由配置
- [ ] 创建主页面容器
- [ ] 实现 PageHeader 顶部导航组件
- [ ] 实现 UploadData 上传数据页面
    - [ ] 流水导入功能
    - [ ] 征信导入功能
    - [ ] 员工家庭关系导入功能
    - [ ] 名单库选择功能
    - [ ] 数据质量检查展示
- [ ] 实现 ParameterConfig 参数配置页面（框架）
- [ ] 实现 ResultOverview 结果总览页面（框架）
- [ ] 实现 SpecialCheck 专项排查页面（框架）
- [ ] 实现 TransactionDetail 流水明细查询页面（框架）
- [ ] 创建 Vuex 状态管理模块
- [ ] 创建 API 接口定义
- [ ] 创建 Mock 数据
- [ ] 修改项目列表页跳转逻辑
- [ ] 测试整体流程

---

## 10. 设计决策记录

| 决策点    | 选择        | 原因                   |
|--------|-----------|----------------------|
| 路由方式   | 独立页面路由    | 可通过URL直接访问，支持浏览器前进后退 |
| 导航方式   | Tabs 标签页  | 交互流畅，适合频繁切换场景        |
| 上传卡片布局 | 四列一行      | 节省空间，一目了然            |
| 后端接口   | Mock 数据先行 | 前端可独立开发，后续对接真实接口     |
| 状态管理   | Vuex      | 便于跨组件数据共享和状态持久化      |
