diff --git a/openspec/changes/adjust-model-output-columns/proposal.md b/openspec/changes/adjust-model-output-columns/proposal.md new file mode 100644 index 0000000..eb665b6 --- /dev/null +++ b/openspec/changes/adjust-model-output-columns/proposal.md @@ -0,0 +1,61 @@ +# 提案: 将模型输出展示组件改为三列布局 + +## 背景 + +当前 `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: 改为三列布局 (采纳) +- **优点**: 平衡空间利用率和可读性 +- **缺点**: 无明显缺点 diff --git a/openspec/changes/adjust-model-output-columns/specs/loan-pricing-workflow-ui/spec.md b/openspec/changes/adjust-model-output-columns/specs/loan-pricing-workflow-ui/spec.md new file mode 100644 index 0000000..26dab85 --- /dev/null +++ b/openspec/changes/adjust-model-output-columns/specs/loan-pricing-workflow-ui/spec.md @@ -0,0 +1,15 @@ +# loan-pricing-workflow-ui Delta + +## MODIFIED Requirements + +### Requirement: 模型输出展示布局 + +模型输出组件 SHALL 使用三列布局展示字段信息,以提高空间利用率。 + +#### Scenario: 查看个人客户模型输出三列布局 +- **WHEN** 用户在流程详情页查看个人客户记录的模型输出信息 +- **THEN** 系统在所有模型输出 Tab(基本信息、忠诚度分析、贡献度分析、关联度分析、贷款特征、风险度分析、测算结果)中使用三列布局展示字段 + +#### Scenario: 查看企业客户模型输出三列布局 +- **WHEN** 用户在流程详情页查看企业客户记录的模型输出信息 +- **THEN** 系统在所有模型输出 Tab(基本信息、忠诚度分析、贡献度分析、关联度分析、企业类别、贷款特征、风险度分析、测算结果)中使用三列布局展示字段 diff --git a/openspec/changes/adjust-model-output-columns/tasks.md b/openspec/changes/adjust-model-output-columns/tasks.md new file mode 100644 index 0000000..5d85cc4 --- /dev/null +++ b/openspec/changes/adjust-model-output-columns/tasks.md @@ -0,0 +1,36 @@ +# 实施任务 + +## 任务清单 + +1. **修改 ModelOutputDisplay.vue 组件列数配置** + - 文件: `ruoyi-ui/src/views/loanPricing/workflow/components/ModelOutputDisplay.vue` + - 操作: 将所有 `el-descriptions` 的 `:column="2"` 修改为 `:column="3"` + - 涉及行数: 11, 22, 35, 45, 65, 81, 93, 104, 115, 126, 136, 155, 167, 180, 192 + - 验证: 确认所有 15 处 `el-descriptions` 的 `:column` 属性已修改为 `3` + +2. **前端构建验证** + - 操作: 运行 `cd ruoyi-ui && npm run build:prod` + - 验证: 构建成功无错误 + +3. **功能验证** + - 操作: + - 启动前端开发服务器 `npm run dev` + - 访问流程详情页,选择个人客户记录,验证模型输出显示为三列 + - 选择企业客户记录,验证模型输出显示为三列 + - 验证: + - 个人客户所有 7 个 Tab 的字段展示均为三列布局 + - 企业客户所有 8 个 Tab 的字段展示均为三列布局 + - 标签和值内容正常显示,无溢出或错位 + +## 依赖关系 + +- 任务 1 必须首先完成 +- 任务 2 和任务 3 可并行执行 + +## 验收标准 + +- [x] 所有 `el-descriptions` 的 `:column` 属性值均为 `3` +- [x] 前端构建成功 +- [x] 个人客户模型输出所有 Tab 正确显示为三列 +- [x] 企业客户模型输出所有 Tab 正确显示为三列 +- [x] 字段标签和内容显示正常,无布局问题