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

578 lines
22 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 数字债权服务系统前端页面实施计划
## 实施概述
本实施计划将指导开发团队基于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.2.2 修复LoanManagement组件CSS样式问题
- 修复:deep(.el-timeline-item__content)样式中的重复color属性
- 修复缺失选择器导致的CSS语法错误
- 确保时间轴内容样式正确应用
- 优化组件样式的可读性和维护性
- _需求: 9.2, 9.4_
- [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. 优化服务周期表格UI体验
- 修复服务周期表格操作列固定定位问题
- 确保操作列在表格滚动时保持在右侧可见
- 优化表格列宽和响应式布局
- 提升用户在宽表格中的操作体验
- _需求: 9.1, 9.4_
- [ ] 12.1 修复服务周期表格操作列固定样式
- 为服务周期表格的操作列添加fixed="right"属性
- 调整操作列的样式确保在滚动时保持固定
- 测试不同屏幕尺寸下的表格显示效果
- 确保操作按钮在固定列中正常显示和交互
- _需求: 9.1, 9.4_
- [ ]* 12.2 编写表格UI优化端到端测试
- 在不同屏幕尺寸下测试表格滚动和操作列固定效果
- 验证操作按钮在固定列中的交互功能
- 测试表格响应式布局的完整性
- **验证: 需求 9.1, 9.4**
- [ ]* 13. 创建用户文档和部署指南
- 编写各模块功能的用户使用说明
- 创建系统管理员的配置和维护文档
- 准备部署和升级的技术指南
- 提供故障排除和常见问题解答
- _需求: 支持文档和运维指南_