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

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

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

@@ -2114,103 +2114,99 @@
             </div>
           </div>
 
-          <section-card title="基本信息">
-            <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>
-                <div class="business-crud-page__dispatch-summary-value">
-                  {{ dispatchRow.customerName || '-' }}
+          <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>
+                  <div class="business-crud-page__dispatch-summary-value">
+                    {{ dispatchRow.customerName || '-' }}
+                  </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">
+                    {{ dispatchRow.projectName || '-' }}
+                  </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">
+                    {{ 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">
+                    {{
+                      [dispatchRow.planStartDate, dispatchRow.planEndDate]
+                        .filter(Boolean)
+                        .join(' ~ ') || '-'
+                    }}
+                  </div>
+                </div>
+                <div
+                  class="business-crud-page__dispatch-summary-item business-crud-page__dispatch-summary-item--attachments"
+                >
+                  <div class="business-crud-page__dispatch-summary-label">附件</div>
+                  <div class="business-crud-page__dispatch-summary-value">
+                    <el-link
+                      v-for="(item, index) in dispatchAttachmentRows"
+                      :key="dispatchAttachmentLabel(item) + index"
+                      type="primary"
+                      :href="dispatchAttachmentUrl(item) || undefined"
+                      :underline="false"
+                      target="_blank"
+                      class="business-crud-page__dispatch-attachment-link"
+                    >
+                      {{ dispatchAttachmentLabel(item) }}
+                    </el-link>
+                    <span v-if="!dispatchAttachmentRows.length">-</span>
+                  </div>
                 </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">
-                  {{ dispatchRow.projectName || '-' }}
-                </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">
-                  {{ dispatchRow.contractName || dispatchRow.contractNo || '-' }}
-                </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">
-                  {{
-                    [dispatchRow.planStartDate, dispatchRow.planEndDate]
-                      .filter(Boolean)
-                      .join(' ~ ') || '-'
-                  }}
-                </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"
-              >
-                <div class="business-crud-page__dispatch-summary-label">附件</div>
-                <div class="business-crud-page__dispatch-summary-value">
-                  <el-link
-                    v-for="(item, index) in dispatchAttachmentRows"
-                    :key="dispatchAttachmentLabel(item) + index"
-                    type="primary"
-                    :href="dispatchAttachmentUrl(item) || undefined"
-                    :underline="false"
-                    target="_blank"
-                    class="business-crud-page__dispatch-attachment-link"
-                  >
-                    {{ dispatchAttachmentLabel(item) }}
-                  </el-link>
-                  <span v-if="!dispatchAttachmentRows.length">-</span>
-                </div>
-              </div>
-            </div>
-          </section-card>
+            </section-card>
 
-          <section-card title="收发货路线">
-            <div class="business-crud-page__dispatch-route">
-              <div class="business-crud-page__dispatch-route-main">
-                <div class="business-crud-page__dispatch-route-node">
+            <section-card title="收发货路线" class="business-crud-page__dispatch-route-card">
+              <div class="business-crud-page__dispatch-route">
+                <div class="business-crud-page__dispatch-route-item">
                   <span class="business-crud-page__dispatch-route-badge is-start">起</span>
-                  <div class="business-crud-page__dispatch-route-title">
-                    {{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }}
+                  <div class="business-crud-page__dispatch-route-body">
+                    <div class="business-crud-page__dispatch-route-title">
+                      {{ parseDispatchRoutePoint(dispatchRow, 'start').name || '-' }}
+                    </div>
+                    <div class="business-crud-page__dispatch-route-address">
+                      {{ parseDispatchRoutePoint(dispatchRow, 'start').address || '-' }}
+                    </div>
+                    <div class="business-crud-page__dispatch-route-contact">
+                      {{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }}
+                    </div>
                   </div>
                 </div>
                 <div class="business-crud-page__dispatch-route-line" />
-                <div class="business-crud-page__dispatch-route-node">
+                <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-title">
-                    {{ parseDispatchRoutePoint(dispatchRow, 'end').name || '-' }}
+                  <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-contact">
+                      {{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
+                    </div>
                   </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">
-                    {{ parseDispatchRoutePoint(dispatchRow, 'start').contact || '-' }}
-                  </div>
-                </div>
-                <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, 'end').address || '-' }}
-                  </div>
-                  <div class="business-crud-page__dispatch-route-detail-contact">
-                    {{ parseDispatchRoutePoint(dispatchRow, 'end').contact || '-' }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section-card>
+            </section-card>
+          </div>
         </div>
 
         <section-card title="待调度列表">
@@ -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));
-    gap: 12px 24px;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    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;
-    flex-direction: column;
-    gap: 16px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
+    gap: 12px;
+    align-items: center;
+    justify-items: center;
+    height: 100%;
   }
 
-  &__dispatch-route-main {
+  &__dispatch-route-item {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-  }
-
-  &__dispatch-route-node {
-    display: flex;
-    align-items: center;
+    align-items: flex-start;
     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;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  &__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;