From 92265e0eee9921a8e203e06118592a7d86b50669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Fri, 15 May 2026 10:49:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(wms/coil):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=92=A2=E5=8D=B7=E8=BF=BD=E6=BA=AF=E9=9D=A2=E6=9D=BF=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=B8=8E=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除冗余的timeline外层卡片包装，调整渲染结构
2. 将合卷段的栅格布局改为flex布局，支持横向滚动
3. 删除不再需要的laneColSpan计算方法
4. 新增滚动条样式自定义配置优化视觉体验
5. 同时新增了获取钢卷发货单绑定销售信息的API接口
---
 klp-ui/src/api/wms/coil.js                    |   11 +
 klp-ui/src/views/wms/coil/info.vue            | 1890 +++++++++++------
 .../views/wms/coil/panels/CoilTraceResult.vue |  114 +-
 3 files changed, 1307 insertions(+), 708 deletions(-)

diff --git a/klp-ui/src/api/wms/coil.js b/klp-ui/src/api/wms/coil.js
index fe86c1df..c6e5c5c8 100644
--- a/klp-ui/src/api/wms/coil.js
+++ b/klp-ui/src/api/wms/coil.js
@@ -451,3 +451,14 @@ export function getFirstHeatCoilMaterial(enterCoilNo) {
     }
   })
 }
+
+/**
+ * 查询钢卷发货单绑定的销售信息
+ */
+export function getDeliveryOrderInfo(coilId) {
+  return request({
+    url: `/crm/order/getOrderByCoilId/${coilId}`,
+    method: 'get',
+    timeout: 600000,
+  })
+}
diff --git a/klp-ui/src/views/wms/coil/info.vue b/klp-ui/src/views/wms/coil/info.vue
index bc73760f..4cfd12fb 100644
--- a/klp-ui/src/views/wms/coil/info.vue
+++ b/klp-ui/src/views/wms/coil/info.vue
@@ -17,616 +17,694 @@
           <span class="section-title">生命周期追踪</span>
         </div>
         <div class="section-body">
-          <div v-if="standardSteps && standardSteps.length > 0" class="trace-content">
-            <div v-for="(step, index) in standardSteps" :key="index" class="step-item">
-              <!-- 第一个步骤是入库（创建） -->
-              <div v-if="index === 0 && step.action === '创建'" class="step-content step-content-inbound">
-                <!-- 入库钢卷卡片 -->
-                <div class="coil-card-wrapper inbound-coil-wrapper">
-                  <div class="coil-card-header inbound-header">
-                    <span class="card-label">📦 入库</span>
-                  </div>
-                  <div v-for="(coil, idx) in getInboundCoil(step, index)" :key="idx" class="coil-card-futuristic"
-                    v-if="coil && coil.currentCoilNo !== '-'">
-                    <div class="coil-futuristic-header">
-                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
-                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
-                    </div>
-
-                    <div class="coil-futuristic-body">
-                      <!-- 钢卷图标 -->
-                      <div class="coil-icon-container">
-                        <svg class="coil-svg" viewBox="0 0 200 200">
-                          <defs>
-                            <linearGradient id="coilGradInbound1" x1="0%" y1="0%" x2="100%" y2="100%">
-                              <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.5" />
-                              <stop offset="50%" style="stop-color:#2563eb;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.5" />
-                            </linearGradient>
-                            <linearGradient id="coilGradInbound2" x1="0%" y1="0%" x2="100%" y2="0%">
-                              <stop offset="0%" style="stop-color:#93c5fd;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#bfdbfe;stop-opacity:0.3" />
-                            </linearGradient>
-                          </defs>
-
-                          <!-- 外圈 -->
-                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradInbound1)"
-                            stroke-width="2.5">
-                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradInbound2)"
-                            stroke-width="1.8" opacity="0.6">
-                            <animate attributeName="stroke-dashoffset" values="0;377" dur="4s"
-                              repeatCount="indefinite" />
-                          </circle>
-
-                          <!-- 内层钢卷 -->
-                          <circle cx="100" cy="100" r="45" fill="url(#coilGradInbound1)" opacity="0.15">
-                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="35" fill="url(#coilGradInbound2)" opacity="0.2" />
-                          <circle cx="100" cy="100" r="25" fill="url(#coilGradInbound1)" opacity="0.25" />
-                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
-
-                          <!-- 装饰线条 -->
-                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradInbound1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradInbound1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1"
-                            opacity="0.4" />
-
-                          <!-- 中心点 -->
-                          <circle cx="100" cy="100" r="4" fill="#3b82f6">
-                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
-                          </circle>
-                        </svg>
+          <coil-trace-result :trace-result="traceResult">
+            <template #stepBody="{ step, compact }">
+              <div class="step-item">
+                <template v-if="step.action === '创建'">
+                  <div v-if="compact" class="step-content step-content-compact step-content-inbound">
+                    <div class="coil-card-wrapper inbound-coil-wrapper">
+                      <div class="coil-card-header inbound-header">
+                        <span class="card-label">📦 入库</span>
                       </div>
