anxin-ruoyi/.kiro/specs/digital-credit-frontend/tasks.md

数字债权服务系统前端页面实施计划

实施概述

本实施计划将指导开发团队基于RuoYi-Vue3框架和现有的RuoYi权限管理体系，开发完整的数字债权服务系统前端页面。RuoYi系统已提供完整的用户管理、部门管理、岗位管理、菜单管理和角色管理功能，本计划将充分利用这些现有功能，通过配置菜单权限和角色权限来实现数字债权业务的权限控制。实施过程采用模块化开发方式，确保每个步骤都能独立测试和验证，最终实现一个功能完整、权限清晰的业务管理系统。

任务列表

• [-] 1. 建立项目基础架构和权限控制框架

• 1. 建立项目基础架构和权限控制框架

  • 集成RuoYi系统现有的权限管理体系（用户、部门、岗位、菜单、角色管理）
  • 配置数字债权业务相关的菜单和角色权限
  • 创建基于RuoYi权限体系的前端权限控制组件
  • 设置路由权限守卫和页面访问控制
  • 建立统一的API调用和错误处理机制
  • 需求: 10.1, 10.2, 10.4, 11.1, 11.2

• 1.1 配置数字债权业务菜单结构

  • 在RuoYi菜单管理中创建数字债权服务系统主菜单
  • 配置合同管理、债权管理、融资管理等子菜单
  • 设置各菜单的访问权限和按钮权限标识
  • 建立菜单与前端路由的映射关系
  • 需求: 11.1, 11.2

• 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

• 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

• 2.1 实现合同列表页面 (ContractList.vue)

  • 创建支持分页、筛选、搜索的合同列表组件
  • 实现基于用户角色的数据范围过滤
  • 添加合同状态标识和操作按钮组
  • 集成GET /api/credit/contracts接口调用
  • 需求: 1.1, 10.1, 10.3

• 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

• 2.3 实现合同详情页面 (ContractDetail.vue)

  • 创建合同详细信息展示组件
  • 实现合同文件预览和下载功能
  • 添加基于角色的操作按钮显示控制
  • 集成GET /api/credit/contracts/{id}接口调用
  • 需求: 1.5, 10.1

• 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

• 3.1 实现债权列表页面 (CreditList.vue)

  • 创建债权凭证列表展示和筛选功能
  • 实现基于角色的债权数据访问控制
  • 添加债权状态跟踪和批量操作功能
  • 集成GET /api/credit/credits接口调用
  • 需求: 2.1, 10.3

• 3.2 实现债权生成页面 (CreditGenerate.vue) [仅安保公司、管理员]

  • 创建债权生成表单和合同关联选择
  • 实现债权信息配置和预览功能
  • 添加生成确认和区块链上链处理
  • 集成POST /api/credit/credits接口调用
  • 需求: 2.2, 10.1

• 3.3 实现债权详情页面 (CreditDetail.vue)

  • 创建债权详细信息和数字签名展示
  • 实现区块链验证和交易记录查询
  • 添加债权转让和状态更新功能
  • 集成GET /api/credit/credits/{id}接口调用
  • 需求: 2.3, 2.5

• 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. 创建用户文档和部署指南

  • 编写各模块功能的用户使用说明
  • 创建系统管理员的配置和维护文档
  • 准备部署和升级的技术指南
  • 提供故障排除和常见问题解答
  • 需求: 支持文档和运维指南