Merge release/test into dev

AGENTS.md

@@ -4,7 +4,7 @@
 
 1. 用“模块快速路由”选择最小业务模块，进入后读取该目录最近的 `AGENTS.md`；按 `routes.ts → pages/ → api/types/stores/composables` 下钻，不先扫描全部 `src/`。
 2. 页面、布局或交互任务同时读取 `../../docs/Admin-Client前端原型还原验收规则.md` 和后台原型 `../../docs/悦/货代SAAS平台后台/AGENTS.md`。
-   订单样板和国内仓样式统一还须读取 `../../docs/Admin高密度界面规范.md`；以其已确认密度与彩色页签为视觉基线，逐操作保留业务语义和承载方式，公共样式按已确认菜单范围接入。
+   Admin 样式优化还须读取 `../../docs/Admin高密度界面规范.md` 的“样式维护边界”和“新模块接入规则”；以已确认密度与彩色页签为视觉基线，逐操作保留业务语义和承载方式。国内仓、客户管理是样板；新增菜单按本轮范围显式接入，货柜管理入口见 `../../docs/Admin货柜管理样式核对记录.md`。
 3. 标准列表或公共组件任务读取 `src/shared/components/AGENTS.md`；国内/海外 HTTP、Token 或刷新任务读取 `src/shared/api/AGENTS.md`；Finance 任务读取 `src/modules/finance/AGENTS.md`；海外仓全流程任务先读 `../../docs/海外仓业务/README.md`。
 4. 平台/客户层级与权限公共语义读取 `../../docs/平台客户层级与权限契约.md`；双区域 API、海外 Token 和跨区事件读取 `../../docs/跨区域认证与服务通信契约.md`。
 
@@ -51,6 +51,7 @@
 | 客户原始申报资料编辑与渠道变更 | `modules/unified-orders/components/OrderDeclarationEditorDialog.vue`、`api/unifiedOrders.ts`、`pages/UnifiedOrdersView.vue` | 使用订单版本和货物 `itemNo` 整体提交，不允许增删货物行；只编辑客户申报快照，不覆盖仓库/PDA 实测、测量审核或计费事实。渠道变化需二次确认并由 Backend `order/` 联查 `firstleg/` 的分柜、同柜、装柜与重新计价门禁；国内收货仓或中转仓变化必须重新下单 |
 | 入库扣货、解除与凭证历史 | `modules/unified-orders/pages/UnifiedOrdersView.vue`、`modules/inbounds/core/api.ts`、`types.ts` | 页面只消费服务端 `holdFlag/currentHoldReason/canHold/canRelease/actionBlockReason/history`；扣货与解除提交当前入库版本、幂等键、必填原因和可选凭证，凭证下载只走 Firstleg 授权入口。Backend `firstleg/` 的 `InboundHoldService`、`InboundHoldGuard`、`InboundHoldEvidenceService`，文件归 `file/` |
 | 入库、测量、称重库位状态、客户箱规策略与计价主数据 | 测量弹框/工作区 `modules/inbounds/measurement/InboundMeasurementDialog.vue`、`InboundMeasurementPanel.vue`，称重 `modules/inbounds/weight/components/WeightOcrPanel.vue`；主数据 `modules/fba-pricing/`、`modules/dimension-config/`、`modules/customers/components/CustomerBillingRulesPanel.vue`、`modules/fee-items/` | 客户固定四档箱规，默认计算方式为 `ADD/MULTIPLY`；测量行可选实际尺寸、箱规尺寸策略或客户默认尺寸系数，保存后以 Backend `firstleg/` 返回的外箱尺寸、体积重和计费基数为准，不在页面独立重算。费用确认的实际箱数、毛重和体积优先汇总当前 `actualMeasurementRows`，不得用可能滞后的工作区顶层合计覆盖明细。称重页在每张图片卡片只展示服务端 `locationCode/slotStatus/sharedOverflow`，不渲染或自行推导整票预留引导；删除图片须提示槽位仍归本票保留，不得按图片数组下标推导托盘或库位 |
+| 一件代发托盘打印 | `modules/unified-orders/pages/UnifiedOrdersView.vue` 的“托盘打印”页签、`modules/inbounds/core/DropshipPalletPrintPanel.vue`、`core/api.ts` | 仅一件代发订单展示；测量审核预生成托盘码后由 Admin 电脑端打印，支持本票全部托盘合并打印和单托补打。PDA 只扫码组托，不承担 PDF 下载或打印机连接 |
 | 入库单扣货、解除、凭证与历史 | `modules/inbounds/pages/InboundOrdersView.vue`、详情工作区、`modules/inbounds/core/api.ts` | 列表展示服务端 `holdFlag/currentHoldReason` 并支持筛选；详情只按 `canHold/canRelease/actionBlockReason` 开放操作。扣货与解除提交当前 `version`、原因和独立幂等键，可选凭证先按明确客户与入库单上传；历史文件只调用专用下载入口，不把上传成功但未提交命令的文件冒充扣货证据 |
 | 客户专属价格簿、柜级阶梯运费与受控调价 | 列表/上传 `modules/fba-pricing/carrier-rates/pages/CarrierRatesView.vue`，版本详情/仓库映射/确认 `modules/fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue`，路由 `modules/fba-pricing/routes.ts`；`modules/inbounds/fee/`、`modules/unified-orders/components/InboundFeeDetailManager.vue` | 列表与上传后按 `versionId` 进入 `fba-carrier-rate-detail` 独立详情页，价格行只读；回归入口 `modules/fba-pricing/carrier-rates/pages/CarrierRatesView.test.ts`。价格簿页面显式选择公共报价或具体客户；列表、上传、确认只作用于该 `customerId`，不得混合版本。计价优先消费客户专属 ACTIVE 版本，无专属版本才回退公共 ACTIVE；柜级阶梯金额和各客户分摊只展示服务端结果。调整计费量只能在服务端返回的上下 10% 范围内并提交当前费用版本、原因与二次确认；私人仓尾程派送费使用稳定 `PRIVATE_LAST_MILE_DELIVERY` 代码且只对 `PRIVATE` 目的地开放；一件代发须在预装确认前完成试算，计价后保持服务端 `WAIT_PALLETIZE` 状态 |
 | 财务、客户资金账户与柜级公共费用分摊 | `modules/finance/`，继续读该目录 `AGENTS.md`；客户账户 `pages/FinanceCustomerAccountsView.vue`，柜费 `modules/loading-lists/components/ContainerFeesPanel.vue`、`api/containerFees.ts` | `finance/`、`firstleg/`、`file/`、`docs/财务管理/`；实际、冻结、可用余额、授信与流水只消费 Finance 权威结果，充值审核和手工充扣携带版本与幂等键。跨客户公共柜费只按服务端柜内客户/订单事实分摊，金额必须守恒，创建与审核、驳回、调整、作废均整组原子处理 |
@@ -105,6 +106,9 @@
 
 ## 命令与质量门禁
 
+- 国内仓、客户管理密度默认值统一维护在 `src/styles/adminDensityTokens.css`，通用按钮/页签/描述表/弹框规则统一维护在 `adminDensity.css`；页面只选择公共类与语义参数、保留业务布局，不复制通用外观或在页面重新定义 `--admin-*` 默认值。修改前沿实际引用读取模块 CSS，接管后删除冲突旧声明。
+- 修改密度样式或接入消费者时更新并运行 `src/styles/adminDensity.test.ts` 维护合同；不得为通过检查删除权限、业务提交或错误处理断言。未接入菜单通过显式密度类隔离。
+
 在 `apps/admin-web` 执行：
 
 ```bash

src/app/DomesticOutboundListStates.test.ts

@@ -6,7 +6,7 @@ const pages = [
   ['src/modules/container-loading/pages/ContainersView.vue', ':loading="loading"', 'LoadErrorState', 'empty-text="暂无货柜"', 'statusText(row.planStatus)', 'platform:firstleg:container:list', '@retry="loadRows"'],
   ['src/modules/loading-lists/components/LoadingListsView.vue', ':loading="loading"', 'LoadErrorState', ':empty-text="`暂无符合筛选条件的${title}`"', 'loadingListStatusLabel(row.status)', 'canView', '@retry="load"'],
   ['src/modules/ocean-bookings/pages/OceanBookingsView.vue', ':loading="loading"', 'LoadErrorState', 'empty-text="暂无符合筛选条件的订舱"', 'oceanBookingStatusLabel(row.status)', "{{ row.status === 'DRAFT' ? '编辑' : '查看' }}", '@retry="load"'],
-  ['src/modules/trucking/pages/TruckAppointmentsView.vue', ':loading="loading"', 'LoadErrorState', 'empty-text="暂无符合筛选条件的拖车预约"', 'statusLabel(row.status)', '<Eye :size="15" />详情', '@retry="load"'],
+  ['src/modules/trucking/pages/TruckAppointmentsView.vue', ':loading="loading"', 'LoadErrorState', 'empty-text="暂无符合筛选条件的拖车预约"', 'statusLabel(row.status)', '@click="openDetail(row as TruckAppointmentResource)">详情</el-button>', '@retry="load"'],
 ] as const
 
 function source(path: string) {

src/app/components/WorkspaceTabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -32,7 +33,7 @@ async function confirmDiscard(tabIds: readonly string[]) {
     await ElMessageBox.confirm(
       `以下内容尚未保存：${labels.join('、')}。关闭页签后将放弃这些修改。`,
       '放弃未保存的修改？',
-      { confirmButtonText: '放弃并关闭', cancelButtonText: '继续编辑', type: 'warning' },
+      { confirmButtonText: '放弃并关闭', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
     )
     return true
   } catch {

src/app/layouts/AppLayout.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -57,7 +58,7 @@ async function pruneInaccessibleTabs() {
     await ElMessageBox.alert(
       `账号权限已变化，以下未保存内容无法继续编辑：${[...new Set(discardedDirtyWork.map((entry) => entry.label))].join('、')}。相关页签将关闭。`,
       '权限已变化',
-      { confirmButtonText: '知道了', type: 'warning' },
+      { confirmButtonText: '知道了', type: 'warning', customClass: 'admin-density-confirm' },
     ).catch(() => undefined)
   }
   const previousActiveId = workspace.activeId
@@ -76,6 +77,7 @@ async function handleLogout() {
     const dirtyNotice = dirtyLabels.length ? ` 当前还有未保存内容：${[...new Set(dirtyLabels)].join('、')}，退出后将丢失。` : ''
     await ElMessageBox.confirm(`确定退出管理后台吗？${dirtyNotice}`, '退出登录', {
       confirmButtonText: '退出',
+      customClass: 'admin-density-confirm',
       cancelButtonText: '取消',
     })
   } catch {

src/app/router/index.ts

@@ -1,3 +1,4 @@
+import '@/styles/adminDensity.css'
 import { createRouter, createWebHistory } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 import AppLayout from '@/app/layouts/AppLayout.vue'
@@ -99,7 +100,7 @@ router.beforeEach(async (to, from) => {
     await ElMessageBox.confirm(
       `当前页面还有未保存内容：${[...new Set(blocking.map((entry) => entry.label))].join('、')}。继续后将放弃这些修改。`,
       '放弃未保存的修改？',
-      { confirmButtonText: '放弃并继续', cancelButtonText: '继续编辑', type: 'warning' },
+      { confirmButtonText: '放弃并继续', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
     )
     unsaved.removeWorkspaces([fromId])
     useWorkspaceTabsStore().bumpCacheEpoch(fromId)

src/main.ts

@@ -1,3 +1,4 @@
+import '@/styles/adminDensity.css'
 import { computed, createApp } from 'vue'
 import 'dayjs/locale/zh-cn'
 import { createPinia } from 'pinia'
@@ -48,7 +49,7 @@ router.onError((error, to) => {
         await ElMessageBox.confirm(
           '检测到后台已发布新版本，需要重新加载页面。继续后将放弃当前未保存内容。',
           '重新加载页面？',
-          { confirmButtonText: '重新加载', cancelButtonText: '继续编辑', type: 'warning' },
+          { confirmButtonText: '重新加载', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
         )
         return true
       } catch {

src/modules/audit/components/CustomerAuditLogsPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { ref, watch } from 'vue'
 import { CircleCheck, CircleX, ScrollText } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -125,14 +126,14 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
 </script>
 
 <template>
-  <section class="customer-audit-panel">
+  <section class="customer-audit-panel admin-density">
     <div class="panel-title"><div><h2>操作日志</h2><p>{{ customerName }}已归属当前客户的档案与业务操作记录</p></div><ScrollText :size="19" /></div>
     <div v-if="!access.can('platform:audit:list')" class="module-empty"><ScrollText :size="30" /><strong>暂无操作日志查看权限</strong><p>请联系管理员开通平台操作日志查看权限。</p></div>
     <template v-else>
       <QueryToolbar v-model="filters" class="audit-query" ariaLabel="客户操作日志筛选" :fields="queryFields" preference-key="customer-audit-logs-query" @search="applyFilters" />
       <LoadErrorState v-if="loadError" title="客户操作日志加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
     <DataTable v-else v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" row-key="id" aria-label="客户操作日志列表" empty-text="当前客户暂无操作日志" preference-key="customer-audit-logs" border stripe>
-      <template #actions="{ row }"><el-button link type="primary" :aria-label="`查看操作日志${(row as PlatformAuditLogListItem).id}详情`" @click="openDetail(row as PlatformAuditLogListItem)">详情</el-button></template>
+      <template #actions="{ row }"><el-button class="density-action" size="small" :aria-label="`查看操作日志${(row as PlatformAuditLogListItem).id}详情`" @click="openDetail(row as PlatformAuditLogListItem)">详情</el-button></template>
       <template #description="{ row }"><el-tooltip :content="auditDescriptionLabel((row as PlatformAuditLogListItem).description)" placement="top" :show-after="400"><span class="cell-clamp">{{ auditDescriptionLabel((row as PlatformAuditLogListItem).description) }}</span></el-tooltip></template>
       <template #clientIp="{ row }">{{ display((row as PlatformAuditLogListItem).clientIp) }}</template>
       <template #eventType="{ row }"><el-tooltip :content="(row as PlatformAuditLogListItem).eventType" placement="top" :show-after="500"><span class="event-label">{{ auditEventLabel((row as PlatformAuditLogListItem).eventType) }}</span></el-tooltip></template>
@@ -144,7 +145,7 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
     </DataTable>
     </template>
 
-    <AppDrawer class="customer-audit-drawer" v-model="detailOpen" title="操作日志详情" size="min(920px, 96vw)" :loading="detailLoading" :show-footer="false">
+    <AppDrawer class="customer-audit-drawer admin-density-drawer" v-model="detailOpen" title="操作日志详情" size="min(920px, 96vw)" :loading="detailLoading" :show-footer="false">
       <LoadErrorState v-if="detailError" title="详情加载失败" :message="detailError.message" :loading="detailLoading"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
       <template v-else-if="detail">
         <section class="audit-detail-hero" :class="detail.success ? 'is-success' : 'is-failed'">
@@ -172,13 +173,13 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
 </template>
 
 <style scoped>
-:global(.customer-audit-drawer .el-drawer__header) { margin-bottom: 0; padding: 12px 16px; border-bottom: 1px solid var(--cc-border); }
-:global(.customer-audit-drawer .el-drawer__body) { padding: 12px 16px; }
 
-.customer-audit-panel { min-width:0; }.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--cc-border); }.panel-title h2 { margin:0; color:#344054; font-size:14px; }.panel-title p { margin:5px 0 0; color:var(--cc-muted); font-size:12px; }.panel-title > svg { color:var(--cc-primary); }.audit-query { margin-bottom:12px; }.module-empty { display:flex; min-height:64px; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#98a2b3; text-align:center; }.module-empty strong { color:#475467; font-size:13px; }.module-empty p { margin:0; color:var(--cc-muted); font-size:12px; }
-.cell-clamp { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.45; overflow-wrap:anywhere; }.event-label { display:inline-flex; max-width:100%; padding:3px 9px; overflow:hidden; border:1px solid #dbeafe; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.service-label { display:block; overflow:hidden; color:#475467; text-overflow:ellipsis; white-space:nowrap; }
-.audit-detail-hero { display:flex; align-items:flex-start; gap:13px; padding:8px 10px; border:1px solid #d1fadf; border-radius:0; background:#f6fef9; }.audit-detail-hero.is-failed { border-color:#fee4e2; background:#fff7f6; }.result-icon { display:grid; width:38px; height:38px; flex:0 0 auto; place-items:center; border-radius:50%; background:#dcfae6; color:#079455; }.is-failed .result-icon { background:#fee4e2; color:#d92d20; }.hero-copy { min-width:0; flex:1; }.hero-copy > span { color:#667085; font-size:12px; }.hero-copy h3 { margin:3px 0 4px; color:#101828; font-size:14px; }.hero-copy p { margin:0; color:#475467; font-size:13px; line-height:1.55; }
-.audit-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:16px; overflow:hidden; border:1px solid #e4e7ec; border-radius:0; background:#fff; }.audit-detail-grid > div { display:flex; min-width:0; min-height:36px; flex-direction:column; justify-content:center; gap:5px; padding:6px 10px; border-right:1px solid #eaecf0; border-bottom:1px solid #eaecf0; }.audit-detail-grid > div:nth-child(3n) { border-right:0; }.audit-detail-grid > div.wide { grid-column:1/-1; border-right:0; }.audit-detail-grid > div:last-child { border-bottom:0; }.audit-detail-grid span { color:#667085; font-size:12px; }.audit-detail-grid strong { overflow-wrap:anywhere; color:#1d2939; font-size:14px; font-weight:600; }.audit-detail-grid small { overflow-wrap:anywhere; color:#98a2b3; font-size:12px; }.request-cell > div { display:flex; min-width:0; align-items:center; gap:9px; }.request-cell code { min-width:0; overflow-wrap:anywhere; color:#344054; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.failure-alert { margin-top:16px; }
-.snapshot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }.snapshot-grid section { min-width:0; padding:10px; border:1px solid #e4e7ec; border-radius:0; background:#fff; }.snapshot-grid h3 { margin:0; color:#344054; font-size:14px; }.snapshot-grid p { margin:4px 0 10px; color:#98a2b3; font-size:12px; }.snapshot-grid pre { min-height:160px; max-height:360px; margin:0; padding:14px; overflow:auto; border:1px solid #eaecf0; border-radius:8px; background:#f8fafc; color:#344054; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
+
+
+.customer-audit-panel { min-width:0; }.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--admin-space-6, 16px); margin-bottom:var(--admin-space-3, 8px); padding-bottom:var(--admin-space-3, 8px); border-bottom:1px solid var(--cc-border); }.panel-title h2 { margin:0; color:#344054; font-size:var(--admin-font-section, 14px); }.panel-title p { margin:5px 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }.panel-title > svg { color:var(--cc-primary); }.audit-query { margin-bottom:var(--admin-space-5, 12px); }.module-empty { display:flex; min-height:var(--admin-empty-height, 64px); align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#98a2b3; text-align:center; }.module-empty strong { color:#475467; font-size:var(--admin-font-body, 13px); }.module-empty p { margin:0; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.cell-clamp { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.45; overflow-wrap:anywhere; }.event-label { display:inline-flex; max-width:100%; padding:3px 9px; overflow:hidden; border:1px solid #dbeafe; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:var(--admin-font-caption, 12px); line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.service-label { display:block; overflow:hidden; color:#475467; text-overflow:ellipsis; white-space:nowrap; }
+.audit-detail-hero { display:flex; align-items:flex-start; gap:13px; padding:var(--admin-space-3, 8px) var(--admin-space-4, 10px); border:1px solid #d1fadf; border-radius:0; background:#f6fef9; }.audit-detail-hero.is-failed { border-color:#fee4e2; background:#fff7f6; }.result-icon { display:grid; width:38px; height:var(--admin-tab-height, 38px); flex:0 0 auto; place-items:center; border-radius:50%; background:#dcfae6; color:#079455; }.is-failed .result-icon { background:#fee4e2; color:#d92d20; }.hero-copy { min-width:0; flex:1; }.hero-copy > span { color:#667085; font-size:var(--admin-font-caption, 12px); }.hero-copy h3 { margin:3px 0 var(--admin-space-1, 4px); color:#101828; font-size:var(--admin-font-section, 14px); }.hero-copy p { margin:0; color:#475467; font-size:var(--admin-font-body, 13px); line-height:1.55; }
+.audit-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--admin-space-6, 16px); overflow:hidden; border:1px solid #e4e7ec; border-radius:0; background:var(--admin-surface, #fff); }.audit-detail-grid > div { display:flex; min-width:0; min-height:var(--admin-row-height, 36px); flex-direction:column; justify-content:center; gap:5px; padding:var(--admin-space-2, 6px) var(--admin-space-4, 10px); border-right:1px solid #eaecf0; border-bottom:1px solid #eaecf0; }.audit-detail-grid > div:nth-child(3n) { border-right:0; }.audit-detail-grid > div.wide { grid-column:1/-1; border-right:0; }.audit-detail-grid > div:last-child { border-bottom:0; }.audit-detail-grid span { color:#667085; font-size:var(--admin-font-caption, 12px); }.audit-detail-grid strong { overflow-wrap:anywhere; color:#1d2939; font-size:var(--admin-font-section, 14px); font-weight:600; }.audit-detail-grid small { overflow-wrap:anywhere; color:#98a2b3; font-size:var(--admin-font-caption, 12px); }.request-cell > div { display:flex; min-width:0; align-items:center; gap:9px; }.request-cell code { min-width:0; overflow-wrap:anywhere; color:#344054; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; }.failure-alert { margin-top:var(--admin-space-6, 16px); }
+.snapshot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--admin-space-6, 16px); margin-top:18px; }.snapshot-grid section { min-width:0; padding:var(--admin-space-4, 10px); border:1px solid #e4e7ec; border-radius:0; background:var(--admin-surface, #fff); }.snapshot-grid h3 { margin:0; color:#344054; font-size:var(--admin-font-section, 14px); }.snapshot-grid p { margin:var(--admin-space-1, 4px) 0 var(--admin-space-4, 10px); color:#98a2b3; font-size:var(--admin-font-caption, 12px); }.snapshot-grid pre { min-height:160px; max-height:360px; margin:0; padding:14px; overflow:auto; border:1px solid #eaecf0; border-radius:8px; background:var(--admin-label-bg, #f8fafc); color:#344054; font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
 @media(max-width:720px){.audit-detail-grid{grid-template-columns:1fr}.audit-detail-grid>div,.audit-detail-grid>div:nth-child(3n){border-right:0}.audit-detail-grid>div.wide{grid-column:auto}.snapshot-grid{grid-template-columns:1fr}.audit-detail-hero{align-items:flex-start}.audit-detail-hero>.el-tag{flex:0 0 auto}}
 </style>

src/modules/container-loading/api/platformContainerLoading.test.ts

@@ -5,6 +5,7 @@ import { http } from '@/shared/api/http'
 import {
   adjustSmartLoadingItem, assignPendingReviewSmartLoadingOrder, assignSmartLoadingGroup, assignSmartLoadingItem, assignSmartLoadingPallet, getContainer,
   listContainers, listSmartLoadingCandidates, listSmartLoadingWorkbenchContainers, removeAllUnpickedSmartLoadingItems, removeSmartLoadingGroup, removeSmartLoadingItem, removeSmartLoadingPallet,
+  recommendSmartLoading,
   getContainerClearance, downloadContainerClearance, uploadContainerClearance, completeContainerClearance,
   getContainerOverview, updateContainerPickupCode, markContainerException, cancelContainerException, uploadContainerDocument, downloadContainerDocument, downloadContainerPdaPhoto,
   getCustomerContainerTransitSummary,
@@ -17,7 +18,7 @@ vi.mock('@/shared/api/http', () => ({
   unwrapApiResponse: <T>(response: { data: T }) => response.data,
 }))
 
-const container = { id: 9007199254740993, planId: 9007199254740994, planNo: 'LP-001', warehouseId: 9007199254740995, shippingCompanyId: 9007199254740996, terminalTruckingCompanyId: '9007199254740998', terminalTruckingCompany: '测试拖车供应商', sourceType: 'SIMULATION', recordStatus: 'ACTIVE', mergedIntoContainerBookingId: null, channelGroupCode: 'EXX', channelCode: 'NY_EXX', channelName: '纽约EXX海铁', exceptionActive: true, destinationClearanceDocumentStatus: 'COMPLETED', customsDeclarationDocumentStatus: 'UPLOADED', deliveryOrderDocumentStatus: 'UPLOADED', pickupCode: '00123456', pickupCodeUpdatedBy: 9007199254740999, unloadingCompletedAt: '2026-08-20T10:00:00', unloadingPhotoUploadedAt: '2026-08-20T10:15:00', estimatedEmptyReportedAt: '2026-08-21T09:00:00', actualEmptyReportedAt: null, emptyReportSourceVersion: '9007199254740997', version: '2', capacityCbm: '76', maxWeightKg: '28000' }
+const container = { id: 9007199254740993, planId: 9007199254740994, planNo: 'LP-001', warehouseId: 9007199254740995, shippingCompanyId: 9007199254740996, terminalTruckingCompanyId: '9007199254740998', terminalTruckingCompany: '测试拖车供应商', sourceType: 'SIMULATION', recordStatus: 'ACTIVE', mergedIntoContainerBookingId: null, channelGroupCode: 'EXX', channelCode: 'NY_EXX', channelName: '纽约EXX海铁', exceptionActive: true, destinationClearanceDocumentStatus: 'COMPLETED', customsDeclarationDocumentStatus: 'UPLOADED', deliveryOrderDocumentStatus: 'UPLOADED', pickupCode: '00123456', pickupCodeUpdatedBy: 9007199254740999, unloadingCompletedAt: '2026-08-20T10:00:00', unloadingPhotoUploadedAt: '2026-08-20T10:15:00', estimatedEmptyReportedAt: '2026-08-21T09:00:00', actualEmptyReportedAt: null, emptyReportSourceVersion: '9007199254740997', version: '2', capacityCbm: '68', maxWeightKg: '19500' }
 const plan = {
   id: 9007199254740993, bookingId: 9007199254740994, version: '3', status: 'LOADING',
   canAssign: true, canEdit: true, blockedReason: null, finalCompletionStatus: 'NOT_STARTED',
@@ -40,13 +41,13 @@ describe('platform container loading API', () => {
   it('normalizes paged container ids and numeric metadata', async () => {
     vi.mocked(http.get).mockResolvedValueOnce({ code: '200', data: { records: [{ container, workbenchStage: 'PRE_LOADING', statusSummary: { loadingStatus: 'WAIT_LOADING' }, allowedActions: ['EDIT_CONTAINER'], actualFacts: {}, terminalDrayage: null }], page: '1', size: '20', total: '1', pages: '1' } })
     const result = await listContainers({ page: 1, size: 20 })
-    expect(result.records[0]).toMatchObject({ id: String(container.id), planId: String(container.planId), planNo: 'LP-001', warehouseId: String(container.warehouseId), terminalTruckingCompanyId: String(container.terminalTruckingCompanyId), terminalTruckingCompany: '测试拖车供应商', channelCode: 'NY_EXX', channelName: '纽约EXX海铁', exceptionActive: true, destinationClearanceDocumentStatus: 'COMPLETED', customsDeclarationDocumentStatus: 'UPLOADED', deliveryOrderDocumentStatus: 'UPLOADED', pickupCode: '00123456', pickupCodeUpdatedBy: String(container.pickupCodeUpdatedBy), unloadingCompletedAt: '2026-08-20T10:00:00', unloadingPhotoUploadedAt: '2026-08-20T10:15:00', estimatedEmptyReportedAt: '2026-08-21T09:00:00', actualEmptyReportedAt: null, emptyReportSourceVersion: '9007199254740997', version: 2, capacityCbm: 76 })
+    expect(result.records[0]).toMatchObject({ id: String(container.id), planId: String(container.planId), planNo: 'LP-001', warehouseId: String(container.warehouseId), terminalTruckingCompanyId: String(container.terminalTruckingCompanyId), terminalTruckingCompany: '测试拖车供应商', channelCode: 'NY_EXX', channelName: '纽约EXX海铁', exceptionActive: true, destinationClearanceDocumentStatus: 'COMPLETED', customsDeclarationDocumentStatus: 'UPLOADED', deliveryOrderDocumentStatus: 'UPLOADED', pickupCode: '00123456', pickupCodeUpdatedBy: String(container.pickupCodeUpdatedBy), unloadingCompletedAt: '2026-08-20T10:00:00', unloadingPhotoUploadedAt: '2026-08-20T10:15:00', estimatedEmptyReportedAt: '2026-08-21T09:00:00', actualEmptyReportedAt: null, emptyReportSourceVersion: '9007199254740997', version: 2, capacityCbm: 68 })
     expect(http.get).toHaveBeenCalledWith('/platform/v1/containers/domestic', { params: { page: 1, size: 20, scope: 'ACTIVE' } })
   })
 
   it('uses the full-edit request shape without retaining the retired container transport endpoint', async () => {
     vi.mocked(http.put).mockResolvedValue({ code: '200', data: container })
-    const data = { warehouseId: '8', warehouseName: '义乌仓', containerType: '40HC', containerNo: null, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 76, maxWeightKg: 28000, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }
+    const data = { warehouseId: '8', warehouseName: '义乌仓', containerType: '40HQ', containerNo: null, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 19500, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }
     await updateContainer('7', 2, data)
     expect(http.put).toHaveBeenCalledWith('/platform/v1/containers/7', { version: 2, data })
     expect(readFileSync(resolve(process.cwd(), 'src/modules/container-loading/api/platformContainerLoading.ts'), 'utf8')).not.toContain('/transport')
@@ -84,10 +85,10 @@ describe('platform container loading API', () => {
   it('uses the frozen simulation create and ocean booking link contracts', async () => {
     vi.mocked(http.post).mockResolvedValue({ code: '200', data: { ...container, oceanBookingId: 101, oceanBookingRequirementId: 202 } })
     vi.mocked(http.delete).mockResolvedValue({ code: '200', data: { ...container, oceanBookingId: null, oceanBookingRequirementId: null } })
-    await createContainerSimulation({ channelGroupCode: 'EXX', warehouseId: '8', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000 })
+    await createContainerSimulation({ channelGroupCode: 'EXX', warehouseId: '8', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500 })
     await linkContainerOceanBooking('7', { oceanBookingId: '101', requirementId: '202', containerNo: 'MSCU1234567', expectedVersion: 3 })
     await unlinkContainerOceanBooking('7', 4, '空柜改配')
-    expect(http.post).toHaveBeenNthCalledWith(1, '/platform/v1/containers', { channelGroupCode: 'EXX', warehouseId: '8', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000 })
+    expect(http.post).toHaveBeenNthCalledWith(1, '/platform/v1/containers', { channelGroupCode: 'EXX', warehouseId: '8', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500 })
     expect(http.post).toHaveBeenNthCalledWith(2, '/platform/v1/containers/7/ocean-booking-link', { oceanBookingId: '101', requirementId: '202', containerNo: 'MSCU1234567', expectedVersion: 3 })
     expect(http.delete).toHaveBeenCalledWith('/platform/v1/containers/7/ocean-booking-link', { data: { expectedVersion: 4, reason: '空柜改配' } })
   })
@@ -131,6 +132,25 @@ describe('platform container loading API', () => {
     )
   })
 
+  it('limits smart recommendation to the current customer and inbound filters', async () => {
+    vi.mocked(http.post).mockResolvedValue({ code: '200', data: plan })
+
+    await recommendSmartLoading('10', 5, {
+      customerId: '9007199254740998',
+      inboundCode: ' EXXHWK2609140162 ',
+    })
+
+    expect(http.post).toHaveBeenCalledWith(
+      '/platform/v1/first-leg/smart-loading/plans/10/recommend',
+      expect.objectContaining({
+        expectedVersion: 5,
+        customerId: '9007199254740998',
+        inboundCode: 'EXXHWK2609140162',
+        operationId: expect.stringContaining('recommend-'),
+      }),
+    )
+  })
+
   it('removes a sealed pallet through the whole-pallet command', async () => {
     vi.mocked(http.delete).mockResolvedValue({ code: '200', data: plan })
 
@@ -162,7 +182,7 @@ describe('platform container loading API', () => {
 
   it('queries workbench containers with the same global filters and excludes the retired booking parameter', async () => {
     vi.mocked(http.get).mockResolvedValueOnce({ code: '200', data: {
-      records: [{ bookingId: 9007199254740993n, bookingNo: 'BK-1', cabinetNo: 'CAB-1', containerNo: null, warehouseId: 8, warehouseName: '义乌仓', channelCode: 'MATSON_CLX_TRUCK', channelName: '美森正班海卡', containerType: '40HC', planId: 9007199254740994n, planNo: 'LP-1', planStatus: 'EDITING', version: '2' }],
+      records: [{ bookingId: 9007199254740993n, bookingNo: 'BK-1', cabinetNo: 'CAB-1', containerNo: null, warehouseId: 8, warehouseName: '义乌仓', channelCode: 'MATSON_CLX_TRUCK', channelName: '美森正班海卡', containerType: '40HQ', planId: 9007199254740994n, planNo: 'LP-1', planStatus: 'EDITING', version: '2' }],
       page: '1', size: '200', total: '1', pages: '1',
     } })
 

src/modules/container-loading/api/platformContainerLoading.ts

@@ -380,8 +380,20 @@ export async function assignSmartLoadingGroup(planId: string, inboundId: string,
   )
   return plan(unwrapApiResponse(response))
 }
-export async function recommendSmartLoading(planId: string, expectedVersion: number) {
-  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(`${smartLoadingPath}/plans/${encodeURIComponent(planId)}/recommend`, { expectedVersion, operationId: operationId('recommend') })
+export async function recommendSmartLoading(
+  planId: string,
+  expectedVersion: number,
+  scope: { customerId?: string; inboundCode?: string } = {},
+) {
+  const response = await http.post<ApiEnvelope<SmartLoadingPlan>, ApiEnvelope<SmartLoadingPlan>>(
+    `${smartLoadingPath}/plans/${encodeURIComponent(planId)}/recommend`,
+    {
+      expectedVersion,
+      operationId: operationId('recommend'),
+      ...(scope.customerId ? { customerId: scope.customerId } : {}),
+      ...(scope.inboundCode?.trim() ? { inboundCode: scope.inboundCode.trim() } : {}),
+    },
+  )
   return plan(unwrapApiResponse(response))
 }
 

src/modules/container-loading/api/terminalDrayages.test.ts

@@ -7,7 +7,6 @@ import {
   getTerminalDrayageHistory,
   listTerminalDrayages,
   recordTerminalDrayageEmptyReturn,
-  recordTerminalDrayagePickup,
   scheduleTerminalDrayagePickup,
   selectTerminalDrayageFleet,
 } from './terminalDrayages'
@@ -54,12 +53,10 @@ describe('terminal drayages API', () => {
     vi.mocked(http.post).mockResolvedValue({ data: view })
     await selectTerminalDrayageFleet('101', { expectedVersion: 3, fleetSupplierId: '501', fleetSupplierName: '港运车队' })
     await scheduleTerminalDrayagePickup('101', { expectedVersion: 4, pickupAppointmentAt: '2026-09-07T08:00:00' })
-    await recordTerminalDrayagePickup('101', { expectedVersion: 5, actualAt: '2026-09-07T09:00:00', remark: '实际提柜' })
-    await recordTerminalDrayageEmptyReturn('101', { expectedVersion: 6, actualAt: '2026-09-10T09:00:00', remark: '实际还柜' })
+    await recordTerminalDrayageEmptyReturn('101', { expectedVersion: 5, actualAt: '2026-09-10T09:00:00', remark: '实际还柜' })
     expect(http.post).toHaveBeenNthCalledWith(1, '/platform/v1/terminal-drayages/101/fleet', expect.objectContaining({ expectedVersion: 3, fleetSupplierId: '501' }), expect.objectContaining({ headers: { 'Idempotency-Key': expect.stringContaining('terminal-drayage-fleet-') } }))
     expect(http.post).toHaveBeenNthCalledWith(2, '/platform/v1/terminal-drayages/101/pickup-appointment', expect.objectContaining({ expectedVersion: 4 }), expect.any(Object))
-    expect(http.post).toHaveBeenNthCalledWith(3, '/platform/v1/terminal-drayages/101/pickup', expect.objectContaining({ expectedVersion: 5, remark: '实际提柜' }), expect.objectContaining({ headers: { 'Idempotency-Key': expect.stringContaining('terminal-drayage-pickup-') } }))
-    expect(http.post).toHaveBeenNthCalledWith(4, '/platform/v1/terminal-drayages/101/empty-return', expect.objectContaining({ expectedVersion: 6, remark: '实际还柜' }), expect.objectContaining({ headers: { 'Idempotency-Key': expect.stringContaining('terminal-drayage-empty-return-') } }))
+    expect(http.post).toHaveBeenNthCalledWith(3, '/platform/v1/terminal-drayages/101/empty-return', expect.objectContaining({ expectedVersion: 5, remark: '实际还柜' }), expect.objectContaining({ headers: { 'Idempotency-Key': expect.stringContaining('terminal-drayage-empty-return-') } }))
   })
 
   it('loads operation history from the container business id', async () => {

src/modules/container-loading/api/terminalDrayages.ts

@@ -1,7 +1,7 @@
 import { http, unwrapApiResponse, type ApiEnvelope } from '@/shared/api/http'
 
 export type TerminalDrayageStatus = 'WAITING_FOR_ARRIVAL' | 'ARRIVED' | 'PICKUP_SCHEDULED' | 'PICKED_UP' | 'UNLOADED' | 'EMPTY_RETURNED'
-export type TerminalDrayageAction = 'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'
+export type TerminalDrayageAction = 'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'
 
 export interface TerminalDrayageEmail {
   id: string
@@ -123,9 +123,6 @@ export function selectTerminalDrayageFleet(containerBookingId: string, body: { e
 export function scheduleTerminalDrayagePickup(containerBookingId: string, body: { expectedVersion: number; pickupAppointmentAt: string; reason?: string }) {
   return command(containerBookingId, 'pickup-appointment', body)
 }
-export function recordTerminalDrayagePickup(containerBookingId: string, body: { expectedVersion: number; actualAt: string; remark?: string }) {
-  return command(containerBookingId, 'pickup', body)
-}
 export function recordTerminalDrayageEmptyReturn(containerBookingId: string, body: { expectedVersion: number; actualAt: string; remark?: string }) {
   return command(containerBookingId, 'empty-return', body)
 }

src/modules/container-loading/components/ContainerCustomsPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { Download, FileUp } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -64,7 +64,7 @@ async function load() {
 async function start() {
   if (!customs.value || customs.value.status !== 'READY_TO_START') return
   try {
-    await ElMessageBox.confirm('开始后将冻结客户当前退税资料版本、关联入仓码覆盖范围及平台买单准备事实，确认开始整柜报关？', '开始整柜报关', { type: 'warning', confirmButtonText: '确认开始' })
+    await ElMessageBox.confirm('开始后将冻结客户当前退税资料版本、关联入仓码覆盖范围及平台买单准备事实，确认开始整柜报关？', '开始整柜报关', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认开始' })
   } catch { return }
   actionLoading.value = true; actionError.value = null
   try { customs.value = await startContainerCustoms(props.loadingPlanId, customs.value.version); ElMessage.success('整柜报关已开始') }
@@ -79,7 +79,7 @@ async function uploadCompletion(document: ContainerCustomsDocument) {
   const finalConfirmation = !document.completion && missingCompletionCount.value === 1
   if (finalConfirmation) {
     try {
-      await ElMessageBox.confirm('这是最后一份待上传的报关完成文件；确认后系统将自动完成当前混合/退税柜报关。是否继续？', '完成整柜报关', { type: 'warning', confirmButtonText: '确认上传并完成' })
+      await ElMessageBox.confirm('这是最后一份待上传的报关完成文件；确认后系统将自动完成当前混合/退税柜报关。是否继续？', '完成整柜报关', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认上传并完成' })
     } catch { return }
   }
   actionLoading.value = true; actionError.value = null
@@ -123,7 +123,7 @@ async function downloadFile(document: ContainerCustomsDocument, kind: 'source' |
 
 async function completeAllBuy() {
   if (!customs.value || customs.value.status !== 'DECLARING' || !allBuy.value) return
-  try { await ElMessageBox.confirm('确认全买单柜报关已经完成？报关完成不等同于国内离仓。', '完成全买单柜报关', { type: 'warning', confirmButtonText: '确认完成' }) }
+  try { await ElMessageBox.confirm('确认全买单柜报关已经完成？报关完成不等同于国内离仓。', '完成全买单柜报关', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认完成' }) }
   catch { return }
   actionLoading.value = true; actionError.value = null
   try {
@@ -151,7 +151,7 @@ onMounted(load)
 </script>
 
 <template>
-  <section class="container-customs surface-panel" aria-label="整柜报关">
+  <section class="container-customs surface-panel admin-density" aria-label="整柜报关">
     <OperationErrorToast :details="actionError" />
     <header class="customs-header">
       <div><h2>整柜报关</h2><p>客户退税资料与平台买单事实按柜冻结；报关完成和国内离仓分别展示。</p></div>
@@ -171,15 +171,15 @@ onMounted(load)
       <div class="customs-metrics"><span>退税总票 <strong>{{ customs.taxRefundCount }}</strong></span><span>已覆盖 <strong>{{ customs.coveredTaxRefundCount }}</strong></span><span :class="{ danger: missingCoverageCount }">缺失 <strong>{{ missingCoverageCount }}</strong></span></div>
       <div v-if="missingInbounds.length" class="compact-table-wrap">
         <h3>缺退税资料清单</h3>
-        <table class="compact-table"><thead><tr><th>客户</th><th>订单号</th><th>入仓码</th></tr></thead><tbody><tr v-for="item in missingInbounds" :key="item.inboundId"><td>{{ item.customerName }}</td><td>{{ item.orderNo }}</td><td>{{ item.inboundCode }}</td></tr></tbody></table>
+        <table class="compact-table density-table"><thead><tr><th>客户</th><th>订单号</th><th>入仓码</th></tr></thead><tbody><tr v-for="item in missingInbounds" :key="item.inboundId"><td>{{ item.customerName }}</td><td>{{ item.orderNo }}</td><td>{{ item.inboundCode }}</td></tr></tbody></table>
       </div>
       <div v-if="customs.documents.length" class="compact-table-wrap">
         <h3>已冻结退税资料与报关完成文件</h3>
-        <table class="compact-table document-table"><thead><tr><th>操作</th><th>客户退税资料</th><th>报关完成文件</th><th>关联入仓码</th><th>版本</th><th>客户</th><th>完成情况</th></tr></thead><tbody>
+        <table class="compact-table document-table density-table"><thead><tr><th>操作</th><th>客户退税资料</th><th>报关完成文件</th><th>关联入仓码</th><th>版本</th><th>客户</th><th>完成情况</th></tr></thead><tbody>
           <tr v-for="document in customs.documents" :key="document.documentId">
-            <td><div v-if="canManage && customs.status === 'DECLARING'" class="document-actions"><el-upload :auto-upload="false" :limit="1" :show-file-list="false" :on-change="(upload: UploadFile) => selectCompletion(document.documentId, upload)"><el-button size="small"><FileUp :size="14" />{{ document.completion ? '覆盖报关完成文件' : '上传报关完成文件' }}</el-button></el-upload><el-button size="small" type="primary" :disabled="!completionFiles[document.documentId]" :loading="actionLoading" @click="uploadCompletion(document)">提交</el-button></div><span v-else class="readonly-label">只读</span></td>
-            <td><div class="file-cell"><span :title="document.source.fileName">{{ document.source.fileName }}</span><el-button link type="primary" :loading="downloadingKey === `source:${document.documentId}`" :aria-label="`下载客户退税资料 ${document.source.fileName}`" @click="downloadFile(document, 'source')"><Download :size="14" />下载</el-button></div></td>
-            <td><div v-if="document.completion" class="file-cell"><span :title="document.completion.fileName">{{ document.completion.fileName }}</span><el-button link type="primary" :loading="downloadingKey === `completion:${document.documentId}`" :aria-label="`下载报关完成文件 ${document.completion.fileName}`" @click="downloadFile(document, 'completion')"><Download :size="14" />下载</el-button></div><span v-else>未上传</span></td>
+            <td><div v-if="canManage && customs.status === 'DECLARING'" class="document-actions density-actions"><el-upload :auto-upload="false" :limit="1" :show-file-list="false" :on-change="(upload: UploadFile) => selectCompletion(document.documentId, upload)"><el-button class="density-action" size="small">{{ document.completion ? '覆盖报关完成文件' : '上传报关完成文件' }}</el-button></el-upload><el-button data-tone="primary" class="density-action" size="small" type="primary" :disabled="!completionFiles[document.documentId]" :loading="actionLoading" @click="uploadCompletion(document)">提交</el-button></div><span v-else class="readonly-label">只读</span></td>
+            <td><div class="file-cell"><span :title="document.source.fileName">{{ document.source.fileName }}</span><el-button class="density-action" type="primary" :loading="downloadingKey === `source:${document.documentId}`" :aria-label="`下载客户退税资料 ${document.source.fileName}`" @click="downloadFile(document, 'source')">下载</el-button></div></td>
+            <td><div v-if="document.completion" class="file-cell"><span :title="document.completion.fileName">{{ document.completion.fileName }}</span><el-button class="density-action" type="primary" :loading="downloadingKey === `completion:${document.documentId}`" :aria-label="`下载报关完成文件 ${document.completion.fileName}`" @click="downloadFile(document, 'completion')">下载</el-button></div><span v-else>未上传</span></td>
             <td>{{ document.inboundCodes.join('、') || '—' }}</td><td>退税资料 v{{ document.source.version }}<span v-if="document.completion"> / 报关完成 v{{ document.completion.version }}</span></td><td>{{ documentCustomers(document) }}</td><td>{{ document.completion ? '已上传报关完成文件' : '待上传报关完成文件' }}</td>
           </tr>
         </tbody></table>
@@ -192,5 +192,5 @@ onMounted(load)
 </template>
 
 <style scoped>
-.container-customs{padding:12px 16px}.customs-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.customs-header h2,.compact-table-wrap h3{margin:0;font-size:15px}.customs-header p{margin:3px 0 0;color:var(--cc-muted);font-size:12px}.customs-actions{display:flex;align-items:center;gap:8px}.action-error{margin-top:8px;padding:8px 10px;border:1px solid var(--el-color-danger-light-5);border-radius:4px;background:var(--el-color-danger-light-9);color:var(--el-color-danger);font-size:12px}.action-error :deep(.api-error-meta){margin-top:5px}.customs-metrics{display:flex;gap:20px;margin-top:10px;padding:8px 10px;background:var(--cc-surface-muted);font-size:12px}.customs-metrics strong{margin-left:4px;font-size:16px}.customs-metrics .danger strong{color:var(--el-color-danger)}.compact-table-wrap{margin-top:10px}.compact-table-wrap h3{margin-bottom:6px}.compact-table{width:100%;border-collapse:collapse;font-size:12px}.compact-table th,.compact-table td{padding:7px 9px;border:1px solid var(--cc-border);text-align:left;vertical-align:middle}.compact-table th{background:var(--cc-surface-muted);color:var(--cc-muted)}.document-table th:first-child{width:200px}.document-actions,.file-cell{display:flex;align-items:center;gap:6px}.file-cell span{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-label{color:var(--cc-muted)}.departure-state{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--cc-border);font-size:13px}
+.container-customs{padding:0;border:0}.customs-header{display:flex;align-items:center;justify-content:space-between;gap:var(--admin-space-5)}.customs-header h2,.compact-table-wrap h3{margin:0;font-size:var(--admin-font-section)}.customs-header p{margin:3px 0 0;color:var(--cc-muted);font-size:var(--admin-font-caption)}.customs-actions{display:flex;align-items:center;gap:var(--admin-space-3)}.action-error{margin-top:var(--admin-space-3);padding:var(--admin-space-3) var(--admin-space-4);border:1px solid var(--el-color-danger-light-5);border-radius:var(--admin-radius);background:var(--el-color-danger-light-9);color:var(--el-color-danger);font-size:var(--admin-font-caption)}.action-error :deep(.api-error-meta){margin-top:5px}.customs-metrics{display:flex;gap:var(--admin-space-6);margin-top:var(--admin-space-4);padding:var(--admin-space-3) var(--admin-space-4);background:var(--cc-surface-muted);font-size:var(--admin-font-caption)}.customs-metrics strong{margin-left:var(--admin-space-1);font-size:var(--admin-font-body)}.customs-metrics .danger strong{color:var(--el-color-danger)}.compact-table-wrap{margin-top:var(--admin-space-4)}.compact-table-wrap h3{margin-bottom:var(--admin-space-2)}.compact-table{width:100%}.document-table th:first-child{width:270px}.document-actions,.file-cell{display:flex;align-items:center;gap:var(--admin-space-2)}.file-cell span{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.readonly-label{color:var(--cc-muted)}.departure-state{display:flex;align-items:center;gap:var(--admin-space-3);margin-top:var(--admin-space-4);padding-top:var(--admin-space-4);border-top:1px solid var(--cc-border);font-size:var(--admin-font-body)}
 </style>

src/modules/container-loading/components/ContainerLastLegFeesPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getFinancePaymentVoucher, downloadFinancePaymentVoucher } from '@/modules/finance'
@@ -143,31 +144,31 @@ async function uploadVoucher(event: Event) {
   }
 }
 async function submit(row: OverseasContainerFeeSource) {
-  await ElMessageBox.confirm(`确认提交“${row.feeItemName}”审核？`, '提交费用', { type: 'warning' })
+  await ElMessageBox.confirm(`确认提交“${row.feeItemName}”审核？`, '提交费用', { customClass: 'admin-density-confirm', type: 'warning' })
   await mutate(() => submitOverseasContainerFee(row.sourceFeeId, key('container-fee-submit')), '费用已提交审核')
 }
 async function review(row: OverseasContainerFeeSource, decision: 'APPROVE' | 'REJECT') {
   let reason: string | null = null
-  if (decision === 'REJECT') { const result = await ElMessageBox.prompt('请输入驳回原因', '驳回费用', { inputPattern: /\S+/, inputErrorMessage: '请输入驳回原因', type: 'warning' }); reason = result.value.trim() }
-  else await ElMessageBox.confirm(`确认审核通过“${row.feeItemName}”？`, '审核费用', { type: 'warning' })
+  if (decision === 'REJECT') { const result = await ElMessageBox.prompt('请输入驳回原因', '驳回费用', { customClass: 'admin-density-confirm', inputPattern: /\S+/, inputErrorMessage: '请输入驳回原因', type: 'warning' }); reason = result.value.trim() }
+  else await ElMessageBox.confirm(`确认审核通过“${row.feeItemName}”？`, '审核费用', { customClass: 'admin-density-confirm', type: 'warning' })
   await mutate(() => reviewOverseasContainerFee(row.sourceFeeId, decision, reason, key('container-fee-review')), decision === 'APPROVE' ? '费用已审核通过' : '费用已驳回')
 }
 async function voidFee(row: OverseasContainerFeeSource) {
-  const result = await ElMessageBox.prompt('请输入作废原因', '作废费用', { inputPattern: /\S+/, inputErrorMessage: '请输入作废原因', type: 'warning' })
+  const result = await ElMessageBox.prompt('请输入作废原因', '作废费用', { customClass: 'admin-density-confirm', inputPattern: /\S+/, inputErrorMessage: '请输入作废原因', type: 'warning' })
   await mutate(() => voidOverseasContainerFee(row.sourceFeeId, row.sourceVersion, result.value.trim(), key('container-fee-void')), '费用已作废')
 }
 onMounted(load)
 </script>
 
 <template>
-  <div class="last-leg-fees">
+  <div class="last-leg-fees admin-density">
     <header class="last-leg-fees__header"><div><h2>{{ title }}</h2><p>按真实货柜展示港口、堆存、修箱、吊机和码头拖车费用，金额按币种分别列示。</p></div><el-button v-if="canEdit" type="primary" :disabled="!containerNo || customers.length === 0" @click="openCreate">新增费用</el-button></header>
     <el-alert v-if="canView && !canEdit && !canReview" type="info" :closable="false" title="当前账号仅有海外段费用查看权限。" />
     <el-alert v-if="!containerNo" type="warning" :closable="false" title="当前货柜尚未补录真实集装箱号，暂不能新增尾程费用。" />
     <el-alert v-if="!canView" type="warning" :closable="false" title="当前账号无权查看尾程计费。" />
     <LoadErrorState v-else-if="error" title="尾程计费加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <el-table v-else v-loading="loading" :data="rows" empty-text="当前货柜暂无尾程费用">
-      <el-table-column label="操作" fixed="left" width="240"><template #default="{ row }"><div class="row-actions"><el-button v-if="canEdit && row.sourceStatus === 'ACTIVE' && ['DRAFT', 'REJECTED'].includes(row.reviewStatus)" link type="primary" @click="submit(row as OverseasContainerFeeSource)">提交</el-button><el-button v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'PENDING'" link type="success" @click="review(row as OverseasContainerFeeSource, 'APPROVE')">通过</el-button><el-button v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'PENDING'" link type="danger" @click="review(row as OverseasContainerFeeSource, 'REJECT')">驳回</el-button><el-button v-if="canEdit && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'APPROVED'" link type="primary" @click="openAdjust(row as OverseasContainerFeeSource)">调整</el-button><el-button v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'APPROVED'" link type="danger" @click="voidFee(row as OverseasContainerFeeSource)">作废</el-button><span v-if="row.sourceStatus !== 'ACTIVE' || (!canEdit && !canReview)">—</span></div></template></el-table-column>
+      <el-table-column label="操作" fixed="left" width="240"><template #default="{ row }"><div class="row-actions density-actions"><el-button data-tone="primary" class="density-action" v-if="canEdit && row.sourceStatus === 'ACTIVE' && ['DRAFT', 'REJECTED'].includes(row.reviewStatus)" type="primary" @click="submit(row as OverseasContainerFeeSource)">提交</el-button><el-button data-tone="warning" class="density-action" v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'PENDING'" type="success" @click="review(row as OverseasContainerFeeSource, 'APPROVE')">通过</el-button><el-button data-tone="danger" class="density-action" v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'PENDING'" type="danger" @click="review(row as OverseasContainerFeeSource, 'REJECT')">驳回</el-button><el-button class="density-action" v-if="canEdit && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'APPROVED'" type="primary" @click="openAdjust(row as OverseasContainerFeeSource)">调整</el-button><el-button data-tone="danger" class="density-action" v-if="canReview && row.sourceStatus === 'ACTIVE' && row.reviewStatus === 'APPROVED'" type="danger" @click="voidFee(row as OverseasContainerFeeSource)">作废</el-button><span v-if="row.sourceStatus !== 'ACTIVE' || (!canEdit && !canReview)">—</span></div></template></el-table-column>
       <el-table-column prop="customerName" label="客户" min-width="160" show-overflow-tooltip><template #default="{ row }">{{ row.customerName || '—' }}</template></el-table-column>
       <el-table-column prop="feeItemCode" label="费用项目" min-width="140" show-overflow-tooltip><template #default="{ row }">{{ feeItemLabel(row.feeItemCode) }}</template></el-table-column>
       <el-table-column prop="direction" label="方向" width="100"><template #default="{ row }">{{ row.direction === 'RECEIVABLE' ? '应收' : '应付' }}</template></el-table-column>
@@ -178,10 +179,10 @@ onMounted(load)
       <el-table-column prop="reviewStatus" label="审核状态" width="110"><template #default="{ row }"><el-tag>{{ reviewLabels[row.reviewStatus] || row.reviewStatus }}</el-tag></template></el-table-column>
       <el-table-column prop="reviewReason" label="审核说明" min-width="180" show-overflow-tooltip><template #default="{ row }">{{ row.reviewReason || '—' }}</template></el-table-column>
     </el-table>
-    <AppDialog v-model="dialogOpen" :title="editing ? '调整尾程费用' : '新增尾程费用'" width="min(620px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="actionLoading" :confirm-disabled="voucherUploading" @confirm="save">
-      <el-form label-position="top"><div class="fee-form-grid"><el-form-item label="客户" required><el-select v-model="form.customerId" :disabled="Boolean(editing) || voucherUploading" placeholder="请选择柜内客户"><el-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName || '未命名客户'" :value="customer.customerId" /></el-select></el-form-item><el-form-item label="费用项目" required><el-select v-model="form.feeItemCode"><el-option v-for="item in feeItems" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item><el-form-item label="费用方向" required><el-select v-model="form.direction"><el-option label="应收" value="RECEIVABLE" /><el-option label="应付" value="PAYABLE" /></el-select></el-form-item><el-form-item label="业务日期" required><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="金额（CNY）" required><el-input-number v-model="form.amount" :min="0.01" :precision="2" :step="10" placeholder="请输入费用金额" /></el-form-item><template v-if="form.direction === 'PAYABLE'"><el-form-item label="供应商" required><el-select v-model="form.supplierId" filterable placeholder="请选择有效供应商"><el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" /></el-select></el-form-item><el-form-item label="结算方式" required><el-select v-model="form.settlementMode"><el-option label="账期结算" value="ON_ACCOUNT" /><el-option label="直接已付" value="DIRECT_PAID" /></el-select></el-form-item><template v-if="form.settlementMode === 'DIRECT_PAID'"><el-form-item label="付款时间" required><el-date-picker v-model="form.paidAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item><el-form-item label="付款方式" required><el-select v-model="form.paymentMethod"><el-option label="线上支付" value="ONLINE" /><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="付款流水号"><el-input v-model="form.paymentReferenceNo" maxlength="128" placeholder="请输入付款流水号（可选）" /></el-form-item><el-form-item label="付款凭证"><div class="voucher-list"><input ref="voucherInput" type="file" accept="image/*" hidden @change="uploadVoucher" /><el-button :loading="voucherUploading" :disabled="!form.customerId || actionLoading" @click="voucherInput?.click()">{{ form.paymentVoucherFileIds.length ? '重新上传凭证' : '上传付款凭证' }}</el-button><div v-for="(fileId, index) in form.paymentVoucherFileIds" :key="fileId" class="voucher-item"><el-button link type="primary" @click="previewVoucher(form.customerId, fileId)">{{ voucherNames[fileId] || `付款凭证 ${index + 1}` }}</el-button><el-button link type="danger" :disabled="voucherUploading || actionLoading" @click="form.paymentVoucherFileIds = form.paymentVoucherFileIds.filter((id) => id !== fileId)">移除</el-button></div></div></el-form-item></template></template></div></el-form>
+    <AppDialog class="admin-density-dialog" v-model="dialogOpen" :title="editing ? '调整尾程费用' : '新增尾程费用'" width="min(620px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="actionLoading" :confirm-disabled="voucherUploading" @confirm="save">
+      <el-form class="density-form" label-position="top"><div class="fee-form-grid"><el-form-item label="客户" required><el-select v-model="form.customerId" :disabled="Boolean(editing) || voucherUploading" placeholder="请选择柜内客户"><el-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName || '未命名客户'" :value="customer.customerId" /></el-select></el-form-item><el-form-item label="费用项目" required><el-select v-model="form.feeItemCode"><el-option v-for="item in feeItems" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item><el-form-item label="费用方向" required><el-select v-model="form.direction"><el-option label="应收" value="RECEIVABLE" /><el-option label="应付" value="PAYABLE" /></el-select></el-form-item><el-form-item label="业务日期" required><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="金额（CNY）" required><el-input-number v-model="form.amount" :min="0.01" :precision="2" :step="10" placeholder="请输入费用金额" /></el-form-item><template v-if="form.direction === 'PAYABLE'"><el-form-item label="供应商" required><el-select v-model="form.supplierId" filterable placeholder="请选择有效供应商"><el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" /></el-select></el-form-item><el-form-item label="结算方式" required><el-select v-model="form.settlementMode"><el-option label="账期结算" value="ON_ACCOUNT" /><el-option label="直接已付" value="DIRECT_PAID" /></el-select></el-form-item><template v-if="form.settlementMode === 'DIRECT_PAID'"><el-form-item label="付款时间" required><el-date-picker v-model="form.paidAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item><el-form-item label="付款方式" required><el-select v-model="form.paymentMethod"><el-option label="线上支付" value="ONLINE" /><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="付款流水号"><el-input v-model="form.paymentReferenceNo" maxlength="128" placeholder="请输入付款流水号（可选）" /></el-form-item><el-form-item label="付款凭证"><div class="voucher-list"><input ref="voucherInput" type="file" accept="image/*" hidden @change="uploadVoucher" /><el-button :loading="voucherUploading" :disabled="!form.customerId || actionLoading" @click="voucherInput?.click()">{{ form.paymentVoucherFileIds.length ? '重新上传凭证' : '上传付款凭证' }}</el-button><div v-for="(fileId, index) in form.paymentVoucherFileIds" :key="fileId" class="voucher-item"><el-button link type="primary" @click="previewVoucher(form.customerId, fileId)">{{ voucherNames[fileId] || `付款凭证 ${index + 1}` }}</el-button><el-button link type="danger" :disabled="voucherUploading || actionLoading" @click="form.paymentVoucherFileIds = form.paymentVoucherFileIds.filter((id) => id !== fileId)">移除</el-button></div></div></el-form-item></template></template></div></el-form>
     </AppDialog>
-    <AppDialog v-model="previewOpen" :title="previewName" width="min(900px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭" append-to-body>
+    <AppDialog class="admin-density-dialog" v-model="previewOpen" :title="previewName" width="min(900px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭" append-to-body>
       <p v-if="previewLoading">正在读取付款凭证…</p>
       <div v-else-if="previewError"><el-alert type="error" :closable="false" :title="previewError.message" /><ApiErrorMeta :details="previewError" /></div>
       <div v-else-if="previewUrl" class="voucher-preview"><img v-if="previewIsImage" :src="previewUrl" :alt="previewName" /><p v-else>此文件暂不支持预览，请下载后查看。</p><a :href="previewUrl" :download="previewName">下载付款凭证</a></div>
@@ -190,17 +191,17 @@ onMounted(load)
 </template>
 
 <style scoped>
-.last-leg-fees { display: grid; gap: 16px; min-width: 0; }
-.last-leg-fees__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
-.last-leg-fees__header h2 { margin: 0; color: #253553; font-size: 20px; }
-.last-leg-fees__header p { margin: 6px 0 0; color: #77839b; }
-.voucher-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
-.voucher-item { display: flex; gap: 8px; max-width: 100%; }
+.last-leg-fees { display: grid; gap: var(--admin-space-5); min-width: 0; }
+.last-leg-fees__header { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); }
+.last-leg-fees__header h2 { margin: 0; color: #253553; font-size: var(--admin-font-section); }
+.last-leg-fees__header p { margin: var(--admin-space-2) 0 0; color: #77839b; }
+.voucher-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--admin-space-3); min-width: 0; }
+.voucher-item { display: flex; gap: var(--admin-space-3); max-width: 100%; }
 .voucher-list :deep(.el-button) { white-space: normal; overflow-wrap: anywhere; margin-left: 0; }
-.voucher-preview { display: grid; gap: 16px; }
+.voucher-preview { display: grid; gap: var(--admin-space-5); }
 .voucher-preview img { max-width: 100%; max-height: 65vh; object-fit: contain; margin: auto; }
-.row-actions { display: flex; align-items: center; white-space: nowrap; }
-.fee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
+.row-actions { white-space: nowrap; }
+.fee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); }
 .fee-form-grid :deep(.el-select), .fee-form-grid :deep(.el-date-editor), .fee-form-grid :deep(.el-input-number) { width: 100%; }
 @media (max-width: 760px) { .last-leg-fees__header { align-items: flex-start; flex-direction: column; } .fee-form-grid { grid-template-columns: 1fr; } }
 </style>

src/modules/container-loading/components/ContainerOverviewPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
-import { Download, FileUp, TriangleAlert } from '@lucide/vue'
+import { TriangleAlert } from '@lucide/vue'
 import { getApiErrorDetails } from '@/shared/api/http'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import type { ContainerOverview, ContainerOverviewDocument, ContainerPdaPhoto } from '../types'
@@ -119,7 +120,7 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
 </script>
 
 <template>
-  <div class="overview-panel">
+  <div class="overview-panel admin-density">
     <section v-if="visibleSections.has('exception')" class="overview-section exception-management" aria-label="异常管理">
       <header class="exception-management__header"><div><h3>异常管理</h3><p v-if="overview.exception.active" class="exception-current"><strong>{{ overview.exception.reason || '未填写异常原因' }}</strong><span>{{ overview.exception.markedByName || '操作人信息缺失' }} · {{ formatTime(overview.exception.markedAt) }}</span></p></div><div class="exception-management__actions"><StatusBadge :status="overview.exception.active ? '异常' : '正常'" /><el-button v-if="canManageException" :type="overview.exception.active ? 'primary' : 'danger'" plain @click="emit('manageException')"><TriangleAlert :size="16" />{{ overview.exception.active ? '取消异常' : '标记异常' }}</el-button></div></header>
       <div class="exception-history"><div class="exception-history__head"><span>时间</span><span>动作</span><span>操作人</span><span>原因</span></div><p v-if="overview.exceptionHistory.length === 0" class="exception-history__empty">暂无异常处理记录</p><ol v-else><li v-for="history in overview.exceptionHistory" :key="history.id"><time>{{ formatTime(history.occurredAt) }}</time><strong>{{ eventLabel(history.action) }}</strong><span>{{ history.operatorName || '操作人信息缺失' }}</span><span :title="history.reason">{{ history.reason }}</span></li></ol></div>
@@ -127,17 +128,17 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
 
     <section v-if="visibleSections.has('documents')" class="overview-section overview-section--documents" aria-label="报关清关资料">
       <div class="document-table-wrap">
-        <table class="document-table">
+        <table class="document-table density-table">
           <thead><tr><th class="document-table__actions">操作</th><th>资料类型</th><th>资料内容</th><th>更新人</th><th>更新时间</th><th>状态</th></tr></thead>
           <tbody><tr v-for="item in documentTypes" :key="item.type">
-            <td class="document-table__actions"><div class="document-actions"><el-button v-if="documentsByType.get(item.type) && canDownloadDocument(item.type)" size="small" :loading="documentBusy" @click="emit('downloadDocument', documentsByType.get(item.type)!)"><Download :size="15" />下载</el-button><el-button v-if="canUploadDocument(item.type) && !documentsByType.get(item.type)?.completed" size="small" @click="emit('uploadDocument', item.type)"><FileUp :size="15" />{{ documentsByType.get(item.type) ? '更新附件' : '上传附件' }}</el-button><span v-if="!hasDocumentAction(item.type)" class="no-action">—</span></div></td>
+            <td class="document-table__actions"><div class="document-actions density-actions"><el-button class="density-action" v-if="documentsByType.get(item.type) && canDownloadDocument(item.type)" size="small" :loading="documentBusy" @click="emit('downloadDocument', documentsByType.get(item.type)!)">下载</el-button><el-button class="density-action" v-if="canUploadDocument(item.type) && !documentsByType.get(item.type)?.completed" size="small" @click="emit('uploadDocument', item.type)">{{ documentsByType.get(item.type) ? '更新附件' : '上传附件' }}</el-button><span v-if="!hasDocumentAction(item.type)" class="no-action">—</span></div></td>
             <td><strong>{{ item.label }}</strong></td>
             <td><span class="document-file-name" :title="documentsByType.get(item.type)?.fileName || undefined">{{ documentsByType.get(item.type)?.fileName || '—' }}</span><small v-if="item.type === 'DELIVERY_ORDER' && deliveryOrderBlockedReason" class="document-blocked-reason">{{ deliveryOrderBlockedReason }}</small></td>
             <td>{{ documentsByType.get(item.type)?.uploadedByName || '—' }}</td>
             <td>{{ documentsByType.get(item.type) ? formatTime(documentsByType.get(item.type)?.uploadedAt) : '—' }}</td>
             <td><el-tag size="small" :type="documentStatusType(item.type)">{{ documentStatusLabel(item.type) }}</el-tag></td>
           </tr><tr class="pickup-code-row">
-            <td class="document-table__actions"><el-button v-if="canManageDocuments" size="small" type="primary" :loading="pickupCodeBusy" :disabled="!pickupCodeValid || pickupCodeInput === (overview.container.pickupCode || '')" @click="emit('savePickupCode', pickupCodeInput)">保存</el-button><span v-else class="no-action">—</span></td>
+            <td class="document-table__actions"><el-button data-tone="primary" class="density-action" v-if="canManageDocuments" size="small" type="primary" :loading="pickupCodeBusy" :disabled="!pickupCodeValid || pickupCodeInput === (overview.container.pickupCode || '')" @click="emit('savePickupCode', pickupCodeInput)">保存</el-button><span v-else class="no-action">—</span></td>
             <td><strong>PU 资料</strong></td>
             <td><el-input v-model="pickupCodeInput" :disabled="!canManageDocuments" maxlength="64" inputmode="numeric" placeholder="请输入数字 PU 码" aria-label="PU码" @input="pickupCodeInput = pickupCodeInput.replace(/\D/g, '')" /></td>
             <td>{{ overview.container.pickupCodeUpdatedByName || '—' }}</td>
@@ -159,20 +160,20 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
 </template>
 
 <style scoped>
-.overview-panel { display: grid; gap: 12px; }
-.overview-section { min-width: 0; padding: 12px 16px; border: 1px solid var(--cc-border); background: #fff; }
+.overview-panel { display: grid; gap: var(--admin-space-5); }
+.overview-section { min-width: 0; background: var(--admin-surface); border: 0; padding: 0; }
 .overview-section--documents{padding:0;border:0}
-.overview-section > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
-.overview-section h3 { margin: 0; font-size: 15px; }
-.overview-section header > span, .overview-section small { color: var(--cc-muted); font-size: 12px; }
-.overview-section p { margin: 5px 0; color: var(--cc-muted); font-size: 13px; }
-.exception-management{padding-top:10px;padding-bottom:10px}.exception-management__header{margin-bottom:7px!important}.exception-management__header>div:first-child{display:flex;min-width:0;align-items:center;gap:14px}.exception-current{display:flex;min-width:0;align-items:center;gap:9px;margin:0!important}.exception-current strong,.exception-current span{overflow:hidden;max-width:360px;text-overflow:ellipsis;white-space:nowrap}.exception-current strong{color:var(--el-color-danger)}.exception-current span{font-size:12px}.exception-management__actions{display:flex;align-items:center;gap:8px}.exception-history{overflow-x:auto;border-top:1px solid var(--cc-border);font-size:12px}.exception-history__head,.exception-history li{display:grid;grid-template-columns:145px 120px 130px minmax(220px,1fr);gap:8px;align-items:center;min-width:680px;padding:6px 4px}.exception-history__head{color:var(--cc-muted);font-weight:650}.exception-history ol{margin:0;padding:0;list-style:none}.exception-history li{border-top:1px solid var(--cc-border)}.exception-history li time,.exception-history li span{overflow:hidden;color:var(--cc-muted);text-overflow:ellipsis;white-space:nowrap}.exception-history__empty{margin:0!important;padding:7px 4px;border-top:1px solid var(--cc-border);font-size:12px!important}
-.document-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--cc-border)}.document-table{width:100%;min-width:940px;border-collapse:collapse;table-layout:fixed;font-size:12px}.document-table th,.document-table td{height:40px;padding:5px 10px;border-bottom:1px solid var(--cc-border);background:#fff;text-align:left;vertical-align:middle}.document-table tbody tr:last-child td{border-bottom:0}.document-table th{background:var(--cc-bg-subtle,#f7f8fa);color:var(--cc-muted);font-weight:650}.document-table th:nth-child(1){width:260px}.document-table th:nth-child(2){width:180px}.document-table th:nth-child(3){width:210px}.document-table th:nth-child(4){width:120px}.document-table th:nth-child(5){width:150px}.document-table th:nth-child(6){width:90px}.document-table__actions{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--cc-border)}.document-table th.document-table__actions{z-index:2}.document-table td strong{font-size:13px}.document-table td small{display:block;overflow:hidden;max-width:170px;margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.document-file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.document-blocked-reason{color:var(--cc-muted)}.document-actions{display:flex;align-items:center;gap:5px;white-space:nowrap}.document-actions :deep(.el-button){margin-left:0}.no-action{color:var(--cc-muted)}.pickup-code-row :deep(.el-input){max-width:260px}.pickup-code-row :deep(.el-input__inner){font-variant-numeric:tabular-nums}
-.pda-summary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);align-items:center;gap:16px;margin-bottom:10px}.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin:0; }
-.metric-grid > div { display: grid; gap: 2px; padding: 6px 9px; background: var(--cc-bg-subtle, #f7f8fa); }
-.metric-grid span { color: var(--cc-muted); font-size: 12px; }
-.metric-grid strong { font-size: 18px; }
-.photo-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0}.photo-thumb{display:grid;min-width:0;overflow:hidden;padding:0;border:1px solid var(--cc-border);background:#fff;color:inherit;text-align:left;cursor:pointer}.photo-thumb:disabled{cursor:default}.photo-thumb img,.photo-placeholder{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cc-bg-subtle,#f7f8fa)}.photo-placeholder{display:grid;place-items:center;padding:8px;color:var(--cc-muted);font-size:12px}.photo-placeholder--error{color:var(--el-color-danger)}.photo-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 8px}.photo-caption small{white-space:nowrap}.compact-empty{margin:6px 0;color:var(--cc-muted);font-size:12px}.compact-timeline{display:grid;margin:0;padding:0;list-style:none}.compact-timeline li{display:grid;grid-template-columns:130px 130px 110px minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--cc-border);font-size:12px}.compact-timeline li:first-child{border-top:0}.compact-timeline time,.compact-timeline span,.compact-timeline small{overflow:hidden;color:var(--cc-muted);text-overflow:ellipsis;white-space:nowrap}
+.overview-section > header { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
+.overview-section h3 { margin: 0; font-size: var(--admin-font-section); }
+.overview-section header > span, .overview-section small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.overview-section p { margin: 5px 0; color: var(--cc-muted); font-size: var(--admin-font-body); }
+.exception-management{padding-top:var(--admin-space-4);padding-bottom:var(--admin-space-4)}.exception-management__header{margin-bottom:7px!important}.exception-management__header>div:first-child{display:flex;min-width:0;align-items:center;gap:var(--admin-space-5)}.exception-current{display:flex;min-width:0;align-items:center;gap:9px;margin:0!important}.exception-current strong,.exception-current span{max-width:360px;white-space: normal;overflow-wrap: anywhere}.exception-current strong{color:var(--el-color-danger)}.exception-current span{font-size:var(--admin-font-caption)}.exception-management__actions{display:flex;align-items:center;gap:var(--admin-space-3)}.exception-history{overflow-x:auto;border-top:1px solid var(--cc-border);font-size:var(--admin-font-caption)}.exception-history__head,.exception-history li{display:grid;grid-template-columns:145px 120px 130px minmax(220px,1fr);gap:var(--admin-space-3);align-items:center;min-width:680px;padding:var(--admin-space-2) var(--admin-space-1)}.exception-history__head{color:var(--cc-muted);font-weight:650}.exception-history ol{margin:0;padding:0;list-style:none}.exception-history li{border-top:1px solid var(--cc-border)}.exception-history li time,.exception-history li span{color:var(--cc-muted);white-space: normal;overflow-wrap: anywhere}.exception-history__empty{margin:0!important;padding:7px var(--admin-space-1);border-top:1px solid var(--cc-border);font-size:var(--admin-font-caption)!important}
+.document-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--cc-border)}.document-table{width:100%;min-width:940px;table-layout:fixed}.document-table tbody tr:last-child td{border-bottom:0}.document-table th:nth-child(1){width:260px}.document-table th:nth-child(2){width:180px}.document-table th:nth-child(3){width:210px}.document-table th:nth-child(4){width:120px}.document-table th:nth-child(5){width:150px}.document-table th:nth-child(6){width:90px}.document-table__actions{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--cc-border)}.document-table th.document-table__actions{z-index:2}.document-table td strong{font-size:var(--admin-font-body)}.document-table td small{display:block;overflow:hidden;max-width:170px;margin-top:2px;text-overflow:ellipsis;white-space:nowrap}.document-file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.document-blocked-reason{color:var(--cc-muted)}.document-actions{white-space:nowrap}.document-actions :deep(.el-button){margin-left:0}.no-action{color:var(--cc-muted)}.pickup-code-row :deep(.el-input){max-width:260px}.pickup-code-row :deep(.el-input__inner){font-variant-numeric:tabular-nums}
+.pda-summary{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);align-items:center;gap:var(--admin-space-5);margin-bottom:var(--admin-space-4)}.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-2); margin:0; }
+.metric-grid > div { display: flex; align-items: baseline; gap: var(--admin-space-2); padding: 0; background: transparent; }
+.metric-grid span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.metric-grid strong { font-size: var(--admin-font-body); }
+.photo-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--admin-space-3);margin:var(--admin-space-4) 0}.photo-thumb{display:grid;min-width:0;overflow:hidden;padding:0;border:1px solid var(--cc-border);background:var(--admin-surface);color:inherit;text-align:left;cursor:pointer}.photo-thumb:disabled{cursor:default}.photo-thumb img,.photo-placeholder{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--cc-bg-subtle,#f7f8fa)}.photo-placeholder{display:grid;place-items:center;padding:var(--admin-space-3);color:var(--cc-muted);font-size:var(--admin-font-caption)}.photo-placeholder--error{color:var(--el-color-danger)}.photo-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--admin-space-2);padding:var(--admin-space-2) var(--admin-space-3)}.photo-caption small{white-space:nowrap}.compact-empty{margin:var(--admin-space-2) 0;color:var(--cc-muted);font-size:var(--admin-font-caption)}.compact-timeline{display:grid;margin:0;padding:0;list-style:none}.compact-timeline li{display:grid;grid-template-columns:130px 130px 110px minmax(0,1fr);gap:var(--admin-space-3);padding:var(--admin-space-2) 0;border-top:1px solid var(--cc-border);font-size:var(--admin-font-caption)}.compact-timeline li:first-child{border-top:0}.compact-timeline time,.compact-timeline span,.compact-timeline small{overflow:hidden;color:var(--cc-muted);text-overflow:ellipsis;white-space:nowrap}
 @media (max-width: 1200px){.photo-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.pda-summary{grid-template-columns:1fr}.compact-timeline li{grid-template-columns:120px 120px minmax(0,1fr)}.compact-timeline small{grid-column:2/-1}}
 @media (max-width: 720px) { .exception-management__header{align-items:flex-start;flex-direction:column}.exception-management__header>div:first-child{align-items:flex-start;flex-direction:column;gap:3px}.exception-current{align-items:flex-start;flex-direction:column;gap:2px}.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-timeline li{grid-template-columns:1fr 1fr}.compact-timeline span,.compact-timeline small{grid-column:auto;white-space:normal} }
 </style>

src/modules/container-loading/components/ContainerSimulationCreate.vue

@@ -9,7 +9,7 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
-import { CONTAINER_SPECIFICATIONS, applyContainerSpecification, containerSpecification } from '@/shared/domain/containerSpecifications'
+import { CONTAINER_SPECIFICATIONS, DEFAULT_CONTAINER_TYPE, applyContainerSpecification, containerSpecification } from '@/shared/domain/containerSpecifications'
 import { createContainerSimulation } from '../api/platformContainerLoading'
 import type { ContainerSimulationCreateRequest } from '../types'
 import { SMART_LOADING_CHANNEL_GROUPS } from '../smartLoadingChannelGroups'
@@ -30,7 +30,7 @@ const simulationError = ref<ApiErrorDetails | null>(null)
 const simulationChannels = ref<OceanLogisticsChannel[]>([])
 const simulationChannelsLoading = ref(false)
 const simulationFormRef = ref<FormInstance>()
-const simulationForm = reactive<ContainerSimulationCreateRequest>({ channelGroupCode: '', warehouseId: '', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000 })
+const simulationForm = reactive<ContainerSimulationCreateRequest>({ channelGroupCode: '', warehouseId: '', containerType: DEFAULT_CONTAINER_TYPE, capacityCbm: 68, maxWeightKg: 19500 })
 const simulationChannelGroups = computed(() => {
   const activeCodes = new Set(simulationChannels.value.map((channel) => channel.channelCode))
   return SMART_LOADING_CHANNEL_GROUPS.filter((group) => group.channelCodes.some((code) => activeCodes.has(code)))
@@ -42,7 +42,7 @@ const simulationRules: FormRules<ContainerSimulationCreateRequest> = {
 }
 
 async function openSimulation() {
-  Object.assign(simulationForm, { channelGroupCode: '', warehouseId: '', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000 })
+  Object.assign(simulationForm, { channelGroupCode: '', warehouseId: '', containerType: DEFAULT_CONTAINER_TYPE, capacityCbm: 68, maxWeightKg: 19500 })
   simulationChannels.value = []
   simulationError.value = null
   simulationOpen.value = true
@@ -101,7 +101,7 @@ async function saveSimulation() {
         <el-form-item label="装柜仓库" prop="warehouseId"><el-select :model-value="simulationForm.warehouseId" filterable placeholder="请选择国内装柜仓库" :loading="warehouseLoading" @update:model-value="selectSimulationWarehouse"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="warehouse.warehouseName" :value="String(warehouse.id)" /></el-select></el-form-item>
         <el-form-item label="物流渠道" prop="channelGroupCode"><el-select v-model="simulationForm.channelGroupCode" filterable :disabled="!simulationForm.warehouseId || simulationChannelsLoading" :loading="simulationChannelsLoading" :placeholder="simulationForm.warehouseId ? '请选择物流渠道' : '请先选择装柜仓库'" no-data-text="当前仓库暂无有效渠道"><el-option v-for="group in simulationChannelGroups" :key="group.code" :label="group.name" :value="group.code" /></el-select></el-form-item>
         <el-form-item label="柜型" prop="containerType"><el-select :model-value="simulationForm.containerType" @update:model-value="selectSimulationContainerType(String($event || ''))"><el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" /></el-select></el-form-item>
-        <el-form-item label="固定规格"><el-input :model-value="`${containerSpecification(simulationForm.containerType)?.capacityCbm || '—'} m³ / ${containerSpecification(simulationForm.containerType)?.maxWeightKg || '—'} kg`" disabled /></el-form-item>
+        <el-form-item label="统一规格"><el-input :model-value="`${containerSpecification(simulationForm.containerType)?.recommendedMinCbm || '—'}–${containerSpecification(simulationForm.containerType)?.capacityCbm || '—'} m³ / 货重 ≤ ${containerSpecification(simulationForm.containerType)?.maxWeightKg || '—'} kg`" disabled /><small>{{ containerSpecification(simulationForm.containerType)?.description }}</small></el-form-item>
       </el-form>
       <LoadErrorState v-if="simulationError" compact title="模拟柜创建失败" :message="simulationError.message" :show-retry="false"><template #details><ApiErrorMeta :details="simulationError" /></template></LoadErrorState>
     </AppDialog>

src/modules/container-loading/components/OceanBookingLinkDialog.test.ts

@@ -12,17 +12,17 @@ vi.mock('../api/platformContainerLoading', () => ({ linkContainerOceanBooking: v
 const container = {
   id: '9001', cabinetNo: 'CAB-1', bookingNo: 'CB-1', containerNo: null, planId: '7001', planStatus: 'EDITING',
   sourceType: 'SIMULATION', warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null,
-  oceanBookingId: null, billOfLadingNo: null, vesselName: null, voyageNo: null, containerType: '40HC',
+  oceanBookingId: null, billOfLadingNo: null, vesselName: null, voyageNo: null, containerType: '40HQ',
   shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: null,
   destinationPortCode: null, destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null,
-  capacityCbm: 76, maxWeightKg: 28000, terminalTruckingCompanyId: null, terminalTruckingCompany: null,
+  capacityCbm: 68, maxWeightKg: 19500, terminalTruckingCompanyId: null, terminalTruckingCompany: null,
   loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null,
   actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 7,
 } satisfies ContainerBookingResource
 
 const candidate = {
-  oceanBookingId: '101', bookingNo: 'OB-101', requirementId: '202', containerType: '40HC', capacityCbm: 76,
-  maxWeightKg: 28000, requiredQuantity: 2, allocatedQuantity: 1, remainingQuantity: 1,
+  oceanBookingId: '101', bookingNo: 'OB-101', requirementId: '202', containerType: '40HQ', capacityCbm: 68,
+  maxWeightKg: 19500, requiredQuantity: 2, allocatedQuantity: 1, remainingQuantity: 1,
   customerName: '测试客户', warehouseName: '义乌仓', channelName: '美森正班',
 }
 
@@ -35,8 +35,8 @@ describe('OceanBookingLinkDialog', () => {
   it('loads matching released-booking requirements when opened', async () => {
     const wrapper = mount(OceanBookingLinkDialog, { props: { modelValue: true, container }, global: { plugins: [ElementPlus] } })
     await flushPromises()
-    expect(listOceanBookingLinkCandidates).toHaveBeenCalledExactlyOnceWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HC', page: 1, size: 200 })
-    expect((wrapper.vm as unknown as { candidates: Array<{ label: string }> }).candidates[0]?.label).toContain('OB-101 · 40HC × 1')
+    expect(listOceanBookingLinkCandidates).toHaveBeenCalledExactlyOnceWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HQ', page: 1, size: 200 })
+    expect((wrapper.vm as unknown as { candidates: Array<{ label: string }> }).candidates[0]?.label).toContain('OB-101 · 40HQ × 1')
     wrapper.unmount()
   })
 

src/modules/container-loading/components/OceanBookingLinkDialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { listOceanBookingLinkCandidates } from '@/modules/ocean-bookings'
@@ -97,18 +98,18 @@ defineExpose({ candidates, candidateKey, containerNo, save })
 </script>
 
 <template>
-  <AppDialog :model-value="modelValue" title="关联已放舱订舱" width="min(680px, calc(100vw - 28px))" confirm-text="确认关联" cancel-text="取消" :confirm-loading="saving" :confirm-disabled="!candidateKey" @update:model-value="emit('update:modelValue', $event)" @confirm="save">
-    <el-alert title="关联后保留当前柜次号、装柜计划和明细，并补充订舱快照；真实集装箱号可待司机提柜时录入。" type="info" :closable="false" />
-    <el-form label-position="top">
+  <AppDialog class="admin-density-dialog" :model-value="modelValue" title="关联已放舱订舱" width="min(680px, calc(100vw - 28px))" confirm-text="确认关联" cancel-text="取消" :confirm-loading="saving" :confirm-disabled="!candidateKey" @update:model-value="emit('update:modelValue', $event)" @confirm="save">
+    <!-- <el-alert title="关联后保留当前柜次号、装柜计划和明细，并补充订舱快照；真实集装箱号可待司机提柜时录入。" type="info" :closable="false" /> -->
+    <el-form class="density-form" label-position="top">
       <el-form-item label="柜次号"><el-input :model-value="container?.cabinetNo || ''" disabled /></el-form-item>
       <el-form-item label="已放舱订舱及柜型需求" required><el-select v-model="candidateKey" filterable :loading="loading" placeholder="请选择仍有剩余数量的柜型需求" no-data-text="暂无符合当前装柜仓库、物流渠道和柜型的已放舱需求"><el-option v-for="candidate in candidates" :key="candidate.key" :label="candidate.label" :value="candidate.key" /></el-select></el-form-item>
       <el-form-item label="真实集装箱号（可选）"><el-input v-model="containerNo" maxlength="64" placeholder="如未取得可留空，后续显示待补录" @blur="containerNo = normalizeContainerNo(containerNo)" /></el-form-item>
     </el-form>
-    <p class="dialog-hint">仓库、渠道和柜型必须与当前模拟柜一致；容量和限重仅展示柜型固定快照，不影响关联资格。</p>
+    <!-- <p class="dialog-hint">仓库、渠道和柜型必须与当前模拟柜一致；容量和限重仅展示柜型固定快照，不影响关联资格。</p> -->
     <LoadErrorState v-if="error" compact title="关联失败" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
   </AppDialog>
 </template>
 
 <style scoped>
-.dialog-hint { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.6; }
+.dialog-hint { margin: var(--admin-space-1) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.6; }
 </style>

src/modules/container-loading/pages/ContainerDetailView.emptyReturn.behavior.test.ts

@@ -34,6 +34,13 @@ async function mountDetail(workbench: 'DOMESTIC' | 'OVERSEAS' = 'OVERSEAS') {
   return wrapper
 }
 
+function accessibleText(wrapper: { element: Element } | undefined) {
+  if (!wrapper) return undefined
+  const element = wrapper.element.cloneNode(true) as Element
+  element.querySelectorAll('[aria-hidden="true"]').forEach(node => node.remove())
+  return element.textContent?.trim()
+}
+
 describe('ContainerDetailView empty return', () => {
   beforeEach(() => {
     routeState.query = {}
@@ -72,11 +79,11 @@ describe('ContainerDetailView empty return', () => {
     for (const [firstLeg, lastLeg] of [[true, false], [false, true], [true, true], [false, false]]) {
       canAccess.mockImplementation((code) => code === 'firstleg:inbound:fee-detail:view' ? firstLeg! : code === 'platform:finance:customer-arap:list' ? lastLeg! : false)
       const wrapper = await mountDetail(workbench)
-      const labels = wrapper.findAll('[role="tab"]').map((tab) => tab.text())
+      const labels = wrapper.findAll('[role="tab"]').map((tab) => accessibleText(tab))
       expect(labels.includes('国内段费用（头程）')).toBe(firstLeg)
       expect(labels.includes('目的港及海外段费用（尾程）')).toBe(lastLeg)
       if (lastLeg) {
-        await wrapper.findAll('[role="tab"]').find((tab) => tab.text() === '目的港及海外段费用（尾程）')!.trigger('click')
+        await wrapper.findAll('[role="tab"]').find((tab) => accessibleText(tab) === '目的港及海外段费用（尾程）')!.trigger('click')
         await flushPromises()
         expect(wrapper.findComponent({ name: 'ContainerLastLegFeesPanel' }).props('readonly')).toBe(false)
       }
@@ -164,7 +171,7 @@ describe('domestic container loading list and booking link', () => {
     const wrapper = await mountDomestic()
     expect(getPreloadPlan).not.toHaveBeenCalled()
     expect(getConfirmedLoadingList).not.toHaveBeenCalled()
-    const tab = wrapper.findAll('[role="tab"]').find((item) => item.text() === '装柜清单')!
+    const tab = wrapper.findAll('[role="tab"]').find((item) => accessibleText(item) === '装柜清单')!
     expect(tab).toBeDefined()
     await tab.trigger('click')
     await flushPromises()
@@ -185,8 +192,8 @@ describe('domestic container loading list and booking link', () => {
         const wrapper = await mountDomestic()
         const permitted = planStatus === 'COMPLETED' ? confirmed : preload
         const tabs = wrapper.findAll('[role="tab"]')
-        expect(tabs.some((tab) => tab.text() === '装柜清单')).toBe(permitted)
-        expect(tabs.find((tab) => tab.attributes('aria-selected') === 'true')?.text()).toBe(permitted ? '装柜清单' : '送柜报关')
+        expect(tabs.some((tab) => accessibleText(tab) === '装柜清单')).toBe(permitted)
+        expect(accessibleText(tabs.find((tab) => tab.attributes('aria-selected') === 'true'))).toBe(permitted ? '装柜清单' : '送柜报关')
         expect(getPreloadPlan).toHaveBeenCalledTimes(permitted && planStatus !== 'COMPLETED' ? 1 : 0)
         expect(getConfirmedLoadingList).toHaveBeenCalledTimes(permitted && planStatus === 'COMPLETED' ? 1 : 0)
         if (permitted) {
@@ -203,8 +210,8 @@ describe('domestic container loading list and booking link', () => {
     routeState.query = { tab: 'loading-list' }
     vi.mocked(getContainer).mockResolvedValue(base as never)
     const wrapper = await mountDetail('OVERSEAS')
-    expect(wrapper.findAll('[role="tab"]').map((tab) => tab.text())).not.toContain('装柜清单')
-    expect(wrapper.findAll('[role="tab"]').find((tab) => tab.attributes('aria-selected') === 'true')?.text()).toBe('清关提柜')
+    expect(wrapper.findAll('[role="tab"]').map((tab) => accessibleText(tab))).not.toContain('装柜清单')
+    expect(accessibleText(wrapper.findAll('[role="tab"]').find((tab) => tab.attributes('aria-selected') === 'true'))).toBe('清关提柜')
     expect(getPreloadPlan).not.toHaveBeenCalled()
     expect(getConfirmedLoadingList).not.toHaveBeenCalled()
   })
@@ -217,7 +224,7 @@ describe('domestic container loading list and booking link', () => {
     expect(list.props('detail')).toBeNull()
     expect(list.props('error')).toMatchObject({ message: '装柜清单加载失败' })
     expect(list.props('loading')).toBe(false)
-    expect(wrapper.findAll('[role="tab"]').find((tab) => tab.attributes('aria-selected') === 'true')?.text()).toBe('装柜清单')
+    expect(accessibleText(wrapper.findAll('[role="tab"]').find((tab) => tab.attributes('aria-selected') === 'true'))).toBe('装柜清单')
   })
 
   it.each(['WAIT_LOADING', 'EDITING'])('retains the unlinked booking entry with an existing plan in %s', async (planStatus) => {
@@ -254,7 +261,7 @@ describe('domestic container loading list and booking link', () => {
       vi.mocked(getPreloadPlan).mockResolvedValue({ ...loadingDetail, items } as never)
       const wrapper = await mountDomestic()
       expect(wrapper.findComponent({ name: 'LoadingListDetailDrawer' }).props('detail').items).toEqual(items)
-      await wrapper.findAll('[role="tab"]').find((tab) => tab.text() === '送柜报关')!.trigger('click')
+      await wrapper.findAll('[role="tab"]').find((tab) => accessibleText(tab) === '送柜报关')!.trigger('click')
       await flushPromises()
       const link = wrapper.findAll('button').find((button) => button.text() === '关联已放舱订舱')!
       expect(link.isVisible()).toBe(true)

src/modules/container-loading/pages/ContainerDetailView.test.ts

@@ -35,7 +35,7 @@ describe('ContainerDetailView customs integration', () => {
     expect(source).toContain('label="装柜清单"')
     expect(source).toContain('打印装柜清单')
     expect(source).toContain("const loadingListMode = computed<LoadingListMode>(() => detail.value?.planStatus === 'COMPLETED' ? 'confirmed' : 'preload')")
-    expect(source).toContain('<LoadingListDetailDrawer :mode="loadingListMode" embedded')
+    expect(source).toContain('<LoadingListDetailDrawer dense :mode="loadingListMode" embedded')
     expect(source).toContain(':sections="[\'pda\']"')
   })
 

src/modules/container-loading/pages/ContainerDetailView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, ClipboardList, FileUp, Link2, Package, Receipt, Wallet } from '@lucide/vue'
+import { ArrowLeft, FileUp } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -350,7 +351,7 @@ async function confirmDeparture() {
   if (!aggregate || !canConfirmDeparture.value || outboundConfirming.value) return
   outboundConfirming.value = true
   try {
-    await ElMessageBox.confirm('确认整柜已离开国内仓？系统将再次校验柜内全部入库绑定，成功后自动创建船节点查询任务。', '确认国内出仓', { type: 'warning', confirmButtonText: '确认离仓' })
+    await ElMessageBox.confirm('确认整柜已离开国内仓？系统将再次校验柜内全部入库绑定，成功后自动创建船节点查询任务。', '确认国内出仓', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认离仓' })
   } catch { outboundConfirming.value = false; return }
   outboundError.value = null
   try {
@@ -515,31 +516,33 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
 </script>
 
 <template>
-  <AdminPage class="container-detail-page">
+  <AdminPage class="container-detail-page admin-density">
     <section class="container-overview surface-panel">
-      <header class="container-overview__header"><el-button link type="primary" @click="goBack"><ArrowLeft :size="16" />返回列表</el-button><div><h1>{{ title }}</h1><p>{{ isDomestic ? '送柜、装柜、出口报关与国内出仓' : '海运节点、目的港清关、提柜与还空' }}</p></div><StatusBadge v-if="detail" :status="primaryStatusText" /></header>
+      <header class="container-overview__header"><el-button link class="density-back" type="primary" @click="goBack"><ArrowLeft :size="16" />返回列表</el-button><div><h1>{{ title }}</h1>
+        <!-- <p>{{ isDomestic ? '送柜、装柜、出口报关与国内出仓' : '海运节点、目的港清关、提柜与还空' }}</p> -->
+      </div><StatusBadge v-if="detail" :status="primaryStatusText" /></header>
       <div v-if="detail" class="container-overview__summary"><div><span>柜次号</span><strong>{{ detail.cabinetNo || '—' }}</strong></div><div><span>集装箱号</span><strong>{{ detail.containerNo || '待补录' }}</strong></div><div><span>{{ isDomestic ? '装柜清单号' : '当前海外阶段' }}</span><strong>{{ isDomestic ? (detail.planNo || '—') : primaryStatusText }}</strong></div><div><span>{{ isDomestic ? '柜型' : '起运仓' }}</span><strong>{{ isDomestic ? (detail.containerType || '—') : (detail.warehouseName || '—') }}</strong></div><div><span>{{ isDomestic ? '装柜仓库' : '目的仓 / 接柜仓' }}</span><strong :title="isDomestic ? detail.warehouseName || '—' : overseasDestinationText">{{ isDomestic ? (detail.warehouseName || '—') : overseasDestinationText }}</strong></div></div>
       <div v-if="isOverseas && detail" class="overseas-stage-strip" :class="{ 'is-overdue': workbenchDetail?.terminalDrayage?.emptyReturnWarning.status === 'OVERDUE' }"><div><span>当前海外履约状态</span><strong>{{ primaryStatusText }}</strong></div><p>{{ emptyReturnWarningText }}</p></div>
     </section>
     <LoadErrorState v-if="error" title="货柜详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <template v-else-if="detail">
-      <el-tabs v-model="activeTab" class="workbench-tabs" @tab-change="rememberWorkbenchTab">
-        <el-tab-pane :label="isDomestic ? '送柜报关' : '清关提柜'" name="overview"><template #label><span class="workbench-tab-label"><ClipboardList :size="18" aria-hidden="true" /><span>{{ isDomestic ? '送柜报关' : '清关提柜' }}</span></span></template></el-tab-pane>
-        <el-tab-pane v-if="canViewCurrentLoadingList" label="装柜清单" name="loading-list"><template #label><span class="workbench-tab-label"><Package :size="18" aria-hidden="true" /><span>装柜清单</span></span></template></el-tab-pane>
-        <el-tab-pane v-if="canViewFirstLegFees" label="国内段费用（头程）" name="first-leg-fees"><template #label><span class="workbench-tab-label"><Receipt :size="18" aria-hidden="true" /><span>国内段费用（头程）</span></span></template></el-tab-pane>
-        <el-tab-pane v-if="canViewLastLegFees" label="目的港及海外段费用（尾程）" name="last-leg-fees"><template #label><span class="workbench-tab-label"><Wallet :size="18" aria-hidden="true" /><span>目的港及海外段费用（尾程）</span></span></template></el-tab-pane>
+      <el-tabs v-model="activeTab" class="workbench-tabs density-element-tabs" @tab-change="rememberWorkbenchTab">
+        <el-tab-pane :label="isDomestic ? '送柜报关' : '清关提柜'" name="overview"><template #label><span class="workbench-tab-label"><span class="density-tab-icon" aria-hidden="true">📋</span><span>{{ isDomestic ? '送柜报关' : '清关提柜' }}</span></span></template></el-tab-pane>
+        <el-tab-pane v-if="canViewCurrentLoadingList" label="装柜清单" name="loading-list"><template #label><span class="workbench-tab-label"><span class="density-tab-icon" aria-hidden="true">📦</span><span>装柜清单</span></span></template></el-tab-pane>
+        <el-tab-pane v-if="canViewFirstLegFees" label="国内段费用（头程）" name="first-leg-fees"><template #label><span class="workbench-tab-label"><span class="density-tab-icon" aria-hidden="true">💰</span><span>国内段费用（头程）</span></span></template></el-tab-pane>
+        <el-tab-pane v-if="canViewLastLegFees" label="目的港及海外段费用（尾程）" name="last-leg-fees"><template #label><span class="workbench-tab-label"><span class="density-tab-icon" aria-hidden="true">💰</span><span>目的港及海外段费用（尾程）</span></span></template></el-tab-pane>
       </el-tabs>
       <LoadErrorState v-if="overviewError" compact title="履约摘要加载失败" :message="overviewError.message" :show-retry="false" />
       <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-information-heading">
-        <header class="detail-section__heading"><h2 id="container-information-heading">货柜信息</h2><PalletLabelPrintDialog v-if="overview?.loadingPlanId && detail.warehouseId" :plan-id="overview.loadingPlanId" :warehouse-id="detail.warehouseId" :disabled="!detail.containerNo || detail.planStatus === 'EDITING'" /></header>
-        <div class="detail-fields"><dl><div><dt>真实订舱</dt><dd><span>{{ detail.oceanBookingId ? (detail.billOfLadingNo || '已关联') : '未关联' }}</span><el-button v-if="canLinkOceanBooking" link type="primary" @click="openOceanBookingLink"><Link2 :size="14" />关联已放舱订舱</el-button></dd></div><div><dt>计划渠道</dt><dd>{{ plannedChannelName }}</dd></div><div><dt>实际渠道</dt><dd>{{ detail.channelName || '待关联订舱' }}</dd></div><div><dt>异常状态</dt><dd>{{ detail.exceptionActive ? '异常' : '正常' }}</dd></div><div><dt>目的仓</dt><dd>{{ overseasDestinationText }}</dd></div><div><dt>拖车公司</dt><dd>{{ detail.terminalTruckingCompany || workbenchDetail?.terminalDrayage?.fleetSupplierName || '—' }}</dd></div></dl></div>
+        <header class="detail-section__heading"><h2 id="container-information-heading">货柜信息</h2><PalletLabelPrintDialog dense v-if="overview?.loadingPlanId && detail.warehouseId" :plan-id="overview.loadingPlanId" :warehouse-id="detail.warehouseId" :disabled="!detail.containerNo || detail.planStatus === 'EDITING'" /></header>
+        <div class="detail-fields"><dl class="density-fields"><div><dt>真实订舱</dt><dd><span>{{ detail.oceanBookingId ? (detail.billOfLadingNo || '已关联') : '未关联' }}</span><el-button v-if="canLinkOceanBooking" class="density-action" data-tone="primary" @click="openOceanBookingLink">关联已放舱订舱</el-button></dd></div><div><dt>计划渠道</dt><dd>{{ plannedChannelName }}</dd></div><div><dt>实际渠道</dt><dd>{{ detail.channelName || '待关联订舱' }}</dd></div><div><dt>异常状态</dt><dd>{{ detail.exceptionActive ? '异常' : '正常' }}</dd></div><div><dt>目的仓</dt><dd>{{ overseasDestinationText }}</dd></div><div><dt>拖车公司</dt><dd>{{ detail.terminalTruckingCompany || workbenchDetail?.terminalDrayage?.fleetSupplierName || '—' }}</dd></div></dl></div>
         <ContainerOverviewPanel v-if="isDomestic && overview" :overview="overview" :sections="['exception']" :can-manage-documents="canEdit" :can-manage-customs="canManageCustoms" :can-manage-exception="canEdit" @manage-exception="openException" />
       </section>
 
       <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-voyage-heading">
         <h2 id="container-voyage-heading">船名航次信息</h2>
-        <div class="detail-fields"><dl><div><dt>船公司</dt><dd>{{ detail.shippingCompanyName || '—' }}</dd></div><div><dt>船名 / 航次</dt><dd>{{ [detail.vesselName, detail.voyageNo].filter(Boolean).join(' / ') || '—' }}</dd></div><div><dt>预计开船</dt><dd>{{ formatTime(detail.estimatedSailingAt) }}</dd></div><div><dt>预计到港</dt><dd>{{ formatTime(detail.estimatedPortArrivalAt) }}</dd></div></dl></div>
-        <div class="carrier-panel"><CarrierScheduleQueryPanel :key="carrierRefreshKey" :ocean-booking-id="detail.oceanBookingId" :container-booking-id="detail.id" :warehouse-timeline="overview?.timeline || []" /></div>
+        <div class="detail-fields"><dl class="density-fields"><div><dt>船公司</dt><dd>{{ detail.shippingCompanyName || '—' }}</dd></div><div><dt>船名 / 航次</dt><dd>{{ [detail.vesselName, detail.voyageNo].filter(Boolean).join(' / ') || '—' }}</dd></div><div><dt>预计开船</dt><dd>{{ formatTime(detail.estimatedSailingAt) }}</dd></div><div><dt>预计到港</dt><dd>{{ formatTime(detail.estimatedPortArrivalAt) }}</dd></div></dl></div>
+        <div class="carrier-panel"><CarrierScheduleQueryPanel dense :key="carrierRefreshKey" :ocean-booking-id="detail.oceanBookingId" :container-booking-id="detail.id" :warehouse-timeline="overview?.timeline || []" /></div>
       </section>
 
       <section v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-customs-heading">
@@ -572,14 +575,14 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
 
       <section v-if="isOverseas" v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-overseas-receiving-heading">
         <header class="detail-section__heading"><h2 id="container-overseas-receiving-heading">提柜、卸柜与还空</h2><el-button v-if="canRecordEmptyReturn" type="primary" :loading="emptyReturnSaving" @click="openEmptyReturn">确认还柜</el-button></header>
-        <div class="detail-fields"><dl><div><dt>码头拖车状态</dt><dd>{{ workbenchDetail?.statusSummary?.terminalDrayageStatus || '—' }}</dd></div><div><dt>码头车队</dt><dd>{{ workbenchDetail?.terminalDrayage?.fleetSupplierName || '—' }}</dd></div><div><dt>预约提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.pickupAppointmentAt) }}</dd></div><div><dt>实际提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualPickupAt) }}</dd></div><div><dt>卸柜完成</dt><dd>{{ formatTime((workbenchDetail?.actualFacts?.unloadingCompletedAt || workbenchDetail?.terminalDrayage?.unloadingCompletedAt) as string | null) }}</dd></div><div><dt>实际还柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualEmptyReturnAt) }}</dd></div></dl></div>
+        <div class="detail-fields"><dl class="density-fields"><div><dt>码头拖车状态</dt><dd>{{ workbenchDetail?.statusSummary?.terminalDrayageStatus || '—' }}</dd></div><div><dt>码头车队</dt><dd>{{ workbenchDetail?.terminalDrayage?.fleetSupplierName || '—' }}</dd></div><div><dt>预约提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.pickupAppointmentAt) }}</dd></div><div><dt>实际提柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualPickupAt) }}</dd></div><div><dt>卸柜完成</dt><dd>{{ formatTime((workbenchDetail?.actualFacts?.unloadingCompletedAt || workbenchDetail?.terminalDrayage?.unloadingCompletedAt) as string | null) }}</dd></div><div><dt>实际还柜</dt><dd>{{ formatTime(workbenchDetail?.terminalDrayage?.actualEmptyReturnAt) }}</dd></div></dl></div>
       </section>
 
       <section v-if="isDomestic && activeTab === 'loading-list'" class="detail-section surface-panel" aria-labelledby="container-loading-list-heading">
         <header class="loading-list-heading"><div><h2 id="container-loading-list-heading">{{ loadingListHeading }}</h2><p>{{ loadingListDescription }}</p></div><el-button v-if="loadingDetail && loadingListMode === 'confirmed'" @click="printLoadingList">打印装柜清单</el-button></header>
         <ContainerOverviewPanel v-if="overview" :overview="overview" :sections="['pda']" :can-manage-documents="false" :can-manage-customs="false" :can-manage-exception="false" />
         <ContainerCustomsPanel v-if="overview?.loadingPlanId && canListCustoms" :loading-plan-id="overview.loadingPlanId" :can-list="canListCustoms" :can-manage="canManageCustoms" :departure-state="customsDepartureState" @refreshed="refreshAfterCustoms" />
-        <LoadingListDetailDrawer :mode="loadingListMode" embedded :loading="loadingDetailLoading" :detail="loadingDetail" :error="loadingDetailError" :can-edit="false" @back="activeTab = 'overview'" @retry="overview && loadLoadingDetail(detail, overview)" />
+        <LoadingListDetailDrawer dense :mode="loadingListMode" embedded :loading="loadingDetailLoading" :detail="loadingDetail" :error="loadingDetailError" :can-edit="false" @back="activeTab = 'overview'" @retry="overview && loadLoadingDetail(detail, overview)" />
       </section>
 
       <section v-if="canViewFirstLegFees && firstLegFeesOpened" v-show="activeTab === 'first-leg-fees'" v-loading="loadingDetailLoading" class="detail-section surface-panel" aria-label="头程计费">
@@ -594,24 +597,17 @@ onMounted(async () => { await load(); if (isOverseas.value && route.query.action
     </template>
 
     <OceanBookingLinkDialog v-model="oceanBookingLinkOpen" :container="detail" @linked="load" />
-    <AppDialog v-model="emptyReturnOpen" title="确认还柜" width="min(520px, calc(100vw - 28px))" confirm-text="确认还柜" :confirm-loading="emptyReturnSaving" :confirm-disabled="!emptyReturnAt || !canRecordEmptyReturn" @confirm="confirmEmptyReturn"><el-alert title="提交后货柜将进入已还柜状态，请核对实际还柜时间。" type="warning" :closable="false" show-icon /><el-form label-position="top"><el-form-item label="实际还柜时间" required><el-date-picker v-model="emptyReturnAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择实际还柜时间" /></el-form-item><el-form-item label="备注"><el-input v-model="emptyReturnReason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form><LoadErrorState v-if="emptyReturnError" compact title="确认还柜失败" :message="emptyReturnError.message" :show-retry="false"><template #details><ApiErrorMeta :details="emptyReturnError" /></template></LoadErrorState></AppDialog>
-    <AppDialog v-model="documentOpen" :title="documentTitle" width="min(520px, calc(100vw - 28px))" confirm-text="上传资料" :confirm-loading="documentSaving" :confirm-disabled="!documentFile" @confirm="saveDocument"><el-form label-position="top"><el-form-item :label="documentTitle"><el-upload :key="documentUploadKey" :auto-upload="false" :limit="1" :on-change="selectDocumentFile" :on-remove="removeDocumentFile"><el-button><FileUp :size="16" />选择文件</el-button><template #tip><div class="el-upload__tip">{{ selectedDocument ? '上传新文件将替换当前资料并保留历史。' : `请选择需要提交的${documentTitle}。` }}</div></template></el-upload></el-form-item></el-form><LoadErrorState v-if="documentError" compact title="资料上传失败" :message="documentError.message" :show-retry="false"><template #details><ApiErrorMeta :details="documentError" /></template></LoadErrorState></AppDialog>
-    <AppDialog v-model="exceptionOpen" :title="exceptionTitle" width="min(520px, calc(100vw - 28px))" :confirm-text="overview?.exception.active ? '确认取消' : '确认标记'" :confirm-loading="exceptionSaving" :confirm-disabled="!exceptionReason.trim()" @confirm="saveException"><el-alert :title="overview?.exception.active ? '取消备注为必填项，提交后将保留历史记录。' : '异常原因将同步记录在货柜详情和操作日志中。'" :type="overview?.exception.active ? 'warning' : 'error'" :closable="false" /><el-form label-position="top"><el-form-item :label="overview?.exception.active ? '取消备注' : '异常原因'" required><el-input v-model="exceptionReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入异常原因或取消备注" /></el-form-item></el-form><LoadErrorState v-if="exceptionError" compact title="异常处理失败" :message="exceptionError.message" :show-retry="false" /></AppDialog>
-    <AppDialog v-model="clearanceOpen" title="目的港清关资料" width="min(520px, calc(100vw - 28px))" :loading="clearanceLoading" :show-confirm="!clearanceDocument?.completedAt" confirm-text="上传资料" :confirm-loading="clearanceSaving" :confirm-disabled="!clearanceFile" @confirm="uploadClearance"><el-alert v-if="clearanceDocument?.completedAt" type="success" :closable="false" :title="`目的港清关已完成：${clearanceDocument.fileName}`" /><template v-else><el-form label-position="top"><el-form-item label="目的港清关资料"><el-upload :auto-upload="false" :limit="1" :on-change="selectClearanceFile" :on-remove="removeClearanceFile"><el-button><FileUp :size="16" />选择文件</el-button></el-upload></el-form-item></el-form><el-button v-if="clearanceDocument" type="success" plain :loading="clearanceSaving" @click="completeClearance">确认目的港清关完成</el-button></template><LoadErrorState v-if="clearanceError" compact title="目的港清关资料操作失败" :message="clearanceError.message" :show-retry="false"><template #details><ApiErrorMeta :details="clearanceError" /></template></LoadErrorState></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="emptyReturnOpen" title="确认还柜" width="min(520px, calc(100vw - 28px))" confirm-text="确认还柜" :confirm-loading="emptyReturnSaving" :confirm-disabled="!emptyReturnAt || !canRecordEmptyReturn" @confirm="confirmEmptyReturn"><el-alert title="提交后货柜将进入已还柜状态，请核对实际还柜时间。" type="warning" :closable="false" show-icon /><el-form class="density-form" label-position="top"><el-form-item label="实际还柜时间" required><el-date-picker v-model="emptyReturnAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择实际还柜时间" /></el-form-item><el-form-item label="备注"><el-input v-model="emptyReturnReason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form><LoadErrorState v-if="emptyReturnError" compact title="确认还柜失败" :message="emptyReturnError.message" :show-retry="false"><template #details><ApiErrorMeta :details="emptyReturnError" /></template></LoadErrorState></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="documentOpen" :title="documentTitle" width="min(520px, calc(100vw - 28px))" confirm-text="上传资料" :confirm-loading="documentSaving" :confirm-disabled="!documentFile" @confirm="saveDocument"><el-form class="density-form" label-position="top"><el-form-item :label="documentTitle"><el-upload :key="documentUploadKey" :auto-upload="false" :limit="1" :on-change="selectDocumentFile" :on-remove="removeDocumentFile"><el-button><FileUp :size="16" />选择文件</el-button><template #tip><div class="el-upload__tip">{{ selectedDocument ? '上传新文件将替换当前资料并保留历史。' : `请选择需要提交的${documentTitle}。` }}</div></template></el-upload></el-form-item></el-form><LoadErrorState v-if="documentError" compact title="资料上传失败" :message="documentError.message" :show-retry="false"><template #details><ApiErrorMeta :details="documentError" /></template></LoadErrorState></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="exceptionOpen" :title="exceptionTitle" width="min(520px, calc(100vw - 28px))" :confirm-text="overview?.exception.active ? '确认取消' : '确认标记'" :confirm-loading="exceptionSaving" :confirm-disabled="!exceptionReason.trim()" @confirm="saveException"><el-alert :title="overview?.exception.active ? '取消备注为必填项，提交后将保留历史记录。' : '异常原因将同步记录在货柜详情和操作日志中。'" :type="overview?.exception.active ? 'warning' : 'error'" :closable="false" /><el-form class="density-form" label-position="top"><el-form-item :label="overview?.exception.active ? '取消备注' : '异常原因'" required><el-input v-model="exceptionReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入异常原因或取消备注" /></el-form-item></el-form><LoadErrorState v-if="exceptionError" compact title="异常处理失败" :message="exceptionError.message" :show-retry="false" /></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="clearanceOpen" title="目的港清关资料" width="min(520px, calc(100vw - 28px))" :loading="clearanceLoading" :show-confirm="!clearanceDocument?.completedAt" confirm-text="上传资料" :confirm-loading="clearanceSaving" :confirm-disabled="!clearanceFile" @confirm="uploadClearance"><el-alert v-if="clearanceDocument?.completedAt" type="success" :closable="false" :title="`目的港清关已完成：${clearanceDocument.fileName}`" /><template v-else><el-form class="density-form" label-position="top"><el-form-item label="目的港清关资料"><el-upload :auto-upload="false" :limit="1" :on-change="selectClearanceFile" :on-remove="removeClearanceFile"><el-button><FileUp :size="16" />选择文件</el-button></el-upload></el-form-item></el-form><el-button v-if="clearanceDocument" type="success" plain :loading="clearanceSaving" @click="completeClearance">确认目的港清关完成</el-button></template><LoadErrorState v-if="clearanceError" compact title="目的港清关资料操作失败" :message="clearanceError.message" :show-retry="false"><template #details><ApiErrorMeta :details="clearanceError" /></template></LoadErrorState></AppDialog>
   </AdminPage>
 </template>
 
 <style scoped>
-.workbench-tabs { min-width:0; overflow:hidden; border-bottom:1px solid rgba(228,228,231,.5); border-radius:20px 20px 0 0; background:rgba(255,255,255,.95); box-shadow:0 -4px 16px rgba(0,0,0,.04); }
-.workbench-tabs :deep(.el-tabs__header) { margin:0; }
-.workbench-tabs :deep(.el-tabs__nav-wrap::after), .workbench-tabs :deep(.el-tabs__active-bar), .workbench-tabs :deep(.el-tabs__content) { display:none; }
-.workbench-tabs :deep(.el-tabs__item) { height:auto; padding:16px 28px !important; border-bottom:3px solid transparent; color:#71717a; font-size:15px; font-weight:600; transition:background-color .2s, color .2s, border-color .2s; }
-.workbench-tabs :deep(.el-tabs__item:hover) { background:rgba(102,126,234,.05); color:#667eea; }
-.workbench-tabs :deep(.el-tabs__item.is-active) { border-bottom-color:#667eea; background:rgba(102,126,234,.08); color:#667eea; font-weight:800; }
-.workbench-tabs :deep(.el-tabs__item:focus-visible) { outline:2px solid #667eea; outline-offset:-4px; }
-.workbench-tab-label { display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
-.container-detail-page { display:grid; min-width:0; gap:12px; }.container-overview { overflow:hidden; }.container-overview__header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px 16px; }.container-overview__header h1 { margin:0; font-size:18px; }.container-overview__header p { margin:2px 0 0; color:var(--cc-muted); font-size:12px; }.container-overview__summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--cc-border); }.container-overview__summary>div { display:flex; min-width:0; flex-direction:column; gap:3px; padding:8px 14px; border-right:1px solid var(--cc-border); }.container-overview__summary>div:last-child { border-right:0; }.container-overview__summary span,dt { color:var(--cc-muted); font-size:12px; }.container-overview__summary strong,dd { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; }.detail-section{display:grid;min-width:0;gap:12px;padding:12px 16px}.detail-section>h2{margin:0;font-size:15px}.detail-fields { padding:0; }.detail-fields dl { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px 16px; margin:0; }.detail-fields dl>div { min-width:0; }.detail-fields dd { margin-top:3px; font-size:13px; }.outbound-panel{padding:12px 0 0;border-top:1px solid var(--cc-border)}.outbound-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.outbound-panel__header h2{margin:0;font-size:15px}.outbound-panel__header p,.outbound-panel__hint{margin:3px 0 0;color:var(--cc-muted);font-size:12px}.outbound-panel__hint--success{color:var(--el-color-success)}.outbound-panel__actions{display:flex;align-items:center;gap:8px}.outbound-panel__loading{padding:8px 0}.gate-summary{display:flex;align-items:center;gap:14px;margin-top:8px;color:var(--cc-muted);font-size:12px}.gate-summary__passed strong{color:var(--el-color-success)}.gate-summary__blocked strong{color:var(--el-color-danger)}.gate-summary__reference{margin-left:auto;padding-left:10px;border-left:1px solid var(--cc-border)}.gate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;margin-top:7px}.gate-row{display:grid;grid-template-columns:auto minmax(130px,.9fr) minmax(100px,1fr);align-items:center;gap:6px 8px;min-width:0;padding:6px 8px;border:1px solid var(--cc-border);border-radius:6px;background:var(--cc-surface-muted)}.gate-row__actual,.gate-row small{overflow:hidden;color:var(--cc-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.gate-row small{grid-column:2/-1}.gate-row__coverage{display:flex;grid-column:2/-1;min-width:0;align-items:center;gap:5px;overflow:hidden}.gate-row__coverage>span{flex:0 0 auto;color:var(--cc-muted);font-size:11px}.gate-row__coverage :deep(.el-tag){max-width:120px;overflow:hidden;text-overflow:ellipsis}.carrier-panel{padding-top:4px}@media(max-width:1200px){.detail-fields dl{grid-template-columns:repeat(4,minmax(0,1fr))}.gate-list{grid-template-columns:1fr}}@media(max-width:720px){.container-overview__header{grid-template-columns:auto minmax(0,1fr)}.container-overview__header>:last-child{grid-column:2}.container-overview__summary,.detail-fields dl{grid-template-columns:repeat(2,minmax(0,1fr))}.outbound-panel__header{align-items:flex-start;flex-direction:column}.outbound-panel__actions,.gate-summary{flex-wrap:wrap}.gate-summary__reference{width:100%;margin-left:0;padding-left:0;border-left:0}.gate-row{grid-template-columns:auto minmax(0,1fr)}.gate-row__actual,.gate-row small,.gate-row__coverage{grid-column:2}}
-.detail-section__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
-.detail-section__heading h2 { margin:0; font-size:15px; }
-.overseas-stage-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:9px 16px;border-top:1px solid var(--cc-border);background:#f5f8ff}.overseas-stage-strip>div{display:flex;align-items:baseline;gap:10px}.overseas-stage-strip span,.overseas-stage-strip p{color:var(--cc-muted);font-size:12px}.overseas-stage-strip strong{color:var(--cc-primary);font-size:14px}.overseas-stage-strip p{margin:0}.overseas-stage-strip.is-overdue{background:#fff7ed}.overseas-stage-strip.is-overdue strong,.overseas-stage-strip.is-overdue p{color:#c2410c}
+.workbench-tab-label { display:inline-flex; align-items:center; justify-content:center; gap:var(--admin-space-3); white-space:nowrap; }
+.container-detail-page { display:grid; min-width:0; gap:var(--admin-space-5); }.container-overview { overflow:hidden; }.container-overview__header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--admin-space-5); padding:var(--admin-space-4) var(--admin-space-5); }.container-overview__header h1 { margin:0; font-size:var(--admin-font-title); }.container-overview__header p { margin:2px 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption); }.container-overview__summary { border-top:1px solid var(--cc-border); display:flex; flex-wrap:wrap; }.container-overview__summary>div { display:flex; min-width:0; padding:var(--admin-space-3) var(--admin-space-5); border-right:1px solid var(--cc-border); align-items:baseline; gap:var(--admin-space-2); }.container-overview__summary>div:last-child { border-right:0; }.container-overview__summary span,dt { color:var(--cc-muted); font-size:var(--admin-font-caption); }.container-overview__summary strong,dd { margin:0; white-space:normal; overflow-wrap:anywhere; }.detail-section{display:grid;min-width:0;gap:var(--admin-space-5);padding:var(--admin-space-5) var(--admin-space-5)}.detail-section>h2{margin:0;font-size:var(--admin-font-section)}.detail-fields { padding:0; }.outbound-panel{padding:var(--admin-space-5) 0 0;border-top:1px solid var(--cc-border)}.outbound-panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--admin-space-5)}.outbound-panel__header h2{margin:0;font-size:var(--admin-font-section)}.outbound-panel__header p,.outbound-panel__hint{margin:3px 0 0;color:var(--cc-muted);font-size:var(--admin-font-caption)}.outbound-panel__hint--success{color:var(--el-color-success)}.outbound-panel__actions{display:flex;align-items:center;gap:var(--admin-space-3)}.outbound-panel__loading{padding:var(--admin-space-3) 0}.gate-summary{display:flex;align-items:center;gap:var(--admin-space-5);margin-top:var(--admin-space-3);color:var(--cc-muted);font-size:var(--admin-font-caption)}.gate-summary__passed strong{color:var(--el-color-success)}.gate-summary__blocked strong{color:var(--el-color-danger)}.gate-summary__reference{margin-left:auto;padding-left:var(--admin-space-4);border-left:1px solid var(--cc-border)}.gate-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--admin-space-2) var(--admin-space-5);margin-top:7px}.gate-row{display:grid;grid-template-columns:auto minmax(130px,.9fr) minmax(100px,1fr);align-items:center;gap:var(--admin-space-2) var(--admin-space-3);min-width:0;padding:var(--admin-space-2) var(--admin-space-3);border:1px solid var(--cc-border);border-radius:var(--admin-radius);background:var(--cc-surface-muted)}.gate-row__actual,.gate-row small{color:var(--cc-muted);font-size:var(--admin-font-caption);white-space:normal;overflow-wrap:anywhere}.gate-row small{grid-column:2/-1}.gate-row__coverage{display:flex;grid-column:2/-1;min-width:0;align-items:center;gap:5px;overflow:hidden}.gate-row__coverage>span{flex:0 0 auto;color:var(--cc-muted);font-size:var(--admin-font-caption)}.gate-row__coverage :deep(.el-tag){max-width:120px;overflow:hidden;text-overflow:ellipsis}.carrier-panel{padding-top:var(--admin-space-1)}@media(max-width:1200px){.gate-list{grid-template-columns:1fr}}@media(max-width:720px){.container-overview__header{grid-template-columns:auto minmax(0,1fr)}.container-overview__header>:last-child{grid-column:2}.container-overview__summary,.detail-fields dl{grid-template-columns:repeat(2,minmax(0,1fr))}.outbound-panel__header{align-items:flex-start;flex-direction:column}.outbound-panel__actions,.gate-summary{flex-wrap:wrap}.gate-summary__reference{width:100%;margin-left:0;padding-left:0;border-left:0}.gate-row{grid-template-columns:auto minmax(0,1fr)}.gate-row__actual,.gate-row small,.gate-row__coverage{grid-column:2}}
+.detail-section__heading { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-5); }
+.detail-section__heading h2 { margin:0; font-size:var(--admin-font-section); }
+.overseas-stage-strip{display:flex;align-items:center;justify-content:space-between;gap:var(--admin-space-6);padding:9px var(--admin-space-5);border-top:1px solid var(--cc-border);background:#f5f8ff}.overseas-stage-strip>div{display:flex;align-items:baseline;gap:var(--admin-space-4)}.overseas-stage-strip span,.overseas-stage-strip p{color:var(--cc-muted);font-size:var(--admin-font-caption)}.overseas-stage-strip strong{color:var(--cc-primary);font-size:var(--admin-font-section)}.overseas-stage-strip p{margin:0}.overseas-stage-strip.is-overdue{background:#fff7ed}.overseas-stage-strip.is-overdue strong,.overseas-stage-strip.is-overdue p{color:#c2410c}.container-overview__header h1 { overflow-wrap:anywhere; }.workbench-tab-label { gap:var(--admin-space-2); }
 </style>

src/modules/container-loading/pages/ContainersView.test.ts

@@ -25,7 +25,7 @@ vi.mock('@/modules/iam', () => ({ listPlatformTenants: vi.fn().mockResolvedValue
 const accessCan = vi.hoisted(() => vi.fn())
 vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: accessCan }) }))
 vi.mock('../api/platformContainerLoading', () => ({ listContainers: vi.fn(), getContainer: vi.fn(), getContainerOverview: vi.fn(), getContainerClearance: vi.fn(), uploadContainerClearance: vi.fn(), completeContainerClearance: vi.fn(), uploadContainerDocument: vi.fn(), downloadContainerDocument: vi.fn(), downloadContainerPdaPhoto: vi.fn(), markContainerException: vi.fn(), cancelContainerException: vi.fn(), createContainerSimulation: vi.fn(), linkContainerOceanBooking: vi.fn(), unlinkContainerOceanBooking: vi.fn(), updateContainer: vi.fn() }))
-vi.mock('../api/terminalDrayages', () => ({ sendTerminalDrayageEmail: vi.fn(), getTerminalDrayageEmails: vi.fn(), retryTerminalDrayageEmail: vi.fn(), listTerminalDrayages: vi.fn(), getTerminalDrayage: vi.fn(), getTerminalDrayageHistory: vi.fn(), selectTerminalDrayageFleet: vi.fn(), scheduleTerminalDrayagePickup: vi.fn(), recordTerminalDrayagePickup: vi.fn(), recordTerminalDrayageEmptyReturn: vi.fn() }))
+vi.mock('../api/terminalDrayages', () => ({ sendTerminalDrayageEmail: vi.fn(), getTerminalDrayageEmails: vi.fn(), retryTerminalDrayageEmail: vi.fn(), listTerminalDrayages: vi.fn(), getTerminalDrayage: vi.fn(), getTerminalDrayageHistory: vi.fn(), selectTerminalDrayageFleet: vi.fn(), scheduleTerminalDrayagePickup: vi.fn(), recordTerminalDrayageEmptyReturn: vi.fn() }))
 
 const drayage = {
   containerBookingId: '9001', containerNo: 'MSCU-1', oceanBookingId: '101', status: 'UNLOADED' as const, version: 3,
@@ -71,8 +71,8 @@ describe('ContainersView', () => {
     vi.mocked(getTerminalDrayageHistory).mockResolvedValue([])
     vi.mocked(selectTerminalDrayageFleet).mockResolvedValue({ ...drayage, fleetSupplierId: '502', fleetSupplierName: '新车队', version: 4, allowedActions: [...drayage.allowedActions] })
     vi.mocked(recordTerminalDrayageEmptyReturn).mockReset().mockResolvedValue({ ...drayage, status: 'EMPTY_RETURNED', actualEmptyReturnAt: '2026-09-11T13:00:00', version: 4, emptyReturnWarning: { status: 'RESOLVED', deadlineAt: '2026-09-10T10:00:00', overdueHours: 0, overdueDays: 0 }, allowedActions: ['SELECT_FLEET'] })
-    vi.mocked(listContainers).mockResolvedValue({ records: [{ id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER', 'SELECT_FLEET', 'SCHEDULE_PICKUP', 'RECORD_PICKUP', 'RECORD_EMPTY_RETURN'], terminalDrayage: drayage, oceanBookingId: null, warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HC', planStatus: 'WAIT_LOADING', version: 0, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩', destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 76, maxWeightKg: 28000, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }], page: 1, size: 20, total: 1, pages: 1 })
-    vi.mocked(getContainer).mockResolvedValue({ id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER'], oceanBookingId: null, warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HC', planStatus: 'WAIT_LOADING', version: 0, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩', destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 76, maxWeightKg: 28000, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null })
+    vi.mocked(listContainers).mockResolvedValue({ records: [{ id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER', 'SELECT_FLEET', 'SCHEDULE_PICKUP', 'RECORD_EMPTY_RETURN'], terminalDrayage: drayage, oceanBookingId: null, warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HQ', planStatus: 'WAIT_LOADING', version: 0, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩', destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 19500, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null }], page: 1, size: 20, total: 1, pages: 1 })
+    vi.mocked(getContainer).mockResolvedValue({ id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER'], oceanBookingId: null, warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HQ', planStatus: 'WAIT_LOADING', version: 0, billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null, departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩', destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 19500, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null })
     vi.mocked(getContainerOverview).mockResolvedValue({ container: { id: '9001', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', status: 'WAIT_LOADING', warehouseId: '8', warehouseName: '义乌仓', voyageNo: null, vesselName: null, version: 0 }, loadingPlanId: null, pda: null, documents: [], exception: { active: false, reason: null, markedBy: null, markedByName: null, markedAt: null }, exceptionHistory: [], timeline: [] })
   })
 
@@ -292,10 +292,10 @@ describe('ContainersView', () => {
 
   it('uses stable view labels when cabinetNo is missing', async () => {
     const base = {
-      id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', warehouseId: '8', warehouseName: '义乌仓', containerType: '40HC', planStatus: 'WAIT_LOADING' as const, version: 0,
+      id: '9001', planId: null, bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', warehouseId: '8', warehouseName: '义乌仓', containerType: '40HQ', planStatus: 'WAIT_LOADING' as const, version: 0,
       billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null,
       departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩',
-      destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 76, maxWeightKg: 28000,
+      destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 19500,
       terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null,
       estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
     }
@@ -321,10 +321,10 @@ describe('ContainersView', () => {
 
   it('routes each plan status to its owning workflow without reopening pushed drafts', async () => {
     const base = {
-      id: '9001', planId: '9101', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HC', version: 0,
+      id: '9001', planId: '9101', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1', warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HQ', version: 0,
       billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null,
       departurePortCode: null, departurePortName: '宁波', destinationPortCode: null, destinationPortName: '长滩',
-      destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 76, maxWeightKg: 28000,
+      destinationWarehouseCode: null, destinationWarehouseName: null, capacityCbm: 68, maxWeightKg: 19500,
       terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null,
       estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
     }
@@ -412,10 +412,10 @@ describe('ContainersView', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/ContainersView.vue'), 'utf8')
     expect(source).toContain("'domestic-container-detail' : 'overseas-container-detail'")
     expect(source).not.toContain('<AppDialog v-model="detailOpen"')
-    expect(source).toContain('<AppDialog v-model="editorOpen" class="container-editor-dialog"')
-    expect(source).toContain('max-height: 90vh')
-    expect(source).toContain('overflow-y: auto')
-    expect(source).toContain('grid-template-columns: minmax(0,1fr)')
+    expect(source).toContain('<AppDialog v-model="editorOpen" class="container-editor-dialog admin-density-dialog"')
+    expect(source).toContain('width="min(820px, calc(100vw - 28px))"')
+    expect(source).toContain('admin-density-dialog')
+    expect(source).toContain('grid-template-columns: repeat(2, minmax(0, 1fr))')
     expect(source).not.toContain('AppDrawer')
     expect(source).not.toContain('<AppDrawer v-model="editorOpen"')
   })
@@ -561,7 +561,7 @@ describe('ContainersView', () => {
       link.click()
       await flushPromises()
       expect(wrapper.findAllComponents(AppDialog).find((dialog) => dialog.props('title') === '关联已放舱订舱')?.props('modelValue')).toBe(true)
-      expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HC', page: 1, size: 200 })
+      expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HQ', page: 1, size: 200 })
     } finally {
       wrapper.unmount()
     }
@@ -586,7 +586,7 @@ describe('ContainersView', () => {
     expect(source).not.toContain('新增货柜')
     expect(simulationSource).toContain('新增模拟柜')
     expect(simulationSource).toContain('createContainerSimulation({ ...simulationForm })')
-    expect(simulationSource).toContain("channelGroupCode: '', warehouseId: '', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000")
+    expect(simulationSource).toContain("channelGroupCode: '', warehouseId: '', containerType: DEFAULT_CONTAINER_TYPE, capacityCbm: 68, maxWeightKg: 19500")
     expect(source).toContain('CONTAINER_SPECIFICATIONS')
     expect(simulationSource).toContain('selectSimulationContainerType')
     expect(simulationSource).toContain('服务端会生成稳定的柜次号')
@@ -594,7 +594,10 @@ describe('ContainersView', () => {
     expect(source).not.toContain('v-model="form.cabinetNo"')
     expect(source).not.toContain('cabinetNo: form.cabinetNo.trim()')
     expect(source).not.toContain('openCreate')
-    expect(source).not.toContain("['20GP','40GP','40HQ','45HQ']")
+    expect(source).not.toContain('20GP')
+    expect(source).not.toContain('40HC')
+    expect(source).not.toContain('40NR')
+    expect(source).not.toContain('45HC')
     expect(source).not.toContain('v-model="form.capacityCbm"')
     expect(source).not.toContain('v-model="form.maxWeightKg"')
   })
@@ -603,7 +606,7 @@ describe('ContainersView', () => {
     vi.mocked(listContainers).mockResolvedValue({ records: [{
       id: '215', planId: null, bookingNo: 'CB-260825-0215', cabinetNo: 'CAB-260825-0215', containerNo: null,
       sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER'], oceanBookingId: null, warehouseId: '193000000000200002', warehouseName: '东莞仓',
-      channelGroupCode: 'EXX', channelCode: null, channelName: null, containerType: '45HC', planStatus: 'EDITING',
+      channelGroupCode: 'EXX', channelCode: null, channelName: null, containerType: '45HQ', planStatus: 'EDITING',
       capacityCbm: 86, maxWeightKg: 29000, version: 7,
     }], page: 1, size: 20, total: 1, pages: 1 } as never)
     vi.mocked(listOceanBookingLinkCandidates).mockResolvedValueOnce({ records: [], page: 1, size: 200, total: 0, pages: 0 })
@@ -617,7 +620,7 @@ describe('ContainersView', () => {
       .filter((item) => item.textContent?.includes('关联已放舱订舱')).at(-1)!.click()
     await flushPromises()
 
-    expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '193000000000200002', channelGroupCode: 'EXX', containerType: '45HC', page: 1, size: 200 })
+    expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '193000000000200002', channelGroupCode: 'EXX', containerType: '45HQ', page: 1, size: 200 })
     expect((wrapper.findComponent(OceanBookingLinkDialog).vm as unknown as { candidates: unknown[] }).candidates).toEqual([])
     expect(readFileSync(resolve(process.cwd(), 'src/modules/container-loading/components/OceanBookingLinkDialog.vue'), 'utf8'))
       .toContain('暂无符合当前装柜仓库、物流渠道和柜型的已放舱需求')
@@ -628,7 +631,7 @@ describe('ContainersView', () => {
   it.each([undefined, null, '', '客户一'])('renders optional booking customer %s without leaking a missing value', async (customerName) => {
     vi.mocked(listOceanBookingLinkCandidates).mockResolvedValueOnce({ records: [{
       oceanBookingId: '315', bookingNo: 'OB-OPTIONAL-CUSTOMER', requirementId: '45315',
-      containerType: '40HC', remainingQuantity: 1, customerName, warehouseName: '义乌仓', channelName: 'EXX海卡',
+      containerType: '40HQ', remainingQuantity: 1, customerName, warehouseName: '义乌仓', channelName: 'EXX海卡',
     }], page: 1, size: 200, total: 1, pages: 1 } as never)
     const router = createTestRouter()
     await router.push('/'); await router.isReady()
@@ -639,7 +642,7 @@ describe('ContainersView', () => {
     Array.from(document.body.querySelectorAll<HTMLElement>('.el-dropdown-menu__item'))
       .filter((item) => item.textContent?.includes('关联已放舱订舱')).at(-1)!.click()
     await flushPromises()
-    const label = `OB-OPTIONAL-CUSTOMER · 40HC × 1 · ${customerName || '未关联客户'} · 义乌仓 · EXX海卡`
+    const label = `OB-OPTIONAL-CUSTOMER · 40HQ × 1 · ${customerName || '未关联客户'} · 义乌仓 · EXX海卡`
     expect(document.body.textContent).toContain(label)
     expect((wrapper.findComponent(OceanBookingLinkDialog).vm as unknown as { candidates: Array<{ label: string }> }).candidates[0]?.label).toBe(label)
     wrapper.unmount()
@@ -650,7 +653,7 @@ describe('ContainersView', () => {
     vi.mocked(listContainers).mockResolvedValue({ records: [{
       id: '315', planId: null, bookingNo: 'CB-CAPACITY-SNAPSHOT', cabinetNo: 'CAB-CAPACITY-SNAPSHOT', containerNo: null,
       sourceType: 'SIMULATION', allowedActions: ['EDIT_CONTAINER'], oceanBookingId: null, warehouseId: '193000000000200002', warehouseName: '东莞仓',
-      channelGroupCode: 'EXX', channelCode: null, channelName: null, containerType: '45HC', planStatus: 'WAIT_LOADING',
+      channelGroupCode: 'EXX', channelCode: null, channelName: null, containerType: '45HQ', planStatus: 'WAIT_LOADING',
       capacityCbm: 86, maxWeightKg: 29000, version: 7,
     }], page: 1, size: 20, total: 1, pages: 1 } as never)
     vi.mocked(listOceanBookingLinkCandidates).mockReturnValueOnce(new Promise((resolve) => { resolveCandidates = resolve }))
@@ -668,11 +671,11 @@ describe('ContainersView', () => {
     linkAction.click()
 
     expect(listOceanBookingLinkCandidates).toHaveBeenCalledTimes(1)
-    expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '193000000000200002', channelGroupCode: 'EXX', containerType: '45HC', page: 1, size: 200 })
+    expect(listOceanBookingLinkCandidates).toHaveBeenCalledWith({ warehouseId: '193000000000200002', channelGroupCode: 'EXX', containerType: '45HQ', page: 1, size: 200 })
     expect(getOceanBooking).not.toHaveBeenCalled()
-    resolveCandidates({ records: [{ oceanBookingId: '315', bookingNo: 'OB-CAPACITY-SNAPSHOT', requirementId: '45315', containerType: '45HC', capacityCbm: 85, maxWeightKg: 28500, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '东莞仓', channelName: '纽约铁路' }], page: 1, size: 200, total: 1, pages: 1 })
+    resolveCandidates({ records: [{ oceanBookingId: '315', bookingNo: 'OB-CAPACITY-SNAPSHOT', requirementId: '45315', containerType: '45HQ', capacityCbm: 85, maxWeightKg: 28500, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '东莞仓', channelName: '纽约铁路' }], page: 1, size: 200, total: 1, pages: 1 })
     await flushPromises()
-    expect(document.body.textContent).toContain('OB-CAPACITY-SNAPSHOT · 45HC × 1')
+    expect(document.body.textContent).toContain('OB-CAPACITY-SNAPSHOT · 45HQ × 1')
     expect((wrapper.findComponent(OceanBookingLinkDialog).vm as unknown as { candidates: Array<{ key: string }> }).candidates[0]?.key).toBe('315:45315')
     wrapper.unmount()
   })
@@ -701,9 +704,9 @@ describe('ContainersView', () => {
     await flushPromises()
     Array.from(document.body.querySelectorAll<HTMLElement>('.el-dropdown-menu__item'))
       .filter((item) => item.textContent?.includes('关联已放舱订舱')).at(-1)!.click()
-    resolveSecond({ records: [{ oceanBookingId: '303', bookingNo: 'OB-LATEST', requirementId: '404', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '义乌仓', channelName: '美森正班海卡包税' }], page: 1, size: 200, total: 1, pages: 1 })
+    resolveSecond({ records: [{ oceanBookingId: '303', bookingNo: 'OB-LATEST', requirementId: '404', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '义乌仓', channelName: '美森正班海卡包税' }], page: 1, size: 200, total: 1, pages: 1 })
     await flushPromises()
-    resolveFirst({ records: [{ oceanBookingId: '101', bookingNo: 'OB-STALE', requirementId: '202', containerType: '40HC', capacityCbm: 76, maxWeightKg: 28000, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '义乌仓', channelName: '美森正班海卡包税' }], page: 1, size: 200, total: 1, pages: 1 })
+    resolveFirst({ records: [{ oceanBookingId: '101', bookingNo: 'OB-STALE', requirementId: '202', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500, requiredQuantity: 1, allocatedQuantity: 0, remainingQuantity: 1, customerName: '客户', warehouseName: '义乌仓', channelName: '美森正班海卡包税' }], page: 1, size: 200, total: 1, pages: 1 })
     await flushPromises()
 
     expect(listOceanBookingLinkCandidates).toHaveBeenCalledTimes(2)
@@ -715,7 +718,7 @@ describe('ContainersView', () => {
 
   it('backfills a legacy trucking supplier name and submits the frozen id-name pair', async () => {
     vi.mocked(listSuppliers).mockResolvedValue({ records: [{ id: '9007199254740998', tenantId: '1', name: '测试拖车供应商', category: 'TRUCKING', carrierCodes: [], region: 'CN', legalRepresentative: '张三', contactName: '李四', phone: '13800000000', email: null, address: null, businessLicenseNo: null, licenseFileId: null, status: 'ACTIVE', settlementPeriod: 'MONTHLY_30', remark: null, createdBy: null, createdAt: '2026-08-25T10:00:00', updatedBy: null, updatedAt: '2026-08-25T10:00:00', deleted: false, version: 0 }], page: 1, size: 200, total: 1, pages: 1 })
-    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HC', warehouseId: '8', terminalTruckingCompanyId: null, terminalTruckingCompany: '测试拖车供应商' } as never)
+    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HQ', warehouseId: '8', terminalTruckingCompanyId: null, terminalTruckingCompany: '测试拖车供应商' } as never)
     vi.mocked(updateContainer).mockResolvedValue({} as never)
     const router = createTestRouter()
     await router.push('/'); await router.isReady()
@@ -735,7 +738,7 @@ describe('ContainersView', () => {
 
   it('clears the trucking supplier id and name together', async () => {
     vi.mocked(listSuppliers).mockResolvedValue({ records: [{ id: '9007199254740998', tenantId: '1', name: '测试拖车供应商', category: 'TRUCKING', carrierCodes: [], region: 'CN', legalRepresentative: '张三', contactName: '李四', phone: '13800000000', email: null, address: null, businessLicenseNo: null, licenseFileId: null, status: 'ACTIVE', settlementPeriod: 'MONTHLY_30', remark: null, createdBy: null, createdAt: '2026-08-25T10:00:00', updatedBy: null, updatedAt: '2026-08-25T10:00:00', deleted: false, version: 0 }], page: 1, size: 200, total: 1, pages: 1 })
-    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HC', warehouseId: '8', terminalTruckingCompanyId: '9007199254740998', terminalTruckingCompany: '测试拖车供应商' } as never)
+    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HQ', warehouseId: '8', terminalTruckingCompanyId: '9007199254740998', terminalTruckingCompany: '测试拖车供应商' } as never)
     vi.mocked(updateContainer).mockResolvedValue({} as never)
     const router = createTestRouter()
     await router.push('/'); await router.isReady()
@@ -757,7 +760,7 @@ describe('ContainersView', () => {
   })
 
   it('blocks saving a legacy trucking supplier name that no longer matches an active option', async () => {
-    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HC', warehouseId: '8', terminalTruckingCompanyId: null, terminalTruckingCompany: '已停用拖车供应商' } as never)
+    vi.mocked(getContainer).mockResolvedValueOnce({ id: '9001', allowedActions: ['EDIT_CONTAINER'], planStatus: 'WAIT_LOADING', containerType: '40HQ', warehouseId: '8', terminalTruckingCompanyId: null, terminalTruckingCompany: '已停用拖车供应商' } as never)
     vi.mocked(updateContainer).mockClear()
     const router = createTestRouter()
     await router.push('/'); await router.isReady()

src/modules/container-loading/pages/ContainersView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import ContainerSimulationCreate from '../components/ContainerSimulationCreate.vue'
 import { useRouter } from 'vue-router'
-import { Boxes, Check, Eye, FileText, FileUp, Link2, ListChecks, Mail, MoreHorizontal, Pencil, Sparkles } from '@lucide/vue'
+import { MoreHorizontal } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
@@ -17,7 +18,7 @@ import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.v
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
-import { CONTAINER_SPECIFICATIONS, applyContainerSpecification, containerSpecification } from '@/shared/domain/containerSpecifications'
+import { CONTAINER_SPECIFICATIONS, DEFAULT_CONTAINER_TYPE, applyContainerSpecification, containerSpecification } from '@/shared/domain/containerSpecifications'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { getContainer, listContainers, updateContainer } from '../api/platformContainerLoading'
 import OceanBookingLinkDialog from '../components/OceanBookingLinkDialog.vue'
@@ -30,7 +31,6 @@ import {
   getTerminalDrayage,
   getTerminalDrayageHistory,
   recordTerminalDrayageEmptyReturn,
-  recordTerminalDrayagePickup,
   scheduleTerminalDrayagePickup,
   selectTerminalDrayageFleet,
   type TerminalDrayageAction,
@@ -142,7 +142,7 @@ async function retryEmail(mail: TerminalDrayageEmail) {
   if (!target || !canFleetEdit.value || retryingEmail.value || mail.status !== 'FAILED') return
   retryingEmail.value = mail.id
   try {
-    await ElMessageBox.confirm('发送失败时邮件仍可能已送达。请先核对车队未收到，再确认重试；同柜后续邮件会等待本邮件发送成功。', '重试邮件', { confirmButtonText: '确认重试', cancelButtonText: '取消', type: 'warning' })
+    await ElMessageBox.confirm('发送失败时邮件仍可能已送达。请先核对车队未收到，再确认重试；同柜后续邮件会等待本邮件发送成功。', '重试邮件', { customClass: 'admin-density-confirm', confirmButtonText: '确认重试', cancelButtonText: '取消', type: 'warning' })
     await retryTerminalDrayageEmail(target.id, mail.id)
     ElMessage.success('邮件已重新加入发送队列')
     await openEmailHistory(target)
@@ -164,10 +164,10 @@ let businessOptionsPromise: Promise<void> | null = null
 function emptyForm(): ContainerForm {
   return {
     id: '', version: 0, containerNo: null, cabinetNo: '', warehouseId: '', warehouseName: null,
-    billOfLadingNo: null, vesselName: null, voyageNo: null, containerType: '40HC', shippingCompanyId: null,
+    billOfLadingNo: null, vesselName: null, voyageNo: null, containerType: DEFAULT_CONTAINER_TYPE, shippingCompanyId: null,
     shippingCompanyName: null, departurePortCode: null, departurePortName: null, destinationPortCode: null,
     destinationPortName: null, destinationWarehouseCode: null, destinationWarehouseName: null,
-    capacityCbm: 76, maxWeightKg: 28000, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null,
+    capacityCbm: 68, maxWeightKg: 19500, terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null,
     estimatedSailingAt: null, actualSailingAt: null, estimatedPortArrivalAt: null, actualPortArrivalAt: null,
     estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
   }
@@ -187,7 +187,6 @@ const canCreate = computed(() => access.can('platform:firstleg:container:create'
 const canOverseasDocumentEdit = computed(() => access.can('platform:firstleg:terminal-drayage:document:edit'))
 const canFleetEdit = computed(() => access.can('platform:firstleg:terminal-drayage:fleet:edit'))
 const canPickupAppointmentEdit = computed(() => access.can('platform:firstleg:terminal-drayage:pickup-appointment:edit'))
-const canPickupConfirm = computed(() => access.can('platform:firstleg:terminal-drayage:pickup:confirm'))
 const canEmptyReturnConfirm = computed(() => access.can('platform:firstleg:terminal-drayage:empty-return:confirm'))
 const canSmartLoading = computed(() => access.can('platform:firstleg:smart-loading:list'))
 const canViewPreload = computed(() => access.can('platform:firstleg:preload:list'))
@@ -280,10 +279,10 @@ function documentStatusText(status: ContainerDocumentStatus | null | undefined)
 function formatTime(value: string | null | undefined) { return value?.replace('T', ' ').slice(0, 16) || '—' }
 function drayageFor(containerBookingId: string) { return drayages.value[containerBookingId] }
 function drayageStatusText(status?: string | null) { return ({ WAITING_FOR_ARRIVAL: '待到港', ARRIVED: '已到港', PICKUP_SCHEDULED: '已约提柜', PICKED_UP: '已提柜', UNLOADED: '已卸柜', EMPTY_RETURNED: '已还柜' } as Record<string, string>)[status || ''] || status || '—' }
-function drayageActionText(action: TerminalDrayageAction) { return ({ SELECT_FLEET: '选择码头车队', SCHEDULE_PICKUP: '预约提柜', RECORD_PICKUP: '确认实际提柜', RECORD_EMPTY_RETURN: '确认还柜', SEND_PICKUP_EMAIL: '发送提柜邮件' } as Record<TerminalDrayageAction, string>)[action] }
+function drayageActionText(action: TerminalDrayageAction) { return ({ SELECT_FLEET: '选择码头车队', SCHEDULE_PICKUP: '预约提柜', RECORD_EMPTY_RETURN: '确认还柜', SEND_PICKUP_EMAIL: '发送提柜邮件' } as Record<TerminalDrayageAction, string>)[action] }
 function hasAction(row: ContainerWorkbenchRow, action: ContainerWorkbenchAction) { return Boolean(row.allowedActions?.includes(action)) }
 function canDrayage(row: ContainerWorkbenchRow, action: TerminalDrayageAction) {
-  const permission = action === 'SELECT_FLEET' || action === 'SEND_PICKUP_EMAIL' ? canFleetEdit.value : action === 'SCHEDULE_PICKUP' ? canPickupAppointmentEdit.value : action === 'RECORD_PICKUP' ? canPickupConfirm.value : canEmptyReturnConfirm.value
+  const permission = action === 'SELECT_FLEET' || action === 'SEND_PICKUP_EMAIL' ? canFleetEdit.value : action === 'SCHEDULE_PICKUP' ? canPickupAppointmentEdit.value : canEmptyReturnConfirm.value
   return Boolean(isOverseas.value && permission && hasAction(row, action) && drayageFor(row.id)?.allowedActions.includes(action))
 }
 function drayageWarningText(row: ContainerBookingResource) {
@@ -558,9 +557,7 @@ async function saveDrayageAction() {
     const reason = drayageReason.value.trim() || undefined
     const next = drayageAction.value === 'SCHEDULE_PICKUP'
       ? await scheduleTerminalDrayagePickup(row.id, { expectedVersion: current.version, pickupAppointmentAt: drayageActionAt.value, reason })
-      : drayageAction.value === 'RECORD_PICKUP'
-        ? await recordTerminalDrayagePickup(row.id, { expectedVersion: current.version, actualAt: drayageActionAt.value, remark: reason })
-        : await recordTerminalDrayageEmptyReturn(row.id, { expectedVersion: current.version, actualAt: drayageActionAt.value, remark: reason })
+      : await recordTerminalDrayageEmptyReturn(row.id, { expectedVersion: current.version, actualAt: drayageActionAt.value, remark: reason })
     replaceDrayage(next); drayageActionOpen.value = false
     ElMessage.success(`${drayageActionText(drayageAction.value)}成功`)
     await loadRows()
@@ -679,14 +676,14 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
 </script>
 
 <template>
-  <AdminPage as="div">
+  <AdminPage class="admin-density" as="div">
     <section class="container-page">
       <ListPageLayout :ariaLabel="isDomestic ? '送柜报关工作台' : '清关提柜工作台'">
       <template #toolbar>
         <div class="container-query-panel">
-          <div class="container-scope-tabs" role="tablist" aria-label="货柜完结状态">
-            <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'ACTIVE'" :tabindex="scope === 'ACTIVE' ? 0 : -1" :class="['container-scope-tab', { 'is-active': scope === 'ACTIVE' }]" @click="scope = 'ACTIVE'">未完结</button>
-            <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'HISTORY'" :tabindex="scope === 'HISTORY' ? 0 : -1" :class="['container-scope-tab', { 'is-active': scope === 'HISTORY' }]" @click="scope = 'HISTORY'">已完结</button>
+          <div class="container-scope-tabs density-tabs" role="tablist" aria-label="货柜完结状态">
+            <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'ACTIVE'" :tabindex="scope === 'ACTIVE' ? 0 : -1" :class="['container-scope-tab', { active: scope === 'ACTIVE' }]" @click="scope = 'ACTIVE'">未完结</button>
+            <button type="button" role="tab" aria-controls="container-workbench-results" :aria-selected="scope === 'HISTORY'" :tabindex="scope === 'HISTORY' ? 0 : -1" :class="['container-scope-tab', { active: scope === 'HISTORY' }]" @click="scope = 'HISTORY'">已完结</button>
           </div>
           <QueryToolbar v-model="filters" class="container-query-toolbar" ariaLabel="货柜筛选" :fields="queryFields" preference-key="container-loading-query" @search="search" />
         </div>
@@ -696,8 +693,8 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
       </template>
         <section v-if="!loadError" id="container-workbench-results" class="surface-panel table-panel">
           <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" stripe preference-key="container-loading-table" empty-text="暂无货柜">
-            <template #toolbar-actions><ContainerSimulationCreate v-if="isDomestic && canCreate" :load-warehouse-options="loadSimulationWarehouses" @created="loadRows" /></template>
-            <template #actions="{ row }"><div class="row-actions"><el-button v-if="canView" size="small" type="primary" plain :aria-label="containerViewLabel(row as ContainerBookingResource)" @click="openDetail(row)"><Eye :size="15" />查看</el-button><template v-if="isDomestic"><el-button v-if="canEdit && hasAction(row as ContainerWorkbenchRow, 'EDIT_CONTAINER')" size="small" @click="openEdit(row)"><Pencil :size="15" />编辑</el-button><el-button v-if="row.planStatus === 'EDITING' && canSmartLoading" size="small" type="primary" @click="goContainerProcess(row)"><Sparkles :size="15" />装柜</el-button><el-button v-else-if="row.planStatus === 'LOADING' && canViewPreload" size="small" type="primary" plain @click="goContainerProcess(row)"><ListChecks :size="15" />预装清单</el-button><el-button v-else-if="row.planStatus === 'COMPLETED' && canViewLoadingList" size="small" type="primary" plain @click="goContainerProcess(row)"><ListChecks :size="15" />装柜清单</el-button></template><el-button v-if="canDrayage(row as ContainerWorkbenchRow, 'RECORD_EMPTY_RETURN')" size="small" type="primary" @click="openDrayageAction(row as ContainerBookingResource, 'RECORD_EMPTY_RETURN')">确认还柜</el-button><el-button v-if="canDrayage(row as ContainerWorkbenchRow, 'SEND_PICKUP_EMAIL')" size="small" type="primary" :loading="drayageSavingIds.includes(row.id)" @click="sendPickupEmail(row as ContainerWorkbenchRow)"><Mail :size="15" />发送邮件</el-button><el-dropdown v-if="canView" trigger="click" @command="handleMoreAction($event, row)"><el-button size="small" plain aria-label="更多货柜操作" title="更多货柜操作"><MoreHorizontal :size="16" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="overview"><FileText :size="15" />轨迹与日志</el-dropdown-item><template v-if="isOverseas"><el-dropdown-item command="email-history"><Mail :size="15" />邮件记录</el-dropdown-item><el-dropdown-item command="drayage-history"><FileText :size="15" />码头拖车记录</el-dropdown-item><el-dropdown-item v-if="canDrayage(row as ContainerWorkbenchRow, 'SCHEDULE_PICKUP')" command="drayage:SCHEDULE_PICKUP">预约提柜</el-dropdown-item><el-dropdown-item v-if="canDrayage(row as ContainerWorkbenchRow, 'RECORD_PICKUP')" command="drayage:RECORD_PICKUP">确认实际提柜</el-dropdown-item><el-dropdown-item v-if="canOverseasDocumentEdit && hasAction(row as ContainerWorkbenchRow, 'MANAGE_DESTINATION_DOCUMENTS')" command="documents"><FileUp :size="15" />清关 / DO / PU</el-dropdown-item></template><el-dropdown-item v-if="isDomestic && canEdit && hasAction(row as ContainerWorkbenchRow, 'EDIT_CONTAINER') && row.sourceType === 'SIMULATION' && !row.oceanBookingId" command="link"><Link2 :size="15" />关联已放舱订舱</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
+            <template #toolbar-actions><ContainerSimulationCreate dense v-if="isDomestic && canCreate" :load-warehouse-options="loadSimulationWarehouses" @created="loadRows" /></template>
+            <template #actions="{ row }"><div class="row-actions density-actions"><el-button class="density-action" v-if="canView" size="small" type="primary" plain :aria-label="containerViewLabel(row as ContainerBookingResource)" @click="openDetail(row)">查看</el-button><template v-if="isDomestic"><el-button class="density-action" v-if="canEdit && hasAction(row as ContainerWorkbenchRow, 'EDIT_CONTAINER')" size="small" @click="openEdit(row)">编辑</el-button><el-button data-tone="primary" class="density-action" v-if="row.planStatus === 'EDITING' && canSmartLoading" size="small" type="primary" @click="goContainerProcess(row)">装柜</el-button><el-button class="density-action" v-else-if="row.planStatus === 'LOADING' && canViewPreload" size="small" type="primary" plain @click="goContainerProcess(row)">预装清单</el-button><el-button class="density-action" v-else-if="row.planStatus === 'COMPLETED' && canViewLoadingList" size="small" type="primary" plain @click="goContainerProcess(row)">装柜清单</el-button></template><el-button data-tone="primary" class="density-action" v-if="canDrayage(row as ContainerWorkbenchRow, 'RECORD_EMPTY_RETURN')" size="small" type="primary" @click="openDrayageAction(row as ContainerBookingResource, 'RECORD_EMPTY_RETURN')">确认还柜</el-button><el-button data-tone="primary" class="density-action" v-if="canDrayage(row as ContainerWorkbenchRow, 'SEND_PICKUP_EMAIL')" size="small" type="primary" :loading="drayageSavingIds.includes(row.id)" @click="sendPickupEmail(row as ContainerWorkbenchRow)">发送邮件</el-button><el-dropdown v-if="canView" trigger="click" @command="handleMoreAction($event, row)"><el-button class="density-action" size="small" plain aria-label="更多货柜操作" title="更多货柜操作"><MoreHorizontal :size="16" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="overview">轨迹与日志</el-dropdown-item><template v-if="isOverseas"><el-dropdown-item command="email-history">邮件记录</el-dropdown-item><el-dropdown-item command="drayage-history">码头拖车记录</el-dropdown-item><el-dropdown-item v-if="canDrayage(row as ContainerWorkbenchRow, 'SCHEDULE_PICKUP')" command="drayage:SCHEDULE_PICKUP">预约提柜</el-dropdown-item><el-dropdown-item v-if="canOverseasDocumentEdit && hasAction(row as ContainerWorkbenchRow, 'MANAGE_DESTINATION_DOCUMENTS')" command="documents">清关 / DO / PU</el-dropdown-item></template><el-dropdown-item v-if="isDomestic && canEdit && hasAction(row as ContainerWorkbenchRow, 'EDIT_CONTAINER') && row.sourceType === 'SIMULATION' && !row.oceanBookingId" command="link">关联已放舱订舱</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
             <template #emptyReturnWarning="{ row }"><el-tag :type="drayageWarningType(row as ContainerBookingResource)" effect="light" :title="drayageWarningTitle(row as ContainerBookingResource)">{{ drayageWarningText(row as ContainerBookingResource) }}</el-tag></template>
             <template #cabinet="{ row }"><strong>{{ row.cabinetNo }}</strong><small>系统生成</small></template>
             <template #oceanBooking="{ row }"><span v-if="row.oceanBookingId"><strong>{{ row.billOfLadingNo || '已关联订舱' }}</strong><small>{{ row.containerNo ? `集装箱号：${row.containerNo}` : '集装箱号：待补录' }}</small></span><span v-else>未关联</span></template>
@@ -722,11 +719,11 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
 
     <OceanBookingLinkDialog v-model="linkOpen" :container="linkTarget" @linked="loadRows" />
 
-    <AppDialog v-model="editorOpen" class="container-editor-dialog" :title="editorTitle" width="min(820px, calc(100vw - 28px))" :confirm-loading="saving" :confirm-disabled="Boolean(warehouseError)" confirm-text="确定" cancel-text="关闭" @confirm="save">
+    <AppDialog v-model="editorOpen" class="container-editor-dialog admin-density-dialog" :title="editorTitle" width="min(820px, calc(100vw - 28px))" :confirm-loading="saving" :confirm-disabled="Boolean(warehouseError)" confirm-text="确定" cancel-text="关闭" @confirm="save">
       <LoadErrorState v-if="editorError" title="货柜保存失败" :message="editorError.message" compact :retry-text="form.id ? '刷新最新数据' : '重试保存'" @retry="form.id ? openEdit({ id: form.id }) : save()"><template #details><ApiErrorMeta :details="editorError" /></template></LoadErrorState>
       <LoadErrorState v-if="warehouseError" title="装柜仓库加载失败" :message="warehouseError.message" compact @retry="loadWarehouses"><template #details><ApiErrorMeta :details="warehouseError" /></template></LoadErrorState>
       <el-alert v-if="businessOptionsError" type="warning" :closable="false" show-icon :title="businessOptionsError"><el-button link type="warning" :loading="businessOptionsLoading" @click="loadBusinessOptions">重新加载业务选项</el-button></el-alert>
-      <el-form v-if="!warehouseError" ref="formRef" :model="form" :rules="rules" label-position="top" class="form-grid">
+      <el-form v-if="!warehouseError" ref="formRef" :model="form" :rules="rules" label-position="top" class="form-grid density-form">
         <el-form-item label="真实集装箱号"><el-input :model-value="form.containerNo || '待补录'" disabled /><small>货柜基础资料不提供柜号写入；请在拖车提柜或预装详情中补录，后续纠错也在预装详情完成。</small></el-form-item>
         <el-form-item label="柜次号"><el-input :model-value="form.cabinetNo" disabled placeholder="系统生成" /></el-form-item>
         <el-form-item label="装柜仓库" prop="warehouseId"><el-select v-model="form.warehouseId" filterable placeholder="请选择装柜仓库" :loading="warehouseLoading" loading-text="仓库加载中" no-data-text="暂无可用国内仓库"><el-option v-for="warehouse in warehouses" :key="String(warehouse.id)" :label="`${warehouse.warehouseName}（${warehouse.warehouseCode}）`" :value="String(warehouse.id)" /></el-select></el-form-item>
@@ -747,22 +744,22 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
       </el-form>
     </AppDialog>
 
-    <AppDialog v-model="drayageActionOpen" :title="drayageActionText(drayageAction)" width="min(520px, calc(100vw - 28px))" :confirm-text="drayageActionText(drayageAction)" cancel-text="取消" :confirm-loading="drayageActionSaving" :confirm-disabled="!drayageActionAt" @confirm="saveDrayageAction">
-      <el-form label-position="top"><el-form-item :label="drayageAction === 'SCHEDULE_PICKUP' ? '预约提柜时间' : drayageAction === 'RECORD_PICKUP' ? '实际提柜时间' : '实际还柜时间'" required><el-date-picker v-model="drayageActionAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择时间" /></el-form-item><el-form-item label="原因/备注"><el-input v-model="drayageReason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="选填" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="drayageActionOpen" :title="drayageActionText(drayageAction)" width="min(520px, calc(100vw - 28px))" :confirm-text="drayageActionText(drayageAction)" cancel-text="取消" :confirm-loading="drayageActionSaving" :confirm-disabled="!drayageActionAt" @confirm="saveDrayageAction">
+      <el-form class="density-form" label-position="top"><el-form-item :label="drayageAction === 'SCHEDULE_PICKUP' ? '预约提柜时间' : '实际还柜时间'" required><el-date-picker v-model="drayageActionAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择时间" /></el-form-item><el-form-item label="原因/备注"><el-input v-model="drayageReason" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="选填" /></el-form-item></el-form>
       <LoadErrorState v-if="drayageActionError" compact :title="`${drayageActionText(drayageAction)}失败`" :message="drayageActionError.message" :show-retry="false"><template #details><ApiErrorMeta :details="drayageActionError" /></template></LoadErrorState>
     </AppDialog>
 
-    <AppDialog v-model="emailHistoryOpen" title="车队邮件记录" width="min(1100px, calc(100vw - 28px))" :show-footer="false">
+    <AppDialog class="admin-density-dialog" v-model="emailHistoryOpen" title="车队邮件记录" width="min(1100px, calc(100vw - 28px))" :show-footer="false">
       <p>集装箱号：{{ emailTarget?.containerNo || '—' }} · 显示最近 100 封邮件</p>
       <el-alert v-if="!emailsLoading && !emailsError && !emailDeliveryEnabled" title="发信尚未启用，邮件保留在待发送队列中" type="warning" :closable="false" />
       <LoadErrorState v-if="emailsError" compact title="邮件记录加载失败" :message="emailsError.message" @retry="emailTarget && openEmailHistory(emailTarget)"><template #details><ApiErrorMeta :details="emailsError" /></template></LoadErrorState>
       <DataTable v-else :data="emails" :columns="emailColumns" :loading="emailsLoading" column-settings-mode="hide" empty-text="暂无邮件记录">
         <template #toolbar-actions><el-button :loading="emailsLoading" @click="emailTarget && openEmailHistory(emailTarget)">刷新记录</el-button></template>
-        <template #emailActions="{ row }"><el-button v-if="canFleetEdit && row.status === 'FAILED'" size="small" :loading="retryingEmail === row.id" :disabled="Boolean(retryingEmail)" @click="retryEmail(row as TerminalDrayageEmail)">重试</el-button><span v-else>—</span></template>
+        <template #emailActions="{ row }"><el-button class="density-action" v-if="canFleetEdit && row.status === 'FAILED'" size="small" :loading="retryingEmail === row.id" :disabled="Boolean(retryingEmail)" @click="retryEmail(row as TerminalDrayageEmail)">重试</el-button><span v-else>—</span></template>
         <template #emailContent="{ row }"><details><summary>{{ row.subject }}</summary><p style="white-space: pre-wrap">{{ row.body }}</p></details></template>
       </DataTable>
     </AppDialog>
-    <AppDialog v-model="drayageHistoryOpen" title="码头拖车记录" width="min(980px, calc(100vw - 28px))" :show-footer="false">
+    <AppDialog class="admin-density-dialog" v-model="drayageHistoryOpen" title="码头拖车记录" width="min(980px, calc(100vw - 28px))" :show-footer="false">
       <LoadErrorState v-if="drayageHistoryError" compact title="码头拖车记录加载失败" :message="drayageHistoryError.message" :loading="drayageHistoryLoading" @retry="drayageTarget && openDrayageHistory(drayageTarget)"><template #details><ApiErrorMeta :details="drayageHistoryError" /></template></LoadErrorState>
       <template v-else><el-descriptions v-if="drayageTarget && drayageFor(drayageTarget.id)" :column="4" border class="drayage-summary"><el-descriptions-item label="当前状态">{{ drayageStatusText(drayageFor(drayageTarget.id)?.status) }}</el-descriptions-item><el-descriptions-item label="码头车队">{{ drayageFor(drayageTarget.id)?.fleetSupplierName || '—' }}</el-descriptions-item><el-descriptions-item label="预计还柜">{{ formatTime(drayageFor(drayageTarget.id)?.estimatedEmptyReturnAt) }}</el-descriptions-item><el-descriptions-item label="实际还柜">{{ formatTime(drayageFor(drayageTarget.id)?.actualEmptyReturnAt) }}</el-descriptions-item></el-descriptions><DataTable :data="drayageHistory" :columns="drayageHistoryColumns" :loading="drayageHistoryLoading" stripe column-settings-mode="hide" empty-text="暂无码头拖车操作记录" /></template>
     </AppDialog>
@@ -771,11 +768,7 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
 </template>
 
 <style scoped>
-.container-page { display: grid; gap: 16px; min-width: 0; }.container-page small { display: block; margin-top: 4px; color: var(--cc-muted); }.container-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }.container-scope-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid #e5e7eb; background: #f9fafb; scrollbar-width: thin; }.container-scope-tab { position: relative; flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--cc-muted); font: inherit; font-size: 14px; cursor: pointer; }.container-scope-tab::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; background: transparent; content: ''; }.container-scope-tab:hover { color: var(--cc-primary); background: #f6f9fd; }.container-scope-tab:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }.container-scope-tab.is-active { color: var(--cc-primary); font-weight: 600; }.container-scope-tab.is-active::after { background: var(--cc-primary); }.container-query-toolbar { border: 0; }.row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.form-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }.form-grid :deep(.el-select),.form-grid :deep(.el-date-editor),.form-grid :deep(.el-input-number),.simulation-form :deep(.el-select),.simulation-form :deep(.el-input-number),.fleet-select { width: 100%; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: 12px; }.drayage-summary { margin-bottom: 14px; }
-:global(.container-editor-dialog.el-dialog) { display: flex; width: min(820px, calc(100vw - 28px)) !important; max-height: 90vh; margin-block: 5vh !important; overflow: hidden; flex-direction: column; border-radius: 12px; }
-:global(.container-editor-dialog .el-dialog__header) { flex: 0 0 auto; margin: 0; padding: 20px 28px; border-bottom: 1px solid #e5eaf1; }
-:global(.container-editor-dialog .el-dialog__title) { color: #1e293b; font-size: 18px; font-weight: 700; }
-:global(.container-editor-dialog .el-dialog__body) { min-height: 0; padding: 28px; overflow-y: auto; }
-:global(.container-editor-dialog .el-dialog__footer) { flex: 0 0 auto; padding: 16px 28px; border-top: 1px solid #e5eaf1; background: #f8fafc; }
-@media(max-width:720px){.container-scope-tab{min-height:46px;padding:0 14px}:global(.container-editor-dialog.el-dialog){max-height:calc(100vh - 20px);margin-block:10px!important}:global(.container-editor-dialog .el-dialog__header),:global(.container-editor-dialog .el-dialog__body),:global(.container-editor-dialog .el-dialog__footer){padding-inline:16px}.details :deep(.el-descriptions__body table),.details :deep(tbody),.details :deep(tr),.details :deep(td){display:block;width:100%!important}.row-actions { min-width: 180px; }}
+.container-page { display: grid; gap: var(--admin-space-5); min-width: 0; }.container-page small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }.container-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }.container-scope-tabs { display: flex; max-width: 100%; overflow-x: auto; margin-bottom: 0; border-bottom: 1px solid #e5e7eb; scrollbar-width: thin; }.container-query-toolbar { border: 0; }.row-actions { flex-wrap: nowrap; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); }.form-grid :deep(.el-select),.form-grid :deep(.el-date-editor),.form-grid :deep(.el-input-number),.simulation-form :deep(.el-select),.simulation-form :deep(.el-input-number),.fleet-select { width: 100%; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: var(--admin-space-5); }.drayage-summary { margin-bottom: var(--admin-space-5); }
+@media(max-width:720px){.details :deep(.el-descriptions__body table),.details :deep(tbody),.details :deep(tr),.details :deep(td){display:block;width:100%!important}.row-actions { min-width: 180px; }}
+@media(max-width:720px){.form-grid{grid-template-columns:1fr}}
 </style>

src/modules/container-loading/pages/GlobalSmartLoadingView.test.ts

@@ -65,10 +65,10 @@ vi.mock('../smartLoadingPlanGroups', () => ({ loadSmartLoadingPlanCoLoadGroups:
 
 const container = {
   id: '9007199254740993', planId: '9007199254740994', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1',
-  warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: 'ZBYHK', channelName: '美森正班海卡包税', containerType: '40HC', planStatus: 'EDITING' as const, version: 1,
+  warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: 'ZBYHK', channelName: '美森正班海卡包税', containerType: '40HQ', planStatus: 'EDITING' as const, version: 1,
   billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: '31', shippingCompanyName: '美森轮船',
   departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null,
-  destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', capacityCbm: 76, maxWeightKg: 28000,
+  destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', capacityCbm: 68, maxWeightKg: 19500,
   terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null,
   estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
 }
@@ -205,14 +205,14 @@ describe('GlobalSmartLoadingView', () => {
         containerNo: null,
         channelName: '美森正班海卡包税',
         warehouseName: '义乌国内仓',
-        containerType: '40HC',
+        containerType: '40HQ',
       }],
       page: 1,
       size: 100,
       total: 1,
       pages: 1,
     })
-    mockContainerSearch([{ ...container, cabinetNo: '2088475410134773762', containerNo: null, channelName: '美森正班海卡包税', warehouseName: '义乌国内仓', containerType: '40HC' }])
+    mockContainerSearch([{ ...container, cabinetNo: '2088475410134773762', containerNo: null, channelName: '美森正班海卡包税', warehouseName: '义乌国内仓', containerType: '40HQ' }])
     const wrapper = mount(GlobalSmartLoadingView, { global: { plugins: [ElementPlus] } })
     await flushPromises()
 
@@ -223,7 +223,7 @@ describe('GlobalSmartLoadingView', () => {
     expect(option.text()).not.toContain('开始装柜前录入集装箱号')
     expect(option.text()).toContain('渠道：美森正班')
     expect(option.text()).toContain('仓库：义乌国内仓')
-    expect(option.text()).toContain('柜型：40HC')
+    expect(option.text()).toContain('柜型：40HQ')
     expect(option.text()).not.toContain('2088475410134773762')
     expect(wrapper.text()).not.toContain('真实柜号')
   })
@@ -760,8 +760,8 @@ describe('GlobalSmartLoadingView', () => {
     await button!.trigger('click')
     await flushPromises()
 
-    expect(recommendSmartLoading).toHaveBeenCalledWith(plan.id, 2)
-    expect(recommendSmartLoading).toHaveBeenCalledWith(plan.id, 3)
+    expect(recommendSmartLoading).toHaveBeenCalledWith(plan.id, 2, { customerId: '', inboundCode: '' })
+    expect(recommendSmartLoading).toHaveBeenCalledWith(plan.id, 3, { customerId: '', inboundCode: '' })
     expect(getSmartLoadingPlanByBooking).toHaveBeenCalledTimes(2)
     expect(warningMessage).not.toHaveBeenCalled()
     expect(wrapper.text()).not.toContain('装柜操作失败')

src/modules/container-loading/pages/GlobalSmartLoadingView.vue

@@ -549,15 +549,19 @@ function candidateBlocked(candidate: SmartLoadingCandidateRow) {
 }
 async function recommend() {
   if (!plan.value) return
+  const scope = {
+    customerId: String(appliedQuery.value.customerId || ''),
+    inboundCode: String(appliedQuery.value.inboundCode || '').trim(),
+  }
   await mutate(async () => {
     try {
-      acceptPlan(await recommendSmartLoading(plan.value!.id, plan.value!.version))
+      acceptPlan(await recommendSmartLoading(plan.value!.id, plan.value!.version, scope))
     } catch (error) {
       const details = getApiErrorDetails(error, '智能推荐失败')
       if (details.code !== 'A0409' || !/(版本|并发|已被修改|已变化)/.test(details.message)) throw error
       await loadSelectedPlan()
       if (!plan.value) throw error
-      acceptPlan(await recommendSmartLoading(plan.value.id, plan.value.version))
+      acceptPlan(await recommendSmartLoading(plan.value.id, plan.value.version, scope))
     }
     await loadCandidateData()
     ElMessage.success('智能推荐已生成')

src/modules/container-loading/pages/SmartLoadingWorkbenchView.test.ts

@@ -19,10 +19,10 @@ vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({
 
 const container = {
   id: '9007199254740993', planId: '9007199254740994', bookingNo: 'BK-1', cabinetNo: 'CB-1', containerNo: 'MSCU-1',
-  warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HC', planStatus: 'EDITING' as const, version: 1,
+  warehouseId: '8', warehouseName: '义乌仓', channelGroupCode: 'MATSON_CLX', channelCode: null, channelName: null, containerType: '40HQ', planStatus: 'EDITING' as const, version: 1,
   billOfLadingNo: null, vesselName: null, voyageNo: null, shippingCompanyId: null, shippingCompanyName: null,
   departurePortCode: null, departurePortName: null, destinationPortCode: null, destinationPortName: null,
-  destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', capacityCbm: 76, maxWeightKg: 28000,
+  destinationWarehouseCode: 'LAX9', destinationWarehouseName: 'LAX9', capacityCbm: 68, maxWeightKg: 19500,
   terminalTruckingCompanyId: null, terminalTruckingCompany: null, loadingAt: null, estimatedSailingAt: null, actualSailingAt: null,
   estimatedPortArrivalAt: null, actualPortArrivalAt: null, estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null,
 }

src/modules/container-loading/pages/SmartLoadingWorkbenchView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, ListChecks, Pencil, Plus, RefreshCw, Sparkles, Trash2 } from '@lucide/vue'
+import { ArrowLeft, ListChecks, RefreshCw, Sparkles } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import AdminPage from '@/shared/components/AdminPage.vue'
@@ -302,7 +303,7 @@ async function remove(source: object) {
   const message = row.coLoadGroup
     ? `确认整组移除 ${row.coLoadGroup.groupNo}（${groupMemberLabel(row.coLoadGroup)}、${row.packageCount} 箱）吗？组内所有入仓片段将联动移除。`
     : `确认从计划移除入仓码“${item.inboundCode || '—'}”的 ${item.packageCount} 箱吗？`
-  await ElMessageBox.confirm(message, row.coLoadGroup ? '移除同柜不可拆组' : '移除装柜明细', { type: 'warning', confirmButtonText: row.coLoadGroup ? '移除整组' : '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
+  await ElMessageBox.confirm(message, row.coLoadGroup ? '移除同柜不可拆组' : '移除装柜明细', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: row.coLoadGroup ? '移除整组' : '移除', cancelButtonText: '取消' }).catch(() => false).then(async (confirmed) => {
     if (!confirmed || !plan.value) return
     mutating.value = true
     mutationError.value = null
@@ -345,7 +346,7 @@ onMounted(load)
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-density">
   <section class="business-page workbench">
     <section class="surface-panel workbench-command-bar" aria-label="装柜作业摘要">
       <div class="workbench-identities">
@@ -359,7 +360,7 @@ onMounted(load)
         </div>
       </div>
       <div class="header-actions">
-        <el-button text aria-label="返回货柜列表" @click="router.back()"><ArrowLeft :size="18" />返回</el-button>
+        <el-button link class="density-back" aria-label="返回货柜列表" @click="router.back()"><ArrowLeft :size="18" />返回</el-button>
         <el-tooltip content="刷新" placement="top"><el-button :loading="loading" aria-label="刷新智能装柜" @click="load"><RefreshCw :size="16" /></el-button></el-tooltip>
         <el-button v-if="canAssign && assignable && plan?.status === 'EDITING'" type="primary" plain :loading="mutating" @click="recommend"><Sparkles :size="16" />智能推荐</el-button>
       </div>
@@ -382,17 +383,17 @@ onMounted(load)
         <el-alert v-else-if="!plan.canEdit" :type="plan.finalCompletionStatus === 'COMPLETED' ? 'success' : 'info'" :closable="false" show-icon :title="plan.finalCompletionStatus === 'IN_PROGRESS' ? '正在最终确认，装柜方案暂时只读' : plan.finalCompletionStatus === 'COMPLETED' ? '装柜已完成，方案永久只读' : '当前装柜方案只读'" :description="plan.blockedReason || '请刷新计划获取最新作业状态。'" />
         <DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="loading || mutating" stripe preference-key="smart-loading-items" column-settings-mode="hide" empty-text="暂无已分配货物">
           <template #toolbar-start><div><h2>{{ displayContainerNo(container) }} 装柜方案</h2><p>智能建议必须经人工核对。</p></div></template>
-          <template #actions="{ row }"><div class="row-actions"><el-button v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
+          <template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="danger" class="density-action" v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain @click="remove(row)">删除</el-button></div></template>
           <template #order="{ row }"><strong>{{ row.inboundCode || '—' }}</strong></template>
           <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
           <template #coLoadGroup="{ row }"><div v-if="row.coLoadGroup" class="candidate-group"><el-tag size="small" type="warning"><LineClampText :content="`${row.coLoadGroup.groupNo} · ${groupMemberLabel(row.coLoadGroup)}`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`全部入仓片段联动，固定 ${row.coLoadGroup.fullPackageCount} 箱`" /></div><LineClampText v-else :content="row.unitType === 'SEALED_PALLET' ? '封托不可拆' : '普通单票'" /></template>
           <template #goods="{ row }"><div class="goods-cell"><LineClampText :content="row.productNameZh || '未命名货物'" /><LineClampText class="goods-cell__sku" :content="row.skuCode || '无 SKU'" /></div></template>
-          <template #packageCount="{ row }"><LineClampText v-if="row.unitType === 'SEALED_PALLET'" :content="`${row.packageCount} 箱（整托固定）`" /><LineClampText v-else-if="row.coLoadGroup" :content="`${row.packageCount} 箱（整组固定）`" /><div v-else class="package-count-editor"><el-input-number v-if="editingQuantityId === row.id" v-model="quantityDrafts[row.id]" :min="row.minPackageCount" :max="adjustmentMax(row)" :step="1" :controls="false" :disabled="mutating" placeholder="请输入使用箱数" @blur="adjust(row)" @keyup.enter="adjust(row)" /><div v-else class="package-count-summary"><div class="package-count-used"><strong>使用：{{ row.packageCount }}</strong><el-button v-if="canAssign && editable && row.canAdjust" link circle :disabled="mutating" aria-label="调整箱数" @click="startQuantityEdit(row)"><Pencil :size="14" /></el-button></div><small v-if="(row.remainingPackageCount ?? 0) > 0">未用：{{ row.remainingPackageCount }}</small></div><LineClampText v-if="row.detailCount > 1 && editable" :content="`含 ${row.detailCount} 个规格，需删除后重加`" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>
+          <template #packageCount="{ row }"><LineClampText v-if="row.unitType === 'SEALED_PALLET'" :content="`${row.packageCount} 箱（整托固定）`" /><LineClampText v-else-if="row.coLoadGroup" :content="`${row.packageCount} 箱（整组固定）`" /><div v-else class="package-count-editor"><el-input-number v-if="editingQuantityId === row.id" v-model="quantityDrafts[row.id]" :min="row.minPackageCount" :max="adjustmentMax(row)" :step="1" :controls="false" :disabled="mutating" placeholder="请输入使用箱数" @blur="adjust(row)" @keyup.enter="adjust(row)" /><div v-else class="package-count-summary"><div class="package-count-used"><strong>使用：{{ row.packageCount }}</strong><el-button v-if="canAssign && editable && row.canAdjust" class="density-action" :disabled="mutating" aria-label="调整箱数" @click="startQuantityEdit(row)">调整</el-button></div><small v-if="(row.remainingPackageCount ?? 0) > 0">未用：{{ row.remainingPackageCount }}</small></div><LineClampText v-if="row.detailCount > 1 && editable" :content="`含 ${row.detailCount} 个规格，需删除后重加`" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>
           <template #volume="{ row }">{{ formatNumber(Number(row.volumeCbm || 0)) }} m³</template><template #weight="{ row }">{{ formatNumber(Number(row.grossWeightKg || 0),1) }} kg</template>
         </DataTable>
         <DataTable :data="displayedCandidates" :columns="candidateColumns" :loading="loading || mutating" stripe preference-key="smart-loading-candidates" column-settings-mode="hide" empty-text="当前仓库暂无可装柜货物">
           <template #toolbar-start><div><h2>候选货物</h2><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></div></template>
-          <template #actions="{ row }"><el-button v-if="canAssign && assignable" size="small" type="primary" plain :disabled="candidateBlocked(row as SmartLoadingCandidateRow)" @click="openAssign(row)"><Plus :size="15" />{{ row.unitType === 'SEALED_PALLET' ? '整托分配' : row.coLoadGroupId ? '整组分配' : '分配' }}</el-button></template>
+          <template #actions="{ row }"><el-button data-tone="primary" class="density-action" v-if="canAssign && assignable" size="small" type="primary" plain :disabled="candidateBlocked(row as SmartLoadingCandidateRow)" @click="openAssign(row)">{{ row.unitType === 'SEALED_PALLET' ? '整托分配' : row.coLoadGroupId ? '整组分配' : '分配' }}</el-button></template>
           <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
           <template #goodsSummary="{ row }"><LineClampText :content="row.goodsSummary || '—'" /></template>
           <template #coLoadGroup="{ row }"><div v-if="row.coLoadGroupId" class="candidate-group"><el-tag size="small" type="warning"><LineClampText :content="`${row.groupNo} · ${row.memberOrderCount} 票 · ${row.inboundFragmentCount} 个入仓片段`" /></el-tag><LineClampText :content="row.memberOrderSummaries.join('；')" /><LineClampText :content="`整组 ${row.groupTotalBoxes} 箱，必须全量进入同一柜`" /><LineClampText v-if="row.blockReason" class="candidate-block" :content="row.blockReason" /><LineClampText v-else-if="row.locked" content="该组已锁定，不能重复分配" /></div><LineClampText v-else :content="row.unitType === 'SEALED_PALLET' ? '封托不可拆' : '普通单票'" /></template>
@@ -403,46 +404,47 @@ onMounted(load)
       </template>
       </template>
     </template>
-    <AppDialog v-model="assignOpen" :title="selectedCandidate?.unitType === 'SEALED_PALLET' ? '整托加入当前柜次' : selectedCandidate?.coLoadGroupId ? '整组加入当前柜次' : '按入仓码分配箱数'" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign"><div v-if="selectedCandidate" class="assign-dialog"><p><strong>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</strong></p><template v-if="selectedCandidate.coLoadGroupId"><p>组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</p><p v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary">{{ summary }}</p><el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" /></template><template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><p>托盘号 {{ selectedCandidate.palletNo || '—' }} · 入仓码 {{ selectedCandidate.inboundCode || '—' }} · {{ selectedCandidate.availablePackageCount }} 箱</p><el-alert title="该封托托盘将作为一个不可拆分单元整托加入；装柜阶段复用此托盘，不会重新生成工作托盘。" type="warning" :closable="false" /></template><template v-else><p>{{ selectedCandidate.goodsSummary || '货物摘要暂缺' }} · 可用 {{ selectedCandidate.availablePackageCount }} 箱</p><el-form label-position="top"><el-form-item label="本次计划装柜箱数" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></el-form><el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" /><small>只记录数量，具体上柜箱号未核验。</small></template></div></AppDialog>
+    <AppDialog class="admin-density-dialog" v-model="assignOpen" :title="selectedCandidate?.unitType === 'SEALED_PALLET' ? '整托加入当前柜次' : selectedCandidate?.coLoadGroupId ? '整组加入当前柜次' : '按入仓码分配箱数'" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign"><div v-if="selectedCandidate" class="assign-dialog"><p><strong>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</strong></p><template v-if="selectedCandidate.coLoadGroupId"><p>组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</p><p v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary">{{ summary }}</p><el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" /></template><template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><p>托盘号 {{ selectedCandidate.palletNo || '—' }} · 入仓码 {{ selectedCandidate.inboundCode || '—' }} · {{ selectedCandidate.availablePackageCount }} 箱</p><el-alert title="该封托托盘将作为一个不可拆分单元整托加入；装柜阶段复用此托盘，不会重新生成工作托盘。" type="warning" :closable="false" /></template><template v-else><p>{{ selectedCandidate.goodsSummary || '货物摘要暂缺' }} · 可用 {{ selectedCandidate.availablePackageCount }} 箱</p><el-form class="density-form" label-position="top"><el-form-item label="本次计划装柜箱数" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></el-form><el-alert :title="explainCandidate(selectedCandidate)" type="info" :closable="false" /><small>只记录数量，具体上柜箱号未核验。</small></template></div></AppDialog>
   </section>
   </AdminPage>
 </template>
 
 <style scoped>
-.workbench { display: grid; gap: 16px; min-width: 0; }
+.workbench { display: grid; gap: var(--admin-space-5); min-width: 0; }
 .workbench-command-bar,.header-actions,.row-actions,.meter-title { display: flex; align-items: center; }
-.workbench-command-bar { justify-content: space-between; gap: 16px; padding: 14px 16px; }
-.workbench-identities { display: flex; min-width: 0; align-items: center; gap: 32px; }
+.workbench-command-bar { justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-5) var(--admin-space-5); }
+.workbench-identities { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-7); }
 .workbench-identity { display: grid; min-width: 0; gap: 3px; }
-.workbench-identity span { color: var(--cc-muted); font-size: 11px; }
-.workbench-identity strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
+.workbench-identity span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.workbench-identity strong { font-size: var(--admin-font-title); overflow-wrap: anywhere; }
 .workbench h2,.workbench h2 + p { margin: 0; }
-.workbench h2 + p,.workbench small { display: block; margin-top: 4px; color: var(--cc-muted); }
-.header-actions,.row-actions { flex-wrap: wrap; gap: 8px; }
+.workbench h2 { font-size: var(--admin-font-section); }
+.workbench h2 + p,.workbench small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }
+.header-actions,.row-actions { flex-wrap: wrap; gap: var(--admin-space-3); }
 .header-actions :deep(.el-button + .el-button),.row-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .summary-band { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid var(--cc-border); background: var(--cc-border); }
-.summary-band>div { display: grid; gap: 5px; padding: 14px; background: #fff; }
-.summary-band span { color: var(--cc-muted); font-size: 12px; }
-.capacity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
-.readonly-status-card { display: grid; justify-items: start; gap: 10px; padding: 24px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
-.readonly-status-card strong { font-size: 16px; }
+.summary-band>div { display: grid; gap: 5px; padding: var(--admin-space-5); background: var(--admin-surface); }
+.summary-band span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.capacity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--admin-space-5); padding: var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
+.readonly-status-card { display: grid; justify-items: start; gap: var(--admin-space-4); padding: var(--admin-space-6); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
+.readonly-status-card strong { font-size: var(--admin-font-section); }
 .readonly-status-card p { margin: 0; color: var(--cc-muted); }
-.meter-title { justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; }
+.meter-title { justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-4); font-size: var(--admin-font-body); }
 .row-actions { min-width: 150px; }
 .goods-cell { display: grid; min-width: 0; gap: 2px; }
 .goods-cell :deep(.line-clamp-text) { width: 100%; font-weight: 600; }
-.goods-cell :deep(.goods-cell__sku.line-clamp-text) { color: var(--cc-muted); font-size: 12px; font-weight: 400; }
-.package-count-editor { display: grid; min-width: 0; gap: 4px; }
+.goods-cell :deep(.goods-cell__sku.line-clamp-text) { color: var(--cc-muted); font-size: var(--admin-font-caption); font-weight: 400; }
+.package-count-editor { display: grid; min-width: 0; gap: var(--admin-space-1); }
 .package-count-summary { display: grid; gap: 3px; line-height: 1.35; }
-.package-count-used { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
-.package-count-summary strong { font-size: 13px; font-weight: 600; }
-.package-count-summary small { color: var(--cc-muted); font-size: 12px; }
+.package-count-used { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-2); }
+.package-count-summary strong { font-size: var(--admin-font-body); font-weight: 600; }
+.package-count-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .workbench :deep(.package-count-editor .el-input-number) { width: 100%; min-width: 0; }
-.assign-dialog p { margin: 0 0 10px; }
+.assign-dialog p { margin: 0 0 var(--admin-space-4); }
 .assign-dialog :deep(.el-input-number) { width: 100%; }
 .candidate-group { display: grid; width: 100%; min-width: 0; gap: 3px; }
 .candidate-group :deep(.el-tag),.candidate-group :deep(.el-tag__content),.candidate-group :deep(.line-clamp-text) { max-width: 100%; min-width: 0; }
-.candidate-group :deep(.line-clamp-text) { width: 100%; color: var(--cc-muted); font-size: 11px; }
+.candidate-group :deep(.line-clamp-text) { width: 100%; color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .candidate-group .candidate-block { color: var(--el-color-danger); }
 @media (max-width: 760px) { .workbench-command-bar,.header-actions { width: 100%; flex-direction: column; align-items: stretch; } .workbench-identities { flex-direction: column; align-items: stretch; gap: 10px; } .summary-band,.capacity-grid { grid-template-columns: 1fr; } .meter-title { align-items: flex-start; flex-direction: column; } .header-actions .el-button { min-height: 44px; margin-left: 0; } }
 </style>

src/modules/container-loading/types.ts

@@ -208,7 +208,7 @@ export interface ContainerQuery {
 
 export type ContainerWorkbenchKind = 'DOMESTIC' | 'OVERSEAS'
 export type ContainerWorkbenchScope = 'ACTIVE' | 'HISTORY'
-export type ContainerWorkbenchAction = 'EDIT_CONTAINER' | 'MANAGE_CUSTOMS' | 'CONFIRM_OUTBOUND' | 'MANAGE_DESTINATION_DOCUMENTS' | 'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'
+export type ContainerWorkbenchAction = 'EDIT_CONTAINER' | 'MANAGE_CUSTOMS' | 'CONFIRM_OUTBOUND' | 'MANAGE_DESTINATION_DOCUMENTS' | 'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'
 
 export interface ContainerWorkbenchStatusSummary {
   loadingStatus?: string | null
@@ -244,7 +244,7 @@ export interface ContainerWorkbenchTerminalDrayage {
   actualEmptyReturnAt: string | null
   unloadingCompletedAt: string | null
   emptyReturnWarning: { status: 'NOT_APPLICABLE' | 'PENDING' | 'OVERDUE' | 'RESOLVED'; deadlineAt: string | null; overdueHours: number; overdueDays: number }
-  allowedActions: ReadonlyArray<'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'>
+  allowedActions: ReadonlyArray<'SELECT_FLEET' | 'SCHEDULE_PICKUP' | 'RECORD_EMPTY_RETURN' | 'SEND_PICKUP_EMAIL'>
   updatedAt: string | null
 }
 

src/modules/customers/CustomerOverseasStorageFeePanel.vue

@@ -81,15 +81,15 @@ onMounted(load)
     </template>
     <div v-else class="fee-empty">当前客户暂无海外仓费用配置</div>
     <AppDialog class="admin-density-dialog customer-density-dialog" v-model="visible" title="编辑海外仓费用" width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" :show-cancel="false" @confirm="save">
-      <el-form ref="formRef" :model="form" label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option v-for="currency in currencies" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item><div class="edit-groups"><div v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex"><div class="edit-group-heading"><h3>{{ groupIndex === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(groupIndex === 0 ? 'STORAGE' : 'RETURN_STORAGE')">新增阶梯</el-button></div><table><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in group" :key="tier.id"><td><el-button size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(tier)">删除</el-button></td><td><el-input-number v-model="tier.startDay" :min="1" :max="36500" :controls="false" placeholder="请输入开始天数" /></td><td><el-input-number v-if="tier.endDay !== null" v-model="tier.endDay" :min="1" :max="36500" :controls="false" placeholder="请输入结束天数" /><span v-else>以上</span></td><td><el-input-number v-model="tier.unitPrice" :min="0" :precision="6" :controls="false" placeholder="请输入价格" /></td></tr></tbody></table></div></div></el-form>
+      <el-form ref="formRef" :model="form" label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option v-for="currency in currencies" :key="currency" :label="currency" :value="currency" /></el-select></el-form-item><div class="edit-groups"><div v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex"><div class="edit-group-heading"><h3>{{ groupIndex === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button class="density-action" data-tone="primary" type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(groupIndex === 0 ? 'STORAGE' : 'RETURN_STORAGE')">新增阶梯</el-button></div><table><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in group" :key="tier.id"><td><el-button class="density-action" data-tone="danger" size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(tier)">删除</el-button></td><td><el-input-number v-model="tier.startDay" :min="1" :max="36500" :controls="false" placeholder="请输入开始天数" /></td><td><el-input-number v-if="tier.endDay !== null" v-model="tier.endDay" :min="1" :max="36500" :controls="false" placeholder="请输入结束天数" /><span v-else>以上</span></td><td><el-input-number v-model="tier.unitPrice" :min="0" :precision="6" :controls="false" placeholder="请输入价格" /></td></tr></tbody></table></div></div></el-form>
       <template #footer><div class="dialog-actions"><el-button :disabled="saving" @click="closeEditor">取消</el-button><el-button type="primary" :loading="saving" @click="save">保存费用</el-button></div></template>
     </AppDialog>
   </section>
 </template>
 
 <style scoped>
-.overseas-fee-panel { margin-top: 18px; border: 1px solid var(--cc-border); background: #fff; }.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border-bottom:1px solid var(--cc-border); }.panel-heading h2,.fee-groups h3,.edit-groups h3 { margin:0; color:var(--cc-text); font-size:16px; }.panel-heading p { margin:5px 0 0; color:var(--cc-muted); font-size:12px; }.fee-meta { display:flex; flex-wrap:wrap; gap:24px; padding:12px 18px; color:var(--cc-muted); font-size:12px; background:#f8fafc; }.fee-meta strong { color:var(--cc-text); }.fee-groups,.edit-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:18px; }.fee-groups > div,.edit-groups > div { min-width:0; }.fee-groups table,.edit-groups table { width:100%; border-collapse:collapse; font-size:12px; }.edit-groups table { table-layout:fixed; }.fee-groups th,.fee-groups td,.edit-groups th,.edit-groups td { padding:9px 10px; border-bottom:1px solid var(--cc-border); text-align:left; }.fee-groups th,.edit-groups th { color:var(--cc-muted); font-weight:650; }.edit-groups th:first-child,.edit-groups td:first-child { width:76px; }.edit-groups :deep(.el-input-number) { width:100%; min-width:0; }.fee-error { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px; background:#fff4f3; }.fee-error p { margin:5px 0; color:#b42318; font-size:12px; }.fee-loading { min-height:220px; }.fee-empty { min-height:160px; display:grid; place-items:center; color:var(--cc-muted); }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; }.dialog-actions :deep(.el-button + .el-button) { margin-left:0; }
-.edit-group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
+.overseas-fee-panel { border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }.panel-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--cc-border); }.panel-heading h2 { margin:0; color:var(--cc-text); }.fee-groups h3 { margin:0; color:var(--cc-text); }.edit-groups h3 { margin:0; color:var(--cc-text); }.panel-heading p { margin:5px 0 0; color:var(--cc-muted); }.fee-meta { display:flex; flex-wrap:wrap; gap:var(--admin-space-7, 24px); padding:var(--admin-space-5, 12px) 18px; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); background:var(--admin-label-bg, #f8fafc); }.fee-meta strong { color:var(--cc-text); }.fee-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.edit-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.fee-groups > div { min-width:0; }.edit-groups > div { min-width:0; }.fee-groups table { width:100%; border-collapse:collapse; font-size:var(--admin-font-caption, 12px); }.edit-groups table { width:100%; border-collapse:collapse; font-size:var(--admin-font-caption, 12px); }.edit-groups table { table-layout:fixed; }.fee-groups th { border-bottom:1px solid var(--cc-border); text-align:left; }.fee-groups td { border-bottom:1px solid var(--cc-border); text-align:left; }.edit-groups th { border-bottom:1px solid var(--cc-border); text-align:left; }.edit-groups td { border-bottom:1px solid var(--cc-border); text-align:left; }.fee-groups th { color:var(--cc-muted); font-weight:650; }.edit-groups th { color:var(--cc-muted); font-weight:650; }.edit-groups th:first-child { width:76px; }.edit-groups td:first-child { width:76px; }.edit-groups :deep(.el-input-number) { width:100%; min-width:0; }.fee-error { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-6, 16px); padding:20px; background:#fff4f3; }.fee-error p { margin:5px 0; color:#b42318; font-size:var(--admin-font-caption, 12px); }.fee-empty { display:grid; place-items:center; color:var(--cc-muted); }.dialog-actions { display:flex; gap:var(--admin-space-3, 8px); }.dialog-actions :deep(.el-button + .el-button) { margin-left:0; }
+.edit-group-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); margin-bottom:var(--admin-space-4, 10px); }
 .edit-group-heading h3 { min-width:0; }
 .edit-group-heading :deep(.el-button) { flex:0 0 auto; }
 @media (max-width:900px) { .edit-groups { grid-template-columns:1fr; } }

src/modules/customers/components/CustomerBillingRulesPanel.vue

@@ -431,23 +431,23 @@ onBeforeUnmount(stopInitializationPolling)
 <style scoped>
 .dimension-rule-panel { min-width: 0; }
 .rule-heading { align-items: center; }
-.rule-heading h2 { margin: 0; color: var(--cc-text); font-size: 18px; }.rule-heading p { margin: 6px 0 0; color: var(--cc-muted); font-size: 13px; }
-.heading-actions,.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }.heading-actions :deep(.el-button),.dialog-actions :deep(.el-button) { margin-left: 0; }
-.rule-card { min-width: 0; }.rule-card-heading { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--cc-border); }.rule-card-heading h2 { margin: 0; color: var(--cc-text); font-size: 18px; }.formula-band { display: flex; min-height: 52px; align-items: center; flex-wrap: wrap; gap: 12px 30px; padding: 12px 18px; border-bottom: 1px solid var(--cc-border); background: #f8fafc; color: var(--cc-muted); font-size: 13px; }.formula-band strong { color: #344054; }.loading-state { min-height: 280px; }
-.rule-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }.rule-title-row :deep(.el-checkbox) { height: 30px; margin-right: 0; padding: 0 10px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }.rule-title-row :deep(.el-checkbox.is-checked) { border-color: var(--cc-primary); background: var(--cc-primary-soft); }
-.rule-state { display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #8797b2; text-align: center; }.rule-state strong { color: #475467; font-size: 13px; }.rule-state p { margin: 0; color: var(--cc-muted); font-size: 12px; }
-.rule-error { display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; background: #fff4f3; }.rule-error strong { color: #7a271a; }.rule-error p { margin: 5px 0; color: #b42318; font-size: 12px; }
-.volume-value { color: #1570ef; }.editor-content { display: grid; gap: 20px; }.editor-formula { margin: 0; padding: 13px 15px; color: #475467; font-size: 13px; line-height: 1.7; }.editor-table-wrap { overflow-x: auto; }.editor-table { width: 100%; min-width: 920px; border-collapse: collapse; }.editor-table th,.editor-table td { padding: 10px 12px; border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.editor-table thead th { background: #eef0fa; color: #475467; font-size: 12px; }.editor-table tbody th { color: var(--cc-text); font-size: 13px; }.editor-table :deep(.el-input-number),.editor-table :deep(.el-input) { width: 140px; }.editor-table :deep(.el-input-number .el-input__wrapper) { width: 100%; }
-.charge-rule-card { margin-top: 18px; }.section-hint { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; font-weight: 400; }.charge-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }.charge-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }.charge-form :deep(.el-input-number), .charge-form :deep(.el-input) { width: 100%; }
+.rule-heading h2 { margin: 0; color: var(--cc-text); }.rule-heading p { margin: var(--admin-space-2, 6px) 0 0; color: var(--cc-muted); }
+.heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3, 8px); }
+.dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3, 8px); }.heading-actions :deep(.el-button) { margin-left: 0; }.dialog-actions :deep(.el-button) { margin-left: 0; }
+.rule-card { min-width: 0; }.rule-card-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cc-border); }.rule-card-heading h2 { margin: 0; color: var(--cc-text); }.formula-band { display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--cc-border); background: var(--admin-label-bg, #f8fafc); color: var(--cc-muted); font-size: var(--admin-font-body, 13px); }.formula-band strong { color: #344054; }
+.rule-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }.rule-title-row :deep(.el-checkbox) { height: 30px; margin-right: 0; padding: 0 var(--admin-space-4, 10px); border: 1px solid var(--cc-border); border-radius: 6px; background: var(--admin-surface, #fff); }.rule-title-row :deep(.el-checkbox.is-checked) { border-color: var(--cc-primary); background: var(--cc-primary-soft); }
+.rule-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--admin-space-3, 8px); color: #8797b2; text-align: center; }.rule-state strong { color: #475467; font-size: var(--admin-font-body, 13px); }.rule-state p { margin: 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.rule-error { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff4f3; }.rule-error strong { color: #7a271a; }.rule-error p { margin: 5px 0; color: #b42318; font-size: var(--admin-font-caption, 12px); }
+.volume-value { color: #1570ef; }.editor-content { display: grid; }.editor-formula { margin: 0; color: #475467; font-size: var(--admin-font-body, 13px); line-height: 1.7; }.editor-table-wrap { overflow-x: auto; }.editor-table { width: 100%; min-width: 920px; border-collapse: collapse; }.editor-table th { border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.editor-table td { border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.editor-table thead th { background: #eef0fa; color: #475467; font-size: var(--admin-font-caption, 12px); }.editor-table tbody th { color: var(--cc-text); font-size: var(--admin-font-body, 13px); }.editor-table :deep(.el-input-number) { width: 140px; }.editor-table :deep(.el-input) { width: 140px; }.editor-table :deep(.el-input-number .el-input__wrapper) { width: 100%; }.section-hint { margin: 5px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }.charge-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }.charge-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }.charge-form :deep(.el-input-number) { width: 100%; }.charge-form :deep(.el-input) { width: 100%; }
 .charge-form--simple { grid-template-columns: 1fr; }.charge-form--simple :deep(.el-form-item) { grid-column: 1; }
-.charge-rule-editor-wrap { overflow-x: auto; }.charge-rule-editor { width: 100%; min-width: 920px; border-collapse: collapse; }.charge-rule-editor th,.charge-rule-editor td { padding: 9px 10px; border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.charge-rule-editor thead th { background: #eef0fa; color: #475467; font-size: 12px; }.charge-rule-editor tbody th { color: var(--cc-text); font-size: 13px; }.charge-rule-editor :deep(.el-input-number),.charge-rule-editor :deep(.el-input) { width: 118px; }.charge-rule-editor :deep(.el-input-number .el-input__wrapper) { width: 100%; }
+.charge-rule-editor-wrap { overflow-x: auto; }.charge-rule-editor { width: 100%; min-width: 920px; border-collapse: collapse; }.charge-rule-editor th { border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.charge-rule-editor td { border-bottom: 1px solid var(--cc-border); text-align: left; white-space: nowrap; }.charge-rule-editor thead th { background: #eef0fa; color: #475467; font-size: var(--admin-font-caption, 12px); }.charge-rule-editor tbody th { color: var(--cc-text); font-size: var(--admin-font-body, 13px); }.charge-rule-editor :deep(.el-input-number) { width: 118px; }.charge-rule-editor :deep(.el-input) { width: 118px; }.charge-rule-editor :deep(.el-input-number .el-input__wrapper) { width: 100%; }
 .charge-box-cell { min-height: 34px; display: flex; align-items: center; border-bottom: 1px solid var(--cc-border); }.charge-box-cell:last-child { border-bottom: 0; }
-.rule-save-row { display: flex; justify-content: flex-end; padding: 12px 0 4px; }
-.dialog-actions { justify-content: center; width: 100%; }
+.rule-save-row { display: flex; justify-content: flex-end; padding: var(--admin-space-5, 12px) 0 var(--admin-space-1, 4px); }
+.dialog-actions { width: 100%; }
 .dialog-actions :deep(.el-button) { min-width: 112px; min-height: 46px; font-size: 15px; }
-.charge-rule-card :deep(.el-table) { color: #344054; font-size: 13px; }
-.charge-rule-card :deep(.el-table th.el-table__cell) { background: #f8fafc; color: #475467; font-size: 13px; font-weight: 650; }
-.charge-rule-card :deep(.el-table td.el-table__cell) { color: #344054; font-size: 13px; }
+.charge-rule-card :deep(.el-table) { color: #344054; font-size: var(--admin-font-body, 13px); }
+.charge-rule-card :deep(.el-table th.el-table__cell) { background: var(--admin-label-bg, #f8fafc); color: #475467; font-size: var(--admin-font-body, 13px); font-weight: 650; }
+.charge-rule-card :deep(.el-table td.el-table__cell) { color: #344054; font-size: var(--admin-font-body, 13px); }
 .charge-rule-card :deep(.el-table .cell) { line-height: 1.5; text-align: center; }
 .charge-rule-card :deep(.el-table .charge-remark-column .cell) { text-align: left; }
 .charge-rule-card :deep(.el-table strong) { color: #1570ef; font-weight: 650; }

src/modules/customers/customerDensity.css

@@ -2,112 +2,82 @@
 /* Only remove decoration from text actions; retain icon-only paging/settings controls. */
 .customer-density.admin-density .el-button :is(.lucide-search, .lucide-rotate-ccw, .lucide-copy),
 .customer-density-dialog.admin-density-dialog .el-button .lucide-copy { display: none; }
-.customer-density.admin-density .customers-table-actions .el-button--primary { background: var(--el-color-primary); box-shadow: none; border: 1px solid var(--el-color-primary); }
-.customer-density.admin-density .customer-action-button {
-  --action-color: #52525b;
-  --action-border: #dfe3ee;
-  height: 28px; min-height: 28px; padding: 4px 10px; margin: 0;
-  border: 1px solid var(--action-border); border-radius: 6px;
-  color: var(--action-color); background: #fff; font-size: 13px; font-weight: 600; box-shadow: none;
-}
-.customer-density.admin-density .customer-list-table .customer-action-review { --action-color: #c76500; --action-border: #fed7aa; }
-.customer-density.admin-density .customer-list-table .customer-action-reset-password { --action-color: #7c3aed; --action-border: #ddd6fe; }
-.customer-density.admin-density .customer-list-table .customer-action-impersonate { --action-color: #1677cf; --action-border: #bfdbfe; }
-.customer-density.admin-density .customer-list-table .customer-action-status.is-enable { --action-color: #15803d; --action-border: #bbf7d0; }
-.customer-density.admin-density .customer-list-table .customer-action-status.is-disable,
-.customer-density.admin-density .customer-list-table .customer-action-delete { --action-color: #dc2626; --action-border: #fecaca; }
-.customer-density.admin-density .customer-action-button:hover:not(:disabled) { color: var(--action-color); border-color: var(--action-color); background: #f8fafc; box-shadow: none; filter: none; }
-.customer-density.admin-density .customer-action-button:disabled { color: #a1a1aa; border-color: #e5e7eb; background: #fff; }
-.customer-density.admin-density .customer-action-button:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }
-.customer-density.admin-density .table-actions { gap: 6px; }
-.customer-density.admin-density .customer-list-table .table-actions > .el-button,
-.customer-density.admin-density .customer-list-table .table-actions > .el-dropdown { margin-left: 0; }
-.customer-density.admin-density .customer-list-table .el-table__body tr:hover > td { background: #f3f7fb; }
 
-.customer-density.admin-density.customer-detail-page .detail-page-layout { gap: 12px; }
-.customer-density.admin-density.customer-detail-page .detail-header { padding: 8px 12px; background: #fff; border: 1px solid var(--cc-border); }
-.customer-density.admin-density .detail-page-toolbar h1 { font-size: 16px; line-height: 24px; }
-.customer-density.admin-density .detail-page-toolbar p { margin-top: 2px; font-size: 12px; }
-.customer-density.admin-density .detail-tabs { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--cc-border); background: #fff; }
-.customer-density.admin-density .detail-tabs button { height: 38px; padding: 0 16px; gap: 6px; font-size: 13px; border-bottom-width: 2px; transition: color .15s, background .15s; }
-.customer-density.admin-density .detail-tab-icon { width: 18px; font: 17px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
-.customer-density.admin-density .tab-panel { padding-top: 0; min-height: 0; background: #fff; border: 1px solid var(--cc-border); border-top: 0; }
+.customer-density.admin-density.customer-detail-page .detail-page-layout { gap: var(--admin-space-5, 12px); }
+.customer-density.admin-density.customer-detail-page .detail-header { padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); border: 1px solid var(--cc-border); }
+.customer-density.admin-density .detail-page-toolbar h1 { font-size: var(--admin-font-title, 16px); line-height: 24px; }
+.customer-density.admin-density .detail-page-toolbar p { margin-top: 2px; font-size: var(--admin-font-caption, 12px); }
+.customer-density.admin-density .tab-panel { padding-top: 0; min-height: 0; background: var(--admin-surface, #fff); border: 1px solid var(--cc-border); border-top: 0; }
 .customer-density.admin-density .basic-layout { grid-template-columns: 1fr; gap: 0; }
-.customer-density.admin-density .detail-panel { padding: 12px; border: 0; border-bottom: 1px solid var(--cc-border); border-radius: 0; background: #fff; box-shadow: none; }
+.customer-density.admin-density .detail-panel { padding: var(--admin-space-5, 12px); border: 0; border-bottom: 1px solid var(--cc-border); border-radius: 0; background: var(--admin-surface, #fff); box-shadow: none; }
 .customer-density.admin-density .detail-panel:last-child { border-bottom: 0; }
 .customer-density.admin-density .module-panel { min-height: 0; }
-.customer-density.admin-density .panel-title { align-items: center; gap: 12px; margin-bottom: 8px; padding-bottom: 8px; }
-.customer-density.admin-density .panel-title h2 { font-size: 14px; }
-.customer-density.admin-density .panel-title p { margin-top: 3px; font-size: 12px; }
-.customer-density.admin-density .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
+.customer-density.admin-density .panel-title { align-items: center; gap: var(--admin-space-5, 12px); margin-bottom: var(--admin-space-3, 8px); padding-bottom: var(--admin-space-3, 8px); }
+.customer-density.admin-density .panel-title h2 { font-size: var(--admin-font-section, 14px); }
+.customer-density.admin-density .panel-title p { margin-top: 3px; font-size: var(--admin-font-caption, 12px); }
+.customer-density.admin-density .info-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .customer-density.admin-density .info-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.customer-density.admin-density .info-grid > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 36px; padding: 0; border-radius: 0; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); background: #fff; }
-.customer-density.admin-density .info-grid dt { display: flex; align-items: center; margin: 0; padding: 6px 8px; background: #f8fafc; font-size: 12px; }
-.customer-density.admin-density .info-grid dd { align-self: center; margin: 0; padding: 6px 8px; font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
 .customer-density.admin-density .qualification-list { gap: 0; border: 1px solid var(--cc-border); }
-.customer-density.admin-density .qualification-list button { grid-template-columns: minmax(0, 1fr) 100px 120px 48px; gap: 12px; min-height: 40px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--cc-border); border-radius: 0; }
+.customer-density.admin-density .qualification-list button { grid-template-columns: minmax(0, 1fr) 100px 120px 48px; gap: var(--admin-space-5, 12px); min-height: 40px; padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); border: 0; border-bottom: 1px solid var(--cc-border); border-radius: 0; }
 .customer-density.admin-density .qualification-list button:last-child { border-bottom: 0; }
-.customer-density.admin-density .qualification-list strong { font-size: 13px; }
-.customer-density.admin-density .qualification-list small { overflow-wrap: anywhere; font-size: 12px; }
-.customer-density.admin-density .file-date { font-size: 12px; }
-.customer-density.admin-density .file-preview-label { color: var(--cc-primary); font-size: 13px; }
-.customer-density.admin-density .section-empty,.customer-density.admin-density .module-empty { min-height: 64px; padding: 12px; gap: 4px; }
+.customer-density.admin-density .qualification-list strong { font-size: var(--admin-font-body, 13px); }
+.customer-density.admin-density .qualification-list small { overflow-wrap: anywhere; font-size: var(--admin-font-caption, 12px); }
+.customer-density.admin-density .file-date { font-size: var(--admin-font-caption, 12px); }
+.customer-density.admin-density .file-preview-label { color: var(--cc-primary); font-size: var(--admin-font-body, 13px); }
+.customer-density.admin-density .section-empty,.customer-density.admin-density .module-empty { min-height: var(--admin-empty-height, 64px); padding: var(--admin-space-5, 12px); gap: var(--admin-space-1, 4px); }
 .customer-density.admin-density .section-empty > svg,.customer-density.admin-density .module-empty > svg { display: none; }
-.customer-density.admin-density .section-empty span { font-size: 12px; }
+.customer-density.admin-density .section-empty span { font-size: var(--admin-font-caption, 12px); }
 .customer-density.admin-density .user-table-wrap { border: 1px solid var(--cc-border); border-radius: 0; }
-.customer-density.admin-density .user-table-wrap table { font-size: 13px; }
-.customer-density.admin-density .user-table-wrap th,.customer-density.admin-density .user-table-wrap td { height: 36px; padding: 6px 10px; }
+.customer-density.admin-density .user-table-wrap table { font-size: var(--admin-font-body, 13px); }
+.customer-density.admin-density .user-table-wrap th,.customer-density.admin-density .user-table-wrap td { height: var(--admin-row-height, 36px); padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); }
 .customer-density.admin-density .user-identity > span { display: none; }
-.customer-density.admin-density .user-identity small,.customer-density.admin-density .member-contact small { font-size: 12px; }
-
-.customer-density-dialog.admin-density-dialog.el-dialog .el-dialog__body { background: #fff; }
-.customer-density-dialog.admin-density-dialog .form-section { padding: 10px 0; }
-.customer-density-dialog.admin-density-dialog .form-section__heading { margin-bottom: 8px; }
-.customer-density-dialog.admin-density-dialog .form-grid { gap: 0 16px; }
-.customer-density-dialog.admin-density-dialog .field-hint { font-size: 12px; }
-.customer-density-dialog.admin-density-dialog .qualification-row > * { min-height: 44px; padding: 6px 10px; }
-.customer-density-dialog.admin-density-dialog .qualification-header > * { min-height: 36px; }
-.customer-density-dialog.admin-density-dialog .file-picker { min-height: 32px; }
+.customer-density.admin-density .user-identity small,.customer-density.admin-density .member-contact small { font-size: var(--admin-font-caption, 12px); }
+.customer-density-dialog.admin-density-dialog .form-section { padding: var(--admin-space-4, 10px) 0; }
+.customer-density-dialog.admin-density-dialog .form-section__heading { margin-bottom: var(--admin-space-3, 8px); }
+.customer-density-dialog.admin-density-dialog .form-grid { gap: 0 var(--admin-space-6, 16px); }
+.customer-density-dialog.admin-density-dialog .field-hint { font-size: var(--admin-font-caption, 12px); }
+.customer-density-dialog.admin-density-dialog .qualification-row > * { min-height: 44px; padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); }
+.customer-density-dialog.admin-density-dialog .qualification-header > * { min-height: var(--admin-row-height, 36px); }
+.customer-density-dialog.admin-density-dialog .file-picker { min-height: var(--admin-control-height, 32px); }
 .customer-density-dialog.admin-density-dialog .qualification-file-name { max-width: none; overflow-wrap: anywhere; white-space: normal; }
-.customer-density-dialog.admin-density-dialog .qualification-preview-action { font-size: 12px; }
-.customer-density-dialog.admin-density-dialog .review-dialog-content { gap: 12px; }
-.customer-density-dialog.admin-density-dialog .review-dialog-header { padding: 8px 10px; border-radius: 0; background: #fff; }
+.customer-density-dialog.admin-density-dialog .qualification-preview-action { font-size: var(--admin-font-caption, 12px); }
+.customer-density-dialog.admin-density-dialog .review-dialog-content { gap: var(--admin-space-5, 12px); }
+.customer-density-dialog.admin-density-dialog .review-dialog-header { padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); border-radius: 0; background: var(--admin-surface, #fff); }
 .customer-density-dialog.admin-density-dialog .review-dialog-title strong { white-space: normal; overflow-wrap: anywhere; }
 .customer-density-dialog.admin-density-dialog .review-dialog-icon { display: none; }
-.customer-density-dialog.admin-density-dialog .review-dialog-grid { gap: 12px; }
-.customer-density-dialog.admin-density-dialog .review-dialog-section,.customer-density-dialog.admin-density-dialog .review-decision-card { padding: 10px; border-radius: 0; box-shadow: none; }
-.customer-density-dialog.admin-density-dialog .review-section-heading { margin-bottom: 8px; }
-.customer-density-dialog.admin-density-dialog .review-section-heading span { font-size: 12px; }
-.customer-density-dialog.admin-density-dialog .review-info-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--cc-border); }
-.customer-density-dialog.admin-density-dialog .review-info-grid > div { display: grid; grid-template-columns: 96px minmax(0,1fr); padding: 0; border-radius: 0; border-bottom: 1px solid var(--cc-border); background: #fff; }
-.customer-density-dialog.admin-density-dialog .review-info-grid dt { margin: 0; padding: 6px 8px; font-size: 12px; background: #f8fafc; }
-.customer-density-dialog.admin-density-dialog .review-info-grid dd { align-self: center; padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; font-weight: 400; }
+.customer-density-dialog.admin-density-dialog .review-dialog-grid { gap: var(--admin-space-5, 12px); }
+.customer-density-dialog.admin-density-dialog .review-dialog-section,.customer-density-dialog.admin-density-dialog .review-decision-card { padding: var(--admin-space-4, 10px); border-radius: 0; box-shadow: none; }
+.customer-density-dialog.admin-density-dialog .review-section-heading { margin-bottom: var(--admin-space-3, 8px); }
+.customer-density-dialog.admin-density-dialog .review-section-heading span { font-size: var(--admin-font-caption, 12px); }
+.customer-density-dialog.admin-density-dialog .review-info-grid { grid-template-columns: 1fr; }
 .customer-density-dialog.admin-density-dialog .review-document-table { border-radius: 0; }
-.customer-density-dialog.admin-density-dialog .review-document-header { font-size: 12px; }
+.customer-density-dialog.admin-density-dialog .review-document-header { font-size: var(--admin-font-caption, 12px); }
 .customer-density-dialog.admin-density-dialog .review-document-name { white-space: normal; }
-.customer-density-dialog.admin-density-dialog .decision-summary { margin-bottom: 12px; padding: 8px 10px; border-radius: 0; }
-.customer-density-dialog.admin-density-dialog .approval-credentials { margin-top: 12px; border-radius: 0; }
-.customer-density-dialog.admin-density-dialog .approval-credentials > div { padding: 8px 10px; }
+.customer-density-dialog.admin-density-dialog .decision-summary { margin-bottom: var(--admin-space-5, 12px); padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); border-radius: 0; }
+.customer-density-dialog.admin-density-dialog .approval-credentials { margin-top: var(--admin-space-5, 12px); border-radius: 0; }
+.customer-density-dialog.admin-density-dialog .approval-credentials > div { padding: var(--admin-space-3, 8px) var(--admin-space-4, 10px); }
 
-.customer-density.admin-density .rule-heading,.customer-density.admin-density .rule-card-heading,.customer-density.admin-density .panel-heading { min-height: 0; padding: 8px 0; gap: 12px; }
-.customer-density.admin-density .rule-heading h2,.customer-density.admin-density .rule-card-heading h2,.customer-density.admin-density .panel-heading h2 { font-size: 14px; }
-.customer-density.admin-density .rule-heading p,.customer-density.admin-density .panel-heading p { margin-top: 3px; font-size: 12px; }
-.customer-density.admin-density .formula-band { min-height: 36px; padding: 6px 10px; gap: 6px 24px; }
-.customer-density.admin-density .rule-state,.customer-density.admin-density .rule-error,.customer-density.admin-density .loading-state,.customer-density.admin-density .fee-loading,.customer-density.admin-density .fee-empty { min-height: 64px; padding: 12px; }
+.customer-density.admin-density .rule-heading,.customer-density.admin-density .rule-card-heading,.customer-density.admin-density .panel-heading { min-height: 0; padding: var(--admin-space-3, 8px) 0; gap: var(--admin-space-5, 12px); }
+.customer-density.admin-density .rule-heading h2,.customer-density.admin-density .rule-card-heading h2,.customer-density.admin-density .panel-heading h2 { font-size: var(--admin-font-section, 14px); }
+.customer-density.admin-density .rule-heading p,.customer-density.admin-density .panel-heading p { margin-top: 3px; font-size: var(--admin-font-caption, 12px); }
+.customer-density.admin-density .formula-band { min-height: var(--admin-row-height, 36px); padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); }
+.customer-density.admin-density .rule-state,.customer-density.admin-density .rule-error,.customer-density.admin-density .loading-state,.customer-density.admin-density .fee-loading,.customer-density.admin-density .fee-empty { min-height: var(--admin-empty-height, 64px); padding: var(--admin-space-5, 12px); }
 .customer-density.admin-density .rule-state > svg { display: none; }
-.customer-density.admin-density .charge-rule-card { margin-top: 12px; }
-.customer-density.admin-density .overseas-fee-panel { margin-top: 12px; }
-.customer-density.admin-density .fee-groups { gap: 12px; padding: 8px 0; }
-.customer-density.admin-density .fee-groups h3,.customer-density-dialog.admin-density-dialog .edit-groups h3,.customer-density-dialog.admin-density-dialog .groups h3 { font-size: 14px; }
-.customer-density.admin-density .fee-groups th,.customer-density.admin-density .fee-groups td { padding: 6px 10px; }
-.customer-density-dialog.admin-density-dialog .editor-content { gap: 12px; }
-.customer-density-dialog.admin-density-dialog .editor-formula { padding: 6px 0; }
+.customer-density.admin-density .charge-rule-card { margin-top: var(--admin-space-5, 12px); }
+.customer-density.admin-density .overseas-fee-panel { margin-top: var(--admin-space-5, 12px); }
+.customer-density.admin-density .fee-groups { gap: var(--admin-space-5, 12px); padding: var(--admin-space-3, 8px) 0; }
+.customer-density.admin-density .fee-groups h3,.customer-density-dialog.admin-density-dialog .edit-groups h3,.customer-density-dialog.admin-density-dialog .groups h3 { font-size: var(--admin-font-section, 14px); }
+.customer-density.admin-density .fee-groups th,.customer-density.admin-density .fee-groups td { padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); }
+.customer-density-dialog.admin-density-dialog .editor-content { gap: var(--admin-space-5, 12px); }
+.customer-density-dialog.admin-density-dialog .editor-formula { padding: var(--admin-space-2, 6px) 0; }
 .customer-density-dialog.admin-density-dialog .editor-table th,.customer-density-dialog.admin-density-dialog .editor-table td,
 .customer-density-dialog.admin-density-dialog .charge-rule-editor th,.customer-density-dialog.admin-density-dialog .charge-rule-editor td,
-.customer-density-dialog.admin-density-dialog .edit-groups th,.customer-density-dialog.admin-density-dialog .edit-groups td { padding: 4px 8px; }
+.customer-density-dialog.admin-density-dialog .edit-groups th,.customer-density-dialog.admin-density-dialog .edit-groups td { padding: var(--admin-space-1, 4px) var(--admin-space-3, 8px); }
 .customer-density-dialog.admin-density-dialog .dialog-actions { justify-content: flex-end; }
-.customer-density-dialog.admin-density-dialog .dialog-actions .el-button { min-height: 32px; min-width: 64px; font-size: 13px; }
-.customer-density-dialog.admin-density-dialog .edit-groups,.customer-density-dialog.admin-density-dialog .groups { gap: 12px; padding: 0; }
+.customer-density-dialog.admin-density-dialog .dialog-actions .el-button { min-height: var(--admin-control-height, 32px); min-width: 64px; font-size: var(--admin-font-body, 13px); }
+.customer-density-dialog.admin-density-dialog .edit-groups,.customer-density-dialog.admin-density-dialog .groups { gap: var(--admin-space-5, 12px); padding: 0; }
 
 @media (max-width: 960px) { .customer-density.admin-density .info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
 @media (max-width: 720px) { .customer-density.admin-density .info-grid { grid-template-columns: 1fr; }.customer-density.admin-density .qualification-list button { grid-template-columns: minmax(0,1fr) auto; }.customer-density.admin-density .qualification-list .file-date { white-space: normal; } }
+
+.customer-density-dialog .review-info-grid { --admin-field-label-width: 96px; }

src/modules/customers/overseasStorageFee.test.ts

@@ -26,7 +26,7 @@ describe('customer overseas storage fee api', () => {
 
   it('keeps overseas fee business actions as semantic buttons at narrow widths', () => {
     expect(overseasListSource).toContain('border stripe')
-    expect(overseasListSource).toContain('class="customer-action-button" size="small" plain')
+    expect(overseasListSource).toContain('class="density-action" size="small" plain')
     expect(overseasListSource).toContain('size="small" plain type="danger"')
     expect(overseasListSource).toContain('<el-table :data="group" size="small" border stripe>')
     expect(overseasListSource).not.toContain('<Pencil')

src/modules/customers/pages/CustomerDetailView.vue

@@ -223,7 +223,7 @@ onBeforeUnmount(() => {
     <DetailPageLayout v-else v-loading="loading" aria-label="客户详情">
       <template #header>
         <header class="detail-header">
-          <el-button class="back-button" @click="router.push({ name: 'customers' })">返回列表</el-button>
+          <el-button link class="back-button density-back" @click="router.push({ name: 'customers' })">返回列表</el-button>
           <PageToolbar class="detail-page-toolbar" as="section" :title="customer?.tenantName || '客户详情'" :description="customer?.tenantCode || '客户资料'">
             <template #actions>
               <div v-if="customer" class="header-actions">
@@ -244,8 +244,8 @@ onBeforeUnmount(() => {
         </section>
       </template> -->
 
-      <div ref="tabList" class="detail-tabs" role="tablist" aria-label="客户详情模块">
-          <button v-for="tab in tabs" :id="`customer-tab-${tab.key}`" :key="tab.key" type="button" role="tab" :class="{ active: activeTab === tab.key }" :aria-label="tab.label" :aria-selected="activeTab === tab.key" :aria-controls="`customer-panel-${tab.key}`" :tabindex="activeTab === tab.key ? 0 : -1" @click="selectTab(tab.key, $event.currentTarget as HTMLElement)" @keydown="handleTabKeydown($event, tab.key)"><span class="detail-tab-icon" aria-hidden="true">{{ tab.icon }}</span><span>{{ tab.label }}</span></button>
+      <div ref="tabList" class="detail-tabs density-tabs" role="tablist" aria-label="客户详情模块">
+          <button v-for="tab in tabs" :id="`customer-tab-${tab.key}`" :key="tab.key" type="button" role="tab" :class="{ active: activeTab === tab.key }" :aria-label="tab.label" :aria-selected="activeTab === tab.key" :aria-controls="`customer-panel-${tab.key}`" :tabindex="activeTab === tab.key ? 0 : -1" @click="selectTab(tab.key, $event.currentTarget as HTMLElement)" @keydown="handleTabKeydown($event, tab.key)"><span class="density-tab-icon" aria-hidden="true">{{ tab.icon }}</span><span>{{ tab.label }}</span></button>
         </div>
 
         <div v-if="customer" :id="`customer-panel-${activeTab}`" class="tab-panel" role="tabpanel" :aria-labelledby="`customer-tab-${activeTab}`" tabindex="0">
@@ -253,7 +253,7 @@ onBeforeUnmount(() => {
             <div class="basic-layout">
               <section class="detail-panel company-panel">
                 <div class="panel-title"><div><h2>企业基本信息</h2><p>工商档案与合作配置</p></div><Building2 :size="19" /></div>
-                <dl class="info-grid">
+                <dl class="info-grid density-fields">
                   <div><dt>公司名称</dt><dd>{{ displayText(customer.legalName || customer.tenantName) }}</dd></div>
                   <div><dt>客户昵称</dt><dd>{{ displayText(customer.customerNickname) }}</dd></div>
                   <div><dt>统一社会信用代码</dt><dd>{{ displayText(customer.unifiedSocialCreditCode) }}</dd></div>
@@ -275,7 +275,7 @@ onBeforeUnmount(() => {
               </section>
               <section class="detail-panel contact-panel">
                 <div class="panel-title"><div><h2>联系与合作信息</h2><p>客户联络及内部跟进信息</p></div><UserRound :size="19" /></div>
-                <dl class="info-grid info-grid--three">
+                <dl class="info-grid info-grid--three density-fields">
                   <div><dt>联系人</dt><dd>{{ displayText(customer.contactName) }}</dd></div><div><dt>公司联系电话</dt><dd>{{ displayText(customer.contactPhone) }}</dd></div>
                   <div><dt>联系邮箱</dt><dd>{{ displayText(customer.contactEmail) }}</dd></div><div><dt>联系微信</dt><dd>{{ displayText(customer.contactWechat) }}</dd></div>
                   <div><dt>客户套餐</dt><dd>{{ displayText(customer.servicePackage) }}</dd></div><div><dt>账期</dt><dd>{{ customer.paymentTermDays ?? 0 }} 天</dd></div>
@@ -314,41 +314,38 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.detail-tabs { border-bottom: 1px solid var(--cc-border); }
+
 .customer-detail-page { min-width: 0; }
-.detail-header { display:flex; min-width:0; align-items:center; gap:12px; }
+.detail-header { display:flex; min-width:0; align-items:center; gap:var(--admin-space-5, 12px); }
 .back-button { flex:0 0 auto; }
 .detail-page-toolbar { min-width:0; flex:1; }
-.header-actions { display:flex; flex:0 0 auto; gap:8px; }
+.header-actions { display:flex; flex:0 0 auto; gap:var(--admin-space-3, 8px); }
 .header-actions :deep(.el-button + .el-button) { margin-left:0; }
-.detail-tabs { display:flex; gap:0; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid rgba(228,228,231,.5); border-radius:20px 20px 0 0; background:rgba(255,255,255,.95); box-shadow:0 -4px 16px rgba(0,0,0,.04); scrollbar-width:thin; }
-.detail-tabs button { display:inline-flex; min-width:max-content; min-height:0; flex:0 0 auto; align-items:center; justify-content:center; gap:8px; padding:16px 28px; border:0; border-bottom:3px solid transparent; background:transparent; color:#71717a; font-size:15px; font-weight:600; white-space:nowrap; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); }
-.detail-tab-icon { font-size:18px; line-height:1; }
-.detail-tabs button:hover { background:rgba(102,126,234,.05); color:#667eea; }
-.detail-tabs button.active { border-bottom-color:#667eea; background:rgba(102,126,234,.08); color:#667eea; font-weight:800; }
-.tab-panel { min-height:400px; padding-top:18px; }
-.basic-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; align-items:start; }
-.detail-panel { min-width:0; padding:22px; border:1px solid rgba(255,255,255,.5); border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 3px 12px rgba(15,23,42,.05); }
-.contact-panel,.user-panel { grid-column:1 / -1; }
-.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--cc-border); }
-.panel-title h2 { margin:0; color:#344054; font-size:16px; }.panel-title p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; }.panel-title > svg { color:var(--cc-primary); }
-.info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
-.info-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
-.info-grid > div { min-width:0; padding:12px 14px; border-radius:10px; background:#f8f9fc; }.info-grid > div.wide { grid-column:1 / -1; }
-.info-grid dt { margin-bottom:5px; color:var(--cc-muted); font-size:11px; }.info-grid dd { margin:0; color:#25324a; font-size:13px; font-weight:650; line-height:1.55; overflow-wrap:anywhere; }
-.qualification-list { display:flex; flex-direction:column; gap:8px; }
-.qualification-list button { display:grid; width:100%; grid-template-columns:38px minmax(0,1fr) auto auto 20px; align-items:center; gap:10px; padding:10px; border:1px solid var(--cc-border); border-radius:10px; background:#fff; color:inherit; text-align:left; cursor:pointer; }
+.basic-layout { display:grid; align-items:start; }
+.detail-panel { min-width:0; }
+.contact-panel { grid-column:1 / -1; }
+.user-panel { grid-column:1 / -1; }
+.panel-title { display:flex; justify-content:space-between; border-bottom:1px solid var(--cc-border); }
+.panel-title h2 { margin:0; color:#344054; }.panel-title p { margin:5px 0 0; color:var(--cc-muted); }.panel-title > svg { color:var(--cc-primary); }
+.info-grid { margin:0; }.info-grid > div.wide { grid-column:1 / -1; }
+.qualification-list { display:flex; flex-direction:column; }
+.qualification-list button { display:grid; width:100%; align-items:center; background:var(--admin-surface, #fff); color:inherit; text-align:left; cursor:pointer; }
 .qualification-list button:hover { border-color:#b9c3f5; background:#fafbff; }.qualification-list button:disabled { cursor:wait; opacity:.65; }
-.qualification-list strong,.qualification-list small { display:block; }.qualification-list strong { font-size:12px; }.qualification-list small,.file-date { margin-top:3px; color:var(--cc-muted); font-size:10px; }.file-date { margin:0; white-space:nowrap; }
-.section-empty,.module-empty { display:flex; min-height:150px; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#98a2b3; text-align:center; }
-.section-empty strong,.module-empty strong { color:#475467; font-size:13px; }.section-empty span,.module-empty p { max-width:600px; margin:0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
+.qualification-list strong { display:block; }
+.qualification-list small { display:block; }.qualification-list small { margin-top:3px; color:var(--cc-muted); }.file-date { margin-top:3px; color:var(--cc-muted); }.file-date { margin:0; white-space:nowrap; }
+.section-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; color:#98a2b3; text-align:center; }
+.module-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; color:#98a2b3; text-align:center; }
+.section-empty strong { color:#475467; font-size:var(--admin-font-body, 13px); }
+.module-empty strong { color:#475467; font-size:var(--admin-font-body, 13px); }.section-empty span { max-width:600px; margin:0; color:var(--cc-muted); line-height:1.7; }.module-empty p { max-width:600px; margin:0; color:var(--cc-muted); font-size:var(--admin-font-caption, 11px); line-height:1.7; }
 .section-empty button { border:0; background:transparent; color:var(--cc-primary); cursor:pointer; }.section-empty.is-error svg { color:#d92d20; }
 .user-table-wrap { overflow-x:auto; }
-table { width:100%; min-width:720px; border-collapse:collapse; font-size:12px; }th { padding:10px 12px; background:#f8fafc; color:#667085; text-align:left; font-weight:650; }td { padding:12px; border-top:1px solid #edf0f4; color:#344054; }
-.user-identity { display:flex; align-items:center; gap:9px; }.user-identity > span { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:#eef1ff; color:var(--cc-primary); font-weight:700; }.user-identity strong,.user-identity small { display:block; }.user-identity small { margin-top:3px; color:var(--cc-muted); font-size:10px; }.role-list { display:flex; flex-wrap:wrap; gap:5px; }
-.member-contact span,.member-contact small { display:block; }.member-contact small { margin-top:3px; color:var(--cc-muted); font-size:10px; }
-.module-panel { min-height:360px; }.module-empty { min-height:260px; }.module-empty > svg { color:#8797b2; }.module-empty p { max-width:520px; font-size:12px; }
-.contract-note { padding:16px 18px; border-radius:10px; background:#f8fafc; }.contract-note strong { color:#344054; font-size:12px; }.contract-note p { margin:5px 0 0; color:var(--cc-muted); font-size:11px; line-height:1.7; }
-.qualification-preview { display:grid; min-height:320px; max-height:72vh; overflow:auto; place-items:center; border-radius:10px; background:#f8fafc; }.qualification-preview img { display:block; max-width:100%; height:auto; }.qualification-preview iframe { width:100%; min-height:68vh; border:0; background:#fff; }
+table { width:100%; min-width:720px; border-collapse:collapse; font-size:var(--admin-font-caption, 12px); }th { padding:var(--admin-space-4, 10px) var(--admin-space-5, 12px); background:var(--admin-label-bg, #f8fafc); color:#667085; text-align:left; font-weight:650; }td { padding:var(--admin-space-5, 12px); border-top:1px solid #edf0f4; color:#344054; }
+.user-identity { display:flex; align-items:center; gap:9px; }.user-identity > span { width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:#eef1ff; color:var(--cc-primary); font-weight:700; }.user-identity strong { display:block; }.user-identity small { display:block; }.user-identity small { margin-top:3px; color:var(--cc-muted); }.role-list { display:flex; flex-wrap:wrap; gap:5px; }
+.member-contact span { display:block; }
+.member-contact small { display:block; }.member-contact small { margin-top:3px; color:var(--cc-muted); }.module-empty > svg { color:#8797b2; }.module-empty p { max-width:520px; font-size:var(--admin-font-caption, 12px); }
+.contract-note { padding:var(--admin-space-6, 16px) 18px; border-radius:10px; background:var(--admin-label-bg, #f8fafc); }.contract-note strong { color:#344054; font-size:var(--admin-font-caption, 12px); }.contract-note p { margin:5px 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption, 11px); line-height:1.7; }
+.qualification-preview { display:grid; min-height:320px; max-height:72vh; overflow:auto; place-items:center; border-radius:10px; background:var(--admin-label-bg, #f8fafc); }.qualification-preview img { display:block; max-width:100%; height:auto; }.qualification-preview iframe { width:100%; min-height:68vh; border:0; background:var(--admin-surface, #fff); }
 @media (max-width:960px) { .basic-layout { grid-template-columns:1fr; }.contact-panel,.user-panel { grid-column:auto; }.qualification-panel { order:3; }.user-panel { order:4; }.info-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 @media (max-width:720px) { .detail-header { align-items:flex-start; flex-wrap:wrap; }.detail-page-toolbar { width:100%; flex-basis:100%; }.company-mark { width:40px; height:40px; }.header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }.header-actions :deep(.el-tag) { grid-column:1 / -1; justify-self:start; }.header-actions :deep(.el-button) { min-height:44px; }.detail-panel { padding:16px; }.info-grid { grid-template-columns:1fr; }.info-grid > div.wide { grid-column:auto; } }
 @media (max-width:420px) { .company-mark { display:none; }.header-actions { grid-template-columns:1fr; }.header-actions :deep(.el-tag) { grid-column:auto; }.qualification-list button { grid-template-columns:36px minmax(0,1fr) auto; }.qualification-list .file-date,.qualification-list button > svg { display:none; } }

src/modules/customers/pages/CustomersView.test.ts

@@ -198,7 +198,8 @@ describe('CustomersView', () => {
     expect(customersSource).toContain('class="qualification-validity" role="cell"')
     expect(customersSource).toContain('grid-template-columns:170px minmax(0,1fr) 220px')
     expect(customersSource).toContain('.qualification-validity :deep(.el-date-editor) { width:100%; min-width:0; }')
-    expect(customersSource).toContain('.qualification-file-name { min-width:0; max-width:140px;')
+    expect(customersSource).toContain('.qualification-file-name { min-width:0;')
+    expect(readFileSync(resolve(process.cwd(), 'src/modules/customers/customerDensity.css'), 'utf8')).toContain('max-width: none; overflow-wrap: anywhere; white-space: normal;')
   })
 
   it('loads the complete customer detail before editing masked list fields', async () => {

src/modules/customers/pages/CustomersView.vue

@@ -1056,13 +1056,13 @@ onMounted(() => { void loadCustomers() })
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="customerColumns" preference-key="customers-table" :loading="loading" :total="result.total" aria-label="客户列表" row-key="id" empty-text="暂无符合筛选条件的客户" class="customer-list-table" :stripe="true" border>
         <template #toolbar-actions><div class="customers-table-actions"><el-button v-if="access.can('platform:customer:export') && access.can('platform:download:list')" :loading="exportSubmitting" :disabled="loading || exportSubmitting" @click="exportCustomers">导出Excel</el-button><el-button v-if="access.can('platform:customer:create')" type="primary" :disabled="loading" @click="openCreate">新增客户</el-button></div></template>
         <template #actions="{ row }">
-          <div class="table-actions">
-            <el-button v-if="access.can('platform:customer:list')" class="customer-action-button customer-action-detail" size="small" @click="showDetail(row as PlatformTenantResource)">详情</el-button>
-            <el-button v-if="access.can('platform:customer:edit') && (row as PlatformTenantResource).status !== 'ARCHIVED'" class="customer-action-button customer-action-edit" size="small" @click="openEdit(row as PlatformTenantResource)">编辑</el-button>
-            <el-button v-if="hasReviewAction(row as PlatformTenantResource)" class="customer-action-button customer-action-review" size="small" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')">审核</el-button>
-            <el-button v-for="action in customerDirectSecondaryActions(row as PlatformTenantResource)" :key="action" :class="[`customer-action-button`, `customer-action-${action}`, { 'is-enable': action === 'status' && (row as PlatformTenantResource).status !== 'ACTIVE', 'is-disable': action === 'status' && (row as PlatformTenantResource).status === 'ACTIVE' }]" size="small" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)">{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
+          <div class="table-actions density-actions">
+            <el-button v-if="access.can('platform:customer:list')" class="density-action customer-action-detail" size="small" @click="showDetail(row as PlatformTenantResource)">详情</el-button>
+            <el-button v-if="access.can('platform:customer:edit') && (row as PlatformTenantResource).status !== 'ARCHIVED'" class="density-action customer-action-edit" size="small" @click="openEdit(row as PlatformTenantResource)">编辑</el-button>
+            <el-button v-if="hasReviewAction(row as PlatformTenantResource)" class="density-action" data-tone="warning" size="small" :disabled="reviewSubmitting" @click="openDecision(row as PlatformTenantResource, access.can('platform:customer:approve') ? 'approve' : 'reject')">审核</el-button>
+            <el-button v-for="action in customerDirectSecondaryActions(row as PlatformTenantResource)" :key="action" class="density-action" :data-tone="action === 'reset-password' ? 'purple' : action === 'impersonate' ? 'primary' : action === 'status' && (row as PlatformTenantResource).status !== 'ACTIVE' ? 'success' : 'danger'" size="small" :disabled="customerActionDisabled(action)" @click="handleMoreAction(row as PlatformTenantResource, action)">{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-button>
             <el-dropdown v-if="customerOverflowActions(row as PlatformTenantResource).length" trigger="click" popper-class="customer-action-menu" @command="handleMoreAction(row as PlatformTenantResource, $event as string)">
-              <el-button class="customer-action-button customer-action-more" size="small" plain :aria-label="customerMoreActionsLabel(row as PlatformTenantResource)" :title="customerMoreActionsLabel(row as PlatformTenantResource)"><MoreHorizontal :size="17" aria-hidden="true" /></el-button>
+              <el-button class="density-action customer-action-more" size="small" plain :aria-label="customerMoreActionsLabel(row as PlatformTenantResource)" :title="customerMoreActionsLabel(row as PlatformTenantResource)"><MoreHorizontal :size="17" aria-hidden="true" /></el-button>
               <template #dropdown><el-dropdown-menu><el-dropdown-item v-for="action in customerOverflowActions(row as PlatformTenantResource)" :key="action" :command="action" :disabled="customerActionDisabled(action)" :class="{ 'customer-action-menu__danger': customerActionType(row as PlatformTenantResource, action) === 'danger' }">{{ customerActionLabel(row as PlatformTenantResource, action) }}</el-dropdown-item></el-dropdown-menu></template>
             </el-dropdown>
           </div>
@@ -1148,7 +1148,7 @@ onMounted(() => { void loadCustomers() })
         <div class="review-dialog-grid">
           <section class="review-dialog-section review-dialog-card">
             <div class="review-section-heading"><div><h3>企业基本信息</h3><span>核对客户提交的主体资料</span></div><CircleCheck :size="18" /></div>
-            <dl class="review-info-grid">
+            <dl class="review-info-grid density-fields">
               <div><dt>客户名称</dt><dd>{{ selectedReview.tenantName || '未填写' }}</dd></div>
               <div><dt>客户编号</dt><dd>{{ selectedReview.tenantCode || '未生成' }}</dd></div>
               <div><dt>联系人</dt><dd>{{ selectedReview.contactName || '未填写' }}</dd></div>
@@ -1210,90 +1210,74 @@ onMounted(() => { void loadCustomers() })
 </template>
 
 <style scoped>
-.customers-table-heading { display:flex; min-width:0; align-items:baseline; gap:10px; } .customers-table-heading h2 { margin:0; color:var(--cc-text); font-size:16px; } .customers-table-heading span { color:var(--cc-muted); font-size:12px; white-space:nowrap; }
-.customers-table-actions { display:flex; flex-wrap:wrap; gap:8px; } .customers-table-actions :deep(.el-button + .el-button) { margin-left:0; }
-.table-actions { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; } .table-actions :deep(.el-button) { margin-left:0; }
-:global(.customer-action-menu .el-dropdown-menu__item) { min-height:40px; gap:8px; }
+.customers-table-heading { display:flex; min-width:0; align-items:baseline; gap:var(--admin-space-4, 10px); } .customers-table-heading h2 { margin:0; color:var(--cc-text); font-size:var(--admin-font-title, 16px); } .customers-table-heading span { color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); white-space:nowrap; }
+.customers-table-actions { display:flex; flex-wrap:wrap; gap:var(--admin-space-3, 8px); } .customers-table-actions :deep(.el-button + .el-button) { margin-left:0; }
+.table-actions { display:flex; flex-wrap:wrap; align-items:center; } .table-actions :deep(.el-button) { margin-left:0; }
+:global(.customer-action-menu .el-dropdown-menu__item) { min-height:40px; gap:var(--admin-space-3, 8px); }
 :global(.customer-action-menu .customer-action-menu__danger) { color:var(--el-color-danger); }
-.review-sync-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; border-bottom:1px solid #fecdca; background:#fffafa; color:#b42318; font-size:12px; } .review-sync-error > div { display:flex; min-width:0; align-items:center; gap:8px; } .review-sync-error span { overflow-wrap:anywhere; }
+.review-sync-error { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); padding:var(--admin-space-4, 10px) 18px; border-bottom:1px solid #fecdca; background:#fffafa; color:#b42318; font-size:var(--admin-font-caption, 12px); } .review-sync-error > div { display:flex; min-width:0; align-items:center; gap:var(--admin-space-3, 8px); } .review-sync-error span { overflow-wrap:anywhere; }
 .customer-company-name { display:block; overflow:hidden; color:#334155; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
 .customers-table-actions :deep(.el-button--default) { border-color:rgba(102,126,234,.22); }
-:deep(.customer-list-table .el-table__header-wrapper th) { background:#f7f9fc; }
-:deep(.customer-list-table .el-table) { --el-table-border-color:#e5eaf1; --el-table-row-hover-bg-color:rgba(102,126,234,.06); border:1px solid #e5eaf1; border-radius:0; overflow:hidden; }
-:deep(.customer-list-table .el-table__inner-wrapper::before) { background:#e5eaf1; }
-:deep(.customer-list-table .el-table__body tr.el-table__row--striped > td) { background:#fbfcff; }
-:deep(.customer-list-table .el-table__body tr:hover > td) { background:rgba(102,126,234,.06); }
-:deep(.customer-list-table .el-table__body td), :deep(.customer-list-table .el-table__header th) { border-right:1px solid #edf1f5; }
-:deep(.customer-list-table .el-table__body td:last-child), :deep(.customer-list-table .el-table__header th:last-child) { border-right:0; }
 :deep(.customer-list-table .customer-code-column .cell) { white-space:nowrap; }
-:deep(.customer-list-table .el-tag) { border:0; border-radius:12px; font-weight:650; }
-:deep(.customer-list-table .el-tag--success) { background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.1)); color:#16a34a; }
-:deep(.customer-list-table .el-tag--warning) { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.1)); color:#ea580c; }
-:deep(.customer-list-table .el-tag--danger) { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.1)); color:#dc2626; }
-:deep(.customer-list-table .el-tag--info) { background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.1)); color:#667eea; }
-.capital-input { display:grid; grid-template-columns:minmax(0,1fr) 130px; width:100%; gap:8px; } .capital-input :deep(.el-input-number),.capital-input :deep(.el-select) { width:100%; }
-.qualification-heading { display:flex; justify-content:flex-end; margin-bottom:12px; } .qualification-hint { margin:12px 0 0; color:var(--cc-muted); font-size:12px; line-height:1.6; } .qualification-hint span,.qualification-label > span { color:var(--el-color-danger); }
-.qualification-credit-code { max-width:420px; margin-top:16px; } .qualification-credit-code small,.field-hint { display:block; margin-top:6px; color:var(--cc-muted); font-size:11px; line-height:1.5; }
-.qualification-table { overflow:hidden; margin-top:14px; border:1px solid var(--cc-border); border-radius:8px; } .qualification-row { display:grid; grid-template-columns:170px minmax(0,1fr) 220px; min-width:0; border-top:1px solid var(--cc-border); } .qualification-row:first-child { border-top:0; } .qualification-row > * { display:flex; min-width:0; min-height:68px; align-items:center; padding:12px 14px; } .qualification-header { min-height:44px; background:#f7f8fc; color:var(--cc-muted); font-size:12px; font-weight:600; } .qualification-header > * { min-height:44px; }
+.capital-input { display:grid; grid-template-columns:minmax(0,1fr) 130px; width:100%; gap:var(--admin-space-3, 8px); } .capital-input :deep(.el-input-number) { width:100%; } .capital-input :deep(.el-select) { width:100%; }
+.qualification-heading { display:flex; justify-content:flex-end; margin-bottom:var(--admin-space-5, 12px); } .qualification-hint { margin:var(--admin-space-5, 12px) 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); line-height:1.6; } .qualification-hint span { color:var(--el-color-danger); } .qualification-label > span { color:var(--el-color-danger); }
+.qualification-credit-code { max-width:420px; margin-top:var(--admin-space-6, 16px); } .qualification-credit-code small { display:block; margin-top:var(--admin-space-2, 6px); color:var(--cc-muted); font-size:var(--admin-font-caption, 11px); line-height:1.5; } .field-hint { display:block; margin-top:var(--admin-space-2, 6px); color:var(--cc-muted); line-height:1.5; }
+.qualification-table { overflow:hidden; margin-top:14px; border:1px solid var(--cc-border); border-radius:8px; } .qualification-row { display:grid; grid-template-columns:170px minmax(0,1fr) 220px; min-width:0; border-top:1px solid var(--cc-border); } .qualification-row:first-child { border-top:0; } .qualification-row > * { display:flex; min-width:0; align-items:center; } .qualification-header { min-height:44px; background:#f7f8fc; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); font-weight:600; }
 .qualification-label { gap:5px; font-weight:600; } .qualification-label svg { margin-left:auto; color:var(--el-color-success); }
-.qualification-optional { padding:2px 5px; border-radius:4px; background:var(--el-fill-color-light); color:var(--cc-muted); font-size:10px; font-weight:500; line-height:1.4; }
-.qualification-file { gap:12px; } .qualification-file-control { display:flex; min-width:0; flex:1; flex-wrap:wrap; align-items:center; gap:8px; } .file-picker { position:relative; display:inline-flex; min-height:36px; flex:0 0 auto; align-items:center; gap:7px; overflow:hidden; padding:0 12px; border:1px solid var(--cc-border); border-radius:6px; background:#fff; color:var(--cc-text); cursor:pointer; } .file-picker:focus-within { outline:2px solid color-mix(in srgb,var(--cc-primary) 35%,transparent); outline-offset:2px; } .file-picker.is-disabled { cursor:not-allowed; opacity:.6; } .file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:inherit; } .qualification-file-name { min-width:0; max-width:140px; overflow:hidden; color:var(--cc-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; } .qualification-validity :deep(.el-date-editor) { width:100%; min-width:0; } .qualification-error { width:100%; color:var(--el-color-danger); line-height:1.4; }
-.qualification-preview-trigger { position:relative; display:grid; width:68px; height:68px; flex:0 0 68px; overflow:hidden; place-items:center; padding:0; border:1px solid var(--cc-border); border-radius:6px; background:#f8fafc; color:var(--cc-muted); cursor:pointer; }
+.qualification-optional { padding:2px 5px; border-radius:var(--admin-radius, 4px); background:var(--el-fill-color-light); color:var(--cc-muted); font-size:var(--admin-font-caption, 10px); font-weight:500; line-height:1.4; }
+.qualification-file { gap:var(--admin-space-5, 12px); } .qualification-file-control { display:flex; min-width:0; flex:1; flex-wrap:wrap; align-items:center; gap:var(--admin-space-3, 8px); } .file-picker { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; overflow:hidden; padding:0 var(--admin-space-5, 12px); border:1px solid var(--cc-border); border-radius:6px; background:var(--admin-surface, #fff); color:var(--cc-text); cursor:pointer; } .file-picker:focus-within { outline:2px solid color-mix(in srgb,var(--cc-primary) 35%,transparent); outline-offset:2px; } .file-picker.is-disabled { cursor:not-allowed; opacity:.6; } .file-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:inherit; } .qualification-file-name { min-width:0; overflow:hidden; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); text-overflow:ellipsis; } .qualification-validity :deep(.el-date-editor) { width:100%; min-width:0; } .qualification-error { width:100%; color:var(--el-color-danger); line-height:1.4; }
+.qualification-preview-trigger { position:relative; display:grid; width:68px; height:68px; flex:0 0 68px; overflow:hidden; place-items:center; padding:0; border:1px solid var(--cc-border); border-radius:6px; background:var(--admin-label-bg, #f8fafc); color:var(--cc-muted); cursor:pointer; }
 .qualification-preview-trigger:hover { border-color:var(--cc-primary); color:var(--cc-primary); }
 .qualification-preview-trigger:focus-visible { outline:2px solid color-mix(in srgb,var(--cc-primary) 42%,transparent); outline-offset:2px; }
 .qualification-preview-trigger:disabled { cursor:wait; opacity:.72; }
-.qualification-preview-trigger img { width:100%; height:100%; object-fit:contain; background:#fff; }
+.qualification-preview-trigger img { width:100%; height:100%; object-fit:contain; background:var(--admin-surface, #fff); }
 .qualification-preview-placeholder { display:grid; place-items:center; gap:2px; }
-.qualification-preview-placeholder small { font-size:10px; font-weight:700; }
-.qualification-preview-action { position:absolute; inset:auto 0 0; display:flex; min-height:22px; align-items:center; justify-content:center; gap:3px; background:rgba(23,32,51,.78); color:#fff; font-size:10px; }
-.qualification-preview { display:grid; max-height:min(70vh,760px); min-height:240px; place-items:center; overflow:auto; border:1px solid var(--cc-border); border-radius:6px; background:#f8fafc; }
+.qualification-preview-placeholder small { font-size:var(--admin-font-caption, 10px); font-weight:700; }
+.qualification-preview-action { position:absolute; inset:auto 0 0; display:flex; min-height:22px; align-items:center; justify-content:center; gap:3px; background:rgba(23,32,51,.78); color:var(--admin-surface, #fff); }
+.qualification-preview { display:grid; max-height:min(70vh,760px); min-height:240px; place-items:center; overflow:auto; border:1px solid var(--cc-border); border-radius:6px; background:var(--admin-label-bg, #f8fafc); }
 .qualification-preview img { display:block; max-width:100%; height:auto; }
-.qualification-preview iframe { width:100%; min-height:min(68vh,720px); border:0; background:#fff; }
-.qualification-load-error { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; font-size:12px; }
-:global(.customer-editor-dialog.el-dialog) { display:flex; max-height:min(90vh,900px); flex-direction:column; }
-:global(.customer-editor-dialog .el-dialog__body) { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
-:global(.customer-editor-dialog .el-dialog__footer) { flex:0 0 auto; }
-.customer-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; } .customer-editor-footer > span { color:var(--cc-muted); font-size:12px; text-align:left; } .customer-editor-footer > div { display:flex; flex:0 0 auto; gap:8px; } .customer-editor-footer :deep(.el-button + .el-button) { margin-left:0; }
-.decision-summary { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding:12px 14px; border-radius:8px; background:#f8fafc; } .decision-summary > * { min-width:0; overflow-wrap:anywhere; } .decision-summary strong { color:var(--cc-text); font-size:13px; } .decision-summary span { color:var(--cc-muted); font-size:11px; }
-:global(.review-decision-dialog.el-dialog) { display:flex; max-height:min(90vh,860px); flex-direction:column; overflow:hidden; }
-:global(.review-decision-dialog .el-dialog__header) { padding:22px 28px 16px; border-bottom:1px solid #eef1f6; }
-:global(.review-decision-dialog .el-dialog__body) { min-height:0; overflow-y:auto; padding:20px 28px 24px; background:#fbfcfe; }
-:global(.review-decision-dialog .el-dialog__footer) { flex:0 0 auto; }
-.review-dialog-content { display:grid; gap:16px; }
-.review-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid #dbe4f0; border-radius:10px; background:linear-gradient(90deg,#f4f7ff,#fff); }
+.qualification-preview iframe { width:100%; min-height:min(68vh,720px); border:0; background:var(--admin-surface, #fff); }
+.qualification-load-error { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-4, 10px); margin-top:var(--admin-space-5, 12px); padding:var(--admin-space-4, 10px) var(--admin-space-5, 12px); border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; font-size:var(--admin-font-caption, 12px); }
+.customer-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-6, 16px); } .customer-editor-footer > span { color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); text-align:left; } .customer-editor-footer > div { display:flex; flex:0 0 auto; gap:var(--admin-space-3, 8px); } .customer-editor-footer :deep(.el-button + .el-button) { margin-left:0; }
+.decision-summary { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); background:var(--admin-label-bg, #f8fafc); } .decision-summary > * { min-width:0; overflow-wrap:anywhere; } .decision-summary strong { color:var(--cc-text); font-size:var(--admin-font-body, 13px); } .decision-summary span { color:var(--cc-muted); font-size:var(--admin-font-caption, 11px); }
+.review-dialog-content { display:grid; }
+.review-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-6, 16px); border:1px solid #dbe4f0; }
 .review-dialog-title { display:flex; min-width:0; align-items:center; gap:11px; }
 .review-dialog-title > div { display:grid; min-width:0; gap:3px; }
-.review-dialog-title strong { overflow:hidden; color:#18243a; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
-.review-dialog-title span:not(.review-dialog-icon) { overflow:hidden; color:#718096; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
-.review-dialog-icon { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border-radius:9px; background:#e9efff; color:#526fe8; }
-.review-dialog-grid { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(390px,1.15fr); gap:16px; }
-.review-dialog-section,.review-decision-card { min-width:0; padding:16px; border:1px solid #e5eaf1; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.03); }
-.review-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
+.review-dialog-title strong { overflow:hidden; color:#18243a; font-size:var(--admin-font-title, 16px); text-overflow:ellipsis; }
+.review-dialog-title span:not(.review-dialog-icon) { overflow:hidden; color:#718096; font-size:var(--admin-font-caption, 12px); text-overflow:ellipsis; white-space:nowrap; }
+.review-dialog-icon { width:36px; height:var(--admin-row-height, 36px); flex:0 0 36px; place-items:center; border-radius:9px; background:#e9efff; color:#526fe8; }
+.review-dialog-grid { display:grid; grid-template-columns:minmax(270px,.85fr) minmax(390px,1.15fr); }
+.review-dialog-section { min-width:0; border:1px solid #e5eaf1; background:var(--admin-surface, #fff); }
+.review-decision-card { min-width:0; border:1px solid #e5eaf1; background:var(--admin-surface, #fff); }
+.review-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--admin-space-5, 12px); }
 .review-section-heading > div { min-width:0; }
-.review-section-heading h3 { margin:0; color:#1a2438; font-size:14px; font-weight:700; }
-.review-section-heading span { display:block; margin-top:4px; color:#8a94a6; font-size:11px; line-height:1.4; }
+.review-section-heading h3 { margin:0; color:#1a2438; font-size:var(--admin-font-section, 14px); font-weight:700; }
+.review-section-heading span { display:block; margin-top:var(--admin-space-1, 4px); color:#8a94a6; line-height:1.4; }
 .review-section-heading > svg { flex:0 0 auto; color:#657bea; }
-.review-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
-.review-info-grid > div { min-width:0; padding:10px 11px; border-radius:7px; background:#f7f9fc; }
-.review-info-grid dt { margin-bottom:4px; color:#8792a5; font-size:11px; }
-.review-info-grid dd { min-width:0; margin:0; overflow:hidden; color:#28364d; font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
-.review-document-table { overflow:hidden; border:1px solid #e4e9f1; border-radius:8px; }
-.review-document-header,.review-document-row { display:grid; grid-template-columns:118px minmax(0,1fr) 138px; }
-.review-document-header { background:#f5f7fb; color:#657188; font-size:11px; font-weight:700; }
-.review-document-header > span,.review-document-row > span { min-width:0; padding:9px 10px; overflow-wrap:anywhere; border-right:1px solid #e4e9f1; }
-.review-document-header > span:last-child,.review-document-row > span:last-child { border-right:0; }
-.review-document-row { min-height:46px; border-top:1px solid #edf0f4; color:#334155; font-size:12px; }
+.review-info-grid { margin:0; }
+.review-document-table { overflow:hidden; border:1px solid #e4e9f1; }
+.review-document-header { display:grid; grid-template-columns:118px minmax(0,1fr) 138px; }
+.review-document-row { display:grid; grid-template-columns:118px minmax(0,1fr) 138px; }
+.review-document-header { background:#f5f7fb; color:#657188; font-weight:700; }
+.review-document-header > span { min-width:0; padding:9px var(--admin-space-4, 10px); overflow-wrap:anywhere; border-right:1px solid #e4e9f1; }
+.review-document-row > span { min-width:0; padding:9px var(--admin-space-4, 10px); overflow-wrap:anywhere; border-right:1px solid #e4e9f1; }
+.review-document-header > span:last-child { border-right:0; }
+.review-document-row > span:last-child { border-right:0; }
+.review-document-row { min-height:46px; border-top:1px solid #edf0f4; color:#334155; font-size:var(--admin-font-caption, 12px); }
 .review-document-row > span { display:flex; align-items:center; }
 .review-document-type { font-weight:650; }
-.review-document-name { min-width:0; gap:6px; overflow:hidden; color:#4c5b72; text-overflow:ellipsis; white-space:nowrap; }
+.review-document-name { min-width:0; gap:var(--admin-space-2, 6px); overflow:hidden; color:#4c5b72; text-overflow:ellipsis; }
 .review-document-name svg { flex:0 0 auto; color:#8798cf; }
-.review-document-actions { justify-content:flex-end; gap:6px; }
+.review-document-actions { justify-content:flex-end; gap:var(--admin-space-2, 6px); }
 .review-document-actions :deep(.el-button + .el-button) { margin-left:0; }
-.review-document-state,.review-document-error,.review-document-empty { padding:14px; color:var(--cc-muted); font-size:12px; }
-.review-document-error { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; }
+.review-document-state { padding:14px; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.review-document-error { padding:14px; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.review-document-empty { padding:14px; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.review-document-error { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); margin-bottom:var(--admin-space-3, 8px); border:1px solid #fecdca; border-radius:6px; background:#fffafa; color:#b42318; }
 .review-document-empty { display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; }.review-document-empty svg { color:#a5afc1; }
-.review-decision-card :deep(.el-form-item) { margin-bottom:0; }.review-decision-card :deep(.el-form-item__label) { color:#4b5870; font-size:12px; font-weight:650; }.decision-summary > div > span { display:block; margin-top:4px; }.decision-type { margin:0 0 14px; }.password-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:8px; }.dialog-hint { margin:12px 0 0; color:var(--cc-muted); font-size:12px; line-height:1.6; }.archive-confirm { display:grid; gap:8px; margin:16px 0; }.archive-confirm strong { color:var(--cc-text); }.archive-confirm span { color:var(--cc-muted); font-size:12px; }
-.approval-result-warning { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid #fecdca; border-radius:8px; background:#fffafa; color:#b42318; } .approval-result-warning strong,.approval-result-warning span { display:block; } .approval-result-warning strong { font-size:14px; } .approval-result-warning span { margin-top:4px; font-size:12px; line-height:1.5; } .approval-credentials { margin:18px 0 0; border:1px solid var(--cc-border); border-radius:8px; } .approval-credentials > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; padding:12px 14px; } .approval-credentials > div + div { border-top:1px solid var(--cc-border); } .approval-credentials dt { color:var(--cc-muted); font-size:12px; } .approval-credentials dd { display:flex; min-width:0; align-items:center; gap:10px; margin:0; } .approval-credentials code { min-width:0; flex:1; overflow-wrap:anywhere; color:var(--cc-text); font-size:14px; font-weight:700; }
+.review-decision-card :deep(.el-form-item) { margin-bottom:0; }.review-decision-card :deep(.el-form-item__label) { color:#4b5870; font-size:var(--admin-font-caption, 12px); font-weight:650; }.decision-summary > div > span { display:block; margin-top:var(--admin-space-1, 4px); }.decision-type { margin:0 0 14px; }.password-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:var(--admin-space-3, 8px); }.dialog-hint { margin:var(--admin-space-5, 12px) 0 0; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); line-height:1.6; }.archive-confirm { display:grid; gap:var(--admin-space-3, 8px); margin:var(--admin-space-6, 16px) 0; }.archive-confirm strong { color:var(--cc-text); }.archive-confirm span { color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.approval-result-warning { display:flex; align-items:flex-start; gap:var(--admin-space-4, 10px); padding:var(--admin-space-5, 12px) 14px; border:1px solid #fecdca; border-radius:8px; background:#fffafa; color:#b42318; } .approval-result-warning strong { display:block; } .approval-result-warning span { display:block; } .approval-result-warning strong { font-size:var(--admin-font-section, 14px); } .approval-result-warning span { margin-top:var(--admin-space-1, 4px); font-size:var(--admin-font-caption, 12px); line-height:1.5; } .approval-credentials { margin:18px 0 0; border:1px solid var(--cc-border); } .approval-credentials > div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:var(--admin-space-5, 12px); } .approval-credentials > div + div { border-top:1px solid var(--cc-border); } .approval-credentials dt { color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); } .approval-credentials dd { display:flex; min-width:0; align-items:center; gap:var(--admin-space-4, 10px); margin:0; } .approval-credentials code { min-width:0; flex:1; overflow-wrap:anywhere; color:var(--cc-text); font-size:var(--admin-font-section, 14px); font-weight:700; }
 @media (max-width:720px) { .customer-editor-footer,.review-sync-error { align-items:stretch; flex-direction:column; } .customers-table-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; } .customers-table-actions :deep(.el-button) { min-height:40px; margin:0; } .qualification-table { overflow-x:auto; } .qualification-row { min-width:640px; } .customer-editor-footer > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); width:100%; } .customer-editor-footer :deep(.el-button) { min-height:40px; margin:0; } .decision-summary { align-items:flex-start; flex-direction:column; }.review-dialog-grid { grid-template-columns:1fr; gap:12px; }.review-info-grid { grid-template-columns:1fr 1fr; }.review-document-header,.review-document-row { grid-template-columns:104px minmax(0,1fr) 124px; }.review-dialog-header { align-items:flex-start; }.password-input-row { grid-template-columns:1fr; }.table-actions :deep(.el-button) { min-height:40px; } }
 @media (max-width:480px) { :global(.review-decision-dialog .el-dialog__header),:global(.review-decision-dialog .el-dialog__body) { padding-left:16px; padding-right:16px; }.review-info-grid { grid-template-columns:1fr; }.review-document-header { display:none; }.review-document-row { grid-template-columns:1fr; gap:6px; padding:10px; }.review-document-row > span { padding:0; border-right:0; }.review-document-actions { justify-content:flex-start; }.review-dialog-title strong { max-width:190px; } }
 @media (max-width:360px) { .customers-table-actions,.capital-input { grid-template-columns:1fr; } }

src/modules/customers/pages/OverseasStorageFeesView.vue

@@ -73,7 +73,7 @@ onMounted(() => { void load() })
       <template v-if="error" #state><section class="surface-panel error-state" role="alert"><div><strong>{{ error.message }}</strong><ApiErrorMeta :details="error" /></div><el-button type="primary" @click="load">重新加载</el-button></section></template>
     <section v-if="!error" class="surface-panel table-panel">
       <DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-storage-fees-table" row-key="id" border stripe empty-text="暂无海外仓阶梯费用配置" @update:page="load" @update:page-size="load">
-        <template #actions="{ row }"><el-button v-if="access.can('platform:overseas-storage-fee:edit')" class="customer-action-button" size="small" plain @click="openEdit(row as OverseasStorageFeeConfig)">编辑</el-button></template>
+        <template #actions="{ row }"><el-button v-if="access.can('platform:overseas-storage-fee:edit')" class="density-action" size="small" plain @click="openEdit(row as OverseasStorageFeeConfig)">编辑</el-button></template>
         <template #storage="{ row }">
           <dl class="tier-list" aria-label="仓租阶梯单价，币种见本行币种列">
             <div v-for="tier in tiersFor(row as OverseasStorageFeeConfig, 'STORAGE')" :key="tier.id" class="tier-item"><dt>{{ label(tier) }}：</dt><dd>{{ tier.unitPrice }}</dd></div>
@@ -89,7 +89,7 @@ onMounted(() => { void load() })
     </section>
     </ListPageLayout>
     <AppDialog class="admin-density-dialog customer-density-dialog" v-model="dialogOpen" title="编辑海外仓阶梯费用" width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save">
-      <el-form label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /><el-option label="EUR" value="EUR" /></el-select></el-form-item><div class="groups"><div v-for="(group, index) in [storageTiers, returnTiers]" :key="index"><div class="group-heading"><h3>{{ index === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(index === 0 ? 'STORAGE' : 'RETURN_STORAGE')">新增阶梯</el-button></div><el-table :data="group" size="small" border stripe><el-table-column label="操作" width="88" fixed="left"><template #default="{ row }"><el-button size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(row as OverseasStorageFeeTier)">删除</el-button></template></el-table-column><el-table-column label="开始天数"><template #default="{ row }"><el-input-number v-model="row.startDay" :min="1" :max="36500" :controls="false" placeholder="请输入开始天数" /></template></el-table-column><el-table-column label="结束天数"><template #default="{ row }"><el-input-number v-if="row.endDay !== null" v-model="row.endDay" :min="1" :max="36500" :controls="false" placeholder="请输入结束天数" /><span v-else>以上</span></template></el-table-column><el-table-column label="价格"><template #default="{ row }"><el-input-number v-model="row.unitPrice" :min="0" :precision="6" :controls="false" placeholder="请输入单价" /></template></el-table-column></el-table></div></div></el-form>
+      <el-form label-position="top"><el-form-item label="币种"><el-select v-model="form.currency" style="width:180px"><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /><el-option label="EUR" value="EUR" /></el-select></el-form-item><div class="groups"><div v-for="(group, index) in [storageTiers, returnTiers]" :key="index"><div class="group-heading"><h3>{{ index === 0 ? '仓租（CBM/天）' : '退货仓储费（托/天）' }} · {{ group.length }}档</h3><el-button class="density-action" data-tone="primary" type="primary" plain size="small" :disabled="form.tiers.length >= 100" @click="addTier(index === 0 ? 'STORAGE' : 'RETURN_STORAGE')">新增阶梯</el-button></div><el-table :data="group" size="small" border stripe><el-table-column label="操作" width="88" fixed="left"><template #default="{ row }"><el-button class="density-action" data-tone="danger" size="small" plain type="danger" :disabled="group.length <= 1" @click="removeTier(row as OverseasStorageFeeTier)">删除</el-button></template></el-table-column><el-table-column label="开始天数"><template #default="{ row }"><el-input-number v-model="row.startDay" :min="1" :max="36500" :controls="false" placeholder="请输入开始天数" /></template></el-table-column><el-table-column label="结束天数"><template #default="{ row }"><el-input-number v-if="row.endDay !== null" v-model="row.endDay" :min="1" :max="36500" :controls="false" placeholder="请输入结束天数" /><span v-else>以上</span></template></el-table-column><el-table-column label="价格"><template #default="{ row }"><el-input-number v-model="row.unitPrice" :min="0" :precision="6" :controls="false" placeholder="请输入单价" /></template></el-table-column></el-table></div></div></el-form>
     </AppDialog>
   </div>
   </AdminPage>
@@ -97,17 +97,17 @@ onMounted(() => { void load() })
 
 <style scoped>
 .error-state { display:flex; justify-content:space-between; padding:20px; color:#b42318; }
-.tier-list { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:2px 0; white-space:normal; }
+.tier-list { display:flex; flex-wrap:wrap; gap:var(--admin-space-1, 4px) var(--admin-space-6, 16px); margin:0; padding:2px 0; white-space:normal; }
 .tier-list:empty::after { content:'—'; color:var(--cc-muted); }
 .tier-item { display:flex; align-items:baseline; min-width:0; max-width:100%; line-height:24px; }
-.tier-item dt { flex:0 0 auto; color:var(--cc-muted); font-size:12px; }
-.tier-item dd { min-width:0; margin:0; color:var(--cc-text); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
-.groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
+.tier-item dt { flex:0 0 auto; color:var(--cc-muted); font-size:var(--admin-font-caption, 12px); }
+.tier-item dd { min-width:0; margin:0; color:var(--cc-text); font-size:var(--admin-font-body, 13px); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
+.groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .groups > div { min-width:0; }
 .groups :deep(.el-table) { width:100%; }
 .groups :deep(.el-input-number) { width:100%; min-width:0; }
-.groups h3 { margin:0 0 10px; font-size:15px; }
-.group-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
+.groups h3 { margin:0 0 var(--admin-space-4, 10px); }
+.group-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); margin-bottom:var(--admin-space-4, 10px); }
 .group-heading h3 { min-width:0; margin:0; }
 .group-heading :deep(.el-button) { flex:0 0 auto; }
 @media (max-width:900px) { .groups { grid-template-columns:1fr; } }

src/modules/dashboard/pages/DashboardView.test.ts

@@ -1,6 +1,7 @@
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import DashboardView from './DashboardView.vue'
+import { getTodayNewOrderCount } from '../api/dashboard'
 
 vi.mock('../api/dashboard', () => ({
   getTodayNewOrderCount: vi.fn().mockResolvedValue(12),
@@ -14,6 +15,8 @@ vi.mock('../api/dashboard', () => ({
   }),
 }))
 
+enableAutoUnmount(afterEach)
+
 describe('DashboardView', () => {
   beforeEach(() => vi.clearAllMocks())
 
@@ -24,6 +27,9 @@ describe('DashboardView', () => {
     expect(wrapper.text()).toContain('核心指标来自实时业务数据')
     expect(wrapper.text()).toContain('数据更新时间：2026-09-11 12:00')
     expect(wrapper.findAll('.dashboard-metric')).toHaveLength(4)
+    expect(wrapper.findAll('.dashboard-metric p').map(label => label.text())).toEqual(['今日新运单', '在途柜量', '活跃客户', '待清关票数'])
+    expect(wrapper.find('.density-fields').exists()).toBe(false)
+    expect(wrapper.findAll('.dashboard-metric-mark')).toHaveLength(4)
     expect(wrapper.text()).toContain('12 票')
     expect(wrapper.text()).toContain('4.25 TEU')
     expect(wrapper.text()).toContain('8 家')
@@ -36,4 +42,50 @@ describe('DashboardView', () => {
     expect(wrapper.text()).not.toContain('待办事项')
     expect(wrapper.text()).not.toContain('静态演示数据')
   })
+
+  it('keeps successful metrics when one request fails and refreshes through the visible control', async () => {
+    vi.mocked(getTodayNewOrderCount).mockRejectedValueOnce(new Error('指标加载失败'))
+    const wrapper = mount(DashboardView)
+    await flushPromises()
+    expect(wrapper.text()).toContain('部分核心指标加载失败')
+    expect(wrapper.get('.dashboard-metric strong').text()).toContain('—')
+    expect(wrapper.text()).toContain('4.25 TEU')
+    await wrapper.findAll('button').find(button => button.text().trim() === '刷新数据')!.trigger('click')
+    await flushPromises()
+    expect(getTodayNewOrderCount).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).toContain('核心指标来自实时业务数据')
+    expect(wrapper.text()).toContain('12 票')
+  })
+
+  it('uses the same visualization root when entering and exiting fullscreen', async () => {
+    const wrapper = mount(DashboardView)
+    await flushPromises()
+    let fullscreen: Element | null = null
+    const previousElement = Object.getOwnPropertyDescriptor(document, 'fullscreenElement')
+    const previousExit = Object.getOwnPropertyDescriptor(document, 'exitFullscreen')
+    const enter = vi.fn(async () => { fullscreen = wrapper.element; document.dispatchEvent(new Event('fullscreenchange')) })
+    const exit = vi.fn(async () => { fullscreen = null; document.dispatchEvent(new Event('fullscreenchange')) })
+    Object.defineProperty(wrapper.element, 'requestFullscreen', { configurable: true, value: enter })
+    Object.defineProperty(document, 'fullscreenElement', { configurable: true, get: () => fullscreen })
+    Object.defineProperty(document, 'exitFullscreen', { configurable: true, value: exit })
+    try {
+      expect(wrapper.classes()).not.toContain('admin-density')
+      const button = wrapper.get('button[aria-pressed]')
+      await button.trigger('click')
+      await flushPromises()
+      expect(enter).toHaveBeenCalledOnce()
+      expect(button.text()).toBe('退出全屏')
+      expect(button.attributes('aria-pressed')).toBe('true')
+      await button.trigger('click')
+      await flushPromises()
+      expect(exit).toHaveBeenCalledOnce()
+      expect(button.text()).toBe('全屏展示')
+      expect(button.attributes('aria-pressed')).toBe('false')
+    } finally {
+      if (previousElement) Object.defineProperty(document, 'fullscreenElement', previousElement)
+      else Reflect.deleteProperty(document, 'fullscreenElement')
+      if (previousExit) Object.defineProperty(document, 'exitFullscreen', previousExit)
+      else Reflect.deleteProperty(document, 'exitFullscreen')
+    }
+  })
 })

src/modules/dashboard/pages/DashboardView.vue

@@ -77,14 +77,6 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 </script>
 
 <template>
-  <!--
-    THESIS: 首页只承载已经接通真实业务数据的四项核心指标。
-    OWN-WORLD: 延续 Admin 冷灰工作面、白色数据面板和柏悦蓝主色；状态色只承担分类与告警。
-    STORY: 运营人员进入首页后直接识别当前核心体量。
-    FIRST VIEWPORT: 顶部状态栏与四项核心指标完整占据首屏。
-    FORM: 既有后台视觉体系的经营驾驶舱结构，基于用户提供的正式原型直接扩展。
-    FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
-  -->
   <section ref="dashboardRef" class="dashboard-view">
     <AdminPage as="div" spacing="normal">
       <section class="dashboard-context" aria-label="数据看板说明">
@@ -121,8 +113,7 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 .dashboard-context { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
 .dashboard-context p { min-width: 0; margin: 0; color: var(--cc-muted, #667085); font-size: 12px; line-height: 1.55; }
 .dashboard-head-actions { display: flex; align-items: center; gap: 14px; color: var(--cc-muted, #667085); font-size: 12px; white-space: nowrap; }
-.dashboard-outline-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--cc-border-strong, #d8deea); border-radius: var(--cc-radius-md, 6px); background: var(--cc-surface, #fff); color: var(--cc-text-secondary, #344054); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
-.dashboard-outline-button { padding: 0 13px; }
+.dashboard-outline-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid var(--cc-border-strong, #d8deea); border-radius: var(--cc-radius-md, 6px); background: var(--cc-surface, #fff); color: var(--cc-text-secondary, #344054); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
 .dashboard-outline-button:hover:not(:disabled) { border-color: var(--cc-primary); color: var(--cc-primary); }
 .dashboard-outline-button:disabled { cursor: wait; opacity: .65; }
 .dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@@ -132,7 +123,7 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 .dashboard-metric.is-purple .dashboard-metric-mark { background: #f1eaff; }
 .dashboard-metric.is-rose .dashboard-metric-mark { background: #fdeaf1; }
 .dashboard-metric p { position: relative; margin: 0 0 25px; color: #5f6573; font-size: 13px; font-weight: 700; }
-.dashboard-metric strong { position: relative; display: block; overflow-wrap: anywhere; font-size: 31px; line-height: 1; letter-spacing: -.02em; }
+.dashboard-metric strong { position: relative; display: block; overflow-wrap: anywhere; font-size: 31px; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
 .dashboard-metric strong small { color: #525866; font-size: 12px; font-weight: 600; letter-spacing: 0; }
 .dashboard-metric > span:last-child { position: relative; display: block; margin-top: 17px; color: #8a91a0; font-size: 11px; }
 @media (max-width: 1180px) {

src/modules/domestic-containers/pages/DomesticContainerInventoryDetailView.test.ts

@@ -4,6 +4,8 @@ import { resolve } from 'node:path'
 
 const source = readFileSync(resolve(process.cwd(), 'src/modules/domestic-containers/pages/DomesticContainerInventoryDetailView.vue'), 'utf8')
 
+const densitySource = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
+
 describe('DomesticContainerInventoryDetailView', () => {
   it('does not invent an action column for immutable transaction history', () => {
     expect(source).not.toContain("label: '操作'")
@@ -17,6 +19,7 @@ describe('DomesticContainerInventoryDetailView', () => {
   })
   it('uses a four-column desktop field grid and preserves long business text', () => {
     expect(source).toContain('grid-template-columns: repeat(4, minmax(0, 1fr))')
-    expect(source).toContain('overflow-wrap: anywhere')
+    expect(source).toContain('class="detail-fields density-fields"')
+    expect(densitySource).toContain('overflow-wrap: anywhere')
   })
 })

src/modules/domestic-containers/pages/DomesticContainerInventoryDetailView.vue

@@ -55,8 +55,9 @@ onMounted(load)
 
 <template>
   <AdminPage as="div" class="inventory-detail-page admin-density">
+    <section class="inventory-overview">
     <header class="detail-header">
-      <el-button aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回</el-button>
+      <el-button link class="density-back" aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回列表</el-button>
       <h1>{{ detail?.inventory.containerNo || '整柜库存详情' }}</h1>
       <StatusBadge v-if="detail" :status="inventoryStatus(detail.inventory.inventoryStatus)" />
     </header>
@@ -65,10 +66,9 @@ onMounted(load)
       <template #details><ApiErrorMeta :details="error" /></template>
     </LoadErrorState>
 
-    <template v-else-if="detail">
-      <section class="detail-section" aria-labelledby="inventory-basic-heading">
+      <section v-else-if="detail" class="detail-section" aria-labelledby="inventory-basic-heading">
         <h2 id="inventory-basic-heading">整柜信息</h2>
-        <dl class="detail-fields">
+        <dl class="detail-fields density-fields">
           <div><dt>货物名称</dt><dd>{{ detail.inventory.cargoName }}</dd></div>
           <div><dt>集装箱号</dt><dd>{{ detail.inventory.containerNo }}</dd></div>
           <div><dt>国内仓</dt><dd>{{ detail.inventory.warehouseName }}</dd></div>
@@ -83,33 +83,30 @@ onMounted(load)
           <div><dt>库存版本</dt><dd>{{ detail.inventory.version }}</dd></div>
         </dl>
       </section>
+      <div v-else class="detail-loading" v-loading="loading">正在加载整柜库存详情</div>
+    </section>
 
-      <section class="transactions" aria-labelledby="transactions-heading">
+      <section v-if="detail && !error" class="transactions" aria-labelledby="transactions-heading">
         <h2 id="transactions-heading">进销存交易记录</h2>
         <DataTable :data="detail.transactions" :columns="transactionColumns" row-key="id" stripe column-settings-mode="hide" empty-text="暂无进销存流水">
           <template #businessType="{ row }"><StatusBadge :status="row.businessType === 'INBOUND' ? '入库' : '出库'" /></template>
         </DataTable>
       </section>
-    </template>
-
-    <div v-else class="detail-loading" v-loading="loading">正在加载整柜库存详情</div>
   </AdminPage>
 </template>
 
 <style scoped>
-.inventory-detail-page { display: grid; min-width: 0; gap: 12px; }
-.detail-header { display: flex; align-items: center; gap: 12px; min-height: 40px; }
-.detail-header h1 { margin: 0; font-size: 16px; letter-spacing: 0; }
-.detail-section, .transactions { min-width: 0; border: 1px solid var(--cc-border); background: #fff; }
-.detail-section { padding: 12px; }
-.detail-section h2, .transactions h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
-.detail-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
-.detail-fields > div { min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 36px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
-.detail-fields dt { display: flex; align-items: center; padding: 6px 8px; background: #f8fafc; color: var(--cc-muted); font-size: 12px; }
-.detail-fields dd { align-self: center; margin: 6px 8px; font-size: 13px; overflow-wrap: anywhere; }
-.transactions { padding-top: 12px; overflow: hidden; }
-.transactions h2 { margin: 0 12px 8px; }
-.detail-loading { min-height: 180px; padding: 24px; border: 1px solid var(--cc-border); background: #fff; color: var(--cc-muted); }
+.inventory-detail-page { display: grid; min-width: 0; gap: var(--admin-space-5, 12px); }
+.inventory-overview { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.detail-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-5, 12px); min-height: 40px; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
+.detail-header h1 { margin: 0; font-size: var(--admin-font-title, 16px); letter-spacing: 0; }
+.transactions { min-width: 0; border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.detail-section { min-width: 0; padding: 0 var(--admin-space-5, 12px) var(--admin-space-5, 12px); }
+.detail-section h2, .transactions h2 { margin: 0; font-size: var(--admin-font-section, 14px); letter-spacing: 0; }
+.detail-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--admin-space-3, 8px) 0 0; }
+.transactions { padding-top: var(--admin-space-5, 12px); overflow: hidden; }
+.transactions h2 { margin: 0 var(--admin-space-5, 12px) var(--admin-space-3, 8px); }
+.detail-loading { min-height: 180px; padding: var(--admin-space-7, 24px); border: 1px solid var(--cc-border); background: var(--admin-surface, #fff); color: var(--cc-muted); }
 @media (max-width: 960px) { .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
 @media (max-width: 520px) { .detail-header { flex-wrap: wrap; } .detail-header h1 { width: 100%; font-size: 18px; } .detail-fields { grid-template-columns: 1fr; } }
 </style>

src/modules/domestic-containers/pages/DomesticContainersView.test.ts

@@ -15,7 +15,7 @@ describe('DomesticContainersView', () => {
     for (const fact of ['summary.inboundBoxes', 'summary.outboundBoxes', 'summary.availableBoxes', 'summary.inboundVolumeCbm']) expect(source).toContain(fact)
     expect(source).toContain("import './domesticContainersSummary.css'")
     expect(summaryStyles).toContain('display: flex; flex-wrap: wrap')
-    expect(summaryStyles).toContain('font-size: 14px')
+    expect(summaryStyles).toContain('font-size: var(--admin-font-section, 14px)')
     expect(summaryStyles).not.toContain('position: absolute')
   })
   it('does not offer an inventory detail action before an inbound has formed inventory', () => { expect(source).toContain("canViewInventory(row as ContainerOrder | InventoryRecord)"); expect(source).toContain("row.status === 'COMPLETED'") })

src/modules/domestic-containers/pages/DomesticContainersView.vue

@@ -2,7 +2,7 @@
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { Eye, Plus } from '@lucide/vue'
+import { Plus } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -74,7 +74,7 @@ watch([page, pageSize], load); onMounted(async () => { await Promise.all([loadWa
 
 <template><AdminPage as="div" class="domestic-containers-page admin-density">
 <LoadErrorState v-if="warehouseError" compact title="国内仓候选加载失败" :message="warehouseError.message" :loading="warehouseLoading" @retry="loadWarehouses"><template #details><ApiErrorMeta :details="warehouseError" /></template></LoadErrorState>
-<ListPageLayout :aria-label="`${activeTab === 'inbound' ? '整柜入库单' : activeTab === 'outbound' ? '整柜出库单' : '整柜库存'}列表`"><template #toolbar><div class="business-query-panel"><div class="status-tabs" role="tablist" aria-label="整柜业务类型"><button v-for="(tab, index) in businessTabs" :key="tab.value" type="button" role="tab" :aria-selected="activeTab === tab.value" aria-controls="domestic-container-results" :tabindex="activeTab === tab.value ? 0 : -1" :class="['status-tab', { 'is-active': activeTab === tab.value }]" @click="switchTab(tab.value)" @keydown="handleTabKeydown($event, index)"><span class="density-tab-icon" aria-hidden="true">{{ tab.icon }}</span>{{ tab.label }}</button></div><QueryToolbar v-model="filters" class="business-query-toolbar" ariaLabel="整柜业务筛选" :fields="queryFields" :preference-key="`domestic-containers-${activeTab}-query`" @search="search" /></div></template><template v-if="loadError" #state><LoadErrorState title="整柜业务加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template><section v-if="!loadError" id="domestic-container-results" class="surface-panel table-panel"><div v-if="activeTab === 'inventory'" class="inventory-summary"><div><span>入库箱数</span><strong>{{ summary.inboundBoxes }}</strong></div><div><span>已出库箱数</span><strong>{{ summary.outboundBoxes }}</strong></div><div><span>当前库存</span><strong>{{ summary.availableBoxes }}</strong></div><div><span>累计入库体积</span><strong>{{ summary.inboundVolumeCbm.toFixed(2) }} m³</strong></div></div><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe row-key="id" :preference-key="`domestic-containers-${activeTab}-table`" :empty-text="activeTab === 'inbound' ? '暂无整柜入库单' : activeTab === 'outbound' ? '暂无整柜出库单' : '暂无整柜库存'"><template #toolbar-actions><el-button v-if="activeTab === 'inbound' && access.can('platform:domestic-container:inbound:create')" type="primary" @click="openInbound"><Plus :size="16" />新建入库单</el-button><el-button v-if="activeTab === 'outbound' && access.can('platform:domestic-container:outbound:create')" type="primary" @click="openOutbound"><Plus :size="16" />新建出库单</el-button></template><template #actions="{ row }"><el-button v-if="canViewInventory(row as ContainerOrder | InventoryRecord)" size="small" type="primary" plain @click="viewInventory(row as ContainerOrder | InventoryRecord)"><Eye :size="15" />查看</el-button><span v-else>—</span></template><template #status="{ row }"><StatusBadge :status="statusLabel(row as ContainerOrder | InventoryRecord)" /></template></DataTable></section></ListPageLayout>
+<ListPageLayout :aria-label="`${activeTab === 'inbound' ? '整柜入库单' : activeTab === 'outbound' ? '整柜出库单' : '整柜库存'}列表`"><template #toolbar><div class="business-query-panel"><div class="status-tabs" role="tablist" aria-label="整柜业务类型"><button v-for="(tab, index) in businessTabs" :key="tab.value" type="button" role="tab" :aria-selected="activeTab === tab.value" aria-controls="domestic-container-results" :tabindex="activeTab === tab.value ? 0 : -1" :class="['status-tab', { 'is-active': activeTab === tab.value }]" @click="switchTab(tab.value)" @keydown="handleTabKeydown($event, index)"><span class="density-tab-icon" aria-hidden="true">{{ tab.icon }}</span>{{ tab.label }}</button></div><QueryToolbar v-model="filters" class="business-query-toolbar" ariaLabel="整柜业务筛选" :fields="queryFields" :preference-key="`domestic-containers-${activeTab}-query`" @search="search" /></div></template><template v-if="loadError" #state><LoadErrorState title="整柜业务加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template><section v-if="!loadError" id="domestic-container-results" class="surface-panel table-panel"><div v-if="activeTab === 'inventory'" class="inventory-summary"><div><span>入库箱数</span><strong>{{ summary.inboundBoxes }}</strong></div><div><span>已出库箱数</span><strong>{{ summary.outboundBoxes }}</strong></div><div><span>当前库存</span><strong>{{ summary.availableBoxes }}</strong></div><div><span>累计入库体积</span><strong>{{ summary.inboundVolumeCbm.toFixed(2) }} m³</strong></div></div><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe row-key="id" :preference-key="`domestic-containers-${activeTab}-table`" :empty-text="activeTab === 'inbound' ? '暂无整柜入库单' : activeTab === 'outbound' ? '暂无整柜出库单' : '暂无整柜库存'"><template #toolbar-actions><el-button v-if="activeTab === 'inbound' && access.can('platform:domestic-container:inbound:create')" type="primary" @click="openInbound"><Plus :size="16" />新建入库单</el-button><el-button v-if="activeTab === 'outbound' && access.can('platform:domestic-container:outbound:create')" type="primary" @click="openOutbound"><Plus :size="16" />新建出库单</el-button></template><template #actions="{ row }"><el-button v-if="canViewInventory(row as ContainerOrder | InventoryRecord)" class="density-action" size="small" @click="viewInventory(row as ContainerOrder | InventoryRecord)">查看</el-button><span v-else>—</span></template><template #status="{ row }"><StatusBadge :status="statusLabel(row as ContainerOrder | InventoryRecord)" /></template></DataTable></section></ListPageLayout>
 <AppDialog v-model="dialogOpen" class="domestic-container-create-dialog admin-density-dialog" :title="dialogType === 'inbound' ? '新建整柜入库单' : '新建整柜出库单'" width="min(720px, calc(100vw - 28px))" :confirm-loading="saving" :close-on-click-modal="false" :confirm-text="dialogType === 'inbound' ? '创建入库单' : '创建出库单'" @confirm="submit"><LoadErrorState v-if="submitError" compact title="创建失败" :message="submitError.message" :show-retry="false"><template #details><ApiErrorMeta :details="submitError" /></template></LoadErrorState><el-form ref="formRef" :model="currentForm" :rules="rules" label-position="top"><el-row :gutter="16"><template v-if="dialogType === 'inbound'"><el-col :xs="24" :sm="12"><el-form-item label="国内仓" prop="warehouseId"><el-select v-model="inboundForm.warehouseId" :loading="warehouseLoading" :disabled="Boolean(warehouseError)" placeholder="请选择启用的国内仓"><el-option v-for="item in warehouseOptions" :key="String(item.value)" :label="item.label" :value="String(item.value)" /></el-select></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="货物名称" prop="cargoName"><el-input v-model="inboundForm.cargoName" maxlength="128" placeholder="请输入货物名称" /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="集装箱号" prop="containerNo"><el-input v-model="inboundForm.containerNo" maxlength="32" placeholder="如 MSCU1234567" /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="箱子数量" prop="boxCount"><el-input-number v-model="inboundForm.boxCount" :min="1" :max="999999999" :precision="0" controls-position="right" placeholder="请输入入库箱数" /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="体积(m³)" prop="volumeCbm"><el-input-number v-model="inboundForm.volumeCbm" :min="0.0001" :max="999999999999.9999" :precision="4" controls-position="right" placeholder="请输入体积" /></el-form-item></el-col></template><template v-else><el-col :xs="24" :sm="12"><el-form-item label="国内仓" prop="warehouseId"><el-select v-model="outboundForm.warehouseId" :loading="warehouseLoading" :disabled="Boolean(warehouseError)" placeholder="请选择启用的国内仓" @change="loadCandidates"><el-option v-for="item in warehouseOptions" :key="String(item.value)" :label="item.label" :value="String(item.value)" /></el-select></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="绑定集装箱号" prop="containerNo"><el-select v-model="outboundForm.inventoryId" :loading="candidateLoading" :disabled="!outboundForm.warehouseId || Boolean(candidateError)" placeholder="请选择已有集装箱号" @change="selectInventory"><el-option v-for="item in inventoryCandidates" :key="String(item.id)" :label="`${item.containerNo} · 可用 ${item.availableBoxes} 箱`" :value="String(item.id)" /></el-select><input v-model="outboundForm.containerNo" class="sr-only" tabindex="-1"></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="货物名称"><el-input v-model="outboundForm.cargoName" readonly /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="出库箱数" prop="boxCount"><el-input-number v-model="outboundForm.boxCount" :min="1" :max="999999999" :precision="0" controls-position="right" placeholder="请输入出库箱数" /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="可用库存"><el-input :model-value="`${outboundForm.availableBoxes} 箱`" readonly /></el-form-item></el-col><el-col v-if="candidateError" :xs="24"><LoadErrorState compact title="可出库库存加载失败" :message="candidateError.message" @retry="loadCandidates"><template #details><ApiErrorMeta :details="candidateError" /></template></LoadErrorState></el-col></template><el-col :xs="24" :sm="12"><el-form-item :label="dialogType === 'inbound' ? '入库时间' : '出库时间'" prop="operationTime"><el-date-picker v-model="currentForm.operationTime" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" format="YYYY-MM-DD HH:mm" /></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="状态" prop="status"><el-select v-model="currentForm.status"><el-option :label="dialogType === 'inbound' ? '已入库' : '已出库'" value="COMPLETED" /><el-option :label="dialogType === 'inbound' ? '待入库' : '待出库'" value="PENDING" /></el-select></el-form-item></el-col><el-col :xs="24"><el-form-item label="备注"><el-input v-model="currentForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" /></el-form-item></el-col></el-row></el-form></AppDialog></AdminPage></template>
 
-<style scoped>.domestic-containers-page{min-width:0}.business-query-panel{overflow:hidden;border:1px solid var(--cc-border);border-radius:4px;background:#fff}.status-tabs{display:flex;max-width:100%;overflow-x:auto;margin-bottom:0;border-bottom:1px solid #e5e7eb;background:#f9fafb;scrollbar-width:thin}.status-tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 16px;border:0;background:transparent;color:var(--cc-muted);font:inherit;font-size:13px;cursor:pointer}.status-tab::after{position:absolute;right:12px;bottom:0;left:12px;height:3px;background:transparent;content:''}.status-tab:hover{color:var(--cc-primary);background:#f6f9fd}.status-tab:focus-visible{outline:2px solid var(--cc-primary);outline-offset:-2px}.status-tab.is-active{color:var(--cc-primary);font-weight:600}.status-tab.is-active::after{background:var(--cc-primary)}.business-query-toolbar{border:0}.inventory-summary{display:flex;align-items:center;gap:0;margin:0 16px 12px;border:1px solid var(--cc-border);background:#f8fafc}.inventory-summary>div{display:flex;align-items:baseline;gap:8px;min-width:0;padding:9px 16px;border-right:1px solid var(--cc-border)}.inventory-summary>div:last-child{border-right:0}.inventory-summary span{color:var(--cc-muted);font-size:12px}.inventory-summary strong{font-size:15px}.domestic-container-create-dialog :deep(.el-select),.domestic-container-create-dialog :deep(.el-date-editor),.domestic-container-create-dialog :deep(.el-input-number){width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.status-tab{min-height:46px;padding:0 14px}.inventory-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-summary>div:nth-child(2){border-right:0}.inventory-summary>div:nth-child(-n+2){border-bottom:1px solid var(--cc-border)}}@media(max-width:360px){.status-tab{padding:0 10px;font-size:13px}.inventory-summary{grid-template-columns:1fr}.inventory-summary>div{border-right:0;border-bottom:1px solid var(--cc-border)}.inventory-summary>div:last-child{border-bottom:0}}</style>
+<style scoped>.domestic-containers-page{min-width:0}.business-query-panel{overflow:hidden;border:1px solid var(--cc-border);border-radius:var(--admin-radius, 4px);background:var(--admin-surface, #fff)}.status-tabs{display:flex;max-width:100%;overflow-x:auto;margin-bottom:0;border-bottom:1px solid var(--admin-table-border, #e5e7eb);background:#f9fafb;scrollbar-width:thin}.status-tab{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--admin-space-2, 6px);min-height:var(--admin-tab-height, 38px);padding:0 var(--admin-space-6, 16px);border:0;background:transparent;color:var(--cc-muted);font:inherit;font-size:var(--admin-font-body, 13px);cursor:pointer}.status-tab::after{position:absolute;right:12px;bottom:0;left:12px;height:3px;background:transparent;content:''}.status-tab:hover{color:var(--cc-primary);background:#f6f9fd}.status-tab:focus-visible{outline:2px solid var(--cc-primary);outline-offset:-2px}.status-tab.is-active{color:var(--cc-primary);font-weight:600}.status-tab.is-active::after{background:var(--cc-primary)}.business-query-toolbar{border:0}.inventory-summary{display:flex;align-items:center;gap:0;margin:0 var(--admin-space-6, 16px) var(--admin-space-5, 12px);border:1px solid var(--cc-border);background:var(--admin-label-bg, #f8fafc)}.inventory-summary>div{display:flex;align-items:baseline;gap:var(--admin-space-3, 8px);min-width:0;padding:9px var(--admin-space-6, 16px);border-right:1px solid var(--cc-border)}.inventory-summary>div:last-child{border-right:0}.inventory-summary span{color:var(--cc-muted);font-size:var(--admin-font-caption, 12px)}.inventory-summary strong{font-size:15px}.domestic-container-create-dialog :deep(.el-select),.domestic-container-create-dialog :deep(.el-date-editor),.domestic-container-create-dialog :deep(.el-input-number){width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.status-tab{min-height:46px;padding:0 14px}.inventory-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-summary>div:nth-child(2){border-right:0}.inventory-summary>div:nth-child(-n+2){border-bottom:1px solid var(--cc-border)}}@media(max-width:360px){.status-tab{padding:0 10px;font-size:13px}.inventory-summary{grid-template-columns:1fr}.inventory-summary>div{border-right:0;border-bottom:1px solid var(--cc-border)}.inventory-summary>div:last-child{border-bottom:0}}</style>

src/modules/domestic-containers/pages/domesticContainersSummary.css

@@ -1,9 +1,9 @@
 .domestic-containers-page .table-panel .inventory-summary {
-  display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0;
-  padding: 8px 12px; border: 0; border-bottom: 1px solid var(--cc-border); background: #fff;
+  display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) 28px; margin: 0;
+  padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); border: 0; border-bottom: 1px solid var(--cc-border); background: var(--admin-surface, #fff);
 }
 .domestic-containers-page .table-panel .inventory-summary > div {
-  display: flex; align-items: baseline; min-width: 0; gap: 8px; padding: 0; border: 0;
+  display: flex; align-items: baseline; min-width: 0; gap: var(--admin-space-3, 8px); padding: 0; border: 0;
 }
-.domestic-containers-page .table-panel .inventory-summary span { color: var(--cc-muted); font-size: 12px; }
-.domestic-containers-page .table-panel .inventory-summary strong { font-size: 14px; font-weight: 600; }
+.domestic-containers-page .table-panel .inventory-summary span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.domestic-containers-page .table-panel .inventory-summary strong { font-size: var(--admin-font-section, 14px); font-weight: 600; }

src/modules/downloads/pages/DownloadCenterView.test.ts

@@ -161,7 +161,8 @@ describe('DownloadCenterView', () => {
     expect(document.body.textContent).toContain('任务详情 · EXP9')
     expect(document.body.textContent).toContain('客户列表.xlsx')
     expect(document.querySelector('.el-drawer')).toBeNull()
-    expect(document.querySelector('.el-dialog')).not.toBeNull()
+    expect(document.querySelector('.el-dialog.admin-density-dialog')).not.toBeNull()
+    expect(document.querySelectorAll('.task-detail-grid.density-fields > div')).toHaveLength(11)
     const detailDownload = [...document.querySelectorAll<HTMLButtonElement>('button')]
       .find((item) => item.textContent?.trim() === '下载文件')
     detailDownload?.click()

src/modules/downloads/pages/DownloadCenterView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { Download, Eye, RotateCcw } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
 import {
@@ -263,7 +263,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-density">
   <div class="business-page download-center-page">
     <ListPageLayout ariaLabel="下载任务列表">
       <template #toolbar>
@@ -284,10 +284,10 @@ onBeforeUnmount(() => {
       </div>
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="downloads-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无符合筛选条件的下载任务" aria-label="下载任务列表">
         <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个任务</span></template>
-        <template #actions="{ row }"><div class="table-actions">
-          <el-button v-if="(row as PlatformExportTask)?.id" link type="primary" @click="openDetail(row as PlatformExportTask)"><Eye :size="15" />详情</el-button>
-          <el-button v-if="(row as PlatformExportTask).status === 'SUCCEEDED'" link type="primary" :loading="downloadingId === (row as PlatformExportTask).id" @click="downloadTask(row as PlatformExportTask)"><Download :size="15" />下载</el-button>
-          <el-button v-if="canRetry(row as PlatformExportTask)" link type="primary" :loading="retryingId === (row as PlatformExportTask).id" @click="retryTask(row as PlatformExportTask)"><RotateCcw :size="15" />{{ retryLabel(row as PlatformExportTask) }}</el-button>
+        <template #actions="{ row }"><div class="table-actions density-actions">
+          <el-button data-tone="neutral" class="density-action" v-if="(row as PlatformExportTask)?.id" @click="openDetail(row as PlatformExportTask)">详情</el-button>
+          <el-button data-tone="neutral" class="density-action" v-if="(row as PlatformExportTask).status === 'SUCCEEDED'" :loading="downloadingId === (row as PlatformExportTask).id" @click="downloadTask(row as PlatformExportTask)">下载</el-button>
+          <el-button data-tone="neutral" class="density-action" v-if="canRetry(row as PlatformExportTask)" :loading="retryingId === (row as PlatformExportTask).id" @click="retryTask(row as PlatformExportTask)">{{ retryLabel(row as PlatformExportTask) }}</el-button>
         </div></template>
         <template #type="{ row }">{{ typeLabel((row as PlatformExportTask).exportType) }}</template>
         <template #status="{ row }"><el-tag :type="taskStatusMeta(row as PlatformExportTask).type" effect="light">{{ taskStatusMeta(row as PlatformExportTask).label }}</el-tag></template>
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
     </section>
     </ListPageLayout>
 
-    <AppDialog
+    <AppDialog class="admin-density-dialog"
       v-model="detailOpen"
       :title="detailTask ? `任务详情 · ${detailTask.taskNo}` : '任务详情'"
       width="min(720px, calc(100vw - 28px))"
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
           </div>
           <el-tag :type="taskStatusMeta(detailTask).type" effect="light">{{ taskStatusMeta(detailTask).label }}</el-tag>
         </div>
-        <dl class="task-detail-grid">
+        <dl class="task-detail-grid density-fields">
           <div><dt>任务编号</dt><dd>{{ detailTask.taskNo }}</dd></div>
           <div><dt>申请人</dt><dd>{{ detailTask.requestedUsername || detailTask.requestedBy }}</dd></div>
           <div><dt>申请时间</dt><dd>{{ formatDate(detailTask.requestedAt) }}</dd></div>
@@ -363,34 +363,28 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.task-detail-grid.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.task-detail-grid .is-wide { grid-column: 1 / -1; }
 .download-center-page { min-width: 0; }
-.download-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.download-error { padding: 18px; }
-.download-error strong { color: var(--cc-danger); font-size: 14px; }
-.download-error p { margin: 5px 0; color: var(--cc-text); font-size: 13px; }
-.download-sync-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #fedf89; background: #fffaeb; color: #93370d; font-size: 12px; }
-.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
-.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
+.download-error { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); }
+.download-error { padding: var(--admin-space-6); }
+.download-error strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
+.download-error p { margin: 5px 0; color: var(--cc-text); font-size: var(--admin-font-body); }
+.download-sync-warning { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid #fedf89; background: #fffaeb; color: #93370d; font-size: var(--admin-font-caption); }
 .failure-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .failure-message { color: var(--cc-danger); }
 .detail-load-error { display: flex; min-height: 220px; align-items: flex-start; justify-content: center; flex-direction: column; }
-.detail-load-error strong { color: var(--cc-danger); font-size: 15px; }
-.detail-load-error p { margin: 6px 0; color: var(--cc-text); font-size: 13px; }
-.detail-load-error :deep(.el-button) { margin-top: 16px; }
+.detail-load-error strong { color: var(--cc-danger); font-size: var(--admin-font-section); }
+.detail-load-error p { margin: var(--admin-space-2) 0; color: var(--cc-text); font-size: var(--admin-font-body); }
+.detail-load-error :deep(.el-button) { margin-top: var(--admin-space-6); }
 .task-detail { min-width: 0; }
-.task-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cc-border); }
-.task-detail-summary h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 17px; }
-.task-detail-summary p { margin: 6px 0 0; color: var(--cc-muted); font-size: 12px; }
-.task-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
-.task-detail-grid > div { min-width: 0; padding: 16px 14px; border-bottom: 1px solid var(--cc-border); }
-.task-detail-grid > div:nth-child(odd):not(.is-wide) { border-right: 1px solid var(--cc-border); }
-.task-detail-grid .is-wide { grid-column: 1 / -1; }
-.task-detail-grid dt { margin-bottom: 6px; color: var(--cc-muted); font-size: 12px; }
-.task-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.5; }
-.task-failure { margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; background: color-mix(in srgb, var(--cc-danger) 5%, #fff); }
-.task-failure strong { color: var(--cc-danger); font-size: 13px; }
-.task-failure p { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.6; }
-small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: 11px; }
+.task-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-6); padding-bottom: var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
+.task-detail-summary h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-section); }
+.task-detail-summary p { margin: var(--admin-space-2) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.task-failure { margin-top: var(--admin-space-6); padding: var(--admin-space-5); border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: var(--admin-radius); background: color-mix(in srgb, var(--cc-danger) 5%, #fff); }
+.task-failure strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
+.task-failure p { margin: var(--admin-space-2) 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body); line-height: 1.6; }
+small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: var(--admin-font-caption); }
 @media (max-width: 720px) {
   .download-error, .download-sync-warning { align-items: stretch; flex-direction: column; }
   .table-actions :deep(.el-button) { min-height: 44px; }

src/modules/fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { AlertTriangle, ArrowLeft, CircleCheck, Download, FileSpreadsheet, RefreshCw, Ship, Warehouse } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -11,7 +12,7 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
-import PageToolbar from '@/shared/components/PageToolbar.vue'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
 import {
   downloadPlatformPriceBookSource,
   getPlatformPriceBook,
@@ -384,7 +385,7 @@ async function confirmPriceBook() {
     await ElMessageBox.confirm(
       `确认后，该价格表会立即成为“${priceBookScopeLabel(detail.value.version.customerId)}”的唯一生效版本，并仅替换同一报价范围的当前生效版本。历史版本和原始文件将继续保留。`,
       '确认并生效船期价格表',
-      { type: 'warning', confirmButtonText: '确认并立即生效', cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认并立即生效', cancelButtonText: '取消' },
     )
   } catch (error) {
     if (error === 'cancel' || error === 'close') return
@@ -430,37 +431,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="price-book-detail" spacing="normal">
-    <DetailPageLayout aria-label="船期价格表版本详情">
+  <AdminPage as="div" class="price-book-detail admin-density" spacing="normal">
+    <DetailPageLayout class="density-detail-layout surface-panel" aria-label="船期价格表版本详情">
       <template #header>
-        <div class="detail-heading">
-          <el-button @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
-          <PageToolbar
-            class="detail-toolbar"
-            as="section"
-            :title="detail ? `船期价格表 · V${detail.version.versionNo}` : '船期价格表详情'"
-            :description="detail ? `${priceBookScopeLabel(detail.version.customerId)} · 上传于 ${formatDateTime(detail.version.createdAt)}` : '查看版本、仓库映射和渠道价格'"
-          >
-            <template v-if="detail" #actions>
-              <el-tag :type="priceBookStatusMeta(detail.version.status).type" effect="light">{{ priceBookStatusMeta(detail.version.status).label }}</el-tag>
-              <el-button :loading="downloading" @click="downloadSource"><Download :size="16" />下载原文件</el-button>
-              <el-button v-if="isPending && canEdit" type="primary" :loading="publishing" :disabled="!canConfirm" @click="confirmPriceBook"><CircleCheck :size="16" />确认并立即生效</el-button>
-            </template>
-          </PageToolbar>
+        <div class="density-detail-header">
+          <div class="density-detail-heading">
+            <el-button link class="density-back" @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
+            <h1 class="density-detail-title">{{ detail ? '船期价格表 · V' + detail.version.versionNo : '船期价格表详情' }}</h1>
+            <StatusBadge v-if="detail" :status="priceBookStatusMeta(detail.version.status).label" />
+          </div>
+          <div v-if="detail" class="price-book-header-actions">
+            <el-button :loading="downloading" @click="downloadSource"><Download :size="16" />下载原文件</el-button>
+            <el-button v-if="isPending && canEdit" type="primary" :loading="publishing" :disabled="!canConfirm" @click="confirmPriceBook"><CircleCheck :size="16" />确认并立即生效</el-button>
+          </div>
         </div>
       </template>
+      <template v-if="detail" #summary>
+        <dl class="density-detail-overview">
+          <div><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
+          <div><dt>上传时间</dt><dd>{{ formatDateTime(detail.version.createdAt) }}</dd></div>
+        </dl>
+      </template>
 
       <LoadErrorState v-if="loadError" title="船期价格表详情加载失败" :message="loadError.message" :loading="loading" @retry="loadDetail">
         <template #details><ApiErrorMeta :details="loadError" /></template>
       </LoadErrorState>
 
       <template v-else-if="detail">
-        <section class="surface-panel version-panel">
+        <section class="version-panel">
           <header class="section-heading">
             <div><h2><FileSpreadsheet :size="18" />版本信息</h2><p>{{ detail.version.originalFileName }}</p></div>
           </header>
-          <dl class="detail-grid">
-            <div><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
+          <dl class="detail-grid density-fields">
             <div><dt>解析渠道</dt><dd>{{ detail.version.channelCount }}</dd></div>
             <div><dt>解析价格行</dt><dd>{{ detail.version.rateCount }}</dd></div>
             <div><dt>阻断错误</dt><dd :class="{ 'is-danger': detail.version.blockingErrorCount }">{{ detail.version.blockingErrorCount }}</dd></div>
@@ -470,7 +472,7 @@ onMounted(() => {
           </dl>
         </section>
 
-        <section v-if="isPending && canEdit" class="surface-panel mapping-section">
+        <section v-if="isPending && canEdit" class="mapping-section">
           <header class="section-heading"><div><h2><Warehouse :size="18" />仓库映射</h2><p>来源编码必须匹配启用的平台公共仓库编码。</p></div></header>
           <el-alert
             v-if="nonMappingBlockingIssues.length"
@@ -509,7 +511,7 @@ onMounted(() => {
           </div>
         </section>
 
-        <section class="surface-panel detail-section">
+        <section class="detail-section">
           <header class="section-heading"><div><h2><AlertTriangle :size="18" />解析与校验</h2><p>阻断错误未解决时不能生效；价格行不可在页面内修改。</p></div></header>
           <el-empty v-if="!detail.issues.length" description="未发现解析问题" :image-size="72" />
           <el-table v-else :data="detail.issues" size="small" max-height="280" aria-label="价格表解析问题">
@@ -520,12 +522,12 @@ onMounted(() => {
           </el-table>
         </section>
 
-        <section class="surface-panel detail-section channel-preview">
+        <section class="detail-section channel-preview">
           <header class="section-heading"><div><h2><Ship :size="18" />按渠道预览</h2><p>显示上传 Excel 的解析结果，确认页不提供在线改价。</p></div></header>
           <el-empty v-if="!detail.channels.length" description="未解析出渠道" :image-size="72" />
           <template v-else>
-            <el-tabs v-model="selectedChannelCode" class="channel-tabs">
-              <el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :label="channel.channelName" :name="channel.channelCode" />
+            <el-tabs v-model="selectedChannelCode" class="channel-tabs density-element-tabs">
+              <el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :name="channel.channelCode"><template #label><span class="density-tab-icon" aria-hidden="true">🚢</span>{{ channel.channelName }}</template></el-tab-pane>
             </el-tabs>
             <div class="channel-meta"><span>{{ priceModelLabel(selectedChannel?.priceModel || '') }}</span><span>表页：{{ selectedChannel?.sourceSheetName || '—' }}</span></div>
             <el-table :data="selectedChannelRates" size="small" max-height="440" border stripe aria-label="渠道价格行预览">
@@ -552,38 +554,32 @@ onMounted(() => {
 
 <style scoped>
 .price-book-detail { min-width: 0; max-width: 1880px; }
-.detail-heading { display: flex; min-width: 0; align-items: flex-start; gap: 16px; }
-.detail-toolbar { min-width: 0; flex: 1; }
-.detail-toolbar :deep(.page-toolbar__actions) { align-items: center; }
-.surface-panel { padding: 16px; }
-.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
-.section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cc-text); font-size: 15px; }
+.version-panel, .mapping-section, .detail-section { padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--cc-border); }
+.detail-section:last-child { border-bottom: 0; }
+.price-book-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
+.detail-grid .detail-grid__wide { grid-column: 1 / -1; }
+.section-heading > div { min-width: 0; }
+.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
+.section-heading h2 { display: flex; align-items: center; gap: var(--admin-space-3); margin: 0; color: var(--cc-text); font-size: var(--admin-font-section); }
 .section-heading h2 svg { color: var(--cc-primary); }
-.section-heading p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
-.detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border: 1px solid var(--cc-border); border-radius: 8px; overflow: hidden; }
-.detail-grid > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--cc-border); background: var(--cc-surface-soft, #f8fafc); }
-.detail-grid > div:nth-child(5n) { border-right: 0; }
-.detail-grid__wide { grid-column: span 3; border-top: 1px solid var(--cc-border); }
-.detail-grid__wide + .detail-grid__wide { grid-column: span 2; }
-.detail-grid dt { color: var(--cc-muted); font-size: 11px; }
-.detail-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 14px; font-weight: 700; }
+.section-heading p { overflow-wrap: anywhere; margin: 5px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.55; }
 .is-danger { color: var(--el-color-danger) !important; }
-.mapping-section, .detail-section { display: grid; min-width: 0; gap: 14px; }
+.mapping-section, .detail-section { display: grid; min-width: 0; gap: var(--admin-space-5); }
 .mapping-section .section-heading, .detail-section .section-heading { margin-bottom: 0; }
-.mapping-groups { display: grid; gap: 14px; }
-.mapping-group { display: grid; gap: 8px; }
-.mapping-group h3 { margin: 0; color: var(--cc-text); font-size: 13px; }
-.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: 16px; padding: 11px 12px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-soft, #f8fafc); }
-.mapping-row > div { display: grid; min-width: 0; gap: 4px; }
-.mapping-row strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; }
-.mapping-row span { color: var(--cc-muted); font-size: 12px; }
+.mapping-groups { display: grid; gap: var(--admin-space-5); }
+.mapping-group { display: grid; gap: var(--admin-space-3); }
+.mapping-group h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-body); }
+.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: var(--admin-space-6); padding: var(--admin-space-5) var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--cc-surface-soft, #f8fafc); }
+.mapping-row > div { display: grid; min-width: 0; gap: var(--admin-space-1); }
+.mapping-row strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body); }
+.mapping-row span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .mapping-row :deep(.el-select) { width: 100%; }
-.mapping-load-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; }
-.mapping-load-error strong { color: var(--cc-danger); font-size: 13px; }
-.mapping-load-error p { margin: 4px 0; color: var(--cc-text); font-size: 12px; }
+.mapping-load-error { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-5); border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: var(--admin-radius); }
+.mapping-load-error strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
+.mapping-load-error p { margin: var(--admin-space-1) 0; color: var(--cc-text); font-size: var(--admin-font-caption); }
 .channel-tabs { width: 100%; min-width: 0; margin-bottom: 0; overflow: hidden; }
 .channel-preview :deep(.el-table) { width: 100%; max-width: 100%; min-width: 0; }
-.channel-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 0; color: var(--cc-muted); font-size: 12px; }
+.channel-meta { display: flex; flex-wrap: wrap; gap: var(--admin-space-2) var(--admin-space-5); margin: calc(-1 * var(--admin-space-1)) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
 @media (max-width: 720px) {
   .detail-heading, .mapping-load-error { align-items: stretch; flex-direction: column; }
   .detail-toolbar { width: 100%; }

src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.test.ts

@@ -126,12 +126,12 @@ describe('CarrierRatesView price-book source contract', () => {
     expect(source).toContain('<DataTable')
     expect(source).toContain(':columns="columns"')
     expect(detailSource).toContain('border stripe aria-label="渠道价格行预览"')
-    expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail')
-    expect(source).toMatch(/size="small"\r?\n\s+plain\r?\n\s+:loading="downloadingIds\.has/)
-    expect(source).toContain('<Eye :size="15" />{{ detailActionLabel')
-    expect(source).toContain('<Download :size="15" />原文件')
+    expect(source).toContain('<el-button data-tone="neutral" class="density-action"')
+    expect(source).toMatch(/:loading="downloadingIds\.has/)
+    expect(source).toContain('{{ detailActionLabel')
+    expect(source).toContain('原文件</el-button>')
     expect(detailSource).toContain('<CircleCheck :size="16" />确认并立即生效')
-    expect(detailSource).toContain("import PageToolbar from '@/shared/components/PageToolbar.vue'")
+    expect(detailSource).toContain('class="density-detail-header"')
     expect(source).not.toContain('<el-button link type="primary" @click="openDetail')
   })
 
@@ -151,9 +151,9 @@ describe('CarrierRatesView price-book source contract', () => {
   })
 
   it('keeps all row actions directly visible without a premature more menu', () => {
-    expect(source).toContain('<Eye :size="15" />{{ detailActionLabel')
-    expect(source).toContain('<Download :size="15" />原文件')
-    expect(source).toContain('<CircleX :size="15" />作废')
+    expect(source).toContain('{{ detailActionLabel')
+    expect(source).toContain('原文件</el-button>')
+    expect(source).toContain('作废</el-button>')
     expect(source).not.toContain('MoreHorizontal')
   })
 })

src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
-import { CircleX, Download, Eye, FileSpreadsheet, FileUp } from '@lucide/vue'
+import { FileSpreadsheet, FileUp } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -268,6 +269,7 @@ async function voidPending(row: PlatformPriceBookVersion) {
       `作废后，版本 V${row.versionNo} 将不能再确认生效；版本记录和原始文件会继续保留。`,
       '作废待确认价格表',
       {
+        customClass: 'admin-density-confirm',
         type: 'warning',
         confirmButtonText: '确认作废',
         cancelButtonText: '取消',
@@ -315,7 +317,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="price-book-page" spacing="normal">
+  <AdminPage as="div" class="price-book-page admin-density" spacing="normal">
     <ListPageLayout aria-label="承运商报价版本管理">
       <template #toolbar>
         <QueryToolbar
@@ -357,22 +359,22 @@ onMounted(() => {
       >
         <template #toolbar-actions><el-button v-if="canEdit" type="primary" @click="openUpload"><FileUp :size="16" />上传价格表</el-button></template>
         <template #actions="{ row }">
-          <div class="table-actions">
-            <el-button size="small" plain type="primary" @click="openDetail(row as PlatformPriceBookVersion)"><Eye :size="15" />{{ detailActionLabel(row as PlatformPriceBookVersion) }}</el-button>
-            <el-button
+          <div class="table-actions density-actions">
+            <el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row as PlatformPriceBookVersion)">{{ detailActionLabel(row as PlatformPriceBookVersion) }}</el-button>
+            <el-button data-tone="neutral" class="density-action"
               size="small"
-              plain
+
               :loading="downloadingIds.has((row as PlatformPriceBookVersion).id)"
               @click="downloadSource(row as PlatformPriceBookVersion)"
-            ><Download :size="15" />原文件</el-button>
-            <el-button
+            >原文件</el-button>
+            <el-button data-tone="danger" class="density-action"
               v-if="canEdit && (row as PlatformPriceBookVersion).status === 'PENDING_CONFIRMATION'"
               size="small"
-              plain
-              type="danger"
+
+
               :loading="voidingIds.has((row as PlatformPriceBookVersion).id)"
               @click="voidPending(row as PlatformPriceBookVersion)"
-            ><CircleX :size="15" />作废</el-button>
+            >作废</el-button>
           </div>
         </template>
         <template #version="{ row }"><div class="version-cell"><strong>V{{ (row as PlatformPriceBookVersion).versionNo }}</strong></div></template>
@@ -386,7 +388,7 @@ onMounted(() => {
       </section>
     </ListPageLayout>
 
-    <AppDialog
+    <AppDialog class="admin-density-dialog"
       v-model="uploadOpen"
       title="上传船期价格表"
       width="min(560px, calc(100vw - 28px))"
@@ -416,25 +418,23 @@ onMounted(() => {
 
 <style scoped>
 .price-book-page { min-width: 0; }
-.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
-.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .version-cell { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
 .version-cell strong { color: var(--cc-text); }
-.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: 11px; }
-.metric-cell, .issue-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
-.metric-cell strong { color: var(--cc-text); font-size: 14px; }
-.issue-counts { color: var(--cc-muted); font-size: 12px; }
+.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.metric-cell, .issue-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--admin-space-1) var(--admin-space-3); }
+.metric-cell strong { color: var(--cc-text); font-size: var(--admin-font-body); }
+.issue-counts { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .issue-counts .is-blocking, .is-danger { color: var(--el-color-danger); font-weight: 700; }
-.upload-content { display: grid; gap: 18px; }
-.upload-scope-field { display: grid; gap: 6px; color: var(--cc-muted); font-size: 12px; }
+.upload-content { display: grid; gap: var(--admin-space-6); }
+.upload-scope-field { display: grid; gap: var(--admin-space-2); color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .upload-scope-field :deep(.el-select) { width: 100%; }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
-.upload-file-control { display: flex; align-items: center; gap: 14px; }
-.upload-file-name { display: grid; min-width: 0; gap: 3px; color: var(--cc-text); font-size: 13px; }
+.upload-file-control { display: flex; align-items: center; gap: var(--admin-space-5); }
+.upload-file-name { display: grid; min-width: 0; gap: 3px; color: var(--cc-text); font-size: var(--admin-font-body); }
 .upload-file-name strong { overflow-wrap: anywhere; }
-.upload-file-name span { color: var(--cc-muted); font-size: 12px; }
+.upload-file-name span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .upload-file-name.is-empty strong { color: var(--cc-muted); font-weight: 400; }
-.upload-file-error { margin: -8px 0 0; color: var(--el-color-danger); font-size: 12px; }
+.upload-file-error { margin: calc(-1 * var(--admin-space-3)) 0 0; color: var(--el-color-danger); font-size: var(--admin-font-caption); }
 @media (max-width: 720px) {
   .table-actions :deep(.el-button) { min-height: 40px; }
   .upload-file-control { align-items: stretch; flex-direction: column; }

src/modules/fee-items/pages/FeeItemsView.test.ts

@@ -100,17 +100,14 @@ describe('FeeItemsView public master data and access', () => {
   })
 
   it('keeps all three row actions visible without a premature more menu', () => {
-    expect(source).toContain('size="small" plain type="primary"')
-    expect(source).toContain('size="small"\n                plain\n                :type=')
-    expect(source).toContain('size="small" plain type="danger"')
-    expect(source).toContain('<Pencil :size="15" />编辑')
-    expect(source).toContain('<Power :size="15" />')
-    expect(source).toContain('<Trash2 :size="15" />删除')
-    expect(source).not.toContain('MoreHorizontal')
-    expect(source).not.toContain("access.can('firstleg:fee-item:edit')\" link")
-    expect(source).not.toContain("access.can('firstleg:fee-item:delete')\" link")
+    const actions = source.slice(source.indexOf('<template #actions='), source.indexOf('</template>', source.indexOf('<template #actions=')))
+    expect(actions.match(/class="density-action"/g)).toHaveLength(3)
+    expect(actions).toContain('>编辑</el-button>')
+    expect(actions).toContain('>删除</el-button>')
+    expect(actions).toContain('data-tone="danger"')
+    expect(actions).toContain(':data-tone=')
+    expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
   })
-
   it('keeps the prototype table treatment and mobile form fallback without inventing a pricing mode', () => {
     expect(source).toContain(':page-sizes="[20, 50, 100]"\n          border\n          stripe')
     expect(source).toContain('@media (max-width: 720px)')

src/modules/fee-items/pages/FeeItemsView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
-import { Pencil, Plus, Power, Save, Trash2 } from '@lucide/vue'
+import { Plus, Save } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
 import {
@@ -335,7 +336,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="fee-items-page" spacing="normal">
+  <AdminPage as="div" class="fee-items-page admin-density" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权查看费用项目" sub-title="请联系管理员开通费用项目查看权限" />
 
     <ListPageLayout v-else aria-label="费用项目管理">
@@ -387,22 +388,24 @@ onMounted(() => {
             ><Plus :size="16" />新增费用项目</el-button>
           </template>
           <template #actions="{ row }">
-            <div v-if="access.can('firstleg:fee-item:edit') || access.can('firstleg:fee-item:delete')" class="table-actions">
-              <el-button v-if="access.can('firstleg:fee-item:edit')" size="small" plain type="primary" :disabled="loading || editorLoading" @click="openEdit(row as PlatformFeeItemResource)"><Pencil :size="15" />编辑</el-button>
-              <el-button
+            <div v-if="access.can('firstleg:fee-item:edit') || access.can('firstleg:fee-item:delete')" class="table-actions density-actions">
+              <el-button data-tone="neutral" class="density-action" v-if="access.can('firstleg:fee-item:edit')" size="small" :disabled="loading || editorLoading" @click="openEdit(row as PlatformFeeItemResource)">编辑</el-button>
+              <el-button class="density-action"
                 v-if="access.can('firstleg:fee-item:edit')"
                 size="small"
-                plain
-                :type="(row as PlatformFeeItemResource).status === 'ACTIVE' ? 'warning' : 'success'"
+
+                :data-tone="(row as PlatformFeeItemResource).status === 'ACTIVE' ? 'danger' : 'success'"
                 :loading="statusLoadingIds.has(String((row as PlatformFeeItemResource).id))"
                 :disabled="loading"
                 @click="requestStatusChange(row as PlatformFeeItemResource)"
-              ><Power :size="15" />{{ (row as PlatformFeeItemResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
-              <el-button v-if="access.can('firstleg:fee-item:delete')" size="small" plain type="danger" :disabled="loading" @click="requestDelete(row as PlatformFeeItemResource)"><Trash2 :size="15" />删除</el-button>
+              >{{ (row as PlatformFeeItemResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
+              <el-button data-tone="danger" class="density-action" v-if="access.can('firstleg:fee-item:delete')" size="small" :disabled="loading" @click="requestDelete(row as PlatformFeeItemResource)">删除</el-button>
             </div>
             <span v-else class="muted-value">仅查看</span>
           </template>
-          <template #feeItem="{ row }"><div class="fee-item-name"><strong>{{ (row as PlatformFeeItemResource).feeTypeName }}</strong><small>{{ (row as PlatformFeeItemResource).feeCode || '未分配编码' }}</small></div></template>
+          <template #feeItem="{ row }"><div class="fee-item-name"><strong>{{ (row as PlatformFeeItemResource).feeTypeName }}</strong>
+            <!-- <small>{{ (row as PlatformFeeItemResource).feeCode || '未分配编码' }}</small> -->
+          </div></template>
           <template #tradeScope="{ row }"><el-tag effect="plain">{{ (row as PlatformFeeItemResource).tradeScope === 'DOMESTIC' ? '国内' : '国际' }}</el-tag></template>
           <template #pickup="{ row }">{{ directionText((row as PlatformFeeItemResource).pickupPayable, (row as PlatformFeeItemResource).pickupReceivable) }}</template>
           <template #warehouse="{ row }">{{ directionText((row as PlatformFeeItemResource).warehousePayable, (row as PlatformFeeItemResource).warehouseReceivable) }}</template>
@@ -420,15 +423,15 @@ onMounted(() => {
       </section>
     </ListPageLayout>
 
-    <AppDrawer
+    <AppDrawer class="admin-density admin-density-drawer"
       v-model="editorOpen"
       :title="editorTitle"
       size="min(620px, 94vw)"
       :loading="editorLoading"
       :confirm-loading="saving"
     >
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || editorLoading">
-        <FormSection title="基本信息" description="费用项目为平台公共主数据，不按客户单独维护。">
+      <el-form class="density-form" ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || editorLoading">
+        <FormSection class="density-form-section" title="基本信息" description="费用项目为平台公共主数据，不按客户单独维护。">
           <div class="form-grid two-cols">
             <el-form-item label="费用名称" prop="feeTypeName" required><el-input v-model="form.feeTypeName" maxlength="128" placeholder="请输入费用名称" /></el-form-item>
             <el-form-item label="费用分类" prop="category" required><el-input v-model="form.category" maxlength="64" placeholder="例如 仓储成本" /></el-form-item>
@@ -437,7 +440,7 @@ onMounted(() => {
             <el-segmented v-model="form.tradeScope" :options="[{ label: '国内', value: 'DOMESTIC' }, { label: '国际', value: 'INTERNATIONAL' }]" />
           </el-form-item>
         </FormSection>
-        <FormSection title="费用方向" description="选择费用在提货和仓库环节的应收、应付属性。">
+        <FormSection class="density-form-section" title="费用方向" description="选择费用在提货和仓库环节的应收、应付属性。">
           <div class="direction-grid">
             <fieldset><legend>提货环节</legend><el-checkbox v-model="form.pickupPayable">应付</el-checkbox><el-checkbox v-model="form.pickupReceivable">应收</el-checkbox></fieldset>
             <fieldset><legend>仓库环节</legend><el-checkbox v-model="form.warehousePayable">应付</el-checkbox><el-checkbox v-model="form.warehouseReceivable">应收</el-checkbox></fieldset>
@@ -449,7 +452,7 @@ onMounted(() => {
             </el-select>
           </el-form-item>
         </FormSection>
-        <FormSection title="适用说明" :bordered="false">
+        <FormSection class="density-form-section" title="适用说明" :bordered="false">
           <el-form-item label="说明"><el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用场景或核算说明" /></el-form-item>
         </FormSection>
       </el-form>
@@ -461,7 +464,7 @@ onMounted(() => {
       </template>
     </AppDrawer>
 
-    <AppDialog
+    <AppDialog class="admin-density-dialog"
       v-model="statusOpen"
       :title="statusTarget?.status === 'ACTIVE' ? '停用费用项目' : '启用费用项目'"
       :confirm-text="statusTarget?.status === 'ACTIVE' ? '确认停用' : '确认启用'"
@@ -475,7 +478,7 @@ onMounted(() => {
       </p>
     </AppDialog>
 
-    <AppDialog
+    <AppDialog class="admin-density-dialog"
       v-model="deleteOpen"
       title="删除费用项目"
       confirm-text="确认删除"
@@ -490,13 +493,13 @@ onMounted(() => {
 
 <style scoped>
 .fee-items-page { min-width: 0; }
-.fee-item-name { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
+.fee-item-name { display: flex; min-width: 0; flex-direction: column; gap: var(--admin-space-1); }
 .fee-item-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.fee-item-name small { color: var(--cc-muted); font-size: 11px; }
+.fee-item-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
 .description-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
-.direction-grid fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--el-border-color); border-radius: 6px; }
-.direction-grid legend { padding: 0 5px; color: var(--el-text-color-secondary); font-size: 13px; }
+.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
+.direction-grid fieldset { min-width: 0; margin: 0; padding: var(--admin-space-5); border: 1px solid var(--el-border-color); border-radius: var(--admin-radius); }
+.direction-grid legend { padding: 0 5px; color: var(--el-text-color-secondary); font-size: var(--admin-font-body); }
 .delete-message { margin: 0; color: var(--el-text-color-regular); line-height: 1.7; overflow-wrap: anywhere; }
 @media (max-width: 720px) {
   .direction-grid, .form-grid.two-cols { grid-template-columns: 1fr; }

src/modules/finance/financeDensity.css

@@ -0,0 +1,17 @@
+/* Finance owns document layout; controls and visual primitives stay shared. */
+.admin-density .detail-page-layout.finance-density-detail { gap: 0; }
+.admin-density .finance-density-detail > .detail-page-layout__header,
+.admin-density .finance-density-detail > .detail-page-layout__summary { padding: 0; }
+.admin-density .finance-density-detail > .detail-page-layout__content,
+.admin-density .finance-density-detail > .detail-page-layout__footer { min-width: 0; padding: var(--admin-space-5); }
+.admin-density .finance-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--admin-space-3); }
+.admin-density .finance-detail-context { min-width: 0; color: var(--cc-muted); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
+.admin-density .statement-summary-grid .statement-summary-item--remark { grid-column: span 2; }
+.admin-density .settlement-summary.density-detail-overview { padding: 0; border: 0; }
+.admin-density .statement-summary-section { padding: var(--admin-space-5); }
+.admin-density .account-metrics .is-negative,
+.admin-density .density-detail-overview .is-danger,
+.admin-density-dialog .partial-summary .is-danger { color: var(--el-color-danger); }
+.admin-density .density-detail-overview .is-success,
+.admin-density-dialog .partial-summary .is-success { color: var(--el-color-success); }
+.admin-density-dialog .partial-summary { margin-bottom: var(--admin-space-5); }

src/modules/finance/pages/FinanceCustomerAccountsView.test.ts

@@ -65,7 +65,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(page).toContain('v-else-if="!detailOpen"')
     expect(page).toContain('返回客户账户')
     expect(page).toContain('<DetailPageLayout')
-    expect(page).toContain('class="account-metrics"')
+    expect(page).toContain('class="density-detail-overview account-metrics"')
     for (const metric of ['实际余额', '冻结金额', '总可用余额', '授信额度', '已用授信', '可用授信']) expect(page).toContain(metric)
     expect(page).toContain('class="ledger-query"')
     expect(page).toContain('@search="ledgerPage = 1; void loadLedger($event)"')
@@ -82,14 +82,14 @@ describe('FinanceCustomerAccountsView delivery', () => {
   })
 
   it('keeps term editing aligned with the account summary and nearby actions', () => {
-    for (const marker of ['class="term-section"', 'class="term-editor"', '账期天数', '#footer', '保存账期']) expect(page).toContain(marker)
-    expect(page).toContain('grid-template-columns: repeat(3, minmax(0, 1fr))')
+    for (const marker of ['class="term-section density-form-section"', 'class="term-editor"', '账期天数', '#footer', '保存账期']) expect(page).toContain(marker)
+    expect(page).toContain('density-detail-overview account-metrics')
     for (const column of ['实际余额(CNY)', '冻结金额(CNY)', '总可用余额(CNY)', '授信额度(CNY)', '已用授信(CNY)', '待审核充值']) expect(page).toContain(column)
     expect(page).toContain('grid-template-columns: 120px minmax(0, 220px)')
     expect(page).toContain('justify-content: start')
     expect(page).toContain('class="surface-panel finance-account-detail__surface"')
-    expect(page).toContain('min-height: 64px')
-    expect(page).toContain('padding: 0 0 12px')
+    expect(page).toContain('class="density-detail-header"')
+    expect(page).toContain('padding: var(--admin-space-4) 0')
     expect(page).toContain('class="detail-table-scroll"')
     expect(page).toContain('class="ledger-identifier"')
     expect(page).toContain('class="ledger-document"')
@@ -100,21 +100,21 @@ describe('FinanceCustomerAccountsView delivery', () => {
   it('keeps account detail and term editing readable across the 1920 workspace', () => {
     expect(page).toContain('width: min(100%, 1920px)')
     expect(page).toContain('@media (min-width: 1920px)')
-    expect(page).toContain('.finance-account-detail__layout :deep(.detail-page-layout__content)')
-    expect(page).toContain('padding: 0 14px 10px')
+    expect(page).toContain('finance-density-detail')
+    expect(page).toContain('../financeDensity.css')
     expect(page).not.toContain('max-width: 520px')
   })
 
   it('keeps high-frequency account actions visible and groups the remaining actions', () => {
     expect(page).toContain("{ key: 'actions', label: '操作', width: 290, fixed: 'left', slotName: 'actions' }")
-    expect(page).toContain('<el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />详情</el-button>')
+    expect(page).toContain('@click="openAccount(row, false)">详情</el-button>')
     expect(page).toContain("openAdjustment(row as FinanceAccountSummary, 'RECHARGE')")
     expect(page).toContain("openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')")
     expect(page).toContain('aria-label="更多客户账户操作"')
-    expect(page).toContain('<el-dropdown-item v-if="canAdjust" command="credit"><CreditCard :size="15" />授信</el-dropdown-item>')
-    expect(page).toContain('<el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust"><Pencil :size="15" />账期</el-dropdown-item>')
+    expect(page).toContain('<el-dropdown-item v-if="canAdjust" command="credit">授信</el-dropdown-item>')
+    expect(page).toContain('<el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust">账期</el-dropdown-item>')
     expect(page).not.toContain('<el-button link type="primary" @click="openAccount(row, false)">')
-    expect(page).toContain('.row-actions {')
+    expect(page).toContain('class="row-actions density-actions"')
     expect(page).toContain('white-space: nowrap')
   })
 
@@ -124,6 +124,23 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(page).not.toContain('adjustmentAccount?.actualBalance -')
   })
 
+  it.each([
+    [[], ['详情'], false],
+    [['platform:finance:customer-terms:view', 'platform:finance:customer-terms:update'], ['详情', '账期'], false],
+    [['platform:finance:customer-account:adjust'], ['详情', '充值', '扣款', ''], true],
+  ])('folds account operations only when more than three are available: %j', async (extraPermissions, labels, overflow) => {
+    const wrapper = await mountAccountsView(['platform:finance:customer-account:list', ...extraPermissions])
+    const actions = wrapper.get('.el-table__body-wrapper .density-actions')
+    expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
+    expect(actions.find('.el-dropdown').exists()).toBe(overflow)
+    if (overflow) {
+      const trigger = actions.get('button[aria-label="更多客户账户操作"]')
+      expect(trigger.text()).toBe('')
+      expect(trigger.find('svg').exists()).toBe(true)
+    }
+    wrapper.unmount()
+  })
+
   it('selects an active customer by name from master data', () => {
     expect(page).toContain("key: 'customerId', type: 'select'")
     expect(page).toContain("label: '客户名称'")
@@ -176,12 +193,12 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(wrapper.text()).toContain('13800000000')
     const metrics = wrapper.find('.account-metrics')
     expect(metrics.findAll('.account-metric')).toHaveLength(6)
-    expect(metrics.text()).toContain('实际余额¥126580.50CNY')
-    expect(metrics.text()).toContain('冻结金额¥8500.00CNY')
-    expect(metrics.text()).toContain('总可用余额¥138080.50CNY')
-    expect(metrics.text()).toContain('授信额度¥20000.002028-09-10 到期')
-    expect(metrics.text()).toContain('已用授信¥0.00CNY')
-    expect(metrics.text()).toContain('可用授信¥20000.00CNY')
+    expect(metrics.text()).toContain('实际余额¥126580.50 CNY')
+    expect(metrics.text()).toContain('冻结金额¥8500.00 CNY')
+    expect(metrics.text()).toContain('总可用余额¥138080.50 CNY')
+    expect(metrics.text()).toContain('授信额度¥20000.00 2028-09-10 到期')
+    expect(metrics.text()).toContain('已用授信¥0.00 CNY')
+    expect(metrics.text()).toContain('可用授信¥20000.00 CNY')
     for (const auxiliary of ['待开账金额', '本期已收', '总成本', '已付成本', '已收客户款', '客户线下支付']) expect(metrics.text()).not.toContain(auxiliary)
     expect(listFinanceAccounts).toHaveBeenCalledWith({ page: 1, size: 1, customerId: '10001' })
     expect(listFinanceAccountLedger).toHaveBeenCalledWith('10001', expect.objectContaining({ page: 1, size: 20 }))
@@ -294,7 +311,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
       exportType: 'FINANCE_CUSTOMER_ACCOUNT_LEDGER', format: 'XLSX', taskName: '客户账户流水',
       parameters: { customerId: '10001', businessType: 'RECEIPT', startDate: '2026-08-01', endDate: '2026-08-31' },
     })
-    expect(showExportTaskCreatedDialog).toHaveBeenLastCalledWith({ taskName: '客户账户流水', taskNo: 'EXP-2' })
+    expect(showExportTaskCreatedDialog).toHaveBeenLastCalledWith({ taskName: '客户账户流水', taskNo: 'EXP-2', dense: true })
     detailWrapper.unmount()
   })
 

src/modules/finance/pages/FinanceCustomerAccountsView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../financeDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, CreditCard, Download, Eye, MinusCircle, MoreHorizontal, Pencil, PlusCircle, Save } from '@lucide/vue'
+import { ArrowLeft, CreditCard, Download, MinusCircle, MoreHorizontal, PlusCircle, Save } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
@@ -356,7 +358,7 @@ function customerField(value: unknown) { return String(value || '').trim() || '
 function displayDocumentNo(value: unknown) { return String(value || '').trim() || '关联单据缺失' }
 function displayLedgerId(value: unknown) { return String(value || '').trim() || '流水号缺失' }
 async function finishExport(task: Awaited<ReturnType<typeof createPlatformExportTask>>) {
-  const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+  const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
   if (openDownloadCenter) await router.push({ name: 'download-center' })
 }
 async function exportAccounts() {
@@ -415,7 +417,7 @@ onBeforeUnmount(clearVoucherPreview)
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-account-page" spacing="normal">
+  <AdminPage as="div" class="finance-account-page admin-density" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问客户账户" sub-title="请联系管理员开通客户账户查看权限" />
     <ListPageLayout v-else-if="!detailOpen" aria-label="客户账户">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户账户筛选" :fields="queryFields" preference-key="finance-customer-accounts-query" @search="search" /></template>
@@ -423,7 +425,7 @@ onBeforeUnmount(clearVoucherPreview)
       <section v-if="!stateError" class="surface-panel table-panel">
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="finance-customer-accounts-table" aria-label="客户账户列表" row-key="customerId" empty-text="暂无客户账户" @update:page="load()" @update:page-size="page = 1; load()">
           <template #toolbar-actions><el-button v-if="canExport" :loading="accountExportBusy" :disabled="loading || accountExportBusy" @click="exportAccounts"><Download :size="16" />导出Excel</el-button></template>
-          <template #actions="{ row }"><div class="row-actions"><el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />详情</el-button><el-button v-if="canAdjust" size="small" plain type="primary" @click="openAdjustment(row as FinanceAccountSummary, 'RECHARGE')"><PlusCircle :size="15" />充值</el-button><el-button v-if="canAdjust" size="small" plain type="danger" @click="openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')"><MinusCircle :size="15" />扣款</el-button><el-dropdown v-if="canAdjust || canUpdateTerms" trigger="click" @command="handleAccountMore(String($event), row as FinanceAccountSummary)"><el-button size="small" plain aria-label="更多客户账户操作" title="更多客户账户操作"><MoreHorizontal :size="15" />更多</el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canAdjust" command="credit"><CreditCard :size="15" />授信</el-dropdown-item><el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust"><Pencil :size="15" />账期</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
+          <template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="neutral" class="density-action" size="small" @click="openAccount(row, false)">详情</el-button><el-button data-tone="neutral" class="density-action" v-if="canAdjust" size="small" @click="openAdjustment(row as FinanceAccountSummary, 'RECHARGE')">充值</el-button><el-button data-tone="danger" class="density-action" v-if="canAdjust" size="small" @click="openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')">扣款</el-button><el-button class="density-action" data-tone="neutral" v-if="!canAdjust && canUpdateTerms" size="small" @click="handleAccountMore('terms', row as FinanceAccountSummary)">账期</el-button><el-dropdown v-if="canAdjust" trigger="click" @command="handleAccountMore(String($event), row as FinanceAccountSummary)"><el-button data-tone="neutral" class="density-action" size="small" aria-label="更多客户账户操作" title="更多客户账户操作"><MoreHorizontal aria-hidden="true" :size="15" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canAdjust" command="credit">授信</el-dropdown-item><el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust">账期</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
           <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template>
           <template #customerCode="{ row }">{{ customerField(row.customerCode) }}</template><template #contactName="{ row }">{{ customerField(row.contactName) }}</template><template #contactPhone="{ row }">{{ customerField(row.contactPhone) }}</template>
           <template #lastChangedAt="{ row }">{{ formatLastChangedAt(row.lastChangedAt) }}</template>
@@ -434,47 +436,47 @@ onBeforeUnmount(clearVoucherPreview)
         </DataTable>
       </section>
     </ListPageLayout>
-    <AdminPage v-else as="div" class="finance-account-detail" spacing="normal">
+    <AdminPage v-else as="div" class="finance-account-detail admin-density" spacing="normal">
       <section class="surface-panel finance-account-detail__surface">
-      <DetailPageLayout class="finance-account-detail__layout" :aria-label="editing ? '维护客户账期' : '客户账户详情'">
-        <template #header><div class="detail-heading"><div class="detail-title"><h2>{{ editing ? '维护客户账期' : '客户账户详情' }}</h2><p v-if="selected">{{ customerName(selected.customerId, selected.customerName) }} · CNY 资金账户</p></div><div v-if="selected && !editing" class="detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button></div><el-button class="detail-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button></div></template>
-        <template v-if="selected && !ledgerError" #summary><section class="account-metrics" aria-label="客户资金账户余额"><div class="account-metric is-actual"><span>实际余额</span><strong :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }}</strong><small>CNY</small></div><div class="account-metric is-frozen"><span>冻结金额</span><strong>{{ money(selected.frozenBalance) }}</strong><small>CNY</small></div><div class="account-metric is-available"><span>总可用余额</span><strong>{{ money(selected.availableBalance) }}</strong><small>CNY</small></div><div class="account-metric"><span>授信额度</span><strong>{{ money(selected.creditLimit) }}</strong><small>{{ creditExpiryLabel(selected) }}</small></div><div class="account-metric is-frozen"><span>已用授信</span><strong>{{ money(selected.creditUsed) }}</strong><small>CNY</small></div><div class="account-metric"><span>可用授信</span><strong>{{ money(selected.availableCredit) }}</strong><small>CNY</small></div></section></template>
+      <DetailPageLayout class="finance-account-detail__layout finance-density-detail" :aria-label="editing ? '维护客户账期' : '客户账户详情'">
+        <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button><h1 class="density-detail-title">{{ selected ? customerName(selected.customerId, selected.customerName) : '客户账户' }}</h1><span class="finance-detail-context">{{ editing ? '维护客户账期' : 'CNY 资金账户' }}</span></div><div v-if="selected && !editing" class="finance-detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button></div></div></template>
+        <template v-if="selected && !ledgerError" #summary><dl class="density-detail-overview account-metrics" aria-label="客户资金账户余额"><div class="account-metric is-actual"><dt>实际余额</dt><dd :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }} <small>CNY</small></dd></div><div class="account-metric is-frozen"><dt>冻结金额</dt><dd>{{ money(selected.frozenBalance) }} <small>CNY</small></dd></div><div class="account-metric is-available"><dt>总可用余额</dt><dd>{{ money(selected.availableBalance) }} <small>CNY</small></dd></div><div class="account-metric"><dt>授信额度</dt><dd>{{ money(selected.creditLimit) }} <small>{{ creditExpiryLabel(selected) }}</small></dd></div><div class="account-metric is-frozen"><dt>已用授信</dt><dd>{{ money(selected.creditUsed) }} <small>CNY</small></dd></div><div class="account-metric"><dt>可用授信</dt><dd>{{ money(selected.availableCredit) }} <small>CNY</small></dd></div></dl></template>
         <LoadErrorState v-if="ledgerError" :title="editing ? '客户账期加载失败' : '账户流水加载失败'" :message="ledgerError.message" :loading="ledgerLoading" @retry="retryDrawer"><template #details><ApiErrorMeta :details="ledgerError" /></template></LoadErrorState>
         <template v-else-if="selected">
-          <FormSection class="customer-profile-section" title="客户信息" :bordered="false"><el-descriptions :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
-          <FormSection v-if="!editing" class="recharge-section" title="充值申请" :bordered="false">
+          <FormSection class="customer-profile-section density-form-section" title="客户信息" :bordered="false"><el-descriptions border class="density-descriptions" :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
+          <FormSection v-if="!editing" class="recharge-section density-form-section" title="充值申请" :bordered="false">
             <LoadErrorState v-if="rechargeError" title="充值申请加载失败" :message="rechargeError.message" :loading="rechargeLoading" @retry="loadRechargeRequests" />
             <div v-else class="detail-table-scroll"><DataTable class="recharge-table" :data="sortedRechargeRequests" :columns="rechargeColumns" :loading="rechargeLoading" row-key="requestId" empty-text="暂无充值申请" column-settings-mode="hide">
-              <template #actions="{ row }"><el-button v-if="canReviewRecharge && row.status === 'PENDING'" size="small" type="primary" plain @click="openReview(row as FinanceRechargeRequest)">审核</el-button></template>
+              <template #actions="{ row }"><div class="density-actions"><el-button data-tone="warning" class="density-action" v-if="canReviewRecharge && row.status === 'PENDING'" size="small" @click="openReview(row as FinanceRechargeRequest)">审核</el-button></div></template>
               <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template><template #reviewedAt="{ row }">{{ row.reviewedAt ? formatDateTime(row.reviewedAt) : '—' }}</template>
               <template #amount="{ row }"><strong class="balance-value is-actual">{{ money(row.amount) }}</strong></template><template #paymentMethod="{ row }">{{ paymentMethodLabel(row.paymentMethod) }}</template>
               <template #voucherFileName="{ row }"><el-button v-if="row.voucherFileId" link type="primary" @click="previewVoucher(row as FinanceRechargeRequest)">{{ row.voucherFileName || '预览付款凭证' }}</el-button><span v-else>—</span></template>
               <template #status="{ row }"><el-tag :type="row.status === 'PENDING' ? 'warning' : row.status === 'APPROVED' ? 'success' : 'danger'">{{ row.status === 'PENDING' ? '待审核' : row.status === 'APPROVED' ? '已通过' : '已驳回' }}</el-tag></template>
             </DataTable></div>
           </FormSection>
-          <FormSection v-if="!editing" class="ledger-section" title="账户流水" :bordered="false">
+          <FormSection v-if="!editing" class="ledger-section density-form-section" title="账户流水" :bordered="false">
             <QueryToolbar v-model="ledgerFilters" class="ledger-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; void loadLedger($event)" />
             <div class="detail-table-scroll"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #toolbar-actions><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.businessNo || row.ledgerId)">{{ displayLedgerId(row.businessNo || row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ row.occurredDate || formatDateTime(row.createdAt || row.occurredAt) }}</template><template #businessType="{ row }">{{ walletBusinessType(row.changeType || row.businessType) }}</template><template #documentNo="{ row }"><span class="ledger-document" :title="displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo)">{{ displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo) }}</span></template><template #amount="{ row }">{{ money(row.amount) }}</template><template #ledgerPaymentMethod="{ row }">{{ row.paymentMethod ? paymentMethodLabel(row.paymentMethod) : '—' }}</template><template #actualBalanceAfter="{ row }">{{ money(row.actualBalanceAfter) }}</template><template #frozenBalanceAfter="{ row }">{{ money(row.frozenBalanceAfter) }}</template><template #availableBalanceAfter="{ row }">{{ money(row.availableBalanceAfter) }}</template><template #creditUsedAfter="{ row }">{{ money(row.creditUsedAfter) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
           </FormSection>
-          <FormSection v-else class="term-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" placeholder="请输入账期天数" /><span class="term-unit">天</span></div></div></FormSection>
+          <FormSection v-else class="term-section density-form-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" placeholder="请输入账期天数" /><span class="term-unit">天</span></div></div></FormSection>
         </template>
         <template v-if="editing && selected && !ledgerError" #footer><div class="detail-footer"><el-button @click="closeDetail">关闭</el-button><el-button v-if="canUpdateTerms" type="primary" :loading="saving" @click="saveTerms"><Save :size="16" />保存账期</el-button></div></template>
       </DetailPageLayout>
       </section>
     </AdminPage>
-    <AppDialog v-model="adjustmentOpen" :title="adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'" width="min(720px, calc(100vw - 28px))" :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
+    <AppDialog class="admin-density-dialog" v-model="adjustmentOpen" :title="adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'" width="min(720px, calc(100vw - 28px))" :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
       <el-alert :title="adjustmentForm.type === 'RECHARGE' ? '充值会先归还已用授信，剩余金额计入实际余额。' : '扣款先使用未冻结的实际余额，不足部分再使用可用授信。'" :type="adjustmentForm.type === 'RECHARGE' ? 'info' : 'warning'" :closable="false" />
-      <el-form label-position="top" class="wallet-form"><div class="wallet-form__grid"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前实际余额"><el-input :model-value="money(adjustmentAccount?.actualBalance)" readonly /></el-form-item><el-form-item v-if="adjustmentForm.type === 'DEDUCTION'" label="当前可用余额"><el-input :model-value="money(adjustmentAccount?.availableBalance)" readonly /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></div><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form>
+      <el-form label-position="top" class="wallet-form density-form"><div class="wallet-form__grid"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前实际余额"><el-input :model-value="money(adjustmentAccount?.actualBalance)" readonly /></el-form-item><el-form-item v-if="adjustmentForm.type === 'DEDUCTION'" label="当前可用余额"><el-input :model-value="money(adjustmentAccount?.availableBalance)" readonly /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></div><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form>
     </AppDialog>
-    <AppDialog v-model="creditLimitOpen" title="设置授信额度" width="min(560px, calc(100vw - 28px))" confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
+    <AppDialog class="admin-density-dialog" v-model="creditLimitOpen" title="设置授信额度" width="min(560px, calc(100vw - 28px))" confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
       <el-alert title="授信到期日当天仍有效，次日授信失效；届时负数实际余额将阻止客户提交新订单。" type="warning" :closable="false" />
-      <el-form label-position="top" class="wallet-form"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前已用授信"><el-input :model-value="money(adjustmentAccount?.creditUsed)" readonly /></el-form-item><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></el-form>
+      <el-form label-position="top" class="wallet-form density-form"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前已用授信"><el-input :model-value="money(adjustmentAccount?.creditUsed)" readonly /></el-form-item><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></el-form>
     </AppDialog>
-    <AppDialog v-model="reviewOpen" title="审核充值申请" width="min(620px, calc(100vw - 28px))" confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
-      <el-descriptions v-if="reviewRequest" :column="2" border><el-descriptions-item label="申请单号">{{ reviewRequest.requestNo }}</el-descriptions-item><el-descriptions-item label="充值金额">{{ money(reviewRequest.amount) }}</el-descriptions-item><el-descriptions-item label="付款方式">{{ paymentMethodLabel(reviewRequest.paymentMethod) }}</el-descriptions-item><el-descriptions-item label="付款凭证">{{ reviewRequest.voucherFileName || '—' }}</el-descriptions-item></el-descriptions>
-      <el-form label-position="top" class="review-form"><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="reviewOpen" title="审核充值申请" width="min(620px, calc(100vw - 28px))" confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
+      <el-descriptions class="density-descriptions" v-if="reviewRequest" :column="2" border><el-descriptions-item label="申请单号">{{ reviewRequest.requestNo }}</el-descriptions-item><el-descriptions-item label="充值金额">{{ money(reviewRequest.amount) }}</el-descriptions-item><el-descriptions-item label="付款方式">{{ paymentMethodLabel(reviewRequest.paymentMethod) }}</el-descriptions-item><el-descriptions-item label="付款凭证">{{ reviewRequest.voucherFileName || '—' }}</el-descriptions-item></el-descriptions>
+      <el-form label-position="top" class="review-form density-form"><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></el-form>
     </AppDialog>
-    <AppDialog v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" :show-footer="false" @closed="clearVoucherPreview">
+    <AppDialog class="admin-density-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" :show-footer="false" @closed="clearVoucherPreview">
       <div v-loading="voucherPreviewLoading" class="voucher-preview"><img v-if="voucherPreviewUrl" class="voucher-preview__image" :src="voucherPreviewUrl" :alt="voucherPreviewName" /></div>
     </AppDialog>
   </AdminPage>
@@ -501,79 +503,11 @@ onBeforeUnmount(clearVoucherPreview)
   margin: 0 auto;
 }
 
-.finance-account-detail__layout :deep(.detail-page-layout) {
-  gap: 0;
-}
-
-.finance-account-detail__layout :deep(.detail-page-layout__header) {
-  min-height: 64px;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.finance-account-detail__layout :deep(.detail-page-layout__summary) {
-  padding: 10px 16px 0;
-}
-
-.finance-account-detail__layout :deep(.detail-page-layout__content) {
-  padding: 0 16px 12px;
-}
-
-.finance-account-detail__layout :deep(.detail-page-layout__footer) {
-  padding: 0 16px 12px;
-}
-
-.row-actions,
 .detail-footer,
-.detail-heading,
-.detail-actions,
 .term-control {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.row-actions .el-button {
-  margin-left: 0;
-}
-
-.row-actions {
-  white-space: nowrap;
-}
-
-.detail-heading {
-  width: 100%;
-  align-items: center;
-}
-
-.detail-title {
-  min-width: 0;
-}
-
-.detail-heading h2 {
-  margin: 0;
-  color: var(--cc-text);
-  font-size: 20px;
-  line-height: 1.4;
-}
-
-.detail-heading p {
-  margin: 3px 0 0;
-  color: var(--cc-muted);
-  font-size: 13px;
-}
-
-.detail-back {
-  margin-left: auto;
-}
-
-.detail-actions {
-  margin-left: auto;
-}
-
-.detail-actions + .detail-back {
-  margin-left: 0;
+  gap: var(--admin-space-3);
 }
 
 .balance-value {
@@ -590,7 +524,6 @@ onBeforeUnmount(clearVoucherPreview)
 }
 
 .balance-value.is-negative,
-.account-metric strong.is-negative,
 .credit-expired {
   color: var(--el-color-danger);
 }
@@ -608,63 +541,12 @@ onBeforeUnmount(clearVoucherPreview)
   object-fit: contain;
 }
 
-.account-metrics {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0;
-  padding: 0 0 12px;
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.account-metric {
-  min-width: 0;
-  padding: 0 12px;
-}
-
-.account-metric:first-child {
-  padding-left: 0;
-}
-
-.account-metric:nth-child(4) {
-  padding-left: 0;
-  border-left: 0;
-}
-
-.account-metric + .account-metric {
-  border-left: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.account-metric::before {
-  display: none;
-}
-
-.account-metric span {
-  display: block;
-  color: var(--cc-muted);
-  font-size: 12px;
-}
-
-.account-metric strong {
-  display: inline-block;
-  margin-top: 6px;
-  color: var(--cc-text);
-  font-size: 20px;
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-}
-
-.account-metric small {
-  margin-left: 6px;
-  color: var(--cc-muted);
-  font-size: 11px;
-}
-
 .ledger-section {
-  padding: 10px 0 0;
+  padding: var(--admin-space-4) 0 0;
 }
 
 .recharge-section {
-  padding: 10px 0 0;
+  padding: var(--admin-space-4) 0 0;
   border-bottom: 1px solid var(--cc-border, #e3e8ef);
 }
 
@@ -673,7 +555,7 @@ onBeforeUnmount(clearVoucherPreview)
 }
 
 .ledger-query {
-  margin-bottom: 8px;
+  margin-bottom: var(--admin-space-3);
 }
 
 :deep(.ledger-query.query-toolbar) {
@@ -699,20 +581,9 @@ onBeforeUnmount(clearVoucherPreview)
   font-variant-numeric: tabular-nums;
 }
 
-:deep(.ledger-table .data-table__toolbar.is-compact) {
-  min-height: 36px;
-  padding: 0 0 6px;
-  border-bottom: 0;
-}
-
-:deep(.ledger-table .data-table__pagination) {
-  min-height: 40px;
-  padding: 6px 10px;
-}
-
 .term-section {
   width: 100%;
-  padding: 10px 0;
+  padding: var(--admin-space-4) 0;
 }
 
 .term-editor {
@@ -720,13 +591,13 @@ onBeforeUnmount(clearVoucherPreview)
   grid-template-columns: 120px minmax(0, 220px);
   justify-content: start;
   align-items: center;
-  gap: 14px;
+  gap: var(--admin-space-5);
   padding: 2px 0;
 }
 
 .term-label {
   color: var(--cc-text);
-  font-size: 14px;
+  font-size: var(--admin-font-section);
   font-weight: 600;
 }
 
@@ -740,13 +611,13 @@ onBeforeUnmount(clearVoucherPreview)
 
 .wallet-form,
 .review-form {
-  margin-top: 18px;
+  margin-top: var(--admin-space-5);
 }
 
 .wallet-form__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 18px;
+  gap: 0 var(--admin-space-5);
 }
 
 .wallet-form :deep(.el-date-editor),
@@ -758,47 +629,11 @@ onBeforeUnmount(clearVoucherPreview)
   width: 100%;
   justify-content: flex-end;
   margin-top: 0;
-  padding-top: 8px;
+  padding-top: var(--admin-space-3);
   border-top: 0;
 }
 
 @media (min-width: 1920px) {
-  .finance-account-detail__layout :deep(.detail-page-layout) {
-    gap: 8px;
-  }
-
-  .finance-account-detail__layout :deep(.detail-page-layout__header) {
-    min-height: 56px;
-    padding: 10px 14px;
-  }
-
-  .finance-account-detail__layout :deep(.detail-page-layout__summary) {
-    padding: 8px 14px 0;
-  }
-
-  .finance-account-detail__layout :deep(.detail-page-layout__content) {
-    padding: 0 14px 10px;
-  }
-
-  .finance-account-detail__layout :deep(.detail-page-layout__footer) {
-    padding: 0 14px 10px;
-  }
-
-  .finance-account-detail__layout :deep(.form-section) {
-    padding: 10px 0;
-  }
-
-  .finance-account-detail__layout :deep(.form-section__heading) {
-    margin-bottom: 8px;
-  }
-
-  .account-metrics {
-    gap: 8px;
-  }
-
-  .account-metric {
-    padding: 0 10px;
-  }
 
   .detail-footer {
     padding-top: 0;

src/modules/finance/pages/FinanceCustomerArapView.test.ts

@@ -100,6 +100,33 @@ describe('FinanceCustomerArapView G2 operations', () => {
     vi.mocked(showExportTaskCreatedDialog).mockReset().mockResolvedValue(false)
   })
 
+  it.each([
+    ['DRAFT', ['详情', '编辑', '提交审核', ''], true],
+    ['APPROVED', ['详情', '调整', '作废'], false],
+    ['PENDING', ['详情', '作废'], false],
+  ])('keeps fee-source actions reachable at the three-action boundary: %s', async (reviewStatus, labels, overflow) => {
+    const row = { ...feeSummary, sourceSystem: 'FINANCE', sourceType: 'MANUAL', reviewStatus } as FinanceFeeSourceSummary
+    vi.mocked(listFinanceFeeSources).mockResolvedValue({ records: [row], total: 1, pages: 1 })
+    const wrapper = await mountView(['platform:finance:customer-arap:list', 'platform:finance:fee-source:edit'])
+    await loadRows(wrapper)
+    const actions = wrapper.get('.el-table__body-wrapper .density-actions')
+    expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
+    expect(actions.find('.el-dropdown').exists()).toBe(overflow)
+    if (overflow) {
+      const trigger = actions.get('button[title="更多费用来源操作"]')
+      expect(trigger.text()).toBe('')
+      await trigger.trigger('click')
+      await flushPromises()
+      const item = [...document.querySelectorAll<HTMLElement>('.el-dropdown-menu__item')].find(item => item.textContent?.trim() === '作废')
+      expect(item).toBeTruthy()
+      vi.mocked(getFinanceFeeSource).mockResolvedValueOnce({ ...detail, ...row })
+      item!.click()
+      await flushPromises()
+      expect(document.body.textContent).toContain('作废费用')
+      expect(voidFinanceFeeSource).not.toHaveBeenCalled()
+    }
+  })
+
   it('shows detail from the list permission but keeps G2 operations independent', async () => {
     const wrapper = await mountView(['platform:finance:customer-arap:list'])
     await loadRows(wrapper)
@@ -212,7 +239,7 @@ describe('FinanceCustomerArapView G2 operations', () => {
   it('restores the independent detail route from its fee source id', async () => {
     const wrapper = await mountView(['platform:finance:customer-arap:list'], '/finance/customer-arap/42')
     expect(getFinanceFeeSource).toHaveBeenCalledWith('42')
-    expect(wrapper.text()).toContain('费用来源详情')
+    expect(wrapper.get('.density-detail-title').text()).toContain('运费')
     expect(wrapper.text()).toContain('IB-91')
     expect(wrapper.router.currentRoute.value.name).toBe('finance-customer-arap-detail')
   })
@@ -237,27 +264,29 @@ describe('FinanceCustomerArapView G2 operations', () => {
     expect(page).toContain('width: min(100%, 1920px)')
     expect(page).toContain('@media (min-width: 1920px)')
     expect(page).toContain('grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr)')
-    expect(page).toContain('.finance-arap-detail__layout :deep(.detail-page-layout__content)')
+    expect(page).toContain('finance-density-detail')
     expect(page).not.toContain('max-width: 520px')
   })
 
-  it('renders all permitted fee-source row operations as small plain primary buttons with icons', () => {
+  it('renders permitted fee-source row operations as shared outlined text buttons', () => {
     const page = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerArapView.vue'), 'utf8')
-    expect(page).toContain('<el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
+    expect(page).toContain('@click="openDetail(row)">详情</el-button>')
     expect(page).toContain("@click=\"openMutation(row, 'SUBMIT')\"")
     expect(page).toContain("@click=\"openMutation(row, 'ADJUST')\"")
     expect(page).toContain('!isUpstreamSource(row)')
     expect(page).toContain('!isUpstreamSource(detail)')
     expect(page).toContain("['INBOUND_FEE', 'CONTAINER_FEE'].includes(type)")
     expect(page).toContain("=== 'LASTLEG'")
-    expect(page).not.toMatch(/<template #actions[\s\S]*?<el-button[^>]*\blink\b/)
+    const actions = page.slice(page.indexOf('<template #actions'), page.indexOf('<template #customerName'))
+    expect(actions).not.toMatch(/<el-button[^>]*\blink\b/)
     expect(page).toContain('white-space: nowrap')
   })
 
   it('resolves blank detail customer names and keeps source labels business-facing', async () => {
     vi.mocked(getFinanceFeeSource).mockResolvedValueOnce({ ...detail, customerName: '', sourceType: 'NEW_SOURCE' })
     const wrapper = await mountView(['platform:finance:customer-arap:list'], '/finance/customer-arap/42')
-    expect(wrapper.text()).toContain('运费 · 客户A')
+    expect(wrapper.get('.density-detail-title').text()).toContain('运费')
+    expect(wrapper.get('.finance-detail-context').text()).toBe('客户A')
     expect(wrapper.text()).toContain('其他费用来源')
     expect(wrapper.text()).not.toContain('其他来源')
     expect(wrapper.text()).not.toContain('NEW_SOURCE')
@@ -322,7 +351,7 @@ describe('FinanceCustomerArapView G2 operations', () => {
         statementGenerated: false, businessDateFrom: '2026-08-01', businessDateTo: '2026-08-31', keyword: '运费',
       },
     })
-    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户应收应付费用来源', taskNo: 'EXP-3' })
+    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户应收应付费用来源', taskNo: 'EXP-3', dense: true })
   })
 
   it('does not expose fee-source export without download-center access', async () => {

src/modules/finance/pages/FinanceCustomerArapView.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../financeDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, Ban, Download, Eye, FileCheck2, FilePlus2, Pencil, Send } from '@lucide/vue'
+import { MoreHorizontal, ArrowLeft, Download, FileCheck2, FilePlus2, Pencil, Send } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
@@ -61,6 +64,13 @@ const loadError = ref<ApiErrorDetails | null>(null)
 const detailOpen = ref(false)
 const selected = ref<ArapRow | null>(null)
 const detail = ref<FinanceFeeSourceDetail | null>(null)
+const operationLogRows = computed(() => (detail.value?.operationLogs || []).map((log, index) => ({ ...log, rowKey: index })))
+const operationLogColumns: DataTableColumn[] = [
+  { key: 'occurredAt', label: '时间', width: 170, slotName: 'occurredAt' },
+  { key: 'action', label: '操作类型', minWidth: 120, slotName: 'action' },
+  { key: 'operatorName', label: '操作人', minWidth: 120, slotName: 'operatorName' },
+  { key: 'result', label: '备注 / 结果', minWidth: 280, slotName: 'result' },
+]
 const detailLoading = ref(false)
 const detailError = ref<ApiErrorDetails | null>(null)
 const reviewOpen = ref(false)
@@ -126,6 +136,18 @@ function closeCustomerSelectOnScroll() {
   const active = document.activeElement
   if (active instanceof HTMLElement) active.blur()
 }
+function sourceActionCount(row: Record<string, unknown>) {
+  if (!row.feeSourceId) return 0
+  const available = row.status === 'AVAILABLE'
+  const draft = ['DRAFT', 'REJECTED'].includes(String(row.reviewStatus))
+  const editable = canEditSource.value && !isUpstreamSource(row)
+  return Number(canViewSource.value)
+    + Number(editable && draft && available)
+    + Number(canEditSource.value && draft && available)
+    + Number(canReviewSource.value && row.reviewStatus === 'PENDING' && available)
+    + Number(editable && row.reviewStatus === 'APPROVED' && available && !row.statementGenerated)
+    + Number(editable && available && !row.statementGenerated)
+}
 function isUpstreamSource(source: { sourceSystem?: unknown; sourceType?: unknown }) {
   return isFirstlegSource(source) || String(source.sourceSystem || '').trim().toUpperCase() === 'LASTLEG'
 }
@@ -334,7 +356,7 @@ async function exportFeeSources() {
         ...(keyword ? { keyword } : {}),
       },
     })
-    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
     if (openDownloadCenter) await router.push({ name: 'download-center' })
   } catch (error) { ElMessage.error(getApiErrorMessage(error, '客户应收应付导出任务创建失败')) }
   finally { exportBusy.value = false }
@@ -365,7 +387,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-arap-page" spacing="normal">
+  <AdminPage as="div" class="finance-arap-page admin-density" spacing="normal">
     <OperationErrorToast :details="reviewError || mutationError" />
       <el-result v-if="!canView" icon="warning" title="无权访问客户应收应付" sub-title="请联系管理员开通账单查看权限" />
     <ListPageLayout v-else-if="!detailOpen" aria-label="客户应收应付">
@@ -374,7 +396,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
       <section v-if="!customersError && !loadError" class="surface-panel table-panel">
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" max-height="calc(100vh - 300px)" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
         <template #toolbar-actions><div class="generation-actions"><el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportFeeSources"><Download :size="16" />导出Excel</el-button><el-button v-if="canCreateStatement" type="primary" :disabled="!selectedRows.length" @click="continueSelectedGeneration"><FilePlus2 :size="16" />生成所选对账单</el-button></div></template>
-        <template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain @click="openMutation(row, 'EDIT')"><Pencil :size="15" />编辑</el-button><el-button v-if="canEditSource && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain type="primary" @click="openMutation(row, 'SUBMIT')"><Send :size="15" />提交审核</el-button><el-button v-if="canReviewSource && row.reviewStatus === 'PENDING' && row.status === 'AVAILABLE'" size="small" plain type="success" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && row.reviewStatus === 'APPROVED' && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain @click="openMutation(row, 'ADJUST')"><Pencil :size="15" />调整</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain type="danger" @click="openMutation(row, 'VOID')"><Ban :size="15" />作废</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
+        <template #actions="{ row }"><div class="row-actions density-actions"><template v-if="row.feeSourceId"><el-button data-tone="neutral" class="density-action" v-if="canViewSource" size="small" @click="openDetail(row)">详情</el-button><el-button data-tone="neutral" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" @click="openMutation(row, 'EDIT')">编辑</el-button><el-button data-tone="warning" class="density-action" v-if="canEditSource && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" @click="openMutation(row, 'SUBMIT')">提交审核</el-button><el-button data-tone="warning" class="density-action" v-if="canReviewSource && row.reviewStatus === 'PENDING' && row.status === 'AVAILABLE'" size="small" @click="openReview(row)">审核</el-button><el-button data-tone="neutral" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && row.reviewStatus === 'APPROVED' && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" @click="openMutation(row, 'ADJUST')">调整</el-button><el-button data-tone="danger" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated && sourceActionCount(row) <= 3" size="small" @click="openMutation(row, 'VOID')">作废</el-button><el-dropdown v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated && sourceActionCount(row) > 3" trigger="click"><el-button class="density-action" data-tone="neutral" size="small" title="更多费用来源操作" :aria-label="`更多费用来源操作 · ${row.documentNo || '当前费用'}`"><MoreHorizontal :size="15" aria-hidden="true" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item class="danger-menu-item" @click="openMutation(row, 'VOID')">作废</el-dropdown-item></el-dropdown-menu></template></el-dropdown></template><span v-else class="muted-action">手工成本</span></div></template>
         <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template><template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : row.direction === 'PAYABLE' ? 'warning' : 'info'">{{ financeDirectionLabel(row.direction) }}</el-tag></template>
         <template #businessReference="{ row }">{{ businessReference(row as unknown as ArapRow) }}</template><template #sourceType="{ row }">{{ sourceTypeDisplay(row.sourceType) }}</template><template #supplierName="{ row }">{{ supplierDisplay(row as unknown as ArapRow) }}</template><template #sourceStatus="{ row }">{{ sourceStatusDisplay(row.status) }}</template>
         <template #status="{ row }"><el-tag :type="row.reviewStatus === 'APPROVED' ? 'success' : row.reviewStatus === 'REJECTED' ? 'danger' : 'warning'">{{ statusLabel(row.reviewStatus) }}</el-tag></template>
@@ -382,26 +404,27 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
         <template #businessDate="{ row }">{{ formatBusinessDate(row.businessDate) }}</template><template #pagination-left>已选 {{ selectedRows.length }} 笔 · 应收金额 {{ money(selectedAmount) }} CNY</template>
       </DataTable></section>
     </ListPageLayout>
-    <AdminPage v-else as="div" class="finance-arap-detail" spacing="normal">
+    <AdminPage v-else as="div" class="finance-arap-detail admin-density" spacing="normal">
       <section class="surface-panel finance-arap-detail__surface">
-      <DetailPageLayout class="finance-arap-detail__layout" aria-label="费用来源详情">
-        <template #header><div class="detail-heading"><el-button @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><div class="detail-title"><h2>费用来源详情</h2><p>{{ selected?.documentNo || '费用来源' }} · {{ selected ? customerName(selected.customerId, selected.customerName) : '客户名称暂不可用' }}</p></div><div class="detail-actions"><el-button v-if="canEditSource && detail && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button></div></div></template>
-        <template v-if="detail" #summary><section class="arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><span>结算金额</span><strong>{{ money(detail.amount) }}</strong><small>CNY</small></div><div class="arap-metric"><span>收付方向</span><strong>{{ financeDirectionLabel(detail.direction) }}</strong></div><div class="arap-metric"><span>来源状态</span><strong>{{ sourceStatusDisplay(detail.sourceStatus) }}</strong></div><div class="arap-metric"><span>审核状态</span><strong>{{ statusLabel(detail.reviewStatus) }}</strong></div></section></template>
+      <DetailPageLayout class="finance-arap-detail__layout finance-density-detail" aria-label="费用来源详情">
+        <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><h1 class="density-detail-title">{{ selected?.documentNo || '费用来源详情' }}</h1><span class="finance-detail-context">{{ selected ? customerName(selected.customerId, selected.customerName) : '—' }}</span><StatusBadge v-if="detail" :status="statusLabel(detail.reviewStatus)" /></div><div class="finance-detail-actions"><el-button v-if="canEditSource && detail && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button></div></div></template>
+        <template v-if="detail" #summary><dl class="density-detail-overview arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><dt>结算金额</dt><dd>{{ money(detail.amount) }} <small>CNY</small></dd></div><div class="arap-metric"><dt>收付方向</dt><dd>{{ financeDirectionLabel(detail.direction) }}</dd></div><div class="arap-metric"><dt>来源状态</dt><dd>{{ sourceStatusDisplay(detail.sourceStatus) }}</dd></div><div class="arap-metric"><dt>审核状态</dt><dd>{{ statusLabel(detail.reviewStatus) }}</dd></div></dl></template>
         <LoadErrorState v-if="detailError" title="费用来源详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="selected && loadDetail(selected)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
-        <template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information" title="单据信息" :bordered="false"><el-descriptions :column="2" class="arap-detail"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement" title="审核与结算" :bordered="false"><el-descriptions :column="1" class="arap-detail"><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log" title="操作记录" :bordered="false"><el-timeline v-if="detail.operationLogs?.length"><el-timeline-item v-for="(log, index) in detail.operationLogs" :key="`${log.occurredAt}-${index}`" :timestamp="formatDateTime(log.occurredAt)">{{ financeOperationActionLabel(log.action) }} · {{ displayOperator(log.operatorName) }}<small>{{ log.remark || financeOperationResultLabel(log.result) }}</small></el-timeline-item></el-timeline><el-empty v-else description="暂无操作记录" /></FormSection></template>
+        <template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information density-form-section" title="单据信息" :bordered="false"><el-descriptions border :column="2" class="arap-detail density-descriptions"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement density-form-section" title="审核与结算" :bordered="false"><el-descriptions border :column="1" class="arap-detail density-descriptions"><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log density-form-section" title="操作记录" :bordered="false"><DataTable :data="operationLogRows" :columns="operationLogColumns" row-key="rowKey" column-settings-mode="hide" empty-text="暂无操作记录"><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #action="{ row }">{{ financeOperationActionLabel(row.action) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template><template #result="{ row }">{{ row.remark || financeOperationResultLabel(row.result) }}</template></DataTable></FormSection></template>
       </DetailPageLayout>
       </section>
     </AdminPage>
-    <AppDialog v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
-      <el-form label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
+      <el-form class="density-form" label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
     </AppDialog>
-    <AppDialog v-model="mutationOpen" :title="mutationTitle" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
-      <el-form label-position="top"><el-form-item v-if="mutationMode === 'EDIT' || mutationMode === 'ADJUST'" label="金额(CNY)"><el-input-number v-model="mutationForm.amount" :min="0.01" :precision="2" :controls="false" style="width:100%" placeholder="请输入调整金额" /></el-form-item><el-form-item label="操作原因"><el-input v-model="mutationForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请填写操作原因" show-word-limit /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="mutationOpen" :title="mutationTitle" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
+      <el-form class="density-form" label-position="top"><el-form-item v-if="mutationMode === 'EDIT' || mutationMode === 'ADJUST'" label="金额(CNY)"><el-input-number v-model="mutationForm.amount" :min="0.01" :precision="2" :controls="false" style="width:100%" placeholder="请输入调整金额" /></el-form-item><el-form-item label="操作原因"><el-input v-model="mutationForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请填写操作原因" show-word-limit /></el-form-item></el-form>
     </AppDialog>
   </AdminPage>
 </template>
 
 <style scoped>
+:deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 .finance-arap-page {
   min-width: 0;
 }
@@ -441,141 +464,35 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
   margin: 0 auto;
 }
 
-.finance-arap-detail__layout :deep(.detail-page-layout) {
-  gap: 0;
-}
-
-.finance-arap-detail__layout :deep(.detail-page-layout__header) {
-  min-height: 64px;
-  align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.finance-arap-detail__layout :deep(.detail-page-layout__summary) {
-  padding: 10px 16px 0;
-}
-
-.finance-arap-detail__layout :deep(.detail-page-layout__content) {
-  padding: 0 16px 12px;
-}
-
-.row-actions {
+.generation-actions {
   display: flex;
   align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-}
-
-.row-actions .el-button {
-  margin-left: 0;
-}
-
-.generation-actions,
-.detail-heading,
-.detail-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.detail-heading {
-  min-width: 0;
-  align-items: flex-start;
-}
-
-.detail-title {
-  min-width: 0;
-}
-
-.detail-heading h2 {
-  margin: 0;
-  font-size: 18px;
-}
-
-.detail-heading p {
-  overflow: hidden;
-  margin: 3px 0 0;
-  color: var(--cc-muted);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-actions {
-  margin-left: auto;
+  gap: var(--admin-space-3);
 }
 
 .muted-action {
   color: var(--cc-muted);
 }
 
-.arap-metrics {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0;
-  padding: 0 0 12px;
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.arap-metric {
-  min-width: 0;
-  padding: 0 12px;
-}
-
-.arap-metric:first-child {
-  padding-left: 0;
-}
-
-.arap-metric + .arap-metric {
-  border-left: 1px solid var(--cc-border, #e3e8ef);
-}
-
-.arap-metric span {
-  display: block;
-  color: var(--cc-muted);
-  font-size: 12px;
-}
-
-.arap-metric strong {
-  display: inline-block;
-  margin-top: 6px;
-  color: var(--cc-text);
-  font-size: 20px;
-  line-height: 1.1;
-  font-variant-numeric: tabular-nums;
-}
-
-.arap-metric small {
-  margin-left: 6px;
-  color: var(--cc-muted);
-  font-size: 11px;
-}
-
-.arap-metric.is-amount strong {
-  color: #4f46e5;
-}
-
 .arap-detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
-  gap: 16px;
+  gap: var(--admin-space-6);
   border-bottom: 1px solid var(--cc-border, #e3e8ef);
 }
 
 .arap-information,
 .arap-settlement,
 .operation-log {
-  padding: 10px 0;
+  padding: var(--admin-space-4) 0;
 }
 
 .arap-settlement {
-  padding-left: 16px;
+  padding-left: var(--admin-space-6);
   border-left: 1px solid var(--cc-border, #e3e8ef);
 }
 
-.operation-log {
-  min-height: 150px;
-}
+
 
 :deep(.arap-detail .el-descriptions__content) {
   min-width: 0;
@@ -588,7 +505,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 }
 
 .operation-log :deep(.el-empty) {
-  padding: 10px 0 2px;
+  padding: var(--admin-space-4) 0 2px;
 }
 
 .operation-log :deep(.el-empty__image) {
@@ -597,50 +514,18 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 
 .operation-log small {
   display: block;
-  margin-top: 4px;
+  margin-top: var(--admin-space-1);
   color: var(--cc-muted);
 }
 
 @media (min-width: 1920px) {
-  .finance-arap-detail__layout :deep(.detail-page-layout) {
-    gap: 8px;
-  }
-
-  .finance-arap-detail__layout :deep(.detail-page-layout__header) {
-    min-height: 56px;
-    padding: 10px 14px;
-  }
-
-  .finance-arap-detail__layout :deep(.detail-page-layout__summary) {
-    padding: 8px 14px 0;
-  }
-
-  .finance-arap-detail__layout :deep(.detail-page-layout__content) {
-    padding: 0 14px 10px;
-  }
-
-  .finance-arap-detail__layout :deep(.form-section) {
-    padding: 10px 0;
-  }
-
-  .finance-arap-detail__layout :deep(.form-section__heading) {
-    margin-bottom: 8px;
-  }
-
-  .arap-metrics {
-    gap: 8px;
-  }
-
-  .arap-metric {
-    padding: 0 10px;
-  }
 
   .arap-detail-grid {
-    gap: 10px;
+    gap: var(--admin-space-4);
   }
 
   .arap-settlement {
-    padding-left: 10px;
+    padding-left: var(--admin-space-4);
   }
 }
 

src/modules/finance/pages/FinanceCustomerStatementsView.test.ts

@@ -111,17 +111,19 @@ describe('FinanceCustomerStatementsView', () => {
     expect(document.querySelectorAll('.statement-summary-grid .statement-summary-item')).toHaveLength(20)
     expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('客户确认人')
     expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('2026-08-05 10:00')
-    expect(document.querySelector('.statement-detail-head')?.textContent).toContain('REC-501')
+    expect(document.querySelector('.density-detail-heading')?.textContent).toContain('REC-501')
     expect(document.querySelector('[aria-label="客户对账单账单明细"]')).toBeTruthy()
     expect(document.querySelector('.detail-table-scroll [aria-label="客户对账单账单明细"]')).toBeTruthy()
     expect(document.querySelector('.el-drawer')).toBeNull()
   })
 
-  it('uses the prototype-style wide summary grid at 1920px', () => {
+  it('uses the shared four-group summary grid with long remarks spanning two groups', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
-    expect(source).toContain('grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))')
-    expect(source).toContain('grid-template-columns: repeat(5, minmax(0, 1fr))')
-    expect(source).not.toContain('<el-descriptions :column="3" border>')
+    const shared = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
+    const moduleCss = readFileSync(resolve(process.cwd(), 'src/modules/finance/financeDensity.css'), 'utf8')
+    expect(source).toContain('class="density-fields statement-summary-grid"')
+    expect(shared).toContain('repeat(4, minmax(0, 1fr))')
+    expect(moduleCss).toContain('.statement-summary-item--remark { grid-column: span 2; }')
   })
 
   it('uses entity buttons for row actions and only folds the fourth action into more', () => {
@@ -130,9 +132,10 @@ describe('FinanceCustomerStatementsView', () => {
     expect(actions).not.toContain(' link')
     for (const label of ['详情', '提交', '通过', '驳回', '出账', '调整', '重开']) {
       const actionLine = actions.split('\n').find((line) => line.includes(`${label}</el-button>`))
-      expect(actionLine).toContain('size="small" plain type="primary"')
+      expect(actionLine).toContain('class="density-action"')
+      expect(actionLine).toContain('size="small"')
     }
-    expect(actions).toContain('size="small" plain type="danger"')
+    expect(actions).toContain('data-tone="danger"')
     expect(actions).toContain('aria-label="更多对账单操作" title="更多对账单操作"')
     expect(actions).toContain("row.status === 'PENDING_REVIEW' && canReview && canVoid")
     expect(actions.match(/<el-dropdown-item/g)).toHaveLength(1)
@@ -151,10 +154,10 @@ describe('FinanceCustomerStatementsView', () => {
     const voidButton = actionButtons.find((button) => button.textContent?.trim() === '作废')
     expect(new Set(actionButtons.map((button) => button.textContent?.trim()))).toEqual(new Set(['详情', '调整', '作废']))
     expect(detailButton?.classList).toContain('el-button--small')
-    expect(detailButton?.classList).toContain('is-plain')
-    expect(detailButton?.classList).toContain('el-button--primary')
-    expect(adjustButton?.classList).toContain('el-button--primary')
-    expect(voidButton?.classList).toContain('el-button--danger')
+    expect(detailButton?.classList).toContain('density-action')
+    expect(detailButton?.getAttribute('data-tone')).toBe('neutral')
+    expect(adjustButton?.classList).toContain('density-action')
+    expect(voidButton?.getAttribute('data-tone')).toBe('danger')
 
     const vm = wrapper.vm as unknown as { actionBusy: boolean; adjustBusy: boolean }
     vm.actionBusy = true
@@ -302,7 +305,7 @@ describe('FinanceCustomerStatementsView', () => {
         lastPaymentFrom: '2026-08-20', lastPaymentTo: '2026-08-21',
       },
     })
-    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户对账单', taskNo: 'EXP-STMT-1' })
+    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户对账单', taskNo: 'EXP-STMT-1', dense: true })
     expect(getReconciliationStatement).not.toHaveBeenCalledWith('501')
     expect(URL.createObjectURL).not.toHaveBeenCalled()
   })
@@ -399,7 +402,7 @@ describe('FinanceCustomerStatementsView', () => {
     const { router } = await mountPage(['platform:finance:customer-statement:list'], '/finance/customer-statements/501')
     await flushPromises()
     expect(router.currentRoute.value.name).toBe('finance-customer-statement-detail')
-    expect(document.body.textContent).toContain('客户对账单详情')
+    expect(document.querySelector('[aria-label="客户对账单详情"]')).toBeTruthy()
     expect(document.body.textContent).toContain('返回客户对账单')
     expect(document.body.textContent).toContain('明细加载失败')
     expect(document.body.textContent).toContain('重试')

src/modules/finance/pages/FinanceCustomerStatementsView.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { ArrowLeft, Download, Eye, MoreHorizontal, Plus, RotateCcw, Send, ShieldCheck, XCircle } from '@lucide/vue'
+import { ArrowLeft, Download, MoreHorizontal, Plus } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
@@ -369,7 +372,7 @@ async function exportStatements() {
       taskName: '客户对账单',
       parameters,
     })
-    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
     if (openDownloadCenter) await router.push({ name: 'download-center' })
   } catch (cause) {
     ElMessage.error(getApiErrorMessage(cause, '客户对账单导出任务创建失败'))
@@ -505,7 +508,7 @@ async function createStatement() {
 
 async function performAction(row: FinanceStatementReadModel, actionName: ReconciliationActionPayload['action']) {
   const reason = ['REJECT', 'VOID', 'REOPEN'].includes(actionName)
-    ? await ElMessageBox.prompt('请输入操作原因', '对账单操作', { inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
+    ? await ElMessageBox.prompt('请输入操作原因', '对账单操作', { customClass: 'admin-density-confirm', inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
     : undefined
   if (reason === null) return
   actionBusy.value = true
@@ -571,50 +574,42 @@ watch(detailRouteId, (statementId) => {
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-statements-page" spacing="normal">
+  <AdminPage as="div" class="finance-statements-page admin-density" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问客户对账单" sub-title="请联系管理员开通财务查看权限" />
-    <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page" aria-label="客户对账单详情">
-      <template #header>
-        <header class="statement-detail-page__header">
-          <div><h2>客户对账单详情</h2><p>{{ detail?.billNo || '正在加载对账单信息' }}</p></div>
-          <el-button @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button>
-        </header>
-      </template>
+    <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail" aria-label="客户对账单详情">
+      <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button><h1 class="density-detail-title">{{ detail?.billNo || '—' }}</h1><StatusBadge v-if="detail" :status="financeStatusLabel(detail.status)" /></div></div></template>
       <template v-if="detail" #summary>
-        <div class="statement-detail-head">
-          <div><span>客户对账单</span><h2>{{ detail.billNo }}</h2><p>{{ customerDisplayName(detail.customerId, detail.customerName) }} · {{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</p></div>
-          <el-tag :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
-        </div>
-        <FormSection class="statement-summary-section" title="对账单概要" aria-label="对账单摘要">
-          <div class="statement-summary-grid">
-            <div class="statement-summary-item"><span>总应收金额</span><strong>{{ detail.totalAmount.toFixed(2) }} CNY</strong></div>
-            <div class="statement-summary-item"><span>已收金额</span><strong>{{ detail.paidAmount.toFixed(2) }} CNY</strong></div>
-            <div class="statement-summary-item"><span>未收金额</span><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></div>
-            <div class="statement-summary-item"><span>账期</span><strong>{{ detail.creditDays }} 天</strong></div>
-            <div class="statement-summary-item"><span>费用明细 / 来源</span><strong>{{ detail.lines.length }} / {{ new Set(detail.lines.map((line) => line.sourceFeeId)).size }}</strong></div>
-            <div class="statement-summary-item"><span>调整前金额</span><strong>{{ detailSourceAmount().toFixed(2) }} CNY</strong></div>
-            <div class="statement-summary-item"><span>调整金额</span><strong>{{ (detail.totalAmount - detailSourceAmount()).toFixed(2) }} CNY</strong></div>
-            <div class="statement-summary-item"><span>货币</span><strong>{{ detail.currency }}</strong></div>
-            <div class="statement-summary-item"><span>是否结清</span><strong>{{ detail.settled ? '是' : '否' }}</strong></div>
-            <div class="statement-summary-item"><span>创建人</span><strong>{{ operatorDisplayName(detail.createdByName) }}</strong></div>
-            <div class="statement-summary-item"><span>创建时间</span><strong>{{ formatDateTime(detail.createdAt) }}</strong></div>
-            <div class="statement-summary-item"><span>提交时间</span><strong>{{ formatDateTime(revisionTime(['SUBMIT'])) }}</strong></div>
-            <div class="statement-summary-item"><span>审核时间</span><strong>{{ formatDateTime(revisionTime(['APPROVE', 'REJECT'])) }}</strong></div>
-            <div class="statement-summary-item"><span>出账时间</span><strong>{{ formatDateTime(revisionTime(['ISSUE'])) }}</strong></div>
-            <div class="statement-summary-item"><span>客户确认状态</span><strong>{{ financeStatusLabel(detail.customerConfirmationStatus || 'NOT_REQUIRED') }}</strong></div>
-            <div class="statement-summary-item"><span>客户确认人</span><strong>{{ operatorDisplayName(detail.customerConfirmedByName) }}</strong></div>
-            <div class="statement-summary-item"><span>客户确认时间</span><strong>{{ formatDateTime(detail.customerConfirmedAt) }}</strong></div>
-            <div class="statement-summary-item"><span>更新人</span><strong>{{ operatorDisplayName(detail.updatedByName) }}</strong></div>
-            <div class="statement-summary-item"><span>更新时间</span><strong>{{ formatDateTime(detail.updatedAt) }}</strong></div>
-            <div class="statement-summary-item statement-summary-item--remark"><span>备注</span><strong>{{ detail.remark || '—' }}</strong></div>
-          </div>
+        <dl class="density-detail-overview"><div><dt>客户</dt><dd>{{ customerDisplayName(detail.customerId, detail.customerName) }}</dd></div><div><dt>期间</dt><dd>{{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</dd></div></dl>
+        <FormSection class="statement-summary-section density-form-section" title="对账单概要" aria-label="对账单摘要">
+          <dl class="density-fields statement-summary-grid">
+            <div class="statement-summary-item"><dt>总应收金额</dt><dd>{{ detail.totalAmount.toFixed(2) }} CNY</dd></div>
+            <div class="statement-summary-item"><dt>已收金额</dt><dd>{{ detail.paidAmount.toFixed(2) }} CNY</dd></div>
+            <div class="statement-summary-item"><dt>未收金额</dt><dd class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</dd></div>
+            <div class="statement-summary-item"><dt>账期</dt><dd>{{ detail.creditDays }} 天</dd></div>
+            <div class="statement-summary-item"><dt>费用明细 / 来源</dt><dd>{{ detail.lines.length }} / {{ new Set(detail.lines.map((line) => line.sourceFeeId)).size }}</dd></div>
+            <div class="statement-summary-item"><dt>调整前金额</dt><dd>{{ detailSourceAmount().toFixed(2) }} CNY</dd></div>
+            <div class="statement-summary-item"><dt>调整金额</dt><dd>{{ (detail.totalAmount - detailSourceAmount()).toFixed(2) }} CNY</dd></div>
+            <div class="statement-summary-item"><dt>货币</dt><dd>{{ detail.currency }}</dd></div>
+            <div class="statement-summary-item"><dt>是否结清</dt><dd>{{ detail.settled ? '是' : '否' }}</dd></div>
+            <div class="statement-summary-item"><dt>创建人</dt><dd>{{ operatorDisplayName(detail.createdByName) }}</dd></div>
+            <div class="statement-summary-item"><dt>创建时间</dt><dd>{{ formatDateTime(detail.createdAt) }}</dd></div>
+            <div class="statement-summary-item"><dt>提交时间</dt><dd>{{ formatDateTime(revisionTime(['SUBMIT'])) }}</dd></div>
+            <div class="statement-summary-item"><dt>审核时间</dt><dd>{{ formatDateTime(revisionTime(['APPROVE', 'REJECT'])) }}</dd></div>
+            <div class="statement-summary-item"><dt>出账时间</dt><dd>{{ formatDateTime(revisionTime(['ISSUE'])) }}</dd></div>
+            <div class="statement-summary-item"><dt>客户确认状态</dt><dd>{{ financeStatusLabel(detail.customerConfirmationStatus || 'NOT_REQUIRED') }}</dd></div>
+            <div class="statement-summary-item"><dt>客户确认人</dt><dd>{{ operatorDisplayName(detail.customerConfirmedByName) }}</dd></div>
+            <div class="statement-summary-item"><dt>客户确认时间</dt><dd>{{ formatDateTime(detail.customerConfirmedAt) }}</dd></div>
+            <div class="statement-summary-item"><dt>更新人</dt><dd>{{ operatorDisplayName(detail.updatedByName) }}</dd></div>
+            <div class="statement-summary-item"><dt>更新时间</dt><dd>{{ formatDateTime(detail.updatedAt) }}</dd></div>
+            <div class="statement-summary-item statement-summary-item--remark"><dt>备注</dt><dd>{{ detail.remark || '—' }}</dd></div>
+          </dl>
         </FormSection>
       </template>
-      <el-tabs v-model="activeDetailTab" class="statement-detail-tabs">
-        <el-tab-pane label="账单明细表" name="lines">
+      <el-tabs v-model="activeDetailTab" class="statement-detail-tabs density-element-tabs density-contained-tabs">
+        <el-tab-pane  name="lines"><template #label><span class="density-tab-icon" aria-hidden="true">📋</span><span>账单明细表</span></template>
           <LoadErrorState v-if="detailError" title="明细加载失败" :message="detailError.message" :loading="detailLoading" @retry="retrySelectedDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
           <el-skeleton v-else-if="detailLoading" :rows="4" animated />
-          <FormSection v-else-if="detail" title="账单明细" :bordered="false">
+          <FormSection class="density-form-section" v-else-if="detail" title="账单明细" :bordered="false">
             <div class="detail-table-scroll">
               <DataTable class="statement-detail-table statement-line-table" :data="detail.lines" size="small" border stripe :columns="detailLineColumns" column-settings-mode="hide" row-key="statementLineId" empty-text="该对账单暂无账单明细" aria-label="客户对账单账单明细">
                 <template #direction="{ row }">{{ row.direction === 'PAYABLE' ? '应付' : '应收' }}</template>
@@ -633,8 +628,8 @@ watch(detailRouteId, (statementId) => {
             <el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><el-table :data="detail.revisions" size="small" border stripe><el-table-column prop="revisionNo" label="修订" width="72" /><el-table-column label="动作" width="130"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column><el-table-column prop="beforeAmount" label="调整前" /><el-table-column prop="afterAmount" label="调整后" /><el-table-column prop="reason" label="原因" /><el-table-column label="操作人" min-width="140"><template #default="{ row }">{{ operatorDisplayName(row.operatorName) }}</template></el-table-column><el-table-column label="发生时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column></el-table></el-collapse-item></el-collapse>
           </FormSection>
         </el-tab-pane>
-        <el-tab-pane label="账单支付历史表" name="payments">
-          <FormSection v-if="detail" title="支付历史" :bordered="false">
+        <el-tab-pane  name="payments"><template #label><span class="density-tab-icon" aria-hidden="true">💰</span><span>账单支付历史表</span></template>
+          <FormSection class="density-form-section" v-if="detail" title="支付历史" :bordered="false">
             <div class="detail-table-scroll">
               <DataTable class="statement-detail-table statement-payment-table" :data="detail.paymentHistory" size="small" border stripe :columns="paymentColumns" column-settings-mode="hide" row-key="transactionId" empty-text="该对账单暂无有效收款记录" aria-label="客户对账单支付历史">
                 <template #customerName>{{ customerDisplayName(detail.customerId, detail.customerName) }}</template>
@@ -659,21 +654,21 @@ watch(detailRouteId, (statementId) => {
               <el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportStatements"><Download :size="15" />导出</el-button>
               <el-button v-if="canCreate" type="primary" :disabled="!canGenerate" :title="canGenerate ? '生成对账单' : '缺少客户列表权限，无法选择客户'" @click="openCreate"><Plus :size="15" />生成对账单</el-button>
             </template>
-            <template #actions="{ row }">
-              <el-button size="small" plain type="primary" :disabled="loading" @click.stop="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button>
-              <el-button v-if="row.status === 'DRAFT' && canCreate" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')"><Send :size="15" />提交</el-button>
-              <el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')"><ShieldCheck :size="15" />通过</el-button>
-              <el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REJECT')"><XCircle :size="15" />驳回</el-button>
+            <template #actions="{ row }"><div class="density-actions">
+              <el-button data-tone="neutral" class="density-action" size="small" :disabled="loading" @click.stop="openDetail(row as FinanceStatementReadModel)">详情</el-button>
+              <el-button data-tone="neutral" class="density-action" v-if="row.status === 'DRAFT' && canCreate" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')">提交</el-button>
+              <el-button data-tone="warning" class="density-action" v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')">通过</el-button>
+              <el-button data-tone="danger" class="density-action" v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REJECT')">驳回</el-button>
               <el-dropdown v-if="row.status === 'PENDING_REVIEW' && canReview && canVoid" trigger="click" @command="(command: ReconciliationActionPayload['action']) => performAction(row as FinanceStatementReadModel, command)">
-                <el-button size="small" plain :loading="actionBusy" aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal :size="16" /></el-button>
-                <template #dropdown><el-dropdown-menu><el-dropdown-item command="VOID" class="danger-menu-item"><XCircle :size="15" />作废</el-dropdown-item></el-dropdown-menu></template>
+                <el-button data-tone="neutral" class="density-action" size="small" :loading="actionBusy" aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal aria-hidden="true" :size="16" /></el-button>
+                <template #dropdown><el-dropdown-menu><el-dropdown-item command="VOID" class="danger-menu-item">作废</el-dropdown-item></el-dropdown-menu></template>
               </el-dropdown>
-              <el-button v-if="row.status === 'PENDING_REVIEW' && !canReview && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
-              <el-button v-if="row.status === 'APPROVED' && canIssue" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')"><Send :size="15" />出账</el-button>
-              <el-button v-if="row.status === 'ISSUED' && canAdjust" size="small" plain type="primary" :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)"><RotateCcw :size="15" />调整</el-button>
-              <el-button v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
-              <el-button v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
-            </template>
+              <el-button data-tone="danger" class="density-action" v-if="row.status === 'PENDING_REVIEW' && !canReview && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')">作废</el-button>
+              <el-button data-tone="neutral" class="density-action" v-if="row.status === 'APPROVED' && canIssue" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')">出账</el-button>
+              <el-button data-tone="neutral" class="density-action" v-if="row.status === 'ISSUED' && canAdjust" size="small" :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)">调整</el-button>
+              <el-button data-tone="neutral" class="density-action" v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')">重开</el-button>
+              <el-button data-tone="danger" class="density-action" v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')">作废</el-button>
+            </div></template>
             <template #status="{ row }"><el-tag :type="financeStatusTone(row.status)">{{ financeStatusLabel(row.status) }}</el-tag></template>
             <template #customerConfirmationStatus="{ row }"><el-tag :type="financeStatusTone(row.customerConfirmationStatus || 'NOT_REQUIRED')">{{ financeStatusLabel(row.customerConfirmationStatus || 'NOT_REQUIRED') }}</el-tag></template>
             <template #customerName="{ row }">{{ customerDisplayName(row.customerId, row.customerName) }}</template>
@@ -695,9 +690,9 @@ watch(detailRouteId, (statementId) => {
       </template>
     </ListPageLayout>
 
-    <AppDialog v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement">
+    <AppDialog class="admin-density-dialog" v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement">
       <el-alert v-if="createError" type="warning" :closable="true" show-icon title="暂时无法生成对账单" @close="createError = null"><p>{{ createError.message }}</p></el-alert>
-      <el-form label-position="top">
+      <el-form class="density-form" label-position="top">
         <el-form-item label="生成方式">
           <el-radio-group v-model="createForm.generationMode">
             <el-radio-button value="BY_CUTOFF">按账期自动汇总</el-radio-button>
@@ -720,8 +715,8 @@ watch(detailRouteId, (statementId) => {
       </el-form>
     </AppDialog>
 
-    <AppDialog v-model="adjustOpen" title="调整客户对账单" width="min(900px, 96vw)" :confirm-loading="adjustBusy" @confirm="submitAdjustment">
-      <el-form label-position="top"><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="adjustOpen" title="调整客户对账单" width="min(900px, 96vw)" :confirm-loading="adjustBusy" @confirm="submitAdjustment">
+      <el-form class="density-form" label-position="top"><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></el-form>
       <el-table :data="adjustLines" size="small" max-height="420" border stripe><el-table-column label="选择" width="64"><template #default="{ row }"><el-checkbox v-model="row.selected" /></template></el-table-column><el-table-column prop="feeItemName" label="费用项目" min-width="150" /><el-table-column prop="originalAmount" label="原金额(CNY)" width="130" /><el-table-column label="新金额(CNY)" width="180"><template #default="{ row }"><el-input-number v-model="row.adjustedAmount" :min="0.01" :precision="2" placeholder="请输入新金额" /></template></el-table-column><el-table-column label="明细说明" min-width="220"><template #default="{ row }"><el-input v-model="row.reason" maxlength="500" placeholder="请输入明细说明" /></template></el-table-column></el-table>
     </AppDialog>
   </AdminPage>
@@ -730,87 +725,31 @@ watch(detailRouteId, (statementId) => {
 <style scoped>
 .finance-statements-page { min-width: 0; }
 :deep(.el-select), :deep(.el-date-editor) { width: 100%; }
-.create-period-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
-.selected-source-summary { width: 100%; margin-top: 6px; color: var(--cc-text-secondary); font-size: 12px; text-align: right; }
+.create-period-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-6); }
+.selected-source-summary { width: 100%; margin-top: var(--admin-space-2); color: var(--cc-text-secondary); font-size: var(--admin-font-caption); text-align: right; }
 .statement-detail-page { min-width: 0; width: min(100%, 1920px); margin: 0 auto; overflow: hidden; }
-.statement-detail-page :deep(.detail-page-layout) { gap: 0; }
-.statement-detail-page__header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
-.statement-detail-page__header h2 { margin: 0; color: var(--cc-text-primary); font-size: 20px; }
-.statement-detail-page__header p { margin: 4px 0 0; color: var(--cc-text-secondary); font-size: 13px; }
-.statement-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
-.statement-detail-head > div > span { color: var(--cc-primary); font-size: 11px; font-weight: 700; }
-.statement-detail-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
-.statement-detail-head p { margin: 5px 0 0; color: var(--cc-text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
-.statement-summary-section { padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
-.statement-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
-.statement-summary-item { min-width: 0; }
-.statement-summary-item span, .statement-summary-item strong { display: block; overflow-wrap: anywhere; }
-.statement-summary-item span { margin-bottom: 3px; color: var(--cc-text-secondary); font-size: 12px; }
-.statement-summary-item strong { color: var(--cc-text-primary); font-size: 14px; line-height: 1.45; }
-.statement-summary-item--remark { grid-column: span 2; }
+.statement-summary-section { padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid var(--cc-border-subtle); }
 .statement-outstanding { color: var(--el-color-warning-dark-2); }
 .statement-detail-tabs { min-width: 0; }
 .statement-detail-table { min-width: 0; }
 .detail-table-scroll { min-width: 0; overflow-x: auto; }
-.statement-detail-tabs :deep(.el-tabs__header) { margin: 0; padding: 0 16px; }
-.statement-detail-tabs :deep(.el-tabs__content) { min-width: 0; }
-.statement-detail-tabs :deep(.form-section) { padding: 12px 16px 12px; }
 .statement-line-table { min-width: 1840px; }
 .statement-payment-table { min-width: 1300px; }
-.revision-collapse { margin-top: 12px; }
+.revision-collapse { margin-top: var(--admin-space-5); }
 :deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 
 @media (min-width: 1920px) {
-  .statement-detail-page :deep(.detail-page-layout) {
-    gap: 8px;
-  }
-
-  .statement-detail-page :deep(.detail-page-layout__header) {
-    min-height: 56px;
-    padding: 10px 14px;
-  }
-
-  .statement-detail-page__header h2 {
-    font-size: 18px;
-  }
-
-  .statement-detail-head {
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 6px;
-    padding: 8px 14px;
-  }
 
   .statement-summary-section {
-    padding: 8px 14px;
-  }
-
-  .statement-summary-grid {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 10px 24px;
-  }
-
-  .statement-summary-item--remark {
-    grid-column: span 2;
-  }
-
-  .statement-detail-tabs :deep(.el-tabs__header) {
-    padding: 0 14px;
-  }
-
-  .statement-detail-tabs :deep(.form-section) {
-    padding: 8px 14px;
-  }
-
-  .statement-detail-tabs :deep(.form-section__heading) {
-    margin-bottom: 8px;
+    padding: var(--admin-space-3) var(--admin-space-5);
   }
 
   .detail-table-scroll {
-    margin-bottom: 8px;
+    margin-bottom: var(--admin-space-3);
   }
 
   .revision-collapse {
-    margin-top: 8px;
+    margin-top: var(--admin-space-3);
   }
 }
 

src/modules/finance/pages/FinanceFormalSettlementExport.test.ts

@@ -128,7 +128,7 @@ describe('formal settlement download-center exports', () => {
     expect(createPlatformExportTask).toHaveBeenCalledWith({
       exportType: 'FINANCE_RECEIVABLE_SETTLEMENT_DETAIL', format: 'XLSX', taskName: '应收结算单详情', parameters: { settlementId: '701' },
     })
-    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '应收结算单详情', taskNo: 'EXP-DETAIL-1' })
+    expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '应收结算单详情', taskNo: 'EXP-DETAIL-1', dense: true })
     expect(router.currentRoute.value.name).toBe('download-center')
   })
 

src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts

@@ -8,7 +8,7 @@ const statementsSource = readFileSync(resolve(process.cwd(), 'src/modules/financ
 describe('Finance formal settlement desktop presentation', () => {
   it('keeps settlement totals on the left and list actions on the right of the table toolbar', () => {
     expect(source).toContain('<template #toolbar-start>')
-    expect(source).toContain('<div class="settlement-summary" aria-label="结算汇总">')
+    expect(source).toContain('<dl class="density-detail-overview settlement-summary" aria-label="结算汇总">')
     expect(source).toContain('<template #toolbar-actions>')
     expect(source).toContain('<div class="settlement-list-actions">')
     expect(source).not.toContain('class="settlement-list-toolbar"')
@@ -26,24 +26,21 @@ describe('Finance formal settlement desktop presentation', () => {
     }
   })
 
-  it('renders up to three row actions as compact icon buttons without wrapping', () => {
+  it('renders at most three permitted row actions as shared outlined text buttons', () => {
     expect(source.match(/key: 'actions', label: '操作', width: 250/g)).toHaveLength(2)
-    expect(source).toContain('class="settlement-row-actions"')
-    expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
-    expect(source).toContain('size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"')
-    expect(source).toContain('size="small" type="primary" @click="openPayment(row)"')
-    expect(source).toContain('size="small" plain type="danger" :loading="actionBusy"')
-    expect(source).toContain('size="small" plain type="primary" :loading="actionBusy"')
-    expect(source).toContain('.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }')
-    expect(source).not.toContain('<el-button link')
+    expect(source).toContain('class="settlement-row-actions density-actions"')
+    for (const action of ['openDetail(row)', 'openReceipt(row)', 'openPayment(row)']) expect(source).toContain('@click="' + action + '"')
+    expect(source).toContain('data-tone="danger"')
+    expect(source).toContain('class="density-action"')
     expect(source).not.toContain('MoreHorizontal')
-    expect(source).toContain('v-if="canReceive && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
-    expect(source).toContain('v-if="canPay && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
-    expect(source).toContain('v-if="canVoid && row.status === \'ISSUED\'"')
+    expect(source).toContain("props.kind === 'payable' && access.can('platform:finance:payment:create')")
+    expect(source).toContain("props.kind === 'receivable' && access.can('platform:finance:receipt:create')")
+    expect(source).toContain("canVoid && row.status === 'ISSUED'")
+    expect(source).toContain("canVoid && row.status === 'VOIDED'")
   })
 
   it('uses a continuous detail layout with locally scrollable wide tables', () => {
-    expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel"')
+    expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail"')
     expect(source).toContain('class="settlement-detail-content"')
     expect(source).toContain('class="detail-table-scroll"')
     expect(source).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
@@ -65,7 +62,7 @@ describe('Finance formal settlement desktop presentation', () => {
 
   it('keeps receipt and payment dialogs readable at desktop width', () => {
     expect(source.match(/width="min\(760px, 94vw\)"/g)).toHaveLength(2)
-    expect(source).toContain('.partial-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));')
+    expect(source.match(/class="density-detail-overview partial-summary"/g)).toHaveLength(2)
     expect(source).toContain('.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));')
     expect(source).toContain('<OperationErrorToast :message="receiptValidationError" />')
     expect(source).toContain('<OperationErrorToast :details="receiptError" />')

src/modules/finance/pages/FinanceFormalSettlementPage.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
-import { ArrowLeft, CreditCard, Download, Eye, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
+import { ArrowLeft, CreditCard, Download, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { categoryLabels, listSuppliers, type Supplier } from '@/modules/suppliers'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
@@ -437,6 +440,7 @@ async function submitPayment() {
 
 async function performAction(row: SettlementRow, action: 'VOID' | 'REOPEN') {
   const reason = await ElMessageBox.prompt('请输入操作原因', action === 'VOID' ? `作废${title.value}` : `重开${title.value}`, {
+    customClass: 'admin-density-confirm',
     inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消',
   }).then((result) => result.value.trim()).catch(() => null)
   if (reason === null) return
@@ -481,7 +485,7 @@ async function createSettlementExport(detailId?: string) {
       taskName,
       parameters,
     })
-    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+    const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
     if (openDownloadCenter) await router.push({ name: 'download-center' })
   } catch (cause) {
     ElMessage.error(getApiErrorMessage(cause, `${taskName}导出任务创建失败`))
@@ -502,38 +506,31 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-settlement-page" spacing="normal">
+  <AdminPage as="div" class="finance-settlement-page admin-density" spacing="normal">
     <OperationErrorToast :message="receiptValidationError" />
     <OperationErrorToast :details="receiptError" />
     <el-result v-if="!canView" icon="warning" :title="`无权访问${title}`" sub-title="请联系管理员开通结算单查看权限" />
-    <DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel" :aria-label="`${title}详情`">
-      <template #header><header class="settlement-detail-header">
-        <div class="settlement-detail-heading">
-          <el-button aria-label="返回列表" title="返回列表" @click="backToList"><ArrowLeft :size="17" /></el-button>
-          <div><div class="settlement-detail-breadcrumb">财务管理 / {{ title }} / {{ detail?.settlementNo || settlementId }}</div><h1>{{ title }}详情</h1></div>
-          <el-tag v-if="detail" :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
-        </div>
-        <div class="settlement-detail-actions">
+    <DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail" :aria-label="`${title}详情`">
+      <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" aria-label="返回列表" @click="backToList"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ detail?.settlementNo || '—' }}</h1><StatusBadge v-if="detail" :status="financeStatusLabel(detail.status)" /></div><div class="finance-detail-actions">
           <el-button v-if="detail && canExport" :loading="exportSubmitting" :disabled="exportSubmitting" @click="exportDetail"><Download :size="15" />导出</el-button>
           <el-button v-if="detail && canReceive && ['ISSUED','PARTIALLY_PAID'].includes(detail.status)" type="primary" :loading="receiptBusy" @click="openReceiptFromDetail"><HandCoins :size="15" />部分收款</el-button>
           <el-button v-if="detail && canPay && ['ISSUED','PARTIALLY_PAID'].includes(detail.status)" type="primary" @click="openPaymentFromDetail"><CreditCard :size="15" />部分付款</el-button>
           <el-button v-if="detail && canVoid && detail.status === 'ISSUED'" type="danger" :loading="actionBusy" @click="performAction(detailActionRow(), 'VOID')"><XCircle :size="15" />作废</el-button>
           <el-button v-if="detail && canVoid && detail.status === 'VOIDED'" :loading="actionBusy" @click="performAction(detailActionRow(), 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
-        </div>
-      </header></template>
+        </div></div></template>
       <template v-if="detail" #summary>
-        <section class="settlement-detail-summary" aria-label="结算金额汇总">
-          <div class="summary-item"><span>{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</span><strong>{{ money(detail.amount) }}</strong></div>
-          <div class="summary-item"><span>{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div>
-          <div class="summary-item"><span>未结余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div>
-          <div class="summary-item"><span>到期日</span><strong class="is-date">{{ displayDate(detail.dueDate) }}</strong></div>
-        </section>
+        <dl class="density-detail-overview settlement-detail-summary" aria-label="结算金额汇总">
+          <div class="summary-item"><dt>{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</dt><dd>{{ money(detail.amount) }}</dd></div>
+          <div class="summary-item"><dt>{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div>
+          <div class="summary-item"><dt>未结余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div>
+          <div class="summary-item"><dt>到期日</dt><dd class="is-date">{{ displayDate(detail.dueDate) }}</dd></div>
+        </dl>
       </template>
       <LoadErrorState v-if="detailError" class="settlement-detail-state" :title="`${title}详情加载失败`" :message="detailError.message" :loading="detailLoading" @retry="loadDetail(String(settlementId || ''))"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
       <el-skeleton v-else-if="detailLoading" class="settlement-detail-state" :rows="10" animated />
       <section v-else-if="detail" class="settlement-detail-content">
-        <FormSection title="基本信息">
-          <el-descriptions :column="4" class="settlement-detail-info">
+        <FormSection class="density-form-section" title="基本信息">
+          <el-descriptions border :column="4" class="settlement-detail-info density-descriptions">
             <el-descriptions-item label="结算单号">{{ detail.settlementNo }}</el-descriptions-item>
             <el-descriptions-item :label="kind === 'receivable' ? '客户' : '供应商'">{{ detailPartyName() }}</el-descriptions-item>
             <el-descriptions-item v-if="kind === 'payable'" label="客户">{{ customerName(detail.customerId, detail.customerName) }}</el-descriptions-item>
@@ -550,7 +547,7 @@ onMounted(() => {
             <el-descriptions-item :label="kind === 'receivable' ? '最后收款时间' : '最后付款时间'">{{ displayDateTime(detail.lastPaymentAt) }}</el-descriptions-item>
           </el-descriptions>
         </FormSection>
-        <FormSection title="费用明细">
+        <FormSection class="density-form-section" title="费用明细">
           <div class="detail-table-scroll">
           <el-table :data="detail.lines" size="small" border stripe empty-text="暂无费用明细">
             <el-table-column prop="feeItemName" label="费用类型" min-width="150" />
@@ -563,7 +560,7 @@ onMounted(() => {
           </el-table>
           </div>
         </FormSection>
-        <FormSection :title="kind === 'receivable' ? '收款记录' : '付款记录'">
+        <FormSection class="density-form-section" :title="kind === 'receivable' ? '收款记录' : '付款记录'">
           <div class="detail-table-scroll">
           <el-table :data="detail.transactions" size="small" border stripe :empty-text="kind === 'receivable' ? '暂无收款记录' : '暂无付款记录'">
             <el-table-column prop="transactionDate" :label="kind === 'receivable' ? '收款日期' : '付款日期'" width="130" />
@@ -577,7 +574,7 @@ onMounted(() => {
           </el-table>
           </div>
         </FormSection>
-        <FormSection title="修订记录" :bordered="false">
+        <FormSection class="density-form-section" title="修订记录" :bordered="false">
           <div class="detail-table-scroll">
           <el-table :data="detail.revisions" size="small" border stripe empty-text="暂无调整记录">
             <el-table-column prop="action" label="动作" min-width="120"><template #default="scope">{{ settlementRevisionActionLabel(scope.row.action) || financeOperationActionLabel(scope.row.action) }}</template></el-table-column>
@@ -602,11 +599,11 @@ onMounted(() => {
         <section class="surface-panel table-panel">
           <DataTable v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" :aria-label="`${title}列表`" row-key="id" empty-text="暂无符合条件的结算单">
             <template #toolbar-start>
-              <div class="settlement-summary" aria-label="结算汇总">
-                <div class="summary-item"><span>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</span><strong>{{ money(totals.amount) }}</strong></div>
-                <div class="summary-item"><span>{{ kind === 'receivable' ? '已收' : '已付' }}</span><strong class="is-success">{{ money(totals.paid) }}</strong></div>
-                <div class="summary-item"><span>{{ kind === 'receivable' ? '待收' : '待付' }}</span><strong class="is-danger">{{ money(totals.outstanding) }}</strong></div>
-              </div>
+              <dl class="density-detail-overview settlement-summary" aria-label="结算汇总">
+                <div class="summary-item"><dt>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</dt><dd>{{ money(totals.amount) }}</dd></div>
+                <div class="summary-item"><dt>{{ kind === 'receivable' ? '已收' : '已付' }}</dt><dd class="is-success">{{ money(totals.paid) }}</dd></div>
+                <div class="summary-item"><dt>{{ kind === 'receivable' ? '待收' : '待付' }}</dt><dd class="is-danger">{{ money(totals.outstanding) }}</dd></div>
+              </dl>
             </template>
             <template #toolbar-actions>
               <div class="settlement-list-actions">
@@ -615,12 +612,12 @@ onMounted(() => {
               </div>
             </template>
             <template #actions="{ row }">
-              <div class="settlement-row-actions">
-                <el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>
-                <el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button>
-                <el-button v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" @click="openPayment(row)"><CreditCard :size="15" />付款</el-button>
-                <el-button v-if="canVoid && row.status === 'ISSUED'" size="small" plain type="danger" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')"><XCircle :size="15" />作废</el-button>
-                <el-button v-if="canVoid && row.status === 'VOIDED'" size="small" plain type="primary" :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
+              <div class="settlement-row-actions density-actions">
+                <el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row)">详情</el-button>
+                <el-button data-tone="neutral" class="density-action" v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" :loading="receiptBusy" @click="openReceipt(row)">收款</el-button>
+                <el-button data-tone="neutral" class="density-action" v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" @click="openPayment(row)">付款</el-button>
+                <el-button data-tone="danger" class="density-action" v-if="canVoid && row.status === 'ISSUED'" size="small" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')">作废</el-button>
+                <el-button data-tone="neutral" class="density-action" v-if="canVoid && row.status === 'VOIDED'" size="small" :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')">重开</el-button>
               </div>
             </template>
             <template #customer="{ row }">{{ customerName(String(row.customerId), row.customerName) }}</template>
@@ -644,23 +641,23 @@ onMounted(() => {
       </template>
     </ListPageLayout>
 
-    <AppDialog v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" :confirm-loading="createBusy" @confirm="submitCreate">
-      <el-form label-position="top">
+    <AppDialog class="admin-density-dialog" v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" :confirm-loading="createBusy" @confirm="submitCreate">
+      <el-form class="density-form" label-position="top">
         <el-form-item label="客户"><el-select v-model="createForm.customerId" filterable placeholder="请选择客户"><el-option v-for="item in activeCustomers" :key="String(item.id)" :label="item.tenantName" :value="String(item.id)" /></el-select></el-form-item>
         <el-form-item v-if="kind === 'receivable'" label="已出账对账单"><el-select v-model="createForm.reconciliationStatementId" filterable><el-option v-for="item in statementOptions" :key="item.id" :label="`${item.billNo} · ${item.outstandingAmount} CNY`" :value="item.id" /></el-select></el-form-item>
         <template v-else><el-form-item label="供应商"><el-select v-model="createForm.supplierId" filterable placeholder="请选择供应商"><el-option v-for="item in supplierOptions" :key="String(item.id)" :label="`${item.name} · ${categoryLabels[item.category]}`" :value="String(item.id)" /></el-select></el-form-item><el-form-item label="到期日"><el-date-picker v-model="createForm.dueDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="应付费用来源"><el-select v-model="createForm.feeSourceIds" multiple filterable><el-option v-for="item in feeOptions" :key="item.feeSourceId!" :label="`${item.feeItemName} · ${item.amount} CNY`" :value="item.feeSourceId!" /></el-select></el-form-item></template>
       </el-form>
     </AppDialog>
 
-    <AppDialog v-model="paymentOpen" title="登记付款" width="min(760px, 94vw)" :confirm-loading="paymentBusy" @confirm="submitPayment">
-      <div v-if="detail" class="partial-summary"><div><span>结算单号</span><strong>{{ detail.settlementNo }}</strong></div><div><span>供应商</span><strong>{{ detailPartyName() }}</strong></div><div><span>应付金额</span><strong>{{ money(detail.amount) }}</strong></div><div><span>已付金额</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div><div><span>当前余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div></div>
-      <el-form class="settlement-operation-form" label-position="top"><el-form-item label="付款日期"><el-date-picker v-model="paymentForm.transactionDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次付款金额(CNY)"><el-input-number v-model="paymentForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入付款金额" /></el-form-item><el-form-item label="付款方式"><el-select v-model="paymentForm.method"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="银行流水号/凭证号"><el-input v-model="paymentForm.referenceNo" placeholder="请输入付款流水号" /></el-form-item><el-form-item label="付款凭证"><el-upload :auto-upload="false" :limit="1" accept="image/*" :on-change="selectPaymentFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="paymentForm.remark" type="textarea" placeholder="请输入付款备注（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="paymentOpen" title="登记付款" width="min(760px, 94vw)" :confirm-loading="paymentBusy" @confirm="submitPayment">
+      <dl v-if="detail" class="density-detail-overview partial-summary"><div><dt>结算单号</dt><dd>{{ detail.settlementNo }}</dd></div><div><dt>供应商</dt><dd>{{ detailPartyName() }}</dd></div><div><dt>应付金额</dt><dd>{{ money(detail.amount) }}</dd></div><div><dt>已付金额</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div><div><dt>当前余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div></dl>
+      <el-form class="settlement-operation-form density-form" label-position="top"><el-form-item label="付款日期"><el-date-picker v-model="paymentForm.transactionDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次付款金额(CNY)"><el-input-number v-model="paymentForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入付款金额" /></el-form-item><el-form-item label="付款方式"><el-select v-model="paymentForm.method"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="银行流水号/凭证号"><el-input v-model="paymentForm.referenceNo" placeholder="请输入付款流水号" /></el-form-item><el-form-item label="付款凭证"><el-upload :auto-upload="false" :limit="1" accept="image/*" :on-change="selectPaymentFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="paymentForm.remark" type="textarea" placeholder="请输入付款备注（选填）" /></el-form-item></el-form>
       <div v-if="detail" class="remaining-preview"><span>登记后剩余余额</span><strong>{{ remainingAfter(paymentForm.amount) }}</strong></div>
     </AppDialog>
 
-    <AppDialog v-model="receiptOpen" title="登记收款" width="min(760px, 94vw)" :confirm-loading="receiptBusy" @confirm="submitReceipt">
-      <div v-if="detail" class="partial-summary"><div><span>结算单号</span><strong>{{ detail.settlementNo }}</strong></div><div><span>客户公司</span><strong>{{ detailPartyName() }}</strong></div><div><span>应收金额</span><strong>{{ money(detail.amount) }}</strong></div><div><span>已收金额</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div><div><span>当前余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div></div>
-      <el-form class="settlement-operation-form" label-position="top"><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次收款金额(CNY)"><el-input-number v-model="receiptForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入收款金额" /></el-form-item><el-form-item label="收款方式"><el-select v-model="receiptForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="收款凭证"><el-upload :key="receiptUploadKey" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectReceiptFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="receiptForm.remark" type="textarea" placeholder="请输入收款备注（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="receiptOpen" title="登记收款" width="min(760px, 94vw)" :confirm-loading="receiptBusy" @confirm="submitReceipt">
+      <dl v-if="detail" class="density-detail-overview partial-summary"><div><dt>结算单号</dt><dd>{{ detail.settlementNo }}</dd></div><div><dt>客户公司</dt><dd>{{ detailPartyName() }}</dd></div><div><dt>应收金额</dt><dd>{{ money(detail.amount) }}</dd></div><div><dt>已收金额</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div><div><dt>当前余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div></dl>
+      <el-form class="settlement-operation-form density-form" label-position="top"><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次收款金额(CNY)"><el-input-number v-model="receiptForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入收款金额" /></el-form-item><el-form-item label="收款方式"><el-select v-model="receiptForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="收款凭证"><el-upload :key="receiptUploadKey" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectReceiptFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="receiptForm.remark" type="textarea" placeholder="请输入收款备注（选填）" /></el-form-item></el-form>
       <div v-if="detail" class="remaining-preview"><span>登记后剩余余额</span><strong>{{ remainingAfter(receiptForm.amount) }}</strong></div>
     </AppDialog>
   </AdminPage>
@@ -669,115 +666,50 @@ onMounted(() => {
 <style scoped>
 .finance-settlement-page { min-width: 0; }
 .settlement-summary, .settlement-list-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; }
-.settlement-summary { gap: 6px 0; }
-.settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
+.settlement-summary { gap: var(--admin-space-2) 0; }
+.settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: var(--admin-space-3); }
 .settlement-list-actions :deep(.el-button + .el-button) { margin-left: 0; }
-.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
-.settlement-row-actions :deep(.el-button + .el-button) { margin-left: 0; }
-.summary-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
-.settlement-summary .summary-item + .summary-item { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--cc-border, #e3e8ef); }
-.summary-item span { color: var(--cc-text-secondary, #64748b); font-size: 13px; }
-.summary-item strong { color: var(--cc-text-primary, #1f2937); font-size: 18px; line-height: 1.2; }
-.summary-item strong.is-success { color: #16803c; }
-.summary-item strong.is-danger { color: #c2413a; }
 .settlement-detail-page { display: flex; width: min(100%, 1920px); margin: 0 auto; min-width: 0; gap: 0; overflow: hidden; padding: 0; }
-.settlement-detail-header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
-.settlement-detail-heading, .settlement-detail-actions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
-.settlement-detail-heading h1 { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: 0; }
-.settlement-detail-breadcrumb { color: var(--cc-text-secondary, #64748b); font-size: 12px; }
-.settlement-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
-.settlement-detail-summary .summary-item { align-items: flex-start; flex-direction: column; gap: 4px; padding: 0 12px; border-left: 1px solid var(--cc-border, #e3e8ef); }
-.settlement-detail-summary .summary-item:first-child { padding-left: 0; border-left: 0; }
-.summary-item strong.is-date { font-size: 20px; }
-.settlement-detail-state { margin: 14px 16px; }
-.settlement-detail-content { min-width: 0; padding: 0 16px 12px; overflow: hidden; }
+.settlement-detail-actions { display: flex; align-items: center; gap: var(--admin-space-4); min-width: 0; flex-wrap: wrap; }
+.settlement-detail-state { margin: var(--admin-space-5) var(--admin-space-6); }
+.settlement-detail-content { min-width: 0; padding: 0 var(--admin-space-6) var(--admin-space-5); overflow: hidden; }
 .settlement-detail-info { min-width: 0; }
 .detail-table-scroll { min-width: 0; overflow-x: auto; }
 :deep(.settlement-detail-info .el-descriptions__table) { table-layout: fixed; }
 :deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; overflow-wrap: anywhere; }
 :deep(.detail-table-scroll .el-table) { min-width: 920px; }
-.partial-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; padding: 10px 0; border: 1px solid var(--el-color-primary-light-7); border-radius: 6px; background: var(--el-color-primary-light-9); }
-.partial-summary div { min-width: 0; padding: 0 10px; border-left: 1px solid var(--el-color-primary-light-7); }
-.partial-summary div:first-child { border-left: 0; }
-.partial-summary span, .partial-summary strong { display: block; overflow-wrap: anywhere; }
-.partial-summary span { color: var(--cc-text-secondary, #64748b); font-size: 12px; }
-.partial-summary strong { margin-top: 4px; color: var(--cc-text-primary, #1f2937); font-size: 15px; }
-.partial-summary strong.is-success { color: #16803c; }
-.partial-summary strong.is-danger { color: #c2413a; }
-.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; }
+.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--admin-space-5); row-gap: 0; }
 .settlement-operation-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
 .settlement-operation-form :deep(.el-input-number) { width: 100%; }
-.remaining-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--cc-text-secondary, #64748b); background: var(--el-fill-color-light); }
-.remaining-preview strong { color: #b45309; font-size: 16px; }
-.operation-error { margin-bottom: 12px; }
-.operation-error-meta { margin: -6px 0 12px; }
+.remaining-preview { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-4); padding: var(--admin-space-3) var(--admin-space-5); border-radius: var(--admin-radius); color: var(--cc-text-secondary, #64748b); background: var(--el-fill-color-light); }
+.remaining-preview strong { color: #b45309; font-size: var(--admin-font-section); }
+.operation-error { margin-bottom: var(--admin-space-5); }
+.operation-error-meta { margin: -var(--admin-space-2) 0 var(--admin-space-5); }
 :deep(.el-select), :deep(.el-date-editor) { width: 100%; }
 
 @media (min-width: 1920px) {
   .finance-settlement-page {
-    row-gap: 8px;
-  }
-
-  .settlement-summary .summary-item {
-    gap: 6px;
-  }
-
-  .settlement-summary .summary-item + .summary-item {
-    margin-left: 12px;
-    padding-left: 12px;
-  }
-
-  .summary-item strong {
-    font-size: 17px;
+    row-gap: var(--admin-space-3);
   }
 
   .settlement-detail-page {
     gap: 0;
   }
 
-  .settlement-detail-header {
-    min-height: 56px;
-    padding: 10px 14px;
-  }
-
-  .settlement-detail-summary {
-    padding: 8px 14px;
-  }
-
-  .settlement-detail-summary .summary-item {
-    padding: 0 10px;
-  }
-
-  .settlement-detail-summary .summary-item strong {
-    margin-top: 2px;
-    font-size: 18px;
-  }
-
   .settlement-detail-state {
-    margin: 10px 14px;
+    margin: var(--admin-space-4) var(--admin-space-5);
   }
 
   .settlement-detail-content {
-    padding: 0 14px 10px;
+    padding: 0 var(--admin-space-5) var(--admin-space-4);
   }
 
   .detail-table-scroll {
-    margin-bottom: 8px;
-  }
-
-  .partial-summary {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    gap: 0;
-    margin-bottom: 8px;
-    padding: 8px 0;
-  }
-
-  .partial-summary div {
-    padding: 0 8px;
+    margin-bottom: var(--admin-space-3);
   }
 
   .settlement-operation-form {
-    column-gap: 12px;
+    column-gap: var(--admin-space-5);
   }
 }
 @media (max-width: 720px) {

src/modules/finance/pages/FinancePresentation.test.ts

@@ -3,6 +3,8 @@ import { resolve } from 'node:path'
 import { describe, expect, it } from 'vitest'
 
 const settlement = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceFormalSettlementPage.vue'), 'utf8')
+const density = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
+const financeDensity = readFileSync(resolve(process.cwd(), 'src/modules/finance/financeDensity.css'), 'utf8')
 const financeRoutes = readFileSync(resolve(process.cwd(), 'src/modules/finance/routes.ts'), 'utf8')
 const accounts = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerAccountsView.vue'), 'utf8')
 const statements = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
@@ -22,7 +24,7 @@ describe('finance presentation governance', () => {
     expect(financeRoutes).toContain("finance/receivable-statistics")
     expect(financeRoutes).toContain("platform:finance:receivable-statistics:list")
     expect(financeRoutes).toContain('showPageHeading: false')
-    expect(settlement).toContain('class="settlement-detail-page surface-panel"')
+    expect(settlement).toContain('class="settlement-detail-page surface-panel finance-density-detail"')
     expect(settlement).toContain('返回列表')
     expect(settlement).not.toContain('AppDrawer')
     expect(settlement).toContain('登记后剩余余额')
@@ -30,32 +32,27 @@ describe('finance presentation governance', () => {
     expect(settlement).toContain('remainingAfter(paymentForm.amount)')
   })
 
-  it('uses one continuous desktop detail surface with balanced summary and scroll-safe tables', () => {
-    expect(settlement).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel"')
+  it('uses one continuous desktop detail surface with shared summaries and scroll-safe tables', () => {
+    expect(settlement).toContain('class="settlement-detail-page surface-panel finance-density-detail"')
     expect(settlement).toContain('class="settlement-detail-content"')
-    expect(settlement).toContain('.settlement-detail-header { display: flex; min-height: 68px;')
-    expect(settlement).toContain('align-items: center;')
-    expect(settlement).toContain('justify-content: space-between')
-    expect(settlement).toContain('<el-descriptions :column="4" class="settlement-detail-info">')
-    for (const title of ['基本信息', '费用明细', '修订记录']) expect(settlement).toContain(`title="${title}"`)
+    expect(settlement).toContain('class="settlement-detail-info density-descriptions"')
+    for (const title of ['基本信息', '费用明细', '修订记录']) expect(settlement).toContain('title="' + title + '"')
     expect(settlement).toContain(':title="kind === \'receivable\' ? \'收款记录\' : \'付款记录\'"')
     expect(settlement.match(/class="detail-table-scroll"/g)).toHaveLength(3)
-    expect(settlement).toContain('grid-template-columns: repeat(4, minmax(0, 1fr))')
     expect(settlement).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
     expect(settlement).not.toContain('class="detail-section surface-panel"')
     expect(settlement.match(/width="min\(760px, 94vw\)"/g)).toHaveLength(2)
-    expect(settlement.match(/class="settlement-operation-form"/g)).toHaveLength(2)
-    expect(settlement).toContain('grid-template-columns: repeat(5, minmax(0, 1fr))')
+    expect(settlement.match(/class="settlement-operation-form density-form"/g)).toHaveLength(2)
     expect(settlement).toContain('grid-template-columns: repeat(2, minmax(0, 1fr));')
-    expect(settlement).toContain('column-gap: 14px;')
+    expect(settlement).toContain('column-gap: var(--admin-space-5);')
   })
 
   it('keeps settlement totals and list actions in the table toolbar', () => {
     expect(settlement).toContain('<template #toolbar-start>')
-    expect(settlement).toContain('class="settlement-summary" aria-label="结算汇总"')
+    expect(settlement).toContain('class="density-detail-overview settlement-summary" aria-label="结算汇总"')
     expect(settlement).toContain('<template #toolbar-actions>')
     expect(settlement).toContain('class="settlement-list-actions"')
-    expect(settlement).toContain('.settlement-summary .summary-item + .summary-item')
+    expect(financeDensity).toContain('.settlement-summary.density-detail-overview { padding: 0; border: 0; }')
     expect(settlement).not.toContain('class="settlement-list-toolbar"')
   })
 
@@ -110,8 +107,8 @@ describe('finance presentation governance', () => {
 
   it('translates source codes and provides reason placeholders', () => {
     expect(arap).toContain('sourceTypeDisplay(detail.sourceType)')
-    expect(arap).toContain('financeOperationActionLabel(log.action)')
-    expect(arap).toContain('financeOperationResultLabel(log.result)')
+    expect(arap).toContain('financeOperationActionLabel(row.action)')
+    expect(arap).toContain('financeOperationResultLabel(row.result)')
     expect(arap).toContain('financeDirectionLabel(row.direction)')
     expect(arap).toContain('financeDirectionLabel(detail.direction)')
     expect(arap).not.toContain("detail.direction === 'RECEIVABLE' ? '应收' : '应付'")
@@ -138,10 +135,10 @@ describe('finance presentation governance', () => {
   })
 
   it('opens statement details on a compact dedicated route instead of below the list', () => {
-    expect(statements).toContain('v-else-if="isDetailRoute" class="surface-panel statement-detail-page"')
+    expect(statements).toContain('v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail"')
     expect(statements).toContain('@row-click="openDetail"')
     expect(statements).toContain("name: 'finance-customer-statement-detail'")
-    expect(statements).toContain('.statement-detail-page :deep(.detail-page-layout) { gap: 0; }')
+    expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
     expect(statements).toContain('返回客户对账单')
     expect(statements).not.toContain('aria-label="所选对账单联动明细"')
     expect(statements).not.toContain('核对账期、金额和结清状态后查看下方业务明细。')
@@ -149,13 +146,10 @@ describe('finance presentation governance', () => {
     expect(statements).not.toContain('只读展示当前对账单关联的有效收款记录。')
   })
 
-  it('uses a compact financial summary row for customer accounts', () => {
-    expect(accounts).toContain('.finance-account-detail__layout :deep(.detail-page-layout)')
-    expect(accounts).toContain('gap: 0;')
-    expect(accounts).toContain('.account-metric + .account-metric')
-    expect(accounts).toContain('border-left: 1px solid')
-    expect(accounts).toContain('.account-metric::before')
-    expect(accounts).toContain('display: none;')
+  it('uses a shared compact financial summary row for customer accounts', () => {
+    expect(accounts).toContain('class="density-detail-overview account-metrics"')
+    expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
+    expect(density).toContain('.density-detail-overview')
     expect(accounts).toContain(':deep(.ledger-query.query-toolbar)')
     expect(accounts).toContain('padding: 0;')
     expect(accounts).toContain('border: 0;')
@@ -165,15 +159,12 @@ describe('finance presentation governance', () => {
   })
 
   it('keeps fee-source details continuous without nested metric and section cards', () => {
-    expect(arap).toContain('.finance-arap-detail__layout :deep(.detail-page-layout)')
-    expect(arap).toContain('.arap-metric + .arap-metric')
-    expect(arap).toContain('border-left: 1px solid')
-    expect(arap).toContain('.arap-settlement {')
-    expect(arap).toContain('padding-left: 16px;')
+    expect(arap).toContain('class="density-detail-overview arap-metrics"')
+    expect(arap).toContain('class="arap-information density-form-section"')
+    expect(arap).toContain('class="arap-settlement density-form-section"')
+    expect(arap).toContain('padding-left: var(--admin-space-6);')
     expect(arap).toContain('border-left: 1px solid')
     expect(arap).not.toContain('.arap-metric.is-amount { border-color:')
-    expect(arap).not.toContain('description="费用来源与关联业务摘要"')
-    expect(arap).not.toContain('description="当前审核和出账状态"')
-    expect(arap).not.toContain('description="按时间查看审核与结算调整记录"')
+    for (const description of ['费用来源与关联业务摘要', '当前审核和出账状态', '按时间查看审核与结算调整记录']) expect(arap).not.toContain('description="' + description + '"')
   })
 })

src/modules/finance/pages/FinanceReceivableStatisticsView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../financeDensity.css'
 import { computed, onMounted, ref } from 'vue'
 import { Download, Printer, RotateCcw, Search } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
@@ -76,7 +78,7 @@ async function exportCurrent() {
   try {
     const task = await createPlatformExportTask({ exportType: 'FINANCE_RECEIVABLE_STATISTICS', format: 'XLSX', taskName: `应收款统计表-${month.value}`,
       parameters: { month: month.value, ...(customerId.value ? { customerId: customerId.value } : {}) } })
-    const open = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+    const open = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
     if (open) await router.push({ name: 'download-center' })
   } catch (reason) { ElMessage.error(getApiErrorMessage(reason, '应收款统计导出任务创建失败')) }
   finally { exporting.value = false }
@@ -87,25 +89,25 @@ onMounted(() => { void loadCustomers(); void load() })
 </script>
 
 <template>
-  <AdminPage class="receivable-statistics-page" spacing="normal">
+  <AdminPage class="receivable-statistics-page admin-density" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
     <template v-else>
       <section class="surface-panel statistics-query" aria-label="应收款统计筛选">
         <div class="query-field"><span>统计月份</span><el-date-picker v-model="month" type="month" value-format="YYYY-MM" format="YYYY年MM月" :clearable="false" aria-label="统计月份" /></div>
         <div class="query-field"><span>应收单位</span><el-select v-model="customerId" clearable filterable placeholder="全部应收单位" aria-label="应收单位"><el-option v-for="customer in customers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></div>
         <div class="query-actions"><el-button type="primary" :loading="loading" @click="search"><Search :size="16" />查询</el-button><el-button @click="reset"><RotateCcw :size="16" />重置</el-button></div>
-        <div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div>
       </section>
       <LoadErrorState v-if="error" title="应收款统计加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
       <template v-else>
-        <section class="statistics-summary" aria-label="CNY应收汇总">
-          <div><span>应收总额</span><strong>CNY {{ money(result?.totalReceivable) }}</strong></div>
-          <div><span>已收合计</span><strong class="is-received">CNY {{ money(result?.totalReceived) }}</strong></div>
-          <div><span>余额未收</span><strong class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</strong></div>
-        </section>
+        <dl class="density-detail-overview statistics-summary" aria-label="CNY应收汇总">
+          <div><dt>应收总额</dt><dd>CNY {{ money(result?.totalReceivable) }}</dd></div>
+          <div><dt>已收合计</dt><dd class="is-received">CNY {{ money(result?.totalReceived) }}</dd></div>
+          <div><dt>余额未收</dt><dd class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</dd></div>
+        </dl>
         <section class="surface-panel statistics-table">
           <header><h2>应收款明细</h2><span>共 {{ result?.totalCustomers ?? 0 }} 个应收单位 · 仅统计CNY正式应收结算单</span></header>
           <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="result?.totalCustomers ?? 0" :row-key="statisticsRowKey" preference-key="finance-receivable-statistics-table" aria-label="应收款统计列表" empty-text="当前月份暂无应收数据" @update:page="load()" @update:page-size="page = 1; load()">
+            <template #toolbar-actions><div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div></template>
             <template #customerName="{ row }">{{ displayCustomerName(row) }}</template><template #totalReceivable="{ row }">{{ money(row.totalReceivable) }}</template><template #totalReceived="{ row }">{{ money(row.totalReceived) }}</template><template #totalOutstanding="{ row }"><span class="outstanding-cell">{{ money(row.totalOutstanding) }}</span></template>
             <template #pagination-left>统计月份：{{ result?.statisticsMonth }} · 币种：CNY</template>
           </DataTable>
@@ -116,24 +118,19 @@ onMounted(() => { void loadCustomers(); void load() })
 </template>
 
 <style scoped>
-.statistics-query { display: flex; align-items: end; gap: 12px; padding: 16px; }
-.query-field { display: grid; min-width: 220px; gap: 6px; color: var(--cc-muted); font-size: 13px; }
+.statistics-query { display: flex; align-items: end; gap: var(--admin-space-5); padding: var(--admin-space-6); }
+.query-field { display: grid; min-width: 220px; gap: var(--admin-space-2); color: var(--cc-muted); font-size: var(--admin-font-body); }
 .query-field :deep(.el-select), .query-field :deep(.el-date-editor) { width: 100%; }
-.query-actions, .report-actions { display: flex; gap: 8px; }
+.query-actions, .report-actions { display: flex; gap: var(--admin-space-3); }
 .report-actions { margin-left: auto; }
 .query-actions :deep(.el-button), .report-actions :deep(.el-button) { margin-left: 0; }
-.statistics-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
-.statistics-summary > div { padding: 16px; border: 1px solid var(--cc-border, #e3e8ef); border-radius: 8px; background: var(--cc-surface, #fff); }
-.statistics-summary span { display: block; margin-bottom: 8px; color: var(--cc-muted); font-size: 13px; }
-.statistics-summary strong { font-size: 22px; font-variant-numeric: tabular-nums; }
-.statistics-summary .is-received { color: var(--el-color-success); }
-.statistics-summary .is-outstanding, .outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
+.outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
 .statistics-table { overflow: hidden; }
-.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
-.statistics-table h2 { margin: 0; font-size: 16px; }
-.statistics-table header span { color: var(--cc-muted); font-size: 13px; }
+.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border, #e3e8ef); }
+.statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
+.statistics-table header span { color: var(--cc-muted); font-size: var(--admin-font-body); }
 @media print {
-  .statistics-query, :deep(.data-table__pagination) { display: none !important; }
+  .statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
   .receivable-statistics-page { gap: 10px; color: #000; }
   .statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
 }

src/modules/finance/pages/FinanceSettlementPayablesView.vue

@@ -10,18 +10,3 @@ function openDetail(id: string) { void router.push({ name: 'finance-settlement-p
 function back() { void router.push({ name: 'finance-settlement-payables' }) }
 </script>
 <template><FinanceFormalSettlementPage class="finance-settlement-route finance-settlement-route--payable" kind="payable" :settlement-id="settlementId" @open-detail="openDetail" @back="back" /></template>
-
-<style scoped>
-@media (min-width: 1920px) {
-  .finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody) {
-    display: grid;
-    grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr);
-    column-gap: 20px;
-    row-gap: 10px;
-  }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody > tr) { display: contents; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__label) { min-width: 0; white-space: nowrap; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; }
-}
-</style>

src/modules/finance/pages/FinanceSettlementReceivablesView.vue

@@ -10,18 +10,3 @@ function openDetail(id: string) { void router.push({ name: 'finance-settlement-r
 function back() { void router.push({ name: 'finance-settlement-receivables' }) }
 </script>
 <template><FinanceFormalSettlementPage class="finance-settlement-route finance-settlement-route--receivable" kind="receivable" :settlement-id="settlementId" @open-detail="openDetail" @back="back" /></template>
-
-<style scoped>
-@media (min-width: 1920px) {
-  .finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody) {
-    display: grid;
-    grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr);
-    column-gap: 20px;
-    row-gap: 10px;
-  }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody > tr) { display: contents; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__label) { min-width: 0; white-space: nowrap; }
-  .finance-settlement-route :deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; }
-}
-</style>

src/modules/finance/pages/FinanceSettlementRouteLayout.test.ts

@@ -9,11 +9,15 @@ describe('Finance settlement route 1920px layout', () => {
   it.each([
     ['应收', receivableSource, 'finance-settlement-route--receivable'],
     ['应付', payableSource, 'finance-settlement-route--payable'],
-  ])('uses the full detail workspace and a readable two-field information grid for %s', (_label, source, routeClass) => {
+  ])('delegates the detail grid to the shared settlement page for %s', (_label, source, routeClass) => {
     expect(source).toContain(routeClass)
-    expect(source).toContain('@media (min-width: 1920px)')
-    expect(source).toContain('.finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }')
-    expect(source).toContain('grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr)')
-    expect(source).toContain('> tbody > tr) { display: contents; }')
+    expect(source).toContain('<FinanceFormalSettlementPage')
+    expect(source).toContain(':settlement-id="settlementId"')
+    expect(source).toContain('@open-detail="openDetail" @back="back"')
+    expect(source).toContain('kind="' + (routeClass.endsWith('receivable') ? 'receivable' : 'payable') + '"')
+    expect(source).not.toContain('<style')
+    const shared = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceFormalSettlementPage.vue'), 'utf8')
+    expect(shared).toContain(':column="4" class="settlement-detail-info density-descriptions"')
+    expect(shared).toContain('finance-density-detail')
   })
 })

src/modules/iam/iamDensity.css

@@ -0,0 +1,8 @@
+/* IAM-only layout; the shared stylesheet owns forms, dialogs and row buttons. */
+.iam-density .permission-tree { margin-top: 0; padding: 0; border-top: 0; }
+.iam-density .permission-tree .el-tree-node__content { height: auto; min-height: var(--admin-row-height); }
+.iam-density .permission-node { align-items: flex-start; gap: var(--admin-space-3); padding-right: var(--admin-space-5); }
+.iam-density .permission-node span { white-space: normal; overflow-wrap: anywhere; }
+.iam-density :is(.permission-node code, .code-value, .endpoint-cell code) { font-size: var(--admin-font-caption); }
+.iam-density .form-callout { gap: var(--admin-space-4); margin-top: var(--admin-space-5); padding: var(--admin-space-5); border-radius: var(--admin-radius); }
+.iam-density .form-callout strong, .iam-density .form-callout p { font-size: var(--admin-font-caption); }

src/modules/iam/pages/InternalUsersView.test.ts

@@ -79,11 +79,11 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('InternalUsersView platform internal user management', () => {
-  it('renders row business actions as colored outlined buttons with prototype icons', () => {
-    expect(internalUsersSource).toContain('size="small" plain type="primary" @click="openEdit')
-    expect(internalUsersSource).toContain('size="small" plain :type="(row as PlatformManagedUser).status')
-    expect(internalUsersSource).toContain('<Pencil :size="15" />编辑')
-    expect(internalUsersSource).toContain('<Power :size="15" />')
+  it('renders row business actions as shared outlined text buttons', () => {
+    expect(internalUsersSource).toContain('size="small" data-tone="neutral" @click="openEdit')
+    expect(internalUsersSource).toContain('size="small" :data-tone="(row as PlatformManagedUser).status')
+    expect(internalUsersSource).toMatch(/>\s*编辑\s*<\/el-button>/)
+    expect(internalUsersSource).toContain(':data-tone=')
     expect(internalUsersSource).not.toContain('v-if="canChangeStatus" link')
   })
 

src/modules/iam/pages/InternalUsersView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../iamDensity.css'
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Pencil, Plus, Power } from '@lucide/vue'
+import { Plus } from '@lucide/vue'
 import {
   changePlatformManagedUserStatus,
   createPlatformManagedUser,
@@ -301,7 +303,7 @@ async function toggleStatus(row: PlatformManagedUser) {
   const targetStatus = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
   const targetLabel = targetStatus === 'ACTIVE' ? '启用' : '禁用'
   try {
-    await ElMessageBox.confirm(`确认${targetLabel}用户“${row.displayName}”吗？`, `${targetLabel}用户`, {
+    await ElMessageBox.confirm(`确认${targetLabel}用户“${row.displayName}”吗？`, `${targetLabel}用户`, { customClass: 'admin-density-confirm',
       confirmButtonText: `确认${targetLabel}`,
       cancelButtonText: '取消',
       type: targetStatus === 'DISABLED' ? 'warning' : 'info',
@@ -342,7 +344,7 @@ onMounted(loadInitialData)
 </script>
 
 <template>
-  <AdminPage as="div">
+  <AdminPage class="admin-density iam-density" as="div">
     <ListPageLayout aria-label="内部用户管理">
       <template #toolbar>
         <QueryToolbar
@@ -365,16 +367,16 @@ onMounted(loadInitialData)
         :loading="loading" :total="total" aria-label="内部用户列表" row-key="membershipId" empty-text="没有符合筛选条件的内部用户">
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增用户</el-button></template>
         <template #actions="{ row }">
-          <div class="table-actions">
-            <el-button v-if="canEdit || canChangeStatus || canResetPassword" size="small" plain type="primary" @click="openEdit(row as PlatformManagedUser)">
-              <Pencil :size="15" />编辑
+          <div class="table-actions density-actions">
+            <el-button class="density-action" v-if="canEdit || canChangeStatus || canResetPassword" size="small" data-tone="neutral" @click="openEdit(row as PlatformManagedUser)">
+              编辑
             </el-button>
-            <el-button v-if="canChangeStatus" size="small" plain :type="(row as PlatformManagedUser).status === 'ACTIVE' ? 'danger' : 'success'"
+            <el-button class="density-action" v-if="canChangeStatus" size="small" :data-tone="(row as PlatformManagedUser).status === 'ACTIVE' ? 'danger' : 'success'"
               :loading="rowActionId === String((row as PlatformManagedUser).membershipId)"
               :disabled="cannotDisable(row as PlatformManagedUser)"
               :title="(row as PlatformManagedUser).protectedAccount ? '系统管理员不能被禁用' : isCurrentUser(row as PlatformManagedUser) ? '不能禁用当前登录用户' : undefined"
               @click="toggleStatus(row as PlatformManagedUser)">
-              <Power :size="15" />{{ (row as PlatformManagedUser).status === 'ACTIVE' ? '禁用' : '启用' }}
+              {{ (row as PlatformManagedUser).status === 'ACTIVE' ? '禁用' : '启用' }}
             </el-button>
           </div>
         </template>
@@ -391,9 +393,9 @@ onMounted(loadInitialData)
       </section>
     </ListPageLayout>
 
-    <AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="internal-user-editor-dialog" destroy-on-close :confirm-loading="saving" :confirm-text="editingUser ? '保存修改' : '确认添加'" @confirm="saveUser">
-      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top">
-        <FormSection title="用户资料" description="维护登录身份、联系方式与平台角色。">
+    <AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="internal-user-editor-dialog admin-density-dialog iam-density" destroy-on-close :confirm-loading="saving" :confirm-text="editingUser ? '保存修改' : '确认添加'" @confirm="saveUser">
+      <el-form class="density-form" ref="formRef" :model="form" :rules="formRules" label-position="top">
+        <FormSection class="density-form-section" title="用户资料" description="维护登录身份、联系方式与平台角色。">
           <div class="form-grid two-cols">
           <el-form-item label="用户名" prop="username" required>
             <el-input v-model="form.username" :disabled="Boolean(editingUser)" placeholder="登录用户名" maxlength="64" />
@@ -439,7 +441,7 @@ onMounted(loadInitialData)
           </div>
         </FormSection>
 
-        <FormSection v-if="!editingUser || canResetPassword" title="登录密码" description="密码为 8-64 位，并同时包含字母和数字。">
+        <FormSection class="density-form-section" v-if="!editingUser || canResetPassword" title="登录密码" description="密码为 8-64 位，并同时包含字母和数字。">
           <el-checkbox v-if="editingUser" v-model="form.resetPassword">同时重置密码</el-checkbox>
           <div v-if="!editingUser || form.resetPassword" class="form-grid two-cols password-fields">
             <el-form-item :label="editingUser ? '新密码' : '初始密码'" prop="password" required>
@@ -456,8 +458,8 @@ onMounted(loadInitialData)
 </template>
 
 <style scoped>
-.password-fields { margin-top: 16px; }
-.field-help, .field-error { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
+.password-fields { margin-top: var(--admin-space-6); }
+.field-help, .field-error { margin: 6px 0 0; font-size: var(--admin-font-caption); line-height: 1.5; }
 .field-help { color: var(--cc-text-secondary); }
 .field-error { color: var(--el-color-danger); }
 :global(.internal-user-editor-dialog) { max-height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column; }

src/modules/iam/pages/PermissionsDialog.behavior.test.ts

@@ -0,0 +1,69 @@
+import ElementPlus, { type FormInstance } from 'element-plus'
+import { createPinia, setActivePinia } from 'pinia'
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { useAuthStore } from '@/core/auth/auth'
+import AppDialog from '@/shared/components/AppDialog.vue'
+import { createPlatformPermission, listPlatformPermissions, updatePlatformPermission } from '../api/platformIam'
+import PermissionsView from './PermissionsView.vue'
+
+vi.mock('../api/platformIam', () => ({
+  listPlatformPermissions: vi.fn(), createPlatformPermission: vi.fn(), updatePlatformPermission: vi.fn(),
+  changePlatformPermissionStatus: vi.fn(), deletePlatformPermission: vi.fn(),
+}))
+
+enableAutoUnmount(afterEach)
+afterEach(() => { document.body.innerHTML = ''; vi.unstubAllGlobals(); vi.clearAllMocks() })
+
+describe('permission editor modal', () => {
+  it.each(['create', 'edit'])('keeps the %s form in the centered dialog and preserves failed writes', async mode => {
+    vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} })
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    const auth = useAuthStore()
+    auth.isServerSession = true
+    auth.permissions = ['platform:permission:list', 'platform:permission:create', 'platform:permission:edit']
+    vi.mocked(listPlatformPermissions).mockResolvedValue([{
+      id: '90071992547409931', tenantId: 0, appCode: 'PLATFORM', permissionType: 'MENU', parentId: 0,
+      permissionCode: 'platform:sample:list', permissionName: '测试菜单', routePath: '/sample',
+      httpMethod: null, sortNo: 10, status: 'ACTIVE',
+    }])
+    vi.mocked(createPlatformPermission).mockRejectedValue(new Error('保存失败'))
+    vi.mocked(updatePlatformPermission).mockRejectedValue(new Error('保存失败'))
+    const wrapper = mount(PermissionsView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+    await wrapper.findAll(mode === 'create' ? 'button' : '.el-table__body-wrapper button').find(button => button.text().trim() === (mode === 'create' ? '新增权限' : '编辑'))!.trigger('click')
+    await flushPromises()
+
+    const dialog = document.querySelector<HTMLElement>('.el-dialog.permission-editor-dialog.admin-density-dialog')!
+    expect(dialog).not.toBeNull()
+    expect(dialog.style.getPropertyValue('--el-dialog-width')).toBe('min(720px, calc(100vw - 28px))')
+    expect(document.querySelector('.el-drawer')).toBeNull()
+    expect(dialog.querySelectorAll('.el-form-item')).toHaveLength(6)
+    const codeInput = dialog.querySelector<HTMLInputElement>('input[placeholder="如：platform:customer:list"]')!
+    expect(codeInput.disabled).toBe(mode === 'edit')
+    // Vitest externalizes Element Plus: its CJS validator interop differs from the Vite browser bundle.
+    // Exercise the dialog's validation gate explicitly, without changing production rules.
+    const form = wrapper.findComponent({ name: 'ElForm' })
+    expect(form.props('rules').name).toEqual(expect.arrayContaining([expect.objectContaining({ required: true })]))
+    const validate = vi.spyOn(form.vm.$.exposed as FormInstance, 'validate').mockResolvedValue(true)
+    if (mode === 'create') {
+      validate.mockRejectedValueOnce({ name: [{ message: '请输入权限名称' }] })
+      wrapper.getComponent(AppDialog).vm.$emit('confirm')
+      await flushPromises()
+      expect(createPlatformPermission).not.toHaveBeenCalled()
+      for (const [placeholder, value] of [['用户可理解的中文名称', '新增菜单'], ['如：platform:customer:list', 'platform:new:list'], ['如：/customers', '/new']]) {
+        const input = dialog.querySelector<HTMLInputElement>(`input[placeholder="${placeholder}"]`)!
+        input.value = value!
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      }
+    }
+    await flushPromises()
+    wrapper.getComponent(AppDialog).vm.$emit('confirm')
+    await flushPromises()
+    if (mode === 'create') expect(createPlatformPermission).toHaveBeenCalledWith({ type: 'MENU', code: 'platform:new:list', name: '新增菜单', parentId: '0', routePath: '/new', httpMethod: null, sortNo: 10 })
+    else expect(updatePlatformPermission).toHaveBeenCalledWith('90071992547409931', { name: '测试菜单', parentId: null, routePath: '/sample', httpMethod: null, sortNo: 10 })
+    expect(wrapper.getComponent(AppDialog).props('modelValue')).toBe(true)
+    expect(codeInput.value).toBe(mode === 'create' ? 'platform:new:list' : 'platform:sample:list')
+  })
+})

src/modules/iam/pages/PermissionsView.test.ts

@@ -53,7 +53,7 @@ function mountServerView(permissionCodes = ['platform:permission:list', 'platfor
         AdminPage: { template: '<main><slot /></main>' },
         ListPageLayout: { template: '<section><slot name="toolbar" /><slot name="state" /><slot /></section>' },
         FormSection: { template: '<section><slot /></section>' },
-        AppDrawer: { template: '<section><slot /><slot name="footer" /></section>' },
+        AppDialog: { template: '<section><slot /><slot name="footer" /></section>' },
         LoadErrorState: { props: ['message'], template: '<div role="alert">{{ message }}<slot name="details" /></div>' },
         DataTable: {
           props: ['data'],
@@ -85,16 +85,16 @@ describe('PermissionsView IAM mode', () => {
     expect(permissionsSource).toContain("(row as Permission).status || '—'")
   })
   it('uses outlined business action buttons while keeping tree view helpers as links', () => {
-    expect(permissionsSource).toContain('size="small" plain type="primary" @click="openCreate((row as Permission).id)"')
-    expect(permissionsSource).toContain('size="small" plain type="primary" :disabled="rowActionId')
-    expect(permissionsSource).toContain('size="small" plain :type="(row as Permission).status')
-    expect(permissionsSource).toContain('size="small" plain type="danger"')
-    expect(permissionsSource).toContain('size="small" plain :aria-label="moreActionsLabel(row as Permission)"')
-    expect(permissionsSource).toContain('<Plus :size="15" />添加下级')
-    expect(permissionsSource).toContain('<Pencil :size="15" />编辑')
-    expect(permissionsSource).toContain('<Power :size="15" />')
-    expect(permissionsSource).toContain('<Trash2 :size="15" />删除')
-    expect(permissionsSource).toContain('<MoreHorizontal :size="16" />')
+    expect(permissionsSource).toContain('size="small" data-tone="neutral" @click="openCreate((row as Permission).id)"')
+    expect(permissionsSource).toContain('size="small" data-tone="neutral" :disabled="rowActionId')
+    expect(permissionsSource).toContain('size="small" :data-tone="(row as Permission).status')
+    expect(permissionsSource).toContain('size="small" data-tone="danger"')
+    expect(permissionsSource).toContain('size="small" :aria-label="moreActionsLabel(row as Permission)"')
+    expect(permissionsSource).toContain('>添加下级</el-button>')
+    expect(permissionsSource).toContain('>编辑</el-button>')
+    expect(permissionsSource).toContain(':data-tone=')
+    expect(permissionsSource).toContain('>删除</el-button>')
+    expect(permissionsSource).toContain('<MoreHorizontal aria-hidden="true" :size="16" />')
     expect(permissionsSource).toContain('<el-button link type="primary" @click="expandAllRows">展开全部</el-button>')
     expect(permissionsSource).not.toContain('canAddChild(row as Permission)" link')
     expect(permissionsSource).not.toContain('canEditRow(row as Permission)" link')

src/modules/iam/pages/PermissionsView.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../iamDensity.css'
 import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Braces, FolderTree, MoreHorizontal, Pencil, Plus, Power, ShieldCheck, Trash2 } from '@lucide/vue'
+import { Braces, FolderTree, MoreHorizontal, Plus, ShieldCheck } from '@lucide/vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
-import AppDrawer from '@/shared/components/AppDrawer.vue'
+import AppDialog from '@/shared/components/AppDialog.vue'
 import FormSection from '@/shared/components/FormSection.vue'
 import ListPageLayout from '@/shared/components/ListPageLayout.vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -203,7 +205,7 @@ async function toggleStatus(row: Permission) {
   if (row.builtIn) return
   const target = row.status === '启用' ? '停用' : '启用'
   try {
-    await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
+    await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { customClass: 'admin-density-confirm',  confirmButtonText: '确认', cancelButtonText: '取消' })
     rowActionId.value = row.id
     const updated = await changePlatformPermissionStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
     Object.assign(row, mapPlatformPermission(updated))
@@ -219,7 +221,7 @@ async function toggleStatus(row: Permission) {
 async function removePermission(row: Permission) {
   if (row.builtIn) return
   try {
-    await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
+    await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { customClass: 'admin-density-confirm',  confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
     rowActionId.value = row.id
     await deletePlatformPermission(row.id)
     await loadPermissions()
@@ -268,7 +270,7 @@ onMounted(loadPermissions)
 </script>
 
 <template>
-  <AdminPage as="div">
+  <AdminPage class="admin-density iam-density" as="div">
     <ListPageLayout aria-label="平台权限资源管理">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="权限筛选" :fields="queryFields" preference-key="permissions-query" @search="applyFilters" /></template>
       <template v-if="loadError" #state>
@@ -282,14 +284,14 @@ onMounted(loadPermissions)
         <template #toolbar-start><div class="permission-tree-tools"><div class="legend-list"><span><i class="is-menu" />目录 / 菜单</span><span><i class="is-action" />操作</span><span><i class="is-api" />接口预留</span><span class="permission-protection-hint">受保护资源不可编辑、停用或删除</span></div><div class="tree-view-actions"><el-button link type="primary" @click="expandAllRows">展开全部</el-button><el-button link @click="collapseActionRows">收起操作权限</el-button></div></div></template>
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate(null)"><Plus :size="16" />新增权限</el-button></template>
         <template #actions="{ row }">
-          <div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions">
-            <el-button v-if="canAddChild(row as Permission)" size="small" plain type="primary" @click="openCreate((row as Permission).id)"><Plus :size="15" />添加下级</el-button>
-            <el-button v-if="canEditRow(row as Permission)" size="small" plain type="primary" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)"><Pencil :size="15" />编辑</el-button>
-            <el-button v-if="canChangeStatusRow(row as Permission)" size="small" plain :type="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)"><Power :size="15" />{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
-            <el-button v-if="showDeleteDirect(row as Permission)" size="small" plain type="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)"><Trash2 :size="15" />删除</el-button>
+          <div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions density-actions">
+            <el-button class="density-action" v-if="canAddChild(row as Permission)" size="small" data-tone="neutral" @click="openCreate((row as Permission).id)">添加下级</el-button>
+            <el-button class="density-action" v-if="canEditRow(row as Permission)" size="small" data-tone="neutral" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)">编辑</el-button>
+            <el-button class="density-action" v-if="canChangeStatusRow(row as Permission)" size="small" :data-tone="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)">{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
+            <el-button class="density-action" v-if="showDeleteDirect(row as Permission)" size="small" data-tone="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)">删除</el-button>
             <el-dropdown v-if="showDeleteMore(row as Permission)" trigger="click" @command="(command: string) => command === 'delete' && removePermission(row as Permission)">
-              <el-button size="small" plain :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal :size="16" /></el-button>
-              <template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item"><Trash2 :size="15" />删除</el-dropdown-item></el-dropdown-menu></template>
+              <el-button data-tone="neutral" class="density-action" size="small" :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal aria-hidden="true" :size="16" /></el-button>
+              <template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item">删除</el-dropdown-item></el-dropdown-menu></template>
             </el-dropdown>
           </div>
           <span v-else class="secondary-text">仅查看</span>
@@ -303,9 +305,9 @@ onMounted(loadPermissions)
       </section>
     </ListPageLayout>
 
-    <AppDrawer v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" size="600px" class="business-drawer editor-drawer" :modal="false" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
-      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="drawer-form">
-        <FormSection title="资源定义" description="定义权限名称、编码、类型和层级关系。">
+    <AppDialog v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" width="min(720px, calc(100vw - 28px))" class="permission-editor-dialog admin-density-dialog iam-density" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
+      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="density-form">
+        <FormSection class="density-form-section" title="资源定义" description="定义权限名称、编码、类型和层级关系。">
           <div class="form-grid two-cols">
             <el-form-item label="权限名称" prop="name" required><el-input v-model="form.name" placeholder="用户可理解的中文名称" maxlength="64" /></el-form-item>
             <el-form-item label="权限编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：platform:customer:list" maxlength="128" /></el-form-item>
@@ -318,17 +320,17 @@ onMounted(loadPermissions)
         </FormSection>
         <div class="form-callout"><Braces :size="18" /><div><strong>权限编码约定</strong><p>使用稳定的“业务域:资源:动作”编码；资源类型与后端 MENU、PAGE、BUTTON、API 契约一致。</p></div></div>
       </el-form>
-    </AppDrawer>
+    </AppDialog>
   </AdminPage>
 </template>
 
 <style scoped>
-.permission-tree-tools { display: flex; align-items: center; gap: 16px; }
+.permission-tree-tools { display: flex; align-items: center; gap: var(--admin-space-6); }
 .permission-protection-hint { color: var(--cc-muted); }
-.tree-view-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
+.tree-view-actions { display: flex; align-items: center; gap: var(--admin-space-1); white-space: nowrap; }
 .tree-view-actions .el-button + .el-button { margin-left: 0; }
 .permission-name > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
-.permission-name small { color: var(--cc-muted); font-size: 11px; line-height: 1.35; }
+.permission-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.35; }
 :deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 
 @media (max-width: 720px) {

src/modules/iam/pages/RolesView.test.ts

@@ -77,12 +77,12 @@ describe('RolesView', () => {
   })
   it('uses bordered striped tables and semantic role operation buttons', () => {
     expect(rolesSource).toContain('border stripe')
-    expect(rolesSource).toContain('size="small" plain type="primary"')
-    expect(rolesSource).toContain('size="small" plain :type=')
-    expect(rolesSource).toContain('size="small" plain type="danger"')
-    expect(rolesSource).toContain('<Pencil :size="15" />')
-    expect(rolesSource).toContain('<Power :size="15" />')
-    expect(rolesSource).toContain('<Trash2 :size="15" />')
+    expect(rolesSource).toContain('size="small" data-tone="neutral"')
+    expect(rolesSource).toContain('size="small" :data-tone=')
+    expect(rolesSource).toContain('size="small" data-tone="danger"')
+    expect(rolesSource).toContain('>配置</el-button>')
+    expect(rolesSource).toContain(':data-tone=')
+    expect(rolesSource).toContain('>删除</el-button>')
     expect(rolesSource).toContain('@media (max-width: 720px)')
   })
   beforeEach(() => {

src/modules/iam/pages/RolesView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '../iamDensity.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Pencil, Plus, Power, ShieldCheck, Trash2 } from '@lucide/vue'
+import { Plus, ShieldCheck } from '@lucide/vue'
 import {
   changePlatformRoleStatus,
   createPlatformRole,
@@ -195,7 +197,7 @@ async function removeRole(row: Role) {
   if (row.builtIn) { ElMessage.warning('系统内置角色不能删除'); return }
   if (row.userCount > 0) { ElMessage.warning('请先移除该角色下的用户'); return }
   try {
-    await ElMessageBox.confirm(`确认删除角色“${row.name}”吗？`, '删除角色', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
+    await ElMessageBox.confirm(`确认删除角色“${row.name}”吗？`, '删除角色', { customClass: 'admin-density-confirm',  confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
     rowActionId.value = row.id
     await deletePlatformRole(row.id)
     serverRoles.value = serverRoles.value.filter((item) => item.id !== row.id)
@@ -212,7 +214,7 @@ async function toggleStatus(row: Role) {
   if (row.builtIn) { ElMessage.warning('系统内置角色不能停用'); return }
   const target = row.status === '启用' ? '停用' : '启用'
   try {
-    await ElMessageBox.confirm(`确认${target}角色“${row.name}”吗？`, '角色状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
+    await ElMessageBox.confirm(`确认${target}角色“${row.name}”吗？`, '角色状态', { customClass: 'admin-density-confirm',  confirmButtonText: '确认', cancelButtonText: '取消' })
     rowActionId.value = row.id
     const updated = await changePlatformRoleStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
     Object.assign(row, mapPlatformRole(updated))
@@ -234,7 +236,7 @@ onMounted(loadRoles)
 </script>
 
 <template>
-  <AdminPage as="div">
+  <AdminPage class="admin-density iam-density" as="div">
     <ListPageLayout aria-label="平台角色管理">
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="角色筛选" :fields="queryFields" preference-key="roles-query" @search="applyFilters" /></template>
       <template v-if="loadError" #state>
@@ -246,7 +248,7 @@ onMounted(loadRoles)
       <section v-if="!loadError" class="surface-panel table-panel">
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="pagedRows" :columns="roleColumns" preference-key="roles-table" :loading="loading" :total="filteredRows.length" row-key="id" border stripe aria-label="平台角色列表" empty-text="没有符合条件的角色">
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增角色</el-button></template>
-        <template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions"><el-button v-if="canEdit || canGrant" size="small" plain type="primary" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)"><Pencil :size="15" />配置</el-button><el-button v-if="access.can('platform:role:status')" size="small" plain :type="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)"><Power :size="15" />{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button v-if="access.can('platform:role:delete')" size="small" plain type="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)"><Trash2 :size="15" />删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
+        <template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions density-actions"><el-button class="density-action" v-if="canEdit || canGrant" size="small" data-tone="neutral" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)">配置</el-button><el-button class="density-action" v-if="access.can('platform:role:status')" size="small" :data-tone="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)">{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button class="density-action" v-if="access.can('platform:role:delete')" size="small" data-tone="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)">删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
         <template #role="{ row }"><div class="role-cell"><span><ShieldCheck :size="18" /></span><div><strong>{{ (row as Role).name }}</strong></div></div></template>
         <template #permissionSummary="{ row }"><div class="primary-cell"><strong>{{ permissionSummary(row as Role) }}</strong><span>平台 IAM 权限</span></div></template>
         <template #roleType="{ row }"><el-tag :type="(row as Role).builtIn ? 'warning' : 'info'" effect="plain" size="small">{{ (row as Role).builtIn ? '系统内置' : '自定义' }}</el-tag></template>
@@ -256,15 +258,15 @@ onMounted(loadRoles)
       </section>
     </ListPageLayout>
 
-    <AppDialog v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" width="min(860px, calc(100vw - 28px))" class="role-editor-dialog" :confirm-loading="saving" confirm-text="保存角色" :show-confirm="form.id ? canEdit || canGrant : canCreate" destroy-on-close @opened="initializePermissionSelection" @confirm="saveRole">
-      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="role-editor-form">
+    <AppDialog v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" width="min(860px, calc(100vw - 28px))" class="role-editor-dialog admin-density-dialog iam-density" :confirm-loading="saving" confirm-text="保存角色" :show-confirm="form.id ? canEdit || canGrant : canCreate" destroy-on-close @opened="initializePermissionSelection" @confirm="saveRole">
+      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="role-editor-form density-form">
         <div class="role-editor-layout">
-          <FormSection title="基本信息" description="维护角色名称、编码和职责说明。" class="role-editor-basic">
+          <FormSection title="基本信息" description="维护角色名称、编码和职责说明。" class="role-editor-basic density-form-section">
             <el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" :disabled="Boolean(form.id) && !canEdit" placeholder="如：订单运营专员" maxlength="64" /></el-form-item>
             <el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：ORDER_OPERATOR" maxlength="64" /></el-form-item>
             <el-form-item label="角色说明"><el-input v-model="form.description" :disabled="Boolean(form.id) && !canEdit" type="textarea" :rows="3" placeholder="说明该角色的工作范围" maxlength="200" show-word-limit /></el-form-item>
           </FormSection>
-          <FormSection v-if="canGrant" title="菜单与操作权限" :description="`按当前后台菜单分组；勾选上级可全选下级，部分选中时显示半选，当前 ${form.permissionIds.length} 项授权。`" class="role-editor-permissions"><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox :default-expanded-keys="permissionGroupIds" :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node" :class="{ 'is-navigation-group': !data.permissionId }"><span>{{ data.name }}</span><code v-if="data.code">{{ data.code }}</code></div></template></el-tree></FormSection>
+          <FormSection v-if="canGrant" title="菜单与操作权限" :description="`按当前后台菜单分组；勾选上级可全选下级，部分选中时显示半选，当前 ${form.permissionIds.length} 项授权。`" class="role-editor-permissions density-form-section"><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox :default-expanded-keys="permissionGroupIds" :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node" :class="{ 'is-navigation-group': !data.permissionId }"><span>{{ data.name }}</span><code v-if="data.code">{{ data.code }}</code></div></template></el-tree></FormSection>
         </div>
       </el-form>
     </AppDialog>
@@ -272,8 +274,9 @@ onMounted(loadRoles)
 </template>
 
 <style scoped>
-.role-editor-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 20px; }
-.role-editor-permissions { min-width: 0; padding-left: 20px; border-left: 1px solid var(--cc-border); }
+.role-editor-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: var(--admin-space-5); }
+.role-editor-layout:not(:has(.role-editor-permissions)) { grid-template-columns: minmax(0, 1fr); }
+.role-editor-layout > .role-editor-permissions.density-form-section { min-width: 0; padding: 0 0 0 var(--admin-space-5); border-left: 1px solid var(--cc-border); }
 .permission-tree { max-height: 380px; overflow-x: hidden; overflow-y: auto; }
 .permission-node span { min-width: 0; }
 .permission-node code { max-width: 58%; white-space: normal; text-align: right; }
@@ -283,6 +286,6 @@ onMounted(loadRoles)
 :global(.role-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
 @media (max-width: 720px) {
   .role-editor-layout { grid-template-columns: minmax(0, 1fr); }
-  .role-editor-permissions { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }
+  .role-editor-layout > .role-editor-permissions.density-form-section { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }
 }
 </style>

src/modules/inbounds/components/InboundTaskList.vue

@@ -4,7 +4,7 @@ import '../measurement/measurementDensity.css'
 import { computed, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { CircleCheckBig, Eye, Ruler, SearchCheck } from '@lucide/vue'
+import { CircleCheckBig } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { listPlatformWarehouses } from '@/modules/warehouses'
@@ -374,14 +374,12 @@ onBeforeUnmount(() => { disposed = true; requestSerial += 1; optionsRequestSeria
           </template>
           <template #pagination-left>当前显示 {{ result.records.length }} 条 · 共 {{ result.total }} 条</template>
           <template #actions="{ row }">
-            <div class="row-actions">
-              <el-button v-if="access.can(actionPermission)" size="small" type="primary" @click="openTask(row as InboundOrderSummary)">
-                <SearchCheck v-if="isReview" :size="15" />
-                <Ruler v-else :size="15" />
+            <div class="row-actions density-actions">
+              <el-button v-if="access.can(actionPermission)" class="density-action" :data-tone="isReview ? 'warning' : 'purple'" size="small" @click="openTask(row as InboundOrderSummary)">
                 {{ taskLabel }}
               </el-button>
-              <el-button v-if="access.can('platform:firstleg:inbound:view') && (row as InboundOrderSummary).orderId" size="small" plain @click="openDetail(row as InboundOrderSummary)">
-                <Eye :size="15" />查看
+              <el-button v-if="access.can('platform:firstleg:inbound:view') && (row as InboundOrderSummary).orderId" class="density-action" size="small" @click="openDetail(row as InboundOrderSummary)">
+                查看
               </el-button>
               <span v-if="!access.can(actionPermission) && (!access.can('platform:firstleg:inbound:view') || !(row as InboundOrderSummary).orderId)" class="muted-action">无操作权限</span>
             </div>
@@ -453,14 +451,13 @@ onBeforeUnmount(() => { disposed = true; requestSerial += 1; optionsRequestSeria
 
 <style scoped>
 .inbound-task-page { min-width: 0; }
-.state-stack { display: grid; gap: 12px; }
+.state-stack { display: grid; gap: var(--admin-space-5, 12px); }
 .review-navigation-error { margin-bottom: 14px; }
-.row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
-.row-actions .el-button { margin: 0; }
+.row-actions { white-space: nowrap; }
 .primary-cell { display: grid; gap: 3px; min-width: 0; }
 .primary-cell strong, .primary-cell span { overflow-wrap: anywhere; }
 .inbound-code-cell { display: grid; gap: 3px; min-width: 0; }
-.primary-cell span, .muted-action { color: var(--cc-muted); font-size: 12px; }
+.primary-cell span, .muted-action { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
 @media (max-width: 520px) {
   .row-actions { align-items: stretch; flex-direction: column; }
   .row-actions :deep(.el-button) { width: 100%; }
@@ -469,7 +466,7 @@ onBeforeUnmount(() => { disposed = true; requestSerial += 1; optionsRequestSeria
 
 <style>
 .inbound-task-dialog.admin-density-workspace.el-dialog:not(.is-fullscreen) { height: auto; max-height: 92vh; overflow: hidden; }
-.inbound-task-dialog .el-dialog__body { max-height: calc(92vh - 62px); overflow: auto; padding: 12px 16px; }
+.inbound-task-dialog .el-dialog__body { max-height: calc(92vh - 62px); }
 @media (max-width: 520px) {
   .inbound-task-dialog .el-dialog__body { padding: 14px; }
 }

src/modules/inbounds/core/DropshipPalletPrintPanel.test.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/core/DropshipPalletPrintPanel.vue'), 'utf8')
+
+describe('DropshipPalletPrintPanel', () => {
+  it('provides desktop batch printing and single-pallet reprinting', () => {
+    expect(source).toContain('一件代发托盘打印')
+    expect(source).toContain('打印全部托盘')
+    expect(source).toContain('单托补打')
+    expect(source).toContain('downloadAllDropshipPalletLabels')
+    expect(source).toContain('downloadDropshipPalletLabel')
+    expect(source).toContain('label="操作" width="120" fixed="left"')
+  })
+
+  it('explains the computer-first printing flow and covers loading, empty and error states', () => {
+    expect(source).toContain('在电脑端打印并贴到空托盘，再交由 PDA 扫码组托')
+    expect(source).toContain('v-loading="loading"')
+    expect(source).toContain('测量审核通过并生成托盘码后，可在这里打印')
+    expect(source).toContain('托盘数据暂时无法加载')
+  })
+})

src/modules/inbounds/core/DropshipPalletPrintPanel.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { Printer, RefreshCw } from '@lucide/vue'
+import { ElMessage } from 'element-plus'
+import '@/styles/adminDensity.css'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import { downloadAllDropshipPalletLabels, downloadDropshipPalletLabel, listPlatformInboundDropshipPallets } from './api'
+import type { InboundDropshipPallet } from './types'
+
+const props = defineProps<{
+  customerId: string
+  inboundId: string
+  inboundCode?: string | null
+}>()
+
+const pallets = ref<InboundDropshipPallet[]>([])
+const loading = ref(false)
+const loadError = ref<ApiErrorDetails | null>(null)
+const printing = ref('')
+let requestSerial = 0
+let disposed = false
+
+function statusLabel(status: InboundDropshipPallet['status']) {
+  return status === 'SEALED' ? '已封托' : '待封托'
+}
+
+function download(blob: Blob, fileName: string) {
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  link.click()
+  window.setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+async function loadPallets() {
+  const serial = ++requestSerial
+  loading.value = true
+  loadError.value = null
+  try {
+    const response = await listPlatformInboundDropshipPallets(props.customerId, props.inboundId)
+    if (!disposed && serial === requestSerial) pallets.value = response
+  } catch (error) {
+    if (!disposed && serial === requestSerial) {
+      pallets.value = []
+      loadError.value = getApiErrorDetails(error, '一件代发托盘加载失败')
+    }
+  } finally {
+    if (!disposed && serial === requestSerial) loading.value = false
+  }
+}
+
+async function printAll() {
+  if (!pallets.value.length || printing.value) return
+  printing.value = 'all'
+  try {
+    const blob = await downloadAllDropshipPalletLabels(props.customerId, props.inboundId)
+    download(blob, `${props.inboundCode || '一件代发'}-全部托盘.pdf`)
+    ElMessage.success(`已生成 ${pallets.value.length} 个托盘的打印文件`)
+  } catch (error) {
+    ElMessage.error(getApiErrorDetails(error, '全部托盘打印文件生成失败').message)
+  } finally {
+    printing.value = ''
+  }
+}
+
+async function printOne(pallet: InboundDropshipPallet) {
+  if (!pallet.palletNo || printing.value) return
+  printing.value = pallet.palletId
+  try {
+    const blob = await downloadDropshipPalletLabel(props.customerId, props.inboundId, pallet.palletId)
+    download(blob, `${pallet.palletNo}-托盘.pdf`)
+    ElMessage.success(`${pallet.palletNo} 打印文件已生成`)
+  } catch (error) {
+    ElMessage.error(getApiErrorDetails(error, '单托打印文件生成失败').message)
+  } finally {
+    printing.value = ''
+  }
+}
+
+watch(() => [props.customerId, props.inboundId], loadPallets, { immediate: true })
+onBeforeUnmount(() => { disposed = true; requestSerial += 1 })
+</script>
+
+<template>
+  <section class="dropship-print-panel admin-density" aria-labelledby="dropship-print-title">
+    <header class="print-heading">
+      <div>
+        <h3 id="dropship-print-title">一件代发托盘打印</h3>
+        <p>测量审核生成托盘码后，在电脑端打印并贴到空托盘，再交由 PDA 扫码组托。</p>
+      </div>
+      <div class="print-actions">
+        <el-button :disabled="loading || Boolean(printing)" @click="loadPallets"><RefreshCw :size="15" />刷新</el-button>
+        <el-button type="primary" :disabled="!pallets.length" :loading="printing === 'all'" @click="printAll"><Printer :size="15" />打印全部托盘</el-button>
+      </div>
+    </header>
+
+    <LoadErrorState v-if="loadError" title="托盘数据暂时无法加载" :message="loadError.message" @retry="loadPallets">
+      <template #details><ApiErrorMeta :details="loadError" /></template>
+    </LoadErrorState>
+    <el-table v-else-if="pallets.length" v-loading="loading" :data="pallets" border stripe empty-text="暂无托盘码" aria-label="一件代发托盘打印列表">
+      <el-table-column label="操作" width="120" fixed="left">
+        <template #default="{ row }">
+          <el-button class="density-action" :loading="printing === row.palletId" :disabled="Boolean(printing) && printing !== row.palletId" @click="printOne(row as InboundDropshipPallet)">单托补打</el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="palletNo" label="托盘码" min-width="210" />
+      <el-table-column label="状态" width="110"><template #default="{ row }"><el-tag size="small" :type="row.status === 'SEALED' ? 'success' : 'warning'" effect="plain">{{ statusLabel(row.status) }}</el-tag></template></el-table-column>
+      <el-table-column prop="cartonCount" label="已归托箱数" width="120" align="right" />
+      <el-table-column prop="skuCount" label="SKU 数" width="100" align="right" />
+    </el-table>
+    <el-empty v-else-if="!loading" description="测量审核通过并生成托盘码后，可在这里打印" :image-size="64" />
+    <div v-else class="loading-state"><el-skeleton :rows="4" animated /></div>
+  </section>
+</template>
+
+<style scoped>
+.dropship-print-panel { min-width: 0; }
+.print-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
+.print-heading h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-section); }
+.print-heading p { margin: var(--admin-space-1) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.5; }
+.print-actions { display: flex; flex-shrink: 0; gap: var(--admin-space-2); }
+.print-actions .el-button { margin-left: 0; }
+.loading-state { padding: var(--admin-space-5) 0; }
+</style>

src/modules/inbounds/core/api.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { http } from '@/shared/api/http'
-import { downloadInboundCartonLabels, downloadInboundCartonLabelsBatch, downloadPlatformInboundHoldEvidence, getPlatformInbound, getPlatformInboundHold, holdPlatformInbound, listPlatformInboundDropshipPallets, listPlatformInbounds, releasePlatformInbound, uploadPlatformInboundHoldEvidence } from './api'
+import { downloadAllDropshipPalletLabels, downloadDropshipPalletLabel, downloadInboundCartonLabels, downloadInboundCartonLabelsBatch, downloadPlatformInboundHoldEvidence, getPlatformInbound, getPlatformInboundHold, holdPlatformInbound, listPlatformInboundDropshipPallets, listPlatformInbounds, releasePlatformInbound, uploadPlatformInboundHoldEvidence } from './api'
 
 vi.mock('@/shared/api/http', () => ({
   ApiResponseError: class ApiResponseError extends Error {
@@ -87,6 +87,21 @@ describe('platform inbound query API', () => {
     expect(http.get).toHaveBeenCalledWith('/platform/v1/first-leg/pda-dropship/inbound-orders/19001/pallets', { params: { accountId: '10001' } })
   })
 
+  it('downloads one or all inbound-scoped dropship pallet documents for desktop printing', async () => {
+    const pdf = new Blob(['pdf'], { type: 'application/pdf' })
+    vi.mocked(http.get).mockResolvedValue(pdf)
+
+    await expect(downloadDropshipPalletLabel('10001', '19001', '21001')).resolves.toBe(pdf)
+    await expect(downloadAllDropshipPalletLabels('10001', '19001')).resolves.toBe(pdf)
+
+    expect(http.get).toHaveBeenNthCalledWith(1,
+      '/platform/v1/first-leg/pda-dropship/inbound-orders/19001/pallets/21001/print',
+      { params: { accountId: '10001' }, responseType: 'blob', timeout: 60_000 })
+    expect(http.get).toHaveBeenNthCalledWith(2,
+      '/platform/v1/first-leg/pda-dropship/inbound-orders/19001/pallets/print',
+      { params: { accountId: '10001' }, responseType: 'blob', timeout: 60_000 })
+  })
+
   it('passes the implemented order, process, measurement and fee review filters without renaming them', async () => {
     vi.mocked(http.get).mockResolvedValue({
       code: '200', message: 'success', data: { records: [], page: 1, size: 20, total: 0, pages: 0 },

src/modules/inbounds/core/api.ts

@@ -291,3 +291,10 @@ export async function downloadDropshipPalletLabel(tenantId: string, inboundId: s
     { params: { accountId: tenantId }, responseType: 'blob', timeout: 60_000 },
   )
 }
+
+export async function downloadAllDropshipPalletLabels(tenantId: string, inboundId: string) {
+  return http.get<Blob, Blob>(
+    `/platform/v1/first-leg/pda-dropship/inbound-orders/${encodeURIComponent(inboundId)}/pallets/print`,
+    { params: { accountId: tenantId }, responseType: 'blob', timeout: 60_000 },
+  )
+}

src/modules/inbounds/index.ts

@@ -1,5 +1,6 @@
 export { getInboundMeasurement, saveInboundMeasurementDraft, updateMeasurementCalculationStrategy, updateMeasurementOuterDimensions } from './measurement/api'
 export { createInboundHoldIdempotencyKey, downloadInboundCartonLabelsBatch, downloadPlatformInboundHoldEvidence, getPlatformInboundHold, holdPlatformInbound, releasePlatformInbound, uploadPlatformInboundHoldEvidence } from './core/api'
+export { default as DropshipPalletPrintPanel } from './core/DropshipPalletPrintPanel.vue'
 export { default as InboundMeasurementPanel } from './measurement/InboundMeasurementPanel.vue'
 export { default as InboundMeasurementDialog } from './measurement/InboundMeasurementDialog.vue'
 export { default as MeasurementEvidenceThumbnail } from './measurement/components/MeasurementEvidenceThumbnail.vue'

src/modules/inbounds/measurement/InboundMeasurementDialog.test.ts

@@ -7,6 +7,8 @@ const panelSource = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/me
 const taskListSource = readFileSync(resolve(process.cwd(), 'src/modules/inbounds/components/InboundTaskList.vue'), 'utf8')
 const orderListSource = readFileSync(resolve(process.cwd(), 'src/modules/unified-orders/pages/UnifiedOrdersView.vue'), 'utf8')
 
+const densitySource = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
+
 describe('InboundMeasurementDialog', () => {
   it('owns the complete measurement workspace behind one centered dialog', () => {
     expect(source).toContain("import AppDialog from '@/shared/components/AppDialog.vue'")
@@ -14,7 +16,8 @@ describe('InboundMeasurementDialog', () => {
     expect(source).toContain('class="inbound-measurement-workspace-dialog admin-density-dialog admin-density-workspace inbound-density"')
     expect(source).toContain('width="min(1560px, calc(100vw - 48px))"')
     expect(source).toContain('height: 92vh')
-    expect(source).toContain('padding: 10px 20px')
+    expect(densitySource).toContain('.admin-density-dialog.el-dialog .el-dialog__header')
+    expect(densitySource).toContain('padding: var(--admin-space-4, 10px) 48px var(--admin-space-4, 10px) var(--admin-space-6, 16px)')
     expect(source).toContain('<WeightOcrPanel')
     expect(source).toContain('<InboundMeasurementPanel')
     expect(source).toContain('class="measurement-dialog-weight"')

src/modules/inbounds/measurement/InboundMeasurementDialog.vue

@@ -28,7 +28,7 @@ const title = computed(() => `测量 · ${props.inboundCode?.trim() || '入仓
 async function mayClose() {
   if (!measurementPanelRef.value?.isDirty) return true
   try {
-    await ElMessageBox.confirm('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', {
+    await ElMessageBox.confirm('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', { customClass: 'admin-density-confirm',
       type: 'warning',
       confirmButtonText: '放弃修改并关闭',
       cancelButtonText: '继续编辑',
@@ -127,9 +127,9 @@ function handleSubmitted() {
 
 <style scoped>
 .measurement-dialog-workspace { display: grid; min-width: 0; }
-.measurement-dialog-weight { min-width: 0; padding: 0 0 16px; border-bottom: 1px solid var(--cc-border); }
-.measurement-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
-.measurement-dialog-footer__hint { margin-right: auto; color: var(--el-color-warning-dark-2); font-size: 12px; }
+.measurement-dialog-weight { min-width: 0; padding: 0 0 var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
+.measurement-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--admin-space-4, 10px); }
+.measurement-dialog-footer__hint { margin-right: auto; color: var(--el-color-warning-dark-2); font-size: var(--admin-font-caption, 12px); }
 .measurement-dialog-footer :deep(.el-button) { margin-left: 0; }
 @media (max-width: 720px) {
   .measurement-dialog-weight { padding-bottom: 14px; }
@@ -140,9 +140,7 @@ function handleSubmitted() {
 
 <style>
 .inbound-measurement-workspace-dialog.el-dialog { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
-.inbound-measurement-workspace-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--cc-border); }
-.inbound-measurement-workspace-dialog .el-dialog__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; }
-.inbound-measurement-workspace-dialog .el-dialog__footer { flex: 0 0 auto; padding: 8px 16px; border-top: 1px solid var(--cc-border); }
+.inbound-measurement-workspace-dialog .el-dialog__body { flex: 1 1 auto; }
 .inbound-measurement-workspace-dialog .measurement-panel { border: 0; border-radius: 0; box-shadow: none; }
 .inbound-measurement-workspace-dialog .measurement-panel__heading .measurement-panel__actions,
 .inbound-measurement-workspace-dialog .measurement-panel__footer { display: none; }

src/modules/inbounds/measurement/InboundMeasurementPanel.test.ts

@@ -280,7 +280,7 @@ describe('InboundMeasurementPanel', () => {
     expect(source).not.toContain('<el-collapse-item name="declaration"')
     expect(source).toContain('grid-template-columns: repeat(4, minmax(0, 1fr))')
     expect(source).toContain('.measurement-data-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));')
-    expect(source).toContain('.measurement-table { width: 100%; font-size: 12px; }')
+    expect(source).toContain('.measurement-table { width: 100%; font-size: var(--admin-font-caption, 12px); }')
     expect(source).toContain('.measurement-data-grid :deep(.el-input__wrapper)')
     expect(source).toContain('defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlockReason, mayMaintain, maySubmit, saving, submitting, canEdit, canSubmit, isDirty })')
   })

src/modules/inbounds/measurement/InboundMeasurementPanel.vue

@@ -371,7 +371,7 @@ async function loadMeasurement() {
 async function reloadLatest() {
   if (isDirty.value) {
     try {
-      await ElMessageBox.confirm('加载最新版本会丢弃当前尚未保存的修改。确定继续吗？', '重新加载测量数据', {
+      await ElMessageBox.confirm('加载最新版本会丢弃当前尚未保存的修改。确定继续吗？', '重新加载测量数据', { customClass: 'admin-density-confirm',
         type: 'warning',
         confirmButtonText: '加载最新版本',
         cancelButtonText: '继续编辑',
@@ -518,9 +518,9 @@ async function submitForReview() {
   }
   try {
     await ElMessageBox.confirm(
-      '提交后将校验测量图片和全部称重结果，并由后端准备托盘与库位占用。提交成功后本批次不能继续编辑，设备也不能再覆盖已提交数据。',
+      '提交成功后本批次不能继续编辑',
       '提交测量审核',
-      { type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '取消' },
     )
   } catch {
     return
@@ -908,71 +908,71 @@ defineExpose({ saveDraft, submitForReview, updateWeightEvidence, submissionBlock
 .measurement-panel__heading > div:first-child { display: flex; min-width: 0; align-items: flex-start; gap: 11px; }
 .measurement-panel__icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 8px; background: #eef4ff; color: var(--cc-primary); }
 .measurement-panel h2, .measurement-panel h3 { margin: 0; color: var(--cc-text); }
-.measurement-panel h2 { font-size: 16px; }
-.measurement-panel h3 { font-size: 14px; }
-.measurement-panel__heading p, .measurement-section__heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
-.measurement-panel__actions, .measurement-panel__footer > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
-.measurement-declaration-table { margin-top: 12px; }
+.measurement-panel h2 { font-size: var(--admin-font-title, 16px); }
+.measurement-panel h3 { font-size: var(--admin-font-section, 14px); }
+.measurement-panel__heading p, .measurement-section__heading p { margin: var(--admin-space-1, 4px) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.55; }
+.measurement-panel__actions, .measurement-panel__footer > div { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3, 8px); }
+.measurement-declaration-table { margin-top: var(--admin-space-5, 12px); }
 .measurement-panel__actions :deep(.el-button), .measurement-panel__footer :deep(.el-button) { margin-left: 0; }
-.measurement-skeleton { padding: 24px; }
-.measurement-panel > :deep(.el-alert), .measurement-alert { margin: 16px 20px 0; width: auto; }
+.measurement-skeleton { padding: var(--admin-space-7, 24px); }
+.measurement-panel > :deep(.el-alert), .measurement-alert { margin: var(--admin-space-6, 16px) 20px 0; width: auto; }
 .measurement-alert p { margin: 5px 0 0; line-height: 1.55; }
-.measurement-alert ul { margin: 7px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.65; }
+.measurement-alert ul { margin: 7px 0 0; padding-left: 18px; font-size: var(--admin-font-caption, 12px); line-height: 1.65; }
 .measurement-alert .el-button { margin-top: 9px; }
 .measurement-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
-.measurement-section { padding: 16px 0px; border-top: 1px solid var(--cc-border); }
-.measurement-summary-section { display: grid; gap: 12px; border-top: 0; }
+.measurement-section { padding: var(--admin-space-6, 16px) 0px; border-top: 1px solid var(--cc-border); }
+.measurement-summary-section { display: grid; gap: var(--admin-space-5, 12px); border-top: 0; }
 .measurement-summary-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
-.measurement-summary-context { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
-.measurement-summary-header span { color: var(--cc-muted); font-size: 11px; }
+.measurement-summary-context { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--admin-space-3, 8px) 20px; }
+.measurement-summary-header span { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }
 .measurement-deviation-alert { margin: 0; width: auto; }
 .measurement-deviation-alert p { margin: 3px 0 0; line-height: 1.55; }
-.measurement-summary-context p { display: inline-flex; min-width: 0; align-items: baseline; gap: 6px; margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 12px; font-weight: 600; }
+.measurement-summary-context p { display: inline-flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-caption, 12px); font-weight: 600; }
 .measurement-summary-status { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
 .measurement-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 2px 0; }
-.measurement-subheading { margin: 0; color: #344054; font-size: 12px; font-weight: 700; }
-.measurement-metrics > div { display: grid; min-width: 0; min-height: 58px; align-content: center; gap: 4px; padding: 5px 18px; border-left: 1px solid var(--cc-border); }
+.measurement-subheading { margin: 0; color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 700; }
+.measurement-metrics > div { display: grid; min-width: 0; min-height: 58px; align-content: center; gap: var(--admin-space-1, 4px); padding: 5px 18px; border-left: 1px solid var(--cc-border); }
 .measurement-metrics > div:first-child { padding-left: 0; border-left: 0; }
-.measurement-metrics dt { color: var(--cc-muted); font-size: 12px; }
+.measurement-metrics dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
 .measurement-metrics dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
-.measurement-metrics small { color: var(--cc-muted); font-size: 11px; font-weight: 500; }
+.measurement-metrics small { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); font-weight: 500; }
 .measurement-metric--primary dd { color: var(--cc-primary); font-size: 20px; }
 .measurement-metric--warning dd { color: var(--el-color-warning-dark-2); }
-.measurement-declaration { padding-top: 12px; border-top: 1px solid var(--cc-border); }
-.measurement-declaration h4 { margin: 0 0 10px; color: #344054; font-size: 12px; font-weight: 700; }
-.measurement-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
+.measurement-declaration { padding-top: var(--admin-space-5, 12px); border-top: 1px solid var(--cc-border); }
+.measurement-declaration h4 { margin: 0 0 var(--admin-space-4, 10px); color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 700; }
+.measurement-section__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: var(--admin-space-6, 16px); }
 .measurement-section__heading > div { min-width: 0; }
-.measurement-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.measurement-section-actions :deep(.el-button) { margin-left: 0; }
-.warehouse-suggestion-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }.warehouse-suggestion-form :deep(.el-select),.warehouse-suggestion-form :deep(.el-input-number) { width: 100%; }.warehouse-suggestion-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }.suggestion-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 0; border: 1px solid var(--cc-border); border-radius: 6px; }.suggestion-preview div { padding: 12px; border-right: 1px solid var(--cc-border); }.suggestion-preview div:last-child { border-right: 0; }.suggestion-preview dt { color: var(--cc-muted); font-size: 11px; }.suggestion-preview dd { margin: 5px 0 0; color: var(--cc-text); font-size: 13px; font-weight: 650; }
-.measurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
-.measurement-data-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
-.measurement-form label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #344054; font-size: 12px; font-weight: 650; }
+.measurement-section-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3, 8px); }.measurement-section-actions :deep(.el-button) { margin-left: 0; }
+.warehouse-suggestion-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }.warehouse-suggestion-form :deep(.el-select),.warehouse-suggestion-form :deep(.el-input-number) { width: 100%; }.warehouse-suggestion-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }.suggestion-preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--admin-space-1, 4px) 0 0; border: 1px solid var(--cc-border); border-radius: 6px; }.suggestion-preview div { padding: var(--admin-space-5, 12px); border-right: 1px solid var(--cc-border); }.suggestion-preview div:last-child { border-right: 0; }.suggestion-preview dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }.suggestion-preview dd { margin: 5px 0 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); font-weight: 650; }
+.measurement-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }
+.measurement-data-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--admin-space-5, 12px); }
+.measurement-form label { display: flex; min-width: 0; flex-direction: column; gap: 7px; color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 650; }
 .measurement-form :deep(.el-input-number), .measurement-form :deep(.el-input) { width: 100%; }
-.measurement-data-grid label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #344054; font-size: 12px; font-weight: 600; }
+.measurement-data-grid label { display: flex; min-width: 0; flex-direction: column; gap: 5px; color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 600; }
 .measurement-data-grid :deep(.el-input__wrapper) { border-radius: 3px; }
 .measurement-readonly-field { display: grid; min-width: 0; align-content: start; gap: 7px; }
-.measurement-readonly-field span { color: #344054; font-size: 12px; font-weight: 600; }
-.measurement-readonly-field strong { min-height: 32px; padding: 7px 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 18px; }
+.measurement-readonly-field span { color: #344054; font-size: var(--admin-font-caption, 12px); font-weight: 600; }
+.measurement-readonly-field strong { min-height: var(--admin-control-height, 32px); padding: 7px 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body, 13px); line-height: 18px; }
 .measurement-image-preview { display: grid; min-height: 240px; place-items: center; }
 .measurement-image-preview img { display: block; width: auto; max-width: 100%; max-height: 68vh; object-fit: contain; }
-.manual-entry-alert { margin-bottom: 16px; }
-.manual-entry-alert ul { margin: 6px 0 0; padding-left: 18px; }
+.manual-entry-alert { margin-bottom: var(--admin-space-6, 16px); }
+.manual-entry-alert ul { margin: var(--admin-space-2, 6px) 0 0; padding-left: 18px; }
 .manual-entry-form :deep(.el-input-number), .manual-entry-form :deep(.el-date-editor) { width: 100%; }
 .manual-entry-upload { width: 100%; }
-.measurement-items-section { background: #fff; }
-.measurement-table { width: 100%; font-size: 12px; }
-.measurement-table :deep(.el-table__header th) { padding: 8px 0; background: #f6f8fa; color: #475467; font-size: 11px; font-weight: 700; }
+.measurement-items-section { background: var(--admin-surface, #fff); }
+.measurement-table { width: 100%; font-size: var(--admin-font-caption, 12px); }
+.measurement-table :deep(.el-table__header th) { padding: var(--admin-space-3, 8px) 0; background: #f6f8fa; color: #475467; font-size: var(--admin-font-caption, 11px); font-weight: 700; }
 .measurement-table :deep(.el-table__cell) { padding: 7px 0; }
 .measurement-table :deep(.cell) { line-height: 1.35; }
 .measurement-table :deep(.measurement-table__row--error > td.el-table__cell) { background: var(--el-color-danger-light-9); }
-.warehouse-suggestion-table { display: grid; gap: 10px; margin-top: 18px; }.warehouse-suggestion-table h3 { margin: 0; color: var(--cc-text); font-size: 14px; }
+.warehouse-suggestion-table { display: grid; gap: var(--admin-space-4, 10px); margin-top: 18px; }.warehouse-suggestion-table h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-section, 14px); }
 .measurement-box-code { font-weight: 650; }
 .measurement-count-editor { width: 104px !important; }
-.measurement-row-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 4px 18px 8px 62px; }
-.measurement-row-details dt { color: var(--cc-muted); font-size: 11px; }
-.measurement-row-details dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 12px; font-weight: 600; }
-.measurement-panel__footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--cc-border); background: #fff; }
-.measurement-panel__footer > span { display: inline-flex; align-items: center; gap: 6px; color: var(--cc-muted); font-size: 12px; }
+.measurement-row-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-3, 8px) 20px; margin: 0; padding: var(--admin-space-1, 4px) 18px var(--admin-space-3, 8px) 62px; }
+.measurement-row-details dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); }
+.measurement-row-details dd { margin: 3px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-caption, 12px); font-weight: 600; }
+.measurement-panel__footer { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6, 16px); padding: var(--admin-space-5, 12px) 20px; border-top: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.measurement-panel__footer > span { display: inline-flex; align-items: center; gap: var(--admin-space-2, 6px); color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
 .measurement-panel__footer > span:has(svg) { color: #b54708; font-weight: 650; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
 

src/modules/inbounds/measurement/measurementDensity.css

@@ -1,30 +1,30 @@
 @media (min-width: 961px) {
-  .inbound-density.admin-density-dialog .measurement-dialog-weight { padding-bottom: 10px; }
-  .inbound-density.admin-density-dialog .measurement-section { padding: 10px 0; }
-  .inbound-density.admin-density-dialog .measurement-summary-section { gap: 8px; }
-  .inbound-density.admin-density-dialog .measurement-section__heading { align-items: center; margin-bottom: 8px; }
+  .inbound-density.admin-density-dialog .measurement-dialog-weight { padding-bottom: var(--admin-space-4, 10px); }
+  .inbound-density.admin-density-dialog .measurement-section { padding: var(--admin-space-4, 10px) 0; }
+  .inbound-density.admin-density-dialog .measurement-summary-section { gap: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .measurement-section__heading { align-items: center; margin-bottom: var(--admin-space-3, 8px); }
   .inbound-density.admin-density-dialog .measurement-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-  .inbound-density.admin-density-dialog .measurement-metrics > div { min-height: 36px; padding: 6px 10px; display: flex; align-items: baseline; gap: 8px; }
-  .inbound-density.admin-density-dialog .measurement-metrics dd { font-size: 14px; }
-  .inbound-density.admin-density-dialog .measurement-metrics small { font-size: 12px; }
-  .inbound-density.admin-density-dialog .measurement-data-grid { gap: 8px 12px; }
-  .inbound-density.admin-density-dialog .measurement-declaration { padding-top: 8px; }
-  .inbound-density.admin-density-dialog .measurement-declaration h4 { margin-bottom: 6px; font-size: 13px; }
-  .inbound-density.admin-density-dialog .measurement-panel > .el-alert { margin: 8px 0; }
-  .inbound-density.admin-density-dialog .measurement-summary-header span { font-size: 12px; }
-  .inbound-density.admin-density-dialog .measurement-table .el-table__header th { padding: 4px 0; font-size: 13px; }
-  .inbound-density.admin-density-dialog .weight-heading { flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
-  .inbound-density.admin-density-dialog .weight-heading__actions { flex-wrap: wrap; gap: 12px; }
+  .inbound-density.admin-density-dialog .measurement-metrics > div { min-height: var(--admin-row-height, 36px); padding: var(--admin-space-2, 6px) var(--admin-space-4, 10px); display: flex; align-items: baseline; gap: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .measurement-metrics dd { font-size: var(--admin-font-section, 14px); }
+  .inbound-density.admin-density-dialog .measurement-metrics small { font-size: var(--admin-font-caption, 12px); }
+  .inbound-density.admin-density-dialog .measurement-data-grid { gap: var(--admin-space-3, 8px) var(--admin-space-5, 12px); }
+  .inbound-density.admin-density-dialog .measurement-declaration { padding-top: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .measurement-declaration h4 { margin-bottom: var(--admin-space-2, 6px); font-size: var(--admin-font-body, 13px); }
+  .inbound-density.admin-density-dialog .measurement-panel > .el-alert { margin: var(--admin-space-3, 8px) 0; }
+  .inbound-density.admin-density-dialog .measurement-summary-header span { font-size: var(--admin-font-caption, 12px); }
+  .inbound-density.admin-density-dialog .measurement-table .el-table__header th { padding: var(--admin-space-1, 4px) 0; font-size: var(--admin-font-body, 13px); }
+  .inbound-density.admin-density-dialog .weight-heading { flex-wrap: wrap; gap: var(--admin-space-3, 8px); padding-bottom: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .weight-heading__actions { flex-wrap: wrap; gap: var(--admin-space-5, 12px); }
   .inbound-density.admin-density-dialog .pallet-picker { width: 340px; }
-  .inbound-density.admin-density-dialog .weight-list { margin-top: 8px; }
-  .inbound-density.admin-density-dialog .weight-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 8px; }
-  .inbound-density.admin-density-dialog .weight-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px; border-radius: 2px; }
+  .inbound-density.admin-density-dialog .weight-list { margin-top: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .weight-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--admin-space-3, 8px); }
+  .inbound-density.admin-density-dialog .weight-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--admin-space-4, 10px); align-items: start; padding: var(--admin-space-3, 8px); border-radius: 2px; }
   .inbound-density.admin-density-dialog .weight-card .weight-thumb { width: 120px; border-radius: 2px; }
   .inbound-density.admin-density-dialog .weight-card__body { min-width: 0; padding: 0; text-align: left; }
-  .inbound-density.admin-density-dialog .weight-card__value { min-height: 28px; padding-right: 32px; text-align: left; }
-  .inbound-density.admin-density-dialog .weight-card__value strong { font-size: 14px; }
-  .inbound-density.admin-density-dialog .weight-card__facts { gap: 3px; margin-top: 4px; padding-top: 4px; }
-  .inbound-density.admin-density-dialog .weight-card__facts div { font-size: 12px; }
-  .inbound-density.admin-density-dialog .weight-card__correct { width: auto; margin-top: 6px; }
+  .inbound-density.admin-density-dialog .weight-card__value { min-height: var(--admin-action-height, 28px); padding-right: 32px; text-align: left; }
+  .inbound-density.admin-density-dialog .weight-card__value strong { font-size: var(--admin-font-section, 14px); }
+  .inbound-density.admin-density-dialog .weight-card__facts { gap: 3px; margin-top: var(--admin-space-1, 4px); padding-top: var(--admin-space-1, 4px); }
+  .inbound-density.admin-density-dialog .weight-card__facts div { font-size: var(--admin-font-caption, 12px); }
+  .inbound-density.admin-density-dialog .weight-card__correct { width: auto; margin-top: var(--admin-space-2, 6px); }
 }
 

src/modules/inbounds/review/MeasurementReviewPanel.vue

@@ -305,41 +305,41 @@ defineExpose({ confirmApprove, isPending, canReview, actionLoading })
 </template>
 
 <style scoped>
-.review-panel { display: grid; gap: 12px; color: var(--cc-text); }
-.review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; top: -12px; z-index: 3; flex-wrap: wrap; margin: -12px -16px 0; padding: 8px 16px; border-bottom: 1px solid var(--cc-border); background: #fff; }
-.review-toolbar__status, .review-toolbar__actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px; }
-.review-toolbar__status > span { color: var(--cc-muted); font-size: 12px; }
+.review-panel { display: grid; gap: var(--admin-space-5, 12px); color: var(--cc-text); }
+.review-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; position: sticky; top: -12px; z-index: 3; flex-wrap: wrap; margin: -var(--admin-space-5, 12px) -var(--admin-space-6, 16px) 0; padding: var(--admin-space-3, 8px) var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); background: var(--admin-surface, #fff); }
+.review-toolbar__status, .review-toolbar__actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3, 8px); }
+.review-toolbar__status > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
 .review-toolbar__actions { justify-content: flex-end; }
 .review-toolbar__actions :deep(.el-button) { margin-left: 0; }
-.review-toolbar__status > .review-toolbar__context { padding-left: 8px; border-left: 1px solid var(--cc-border); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
-.review-alert-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.review-data, .review-items { min-width: 0; padding: 0 0 12px; border-bottom: 1px solid var(--cc-border); }
-.review-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
+.review-toolbar__status > .review-toolbar__context { padding-left: var(--admin-space-3, 8px); border-left: 1px solid var(--cc-border); font-size: var(--admin-font-body, 13px); line-height: 1.55; overflow-wrap: anywhere; }
+.review-alert-title { display: inline-flex; align-items: center; gap: var(--admin-space-3, 8px); flex-wrap: wrap; }
+.review-data, .review-items { min-width: 0; padding: 0 0 var(--admin-space-5, 12px); border-bottom: 1px solid var(--cc-border); }
+.review-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6, 16px); margin-bottom: var(--admin-space-3, 8px); }
 .review-section-heading > div { min-width: 0; }
-.review-section-heading h3 { margin: 0; color: var(--cc-text); font-size: 14px; line-height: 1.35; }
-.review-section-heading > span { color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
+.review-section-heading h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-section, 14px); line-height: 1.35; }
+.review-section-heading > span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); white-space: nowrap; }
 .review-comparison { border-top: 1px solid var(--cc-border); }
-.review-comparison__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; min-width: 0; padding: 8px 0; }
+.review-comparison__row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; min-width: 0; padding: var(--admin-space-3, 8px) 0; }
 .review-comparison__row + .review-comparison__row { border-top: 1px dashed var(--cc-border); }
-.review-comparison__row > strong { color: #344054; font-size: 12px; }
-.review-metrics, .review-declaration { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 16px; min-width: 0; margin: 0; }
+.review-comparison__row > strong { color: #344054; font-size: var(--admin-font-caption, 12px); }
+.review-metrics, .review-declaration { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--admin-space-3, 8px) var(--admin-space-6, 16px); min-width: 0; margin: 0; }
 .review-declaration { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.review-metrics > div, .review-declaration > div { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
-.review-metrics dt, .review-declaration dt { color: var(--cc-muted); font-size: 12px; line-height: 1.4; }
-.review-metrics dd { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 14px; font-weight: 600; line-height: 1.35; }
-.review-metrics dd small, .review-declaration dd small { color: var(--cc-muted); font-size: 12px; font-weight: 500; }
+.review-metrics > div, .review-declaration > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
+.review-metrics dt, .review-declaration dt { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.4; }
+.review-metrics dd { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: var(--admin-font-section, 14px); font-weight: 600; line-height: 1.35; }
+.review-metrics dd small, .review-declaration dd small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 500; }
 .review-metrics .review-metric--primary dd { color: #067647; }
-.review-declaration dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; font-weight: 650; line-height: 1.4; }
+.review-declaration dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body, 13px); font-weight: 650; line-height: 1.4; }
 .review-table-scroll { width: 100%; min-width: 0; overflow: hidden; }
-.review-table { width: 100%; font-size: 12px; }
-.review-table :deep(.el-table__header th) { padding: 8px 0; background: #f6f8fa; color: #475467; font-size: 12px; font-weight: 700; }
+.review-table { width: 100%; font-size: var(--admin-font-caption, 12px); }
+.review-table :deep(.el-table__header th) { padding: var(--admin-space-3, 8px) 0; background: #f6f8fa; color: #475467; font-size: var(--admin-font-caption, 12px); font-weight: 700; }
 .review-table :deep(.el-table__header .cell) { white-space: nowrap; }
 .review-table :deep(.el-table__cell) { padding: 7px 0; }
 .review-table :deep(.review-time-cell .cell) { white-space: nowrap; }
-.review-table :deep(.measurement-evidence-thumb) { min-width: 72px; border-radius: 4px; }
+.review-table :deep(.measurement-evidence-thumb) { min-width: 72px; border-radius: var(--admin-radius, 4px); }
 .review-image-preview { display: grid; min-height: 240px; place-items: center; }
 .review-image-preview img { display: block; width: auto; max-width: 100%; max-height: 70vh; object-fit: contain; }
-.review-image-preview__error { display: grid; justify-items: center; gap: 8px; color: var(--el-color-danger); }
+.review-image-preview__error { display: grid; justify-items: center; gap: var(--admin-space-3, 8px); color: var(--el-color-danger); }
 @media (max-width: 720px) {
   .review-toolbar { align-items: stretch; flex-direction: column; margin: -14px -14px 0; padding: 12px 14px; }
   .review-toolbar__status > .review-toolbar__context { width: 100%; padding-top: 8px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }

src/modules/inbounds/weight/components/WeightOcrPanel.test.ts

@@ -99,7 +99,7 @@ describe('WeightOcrPanel contract', () => {
   })
 
   it('keeps each weight summary label and value on one compact line', () => {
-    expect(source).toContain('.weight-summary { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }')
+    expect(source).toContain('.weight-summary { display: flex; align-items: baseline; gap: var(--admin-space-2, 6px); white-space: nowrap; }')
     expect(source).not.toContain('.weight-summary { display: grid;')
   })
 })

src/modules/inbounds/weight/components/WeightOcrPanel.vue

@@ -425,7 +425,7 @@ async function removeResult(row: WeightResultResource) {
         ? '删除后将重新计算货物总重量；对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？'
         : '对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？',
       '删除称重图片',
-      { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
     )
   } catch {
     return
@@ -684,42 +684,42 @@ defineExpose({ reload: loadWorkspace })
 
 <style scoped>
 .weight-workspace { min-width: 0; color: var(--el-text-color-primary); }
-.weight-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--cc-border); }
-.weight-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
+.weight-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: var(--admin-space-4, 10px); border-bottom: 1px solid var(--cc-border); }
+.weight-heading h3 { display: flex; align-items: center; gap: var(--admin-space-3, 8px); margin: 0; font-size: 15px; }
 .weight-heading h3 svg { color: var(--cc-primary); }
-.weight-heading__actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
+.weight-heading__actions { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-6, 16px); }
 .pallet-picker { width: clamp(360px, 36vw, 520px); min-width: 0; }
 .pallet-picker :deep(.el-select) { width: 100%; }
-.weight-summary { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
+.weight-summary { display: flex; align-items: baseline; gap: var(--admin-space-2, 6px); white-space: nowrap; }
 .weight-summary-group { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
-.weight-summary span { color: var(--cc-muted); font-size: 12px; }
-.weight-summary strong { color: #067647; font-size: 16px; }
+.weight-summary span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.weight-summary strong { color: #067647; font-size: var(--admin-font-title, 16px); }
 .visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 .weight-action-error { margin-bottom: 14px; }
 .weight-list { min-height: 0; margin-top: 14px; }
-.weight-empty { display: flex; min-height: 0; align-items: center; gap: 10px; padding: 4px 0 0; color: var(--cc-muted); }
-.weight-empty strong { color: #344054; font-size: 14px; }
+.weight-empty { display: flex; min-height: 0; align-items: center; gap: var(--admin-space-4, 10px); padding: var(--admin-space-1, 4px) 0 0; color: var(--cc-muted); }
+.weight-empty strong { color: #344054; font-size: var(--admin-font-section, 14px); }
  .weight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
- .weight-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
-.weight-card__body { padding: 12px; text-align: center; }
+ .weight-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--admin-surface, #fff); }
+.weight-card__body { padding: var(--admin-space-5, 12px); text-align: center; }
  .weight-delete { position: absolute; z-index: 2; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 1px solid rgb(255 255 255 / 82%); background: rgb(255 255 255 / 92%); box-shadow: 0 1px 3px rgb(16 24 40 / 16%); }
  .weight-card__value { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: center; }
  .weight-card__value strong { color: #101828; font-size: 17px; }
  .weight-card__value:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: 4px; }
-.weight-card__facts { display: grid; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--cc-border); }
-.weight-card__facts div { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1.4; }
+.weight-card__facts { display: grid; gap: var(--admin-space-2, 6px); margin: var(--admin-space-4, 10px) 0 0; padding-top: var(--admin-space-4, 10px); border-top: 1px solid var(--cc-border); }
+.weight-card__facts div { display: flex; justify-content: space-between; gap: var(--admin-space-3, 8px); font-size: var(--admin-font-caption, 11px); line-height: 1.4; }
 .weight-card__facts dt { color: var(--cc-muted); }
 .weight-card__facts dd { min-width: 0; margin: 0; color: #344054; overflow-wrap: anywhere; text-align: right; }
-.weight-card__correct { width: 100%; margin: 12px 0 0; }
+.weight-card__correct { width: 100%; margin: var(--admin-space-5, 12px) 0 0; }
 .weight-preview { display: block; width: 100%; max-height: min(50vh, 460px); object-fit: contain; border-radius: 6px; background: #f2f4f7; }
-.weight-key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 8px; padding: 8px 0; border-block: 1px solid var(--cc-border); }
-.weight-key-facts div { display: grid; min-width: 0; gap: 4px; }
-.weight-key-facts span { color: var(--cc-muted); font-size: 12px; }
-.weight-key-facts strong { color: #101828; font-size: 14px; }
-.preview-weight { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: end; gap: 12px; margin-top: 14px; }
-.preview-weight label { display: grid; gap: 6px; color: #475467; font-size: 12px; }
+.weight-key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3, 8px) var(--admin-space-5, 12px); margin-top: var(--admin-space-3, 8px); padding: var(--admin-space-3, 8px) 0; border-block: 1px solid var(--cc-border); }
+.weight-key-facts div { display: grid; min-width: 0; gap: var(--admin-space-1, 4px); }
+.weight-key-facts span { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.weight-key-facts strong { color: #101828; font-size: var(--admin-font-section, 14px); }
+.preview-weight { display: grid; grid-template-columns: minmax(0, 1fr) 120px; align-items: end; gap: var(--admin-space-5, 12px); margin-top: 14px; }
+.preview-weight label { display: grid; gap: var(--admin-space-2, 6px); color: #475467; font-size: var(--admin-font-caption, 12px); }
 .preview-weight :deep(.el-input-number), .preview-weight :deep(.el-segmented) { width: 100%; }
-.correction-reason { display: grid; gap: 6px; margin-top: 14px; color: #475467; font-size: 12px; }
+.correction-reason { display: grid; gap: var(--admin-space-2, 6px); margin-top: 14px; color: #475467; font-size: var(--admin-font-caption, 12px); }
 
 @media (max-width: 720px) {
   .weight-heading { flex-direction: column; }

src/modules/loading-lists/api/platformLoadingLists.test.ts

@@ -23,7 +23,7 @@ const preloadSummary = {
   warehouseName: '义乌仓',
   vesselName: 'MATSON',
   voyageNo: '001E',
-  containerType: '40HC',
+  containerType: '40HQ',
   status: 'LOADING',
   skuCount: '2',
   totalPackageCount: '10',

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

@@ -43,7 +43,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('.fees-panel :deep(.data-table__toolbar) { min-height: 48px;')
+    expect(panel).toContain('class="fees-panel admin-density"')
   })
 
   it('is exposed from the domestic container fee tab and derives customer context from real items', () => {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { Check, CircleX, FileUp, Pencil, Plus, Trash2, X } from '@lucide/vue'
+import { FileUp, Plus, X } from '@lucide/vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -321,7 +322,7 @@ async function reject() {
 }
 async function voidFee(item: ContainerFeeResource) {
   if (!canReview.value || !accountId.value) return
-  await ElMessageBox.confirm(`确认作废“${item.feeItemName}”费用？作废后将同步财务来源状态。`, '作废费用', { type: 'warning', confirmButtonText: '确认作废' })
+  await ElMessageBox.confirm(`确认作废“${item.feeItemName}”费用？作废后将同步财务来源状态。`, '作废费用', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认作废' })
   await (item.allocationGroupId
     ? voidContainerFeeAllocationGroup(props.planId, item.allocationGroupId, item.sourceVersion)
     : voidContainerFee(props.planId, accountId.value, item.id, item.sourceVersion))
@@ -350,7 +351,7 @@ onMounted(() => void load())
 </script>
 
 <template>
-  <section class="fees-panel" aria-label="柜次费用维护">
+  <section class="fees-panel admin-density" aria-label="柜次费用维护">
     <header class="fees-header">
       <div><h2>{{ title }}</h2><p>费用与财务分摊均来自服务端真实记录</p></div>
       <div class="fees-header__actions">
@@ -366,7 +367,7 @@ onMounted(() => void load())
       <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="当前客户暂无柜次费用">
         <template #toolbar-start><div class="fees-table-title"><strong>费用明细</strong><span>{{ fees.length }} 条</span></div></template>
-        <template #actions="{ row }"><div class="row-actions"><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="success" @click="approve(row as ContainerFeeResource)"><Check :size="15" />通过</el-button><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="danger" @click="openReject(row as ContainerFeeResource)"><CircleX :size="15" />驳回</el-button><el-button v-if="canEdit && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="primary" @click="openAdjust(row as ContainerFeeResource)"><Pencil :size="15" />调整</el-button><el-button v-if="canReview && financeLoaded && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE' && !isSettled(row as ContainerFeeResource)" link type="danger" @click="voidFee(row as ContainerFeeResource)"><Trash2 :size="15" />作废</el-button></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>
         <template #settlementMode="{ row }">{{ settlementLabel(row as ContainerFeeResource) }}</template>
         <template #paidSummary="{ row }">{{ paidSummary(row as ContainerFeeResource) }}</template>
@@ -378,7 +379,7 @@ onMounted(() => void load())
       <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>
     </template>
 
-    <AppDialog v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save">
+    <AppDialog class="admin-density-dialog" v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save">
       <div v-if="target" class="adjust-snapshot">
         <p>调整仅允许修改业务日期和金额；如需变更方向、费用项目、供应商或其他信息，请先作废后新增。</p>
         <el-descriptions :column="3" border size="small">
@@ -397,7 +398,7 @@ onMounted(() => void load())
         <el-alert v-else-if="suppliersError" type="warning" :closable="false" show-icon :title="suppliersError.message" />
         <el-alert v-if="feeItemsError" type="warning" :closable="false" show-icon :title="feeItemsError.message" />
       </template>
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form density-form">
         <template v-if="!target">
           <el-form-item label="方向" prop="direction"><el-segmented v-model="form.direction" :options="[{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE', disabled: !canViewSuppliers }]" /></el-form-item>
           <el-form-item label="费用项目" prop="feeItemId"><el-select v-model="form.feeItemId" filterable :loading="feeItemsLoading" :disabled="!canViewFeeItems" placeholder="请选择启用且适用的费用项目"><el-option v-for="item in applicableItems" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
@@ -428,24 +429,22 @@ onMounted(() => void load())
       </el-form>
       <LoadErrorState v-if="editorError" compact title="费用保存失败" :message="editorError.message" :show-retry="false"><template #details><ApiErrorMeta :details="editorError" /></template></LoadErrorState>
     </AppDialog>
-    <AppDialog v-model="rejectOpen" title="驳回柜次费用" 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" v-model="rejectOpen" title="驳回柜次费用" 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: 16px; border-top: 1px solid var(--cc-border); }
-.fees-header, .allocation-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px; }
-.fees-header h2, .allocation-section h3 { margin: 0; font-size: 16px; }.fees-header p, .allocation-section p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; }
-.fees-header__actions, .customer-context { display: flex; align-items: center; gap: 10px; }
-.customer-context > span { color: var(--cc-muted); font-size: 13px; white-space: nowrap; }.customer-context :deep(.el-select) { width: 260px; }
-.fees-table-title { display: flex; align-items: baseline; gap: 8px; }.fees-table-title strong { font-size: 14px; }.fees-table-title span { color: var(--cc-muted); font-size: 12px; }
-.fees-panel :deep(.data-table__toolbar) { min-height: 48px; padding: 6px 12px; }
-.fees-panel :deep(.el-table th.el-table__cell) { padding: 7px 0; }.fees-panel :deep(.el-table td.el-table__cell) { padding: 6px 0; }
-.row-actions { display: flex; flex-wrap: wrap; }.allocation-section { padding-top: 16px; border-top: 1px solid var(--cc-border); }.cost-block { border-top: 1px solid var(--cc-border); }.cost-summary { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 14px; background: #f8fafc; font-size: 13px; }.cost-summary span { color: var(--cc-muted); }.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
-.voucher-field { grid-column: 1 / -1; }.voucher-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; }.voucher-picker { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--cc-border); border-radius: 6px; 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: 12px; }.voucher-list { display: grid; width: 100%; gap: 6px; margin-top: 8px; }.voucher-list > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 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; }
-.adjust-snapshot p { margin: 0 0 12px; color: var(--cc-muted); font-size: 13px; line-height: 1.5; }
+.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); }.fees-header p, .allocation-section p { margin: var(--admin-space-1) 0 0; color: var(--cc-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-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); margin-top: var(--admin-space-5); }.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
+.voucher-field { grid-column: 1 / -1; }.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; }
+.adjust-snapshot p { margin: 0 0 var(--admin-space-5); color: var(--cc-muted); font-size: var(--admin-font-body); line-height: 1.5; }
 .business-reference { display: grid; gap: 2px; }.business-reference small { color: var(--cc-muted); }
 .allocation-editor { grid-column: 1 / -1; }.allocation-editor :deep(.el-form-item__content) { display: block; }
-.allocation-editor__rows { display: grid; gap: 8px; margin-top: 10px; }.allocation-editor__row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--cc-border); border-radius: 6px; }.allocation-editor__row > span { display: grid; min-width: 0; }.allocation-editor__row small { overflow: hidden; color: var(--cc-muted); text-overflow: ellipsis; white-space: nowrap; }.allocation-editor__sum { margin: 8px 0 0; text-align: right; color: var(--el-color-success); }.allocation-editor__sum.is-error { color: var(--el-color-danger); }
+.allocation-editor__rows { display: grid; gap: var(--admin-space-3); margin-top: var(--admin-space-4); }.allocation-editor__row { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: var(--admin-space-5); padding: var(--admin-space-3) var(--admin-space-4); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); }.allocation-editor__row > span { display: grid; min-width: 0; }.allocation-editor__row small { overflow: hidden; color: var(--cc-muted); text-overflow: ellipsis; white-space: nowrap; }.allocation-editor__sum { margin: var(--admin-space-3) 0 0; text-align: right; 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-form { grid-template-columns: 1fr; }.fee-form :deep(.el-form-item:last-child) { grid-column: auto; }.customer-context { align-items: stretch; flex-direction: column; } }
 </style>

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

@@ -18,6 +18,7 @@ const props = defineProps<{
   detail: LoadingDetail | null
   error: ApiErrorDetails | null
   canEdit: boolean
+  dense?: boolean
   embedded?: boolean
   canEditTransport?: boolean
   transportNote?: string
@@ -148,16 +149,16 @@ function formatNumber(value?: number | null, digits = 3) {
 </script>
 
 <template>
-  <section v-loading="loading" class="loading-detail-content" :class="{ 'admin-density preload-density': mode === 'preload' }" :aria-label="title" :aria-busy="loading">
+  <section v-loading="loading" class="loading-detail-content" :class="{ 'admin-density loading-density': mode === 'preload' || dense }" :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" @click="emit('back')"><ArrowLeft :size="16" />返回列表</el-button>
+        <el-button link type="primary" class="detail-page-header__back" :class="{ 'density-back': mode === 'preload' || dense }" @click="emit('back')"><ArrowLeft :size="16" />返回列表</el-button>
         <div v-if="!embedded" class="detail-page-header__identity">
           <h1>{{ title }}</h1>
           <p>{{ mode === 'preload' ? '核对运输信息、确认预装并维护逐条仓库备注' : '查看已完成装柜明细和柜次费用' }}</p>
         </div>
         <div v-if="detail && summary" class="detail-page-header__actions">
-          <PalletLabelPrintDialog :dense="mode === 'preload'" v-if="summary.warehouseId" :plan-id="summary.planId" :warehouse-id="summary.warehouseId" :disabled="!summary.containerNo || summary.status === 'EDITING'" />
+          <PalletLabelPrintDialog :dense="mode === 'preload' || dense" v-if="summary.warehouseId" :plan-id="summary.planId" :warehouse-id="summary.warehouseId" :disabled="!summary.containerNo || summary.status === 'EDITING'" />
           <template v-if="canEditItemRemark">
             <el-button v-if="canEditTransport" @click="emit('edit')"><Pencil :size="16" />{{ summary.containerNo ? '纠正集装箱号 / 航次' : '补录集装箱号 / 航次' }}</el-button>
             <el-button type="primary" :loading="confirmSaving" :disabled="!preloadSummary?.readiness.canConfirm" @click="emit('confirmPreload')"><Check :size="16" />确认预装</el-button>
@@ -204,7 +205,7 @@ function formatNumber(value?: number | null, digits = 3) {
         >
           <template #toolbar-start><div class="detail-section__heading"><div><h2>装柜货物明细 <span>{{ detail.items.length }} 条</span></h2><p>仓库备注将随装柜完成资料下发海外仓</p></div></div></template>
           <template #actions="{ row }">
-            <el-button size="small" type="primary" plain :aria-label="`编辑 ${row.inboundCode || row.orderNo} 的备注`" @click="emit('editRemarks', row as LoadingItem)"><Pencil :size="14" />编辑备注</el-button>
+            <el-button :class="{ 'density-action': mode === 'preload' || dense }" size="small" :type="mode === 'preload' ? undefined : 'primary'" :plain="mode !== 'preload'" :aria-label="`编辑 ${row.inboundCode || row.orderNo} 的备注`" @click="emit('editRemarks', row as LoadingItem)"><Pencil v-if="mode !== 'preload'" :size="14" />编辑备注</el-button>
           </template>
           <template #unitType="{ row }"><el-tag size="small" :type="row.unitType === 'SEALED_PALLET' ? 'success' : 'info'">{{ row.unitType === 'SEALED_PALLET' ? '封托托盘' : '箱件' }}</el-tag><small v-if="row.indivisible">整托不可拆</small></template>
           <template #grossWeight="{ row }">{{ formatNumber(row.grossWeightKg) }}</template>
@@ -236,59 +237,58 @@ function formatNumber(value?: number | null, digits = 3) {
 </template>
 
 <style scoped>
-.loading-detail-content { display: grid; min-width: 0; gap: 16px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
+.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); }
 .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: 16px; padding: 8px 0 12px; }
+.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 p { margin: 3px 0 0; color: var(--cc-muted); font-size: 12px; }
-.detail-page-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
+.detail-page-header__identity p { margin: 3px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
+.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: 6px 28px; padding: 10px 0 2px; border-top: 1px solid var(--cc-border); }
-.detail-summary > div { display: flex; min-width: 0; min-height: 26px; align-items: center; gap: 6px; }
-.detail-summary > div > span:first-child { flex: 0 0 auto; color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
+.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 > 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::after { content: "："; }
-.detail-summary strong { min-width: 0; color: var(--cc-text); font-size: 13px; overflow-wrap: anywhere; }
+.detail-summary strong { min-width: 0; color: var(--cc-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: 11px; }
+.detail-summary small { color: var(--cc-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 4px; color: var(--cc-text); font-size: 12px; }
+.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 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: 16px 0 0; border-top: 1px solid var(--cc-border); }
+.detail-section, .history-section { min-width: 0; overflow: hidden; padding: var(--admin-space-6, 16px) 0 0; border-top: 1px solid var(--cc-border); }
 .detail-section__heading h2 { margin: 0; font-size: 15px; }
-.detail-section__heading h2 span { margin-left: 6px; color: var(--cc-muted); font-size: 12px; font-weight: 400; }
-.detail-section__heading p { margin: 2px 0 0; color: var(--cc-muted); font-size: 11px; line-height: 1.35; }
-.detail-section :deep(.data-table__toolbar) { min-height: 52px; padding: 7px 12px; }
+.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 p { margin: 2px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 11px); line-height: 1.35; }
 .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: 6px 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); }
 .remark-cell { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
-.history-section header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
-.history-section h2 { margin: 0; font-size: 16px; }
-.history-section header span { color: var(--cc-muted); font-size: 12px; }
-.preload-density { gap: 12px; padding: 12px; border-radius: 4px; }
-.preload-density .detail-page-header { gap: 12px; padding: 0 0 8px; }
-.preload-density .detail-page-header__identity h1 { font-size: 16px; overflow-wrap: anywhere; }
-.preload-density .detail-page-header__actions { flex-wrap: wrap; }
-.preload-density .detail-summary { gap: 0; padding: 0; border-left: 1px solid var(--cc-border); }
-.preload-density .detail-summary > div { gap: 0; align-items: stretch; min-height: 36px; border-bottom: 1px solid var(--cc-border); border-right: 1px solid var(--cc-border); }
-.preload-density .detail-summary > div > span:first-child { display: flex; align-items: center; flex: 0 0 96px; padding: 6px 8px; background: #f8fafc; }
-.preload-density .detail-summary > div > span:first-child::after { content: none; }
-.preload-density .detail-summary strong, .preload-density .detail-summary :deep(.status-badge) { align-self: center; margin: 6px 8px; font-weight: 400; }
-.preload-density .detail-summary__wide { grid-column: span 2; }
-.preload-density .detail-layout :deep(.detail-page-layout__content) { gap: 12px; }
-.preload-density .detail-section, .preload-density .history-section { padding-top: 8px; }
-.preload-density .detail-section__heading h2, .preload-density .history-section h2 { font-size: 14px; }
-.preload-density .history-section header { margin-bottom: 8px; }
-.preload-density .detail-section__heading p, .preload-density small { font-size: 12px; }
-.preload-density .readiness-note { align-items: baseline; }
-.preload-density .readiness-note span { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
-@media (max-width: 720px) { .preload-density .detail-summary { grid-template-columns: 1fr; } .preload-density .detail-summary__wide { grid-column: auto; } }
+.history-section header { display: flex; align-items: baseline; gap: var(--admin-space-4, 10px); margin-bottom: 18px; }
+.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); }
+.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 > 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; }
+.loading-density .detail-summary__wide { grid-column: span 2; }
+.loading-density .detail-layout :deep(.detail-page-layout__content) { gap: var(--admin-space-5, 12px); }
+.loading-density .detail-section, .loading-density .history-section { padding-top: var(--admin-space-3, 8px); }
+.loading-density .detail-section__heading h2, .loading-density .history-section h2 { font-size: var(--admin-font-section, 14px); }
+.loading-density .history-section header { margin-bottom: var(--admin-space-3, 8px); }
+.loading-density .detail-section__heading p, .loading-density small { font-size: var(--admin-font-caption, 12px); }
+.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; } }
 </style>

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

@@ -136,7 +136,8 @@ describe('LoadingListsView', () => {
   })
 
   it('uses bordered list actions with a stable 320px layout', () => {
-    expect(source).toContain('size="small" type="primary" plain')
+    expect(source).toContain(":class=\"{ 'density-action': isPreload }\"")
+    expect(source).toContain(':type="isPreload ? undefined : \'primary\'" :plain="!isPreload"')
     expect(source).not.toContain('<el-button v-if="canView" link')
     expect(source).toContain("key: 'actions', label: '操作', fixed: 'left', width: 110")
     expect(source).toContain('flex-wrap: wrap')
@@ -201,7 +202,7 @@ describe('LoadingListsView', () => {
     expect(detailSource).toContain('min-height: 26px')
     expect(detailSource).toContain('> div > span:first-child::after { content: "："; }')
     expect(detailSource).not.toContain('> div > span::after { content: "："; }')
-    expect(detailSource).toContain('background: #fff')
+    expect(detailSource).toContain('background: var(--admin-surface, #fff)')
     expect(detailSource).toContain('overflow-wrap: anywhere')
     expect(detailSource).toContain("className: 'identifier-column'")
     expect(detailSource).toContain('showOverflowTooltip: true')
@@ -217,7 +218,7 @@ describe('LoadingListsView', () => {
     expect(detailSource).toContain('<section class="detail-section">')
     expect(detailSource).not.toContain('class="detail-section surface-panel"')
     expect(detailSource).not.toContain('class="history-section surface-panel"')
-    expect(detailSource).toContain('padding: 16px 0 0')
+    expect(detailSource).toContain('padding: var(--admin-space-6, 16px) 0 0')
     expect(detailSource).toContain("fixed: 'left', width: 132")
   })
 

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

@@ -219,8 +219,8 @@ onMounted(() => {
           <ContainerSimulationCreate :dense="isPreload" v-if="canCreate" success-message="模拟柜及预装清单已创建" @created="onSimulationCreated" />
         </template>
         <template #actions="{ row }">
-          <div class="row-actions">
-            <el-button v-if="canView" size="small" type="primary" plain @click="openDetail(row)"><Eye :size="15" />查看</el-button>
+          <div class="row-actions" :class="{ 'density-actions': isPreload }">
+            <el-button v-if="canView" :class="{ 'density-action': isPreload }" size="small" :type="isPreload ? undefined : 'primary'" :plain="!isPreload" @click="openDetail(row)"><Eye v-if="!isPreload" :size="15" />查看</el-button>
           </div>
         </template>
         <template #customers="{ row }"><LineClampText :content="(row as PreloadSummary).customers.map((item) => item.customerName || '客户信息缺失').join('、')" /></template>
@@ -239,9 +239,9 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.loading-lists-page { display: grid; min-width: 0; gap: 16px; }
-.table-panel { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); background: #fff; }
-.row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
+.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); }
+.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; } }
 </style>

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

@@ -60,7 +60,7 @@ async function print() {
 </template>
 
 <style scoped>
-.print-scope { display:flex; margin:18px 0 12px; }
-.print-options { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
+.print-scope { display:flex; margin:18px 0 var(--admin-space-5, 12px); }
+.print-options { display:flex; align-items:center; gap:var(--admin-space-5, 12px); margin-bottom:var(--admin-space-6, 16px); }
 .print-options .el-select { width:240px; }
 </style>

src/modules/loading-lists/pages/PreloadPlanDetailView.test.ts

@@ -10,7 +10,7 @@ describe('PreloadPlanDetailView prototype contract', () => {
     expect(source).toContain('<AdminPage>')
     expect(source).toContain('@back="goBack"')
     expect(source).toContain("router.push({ name: 'loading-plans' })")
-    expect(source).toContain('@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: 12px; } }')
+    expect(source).toContain('@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: var(--admin-space-5, 12px); } }')
     expect(source).not.toContain('AppDrawer')
   })
 

src/modules/loading-lists/pages/PreloadPlanDetailView.vue

@@ -278,7 +278,7 @@ watch([planId, warehouseId], () => void loadDetail())
 
     <AppDialog v-model="confirmOpen" class="preload-confirm-dialog admin-density-dialog" title="确认整份预装计划" width="min(520px, calc(100vw - 28px))" confirm-text="确认预装" :confirm-loading="confirmSaving" :confirm-disabled="!detail?.summary.readiness.canConfirm" @confirm="submitConfirmPreload">
       <div class="confirm-content">
-        <el-alert type="warning" :closable="false" show-icon title="本操作将确认整份预装计划" description="真实集装箱号可在提柜或预装详情补录，缺号不阻断此前流程；PDA 确认装柜完成前由服务端执行最终门禁。系统会原子确认本计划包含的全部入库预装票据，并由服务端按真实条件创建唯一 PDA 任务；当前页面不会伪造 PDA 成功。" />
+        <el-alert type="warning" :closable="false" show-icon title="本操作将确认整份预装计划" />
         <el-descriptions v-if="detail" :column="1" border>
           <el-descriptions-item label="预装单号">{{ detail.summary.preloadNo }}</el-descriptions-item>
           <el-descriptions-item label="柜次号">{{ detail.summary.cabinetNo || '—' }}</el-descriptions-item>
@@ -290,13 +290,13 @@ watch([planId, warehouseId], () => void loadDetail())
 </template>
 
 <style scoped>
-.preload-detail-page { display: grid; min-width: 0; width: 100%; gap: 12px; }
-.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
+.preload-detail-page { display: grid; min-width: 0; width: 100%; gap: var(--admin-space-5, 12px); }
+.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6, 16px); }
 .transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
-.confirm-content { display: grid; gap: 12px; }
+.confirm-content { display: grid; gap: var(--admin-space-5, 12px); }
 .remarks-form { margin-top: 14px; }
-.remarks-form small { display: block; margin-top: 4px; color: var(--cc-muted); }
+.remarks-form small { display: block; margin-top: var(--admin-space-1, 4px); color: var(--cc-muted); }
 :global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
-@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: 12px; } }
+@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: var(--admin-space-5, 12px); } }
 @media (max-width: 720px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
 </style>

src/modules/loading-lists/status.test.ts

@@ -1,7 +1,22 @@
 import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StatusBadge from '@/shared/components/StatusBadge.vue'
 import { loadingListStatusLabel } from './status'
 
 describe('loading list status labels', () => {
+  it.each([
+    ['WAIT_LOADING', '待装柜', 'warning'],
+    ['EDITING', '预装柜中', 'warning'],
+    ['LOADING', '拣货中', 'info'],
+    ['COMPLETED', '装柜完成', 'success'],
+    ['NEW_LOADING_STATE', '未知状态', 'neutral'],
+  ])('renders %s with its shared status tone', (status, label, tone) => {
+    const wrapper = mount(StatusBadge, { props: { status: loadingListStatusLabel(status) } })
+    expect(wrapper.text()).toBe(label)
+    expect(wrapper.classes()).toContain(`is-${tone}`)
+    wrapper.unmount()
+  })
+
   it('translates known states and hides unknown backend enums', () => {
     expect(loadingListStatusLabel('EDITING')).toBe('预装柜中')
     expect(loadingListStatusLabel('COMPLETED')).toBe('装柜完成')

src/modules/master-data/counterparties/pages/PartnersView.test.ts

@@ -195,6 +195,8 @@ describe('PartnersView real API integration', () => {
     const sections = detailContent?.querySelectorAll('section')
     const otherInfo = sections?.item(sections.length - 1)
     expect(detailContent).not.toBeNull()
+    expect(detailContent?.closest('.el-drawer')?.classList.contains('admin-density-drawer')).toBe(true)
+    expect(detailContent?.querySelectorAll('.density-fields')).toHaveLength(3)
     expect(otherInfo?.querySelectorAll('.detail-grid > .detail-span')).toHaveLength(2)
     expect(otherInfo?.textContent).toContain('更新时间')
     expect(otherInfo?.textContent).toContain('长期合作单位')
@@ -278,13 +280,10 @@ describe('PartnersView real API integration', () => {
   })
 
   it('keeps all three row actions visible without a premature more menu', () => {
-    expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail')
-    expect(source).toContain("access.can('platform:counterparty:edit')\" size=\"small\" plain type=\"primary\"")
-    expect(source).toContain("access.can('platform:counterparty:status')\" size=\"small\" plain")
-    expect(source).toContain('<Eye :size="15" />详情')
-    expect(source).toContain('<Pencil :size="15" />编辑')
-    expect(source).toContain('<Power :size="15" />')
-    expect(source).not.toContain('MoreHorizontal')
-    expect(source).not.toContain('<el-button link type="primary" @click="openDetail')
-  })
-})
+    const actions = source.slice(source.indexOf('<template #actions='), source.indexOf('</template>', source.indexOf('<template #actions=')))
+    expect(actions.match(/class="density-action"/g)).toHaveLength(3)
+    expect(actions).toContain('>详情</el-button>')
+    expect(actions).toContain('>编辑</el-button>')
+    expect(actions).toContain(':data-tone=')
+    expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
+  })})

src/modules/master-data/counterparties/pages/PartnersView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { Building2, Eye, FileUp, MapPin, Pencil, Plus, Power, Save } from '@lucide/vue'
+import { Building2, FileUp, MapPin, Plus, Save } from '@lucide/vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDrawer from '@/shared/components/AppDrawer.vue'
@@ -327,7 +328,7 @@ async function toggleStatus(row: PlatformPartnerResource) {
     await ElMessageBox.confirm(
       `${action}后${nextStatus === 'ACTIVE' ? '可继续用于新业务' : '不再用于新业务，历史数据不受影响'}。`,
       `${action}“${row.partnerName}”`,
-      { type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
     )
   } catch {
     return
@@ -370,7 +371,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="partners-page" spacing="normal">
+  <AdminPage as="div" class="partners-page admin-density" spacing="normal">
     <ListPageLayout aria-label="往来单位管理">
       <template #toolbar>
         <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
@@ -403,10 +404,10 @@ onMounted(() => {
       >
         <template #toolbar-actions><div class="partners-primary-actions"><el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:counterparty:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增往来单位</el-button></div></template>
         <template #actions="{ row }">
-          <div class="table-actions">
-            <el-button size="small" plain type="primary" @click="openDetail(row as PlatformPartnerResource)"><Eye :size="15" />详情</el-button>
-            <el-button v-if="access.can('platform:counterparty:edit')" size="small" plain type="primary" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)"><Pencil :size="15" />编辑</el-button>
-            <el-button v-if="access.can('platform:counterparty:status')" size="small" plain :disabled="loading" :type="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)"><Power :size="15" />{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
+          <div class="table-actions density-actions">
+            <el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row as PlatformPartnerResource)">详情</el-button>
+            <el-button data-tone="neutral" class="density-action" v-if="access.can('platform:counterparty:edit')" size="small" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)">编辑</el-button>
+            <el-button class="density-action" v-if="access.can('platform:counterparty:status')" size="small" :disabled="loading" :data-tone="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)">{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
           </div>
         </template>
         <template #partner="{ row }"><div class="partner-cell"><span><Building2 :size="18" /></span><div><LineClampText :content="(row as PlatformPartnerResource).partnerName" /></div></div></template>
@@ -422,30 +423,30 @@ onMounted(() => {
       v-model="editorOpen"
       :title="editorLabel"
       size="min(680px, 94vw)"
-      class="business-drawer editor-drawer"
+      class="editor-drawer admin-density admin-density-drawer"
       :confirm-loading="saving"
     >
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
-        <FormSection title="单位信息"><div class="form-grid two-cols">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
+        <FormSection class="density-form-section" title="单位信息"><div class="form-grid two-cols">
           <el-form-item label="单位编码" prop="partnerCode" required><el-input v-model="form.partnerCode" placeholder="如：CUS-001" maxlength="50" /></el-form-item>
           <el-form-item label="单位名称" prop="partnerName" required><el-input v-model="form.partnerName" placeholder="请输入工商登记或常用单位名称" maxlength="128" /></el-form-item>
           <el-form-item label="单位类型" prop="types" required><el-select v-model="form.types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择一个或多个单位类型"><el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
           <el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
           <el-form-item v-if="form.types.includes('CARRIER')" label="船司标准编码" prop="carrierCode" required><el-select v-model="form.carrierCode" placeholder="请选择船司标准编码" style="width:100%"><el-option v-for="option in carrierCodeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
         </div></FormSection>
-        <FormSection title="联系信息"><div class="form-grid two-cols">
+        <FormSection class="density-form-section" title="联系信息"><div class="form-grid two-cols">
           <el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item>
           <el-form-item label="联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入手机号或固定电话" maxlength="32" /></el-form-item>
           <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item>
         </div></FormSection>
-        <FormSection title="地址信息"><div class="form-grid two-cols">
+        <FormSection class="density-form-section" title="地址信息"><div class="form-grid two-cols">
           <el-form-item label="国家二字码" prop="countryCode" required><el-input v-model="form.countryCode" placeholder="如：CN" maxlength="2" @input="form.countryCode = String($event).toUpperCase()" /></el-form-item>
           <el-form-item label="省 / 州" prop="province"><el-input v-model="form.province" placeholder="如：广东省" maxlength="64" /></el-form-item>
           <el-form-item label="城市" prop="city" required><el-input v-model="form.city" placeholder="如：深圳市" maxlength="64" /></el-form-item>
           <el-form-item label="区 / 县" prop="district"><el-input v-model="form.district" placeholder="如：宝安区" maxlength="64" /></el-form-item>
           <el-form-item label="邮政编码" prop="postalCode"><el-input v-model="form.postalCode" placeholder="如：518000" maxlength="20" /></el-form-item>
         </div><el-form-item label="详细地址" prop="addressLine" required><el-input v-model="form.addressLine" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及门牌信息" maxlength="255" show-word-limit /></el-form-item></FormSection>
-        <FormSection title="其他信息" :bordered="false"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></FormSection>
+        <FormSection class="density-form-section" title="其他信息" :bordered="false"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></FormSection>
       </el-form>
       <template #footer>
         <div class="drawer-footer">
@@ -455,22 +456,22 @@ onMounted(() => {
       </template>
     </AppDrawer>
 
-    <AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="business-drawer detail-drawer" :loading="detailLoading" :show-footer="false">
+    <AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="detail-drawer admin-density admin-density-drawer" :loading="detailLoading" :show-footer="false">
       <div class="partner-detail">
-        <DetailPageLayout v-if="detail" aria-label="往来单位详情">
-          <FormSection title="单位信息"><dl class="detail-grid">
+        <DetailPageLayout class="partner-detail-layout" v-if="detail" aria-label="往来单位详情">
+          <FormSection class="density-form-section" title="单位信息"><dl class="detail-grid density-fields">
             <div><dt>单位编码</dt><dd>{{ detail.partnerCode }}</dd></div>
             <div><dt>单位名称</dt><dd>{{ detail.partnerName }}</dd></div>
             <div><dt>状态</dt><dd><el-tag :type="detail.status === 'ACTIVE' ? 'success' : 'info'">{{ detail.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></dd></div>
             <div><dt>单位类型</dt><dd class="partner-types"><el-tag v-for="type in detail.types" :key="type" effect="plain">{{ partnerTypeLabel(type) }}</el-tag></dd></div>
             <div v-if="detail.types.includes('CARRIER')"><dt>船司标准编码</dt><dd>{{ formatCarrierCode(detail.carrierCode) }}</dd></div>
           </dl></FormSection>
-          <FormSection title="联系与地址"><dl class="detail-grid">
+          <FormSection class="density-form-section" title="联系与地址"><dl class="detail-grid density-fields">
             <div><dt>联系人</dt><dd>{{ detail.contactName }}</dd></div><div><dt>联系电话</dt><dd>{{ detail.contactPhone }}</dd></div>
             <div><dt>联系邮箱</dt><dd>{{ detail.contactEmail || '-' }}</dd></div><div><dt>邮政编码</dt><dd>{{ detail.postalCode || '-' }}</dd></div>
             <div class="detail-span"><dt>详细地址</dt><dd>{{ [detail.countryCode, detail.province, detail.city, detail.district, detail.addressLine].filter(Boolean).join(' ') }}</dd></div>
           </dl></FormSection>
-          <FormSection title="其他信息" :bordered="false"><dl class="detail-grid">
+          <FormSection class="density-form-section" title="其他信息" :bordered="false"><dl class="detail-grid density-fields">
             <div class="detail-span"><dt>更新时间</dt><dd>{{ formatUpdatedAt(detail.updatedAt) }}</dd></div>
             <div class="detail-span"><dt>备注</dt><dd>{{ detail.remark || '-' }}</dd></div>
           </dl></FormSection>
@@ -478,7 +479,7 @@ onMounted(() => {
       </div>
     </AppDrawer>
 
-    <BatchImportDialog
+    <BatchImportDialog class="admin-density-dialog"
       v-model="importOpen"
       title="批量导入往来单位"
       entity-label="往来单位"
@@ -491,20 +492,18 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.partner-detail-layout { gap: 0; }
 .partners-page { min-width: 0; }
-.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: 8px; }
-.partner-cell { display: flex; align-items: center; gap: 10px; }
-.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
+.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
+.partner-cell { display: flex; align-items: center; gap: var(--admin-space-4); }
+.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: var(--admin-radius); background: #eef3fa; color: var(--cc-primary); }
 .partner-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
 .partner-cell :deep(.line-clamp-text) { width: 100%; }
 .partner-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
 .partner-address svg { flex: 0 0 15px; margin-top: 3px; color: var(--cc-muted); }
-.partner-detail { min-height: 180px; padding: 20px 24px 28px; box-sizing: border-box; }
-.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-border); }
-.detail-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
+.partner-detail { min-width: 0; }
+.partner-detail .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .detail-grid .detail-span { grid-column: 1 / -1; }
-.detail-grid dt { margin-bottom: 5px; color: var(--cc-muted); font-size: 12px; }
-.detail-grid dd { margin: 0; color: var(--cc-text); line-height: 1.55; overflow-wrap: anywhere; }
 @media (max-width: 720px) {
   .partners-primary-actions :deep(.el-button) { width: 100%; min-height: 40px; }
   .partners-primary-actions { flex-direction: column; }

src/modules/master-data/express-companies/pages/ExpressCompaniesView.test.ts

@@ -73,15 +73,13 @@ enableAutoUnmount(afterEach)
 afterAll(() => vi.unstubAllGlobals())
 
 describe('ExpressCompaniesView query and table migration', () => {
-  it('renders edit and status as colored outlined buttons with prototype icons', () => {
-    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              type="primary"')
-    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              :disabled="loading"\n              :type=')
-    expect(expressCompaniesSource).toContain('<Pencil :size="15" />编辑')
-    expect(expressCompaniesSource).toContain('<Power :size="15" />')
-    expect(expressCompaniesSource).not.toContain("access.can('platform:express:edit')\"\n              link")
-    expect(expressCompaniesSource).not.toContain("access.can('platform:express:status')\"\n              link")
+  it('renders edit and status as shared outlined text buttons', () => {
+    const actions = expressCompaniesSource.slice(expressCompaniesSource.indexOf('<template #actions='), expressCompaniesSource.indexOf('</template>', expressCompaniesSource.indexOf('<template #actions=')))
+    expect(actions.match(/class="density-action"/g)).toHaveLength(2)
+    expect(actions).toContain('>编辑</el-button>')
+    expect(actions).toContain(' :data-tone=')
+    expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
   })
-
   it('keeps operation first and exposes the prototype business columns separately', () => {
     const actionsIndex = expressCompaniesSource.indexOf("{ key: 'actions', label: '操作'")
     const nameIndex = expressCompaniesSource.indexOf("{ key: 'company', label: '公司名称'")

src/modules/master-data/express-companies/pages/ExpressCompaniesView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
-import { ExternalLink, FileUp, Pencil, Plus, Power, Save, Truck } from '@lucide/vue'
+import { ExternalLink, FileUp, Plus, Save, Truck } from '@lucide/vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import BatchImportDialog from '@/shared/components/BatchImportDialog.vue'
@@ -250,7 +251,7 @@ async function toggleStatus(row: PlatformExpressCompanyResource) {
     await ElMessageBox.confirm(
       `确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
       `${action}快递公司`,
-      { type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
+      { customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
     )
   } catch {
     return
@@ -280,7 +281,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-density">
     <div class="business-page express-company-page">
       <ListPageLayout ariaLabel="快递公司列表">
         <template #toolbar>
@@ -311,25 +312,25 @@ onMounted(() => {
       >
         <template #toolbar-actions><div class="table-actions"><el-button v-if="access.can('platform:express:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:express:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增快递公司</el-button></div></template>
         <template #actions="{ row }">
-          <div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
-            <el-button
+          <div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions density-actions">
+            <el-button data-tone="neutral" class="density-action"
               v-if="access.can('platform:express:edit')"
               size="small"
-              plain
-              type="primary"
+
+
               :disabled="loading"
               :loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
               @click="openEdit(row as PlatformExpressCompanyResource)"
-            ><Pencil :size="15" />编辑</el-button>
-            <el-button
+            >编辑</el-button>
+            <el-button class="density-action"
               v-if="access.can('platform:express:status')"
               size="small"
-              plain
+
               :disabled="loading"
-              :type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
+              :data-tone="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
               :loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
               @click="toggleStatus(row as PlatformExpressCompanyResource)"
-            ><Power :size="15" />{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
+            >{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
           </div>
           <span v-else class="muted-value">仅查看</span>
         </template>
@@ -349,7 +350,7 @@ onMounted(() => {
     </section>
       </ListPageLayout>
 
-    <BatchImportDialog
+    <BatchImportDialog class="admin-density-dialog"
       v-model="importOpen"
       title="批量导入快递公司"
       entity-label="快递公司"
@@ -361,18 +362,16 @@ onMounted(() => {
       @success="loadExpressCompanies"
     />
 
-    <el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="business-drawer editor-drawer" :close-on-click-modal="false">
-      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
-        <FormSection title="基础信息">
-          <h3>公司标识</h3>
+    <el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="editor-drawer admin-density admin-density-drawer" :close-on-click-modal="false">
+      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
+        <FormSection class="density-form-section" title="基础信息">
           <div class="form-grid two-cols">
             <el-form-item label="快递公司编码" prop="companyCode" required><el-input v-model.trim="form.companyCode" maxlength="50" placeholder="例如 SF" /></el-form-item>
             <el-form-item label="快递公司名称" prop="companyName" required><el-input v-model.trim="form.companyName" maxlength="128" placeholder="例如 顺丰速运" /></el-form-item>
           </div>
           <el-form-item label="状态" prop="status" required><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item>
         </FormSection>
-        <FormSection title="服务配置">
-          <h3>服务与查询</h3>
+        <FormSection class="density-form-section" title="服务配置">
           <div class="form-grid two-cols">
             <el-form-item label="客服电话"><el-input v-model.trim="form.servicePhone" maxlength="32" placeholder="例如 95338" /></el-form-item>
             <el-form-item label="官方网站" prop="website"><el-input v-model.trim="form.website" maxlength="255" placeholder="https://www.example.com" /></el-form-item>
@@ -380,7 +379,7 @@ onMounted(() => {
           <el-form-item label="轨迹查询地址模板"><el-input v-model.trim="form.trackingUrlTemplate" maxlength="500" placeholder="https://example.com/track/{trackingNo}" /></el-form-item>
           <p class="form-help">可使用 <code>{trackingNo}</code> 作为快递单号占位符；一期不包含轨迹订阅和自动回传。</p>
         </FormSection>
-        <FormSection title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
+        <FormSection class="density-form-section" title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
       </el-form>
       <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveExpressCompany"><Save :size="16" />保存快递公司</el-button></div></template>
     </el-drawer>
@@ -389,19 +388,19 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.express-company-page { gap: 16px; }
-.state-alert p { margin: 6px 0 0; line-height: 1.55; }
-.state-alert .el-button { margin-top: 10px; }
-.express-company-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
-.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: 7px; background: #f8fafc; color: var(--cc-primary); }
+.express-company-page { gap: var(--admin-space-6); }
+.state-alert p { margin: var(--admin-space-2) 0 0; line-height: 1.55; }
+.state-alert .el-button { margin-top: var(--admin-space-4); }
+.express-company-cell { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4); }
+.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #f8fafc; color: var(--cc-primary); }
 .express-company-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
 .express-company-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
+.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: var(--admin-font-caption); text-decoration: none; }
 .external-link:hover { text-decoration: underline; }
-.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
+.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
 .remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
 .form-help code { color: #475467; font-family: "Cascadia Code", Consolas, monospace; }
-.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3); }
 .panel-actions .el-button { margin-left: 0; }
 @media (max-width: 720px) {
   .panel-actions, .panel-actions .el-button { width: 100%; }