-
-                      <!-- 属性标签 -->
-                      <div class="coil-attr-tags">
-                        <!-- 顶部 - 材质 -->
-                        <div class="attr-tag attr-top">
-                          <div class="attr-line attr-line-top"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">材质</span>
-                            <span class="attr-value">{{ coil.material || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右侧 - 规格 -->
-                        <div class="attr-tag attr-right">
-                          <div class="attr-line attr-line-right"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">规格</span>
-                            <span class="attr-value">{{ coil.specification || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左侧 - 质量状态 -->
-                        <div class="attr-tag attr-left">
-                          <div class="attr-line attr-line-left"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">质量状态</span>
-                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{
-                              coil.qualityStatus }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左上角 - 入场卷号 -->
-                        <div class="attr-tag attr-top-left" v-if="coil.enterCoilNo && coil.enterCoilNo !== '-'">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">入场卷号</span>
-                            <span class="attr-value">{{ coil.enterCoilNo }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右上角 - 厂家原料号 -->
-                        <div class="attr-tag attr-top-right" v-if="coil.supplierCoilNo && coil.supplierCoilNo !== '-'">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家原料号</span>
-                            <span class="attr-value">{{ coil.supplierCoilNo }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左下角 - 班组 -->
-                        <div class="attr-tag attr-bottom-left">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">班组</span>
-                            <span class="attr-value">{{ coil.team || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右下角 - 厂家 -->
-                        <div class="attr-tag attr-bottom-right">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家</span>
-                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 备注信息在底部 -->
-                        <div class="attr-tag attr-remark">
-                          <div class="attr-content attr-content-remark">
-                            <span class="attr-label">备注</span>
-                            <span class="attr-value">{{ coil.remark || '-' }}</span>
+                      <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-hover"
+                        v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-mini-header">
+                          <span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
+                        </div>
+                        <div class="coil-mini-body">
+                          <span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
+                          <span class="coil-mini-material">{{ coil.material || '-' }}</span>
+                          <span :class="['coil-mini-status', getFuturisticStatusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
+                        </div>
+                        <div class="coil-detail-popup">
+                          <div class="popup-header">
+                            <span class="popup-title">钢卷详情</span>
+                            <span class="popup-close">✕</span>
+                          </div>
+                          <div class="popup-content">
+                            <div class="popup-row">
+                              <span class="popup-label">入场卷号</span>
+                              <span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">当前卷号</span>
+                              <span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">物料名称</span>
+                              <span class="popup-value">{{ coil.itemName || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">规格</span>
+                              <span class="popup-value">{{ coil.specification || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">材质</span>
+                              <span class="popup-value">{{ coil.material || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">净重</span>
+                              <span class="popup-value">{{ coil.netWeight || 0 }} t</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">生产厂家</span>
+                              <span class="popup-value">{{ coil.manufacturer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">镀层</span>
+                              <span class="popup-value">{{ coil.zincLayer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">质量状态</span>
+                              <span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">逻辑库位</span>
+                              <span class="popup-value">{{ coil.warehouseName || '-' }}</span>
+                            </div>
                           </div>
                         </div>
                       </div>
+                      <div v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
                     </div>
-
-                    <!-- 底部信息 -->
-                    <div class="coil-futuristic-footer">
-                      <div class="footer-item">
-                        <span class="footer-label">镀层</span>
-                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                    <div class="action-center-compact">
+                      <div class="action-arrow action-arrow-inbound">
+                        <i class="el-icon-download"></i>
                       </div>
-                      <div class="footer-item">
-                        <span class="footer-label">表面处理</span>
-                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">逻辑库位</span>
-                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                      <div class="action-info">
+                        <el-tag size="mini" type="primary" class="action-tag">入库</el-tag>
+                        <span class="action-operator">{{ step.operation }}</span>
+                        <span class="action-time">{{ step.time }}</span>
                       </div>
                     </div>
                   </div>
-                  <div
-                    v-if="getInboundCoil(step, index).length === 0 || getInboundCoil(step, index).every(c => !c || c.currentCoilNo === '-')"
-                    class="empty-coil">
-                    <span>无钢卷信息</span>
-                  </div>
-                </div>
 
-                <!-- 中间入库信息 -->
-                <div class="action-center">
-                  <div class="action-arrow action-arrow-inbound">
-                    <i class="el-icon-download"></i>
+                  <div v-else class="step-content step-content-inbound">
+                    <div class="coil-card-wrapper inbound-coil-wrapper">
+                      <div class="coil-card-header inbound-header">
+                        <span class="card-label">📦 入库</span>
+                      </div>
+                      <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-futuristic"
+                        v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-futuristic-header">
+                          <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                        </div>
+                        <div class="coil-futuristic-body">
+                          <div class="coil-icon-container">
+                            <svg class="coil-svg" viewBox="0 0 200 200">
+                              <defs>
+                                <linearGradient id="coilGradInbound1" x1="0%" y1="0%" x2="100%" y2="100%">
+                                  <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0.5" />
+                                  <stop offset="50%" style="stop-color:#2563eb;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.5" />
+                                </linearGradient>
+                                <linearGradient id="coilGradInbound2" x1="0%" y1="0%" x2="100%" y2="0%">
+                                  <stop offset="0%" style="stop-color:#93c5fd;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#bfdbfe;stop-opacity:0.3" />
+                                </linearGradient>
+                              </defs>
+                              <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradInbound1)" stroke-width="2.5">
+                                <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradInbound2)" stroke-width="1.8" opacity="0.6">
+                                <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="45" fill="url(#coilGradInbound1)" opacity="0.15">
+                                <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="35" fill="url(#coilGradInbound2)" opacity="0.2" />
+                              <circle cx="100" cy="100" r="25" fill="url(#coilGradInbound1)" opacity="0.25" />
+                              <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradInbound1)" stroke-width="1" opacity="0.4" />
+                              <circle cx="100" cy="100" r="4" fill="#3b82f6">
+                                <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                              </circle>
+                            </svg>
+                          </div>
+                          <div class="coil-attr-tags">
+                            <div class="attr-tag attr-top">
+                              <div class="attr-line attr-line-top"></div>
+                              <div class="attr-content">
+                                <span class="attr-label">材质</span>
+                                <span class="attr-value">{{ coil.material || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-right">
+                              <div class="attr-line attr-line-right"></div>
+                              <div class="attr-content">
+                                <span class="attr-label">规格</span>
+                                <span class="attr-value">{{ coil.specification || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-left">
+                              <div class="attr-line attr-line-left"></div>
+                              <div class="attr-content">
+                                <span class="attr-label">质量状态</span>
+                                <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{ coil.qualityStatus }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-left" v-if="coil.enterCoilNo && coil.enterCoilNo !== '-'">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">入场卷号</span>
+                                <span class="attr-value">{{ coil.enterCoilNo }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-right" v-if="coil.supplierCoilNo && coil.supplierCoilNo !== '-'">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家原料号</span>
+                                <span class="attr-value">{{ coil.supplierCoilNo }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-left">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">班组</span>
+                                <span class="attr-value">{{ coil.team || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-right">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家</span>
+                                <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-remark">
+                              <div class="attr-content attr-content-remark">
+                                <span class="attr-label">备注</span>
+                                <span class="attr-value">{{ coil.remark || '-' }}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="coil-futuristic-footer">
+                          <div class="footer-item">
+                            <span class="footer-label">镀层</span>
+                            <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">表面处理</span>
+                            <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">逻辑库位</span>
+                            <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
+                    </div>
+                    <div class="action-center">
+                      <div class="action-arrow action-arrow-inbound">
+                        <i class="el-icon-download"></i>
+                      </div>
+                      <div class="action-info">
+                        <el-tag size="mini" type="primary" class="action-tag">入库</el-tag>
+                        <span class="action-operator">{{ step.operation }}</span>
+                        <span class="action-time">{{ step.time }}</span>
+                      </div>
+                    </div>
                   </div>
-                  <div class="action-info">
-                    <el-tag size="mini" type="primary" class="action-tag">入库</el-tag>
-                    <span class="action-operator">{{ step.operation }}</span>
-                    <span class="action-time">{{ step.time }}</span>
+                </template>
+
+                <template v-else>
+                  <div v-if="compact" class="step-content-compact-change">
+                    <div class="coil-change-wrapper">
+                      <div class="coil-change-header">
+                        <span class="change-label">变更前</span>
+                      </div>
+                      <div v-for="(coil, idx) in step.oldCoilInfoList" :key="idx" class="coil-card-hover old" v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-mini-header">
+                          <span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
+                        </div>
+                        <div class="coil-mini-body">
+                          <span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
+                          <span class="coil-mini-material">{{ coil.material || '-' }}</span>
+                          <span :class="['coil-mini-status', getFuturisticStatusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
+                        </div>
+                        <div class="coil-detail-popup">
+                          <div class="popup-header">
+                            <span class="popup-title">钢卷详情</span>
+                            <span class="popup-close">✕</span>
+                          </div>
+                          <div class="popup-content">
+                            <div class="popup-row">
+                              <span class="popup-label">入场卷号</span>
+                              <span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">当前卷号</span>
+                              <span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">物料名称</span>
+                              <span class="popup-value">{{ coil.itemName || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">规格</span>
+                              <span class="popup-value">{{ coil.specification || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">材质</span>
+                              <span class="popup-value">{{ coil.material || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">净重</span>
+                              <span class="popup-value">{{ coil.netWeight || 0 }} t</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">生产厂家</span>
+                              <span class="popup-value">{{ coil.manufacturer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">镀层</span>
+                              <span class="popup-value">{{ coil.zincLayer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">质量状态</span>
+                              <span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">逻辑库位</span>
+                              <span class="popup-value">{{ coil.warehouseName || '-' }}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="step.oldCoilInfoList.length === 0 || step.oldCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
+                    </div>
+
+                    <div class="action-center-compact">
+                      <div class="action-arrow">
+                        <i class="el-icon-arrow-down"></i>
+                      </div>
+                      <div class="action-info">
+                        <el-tag size="mini" type="info" class="action-tag">{{ step.action }}</el-tag>
+                        <span class="action-operator">{{ step.operation }}</span>
+                        <span class="action-time">{{ step.time }}</span>
+                      </div>
+                    </div>
+
+                    <div class="coil-change-wrapper new">
+                      <div class="coil-change-header">
+                        <span class="change-label">变更后</span>
+                      </div>
+                      <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-hover new" v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-mini-header">
+                          <span class="coil-mini-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-mini-weight">{{ coil.netWeight ? coil.netWeight + 't' : '-' }}</span>
+                        </div>
+                        <div class="coil-mini-body">
+                          <span class="coil-mini-spec">{{ coil.specification || '-' }}</span>
+                          <span class="coil-mini-material">{{ coil.material || '-' }}</span>
+                          <span :class="['coil-mini-status', getFuturisticStatusClass(coil.qualityStatus)]">{{ coil.qualityStatus || '-' }}</span>
+                        </div>
+                        <div class="coil-detail-popup">
+                          <div class="popup-header">
+                            <span class="popup-title">钢卷详情</span>
+                            <span class="popup-close">✕</span>
+                          </div>
+                          <div class="popup-content">
+                            <div class="popup-row">
+                              <span class="popup-label">入场卷号</span>
+                              <span class="popup-value">{{ coil.enterCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">当前卷号</span>
+                              <span class="popup-value">{{ coil.currentCoilNo || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">物料名称</span>
+                              <span class="popup-value">{{ coil.itemName || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">规格</span>
+                              <span class="popup-value">{{ coil.specification || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">材质</span>
+                              <span class="popup-value">{{ coil.material || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">净重</span>
+                              <span class="popup-value">{{ coil.netWeight || 0 }} t</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">生产厂家</span>
+                              <span class="popup-value">{{ coil.manufacturer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">镀层</span>
+                              <span class="popup-value">{{ coil.zincLayer || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">质量状态</span>
+                              <span class="popup-value">{{ coil.qualityStatus || '-' }}</span>
+                            </div>
+                            <div class="popup-row">
+                              <span class="popup-label">逻辑库位</span>
+                              <span class="popup-value">{{ coil.warehouseName || '-' }}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
+                    </div>
                   </div>
-                </div>
+
+                  <div v-else class="step-content">
+                    <div class="coil-card-wrapper old-coil-wrapper">
+                      <div class="coil-card-header">
+                        <span class="card-label">变更前</span>
+                      </div>
+                      <div v-for="(coil, idx) in step.oldCoilInfoList" :key="idx" class="coil-card-futuristic" v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-futuristic-header">
+                          <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                        </div>
+                        <div class="coil-futuristic-body">
+                          <div class="coil-icon-container">
+                            <svg class="coil-svg" viewBox="0 0 200 200">
+                              <defs>
+                                <linearGradient id="coilGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
+                                  <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.5" />
+                                  <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0.5" />
+                                </linearGradient>
+                                <linearGradient id="coilGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
+                                  <stop offset="0%" style="stop-color:#a78bfa;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#c084fc;stop-opacity:0.3" />
+                                </linearGradient>
+                              </defs>
+                              <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad1)" stroke-width="2.5">
+                                <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad2)" stroke-width="1.8" opacity="0.6">
+                                <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="45" fill="url(#coilGrad1)" opacity="0.15">
+                                <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="35" fill="url(#coilGrad2)" opacity="0.2" />
+                              <circle cx="100" cy="100" r="25" fill="url(#coilGrad1)" opacity="0.25" />
+                              <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad1)" stroke-width="1" opacity="0.4" />
+                              <circle cx="100" cy="100" r="4" fill="#6366f1">
+                                <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                              </circle>
+                            </svg>
+                          </div>
+                          <div class="coil-attr-tags">
+                            <div class="attr-tag attr-top">
+                              <div class="attr-content">
+                                <span class="attr-label">材质</span>
+                                <span class="attr-value">{{ coil.material || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-right">
+                              <div class="attr-content">
+                                <span class="attr-label">规格</span>
+                                <span class="attr-value">{{ coil.specification || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-left">
+                              <div class="attr-content">
+                                <span class="attr-label">状态</span>
+                                <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{ coil.qualityStatus || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-left">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">入场卷号</span>
+                                <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-right">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家原料号</span>
+                                <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-left">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">班组</span>
+                                <span class="attr-value">{{ coil.team || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-right">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家</span>
+                                <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-remark">
+                              <div class="attr-content attr-content-remark">
+                                <span class="attr-label">备注</span>
+                                <span class="attr-value">{{ coil.remark || '-' }}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="coil-futuristic-footer">
+                          <div class="footer-item">
+                            <span class="footer-label">镀层</span>
+                            <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">表面处理</span>
+                            <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">逻辑库位</span>
+                            <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="step.oldCoilInfoList.length === 0 || step.oldCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
+                    </div>
+
+                    <div class="action-center">
+                      <div class="action-arrow">
+                        <i class="el-icon-right"></i>
+                      </div>
+                      <div class="action-info">
+                        <el-tag size="mini" type="info" class="action-tag">{{ step.action }}</el-tag>
+                        <span class="action-operator">{{ step.operation }}</span>
+                        <span class="action-time">{{ step.time }}</span>
+                      </div>
+                    </div>
+
+                    <div class="coil-card-wrapper new-coil-wrapper">
+                      <div class="coil-card-header">
+                        <span class="card-label">变更后</span>
+                      </div>
+                      <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-futuristic" v-if="coil && coil.currentCoilNo !== '-'">
+                        <div class="coil-futuristic-header">
+                          <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
+                          <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                        </div>
+                        <div class="coil-futuristic-body">
+                          <div class="coil-icon-container">
+                            <svg class="coil-svg" viewBox="0 0 200 200">
+                              <defs>
+                                <linearGradient id="coilGrad3" x1="0%" y1="0%" x2="100%" y2="100%">
+                                  <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.5" />
+                                  <stop offset="50%" style="stop-color:#34d399;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#10b981;stop-opacity:0.5" />
+                                </linearGradient>
+                                <linearGradient id="coilGrad4" x1="0%" y1="0%" x2="100%" y2="0%">
+                                  <stop offset="0%" style="stop-color:#a7f3d0;stop-opacity:0.4" />
+                                  <stop offset="100%" style="stop-color:#fbcfe8;stop-opacity:0.3" />
+                                </linearGradient>
+                              </defs>
+                              <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad3)" stroke-width="2.5">
+                                <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad4)" stroke-width="1.8" opacity="0.6" stroke-dasharray="50 50">
+                                <animate attributeName="stroke-dashoffset" values="0;100" dur="3s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="45" fill="url(#coilGrad3)" opacity="0.15">
+                                <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                              </circle>
+                              <circle cx="100" cy="100" r="35" fill="url(#coilGrad4)" opacity="0.2" />
+                              <circle cx="100" cy="100" r="25" fill="url(#coilGrad3)" opacity="0.25" />
+                              <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                              <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad3)" stroke-width="1" opacity="0.4" />
+                              <circle cx="100" cy="100" r="4" fill="#10b981">
+                                <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                              </circle>
+                            </svg>
+                          </div>
+                          <div class="coil-attr-tags">
+                            <div class="attr-tag attr-top">
+                              <div class="attr-content">
+                                <span class="attr-label">材质</span>
+                                <span class="attr-value">{{ coil.material || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-right">
+                              <div class="attr-content">
+                                <span class="attr-label">规格</span>
+                                <span class="attr-value">{{ coil.specification || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-left">
+                              <div class="attr-content">
+                                <span class="attr-label">状态</span>
+                                <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus || '-')">{{ coil.qualityStatus || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-left">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">入场卷号</span>
+                                <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-top-right">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家原料号</span>
+                                <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-left">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">班组</span>
+                                <span class="attr-value">{{ coil.team || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-bottom-right">
+                              <div class="attr-content attr-content-small">
+                                <span class="attr-label">厂家</span>
+                                <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
+                              </div>
+                            </div>
+                            <div class="attr-tag attr-remark">
+                              <div class="attr-content attr-content-remark">
+                                <span class="attr-label">备注</span>
+                                <span class="attr-value">{{ coil.remark || '-' }}</span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class="coil-futuristic-footer">
+                          <div class="footer-item">
+                            <span class="footer-label">镀层</span>
+                            <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">表面处理</span>
+                            <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
+                          </div>
+                          <div class="footer-item">
+                            <span class="footer-label">逻辑库位</span>
+                            <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
+                          </div>
+                        </div>
+                      </div>
+                      <div v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => !c || c.currentCoilNo === '-')" class="empty-coil">
+                        <span>无钢卷信息</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
               </div>
+            </template>
+          </coil-trace-result>
 
-              <!-- 其他步骤是变更 -->
-              <div v-if="index !== 0 && step.action !== '创建'" class="step-content">
-                <!-- 左侧旧钢卷卡片 -->
-                <div class="coil-card-wrapper old-coil-wrapper">
-                  <div class="coil-card-header">
-                    <span class="card-label">变更前</span>
-                  </div>
-                  <div v-for="(coil, idx) in step.oldCoilInfoList" :key="idx" class="coil-card-futuristic"
-                    v-if="coil && coil.currentCoilNo !== '-'">
-                    <div class="coil-futuristic-header">
-                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
-                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
-                    </div>
-
-                    <div class="coil-futuristic-body">
-                      <!-- 钢卷图标 -->
-                      <div class="coil-icon-container">
-                        <svg class="coil-svg" viewBox="0 0 200 200">
-                          <defs>
-                            <linearGradient id="coilGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                              <stop offset="0%" style="stop-color:#6366f1;stop-opacity:0.5" />
-                              <stop offset="50%" style="stop-color:#8b5cf6;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#6366f1;stop-opacity:0.5" />
-                            </linearGradient>
-                            <linearGradient id="coilGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
-                              <stop offset="0%" style="stop-color:#a78bfa;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#c084fc;stop-opacity:0.3" />
-                            </linearGradient>
-                          </defs>
-
-                          <!-- 外圈 -->
-                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad1)" stroke-width="2.5">
-                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad2)" stroke-width="1.8"
-                            opacity="0.6">
-                            <animate attributeName="stroke-dashoffset" values="0;377" dur="4s"
-                              repeatCount="indefinite" />
-                          </circle>
-
-                          <!-- 内层钢卷 -->
-                          <circle cx="100" cy="100" r="45" fill="url(#coilGrad1)" opacity="0.15">
-                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="35" fill="url(#coilGrad2)" opacity="0.2" />
-                          <circle cx="100" cy="100" r="25" fill="url(#coilGrad1)" opacity="0.25" />
-                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
-
-                          <!-- 装饰线条 -->
-                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad1)" stroke-width="1"
-                            opacity="0.4" />
-
-                          <!-- 中心点 -->
-                          <circle cx="100" cy="100" r="4" fill="#6366f1">
-                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
-                          </circle>
-                        </svg>
-                      </div>
-
-                      <!-- 属性标签 -->
-                      <div class="coil-attr-tags">
-                        <!-- 顶部 - 材质 -->
-                        <div class="attr-tag attr-top">
-                          <div class="attr-line attr-line-top"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">材质</span>
-                            <span class="attr-value">{{ coil.material || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右侧 - 规格 -->
-                        <div class="attr-tag attr-right">
-                          <div class="attr-line attr-line-right"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">规格</span>
-                            <span class="attr-value">{{ coil.specification || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左侧 - 质量状态 -->
-                        <div class="attr-tag attr-left">
-                          <div class="attr-line attr-line-left"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">状态</span>
-                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus)">{{
-                              coil.qualityStatus || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左上角 - 入场卷号 -->
-                        <div class="attr-tag attr-top-left">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">入场卷号</span>
-                            <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右上角 - 厂家原料号 -->
-                        <div class="attr-tag attr-top-right">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家原料号</span>
-                            <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左下角 - 班组 -->
-                        <div class="attr-tag attr-bottom-left">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">班组</span>
-                            <span class="attr-value">{{ coil.team || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右下角 - 厂家 -->
-                        <div class="attr-tag attr-bottom-right">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家</span>
-                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 备注信息在底部 -->
-                        <div class="attr-tag attr-remark">
-                          <div class="attr-content attr-content-remark">
-                            <span class="attr-label">备注</span>
-                            <span class="attr-value">{{ coil.remark || '-' }}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 底部信息 -->
-                    <div class="coil-futuristic-footer">
-                      <div class="footer-item">
-                        <span class="footer-label">镀层</span>
-                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">表面处理</span>
-                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">逻辑库位</span>
-                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    v-if="step.oldCoilInfoList.length === 0 || step.oldCoilInfoList.every(c => !c || c.currentCoilNo === '-')"
-                    class="empty-coil">
-                    <span>无钢卷信息</span>
-                  </div>
+          <!-- 发货记录 -->
+          <div class="step-item" v-if="coilInfo">
+            <div class="step-content">
+              <div class="coil-card-wrapper inbound-coil-wrapper">
+                <div class="coil-card-header inbound-header">
+                  <span class="card-label">🚚 发货</span>
                 </div>
-
-                <!-- 中间操作信息 -->
-                <div class="action-center">
-                  <div class="action-arrow">
-                    <i class="el-icon-right"></i>
-                  </div>
-                  <div class="action-info">
-                    <el-tag size="mini" type="info" class="action-tag">{{ step.action }}</el-tag>
-                    <span class="action-operator">{{ step.operation }}</span>
-                    <span class="action-time">{{ step.time }}</span>
-                  </div>
-                </div>
-
-                <!-- 右侧新钢卷卡片 -->
-                <div class="coil-card-wrapper new-coil-wrapper">
-                  <div class="coil-card-header">
-                    <span class="card-label">变更后</span>
-                  </div>
-                  <div v-for="(coil, idx) in step.newCoilInfoList" :key="idx" class="coil-card-futuristic"
-                    v-if="coil && coil.currentCoilNo !== '-'">
-                    <div class="coil-futuristic-header">
-                      <span class="coil-futuristic-no">{{ coil.currentCoilNo }}</span>
-                      <span class="coil-futuristic-weight">{{ coil.netWeight ? coil.netWeight + ' t' : '-' }}</span>
+                <div class="coil-card-futuristic">
+                  <div class="coil-futuristic-body">
+                    <div class="coil-icon-container">
+                      <svg class="coil-svg" viewBox="0 0 200 200">
+                        <defs>
+                          <linearGradient id="coilGradShip1" x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.5" />
+                            <stop offset="50%" style="stop-color:#ef4444;stop-opacity:0.4" />
+                            <stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.5" />
+                          </linearGradient>
+                          <linearGradient id="coilGradShip2" x1="0%" y1="0%" x2="100%" y2="0%">
+                            <stop offset="0%" style="stop-color:#fcd34d;stop-opacity:0.4" />
+                            <stop offset="100%" style="stop-color:#fca5a5;stop-opacity:0.3" />
+                          </linearGradient>
+                        </defs>
+                        <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradShip1)" stroke-width="2.5">
+                          <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
+                        </circle>
+                        <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradShip2)" stroke-width="1.8" opacity="0.6">
+                          <animate attributeName="stroke-dashoffset" values="0;377" dur="4s" repeatCount="indefinite" />
+                        </circle>
+                        <circle cx="100" cy="100" r="45" fill="url(#coilGradShip1)" opacity="0.15">
+                          <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
+                        </circle>
+                        <circle cx="100" cy="100" r="35" fill="url(#coilGradShip2)" opacity="0.2" />
+                        <circle cx="100" cy="100" r="25" fill="url(#coilGradShip1)" opacity="0.25" />
+                        <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
+                        <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
+                        <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
+                        <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
+                        <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradShip1)" stroke-width="1" opacity="0.4" />
+                        <circle cx="100" cy="100" r="4" fill="#f59e0b">
+                          <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
+                        </circle>
+                      </svg>
                     </div>
-
-                    <div class="coil-futuristic-body">
-                      <!-- 钢卷图标 -->
-                      <div class="coil-icon-container">
-                        <svg class="coil-svg" viewBox="0 0 200 200">
-                          <defs>
-                            <linearGradient id="coilGrad3" x1="0%" y1="0%" x2="100%" y2="100%">
-                              <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.5" />
-                              <stop offset="50%" style="stop-color:#34d399;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#10b981;stop-opacity:0.5" />
-                            </linearGradient>
-                            <linearGradient id="coilGrad4" x1="0%" y1="0%" x2="100%" y2="0%">
-                              <stop offset="0%" style="stop-color:#a7f3d0;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#fbcfe8;stop-opacity:0.3" />
-                            </linearGradient>
-                          </defs>
-
-                          <!-- 外圈 -->
-                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGrad3)" stroke-width="2.5">
-                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGrad4)" stroke-width="1.8"
-                            opacity="0.6" stroke-dasharray="50 50">
-                            <animate attributeName="stroke-dashoffset" values="0;100" dur="3s"
-                              repeatCount="indefinite" />
-                          </circle>
-
-                          <!-- 内层钢卷 -->
-                          <circle cx="100" cy="100" r="45" fill="url(#coilGrad3)" opacity="0.15">
-                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="35" fill="url(#coilGrad4)" opacity="0.2" />
-                          <circle cx="100" cy="100" r="25" fill="url(#coilGrad3)" opacity="0.25" />
-                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
-
-                          <!-- 装饰线条 -->
-                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGrad3)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGrad3)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGrad3)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGrad3)" stroke-width="1"
-                            opacity="0.4" />
-
-                          <!-- 中心点 -->
-                          <circle cx="100" cy="100" r="4" fill="#10b981">
-                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
-                          </circle>
-                        </svg>
-                      </div>
-
-                      <!-- 属性标签 -->
-                      <div class="coil-attr-tags">
-                        <!-- 顶部 - 材质 -->
-                        <div class="attr-tag attr-top">
-                          <div class="attr-line attr-line-top"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">材质</span>
-                            <span class="attr-value">{{ coil.material || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右侧 - 规格 -->
-                        <div class="attr-tag attr-right">
-                          <div class="attr-line attr-line-right"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">规格</span>
-                            <span class="attr-value">{{ coil.specification || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左侧 - 质量状态 -->
-                        <div class="attr-tag attr-left">
-                          <div class="attr-line attr-line-left"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">状态</span>
-                            <span class="attr-value" :class="getFuturisticStatusClass(coil.qualityStatus || '-')">{{
-                              coil.qualityStatus || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左上角 - 入场卷号 -->
-                        <div class="attr-tag attr-top-left">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">入场卷号</span>
-                            <span class="attr-value">{{ coil.enterCoilNo || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右上角 - 厂家原料号 -->
-                        <div class="attr-tag attr-top-right">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家原料号</span>
-                            <span class="attr-value">{{ coil.supplierCoilNo || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 左下角 - 班组 -->
-                        <div class="attr-tag attr-bottom-left">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">班组</span>
-                            <span class="attr-value">{{ coil.team || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 右下角 - 厂家 -->
-                        <div class="attr-tag attr-bottom-right">
-                          <div class="attr-content attr-content-small">
-                            <span class="attr-label">厂家</span>
-                            <span class="attr-value">{{ coil.manufacturer || '-' }}</span>
-                          </div>
-                        </div>
-
-                        <!-- 备注信息在底部 -->
-                        <div class="attr-tag attr-remark">
-                          <div class="attr-content attr-content-remark">
-                            <span class="attr-label">备注</span>
-                            <span class="attr-value">{{ coil.remark || '-' }}</span>
-                          </div>
+                    <div class="coil-attr-tags">
+                      <div class="attr-tag attr-top">
+                        <div class="attr-content">
+                          <span class="attr-label">发货状态</span>
+                          <span class="attr-value" :class="coilInfo.status === 1 ? 'futuristic-status-success' : 'futuristic-status-warning'">
+                            {{ coilInfo.status === 1 ? '已发货' : '未发货' }}
+                          </span>
                         </div>
                       </div>
                     </div>
-
-                    <!-- 底部信息 -->
-                    <div class="coil-futuristic-footer">
-                      <div class="footer-item">
-                        <span class="footer-label">镀层</span>
-                        <span class="footer-value">{{ coil.zincLayer || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">表面处理</span>
-                        <span class="footer-value">{{ coil.surfaceTreatmentDesc || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">逻辑库位</span>
-                        <span class="footer-value">{{ coil.warehouseName || '-' }}</span>
-                      </div>
+                  </div>
+                  <div class="coil-futuristic-footer" v-if="coilInfo.status === 1">
+                    <div class="footer-item">
+                      <span class="footer-label">发货人</span>
+                      <span class="footer-value">{{ coilInfo.exportByName || '-' }}</span>
+                    </div>
+                    <div class="footer-item">
+                      <span class="footer-label">发货时间</span>
+                      <span class="footer-value">{{ formatTime(coilInfo.exportTime) }}</span>
                     </div>
                   </div>
-                  <div
-                    v-if="step.newCoilInfoList.length === 0 || step.newCoilInfoList.every(c => !c || c.currentCoilNo === '-')"
-                    class="empty-coil">
-                    <span>无钢卷信息</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 发货记录 -->
-            <div class="step-item">
-              <div class="step-content">
-                <div class="coil-card-wrapper inbound-coil-wrapper">
-                  <div class="coil-card-header inbound-header">
-                    <span class="card-label">🚚 发货</span>
-                  </div>
-                  <div class="coil-card-futuristic">
-                    <div class="coil-futuristic-body">
-                      <!-- 钢卷图标 -->
-                      <div class="coil-icon-container">
-                        <svg class="coil-svg" viewBox="0 0 200 200">
-                          <defs>
-                            <linearGradient id="coilGradShip1" x1="0%" y1="0%" x2="100%" y2="100%">
-                              <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.5" />
-                              <stop offset="50%" style="stop-color:#ef4444;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0.5" />
-                            </linearGradient>
-                            <linearGradient id="coilGradShip2" x1="0%" y1="0%" x2="100%" y2="0%">
-                              <stop offset="0%" style="stop-color:#fcd34d;stop-opacity:0.4" />
-                              <stop offset="100%" style="stop-color:#fca5a5;stop-opacity:0.3" />
-                            </linearGradient>
-                          </defs>
-
-                          <!-- 外圈 -->
-                          <circle cx="100" cy="100" r="70" fill="none" stroke="url(#coilGradShip1)" stroke-width="2.5">
-                            <animate attributeName="r" values="70;72;70" dur="2s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="60" fill="none" stroke="url(#coilGradShip2)" stroke-width="1.8"
-                            opacity="0.6">
-                            <animate attributeName="stroke-dashoffset" values="0;377" dur="4s"
-                              repeatCount="indefinite" />
-                          </circle>
-
-                          <!-- 内层钢卷 -->
-                          <circle cx="100" cy="100" r="45" fill="url(#coilGradShip1)" opacity="0.15">
-                            <animate attributeName="opacity" values="0.15;0.3;0.15" dur="3s" repeatCount="indefinite" />
-                          </circle>
-                          <circle cx="100" cy="100" r="35" fill="url(#coilGradShip2)" opacity="0.2" />
-                          <circle cx="100" cy="100" r="25" fill="url(#coilGradShip1)" opacity="0.25" />
-                          <circle cx="100" cy="100" r="15" fill="white" opacity="0.4" />
-
-                          <!-- 装饰线条 -->
-                          <line x1="100" y1="100" x2="100" y2="30" stroke="url(#coilGradShip1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="170" y2="100" stroke="url(#coilGradShip1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="100" y2="170" stroke="url(#coilGradShip1)" stroke-width="1"
-                            opacity="0.4" />
-                          <line x1="100" y1="100" x2="30" y2="100" stroke="url(#coilGradShip1)" stroke-width="1"
-                            opacity="0.4" />
-
-                          <!-- 中心点 -->
-                          <circle cx="100" cy="100" r="4" fill="#f59e0b">
-                            <animate attributeName="r" values="4;6;4" dur="1.5s" repeatCount="indefinite" />
-                          </circle>
-                        </svg>
-                      </div>
-
-                      <!-- 属性标签 - 显示发货状态 -->
-                      <div class="coil-attr-tags">
-                        <!-- 顶部 - 发货状态 -->
-                        <div class="attr-tag attr-top">
-                          <div class="attr-line attr-line-top"></div>
-                          <div class="attr-content">
-                            <span class="attr-label">发货状态</span>
-                            <span class="attr-value"
-                              :class="coilInfo.status === 1 ? 'futuristic-status-success' : 'futuristic-status-warning'">
-                              {{ coilInfo.status === 1 ? '已发货' : '未发货' }}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- 底部信息 -->
-                    <div class="coil-futuristic-footer" v-if="coilInfo.status === 1">
-                      <div class="footer-item">
-                        <span class="footer-label">发货人</span>
-                        <span class="footer-value">{{ coilInfo.exportByName || '-' }}</span>
-                      </div>
-                      <div class="footer-item">
-                        <span class="footer-label">发货时间</span>
-                        <span class="footer-value">{{ formatTime(coilInfo.exportTime) }}</span>
-                      </div>
-                    </div>
-                    <div class="coil-futuristic-footer" v-else>
-                      <div class="footer-item" style="flex: 1;">
-                        <span class="footer-label">状态</span>
-                        <span class="footer-value">等待发货</span>
-                      </div>
+                  <div class="coil-futuristic-footer" v-else>
+                    <div class="footer-item" style="flex: 1;">
+                      <span class="footer-label">状态</span>
+                      <span class="footer-value">等待发货</span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-
-          <div v-else class="empty-state">
-            <i class="el-icon-document"></i>
-            <span>未找到相关钢卷记录</span>
-          </div>
         </div>
       </div>
 
@@ -660,6 +738,76 @@
         </div>
       </div>
 
+      <div class="section sales-section">
+        <!-- 发货单信息 -->
+        <div class="section-header">
+          <span class="section-icon">💰</span>
+          <span class="section-title">发货单对应的合同信息</span>
+        </div>
+        <div class="section-body" v-if="deliveryOrderInfo.orderId">
+          <el-descriptions :column="3" border size="small">
+            <el-descriptions-item label="合同号">{{ deliveryOrderInfo.contractCode || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="客户名称">{{ deliveryOrderInfo.customer || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="销售人员">{{ deliveryOrderInfo.salesman || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="签订时间">{{ deliveryOrderInfo.signTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="交货时间">{{ deliveryOrderInfo.deliveryTime || '-' }}</el-descriptions-item>
+            <el-descriptions-item label="订单总额">{{ deliveryOrderInfo.orderAmount || '-' }}</el-descriptions-item>
+          </el-descriptions>
+
+          <!-- 技术附件 -->
+          <h4>技术附件</h4>
+          <FileList :oss-ids="deliveryOrderInfo.techAnnex" />
+
+          <!-- 排产函附件 -->
+          <h4>排产函</h4>
+          <FileList :oss-ids="deliveryOrderInfo.productionSchedule" />
+        </div>
+
+        <div v-else class="empty-state">
+          <i class="el-icon-document"></i>
+          <span>未找到相关发货单对应的合同信息记录</span>
+        </div>
+      </div>
+
+      <div class="section sales-section">
+        <div class="section-header">
+          <span class="section-icon">💰</span>
+          <span class="section-title">订单异议</span>
+        </div>
+        <div class="section-body" v-if="salesObjectionInfo.length > 0">
+          <el-table :data="salesObjectionInfo" size="small" border stripe style="width: 100%">
+            <el-table-column label="产品类别" align="center" prop="productCategory" />
+            <el-table-column label="反馈日期" align="center" prop="returnDate" width="180">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.returnDate, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="投诉情况" align="center" prop="complaintContent"
+              show-overflow-tooltip></el-table-column>
+            <el-table-column label="客户诉求" align="center" prop="customerDemand" show-overflow-tooltip></el-table-column>
+            <el-table-column label="状态" align="center" prop="objectionStatus">
+              <template slot-scope="scope">
+                <el-tag v-if="scope.row.objectionStatus === 0" type="danger">待处理</el-tag>
+                <el-tag v-else-if="scope.row.objectionStatus === 1" type="success">已处理</el-tag>
+                <el-tag v-else-if="scope.row.objectionStatus === 2" type="info">已关闭</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="处理人" align="center" prop="handleUser" />
+            <el-table-column label="处理时间" align="center" prop="handleTime" width="180">
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.handleTime, '{y}-{m}-{d}') }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" prop="remark" />
+          </el-table>
+        </div>
+        <div v-else class="empty-state">
+          <i class="el-icon-document"></i>
+          <span>未找到相关订单异议记录</span>
+        </div>
+      </div>
+
+
       <div class="section combined-section">
         <div class="section-header">
           <span class="section-icon">📋</span>
@@ -725,7 +873,8 @@
           <span class="section-title">异常信息</span>
         </div>
         <div class="section-body">
-          <abnormal-table ref="abnormalTable" :list="abmornalList" :editable="false" :show-coil="false" :coil-info="coilInfo" />
+          <abnormal-table ref="abnormalTable" :list="abmornalList" :editable="false" :show-coil="false"
+            :coil-info="coilInfo" />
         </div>
       </div>
 
@@ -734,12 +883,13 @@
         <div class="section-header">
           <span class="section-icon">📈</span>
           <span class="section-title">生产工艺数据</span>
-          <el-tag v-if="perfLoading || segLoading || realtimeLoading" size="mini" type="info" style="margin-left:8px">加载中…</el-tag>
+          <el-tag v-if="perfLoading || segLoading || realtimeLoading" size="mini" type="info"
+            style="margin-left:8px">加载中…</el-tag>
           <span v-if="hasPerfData" class="perf-count">({{ perfSegCount }} 段)</span>
         </div>
         <div class="section-body">
           <el-tabs v-model="perfActiveTab" size="small" class="perf-tabs" @tab-click="handlePerfTabSwitch">
-            
+
             <!-- 趋势参数：左树形目录 + 右单图 -->
             <el-tab-pane label="趋势参数" name="trend">
               <div v-if="!hasPerfData && !segLoading" class="no-data-hint">暂无生产数据</div>
@@ -752,19 +902,16 @@
                       {{ group.label }}
                     </div>
                     <div v-show="expandedGroups[group.label]" class="tree-children">
-                      <div
-                        v-for="item in group.children"
-                        :key="item.col"
-                        class="tree-item"
+                      <div v-for="item in group.children" :key="item.col" class="tree-item"
                         :class="{ active: selectedTrendParam && selectedTrendParam.col === item.col }"
-                        @click="selectTrendParam(item)"
-                      >{{ item.label }}</div>
+                        @click="selectTrendParam(item)">{{ item.label }}</div>
                     </div>
                   </div>
                 </div>
                 <div class="trend-chart-area">
                   <div v-if="!selectedTrendParam" class="no-data-hint">← 点击左侧参数查看曲线</div>
-                  <div ref="trendSingleChart" :style="{ display: selectedTrendParam ? 'block' : 'none', height: '100%', width: '100%' }" />
+                  <div ref="trendSingleChart"
+                    :style="{ display: selectedTrendParam ? 'block' : 'none', height: '100%', width: '100%' }" />
                 </div>
               </div>
             </el-tab-pane>
@@ -806,8 +953,9 @@
 </template>
 
 <script>
-import { getMaterialCoil, listMaterialCoil, getMaterialCoilTrace } from '@/api/wms/coil';
+import { getMaterialCoil, listMaterialCoil, getMaterialCoilTrace, getDeliveryOrderInfo } from '@/api/wms/coil';
 import { getCoilWarehouseOperationLogByCoilId } from '@/api/wms/coilWarehouseOperationLog';
+import { listSalesObjection } from "@/api/crm/salesObjection";
 import { listCoilAbnormal } from '@/api/wms/coilAbnormal'
 // 查询批量调拨的记录
 import { listTransferOrderItem } from '@/api/wms/transferOrderItem'
@@ -820,6 +968,7 @@ import { getTimingSegByEncoilId, getTimingPlanDetailByHotcoilId, getTimingRealti
 
 import AbnormalTable from '@/views/wms/coil/components/AbnormalTable.vue';
 import FileList from "@/components/FileList";
+import CoilTraceResult from '@/views/wms/coil/panels/CoilTraceResult.vue';
 
 const TREND_GROUPS = [
   {
@@ -937,48 +1086,53 @@ export default {
   name: 'CoilInfo',
   components: {
     AbnormalTable,
-    FileList
+    FileList,
+    CoilTraceResult
   },
   data() {
-      return {
-        loading: false,
-        coilInfoLoading: false,
-        traceLoading: false,
-        traceResult: null,
-        coilDetails: {},
-        loadingCoilDetails: false,
-        coilInfo: {},
-        coilList: [],
-        wipList: [],
-        annealList: [],
-        standardSteps: [],
-        coilId: '',
-        warehouseTranferList: [],
-        abmornalList: [],
-        transferOrderItemList: [], // 批量调拨记录
-        coilQualityRejudgeList: [], // 技术部改判记录
-        tranferList: [], // 合并后的调拨记录
-        // 生产数据相关
-        perfLoading: false,
-        perfSeries: null,
-        perfSegCount: 0,
-        // 新增图表数据状态
-        segLoading: false,
-        realtimeLoading: false,
-        segData: null,
-        gaugeRows: null,
-        shapeRows: null,
-        perfActiveTab: 'trend',
-        // 趋势参数树状态
-        trendGroups: TREND_GROUPS,
-        expandedGroups: { '张力': true, '速度': true, '拉矫机': true, '酸洗段': true },
-        selectedTrendParam: null,
-        trendChartInst: null,
-        _trendResizeFn: null,
-        chartInstances: [],
-        resizeHandler: null
-      }
-    },
+    return {
+      loading: false,
+      coilInfoLoading: false,
+      traceLoading: false,
+      traceResult: null,
+      coilDetails: {},
+      loadingCoilDetails: false,
+      coilInfo: {},
+      coilList: [],
+      wipList: [],
+      annealList: [],
+      standardSteps: [],
+      coilId: '',
+      warehouseTranferList: [],
+      abmornalList: [],
+      transferOrderItemList: [], // 批量调拨记录
+      coilQualityRejudgeList: [], // 技术部改判记录
+      tranferList: [], // 合并后的调拨记录
+      // 生产数据相关
+      perfLoading: false,
+      perfSeries: null,
+      perfSegCount: 0,
+      // 新增图表数据状态
+      segLoading: false,
+      realtimeLoading: false,
+      segData: null,
+      gaugeRows: null,
+      shapeRows: null,
+      perfActiveTab: 'trend',
+      // 趋势参数树状态
+      trendGroups: TREND_GROUPS,
+      expandedGroups: { '张力': true, '速度': true, '拉矫机': true, '酸洗段': true },
+      selectedTrendParam: null,
+      trendChartInst: null,
+      _trendResizeFn: null,
+      chartInstances: [],
+      resizeHandler: null,
+      // 发货单绑定的销售信息
+      deliveryOrderInfo: {},
+      // 销售异议信息
+      salesObjectionInfo: [],
+    }
+  },
   computed: {
     salesInfo() {
       return this.coilInfo.orderList?.[0] || {};
@@ -1002,7 +1156,10 @@ export default {
     await this.getWarehouseTransferList();
     await this.getTransferOrderItemList();
     await this.getCoilQualityRejudgeList();
+    await this.fetchDeliveryOrderInfo();
     this.mergeTransferList();
+    await this.getSalesObjectionList();
+
     // 如果是冷硬卷，加载生产数据
     if (this.isColdHardCoil) {
       await this.loadProductionData();
@@ -1015,7 +1172,15 @@ export default {
   methods: {
     async getCoilInfo() {
       const res = await getMaterialCoil(this.coilId);
-      this.coilInfo = res.data;
+      this.coilInfo = res.data || {};
+    },
+    async fetchDeliveryOrderInfo() {
+      const res = await getDeliveryOrderInfo(this.coilId);
+      this.deliveryOrderInfo = res.data || {};
+    },
+    async getSalesObjectionList() {
+      const res = await listSalesObjection({ coilIds: this.coilId });
+      this.salesObjectionInfo = res.rows || [];
     },
     async getTraceInfo() {
       const res = await getMaterialCoilTrace({
@@ -1333,30 +1498,30 @@ export default {
     async loadProductionData() {
       const hotCoilId = this.coilInfo.enterCoilNo;
       if (!hotCoilId) return;
-      
+
       this.perfLoading = true;
       try {
         const detail = await getTimingPlanDetailByHotcoilId(hotCoilId);
         const encoilId = detail?.data?.firstRow?.coilid || '';
         // V_VBDA_GAUGE / V_VBDA_SHAPE 使用 EXCOILID 作为 MATID，对应入场卷号
         const excoilId = this.coilInfo.enterCoilNo;
-        
+
         const [segRes, realtimeRes] = await Promise.all([
           encoilId ? getTimingSegByEncoilId(encoilId) : Promise.resolve({ data: null }),
           encoilId ? getTimingRealtimeData(encoilId) : Promise.resolve({ data: null })
         ]);
-        
+
         const series = segRes?.data?.series || null;
         const rows = segRes?.data?.rows || [];
         this.perfSegCount = rows.length;
         this.perfSeries = series;
         this.segData = series;
-        
+
         const g = realtimeRes?.data?.gauge?.result;
         const s = realtimeRes?.data?.shape?.result;
         this.gaugeRows = Array.isArray(g) ? g : null;
         this.shapeRows = Array.isArray(s) ? s : null;
-        
+
         if (series && rows.length) {
           await this.$nextTick();
           this.selectTrendParam(TREND_GROUPS[0].children[0]);
@@ -1409,7 +1574,7 @@ export default {
       if (!this.selectedTrendParam || !this.segData) return;
       const el = this.$refs.trendSingleChart;
       if (!el) return;
-      
+
       if (!this.trendChartInst || this.trendChartInst.isDisposed()) {
         this.trendChartInst = echarts.init(el);
         const resizeFn = () => this.trendChartInst && !this.trendChartInst.isDisposed() && this.trendChartInst.resize();
@@ -1556,10 +1721,10 @@ export default {
           top: 'center',
           textStyle: { fontSize: 10 },
           inRange: {
-            color: ['#8B0000','#CC2200','#E84C00','#F46D43',
-                    '#FDAE61','#FEE08B',
-                    '#66BD63','#1A9850','#006837',
-                    '#3288BD','#5E4FA2','#762A83']
+            color: ['#8B0000', '#CC2200', '#E84C00', '#F46D43',
+              '#FDAE61', '#FEE08B',
+              '#66BD63', '#1A9850', '#006837',
+              '#3288BD', '#5E4FA2', '#762A83']
           }
         },
         grid3D: {
@@ -1808,9 +1973,12 @@ export default {
 }
 
 @keyframes bounce-in {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: translateY(0);
   }
+
   50% {
     transform: translateY(-4px);
   }
@@ -1850,9 +2018,12 @@ export default {
 }
 
 @keyframes pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.1);
   }
@@ -1999,6 +2170,7 @@ export default {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -2109,9 +2281,12 @@ export default {
 }
 
 @keyframes linePulse {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 0.4;
   }
+
   50% {
     opacity: 0.8;
   }
@@ -2506,6 +2681,377 @@ export default {
   margin-left: 4px;
 }
 
+/* 紧凑模式下的悬停卡片样式 */
+.coil-card-hover {
+  position: relative;
+  padding: 8px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.coil-card-hover:hover {
+  border-color: rgba(59, 130, 246, 0.5);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+  transform: translateY(-2px);
+}
+
+.coil-card-hover.old {
+  border-color: rgba(245, 158, 11, 0.3);
+  background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%);
+}
+
+.coil-card-hover.old:hover {
+  border-color: rgba(245, 158, 11, 0.5);
+  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
+}
+
+.coil-card-hover.new {
+  border-color: rgba(16, 185, 129, 0.3);
+  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
+}
+
+.coil-card-hover.new:hover {
+  border-color: rgba(16, 185, 129, 0.5);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+}
+
+.coil-mini-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.coil-mini-no {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+  font-family: 'Courier New', monospace;
+}
+
+.coil-mini-weight {
+  font-size: 12px;
+  font-weight: 600;
+  color: #d97706;
+  padding: 2px 6px;
+  background: rgba(245, 158, 11, 0.15);
+  border-radius: 4px;
+}
+
+.coil-mini-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.coil-mini-spec {
+  font-size: 11px;
+  color: #475569;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 3px;
+}
+
+.coil-mini-material {
+  font-size: 11px;
+  color: #475569;
+  padding: 2px 5px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 3px;
+}
+
+.coil-mini-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border-radius: 3px;
+}
+
+.coil-mini-status.status-success {
+  background: rgba(34, 197, 94, 0.15);
+  color: #22c55e;
+}
+
+.coil-mini-status.status-danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.coil-mini-status.status-warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.coil-mini-status.status-default {
+  background: rgba(100, 116, 139, 0.15);
+  color: #64748b;
+}
+
+/* 悬停弹窗样式 */
+.coil-detail-popup {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 8px;
+  background: #ffffff;
+  border: 1px solid rgba(59, 130, 246, 0.3);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+}
+
+.coil-card-hover:hover .coil-detail-popup {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px;
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
+  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 8px 8px 0 0;
+}
+
+.popup-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.popup-close {
+  font-size: 14px;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.popup-close:hover {
+  background: rgba(59, 130, 246, 0.1);
+  color: #64748b;
+}
+
+.popup-content {
+  padding: 10px 12px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.popup-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  border-bottom: 1px dashed rgba(59, 130, 246, 0.1);
+}
+
+.popup-row:last-child {
+  border-bottom: none;
+}
+
+.popup-label {
+  font-size: 11px;
+  color: #64748b;
+  min-width: 70px;
+}
+
+.popup-value {
+  font-size: 11px;
+  color: #1e293b;
+  font-weight: 500;
+  text-align: right;
+  flex: 1;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 紧凑模式变更结构（上下布局） */
+.step-content-compact-change {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.coil-change-wrapper {
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 8px;
+  padding: 8px;
+}
+
+.coil-change-wrapper.new {
+  border-color: rgba(16, 185, 129, 0.3);
+  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 50%, #ffffff 100%);
+}
+
+.coil-change-header {
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px dashed rgba(59, 130, 246, 0.2);
+}
+
+.change-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.coil-change-wrapper.new .change-label {
+  color: #10b981;
+}
+
+/* 紧凑模式操作中心 */
+.action-center-compact {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
+  border-radius: 8px;
+}
+
+.action-center-compact .action-arrow {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  border-radius: 50%;
+  margin-right: 10px;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
+}
+
+.action-center-compact .action-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action-center-compact .action-tag {
+  font-size: 11px;
+  margin-bottom: 2px;
+}
+
+.action-center-compact .action-operator,
+.action-center-compact .action-time {
+  font-size: 11px;
+  color: #64748b;
+}
+
+/* 紧凑模式 - 用于合卷段并排展示 */
+.step-content-compact {
+  flex-direction: column;
+  gap: 8px;
+}
+
+.step-content-compact .coil-card-wrapper {
+  width: 100%;
+  min-width: 240px;
+}
+
+.step-content-compact .coil-card-futuristic {
+  padding: 6px;
+}
+
+.step-content-compact .coil-futuristic-header {
+  padding: 4px 6px;
+  margin-bottom: 6px;
+}
+
+.step-content-compact .coil-futuristic-no {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.step-content-compact .coil-futuristic-weight {
+  font-size: 12px;
+  padding: 2px 6px;
+}
+
+.step-content-compact .coil-icon-container {
+  width: 50px;
+  height: 50px;
+}
+
+.step-content-compact .coil-svg {
+  width: 50px;
+  height: 50px;
+}
+
+.step-content-compact .coil-attr-tags {
+  padding-left: 55px;
+}
+
+.step-content-compact .attr-tag.attr-top-left,
+.step-content-compact .attr-tag.attr-top-right,
+.step-content-compact .attr-tag.attr-bottom-left,
+.step-content-compact .attr-tag.attr-bottom-right {
+  display: none;
+}
+
+.step-content-compact .attr-tag.attr-remark {
+  display: none;
+}
+
+.step-content-compact .coil-futuristic-footer {
+  padding: 4px 6px;
+}
+
+.step-content-compact .footer-item {
+  padding: 2px 4px;
+  margin-right: 6px;
+}
+
+.step-content-compact .footer-label {
+  font-size: 9px;
+}
+
+.step-content-compact .footer-value {
+  font-size: 10px;
+}
+
+.step-content-compact .action-center {
+  flex-direction: row;
+  padding: 6px 8px;
+  background: rgba(59, 130, 246, 0.08);
+  border-radius: 6px;
+}
+
+.step-content-compact .action-arrow {
+  width: 28px;
+  height: 28px;
+  margin-right: 8px;
+}
+
+.step-content-compact .action-info {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.step-content-compact .action-tag,
+.step-content-compact .action-operator,
+.step-content-compact .action-time {
+  font-size: 11px;
+}
+
 .production-section {
   min-height: 600px;
   flex: 1;
@@ -2526,12 +3072,14 @@ export default {
   ::v-deep .el-tabs__header {
     flex-shrink: 0;
   }
+
   ::v-deep .el-tabs__content {
     flex: 1;
     overflow: hidden;
     min-height: 0;
     padding: 0;
   }
+
   ::v-deep .el-tab-pane {
     height: 100%;
     min-height: 500px;
@@ -2553,14 +3101,16 @@ export default {
   padding: 4px 0;
   max-height: calc(100vh - 400px);
 
-  &::-webkit-scrollbar { 
+  &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
-  &::-webkit-scrollbar-thumb { 
-    background: #dcdfe6; 
-    border-radius: 2px; 
+
+  &::-webkit-scrollbar-thumb {
+    background: #dcdfe6;
+    border-radius: 2px;
   }
+
   &::-webkit-scrollbar-track {
     background: transparent;
   }
@@ -2580,12 +3130,19 @@ export default {
   color: #303133;
   cursor: pointer;
 
-  &:hover { background: #f5f7fa; }
+  &:hover {
+    background: #f5f7fa;
+  }
 
-  i { font-size: 10px; color: #909399; }
+  i {
+    font-size: 10px;
+    color: #909399;
+  }
 }
 
-.tree-children { padding-left: 4px; }
+.tree-children {
+  padding-left: 4px;
+}
 
 .tree-item {
   padding: 4px 8px 4px 18px;
@@ -2595,7 +3152,10 @@ export default {
   border-radius: 3px;
   margin: 1px 4px;
 
-  &:hover { background: #ecf5ff; color: #409eff; }
+  &:hover {
+    background: #ecf5ff;
+    color: #409eff;
+  }
 
   &.active {
     background: #ecf5ff;
@@ -2619,8 +3179,14 @@ export default {
   padding: 8px;
   box-sizing: border-box;
 
-  &::-webkit-scrollbar { width: 4px; }
-  &::-webkit-scrollbar-thumb { background: #dcdfe6; border-radius: 2px; }
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #dcdfe6;
+    border-radius: 2px;
+  }
 }
 
 .charts-grid {
@@ -2631,7 +3197,9 @@ export default {
   min-height: 100%;
   padding: 4px;
 
-  .chart-box { margin-bottom: 0; }
+  .chart-box {
+    margin-bottom: 0;
+  }
 }
 
 .chart-box {
@@ -2641,8 +3209,8 @@ export default {
   min-height: 200px;
 }
 
-.chart-box-tall { 
-  height: 480px; 
+.chart-box-tall {
+  height: 480px;
   min-height: 400px;
 }
 
diff --git a/klp-ui/src/views/wms/coil/panels/CoilTraceResult.vue b/klp-ui/src/views/wms/coil/panels/CoilTraceResult.vue
index c7bdb4a2..befb579f 100644
--- a/klp-ui/src/views/wms/coil/panels/CoilTraceResult.vue
+++ b/klp-ui/src/views/wms/coil/panels/CoilTraceResult.vue
@@ -1,51 +1,48 @@
 <template>
   <div class="trace-result-container">
-    <el-card shadow="hover" class="mb20" v-if="tracePanels && tracePanels.length > 0">
-      <div slot="header" class="card-header">
-        <span class="title-dot"></span>
-        <span class="title-text">钢卷追溯操作步骤</span>
+    <template v-for="(panel, pIdx) in tracePanels">
+      <!-- 线性段：单条时间线 -->
+      <div v-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
+        <el-card shadow="hover" v-for="(rawStep, idx) in panel.steps">
+          <template v-if="$scopedSlots.stepBody">
+            <slot name="stepBody" :step="formatStep(rawStep)" :compact="false" />
+          </template>
+          <trace-step-body v-else :standard-step="formatStep(rawStep)" :get-step-tag-type="getStepTagType"
+            :parse-changed-fields="parseChangedFields" />
+        </el-card>
       </div>
 
-      <template v-for="(panel, pIdx) in tracePanels">
-        <!-- 线性段：单条时间线 -->
-        <div v-if="panel.type === 'linear'" :key="'lin-' + pIdx" class="trace-panel-block">
-          <el-timeline v-loading="loadingCoilDetails">
-            <el-timeline-item v-for="(rawStep, idx) in panel.steps" :key="pIdx + '-' + idx"
-              :timestamp="stepTimestamp(rawStep)" placement="top">
-              <el-card shadow="hover">
-                <trace-step-body :standard-step="formatStep(rawStep)"
-                  :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" />
+      <!-- 合卷段：多列并排 + 合卷汇聚 -->
+      <div v-else-if="panel.type === 'merge_join'" :key="'mj-' + pIdx" class="trace-panel-block merge-join-block">
+        <div class="merge-caption">合卷前各卷加工过程（并排展示）</div>
+        <div class="merge-lanes-container">
+          <div v-for="(lane, li) in panel.lanes" :key="li" class="merge-lane">
+            <div class="lane-header-tag">
+              {{ (panel.laneLabels && panel.laneLabels[li]) || ('来源 ' + (li + 1)) }}
+            </div>
+            <div class="lane-steps-stack">
+              <el-card v-for="(rawStep, si) in lane" :key="si" shadow="hover" class="lane-step-card mb10">
+                <template v-if="$scopedSlots.stepBody">
+                  <slot name="stepBody" :step="formatStep(rawStep)" :compact="true" />
+                </template>
+                <trace-step-body v-else :standard-step="formatStep(rawStep)" :get-step-tag-type="getStepTagType"
+                  :parse-changed-fields="parseChangedFields" compact />
               </el-card>
-            </el-timeline-item>
-          </el-timeline>
-        </div>
-
-        <!-- 合卷段：多列并排 + 合卷汇聚 -->
-        <div v-else-if="panel.type === 'merge_join'" :key="'mj-' + pIdx" class="trace-panel-block merge-join-block">
-          <div class="merge-caption">合卷前各卷加工过程（并排展示）</div>
-          <el-row :gutter="12" type="flex" class="merge-lanes-row">
-            <el-col v-for="(lane, li) in panel.lanes" :key="li" :span="laneColSpan(panel.lanes.length)" class="merge-lane-col">
-              <div class="lane-header-tag">
-                {{ (panel.laneLabels && panel.laneLabels[li]) || ('来源 ' + (li + 1)) }}
-              </div>
-              <div class="lane-steps-stack">
-                <el-card v-for="(rawStep, si) in lane" :key="si" shadow="hover" class="lane-step-card mb10">
-                  <trace-step-body :standard-step="formatStep(rawStep)"
-                    :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" compact />
-                </el-card>
-              </div>
-            </el-col>
-          </el-row>
-          <div class="merge-converge">
-            <el-divider content-position="center">合卷汇聚</el-divider>
-            <el-card shadow="hover">
-              <trace-step-body :standard-step="formatStep(panel.mergeStep)"
-                :get-step-tag-type="getStepTagType" :parse-changed-fields="parseChangedFields" />
-            </el-card>
+            </div>
           </div>
         </div>
-      </template>
-    </el-card>
+        <div class="merge-converge">
+          <el-divider content-position="center">合卷汇聚</el-divider>
+          <el-card shadow="hover">
+            <template v-if="$scopedSlots.stepBody">
+              <slot name="stepBody" :step="formatStep(panel.mergeStep)" :compact="false" />
+            </template>
+            <trace-step-body v-else :standard-step="formatStep(panel.mergeStep)" :get-step-tag-type="getStepTagType"
+              :parse-changed-fields="parseChangedFields" />
+          </el-card>
+        </div>
+      </div>
+    </template>
 
     <div class="empty-tip" v-if="!tracePanels || tracePanels.length === 0">
       <el-empty description="未找到相关钢卷记录"></el-empty>
@@ -112,10 +109,6 @@ export default {
       const d = rawStep.display_step != null ? rawStep.display_step : rawStep.step;
       return `步骤 ${d}`;
     },
-    laneColSpan(laneCount) {
-      const n = Math.max(1, laneCount || 1);
-      return Math.max(1, Math.floor(24 / n));
-    },
     // 根据操作类型获取标签样式
     getStepTagType(action) {
       const typeMap = {
@@ -433,12 +426,39 @@ export default {
   font-weight: 500;
 }
 
-.merge-lanes-row {
+.merge-lanes-container {
+  display: flex;
+  gap: 12px;
   align-items: flex-start;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(59, 130, 246, 0.4) rgba(59, 130, 246, 0.1);
 }
 
-.merge-lane-col {
+.merge-lanes-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-track {
+  background: rgba(59, 130, 246, 0.1);
+  border-radius: 3px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.4);
+  border-radius: 3px;
+}
+
+.merge-lanes-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.6);
+}
+
+.merge-lane {
+  flex: 1;
   min-width: 0;
+  min-width: 200px;
 }
 
 .lane-header-tag {