From 72e2539134ad6d323f3b8ce59f42797d088c573a Mon Sep 17 00:00:00 2001 From: wkc <978997012@qq.com> Date: Fri, 30 Jan 2026 17:26:15 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 独立页面路由架构设计 - 五个子页面功能规划 - 接口设计与Mock数据定义 - 组件结构与状态管理方案 Co-Authored-By: Claude --- .../2025-01-30-project-detail-page-design.md | 336 ++++++++++++++++++ 1 file changed, 336 insertions(+) create mode 100644 doc/plans/2025-01-30-project-detail-page-design.md diff --git a/doc/plans/2025-01-30-project-detail-page-design.md b/doc/plans/2025-01-30-project-detail-page-design.md new file mode 100644 index 0000000..482c978 --- /dev/null +++ b/doc/plans/2025-01-30-project-detail-page-design.md @@ -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 页面缓存 + +使用 `` 缓存标签页内容，避免切换时重复加载。 + +--- + +## 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 | 便于跨组件数据共享和状态持久化 |