优化

src/components/common/DataTable.vue

@@ -142,7 +142,7 @@ function setPage(value: number) {
 </script>
 
 <template>
-  <div class="data-table">
+  <div class="data-table" :class="$attrs.class">
     <header v-if="$slots.toolbar || $slots['toolbar-actions']" class="data-table__toolbar">
       <div class="data-table__toolbar-heading"><slot name="toolbar" /></div>
       <div class="data-table__toolbar-actions"><slot name="toolbar-actions" /></div>
@@ -150,7 +150,7 @@ function setPage(value: number) {
     <slot name="before-table" />
     <slot v-if="$slots.error" name="error" />
     <template v-else>
-    <el-table v-bind="$attrs" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
+    <el-table v-bind="{ ...$attrs, class: undefined }" v-loading="loading" :data="data" :empty-text="emptyText" :aria-busy="loading">
       <el-table-column
         v-for="(column, index) in columns"
         :key="columnRenderKey(column, index)"
@@ -232,7 +232,8 @@ function setPage(value: number) {
 .data-table__toolbar-heading :slotted(strong) { color: var(--client-text); font-size: 14px; }
 .data-table__toolbar-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .data-table__row-actions { display: flex; align-items: center; gap: var(--client-gap); white-space: nowrap; }
-.data-table__row-actions :deep(.el-button) { height: var(--client-row-action-height); padding: 0 8px; margin: 0 !important; }
+.data-table__row-actions :deep(.el-button) { height: var(--client-row-action-height); padding: 0 8px; margin: 0; }
+.data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-button), .data-table :deep(.data-table__system-cell .data-table__row-actions .el-button + .el-dropdown) { margin-left: 0; }
 .data-table__more { min-width: 28px; }
 :global(.client-ui .data-table .el-table) { color: var(--client-text); font-size: var(--client-font-size); --el-table-border-color: var(--client-border); --el-table-header-bg-color: var(--client-header-bg); --el-table-row-hover-bg-color: var(--client-hover-bg); }
 :global(.client-ui .data-table th.el-table__cell) { height: var(--client-table-header-height); padding: 0; color: var(--client-muted); font-weight: 600; }

src/components/common/tableActions.test.mjs

@@ -0,0 +1,28 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { splitTableActions, runTableAction } from './tableActions.ts'
+
+test('shows up to three permitted actions and folds only when there are more', () => {
+  const actions = Array.from({ length: 5 }, (_, index) => ({ key: String(index), label: String(index), run() {} }))
+  for (const count of [0, 1, 2, 3]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.equal(result.visible.length, count)
+    assert.equal(result.overflow.length, 0)
+  }
+  for (const count of [4, 5]) {
+    const result = splitTableActions(actions.slice(0, count))
+    assert.deepEqual(result.visible, actions.slice(0, 2))
+    assert.deepEqual(result.overflow, actions.slice(2, count))
+  }
+})
+
+test('disabled and loading actions cannot execute or disappear from the layout', () => {
+  let count = 0
+  const action = { key: 'edit', label: '编辑', run() { count++ } }
+  runTableAction({ ...action, disabled: true })
+  runTableAction({ ...action, loading: true })
+  assert.equal(count, 0)
+  runTableAction(action)
+  assert.equal(count, 1)
+  assert.equal(splitTableActions([{ ...action, disabled: true }]).visible.length, 1)
+})

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

@@ -8,6 +8,7 @@ import {
   FIRST_LEG_PROGRESS_STAGES,
   getFirstLegProgressIndex,
   getFirstLegStatusLabel,
+  getFirstLegStatusTone,
   getFirstLegTransportModeLabel,
   summarizeFirstLegCargo,
   validateFirstLegOrderDraft,
@@ -197,3 +198,14 @@ 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('UNRECOGNIZED'), 'info')
+})

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

@@ -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') 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', () => {
@@ -238,19 +240,19 @@ test('keeps the seven-stage progress and business summary usable on mobile', ()
 })
 
 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/)
@@ -536,7 +538,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/)
 })
 
@@ -594,7 +598,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

@@ -1156,6 +1156,23 @@ async function autofillWarehouseSelections() {
   markEditorClean()
 }
 
+function getOrderRowActions(row: object): TableAction[] {
+  const order = row as FirstLegOrder
+  const actions: TableAction[] = [
+    { key: 'detail', label: '详情', icon: Eye, 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: '编辑', icon: Pencil, loading: openingEditor.value, run: () => openEdit(order) })
+  }
+  if (eligibleCustomsDetail(order)) {
+    actions.push({ key: 'customs', label: '报关资料', icon: FileText, run: () => openCustomsDocuments(order) })
+  }
+  return actions
+}
+
 async function openCreate() {
   if (availableWarehouses.value.length === 0) {
     ElMessage.warning(supportingDataLoading.value
@@ -1941,7 +1958,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>
@@ -2331,17 +2348,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; }
@@ -2353,13 +2362,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; }
@@ -2382,17 +2385,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; }
@@ -2410,8 +2402,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; }
@@ -2635,7 +2627,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; }
@@ -2658,9 +2650,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; }
@@ -2689,7 +2678,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; }