24 lines
1.4 KiB
Markdown
24 lines
1.4 KiB
Markdown
# 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）
|