修正客户端订单完成状态与首屏关键列展示

src/modules/first-leg/components/OrderProgressPanel.vue

@@ -6,6 +6,7 @@ import {
   FIRST_LEG_PROGRESS_STAGES,
   getFirstLegProgressIndex,
   getFirstLegStatusLabel,
+  getFirstLegStatusTone,
 } from '@/modules/first-leg/utils/firstLegOrder'
 
 const props = defineProps<{ order: FirstLegOrder }>()
@@ -25,7 +26,7 @@ function stageState(index: number) {
         <h3 id="order-progress-title">订单进度</h3>
         <span>国内入仓、组托、装柜及后续履约同步</span>
       </div>
-      <el-tag :type="order.status === 'DELIVERED' ? 'success' : order.status === 'DRAFT' || order.status === 'PENDING_REVIEW' ? 'warning' : 'info'" effect="light">
+      <el-tag :type="getFirstLegStatusTone(order.status)" effect="light">
         {{ getFirstLegStatusLabel(order.status) }}
       </el-tag>
     </div>
@@ -49,7 +50,7 @@ function stageState(index: number) {
 .progress-heading h3 { margin: 0; color: var(--navy); }
 .progress-heading h3 { font-size: 15px; }
 .progress-heading span { color: var(--muted); font-size: 11px; }
-.progress-stages { display: grid; grid-template-columns: repeat(7, minmax(76px, 1fr)); margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
+.progress-stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(76px, 1fr); margin: 16px 0 0; padding: 0; overflow-x: auto; list-style: none; }
 .progress-stages li { position: relative; display: flex; min-width: 76px; align-items: center; flex-direction: column; gap: 7px; color: #96a0a6; font-size: 10px; text-align: center; }
 .progress-stages li::before { position: absolute; top: 10px; right: 50%; left: -50%; height: 2px; background: #e1e6e8; content: ''; }
 .progress-stages li:first-child::before { display: none; }
@@ -60,7 +61,7 @@ function stageState(index: number) {
 .is-current .stage-label { color: var(--navy); font-weight: 700; }
 .draft-progress-note { margin: 12px 0 0; padding: 10px 12px; background: #f6f8f8; color: var(--muted); font-size: 11px; }
 @media (max-width: 720px) {
-  .progress-stages { grid-template-columns: repeat(7, 82px); padding-bottom: 8px; }
+  .progress-stages { grid-auto-columns: 82px; padding-bottom: 8px; }
   .progress-heading { align-items: flex-start; }
 }
 </style>