refactor(business): 优化派车信息展示和样式布局

- 将基本信息部分整体包裹在section-card内并调整布局顺序
- 调整收发货路线结构，合并地址和联系人信息至路线节点内
- 使用CSS grid替代部分flex布局，优化网格间距和对齐
- 更新文字换行和溢出处理，增强可读性
- 删除冗余的收发货路线详细信息区域，精简代码结构
- 统一section-card的样式和内部内容伸缩布局
- 调整附件显示方式，保证链接样式一致性

src/views/business/components/business-crud-page.vue

@@ -2114,7 +2114,8 @@
             </div>
           </div>
 
-          <section-card title="基本信息">
+          <div class="business-crud-page__dispatch-summary">
+            <section-card title="基本信息" class="business-crud-page__dispatch-summary-card">
               <div class="business-crud-page__dispatch-summary-grid">
                 <div class="business-crud-page__dispatch-summary-item">
                   <div class="business-crud-page__dispatch-summary-label">客户</div>
@@ -2134,6 +2135,12 @@
                     {{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
                   </div>
                 </div>
+                <div class="business-crud-page__dispatch-summary-item is-wide">
+                  <div class="business-crud-page__dispatch-summary-label">货物信息</div>
+                  <div class="business-crud-page__dispatch-summary-value">
+                    {{ dispatchPlanCargoInfo || '-' }}
+                  </div>
+                </div>
                 <div class="business-crud-page__dispatch-summary-item">
                   <div class="business-crud-page__dispatch-summary-label">计划执行时间</div>
                   <div class="business-crud-page__dispatch-summary-value">
@@ -2144,12 +2151,6 @@
                     }}
                   </div>
                 </div>
-              <div class="business-crud-page__dispatch-summary-item is-wide">
-                <div class="business-crud-page__dispatch-summary-label">货物信息</div>
-                <div class="business-crud-page__dispatch-summary-value">
-                  {{ dispatchPlanCargoInfo || '-' }}
-                </div>
-              </div>
                 <div
                   class="business-crud-page__dispatch-summary-item business-crud-page__dispatch-summary-item--attachments"
                 >
@@ -2172,39 +2173,33 @@
               </div>
             </section-card>
 
-          <section-card title="收发货路线">
+            <section-card title="收发货路线" class="business-crud-page__dispatch-route-card">
               <div class="business-crud-page__dispatch-route">
-              <div class="business-crud-page__dispatch-route-main">
+                <div class="business-crud-page__dispatch-route-item">
-                <div class="business-crud-page__dispatch-route-node">
                   <span class="business-crud-page__dispatch-route-badge is-start">起</span>
+                  <div class="business-crud-page__dispatch-route-body">
                     <div class="business-crud-page__dispatch-route-title">
                       {{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }}
                     </div>
-                </div>
+                    <div class="business-crud-page__dispatch-route-address">
-                <div class="business-crud-page__dispatch-route-line" />
-                <div class="business-crud-page__dispatch-route-node">
-                  <span class="business-crud-page__dispatch-route-badge is-end">终</span>
-                  <div class="business-crud-page__dispatch-route-title">
-                    {{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }}
-                  </div>
-                </div>
-              </div>
-              <div class="business-crud-page__dispatch-route-detail">
-                <div class="business-crud-page__dispatch-route-detail-item">
-                  <div class="business-crud-page__dispatch-route-detail-label">发货地址</div>
-                  <div class="business-crud-page__dispatch-route-detail-value">
                       {{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }}
                     </div>
-                  <div class="business-crud-page__dispatch-route-detail-contact">
+                    <div class="business-crud-page__dispatch-route-contact">
                       {{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }}
                     </div>
                   </div>
