From 3624198aa6b0d891e1f6d21dc25eac29649beb56 Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Wed, 21 Jan 2026 09:04:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BF=A1=E6=81=AF=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |   3 +-
 .../proposal.md                               |  23 ++
 .../specs/loan-pricing-workflow-ui/spec.md    |  34 +++
 .../improve-workflow-detail-layout/tasks.md   |  19 ++
 .../src/views/loanPricing/workflow/detail.vue | 196 ++++++++++++------
 5 files changed, 215 insertions(+), 60 deletions(-)
 create mode 100644 openspec/changes/improve-workflow-detail-layout/proposal.md
 create mode 100644 openspec/changes/improve-workflow-detail-layout/specs/loan-pricing-workflow-ui/spec.md
 create mode 100644 openspec/changes/improve-workflow-detail-layout/tasks.md

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 1d3ec5e..8ff1601 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -13,7 +13,8 @@
       "Bash(cmd.exe:*)",
       "Bash(powershell -Command:*)",
       "Bash(openspec archive add-loan-pricing-create:*)",
-      "Bash(git add:*)"
+      "Bash(git add:*)",
+      "Bash(cd:*)"
     ],
     "additionalDirectories": [
       "d:\\利率定价\\loan-pricing-892\\loan-pricing-892-v2.0"
diff --git a/openspec/changes/improve-workflow-detail-layout/proposal.md b/openspec/changes/improve-workflow-detail-layout/proposal.md
new file mode 100644
index 0000000..5396935
--- /dev/null
+++ 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）
diff --git 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
new file mode 100644
index 0000000..ab80fa5
--- /dev/null
+++ 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** 系统返回至流程列表页面
diff --git a/openspec/changes/improve-workflow-detail-layout/tasks.md b/openspec/changes/improve-workflow-detail-layout/tasks.md
new file mode 100644
index 0000000..bf31c46
--- /dev/null
+++ 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 验证标签页切换功能正常
diff --git a/ruoyi-ui/src/views/loanPricing/workflow/detail.vue b/ruoyi-ui/src/views/loanPricing/workflow/detail.vue
index e8cc133..e7a45cf 100644
--- a/ruoyi-ui/src/views/loanPricing/workflow/detail.vue
+++ b/ruoyi-ui/src/views/loanPricing/workflow/detail.vue
@@ -1,73 +1,88 @@
 <template>
-  <div class="app-container" v-loading="loading">
-    <el-page-header @back="goBack" content="流程详情" />
+  <div class="app-container workflow-detail-container" v-loading="loading">
+    <!-- 页面头部：标题和返回按钮 -->
+    <div class="page-header">
+      <h2 class="page-title">流程详情</h2>
+      <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
+    </div>
 
-    <el-card class="mt-20" v-if="!loading && detail">
-      <el-tabs v-model="activeTab">
-        <!-- 基本信息 -->
-        <el-tab-pane label="基本信息" name="basic">
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="业务方流水号" :span="2">{{ detail.serialNum }}</el-descriptions-item>
-            <el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
-            <el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
-            <el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
+    <!-- 两栏布局 -->
+    <el-row :gutter="20" v-if="!loading && detail">
+      <!-- 左侧摘要卡片（30%） -->
+      <el-col :xs="24" :sm="24" :md="8" :lg="7" :xl="6">
+        <el-card class="summary-card">
+          <div slot="header" class="card-header">
+            <span class="card-title">关键信息</span>
+          </div>
+          <el-descriptions :column="1" direction="vertical" border>
+            <el-descriptions-item label="业务方流水号">{{ detail.serialNum }}</el-descriptions-item>
             <el-descriptions-item label="客户名称">{{ detail.custName }}</el-descriptions-item>
-            <el-descriptions-item label="证件类型" :span="2">{{ detail.idType }}</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
-
-        <!-- 业务信息 -->
-        <el-tab-pane label="业务信息" name="business">
-          <el-descriptions :column="2" border>
             <el-descriptions-item label="客户类型">{{ detail.custType }}</el-descriptions-item>
-            <el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
             <el-descriptions-item label="申请金额">{{ detail.applyAmt }} 元</el-descriptions-item>
             <el-descriptions-item label="贷款利率">{{ detail.loanRate }} %</el-descriptions-item>
-            <el-descriptions-item label="贷款用途">{{ detail.loanPurpose === 'consumer' ? '消费贷款' : detail.loanPurpose === 'business' ? '经营贷款' : detail.loanPurpose }}</el-descriptions-item>
-            <el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
-            <el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
+            <el-descriptions-item label="担保方式">{{ detail.guarType }}</el-descriptions-item>
           </el-descriptions>
-        </el-tab-pane>
+        </el-card>
+      </el-col>
 
-        <!-- 中间业务标识 -->
-        <el-tab-pane label="中间业务标识" name="mid">
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
+      <!-- 右侧详情标签页（70%） -->
+      <el-col :xs="24" :sm="24" :md="16" :lg="17" :xl="18">
+        <el-card class="detail-card">
+          <el-tabs v-model="activeTab">
+            <!-- 基本信息 -->
+            <el-tab-pane label="基本信息" name="basic">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="机构编码">{{ detail.orgCode }}</el-descriptions-item>
+                <el-descriptions-item label="运行模式">{{ detail.runType }}</el-descriptions-item>
+                <el-descriptions-item label="客户内码">{{ detail.custIsn }}</el-descriptions-item>
+                <el-descriptions-item label="证件类型">{{ detail.idType }}</el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
 
-        <!-- 企业标识 -->
-        <el-tab-pane label="企业标识" name="ent">
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
-            <el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
+            <!-- 业务信息 -->
+            <el-tab-pane label="业务信息" name="business">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="贷款用途">{{ detail.loanPurpose === 'consumer' ? '消费贷款' : detail.loanPurpose === 'business' ? '经营贷款' : detail.loanPurpose }}</el-descriptions-item>
+                <el-descriptions-item label="是否有经营佐证">{{ detail.bizProof === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="抵质押类型">{{ detail.collType }}</el-descriptions-item>
+                <el-descriptions-item label="抵质押物三方所有">{{ detail.collThirdParty === 'true' ? '是' : '否' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
 
-        <!-- 其他信息 -->
-        <el-tab-pane label="其他信息" name="other">
-          <el-descriptions :column="2" border>
-            <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
-            <el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
-            <el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
-            <el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
-          </el-descriptions>
-        </el-tab-pane>
-      </el-tabs>
-    </el-card>
+            <!-- 中间业务标识 -->
+            <el-tab-pane label="中间业务标识" name="mid">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="个人快捷支付">{{ detail.midPerQuickPay === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="个人电费代扣">{{ detail.midPerEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="企业电费代扣">{{ detail.midEntEleDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="企业水费代扣">{{ detail.midEntWaterDdc === 'true' ? '是' : '否' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
 
-    <el-row :gutter="10" class="mt-20">
-      <el-col :span="24">
-        <el-button @click="goBack">返回</el-button>
+            <!-- 企业标识 -->
+            <el-tab-pane label="企业标识" name="ent">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="净身企业">{{ detail.isCleanEnt === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="开立基本结算账户">{{ detail.hasSettleAcct === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="制造业企业">{{ detail.isManufacturing === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="省农担担保贷款">{{ detail.isAgriGuar === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="纳税信用等级A级">{{ detail.isTaxA === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="县级及以上农业龙头企业">{{ detail.isAgriLeading === 'true' ? '是' : '否' }}</el-descriptions-item>
+                <el-descriptions-item label="普惠小微借款人">{{ detail.isInclusiveFinance === 'true' ? '是' : '否' }}</el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
+
+            <!-- 其他信息 -->
+            <el-tab-pane label="其他信息" name="other">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="创建时间">{{ detail.createTime }}</el-descriptions-item>
+                <el-descriptions-item label="创建者">{{ detail.createBy }}</el-descriptions-item>
+                <el-descriptions-item label="更新时间">{{ detail.updateTime }}</el-descriptions-item>
+                <el-descriptions-item label="更新者">{{ detail.updateBy }}</el-descriptions-item>
+              </el-descriptions>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -113,3 +128,66 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.workflow-detail-container {
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 0 4px;
+
+    .page-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+
+  .summary-card {
+    margin-bottom: 20px;
+
+    ::v-deep .el-card__header {
+      padding: 16px 20px;
+      background-color: #fafafa;
+      border-bottom: 1px solid #ebeef5;
+    }
+
+    .card-header {
+      display: flex;
+      align-items: center;
+
+      .card-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+
+    ::v-deep .el-card__body {
+      padding: 16px;
+    }
+  }
+
+  .detail-card {
+    ::v-deep .el-card__body {
+      padding: 20px;
+    }
+
+    ::v-deep .el-tabs__header {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+// 响应式：小屏幕下左侧卡片在顶部显示
+@media screen and (max-width: 767px) {
+  .workflow-detail-container {
+    .summary-card {
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>