62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
# 提案: 将模型输出展示组件改为三列布局
|
||
|
||
## 背景
|
||
|
||
当前 `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: 改为三列布局 (采纳)
|
||
- **优点**: 平衡空间利用率和可读性
|
||
- **缺点**: 无明显缺点
|