Merge branch 'release/test' of http://8.163.30.128:10082/html/client-web into release/test

src/modules/first-leg/api/unifiedOrders.ts

@@ -9,6 +9,7 @@ export type ApiUnifiedOrderMainStatus =
   | 'LOADING'
   | 'LOADED'
   | 'DELIVERED'
+  | 'COMPLETED'
 
 export interface MerchantUnifiedMeasurementSummary {
   reviewStatus: string | null

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>

src/modules/first-leg/store/firstLegOrders.test.mjs

@@ -60,7 +60,7 @@ test('maps transport and status fields instead of treating container mode as tra
   assert.match(storeSource, /status === 'SUBMITTED'\) return 'PENDING_REVIEW'/)
   assert.match(storeSource, /status === 'REJECTED'\) return 'PENDING_REVIEW'/)
   assert.match(storeSource, /status === 'APPROVED' \|\| status === 'ACCEPTED' \|\| status === 'PROCESSING'\) return 'WAIT_MEASURE'/)
-  assert.match(storeSource, /status === 'COMPLETED'\) return 'LOADED'/)
+  assert.match(storeSource, /status === 'COMPLETED'\) return 'COMPLETED'/)
   assert.doesNotMatch(storeSource, /status === 'COMPLETED'\) return 'DELIVERED'/)
 })
 

src/modules/first-leg/store/firstLegOrders.ts

@@ -45,7 +45,7 @@ function clientStatus(status: ApiFirstLegStatus): FirstLegOrder['status'] {
   // 后端联调任务曾出现 REJECTED，但一期已确认订单不设驳回状态；兼容旧数据时仍按待审核展示。
   if (status === 'REJECTED') return 'PENDING_REVIEW'
   if (status === 'APPROVED' || status === 'ACCEPTED' || status === 'PROCESSING') return 'WAIT_MEASURE'
-  if (status === 'COMPLETED') return 'LOADED'
+  if (status === 'COMPLETED') return 'COMPLETED'
   if (status === 'CANCELLED') return 'PENDING_REVIEW'
   return 'PENDING_REVIEW'
 }

src/modules/first-leg/utils/firstLegOrder.test.mjs

@@ -8,6 +8,7 @@ import {
   FIRST_LEG_PROGRESS_STAGES,
   getFirstLegProgressIndex,
   getFirstLegStatusLabel,
+  getFirstLegStatusTone,
   getFirstLegTransportModeLabel,
   summarizeFirstLegCargo,
   validateFirstLegOrderDraft,
@@ -67,7 +68,7 @@ test('uses the confirmed status and transport labels', () => {
   assert.equal(getFirstLegStatusLabel('DELIVERED'), '派送完成')
   assert.equal(getFirstLegTransportModeLabel('FCL'), '海运整箱 FCL')
   assert.deepEqual(FIRST_LEG_PROGRESS_STAGES.map((item) => item.code), [
-    'PENDING_REVIEW', 'WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING', 'LOADED', 'DELIVERED',
+    'PENDING_REVIEW', 'WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING', 'LOADED', 'DELIVERED', 'COMPLETED',
   ])
   assert.equal(getFirstLegProgressIndex('WAIT_PALLETIZE'), 2)
 })
@@ -197,3 +198,17 @@ test('counts one physical carton series for SKU lines in the same mixed-carton g
   second.packageCount = 9
   assert.ok(validateFirstLegOrderDraft(draft).includes('同箱 SKU 的箱数、包装类型、箱规、重量和体积必须一致'))
 })
+
+test('distinguishes first-leg draft, review, active handling and completion', () => {
+  assert.equal(getFirstLegStatusTone('DRAFT'), 'info')
+  assert.equal(getFirstLegStatusTone('PENDING_REVIEW'), 'warning')
+  for (const status of ['WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING']) {
+    assert.equal(getFirstLegStatusTone(status), 'primary')
+  }
+  assert.equal(getFirstLegStatusTone('LOADED'), 'success')
+  assert.equal(getFirstLegStatusTone('DELIVERED'), 'success')
+  assert.equal(getFirstLegStatusTone('COMPLETED'), 'success')
+  assert.equal(getFirstLegStatusLabel('COMPLETED'), '已完成')
+  assert.equal(getFirstLegStatusLabel('UNRECOGNIZED'), '未知状态')
+  assert.equal(getFirstLegStatusTone('UNRECOGNIZED'), 'info')
+})

src/modules/first-leg/utils/firstLegOrder.ts

