优化

src/modules/overseas-business/PROTOTYPE_MATRIX.md

@@ -73,3 +73,34 @@
 | 两类业务 | 列表、详情、承运安排 | 既有独立路由及只读承运摘要 | 本轮不改变承载；Client 不新增编辑路由 | 既有行为回归 |
 
 统一表单组件和转换逻辑各自位于应用内部，运行时不跨应用引用。两端业务组件源码一致性另作定向检查；下单数据不允许混入客户标识，Admin 在 API 参数显式选择客户，Client 由认证会话确定客户。
+
+## 2026-10-20 蓝白工作台展示改造
+
+本批文件清单（相对本模块）：
+
+- `components/ProcurementNodeActions.vue`
+- `components/TransportDemandForm.vue`
+- `components/TruckOrderActions.vue`
+- `pages/PurchaseOrderDetailView.vue`
+- `pages/PurchaseOrderEditView.vue`
+- `pages/PurchaseOrdersView.vue`
+- `pages/TransportOrderFormView.vue`
+- `pages/TransportOrdersView.vue`
+- `pages/TruckOrderDetailView.vue`
+- `overseasBusinessDensity.css`
+- `PROTOTYPE_MATRIX.md`
+
+依据：[蓝白样板](../../../../../docs/界面参考/蓝白卡片式工作台风格参考.md)与本文件既有逐操作矩阵。只改展示，保留字段、密度、权限、请求与业务计算。
+
+| 页面 | 操作与现有承载 | 本轮结论 | 验收 |
+|---|---|---|---|
+| 海外采购、本土卡车、本土散板 | 正式列表、原查询与操作 | 公共蓝白列表外壳，保留横向宽表及操作列 | 定向回归通过；待人工1920×1080、100%截图确认 |
+| 采购详情、采购编辑、卡车详情、卡车/散板新增与编辑 | 既有独立页面；分区字段与命令组件 | 保持独立页、字段排列和提交入口，连续白底与公共面板 | 定向回归通过；待人工截图确认 |
+| 承运安排、采购节点及卡车操作弹框 | 既有居中弹框 | 浮层独立主题根，保留尺寸、表单和危险提示 | 定向回归通过；待人工截图确认 |
+
+
+本批采购与运输页面、节点弹框的现有定向回归通过，计入海外组54文件609项；类型检查、全量测试和构建由总控统一执行。
+
+2026-10-20 独立样式审查收尾：采购详情删除局部.purchase-detail的旧border/radius/background，外框由workbench-panel统一维护，业务布局保留。4个页面文件的模板/样式编译及公共外观归属检查通过，相关4文件58项回归通过，差异检查通过；人工截图仍待确认。
+
+2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。

