优化

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

@@ -261,15 +261,15 @@ async function confirmFee() {
 </template>
 
 <style scoped>
-.inbound-billing-panel { margin-top: 22px; }
+.inbound-billing-panel { margin-top: 14px; }
 .inbound-billing-heading, .inbound-section-title, .fee-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .inbound-billing-actions { display: flex; align-items: center; gap: 10px; }
 .inbound-billing-heading h3, .inbound-result-section h4 { margin: 0; color: var(--navy); }
-.inbound-billing-heading h3 { font-size: 15px; }
+.inbound-billing-heading h3 { font-size: 13px; }
 .inbound-result-section h4 { font-size: 13px; }
 .inbound-billing-loading { min-height: 180px; padding: 18px 0; }
 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
-.inbound-billing-state { display: grid; min-height: 112px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; margin-top: 12px; padding: 18px; border: 1px dashed #cbd5da; }
+.inbound-billing-state { display: grid; min-height: 48px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border: 1px dashed #cbd5da; }
 .inbound-billing-state > svg { color: var(--primary); }
 .inbound-billing-state > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
 .inbound-billing-state strong { color: var(--navy); font-size: 13px; }

src/modules/first-leg/components/InboundCodeAssociationDialog.test.mjs

@@ -13,11 +13,11 @@ test('loads only the customer-scoped server association and fails closed', () =>
 })
 
 test('renders business identifiers and names without internal long identifiers', () => {
-  for (const label of ['入仓码', '订单号', '订单状态', '客户名称', '目的国家', '目的仓']) {
+  for (const label of ['入仓码', '订单状态', '客户名称', '目的国家', '目的仓']) {
     assert.match(source, new RegExp(label))
   }
   assert.match(source, /association\.inboundCode/)
-  assert.match(source, /association\.orderNo/)
+  assert.doesNotMatch(source, /association\.orderNo/)
   assert.match(source, /association\.customerName/)
   assert.match(source, /destinationWarehouseCode/)
   assert.match(source, /destinationWarehouseName/)

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

@@ -86,7 +86,6 @@ watch(() => [props.modelValue, props.inboundCode] as const, ([open]) => {
           <div><span>入仓码</span><strong>{{ displayValue(association.inboundCode) }}</strong></div>
         </header>
         <dl class="inbound-association-grid">
-          <div><dt>订单号</dt><dd>{{ displayValue(association.orderNo) }}</dd></div>
           <div><dt>订单状态</dt><dd>{{ statusLabel(association.orderStatus) }}</dd></div>
           <div><dt>客户名称</dt><dd>{{ displayValue(association.customerName) }}</dd></div>
           <div><dt>目的国家</dt><dd>{{ displayValue(association.destinationCountryCode) }}</dd></div>

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

@@ -5,8 +5,6 @@ import type { FirstLegOrder } from '@/modules/first-leg/types/firstLegOrder'
 import {
   FIRST_LEG_PROGRESS_STAGES,
   getFirstLegProgressIndex,
-  getFirstLegStatusLabel,
-  getFirstLegStatusTone,
 } from '@/modules/first-leg/utils/firstLegOrder'
 
 const props = defineProps<{ order: FirstLegOrder }>()
@@ -23,12 +21,9 @@ function stageState(index: number) {
   <section class="order-progress" aria-labelledby="order-progress-title">
     <div class="progress-heading">
       <div>
-        <h3 id="order-progress-title">订单进度</h3>
-        <span>国内入仓、组托、装柜及后续履约同步</span>
+        <h3 id="order-progress-title">履约进度</h3>
+        <span>订单主节点与关联柜次统一展示</span>
       </div>
-      <el-tag :type="getFirstLegStatusTone(order.status)" effect="light">
-        {{ getFirstLegStatusLabel(order.status) }}
-      </el-tag>
     </div>
 
     <ol class="progress-stages" aria-label="订单主状态阶段">
@@ -38,28 +33,29 @@ function stageState(index: number) {
       </li>
     </ol>
     <p v-if="order.status === 'DRAFT'" class="draft-progress-note">订单提交后开始记录主状态进度。</p>
-
+    <div class="progress-cabinet-detail"><slot name="cabinet" /></div>
   </section>
 </template>
 
 <style scoped>
-.order-progress { margin-top: 22px; }
+.order-progress { margin-top: 14px; }
 .progress-heading { display: flex; align-items: center; }
 .progress-heading { justify-content: space-between; gap: 14px; }
 .progress-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
 .progress-heading h3 { margin: 0; color: var(--navy); }
-.progress-heading h3 { font-size: 15px; }
+.progress-heading h3 { font-size: 13px; }
 .progress-heading span { color: var(--muted); font-size: 11px; }
-.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 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(76px, 1fr); margin: 9px 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: 4px; color: #96a0a6; font-size: 10px; text-align: center; }
+.progress-stages li::before { position: absolute; top: 8px; right: 50%; left: -50%; height: 2px; background: #e1e6e8; content: ''; }
 .progress-stages li:first-child::before { display: none; }
 .progress-stages li.is-complete::before, .progress-stages li.is-current::before { background: var(--primary); }
-.stage-marker { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #d9e0e2; border-radius: 50%; background: #fff; }
+.stage-marker { position: relative; z-index: 1; display: grid; width: 18px; height: 18px; place-items: center; border: 2px solid #d9e0e2; border-radius: 50%; background: #fff; }
 .is-complete .stage-marker, .is-current .stage-marker { border-color: var(--primary); color: var(--primary); }
 .is-complete .stage-marker { background: var(--primary); color: #fff; }
 .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; }
+.draft-progress-note { margin: 8px 0 0; padding: 7px 9px; background: #f6f8f8; color: var(--muted); font-size: 10px; }
+.progress-cabinet-detail { margin-top: 9px; }
 @media (max-width: 720px) {
   .progress-stages { grid-auto-columns: 82px; padding-bottom: 8px; }
   .progress-heading { align-items: flex-start; }