loan-pricing/openspec/changes/adjust-model-output-columns/proposal.md

提案: 将模型输出展示组件改为三列布局

背景

当前 ModelOutputDisplay.vue 组件中所有 el-descriptions 使用 :column="2" 两列布局展示模型输出字段。

问题

两列布局导致垂直空间占用较多，用户需要滚动更多才能查看完整信息。三列布局可以更好地利用屏幕宽度（特别是在桌面端），减少垂直滚动需求。

提案概述

将 ModelOutputDisplay.vue 组件中所有 el-descriptions 的 :column 属性从 2 修改为 3。

影响范围

• 前端: ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue

具体修改点

需要修改以下位置的 :column 属性：

个人客户模型输出

1. 基本信息 (line 11): :column="2" → :column="3"
2. 忠诚度分析 (line 22): :column="2" → :column="3"
3. 贡献度分析 (line 35): :column="2" → :column="3"
4. 关联度分析 (line 45): :column="2" → :column="3"
5. 贷款特征 (line 65): :column="2" → :column="3"
6. 风险度分析 (line 81): :column="2" → :column="3"
7. 测算结果 (line 93): :column="2" → :column="3"

企业客户模型输出

8. 基本信息 (line 104): :column="2" → :column="3"
9. 忠诚度分析 (line 115): :column="2" → :column="3"
10. 贡献度分析 (line 126): :column="2" → :column="3"
11. 关联度分析 (line 136): :column="2" → :column="3"
12. 企业类别 (line 155): :column="2" → :column="3"
13. 贷款特征 (line 167): :column="2" → :column="3"
14. 风险度分析 (line 180): :column="2" → :column="3"
15. 测算结果 (line 192): :column="2" → :column="3"

设计考虑

1. 空间利用: 三列布局可以减少约 33% 的垂直空间占用
2. 可读性: Element UI 的 el-descriptions 组件会自动调整标签宽度，三列布局在标准桌面显示器（1920px 宽度）下可读性良好
3. 兼容性: el-descriptions 组件原生支持多列布局，无需额外样式调整
4. 响应式: 在小屏幕设备上，Element UI 会自动调整布局，无需额外处理

替代方案

方案 A: 保持两列布局 (未采纳)

• 优点: 标签内容空间更充足
• 缺点: 垂直空间占用大，需要更多滚动

方案 B: 使用四列布局 (未采纳)

• 优点: 垂直空间占用最少
• 缺点: 标签内容可能被压缩，影响可读性

方案 C: 改为三列布局 (采纳)

• 优点: 平衡空间利用率和可读性
• 缺点: 无明显缺点