src/modules/overseas-business/components/ProcurementNodeActions.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -213,7 +214,7 @@ async function upload(event: Event) {
     <el-alert v-if="draftError" :title="draftError" type="error" :closable="false" /><el-alert v-if="storageError" :title="storageError" type="error" :closable="false" />
     <el-alert v-if="pending" title="上次提交结果尚未确认，重试将使用原始内容与原请求编号。" type="warning" :closable="false"><p>原操作：{{ pending.command === 'review' ? (pending.payload.decision === 'APPROVE' ? '审核通过' : '审核拒绝') : actions.find(action => routes[action.key] === pending?.command)?.label || '采购节点操作' }} · {{ pending.payload.remark || pending.payload.reason }}</p><p v-if="pending.payload.amount !== undefined">原提交金额：{{ pending.payload.amount }} {{ pending.payload.currency || (['international-estimate', 'fees/refund'].includes(pending.command) ? 'CNY' : '') }}</p><el-button :loading="saving" @click="retryPending">确认上次提交结果</el-button></el-alert>
     <ApiErrorMeta v-if="error && !opened" :details="error" />
-    <AppDialog class="admin-density-dialog" v-model="opened" :title="active?.label || '采购节点操作'" :width="['packing', 'labels', 'charges/confirm', 'exception-close'].includes(command || '') ? 'min(1120px, calc(100vw - 28px))' : 'min(760px, calc(100vw - 28px))'" :confirm-loading="saving || uploading" :confirm-disabled="!!managementBlock || uploading || warehouseLoading || (!editingDraft && !!storageError) || !key" :confirm-text="editingDraft ? '保存本地草稿' : pending ? '重试原请求' : '确认提交'" @confirm="submit">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="opened" :title="active?.label || '采购节点操作'" :width="['packing', 'labels', 'charges/confirm', 'exception-close'].includes(command || '') ? 'min(1120px, calc(100vw - 28px))' : 'min(760px, calc(100vw - 28px))'" :confirm-loading="saving || uploading" :confirm-disabled="!!managementBlock || uploading || warehouseLoading || (!editingDraft && !!storageError) || !key" :confirm-text="editingDraft ? '保存本地草稿' : pending ? '重试原请求' : '确认提交'" @confirm="submit">
       <template #default><el-alert v-if="editingDraft" title="草稿仅保存在当前浏览器标签页，关闭标签页后可能丢失；不代表已确认费用。原请求未决时只能保存，结果明确后请刷新订单再核对确认。" type="info" :closable="false" /><el-alert v-if="command === 'purchase'" title="记录已实际购买的商品和供应商实付总额。资金未完成时，真实购买事实仍保留。" type="info" :closable="false" />
         <el-alert v-if="managementBlock" :title="managementBlock" type="warning" :closable="false" />
         <el-form class="density-form" label-position="top" :disabled="saving || uploading || (!!pending && !editingDraft)">

src/modules/overseas-business/components/TransportDemandForm.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, ref } from 'vue'
 import type { FormInstance } from 'element-plus'
 import { transportDemandRules, type TransportDemandForm, type TransportDemandKind } from '../transportDemandForm'
