优化

src/modules/loading-lists/components/ContainerFeesPanel.test.ts

@@ -169,7 +169,7 @@ describe('ContainerFeesPanel contract', () => {
     expect(panel).toContain('class="fees-header__actions"')
     expect(panel).toContain('class="customer-context"')
     expect(panel).toContain('<template #toolbar-start><div class="fees-table-title">')
-    expect(panel).toContain('class="fees-panel admin-density"')
+    expect(panel).toContain('class="fees-panel admin-density admin-workbench"')
   })
 
   it('is exposed from the domestic container fee tab and derives customer context from real items', () => {

src/modules/loading-lists/components/ContainerFeesPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { FileUp, Plus, X } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
@@ -374,7 +375,7 @@ onMounted(() => void load())
 </script>
 
 <template>
-  <section class="fees-panel admin-density" aria-label="柜次费用维护">
+  <section class="fees-panel admin-density admin-workbench" aria-label="柜次费用维护">
     <header class="fees-header">
       <div><h2>{{ title }}</h2></div>
       <div class="fees-header__actions">
@@ -388,7 +389,7 @@ onMounted(() => void load())
       <el-alert v-else-if="!accountId" type="info" :closable="false" show-icon title="该柜次包含多个客户，请先选择费用归属客户" />
       <el-alert v-else-if="!canViewFeeItems" type="warning" :closable="false" show-icon title="当前账号缺少费用项目查看权限，无法新增费用；已审核费用仍可调整日期与金额" />
       <LoadErrorState v-else-if="error" compact title="柜次费用加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-      <DataTable v-else :data="fees" :columns="columns" :loading="loading" preference-key="container-fees" row-key="id" empty-text="当前客户暂无柜次费用">
+      <div class="workbench-table" v-else><DataTable :data="fees" :columns="columns" :loading="loading" preference-key="container-fees" row-key="id" empty-text="当前客户暂无柜次费用">
         <template #toolbar-start><div class="fees-table-title"><strong>费用明细</strong><span>{{ fees.length }} 条</span></div></template>
         <template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="warning" class="density-action" v-if="canReview && row.reviewStatus === 'PENDING'" type="success" @click="approve(row as ContainerFeeResource)">通过</el-button><el-button data-tone="danger" class="density-action" v-if="canReview && row.reviewStatus === 'PENDING'" type="danger" @click="openReject(row as ContainerFeeResource)">驳回</el-button><el-button class="density-action" v-if="canEdit && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" type="primary" @click="openAdjust(row as ContainerFeeResource)">调整</el-button><el-button data-tone="danger" class="density-action" v-if="canReview && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" type="danger" @click="voidFee(row as ContainerFeeResource)">作废</el-button></div></template>
         <template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : 'warning'" effect="plain">{{ row.direction === 'RECEIVABLE' ? '应收' : '应付' }}</el-tag></template>
@@ -397,12 +398,12 @@ onMounted(() => void load())
         <template #supplier="{ row }">{{ row.direction === 'PAYABLE' ? row.supplierName || '服务端未返回' : selectedCustomer?.label || '客户信息缺失' }}</template>
         <template #businessReference="{ row }"><div class="business-reference"><span>{{ row.allocationOrderNo || '订单号待补充' }}</span><small>{{ row.allocationInboundCode || '无入仓码' }}<template v-if="row.allocationGroupId"> · 分摊组</template></small></div></template>
         <template #amount="{ row }">{{ money(row.amount) }}</template><template #reviewStatus="{ row }"><StatusBadge :status="row.reviewStatus === 'PENDING' ? '待审核' : row.reviewStatus === 'APPROVED' ? '已通过' : '已驳回'" /></template><template #sourceStatus="{ row }"><StatusBadge :status="row.sourceStatus === 'ACTIVE' ? '有效' : '已作废'" /></template>
-      </DataTable>
+      </DataTable></div>
 
-      <div v-if="accountId && fees.length" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div><el-button :loading="financeLoading" @click="loadFinanceDetails">{{ financeLoaded ? '刷新财务状态' : '加载财务状态' }}</el-button></header><LoadErrorState v-if="financeError" compact title="财务状态加载失败" :message="financeError.message" @retry="loadFinanceDetails"><template #details><ApiErrorMeta :details="financeError" /></template></LoadErrorState><el-empty v-else-if="!financeLoaded" description="点击加载财务状态后查看结算与成本分摊" :image-size="64" /><el-empty v-else-if="!financeLoading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #orderNo="{ row }">{{ orderNumbers.get(row.orderId) || '订单编码待补充' }}</template><template #inboundCode="{ row }">{{ row.inboundId ? (inboundCodes.get(row.inboundId) || '入仓码待补充') : '—' }}</template><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
+      <div v-if="accountId && fees.length" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div><el-button :loading="financeLoading" @click="loadFinanceDetails">{{ financeLoaded ? '刷新财务状态' : '加载财务状态' }}</el-button></header><LoadErrorState v-if="financeError" compact title="财务状态加载失败" :message="financeError.message" @retry="loadFinanceDetails"><template #details><ApiErrorMeta :details="financeError" /></template></LoadErrorState><el-empty v-else-if="!financeLoaded" description="点击加载财务状态后查看结算与成本分摊" :image-size="64" /><el-empty v-else-if="!financeLoading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><div class="workbench-table"><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #orderNo="{ row }">{{ orderNumbers.get(row.orderId) || '订单编码待补充' }}</template><template #inboundCode="{ row }">{{ row.inboundId ? (inboundCodes.get(row.inboundId) || '入仓码待补充') : '—' }}</template><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></div></article></div>
     </template>
 
-    <AppDialog class="admin-density-dialog" v-model="editorOpen" :title="feeDialogTitle(target ? '调整已审核费用' : '新增柜次费用')" width="min(1080px, calc(100vw - 28px))" fullscreenable confirm-text="保存" :confirm-loading="saving" @confirm="save">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="editorOpen" :title="feeDialogTitle(target ? '调整已审核费用' : '新增柜次费用')" width="min(1080px, calc(100vw - 28px))" fullscreenable confirm-text="保存" :confirm-loading="saving" @confirm="save">
       <p v-if="target" class="density-dialog-note">调整仅允许修改业务日期和金额；如需变更方向、费用项目、供应商或其他信息，请先作废后新增。</p>
       <template v-if="!target">
         <el-alert v-if="!canViewSuppliers" type="warning" :closable="false" show-icon title="当前账号缺少供应商查看权限，仅可维护应收费用" />
@@ -411,7 +412,7 @@ onMounted(() => void load())
       </template>
       <section class="density-dialog-section" data-tone="work">
         <el-form ref="formRef" :model="form" :rules="rules" label-position="left" class="density-form density-form--flush-end">
-          <table class="density-table density-table--editable fee-editor-table" aria-label="柜次费用填写"><tbody>
+          <div class="workbench-evidence"><table class="density-table density-table--editable fee-editor-table" aria-label="柜次费用填写"><tbody>
             <tr><td><el-form-item label-position="left" label-width="110px" label="方向" :prop="target ? undefined : 'direction'"><span v-if="target">{{ target.direction === 'RECEIVABLE' ? '应收' : '应付' }}</span><el-segmented v-else v-model="form.direction" :options="[{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE', disabled: !canViewSuppliers }]" /></el-form-item></td><td><el-form-item label-position="left" label-width="110px" label="费用项目" :prop="target ? undefined : 'feeItemId'"><span v-if="target">{{ target.feeItemName }}</span><el-select v-else v-model="form.feeItemId" filterable :loading="feeItemsLoading" :disabled="!canViewFeeItems" placeholder="请选择启用且适用的费用项目" @change="applyFeeItemDefaultPrice"><el-option v-for="item in applicableItems" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></td></tr>
             <tr v-if="target || form.direction === 'PAYABLE'"><td><el-form-item label-position="left" label-width="110px" label="供应商" :required="!target"><span v-if="target">{{ target.supplierName || '—' }}</span><el-select v-else v-model="form.supplierId" filterable :loading="suppliersLoading" :disabled="!canViewSuppliers || !selectedFeeItem || !!suppliersError" placeholder="请先选择费用项目"><el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" /></el-select></el-form-item></td><td><el-form-item label-position="left" label-width="110px" label="结算方式" :required="!target"><span v-if="target">{{ settlementLabel(target) }}</span><el-radio-group v-else v-model="settlementModeModel"><el-radio-button value="ON_ACCOUNT">账期应付</el-radio-button><el-radio-button value="DIRECT_PAID">已付成本</el-radio-button></el-radio-group></el-form-item></td></tr>
             <tr v-if="target"><td><el-form-item label="已付摘要" label-position="left" label-width="110px"><span>{{ paidSummary(target) }}</span></el-form-item></td><td><el-form-item label="币种" label-position="left" label-width="110px"><span>{{ target.currency }}</span></el-form-item></td></tr>
@@ -421,31 +422,31 @@ onMounted(() => void load())
             <tr><td><el-form-item label-position="left" label-width="110px" label="业务日期" prop="businessDate"><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td><td><el-form-item label-position="left" label-width="110px" label="金额(CNY)" prop="amount"><el-input-number v-model="form.amount" :min="0" :precision="2" controls-position="right" placeholder="请输入金额" /></el-form-item></td></tr>
             <tr v-if="target"><td><el-form-item label="备注" label-position="left" label-width="110px"><span>{{ target.remark || '—' }}</span></el-form-item></td><td><el-form-item label="费用归属" label-position="left" label-width="110px"><span>{{ (target.allocationOrderNo || '—') + ' / ' + (target.allocationInboundCode || '无入仓码') }}</span></el-form-item></td></tr>
             <tr v-if="!target"><td colspan="2"><el-form-item label-position="left" label-width="110px" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></td></tr>
-          </tbody></table>
+          </tbody></table></div>
           <el-form-item label-position="top" v-if="allocationMode" label="业务归属分摊" class="allocation-editor" required>
           <el-alert type="info" :closable="false" show-icon title="客户必须明确；入仓码没有时按订单归属，分摊合计必须等于费用总额。" />
-          <table class="density-table density-table--editable allocation-editor-table" aria-label="业务归属分摊"><thead><tr><th>客户</th><th>订单号</th><th>入仓码</th><th class="allocation-amount">分摊金额（CNY）</th></tr></thead><tbody>
+          <div class="workbench-evidence"><table class="density-table density-table--editable allocation-editor-table" aria-label="业务归属分摊"><thead><tr><th>客户</th><th>订单号</th><th>入仓码</th><th class="allocation-amount">分摊金额（CNY）</th></tr></thead><tbody>
             <tr v-for="(row, index) in allocationDraft" :key="`${row.customerId}-${row.orderId}-${row.inboundId || 'none'}`"><td>{{ customerLabel(row.customerId || targetGroupRows[index]?.customerId || '') }}</td><td>{{ row.orderNo }}</td><td>{{ row.inboundCode || '无入仓码' }}</td><td><el-input-number v-model="row.amount" :min="0" :precision="2" controls-position="right" placeholder="请输入分摊金额" /></td></tr>
-          </tbody><tfoot><tr><td colspan="4"><span class="allocation-editor__sum" :class="{ 'is-error': Math.abs(allocationSum - form.amount) > 0.001 }">已分摊 ¥{{ money(allocationSum) }} / 总额 ¥{{ money(form.amount) }}</span></td></tr></tfoot></table>
+          </tbody><tfoot><tr><td colspan="4"><span class="allocation-editor__sum" :class="{ 'is-error': Math.abs(allocationSum - form.amount) > 0.001 }">已分摊 ¥{{ money(allocationSum) }} / 总额 ¥{{ money(form.amount) }}</span></td></tr></tfoot></table></div>
         </el-form-item>
         </el-form>
       </section>
       <LoadErrorState v-if="editorError" compact title="费用保存失败" :message="editorError.message" :show-retry="false"><template #details><ApiErrorMeta :details="editorError" /></template></LoadErrorState>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="rejectOpen" :title="feeDialogTitle('驳回柜次费用')" confirm-text="确认驳回" :confirm-loading="saving" @confirm="reject"><el-input v-model="rejection" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></AppDialog>
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="rejectOpen" :title="feeDialogTitle('驳回柜次费用')" confirm-text="确认驳回" :confirm-loading="saving" @confirm="reject"><el-input v-model="rejection" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></AppDialog>
   </section>
 </template>
 
 <style scoped>
 .fees-panel { min-width: 0; overflow: hidden; padding-top: 0; border-top: 0; }
 .fees-header, .allocation-section > header { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); padding: 0 0 var(--admin-space-5); }
-.fees-header h2, .allocation-section h3 { margin: 0; font-size: var(--admin-font-section); }.allocation-section p { margin: var(--admin-space-1) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.fees-header h2, .allocation-section h3 { margin: 0; font-size: var(--admin-font-section); }.allocation-section p { margin: var(--admin-space-1) 0 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .fees-header__actions, .customer-context { display: flex; align-items: center; gap: var(--admin-space-4); }
-.customer-context > span { color: var(--cc-muted); font-size: var(--admin-font-body); white-space: nowrap; }.customer-context :deep(.el-select) { width: 260px; }
-.fees-table-title { display: flex; align-items: baseline; gap: var(--admin-space-3); }.fees-table-title strong { font-size: var(--admin-font-section); }.fees-table-title span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
-.row-actions { flex-wrap: wrap; }.allocation-section { padding-top: var(--admin-space-5); border-top: 1px solid var(--cc-border); }.cost-block { border-top: 1px solid var(--cc-border); }.cost-summary { display: flex; flex-wrap: wrap; gap: var(--admin-space-4) var(--admin-space-6); padding: var(--admin-space-4) var(--admin-space-5); background: #f8fafc; font-size: var(--admin-font-body); }.cost-summary span { color: var(--cc-muted); }.fee-editor-table { table-layout: fixed; }
-.voucher-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-4); width: 100%; }.voucher-picker { display: inline-flex; align-items: center; gap: var(--admin-space-2); padding: 7px var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); color: var(--el-color-primary); cursor: pointer; }.voucher-picker.is-disabled { cursor: not-allowed; opacity: .6; }.voucher-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.voucher-hint { color: var(--cc-muted); font-size: var(--admin-font-caption); }.voucher-list { display: grid; width: 100%; gap: var(--admin-space-2); margin-top: var(--admin-space-3); }.voucher-list > span { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); padding: var(--admin-space-2) 9px; border-radius: 5px; background: var(--el-fill-color-light); }.voucher-list > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voucher-list button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--el-color-danger); cursor: pointer; }
-.business-reference { display: grid; gap: 2px; }.business-reference small { color: var(--cc-muted); }
+.customer-context > span { color: var(--workbench-muted); font-size: var(--admin-font-body); white-space: nowrap; }.customer-context :deep(.el-select) { width: 260px; }
+.fees-table-title { display: flex; align-items: baseline; gap: var(--admin-space-3); }.fees-table-title strong { font-size: var(--admin-font-section); }.fees-table-title span { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.row-actions { flex-wrap: wrap; }.allocation-section { padding-top: var(--admin-space-5); border-top: 1px solid var(--workbench-border); }.cost-block { border-top: 1px solid var(--workbench-border); }.cost-summary { display: flex; flex-wrap: wrap; gap: var(--admin-space-4) var(--admin-space-6); padding: var(--admin-space-4) var(--admin-space-5); background: #f8fafc; font-size: var(--admin-font-body); }.cost-summary span { color: var(--workbench-muted); }.fee-editor-table { table-layout: fixed; }
+.voucher-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-4); width: 100%; }.voucher-picker { display: inline-flex; align-items: center; gap: var(--admin-space-2); padding: 7px var(--admin-space-5); border: 1px solid var(--workbench-border); border-radius: var(--admin-radius); color: var(--el-color-primary); cursor: pointer; }.voucher-picker.is-disabled { cursor: not-allowed; opacity: .6; }.voucher-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.voucher-hint { color: var(--workbench-muted); font-size: var(--admin-font-caption); }.voucher-list { display: grid; width: 100%; gap: var(--admin-space-2); margin-top: var(--admin-space-3); }.voucher-list > span { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); padding: var(--admin-space-2) 9px; border-radius: 5px; background: var(--el-fill-color-light); }.voucher-list > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voucher-list button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--el-color-danger); cursor: pointer; }
+.business-reference { display: grid; gap: 2px; }.business-reference small { color: var(--workbench-muted); }
 .allocation-editor { margin-top: var(--admin-space-5); }.allocation-editor :deep(.el-form-item__content) { display: block; }.allocation-editor-table { margin-top: var(--admin-space-3); }.allocation-amount { width: 180px; }.allocation-editor__sum { color: var(--el-color-success); }.allocation-editor__sum.is-error { color: var(--el-color-danger); }
 @media (max-width: 640px) { .fees-header { align-items: stretch; flex-direction: column; }.fees-header .el-button { width: 100%; }.fee-editor-table, .fee-editor-table tbody, .fee-editor-table tr, .fee-editor-table td { display: block; width: 100%; }.customer-context { align-items: stretch; flex-direction: column; } }
 </style>

