# 个人模型详情缺失展示字段补齐前端实施计划

> **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan in this repository. Do not use subagents. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 在个人详情页补齐 `展示指标` sheet 中缺失的 6 个字段展示。

**Architecture:** 前端沿用现有个人详情页结构，在流程详情的“业务信息”中补 `loanTerm`，在模型输出“测算结果”中补 5 个新增利率字段，不新增页面分组和交互。

**Tech Stack:** Vue 2、Element UI、Node.js

---

### Task 1: 通过前端断言测试锁定缺失展示

**Files:**
- Create: `ruoyi-ui/tests/retail-display-fields.test.js`
- Modify: `ruoyi-ui/package.json`

- [ ] **Step 1: 编写源码断言脚本**

断言以下展示已存在：

- `PersonalWorkflowDetail.vue` 包含 `借款期限` 和 `detailData.loanTerm`
- `ModelOutputDisplay.vue` 包含以下字段展示：
  - `loanRateHistory`
  - `minRateProduct`
  - `smoothRange`
  - `finalCalculateRate`
  - `referenceRate`

- [ ] **Step 2: 运行脚本并确认先失败**

Run: `npm --prefix ruoyi-ui run test:retail-display-fields`
Expected: FAIL，提示缺失展示实现。

### Task 2: 补齐个人详情页字段展示

**Files:**
- Modify: `ruoyi-ui/src/views/loanPricing/workflow/components/PersonalWorkflowDetail.vue`
- Modify: `ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue`
- Reference: `ruoyi-loan-pricing/src/main/resources/data/retail_output.json`

- [ ] **Step 1: 在业务信息中补齐借款期限**

在 `PersonalWorkflowDetail.vue` 的“业务信息”区域新增：

```vue
<el-descriptions-item label="借款期限">{{ detailData.loanTerm || '-' }}</el-descriptions-item>
```

- [ ] **Step 2: 在个人测算结果中补齐 5 个字段**

在 `ModelOutputDisplay.vue` 的个人“测算结果”中新增：

- 历史利率
- 产品最低利率下限
- 平滑幅度
- 最终测算利率
- 参考利率

- [ ] **Step 3: 重新运行前端断言脚本**

Run: `npm --prefix ruoyi-ui run test:retail-display-fields`
Expected: PASS

- [ ] **Step 4: 执行前端构建验证**

Run: `npm --prefix ruoyi-ui run build:prod`
Expected: 构建成功，输出包含 `Build complete.`

- [ ] **Step 5: 启动前后端并打开个人流程详情页验证**

使用浏览器打开新的个人流程详情页，确认：

- 流程详情“业务信息”出现 `借款期限`
- 模型输出“测算结果”出现并可查看以下字段
  - 历史利率
  - 产品最低利率下限
  - 平滑幅度
  - 最终测算利率
  - 参考利率