# 数字债权服务系统前端页面实施计划 ## 实施概述 本实施计划将指导开发团队基于RuoYi-Vue3框架和现有的RuoYi权限管理体系，开发完整的数字债权服务系统前端页面。RuoYi系统已提供完整的用户管理、部门管理、岗位管理、菜单管理和角色管理功能，本计划将充分利用这些现有功能，通过配置菜单权限和角色权限来实现数字债权业务的权限控制。实施过程采用模块化开发方式，确保每个步骤都能独立测试和验证，最终实现一个功能完整、权限清晰的业务管理系统。 ## 任务列表 - [-] 1. 建立项目基础架构和权限控制框架 - [x] 1. 建立项目基础架构和权限控制框架 - 集成RuoYi系统现有的权限管理体系（用户、部门、岗位、菜单、角色管理） - 配置数字债权业务相关的菜单和角色权限 - 创建基于RuoYi权限体系的前端权限控制组件 - 设置路由权限守卫和页面访问控制 - 建立统一的API调用和错误处理机制 - _需求: 10.1, 10.2, 10.4, 11.1, 11.2_ - [x] 1.1 配置数字债权业务菜单结构 - 在RuoYi菜单管理中创建数字债权服务系统主菜单 - 配置合同管理、债权管理、融资管理等子菜单 - 设置各菜单的访问权限和按钮权限标识 - 建立菜单与前端路由的映射关系 - _需求: 11.1, 11.2_ - [x] 1.2 创建数字债权业务角色 - 在RuoYi角色管理中创建安保公司、甲方单位、金融机构等业务角色 - 为各角色分配对应的菜单权限和数据范围权限 - 配置角色的按钮权限和操作权限 - 建立角色与部门的关联关系 - _需求: 11.1, 11.4_ - [ ] 1.3 集成RuoYi权限API服务 - [ ] 1.3 集成RuoYi权限API服务 - 创建角色权限API服务调用 GET /dev-api/system/role/list - 实现菜单权限API服务调用 GET /dev-api/system/menu/roleMenuTreeselect/{roleId} - 建立权限数据缓存和更新机制 - 设置权限数据的本地存储和同步 - _需求: 10.1, 10.2_ - [ ] 1.4 创建权限控制核心组件 - [ ] 1.4 创建权限控制核心组件 - 实现RoleBasedAccess.vue权限控制组件 - 创建基于RuoYi权限数据的验证服务和工具函数 - 设置数字债权业务角色与RuoYi系统角色的映射关系 - 建立数据范围权限过滤机制 - _需求: 10.1, 10.2, 10.3_ - [ ]* 1.5 编写权限API集成端到端测试 - 在真实页面中测试角色权限API调用的完整流程 - 验证不同角色用户登录后的菜单权限显示 - 测试权限变更后页面访问控制的实时更新 - **验证: 需求 11.1, 11.2** - [ ]* 1.6 编写权限控制组件端到端测试 - 在实际页面操作中验证角色权限控制组件功能 - 测试不同角色用户对页面元素的访问权限 - 验证权限不足时的页面跳转和提示机制 - **验证: 需求 10.1, 11.4** - [ ] 1.5 实现路由权限守卫 - 配置基于RuoYi菜单权限的路由访问控制 - 实现页面权限验证中间件 - 设置未授权访问的重定向逻辑 - 建立权限变更的实时同步机制 - _需求: 10.2, 10.5_ - [ ]* 1.6 编写路由权限端到端测试 - 在浏览器中测试不同角色用户的页面访问权限 - 验证未授权访问时的重定向和错误提示 - 测试权限变更后路由访问控制的实时生效 - **验证: 需求 10.2** - [x] 1.7 建立统一API服务层 - [ ] 1.7 建立统一API服务层 - 创建各模块的API服务文件 - 实现统一的请求拦截和响应处理 - 设置基于RuoYi权限体系的API调用权限验证 - 建立错误处理和用户提示机制 - _需求: 1.1, 2.1, 3.1, 4.1, 5.1, 6.1, 7.1, 8.1_ - [ ]* 1.8 编写API服务端到端测试 - 在真实页面中测试API服务调用和响应处理 - 验证错误处理机制和用户提示的完整性 - 测试API权限验证和数据传输的安全性 - **验证: 需求 1.1, 2.1, 3.1, 4.1, 5.1, 6.1, 7.1, 8.1, 9.2** - [-] 2. 开发合同管理模块页面 - 实现合同列表、创建、详情、上传、确认等页面 - 配置基于角色的功能权限和数据访问控制 - 集成合同管理相关的API接口调用 - 实现合同状态跟踪和操作日志功能 - _需求: 1.1, 1.2, 1.3, 1.4, 1.5_ - [x] 2.1 实现合同列表页面 (ContractList.vue) - 创建支持分页、筛选、搜索的合同列表组件 - 实现基于用户角色的数据范围过滤 - 添加合同状态标识和操作按钮组 - 集成GET /api/credit/contracts接口调用 - _需求: 1.1, 10.1, 10.3_ - [x] 2.2 实现合同创建页面 (ContractCreate.vue) [仅安保公司、管理员] - 创建合同信息录入表单和验证逻辑 - 实现合同条款编辑和文件上传功能 - 添加甲方单位选择和合同金额计算 - 集成POST /api/credit/contracts接口调用 - _需求: 1.2, 10.1_ - [ ] 2.2.1 修复合同管理页面路由路径一致性 - 修改合同列表页面中handleAdd()函数路由路径为/digitalCredit/contract/create - 修改合同列表页面中handleUpdate()函数路由路径为/digitalCredit/contract/create - 修改合同列表页面中handleDetail()函数路由路径为/digitalCredit/contract/detail - 修改合同列表页面中handleConfirm()函数路由路径为/digitalCredit/contract/confirm - 修改合同创建页面中goBack()函数路由路径为/digitalCredit/contract - 修改合同创建页面中成功提交后的跳转路径为/digitalCredit/contract/detail - _需求: 13.1, 13.2, 13.3, 13.4, 13.5_ - [x] 2.3 实现合同详情页面 (ContractDetail.vue) - 创建合同详细信息展示组件 - 实现合同文件预览和下载功能 - 添加基于角色的操作按钮显示控制 - 集成GET /api/credit/contracts/{id}接口调用 - _需求: 1.5, 10.1_ - [x] 2.4 实现合同确认页面 (ContractConfirm.vue) [仅甲方单位、管理员] - 创建合同确认流程和状态更新功能 - 实现确认前的合同信息核验 - 添加确认操作的安全验证机制 - 集成PUT /api/credit/contracts/{id}/confirm接口调用 - _需求: 1.4, 10.1_ - [ ]* 2.5 编写合同管理模块端到端测试 - 在真实页面中测试合同创建、查看、确认的完整流程 - 验证不同角色用户对合同操作的权限控制 - 测试合同数据与后端API的完整交互 - **验证: 需求 1.2, 1.5, 10.3** - [-] 3. 开发债权管理模块页面 - 实现债权列表、生成、详情、验证、签名等页面 - 配置债权相关的角色权限和操作控制 - 集成债权管理相关的API接口调用 - 实现数字签名展示和区块链验证功能 - _需求: 2.1, 2.2, 2.3, 2.4, 2.5_ - [x] 3.1 实现债权列表页面 (CreditList.vue) - 创建债权凭证列表展示和筛选功能 - 实现基于角色的债权数据访问控制 - 添加债权状态跟踪和批量操作功能 - 集成GET /api/credit/credits接口调用 - _需求: 2.1, 10.3_ - [x] 3.2 实现债权生成页面 (CreditGenerate.vue) [仅安保公司、管理员] - 创建债权生成表单和合同关联选择 - 实现债权信息配置和预览功能 - 添加生成确认和区块链上链处理 - 集成POST /api/credit/credits接口调用 - _需求: 2.2, 10.1_ - [x] 3.3 实现债权详情页面 (CreditDetail.vue) - 创建债权详细信息和数字签名展示 - 实现区块链验证和交易记录查询 - 添加债权转让和状态更新功能 - 集成GET /api/credit/credits/{id}接口调用 - _需求: 2.3, 2.5_ - [x] 3.4 实现债权验证页面 (CreditValidate.vue) - 创建债权有效性验证和区块链查询功能 - 实现验证结果展示和验证报告生成 - 添加验证历史记录和状态跟踪 - 集成POST /api/credit/credits/{id}/validate接口调用 - _需求: 2.4_ - [ ]* 3.5 编写债权管理模块端到端测试 - 在真实页面中测试债权生成、验证、转让的完整业务流程 - 验证不同角色用户的债权数据访问权限和操作控制 - 测试债权状态变更与后端数据的实时同步 - **验证: 需求 2.1, 10.1, 10.3, 10.5** - [ ] 4. 开发融资管理模块页面 - 实现融资申请、审批、风险评估等页面 - 配置融资业务的角色权限和审批流程 - 集成融资管理相关的API接口调用 - 实现风险评估和利率计算功能 - _需求: 3.1, 3.2, 3.3, 3.4, 3.5_ - [ ] 4.1 实现融资申请列表页面 (FinancingList.vue) - 创建融资申请列表和状态筛选功能 - 实现基于角色的申请数据访问控制 - 添加审批流程跟踪和操作按钮组 - 集成GET /api/credit/financing接口调用 - _需求: 3.1, 10.1_ - [ ] 4.2 实现融资申请页面 (FinancingApply.vue) [仅安保公司、管理员] - 创建融资申请表单和债权选择功能 - 实现申请金额计算和风险评估预览 - 添加申请材料上传和提交确认 - 集成POST /api/credit/financing接口调用 - _需求: 3.2, 10.1_ - [ ] 4.3 实现融资审批页面 (FinancingApprove.vue) [仅金融机构、管理员] - 创建融资审批流程和决策支持功能 - 实现风险评估结果展示和审批意见录入 - 添加审批历史记录和状态更新 - 集成PUT /api/credit/financing/{id}/approve接口调用 - _需求: 3.3, 10.1_ - [ ] 4.4 实现风险评估页面 (RiskAssessment.vue) [金融机构、管理员] - 创建风险评估模型和计算功能 - 实现评估报告生成和可视化展示 - 添加评估参数配置和历史对比 - 集成POST /api/credit/financing/{id}/risk-assess接口调用 - _需求: 3.4, 10.1_ - [ ]* 4.5 编写融资管理模块端到端测试 - 在真实页面中测试融资申请、审批、风险评估的完整流程 - 验证金融机构角色的审批权限和操作控制 - 测试融资数据与后端风险评估API的集成 - **验证: 需求 3.3, 10.1, 10.4** - [ ] 5. 开发支付结算模块页面 - 实现支付管理、处理、监管账户、资金分配等页面 - 配置支付业务的角色权限和操作控制 - 集成支付结算相关的API接口调用 - 实现支付状态跟踪和资金流向监控 - _需求: 4.1, 4.2, 4.3, 4.4, 4.5_ - [ ] 5.1 实现支付管理页面 (PaymentManagement.vue) - 创建支付订单管理和状态监控功能 - 实现基于角色的支付数据访问控制 - 添加账户余额展示和支付操作入口 - 集成GET /api/payment/history接口调用 - _需求: 4.1, 10.1_ - [ ] 5.2 实现支付处理页面 (PaymentProcess.vue) [甲方单位、管理员] - 创建支付信息填写和支付方式选择 - 实现支付确认和处理流程 - 添加支付结果展示和状态跟踪 - 集成POST /api/payment/process接口调用 - _需求: 4.2, 10.1_ - [ ] 5.3 实现监管账户页面 (EscrowAccount.vue) [金融机构、管理员] - 创建监管账户管理和余额查询功能 - 实现账户创建和配置管理 - 添加资金流向监控和报表展示 - 集成POST /api/payment/escrow接口调用 - _需求: 4.3, 10.1_ - [ ] 5.4 实现资金分配页面 (FundDistribution.vue) [金融机构、管理员] - 创建资金分配规则和执行功能 - 实现分配方案配置和审批流程 - 添加分配结果跟踪和异常处理 - 集成PUT /api/payment/escrow/{id}/distribute接口调用 - _需求: 4.4, 10.1_ - [ ]* 5.5 编写支付结算模块端到端测试 - 在真实页面中测试支付处理、监管账户、资金分配的完整流程 - 验证支付状态与后端支付API的实时同步 - 测试支付安全控制和资金流向监控功能 - **验证: 需求 4.2, 10.5** - [ ] 6. 开发区块链集成模块页面 - 实现区块链管理、数据上链、验证、智能合约等页面 - 配置区块链技术的角色权限和操作控制 - 集成区块链集成相关的API接口调用 - 实现链上数据查询和交易监控功能 - _需求: 5.1, 5.2, 5.3, 5.4, 5.5_ - [ ] 6.1 实现区块链管理页面 (BlockchainManagement.vue) [管理员、平台运营] - 创建链上数据概览和区块链事件展示 - 实现智能合约管理和交易记录查询 - 添加区块链网络状态监控功能 - 集成GET /api/blockchain/events接口调用 - _需求: 5.1, 10.1_ - [ ] 6.2 实现数据上链页面 (DataStorage.vue) [管理员、平台运营] - 创建数据上链表单和格式验证 - 实现上链确认和提交处理 - 添加上链结果展示和交易跟踪 - 集成POST /api/blockchain/store接口调用 - _需求: 5.2, 10.1_ - [ ] 6.3 实现数据验证页面 (DataVerification.vue) [所有角色] - 创建链上数据验证和查询功能 - 实现验证结果展示和报告生成 - 添加验证历史记录和状态跟踪 - 集成GET /api/blockchain/verify/{hash}接口调用 - _需求: 5.3_ - [ ] 6.4 实现智能合约页面 (SmartContract.vue) [管理员、平台运营] - 创建智能合约部署和执行功能 - 实现合约状态监控和事件查询 - 添加合约参数配置和调用历史 - 集成POST /api/blockchain/contract/execute接口调用 - _需求: 5.4, 10.1_ - [ ]* 6.5 编写区块链集成模块端到端测试 - 在真实页面中测试区块链数据上链、验证、智能合约的完整流程 - 验证区块链API调用和链上数据查询的准确性 - 测试区块链交易状态与前端页面的实时同步 - **验证: 需求 5.1, 5.2, 5.3, 5.4** - [ ] 7. 开发报表分析模块页面 - 实现仪表板、报表生成、财务报表、风险分析等页面 - 配置基于角色的数据分析和报表权限 - 集成报表分析相关的API接口调用 - 实现数据可视化和图表展示功能 - _需求: 6.1, 6.2, 6.3, 6.4, 6.5_ - [ ] 7.1 实现个性化仪表板页面 (Dashboard.vue) [所有角色] - 创建基于角色的个性化仪表板数据展示 - 实现业务数据概览和图表可视化 - 添加关键指标监控和快速操作入口 - 集成GET /api/reports/dashboard接口调用 - _需求: 6.1, 10.1_ - [ ] 7.2 实现报表生成页面 (ReportGenerate.vue) [管理员、平台运营] - 创建报表类型选择和参数配置功能 - 实现报表生成和预览功能 - 添加报表导出和分享功能 - 集成POST /api/reports/generate接口调用 - _需求: 6.2, 10.1_ - [ ] 7.3 实现财务报表页面 (FinancialReport.vue) [相关方可访问] - 创建财务数据展示和分析功能 - 实现基于角色的财务数据访问控制 - 添加财务指标计算和趋势分析 - 集成GET /api/reports/financial接口调用 - _需求: 6.3, 10.3_ - [ ] 7.4 实现风险分析页面 (RiskAnalysis.vue) [金融机构、管理员] - 创建风险分析模型和可视化展示 - 实现风险指标监控和预警功能 - 添加风险报告生成和历史对比 - 集成POST /api/reports/risk-analysis接口调用 - _需求: 6.4, 10.1_ - [ ]* 7.5 编写报表分析模块端到端测试 - 在真实页面中测试仪表板、报表生成、财务分析的完整功能 - 验证不同角色用户的数据访问权限和报表展示 - 测试报表数据与后端分析API的准确性和完整性 - **验证: 需求 6.1, 6.3, 10.1, 10.3** - [ ] 8. 开发安全管理模块页面 - 实现安全管理、MFA设置、审计日志等页面 - 配置安全管理的角色权限和操作控制 - 集成安全管理相关的API接口调用 - 实现用户认证和数据加密功能 - _需求: 7.1, 7.2, 7.3, 7.4, 7.5_ - [ ] 8.1 实现安全管理页面 (SecurityManagement.vue) [仅管理员] - 创建安全策略配置和用户权限管理 - 实现安全事件监控和审计日志查看 - 添加安全设置和策略更新功能 - 集成GET /api/security/audit-logs接口调用 - _需求: 7.1, 10.1_ - [ ] 8.2 实现MFA设置页面 (MFASettings.vue) [所有角色个人设置] - 创建MFA启用/禁用和令牌生成功能 - 实现MFA验证测试和备用码管理 - 添加MFA设置历史和安全提示 - 集成POST /api/security/mfa/generate接口调用 - _需求: 7.2_ - [ ] 8.3 实现审计日志页面 (AuditLogs.vue) [仅管理员] - 创建审计日志查询和筛选功能 - 实现日志详情展示和导出功能 - 添加日志分析和异常检测 - 集成GET /api/security/audit-logs接口调用 - _需求: 7.3, 10.1_ - [ ]* 8.4 编写安全管理模块端到端测试 - 在真实页面中测试安全管理、MFA设置、审计日志的完整功能 - 验证管理员角色的安全操作权限和访问控制 - 测试安全功能与后端安全API的集成和数据同步 - **验证: 需求 7.1, 7.3, 10.1, 10.4** - [ ] 9. 开发通知服务模块页面 - 实现通知管理、消息发送、模板管理等页面 - 配置通知服务的角色权限和操作控制 - 集成通知服务相关的API接口调用 - 实现消息模板和投递状态管理功能 - _需求: 8.1, 8.2, 8.3, 8.4, 8.5_ - [ ] 9.1 实现通知管理页面 (NotificationManagement.vue) [管理员、平台运营] - 创建通知历史查看和通知模板管理 - 实现投递状态监控和通知设置配置 - 添加通知统计和性能分析功能 - 集成GET /api/notification/templates接口调用 - _需求: 8.1, 10.1_ - [ ] 9.2 实现消息发送页面 (MessageSend.vue) [管理员、平台运营] - 创建消息内容编辑和接收者选择 - 实现发送时间设置和发送确认 - 添加发送结果跟踪和状态监控 - 集成POST /api/notification/send接口调用 - _需求: 8.2, 10.1_ - [ ] 9.3 实现消息模板页面 (MessageTemplate.vue) [管理员、平台运营] - 创建消息模板编辑和管理功能 - 实现模板分类和版本控制 - 添加模板预览和测试发送功能 - 集成POST /api/notification/templates接口调用 - _需求: 8.3, 10.1_ - [ ] 9.4 实现投递状态页面 (DeliveryStatus.vue) [管理员、平台运营] - 创建投递状态查询和监控功能 - 实现投递失败分析和重试机制 - 添加投递统计和性能报告 - 集成GET /api/notification/delivery-status/{id}接口调用 - _需求: 8.4, 10.1_ - [ ]* 9.5 编写通知服务模块端到端测试 - 在真实页面中测试通知管理、消息发送、模板管理的完整流程 - 验证通知API调用和消息投递状态的准确性 - 测试通知功能与后端通知服务的集成和实时更新 - **验证: 需求 8.1, 8.2, 8.3, 8.4** - [ ] 10. 实现响应式设计和用户体验优化 - 开发移动端、平板和桌面的响应式布局 - 实现统一的UI组件和设计规范 - 添加加载动画和交互反馈效果 - 优化页面性能确保良好的用户体验 - _需求: 9.1, 9.2, 9.3, 9.4, 9.5_ - [ ] 10.1 实现响应式布局设计 - 使用CSS媒体查询适配不同屏幕尺寸 - 实现组件的弹性布局和网格系统 - 添加移动端友好的触摸交互 - 确保设计风格与RuoYi框架保持一致 - _需求: 9.1, 9.4_ - [ ]* 10.2 编写响应式布局端到端测试 - 在不同设备和屏幕尺寸上测试页面布局的适配性 - 验证移动端、平板、桌面端的用户交互体验 - 测试响应式组件在真实设备上的显示效果 - **验证: 需求 9.1** - [ ] 10.3 实现统一UI组件和交互反馈 - 创建统一的加载状态和错误提示组件 - 实现操作确认和成功反馈机制 - 添加数据加载和处理的进度指示 - 设置统一的表单验证和提示样式 - _需求: 9.2, 9.3_ - [ ] 10.4 优化页面性能和加载体验 - 实现组件的懒加载和代码分割 - 添加数据预加载和缓存策略 - 优化图片和资源的加载性能 - 确保页面在合理时间内完成加载 - _需求: 9.5_ - [ ]* 10.5 编写性能优化端到端测试 - 在真实环境中测试页面加载性能和用户体验 - 验证组件懒加载和缓存策略的实际效果 - 测试大数据量情况下页面的响应速度和稳定性 - **验证: 需求 9.5** - [ ] 11. 集成测试和系统验证 - 进行各模块的集成测试和端到端验证 - 验证基于角色的权限控制和数据安全 - 测试API接口集成和错误处理机制 - 确保系统的稳定性和可靠性 - _需求: 所有需求的综合验证_ - [ ] 11.1 执行模块集成测试 - 测试各模块间的数据传递和状态同步 - 验证权限控制在不同模块间的一致性 - 检查API调用的正确性和错误处理 - 确保用户操作流程的完整性 - _需求: 10.4, 10.5_ - [ ] 11.2 执行角色权限验证测试 - 测试不同角色用户的页面访问权限 - 验证数据范围权限和操作权限控制 - 检查权限变更的实时同步机制 - 确保未授权访问的安全防护 - _需求: 10.1, 10.2, 10.3_ - [ ] 11.3 执行端到端用户场景测试 - 测试完整的业务操作流程 - 验证跨页面导航和数据传递 - 检查响应式设计在不同设备上的表现 - 确保用户体验的一致性和流畅性 - _需求: 9.1, 9.2, 9.3, 9.4, 9.5_ - [ ] 12. 检查点 - 确保所有测试通过 - 确保所有测试通过，如有问题请询问用户 - [ ]* 11. 编写综合端到端测试 - 在真实环境中测试完整的用户业务流程 - 验证不同角色用户从登录到业务操作的完整体验 - 测试跨模块数据传递和权限控制的一致性 - 验证响应式设计在实际设备上的表现和用户体验 - _需求: 所有需求的综合验证_ - [ ]* 12. 创建用户文档和部署指南 - 编写各模块功能的用户使用说明 - 创建系统管理员的配置和维护文档 - 准备部署和升级的技术指南 - 提供故障排除和常见问题解答 - _需求: 支持文档和运维指南_