-                <div class="business-crud-page__dispatch-route-detail-item">
+                </div>
-                  <div class="business-crud-page__dispatch-route-detail-label">收货地址</div>
+                <div class="business-crud-page__dispatch-route-line" />
-                  <div class="business-crud-page__dispatch-route-detail-value">
+                <div class="business-crud-page__dispatch-route-item">
+                  <span class="business-crud-page__dispatch-route-badge is-end">终</span>
+                  <div class="business-crud-page__dispatch-route-body">
+                    <div class="business-crud-page__dispatch-route-title">
+                      {{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }}
+                    </div>
+                    <div class="business-crud-page__dispatch-route-address">
                       {{ parseDispatchRoutePoint(dispatchRow, 'end').address || '-' }}
                     </div>
-                  <div class="business-crud-page__dispatch-route-detail-contact">
+                    <div class="business-crud-page__dispatch-route-contact">
                       {{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
                     </div>
                   </div>
@@ -2212,6 +2207,7 @@
               </div>
             </section-card>
           </div>
+        </div>
 
         <section-card title="待调度列表">
           <template #extra>
@@ -9359,13 +9355,27 @@ export default {
   }
 
   &__dispatch-summary {
+    display: grid;
+    grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr);
+    gap: 16px;
+    align-items: stretch;
     margin-bottom: 12px;
   }
 
+  &__dispatch-summary-card,
+  &__dispatch-route-card {
+    display: flex;
+    flex-direction: column;
+
+    :deep(.section-card__body) {
+      flex: 1;
+    }
+  }
+
   &__dispatch-summary-grid {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 12px 24px;
+    gap: 12px 16px;
   }
 
   &__dispatch-summary-item {
@@ -9386,7 +9396,7 @@ export default {
   &__dispatch-summary-value {
     min-height: 20px;
     font-size: 14px;
-    line-height: 1.4;
+    line-height: 1.45;
     color: #303133;
     word-break: break-word;
   }
@@ -9403,23 +9413,19 @@ export default {
   }
 
   &__dispatch-route {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
-    gap: 16px;
+    gap: 12px;
+    align-items: center;
+    justify-items: center;
+    height: 100%;
   }
 
-  &__dispatch-route-main {
+  &__dispatch-route-item {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-    justify-content: center;
-    gap: 16px;
-  }
-
-  &__dispatch-route-node {
-    display: flex;
-    align-items: center;
     gap: 10px;
-    min-width: 0;
+    max-width: 100%;
   }
 
   &__dispatch-route-badge {
@@ -9443,21 +9449,36 @@ export default {
     }
   }
 
+  &__dispatch-route-body {
+    min-width: 0;
+    text-align: left;
+  }
+
   &__dispatch-route-title {
     font-size: 16px;
     line-height: 1.3;
     color: #303133;
     font-weight: 600;
-    white-space: nowrap;
+    word-break: break-word;
-    overflow: hidden;
+  }
-    text-overflow: ellipsis;
+
+  &__dispatch-route-address {
+    margin-top: 6px;
+    font-size: 13px;
+    line-height: 1.45;
+    color: #606266;
+  }
+
+  &__dispatch-route-contact {
+    margin-top: 4px;
+    font-size: 13px;
+    color: #606266;
   }
 
   &__dispatch-route-line {
     position: relative;
-    flex: 0 0 80px;
+    width: 56px;
     height: 2px;
-    max-width: 120px;
     background-image: linear-gradient(
       to right,
       var(--el-color-primary) 0,
@@ -9476,35 +9497,6 @@ export default {
     }
   }
 
-  &__dispatch-route-detail {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 12px 24px;
-  }
-
-  &__dispatch-route-detail-item {
-    min-width: 0;
-  }
-
-  &__dispatch-route-detail-label {
-    margin-bottom: 4px;
-    font-size: 12px;
-    color: #909399;
-  }
-
-  &__dispatch-route-detail-value {
-    font-size: 14px;
-    line-height: 1.4;
-    color: #303133;
-    word-break: break-word;
-  }
-
-  &__dispatch-route-detail-contact {
-    margin-top: 4px;
-    font-size: 13px;
-    color: #606266;
-  }
-
   &__dispatch-list-head {
     display: flex;
     align-items: center;