@@ -21,7 +22,7 @@ defineExpose({
 </script>
 
 <template>
-  <el-form ref="formRef" class="transport-demand-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
+  <el-form ref="formRef" class="transport-demand-form admin-workbench" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
     <slot name="customer" />
     <section class="transport-demand-section">
       <h3>运输信息</h3>
@@ -71,9 +72,9 @@ defineExpose({
 </template>
 
 <style scoped>
-.transport-demand-form { --el-component-size: 36px; width: 100%; max-width: 1180px; margin: 0; background: #fff; }
-.transport-demand-section { padding: 20px 24px 0; border-bottom: 1px solid #e7ebf1; }
-.transport-demand-section h3 { margin: 0 0 16px; color: #27364d; font-size: 14px; font-weight: 600; }
+.transport-demand-form { --el-component-size: 36px; width: 100%; max-width: 1180px; margin: 0; background: var(--workbench-surface); }
+.transport-demand-section { padding: 20px 24px 0; border-bottom: 1px solid var(--workbench-border); }
+.transport-demand-section h3 { margin: 0 0 16px; color: var(--workbench-text); font-size: 14px; font-weight: 600; }
 .transport-demand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
 .transport-demand-cargo-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .transport-demand-cargo-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

src/modules/overseas-business/components/TruckOrderActions.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import AppDialog from '@/shared/components/AppDialog.vue'
@@ -91,7 +92,7 @@ async function submit() {
     <el-button v-for="command in commands" :key="command" :type="command === 'cancel' ? 'danger' : 'primary'" :plain="command === 'cancel'" :disabled="saving" @click="start(command)">{{ truckCommandLabels[command] }}</el-button>
     <p v-if="pending && !open" role="status">上次操作尚未确认结果，请重新打开重试，或刷新订单核对最新记录。</p>
   </div>
-  <AppDialog v-model="open" class="admin-density-dialog" :title="active ? truckCommandLabels[active] : '单据操作'" width="680px" :confirm-text="pending ? '重试原操作' : '确认提交'" :confirm-type="active === 'cancel' || (review && form.decision === 'REJECT') ? 'danger' : 'primary'" :confirm-loading="saving" :confirm-disabled="!active || !commands.includes(active)" @confirm="submit">
+  <AppDialog v-model="open" class="admin-density-dialog admin-workbench is-dialog" :title="active ? truckCommandLabels[active] : '单据操作'" width="680px" :confirm-text="pending ? '重试原操作' : '确认提交'" :confirm-type="active === 'cancel' || (review && form.decision === 'REJECT') ? 'danger' : 'primary'" :confirm-loading="saving" :confirm-disabled="!active || !commands.includes(active)" @confirm="submit">
     <template v-if="active">
       <p>{{ detail.orderNo }} · {{ truckCommandHints[active] }}</p>
       <el-alert v-if="validationError" :title="validationError" type="warning" :closable="false" role="alert" />
@@ -114,5 +115,5 @@ async function submit() {
 
 <style scoped>
 .truck-order-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
-.truck-order-actions p { flex-basis: 100%; margin: 0; color: var(--cc-muted); }
+.truck-order-actions p { flex-basis: 100%; margin: 0; color: var(--workbench-muted); }
 </style>

src/modules/overseas-business/overseasBusinessDensity.css

@@ -1,6 +1,6 @@
 /* Shared business form layout for purchase and local transport editors. */
 .admin-density.overseas-business-editor { width: 100%; max-width: 1120px; }
-.overseas-business-editor .overseas-business-form-layout { gap: 0; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
+.overseas-business-editor .overseas-business-form-layout { gap: 0; }
 .overseas-business-editor .form-reference { min-width: 0; color: var(--cc-muted); font-size: var(--admin-font-body); overflow-wrap: anywhere; }
 .overseas-business-editor .form-panel { min-width: 0; padding: var(--admin-space-5); }
 .overseas-business-editor .form-grid { display: grid; min-width: 0; gap: 0 var(--admin-space-5); }

src/modules/overseas-business/pages/PurchaseOrderDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import { computed, onActivated, onBeforeUnmount, ref, watch } from 'vue'
@@ -149,8 +150,8 @@ watch(scope, () => { void load() }, { immediate: true })
 onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
 </script>
 <template>
-  <AdminPage class="admin-density"><OperationErrorToast :details="operationError" />
-    <DetailPageLayout class="purchase-detail density-detail-layout" aria-label="采购订单履约详情">
+  <AdminPage class="admin-density admin-workbench"><OperationErrorToast :details="operationError" />
+    <DetailPageLayout class="purchase-detail density-detail-layout workbench-panel is-flush is-page-surface" aria-label="采购订单履约详情">
       <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'overseas-business-purchases' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ order?.orderNo || '—' }}</h1><StatusBadge v-if="order" :status="statusLabel(order.status)" /></div><div class="density-actions"><el-button :loading="loading" @click="load">刷新</el-button><el-button v-if="order && access.can(overseasBusinessPermissions.purchaseEdit)" @click="router.push({ name: 'overseas-business-purchase-edit', params: { purchaseId: order.orderNo }, query: { customerId } })">编辑内部备注</el-button></div></div></template>
       <template v-if="order" #summary><dl class="density-detail-overview" aria-label="采购订单概览"><div><dt>客户</dt><dd>{{ text(order.customerName) }}</dd></div><div><dt>计划采购仓</dt><dd>{{ text(order.plannedWarehouseName) }}</dd></div><div><dt>采购数量</dt><dd>{{ order.purchaseQuantity }}</dd></div></dl></template>
       <LoadErrorState v-if="loadError" title="采购详情暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
@@ -160,29 +161,28 @@ onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
           <section><h3>订单及预算</h3><dl class="density-fields"><div v-for="field in fields" :key="field[0]" :class="{ wide: ['下单收货地址', '内部备注'].includes(field[0]) }"><dt>{{ field[0] }}</dt><dd>{{ text(field[1]) }}</dd></div></dl></section>
           <section><h3>购买事实</h3><dl class="density-fields"><div v-for="field in purchaseFields" :key="field[0]"><dt>{{ field[0] }}</dt><dd>{{ text(field[1]) }}</dd></div></dl></section>
           <section><h3>履约进度</h3><dl class="density-fields"><div v-for="step in detail.customerView.progress" :key="step.key"><dt>{{ step.title }}</dt><dd>{{ step.completedAt ? dateTime(step.completedAt) : '未完成' }}</dd></div></dl></section>
-          <section><h3>分次实收记录</h3><DataTable :data="detail.physical.receipts" :columns="receiptColumns" row-key="id" empty-text="暂无实收记录" /></section>
-          <section><h3>差异处置记录</h3><DataTable :data="detail.physical.dispositions" :columns="dispositionColumns" row-key="id" empty-text="暂无差异处置" /></section>
-          <section><h3>逐箱装货清单 · {{ detail.physical.packingStatus === 'CONFIRMED' ? '已确认' : detail.physical.packingStatus === 'DRAFT' ? '草稿' : '未建立' }}<span v-if="detail.physical.packingVersion">（第 {{ detail.physical.packingVersion }} 版）</span></h3><DataTable :data="detail.physical.cartons" :columns="cartonColumns" row-key="id" empty-text="暂无箱明细" /></section>
-          <section v-if="detail.transport.domesticCargo.length"><h3>国内包装与可寄货物核对</h3><DataTable :data="detail.transport.domesticCargo" :columns="cartonColumns" row-key="cartonId" /></section>
-          <section v-for="group in labelGroups" :key="group.leg"><h3>{{ group.title }}最近保存面单 · 第 {{ group.value?.version }} 版<InlineHelp title="面单核对说明"><p>包装或实收变化后须重新核对面单；是否可交寄以节点校验结果为准。</p></InlineHelp></h3><dl v-if="group.value" class="density-fields"><div class="wide"><dt>寄件信息</dt><dd>{{ group.value.sender.name }} · {{ group.value.sender.phone }} · {{ group.value.sender.address }}</dd></div><div class="wide"><dt>收件信息</dt><dd>{{ group.value.receiver.name }} · {{ group.value.receiver.phone }} · {{ group.value.receiver.address }}</dd></div></dl><DataTable :data="group.value?.labels || []" :columns="labelColumns" row-key="cartonId" /></section>
-          <section><h3>两段实际交寄</h3><DataTable :data="detail.customerView.shipments" :columns="shipmentColumns" empty-text="暂无实际交寄记录" /></section>
-          <section><h3>费用与资金结果<InlineHelp title="费用与资金说明"><p>样品货款与实际费用独立结算；预估国际运费仅冻结。资金结果和费用来源关联分别核对。</p></InlineHelp></h3><DataTable :data="detail.customerView.fees" :columns="feeColumns" row-key="feeNo" empty-text="暂无核定费用" /></section>
-          <section><h3>费用更正记录<InlineHelp title="费用更正说明"><p>本表记录核定目标、差额及未实扣费用的替代版本；实际扣款、退款结果见费用与资金明细。</p></InlineHelp></h3><DataTable :data="detail.feeCorrections" :columns="correctionColumns" row-key="correctionNo" empty-text="暂无费用目标更正" /></section>
-          <section><h3>事实说明与阻断</h3><DataTable :data="detail.controls.notes" :columns="noteColumns" row-key="id" empty-text="暂无事实说明或阻断" /></section>
-          <section><h3>剩余货物去向核对</h3><DataTable :data="detail.controls.remaining" :columns="remainingColumns" empty-text="当前无待处置的剩余货物" /></section>
-          <section v-if="detail.controls.closures.length"><h3>异常关闭记录</h3><DataTable :data="detail.controls.closures" :columns="closureColumns" row-key="id" /><DataTable :data="detail.controls.closureItems" :columns="closureItemColumns" row-key="id" empty-text="关闭时无剩余实物" /></section>
-          <section><h3>本单文件</h3><DataTable :data="detail.files" :columns="fileColumns" row-key="fileId" empty-text="暂无文件"><template #actions="{ row }"><el-button class="density-action" :loading="downloading === row.fileId" :disabled="!!downloading" @click="download(row.fileId)">下载</el-button></template></DataTable></section>
-          <section><h3>操作流水</h3><DataTable :data="detail.reviewHistory" :columns="historyColumns" empty-text="暂无基础操作记录" /><DataTable :data="detail.operations" :columns="commandColumns" empty-text="暂无履约操作记录" /></section>
+          <section><h3>分次实收记录</h3><div class="workbench-table"><DataTable :data="detail.physical.receipts" :columns="receiptColumns" row-key="id" empty-text="暂无实收记录" /></div></section>
+          <section><h3>差异处置记录</h3><div class="workbench-table"><DataTable :data="detail.physical.dispositions" :columns="dispositionColumns" row-key="id" empty-text="暂无差异处置" /></div></section>
+          <section><h3>逐箱装货清单 · {{ detail.physical.packingStatus === 'CONFIRMED' ? '已确认' : detail.physical.packingStatus === 'DRAFT' ? '草稿' : '未建立' }}<span v-if="detail.physical.packingVersion">（第 {{ detail.physical.packingVersion }} 版）</span></h3><div class="workbench-table"><DataTable :data="detail.physical.cartons" :columns="cartonColumns" row-key="id" empty-text="暂无箱明细" /></div></section>
+          <section v-if="detail.transport.domesticCargo.length"><h3>国内包装与可寄货物核对</h3><div class="workbench-table"><DataTable :data="detail.transport.domesticCargo" :columns="cartonColumns" row-key="cartonId" /></div></section>
+          <section v-for="group in labelGroups" :key="group.leg"><h3>{{ group.title }}最近保存面单 · 第 {{ group.value?.version }} 版<InlineHelp title="面单核对说明"><p>包装或实收变化后须重新核对面单；是否可交寄以节点校验结果为准。</p></InlineHelp></h3><dl v-if="group.value" class="density-fields"><div class="wide"><dt>寄件信息</dt><dd>{{ group.value.sender.name }} · {{ group.value.sender.phone }} · {{ group.value.sender.address }}</dd></div><div class="wide"><dt>收件信息</dt><dd>{{ group.value.receiver.name }} · {{ group.value.receiver.phone }} · {{ group.value.receiver.address }}</dd></div></dl><div class="workbench-table"><DataTable :data="group.value?.labels || []" :columns="labelColumns" row-key="cartonId" /></div></section>
+          <section><h3>两段实际交寄</h3><div class="workbench-table"><DataTable :data="detail.customerView.shipments" :columns="shipmentColumns" empty-text="暂无实际交寄记录" /></div></section>
+          <section><h3>费用与资金结果<InlineHelp title="费用与资金说明"><p>样品货款与实际费用独立结算；预估国际运费仅冻结。资金结果和费用来源关联分别核对。</p></InlineHelp></h3><div class="workbench-table"><DataTable :data="detail.customerView.fees" :columns="feeColumns" row-key="feeNo" empty-text="暂无核定费用" /></div></section>
+          <section><h3>费用更正记录<InlineHelp title="费用更正说明"><p>本表记录核定目标、差额及未实扣费用的替代版本；实际扣款、退款结果见费用与资金明细。</p></InlineHelp></h3><div class="workbench-table"><DataTable :data="detail.feeCorrections" :columns="correctionColumns" row-key="correctionNo" empty-text="暂无费用目标更正" /></div></section>
+          <section><h3>事实说明与阻断</h3><div class="workbench-table"><DataTable :data="detail.controls.notes" :columns="noteColumns" row-key="id" empty-text="暂无事实说明或阻断" /></div></section>
+          <section><h3>剩余货物去向核对</h3><div class="workbench-table"><DataTable :data="detail.controls.remaining" :columns="remainingColumns" empty-text="当前无待处置的剩余货物" /></div></section>
+          <section v-if="detail.controls.closures.length"><h3>异常关闭记录</h3><div class="workbench-table"><DataTable :data="detail.controls.closures" :columns="closureColumns" row-key="id" /></div><div class="workbench-table"><DataTable :data="detail.controls.closureItems" :columns="closureItemColumns" row-key="id" empty-text="关闭时无剩余实物" /></div></section>
+          <section><h3>本单文件</h3><div class="workbench-table"><DataTable :data="detail.files" :columns="fileColumns" row-key="fileId" empty-text="暂无文件"><template #actions="{ row }"><el-button class="density-action" :loading="downloading === row.fileId" :disabled="!!downloading" @click="download(row.fileId)">下载</el-button></template></DataTable></div></section>
+          <section><h3>操作流水</h3><div class="workbench-table"><DataTable :data="detail.reviewHistory" :columns="historyColumns" empty-text="暂无基础操作记录" /></div><div class="workbench-table"><DataTable :data="detail.operations" :columns="commandColumns" empty-text="暂无履约操作记录" /></div></section>
         </template>
       </div>
     </DetailPageLayout>
   </AdminPage>
 </template>
 <style scoped>
-.purchase-detail { border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
 .detail-grid { display: grid; min-width: 0; gap: var(--admin-space-5); }
 .detail-grid section { min-width: 0; }
 .detail-grid h3 { margin: 0 0 var(--admin-space-3); font-size: var(--admin-font-section); }
-.detail-grid p { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.detail-grid p { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .density-fields > .wide { grid-column: span 2; }
 </style>

src/modules/overseas-business/pages/PurchaseOrderEditView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../overseasBusinessDensity.css'
 import { computed, reactive, ref, watch, onBeforeUnmount } from 'vue'
@@ -60,9 +61,9 @@ watch([purchaseId, customerId], () => { void load() }, { immediate: true })
 </script>
 
 <template>
-  <AdminPage class="admin-density overseas-business-editor">
+  <AdminPage class="admin-density overseas-business-editor admin-workbench">
     <OperationErrorToast :details="submitError" />
-    <DetailPageLayout class="overseas-business-form-layout" aria-label="编辑采购内部备注">
+    <DetailPageLayout class="overseas-business-form-layout workbench-panel is-flush is-page-surface" aria-label="编辑采购内部备注">
       <template #header><div class="density-detail-header"><div class="density-detail-heading">
         <el-button link class="density-back" @click="back"><ArrowLeft :size="16" />返回详情</el-button>
         <h1 class="density-detail-title">编辑采购内部备注</h1><span class="form-reference">{{ form.orderNo || '—' }}</span>

src/modules/overseas-business/pages/PurchaseOrdersView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onActivated, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -69,10 +70,10 @@ onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
 </script>
 
 <template>
-  <AdminPage class="admin-density"><ListPageLayout aria-label="海外采购订单列表">
+  <AdminPage class="admin-density admin-workbench"><ListPageLayout aria-label="海外采购订单列表">
 
 
-    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-business-purchases" row-key="id" empty-text="暂无符合筛选条件的海外采购订单">
+    <section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-business-purchases" row-key="id" empty-text="暂无符合筛选条件的海外采购订单">
         <template #toolbar-start><h1>海外采购订单</h1></template>
         <template #filters><QueryToolbar v-model="filters" :fields="fields" ariaLabel="海外采购订单筛选" preference-key="overseas-business-purchases-query" @search="search" /></template>
         <template #notices><template v-if="loadError"><LoadErrorState title="海外采购订单暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></template>
@@ -80,7 +81,7 @@ onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
 
       <template #actions="{ row }"><div class="density-actions row-actions admin-text-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="open(row as OverseasPurchaseSummary)">详情</el-button><el-button class="density-action" data-tone="neutral" v-if="access.can(overseasBusinessPermissions.purchaseEdit)" size="small" @click="open(row as OverseasPurchaseSummary, true)">编辑</el-button></div></template>
       <template #pagination-left>共 {{ total }} 条海外采购订单</template>
-    </DataTable></section>
+    </DataTable></div></section>
   </ListPageLayout></AdminPage>
 </template>
 

src/modules/overseas-business/pages/TransportOrderFormView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { TransportRouteDialog, routeLocation } from '@/modules/overseas-master-data'
 import '../overseasBusinessDensity.css'
@@ -93,7 +94,7 @@ watch([orderId, routeCustomerId, isLooseboard], () => { void load(); void loadCu
 </script>
 
 <template>
-  <AdminPage class="admin-density overseas-business-editor"><OperationErrorToast :details="submitError" /><DetailPageLayout class="overseas-business-form-layout" :aria-label="`${editing ? '编辑' : '新增'}${domainLabel}订单`">
+  <AdminPage class="admin-density overseas-business-editor admin-workbench"><OperationErrorToast :details="submitError" /><DetailPageLayout class="overseas-business-form-layout workbench-panel is-flush is-page-surface" :aria-label="`${editing ? '编辑' : '新增'}${domainLabel}订单`">
     <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="back"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ editing ? '编辑' : '新增' }}{{ domainLabel }}订单</h1><span v-if="editing" class="form-reference">{{ form.orderNo || '—' }}</span></div></div></template>
     <LoadErrorState v-if="loadError" :title="`${domainLabel}订单暂时无法加载`" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
     <FleetArrangementSummary v-else-if="fleetArrangement" :arrangement="fleetArrangement" />

src/modules/overseas-business/pages/TransportOrdersView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { inquiryReturnTarget, TransportRouteDialog, routeLocation, type RouteLocation } from '@/modules/overseas-master-data'
 import { computed, onActivated, onMounted, ref, watch } from 'vue'
@@ -116,10 +117,10 @@ watch([page, pageSize], () => { void load() }); watch([isLooseboard, () => route
 </script>
 
 <template>
-  <AdminPage class="admin-density"><ListPageLayout :aria-label="`${domainLabel}订单列表`">
+  <AdminPage class="admin-density admin-workbench"><ListPageLayout :aria-label="`${domainLabel}订单列表`">
 
 
-    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" :preference-key="`overseas-business-${domain}`" row-key="id" :empty-text="`暂无符合筛选条件的${domainLabel}订单`">
+    <section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" :preference-key="`overseas-business-${domain}`" row-key="id" :empty-text="`暂无符合筛选条件的${domainLabel}订单`">
         <template #toolbar-start><el-button v-if="inquiryReturnTarget(route.query)" link @click="router.push(inquiryReturnTarget(route.query)!)">返回原拼车登记</el-button><h1>{{ domainLabel }}</h1></template>
         <template #filters><QueryToolbar v-model="filters" :fields="fields" :ariaLabel="`${domainLabel}订单筛选`" :preference-key="queryPreferenceKey" @search="search" /></template>
         <template #notices><template v-if="loadError"><LoadErrorState :title="`${domainLabel}订单暂时无法加载`" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></template>
@@ -129,8 +130,8 @@ watch([page, pageSize], () => { void load() }); watch([isLooseboard, () => route
       <template #actions="{ row }"><RowActions v-if="!isLooseboard" :actions="truckActions(row as LocalTransportOrder)" text-actions @action="handleTruckAction($event, row as LocalTransportOrder)" /><div v-else class="row-actions density-actions admin-text-actions"><el-button v-if="row.fleetArrangement" class="density-action" @click="showArrangement(row as LocalTransportOrder | LocalLooseboardOrder)">承运安排</el-button><el-tooltip v-if="!row.fleetArrangement && access.can(editPermission)" :disabled="canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" content="当前状态不可编辑"><span><el-button class="density-action" data-tone="neutral" size="small" :disabled="!canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" @click="openEdit(row as LocalTransportOrder | LocalLooseboardOrder)">编辑</el-button></span></el-tooltip></div></template>
       <template #pagination-left>共 {{ total }} 条{{ domainLabel }}订单</template>
       <template #routeMap="{ row }"><el-button v-if="row.orderNo" link type="primary" @click="openRoute(row as LocalLooseboardOrder)">查看路线</el-button></template>
-    </DataTable></section>
-  </ListPageLayout><AppDialog v-model="arrangementOpen" class="admin-density-dialog" title="承运安排" width="1080px" :show-confirm="false" cancel-text="关闭"><FleetArrangementSummary v-if="arrangement" :arrangement="arrangement" /></AppDialog><TransportRouteDialog v-model="routeOpen" :origin="routeOrigin" :destinations="routeDestinations" /></AdminPage>
+    </DataTable></div></section>
+  </ListPageLayout><AppDialog v-model="arrangementOpen" class="admin-density-dialog admin-workbench is-dialog" title="承运安排" width="1080px" :show-confirm="false" cancel-text="关闭"><FleetArrangementSummary v-if="arrangement" :arrangement="arrangement" /></AppDialog><TransportRouteDialog v-model="routeOpen" :origin="routeOrigin" :destinations="routeDestinations" /></AdminPage>
 </template>
 
 <style scoped>.table-panel { overflow:hidden; }</style>

src/modules/overseas-business/pages/TruckOrderDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -64,7 +65,7 @@ watch([orderNo, customerId], load, { immediate: true })
 </script>
 
 <template>
-  <AdminPage class="admin-density"><DetailPageLayout aria-label="本土卡车订单详情">
+  <AdminPage class="admin-density admin-workbench"><DetailPageLayout aria-label="本土卡车订单详情" class="workbench-panel is-flush is-page-surface">
     <template #header><div class="truck-detail-header"><el-button :disabled="saving" @click="router.push({ name: 'overseas-business-trucks' })"><ArrowLeft :size="16" />返回列表</el-button><h1>本土卡车订单 {{ detail?.orderNo || orderNo }}</h1></div></template>
     <LoadErrorState v-if="error" title="本土卡车订单暂时无法加载" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <el-skeleton v-else-if="loading" :rows="8" animated />
@@ -74,8 +75,8 @@ watch([orderNo, customerId], load, { immediate: true })
         <template v-else><TruckOrderActions :detail="detail" @updated="detail = $event" @busy="saving = $event" /></template>
       </section>
       <section class="truck-detail-section"><h2>订单资料</h2><el-descriptions :column="3" border><el-descriptions-item v-for="[label, value] in fields" :key="String(label)" :label="String(label)">{{ value ?? '—' }}</el-descriptions-item></el-descriptions></section>
-      <section class="truck-detail-section"><h2>托盘记录</h2><DataTable :data="detail.pallets" :columns="palletColumns" empty-text="暂无托盘记录，独立订单首次实收后生成托盘" /></section>
-      <section class="truck-detail-section"><h2>审核与操作记录</h2><DataTable :data="detail.histories" :columns="historyColumns" empty-text="暂无操作记录" /></section>
+      <section class="truck-detail-section"><h2>托盘记录</h2><div class="workbench-table"><DataTable :data="detail.pallets" :columns="palletColumns" empty-text="暂无托盘记录，独立订单首次实收后生成托盘" /></div></section>
+      <section class="truck-detail-section"><h2>审核与操作记录</h2><div class="workbench-table"><DataTable :data="detail.histories" :columns="historyColumns" empty-text="暂无操作记录" /></div></section>
     </template>
   </DetailPageLayout></AdminPage>
 </template>