优化信息展示

2026-01-21 09:04:15 +08:00
parent 39f687881a
commit 3624198aa6
5 changed files with 215 additions and 60 deletions
--- a/openspec/changes/improve-workflow-detail-layout/proposal.md
+++ b/openspec/changes/improve-workflow-detail-layout/proposal.md
@@ -0,0 +1,23 @@
+# Change: 优化流程详情页面布局
+
+## Why
+
+当前流程详情页面 ([`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`](../../ruoyi-ui/src/views/loanPricing/workflow/detail.vue)) 采用简单的标签页布局，所有信息平铺展示，缺乏信息层次感。用户需要在不同标签页之间切换才能查看关键信息，无法快速获取最重要的数据概览。页面视觉层次不够清晰，信息利用率不高。
+
+## What Changes
+
+- **页面布局重构**: 采用信息密集型两栏布局
+  - 左侧（约 30% 宽度）：展示关键信息摘要卡片（业务方流水号、客户名称、申请金额、贷款利率等核心字段）
+  - 右侧（约 70% 宽度）：保留现有标签页，展示完整的流程详细信息
+- **页面头部简化**: 移除 `el-page-header`，使用简洁的页面标题，返回按钮移至页面右上角
+- **样式优化**:
+  - 为左侧摘要卡片添加适当的阴影和圆角
+  - 优化卡片内部间距和字体大小
+  - 保持现有的简洁数据展示风格（不添加图标或额外的高亮效果）
+- **响应式支持**: 在小屏幕设备上自动调整为单栏垂直布局
+
+## Impact
+
+- 受影响的规范: `loan-pricing-workflow-ui`
+- 受影响的代码: [`ruoyi-ui/src/views/loanPricing/workflow/detail.vue`](../../ruoyi-ui/src/views/loanPricing/workflow/detail.vue)
+- 破坏性变更: 无（仅改变 UI 布局，不影响功能和 API）
--- a/openspec/changes/improve-workflow-detail-layout/specs/loan-pricing-workflow-ui/spec.md
+++ b/openspec/changes/improve-workflow-detail-layout/specs/loan-pricing-workflow-ui/spec.md
@@ -0,0 +1,34 @@
+## MODIFIED Requirements
+
+### Requirement: 流程详情查看
+
+系统 SHALL 提供流程详情查看功能，以独立页面形式展示完整的流程信息，采用信息密集型两栏布局。
+
+#### Scenario: 查看流程详情
+- **WHEN** 用户在流程列表页面且具有 `loanPricing:workflow:query` 权限，点击列表中某条记录的"查看"按钮
+- **THEN** 系统导航至流程详情独立页面，展示两栏布局：
+  - **左侧摘要卡片**（约 30% 宽度）：显示核心信息
+    - 业务方流水号
+    - 客户名称
+    - 客户类型
+    - 申请金额
+    - 贷款利率
+    - 担保方式
+  - **右侧详情区域**（约 70% 宽度）：使用标签页组织完整信息
+    - 基本信息标签页：机构编码、运行模式、客户内码、证件类型
+    - 业务信息标签页：贷款用途、是否有经营佐证、抵质押类型、抵质押物三方所有
+    - 中间业务标识标签页：个人快捷支付、个人电费代扣、企业电费代扣、企业水费代扣
+    - 企业标识标签页：净身企业、开立基本结算账户、制造业企业、省农担担保贷款、纳税信用等级A级、县级及以上农业龙头企业、普惠小微借款人
+    - 其他信息标签页：创建时间、创建者、更新时间、更新者
+
+#### Scenario: 页面头部和导航
+- **WHEN** 用户访问流程详情页面
+- **THEN** 系统显示简洁的页面标题区域，右上角放置返回按钮，移除原有的面包屑导航组件
+
+#### Scenario: 响应式布局适配
+- **WHEN** 用户在屏幕宽度小于 768px 的设备上访问流程详情页面
+- **THEN** 系统自动调整为单栏垂直布局，左侧摘要卡片在上方，右侧详情标签页在下方
+
+#### Scenario: 返回上一页
+- **WHEN** 用户点击页面右上角的返回按钮
+- **THEN** 系统返回至流程列表页面
--- a/openspec/changes/improve-workflow-detail-layout/tasks.md
+++ b/openspec/changes/improve-workflow-detail-layout/tasks.md
@@ -0,0 +1,19 @@
+## 1. 实现页面布局重构
+
+- [x] 1.1 创建左侧摘要卡片组件结构
+- [x] 1.2 创建右侧标签页详情区域
+- [x] 1.3 实现响应式布局（使用 `el-col` 的 `xs` 断点）
+- [x] 1.4 调整页面头部（移除 `el-page-header`，添加返回按钮到右上角）
+
+## 2. 样式优化
+
+- [x] 2.1 添加卡片阴影和圆角样式
+- [x] 2.2 优化间距和字体大小
+- [x] 2.3 调整两栏布局的间距（`el-row` 的 `gutter` 属性）
+
+## 3. 测试验证
+
+- [x] 3.1 测试页面在不同屏幕尺寸下的显示效果
+- [x] 3.2 验证所有数据字段正确显示
+- [x] 3.3 确认返回按钮功能正常
+- [x] 3.4 验证标签页切换功能正常