@@ -15,7 +15,7 @@ const transportModeLabels = new Map<FirstLegTransportMode, string>(
 )
 
 export function getFirstLegStatusLabel(status: FirstLegOrderStatus) {
-  return statusLabels.get(status) ?? status
+  return statusLabels.get(status) ?? '未知状态'
 }
 
 export function getFirstLegTransportModeLabel(mode: FirstLegTransportMode | null) {
@@ -23,9 +23,11 @@ export function getFirstLegTransportModeLabel(mode: FirstLegTransportMode | null
   return transportModeLabels.get(mode) ?? mode
 }
 
-export function getFirstLegStatusTone(status: FirstLegOrderStatus): 'success' | 'warning' | 'info' | 'danger' {
-  if (status === 'DELIVERED') return 'success'
-  if (status === 'DRAFT' || status === 'PENDING_REVIEW') return 'warning'
+export function getFirstLegStatusTone(status: FirstLegOrderStatus): 'success' | 'warning' | 'info' | 'primary' {
+  if (status === 'DELIVERED' || status === 'LOADED' || status === 'COMPLETED') return 'success'
+  if (status === 'DRAFT') return 'info'
+  if (status === 'PENDING_REVIEW') return 'warning'
+  if (['WAIT_MEASURE', 'WAIT_PALLETIZE', 'WAIT_SPLIT', 'LOADING'].includes(status)) return 'primary'
   return 'info'
 }
 

src/modules/first-leg/views/FirstLegOrdersView.test.mjs

@@ -3,6 +3,8 @@ import { readFileSync } from 'node:fs'
 import test from 'node:test'
 
 const source = readFileSync(new URL('./FirstLegOrdersView.vue', import.meta.url), 'utf8')
+const tableSource = readFileSync(new URL('../../../components/common/DataTable.vue', import.meta.url), 'utf8')
+const querySource = readFileSync(new URL('../../../components/common/QueryToolbar.vue', import.meta.url), 'utf8')
 const routerSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf8')
 const editorShellSource = readFileSync(new URL('../components/FirstLegOrderEditorShell.vue', import.meta.url), 'utf8')
 const progressSource = readFileSync(new URL('../components/OrderProgressPanel.vue', import.meta.url), 'utf8')
@@ -70,7 +72,7 @@ test('renders dynamic cargo lines and a responsive editor dialog', () => {
   assert.match(editorShellSource, /first-leg-editor-dialog\.el-dialog\) \{[^}]*height: 94vh;/)
   assert.match(editorShellSource, /width: 100vw !important; height: 100vh;/)
   assert.match(source, /class="mobile-order-list"/)
-  assert.match(source, /\.desktop-order-table \{ display: none; \}/)
+  assert.match(source, /\.prototype-order-table :deep\(> \.el-table\), \.prototype-order-table :deep\(> \.data-table__pagination\) \{ display: none; \}/)
 })
 
 test('uses the full editor dialog width for cargo details and cost estimates', () => {
@@ -89,11 +91,11 @@ test('uses the shared query toolbar and data table without metric cards', () =>
   assert.match(source, /import QueryToolbar, \{ type QueryField, type QueryModel \}/)
   assert.match(source, /import DataTable, \{ type DataTableColumn \}/)
   assert.match(source, /const filters = ref<QueryModel>/)
-  assert.match(source, /<QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" \/>/)
+  assert.match(source, /<QueryToolbar v-model="filters" class="first-leg-query-toolbar" layout="grid" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" \/>/)
   assert.match(source, /async function searchOrders\(model: QueryModel\)/)
   assert.match(source, /await store\.load\(\{/)
   assert.match(source, /<DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns"/)
-  assert.match(source, /\{ key: 'actions', label: '操作', width: 216, fixed: 'left', align: 'center', headerAlign: 'center', slotName: 'actions' \}/)
+  assert.match(source, /\{ key: 'actions', label: '操作', width: 284, fixed: 'left', align: 'left', headerAlign: 'left', slotName: 'actions' \}/)
   assert.doesNotMatch(source, /order-metrics|订单概览/)
 })
 
@@ -188,7 +190,7 @@ test('keeps dense order identifiers on one line and aligns columns by content ty
   assert.doesNotMatch(source, /<template #order="\{ row \}">[\s\S]{0,400}class="order-reference"/)
   assert.match(source, /\.table-ellipsis, \.table-multivalue \{[^}]*text-overflow: ellipsis;[^}]*white-space: nowrap;/)
   assert.match(source, /\.order-number-link \{[^}]*text-overflow: ellipsis;[^}]*white-space: nowrap;/)
-  assert.match(source, /\.prototype-order-table :deep\(\.el-table__body-wrapper td\.el-table__cell\) \{ height: 50px;/)
+  assert.match(tableSource, /height: var\(--client-table-row-height\)/)
 })
 
 test('shows one unified progress line and C02 business summaries without detail history', () => {
@@ -231,26 +233,26 @@ test('shows and searches the inbound code after a draft is submitted', () => {
   assert.match(source, /<span v-else>—<\/span>/)
 })
 
-test('keeps the seven-stage progress and business summary usable on mobile', () => {
-  assert.match(progressSource, /grid-template-columns: repeat\(7, 82px\)/)
+test('keeps all progress stages and business summary usable on mobile', () => {
+  assert.match(progressSource, /grid-auto-columns: 82px/)
   assert.match(progressSource, /overflow-x: auto/)
   assert.match(source, /\.fulfillment-summary \{ grid-template-columns: 1fr; \}/)
 })
 
 test('keeps the first viewport compact and moves create into the table toolbar', () => {
-  const tableToolbarSource = source.slice(source.indexOf('class="order-table-toolbar"'), source.indexOf('class="order-eligibility is-pending"'))
-  assert.match(source, /class="order-table-toolbar"/)
+  const tableToolbarSource = source.slice(source.indexOf('#toolbar-actions'), source.indexOf('class="order-eligibility is-pending"'))
+  assert.match(source, /#toolbar-actions/)
   assert.match(source, /<strong>订单列表<\/strong><span>共 \{\{ filteredOrders\.length \}\} 条<\/span>/)
-  assert.match(source, /class="order-table-toolbar"[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
+  assert.match(source, /#toolbar-actions[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
   assert.match(tableToolbarSource, /下载唛头[\s\S]*导出订单信息[\s\S]*批量提交草稿[\s\S]*创建订单/)
   assert.doesNotMatch(source.slice(source.indexOf('<QueryToolbar'), source.indexOf('<div class="client-card order-table-card">')), /下载唛头|导出订单信息|创建订单/)
   assert.match(source, /client-main:has\(> \.first-leg-page:not\(\.is-create-route\)\) > \.client-page-heading > div\) \{ position: absolute; width: 1px; height: 1px;/)
 })
 
 test('uses the prototype query grid and only shows the qualification notice before approval', () => {
-  assert.match(source, /\.first-leg-query-toolbar \{ display: block;/)
-  assert.match(source, /query-toolbar__filters\) \{ display: grid; min-width: 0; grid-template-columns: repeat\(4,/)
-  assert.match(source, /query-toolbar__actions\) \{ justify-content: flex-start; margin-top: 14px;/)
+  assert.match(querySource, /\.query-toolbar--grid \{ display: block;/)
+  assert.match(querySource, /query-toolbar__filters \{ display: grid; grid-template-columns: repeat\(4,/)
+  assert.match(querySource, /query-toolbar__actions \{ margin-top: 12px;/)
   assert.match(source, /v-if="companySubmissionBlocked && !supportingDataErrors\.some/)
   assert.doesNotMatch(source, /企业资料已审核，可正常提交订单/)
   assert.doesNotMatch(source, /order-eligibility\.is-approved/)
@@ -399,6 +401,9 @@ test('loads only active server channels for the selected domestic warehouse', ()
   assert.match(source, /availablePricingTaxModes/)
   assert.match(source, /:loading="channelLoading"/)
   assert.match(source, /:disabled="!form\.receivingWarehouseId \|\| channelLoading"/)
+  assert.match(source, /label="报价包税方式" prop="pricingTaxMode" required class="pricing-tax-mode-field"/)
+  assert.match(source, /\.compact-transport-grid > :deep\(\.pricing-tax-mode-field\) \{ display: none; \}/)
+  assert.doesNotMatch(source, /\.compact-transport-grid > :deep\(\.el-form-item:nth-child\(2\)\)/)
   assert.match(source, /当前收货仓暂无可用渠道/)
   assert.match(source, /渠道加载失败/)
   assert.match(source, /@click="retryPricingChannels"/)
@@ -537,7 +542,9 @@ test('opens billing-weight confirmation independently from order details', () =>
 test('shows billing-weight confirmation only when the backend marks it pending', () => {
   const templateSource = source.slice(source.indexOf('<template>'), source.lastIndexOf('</template>'))
   const entries = templateSource.match(/<el-button v-if="canConfirmInboundFee && [^"]*customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation\([^)]*\)">确认计费重<\/el-button>/g) ?? []
-  assert.equal(entries.length, 2)
+  assert.equal(entries.length, 1)
+  assert.match(source, /if \(canConfirmInboundFee\.value && order\.businessSummary\.customerFeeConfirmationRequired\) \{\s*actions\.push\(\{ key: 'fee'/)
+  assert.match(source, /:row-actions="getOrderRowActions"/)
   assert.match(orderStoreSource, /customerFeeConfirmationRequired: summary\?\.customerFeeConfirmationRequired \?\? false/)
 })
 
@@ -595,7 +602,7 @@ test('opens customer customs documents only for server-confirmed loaded tax-refu
   assert.match(source, /order\.status !== 'LOADED'/)
   assert.match(source, /item\.orderId === order\.id && item\.taxMode === 'TAX_REFUND'/)
   assert.match(source, /getMerchantCustomsForOrder\(order\.id\)/)
-  assert.match(source, /v-if="eligibleCustomsDetail\(row as FirstLegOrder\)"[\s\S]*?报关资料/)
+  assert.match(source, /if \(eligibleCustomsDetail\(order\)\) \{\s*actions\.push\(\{ key: 'customs', label: '报关资料'/)
   assert.match(source, /class="mobile-order-card"[\s\S]*?v-if="eligibleCustomsDetail\(order\)"[\s\S]*?openCustomsDocuments\(order\)[\s\S]*?报关资料/)
   assert.match(source, /<CustomsDocumentsDialog[\s\S]*?:can-edit="auth\.hasPermission\('order:first-leg:edit'\)"/)
   assert.doesNotMatch(customsApiSource, /customs\/cases\//)

src/modules/first-leg/views/FirstLegOrdersView.vue

@@ -2,10 +2,11 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type FormInstance, type FormItemRule, type FormRules, type UploadRequestOptions } from 'element-plus'
-import { AlertTriangle, Box, ChevronDown, ChevronUp, Download, Eye, FilePlus2, FileText, GripVertical, ImagePlus, MapPin, PackageCheck, Pencil, Plus, RotateCcw, Send, SlidersHorizontal, Trash2, Upload } from '@lucide/vue'
+import { AlertTriangle, Box, ChevronDown, ChevronUp, Download, FilePlus2, FileText, GripVertical, ImagePlus, MapPin, PackageCheck, Pencil, Plus, RotateCcw, Send, SlidersHorizontal, Trash2, Upload } from '@lucide/vue'
 import { FIRST_LEG_ORDER_STATUSES, type FirstLegOrderStatus } from '@chongchong/shared'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import type { TableAction } from '@/components/common/tableActions'
 import { ApiError } from '@/api/http'
 import FirstLegOrderEditorShell from '@/modules/first-leg/components/FirstLegOrderEditorShell.vue'
 import InboundBillingPanel from '@/modules/first-leg/components/InboundBillingPanel.vue'
@@ -110,11 +111,12 @@ const batchImportResult = ref<MerchantBatchImportResponse | null>(null)
 const batchImportError = ref('')
 const fixedOrderColumns: DataTableColumn[] = [
   { key: 'selection', type: 'selection', width: 48, fixed: 'left', reserveSelection: true },
-  { key: 'actions', label: '操作', width: 216, fixed: 'left', align: 'center', headerAlign: 'center', slotName: 'actions' },
-  { key: 'order', label: '订单号', width: 190, fixed: 'left', align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'order' },
+  { key: 'actions', label: '操作', width: 284, fixed: 'left', align: 'left', headerAlign: 'left', slotName: 'actions' },
+  { key: 'order', label: '订单号', width: 240, fixed: 'left', align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'order' },
 ]
 const selectableOrderColumns: DataTableColumn[] = [
-  { key: 'inboundCode', label: '入仓码', width: 176, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'inboundCode' },
+  { key: 'inboundCode', label: '入仓码', width: 230, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'inboundCode' },
+  { key: 'status', label: '当前订单状态', width: 126, align: 'center', headerAlign: 'center', slotName: 'status' },
   { key: 'channel', label: '渠道', width: 150, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'channel' },
   { key: 'transportMode', label: '运输方式', width: 104, align: 'center', headerAlign: 'center', slotName: 'transportMode' },
   { key: 'pickupMethod', label: '交货方式', width: 112, align: 'center', headerAlign: 'center', slotName: 'pickupMethod' },
@@ -122,7 +124,6 @@ const selectableOrderColumns: DataTableColumn[] = [
   { key: 'receivingWarehouse', label: '国内收货仓', width: 150, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'receivingWarehouse' },
   { key: 'destinationWarehouse', label: '目的仓', width: 120, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'destinationWarehouse' },
   { key: 'destinationType', label: '目的仓类型', width: 112, align: 'center', headerAlign: 'center', slotName: 'destinationType' },
-  { key: 'status', label: '当前订单状态', width: 126, align: 'center', headerAlign: 'center', slotName: 'status' },
   { key: 'packageCount', label: '箱数', width: 82, align: 'center', headerAlign: 'center', slotName: 'packageCount' },
   { key: 'expressCompany', label: '快递公司', width: 128, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'expressCompany' },
   { key: 'trackingNumber', label: '快递单号', width: 158, align: 'left', headerAlign: 'left', showOverflowTooltip: true, slotName: 'trackingNumber' },
@@ -1157,6 +1158,23 @@ async function autofillWarehouseSelections() {
   markEditorClean()
 }
 
+function getOrderRowActions(row: object): TableAction[] {
+  const order = row as FirstLegOrder
+  const actions: TableAction[] = [
+    { key: 'detail', label: '详情', run: () => openDetail(order) },
+  ]
+  if (canConfirmInboundFee.value && order.businessSummary.customerFeeConfirmationRequired) {
+    actions.push({ key: 'fee', label: '确认计费重', run: () => openFeeConfirmation(order) })
+  }
+  if (canEditOrder.value && canClientEditFirstLegOrder(order.status)) {
+    actions.push({ key: 'edit', label: '编辑', loading: openingEditor.value, run: () => openEdit(order) })
+  }
+  if (eligibleCustomsDetail(order)) {
+    actions.push({ key: 'customs', label: '报关资料', run: () => openCustomsDocuments(order) })
+  }
+  return actions
+}
+
 async function openCreate() {
   if (availableWarehouses.value.length === 0) {
     ElMessage.warning(supportingDataLoading.value
@@ -1860,14 +1878,14 @@ async function searchOrders(model: QueryModel) {
 </script>
 
 <template>
-  <section class="first-leg-page" :class="{ 'is-create-route': isCreatePage }">
+  <section class="first-leg-page" :class="{ 'is-create-route': isCreatePage, 'client-ui': !isCreatePage }">
     <template v-if="!isCreatePage">
-    <QueryToolbar v-model="filters" class="first-leg-query-toolbar" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" />
+    <QueryToolbar v-model="filters" class="first-leg-query-toolbar" layout="grid" :fields="queryFields" ariaLabel="订单查询" @search="searchOrders" />
 
     <div class="client-card order-table-card">
-      <div class="order-table-toolbar">
-        <div><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span></div>
-        <div class="order-table-toolbar-actions">
+        <DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns" :key="orderTableVersion" :loading="store.loading" :total="filteredOrders.length" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无订单" class="prototype-order-table" :row-actions="getOrderRowActions" @selection-change="handleOrderSelectionChange">
+          <template #toolbar><strong>订单列表</strong><span>共 {{ filteredOrders.length }} 条</span><span v-if="selectedOrderCount">已选 {{ selectedOrderCount }} 条</span></template>
+          <template #toolbar-actions>
           <el-popover placement="bottom-end" :width="320" trigger="click" popper-class="order-column-popper">
             <template #reference>
               <el-button class="column-settings-trigger" aria-label="设置订单列表显示列" title="设置显示列"><SlidersHorizontal :size="18" /></el-button>
@@ -1899,8 +1917,9 @@ async function searchOrders(model: QueryModel) {
           <el-button v-if="canSubmitOrder" :loading="batchSubmitting" :disabled="selectedDraftOrders.length === 0 || companySubmissionBlocked" @click="submitSelectedDraftOrders"><Send :size="17" />批量提交草稿</el-button>
           <el-button v-if="auth.hasPermission('order:first-leg:create')" @click="openBatchImport"><Upload :size="17" />批量导入订单</el-button>
           <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :loading="pageDataLoading" :disabled="pageDataLoading || availableWarehouses.length === 0" @click="openCreate"><FilePlus2 :size="17" />创建订单</el-button>
-        </div>
-      </div>
+
+          </template>
+          <template #before-table>
       <div v-if="companySubmissionBlocked && !supportingDataErrors.some((message) => message.startsWith('企业资料'))" class="order-eligibility is-pending" role="status">
         <AlertTriangle :size="20" />
         <div><strong>{{ canCreateOrder ? '企业资料待审核，当前仅可保存订单草稿' : '企业资料待审核，当前订单为只读' }}</strong><span>{{ canCreateOrder ? '平台审核通过后即可提交；您仍可创建、编辑和保存草稿。' : '您当前拥有只读权限，可以继续查看订单进展。' }}</span></div>
@@ -1911,21 +1930,15 @@ async function searchOrders(model: QueryModel) {
         <div><strong>部分订单配套数据加载失败</strong><span v-for="message in supportingDataErrors" :key="message">{{ message }}</span></div>
         <el-button :loading="supportingDataLoading || store.loading" @click="loadPageData">重新加载</el-button>
       </div>
-      <div v-if="store.loadError" class="order-load-state" role="alert">
+
+          </template>
+          <template v-if="store.loadError" #error>
+      <div class="order-load-state" role="alert">
         <AlertTriangle :size="24" />
         <div><strong>订单数据加载失败</strong><span>{{ store.loadError }}</span></div>
         <el-button :loading="store.loading" @click="loadPageData">重新加载</el-button>
       </div>
-      <template v-else>
-      <div class="desktop-order-table">
-        <DataTable v-model:page="tablePage" v-model:page-size="tablePageSize" :data="pagedOrders" :columns="visibleOrderColumns" :key="orderTableVersion" :loading="store.loading" :total="filteredOrders.length" :page-sizes="[10, 20, 50]" row-key="id" empty-text="暂无订单" class="prototype-order-table" @selection-change="handleOrderSelectionChange">
-          <template #actions="{ row }">
-            <div class="order-row-actions">
-              <el-button link type="primary" @click="openDetail(row as FirstLegOrder)"><Eye :size="15" />详情</el-button>
-              <el-button v-if="canConfirmInboundFee && (row as FirstLegOrder).businessSummary.customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation(row as FirstLegOrder)">确认计费重</el-button>
-              <el-button v-if="canEditOrder && canClientEditFirstLegOrder((row as FirstLegOrder).status)" link type="primary" :loading="openingEditor" @click="openEdit(row as FirstLegOrder)"><Pencil :size="15" />编辑</el-button>
-              <el-button v-if="eligibleCustomsDetail(row as FirstLegOrder)" link type="primary" @click="openCustomsDocuments(row as FirstLegOrder)"><FileText :size="15" />报关资料</el-button>
-            </div>
+
           </template>
           <template #order="{ row }">
             <button class="order-number-link table-code" type="button" :title="(row as FirstLegOrder).orderNo || '—'" @click="openDetail(row as FirstLegOrder)">{{ (row as FirstLegOrder).orderNo || '—' }}</button>
@@ -1947,7 +1960,7 @@ async function searchOrders(model: QueryModel) {
           <template #receivingWarehouse="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).receivingWarehouseName)">{{ displayListValue((row as FirstLegOrder).receivingWarehouseName) }}</span></template>
           <template #destinationWarehouse="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).destinationWarehouseName)">{{ displayListValue((row as FirstLegOrder).destinationWarehouseName) }}</span></template>
           <template #destinationType="{ row }">{{ destinationTypeLabels[(row as FirstLegOrder).destinationType] }}</template>
-          <template #status="{ row }"><el-tag :type="getFirstLegStatusTone((row as FirstLegOrder).status)" effect="light">{{ getFirstLegStatusLabel((row as FirstLegOrder).status) }}</el-tag></template>
+          <template #status="{ row }"><span class="client-status" :data-tone="getFirstLegStatusTone((row as FirstLegOrder).status)">{{ getFirstLegStatusLabel((row as FirstLegOrder).status) }}</span></template>
           <template #packageCount="{ row }">{{ formatListMetric(orderPackageCount(row as FirstLegOrder)) }}</template>
           <template #expressCompany="{ row }"><span class="table-ellipsis" :title="displayListValue((row as FirstLegOrder).expressCompanyName)">{{ displayListValue((row as FirstLegOrder).expressCompanyName) }}</span></template>
           <template #trackingNumber="{ row }"><span class="table-ellipsis table-code" :title="displayListValue((row as FirstLegOrder).trackingNumber)">{{ displayListValue((row as FirstLegOrder).trackingNumber) }}</span></template>
@@ -1975,8 +1988,7 @@ async function searchOrders(model: QueryModel) {
             </el-empty>
           </template>
         </DataTable>
-      </div>
-      <div v-loading="store.loading" class="mobile-order-surface">
+      <div v-if="!store.loadError" v-loading="store.loading" class="mobile-order-surface">
       <div v-if="filteredOrders.length" class="mobile-order-list">
         <article v-for="order in filteredOrders" :key="order.id" class="mobile-order-card">
           <header><button type="button" @click="openDetail(order)">{{ order.orderNo || '—' }}</button><el-tag :type="getFirstLegStatusTone(order.status)" effect="light">{{ getFirstLegStatusLabel(order.status) }}</el-tag></header>
@@ -1987,10 +1999,10 @@ async function searchOrders(model: QueryModel) {
           <footer>
             <span>更新于 {{ formatDateTime(order.updatedAt) }}</span>
             <div>
-              <el-button link type="primary" @click="openDetail(order)"><Eye :size="15" />详情</el-button>
+              <el-button link type="primary" @click="openDetail(order)">详情</el-button>
               <el-button v-if="canConfirmInboundFee && order.businessSummary.customerFeeConfirmationRequired" link type="primary" @click="openFeeConfirmation(order)">确认计费重</el-button>
-              <el-button v-if="canEditOrder && canClientEditFirstLegOrder(order.status)" link type="primary" :loading="openingEditor" @click="openEdit(order)"><Pencil :size="15" />编辑</el-button>
-              <el-button v-if="eligibleCustomsDetail(order)" link type="primary" @click="openCustomsDocuments(order)"><FileText :size="15" />报关资料</el-button>
+              <el-button v-if="canEditOrder && canClientEditFirstLegOrder(order.status)" link type="primary" :loading="openingEditor" @click="openEdit(order)">编辑</el-button>
+              <el-button v-if="eligibleCustomsDetail(order)" link type="primary" @click="openCustomsDocuments(order)">报关资料</el-button>
             </div>
           </footer>
         </article>
@@ -1999,7 +2011,6 @@ async function searchOrders(model: QueryModel) {
         <el-button v-if="auth.hasPermission('order:first-leg:create')" type="primary" :loading="pageDataLoading" :disabled="pageDataLoading || availableWarehouses.length === 0" @click="openCreate"><Plus :size="16" />{{ pageDataLoading ? '加载收货仓中' : (availableWarehouses.length ? '创建第一笔订单' : '暂无可用收货仓') }}</el-button>
       </el-empty>
       </div>
-      </template>
     </div>
     </template>
 
@@ -2040,7 +2051,7 @@ async function searchOrders(model: QueryModel) {
               <small v-if="channelError" class="field-guidance field-guidance--error">渠道加载失败：{{ channelError }} <el-button link type="primary" @click="retryPricingChannels">重试</el-button></small>
               <small v-else-if="form.receivingWarehouseId && !channelLoading && channelOptions.length === 0" class="field-guidance">当前收货仓暂无可用渠道，请联系平台管理员。</small>
             </el-form-item>
-            <el-form-item label="报价包税方式" prop="pricingTaxMode" required>
+            <el-form-item label="报价包税方式" prop="pricingTaxMode" required class="pricing-tax-mode-field">
               <el-radio-group v-model="form.pricingTaxMode"><el-radio v-for="mode in availablePricingTaxModes" :key="mode" :value="mode">{{ pricingTaxModeLabel(mode) }}</el-radio></el-radio-group>
               <small v-if="form.channelCode && availablePricingTaxModes.length === 0" class="field-guidance field-guidance--error">当前渠道没有可用报价方式，请重新选择渠道。</small>
             </el-form-item>
@@ -2339,17 +2350,9 @@ async function searchOrders(model: QueryModel) {
 </template>
 
 <style scoped>
-.first-leg-page { display: flex; flex-direction: column; gap: 14px; }
+.first-leg-page { display: flex; flex-direction: column; gap: var(--client-section-gap); }
 :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 0; }
 :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading > div) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
-.first-leg-query-toolbar { display: block; padding: 16px 18px 14px; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 3px 14px rgba(31, 48, 78, .05); }
-.first-leg-query-toolbar :deep(.query-toolbar__filters) { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
-.first-leg-query-toolbar :deep(.query-toolbar__field) { min-width: 0; }
-.first-leg-query-toolbar :deep(.query-toolbar__field .el-input), .first-leg-query-toolbar :deep(.query-toolbar__field .el-select), .first-leg-query-toolbar :deep(.query-toolbar__field .el-date-editor) { flex: 1 1 auto; width: 100%; }
-.first-leg-query-toolbar :deep(.query-toolbar__filters .el-input), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-select), .first-leg-query-toolbar :deep(.query-toolbar__filters .el-date-editor) { width: 100%; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions) { justify-content: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf0f5; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions .el-button) { min-height: 36px; margin-left: 0; }
-.first-leg-query-toolbar :deep(.query-toolbar__actions .query-export-button) { order: -1; }
 .order-eligibility { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; }
 .order-eligibility svg { flex: 0 0 20px; margin-top: 1px; }
 .order-eligibility div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
@@ -2361,13 +2364,7 @@ async function searchOrders(model: QueryModel) {
 .supporting-data-error strong { color: var(--navy); font-size: 13px; }
 .supporting-data-error span { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
 .order-row-actions, .editor-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.order-table-card { padding: 0; overflow: hidden; }
-.order-table-toolbar { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
-.order-table-toolbar > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
-.order-table-toolbar strong { color: var(--navy); font-size: 14px; }
-.order-table-toolbar span { color: var(--muted); font-size: 11px; }
-.order-table-toolbar > .order-table-toolbar-actions { align-items: center; gap: 8px; }
-.order-table-toolbar-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.order-table-card { padding: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); box-shadow: none; }
 .batch-import-dialog { display: flex; flex-direction: column; gap: 18px; }
 .batch-import-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px; }
 .batch-import-actions > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
@@ -2390,17 +2387,6 @@ async function searchOrders(model: QueryModel) {
 :global(.order-column-popper .column-settings-item .el-checkbox.is-checked .el-checkbox__label) { color: var(--primary); }
 :global(.order-column-popper .column-settings-item .el-button) { width: 28px; height: 28px; padding: 0; margin: 0; color: #45556e; }
 :global(.order-column-popper .column-settings-reset) { min-height: 36px; margin: 8px 6px 0; color: #40516b; }
-.prototype-order-table { font-size: 11px; }
-.prototype-order-table :deep(.el-table) { color: #626b78; font-size: 11px; }
-.prototype-order-table :deep(.el-table__header-wrapper th.el-table__cell) { height: 44px; padding: 0; background: #fafbfc; color: #687386; font-size: 11px; font-weight: 650; vertical-align: middle; }
-.prototype-order-table :deep(.el-table__body-wrapper td.el-table__cell) { height: 50px; padding: 0; vertical-align: middle; }
-.prototype-order-table :deep(.el-table .cell) { min-width: 0; padding: 0 12px; line-height: 18px; white-space: nowrap; }
-.prototype-order-table :deep(.el-table__header-wrapper .cell) { overflow: visible; line-height: 16px; text-overflow: clip; }
-.prototype-order-table :deep(.el-table__body-wrapper .cell) { overflow: hidden; }
-.prototype-order-table :deep(.el-tag) { height: 24px; padding: 0 9px; line-height: 22px; white-space: nowrap; }
-.prototype-order-table :deep(.el-table__row:nth-child(even) td.el-table__cell) { background: #fcfcfd; }
-.prototype-order-table :deep(.el-table__row:hover > td.el-table__cell) { background: #f6f8fc; }
-.prototype-order-table :deep(.data-table__pagination) { min-height: 54px; padding: 10px 16px; }
 .table-ellipsis, .table-multivalue { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .table-code { font-variant-numeric: tabular-nums; letter-spacing: 0; }
 .order-table-card > .order-eligibility, .order-table-card > .supporting-data-error { border-width: 0 0 1px; }
@@ -2418,8 +2404,8 @@ async function searchOrders(model: QueryModel) {
 :global(.first-leg-detail-dialog .el-dialog__footer) { flex: 0 0 auto; padding: 12px 22px; border-top: 1px solid var(--border); background: #fff; }
 .mobile-order-surface { display: none; min-height: 220px; }
 .mobile-order-list { display: none; }
-.order-number-link { display: block; width: 100%; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 700; line-height: 18px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
-.inbound-code-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; }
+.order-number-link { display: block; width: 100%; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--client-action); cursor: pointer; font-size: var(--client-font-size); font-weight: 700; line-height: 18px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
+.inbound-code-link { max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--client-action); cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; }
 .inbound-code-link:hover, .inbound-code-link:focus-visible { text-decoration-color: currentColor; }
 .inbound-code-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
 .order-number-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@@ -2509,7 +2495,7 @@ async function searchOrders(model: QueryModel) {
 .shipping-form-flow .prototype-form-row--tabs { margin-bottom: 12px; }
 .compact-transport-grid { display: grid; width: 100%; grid-template-columns: 1fr; gap: 0; margin: 6px 0 0; }
 .compact-transport-grid > :deep(.el-form-item) { display: grid; width: 100%; grid-template-columns: 114px minmax(0, 560px); align-items: start; margin-bottom: 10px; }
-.compact-transport-grid > :deep(.el-form-item:nth-child(2)) { display: none; }
+.compact-transport-grid > :deep(.pricing-tax-mode-field) { display: none; }
 .compact-transport-grid > :deep(.el-form-item:nth-child(1)) { grid-template-columns: 114px minmax(0, 360px); }
 .compact-transport-grid > :deep(.el-form-item:nth-child(6)) { grid-template-columns: 114px minmax(0, 360px); }
 .compact-transport-grid > :deep(.el-form-item:nth-child(7)) { grid-template-columns: 114px minmax(0, 620px); margin-top: 2px; margin-bottom: 0; }
@@ -2643,7 +2629,7 @@ async function searchOrders(model: QueryModel) {
 :deep(.el-timeline-item__content > span) { font-size: 11px; }
 @media (max-width: 1280px) {
   .first-leg-query-toolbar :deep(.query-toolbar__filters) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .desktop-order-table { display: none; }
+  .prototype-order-table :deep(> .el-table), .prototype-order-table :deep(> .data-table__pagination) { display: none; }
   .mobile-order-surface { display: block; }
   .mobile-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; }
   .mobile-order-card { min-width: 0; padding: 14px; border: 1px solid var(--border); background: #fff; }
@@ -2666,9 +2652,6 @@ async function searchOrders(model: QueryModel) {
   .first-leg-query-toolbar { padding: 12px; }
   .first-leg-query-toolbar :deep(.query-toolbar__filters) { display: flex; }
   :global(.client-main:has(> .first-leg-page:not(.is-create-route)) > .client-page-heading) { margin-bottom: 10px; }
-  .order-table-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
-  .order-table-toolbar > div { justify-content: space-between; }
-  .order-table-toolbar .el-button { width: 100%; min-height: 40px; }
   .order-eligibility { flex-wrap: wrap; }
   .order-eligibility .el-button { width: 100%; min-height: 44px; }
   .order-form-grid, .order-detail-grid, .cargo-form-grid, .cargo-form-grid--basic, .party-detail-grid { grid-template-columns: 1fr; }
@@ -2686,7 +2669,7 @@ async function searchOrders(model: QueryModel) {
   .segmented-options :deep(.el-radio-button__inner) { border: 1px solid var(--border); border-radius: 6px !important; box-shadow: none !important; }
   .warehouse-options { width: 100%; gap: 12px 18px; }
   .compact-transport-grid > :deep(.el-form-item), .compact-transport-grid > :deep(.el-form-item:nth-child(7)) { display: block; margin-bottom: 14px; }
-.compact-transport-grid > :deep(.el-form-item:nth-child(2)) { display: none; }
+.compact-transport-grid > :deep(.pricing-tax-mode-field) { display: none; }
   .compact-transport-grid > :deep(.el-form-item__label) { min-height: auto; justify-content: flex-start; padding: 0 0 8px; line-height: 1.4; }
   .cargo-table-toolbar { align-items: stretch; flex-direction: column; }
   .cargo-import-actions, .cargo-table-actions { flex-wrap: wrap; }
@@ -2697,7 +2680,7 @@ async function searchOrders(model: QueryModel) {
   .price-estimate__state.is-error { align-items: flex-start; flex-direction: column; }
   .form-span-full { grid-column: auto; }
   .editor-actions :deep(.el-button) { min-height: 44px; }
-  .desktop-order-table { display: none; }
+  .prototype-order-table :deep(> .el-table), .prototype-order-table :deep(> .data-table__pagination) { display: none; }
   .order-load-state { min-height: 240px; grid-template-columns: 1fr; justify-items: start; }
   .supporting-data-error { grid-template-columns: auto minmax(0, 1fr); }
   .supporting-data-error .el-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }