loan-pricing/doc/2026-04-03-retail-display-fields-frontend-plan.md

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

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 的“业务信息”区域新增：

<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: 启动前后端并打开个人流程详情页验证

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

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