715 lines
27 KiB
Markdown
715 lines
27 KiB
Markdown
# 数字债权服务系统前端页面设计文档
|
||
|
||
## 概览
|
||
|
||
基于RuoYi-Vue3框架和数字债权服务系统的后端API接口，设计完整的前端页面架构。系统将包含8个核心业务模块，每个模块都有完整的CRUD页面、数据展示和交互功能，确保用户能够高效地管理数字债权业务。
|
||
|
||
## 架构
|
||
|
||
### 基于RuoYi权限体系的架构
|
||
```
|
||
RuoYi权限集成架构
|
||
├── 权限API集成层
|
||
│ ├── 角色权限API: GET /dev-api/system/role/list
|
||
│ ├── 菜单权限API: GET /dev-api/system/menu/roleMenuTreeselect/{roleId}
|
||
│ ├── 权限数据缓存和同步机制
|
||
│ └── 权限变更实时通知
|
||
├── 业务角色映射层
|
||
│ ├── 安保公司 → RuoYi角色ID映射
|
||
│ ├── 甲方单位 → RuoYi角色ID映射
|
||
│ ├── 金融机构 → RuoYi角色ID映射
|
||
│ ├── 系统管理员 → RuoYi管理员角色
|
||
│ └── 平台运营 → RuoYi运营角色
|
||
└── 前端权限控制层
|
||
├── 页面访问权限控制
|
||
├── 功能按钮显示控制
|
||
├── 数据范围权限过滤
|
||
└── 操作权限验证
|
||
```
|
||
|
||
### RuoYi菜单配置结构
|
||
```
|
||
数字债权服务系统菜单配置 (在RuoYi菜单管理中配置)
|
||
├── 数字债权服务 (主菜单)
|
||
│ ├── 合同管理
|
||
│ │ ├── 合同列表 [security_company, client_company, administrator]
|
||
│ │ ├── 合同创建 [security_company, administrator]
|
||
│ │ ├── 合同上传 [security_company, administrator]
|
||
│ │ └── 合同确认 [client_company, administrator]
|
||
│ ├── 债权管理
|
||
│ │ ├── 债权列表 [security_company, financial_institution, administrator]
|
||
│ │ ├── 债权生成 [security_company, administrator]
|
||
│ │ ├── 债权验证 [all_roles]
|
||
│ │ └── 数字签名 [security_company, financial_institution, administrator]
|
||
│ ├── 融资管理
|
||
│ │ ├── 融资申请列表 [security_company, financial_institution, administrator]
|
||
│ │ ├── 融资申请 [security_company, administrator]
|
||
│ │ ├── 融资审批 [financial_institution, administrator]
|
||
│ │ └── 风险评估 [financial_institution, administrator]
|
||
│ ├── 支付结算
|
||
│ │ ├── 支付管理 [client_company, financial_institution, administrator]
|
||
│ │ ├── 支付处理 [client_company, administrator]
|
||
│ │ ├── 监管账户 [financial_institution, administrator]
|
||
│ │ └── 资金分配 [financial_institution, administrator]
|
||
│ ├── 区块链集成
|
||
│ │ ├── 区块链管理 [administrator, platform_operator]
|
||
│ │ ├── 数据上链 [administrator, platform_operator]
|
||
│ │ ├── 数据验证 [all_roles]
|
||
│ │ └── 智能合约 [administrator, platform_operator]
|
||
│ ├── 报表分析
|
||
│ │ ├── 仪表板 [all_roles] (个性化数据)
|
||
│ │ ├── 报表生成 [administrator, platform_operator]
|
||
│ │ ├── 财务报表 [相关方可访问]
|
||
│ │ └── 风险分析 [financial_institution, administrator]
|
||
│ ├── 安全管理
|
||
│ │ ├── 安全管理 [administrator]
|
||
│ │ ├── MFA设置 [all_roles] (个人设置)
|
||
│ │ └── 审计日志 [administrator]
|
||
│ └── 通知服务
|
||
│ ├── 通知管理 [administrator, platform_operator]
|
||
│ ├── 消息发送 [administrator, platform_operator]
|
||
│ ├── 消息模板 [administrator, platform_operator]
|
||
│ └── 投递状态 [administrator, platform_operator]
|
||
```
|
||
|
||
### RuoYi角色配置
|
||
```
|
||
数字债权业务角色配置 (在RuoYi角色管理中配置)
|
||
├── 安保公司角色
|
||
│ ├── 角色名称：数字债权-安保公司
|
||
│ ├── 角色权限：security_company
|
||
│ ├── 数据范围：仅本公司数据
|
||
│ ├── 菜单权限：合同管理、债权管理、融资管理、支付查看、报表查看
|
||
│ └── 按钮权限：创建、编辑、删除（限本公司数据）
|
||
├── 甲方单位角色
|
||
│ ├── 角色名称：数字债权-甲方单位
|
||
│ ├── 角色权限：client_company
|
||
│ ├── 数据范围：相关合同数据
|
||
│ ├── 菜单权限：合同查看、支付管理、报表查看
|
||
│ └── 按钮权限：确认、支付、查看
|
||
├── 金融机构角色
|
||
│ ├── 角色名称：数字债权-金融机构
|
||
│ ├── 角色权限：financial_institution
|
||
│ ├── 数据范围：融资相关数据
|
||
│ ├── 菜单权限：融资管理、风险评估、支付管理、报表分析
|
||
│ └── 按钮权限：审批、评估、资金管理
|
||
├── 系统管理员角色
|
||
│ ├── 角色名称：数字债权-系统管理员
|
||
│ ├── 角色权限：administrator
|
||
│ ├── 数据范围：全部数据
|
||
│ ├── 菜单权限：所有模块
|
||
│ └── 按钮权限：所有操作
|
||
└── 平台运营角色
|
||
├── 角色名称：数字债权-平台运营
|
||
├── 角色权限：platform_operator
|
||
├── 数据范围：平台级数据
|
||
├── 菜单权限：报表分析、通知服务、区块链管理
|
||
└── 按钮权限：分析、通知、技术运维
|
||
```
|
||
|
||
### 页面模块架构
|
||
```
|
||
数字债权服务系统前端
|
||
├── 合同管理模块 (Contract Management) [安保公司主导，甲方单位参与]
|
||
│ ├── 合同列表页面 (ContractList.vue) [所有角色可访问，数据范围不同]
|
||
│ ├── 合同创建页面 (ContractCreate.vue) [仅安保公司]
|
||
│ ├── 合同详情页面 (ContractDetail.vue) [相关方可访问]
|
||
│ ├── 合同上传页面 (ContractUpload.vue) [安保公司、管理员]
|
||
│ └── 合同确认页面 (ContractConfirm.vue) [甲方单位、管理员]
|
||
├── 债权管理模块 (Credit Management) [安保公司主导，金融机构查看]
|
||
│ ├── 债权列表页面 (CreditList.vue) [安保公司、金融机构、管理员]
|
||
│ ├── 债权生成页面 (CreditGenerate.vue) [仅安保公司、管理员]
|
||
│ ├── 债权详情页面 (CreditDetail.vue) [相关方可访问]
|
||
│ ├── 债权验证页面 (CreditValidate.vue) [所有角色]
|
||
│ └── 数字签名页面 (CreditSignature.vue) [安保公司、金融机构、管理员]
|
||
├── 融资管理模块 (Financing Management) [安保公司申请，金融机构审批]
|
||
│ ├── 融资申请列表页面 (FinancingList.vue) [安保公司、金融机构、管理员]
|
||
│ ├── 融资申请页面 (FinancingApply.vue) [仅安保公司]
|
||
│ ├── 融资审批页面 (FinancingApprove.vue) [仅金融机构、管理员]
|
||
│ ├── 风险评估页面 (RiskAssessment.vue) [金融机构、管理员]
|
||
│ └── 利率信息页面 (InterestRate.vue) [安保公司、金融机构]
|
||
├── 支付结算模块 (Payment Settlement) [甲方单位主导，其他角色查看]
|
||
│ ├── 支付管理页面 (PaymentManagement.vue) [甲方单位、金融机构、管理员]
|
||
│ ├── 支付处理页面 (PaymentProcess.vue) [甲方单位、管理员]
|
||
│ ├── 监管账户页面 (EscrowAccount.vue) [金融机构、管理员]
|
||
│ ├── 资金分配页面 (FundDistribution.vue) [金融机构、管理员]
|
||
│ └── 支付历史页面 (PaymentHistory.vue) [相关方可访问]
|
||
├── 区块链集成模块 (Blockchain Integration) [技术模块，管理员和运营]
|
||
│ ├── 区块链管理页面 (BlockchainManagement.vue) [管理员、平台运营]
|
||
│ ├── 数据上链页面 (DataStorage.vue) [管理员、平台运营]
|
||
│ ├── 数据验证页面 (DataVerification.vue) [所有角色]
|
||
│ ├── 智能合约页面 (SmartContract.vue) [管理员、平台运营]
|
||
│ └── 交易查询页面 (TransactionQuery.vue) [所有角色]
|
||
├── 报表分析模块 (Report Analytics) [所有角色，数据范围不同]
|
||
│ ├── 仪表板页面 (Dashboard.vue) [所有角色，个性化数据]
|
||
│ ├── 报表生成页面 (ReportGenerate.vue) [管理员、平台运营]
|
||
│ ├── 财务报表页面 (FinancialReport.vue) [相关方可访问]
|
||
│ ├── 风险分析页面 (RiskAnalysis.vue) [金融机构、管理员]
|
||
│ └── 统计数据页面 (Statistics.vue) [管理员、平台运营]
|
||
├── 安全管理模块 (Security Management) [管理员专用]
|
||
│ ├── 安全管理页面 (SecurityManagement.vue) [仅管理员]
|
||
│ ├── MFA设置页面 (MFASettings.vue) [所有角色个人设置]
|
||
│ ├── 审计日志页面 (AuditLogs.vue) [仅管理员]
|
||
│ ├── 数据加密页面 (DataEncryption.vue) [管理员、平台运营]
|
||
│ └── 用户认证页面 (UserAuthentication.vue) [仅管理员]
|
||
└── 通知服务模块 (Notification Service) [管理员和运营主导]
|
||
├── 通知管理页面 (NotificationManagement.vue) [管理员、平台运营]
|
||
├── 消息发送页面 (MessageSend.vue) [管理员、平台运营]
|
||
├── 消息模板页面 (MessageTemplate.vue) [管理员、平台运营]
|
||
├── 投递状态页面 (DeliveryStatus.vue) [管理员、平台运营]
|
||
└── 批量发送页面 (BatchSend.vue) [管理员、平台运营]
|
||
```
|
||
|
||
### API服务架构
|
||
```
|
||
src/api/
|
||
├── system/
|
||
│ ├── role.js # RuoYi角色权限API
|
||
│ └── menu.js # RuoYi菜单权限API
|
||
├── credit/
|
||
│ ├── contract.js # 合同管理API
|
||
│ ├── credit.js # 债权管理API
|
||
│ └── financing.js # 融资管理API
|
||
├── payment/
|
||
│ └── payment.js # 支付结算API
|
||
├── blockchain/
|
||
│ └── blockchain.js # 区块链集成API
|
||
├── reports/
|
||
│ └── reports.js # 报表分析API
|
||
├── security/
|
||
│ └── security.js # 安全管理API
|
||
└── notification/
|
||
└── notification.js # 通知服务API
|
||
```
|
||
|
||
### 路由权限控制架构
|
||
```
|
||
src/router/modules/
|
||
├── contract.js # 合同管理路由 [security_company, client_company, administrator]
|
||
├── credit.js # 债权管理路由 [security_company, financial_institution, administrator]
|
||
├── financing.js # 融资管理路由 [security_company, financial_institution, administrator]
|
||
├── payment.js # 支付结算路由 [client_company, financial_institution, administrator]
|
||
├── blockchain.js # 区块链集成路由 [administrator, platform_operator]
|
||
├── reports.js # 报表分析路由 [所有角色，数据范围不同]
|
||
├── security.js # 安全管理路由 [administrator]
|
||
└── notification.js # 通知服务路由 [administrator, platform_operator]
|
||
|
||
// 路由守卫配置
|
||
const routePermissions = {
|
||
'/contract': ['security_company', 'client_company', 'administrator'],
|
||
'/contract/create': ['security_company', 'administrator'],
|
||
'/contract/confirm': ['client_company', 'administrator'],
|
||
'/credit': ['security_company', 'financial_institution', 'administrator'],
|
||
'/credit/generate': ['security_company', 'administrator'],
|
||
'/financing': ['security_company', 'financial_institution', 'administrator'],
|
||
'/financing/apply': ['security_company', 'administrator'],
|
||
'/financing/approve': ['financial_institution', 'administrator'],
|
||
'/payment': ['client_company', 'financial_institution', 'administrator'],
|
||
'/payment/process': ['client_company', 'administrator'],
|
||
'/blockchain': ['administrator', 'platform_operator'],
|
||
'/reports': ['all'], // 所有角色可访问，但数据范围不同
|
||
'/security': ['administrator'],
|
||
'/notification': ['administrator', 'platform_operator']
|
||
}
|
||
```
|
||
|
||
## 组件和接口
|
||
|
||
### 核心页面组件
|
||
|
||
#### 权限控制组件设计
|
||
|
||
##### RoleBasedAccess.vue (角色权限控制组件)
|
||
```javascript
|
||
// 主要功能
|
||
- 基于用户角色控制页面访问
|
||
- 动态显示/隐藏功能按钮
|
||
- 数据范围权限过滤
|
||
- 操作权限验证
|
||
|
||
// 权限配置
|
||
const rolePermissions = {
|
||
'security_company': {
|
||
modules: ['contract', 'credit', 'financing', 'payment_view', 'report_view'],
|
||
actions: ['contract_create', 'credit_generate', 'financing_apply'],
|
||
dataScope: 'own_company'
|
||
},
|
||
'client_company': {
|
||
modules: ['contract_view', 'payment', 'report_view'],
|
||
actions: ['contract_confirm', 'payment_process'],
|
||
dataScope: 'related_contracts'
|
||
},
|
||
'financial_institution': {
|
||
modules: ['financing', 'risk_assessment', 'payment_manage', 'report_analytics'],
|
||
actions: ['financing_approve', 'risk_assess', 'fund_distribute'],
|
||
dataScope: 'financing_related'
|
||
},
|
||
'administrator': {
|
||
modules: ['all'],
|
||
actions: ['all'],
|
||
dataScope: 'all'
|
||
},
|
||
'platform_operator': {
|
||
modules: ['report_analytics', 'notification', 'blockchain'],
|
||
actions: ['report_generate', 'message_send', 'blockchain_manage'],
|
||
dataScope: 'platform_level'
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 1. 合同管理模块组件
|
||
|
||
##### ContractList.vue (合同列表页面)
|
||
```javascript
|
||
// 角色权限差异
|
||
- 安保公司：显示自己创建的合同，可创建、编辑、删除
|
||
- 甲方单位：显示相关的合同，可确认、查看详情
|
||
- 金融机构：显示融资相关的合同，仅查看
|
||
- 管理员：显示所有合同，可执行所有操作
|
||
- 平台运营：显示统计信息，不能操作具体合同
|
||
|
||
// API调用（基于角色）
|
||
- GET /api/credit/contracts?role={userRole}&scope={dataScope}
|
||
- 数据过滤：根据用户角色和数据权限范围过滤返回结果
|
||
```
|
||
|
||
##### ContractCreate.vue (合同创建页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：security_company, administrator
|
||
- 禁止角色：client_company, financial_institution, platform_operator
|
||
|
||
// 功能差异
|
||
- 安保公司：可创建与自己相关的合同
|
||
- 管理员：可创建任意合同，可指定合同双方
|
||
```
|
||
|
||
##### ContractConfirm.vue (合同确认页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：client_company, administrator
|
||
- 禁止角色：security_company, financial_institution, platform_operator
|
||
|
||
// 功能差异
|
||
- 甲方单位：只能确认与自己相关的合同
|
||
- 管理员：可确认任意合同
|
||
```
|
||
|
||
#### 2. 债权管理模块组件
|
||
|
||
##### CreditList.vue (债权列表页面)
|
||
```javascript
|
||
// 角色权限差异
|
||
- 安保公司：显示自己生成的债权，可生成、查看、验证
|
||
- 金融机构：显示融资申请相关的债权，可查看、验证
|
||
- 甲方单位：显示相关合同的债权，仅查看
|
||
- 管理员：显示所有债权，可执行所有操作
|
||
|
||
// 数据范围控制
|
||
- 根据用户角色过滤债权数据
|
||
- 敏感信息（如数字签名）根据权限显示
|
||
```
|
||
|
||
##### CreditGenerate.vue (债权生成页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：security_company, administrator
|
||
- 禁止角色：client_company, financial_institution, platform_operator
|
||
|
||
// 合同选择范围
|
||
- 安保公司：只能选择自己的已确认合同
|
||
- 管理员：可选择任意已确认合同
|
||
```
|
||
|
||
#### 3. 融资管理模块组件
|
||
|
||
##### FinancingList.vue (融资申请列表页面)
|
||
```javascript
|
||
// 角色权限差异
|
||
- 安保公司：显示自己的融资申请，可申请、查看状态
|
||
- 金融机构：显示待审批和已审批的申请，可审批、评估
|
||
- 管理员：显示所有申请，可执行所有操作
|
||
- 其他角色：无权访问
|
||
```
|
||
|
||
##### FinancingApply.vue (融资申请页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：security_company, administrator
|
||
- 债权选择范围：只能选择自己的有效债权
|
||
```
|
||
|
||
##### FinancingApprove.vue (融资审批页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：financial_institution, administrator
|
||
- 审批权限：金融机构只能审批分配给自己的申请
|
||
```
|
||
|
||
#### 4. 支付结算模块组件
|
||
|
||
##### PaymentManagement.vue (支付管理页面)
|
||
```javascript
|
||
// 角色权限差异
|
||
- 甲方单位：显示自己的支付订单，可处理支付
|
||
- 金融机构：显示融资相关的支付，可管理资金分配
|
||
- 安保公司：显示收款记录，仅查看
|
||
- 管理员：显示所有支付，可执行所有操作
|
||
```
|
||
|
||
##### PaymentProcess.vue (支付处理页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：client_company, administrator
|
||
- 支付范围：甲方单位只能处理自己的待付款项
|
||
```
|
||
|
||
#### 5. 区块链集成模块组件
|
||
|
||
##### BlockchainManagement.vue (区块链管理页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：administrator, platform_operator
|
||
- 功能差异：
|
||
- 管理员：完全管理权限
|
||
- 平台运营：监控和维护权限，不能修改配置
|
||
```
|
||
|
||
##### DataVerification.vue (数据验证页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：所有角色
|
||
- 验证范围：根据角色限制可验证的数据类型
|
||
```
|
||
|
||
#### 6. 报表分析模块组件
|
||
|
||
##### Dashboard.vue (仪表板页面)
|
||
```javascript
|
||
// 个性化仪表板
|
||
- 安保公司：合同统计、债权概览、融资状态
|
||
- 甲方单位：支付提醒、合同状态、费用统计
|
||
- 金融机构：融资概览、风险分析、收益统计
|
||
- 管理员：系统概览、用户活跃度、业务统计
|
||
- 平台运营：技术指标、系统健康、数据分析
|
||
```
|
||
|
||
##### ReportGenerate.vue (报表生成页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：administrator, platform_operator
|
||
- 报表类型：根据角色提供不同的报表模板
|
||
```
|
||
|
||
#### 7. 安全管理模块组件
|
||
|
||
##### SecurityManagement.vue (安全管理页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：administrator
|
||
- 功能：用户管理、权限配置、安全策略
|
||
```
|
||
|
||
##### MFASettings.vue (MFA设置页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：所有角色（个人设置）
|
||
- 功能：每个用户管理自己的MFA设置
|
||
```
|
||
|
||
#### 8. 通知服务模块组件
|
||
|
||
##### NotificationManagement.vue (通知管理页面)
|
||
```javascript
|
||
// 访问权限
|
||
- 允许角色：administrator, platform_operator
|
||
- 功能差异：
|
||
- 管理员：完全管理权限，可发送系统通知
|
||
- 平台运营：业务通知管理，不能发送系统级通知
|
||
```
|
||
|
||
## 数据模型
|
||
|
||
### 用户角色和权限模型
|
||
|
||
#### 用户角色枚举
|
||
```javascript
|
||
const UserRole = {
|
||
SECURITY_COMPANY: 'security_company', // 安保公司
|
||
CLIENT_COMPANY: 'client_company', // 甲方单位
|
||
FINANCIAL_INSTITUTION: 'financial_institution', // 金融机构
|
||
ADMINISTRATOR: 'administrator', // 系统管理员
|
||
PLATFORM_OPERATOR: 'platform_operator' // 平台运营
|
||
}
|
||
```
|
||
|
||
#### 权限数据模型
|
||
```javascript
|
||
const PermissionModel = {
|
||
userId: String,
|
||
role: String,
|
||
permissions: Array, // 具体权限列表
|
||
dataScope: String, // 数据访问范围
|
||
companyId: String, // 所属公司ID
|
||
departmentId: String, // 所属部门ID
|
||
createdAt: Date,
|
||
updatedAt: Date
|
||
}
|
||
```
|
||
|
||
### 前端数据模型定义
|
||
|
||
#### 合同数据模型
|
||
```javascript
|
||
const ContractModel = {
|
||
id: String,
|
||
contractNumber: String,
|
||
title: String,
|
||
clientCompany: String,
|
||
clientCompanyId: String, // 甲方单位ID
|
||
securityCompany: String,
|
||
securityCompanyId: String, // 安保公司ID
|
||
amount: Number,
|
||
startDate: Date,
|
||
endDate: Date,
|
||
status: String, // 'draft', 'pending', 'confirmed', 'completed'
|
||
fileUrl: String,
|
||
createdBy: String, // 创建者ID
|
||
createdByRole: String, // 创建者角色
|
||
createdAt: Date,
|
||
updatedAt: Date,
|
||
// 权限相关字段
|
||
canEdit: Boolean, // 当前用户是否可编辑
|
||
canConfirm: Boolean, // 当前用户是否可确认
|
||
canDelete: Boolean // 当前用户是否可删除
|
||
}
|
||
```
|
||
|
||
#### 债权数据模型
|
||
```javascript
|
||
const CreditModel = {
|
||
id: String,
|
||
creditNumber: String,
|
||
contractId: String,
|
||
contractNumber: String,
|
||
securityCompanyId: String, // 债权持有方
|
||
amount: Number,
|
||
issueDate: Date,
|
||
maturityDate: Date,
|
||
status: String, // 'generated', 'active', 'transferred', 'settled'
|
||
digitalSignature: String,
|
||
blockchainHash: String,
|
||
createdAt: Date,
|
||
// 权限相关字段
|
||
canTransfer: Boolean, // 当前用户是否可转让
|
||
canValidate: Boolean, // 当前用户是否可验证
|
||
canView: Boolean // 当前用户是否可查看详情
|
||
}
|
||
```
|
||
|
||
#### 融资数据模型
|
||
```javascript
|
||
const FinancingModel = {
|
||
id: String,
|
||
applicationNumber: String,
|
||
creditId: String,
|
||
applicantId: String, // 申请方ID (安保公司)
|
||
financialInstitutionId: String, // 金融机构ID
|
||
requestedAmount: Number,
|
||
approvedAmount: Number,
|
||
interestRate: Number,
|
||
term: Number,
|
||
status: String, // 'pending', 'approved', 'rejected', 'disbursed'
|
||
riskLevel: String, // 'low', 'medium', 'high'
|
||
createdAt: Date,
|
||
approvedAt: Date,
|
||
approvedBy: String, // 审批人ID
|
||
// 权限相关字段
|
||
canApprove: Boolean, // 当前用户是否可审批
|
||
canModify: Boolean, // 当前用户是否可修改
|
||
canCancel: Boolean // 当前用户是否可取消
|
||
}
|
||
```
|
||
|
||
#### 支付数据模型
|
||
```javascript
|
||
const PaymentModel = {
|
||
id: String,
|
||
paymentNumber: String,
|
||
amount: Number,
|
||
paymentType: String, // 'contract_payment', 'financing_disbursement'
|
||
payerId: String, // 付款方ID
|
||
payeeId: String, // 收款方ID
|
||
status: String, // 'pending', 'processing', 'completed', 'failed'
|
||
escrowAccountId: String,
|
||
transactionHash: String,
|
||
createdAt: Date,
|
||
completedAt: Date,
|
||
// 权限相关字段
|
||
canProcess: Boolean, // 当前用户是否可处理
|
||
canCancel: Boolean, // 当前用户是否可取消
|
||
canView: Boolean // 当前用户是否可查看
|
||
}
|
||
```
|
||
|
||
#### 角色仪表板数据模型
|
||
```javascript
|
||
// 安保公司仪表板数据
|
||
const SecurityCompanyDashboard = {
|
||
totalContracts: Number,
|
||
activeCredits: Number,
|
||
pendingFinancing: Number,
|
||
totalRevenue: Number,
|
||
recentActivities: Array,
|
||
contractStatusChart: Object,
|
||
monthlyTrend: Array
|
||
}
|
||
|
||
// 甲方单位仪表板数据
|
||
const ClientCompanyDashboard = {
|
||
totalContracts: Number,
|
||
pendingPayments: Number,
|
||
paidAmount: Number,
|
||
upcomingPayments: Array,
|
||
paymentHistory: Array,
|
||
contractStatusChart: Object
|
||
}
|
||
|
||
// 金融机构仪表板数据
|
||
const FinancialInstitutionDashboard = {
|
||
pendingApplications: Number,
|
||
approvedAmount: Number,
|
||
totalLoans: Number,
|
||
riskDistribution: Array,
|
||
portfolioPerformance: Object,
|
||
marketIndicators: Array
|
||
}
|
||
|
||
// 管理员仪表板数据
|
||
const AdminDashboard = {
|
||
systemHealth: Object,
|
||
userActivity: Object,
|
||
transactionVolume: Object,
|
||
securityEvents: Array,
|
||
platformStatistics: Object,
|
||
businessMetrics: Object
|
||
}
|
||
|
||
// 平台运营仪表板数据
|
||
const PlatformOperatorDashboard = {
|
||
systemMetrics: Object,
|
||
dataAnalytics: Object,
|
||
notificationStats: Object,
|
||
blockchainStatus: Object,
|
||
performanceIndicators: Array
|
||
}
|
||
```
|
||
|
||
## 正确性属性
|
||
|
||
*属性是一个特征或行为，应该在系统的所有有效执行中保持为真——本质上，是关于系统应该做什么的正式声明。属性作为人类可读规范和机器可验证正确性保证之间的桥梁。*
|
||
|
||
### 属性 1: API调用一致性
|
||
*对于任何*页面组件和API调用，前端发送的请求格式应该与后端API接口规范完全匹配
|
||
**验证: 需求 1.1, 2.1, 3.1, 4.1, 5.1, 6.1, 7.1, 8.1**
|
||
|
||
### 属性 2: 数据展示完整性
|
||
*对于任何*API返回的数据，页面应该正确解析并完整展示所有必要的业务信息
|
||
**验证: 需求 1.5, 2.3, 3.3, 4.3, 5.3, 6.3, 7.3, 8.3**
|
||
|
||
### 属性 3: RuoYi权限API集成一致性
|
||
*对于任何*权限相关的API调用，前端应该正确调用RuoYi权限接口并正确处理返回的权限数据
|
||
**验证: 需求 12.1, 12.2, 12.3**
|
||
|
||
### 属性 4: 菜单配置完整性
|
||
*对于任何*数字债权业务功能，应该在RuoYi菜单管理中有对应的菜单配置和权限设置
|
||
**验证: 需求 11.1, 11.3**
|
||
|
||
### 属性 5: 角色权限一致性
|
||
*对于任何*用户角色和页面访问，显示的功能模块和操作按钮应该与RuoYi权限体系完全匹配
|
||
**验证: 需求 10.1, 11.4**
|
||
|
||
### 属性 6: 数据范围权限控制
|
||
*对于任何*用户查询请求，返回的数据应该严格限制在该用户的权限范围内
|
||
**验证: 需求 10.3, 10.5**
|
||
|
||
### 属性 7: 表单验证完整性
|
||
*对于任何*用户输入表单，应该进行完整的客户端验证并与服务端验证保持一致
|
||
**验证: 需求 1.2, 2.2, 3.2, 4.2, 5.2, 6.2, 7.2, 8.2**
|
||
|
||
### 属性 8: 错误处理一致性
|
||
*对于任何*API调用失败或异常情况，页面应该提供统一的错误处理和用户提示
|
||
**验证: 需求 9.2**
|
||
|
||
### 属性 9: 响应式布局适配
|
||
*对于任何*屏幕尺寸和设备类型，页面布局应该自动调整并保持功能完整性
|
||
**验证: 需求 9.1**
|
||
|
||
### 属性 10: 数据状态同步
|
||
*对于任何*数据更新操作，页面显示的数据状态应该与服务端数据保持同步
|
||
**验证: 需求 10.5**
|
||
|
||
### 属性 9: 操作权限验证
|
||
*对于任何*用户操作请求，应该在前端进行权限预检查并与后端权限验证保持一致
|
||
**验证: 需求 10.4**
|
||
|
||
### 属性 10: 页面加载性能
|
||
*对于任何*页面访问请求，页面应该在合理时间内完成加载并提供良好的用户体验
|
||
**验证: 需求 9.5**
|
||
|
||
### 属性 11: 角色数据隔离
|
||
*对于任何*不同角色的用户，应该只能访问和操作与其角色相关的业务数据
|
||
**验证: 需求 10.1, 10.3**
|
||
|
||
### 属性 12: 路由权限守卫
|
||
*对于任何*页面路由访问，应该根据用户角色进行权限验证，未授权访问应被阻止
|
||
**验证: 需求 10.2**
|
||
|
||
### 属性 13: 权限数据同步一致性
|
||
*对于任何*权限数据变更，前端权限控制应该与RuoYi后端权限数据保持实时同步
|
||
**验证: 需求 11.3, 11.5**
|
||
|
||
## 错误处理
|
||
|
||
### 1. API调用失败处理
|
||
- **场景**: 网络异常、服务器错误、超时等
|
||
- **处理**: 统一的错误提示组件，支持重试机制
|
||
- **用户体验**: 友好的错误信息，避免技术术语
|
||
|
||
### 2. 数据验证失败处理
|
||
- **场景**: 表单数据不符合要求
|
||
- **处理**: 实时验证提示，字段级错误显示
|
||
- **用户体验**: 清晰的验证规则说明
|
||
|
||
### 3. 权限不足处理
|
||
- **场景**: 用户访问无权限的功能
|
||
- **处理**: 隐藏功能按钮，显示权限说明
|
||
- **用户体验**: 引导用户联系管理员
|
||
|
||
### 4. 文件上传失败处理
|
||
- **场景**: 文件格式不支持、大小超限等
|
||
- **处理**: 上传前验证，进度显示，失败重试
|
||
- **用户体验**: 清晰的文件要求说明
|
||
|
||
## 测试策略
|
||
|
||
### 单元测试
|
||
- 组件渲染测试：验证页面组件正确渲染
|
||
- API调用测试：验证API请求格式和响应处理
|
||
- 数据处理测试：验证数据格式化和验证逻辑
|
||
- 权限控制测试：验证基于角色的功能显示
|
||
|
||
### 集成测试
|
||
- 页面流程测试：验证完整的业务操作流程
|
||
- API集成测试：验证前后端接口集成
|
||
- 权限集成测试：验证权限控制的端到端流程
|
||
- 数据同步测试：验证数据更新的实时同步
|
||
|
||
### 端到端测试
|
||
- 用户场景测试：验证真实用户操作场景
|
||
- 跨页面导航测试：验证页面间的导航和数据传递
|
||
- 响应式测试：验证不同设备上的显示效果
|
||
- 性能测试：验证页面加载和响应性能
|
||
|
||
### 属性基础测试
|
||
使用 Vitest 和 Vue Test Utils 进行属性基础测试，每个测试运行最少 100 次迭代以确保属性在各种输入下都成立。每个属性基础测试必须使用注释明确引用设计文档中的正确性属性。 |