docs: 添加项目详情页面设计文档
- 独立页面路由架构设计 - 五个子页面功能规划 - 接口设计与Mock数据定义 - 组件结构与状态管理方案 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
336
doc/plans/2025-01-30-project-detail-page-design.md
Normal file
336
doc/plans/2025-01-30-project-detail-page-design.md
Normal file
@@ -0,0 +1,336 @@
|
||||
# 项目详情页面设计文档
|
||||
|
||||
**创建日期**: 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 | 便于跨组件数据共享和状态持久化 |
|
||||
Reference in New Issue
Block a user