优化

src/modules/cross-border/components/BusinessOrdersView.vue

@@ -68,7 +68,9 @@ function transportColumns(looseboard: boolean): ColumnDefinition[] {
     ]),
     { key: 'status', label: '状态', width: 130 },
     ...(!looseboard ? [{ key: 'failureReason', label: '失败 / 拒绝原因', width: 240 }] : []),
-    { key: 'fleetArrangement', label: '承运安排', width: 190 },
+    ...(looseboard
+      ? [{ key: 'fleetArrangement', label: '承运安排', width: 190 }]
+      : [{ key: 'createdAt', label: '创建时间', width: 180 }]),
   ]
 }
 
@@ -99,7 +101,7 @@ const queryModel = computed<QueryModel>({
 
 const queryFields = computed<QueryField[]>(() => [
   { key: 'orderNo', label: '订单号', type: 'input', placeholder: '请输入订单号' },
-  { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: props.kind === 'trucking' ? '请输入 B 点或 C 点' : '请输入起运地或目的地' },
+  { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: props.kind === 'trucking' ? '请输入取货地或目的地' : '请输入起运地或目的地' },
   {
     key: 'status',
     label: '状态',
@@ -312,9 +314,8 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
     <section v-else-if="mode === 'detail'" class="business-detail-page" aria-label="订单详情">
       <header class="business-detail-heading">
         <div class="business-detail-heading-main"><el-button link type="primary" @click="returnToList">← 返回列表</el-button><div><h2>{{ detail?.summary.orderNo || '订单详情' }}</h2></div></div>
-        <el-tag :type="statusTone(detail?.summary.status)" effect="light">{{ detailStatus }}</el-tag>
+        <div class="business-detail-heading-actions"><el-tag :type="statusTone(detail?.summary.status)" effect="light">{{ detailStatus }}</el-tag><el-button :disabled="loading" @click="loadDetail">刷新</el-button></div>
       </header>
-      <el-button :disabled="loading" @click="loadDetail">刷新</el-button>
       <OrderFundingStatus v-if="kind === 'trucking' && detail" kind="trucking" :order-no="detail.summary.orderNo" :status="detail.summary.status" :can-retry="canCreate" @changed="loadDetail" />
       <div v-if="error" class="business-detail-error" role="alert"><strong>{{ error }}</strong><el-button size="small" @click="loadDetail">重新加载</el-button></div>
       <section v-else class="business-detail-section">
@@ -363,6 +364,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .business-detail-heading { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--border); }
 .business-detail-heading-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
 .business-detail-heading-main > div { min-width: 0; }
+.business-detail-heading-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
 .business-detail-heading h2 { margin: 0; overflow: hidden; color: var(--navy); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
 .business-detail-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
 .business-detail-section { margin-top: 10px; }
@@ -382,6 +384,21 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .business-orders--create .page-head :deep(.el-button) { height: auto; min-height: 44px; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; }
 .business-orders--create .form-card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
 
+/* The detail page is intentionally calmer than the list: the order identity is
+   separated from the data grid, while values remain easy to scan at desktop size. */
+.business-detail-page { padding: 18px 20px 24px; border-color: #dbe4ef; border-radius: 10px; box-shadow: 0 2px 8px rgb(15 42 74 / 4%); }
+.business-detail-heading { min-height: 58px; padding: 0 0 14px; border-bottom-color: #e5ebf3; }
+.business-detail-heading-main { gap: 18px; }
+.business-detail-heading-main :deep(.el-button) { padding: 0; font-size: 14px; }
+.business-detail-heading h2 { font-size: 22px; letter-spacing: .01em; }
+.business-detail-section { margin-top: 20px; }
+.business-detail-section h3 { padding: 0 0 10px; border-bottom: 0; font-size: 15px; }
+.detail-grid { border-color: #e2e8f0; }
+.detail-grid div { min-height: 46px; gap: 12px; padding: 8px 14px; background: #fff; border-color: #e2e8f0; }
+.detail-grid dt { color: #718096; font-size: 12px; }
+.detail-grid dd { color: #1f3552; font-size: 14px; font-weight: 600; }
+.arrangement-grid { background: #f8fafc; }
+
 @media (max-width: 767px) {
   .business-orders { gap: 14px; }
   .page-head { align-items: flex-start; gap: 12px; }
@@ -392,6 +409,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
   .detail-grid div, .detail-grid div.is-wide { grid-column: auto; }
   .detail-grid dd { overflow-wrap: break-word; word-break: normal; }
   .business-detail-heading { align-items: flex-start; flex-direction: column; }
+  .business-detail-heading-actions { width: 100%; justify-content: space-between; }
 
   .form-card :deep(.el-form-item) { display: block; }
   .form-card :deep(.el-form-item__label) {