模型输出展示
This commit is contained in:
160
openspec/changes/add-model-output-display/design.md
Normal file
160
openspec/changes/add-model-output-display/design.md
Normal file
@@ -0,0 +1,160 @@
|
||||
# 设计文档: 模型输出展示
|
||||
|
||||
## 概述
|
||||
|
||||
本文档描述在流程详情页面中添加模型输出展示功能的技术设计。
|
||||
|
||||
## 页面结构
|
||||
|
||||
### 当前布局
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 页面标题: 流程详情 [返回按钮] │
|
||||
├──────────────────────┬──────────────────────────────────┤
|
||||
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
|
||||
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
|
||||
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
|
||||
│ │ 客户名称 │ │ │ │ │
|
||||
│ │ 客户类型 │ │ │ 字段内容... │ │
|
||||
│ │ 申请金额 │ │ │ │ │
|
||||
│ │ 贷款利率 │ │ │ │ │
|
||||
│ │ 担保方式 │ │ │ │ │
|
||||
│ └────────────────┘ │ └────────────────────────────┘ │
|
||||
└──────────────────────┴──────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 新增布局
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ 页面标题: 流程详情 [返回按钮] │
|
||||
├──────────────────────┬──────────────────────────────────┤
|
||||
│ 关键信息摘要 (30%) │ 详情标签页 (70%) │
|
||||
│ ┌────────────────┐ │ ┌────────────────────────────┐ │
|
||||
│ │ 流水号 │ │ │ [基本信息][业务信息]... │ │
|
||||
│ │ 客户名称 │ │ │ │ │
|
||||
│ │ 客户类型 │ │ │ 字段内容... │ │
|
||||
│ │ 申请金额 │ │ │ │ │
|
||||
│ │ 贷款利率 │ │ │ │ │
|
||||
│ │ 担保方式 │ │ │ │ │
|
||||
│ └────────────────┘ │ └────────────────────────────┘ │
|
||||
├──────────────────────┴──────────────────────────────────┤
|
||||
│ 模型输出 (当有数据时显示) │
|
||||
│ ┌────────────────────────────────────────────────────┐│
|
||||
│ │ [基本信息][忠诚度分析][贡献度分析]... ││
|
||||
│ │ ││
|
||||
│ │ 字段内容... ││
|
||||
│ └────────────────────────────────────────────────────┘│
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 组件设计
|
||||
|
||||
### ModelOutputDisplay 组件
|
||||
|
||||
建议创建独立的模型输出展示组件，便于维护和复用。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<el-card v-if="shouldDisplay" class="model-output-card">
|
||||
<div slot="header" class="card-header">
|
||||
<span class="card-title">模型输出</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 个人客户 Tabs -->
|
||||
<template v-if="custType === '个人'">
|
||||
<el-tab-pane label="基本信息" key="retail-basic">...</el-tab-pane>
|
||||
<el-tab-pane label="忠诚度分析" key="retail-loyalty">...</el-tab-pane>
|
||||
<el-tab-pane label="贡献度分析" key="retail-contribution">...</el-tab-pane>
|
||||
<el-tab-pane label="关联度分析" key="retail-relevance">...</el-tab-pane>
|
||||
<el-tab-pane label="贷款特征" key="retail-loan">...</el-tab-pane>
|
||||
<el-tab-pane label="风险度分析" key="retail-risk">...</el-tab-pane>
|
||||
<el-tab-pane label="测算结果" key="retail-result">...</el-tab-pane>
|
||||
</template>
|
||||
<!-- 企业客户 Tabs -->
|
||||
<template v-else-if="custType === '企业'">
|
||||
<el-tab-pane label="基本信息" key="corp-basic">...</el-tab-pane>
|
||||
<el-tab-pane label="忠诚度分析" key="corp-loyalty">...</el-tab-pane>
|
||||
<el-tab-pane label="贡献度分析" key="corp-contribution">...</el-tab-pane>
|
||||
<el-tab-pane label="关联度分析" key="corp-relevance">...</el-tab-pane>
|
||||
<el-tab-pane label="企业类别" key="corp-category">...</el-tab-pane>
|
||||
<el-tab-pane label="贷款特征" key="corp-loan">...</el-tab-pane>
|
||||
<el-tab-pane label="风险度分析" key="corp-risk">...</el-tab-pane>
|
||||
<el-tab-pane label="测算结果" key="corp-result">...</el-tab-pane>
|
||||
</template>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 数据流
|
||||
|
||||
### API 响应结构
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "查询成功",
|
||||
"data": {
|
||||
"loanPricingWorkflow": { ... },
|
||||
"modelRetailOutputFields": { ... }, // 个人客户时存在
|
||||
"modelCorpOutputFields": { ... } // 企业客户时存在
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 组件 Props
|
||||
|
||||
| Prop | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| custType | String | 客户类型（个人/企业） |
|
||||
| retailOutput | Object | 个人客户模型输出数据 |
|
||||
| corpOutput | Object | 企业客户模型输出数据 |
|
||||
|
||||
## 样式规范
|
||||
|
||||
### 卡片样式
|
||||
|
||||
与现有 `.summary-card` 和 `.detail-card` 保持一致：
|
||||
|
||||
- 头部背景色: `#fafafa`
|
||||
- 边框颜色: `#ebeef5`
|
||||
- 内边距: 头部 `16px 20px`, 内容 `20px`
|
||||
- 标题字号: `16px`, 字重 `500`
|
||||
- 标题颜色: `#303133`
|
||||
|
||||
### Tab 样式
|
||||
|
||||
使用 Element UI 默认 Tab 样式，间距保持一致。
|
||||
|
||||
## 字段映射表
|
||||
|
||||
### 个人客户模型输出字段
|
||||
|
||||
| Tab | 字段名 | 显示标签 | 格式化 |
|
||||
|-----|--------|----------|--------|
|
||||
| 基本信息 | custIsn | 客户内码 | - |
|
||||
| 基本信息 | custName | 客户名称 | - |
|
||||
| 基本信息 | idType | 证件类型 | - |
|
||||
| 基本信息 | idNum | 证件号码 | - |
|
||||
| 基本信息 | baseLoanRate | 基准利率 | - |
|
||||
| 测算结果 | totalBp | 浮动BP | - |
|
||||
| 测算结果 | calculateRate | 测算利率 | 高亮显示 |
|
||||
|
||||
### 企业客户模型输出字段
|
||||
|
||||
| Tab | 字段名 | 显示标签 | 格式化 |
|
||||
|-----|--------|----------|--------|
|
||||
| 基本信息 | custIsn | 客户内码 | - |
|
||||
| 基本信息 | custName | 客户名称 | - |
|
||||
| 基本信息 | idType | 证件类型 | - |
|
||||
| 基本信息 | idNum | 证件号码 | - |
|
||||
| 基本信息 | baseLoanRate | 基准利率 | - |
|
||||
| 测算结果 | totalBp | 浮动BP | - |
|
||||
| 测算结果 | calculateRate | 测算利率 | 高亮显示 |
|
||||
|
||||
## 响应式设计
|
||||
|
||||
- 桌面端 (≥768px): 模型输出卡片宽度 100%，Tab 内容两列布局
|
||||
- 移动端 (<768px): 模型输出卡片宽度 100%，Tab 内容单列布局
|
||||
Reference in New Issue
Block a user