# 设计文档: 模型输出展示

## 概述

本文档描述在流程详情页面中添加模型输出展示功能的技术设计。

## 页面结构

### 当前布局

```
┌─────────────────────────────────────────────────────────┐
│  页面标题: 流程详情                  [返回按钮]          │
├──────────────────────┬──────────────────────────────────┤
│  关键信息摘要 (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 内容单列布局