src/modules/loading-lists/components/LoadingListDetailDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, ref, watch } from 'vue'
 import { ArrowLeft, Check, ChevronRight, Pencil, Printer } from '@lucide/vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -160,7 +161,7 @@ function formatNumber(value?: number | null, digits = 3) {
 </script>
 
 <template>
-  <section v-loading="loading" class="loading-detail-content" :class="{ 'admin-density loading-density': mode === 'preload' || dense }" :aria-label="title" :aria-busy="loading">
+  <section v-loading="loading" class="loading-detail-content admin-workbench" :class="{ 'admin-density loading-density': mode === 'preload' || dense, 'workbench-panel is-compact is-page-surface': !embedded }" :aria-label="title" :aria-busy="loading">
     <section class="detail-overview" aria-label="清单概览">
       <header class="detail-page-header" :class="{ 'detail-page-header--embedded': embedded }">
         <el-button link type="primary" class="detail-page-header__back" :class="{ 'density-back': mode === 'preload' || dense }" @click="emit('back')"><ArrowLeft :size="16" />{{ backLabel || '返回列表' }}</el-button>
@@ -204,7 +205,7 @@ function formatNumber(value?: number | null, digits = 3) {
       </div>
 
       <section class="detail-section">
-        <DataTable
+        <div class="workbench-table"><DataTable
           :data="detail.items"
           :columns="itemColumns"
           stripe
@@ -228,7 +229,7 @@ function formatNumber(value?: number | null, digits = 3) {
           <template #warehouseRemark="{ row }"><div class="remark-cell"><span>{{ row.warehouseRemark || '—' }}</span></div></template>
           <template #customerServiceRemark="{ row }"><div class="remark-cell"><span>{{ row.customerServiceRemark || '—' }}</span></div></template>
           <template #frozenAt="{ row }">{{ formatDateTime(row.frozenAt) }}</template>
-        </DataTable>
+        </DataTable></div>
       </section>
 
       <section class="history-section" :class="{ 'is-expanded': historyExpanded }" aria-label="操作历史">
@@ -247,52 +248,52 @@ function formatNumber(value?: number | null, digits = 3) {
 </template>
 
 <style scoped>
-.loading-detail-content { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); padding: var(--admin-space-6, 16px); border: 1px solid var(--cc-border); border-radius: 8px; background: var(--admin-surface, #fff); }
+.loading-detail-content { display: grid; min-width: 0; gap: var(--admin-space-6, 16px);     }
 .detail-layout { display: grid; min-width: 0; }
 .detail-overview { min-width: 0; }
 .detail-page-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--admin-space-6, 16px); padding: var(--admin-space-3, 8px) 0 var(--admin-space-5, 12px); }
 .detail-page-header--embedded { grid-template-columns: minmax(0, 1fr) auto; padding-top: 0; }
 .detail-page-header__back { margin-right: 2px; }
 .detail-page-header__identity { min-width: 0; }
-.detail-page-header__identity h1 { margin: 0; color: var(--cc-text); font-size: 18px; line-height: 1.35; }
+.detail-page-header__identity h1 { margin: 0; color: var(--workbench-text); font-size: 18px; line-height: 1.35; }
 .detail-page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--admin-space-3, 8px); }
 .detail-page-header__actions :deep(.el-button + .el-button) { margin-left: 0; }
-.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-2, 6px) 28px; padding: var(--admin-space-4, 10px) 0 2px; border-top: 1px solid var(--cc-border); }
+.detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-2, 6px) 28px; padding: var(--admin-space-4, 10px) 0 2px; border-top: 1px solid var(--workbench-border); }
 .detail-summary > div { display: flex; min-width: 0; min-height: 26px; align-items: center; gap: var(--admin-space-2, 6px); }
-.detail-summary > div > span:first-child { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); white-space: nowrap; }
+.detail-summary > div > span:first-child { flex: 0 0 auto; color: var(--workbench-muted); font-size: var(--admin-font-caption, 12px); white-space: nowrap; }
 .detail-summary > div > span:first-child::after { content: "："; }
-.detail-summary strong { min-width: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
+.detail-summary strong { min-width: 0; color: var(--workbench-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; }
 .detail-summary :deep(.status-badge) { width: fit-content; }
-.detail-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }
+.detail-summary small { color: var(--workbench-muted); font-size: var(--admin-font-caption, 11px); }
 .detail-summary__wide { grid-column: auto; }
 .detail-layout :deep(.detail-page-layout__content) { display: grid; min-width: 0; gap: 20px; }
-.readiness-note { display: flex; min-width: 0; align-items: center; padding: 2px var(--admin-space-1, 4px); color: var(--cc-text); font-size: var(--admin-font-caption, 12px); }
+.readiness-note { display: flex; min-width: 0; align-items: center; padding: 2px var(--admin-space-1, 4px); color: var(--workbench-text); font-size: var(--admin-font-caption, 12px); }
 .readiness-note strong { flex: 0 0 auto; color: var(--el-color-warning-dark-2); }
-.readiness-note span { min-width: 0; color: var(--cc-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.detail-section, .history-section { min-width: 0; overflow: hidden; padding: var(--admin-space-6, 16px) 0 0; border-top: 1px solid var(--cc-border); }
+.readiness-note span { min-width: 0; color: var(--workbench-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.detail-section, .history-section { min-width: 0; overflow: hidden; padding: var(--admin-space-6, 16px) 0 0; border-top: 1px solid var(--workbench-border); }
 .detail-section__heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
 .detail-section__heading h2 { margin: 0; font-size: 15px; }
-.detail-section__heading h2 span { margin-left: var(--admin-space-2, 6px); color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }
+.detail-section__heading h2 span { margin-left: var(--admin-space-2, 6px); color: var(--workbench-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }
 .detail-section :deep(.el-table) { width: 100%; }
 .detail-section :deep(.el-table th.el-table__cell) { padding: 7px 0; }
 .detail-section :deep(.el-table td.el-table__cell) { padding: var(--admin-space-2, 6px) 0; }
 .detail-section :deep(.identifier-column .cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.detail-section small { display: block; margin-top: 3px; color: var(--cc-muted); }
+.detail-section small { display: block; margin-top: 3px; color: var(--workbench-muted); }
 .remark-cell { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
 .history-section header { margin: 0; }
 .history-section.is-expanded header { margin-bottom: 18px; }
 .history-section__toggle { display: inline-flex; align-items: center; gap: var(--admin-space-4, 10px); padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
 .history-section__toggle:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 4px; border-radius: 2px; }
-.history-section__arrow { color: var(--cc-muted); transition: transform 0.2s ease; }
+.history-section__arrow { color: var(--workbench-muted); transition: transform 0.2s ease; }
 .history-section__arrow.is-expanded { transform: rotate(90deg); }
 .history-section h2 { margin: 0; font-size: var(--admin-font-title, 16px); }
-.history-section header span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
-.loading-density { gap: var(--admin-space-5, 12px); padding: var(--admin-space-5, 12px); border-radius: var(--admin-radius, 4px); }
+.history-section header span { color: var(--workbench-muted); font-size: var(--admin-font-caption, 12px); }
+.loading-density { gap: var(--admin-space-5, 12px);   }
 .loading-density .detail-page-header { gap: var(--admin-space-5, 12px); padding: 0 0 var(--admin-space-3, 8px); }
 .loading-density .detail-page-header__identity h1 { font-size: var(--admin-font-title, 16px); overflow-wrap: anywhere; }
 .loading-density .detail-page-header__actions { flex-wrap: wrap; }
-.loading-density .detail-summary { gap: 0; padding: 0; border-left: 1px solid var(--cc-border); }
-.loading-density .detail-summary > div { gap: 0; align-items: stretch; min-height: var(--admin-row-height, 36px); border-bottom: 1px solid var(--cc-border); border-right: 1px solid var(--cc-border); }
+.loading-density .detail-summary { gap: 0; padding: 0; border-left: 1px solid var(--workbench-border); }
+.loading-density .detail-summary > div { gap: 0; align-items: stretch; min-height: var(--admin-row-height, 36px); border-bottom: 1px solid var(--workbench-border); border-right: 1px solid var(--workbench-border); }
 .loading-density .detail-summary > div > span:first-child { display: flex; align-items: center; flex: 0 0 96px; padding: var(--admin-space-2, 6px) var(--admin-space-3, 8px); background: var(--admin-label-bg, #f8fafc); }
 .loading-density .detail-summary > div > span:first-child::after { content: none; }
 .loading-density .detail-summary strong, .loading-density .detail-summary :deep(.status-badge) { align-self: center; margin: var(--admin-space-2, 6px) var(--admin-space-3, 8px); font-weight: 400; }
@@ -305,4 +306,5 @@ function formatNumber(value?: number | null, digits = 3) {
 .loading-density .readiness-note { align-items: baseline; }
 .loading-density .readiness-note span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
 @media (max-width: 720px) { .loading-density .detail-summary { grid-template-columns: 1fr; } .loading-density .detail-summary__wide { grid-column: auto; } }
+@media print { .loading-detail-content { padding: var(--admin-space-5, 12px); border: 1px solid var(--cc-border); border-radius: var(--admin-radius, 4px); background: var(--admin-surface, #fff); box-shadow: none; } .loading-detail-content :deep(.workbench-table > .data-table) { border-radius: 0; box-shadow: none; } }
 </style>

src/modules/loading-lists/components/LoadingListsView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ContainerSimulationCreate } from '@/modules/container-loading'
@@ -184,13 +185,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-workbench admin-density">
   <div class="business-page loading-lists-page admin-density">
     <ListPageLayout :ariaLabel="title">
 
 
 
-    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="canList && !error"
+    <section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="canList && !error"
         v-model:page="page"
         v-model:page-size="pageSize"
         :data="rows"
@@ -235,7 +236,7 @@ onMounted(() => {
         <template #netWeight="{ row }">{{ formatNumber((row as ConfirmedSummary).totalNetWeightKg) }}</template>
         <template #volume="{ row }">{{ formatNumber(row.totalVolumeCbm) }}</template>
         <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-      </DataTable></section>
+      </DataTable></div></section>
     </ListPageLayout>
 
   </div>
@@ -244,7 +245,7 @@ onMounted(() => {
 
 <style scoped>
 .loading-lists-page { display: grid; min-width: 0; gap: var(--admin-space-6, 16px); }
-.table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--workbench-border); background: var(--admin-surface, #fff); }
 .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-2, 6px); }
 .row-actions :deep(.el-button) { margin-left: 0; }
 @media (max-width: 720px) { .row-actions { gap: 4px; } }

src/modules/loading-lists/components/PalletLabelPrintDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, ref } from 'vue'
 import { Printer } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
@@ -52,9 +53,9 @@ async function print() {
 
 <template>
   <el-button :disabled="disabled" @click="show"><Printer :size="16" />打印托盘码</el-button>
-  <AppDialog :class="{ 'admin-density-dialog': dense }" v-model="open" :title="dialogTitle" :width="dense ? 'min(920px, calc(100vw - 28px))' : 'min(760px, calc(100vw - 28px))'" :fullscreenable="dense" confirm-text="生成 PDF" :loading="loading" :confirm-loading="printing" :confirm-disabled="disabledConfirm" @confirm="print">
+  <AppDialog class="admin-workbench is-dialog" :class="{ 'admin-density-dialog': dense }" v-model="open" :title="dialogTitle" :width="dense ? 'min(920px, calc(100vw - 28px))' : 'min(760px, calc(100vw - 28px))'" :fullscreenable="dense" confirm-text="生成 PDF" :loading="loading" :confirm-loading="printing" :confirm-disabled="disabledConfirm" @confirm="print">
     <LoadErrorState v-if="error" compact title="托盘码操作失败" :message="error.message" :show-retry="false" />
-    <div v-if="manifest" :class="{ 'density-dialog-sections': dense }">
+    <div class="admin-workbench" v-if="manifest" :class="{ 'density-dialog-sections': dense }">
       <section :class="{ 'density-dialog-section': dense }" :data-tone="dense ? 'work' : undefined">
       <el-alert type="info" :closable="false" :title="`编号规则：${manifest.containerNo}-FBA地址内部编号-三位序号；一件代发托盘不在此清单。`" />
       <el-radio-group v-model="scope" class="print-scope" :class="{ 'print-scope--dense': dense }"><el-radio value="ALL">全部打印（{{ manifest.totalCount }} 张）</el-radio><el-radio value="WAREHOUSE">按 FBA 仓补打</el-radio></el-radio-group>