feat(fleet): expose separate owned business list columns

AGENTS.md

@@ -3,9 +3,8 @@
 ## 快速读取顺序
 
 1. 由“模块快速路由”选最小模块并读最近 `AGENTS.md`，按 `routes.ts → pages/ → api/types/stores/composables` 下钻，不扫描全部 `src/`。
-2. 视觉、布局/交互承载变更或真实页面验收先读 `../../docs/Admin-Client前端原型还原验收规则.md`；需原型依据再读 `../../docs/悦/货代SAAS平台后台/AGENTS.md` 并定位片段。纯文案、逻辑或单元测试不触发。
-   样式优化另读 `../../docs/Admin高密度界面规范.md` 的“样式维护边界”“新模块接入规则”，保留已确认密度、彩色页签、业务语义及承载。国内仓、客户管理为样板；新增菜单按本轮范围显式接入，货柜入口见 `../../docs/Admin货柜管理样式核对记录.md`。
-   蓝白样式接入见 [样板指南](../../docs/界面参考/蓝白卡片式工作台风格参考.md)。
+2. Admin 样式唯一入口为 [Admin 界面规范](../../docs/Admin高密度界面规范.md#按任务阅读)，按任务只读对应章节；提示小字、加载布局、蓝白风格及密度不再分散查多份规范。样板目录仅在需要视觉参考时查，模块核对记录仅在核对范围、业务例外或验收证据时查。
+   视觉、布局/交互承载变更或真实页面验收再读 [前端验收规则](../../docs/Admin-Client前端原型还原验收规则.md)；需原型依据再读 `../../docs/悦/货代SAAS平台后台/AGENTS.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` 对应章节。
 
@@ -99,7 +98,7 @@
 - 接入真实接口时删除对应模拟路径，不允许生产逻辑静默回退假数据。客户专属写操作显式选择客户，长整型 ID 按字符串透传，不从本地存储推断。
 - 订舱代理、拖车承运商和报关代理提交服务端供应商 ID，从公共供应商列表选择 `ACTIVE` 且类别/范围匹配的记录；参数变化同步检查 API、类型、表单、展示、Mock/Fixture、测试和 OpenAPI。
 - 删除、停用、改权限等高风险操作必须有确认、处理中、成功和失败反馈；失败保留用户上下文。日志、提示和示例不得包含真实账号、Token、隐私或生产数据。
-- 页面和交互必须服从对应原型及验收规则；Admin 当前只验收 `1920×1080`、`100%` 缩放。标准列表和共享组件实现继续读 `src/shared/components/AGENTS.md`。
+- 页面外观遵循 Admin 界面规范，业务及操作承载核对当前契约、逐操作确认与原型证据；Admin 当前只验收 `1920×1080`、`100%` 缩放。标准列表和共享组件实现继续读 `src/shared/components/AGENTS.md`。
 
 ## 开发验收身份
 

src/app/components/AdminSidebarMenu.test.ts

@@ -1,7 +1,10 @@
 import { flushPromises, mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
+import { defineComponent, markRaw } from 'vue'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
 import { createMemoryHistory, createRouter } from 'vue-router'
-import { describe, expect, it } from 'vitest'
+import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
+import { describe, expect, it, vi } from 'vitest'
 import { adminNavigation, filterAdminNavigation, type AdminNavigationNode } from '@/core/navigation/adminNavigation'
 import AdminSidebarMenu from './AdminSidebarMenu.vue'
 
@@ -85,6 +88,72 @@ describe('AdminSidebarMenu', () => {
     expect(wrapper.get('nav').attributes('data-collapsed')).toBe('true')
   })
 
+  it('fits collapsed icons inside the scrolling rail and keeps hover submenus outside it', async () => {
+    const host = document.createElement('div')
+    host.className = 'app-shell is-collapsed'
+    host.innerHTML = '<aside class="app-sidebar"><nav class="side-nav"></nav></aside>'
+    document.body.append(host)
+    const style = document.createElement('style')
+    style.textContent = readFileSync(resolve(process.cwd(), 'src/styles/shell.css'), 'utf8')
+    document.head.append(style)
+    const rail = host.querySelector<HTMLElement>('.side-nav')!
+    const router = routerPlugin()
+    await router.push('/')
+    const icon = markRaw(adminNavigation[0].icon)
+    const items: AdminNavigationNode[] = [
+      { key: 'home', title: '首页', icon, path: '/' },
+      {
+        key: 'resources', title: '资源管理', icon,
+        children: [{ key: 'warehouses', title: '仓库管理', icon, path: '/warehouses' }],
+      },
+    ]
+    const wrapper = mount(AdminSidebarMenu, {
+      attachTo: rail,
+      props: { items, activePath: '/', collapsed: true },
+      global: { plugins: [router], components: { ElMenu, ElMenuItem, ElSubMenu }, stubs: { transition: false } },
+    })
+    try {
+      await flushPromises()
+      const menu = wrapper.get('.side-nav-menu.el-menu--collapse')
+      const group = wrapper.get('.side-nav-menu > .el-sub-menu')
+      const leafTrigger = wrapper.get('.el-menu-tooltip__trigger')
+      expect(getComputedStyle(host.querySelector('.app-sidebar')!).width).toBe('76px')
+      expect(getComputedStyle(rail).overflowX).toBe('hidden')
+      expect(getComputedStyle(rail).overflowY).toBe('auto')
+      expect(getComputedStyle(menu.element).width).toBe('100%')
+      for (const trigger of [leafTrigger, group.get('.el-sub-menu__title')]) {
+        expect(getComputedStyle(trigger.element).paddingLeft).toBe('0px')
+        expect(getComputedStyle(trigger.element).paddingRight).toBe('0px')
+        expect(getComputedStyle(trigger.element).justifyContent).toBe('center')
+        expect(getComputedStyle(trigger.get('.menu-icon').element).marginRight).toBe('0px')
+      }
+
+      await group.trigger('mouseenter')
+      await vi.waitFor(() => expect(group.attributes('aria-expanded')).toBe('true'))
+      const popup = document.body.querySelector('.shell-nav-popper .el-menu--popup')
+      expect(popup).not.toBeNull()
+      expect(popup?.closest('.side-nav')).toBeNull()
+      expect(popup?.textContent).toContain('仓库管理')
+
+      const destination = popup!.querySelector<HTMLElement>('.el-menu-item')!
+      destination.focus()
+      expect(document.activeElement).toBe(destination)
+      expect(destination.getAttribute('role')).toBe('menuitem')
+      destination.click()
+      await flushPromises()
+      expect(router.currentRoute.value.path).toBe('/warehouses')
+
+      await wrapper.setProps({ collapsed: false })
+      host.classList.remove('is-collapsed')
+      expect(getComputedStyle(host.querySelector('.app-sidebar')!).width).toBe('240px')
+      expect(wrapper.find('.el-menu--collapse').exists()).toBe(false)
+    } finally {
+      wrapper.unmount()
+      style.remove()
+      host.remove()
+    }
+  })
+
   it('renders only entries included in the filtered navigation input', () => {
     const items = filterAdminNavigation(adminNavigation, new Set(['platform:permission:list']))
     const wrapper = mount(AdminSidebarMenu, {

src/app/components/AdminSidebarMenuNode.vue

@@ -10,7 +10,7 @@ defineProps<{
 </script>
 
 <template>
-  <el-sub-menu v-if="node.children?.length" :index="node.key">
+  <el-sub-menu v-if="node.children?.length" :index="node.key" popper-class="admin-workbench shell-nav-popper">
     <template #title>
       <component
         v-if="!level"

src/app/components/WorkspaceTabs.test.ts

@@ -44,6 +44,17 @@ describe('WorkspaceTabs', () => {
   })
   afterEach(() => { document.body.innerHTML = '' })
 
+  it('retains its own theme on the teleported management menu', async () => {
+    const { wrapper } = await mountTabs()
+    await wrapper.get('[aria-label="页签管理"]').trigger('click')
+    await flushPromises()
+
+    const popper = document.body.querySelector('.shell-header-popper')
+    expect(popper?.classList.contains('admin-workbench')).toBe(true)
+    expect(popper?.closest('.workspace-tabs')).toBeNull()
+    wrapper.unmount()
+  })
+
   it('keeps a dirty tab open when discard confirmation is cancelled', async () => {
     const { wrapper, workspace, unsaved } = await mountTabs()
     unsaved.upsert({ key: 'customer-form', label: '客户资料', dirty: true, requiredPermission: null, workspaceTabId: 'customers' })

src/app/components/WorkspaceTabs.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -125,7 +126,7 @@ watch(
 </script>
 
 <template>
-  <section class="workspace-tabs" aria-label="页面工作区">
+  <section class="workspace-tabs admin-workbench" aria-label="页面工作区">
     <div ref="tabListRef" class="workspace-tab-list" role="tablist" aria-label="已打开页面" @wheel="handleTabWheel">
       <div
         v-for="(tab, index) in workspace.tabs"
@@ -156,7 +157,7 @@ watch(
       </div>
     </div>
 
-    <el-dropdown trigger="click" placement="bottom-end" @command="handleCommand">
+    <el-dropdown trigger="click" placement="bottom-end" popper-class="admin-workbench shell-header-popper" @command="handleCommand">
       <el-button class="workspace-tab-more" text aria-label="页签管理" title="页签管理">
         <MoreHorizontal :size="18" aria-hidden="true" />
       </el-button>
@@ -181,9 +182,8 @@ watch(
   min-width: 0;
   height: 44px;
   align-items: stretch;
-  border-bottom: 1px solid var(--cc-border);
-  background: #f7f9fc;
-  box-shadow: 0 5px 14px rgba(23, 42, 70, .045);
+  border-bottom: 1px solid var(--workbench-border);
+  background: var(--workbench-surface);
 }
 .workspace-tab-list {
   display: flex;
@@ -208,10 +208,10 @@ watch(
   border: 1px solid transparent;
   border-bottom: 0;
   border-radius: 8px 8px 0 0;
-  color: #526178;
+  color: var(--workbench-muted);
 }
-.workspace-tab:hover { background: #eef3fa; color: #24344d; }
-.workspace-tab.is-active { border-color: var(--cc-border); background: #fff; color: #172033; }
+.workspace-tab:hover { background: var(--workbench-surface-soft); color: var(--workbench-text); }
+.workspace-tab.is-active { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-primary); }
 .workspace-tab-activate {
   display: flex;
   min-width: 0;
@@ -239,19 +239,19 @@ watch(
   border: 0;
   border-radius: 6px;
   background: transparent;
-  color: #7b8799;
+  color: var(--workbench-muted);
   cursor: pointer;
 }
-.workspace-tab-close:hover { background: #dde6f2; color: #26364d; }
+.workspace-tab-close:hover { background: var(--workbench-accent-border); color: var(--workbench-primary); }
 .workspace-tab-activate:focus-visible,
-.workspace-tab-close:focus-visible { outline: 2px solid var(--cc-primary); outline-offset: -2px; }
-.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--cc-border); color: #526178; }
+.workspace-tab-close:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: -2px; }
+.workspace-tab-more { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 0; border-left: 1px solid var(--workbench-border); color: var(--workbench-muted); }
 
 @media (max-width: 720px) {
   .workspace-tabs { top: 64px; height: 48px; }
   .workspace-tab-list { align-items: center; padding: 4px 6px; }
   .workspace-tab { min-width: 140px; height: 40px; border-bottom: 1px solid transparent; border-radius: 8px; }
-  .workspace-tab.is-active { border-color: #cbd7e7; }
+  .workspace-tab.is-active { border-color: var(--workbench-accent-border); }
   .workspace-tab-close { width: 34px; height: 34px; flex-basis: 34px; }
   .workspace-tab-more { height: 48px; }
 }

src/app/layouts/AppLayout.test.ts

@@ -114,7 +114,8 @@ describe('AppLayout', () => {
 
   it('shows the authenticated identity and the localhost full-access control', async () => {
     const { wrapper } = await mountLayout()
-    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
+    expect(wrapper.get('.user-copy').text()).toBe('平台管理员（admin）')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：平台管理员（admin）')
     const accessToggle = wrapper.get('[role="switch"]')
     expect(accessToggle.text()).toContain('本地全权限')
     expect(accessToggle.text()).toContain('已关闭')
@@ -130,10 +131,29 @@ describe('AppLayout', () => {
     expect(notificationTrigger.find('.notification-count').exists()).toBe(false)
   })
 
+  it('avoids repeating identical display names and accounts while retaining the full accessible identity', async () => {
+    const { wrapper } = await mountLayout()
+    const auth = useAuthStore()
+    auth.user = { ...auth.user!, name: 'admin', account: 'admin' }
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.get('.user-copy').text()).toBe('admin')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：admin（admin）')
+    expect(wrapper.get('.user-copy').attributes('title')).toBe('登录身份：admin（admin）')
+  })
+
+  it('limits the shell theme to navigation and header instead of inheriting it into routed pages', async () => {
+    const { wrapper } = await mountLayout('/customers')
+
+    expect(wrapper.get('.app-sidebar').classes()).toContain('admin-workbench')
+    expect(wrapper.get('.app-header').classes()).toContain('admin-workbench')
+    expect(wrapper.get('.cached-count').element.closest('.admin-workbench')).toBeNull()
+  })
+
   it('hides the shell heading when the route opts out', async () => {
     const { wrapper } = await mountLayout('/customers')
     expect(wrapper.find('.page-heading').exists()).toBe(false)
-    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
+    expect(wrapper.get('.user-copy').attributes('aria-label')).toBe('登录身份：平台管理员（admin）')
   })
 
   it('logs out after confirmation', async () => {

src/app/layouts/AppLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -26,9 +27,12 @@ const collapsed = ref(false)
 const mobileMenuOpen = ref(false)
 const isMobileViewport = ref(false)
 let mobileViewportMedia: MediaQueryList | undefined
-const pageTitle = computed(() => route.meta.title || '管理后台')
-const pageDescription = computed(() => route.meta.description || '')
 const showPageHeading = computed(() => route.meta.showPageHeading !== false)
+const userIdentity = computed(() => {
+  const name = auth.user?.name, account = auth.user?.account
+  return name && account && name !== account ? `${name}（${account}）` : name || account || '—'
+})
+const userIdentityLabel = computed(() => `登录身份：${auth.user?.name ?? '-'}（${auth.user?.account ?? '-'}）`)
 const menuCollapsed = computed(() => collapsed.value && !mobileMenuOpen.value)
 const menuButtonLabel = computed(() => {
   if (isMobileViewport.value) return mobileMenuOpen.value ? '关闭菜单' : '打开菜单'
@@ -139,7 +143,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
 <template>
   <div class="app-shell" :class="{ 'is-collapsed': collapsed, 'is-mobile-open': mobileMenuOpen }">
     <button v-if="mobileMenuOpen" class="sidebar-scrim" type="button" aria-label="关闭菜单" @click="mobileMenuOpen = false" />
-    <aside class="app-sidebar">
+    <aside class="app-sidebar admin-workbench">
       <div class="brand-block">
         <img class="brand-logo brand-logo-full" :src="baiyueLogoWhite" alt="柏悦物流" />
         <img class="brand-logo brand-logo-mark" :src="baiyueMarkWhite" alt="柏悦物流" />
@@ -150,7 +154,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
     </aside>
 
     <div class="app-main">
-      <header class="app-header" :class="{ 'app-header--without-page-heading': !showPageHeading }">
+      <header class="app-header admin-workbench" :class="{ 'app-header--without-page-heading': !showPageHeading }">
         <button
           class="shell-menu-button"
           type="button"
@@ -158,13 +162,12 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
           :aria-expanded="menuExpanded"
           @click="handleMenuToggle"
         ><Menu :size="22" /></button>
-        <div v-if="showPageHeading" class="page-heading">
-          <!-- <h1>{{ pageTitle }}</h1><p v-if="pageDescription">{{ pageDescription }}</p> -->
-        </div>
+        <div v-if="showPageHeading" class="page-heading" aria-hidden="true" />
         <div class="header-user">
           <button
             v-if="access.localFullAccessAvailable"
-            class="local-full-access-toggle"
+            class="local-full-access-toggle workbench-tone"
+            :data-tone="access.localFullAccessEnabled ? 'green' : 'blue'"
             type="button"
             role="switch"
             :aria-checked="access.localFullAccessEnabled"
@@ -175,7 +178,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
             <span>本地全权限</span>
             <strong>{{ access.localFullAccessEnabled ? '已开启' : '已关闭' }}</strong>
           </button>
-          <el-dropdown v-if="canOpenNotificationManagement" trigger="click" placement="bottom-end">
+          <el-dropdown v-if="canOpenNotificationManagement" trigger="click" placement="bottom-end" popper-class="admin-workbench shell-header-popper">
             <button class="notification-trigger" type="button" aria-label="消息中心">
               <Bell :size="18" /><span>消息中心</span>
             </button>
@@ -186,7 +189,7 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
             </el-dropdown-menu></template>
           </el-dropdown>
           <div class="user-avatar">{{ auth.user?.name.slice(0, 1) }}</div>
-          <div class="user-copy" :aria-label="`登录身份：${auth.user?.name ?? '-'}（${auth.user?.account ?? '-'}）`"><strong>登录身份：{{ auth.user?.name }}（{{ auth.user?.account }}）</strong></div>
+          <div class="user-copy" :aria-label="userIdentityLabel" :title="userIdentityLabel"><strong>{{ userIdentity }}</strong></div>
           <el-button text aria-label="退出登录" @click="handleLogout"><LogOut :size="18" /></el-button>
         </div>
       </header>
@@ -209,14 +212,14 @@ watch(() => auth.user?.id || auth.user?.account || '', (userId, previousUserId)
 
 <style scoped>
 .app-header--without-page-heading .header-user { margin-left: auto; }
-.local-full-access-toggle { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
-.local-full-access-toggle:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .22); }
-.local-full-access-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
-.local-full-access-toggle[aria-checked="true"] { border-color: #86efac; background: rgba(22, 163, 74, .3); }
-.local-full-access-toggle strong { color: #dcfce7; font-size: 12px; }
-.notification-trigger { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
-.notification-trigger:hover { border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
-.notification-trigger:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }
+.local-full-access-toggle { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--workbench-border); border-radius: 10px; background: var(--workbench-surface); color: var(--workbench-muted); font: inherit; font-size: 13px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
+.local-full-access-toggle:hover { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); }
+.local-full-access-toggle:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
+.local-full-access-toggle[aria-checked="true"] { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-accent); }
+.local-full-access-toggle strong { color: inherit; font-size: 12px; }
+.notification-trigger { display: inline-flex; height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--workbench-border); border-radius: 10px; background: var(--workbench-surface); color: var(--workbench-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
+.notification-trigger:hover { border-color: var(--workbench-accent-border); background: var(--workbench-accent-soft); color: var(--workbench-primary); }
+.notification-trigger:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
 .notification-trigger > svg { flex: 0 0 auto; }
 @media (max-width: 720px) { .local-full-access-toggle > span { display: none; } .notification-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; } .notification-trigger > span { display: none; } }
 </style>

src/app/pages/ForbiddenView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed } from 'vue'
 import { ShieldX } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -16,7 +17,7 @@ async function returnToAccessiblePage() {
 </script>
 
 <template>
-  <section class="forbidden-page" aria-labelledby="forbidden-title">
+  <section class="forbidden-page admin-workbench" aria-labelledby="forbidden-title">
     <div class="forbidden-icon" aria-hidden="true"><ShieldX :size="32" /></div>
     <p class="section-kicker">403 · 权限不足</p>
     <h2 id="forbidden-title">当前登录账号无法访问此页面</h2>

src/core/navigation/adminNavigation.test.ts

@@ -47,7 +47,7 @@ describe('adminNavigation', () => {
       { title: '货柜管理', children: ['订舱列表', '拖车列表', '货柜列表', '装柜清单', '预装清单'] },
        { title: '海外尾程', children: ['尾程订单', '入库单', '废弃单', '出库单', '换标单', '派送单', '托盘管理', '库位管理', '库存管理', '退货库存管理', '退货箱号管理'] },
       { title: '预约管理', children: ['预约列表'] },
-      { title: '车辆管理', children: ['排车列表', '车辆列表', '司机管理', '自有业务', '外配业务', '出车记录'] },
+      { title: '车辆管理', children: ['排车列表', '车辆列表', '司机管理', '自有业务', '外配任务', '出车记录'] },
       { title: '海外业务', children: ['采购订单', '本土卡车', '本土散板', '散板需求'] },
       { title: '客户服务', children: ['异常订单'] },
       { title: '财务管理', children: ['客户账户', '客户应收应付', '应收款统计表', '客户对账单', '结算单应收', '结算单应付'] },

src/core/navigation/adminNavigation.ts

@@ -135,7 +135,7 @@ export const adminNavigation: AdminNavigationNode[] = [
       { key: 'vehicle-list', title: '车辆列表', icon: Truck, path: '/overseas-master-data/vehicles', permission: 'platform:overseas-master-data:vehicle:list' },
       { key: 'driver-management', title: '司机管理', icon: ContactRound, path: '/overseas-master-data/drivers', permission: 'platform:overseas-master-data:driver:list' },
       { key: 'fleet-owned-business', title: '自有业务', icon: Truck, path: '/overseas-master-data/owned-business', permission: 'platform:fleet:owned-business:list' },
-      { key: 'fleet-outsourced-business', title: '外配业务', icon: Truck, path: '/overseas-master-data/outsourced-business', permission: 'platform:fleet:outsourced-business:list' },
+      { key: 'fleet-outsourced-business', title: '外配任务', icon: Truck, path: '/overseas-master-data/outsourced-business', permission: 'platform:fleet:outsourced-business:list' },
       { key: 'fleet-trips', title: '车次管理', icon: Truck, path: '/overseas-master-data/trips', permission: 'platform:fleet:trip:list', hidden: true },
       { key: 'fleet-operations', title: '出车记录', icon: Truck, path: '/overseas-master-data/trip-operations', permission: 'platform:fleet:operations:list' },
     ],

src/modules/appointment-calendar/AppointmentBatchForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -121,13 +123,13 @@ onMounted(() => load())
         <p v-for="reason in context.blockReasons" :key="reason" role="status">{{ reason }}</p>
         <div v-if="!context.sources.length" aria-label="原批次货物快照"><p>当前批次无分批资格，以下为原预约保留的货物资料。</p><div v-for="(item, index) in context.appointment.items" :key="item.id" class="allocation-row"><b>来源 {{ index + 1 }} · {{ item.inboundCode || '原票业务号未提供' }}</b><p>{{ item.fbaWarehouseCode }} · {{ item.packageCount ?? '箱数待核实' }}<span v-if="item.packageCount != null"> 箱</span></p><p>货件：{{ item.shipmentReferences?.join('、') || '待核实' }}</p></div></div>
         <div class="batch-modes"><el-button :disabled="saving || !!pending || !context.allowedActions.includes('SPLIT')" @click="changeMode('split')">分成两次送仓</el-button><el-button :disabled="saving || !!pending || !context.allowedActions.includes('MERGE')" @click="changeMode('merge')">同仓合并安排</el-button></div>
-        <form class="density-form" @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
-          <div v-for="(source, index) in context.sources" :key="allocationKey(source)" class="allocation-row"><b>来源 {{ index + 1 }} · {{ sourceLabel(source) }}</b><p>本批 {{ source.packageCount ?? '待核实' }} 箱 · 原箱数 {{ source.originalPackages ?? '未知' }}</p><p>货件：{{ source.shipmentReferences.join('、') || '待核实' }}</p><label v-if="mode === 'split'">分到第二批的箱数<input v-model="form.moved[allocationKey(source)]" type="number" min="0" :max="source.packageCount ?? undefined" step="1" :aria-label="`来源${index + 1}分出箱数`"></label><el-button v-if="context.allowedActions.includes('VERIFY_CARGO')" @click="verify(source)">核实本票资料</el-button></div>
-          <template v-if="mode === 'merge'"><label>查找另一批工作事项<input v-model="keyword" placeholder="预约号、批次号、柜号" maxlength="80" @keydown.enter.prevent="searchCandidates()"></label><el-button :loading="candidateLoading" @click="searchCandidates()">查询批次</el-button><LoadErrorState v-if="candidateError" title="合并候选不可用" :message="candidateError.message" @retry="searchCandidates(candidatePage)" /><div v-for="candidate in candidates?.records.filter(item => item.batchKey && item.batchKey !== activeKey)" :key="candidate.workItemKey" class="batch-candidate"><span>{{ candidate.title }} · {{ candidate.destinationName || '目的仓待核实' }}</span><el-button :disabled="candidateLoading" @click="chooseOther(candidate.batchKey!)">核对并选择</el-button></div><p v-if="candidates && !candidates.records.length">本页未查询到工作事项。</p><div v-if="candidates && candidates.total > 8" class="batch-modes"><el-button :disabled="candidatePage === 1 || candidateLoading" @click="searchCandidates(candidatePage - 1)">上一页</el-button><span>第 {{ candidatePage }} 页</span><el-button :disabled="candidatePage * 8 >= candidates.total || candidateLoading" @click="searchCandidates(candidatePage + 1)">下一页</el-button></div><p v-if="other">已核对：{{ other.appointment.appointmentNo }}，{{ other.sources.length }} 条来源；提交时再次逐来源校验。</p></template>
-          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<el-date-picker v-model="form.firstDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label v-if="mode === 'split'">第二批目标日期（可不填）<el-date-picker v-model="form.nextDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" /></label>
-        </fieldset><LoadErrorState v-if="saveError" title="批次调整未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canSubmit || !!result">{{ pending ? '重试本次调整' : mode === 'split' ? '拆分为两批预约安排' : '合并为一批继续预约' }}</el-button></form>
+        <form class="density-form appointment-native-form" @submit.prevent="save"><fieldset :disabled="saving || !!pending || loading || !canWrite">
+          <div v-for="(source, index) in context.sources" :key="allocationKey(source)" class="allocation-row"><b>来源 {{ index + 1 }} · {{ sourceLabel(source) }}</b><p>本批 {{ source.packageCount ?? '待核实' }} 箱 · 原箱数 {{ source.originalPackages ?? '未知' }}</p><p>货件：{{ source.shipmentReferences.join('、') || '待核实' }}</p><label v-if="mode === 'split'">分到第二批的箱数<input v-model="form.moved[allocationKey(source)]" type="number" min="0" :max="source.packageCount ?? undefined" step="1" :aria-label="`来源${index + 1}分出箱数`" class="workbench-input"></label><el-button v-if="context.allowedActions.includes('VERIFY_CARGO')" @click="verify(source)">核实本票资料</el-button></div>
+          <template v-if="mode === 'merge'"><label>查找另一批工作事项<input v-model="keyword" placeholder="预约号、批次号、柜号" maxlength="80" @keydown.enter.prevent="searchCandidates()" class="workbench-input"></label><el-button :loading="candidateLoading" @click="searchCandidates()">查询批次</el-button><LoadErrorState v-if="candidateError" title="合并候选不可用" :message="candidateError.message" @retry="searchCandidates(candidatePage)" /><div v-for="candidate in candidates?.records.filter(item => item.batchKey && item.batchKey !== activeKey)" :key="candidate.workItemKey" class="batch-candidate"><span>{{ candidate.title }} · {{ candidate.destinationName || '目的仓待核实' }}</span><el-button :disabled="candidateLoading" @click="chooseOther(candidate.batchKey!)">核对并选择</el-button></div><p v-if="candidates && !candidates.records.length">本页未查询到工作事项。</p><div v-if="candidates && candidates.total > 8" class="batch-modes"><el-button :disabled="candidatePage === 1 || candidateLoading" @click="searchCandidates(candidatePage - 1)">上一页</el-button><span>第 {{ candidatePage }} 页</span><el-button :disabled="candidatePage * 8 >= candidates.total || candidateLoading" @click="searchCandidates(candidatePage + 1)">下一页</el-button></div><p v-if="other">已核对：{{ other.appointment.appointmentNo }}，{{ other.sources.length }} 条来源；提交时再次逐来源校验。</p></template>
+          <label>{{ mode === 'split' ? '第一批目标日期（可不填）' : '合并后目标日期（可不填）' }}<el-date-picker v-model="form.firstDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label v-if="mode === 'split'">第二批目标日期（可不填）<el-date-picker v-model="form.nextDate" type="date" :disabled="saving || !!pending || loading || !canWrite" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label><label>批次备注<textarea v-model="form.remark" maxlength="1000" class="workbench-input" /></label>
+        </fieldset><LoadErrorState v-if="saveError" title="批次调整未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState><div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canSubmit || !!result">{{ pending ? '重试本次调整' : mode === 'split' ? '拆分为两批预约安排' : '合并为一批继续预约' }}</el-button></div></form>
       </template>
     </template>
   </section>
 </template>
-<style scoped>.allocation-row, .batch-result, .batch-candidate { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--cc-border); overflow-wrap: anywhere; }.batch-modes, .batch-result, .batch-candidate { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }.batch-candidate > span { flex: 1; }</style>
+<style scoped>.allocation-row, .batch-result, .batch-candidate { padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--workbench-border); overflow-wrap: anywhere; }.batch-modes, .batch-result, .batch-candidate { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }.batch-candidate > span { flex: 1; }</style>

src/modules/appointment-calendar/AppointmentCalendarPanel.test.ts

@@ -2,11 +2,45 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import AppointmentCalendarPanel from './AppointmentCalendarPanel.vue'
 import { scheduleTypes, type ScheduleEvent } from './schedule'
+import { projectTripCalendar, type TripCalendarEntry } from './tripCalendar'
 
 const event = (type: ScheduleEvent['type'], index = 0): ScheduleEvent => ({ key: `${type}-${index}`, type, date: '2026-10-19', time: '', title: `TEST-CONT ${type}`, fields: [{ label: '仓库', value: 'ONT8' }] })
-const render = (events: ScheduleEvent[] = []) => mount(AppointmentCalendarPanel, { props: { initialDate: '2026-10-19', events },
+const render = (events: ScheduleEvent[] = [], initialDate = '2026-10-19') => mount(AppointmentCalendarPanel, { props: { initialDate, events },
   global: { stubs: { ElButton: { template: '<button><slot /></button>' } } } })
+function reportedDispatch() {
+  const row: TripCalendarEntry = { sourceType: 'DISPATCH', dispatchNo: 'PC-CALENDAR-001', containerNumbers: ['TSTU1234567', 'TSTU7654321'], status: 'PLANNED', originWarehouseId: '1', originWarehouseCode: 'LAX', originWarehouseName: '洛杉矶仓', originCountryCode: 'US', originTimezone: 'America/Los_Angeles', originWarehouseStatus: 'ACTIVE', plannedDepartureAt: '2026-10-22T16:00:00Z', expectedDriverEndAt: null, departedAt: null, completedAt: null, stops: [{ name: '洛杉矶仓' }, { name: 'ONT8' }], incompleteReasons: [] }
+  return projectTripCalendar({ records: [row, row], unresolvedRecords: [] }, { from: '2026-10-01', to: '2026-11-01' }).events
+}
 describe('four-type appointment calendar', () => {
+  it.each(['TSTU1234567', 'tstu1234567', 'TSTU7654321', ' tstu7654321 '])('finds the one shared dispatch by associated container %s on its origin-local date, not the Beijing date', async keyword => {
+    const wrapper = render(reportedDispatch(), '2026-10-23')
+    const search = wrapper.get('[aria-label="搜索当前日历"]')
+    expect(search.attributes('placeholder')).toBe('柜号、排车单号、仓库')
+    await search.setValue(keyword)
+    expect(wrapper.findAll('.detail-event')).toHaveLength(0)
+    expect(wrapper.get('[aria-label="当天安排"]').text()).toContain('当天暂无安排')
+    expect(wrapper.get('[data-date="2026-10-23"]').findAll('.event-chip')).toHaveLength(0)
+    expect(wrapper.get('[data-date="2026-10-22"]').findAll('.event-chip')).toHaveLength(1)
+    await wrapper.get('[data-date="2026-10-22"]').trigger('click')
+    expect(wrapper.findAll('.detail-event')).toHaveLength(1)
+    expect(wrapper.get('.detail-event').text()).toContain('PC-CALENDAR-001')
+    expect(wrapper.get('.detail-event').text()).toContain('09:00')
+    expect(wrapper.get('.detail-event').text()).toContain('TSTU1234567、TSTU7654321')
+    expect(wrapper.get('.detail-event').text()).toContain('2026-10-22 09:00')
+    expect(wrapper.emitted('range')).toBeUndefined()
+    wrapper.unmount()
+  })
+  it('does not match an unrelated container and can find the same event by the dispatch number', async () => {
+    const wrapper = render(reportedDispatch(), '2026-10-22')
+    await wrapper.get('[aria-label="搜索当前日历"]').setValue('UNRELATED9999')
+    expect(wrapper.findAll('.detail-event')).toHaveLength(0)
+    expect(wrapper.findAll('.event-chip')).toHaveLength(0)
+    await wrapper.get('[aria-label="搜索当前日历"]').setValue('PC-CALENDAR-001')
+    expect(wrapper.findAll('.detail-event')).toHaveLength(1)
+    expect(wrapper.findAll('.event-chip')).toHaveLength(1)
+    expect(wrapper.emitted('range')).toBeUndefined()
+    wrapper.unmount()
+  })
   it('shows all four types by default with a calendar and persistent daily detail', () => {
     const wrapper = render(scheduleTypes.map(type => event(type)))
     expect(wrapper.findAll('[aria-label="安排类型"] input')).toHaveLength(4)

src/modules/appointment-calendar/AppointmentCalendarPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, ref } from 'vue'
 import { Plus } from '@lucide/vue'
@@ -37,8 +38,8 @@ function changeMode(next: CalendarMode) {
 }
 </script>
 <template>
-  <section class="appointment-calendar admin-density" :aria-busy="loading">
-    <div class="calendar-main">
+  <section class="appointment-calendar admin-density admin-workbench" :aria-busy="loading">
+    <div class="calendar-main workbench-panel is-flush">
       <header class="calendar-toolbar">
         <div class="calendar-label">
           <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 3v4M16 3v4M3 10h18M8 15h3M14 15h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
@@ -46,7 +47,7 @@ function changeMode(next: CalendarMode) {
         </div>
         <div class="calendar-controls">
           <el-button v-if="canCreate" type="primary" @click="emit('create')"><Plus :size="16" aria-hidden="true" />新增预约</el-button>
-          <div class="view-toggle" role="group" aria-label="预约视图"><button type="button" :aria-pressed="mode === 'month'" @click="changeMode('month')">月</button><button type="button" :aria-pressed="mode === 'week'" @click="changeMode('week')">周</button></div>
+          <div class="view-toggle workbench-tabs" role="group" aria-label="预约视图"><button type="button" :aria-pressed="mode === 'month'" @click="changeMode('month')">月</button><button type="button" :aria-pressed="mode === 'week'" @click="changeMode('week')">周</button></div>
           <button class="nav-button" type="button" :aria-label="mode === 'month' ? '上个月' : '上一周'" @click="select(moveCalendar(selectedDate, mode, -1))">‹</button>
           <strong class="calendar-period">{{ heading }}</strong>
           <button class="nav-button" type="button" :aria-label="mode === 'month' ? '下个月' : '下一周'" @click="select(moveCalendar(selectedDate, mode, 1))">›</button>
@@ -55,7 +56,7 @@ function changeMode(next: CalendarMode) {
       </header>
       <div class="calendar-options">
         <div class="calendar-layers" role="group" aria-label="安排类型"><label v-for="type in scheduleTypes" :key="type" class="legend" :class="type"><input v-model="types" type="checkbox" :value="type">{{ scheduleLabels[type] }}</label></div>
-        <label class="calendar-search"><span class="sr-only">搜索当前日历</span><input v-model="keyword" type="search" maxlength="128" placeholder="柜号、车次号、仓库" aria-label="搜索当前日历"></label>
+        <label class="calendar-search"><span class="sr-only">搜索当前日历</span><input class="workbench-input" v-model="keyword" type="search" maxlength="128" placeholder="柜号、排车单号、仓库" aria-label="搜索当前日历"></label>
         <button class="undated-button" type="button" :aria-pressed="undated" @click="undated = !undated">未定日期 {{ grouped.get('undated')?.length || 0 }}</button>
       </div>
       <div class="weekdays"><span v-for="day in ['周一', '周二', '周三', '周四', '周五', '周六', '周日']" :key="day">{{ day }}</span></div>
@@ -68,7 +69,7 @@ function changeMode(next: CalendarMode) {
         </button>
       </div>
     </div>
-    <aside class="calendar-detail" aria-label="当天安排">
+    <aside class="calendar-detail workbench-panel is-flush" aria-label="当天安排">
       <header><strong>{{ undated ? '未定日期' : selectedDate }}</strong><p v-if="loading">正在读取安排…</p><p v-else>{{ incomplete ? '当前已加载' : undated ? '共有' : '当天共有' }} <b>{{ selectedEvents.length }}</b> 项安排<span v-if="incomplete">（部分数据不可用）</span></p></header>
       <div class="detail-events" aria-live="polite">
         <p v-if="!selectedEvents.length && !loading" class="empty-day">{{ incomplete ? '已加载数据中没有安排，请先处理上方数据提示。' : undated ? '没有未定日期的安排' : '当天暂无安排' }}</p>
@@ -84,35 +85,35 @@ function changeMode(next: CalendarMode) {
 </template>
 <style scoped>
 .appointment-calendar { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--admin-space-5); color: var(--el-text-color-regular); }
-.calendar-main, .calendar-detail { background: var(--admin-surface); border: 1px solid #e4e9f2; border-radius: 10px; overflow: hidden; }
-.calendar-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-5); border-bottom: 1px solid #edf0f6; }
+.calendar-main, .calendar-detail {    overflow: hidden; }
+.calendar-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }
 .calendar-label, .calendar-controls { display: flex; align-items: center; gap: var(--admin-space-3); }
-.calendar-label > svg { color: #617ce9; }.calendar-label > strong { font-size: var(--admin-font-section); }
+.calendar-label > svg { color: var(--workbench-primary); }.calendar-label > strong { font-size: var(--admin-font-section); }
 .calendar-options, .calendar-layers { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
-.calendar-options { padding: var(--admin-space-3) var(--admin-space-5); border-bottom: 1px solid #edf0f6; }
+.calendar-options { padding: var(--admin-space-3) var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }
 .legend { display: inline-flex; align-items: center; gap: var(--admin-space-1); font-size: var(--admin-font-caption); cursor: pointer; color: var(--event-fg); }.legend input { accent-color: var(--event-fg); }
-.calendar-search { margin-left: auto; }.calendar-search input { box-sizing: border-box; width: 190px; min-height: var(--admin-control-height); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); padding: 0 var(--admin-space-3); font: inherit; }
-.view-toggle { display: flex; border: 1px solid #dbe3ee; border-radius: 6px; padding: 2px; background: #f7f9fc; }
-.view-toggle button, .nav-button, .undated-button { border: 0; border-radius: var(--admin-radius); background: transparent; cursor: pointer; color: var(--el-text-color-regular); min-width: var(--admin-control-height); min-height: var(--admin-control-height); font: inherit; }
-.view-toggle button[aria-pressed='true'], .undated-button[aria-pressed='true'] { background: #fff; color: #4167d8; font-weight: 600; }.nav-button { border: 1px solid #dbe3ee; font-size: 22px; }
+.calendar-search { margin-left: auto; }.calendar-search input {  width: 190px; }
+.view-toggle { display: flex; }
+.nav-button, .undated-button { border: 0; border-radius: var(--admin-radius); background: transparent; cursor: pointer; color: var(--el-text-color-regular); min-width: var(--admin-control-height); min-height: var(--admin-control-height); font: inherit; }
+.undated-button[aria-pressed='true'] { background: var(--workbench-surface); color: var(--workbench-primary); font-weight: 600; }.nav-button { border: 1px solid var(--workbench-border); font-size: 22px; }
 .calendar-period { font-size: var(--admin-font-section); white-space: nowrap; }
-.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.weekdays { text-align: center; color: #8491a5; background: #f8faff; padding: var(--admin-space-3); font-size: var(--admin-font-caption); }
-.calendar-grid { gap: var(--admin-space-2); padding: var(--admin-space-3); background: #fbfcff; }
-.calendar-day { display: flex; flex-direction: column; align-items: stretch; height: 146px; min-width: 0; padding: var(--admin-space-3); border: 1px solid #e5eaf2; border-radius: 8px; background: #fff; text-align: left; cursor: pointer; color: inherit; font: inherit; }
-.calendar-day.outside { background: #f7f8fa; color: #98a2b3; }.calendar-day:hover { border-color: #bac8ed; }.calendar-day.selected { border-color: #617ce9; background: #f5f7ff; }
-button:focus-visible, input:focus-visible { outline: 2px solid #4167d8; outline-offset: 2px; }
+.weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }.weekdays { text-align: center; color: var(--workbench-muted); background: var(--workbench-surface-soft); padding: var(--admin-space-3); font-size: var(--admin-font-caption); }
+.calendar-grid { gap: var(--admin-space-2); padding: var(--admin-space-3); background: var(--workbench-surface-soft); }
+.calendar-day { display: flex; flex-direction: column; align-items: stretch; height: 146px; min-width: 0; padding: var(--admin-space-3); border: 1px solid var(--workbench-border); border-radius: 8px; background: var(--workbench-surface); text-align: left; cursor: pointer; color: inherit; font: inherit; }
+.calendar-day.outside { background: var(--workbench-surface-soft); color: var(--workbench-muted); }.calendar-day:hover { border-color: var(--workbench-accent-border); }.calendar-day.selected { border-color: var(--workbench-primary); background: var(--workbench-accent-soft); }
+button:focus-visible, input:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
 .day-number { font-size: var(--admin-font-caption); font-weight: 600; }.day-events { display: flex; flex-direction: column; gap: var(--admin-space-1); margin-top: var(--admin-space-2); }
 .event-chip { display: block; padding: 2px 6px; line-height: 18px; border-radius: var(--admin-radius); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--admin-font-caption); }
 .arrival { --event-bg: #edf3ff; --event-fg: #3765d4; }.warehouse { --event-bg: #e8f8f1; --event-fg: #18845f; }.return { --event-bg: #fff4e3; --event-fg: #995a10; }.dispatch { --event-bg: #f2edfa; --event-fg: #725199; }
 .event-chip, .event-type { background: var(--event-bg); color: var(--event-fg); }.event-more, .empty-day { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
-.week-grid .calendar-day { height: 270px; }.calendar-detail > header { padding: var(--admin-space-5); border-bottom: 1px solid #edf0f6; }.calendar-detail > header > strong { font-size: var(--admin-font-title); }
-.calendar-detail header p { margin: var(--admin-space-2) 0 0; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.calendar-detail header b { color: #617ce9; }
+.week-grid .calendar-day { height: 270px; }.calendar-detail > header { padding: var(--admin-space-5); border-bottom: 1px solid var(--workbench-border); }.calendar-detail > header > strong { font-size: var(--admin-font-title); }
+.calendar-detail header p { margin: var(--admin-space-2) 0 0; font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.calendar-detail header b { color: var(--workbench-primary); }
 .detail-events { padding: var(--admin-space-5); max-height: calc(100dvh - 260px); overflow-y: auto; }
-.detail-event + .detail-event { border-top: 1px solid #e4e9f2; margin-top: var(--admin-space-5); padding-top: var(--admin-space-5); }
+.detail-event + .detail-event { border-top: 1px solid var(--workbench-border); margin-top: var(--admin-space-5); padding-top: var(--admin-space-5); }
 .event-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--admin-space-3); font-size: var(--admin-font-caption); }.event-type { padding: var(--admin-space-2) var(--admin-space-3); border-radius: var(--admin-radius); }
 .detail-event h3 { font-size: var(--admin-font-section); margin: var(--admin-space-3) 0; overflow-wrap: anywhere; }.event-subtitle { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
 .detail-event dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3) var(--admin-space-5); margin: var(--admin-space-3) 0; }.detail-event dt { font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }.detail-event dd { margin: var(--admin-space-1) 0 0; font-size: var(--admin-font-body); overflow-wrap: anywhere; }
-.detail-event footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3); border-top: 1px solid #edf0f6; padding-top: var(--admin-space-3); }.detail-event footer :deep(.el-button + .el-button) { margin-left: 0; }
+.detail-event footer { display: flex; justify-content: flex-end; gap: var(--admin-space-3); border-top: 1px solid var(--workbench-border); padding-top: var(--admin-space-3); }.detail-event footer :deep(.el-button + .el-button) { margin-left: 0; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 @media (max-width: 1100px) { .appointment-calendar { grid-template-columns: minmax(0, 1fr); } }
 </style>

src/modules/appointment-calendar/AppointmentCalendarView.test.ts

@@ -6,7 +6,7 @@ import { ElMessageBox } from 'element-plus'
 import { ApiResponseError } from '@/shared/api/http'
 import AppointmentCalendarView from './AppointmentCalendarView.vue'
 import { getCalendarSources, getWarehouseArrivals, saveWarehouseArrival, type WarehouseArrival } from './scheduleApi'
-import { listTripCalendar } from './tripCalendar'
+import { listTripCalendar, type TripCalendarEntry } from './tripCalendar'
 import type { ScheduleEvent } from './schedule'
 const routing = vi.hoisted(() => ({ query: { date: '2026-10-19' } as Record<string, string>, push: vi.fn(), replace: vi.fn(), denied: new Set<string>() }))
 vi.mock('vue-router', () => ({ useRoute: () => routing, useRouter: () => routing, onBeforeRouteLeave: vi.fn(), onBeforeRouteUpdate: vi.fn() }))
@@ -16,6 +16,9 @@ vi.mock('./tripCalendar', async original => ({ ...await original<typeof import('
 vi.mock('element-plus', () => ({ ElMessage: { success: vi.fn() }, ElMessageBox: { confirm: vi.fn() } }))
 const warehouse: WarehouseArrival = { sourceContainerBookingId: '1', containerNo: 'TEST-CONT', warehouseName: '美国仓', warehouseCode: 'US-W', plannedAt: null, actualAt: null, version: 0, planCount: 0, canEdit: true }
 const row: ScheduleEvent = { key: 'warehouse-1', type: 'warehouse', date: '2026-10-21', time: '', title: 'TEST-CONT 计划到仓', fields: [], warehouse, canEdit: true }
+function dispatchEntry(overrides: Partial<TripCalendarEntry> = {}): TripCalendarEntry {
+  return { sourceType: 'DISPATCH', dispatchNo: 'PC-CALENDAR-001', containerNumbers: ['TSTU1234567', 'TSTU7654321'], status: 'PLANNED', originWarehouseId: '1', originWarehouseCode: 'LAX', originWarehouseName: '洛杉矶仓', originCountryCode: 'US', originTimezone: 'America/Los_Angeles', originWarehouseStatus: 'ACTIVE', plannedDepartureAt: '2026-10-22T16:00:00Z', expectedDriverEndAt: null, departedAt: null, completedAt: null, stops: [{ name: '洛杉矶仓' }, { name: 'ONT8' }], incompleteReasons: [], ...overrides }
+}
 export function renderSchedule() {
   return mount(AppointmentCalendarView, { global: { stubs: {
     ElDatePicker: DatePickerStub, ElTimePicker: TimePickerStub,
@@ -147,7 +150,7 @@ describe('simplified appointment entry', () => {
   })
   it('opens the real dispatch detail with calendar context without requiring retired trip-list access', async () => {
     routing.denied.add('platform:fleet:trip:list')
-    vi.mocked(listTripCalendar).mockResolvedValueOnce({ records: [{ sourceType: 'DISPATCH', dispatchNo: 'DS/1', status: 'PLANNED', originWarehouseId: '1', originWarehouseCode: 'US-W', originWarehouseName: '美国仓', originCountryCode: 'US', originTimezone: 'America/Los_Angeles', originWarehouseStatus: 'ACTIVE', plannedDepartureAt: '2026-10-21T16:00:00Z', expectedDriverEndAt: null, departedAt: null, completedAt: null, stops: [], incompleteReasons: [] }], unresolvedRecords: [] })
+    vi.mocked(listTripCalendar).mockResolvedValueOnce({ records: [dispatchEntry({ dispatchNo: 'DS/1', containerNumbers: [], plannedDepartureAt: '2026-10-21T16:00:00Z' })], unresolvedRecords: [] })
     const wrapper = renderSchedule(); await flushPromises()
     const panel = wrapper.getComponent({ name: 'AppointmentCalendarPanel' })
     const event = panel.props('events').find((value: ScheduleEvent) => value.type === 'dispatch')
@@ -158,4 +161,25 @@ describe('simplified appointment entry', () => {
     expect(routing.push).toHaveBeenCalledWith({ path: '/overseas-warehouse/dispatches/DS%2F1', query: { appointmentReturn: '/appointment-calendar?date=2026-10-21&mode=week' } })
     wrapper.unmount()
   })
+  it('retains a complete dispatch with its container search fields while naming a different unresolved dispatch and its reason', async () => {
+    const good = dispatchEntry()
+    const unknown = dispatchEntry({ dispatchNo: 'PC-TIMEZONE-MISSING', containerNumbers: ['OTHER7654321'], originTimezone: null, incompleteReasons: ['ORIGIN_TIMEZONE_UNKNOWN'] })
+    vi.mocked(listTripCalendar).mockResolvedValueOnce({ records: [good, good, unknown], unresolvedRecords: [] })
+    const wrapper = renderSchedule(); await flushPromises()
+    const panel = wrapper.getComponent({ name: 'AppointmentCalendarPanel' })
+    const dispatches = (panel.props('events') as ScheduleEvent[]).filter(event => event.type === 'dispatch')
+    expect(dispatches).toHaveLength(1)
+    expect(dispatches[0]).toMatchObject({ key: 'dispatch-PC-CALENDAR-001', date: '2026-10-22', time: '09:00' })
+    expect(dispatches[0]!.fields).toContainEqual({ label: '关联柜号', value: 'TSTU1234567、TSTU7654321' })
+    expect(dispatches[0]!.fields).toContainEqual({ label: '计划出发（起运仓当地）', value: '2026-10-22 09:00' })
+    expect(panel.props('incomplete')).toBe(true)
+    const notice = wrapper.get('.data-notice').text()
+    expect(notice).toContain('1 条排车未能定位到日历日期')
+    expect(notice).toContain('PC-TIMEZONE-MISSING：起运仓时区待核实')
+    expect(notice).toContain('无法确定当地日期')
+    expect(notice).not.toContain('PC-CALENDAR-001')
+    expect(dispatches.some(event => event.key === 'dispatch-PC-TIMEZONE-MISSING')).toBe(false)
+    expect(listTripCalendar).toHaveBeenCalledTimes(1)
+    wrapper.unmount()
+  })
 })

src/modules/appointment-calendar/AppointmentCalendarView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import { computed, defineAsyncComponent, onActivated, onDeactivated, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
@@ -15,7 +16,7 @@ import AppointmentCalendarPanel from './AppointmentCalendarPanel.vue'
 import { calendarRange, dateKey, type CalendarMode } from './calendar'
 import { getCalendarSources, getWarehouseArrivals, saveWarehouseArrival, type CalendarSources, type ScheduleRange, type WarehouseArrival, type WarehouseArrivalChange } from './scheduleApi'
 import { projectContainerSchedule, type ScheduleEvent } from './schedule'
-import { listTripCalendar, projectTripCalendar } from './tripCalendar'
+import { listTripCalendar, projectTripCalendar, tripIssues } from './tripCalendar'
 import { rejectedCommand, type LeaveGuard } from './useWorkDraft'
 import type { PlanningSourceLookup } from './planningApi'
 import type { WorkAction } from './workApi'
@@ -70,7 +71,10 @@ async function load(next = range.value) {
         const result = projectTripCalendar(await listTripCalendar(next, signal), next)
         if (request !== generation) return
         trips.value = result.events
-        if (result.unresolved.length) notices.value.push(`${result.unresolved.length} 条排车资料不完整，请到排车列表核对。`)
+        if (result.unresolved.length) {
+          const details = result.unresolved.slice(0, 3).map(row => `${row.dispatchNo?.trim() || '排车单号缺失'}：${tripIssues(row) || '资料待核实'}`).join('；')
+          notices.value.push(`${result.unresolved.length} 条排车未能定位到日历日期（${details}${result.unresolved.length > 3 ? '；其余请到排车列表核对' : ''}）。`)
+        }
       } catch (cause) { fail('排车读取失败', cause) }
     })(),
   ])
@@ -128,7 +132,7 @@ async function canLeave() {
   if (saving.value || unknownResult.value) return false
   for (const guard of guards) if (!await guard()) return false
   if (editor.value && plannedAt.value !== originalAt.value) {
-    try { await ElMessageBox.confirm('计划到仓尚未保存，确定放弃本次修改？', '未保存修改', { type: 'warning', customClass: 'admin-density-confirm' }) }
+    try { await ElMessageBox.confirm('计划到仓尚未保存，确定放弃本次修改？', '未保存修改', { type: 'warning', customClass: 'admin-density-confirm admin-workbench is-dialog' }) }
     catch { return false }
   }
   return true
@@ -169,14 +173,14 @@ onDeactivated(() => { active.value = false; ++generation; controller?.abort() })
 onBeforeUnmount(() => { ++generation; controller?.abort() })
 </script>
 <template>
-  <AdminPage class="admin-density appointment-schedule" spacing="compact">
+  <AdminPage class="admin-density appointment-schedule admin-workbench" spacing="compact">
     <LoadErrorState v-for="error in errors" :key="error.title" :title="error.title" :message="error.details.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error.details" /></template></LoadErrorState>
     <p v-for="notice in notices" :key="notice" role="status" class="data-notice">{{ notice }}</p>
     <AppointmentCalendarPanel :events="events" :loading="loading" :incomplete="incomplete" :initial-date="selectedDate" :initial-mode="mode" :can-create="canCreate" @create="openCreate" @range="load" @select="select" @open="openSource" @edit="edit" />
-    <AppDialog v-if="active && creating" :model-value="true" title="新增FBA送仓预约" class="admin-density-dialog admin-density business-dialog" width="1080px" :show-footer="false" :before-close="closeCreate" :close-on-click-modal="true" append-to-body fullscreenable>
+    <AppDialog v-if="active && creating" :model-value="true" title="新增FBA送仓预约" class="admin-density-dialog admin-density business-dialog admin-workbench is-dialog" width="1080px" :show-footer="false" :before-close="closeCreate" :close-on-click-modal="true" append-to-body fullscreenable>
       <AppointmentCreatePanel :can-write="canCreate" :can-leave="canLeave" @created="load()" />
     </AppDialog>
-    <AppDialog v-if="active" :model-value="!!editor" title="调整计划到仓" class="admin-density-dialog" width="520px" fullscreenable :confirm-loading="saving" :confirm-disabled="!plannedAt || conflict" :before-close="closeEditor" :confirm-text="unknownResult ? '重试确认保存结果' : '保存'" @confirm="save">
+    <AppDialog v-if="active" :model-value="!!editor" title="调整计划到仓" class="admin-density-dialog admin-workbench is-dialog" width="520px" fullscreenable :confirm-loading="saving" :confirm-disabled="!plannedAt || conflict" :before-close="closeEditor" :confirm-text="unknownResult ? '重试确认保存结果' : '保存'" @confirm="save">
       <div v-if="editor" class="density-dialog-sections">
         <section class="density-dialog-section" data-tone="source" aria-label="到仓业务信息">
           <table class="density-table"><tbody><tr><th scope="row">业务</th><td>{{ editor.title }}</td></tr></tbody></table>
@@ -192,7 +196,7 @@ onBeforeUnmount(() => { ++generation; controller?.abort() })
         <p v-if="conflict" role="status">重试将重新读取当前资格和版本并保留输入，核对后再次点击保存。</p>
       </div>
     </AppDialog>
-    <AppDialog v-if="active && (workKey || sourceLink)" :model-value="true" title="原业务预约办理" class="admin-density-dialog admin-density business-dialog" width="min(1120px, calc(100vw - 48px))" fullscreenable append-to-body :show-footer="false" :before-close="closeBusiness" :close-on-click-modal="true">
+    <AppDialog v-if="active && (workKey || sourceLink)" :model-value="true" title="原业务预约办理" class="admin-density-dialog admin-density business-dialog admin-workbench is-dialog" width="min(1120px, calc(100vw - 48px))" fullscreenable append-to-body :show-footer="false" :before-close="closeBusiness" :close-on-click-modal="true">
       <el-button v-if="origins.length" link @click="backWork">返回原事项</el-button>
       <WorkDetailPanel v-if="workKey" :key="workKey" :item-key="workKey" :initial-action="initialAction" :can-leave="canLeave" @open="openWork" @external="external" @saved="load()" @updated="load()" @container="id => external(`/container-loading/overseas/${encodeURIComponent(id)}`)" />
       <SourceAppointmentPanel v-else-if="sourceLink" :key="JSON.stringify(sourceLink)" :source="sourceLink" :can-leave="canLeave" @updated="load()" />

src/modules/appointment-calendar/AppointmentConfirmationCargo.test.ts

@@ -0,0 +1,98 @@
+import { flushPromises, mount } from '@vue/test-utils'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { ElMessageBox } from 'element-plus'
+import AppointmentConfirmationCargo from './AppointmentConfirmationCargo.vue'
+import { resolvePlanningOrder, resolvePlanningSource, type ResolvedPlanningSource } from './planningApi'
+import { getCargoVerification, saveCargoVerification, type CargoVerificationContext } from './cargoVerificationApi'
+
+const access = vi.hoisted(() => ({ read: true }))
+vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can: () => access.read }) }))
+vi.mock('element-plus', () => ({ ElMessage: { warning: vi.fn(), success: vi.fn() }, ElMessageBox: { confirm: vi.fn() } }))
+vi.mock('./planningApi', () => ({ resolvePlanningOrder: vi.fn(), resolvePlanningSource: vi.fn() }))
+vi.mock('./cargoVerificationApi', () => ({ getCargoVerification: vi.fn(), saveCargoVerification: vi.fn() }))
+const source: ResolvedPlanningSource['source'] = { sourceKey: 'BOOKING:BK-TEST', customerId: 'customer-1', orderId: '9007199254740993', inboundCode: 'IN-TEST', bookingNo: 'BK-TEST', containerNo: null, originWarehouseId: 'warehouse-1', originWarehouseName: '测试仓', destinationKey: 'FBA:ONT8', destinationWarehouseCode: 'ONT8', packages: 20, sourceVersion: 'BOOKING:1/ORDER:1', canFollowup: true, blockReasons: [] }
+const resolved: ResolvedPlanningSource = { source, coverage: { status: 'PENDING', appointments: [], missingFields: ['FBA_SHIPMENT_REFERENCES'], changeReviewRequired: false } }
+const context: CargoVerificationContext = { source, verification: null, allocatedPackages: 20, unknownAllocationCount: 0, effectivePackages: 20, availablePackages: 0, sourceChanged: false, allowedActions: ['VERIFY_CARGO'], blockReasons: [] }
+const lookup = { orderId: source.orderId!, customerId: source.customerId, destinationKey: source.destinationKey }
+function render(active = true, disabled = false) {
+  return mount(AppointmentConfirmationCargo, { props: { sources: [lookup], active, disabled }, global: { stubs: {
+    ElButton: { props: ['disabled', 'nativeType'], template: '<button :disabled="disabled" :type="nativeType || \'button\'"><slot /></button>' },
+    InlineHelp: { template: '<span />' }, ApiErrorMeta: true,
+    LoadErrorState: { props: ['message'], template: '<div role="alert">{{ message }}<button @click="$emit(\'retry\')">重试核对</button></div>' },
+  } } })
+}
+beforeEach(() => {
+  vi.clearAllMocks(); access.read = true
+  vi.mocked(resolvePlanningOrder).mockResolvedValue(resolved)
+  vi.mocked(resolvePlanningSource).mockResolvedValue(resolved)
+  vi.mocked(getCargoVerification).mockResolvedValue(context)
+  vi.mocked(saveCargoVerification).mockResolvedValue({ version: 1, sourceVersion: source.sourceVersion, destinationKey: source.destinationKey, sourcePackages: 20, packageCount: 20, shipmentReferences: ['FBA-TEST'], remark: null, operatorName: '测试员', verifiedAt: '2026-10-21T03:00:00Z' })
+})
+it('names the missing material and supplements the canonical booking inside the appointment', async () => {
+  const wrapper = render(); await flushPromises()
+  expect(resolvePlanningOrder).toHaveBeenCalledWith(lookup)
+  expect(wrapper.text()).toContain('IN-TEST'); expect(wrapper.text()).toContain('缺少本票 FBA 货件号或追踪号')
+  expect(wrapper.text()).toContain('不能代替货件号'); expect(wrapper.text()).not.toContain(source.orderId)
+  await wrapper.findAll('button').find(button => button.text() === '在此补齐资料')!.trigger('click'); await flushPromises()
+  expect((wrapper.get('input[type=number]').element as HTMLInputElement).value).toBe('20')
+  await wrapper.get('form').trigger('submit'); await flushPromises()
+  expect(saveCargoVerification).not.toHaveBeenCalled()
+  await wrapper.get('textarea[aria-label="本票货件号"]').setValue('FBA-TEST')
+  vi.mocked(resolvePlanningOrder).mockResolvedValue({ ...resolved, coverage: { ...resolved.coverage, missingFields: [] } })
+  await wrapper.get('form').trigger('submit'); await flushPromises()
+  expect(saveCargoVerification).toHaveBeenCalledWith(source, expect.objectContaining({ packageCount: 20, shipmentReferences: ['FBA-TEST'], expectedSourceVersion: source.sourceVersion }))
+  expect(wrapper.text()).toContain('资料齐全，无需重复填写')
+  expect(wrapper.emitted('ready')?.at(-1)).toEqual([true]); wrapper.unmount()
+})
+it('leaves pending arrangements lazy and reads only when formal confirmation is selected', async () => {
+  const wrapper = render(false); await flushPromises()
+  expect(resolvePlanningOrder).not.toHaveBeenCalled()
+  await wrapper.setProps({ active: true }); await flushPromises()
+  expect(resolvePlanningOrder).toHaveBeenCalledTimes(1); wrapper.unmount()
+})
+it('does not ask for known materials to be entered again', async () => {
+  vi.mocked(resolvePlanningOrder).mockResolvedValue({ ...resolved, coverage: { ...resolved.coverage, missingFields: [] } })
+  const wrapper = render(); await flushPromises()
+  expect(wrapper.text()).toContain('资料齐全，无需重复填写')
+  expect(wrapper.findAll('button').some(button => button.text() === '在此补齐资料')).toBe(false)
+  expect(wrapper.emitted('ready')?.at(-1)).toEqual([true]); wrapper.unmount()
+})
+it('retains unsaved inputs when the appointment mode changes and blocks leaving an unknown save outcome', async () => {
+  const wrapper = render(); await flushPromises()
+  await wrapper.findAll('button').find(button => button.text() === '在此补齐资料')!.trigger('click'); await flushPromises()
+  await wrapper.get('textarea[aria-label="本票货件号"]').setValue('FBA-KEEP')
+  await wrapper.setProps({ active: false })
+  expect(wrapper.get('textarea[aria-label="本票货件号"]').isVisible()).toBe(true)
+  vi.mocked(ElMessageBox.confirm).mockRejectedValueOnce(new Error('keep editing'))
+  expect(await wrapper.vm.canLeave()).toBe(false)
+  vi.mocked(saveCargoVerification).mockRejectedValueOnce(new Error('connection lost'))
+  await wrapper.get('form').trigger('submit'); await flushPromises()
+  expect(await wrapper.vm.canLeave()).toBe(false)
+  const payload = vi.mocked(saveCargoVerification).mock.calls[0]![1]
+  await wrapper.get('form').trigger('submit'); await flushPromises()
+  expect(saveCargoVerification).toHaveBeenNthCalledWith(2, source, payload); wrapper.unmount()
+})
+it('reports unknown quantity and unmaterialized cargo without inventing values', async () => {
+  vi.mocked(resolvePlanningOrder).mockResolvedValue({ ...resolved, source: { ...source, orderId: null } })
+  vi.mocked(getCargoVerification).mockResolvedValue({ ...context, effectivePackages: null })
+  const wrapper = render(); await flushPromises()
+  expect(wrapper.text()).toContain('缺少本票箱数'); expect(wrapper.text()).toContain('原来货登记完成实收关联')
+  expect(wrapper.findAll('button').some(button => button.text() === '在此补齐资料')).toBe(false)
+  expect(wrapper.emitted('ready')?.at(-1)).toEqual([false]); wrapper.unmount()
+})
+it('keeps failed reads blocked, supports retry, and denies reads without permission', async () => {
+  vi.mocked(resolvePlanningOrder).mockRejectedValueOnce(new Error('network lost'))
+  const wrapper = render(); await flushPromises()
+  expect(wrapper.find('[role=alert]').exists()).toBe(true)
+  expect(wrapper.emitted('ready')?.at(-1)).toEqual([false])
+  await wrapper.get('[role=alert] button').trigger('click'); await flushPromises()
+  expect(resolvePlanningOrder).toHaveBeenCalledTimes(2); wrapper.unmount()
+  vi.clearAllMocks(); access.read = false
+  const denied = render(); await flushPromises()
+  expect(resolvePlanningOrder).not.toHaveBeenCalled(); expect(denied.text()).toContain('查看权限'); denied.unmount()
+})
+it('keeps the supplement action disabled for read-only appointment views', async () => {
+  const wrapper = render(true, true); await flushPromises()
+  expect(wrapper.findAll('button').find(button => button.text() === '在此补齐资料')!.attributes('disabled')).toBeDefined()
+  expect(saveCargoVerification).not.toHaveBeenCalled(); wrapper.unmount()
+})

src/modules/appointment-calendar/AppointmentConfirmationCargo.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+import LoadErrorState from '@/shared/components/LoadErrorState.vue'
+import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
+import CargoVerificationForm from './CargoVerificationForm.vue'
+import { getCargoVerification, type CargoVerificationContext } from './cargoVerificationApi'
+import { resolvePlanningOrder, resolvePlanningSource, type PlanningSourceLookup, type ResolvedPlanningSource } from './planningApi'
+import type { LeaveGuard } from './useWorkDraft'
+
+const props = defineProps<{ sources: PlanningSourceLookup[]; active: boolean; disabled?: boolean }>()
+const emit = defineEmits<{ ready: [value: boolean] }>()
+const access = useAccessPreviewStore()
+type Row = { resolved: ResolvedPlanningSource; cargo: CargoVerificationContext }
+const rows = ref<Row[]>([]), loading = ref(false), error = ref<ApiErrorDetails | null>(null)
+const editing = ref<string | null>(null), editor = ref<InstanceType<typeof CargoVerificationForm> | null>(null)
+const editingRow = computed(() => rows.value.find(row => key(row) === editing.value))
+let generation = 0
+const guards = new Set<LeaveGuard>()
+const register = inject<((guard: LeaveGuard) => () => void) | undefined>('appointment-work-leave-guard', undefined)
+provide('appointment-work-leave-guard', (guard: LeaveGuard) => { guards.add(guard); return () => guards.delete(guard) })
+async function canLeave() { for (const guard of guards) if (!await guard()) return false; return true }
+const unregister = register?.(canLeave)
+defineExpose({ canLeave })
+function key(row: Row) { return `${row.resolved.source.customerId}:${row.resolved.source.sourceKey}` }
+function issues(row: Row) {
+  const missing: string[] = []
+  if (!row.resolved.source.orderId) missing.push('尚未来货建单，请先在原来货登记完成实收关联')
+  if (row.cargo.effectivePackages == null || row.cargo.effectivePackages <= 0) missing.push('缺少本票箱数')
+  if (row.resolved.coverage.missingFields.includes('FBA_SHIPMENT_REFERENCES')) missing.push('缺少本票 FBA 货件号或追踪号（至少一种）')
+  if (row.cargo.sourceChanged) missing.push('原货物资料已变化，请重新核对箱数和货件号')
+  return missing
+}
+const ready = computed(() => rows.value.length === props.sources.length && rows.value.length > 0 && !loading.value && !error.value && !editing.value && rows.value.every(row => !issues(row).length))
+watch(ready, value => emit('ready', value), { immediate: true })
+async function load() {
+  const current = ++generation
+  loading.value = true; error.value = null
+  try {
+    if (!access.can('platform:appointment:list') || !access.can('platform:overseas-warehouse:last-mile-order:list')) {
+      error.value = { message: '无法读取本票核实资料，请联系有预约列表和尾程订单查看权限的同事补齐。' }; return
+    }
+    const result: Row[] = []
+    // 只核对本次明确选择的货物，并由服务端解析原 ORDER / BOOKING 身份。
+    for (const lookup of props.sources) {
+      const resolved = 'sourceKey' in lookup ? await resolvePlanningSource(lookup) : await resolvePlanningOrder(lookup)
+      if (current !== generation) return
+      const cargo = await getCargoVerification(resolved.source)
+      if (current !== generation) return
+      result.push({ resolved, cargo })
+    }
+    if (current === generation) rows.value = result
+  } catch (cause) { if (current === generation) error.value = getApiErrorDetails(cause, '货物缺项读取失败，请重试核对') }
+  finally { if (current === generation) loading.value = false }
+}
+async function closeEditor() {
+  if (editor.value && !await editor.value.canLeave()) return
+  editing.value = null
+}
+async function saved() { editing.value = null; await load() }
+watch(() => [props.active, JSON.stringify(props.sources)] as const, ([active]) => { if (active && !editing.value) void load() }, { immediate: true })
+onBeforeUnmount(() => { ++generation; unregister?.() })
+</script>
+<template>
+  <section v-show="active || editing" class="density-dialog-section" data-tone="source" aria-label="正式确认前的货物资料" :aria-busy="loading">
+    <h3 class="density-dialog-section__title">正式确认前：核对本次送仓货物</h3>
+    <el-button :disabled="loading || !!editing || disabled" :loading="loading" @click="load">重新核对资料</el-button>
+    <p>本票总箱数用于校验预约货量；FBA 货件号或追踪号用于识别送的是哪批货。外部约号只代表仓库的预约确认号，不能代替货件号。</p>
+    <LoadErrorState v-if="error" title="货物资料未核对" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
+    <table class="density-table"><thead><tr><th>操作</th><th>入仓码 / 外接登记号</th><th>本票总箱数</th><th>需要补充的资料</th></tr></thead><tbody>
+      <tr v-for="row in rows" :key="key(row)">
+        <td><el-button v-if="issues(row).length && row.resolved.source.orderId" :disabled="disabled || loading || !!editing || !row.cargo.allowedActions.includes('VERIFY_CARGO')" @click="editing = key(row)">在此补齐资料</el-button><span v-else>—</span></td>
+        <td>{{ row.resolved.source.inboundCode || row.resolved.source.bookingNo || '未提供业务编号' }}</td>
+        <td>{{ row.cargo.effectivePackages ?? '待补充' }}</td>
+        <td>{{ issues(row).join('；') || '资料齐全，无需重复填写' }}</td>
+      </tr>
+    </tbody></table>
+    <div v-if="editingRow">
+      <CargoVerificationForm ref="editor" :source="editingRow.resolved.source" :disabled="disabled" confirmation @saved="saved" />
+      <el-button :disabled="disabled" @click="closeEditor">收起补充资料</el-button>
+    </div>
+    <p v-if="!loading && !error && !ready" role="status">请先在上表补齐并保存资料，再点击“保存预约安排”。暂时拿不到资料，可先选择“先保存安排，等待对方确认”。</p>
+  </section>
+</template>

src/modules/appointment-calendar/AppointmentCreatePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
@@ -41,13 +42,13 @@ const columns: DataTableColumn[] = [
   { prop: 'originWarehouseName', label: '起运仓', minWidth: 140, slotName: 'origin' },
   { prop: 'destinationWarehouseCode', label: '目的FBA仓', width: 110 },
   { prop: 'packages', label: '箱数', width: 80 },
-  { key: 'eligibility', label: '预约资格', minWidth: 130, slotName: 'eligibility' },
+  { key: 'eligibility', label: '预约资格', minWidth: 260, singleLine: false, slotName: 'eligibility' },
 ]
 function key(row: PlanningCargo) { return JSON.stringify([row.customerId, row.sourceKey]) }
 function reason(row: PlanningCargo) {
   if (row.detained) return '货物暂扣中'
   if (row.mixedDestinations) return '多个目的地，需先核对'
-  if (row.hasActiveAppointment) return '已有有效预约'
+  if (row.hasActiveAppointment) return '已有预约安排，请到入库单编辑原预约'
   const anchor = selectedRows.value[0]
   if (anchor && (anchor.originWarehouseId !== row.originWarehouseId || anchor.destinationWarehouseCode !== row.destinationWarehouseCode)) return '请选择同起运仓、同目的仓'
   if (selectedRows.value.length >= 100 && !selected.value[key(row)]) return '每次最多选择100票'
@@ -144,7 +145,7 @@ onBeforeUnmount(() => { ++generation; ++selectionGeneration; ++destinationsReque
     </template>
     <template v-else>
       <section class="density-dialog-section" data-tone="source" aria-label="选择预约货物">
-      <DataTable :data="rows" :columns="columns" :page="page" :page-size="20" :page-sizes="[20]" :total="total" :loading="loading" :results-visible="!error" :row-key="key" max-height="" empty-text="暂无可预约货物" @update:page="load($event)">
+      <div class="workbench-table"><DataTable :data="rows" :columns="columns" :page="page" :page-size="20" :page-sizes="[20]" :total="total" :loading="loading" :results-visible="!error" :row-key="key" max-height="" empty-text="暂无可预约货物" @update:page="load($event)">
         <template #filters><QueryToolbar v-model="query" ariaLabel="新增预约货物查询" :fields="fields" :loading="loading || resolving" @search="search" /></template>
         <template #toolbar-actions><InlineHelp title="选货说明"><p>选择需要送往FBA的已有货物；同一起运仓、同一目的仓可合并多个客户的货物。跨页选择会保留。</p></InlineHelp><el-button :disabled="!selectedRows.length || resolving" @click="selected = {}; selectionError = null">清空选择</el-button><el-button type="primary" :disabled="!canWrite || !selectedRows.length || loading || !!error" :loading="resolving" @click="prepare">下一步：填写预约（{{ selectedRows.length }}）</el-button></template>
         <template #pagination-left>已选 {{ selectedRows.length }}/100 票</template>
@@ -153,7 +154,7 @@ onBeforeUnmount(() => { ++generation; ++selectionGeneration; ++destinationsReque
         <template #eligibility="{ row }">{{ reason(row as PlanningCargo) || '可选择' }}</template>
         <template #customer="{ row }"><LineClampText :content="row.customerName" /></template>
         <template #origin="{ row }"><LineClampText :content="row.originWarehouseName" /></template>
-      </DataTable>
+      </DataTable></div>
       </section>
     </template>
   </section>

src/modules/appointment-calendar/CargoVerificationForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -8,15 +10,16 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import { getCargoVerification, saveCargoVerification, type CargoVerificationContext, type CargoVerificationSource, type SaveCargoVerification } from './cargoVerificationApi'
 import { rejectedCommand, useWorkDraft } from './useWorkDraft'
-const props = defineProps<{ source: CargoVerificationSource }>()
+const props = defineProps<{ source: CargoVerificationSource; confirmation?: boolean; disabled?: boolean }>()
 const emit = defineEmits<{ saved: [] }>()
 const access = useAccessPreviewStore()
 const context = ref<CargoVerificationContext | null>(null), loading = ref(false), saving = ref(false)
 const error = ref<ApiErrorDetails | null>(null), saveError = ref<ApiErrorDetails | null>(null), pending = ref<SaveCargoVerification | null>(null)
 const form = reactive({ packages: '', references: '', remark: '' }), baseline = ref(JSON.stringify(form))
 const dirty = computed(() => JSON.stringify(form) !== baseline.value)
-useWorkDraft(dirty, computed(() => saving.value || !!pending.value))
-const canWrite = computed(() => access.can('platform:overseas-warehouse:inbound-order:fba-appointment') && context.value?.allowedActions.includes('VERIFY_CARGO'))
+const canLeave = useWorkDraft(dirty, computed(() => saving.value || !!pending.value))
+defineExpose({ canLeave })
+const canWrite = computed(() => !props.disabled && access.can('platform:overseas-warehouse:inbound-order:fba-appointment') && context.value?.allowedActions.includes('VERIFY_CARGO'))
 async function load(preserve = false) {
   loading.value = true; error.value = null
   if (!access.can('platform:appointment:list') || !access.can('platform:overseas-warehouse:last-mile-order:list')) { error.value = { message: '当前账号没有该货源的读取权限，请联系预约负责人处理。' }; loading.value = false; return }
@@ -24,7 +27,7 @@ async function load(preserve = false) {
     context.value = await getCargoVerification(props.source)
     if (!preserve) {
       const record = context.value.verification
-      Object.assign(form, { packages: record?.packageCount == null ? '' : String(record.packageCount), references: record?.shipmentReferences.join('\n') || '', remark: record?.remark || '' })
+      Object.assign(form, { packages: context.value.effectivePackages == null ? '' : String(context.value.effectivePackages), references: record?.shipmentReferences.join('\n') || '', remark: record?.remark || '' })
       baseline.value = JSON.stringify(form)
     }
   } catch (cause) { error.value = getApiErrorDetails(cause, '核实资料读取失败') }
@@ -37,6 +40,7 @@ async function save() {
     if (count !== null && (!Number.isSafeInteger(count) || count < 1)) { ElMessage.warning('核实箱数须为正整数，暂未核实可留空'); return }
     if (count !== null && (count < context.value.allocatedPackages || (context.value.source.packages != null && count > context.value.source.packages))) { ElMessage.warning('核实箱数不能低于已分配量，也不能超过已知原箱数'); return }
     const references = [...new Set(form.references.split(/\r?\n/).map(value => value.trim()).filter(Boolean))]
+    if (props.confirmation && (count === null || !references.length)) { ElMessage.warning('请填写本票箱数，以及至少一个 FBA 货件号或追踪号；外部约号不能代替货件号'); return }
     if (references.length > 100 || references.some(value => value.length > 128)) { ElMessage.warning('最多填写100条货件号，每条不超过128字'); return }
     pending.value = { destinationKey: context.value.source.destinationKey, expectedSourceVersion: context.value.source.sourceVersion, expectedVersion: Number(context.value.verification?.version || 0), packageCount: count, shipmentReferences: references, remark: form.remark.trim() || null, idempotencyKey: crypto.randomUUID() }
   }
@@ -54,19 +58,20 @@ onMounted(() => load())
 </script>
 <template>
   <section aria-label="货物核实资料">
-    <h3>核实货物资料<InlineHelp title="核实资料说明"><p>未约成也可保存；只用于预约核实，保留原订单资料。</p></InlineHelp></h3>
+    <h3>{{ confirmation ? '补齐本票送仓资料' : '核实货物资料' }}<InlineHelp title="核实资料说明"><p>未约成也可保存；只用于预约核实，保留原订单资料。</p></InlineHelp></h3>
+    <p v-if="confirmation">请向客户或货物负责人取得本票完整的 FBA 货件号或追踪号，每行一个；不要填写预约外部约号。下方保存只补充货物资料，完成后还需保存预约安排。</p>
     <LoadErrorState v-if="error" title="核实资料读取失败" :message="error.message" :loading="loading" @retry="load(true)"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <p v-if="loading">正在读取货物资料…</p>
     <template v-if="context">
-      <dl class="cargo-facts"><dt>原票</dt><dd>{{ context.source.inboundCode || context.source.bookingNo || '—' }}</dd><dt>目的仓</dt><dd>{{ context.source.destinationWarehouseCode || '—' }}</dd><dt>原箱数</dt><dd>{{ context.source.packages ?? '待核实' }}</dd><dt>已分配</dt><dd>{{ context.allocatedPackages }} 箱<span v-if="context.unknownAllocationCount">；另有 {{ context.unknownAllocationCount }} 项数量未知</span></dd><dt>可分配</dt><dd>{{ context.availablePackages ?? '待核实' }}</dd></dl>
+      <dl class="cargo-facts"><dt>原票</dt><dd>{{ context.source.inboundCode || context.source.bookingNo || '—' }}</dd><dt>目的仓</dt><dd>{{ context.source.destinationWarehouseCode || '—' }}</dd><dt>原箱数</dt><dd>{{ context.source.packages ?? '待核实' }}</dd><template v-if="!confirmation"><dt>已分配</dt><dd>{{ context.allocatedPackages }} 箱<span v-if="context.unknownAllocationCount">；另有 {{ context.unknownAllocationCount }} 项数量未知</span></dd><dt>可分配</dt><dd>{{ context.availablePackages ?? '待核实' }}</dd></template></dl>
       <p v-if="context.sourceChanged" role="alert">原货源已变化，请核对当前原票和已分配量后重新保存。</p><p v-for="reason in context.blockReasons" :key="reason" role="status">{{ reason }}</p>
-      <form class="density-form work-form" @submit.prevent="save"><fieldset :disabled="!canWrite || loading || !!error || saving || !!pending">
-        <label>核实箱数（可暂不填）<input v-model="form.packages" type="number" min="1" step="1" aria-label="核实箱数"></label>
-        <label>本票货件号 / 追踪号（每行一个）<textarea v-model="form.references" rows="4" aria-label="本票货件号" /></label>
-        <label>核实说明<textarea v-model="form.remark" maxlength="1000" rows="2" /></label>
+      <form class="density-form work-form appointment-native-form" @submit.prevent="save"><fieldset :disabled="!canWrite || loading || !!error || saving || !!pending">
+        <label>{{ confirmation ? '本票核实总箱数（必填）' : '核实箱数（可暂不填）' }}<input v-model="form.packages" type="number" min="1" step="1" aria-label="核实箱数" class="workbench-input"></label>
+        <label>本票货件号 / 追踪号（每行一个）<textarea v-model="form.references" rows="4" aria-label="本票货件号" class="workbench-input" /></label>
+        <label>核实说明<textarea v-model="form.remark" maxlength="1000" rows="2" class="workbench-input" /></label>
       </fieldset><p v-if="!canWrite">当前仅可查看核实资料；需核实权限及有效货源资格才能保存。</p>
       <LoadErrorState v-if="saveError" title="核实资料未保存" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
-      <el-button type="primary" native-type="submit" :loading="saving" :disabled="!canWrite || loading || !!error">{{ pending ? '重试本次保存' : '保存核实资料' }}</el-button></form>
+      <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :loading="saving" :disabled="!canWrite || loading || !!error">{{ pending ? '重试本次保存' : '保存核实资料' }}</el-button></div></form>
     </template>
   </section>
 </template>

src/modules/appointment-calendar/PROTOTYPE_MATRIX.md

@@ -271,3 +271,15 @@ V13 日历布局：按已确认定高要求，月日格固定 146px，周日格
 视觉目标：1920×1080、100%缩放，待人工截图确认。单元测试与类型检查单独报告，不代表真实接口或页面验收通过。原业务跳转缺少的业务号/客户范围在协作交接中列明，不由前端补造；工作 Slot 与原预约编辑均保留完整跨日时间。原业务页面返回入口只接受预约工作页，并保留原事项、前置事项、筛选及页码。
 
 2026-10-20 用户追加整页白底修正：整页主要列表外层workbench-table及整页详情workbench-panel显式增加is-page-surface，由公共样式移除最外圈border/radius/shadow。内部指标、图表、并列卡片、子表格线、弹框和日历左右独立面板保留；本批不改padding、脚本或承载。预约页面没有额外整页面板，当前双面板结构保持，不给左右面板增加该modifier。
+
+
+### 2026-10-21 弹框表单可用性修复
+
+依据：本轮弹框可用性反馈；沿用本文件原有逐操作承载，不调整业务字段与提交逻辑。
+
+| 页面/文件 | 操作与承载 | 结构问题与修复 | 验收 |
+|---|---|---|---|
+| WorkCommandForm、AppointmentBatchForm、WorkReceivingPanel、CargoVerificationForm | 预约工作弹框中的命令、批次、收货范围与货物核实 | 原生控件未命中 Element 表单样式；显式复用 workbench-input，并通过 appointmentNativeForms.css 补齐标签/控件排列、fieldset 间距及底部提交区 | 定向回归通过；待人工1920×1080、100%截图确认 |
+| WorkAppointmentForm、WorkDispatchForm | 预约取消、按预约批次排车 | 取消原因与计划托位原生控件接入同一局部表单样式；复选框与既有候选分页保留 | 定向回归通过；待人工截图确认 |
+
+本次6个Vue仅变更样式导入、class与操作区容器；与修改前快照逐项核对，业务脚本、v-model、事件、权限/禁用条件均一致。类型检查、全量回归与构建由总控统一收口。

src/modules/appointment-calendar/ReceivingScope.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import type { ReceivingMember, ReceivingTransport } from './receivingApi'
 defineProps<{ members: ReceivingMember[]; transport?: ReceivingTransport }>()
 </script>
@@ -12,4 +13,4 @@ defineProps<{ members: ReceivingMember[]; transport?: ReceivingTransport }>()
     <template v-if="transport"><p v-for="(vehicle, index) in transport.vehicles" :key="index">车辆：{{ vehicle.tripNo || '车次未关联' }} · 排车单 {{ vehicle.dispatchNo || '未关联' }} · {{ vehicle.packageCount }} 箱</p><p v-for="reason in transport.blockReasons" :key="reason" role="status">{{ reason }}</p><p v-if="!transport.vehicles.length">当前未关联车辆。</p></template>
   </div>
 </template>
-<style scoped>.receiving-member { border-bottom: 1px solid var(--cc-border); padding-block: var(--admin-space-3); }</style>
+<style scoped>.receiving-member { border-bottom: 1px solid var(--workbench-border); padding-block: var(--admin-space-3); }</style>

src/modules/appointment-calendar/SourceAppointmentPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref } from 'vue'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -38,4 +39,4 @@ onMounted(load)
     </template>
   </section>
 </template>
-<style scoped>.source-appointment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-3); padding-block: var(--admin-space-3); border-bottom: 1px solid var(--cc-border); }</style>
+<style scoped>.source-appointment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-3); padding-block: var(--admin-space-3); border-bottom: 1px solid var(--workbench-border); }</style>

src/modules/appointment-calendar/TripAppointmentPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, onBeforeUnmount, provide, ref, watch } from 'vue'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -90,7 +91,7 @@ onBeforeUnmount(() => { ++generation })
       </template>
     </article>
     <p v-if="readable && !loading && !cards.length">当前没有可读取的预约批次引用。</p>
-    <AppDialog :model-value="!!selected" title="客户预约与后送安排" width="min(1120px, calc(100vw - 48px))" class="admin-density-dialog admin-density" fullscreenable append-to-body :show-footer="false" :before-close="close" :close-on-click-modal="true" :close-on-press-escape="true" destroy-on-close>
+    <AppDialog :model-value="!!selected" title="客户预约与后送安排" width="min(1120px, calc(100vw - 48px))" class="admin-density-dialog admin-density admin-workbench is-dialog" fullscreenable append-to-body :show-footer="false" :before-close="close" :close-on-click-modal="true" :close-on-press-escape="true" destroy-on-close>
       <template v-if="selected">
         <WorkReceivingPanel v-if="mode === 'receiving'" :key="`${selected.batchKey}:${selected.customerId}`" :batch-key="selected.batchKey" :initial-customer-id="selected.customerId" :can-write="canWrite" @updated="updated" @appointment="openAppointment" @batch="key => open(key, selected!.customerId, 'batch')" @external="path => emit('external', path)" />
         <AppointmentBatchForm v-else-if="mode === 'batch'" :key="selected.batchKey" :batch-key="selected.batchKey" @updated="updated" @appointment="openAppointment" />
@@ -100,4 +101,4 @@ onBeforeUnmount(() => { ++generation })
     </AppDialog>
   </section>
 </template>
-<style scoped>.trip-customer-card { padding-block: var(--admin-space-4); border-bottom: 1px solid var(--cc-border); }</style>
+<style scoped>.trip-customer-card { padding-block: var(--admin-space-4); border-bottom: 1px solid var(--workbench-border); }</style>

src/modules/appointment-calendar/WorkAppointmentForm.test.ts

@@ -9,7 +9,7 @@ vi.mock('element-plus', () => ({ ElMessage: { warning: vi.fn(), success: vi.fn()
 vi.mock('@/modules/overseas-warehouse', async original => ({ ...await original<typeof import('@/modules/overseas-warehouse')>(), getFbaAppointment: vi.fn(), updateFbaAppointment: vi.fn() }))
 vi.mock('./api', async original => ({ ...await original<typeof import('./api')>(), deleteAppointment: vi.fn() }))
 const detail: FbaAppointmentDto = { id: '1', appointmentNo: 'AP-001', batchKey: 'FBA_APPOINTMENT:1', version: 3, originWarehouseId: 'warehouse-1', fbaWarehouseCode: 'ONT8', selectedCount: 1, items: [], appointmentStatus: 'SUCCESS', confirmationNo: 'EXT-001', appointmentAt: '2026-10-15T23:30:00', appointmentEndAt: '2026-10-16T01:00:00', appointmentStartUtc: '2026-10-16T06:30:00Z', appointmentEndUtc: '2026-10-16T08:00:00Z', timezone: 'America/Los_Angeles' }
-function render(cancel = false) { return mount(WorkAppointmentForm, { props: { appointmentNo: 'AP-001', cancel, canWrite: true }, global: { stubs: { ElButton: { props: ['disabled'], template: '<button :disabled="disabled"><slot /></button>' }, FbaAppointmentFields: { name: 'FbaAppointmentFields', props: ['model', 'disabled'], template: '<div />' }, LoadErrorState: { props: ['message'], template: '<section role="alert">{{ message }}<button @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true } } }) }
+function render(cancel = false) { return mount(WorkAppointmentForm, { props: { appointmentNo: 'AP-001', cancel, canWrite: true }, global: { stubs: { ElButton: { props: ['disabled'], template: '<button :disabled="disabled"><slot /></button>' }, FbaAppointmentFields: { name: 'FbaAppointmentFields', mounted() { this.$emit('confirmationReady', true) }, props: ['model', 'disabled'], template: '<div />' }, LoadErrorState: { props: ['message'], template: '<section role="alert">{{ message }}<button @click="$emit(\'retry\')">重试读取</button></section>' }, ApiErrorMeta: true } } }) }
 beforeEach(() => { vi.clearAllMocks(); vi.mocked(getFbaAppointment).mockResolvedValue(detail); vi.mocked(updateFbaAppointment).mockResolvedValue(detail) })
 it('initializes confirmed facts after an initial read failure instead of showing an empty editable plan', async () => {
   vi.mocked(getFbaAppointment).mockRejectedValueOnce(new Error('来源暂不可用'))

src/modules/appointment-calendar/WorkAppointmentForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -11,6 +13,8 @@ import { rejectedCommand, useWorkDraft } from './useWorkDraft'
 const props = defineProps<{ appointmentNo: string; cancel: boolean; canWrite: boolean }>()
 const emit = defineEmits<{ saved: [appointment: FbaAppointmentDto]; batch: [key: string]; receiving: [key: string] }>()
 const access = useAccessPreviewStore(), detail = ref<FbaAppointmentDto | null>(null)
+const confirmationReady = ref(false)
+const appointmentFields = ref<InstanceType<typeof FbaAppointmentFields> | null>(null)
 const form = reactive(createAppointmentForm()), reason = ref(''), baseline = ref(JSON.stringify(appointmentPayload(form)))
 const loading = ref(false), saving = ref(false), error = ref<ApiErrorDetails | null>(null), saveError = ref<ApiErrorDetails | null>(null)
 let initialized = false
@@ -42,6 +46,9 @@ async function save() {
       pending.value = { kind: 'cancel', version: detail.value.version, reason: reason.value.trim() }
     } else {
       const invalid = appointmentFormError(form); if (invalid) { ElMessage.warning(invalid); return }
+      if (form.appointmentStatus === 'SUCCESS' && !confirmationReady.value) { ElMessage.warning('请先在“正式确认前”区域补齐并保存每票货物资料'); return }
+      if (appointmentFields.value?.canLeave && !await appointmentFields.value.canLeave()) return
+      if (saving.value || !writable.value) return
       pending.value = { kind: 'update', payload: { details: appointmentPayload(form), version: detail.value.version, idempotencyKey: crypto.randomUUID() } }
     }
   }
@@ -57,7 +64,7 @@ async function save() {
 onMounted(() => load())
 </script>
 <template>
-  <section class="work-form" aria-label="预约安排">
+  <section class="work-form appointment-native-form" aria-label="预约安排">
     <h3>{{ cancel ? '取消本次预约' : rebooking ? '沿原批次重新预约' : '登记预约安排' }}</h3>
     <LoadErrorState v-if="error" title="预约详情读取失败" :message="error.message" :loading="loading" @retry="load(true)"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
     <p v-if="loading">正在读取原预约…</p>
@@ -67,8 +74,8 @@ onMounted(() => load())
       <p v-if="replaced">原预约已被替代，保留历史只读。当前批次：{{ detail.replacementAppointmentNos?.join('、') || '—' }}。{{ detail.repartitionReason }}</p>
       <el-button v-if="detail.batchKey && !saving && !pending" @click="emit('batch', detail.batchKey)">{{ replaced ? '查看替代批次' : '分批 / 合并与货物来源' }}</el-button>
       <el-button v-if="detail.batchKey && !replaced && !saving && !pending" :disabled="loading || !!error" @click="emit('receiving', detail.batchKey)">客户调整 / 共同预约范围</el-button>
-      <template v-if="cancel"><p>取消原预约并保留历史；工作需求与后续跟进仍保留。已有运输安排须满足原业务取消条件。</p><label>取消原因<textarea v-model="reason" :disabled="!writable || saving || !!pending" maxlength="1000" /></label></template>
-      <FbaAppointmentFields v-else :model="form" :appointment-no="detail.appointmentNo" :timezone="detail.timezone" :disabled="!writable || loading || !!error || saving || !!pending" />
+      <template v-if="cancel"><p>取消原预约并保留历史；工作需求与后续跟进仍保留。已有运输安排须满足原业务取消条件。</p><label>取消原因<textarea v-model="reason" :disabled="!writable || saving || !!pending" maxlength="1000" class="workbench-input" /></label></template>
+      <FbaAppointmentFields v-else ref="appointmentFields" :sources="detail.items.map(item => ({ sourceKey: item.sourceKey, customerId: item.customerId, destinationKey: item.destinationKey || `FBA:${item.fbaWarehouseCode}` }))" @confirmation-ready="confirmationReady = $event" :model="form" :appointment-no="detail.appointmentNo" :timezone="detail.timezone" :disabled="!writable || loading || !!error || saving || !!pending" />
       <p v-if="!writable">当前预约仅可查看。</p>
       <LoadErrorState v-if="saveError" title="预约未保存" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
       <p v-if="!cancel && !rebooking && writable && !changed && !pending">预约内容未修改，无需重复保存。</p>

src/modules/appointment-calendar/WorkCommandForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -86,20 +88,20 @@ async function save() {
 }
 </script>
 <template>
-  <form class="density-form work-form" @submit.prevent="save">
+  <form class="density-form work-form appointment-native-form" @submit.prevent="save">
     <h3>{{ action.label }}<InlineHelp v-if="command === 'SAVE_FOLLOWUP'" title="跟进日期说明"><p>跟进日期不代替作业日期；未完成事项仍保留在待办中。</p></InlineHelp><InlineHelp v-if="command === 'RESOLVE_REVIEW'" title="核对结果说明"><p>原安排需要改期时，请先处理原安排，再记录核对结果。</p></InlineHelp></h3>
     <p v-if="!allowed">当前仅可查看。此操作需要有效的服务端资格和对应操作权限。</p>
     <p v-if="missingContext" role="alert">{{ missingContext }}</p>
     <fieldset :disabled="!allowed || refreshing || saving || !!pending">
-      <template v-if="command === 'CONFIRM_ROUTE'"><label>运输方式<select v-model="form.flow"><option value="TRANSFER">先入海外仓，再分批送仓</option><option value="DIRECT">整柜直接送目的仓</option></select></label><label>路线说明<textarea v-model="form.reason" maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" /></label><label>下次跟进日期（可留空）<el-date-picker v-model="form.followupDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label></template>
-      <template v-else-if="command === 'RESOLVE_REVIEW'"><p v-for="reason in detail.review?.reasons" :key="reason">{{ reason }}</p><label>本次核对结果<textarea v-model="form.note" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<el-date-picker v-model="form.date" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><div class="time-fields"><label>开始时段（可留空）<el-time-picker v-model="form.startTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label><label>结束日期（可留空）<el-date-picker v-model="form.endDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>结束时段（可留空）<el-time-picker v-model="form.endTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'HANDOFF_RETURN'"><p>转交保留原预约和责任记录；接手方确认前持续跟进。</p><label>接手方类型<select v-model="form.recipientKind" @change="changeRecipient"><option value="EXTERNAL">外部车队 / 联系人</option><option value="SUPPLIER">已登记海外车队</option><option value="USER">当前关联负责人</option></select></label><label v-if="form.recipientKind === 'EXTERNAL'">接手方名称<input v-model="form.recipientName" required maxlength="200"></label><template v-else-if="form.recipientKind === 'SUPPLIER'"><label>查找海外车队<input v-model="supplierKeyword" maxlength="80" @keydown.enter.prevent="searchSuppliers"></label><el-button :loading="supplierLoading" @click="searchSuppliers">查询车队</el-button><LoadErrorState v-if="supplierError" title="还空车队不可用" :message="supplierError.message" @retry="searchSuppliers" /><label>接手车队<select v-model="form.recipientId" required :disabled="supplierLoading || !!supplierError"><option value="" disabled>请选择已登记海外车队</option><option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option></select></label><p v-if="supplierTotal > suppliers.length">请输入更完整名称缩小查询范围。</p></template><label v-else>接手负责人<select v-model="form.recipientId" required><option value="" disabled>请选择</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>转交原因<textarea v-model="form.reason" required maxlength="1000" /></label></template>
-      <template v-else-if="command === 'ACCEPT_RETURN'"><p>原责任方：{{ detail.returnHandoff?.from.name || '—' }} → 接手方：{{ detail.returnHandoff?.to.name || '—' }}</p><label>接手反馈依据<textarea v-model="form.note" :required="detail.returnHandoff?.to.kind !== 'USER'" maxlength="1000" /></label><p>确认接手只记录责任，实际还空仍按原业务操作。</p></template>
+      <template v-if="command === 'CONFIRM_ROUTE'"><label>运输方式<select v-model="form.flow" class="workbench-input"><option value="TRANSFER">先入海外仓，再分批送仓</option><option value="DIRECT">整柜直接送目的仓</option></select></label><label>路线说明<textarea v-model="form.reason" maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'SAVE_FOLLOWUP'"><label>跟进负责人<select v-model="form.ownerId" required class="workbench-input"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>本次回复<textarea v-model="form.note" required maxlength="1000" class="workbench-input" /></label><label>下次跟进日期（可留空）<el-date-picker v-model="form.followupDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label></template>
+      <template v-else-if="command === 'RESOLVE_REVIEW'"><p v-for="reason in detail.review?.reasons" :key="reason">{{ reason }}</p><label>本次核对结果<textarea v-model="form.note" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'SAVE_REQUIREMENT'"><label>目标日期（可暂不填）<el-date-picker v-model="form.date" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><div class="time-fields"><label>开始时段（可留空）<el-time-picker v-model="form.startTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label><label>结束日期（可留空）<el-date-picker v-model="form.endDate" type="date" :disabled="!allowed || refreshing || saving || !!pending" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>结束时段（可留空）<el-time-picker v-model="form.endTime" :disabled="!allowed || refreshing || saving || !!pending" format="HH:mm" value-format="HH:mm" clearable /></label></div><p>{{ item.timezone || '地点时区待核实' }}</p><label v-if="item.type === 'DELIVERY'"><input v-model="form.bookingRequired" type="checkbox">需要收货方预约</label><label>收货要求<textarea v-model="form.receivingRequirements" :required="!form.bookingRequired" maxlength="1000" class="workbench-input" /></label><label>处理说明<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'HANDOFF_RETURN'"><p>转交保留原预约和责任记录；接手方确认前持续跟进。</p><label>接手方类型<select v-model="form.recipientKind" @change="changeRecipient" class="workbench-input"><option value="EXTERNAL">外部车队 / 联系人</option><option value="SUPPLIER">已登记海外车队</option><option value="USER">当前关联负责人</option></select></label><label v-if="form.recipientKind === 'EXTERNAL'">接手方名称<input v-model="form.recipientName" required maxlength="200" class="workbench-input"></label><template v-else-if="form.recipientKind === 'SUPPLIER'"><label>查找海外车队<input v-model="supplierKeyword" maxlength="80" @keydown.enter.prevent="searchSuppliers" class="workbench-input"></label><el-button :loading="supplierLoading" @click="searchSuppliers">查询车队</el-button><LoadErrorState v-if="supplierError" title="还空车队不可用" :message="supplierError.message" @retry="searchSuppliers" /><label>接手车队<select v-model="form.recipientId" required :disabled="supplierLoading || !!supplierError" class="workbench-input"><option value="" disabled>请选择已登记海外车队</option><option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">{{ supplier.name }}</option></select></label><p v-if="supplierTotal > suppliers.length">请输入更完整名称缩小查询范围。</p></template><label v-else>接手负责人<select v-model="form.recipientId" required class="workbench-input"><option value="" disabled>请选择</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>转交原因<textarea v-model="form.reason" required maxlength="1000" class="workbench-input" /></label></template>
+      <template v-else-if="command === 'ACCEPT_RETURN'"><p>原责任方：{{ detail.returnHandoff?.from.name || '—' }} → 接手方：{{ detail.returnHandoff?.to.name || '—' }}</p><label>接手反馈依据<textarea v-model="form.note" :required="detail.returnHandoff?.to.kind !== 'USER'" maxlength="1000" class="workbench-input" /></label><p>确认接手只记录责任，实际还空仍按原业务操作。</p></template>
     </fieldset>
     <LoadErrorState v-if="error" title="工作操作未保存" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
-    <el-button type="primary" native-type="submit" :disabled="!allowed || refreshing || !!missingContext" :loading="saving">{{ pending ? '重试本次保存' : command === 'CONFIRM_ROUTE' ? '确认路线，继续本柜工作' : '保存并更新待办' }}</el-button>
+    <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :disabled="!allowed || refreshing || !!missingContext" :loading="saving">{{ pending ? '重试本次保存' : command === 'CONFIRM_ROUTE' ? '确认路线，继续本柜工作' : '保存并更新待办' }}</el-button></div>
   </form>
 </template>
 <style scoped>.time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3); }</style>

src/modules/appointment-calendar/WorkCreateAppointmentForm.vue

@@ -13,6 +13,8 @@ import { workReason } from './workPresentation'
 const props = defineProps<{ sources: SourceReference[]; canWrite: boolean }>()
 const emit = defineEmits<{ saved: [appointment: FbaAppointmentDto] }>()
 const access = useAccessPreviewStore(), preview = ref<PlanningBatchPreview | null>(null)
+const confirmationReady = ref(false)
+const appointmentFields = ref<InstanceType<typeof FbaAppointmentFields> | null>(null)
 const form = reactive(createAppointmentForm()), baseline = ref(JSON.stringify(form))
 const loading = ref(false), saving = ref(false), error = ref<ApiErrorDetails | null>(null), saveError = ref<ApiErrorDetails | null>(null)
 const pending = ref<SourceAppointmentPayload | null>(null)
@@ -29,6 +31,9 @@ async function save() {
   if (!writable.value || loading.value || saving.value || error.value || !preview.value) return
   if (!pending.value) {
     const invalid = appointmentFormError(form); if (invalid) { ElMessage.warning(invalid); return }
+    if (form.appointmentStatus === 'SUCCESS' && !confirmationReady.value) { ElMessage.warning('请先在“正式确认前”区域补齐并保存每票货物资料'); return }
+    if (appointmentFields.value?.canLeave && !await appointmentFields.value.canLeave()) return
+    if (saving.value || !writable.value) return
     pending.value = { originWarehouseId: preview.value.group.originWarehouseId, fbaWarehouseCode: preview.value.destinationWarehouseCode, sources: preview.value.sources.map(source => ({ sourceKey: source.sourceKey, customerId: source.customerId, destinationKey: source.destinationKey })), details: appointmentPayload(form), idempotencyKey: crypto.randomUUID() }
   }
   saving.value = true; saveError.value = null
@@ -58,7 +63,7 @@ onMounted(load)
         <p v-for="field in preview.missingFields" :key="field" role="status" class="density-dialog-note">{{ workReason(field) }}</p>
         <p v-if="preview.group.readinessIncomplete" role="status" class="density-dialog-note">货物备妥窗口待核实。</p>
       </section>
-      <FbaAppointmentFields continuous :model="form" :timezone="preview.destinationTimezone" :disabled="!writable || loading || saving || !!pending" />
+      <FbaAppointmentFields continuous ref="appointmentFields" :sources="sources.map(source => ({ ...source, destinationKey: source.destinationKey || undefined }))" @confirmation-ready="confirmationReady = $event" :model="form" :timezone="preview.destinationTimezone" :disabled="!writable || loading || saving || !!pending" />
       <LoadErrorState v-if="saveError" title="预约尚未创建" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
       <div class="density-actions density-actions--footer"><el-button type="primary" :disabled="!writable || loading" :loading="saving" @click="save">{{ pending ? '重试本次创建' : '保存预约安排' }}</el-button></div>
     </template>

src/modules/appointment-calendar/WorkDetailPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import LoadErrorState from '@/shared/components/LoadErrorState.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -180,19 +181,19 @@ onBeforeUnmount(() => { ++request; controller?.abort() })
 .container-links, .more-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
 .container-links { margin-top: var(--admin-space-3); }
 .container-links > span { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
-.attention-panel { margin-top: var(--admin-space-5); padding: var(--admin-space-3) var(--admin-space-5); border-left: 3px solid var(--el-color-warning); background: var(--el-color-warning-light-9); color: var(--el-color-warning-dark-2); }
+.attention-panel { margin-top: var(--admin-space-5); padding: var(--admin-space-3) var(--admin-space-5); border: 1px solid var(--el-color-warning-light-7); border-radius: var(--admin-dialog-section-radius); background: var(--el-color-warning-light-9); color: var(--el-color-warning-dark-2); }
 .attention-panel h4, .current-work > h4 { margin: 0 0 var(--admin-space-1); font-size: var(--admin-font-section); }
 .attention-panel ul { margin: 0; padding-left: var(--admin-space-6); font-size: var(--admin-font-caption); }
-.current-work { margin-top: var(--admin-space-5); padding-block: var(--admin-space-5); border-top: 1px solid var(--cc-border); }
+.current-work { margin-top: var(--admin-space-5); padding-block: var(--admin-space-5); border-top: 1px solid var(--workbench-border); }
 .current-work > p { margin: var(--admin-space-2) 0; }
 .completion-summary { color: var(--el-color-success-dark-2); }
-.detail-records { border-top: 1px solid var(--cc-border); }
-.detail-records > details { border-bottom: 1px solid var(--cc-border); }
+.detail-records { border-top: 1px solid var(--workbench-border); }
+.detail-records > details { border-bottom: 1px solid var(--workbench-border); }
 summary { cursor: pointer; padding-block: var(--admin-space-3); font-weight: 600; }
 summary:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: -2px; }
 .detail-records p { margin: var(--admin-space-1) 0; }
 .related-row, .history-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--admin-space-3); }
-.related-row, .history-entry { border-bottom: 1px solid var(--cc-border); padding-block: var(--admin-space-3); }
+.related-row, .history-entry { border-bottom: 1px solid var(--workbench-border); padding-block: var(--admin-space-3); }
 .related-row:last-child, .history-entry:last-child { border-bottom: 0; }
 .related-row p, .history-entry small, .history-heading time { font-size: var(--admin-font-caption); color: var(--el-text-color-secondary); }
 .work-warning { color: var(--el-color-warning-dark-2); }

src/modules/appointment-calendar/WorkDispatchForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -223,7 +225,7 @@ onMounted(load)
 onBeforeUnmount(() => { generation++; nativeGeneration++; candidatePage.reset() })
 </script>
 <template>
-  <section class="work-form" aria-label="按预约批次创建整车排车">
+  <section class="work-form appointment-native-form" aria-label="按预约批次创建整车排车">
     <h3>{{ existing.length ? '沿用本批已有排车单' : '按批次选择同仓真实货物' }} <InlineHelp title="排车说明"><p>同一张排车单可装同仓多个客户与目的仓，客户和预约归属逐来源保留。</p></InlineHelp></h3>
     <p v-if="!readable">读取批次实物需要预约、尾程订单、入仓单和排车列表权限。</p>
     <LoadErrorState v-if="error" title="批次可排实物读取失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
@@ -236,7 +238,7 @@ onBeforeUnmount(() => { generation++; nativeGeneration++; candidatePage.reset()
     <template v-else-if="!pending && !corrupted && readable && !loading && !error && (!existing.length || arrangingRemaining && existingReady)">
       <p v-for="reason in [...new Set(contexts.flatMap(context => context.blockReasons))]" :key="reason" role="alert">{{ reason }}</p>
       <el-button v-if="batchKeys.length === 1" :disabled="!writable || unresolved" @click="emit('batch', batchKeys[0]!)">按当前批次箱数分批</el-button><p>部分箱数先按本批逐来源数量分批；不对应完整实物时，先在原库存作业拆托。</p>
-      <label>本组计划托位<select v-model.number="capacity" :disabled="!writable || unresolved"><option v-for="spec in dispatchVehicleSpecs" :key="spec.value" :value="spec.capacity">{{ spec.label }}</option></select></label>
+      <label>本组计划托位<select v-model.number="capacity" :disabled="!writable || unresolved" class="workbench-input"><option v-for="spec in dispatchVehicleSpecs" :key="spec.value" :value="spec.capacity">{{ spec.label }}</option></select></label>
       <table class="density-table"><thead><tr><th>选择</th><th>客户</th><th>托盘码</th><th>入库单号</th><th>来源</th><th>箱数</th><th>不可选择原因</th></tr></thead><tbody><tr v-for="(row, index) in rows" :key="`${row.key}:${index}`"><td><input type="checkbox" :checked="selected.includes(row.key)" :disabled="!writable || unresolved || reasons(row).length > 0" @change="select(row, $event)"></td><td>{{ row.native?.customerName || '客户待核实' }}</td><td>{{ row.palletNo || '—' }}</td><td>{{ row.planNo || '—' }}</td><td>{{ row.sourceStage === 'RECEIVED' ? '已收货实物' : '计划托盘' }}</td><td>{{ row.packageCount ?? '待核实' }}</td><td>{{ reasons(row).join('；') || '可选' }}</td></tr></tbody></table><p v-if="!rows.length">当前批次尚无可排实物。</p>
       <el-pagination aria-label="批次关联候选分页" :current-page="candidatePageNumber" :page-size="candidatePageSize" :page-sizes="[10, 20, 50]" :total="candidateTotal" :disabled="unresolved || loading" layout="total, sizes, prev, pager, next" @update:current-page="changeCandidatePage" @update:page-size="changeCandidateSize" />
       <p>上方总数为关联计划的候选数；当前页展示其中属于本批次的实物。已选 {{ chosen.length }} 条（含其他页）。</p>

src/modules/appointment-calendar/WorkReceivingPanel.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import './appointmentNativeForms.css'
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
@@ -221,7 +223,7 @@ async function save(decision: 'CONFIRM' | 'WITHDRAW' = 'CONFIRM') {
       const command = buildCommand(decision)
       if (command.kind === 'group' && command.request.action === 'CANCEL') {
         confirming.value = true
-        try { await ElMessageBox.confirm('确认取消当前展示的整份预约？货物需求与批次保留，车辆需重新核对。', '取消整份预约', { customClass: 'admin-density-confirm', confirmButtonText: '确认取消', cancelButtonText: '返回核对' }) } catch { return } finally { confirming.value = false }
+        try { await ElMessageBox.confirm('确认取消当前展示的整份预约？货物需求与批次保留，车辆需重新核对。', '取消整份预约', { customClass: 'admin-density-confirm admin-workbench is-dialog', confirmButtonText: '确认取消', cancelButtonText: '返回核对' }) } catch { return } finally { confirming.value = false }
       }
       pending.value = command
     } catch (cause) { saveError.value = { message: cause instanceof Error ? cause.message : '请核对本次范围' }; return }
@@ -264,7 +266,7 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
         <ReceivingScope :members="[]" :transport="context.transport" />
         <el-button :disabled="locked || !edit || !context.allowedActions.includes('BOOK_RECEIVING')" @click="newBooking">登记当前未覆盖货物的正式预约</el-button>
       </template>
-      <form v-else class="density-form" @submit.prevent="save()">
+      <form v-else class="density-form appointment-native-form" @submit.prevent="save()">
         <fieldset :disabled="locked || !formWritable">
           <template v-if="mode === 'refresh'">
             <h4>{{ customerName(customer) || '—' }} · 核对本客户最新货物资料</h4><p>采用后仅更新本客户的资料快照，本批箱数和其他客户的确认保持不变；保存核实资料不会自动执行采用。</p>
@@ -282,19 +284,19 @@ onMounted(async () => { await load(); if (props.initialCustomerId && customers.v
             <label>目标送仓日期<el-date-picker v-model="planForm.plannedDate" type="date" aria-label="客户计划日期" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label>
             <label>计划开始时段<el-date-picker v-model="planForm.plannedAt" @change="planForm.startOffset = ''" type="datetime" aria-label="客户计划开始" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
             <label>计划结束时段<el-date-picker v-model="planForm.plannedEndAt" @change="planForm.endOffset = ''" type="datetime" aria-label="客户计划结束" :disabled="locked || !formWritable" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></label>
-            <details><summary>计划时段的夏令时信息</summary><p>当地时钟回拨导致时刻重复时，请按仓库确认填写对应时差。跳时期间不存在的当地时刻不可用，请选择有效时间。</p><label>计划开始时差<input v-model="planForm.startOffset" aria-label="客户计划开始时差" placeholder="如 -07:00"></label><label>计划结束时差<input v-model="planForm.endOffset" aria-label="客户计划结束时差" placeholder="如 -08:00"></label></details>
-            <label>本次联系结果<select v-model="planForm.appointmentStatus" aria-label="客户计划状态"><option value="PENDING">等待对方确认</option><option value="FAILED">未约成</option></select></label>
-            <label>{{ planForm.appointmentStatus === 'FAILED' ? '未约成原因' : '联系备注' }}<textarea v-model="planForm.appointmentRemark" maxlength="1000" aria-label="客户计划备注" /></label>
+            <details><summary>计划时段的夏令时信息</summary><p>当地时钟回拨导致时刻重复时，请按仓库确认填写对应时差。跳时期间不存在的当地时刻不可用，请选择有效时间。</p><label>计划开始时差<input v-model="planForm.startOffset" aria-label="客户计划开始时差" placeholder="如 -07:00" class="workbench-input"></label><label>计划结束时差<input v-model="planForm.endOffset" aria-label="客户计划结束时差" placeholder="如 -08:00" class="workbench-input"></label></details>
+            <label>本次联系结果<select v-model="planForm.appointmentStatus" aria-label="客户计划状态" class="workbench-input"><option value="PENDING">等待对方确认</option><option value="FAILED">未约成</option></select></label>
+            <label>{{ planForm.appointmentStatus === 'FAILED' ? '未约成原因' : '联系备注' }}<textarea v-model="planForm.appointmentRemark" maxlength="1000" aria-label="客户计划备注" class="workbench-input" /></label>
 
           </template>
-          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数"></label></div><label>后送目标日期<el-date-picker v-model="adjustment.laterDate" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<el-date-picker v-model="adjustment.followup" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
-          <template v-if="mode === 'resolve' && change"><h4>仓库回复：本次客户调整</h4><ReceivingScope :members="change.originalMembers" :transport="context.transport" /><p v-for="(quantity, index) in change.intent.quantities" :key="sourceKey(quantity)">货物 {{ index + 1 }} · 本次先送 {{ quantity.retainedPackages }} 箱</p><p>负责人 {{ change.followup.ownerName || '—' }} · 跟进 {{ change.followup.nextFollowupDate || '待安排' }}</p><p>后送日期 {{ change.intent.laterDate || '未定' }} · {{ change.intent.reason }}</p><p v-for="agreement in change.originalAgreements" :key="agreement.agreementKey">原约号 {{ agreement.details.confirmationNo || '—' }} · {{ agreement.details.appointmentAt || '时段未定' }} · {{ agreement.timezone || '时区待核实' }}</p><label>仓库同意保留量和移出量的回复依据<textarea v-model="evidence" maxlength="1000" aria-label="仓库回复依据" /></label></template>
+          <template v-if="mode === 'customer'"><h4>仅本客户调整，其他客户保持原安排</h4><div v-for="item in customerItems" :key="item.id"><p>{{ item.inboundCode || '原票业务号未提供' }} · 当前 {{ item.packageCount ?? '待核实' }} 箱</p><label v-if="item.destinationKey">本次先送箱数<input v-model="adjustment.retained[sourceKey({ sourceKey: item.sourceKey, destinationKey: item.destinationKey })]" type="number" min="0" :max="item.packageCount ?? undefined" step="1" aria-label="本次先送箱数" class="workbench-input"></label></div><label>后送目标日期<el-date-picker v-model="adjustment.laterDate" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>负责人<select v-model="adjustment.ownerId" required aria-label="调整负责人" class="workbench-input"><option value="" disabled>请选择负责人</option><option v-for="person in owners" :key="person.id" :value="person.id">{{ person.name }}</option></select></label><label>下一次跟进日期<el-date-picker v-model="adjustment.followup" type="date" :disabled="locked || !formWritable" format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable /></label><label>调整原因<textarea v-model="adjustment.reason" maxlength="1000" aria-label="调整原因" class="workbench-input" /></label><p>保存仅登记待确认变化，原箱数与原确认仍保留，相关发车暂受阻。</p></template>
+          <template v-if="mode === 'resolve' && change"><h4>仓库回复：本次客户调整</h4><ReceivingScope :members="change.originalMembers" :transport="context.transport" /><p v-for="(quantity, index) in change.intent.quantities" :key="sourceKey(quantity)">货物 {{ index + 1 }} · 本次先送 {{ quantity.retainedPackages }} 箱</p><p>负责人 {{ change.followup.ownerName || '—' }} · 跟进 {{ change.followup.nextFollowupDate || '待安排' }}</p><p>后送日期 {{ change.intent.laterDate || '未定' }} · {{ change.intent.reason }}</p><p v-for="agreement in change.originalAgreements" :key="agreement.agreementKey">原约号 {{ agreement.details.confirmationNo || '—' }} · {{ agreement.details.appointmentAt || '时段未定' }} · {{ agreement.timezone || '时区待核实' }}</p><label>仓库同意保留量和移出量的回复依据<textarea v-model="evidence" maxlength="1000" aria-label="仓库回复依据" class="workbench-input" /></label></template>
           <template v-if="group"><h4>{{ mode === 'book' ? '整组重约当前范围' : '整份预约当前范围' }}</h4><ReceivingScope :members="mode === 'book' ? selectedBookMembers : group.agreement.members" :transport="group.transport" /><div v-for="(excluded, index) in group.excludedMembers" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除范围 {{ index + 1 }} · {{ excluded.member.appointmentNo }}：{{ excluded.reason }}</div></template>
-          <template v-if="mode === 'book'"><p>未取得确认时，可先按客户保存目标或未约成原因。</p><el-button v-for="member in bookMembers.filter(row => row.batchKey === batchKey && planEligible(row.customerId))" :key="member.customerId" :disabled="locked || !edit" @click="openPlan(member.customerId)">{{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }} · 保存目标 / 未约成</el-button><p v-if="!group && cargoIncomplete" role="status">货物数量或来源资料待核实，当前不能登记正式预约。</p><p v-if="bookingScopeChanged" role="status">当前成员范围已变化，请核对上方范围后重新填写预约，原输入不会自动套用给其他客户。<el-button :disabled="locked" @click="resetBookingScope">按当前范围重新填写</el-button></p><template v-if="!group"><p v-for="(excluded, index) in context.executionScope.members.filter(row => row.completed || !row.canRebook)" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除客户范围 {{ index + 1 }}：{{ excluded.reason || (excluded.completed ? '已完成' : '当前不可重新预约') }}</p></template><ReceivingScope v-if="!group" :members="selectedBookMembers" :transport="context.transport" /><LoadErrorState v-if="scopeError" title="所选客户执行资格读取失败" :message="scopeError.message" :loading="scopeLoading" @retry="refreshSelectedScope" /><p v-if="scopeLoading">正在核对所选客户执行资格…</p><p v-if="!scopeLoading && !scopeError && selectedBookMembers.length && !selectedExecutionAllowed" role="status">所选客户执行资格不完整或不可办理，请核对后重新选择。</p><p v-for="(eligibility, index) in selectedExecution?.members.filter(row => row.completed || !row.canRebook) || []" :key="index" role="status">所选范围 {{ index + 1 }}：{{ eligibility.reason || '当前不可重新预约' }}</p><div aria-label="本次预约客户"><h4>选择本次取得确认的客户</h4><label v-for="(member, index) in bookMembers" :key="memberKey(member)"><input v-model="selectedMemberKeys" @change="refreshSelectedScope" :value="memberKey(member)" type="checkbox" :aria-label="`选择预约客户 ${index + 1}`">{{ member.appointmentNo }} · {{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }}</label><p v-if="!selectedBookMembers.length">请至少选择一个客户。</p></div><label><input v-model="separate" type="checkbox">所选客户分别登记预约</label><p>共同预约须由仓库明确确认覆盖当前全部所选客户和货量；重复填写同一约号不能代替共同预约。</p><template v-for="(row, index) in (bookingScopeChanged ? [] : bookingRows)" :key="index"><h4>{{ separate ? `${row.member?.appointmentNo} · ${row.member?.customerName || '—'} · 客户范围 ${index + 1}` : '一份共同预约' }}</h4><FbaAppointmentFields :model="bookingForms[row.index]!" :timezone="group?.agreement.timezone || context.batch.timezone" :disabled="locked || !edit" /><label>仓库确认覆盖依据<textarea v-model="bookingEvidence[row.index]" maxlength="1000" aria-label="预约覆盖依据" /></label></template></template>
-          <template v-if="mode === 'reschedule' || mode === 'cancel'"><FbaAppointmentFields v-if="mode === 'reschedule'" :model="groupForm" :timezone="group?.agreement.timezone" :disabled="locked || !edit" /><p v-else>整份取消会清除活动确认及失效目标，保留历史、批次数量和车辆关系；后续仍须重新约仓并核对车辆。</p><label>仓库回复依据<textarea v-model="evidence" maxlength="1000" aria-label="整份回复依据" /></label></template>
+          <template v-if="mode === 'book'"><p>未取得确认时，可先按客户保存目标或未约成原因。</p><el-button v-for="member in bookMembers.filter(row => row.batchKey === batchKey && planEligible(row.customerId))" :key="member.customerId" :disabled="locked || !edit" @click="openPlan(member.customerId)">{{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }} · 保存目标 / 未约成</el-button><p v-if="!group && cargoIncomplete" role="status">货物数量或来源资料待核实，当前不能登记正式预约。</p><p v-if="bookingScopeChanged" role="status">当前成员范围已变化，请核对上方范围后重新填写预约，原输入不会自动套用给其他客户。<el-button :disabled="locked" @click="resetBookingScope">按当前范围重新填写</el-button></p><template v-if="!group"><p v-for="(excluded, index) in context.executionScope.members.filter(row => row.completed || !row.canRebook)" :key="`${excluded.member.batchKey}:${excluded.member.customerId}`" role="status">排除客户范围 {{ index + 1 }}：{{ excluded.reason || (excluded.completed ? '已完成' : '当前不可重新预约') }}</p></template><ReceivingScope v-if="!group" :members="selectedBookMembers" :transport="context.transport" /><LoadErrorState v-if="scopeError" title="所选客户执行资格读取失败" :message="scopeError.message" :loading="scopeLoading" @retry="refreshSelectedScope" /><p v-if="scopeLoading">正在核对所选客户执行资格…</p><p v-if="!scopeLoading && !scopeError && selectedBookMembers.length && !selectedExecutionAllowed" role="status">所选客户执行资格不完整或不可办理，请核对后重新选择。</p><p v-for="(eligibility, index) in selectedExecution?.members.filter(row => row.completed || !row.canRebook) || []" :key="index" role="status">所选范围 {{ index + 1 }}：{{ eligibility.reason || '当前不可重新预约' }}</p><div aria-label="本次预约客户"><h4>选择本次取得确认的客户</h4><label v-for="(member, index) in bookMembers" :key="memberKey(member)"><input v-model="selectedMemberKeys" @change="refreshSelectedScope" :value="memberKey(member)" type="checkbox" :aria-label="`选择预约客户 ${index + 1}`">{{ member.appointmentNo }} · {{ member.customerName || member.sources.map(source => source.inboundCode || '—').join('、') }}</label><p v-if="!selectedBookMembers.length">请至少选择一个客户。</p></div><label><input v-model="separate" type="checkbox">所选客户分别登记预约</label><p>共同预约须由仓库明确确认覆盖当前全部所选客户和货量；重复填写同一约号不能代替共同预约。</p><template v-for="(row, index) in (bookingScopeChanged ? [] : bookingRows)" :key="index"><h4>{{ separate ? `${row.member?.appointmentNo} · ${row.member?.customerName || '—'} · 客户范围 ${index + 1}` : '一份共同预约' }}</h4><FbaAppointmentFields :model="bookingForms[row.index]!" :timezone="group?.agreement.timezone || context.batch.timezone" :disabled="locked || !edit" /><label>仓库确认覆盖依据<textarea v-model="bookingEvidence[row.index]" maxlength="1000" aria-label="预约覆盖依据" class="workbench-input" /></label></template></template>
+          <template v-if="mode === 'reschedule' || mode === 'cancel'"><FbaAppointmentFields v-if="mode === 'reschedule'" :model="groupForm" :timezone="group?.agreement.timezone" :disabled="locked || !edit" /><p v-else>整份取消会清除活动确认及失效目标，保留历史、批次数量和车辆关系；后续仍须重新约仓并核对车辆。</p><label>仓库回复依据<textarea v-model="evidence" maxlength="1000" aria-label="整份回复依据" class="workbench-input" /></label></template>
           <label><input v-model="confirmedScope" type="checkbox" :disabled="mode === 'book' && (scopeLoading || !!scopeError || !selectedExecutionAllowed) || mode === 'refresh' && (cargoLoading || !!cargoError || !!cargoProblems.length)" aria-label="确认当前范围">已核对上述客户货物、当前预约与车辆范围</label>
         </fieldset>
-        <el-button type="primary" native-type="submit" :disabled="!canSubmit" :loading="saving">{{ pending ? '重试本次提交' : mode === 'refresh' ? '确认采用本客户最新资料' : mode === 'plan' ? '保存本客户计划' : mode === 'customer' ? '保存待仓库确认' : mode === 'resolve' ? '确认回复并应用本次调整' : mode === 'cancel' ? '确认整份取消' : mode === 'reschedule' ? '保存整份改期' : '保存本次正式预约' }}</el-button>
+        <div class="density-actions density-actions--footer appointment-form-actions"><el-button type="primary" native-type="submit" :disabled="!canSubmit" :loading="saving">{{ pending ? '重试本次提交' : mode === 'refresh' ? '确认采用本客户最新资料' : mode === 'plan' ? '保存本客户计划' : mode === 'customer' ? '保存待仓库确认' : mode === 'resolve' ? '确认回复并应用本次调整' : mode === 'cancel' ? '确认整份取消' : mode === 'reschedule' ? '保存整份改期' : '保存本次正式预约' }}</el-button></div>
         <el-button v-if="mode === 'resolve' && !pending" :disabled="!canSubmit" @click="save('WITHDRAW')">撤回变化并保留原安排</el-button>
       </form>
       <LoadErrorState v-if="saveError" title="本次提交尚未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>

src/modules/appointment-calendar/appointmentNativeForms.css

@@ -0,0 +1,47 @@
+/* Native work-command fields share the existing input theme, with local form layout. */
+.appointment-native-form {
+  min-width: 0;
+}
+
+.appointment-native-form > fieldset {
+  display: grid;
+  min-width: 0;
+  gap: var(--admin-space-5);
+  margin: var(--admin-space-3) 0;
+  padding: 0;
+  border: 0;
+}
+
+.appointment-native-form > fieldset > .el-button { justify-self: start; }
+
+.appointment-native-form label:has(> :is(input, select, textarea, .el-date-editor)) {
+  display: grid;
+  min-width: 0;
+  gap: var(--admin-space-2);
+  overflow-wrap: anywhere;
+}
+
+.appointment-native-form label > :is(.workbench-input, .el-date-editor) {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.appointment-native-form label > textarea {
+  resize: vertical;
+}
+
+.appointment-native-form label:has(> input[type='checkbox']) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.appointment-native-form .appointment-form-actions {
+  position: sticky;
+  z-index: 1;
+  bottom: 0;
+  padding-block: var(--admin-space-3);
+  border-top: 1px solid var(--workbench-border);
+  background: var(--workbench-surface);
+}

src/modules/appointment-calendar/index.ts

@@ -1,2 +1,4 @@
 export { appointmentReturnTarget, appointmentReturnQuery } from './workNavigation'
 export { default as TripAppointmentPanel } from './TripAppointmentPanel.vue'
+export { default as AppointmentConfirmationCargo } from './AppointmentConfirmationCargo.vue'
+export type { PlanningSourceLookup } from './planningApi'

src/modules/appointment-calendar/schedule.ts

@@ -1,4 +1,4 @@
-import { addDays } from './calendar'
+import { projectWarehouseArrival } from '@/modules/container-loading'
 import type { CalendarSources, ScheduleRange, WarehouseArrival } from './scheduleApi'
 
 export const scheduleTypes = ['arrival', 'dispatch', 'return', 'warehouse'] as const
@@ -36,12 +36,12 @@ export function projectContainerSchedule(sources: CalendarSources, warehouses: W
     if (warehouses === null) continue
     const warehouse = warehouseMap.get(row.containerBookingId)
     warehouseMap.delete(row.containerBookingId)
-    const canDefault = !warehouse || warehouse.version === 0 && warehouse.planCount === 0
-    const planned = warehouse?.plannedAt?.slice(0, 10) || (canDefault && date ? addDays(date, 2) : null)
+    const projected = projectWarehouseArrival(row.arrivalAt, warehouse)
+    const planned = projected.date
     if (inRange(planned, range)) events.push({ key: `warehouse-${row.containerBookingId}`, type: 'warehouse', date: planned,
-      time: warehouse?.plannedAt?.slice(11, 16) || '', title: `${label} 计划到仓`, sourcePath, warehouse,
+      time: projected.time, title: `${label} 计划到仓`, sourcePath, warehouse,
       canEdit: warehouse?.canEdit === true,
-      subtitle: warehouse?.plannedAt ? warehouse.planCount > 0 ? '已有入库计划，日期已冻结' : '人工维护' : canDefault ? '到港日期＋2个自然日（默认）' : '柜内计划时间不一致，待核实',
+      subtitle: warehouse?.plannedAt ? warehouse.planCount > 0 ? '已有入库计划，日期已冻结' : '人工维护' : projected.isDefault ? '到港日期＋2个自然日（默认）' : '柜内计划时间不一致，待核实',
       fields: [{ label: '集装箱号', value: row.containerNo }, { label: '接仓仓库', value: warehouse?.warehouseName || warehouse?.warehouseCode },
         { label: '计划到仓', value: warehouse?.plannedAt ? timestamp(warehouse.plannedAt) : planned },
         { label: '实际到仓', value: timestamp(warehouse?.actualAt || null) }] })

src/modules/appointment-calendar/tripCalendar.test.ts

@@ -4,9 +4,23 @@ import { http } from '@/shared/api/http'
 vi.mock('@/shared/api/http', () => ({ http: { get: vi.fn() }, unwrapApiResponse: (value: {data: unknown}) => value.data }))
 const range = { from: '2026-10-01', to: '2026-11-01' }
 function trip(dispatchNo: string, plannedDepartureAt: string, originTimezone = 'America/Los_Angeles'): TripCalendarEntry {
-  return { sourceType: 'DISPATCH', dispatchNo, status: 'PLANNED', originWarehouseId: '1', originWarehouseCode: 'US-W', originWarehouseName: 'US warehouse', originCountryCode: 'US', originTimezone, originWarehouseStatus: 'ACTIVE', plannedDepartureAt, expectedDriverEndAt: null, departedAt: null, completedAt: null, stops: [{name:'US warehouse'}, {name:'FBA'}], incompleteReasons: [] }
+  return { sourceType: 'DISPATCH', dispatchNo, containerNumbers: [], status: 'PLANNED', originWarehouseId: '1', originWarehouseCode: 'US-W', originWarehouseName: 'US warehouse', originCountryCode: 'US', originTimezone, originWarehouseStatus: 'ACTIVE', plannedDepartureAt, expectedDriverEndAt: null, departedAt: null, completedAt: null, stops: [{name:'US warehouse'}, {name:'FBA'}], incompleteReasons: [] }
 }
 describe('location-based trip calendar', () => {
+  it('places the reported UTC plan on October 22 at 09:00 in Los Angeles and exposes every container in one event', () => {
+    const row = { ...trip('PC-CALENDAR-001', '2026-10-22T16:00:00Z'), containerNumbers: ['TSTU1234567', 'TSTU7654321'] }
+    const projected = projectTripCalendar({ records: [row, row], unresolvedRecords: [] }, range)
+    expect(projected.events).toHaveLength(1)
+    expect(projected.events[0]).toMatchObject({ key: 'dispatch-PC-CALENDAR-001', date: '2026-10-22', time: '09:00', sourcePath: '/overseas-warehouse/dispatches/PC-CALENDAR-001' })
+    expect(projected.events[0]!.fields).toContainEqual({ label: '关联柜号', value: 'TSTU1234567、TSTU7654321' })
+    expect(projected.events[0]!.fields).toContainEqual({ label: '计划出发（起运仓当地）', value: '2026-10-22 09:00' })
+    expect(projected.events[0]!.fields).toContainEqual({ label: '计划出发（UTC）', value: '2026-10-22T16:00:00Z' })
+    const beijing = new Intl.DateTimeFormat('en-CA', { timeZone: 'Asia/Shanghai', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hourCycle: 'h23' })
+    const parts = Object.fromEntries(beijing.formatToParts(new Date(row.plannedDepartureAt!)).map(part => [part.type, part.value]))
+    expect([parts.year, parts.month, parts.day, parts.hour, parts.minute]).toEqual(['2026', '10', '23', '00', '00'])
+    expect(projectTripCalendar({ records: [row], unresolvedRecords: [] }, { from: '2026-10-22', to: '2026-10-23' }).events).toHaveLength(1)
+    expect(projectTripCalendar({ records: [row], unresolvedRecords: [] }, { from: '2026-10-23', to: '2026-10-24' }).events).toEqual([])
+  })
   it('routes the canonical dispatch number to dispatch detail and does not invent a link without it', () => {
     const row = trip('DS/REAL', '2026-10-10T12:00:00Z')
     const result = projectTripCalendar({ records: [row], unresolvedRecords: [] }, range)

src/modules/appointment-calendar/tripCalendar.ts

@@ -4,6 +4,7 @@ import type { ScheduleEvent } from './schedule'
 export interface TripCalendarEntry {
   sourceType: 'DISPATCH'
   dispatchNo: string
+  containerNumbers: string[]
   status: string
   originWarehouseId: string | null
   originWarehouseCode: string | null
@@ -72,14 +73,17 @@ export function projectTripCalendar(result: TripCalendarResult, range: { from: s
     }
     if (occurrence.date < range.from || occurrence.date >= range.to) continue
     const actual = localStamp(row.departedAt, row.originTimezone)
+    const planned = localStamp(row.plannedDepartureAt, row.originTimezone)
     const driverEnd = localStamp(row.expectedDriverEndAt, row.originTimezone)
     events.push({ key: `dispatch-${row.dispatchNo}`, type: 'dispatch', date: occurrence.date, time: occurrence.time,
-      title: `${row.dispatchNo} ${row.departedAt ? '实际发车' : '排车'}`, subtitle: row.departedAt ? '按起运仓当地实际发车时间展示' : '海外仓送往 FBA／客户仓的车辆安排',
+      title: `${row.dispatchNo} ${row.departedAt ? '实际发车' : '排车'}`, subtitle: row.departedAt ? '按起运仓当地实际发车时间展示' : '按起运仓当地计划发车时间展示',
       sourcePath: `/overseas-warehouse/dispatches/${encodeURIComponent(row.dispatchNo)}`,
       fields: [
         { label: '运输状态', value: labels[row.status] || '待核实' },
+        { label: '关联柜号', value: row.containerNumbers.join('、') },
         { label: '起运仓', value: row.originWarehouseName || row.originWarehouseCode },
         { label: '地点时区', value: row.originTimezone },
+        { label: '计划出发（起运仓当地）', value: planned ? `${planned.date} ${planned.time}` : null },
         { label: '计划出发（UTC）', value: row.plannedDepartureAt },
         { label: '路线', value: row.stops.slice(0, 3).map(stop => stop.name).join(' → ') + (row.stops.length > 3 ? ` 等${row.stops.length}站` : '') },
         { label: '实际出发', value: actual ? `${actual.date} ${actual.time}` : row.departedAt ? '时刻待核实' : '尚未记录' },

src/modules/audit/components/CustomerAuditLogsPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { ScrollText } from '@lucide/vue'
@@ -157,33 +158,33 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
 </script>
 
 <template>
-  <section class="customer-audit-panel admin-density">
-    <div class="panel-title"><div><h2>操作日志</h2><p>{{ customerName }}已归属当前客户的档案与业务操作记录</p></div><ScrollText :size="19" /></div>
+  <section class="customer-audit-panel admin-density admin-workbench">
+    <div class="panel-title"><div><h2>操作日志</h2></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" />
+      <QueryToolbar v-model="filters" class="audit-query workbench-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>
+    <div class="workbench-table" v-else><DataTable  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 class="density-action" size="small" :aria-label="`查看操作日志：${auditEventLabel((row as PlatformAuditLogListItem).eventType)}，${formatDate((row as PlatformAuditLogListItem).occurredAt)}`" @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>
+      <template #eventType="{ row }"><el-tooltip :content="(row as PlatformAuditLogListItem).eventType" placement="top" :show-after="500"><span class="event-label workbench-badge is-toned">{{ auditEventLabel((row as PlatformAuditLogListItem).eventType) }}</span></el-tooltip></template>
       <template #username="{ row }">{{ auditOperatorLabel((row as PlatformAuditLogListItem).username) }}</template>
       <template #serviceName="{ row }"><el-tooltip :content="display((row as PlatformAuditLogListItem).serviceName)" placement="top" :show-after="500"><span class="service-label">{{ auditServiceLabel((row as PlatformAuditLogListItem).serviceName) }}</span></el-tooltip></template>
       <template #success="{ row }"><el-tag :type="(row as PlatformAuditLogListItem).success ? 'success' : 'danger'">{{ (row as PlatformAuditLogListItem).success ? '成功' : '失败' }}</el-tag></template>
       <template #occurredAt="{ row }">{{ formatDate((row as PlatformAuditLogListItem).occurredAt) }}</template>
       <template #pagination-left>共 {{ total }} 条客户操作记录</template>
-    </DataTable>
+    </DataTable></div>
     </template>
 
-    <AppDrawer class="customer-audit-drawer admin-density-drawer admin-density-drawer--detail" v-model="detailOpen" :title="detailTitle" size="min(920px, 96vw)" :loading="detailLoading" :show-footer="false">
+    <AppDrawer class="customer-audit-drawer admin-density-drawer admin-density-drawer--detail admin-workbench is-drawer" v-model="detailOpen" :title="detailTitle" size="min(920px, 96vw)" :loading="detailLoading" :show-footer="false">
       <LoadErrorState v-if="detailError" title="详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="loadDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
       <div v-else-if="detail" class="density-dialog-sections">
         <section class="density-dialog-section" data-tone="source">
           <h3 class="density-dialog-section__title">{{ auditEventLabel(detail.eventType) }} <el-tag :type="detail.success ? 'success' : 'danger'" effect="light">{{ detail.success ? '操作成功' : '操作失败' }}</el-tag></h3>
           <p class="audit-event-description">{{ auditDescriptionLabel(detail.description) }}</p>
         </section>
-        <section class="density-dialog-section" data-tone="source">
+        <section class="density-dialog-section workbench-evidence" data-tone="source">
           <h3 class="density-dialog-section__title">操作信息</h3>
           <table class="density-table audit-detail-table" aria-label="操作日志基础信息"><tbody>
             <tr><th scope="row">操作人</th><td>{{ auditOperatorLabel(detail.username) }}</td><th scope="row">发生时间</th><td>{{ formatDate(detail.occurredAt) }}</td></tr>
@@ -209,8 +210,8 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
 
 
 
-.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; }
+.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(--workbench-border); }.panel-title h2 { margin:0; color:var(--workbench-text); font-size:var(--admin-font-section, 14px); }.panel-title p { margin:5px 0 0; color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); }.panel-title > svg { color:var(--workbench-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:var(--workbench-muted); text-align:center; }.module-empty strong { color:var(--workbench-text); font-size:var(--admin-font-body, 13px); }.module-empty p { margin:0; color:var(--workbench-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; overflow:hidden; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.service-label { display:block; overflow:hidden; color:var(--workbench-text); text-overflow:ellipsis; white-space:nowrap; }
 .audit-event-description { margin:0; overflow-wrap:anywhere; }
 .audit-detail-table { table-layout:fixed; }
 .audit-detail-table th { width:92px; }

src/modules/auth/operation-matrix.md

@@ -0,0 +1,14 @@
+# 平台登录页逐操作矩阵
+
+依据：2026-10-20 用户确认全 Admin 推广清爽蓝白风格；视觉参考为工作区 `docs/界面参考/蓝白卡片式工作台风格参考.md` 与其中的用户参考图。当前页面入口为 `pages/LoginView.vue`；本轮只调整展示，不改变认证状态、接口和路由跳转。
+
+| 页面 | 操作 | 当前承载与依据 | 本轮结论与验证 |
+| --- | --- | --- | --- |
+| 平台员工登录 | 输入账号、密码与提交 | `LoginView.vue` 的 `el-form` 与 `submit`；独立登录页，品牌区与表单左右布局 | 接入公共蓝白面板、图标和主题；保留原 `large` 表单尺寸、账号密码字段、自动完成、密码显隐与回车提交，不新增文案或字段 |
+| 平台员工登录 | 必填校验与加载 | 原 `rules`、`loading` 与表单标签 | 原必填提示及提交加载保持；不增加验证码或改变认证步骤 |
+| 平台员工登录 | 登录失败 | 原 `loginError`、`ApiErrorMeta` 与 `role="alert"` | 错误区域复用公共提示外观，服务端错误文案、诊断信息和可恢复表单保持 |
+| 平台员工登录 | 登录成功后跳转 | 原 `auth.login`、`initializeAfterLogin` 与 `sanitizeInternalPath` | 成功提示、安全跳转、首个授权入口及无权限回退均保持，不修改 router/store |
+| 平台员工登录 | 已有窄屏品牌布局 | 原 `960px`、`360px` 响应式规则 | 保留既有窄屏能力，不新增多视口验收范围 |
+| 平台员工登录 | 详情、新增、编辑、审核、文件预览、删除 | 当前页面无上述操作 | 不新增操作或浮层 |
+
+自动回归入口：`pages/LoginView.test.ts`。本模块未独立执行检查，统一由本轮总控完成。视觉待人工 `1920×1080`、浏览器缩放 `100%` 截图确认。

src/modules/auth/pages/LoginView.test.ts

@@ -43,14 +43,18 @@ describe('LoginView authentication lifecycle', () => {
     expect(loginSource).not.toContain('demo-tip')
   })
 
-  it('uses the admin design tokens and keeps the brand visible at 320px', () => {
-    expect(loginSource).toContain('<h1>柏悦物流管理后台</h1>')
-    expect(loginSource).toContain('class="login-mobile-brand"')
+  it('uses the shared blue-white theme and preserves the existing compact brand layout', () => {
+    expect(loginSource).toContain("import '@/styles/adminWorkbench.css'")
+    expect(loginSource).toContain('class="login-page admin-workbench"')
+    expect(loginSource).toContain('<h1 class="workbench-title">柏悦物流管理后台</h1>')
+    expect(loginSource).toContain('class="login-mobile-brand workbench-brand-mark"')
+    expect(loginSource).toContain('class="login-card workbench-panel"')
+    expect(loginSource).toContain('class="login-error workbench-notice workbench-tone" data-tone="rose"')
     expect(loginSource).toContain('aria-label="平台员工登录"')
+    expect(loginSource).toContain('label-position="top" size="large"')
     expect(loginSource).toContain('autocomplete="username" maxlength="100" autofocus')
     expect(loginSource).toContain('aria-live="polite"')
-    expect(loginSource).toContain('background: var(--cc-surface-muted)')
-    expect(loginSource).toContain('border-radius: var(--cc-radius-lg)')
+    expect(loginSource).not.toContain('var(--cc-navy)')
     expect(loginSource).toContain('@media (max-width: 360px)')
     expect(loginSource).not.toContain('让跨境物流管理')
   })

src/modules/auth/pages/LoginView.vue

@@ -9,6 +9,7 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import { sanitizeInternalPath } from '@/core/routing/accessDecision'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useAuthStore } from '@/core/auth/auth'
+import '@/styles/adminWorkbench.css'
 
 const route = useRoute()
 const router = useRouter()
@@ -54,25 +55,25 @@ async function submit() {
 </script>
 
 <template>
-  <div class="login-page">
+  <div class="login-page admin-workbench">
     <section class="login-intro">
-      <div class="login-brand"><img class="login-brand-logo" :src="baiyueLogoWhite" alt="柏悦物流" /></div>
-      <div>
-        <h1>柏悦物流管理后台</h1>
-        <p class="intro-copy">平台内部运营与管理系统</p>
+      <div class="login-brand workbench-brand-mark"><img class="login-brand-logo" :src="baiyueLogoWhite" alt="柏悦物流" /></div>
+      <div class="workbench-heading">
+        <h1 class="workbench-title">柏悦物流管理后台</h1>
+        <p class="login-intro-copy workbench-note">平台内部运营与管理系统</p>
       </div>
-      <div class="security-note">
-        <ShieldCheck :size="22" />
+      <div class="login-security-note workbench-meta">
+        <ShieldCheck :size="22" aria-hidden="true" />
         <span>平台内部系统，请使用授权账号登录</span>
       </div>
     </section>
 
     <section class="login-panel">
-      <div class="login-card">
-        <div class="login-mobile-brand"><img :src="baiyueLogoWhite" alt="柏悦物流" /></div>
-        <div class="login-card-icon"><LockKeyhole :size="24" /></div>
-        <h2>登录管理后台</h2>
-        <p>使用平台内部员工账号登录</p>
+      <div class="login-card workbench-panel">
+        <div class="login-mobile-brand workbench-brand-mark"><img :src="baiyueLogoWhite" alt="柏悦物流" /></div>
+        <div class="login-card-icon workbench-icon"><LockKeyhole :size="24" aria-hidden="true" /></div>
+        <h2 class="workbench-title">登录管理后台</h2>
+        <p class="workbench-note">使用平台内部员工账号登录</p>
         <el-form ref="formRef" :model="form" :rules="rules" label-position="top" size="large" aria-label="平台员工登录" @submit.prevent="submit">
           <el-form-item label="账号" prop="account" required>
             <el-input v-model.trim="form.account" placeholder="请输入账号" :prefix-icon="UserRound" autocomplete="username" maxlength="100" autofocus />
@@ -84,38 +85,43 @@ async function submit() {
             登录 <ArrowRight :size="17" />
           </el-button>
         </el-form>
-        <div v-if="loginError" class="login-error" role="alert" aria-live="polite"><p>{{ loginError.message }}</p><ApiErrorMeta :details="loginError" /></div>
+        <div v-if="loginError" class="login-error workbench-notice workbench-tone" data-tone="rose" role="alert" aria-live="polite"><p>{{ loginError.message }}</p><ApiErrorMeta :details="loginError" /></div>
       </div>
     </section>
   </div>
 </template>
 
 <style scoped>
-.login-page { min-width: 0; min-height: 100svh; background: var(--cc-surface); color: var(--cc-text); }
-.login-intro { min-width: 0; background: var(--cc-navy); }
-.login-intro h1 { max-width: 560px; margin: 16px 0 14px; font-size: 40px; line-height: 1.2; overflow-wrap: anywhere; }
-.intro-copy { margin: 0; color: #cbd5e1; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
-.login-panel { min-width: 0; background: var(--cc-surface-muted); }
-.login-card { min-width: 0; padding: 32px; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); background: var(--cc-surface); box-shadow: var(--cc-shadow-md); }
-.login-card-icon { border-radius: var(--cc-radius-lg); background: var(--cc-primary-soft); }
-.login-card h2, .login-card > p { overflow-wrap: anywhere; }
+.login-page { display: grid; min-width: 0; min-height: 100svh; grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr); background: var(--workbench-surface); color: var(--workbench-text); }
+.login-intro { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: 46px clamp(42px, 7vw, 100px); }
+.login-brand { display: flex; width: fit-content; min-height: 64px; align-items: center; padding: 8px 20px; }
+.login-brand-logo { display: block; width: 205px; height: 64px; object-fit: contain; object-position: left center; }
+.login-intro h1 { max-width: 560px; }
+.login-intro-copy { max-width: 560px; }
+.login-security-note > svg { flex: 0 0 auto; }
+.login-panel { display: grid; min-width: 0; place-items: center; padding: 48px; background: var(--workbench-surface-tint); }
+.login-card.workbench-panel { width: min(410px, 100%); min-width: 0; padding: 32px; }
+.login-card h2 { margin-top: 22px; }
+.login-card > p { margin: 8px 0 30px; }
 .login-mobile-brand { display: none; }
-.login-submit { min-height: 44px; }
-.login-error { min-width: 0; padding: 12px 14px; border: 1px solid #fecdca; border-radius: var(--cc-radius-md); background: var(--cc-danger-soft); color: var(--cc-danger); overflow-wrap: anywhere; }
+.login-submit { width: 100%; min-height: 44px; }
+.login-submit :deep(> span) { display: flex; align-items: center; gap: 8px; }
+.login-error.workbench-notice { min-width: 0; margin-top: 14px; }
+.login-error > p { margin: 0; }
 .login-error :deep(*) { max-width: 100%; overflow-wrap: anywhere; }
-.login-card :deep(.el-input__wrapper:focus-within) { box-shadow: 0 0 0 1px var(--cc-primary) inset, 0 0 0 3px var(--cc-primary-soft); }
 
 @media (max-width: 960px) {
+  .login-page { grid-template-columns: 1fr; }
+  .login-intro { display: none; }
   .login-panel { align-items: start; padding: 24px; }
-  .login-card { width: min(440px, 100%); margin: auto; padding: 28px; }
-  .login-mobile-brand { display: flex; min-height: 52px; align-items: center; margin: -28px -28px 28px; padding: 12px 20px; border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0; background: var(--cc-navy); }
+  .login-card.workbench-panel { width: min(440px, 100%); margin: auto; padding: 28px; }
+  .login-mobile-brand { display: flex; width: fit-content; min-height: 52px; align-items: center; margin-bottom: 28px; padding: 8px 16px; }
   .login-mobile-brand img { display: block; width: 154px; height: 48px; object-fit: contain; object-position: left center; }
 }
 
 @media (max-width: 360px) {
   .login-panel { padding: 12px; }
-  .login-card { padding: 20px; }
-  .login-mobile-brand { margin: -20px -20px 24px; padding-inline: 16px; }
-  .login-card h2 { font-size: 24px; }
+  .login-card.workbench-panel { padding: 20px; }
+  .login-mobile-brand { margin-bottom: 24px; }
 }
 </style>

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

@@ -8,8 +8,8 @@ describe('container arrival-time overseas API', () => {
   beforeEach(() => vi.clearAllMocks())
 
   it('queries visible containers and updates the whole-container expected arrival', async () => {
-    vi.mocked(http.post).mockResolvedValue({ code: '200', data: [{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0 }] })
-    vi.mocked(http.put).mockResolvedValue({ code: '200', data: { sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: null, version: 1 } } as never)
+    vi.mocked(http.post).mockResolvedValue({ code: '200', data: [{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0, planCount: 0 }] })
+    vi.mocked(http.put).mockResolvedValue({ code: '200', data: { sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: null, version: 1, planCount: 0 } } as never)
 
     await listContainerArrivalTimes(['9001'])
     await updateContainerExpectedArrival('9001', { estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', expectedVersion: 0 })
@@ -17,4 +17,14 @@ describe('container arrival-time overseas API', () => {
     expect(http.post).toHaveBeenCalledWith('/platform/v1/last-leg/orders/container-arrival-times/query', { sourceContainerBookingIds: ['9001'] })
     expect(http.put).toHaveBeenCalledWith('/platform/v1/last-leg/orders/container-summaries/9001/expected-arrival', { estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', expectedVersion: 0 }, { headers: { 'Idempotency-Key': expect.stringContaining('container-expected-arrival-9001-') } })
   })
+
+  it('normalizes serialized plan counts and rejects unknown counts instead of showing a default', async () => {
+    const row = { sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0 }
+    vi.mocked(http.post).mockResolvedValue({ code: '200', data: [{ ...row, planCount: '1' }] })
+    expect(await listContainerArrivalTimes(['9001'])).toEqual([{ ...row, planCount: 1 }])
+    for (const planCount of [undefined, null, '', 'unknown', -1, 0.5]) {
+      vi.mocked(http.post).mockResolvedValue({ code: '200', data: [{ ...row, planCount }] })
+      await expect(listContainerArrivalTimes(['9001'])).rejects.toThrow('入库计划数量无效')
+    }
+  })
 })

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

@@ -6,6 +6,14 @@ export interface ContainerArrivalTime {
   estimatedWarehouseArrivalAt: string | null
   actualWarehouseArrivalAt: string | null
   version: number
+  planCount: number
+}
+
+function normalizeArrival(item: ContainerArrivalTime): ContainerArrivalTime {
+  if (typeof item.planCount !== 'number' && (typeof item.planCount !== 'string' || !/^(0|[1-9]\d*)$/.test(item.planCount))) throw new Error('到仓记录的入库计划数量无效，请刷新后重试')
+  const count = Number(item.planCount)
+  if (item.planCount == null || !Number.isSafeInteger(count) || count < 0) throw new Error('到仓记录的入库计划数量无效，请刷新后重试')
+  return { ...item, version: Number(item.version), planCount: count }
 }
 
 const queryPath = '/platform/v1/last-leg/orders/container-arrival-times/query'
@@ -20,7 +28,7 @@ export async function listContainerArrivalTimes(sourceContainerBookingIds: strin
     queryPath,
     { sourceContainerBookingIds },
   )
-  return (unwrapApiResponse(response) || []).map((item) => ({ ...item, version: Number(item.version || 0) }))
+  return (unwrapApiResponse(response) || []).map(normalizeArrival)
 }
 
 export async function updateContainerExpectedArrival(
@@ -33,5 +41,5 @@ export async function updateContainerExpectedArrival(
     { headers: { 'Idempotency-Key': operationId(sourceContainerBookingId) } },
   )
   const result = unwrapApiResponse(response)
-  return { ...result, version: Number(result.version || 0) }
+  return normalizeArrival(result)
 }

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

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { http } from '@/shared/api/http'
-import { recordClearanceResult, type DeclarationBatch } from './platformContainerCustoms'
+import { createDeclarationBatch, submitDeclarationBatch, recordClearanceResult, type DeclarationBatch } from './platformContainerCustoms'
 import { completeAllBuyContainerCustoms, downloadContainerCustomsReceipt, downloadContainerCustomsDocument, getContainerCustoms, sendContainerCustomsToBroker, startContainerCustoms, uploadContainerCustomsReceipt } from './platformContainerCustoms'
 
 const customs = {
@@ -15,6 +15,22 @@ const customs = {
 describe('platform container customs API', () => {
   beforeEach(() => vi.restoreAllMocks())
 
+  it('preserves the server batch number when creating and submitting a declaration', async () => {
+    const batch = { id: '123', customsContainerId: '456', loadingPlanId: '789', batchNo: 'DECL202610200001', sourceVersion: 1, version: 0, results: [] }
+    const post = vi.spyOn(http, 'post').mockResolvedValue({ code: '200', data: batch })
+    const created = await createDeclarationBatch('789', 3)
+    expect(created.batchNo).toBe('DECL202610200001')
+    expect(post.mock.calls[0]?.slice(0, 2)).toEqual([
+      '/platform/v1/customs/loading-plans/789/declaration-batches', { expectedVersion: 3, remark: null },
+    ])
+    const submitted = await submitDeclarationBatch(created, ' CUSTOMS-EXTERNAL-1 ')
+    expect(submitted.batchNo).toBe(created.batchNo)
+    expect(post.mock.calls[1]?.slice(0, 2)).toEqual([
+      '/platform/v1/customs/loading-plans/declaration-batches/123/submit',
+      { expectedVersion: 0, customsEntryNo: 'CUSTOMS-EXTERNAL-1', remark: null },
+    ])
+  })
+
   it('records domestic customs time in Shanghai even when UTC falls on the previous day', async () => {
     vi.useFakeTimers()
     try {

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

@@ -178,13 +178,13 @@ export async function getDeclarationBatches(loadingPlanId: string) {
   return (unwrapApiResponse(response) || []).map(normalizeDeclarationBatch)
 }
 
-export async function createDeclarationBatch(loadingPlanId: string, expectedVersion: number, batchNo?: string) {
-  const response = await http.post<ApiEnvelope<DeclarationBatch>, ApiEnvelope<DeclarationBatch>>(`${basePath}/${encodeURIComponent(loadingPlanId)}/declaration-batches`, { expectedVersion, batchNo: batchNo?.trim() || null, remark: null }, { headers: { 'Idempotency-Key': operationId('customs-declaration-batch-create') } })
+export async function createDeclarationBatch(loadingPlanId: string, expectedVersion: number) {
+  const response = await http.post<ApiEnvelope<DeclarationBatch>, ApiEnvelope<DeclarationBatch>>(`${basePath}/${encodeURIComponent(loadingPlanId)}/declaration-batches`, { expectedVersion, remark: null }, { headers: { 'Idempotency-Key': operationId('customs-declaration-batch-create') } })
   return normalizeDeclarationBatch(unwrapApiResponse(response))
 }
 
 export async function submitDeclarationBatch(batch: DeclarationBatch, customsEntryNo: string) {
-  const response = await http.post<ApiEnvelope<DeclarationBatch>, ApiEnvelope<DeclarationBatch>>(`${basePath}/declaration-batches/${encodeURIComponent(batch.id)}/submit`, { expectedVersion: batch.version, batchNo: batch.batchNo, customsEntryNo: customsEntryNo.trim(), remark: null }, { headers: { 'Idempotency-Key': operationId('customs-declaration-batch-submit') } })
+  const response = await http.post<ApiEnvelope<DeclarationBatch>, ApiEnvelope<DeclarationBatch>>(`${basePath}/declaration-batches/${encodeURIComponent(batch.id)}/submit`, { expectedVersion: batch.version, customsEntryNo: customsEntryNo.trim(), remark: null }, { headers: { 'Idempotency-Key': operationId('customs-declaration-batch-submit') } })
   return normalizeDeclarationBatch(unwrapApiResponse(response))
 }
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
 import { createPlatformExportTask } from '@/modules/downloads'
@@ -295,7 +296,7 @@ onMounted(load)
 </script>
 
 <template>
-  <section class="container-customs surface-panel admin-density" aria-label="整柜报关">
+  <section class="container-customs surface-panel admin-density admin-workbench" aria-label="整柜报关">
     <OperationErrorToast :details="actionError" />
     <header class="customs-header">
       <div><h2>整柜报关</h2></div>
@@ -323,11 +324,11 @@ onMounted(load)
       </dl>
       <div v-if="missingInbounds.length" class="compact-table-wrap">
         <h3>缺退税资料清单</h3>
-        <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 class="workbench-evidence"><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>
       <div v-if="customs.documents.length" class="compact-table-wrap">
         <h3>已冻结退税资料、报关行回执与完税文件</h3>
-        <table class="compact-table document-table density-table"><thead><tr><th>操作</th><th>客户退税资料</th><th>报关行回执</th><th>真实报关完税文件</th><th>关联入仓码</th><th>报关行状态</th><th>版本</th><th>客户</th><th>回执情况</th></tr></thead><tbody>
+        <div class="workbench-evidence"><table class="compact-table document-table density-table"><thead><tr><th>操作</th><th>客户退税资料</th><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 density-actions"><el-upload :disabled="!brokerSubmission || brokerSubmitted" :auto-upload="false" :limit="1" :show-file-list="false" :on-change="(upload: UploadFile) => selectReceipt(document.documentId, upload)"><el-button class="density-action" size="small" :disabled="!brokerSubmission || brokerSubmitted">{{ !brokerSubmission ? '首次发送后上传回执' : document.receipt ? '覆盖报关行回执' : '上传报关行回执' }}</el-button></el-upload><el-button data-tone="primary" class="density-action" size="small" type="primary" :disabled="!brokerSubmission || brokerSubmitted || !receiptFiles[document.documentId]" :loading="actionLoading" @click="uploadReceipt(document)">提交</el-button><el-upload :disabled="!brokerSubmitted" :auto-upload="false" :limit="1" :show-file-list="false" :on-change="(upload: UploadFile) => selectFinal(document.documentId, upload)"><el-button class="density-action" size="small" :disabled="!brokerSubmitted">{{ document.finalDocument ? '覆盖完税文件' : '上传完税文件' }}</el-button></el-upload><el-button data-tone="primary" class="density-action" size="small" type="primary" :disabled="!brokerSubmitted || !finalFiles[document.documentId]" :loading="actionLoading" @click="uploadFinal(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>
@@ -335,7 +336,7 @@ onMounted(load)
             <td><div v-if="document.finalDocument" class="file-cell"><span :title="document.finalDocument.fileName">{{ document.finalDocument.fileName }}</span><el-button class="density-action" type="primary" :loading="downloadingKey === `final:${document.documentId}`" :aria-label="`下载报关完税文件 ${document.finalDocument.fileName}`" @click="downloadFile(document, 'final')">下载</el-button></div><span v-else>未上传</span></td>
             <td>{{ document.inboundCodes.join('、') || '—' }}</td><td>{{ brokerSubmitted ? '已发送报关行执行' : brokerSubmission ? '已首次发送，等待回执确认' : '待首次发送报关行' }}</td><td>退税资料 v{{ document.source.version }}<span v-if="document.receipt"> / 回执 v{{ document.receipt.version }}</span><span v-if="document.finalDocument"> / 完税 v{{ document.finalDocument.version }}</span><small v-if="document.receiptHistory?.length" class="receipt-history-note">回执历史：{{ receiptHistoryLabel(document) }}</small><small v-for="history in document.confirmationHistory" :key="history.id" class="confirmation-history-note">{{ confirmationActionLabel(history.action) }} · {{ formatDateTime(history.createdAt) }} · {{ history.operatorName || '—' }}<span v-if="history.reason"> · {{ history.reason }}</span></small></td><td>{{ documentCustomers(document) }}</td><td>{{ document.receipt ? (document.receiptStatus === 'CONFIRMED' ? '客户已确认回执' : document.receiptStatus === 'REJECTED' ? '客户已打回回执' : '待客户确认回执') : '待上传报关行回执' }}</td>
           </tr>
-        </tbody></table>
+        </tbody></table></div>
       </div>
       <div v-if="['DECLARING', 'COMPLETED'].includes(customs.status) && brokerSubmitted" class="compact-table-wrap declaration-batches-wrap">
         <div class="declaration-batches-heading"><div><h3>正式申报与海关结果</h3></div><el-button v-if="canManage && !openDeclarationBatch" size="small" type="primary" :loading="actionLoading" @click="createFormalDeclaration">创建正式申报批次</el-button></div>
@@ -353,7 +354,7 @@ onMounted(load)
       <div v-if="customs.status === 'COMPLETED'" class="departure-state"><strong>国内离仓状态：</strong><el-tag :type="departureState === 'DEPARTED' ? 'success' : 'warning'">{{ departureState === 'DEPARTED' ? '已自动离仓' : departureState === 'UNKNOWN' ? '离仓状态尚未读取' : '报关已完成，待其他离仓条件' }}</el-tag></div>
     </template>
     <el-empty v-else-if="canList" description="当前装柜计划尚未完成，完成装柜后可处理报关" :image-size="56" />
-    <AppDialog v-model="clearanceDialogVisible" class="admin-density-dialog" :title="customsDialogTitle('标记海关异常/结果', clearanceBatch)" width="460px" :close-on-click-modal="false" :lock-while-submitting="false" :confirm-loading="actionLoading" confirm-text="确认标记" @confirm="recordFormalResult">
+    <AppDialog v-model="clearanceDialogVisible" class="admin-density-dialog admin-workbench is-dialog" :title="customsDialogTitle('标记海关异常/结果', clearanceBatch)" width="460px" :close-on-click-modal="false" :lock-while-submitting="false" :confirm-loading="actionLoading" confirm-text="确认标记" @confirm="recordFormalResult">
       <el-form label-position="top" class="density-form density-form--flush-end">
         <el-form-item label="选择理由" required>
           <el-select v-model="clearanceResultType" placeholder="请选择理由">
@@ -369,5 +370,5 @@ onMounted(load)
 </template>
 
 <style scoped>
-.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-summary{margin-top:var(--admin-space-4)!important}.customs-summary .submission-batch{grid-column:span 2}.coverage-missing{color:var(--el-color-danger)!important}.compact-table-wrap{margin-top:var(--admin-space-5);overflow-x:auto}.confirmation-history-note,.receipt-history-note{display:block;margin-top:var(--admin-space-2);color:var(--cc-muted)}.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)}.declaration-batches-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--admin-space-4)}.declaration-batches-heading p{margin:3px 0 0;color:var(--cc-muted);font-size:var(--admin-font-caption)}.declaration-batch-list{display:grid;gap:var(--admin-space-3)}.declaration-batch-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--admin-space-2) var(--admin-space-4);padding:var(--admin-space-3) var(--admin-space-4);border:1px solid var(--cc-border);background:var(--cc-surface-muted)}.declaration-batch-main strong,.declaration-batch-main span{display:block}.declaration-batch-main span{margin-top:4px;color:var(--cc-muted);font-size:var(--admin-font-caption)}.declaration-batch-actions,.declaration-result-list{grid-column:1 / -1}.declaration-result-list{display:grid;gap:5px;padding-top:var(--admin-space-2);border-top:1px solid var(--cc-border)}.declaration-result-row{display:flex;align-items:center;gap:var(--admin-space-2);font-size:var(--admin-font-caption)}.declaration-result-row small{flex:1;color:var(--cc-muted)}
+.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(--workbench-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-summary{margin-top:var(--admin-space-4)!important}.customs-summary .submission-batch{grid-column:span 2}.coverage-missing{color:var(--el-color-danger)!important}.compact-table-wrap{margin-top:var(--admin-space-5);overflow-x:auto}.confirmation-history-note,.receipt-history-note{display:block;margin-top:var(--admin-space-2);color:var(--workbench-muted)}.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(--workbench-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(--workbench-border);font-size:var(--admin-font-body)}.declaration-batches-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--admin-space-4)}.declaration-batches-heading p{margin:3px 0 0;color:var(--workbench-muted);font-size:var(--admin-font-caption)}.declaration-batch-list{display:grid;gap:var(--admin-space-3)}.declaration-batch-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--admin-space-2) var(--admin-space-4);padding:var(--admin-space-3) var(--admin-space-4);border:1px solid var(--workbench-border);background:var(--workbench-surface-soft)}.declaration-batch-main strong,.declaration-batch-main span{display:block}.declaration-batch-main span{margin-top:4px;color:var(--workbench-muted);font-size:var(--admin-font-caption)}.declaration-batch-actions,.declaration-result-list{grid-column:1 / -1}.declaration-result-list{display:grid;gap:5px;padding-top:var(--admin-space-2);border-top:1px solid var(--workbench-border)}.declaration-result-row{display:flex;align-items:center;gap:var(--admin-space-2);font-size:var(--admin-font-caption)}.declaration-result-row small{flex:1;color:var(--workbench-muted)}
 </style>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getFinancePaymentVoucher, downloadFinancePaymentVoucher } from '@/modules/finance'
@@ -165,7 +166,7 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="last-leg-fees admin-density">
+  <div class="last-leg-fees admin-density admin-workbench">
     <header class="last-leg-fees__header"><div><h2>{{ title }}<InlineHelp title="费用统计说明"><p>按真实货柜展示港口、堆存、修箱、吊机和码头拖车费用，金额按币种分别列示。</p></InlineHelp></h2></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="当前货柜尚未补录真实集装箱号，暂不能新增尾程费用。" />
@@ -184,21 +185,21 @@ onMounted(load)
       <el-table-column label="作废确认" min-width="130"><template #default="{ row }">{{ voidLabels[row.voidStatus] || '—' }}</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 class="admin-density-dialog" v-model="dialogOpen" :title="containerDialogTitle(editing ? '调整尾程费用' : '新增尾程费用', props)" width="min(920px, calc(100vw - 28px))" fullscreenable confirm-text="保存" :confirm-loading="actionLoading" :confirm-disabled="voucherUploading" @confirm="save">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="dialogOpen" :title="containerDialogTitle(editing ? '调整尾程费用' : '新增尾程费用', props)" width="min(920px, calc(100vw - 28px))" fullscreenable confirm-text="保存" :confirm-loading="actionLoading" :confirm-disabled="voucherUploading" @confirm="save">
       <section class="density-dialog-section" data-tone="work">
         <el-form class="density-form" label-position="left">
-          <table class="density-table density-table--editable fee-editor-table" aria-label="尾程费用填写"><tbody>
+          <div class="workbench-evidence"><table class="density-table density-table--editable fee-editor-table" aria-label="尾程费用填写"><tbody>
             <tr><td><el-form-item label-position="left" label-width="110px" label="客户" required><span v-if="editing">{{ customerName(form.customerId) || editing.customerName || '—' }}</span><el-select v-else v-model="form.customerId" :disabled="voucherUploading" placeholder="请选择柜内客户"><el-option v-for="customer in customers" :key="customer.customerId" :label="customer.customerName || '未命名客户'" :value="customer.customerId" /></el-select></el-form-item></td><td><el-form-item label-position="left" label-width="110px" 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></td></tr>
             <tr><td><el-form-item label-position="left" label-width="110px" label="费用方向" required><el-select v-model="form.direction"><el-option label="应收" value="RECEIVABLE" /><el-option label="应付" value="PAYABLE" /></el-select></el-form-item></td><td><el-form-item label-position="left" label-width="110px" label="业务日期" required><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td></tr>
             <tr><td :colspan="form.direction === 'PAYABLE' ? 1 : 2"><el-form-item label-position="left" label-width="110px" label="金额（CNY）" required><el-input-number v-model="form.amount" :min="0.01" :precision="2" :step="10" placeholder="请输入费用金额" /></el-form-item></td><td v-if="form.direction === 'PAYABLE'"><el-form-item label-position="left" label-width="110px" 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></td></tr>
             <tr v-if="form.direction === 'PAYABLE'"><td :colspan="form.settlementMode === 'DIRECT_PAID' ? 1 : 2"><el-form-item label-position="left" label-width="110px" 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></td><td v-if="form.settlementMode === 'DIRECT_PAID'"><el-form-item label-position="left" label-width="110px" label="付款时间" required><el-date-picker v-model="form.paidAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td></tr>
             <tr v-if="form.direction === 'PAYABLE' && form.settlementMode === 'DIRECT_PAID'"><td><el-form-item label-position="left" label-width="110px" 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></td><td><el-form-item label-position="left" label-width="110px" label="付款流水号"><el-input v-model="form.paymentReferenceNo" maxlength="128" /></el-form-item></td></tr>
             <tr v-if="form.direction === 'PAYABLE' && form.settlementMode === 'DIRECT_PAID'"><td :colspan="2"><el-form-item label-position="left" label-width="110px" 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></td></tr>
-          </tbody></table>
+          </tbody></table></div>
         </el-form>
       </section>
     </AppDialog>
-    <AppDialog class="admin-density-dialog last-leg-voucher-dialog" v-model="previewOpen" :title="containerDialogTitle('付款凭证', props)" :fullscreenable="Boolean(previewUrl) && previewIsImage" width="min(900px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭" append-to-body>
+    <AppDialog class="admin-density-dialog last-leg-voucher-dialog admin-workbench is-dialog" v-model="previewOpen" :title="containerDialogTitle('付款凭证', props)" :fullscreenable="Boolean(previewUrl) && previewIsImage" 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="density-dialog-section voucher-preview" data-tone="source"><p class="density-dialog-note">{{ previewName }}</p><img v-if="previewIsImage" :src="previewUrl" :alt="previewName" /><p v-else>此文件暂不支持预览，请下载后查看。</p><a :href="previewUrl" :download="previewName">下载付款凭证</a></div>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { TriangleAlert } from '@lucide/vue'
 import { getApiErrorDetails } from '@/shared/api/http'
@@ -120,15 +121,15 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
 </script>
 
 <template>
-  <div class="overview-panel admin-density">
+  <div class="overview-panel admin-density admin-workbench">
     <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>
+      <div class="exception-history"><p v-if="overview.exceptionHistory.length === 0" class="exception-history__empty">暂无异常处理记录</p><template v-else><div class="exception-history__head"><span>时间</span><span>动作</span><span>操作人</span><span>原因</span></div><ol><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></template></div>
     </section>
 
     <section v-if="visibleSections.has('documents')" class="overview-section overview-section--documents" aria-label="报关清关资料">
       <div class="document-table-wrap">
-        <table class="document-table density-table">
+        <div class="workbench-evidence"><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 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>
@@ -145,7 +146,7 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
             <td>{{ formatTime(overview.container.pickupCodeUpdatedAt) }}</td>
             <td><el-tag size="small" :type="overview.container.pickupCode ? 'success' : 'info'">{{ overview.container.pickupCode ? '已填写' : '未填写' }}</el-tag></td>
           </tr></tbody>
-        </table>
+        </table></div>
       </div>
     </section>
 
@@ -165,13 +166,13 @@ onBeforeUnmount(() => { photoGeneration += 1; revokePhotoUrls() })
 .overview-section--documents{padding:0;border:0}
 .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}
+.overview-section header > span, .overview-section small { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.overview-section p { margin: 5px 0; color: var(--workbench-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(--workbench-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(--workbench-muted);font-weight:650}.exception-history ol{margin:0;padding:0;list-style:none}.exception-history li{border-top:1px solid var(--workbench-border)}.exception-history li time,.exception-history li span{color:var(--workbench-muted);white-space: normal;overflow-wrap: anywhere}.exception-history__empty{margin:0!important;padding:7px var(--admin-space-1);border-top:1px solid var(--workbench-border);font-size:var(--admin-font-caption)!important}
+.document-table-wrap{width:100%;overflow-x:auto;border:1px solid var(--workbench-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(--workbench-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(--workbench-muted)}.document-actions{white-space:nowrap}.document-actions :deep(.el-button){margin-left:0}.no-action{color:var(--workbench-muted)}.pickup-code-row :deep(.el-input){max-width:260px}.pickup-code-row :deep(.el-input__inner){font-variant-numeric:tabular-nums}
 .overview-panel .pda-summary { grid-template-columns: minmax(280px, 2fr) repeat(4, minmax(0, 1fr)); margin-bottom: var(--admin-space-4); }
 .pda-progress dd { width: 100%; }
-.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));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%;height:112px;object-fit:contain;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:grid;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}
+.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));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(--workbench-border);background:var(--admin-surface);color:inherit;text-align:left;cursor:pointer}.photo-thumb:disabled{cursor:default}.photo-thumb img,.photo-placeholder{width:100%;height:112px;object-fit:contain;background:var(--cc-bg-subtle,#f7f8fa)}.photo-placeholder{display:grid;place-items:center;padding:var(--admin-space-3);color:var(--workbench-muted);font-size:var(--admin-font-caption)}.photo-placeholder--error{color:var(--el-color-danger)}.photo-caption{display:grid;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(--workbench-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(--workbench-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(--workbench-muted);text-overflow:ellipsis;white-space:nowrap}
 @media (max-width: 1200px){.photo-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.overview-panel .pda-summary{grid-template-columns:1fr 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}.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.test.ts

@@ -6,6 +6,8 @@ import { listWarehouseLogisticsChannels } from '@/modules/ocean-bookings'
 import { createContainerSimulation } from '../api/platformContainerLoading'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import ContainerSimulationCreate from './ContainerSimulationCreate.vue'
+import DataTable from '@/shared/components/DataTable.vue'
+import { h } from 'vue'
 
 // Node's supported CJS export keeps the real form validator's constructor intact.
 const ElementPlus = (createRequire(import.meta.url)('element-plus') as typeof import('element-plus')).default
@@ -19,13 +21,26 @@ afterEach(() => { document.body.innerHTML = '' })
 
 describe('ContainerSimulationCreate opted-in form', () => {
   it.each([true, false])('preserves required fields and the fixed request in dense=%s mode', async (dense) => {
-    const wrapper = mount(ContainerSimulationCreate, { props: { dense, loadWarehouseOptions: async () => [warehouse] }, global: { plugins: [ElementPlus] }, attachTo: document.body })
+    const host = mount(DataTable, {
+      props: { data: [], columns: [] },
+      slots: { 'toolbar-actions': () => h(ContainerSimulationCreate, { dense, loadWarehouseOptions: async () => [warehouse] }) },
+      global: { plugins: [ElementPlus] },
+      attachTo: document.body,
+    })
+    const wrapper = host.findComponent(ContainerSimulationCreate)
+    expect(wrapper.get('button').element.closest('.data-table__toolbar-actions')).not.toBeNull()
     await wrapper.findAll('button').find(button => button.text().includes('新增模拟柜'))!.trigger('click')
     await flushPromises()
     const dialog = wrapper.findComponent(AppDialog)
+    const dialogRoot = document.body.querySelector<HTMLElement>('.simulation-create-dialog')!
+    expect(dialogRoot).not.toBeNull()
+    expect(dialogRoot.closest('.data-table__toolbar')).toBeNull()
+    expect(dialogRoot.querySelector('.el-dialog__footer button')?.closest('.data-table__toolbar')).toBeNull()
+    expect(dialog.props('width')).toBe('min(800px, calc(100vw - 32px))')
     dialog.vm.$emit('confirm')
     await flushPromises()
     expect(createContainerSimulation).not.toHaveBeenCalled()
+    await vi.waitFor(() => expect(dialogRoot.querySelectorAll('.el-form-item__error').length).toBeGreaterThan(0))
     const fields = dialog.findAllComponents({ name: 'ElFormItem' })
     expect(fields).toHaveLength(3)
     fields.find(field => field.props('prop') === 'warehouseId')!.findComponent({ name: 'ElSelect' }).vm.$emit('update:modelValue', '8')
@@ -37,5 +52,17 @@ describe('ContainerSimulationCreate opted-in form', () => {
     await flushPromises()
     expect(createContainerSimulation).toHaveBeenCalledExactlyOnceWith({ warehouseId: '8', channelGroupCode: 'MATSON_CLX', containerType: '40HQ', capacityCbm: 68, maxWeightKg: 19500 })
     expect(wrapper.emitted('created')).toHaveLength(1)
+    expect(dialog.props('modelValue')).toBe(false)
+    await wrapper.get('button').trigger('click')
+    await flushPromises()
+    expect(dialog.props('modelValue')).toBe(true)
+    expect(dialogRoot.closest('.data-table__toolbar')).toBeNull()
+    expect(dialog.findAllComponents({ name: 'ElFormItem' }).find(field => field.props('prop') === 'warehouseId')!.findComponent({ name: 'ElSelect' }).props('modelValue')).toBe('')
+    const cancel = Array.from(dialogRoot.querySelectorAll<HTMLButtonElement>('.el-dialog__footer button')).find(button => button.textContent?.trim() === '取消')!
+    cancel.click()
+    await flushPromises()
+    expect(dialog.props('modelValue')).toBe(false)
+    expect(host.find('.data-table__toolbar-actions').exists()).toBe(true)
+    expect(createContainerSimulation).toHaveBeenCalledTimes(1)
   })
 })

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, reactive, ref } from 'vue'
 import { Container, Plus } from '@lucide/vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
@@ -98,8 +99,9 @@ async function saveSimulation() {
   <AppDialog
     v-model="simulationOpen"
     class="simulation-create-dialog"
-    :class="{ 'admin-density-dialog': dense, 'admin-density-dialog--comfortable': dense }"
+    :class="{ 'admin-density-dialog': dense, 'admin-density-dialog--comfortable': dense, 'admin-workbench': dense, 'is-dialog': dense }"
     title="新增模拟柜"
+    append-to-body
     width="min(800px, calc(100vw - 32px))"
     confirm-text="创建模拟柜"
     cancel-text="取消"

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { listOceanBookingLinkCandidates } from '@/modules/ocean-bookings'
@@ -99,14 +100,14 @@ defineExpose({ candidates, candidateKey, containerNo, save })
 </script>
 
 <template>
-  <AppDialog class="admin-density-dialog" :model-value="modelValue" :title="containerDialogTitle('关联已放舱订舱', container)" fullscreenable 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">
+  <AppDialog class="admin-density-dialog admin-workbench is-dialog" :model-value="modelValue" :title="containerDialogTitle('关联已放舱订舱', container)" fullscreenable 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">
     <section class="density-dialog-section" data-tone="work">
       <el-form class="density-form" label-position="left" label-width="160px">
-        <table class="density-table density-table--editable" aria-label="关联订舱资料"><tbody>
+        <div class="workbench-evidence"><table class="density-table density-table--editable" aria-label="关联订舱资料"><tbody>
           <tr><td><el-form-item label="柜次号"><span>{{ container?.cabinetNo || '—' }}</span></el-form-item></td></tr>
           <tr><td><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></td></tr>
           <tr><td><el-form-item label="真实集装箱号（可选）"><el-input v-model="containerNo" maxlength="64" placeholder="如未取得可留空，后续显示待补录" @blur="containerNo = normalizeContainerNo(containerNo)" /></el-form-item></td></tr>
-        </tbody></table>
+        </tbody></table></div>
       </el-form>
     </section>
     <LoadErrorState v-if="error" compact title="关联失败" :message="error.message" :show-retry="false"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>

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

@@ -46,8 +46,9 @@ describe('SmartLoadingDialog', () => {
     expect(source).toContain('.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)')
     expect(source).toContain('height: 94vh; max-height: 94vh;')
     expect(source).not.toContain('.smart-loading-dialog.app-dialog.el-dialog) { width: min(1600px, 98vw)')
-    expect(source).toContain('.smart-loading-dialog.app-dialog.admin-density-dialog .el-dialog__body')
+    expect(source).toContain('.smart-loading-dialog.app-dialog.admin-density-dialog > .el-dialog__body')
     expect(source).toContain('flex: 1; padding: 0; overflow: hidden;')
-    expect(source).toContain('min-height: 0; flex: 1; overflow: hidden;')
+    expect(source).toContain('min-height: 0; flex: 1; padding: var(--admin-space-5); box-sizing: border-box; overflow: hidden;')
+    expect(source).toContain('width="min(1840px, calc(100vw - 48px))"')
   })
 })

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import GlobalSmartLoadingView from '../pages/GlobalSmartLoadingView.vue'
 
@@ -9,9 +10,9 @@ const open = defineModel<boolean>({ default: false })
 <template>
   <AppDialog
     v-model="open"
-    class="smart-loading-dialog admin-density-dialog"
+    class="smart-loading-dialog admin-density-dialog admin-workbench is-dialog"
     title="智能装柜"
-    width="min(1600px, 98vw)"
+    width="min(1840px, calc(100vw - 48px))"
     fullscreenable
     default-fullscreen
     cancel-text="关闭"
@@ -23,9 +24,9 @@ const open = defineModel<boolean>({ default: false })
 </template>
 
 <style scoped>
-:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: min(1600px, 98vw); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
-:global(.smart-loading-dialog.app-dialog.admin-density-dialog .el-dialog__body) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
-:global(.smart-loading-dialog .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
+:global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: min(1840px, calc(100vw - 48px)); height: 94vh; max-height: 94vh; margin-block: 3vh !important; }
+:global(.smart-loading-dialog.app-dialog.admin-density-dialog > .el-dialog__body) { display: flex; min-height: 0; flex: 1; padding: 0; overflow: hidden; }
+:global(.smart-loading-dialog > .el-dialog__body > .app-dialog__body) { display: flex; min-width: 0; min-height: 0; flex: 1; padding: var(--admin-space-5); box-sizing: border-box; overflow: hidden; }
 @media (max-width: 720px) {
   :global(.smart-loading-dialog.app-dialog.el-dialog:not(.is-fullscreen)) { width: calc(100vw - 12px); height: calc(100svh - 12px); max-height: calc(100svh - 12px); margin-block: 6px !important; }
 }

src/modules/container-loading/index.ts

@@ -1,5 +1,6 @@
 export * from './api/platformContainerLoading'
 export * from './types'
+export { projectWarehouseArrival } from './warehouseArrival'
 export { getSmartLoadingChannelGroup, isSeaRailChannel, SMART_LOADING_CHANNEL_GROUPS } from './smartLoadingChannelGroups'
 export { default as SmartLoadingDialog } from './components/SmartLoadingDialog.vue'
 export { default as ContainerSimulationCreate } from './components/ContainerSimulationCreate.vue'

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

@@ -57,6 +57,14 @@ function accessibleText(wrapper: { element: Element } | undefined) {
 }
 
 describe('ContainerDetailView empty return', () => {
+  it('shows the same default warehouse date as the calendar, with no fabricated midnight', async () => {
+    vi.mocked(getContainer).mockResolvedValue({ ...base, estimatedPortArrivalAt: '2026-10-20T10:00:00', actualFacts: { arrivedDestinationPortAt: '2026-10-21T15:49:00' } } as never)
+    vi.mocked(listContainerArrivalTimes).mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0, planCount: 0 }])
+    const wrapper = await mountDetail()
+    const value = wrapper.findAll('dt').find(item => item.text() === '预计到仓')!.element.nextElementSibling!.textContent
+    expect(value).toBe('2026-10-23（默认推算）')
+    expect(value).not.toContain('00:00')
+  })
   it('passes the original container to schedule maintenance and reloads its projection after save', async () => {
     const wrapper = await mountDetail('DOMESTIC')
     const panel = wrapper.findComponent({ name: 'ContainerPortSchedulePanel' })
@@ -83,7 +91,7 @@ describe('ContainerDetailView empty return', () => {
     vi.mocked(getContainerOverview).mockReset().mockResolvedValue(overview as never)
     vi.mocked(getConfirmedLoadingList).mockReset().mockResolvedValue({ planNo: 'LP-1', summary: { status: 'COMPLETED' }, items: [] } as never)
     vi.mocked(recordTerminalDrayageEmptyReturn).mockReset().mockResolvedValue({ ...base.terminalDrayage, status: 'EMPTY_RETURNED', version: 4, actualEmptyReturnAt: '2026-09-09T12:00:00', allowedActions: [] } as never)
-    vi.mocked(listContainerArrivalTimes).mockReset().mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 0 }])
+    vi.mocked(listContainerArrivalTimes).mockReset().mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 0, planCount: 0 }])
   })
 
   it('records a real direct-delivery source with explicit local time and proof, retaining the request after an unknown outcome', async () => {

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

@@ -53,9 +53,9 @@ describe('ContainerDetailView customs integration', () => {
   })
 
   it('keeps the loaded overview mounted while switching fee tabs', () => {
-    expect(source).toContain("v-show=\"activeTab === 'overview'\" class=\"detail-section surface-panel\" aria-labelledby=\"container-voyage-heading\"")
+    expect(source).toContain("v-show=\"activeTab === 'overview'\" class=\"detail-section workbench-panel is-compact\" aria-labelledby=\"container-voyage-heading\"")
     expect(source).toContain("v-if=\"isOverseas\" v-show=\"activeTab === 'overview'\"")
-    expect(source).not.toContain("v-if=\"activeTab === 'overview'\" class=\"detail-section surface-panel\"")
+    expect(source).not.toContain("v-if=\"activeTab === 'overview'\" class=\"detail-section workbench-panel is-compact\"")
   })
 
   it('exposes empty return directly in overseas detail only when permission and server action both allow it', () => {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { appointmentReturnTarget } from '@/modules/appointment-calendar'
 import { listSuppliers, type Supplier } from '@/modules/suppliers'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
@@ -45,6 +46,7 @@ import {
 } from '../api/platformContainerLoading'
 import { recordTerminalDrayageEmptyReturn, getDirectDeliveries, recordDirectDelivery, getTerminalDrayage, selectTerminalDrayageFleet, scheduleTerminalDrayagePickup, recordTerminalPickup, type TerminalDrayageView, type DirectDelivery, type DirectDeliveryCommand } from '../api/terminalDrayages'
 import { listContainerArrivalTimes, type ContainerArrivalTime } from '../api/containerArrivalTimes'
+import { projectWarehouseArrival } from '../warehouseArrival'
 import type { BusinessDocument, ContainerBookingResource, ContainerOverview, ContainerOverviewDocument, ContainerPlanStatus, ContainerWorkbenchAction, ContainerWorkbenchRow } from '../types'
 
 const props = withDefaults(defineProps<{ workbench?: 'DOMESTIC' | 'OVERSEAS' }>(), { workbench: 'DOMESTIC' })
@@ -90,6 +92,14 @@ async function rememberWorkbenchTab(tabName: string | number) {
 }
 const workbenchDetail = ref<ContainerWorkbenchRow | null>(null)
 const arrivalTime = ref<ContainerArrivalTime | null>(null)
+const expectedArrivalText = computed(() => {
+  const row = workbenchDetail.value
+  const arrival = arrivalTime.value
+  const projected = projectWarehouseArrival(row?.actualFacts?.arrivedDestinationPortAt || row?.actualPortArrivalAt || row?.estimatedPortArrivalAt,
+    arrival ? { ...arrival, plannedAt: arrival.estimatedWarehouseArrivalAt } : undefined)
+  return arrival?.estimatedWarehouseArrivalAt ? formatTime(arrival.estimatedWarehouseArrivalAt)
+    : projected.date ? `${projected.date}（默认推算）` : '—'
+})
 const hasAction = (action: ContainerWorkbenchAction) => Boolean(workbenchDetail.value?.allowedActions?.includes(action))
 const canEdit = computed(() => isDomestic.value && access.can('platform:firstleg:container:edit') && hasAction('EDIT_CONTAINER'))
 const canManageCustoms = computed(() => isDomestic.value && access.can('platform:firstleg:customs:manage') && hasAction('MANAGE_CUSTOMS'))
@@ -666,8 +676,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <AdminPage class="container-detail-page admin-density">
-    <section class="container-overview surface-panel">
+  <AdminPage spacing="compact" class="container-detail-page admin-density admin-workbench">
+    <section class="container-overview workbench-panel is-flush">
       <header class="container-overview__header"><el-button link class="density-back" type="primary" @click="goBack"><ArrowLeft :size="16" />{{ appointmentReturnTarget(route.query) ? '返回预约工作' : '返回列表' }}</el-button><div><h1>{{ title }}</h1>
         <!-- <p>{{ isDomestic ? '送柜、装柜、出口报关与国内出仓' : '海运节点、目的港清关、提柜与还空' }}</p> -->
       </div><StatusBadge v-if="detail" :status="primaryStatusText" /></header>
@@ -676,34 +686,33 @@ onMounted(async () => {
     </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 density-element-tabs" @tab-change="rememberWorkbenchTab">
+      <el-tabs v-model="activeTab" class="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">
+      <section v-show="activeTab === 'overview'" class="detail-section workbench-panel is-compact" aria-labelledby="container-information-heading">
         <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>{{ containerChannelLabel(detail) }}</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>
-        <ContainerPortSchedulePanel :container="detail" @saved="load" />
+      <section v-show="activeTab === 'overview'" class="detail-section workbench-panel is-compact" aria-labelledby="container-voyage-heading">
+        <header class="detail-section__heading"><h2 id="container-voyage-heading">船名航次信息</h2><ContainerPortSchedulePanel :container="detail" @saved="load" /></header>
         <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 :cabinet-no="detail.cabinetNo" :container-no="detail.containerNo" :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">
+      <section v-show="activeTab === 'overview'" class="detail-section workbench-panel is-compact" aria-labelledby="container-customs-heading">
         <h2 id="container-customs-heading">{{ isDomestic ? '出口报关信息' : '目的港清关与提柜资料' }}</h2>
         <ContainerOverviewPanel v-if="isOverseas && overview" :overview="overview" :sections="['documents']" :can-manage-documents="canManageDestinationDocuments" :can-manage-customs="canManageDestinationDocuments" :can-manage-exception="false" :document-busy="documentDownloading" :pickup-code-busy="pickupCodeSaving" :delivery-order-blocked-reason="deliveryOrderBlockedReason" @upload-document="openDocument" @download-document="downloadDocument" @save-pickup-code="savePickupCode" />
         <el-alert v-if="documentRefreshWarning" type="warning" :closable="false" :title="documentRefreshWarning.message"><template #default><ApiErrorMeta :details="documentRefreshWarning" /></template></el-alert>
         <ContainerCustomsPanel v-if="isDomestic && detail.planStatus === 'COMPLETED' && overview?.loadingPlanId && canListCustoms" :loading-plan-id="overview.loadingPlanId" :can-list="canListCustoms" :can-manage="canManageCustoms" :departure-state="customsDepartureState" @refreshed="refreshAfterCustoms" />
       </section>
 
-      <section v-if="isDomestic" v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-receiving-heading">
+      <section v-if="isDomestic" v-show="activeTab === 'overview'" class="detail-section workbench-panel is-compact" aria-labelledby="container-receiving-heading">
         <h2 id="container-receiving-heading">装柜作业与国内出仓</h2>
         <ContainerOverviewPanel v-if="overview" :overview="overview" :sections="['pda']" :can-manage-documents="canEdit" :can-manage-customs="canManageCustoms" :can-manage-exception="canEdit" />
         <div v-if="detail.planStatus === 'COMPLETED' && canViewOutboundDispatch" class="outbound-panel" aria-label="国内出仓门禁">
@@ -724,48 +733,48 @@ onMounted(async () => {
         </div>
       </section>
 
-      <section v-if="isOverseas" v-show="activeTab === 'overview'" class="detail-section surface-panel" aria-labelledby="container-overseas-receiving-heading">
+      <section v-if="isOverseas" v-show="activeTab === 'overview'" class="detail-section workbench-panel is-compact" aria-labelledby="container-overseas-receiving-heading">
         <header class="detail-section__heading"><h2 id="container-overseas-receiving-heading">提柜、卸柜与还空</h2><div class="density-actions"><el-button v-if="canReadDirect" @click="openTerminal">提柜安排与执行</el-button><el-button v-if="canReadDirect" @click="openDirect">直送卸货清单</el-button><el-button v-if="canRecordEmptyReturn" type="primary" :loading="emptyReturnSaving" @click="openEmptyReturn">确认还柜</el-button></div></header>
-        <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(arrivalTime?.estimatedWarehouseArrivalAt) }}</dd></div><div><dt>实际到仓</dt><dd>{{ formatTime(arrivalTime?.actualWarehouseArrivalAt) }}</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>{{ expectedArrivalText }}</dd></div><div><dt>实际到仓</dt><dd>{{ formatTime(arrivalTime?.actualWarehouseArrivalAt) }}</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">
+      <section v-if="isDomestic && activeTab === 'loading-list'" class="detail-section workbench-panel is-compact" aria-labelledby="container-loading-list-heading">
         <header class="loading-list-heading"><div><h2 id="container-loading-list-heading">{{ loadingListHeading }}</h2><p>{{ loadingListDescription }}</p></div></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 dense :mode="loadingListMode" back-label="返回货柜概览" :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="头程计费">
+      <section v-if="canViewFirstLegFees && firstLegFeesOpened" v-show="activeTab === 'first-leg-fees'" v-loading="loadingDetailLoading" class="detail-section workbench-panel is-compact" aria-label="头程计费">
         <LoadErrorState v-if="loadingDetailError" compact title="头程计费归属明细加载失败" :message="loadingDetailError.message" :loading="loadingDetailLoading" @retry="overview && loadLoadingDetail(detail, overview)"><template #details><ApiErrorMeta :details="loadingDetailError" /></template></LoadErrorState>
         <ContainerFeesPanel v-else-if="overview?.loadingPlanId && loadingDetail" title="国内段费用（头程）" :cabinet-no="detail.cabinetNo" :container-no="detail.containerNo" :plan-id="overview.loadingPlanId" :container-booking-id="detail.id" :customers="feeCustomers" :business-references="feeBusinessReferences" />
         <el-empty v-else-if="!loadingDetailLoading" :description="firstLegFeesEmptyReason" :image-size="72" />
       </section>
 
-      <section v-if="canViewLastLegFees && lastLegFeesOpened" v-show="activeTab === 'last-leg-fees'" class="detail-section surface-panel" aria-label="尾程计费">
+      <section v-if="canViewLastLegFees && lastLegFeesOpened" v-show="activeTab === 'last-leg-fees'" class="detail-section workbench-panel is-compact" aria-label="尾程计费">
         <ContainerLastLegFeesPanel title="目的港及海外段费用（尾程）" :container-booking-id="detail.id" :cabinet-no="detail.cabinetNo" :container-no="detail.containerNo" />
       </section>
     </template>
 
     <OceanBookingLinkDialog v-model="oceanBookingLinkOpen" :container="detail" @linked="load" />
-    <AppDialog class="admin-density-dialog" v-model="emptyReturnOpen" :title="containerDialogTitle('确认还柜', detail)" width="min(520px, calc(100vw - 28px))" :confirm-text="emptyReturnPending ? '重试本次还空登记' : '确认还柜'" :before-close="closeEmptyReturn" :confirm-loading="emptyReturnSaving" :confirm-disabled="!emptyReturnAt || !canRecordEmptyReturn" @confirm="confirmEmptyReturn"><el-alert title="提交后货柜将进入已还柜状态，请核对实际还柜时间。" type="warning" :closable="false" show-icon /><el-form class="density-form density-form--flush-end" label-position="top" :disabled="emptyReturnSaving || !!emptyReturnPending"><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 /></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="containerDialogTitle(documentTitle, detail)" width="min(520px, calc(100vw - 28px))" confirm-text="上传资料" :confirm-loading="documentSaving" :confirm-disabled="!documentFile" @confirm="saveDocument"><section class="density-dialog-section" data-tone="work"><el-form class="density-form density-form--flush-end" 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></section><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="containerDialogTitle(exceptionTitle, detail)" 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 density-form--flush-end" 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 /></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="containerDialogTitle('目的港清关资料', detail)" 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><section class="density-dialog-section" data-tone="work"><el-form class="density-form density-form--flush-end" 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></section></template><LoadErrorState v-if="clearanceError" compact title="目的港清关资料操作失败" :message="clearanceError.message" :show-retry="false"><template #details><ApiErrorMeta :details="clearanceError" /></template></LoadErrorState><template #footer="{ close }"><div class="density-actions density-actions--footer"><el-button :disabled="clearanceSaving" @click="close">取消</el-button><el-button v-if="clearanceDocument && !clearanceDocument.completedAt" :disabled="clearanceLoading" type="success" plain :loading="clearanceSaving" @click="completeClearance">确认目的港清关完成</el-button><el-button v-if="!clearanceDocument?.completedAt" type="primary" :loading="clearanceSaving" :disabled="clearanceLoading || !clearanceFile" @click="uploadClearance">上传资料</el-button></div></template></AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="directOpen" :title="containerDialogTitle('直送卸货登记', detail)" width="1080px" fullscreenable :show-confirm="canWriteDirect && !!directSelected && !directSelected.actualAt" :confirm-text="directPending ? '重试本次登记' : '确认本票卸货'" :confirm-loading="directSaving" :confirm-disabled="directLoading || !!directError" :before-close="closeDirect" @confirm="saveDirect">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="emptyReturnOpen" :title="containerDialogTitle('确认还柜', detail)" width="min(520px, calc(100vw - 28px))" :confirm-text="emptyReturnPending ? '重试本次还空登记' : '确认还柜'" :before-close="closeEmptyReturn" :confirm-loading="emptyReturnSaving" :confirm-disabled="!emptyReturnAt || !canRecordEmptyReturn" @confirm="confirmEmptyReturn"><el-alert title="提交后货柜将进入已还柜状态，请核对实际还柜时间。" type="warning" :closable="false" show-icon /><el-form class="density-form density-form--flush-end" label-position="top" :disabled="emptyReturnSaving || !!emptyReturnPending"><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 /></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 admin-workbench is-dialog" v-model="documentOpen" :title="containerDialogTitle(documentTitle, detail)" width="min(520px, calc(100vw - 28px))" confirm-text="上传资料" :confirm-loading="documentSaving" :confirm-disabled="!documentFile" @confirm="saveDocument"><section class="density-dialog-section" data-tone="work"><el-form class="density-form density-form--flush-end" 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></section><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 admin-workbench is-dialog" v-model="exceptionOpen" :title="containerDialogTitle(exceptionTitle, detail)" 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 density-form--flush-end" 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 /></el-form-item></el-form><LoadErrorState v-if="exceptionError" compact title="异常处理失败" :message="exceptionError.message" :show-retry="false" /></AppDialog>
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="clearanceOpen" :title="containerDialogTitle('目的港清关资料', detail)" 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><section class="density-dialog-section" data-tone="work"><el-form class="density-form density-form--flush-end" 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></section></template><LoadErrorState v-if="clearanceError" compact title="目的港清关资料操作失败" :message="clearanceError.message" :show-retry="false"><template #details><ApiErrorMeta :details="clearanceError" /></template></LoadErrorState><template #footer="{ close }"><div class="density-actions density-actions--footer"><el-button :disabled="clearanceSaving" @click="close">取消</el-button><el-button v-if="clearanceDocument && !clearanceDocument.completedAt" :disabled="clearanceLoading" type="success" plain :loading="clearanceSaving" @click="completeClearance">确认目的港清关完成</el-button><el-button v-if="!clearanceDocument?.completedAt" type="primary" :loading="clearanceSaving" :disabled="clearanceLoading || !clearanceFile" @click="uploadClearance">上传资料</el-button></div></template></AppDialog>
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="directOpen" :title="containerDialogTitle('直送卸货登记', detail)" width="1080px" fullscreenable :show-confirm="canWriteDirect && !!directSelected && !directSelected.actualAt" :confirm-text="directPending ? '重试本次登记' : '确认本票卸货'" :confirm-loading="directSaving" :confirm-disabled="directLoading || !!directError" :before-close="closeDirect" @confirm="saveDirect">
 
       <LoadErrorState v-if="directError" title="直送卸货清单读取失败" :message="directError.message" :loading="directLoading" @retry="loadDirect"><template #details><ApiErrorMeta :details="directError" /></template></LoadErrorState>
       <p v-if="directLoading">正在读取实际装柜来源…</p>
-      <section v-if="!directError && !directLoading" class="density-dialog-section" data-tone="source"><h3 class="density-dialog-section__title">实际装柜来源</h3><table class="density-table"><thead><tr><th>操作</th><th>入仓码 / 订单号</th><th>目的地</th><th>箱数</th><th>实际卸货</th></tr></thead><tbody><tr v-for="row in directRows" :key="row.requirementKey"><td><el-button class="density-action" :disabled="directSaving || !!directPending" @click="selectDirect(row)">{{ row.actualAt ? '查看签收' : canWriteDirect ? '登记本票' : '查看本票' }}</el-button></td><td>{{ row.inboundCode || row.orderNo || '—' }}</td><td>{{ row.destinationName || '—' }}</td><td>{{ row.packageCount ?? '—' }}</td><td>{{ row.actualAt || '尚未登记' }} {{ row.timezone || '' }}</td></tr></tbody></table></section>
+      <section v-if="!directError && !directLoading" class="density-dialog-section" data-tone="source"><h3 class="density-dialog-section__title">实际装柜来源</h3><div class="workbench-evidence"><table class="density-table"><thead><tr><th>操作</th><th>入仓码 / 订单号</th><th>目的地</th><th>箱数</th><th>实际卸货</th></tr></thead><tbody><tr v-for="row in directRows" :key="row.requirementKey"><td><el-button class="density-action" :disabled="directSaving || !!directPending" @click="selectDirect(row)">{{ row.actualAt ? '查看签收' : canWriteDirect ? '登记本票' : '查看本票' }}</el-button></td><td>{{ row.inboundCode || row.orderNo || '—' }}</td><td>{{ row.destinationName || '—' }}</td><td>{{ row.packageCount ?? '—' }}</td><td>{{ row.actualAt || '尚未登记' }} {{ row.timezone || '' }}</td></tr></tbody></table></div></section>
       <p v-if="!directLoading && !directError && !directRows.length">当前没有可登记的直送来源。</p>
-      <section v-if="directSelected" class="density-dialog-section" :data-tone="!canWriteDirect || directSelected.actualAt ? 'source' : 'work'"><h3 class="density-dialog-section__title">{{ directSelected.inboundCode || directSelected.orderNo || '本票签收' }}</h3><el-form class="density-form" label-position="left" label-width="160px" :disabled="!canWriteDirect || !!directSelected.actualAt || directSaving || !!directPending || directLoading || !!directError"><table class="density-table density-table--editable container-workflow-table" aria-label="本票直送签收"><tbody><tr><td><el-form-item label="实际卸货当地时间" required><template #label><span>实际卸货当地时间<InlineHelp title="直送卸货登记规则"><p>按真实装柜来源逐票登记签收；全部来源完成后核验还柜资格。海外仓接仓仍使用原仓库收货流程。</p></InlineHelp></span></template><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.actualAt || '尚未登记' }}</span><el-date-picker v-else v-model="directForm.actualAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td><td><el-form-item label="地点时区（IANA）" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.timezone || '—' }}</span><el-input v-else v-model="directForm.timezone" placeholder="例如 America/Los_Angeles" /></el-form-item></td></tr><tr><td><el-form-item label="签收人" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.receivedBy || '—' }}</span><el-input v-else v-model="directForm.receivedBy" maxlength="128" placeholder="请输入实际签收人" /></el-form-item></td><td><el-form-item label="真实签收凭据号" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.evidenceNo || '—' }}</span><el-input v-else v-model="directForm.evidenceNo" maxlength="128" placeholder="请输入真实签收凭据号" /></el-form-item></td></tr><tr><td colspan="2"><el-form-item label="备注"><span v-if="!canWriteDirect || !!directSelected?.actualAt" class="direct-remark">{{ directSelected?.remark || '—' }}</span><el-input v-else v-model="directForm.remark" type="textarea" maxlength="1000" /></el-form-item></td></tr></tbody></table></el-form><p v-if="directSelected.actualAt">该票已登记，签收事实只读。</p></section>
+      <section v-if="directSelected" class="density-dialog-section" :data-tone="!canWriteDirect || directSelected.actualAt ? 'source' : 'work'"><h3 class="density-dialog-section__title">{{ directSelected.inboundCode || directSelected.orderNo || '本票签收' }}</h3><el-form class="density-form" label-position="left" label-width="160px" :disabled="!canWriteDirect || !!directSelected.actualAt || directSaving || !!directPending || directLoading || !!directError"><div class="workbench-evidence"><table class="density-table density-table--editable container-workflow-table" aria-label="本票直送签收"><tbody><tr><td><el-form-item label="实际卸货当地时间" required><template #label><span>实际卸货当地时间<InlineHelp title="直送卸货登记规则"><p>按真实装柜来源逐票登记签收；全部来源完成后核验还柜资格。海外仓接仓仍使用原仓库收货流程。</p></InlineHelp></span></template><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.actualAt || '尚未登记' }}</span><el-date-picker v-else v-model="directForm.actualAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td><td><el-form-item label="地点时区（IANA）" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.timezone || '—' }}</span><el-input v-else v-model="directForm.timezone" placeholder="例如 America/Los_Angeles" /></el-form-item></td></tr><tr><td><el-form-item label="签收人" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.receivedBy || '—' }}</span><el-input v-else v-model="directForm.receivedBy" maxlength="128" placeholder="请输入实际签收人" /></el-form-item></td><td><el-form-item label="真实签收凭据号" required><span v-if="!canWriteDirect || !!directSelected?.actualAt">{{ directSelected?.evidenceNo || '—' }}</span><el-input v-else v-model="directForm.evidenceNo" maxlength="128" placeholder="请输入真实签收凭据号" /></el-form-item></td></tr><tr><td colspan="2"><el-form-item label="备注"><span v-if="!canWriteDirect || !!directSelected?.actualAt" class="direct-remark">{{ directSelected?.remark || '—' }}</span><el-input v-else v-model="directForm.remark" type="textarea" maxlength="1000" /></el-form-item></td></tr></tbody></table></div></el-form><p v-if="directSelected.actualAt">该票已登记，签收事实只读。</p></section>
       <LoadErrorState v-if="directSaveError" title="卸货登记未完成" :message="directSaveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="directSaveError" /></template></LoadErrorState>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="terminalOpen" :title="containerDialogTitle('提柜安排与执行', detail)" width="780px" fullscreenable :show-confirm="false" :before-close="closeTerminal">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="terminalOpen" :title="containerDialogTitle('提柜安排与执行', detail)" width="780px" fullscreenable :show-confirm="false" :before-close="closeTerminal">
       <LoadErrorState v-if="terminalError" title="提柜资料读取失败" :message="terminalError.message" :loading="terminalLoading" @retry="loadTerminal"><template #details><ApiErrorMeta :details="terminalError" /></template></LoadErrorState>
       <p v-if="terminalLoading">正在核对码头拖车当前状态…</p>
       <template v-if="terminal"><p class="density-dialog-note">时间沿用原业务当地时间。</p>
-        <section class="density-dialog-section" data-tone="work"><el-form class="density-form" label-position="left" label-width="140px" :disabled="terminalLoading || terminalSaving || !!terminalPending || !!terminalError"><table class="density-table density-table--editable container-workflow-table" aria-label="提柜安排资料"><tbody><tr><td colspan="2"><el-form-item label="真实集装箱号"><span>{{ terminal?.containerNo || detail?.containerNo || '—' }}</span></el-form-item></td></tr><tr><td><el-form-item label="当前车队"><span>{{ terminal?.fleetSupplierName || (terminal?.fleetSupplierId ? '—' : '尚未安排') }}</span></el-form-item></td><td><el-form-item label="实际提柜"><span>{{ terminal?.actualPickupAt || '尚未登记' }}</span></el-form-item></td></tr><tr><td><el-form-item label="码头车队"><el-select v-model="terminalForm.supplierId" filterable remote :remote-method="searchTerminalSuppliers" :loading="supplierLoading" :disabled="!canSelectFleet || !access.can('platform:supplier:list')" placeholder="搜索有效海外车队" @visible-change="(visible: boolean) => visible && searchTerminalSuppliers()"><el-option v-if="terminal.fleetSupplierId && !terminalSuppliers.some(row => row.id === terminal?.fleetSupplierId)" :value="terminal.fleetSupplierId" :label="terminal.fleetSupplierName || '原车队'" disabled /><el-option v-for="supplier in terminalSuppliers" :key="supplier.id" :value="supplier.id" :label="supplier.name" /></el-select></el-form-item></td><td><el-form-item label="提柜预约当地时间"><el-date-picker v-model="terminalForm.pickupAt" :disabled="!canSchedulePickup" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td></tr><tr v-if="canRecordPickup"><td><el-form-item label="实际提柜当地时间（登记实际时必填）"><el-date-picker v-model="terminalForm.actualAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td><td><el-form-item label="实际地点代码"><el-input v-model="terminalForm.locationCode" maxlength="100" /></el-form-item></td></tr><tr v-if="canRecordPickup"><td colspan="2"><el-form-item label="实际地点名称"><el-input v-model="terminalForm.locationName" maxlength="200" /></el-form-item></td></tr><tr><td colspan="2"><el-form-item label="处理说明"><el-input v-model="terminalForm.reason" type="textarea" maxlength="1000" placeholder="请输入处理说明；登记实际提柜时必填" /></el-form-item></td></tr></tbody></table></el-form></section><LoadErrorState v-if="supplierError" title="海外车队读取失败" :message="supplierError.message" :show-retry="false" />
+        <section class="density-dialog-section" data-tone="work"><el-form class="density-form" label-position="left" label-width="140px" :disabled="terminalLoading || terminalSaving || !!terminalPending || !!terminalError"><div class="workbench-evidence"><table class="density-table density-table--editable container-workflow-table" aria-label="提柜安排资料"><tbody><tr><td colspan="2"><el-form-item label="真实集装箱号"><span>{{ terminal?.containerNo || detail?.containerNo || '—' }}</span></el-form-item></td></tr><tr><td><el-form-item label="当前车队"><span>{{ terminal?.fleetSupplierName || (terminal?.fleetSupplierId ? '—' : '尚未安排') }}</span></el-form-item></td><td><el-form-item label="实际提柜"><span>{{ terminal?.actualPickupAt || '尚未登记' }}</span></el-form-item></td></tr><tr><td><el-form-item label="码头车队"><el-select v-model="terminalForm.supplierId" filterable remote :remote-method="searchTerminalSuppliers" :loading="supplierLoading" :disabled="!canSelectFleet || !access.can('platform:supplier:list')" placeholder="搜索有效海外车队" @visible-change="(visible: boolean) => visible && searchTerminalSuppliers()"><el-option v-if="terminal.fleetSupplierId && !terminalSuppliers.some(row => row.id === terminal?.fleetSupplierId)" :value="terminal.fleetSupplierId" :label="terminal.fleetSupplierName || '原车队'" disabled /><el-option v-for="supplier in terminalSuppliers" :key="supplier.id" :value="supplier.id" :label="supplier.name" /></el-select></el-form-item></td><td><el-form-item label="提柜预约当地时间"><el-date-picker v-model="terminalForm.pickupAt" :disabled="!canSchedulePickup" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td></tr><tr v-if="canRecordPickup"><td><el-form-item label="实际提柜当地时间（登记实际时必填）"><el-date-picker v-model="terminalForm.actualAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" /></el-form-item></td><td><el-form-item label="实际地点代码"><el-input v-model="terminalForm.locationCode" maxlength="100" /></el-form-item></td></tr><tr v-if="canRecordPickup"><td colspan="2"><el-form-item label="实际地点名称"><el-input v-model="terminalForm.locationName" maxlength="200" /></el-form-item></td></tr><tr><td colspan="2"><el-form-item label="处理说明"><el-input v-model="terminalForm.reason" type="textarea" maxlength="1000" placeholder="请输入处理说明；登记实际提柜时必填" /></el-form-item></td></tr></tbody></table></div></el-form></section><LoadErrorState v-if="supplierError" title="海外车队读取失败" :message="supplierError.message" :show-retry="false" />
 
 
         <LoadErrorState v-if="terminalSaveError" title="提柜操作未完成" :message="terminalSaveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="terminalSaveError" /></template></LoadErrorState>
@@ -779,11 +788,17 @@ onMounted(async () => {
 .direct-remark { white-space: pre-wrap; }
 .loading-list-heading { margin-bottom: var(--admin-space-5); }
 .loading-list-heading h2 { margin: 0; font-size: var(--admin-font-title); }
-.loading-list-heading p { margin: var(--admin-space-2) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
-.loading-list-heading ~ .container-customs, .loading-list-heading ~ .loading-detail-content { margin-top: var(--admin-space-6); padding-top: var(--admin-space-5); border-top: 1px solid var(--cc-border); }
+.loading-list-heading p { margin: var(--admin-space-2) 0 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.loading-list-heading ~ .container-customs, .loading-list-heading ~ .loading-detail-content { margin-top: var(--admin-space-6); padding-top: var(--admin-space-5); border-top: 1px solid var(--workbench-border); }
 .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}}
+.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(--workbench-muted); font-size:var(--admin-font-caption); }.container-overview__summary { border-top:1px solid var(--workbench-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(--workbench-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(--workbench-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);}.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(--workbench-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(--workbench-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(--workbench-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(--workbench-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(--workbench-border);border-radius:var(--admin-radius);background:var(--workbench-surface-soft)}.gate-row__actual,.gate-row small{color:var(--workbench-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(--workbench-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); }
+.detail-section__heading { flex-wrap:wrap; }
+.detail-section[aria-labelledby="container-information-heading"] .density-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
+.detail-section[aria-labelledby="container-voyage-heading"] .density-fields { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) repeat(2,minmax(0,1fr)); }
+@media(max-width:720px) {
+  .detail-section[aria-labelledby] .detail-fields .density-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
+}
+.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(--workbench-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(--workbench-muted);font-size:var(--admin-font-caption)}.overseas-stage-strip strong{color:var(--workbench-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/ContainerWorkbenchView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -14,7 +15,7 @@ const current = computed(() => props.stage === 'DOMESTIC' && !canDomestic.value
 </script>
 
 <template>
-  <div class="admin-density">
+  <div class="admin-density admin-workbench">
     <nav class="density-status-tabs" aria-label="货柜业务阶段">
       <el-button v-if="canDomestic" :class="{ 'is-active': current === 'DOMESTIC' }" :aria-current="current === 'DOMESTIC' ? 'page' : undefined" @click="router.push({ name: 'domestic-container-workbench' })">📦 国内装柜</el-button>
       <el-button v-if="canOverseas" :class="{ 'is-active': current === 'OVERSEAS' }" :aria-current="current === 'OVERSEAS' ? 'page' : undefined" @click="router.push({ name: 'overseas-container-workbench' })">🚢 海外清关提柜</el-button>

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

@@ -22,7 +22,8 @@ vi.mock('@/modules/warehouses', () => ({ listAllPlatformWarehouses: vi.fn() }))
 vi.mock('@/modules/master-data', () => ({ listPlatformPartners: vi.fn() }))
 vi.mock('@/modules/suppliers', () => ({ listSuppliers: vi.fn() }))
 vi.mock('@/modules/ocean-bookings', () => ({ getOceanBooking: vi.fn(), listOceanBookingLinkCandidates: vi.fn(), listOceanBookings: vi.fn(), listWarehouseLogisticsChannels: vi.fn() }))
-vi.mock('@/modules/iam', () => ({ listPlatformTenants: vi.fn().mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 }) }))
+vi.mock('@/modules/iam', async importOriginal => ({
+  ...await importOriginal<typeof import('@/modules/iam')>(), listPlatformTenants: vi.fn().mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 }) }))
 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() }))
@@ -73,8 +74,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(listContainerArrivalTimes).mockReset().mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 0 }])
-    vi.mocked(updateContainerExpectedArrival).mockReset().mockResolvedValue({ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T16:00:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 1 })
+    vi.mocked(listContainerArrivalTimes).mockReset().mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T15:31:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 0, planCount: 0 }])
+    vi.mocked(updateContainerExpectedArrival).mockReset().mockResolvedValue({ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: '2026-09-25T16:00:00', actualWarehouseArrivalAt: '2026-09-26T09:00:00', version: 1, planCount: 0 })
     vi.mocked(listContainers).mockResolvedValue({ records: [{ id: '9001', planId: null, 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, 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', 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: [] })
@@ -303,7 +304,7 @@ describe('ContainersView', () => {
     expect(wrapper.find('button[aria-label="查看 CB-1"]').exists()).toBe(true)
     await wrapper.findAll('button').find((button) => button.text().includes('新增模拟柜'))!.trigger('click')
     await flushPromises()
-    expect(wrapper.text()).toContain('装柜仓库加载失败')
+    expect(document.body.querySelector('.simulation-create-dialog')?.textContent).toContain('装柜仓库加载失败')
   })
 
   it('uses stable view labels when cabinetNo is missing', async () => {
@@ -428,7 +429,7 @@ 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 admin-density-dialog"')
+    expect(source).toContain('<AppDialog v-model="editorOpen" class="container-editor-dialog admin-density-dialog admin-workbench is-dialog"')
     expect(source).toContain('width="min(1080px, calc(100vw - 28px))"')
     expect(source).toContain('admin-density-dialog')
     expect(source).toContain('class="density-table density-table--editable container-editor-table"')
@@ -478,7 +479,9 @@ describe('ContainersView', () => {
     expect(source).not.toContain('canSmartLoading && row.containerNo')
     expect(source).not.toContain('link type="primary" :aria-label="containerViewLabel')
     expect(source).toContain(':loading="loading" preference-key="container-loading-table"')
-    expect(source).toContain('appearance="integrated" :stripe="false"')
+    expect(source).toContain('appearance="integrated"')
+    expect(source).not.toContain(':stripe="false"')
+    expect(source).not.toContain(':stripe="false"')
   })
 
   it('updates an ACTIVE TRUCKING fleet inline and records actual empty return once', async () => {
@@ -581,6 +584,30 @@ describe('ContainersView', () => {
     })
   })
 
+  it('shows the calendar default from actual port arrival without submitting an invented time', async () => {
+    const page = await listContainers({ page: 1, size: 20 }, 'OVERSEAS')
+    vi.mocked(listContainers).mockResolvedValue({ ...page, records: page.records.map(row => ({ ...row,
+      estimatedPortArrivalAt: '2026-10-20T10:00:00', actualFacts: { arrivedDestinationPortAt: '2026-10-21T15:49:00' },
+    })) })
+    vi.mocked(listContainerArrivalTimes).mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0, planCount: 0 }])
+    const wrapper = await mountOverseasRoute()
+    const picker = wrapper.findAllComponents({ name: 'ElDatePicker' }).find(item => item.props('placeholder') === '2026-10-23（默认）')!
+    expect(picker).toBeDefined()
+    expect(picker.props('modelValue')).toBe('')
+    expect(updateContainerExpectedArrival).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('keeps a frozen missing arrival undated and prevents editing it', async () => {
+    const page = await listContainers({ page: 1, size: 20 }, 'OVERSEAS')
+    vi.mocked(listContainers).mockResolvedValue({ ...page, records: page.records.map(row => ({ ...row, estimatedPortArrivalAt: '2026-10-20T10:00:00' })) })
+    vi.mocked(listContainerArrivalTimes).mockResolvedValue([{ sourceContainerBookingId: '9001', estimatedWarehouseArrivalAt: null, actualWarehouseArrivalAt: null, version: 0, planCount: 1 }])
+    const wrapper = await mountOverseasRoute()
+    const picker = wrapper.findAllComponents({ name: 'ElDatePicker' }).find(item => item.props('placeholder') === '选择预计到仓')!
+    expect(picker.props('disabled')).toBe(true)
+    wrapper.unmount()
+  })
+
   it.each(['EDITING', 'LOADING', 'COMPLETED'] as const)('keeps released-booking linking reachable alongside the %s process action', async (planStatus) => {
     const page = await listContainers({ page: 1, size: 20 }, 'DOMESTIC')
     vi.mocked(listContainers).mockResolvedValue({ ...page, records: page.records.map((row) => ({

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import ContainerSimulationCreate from '../components/ContainerSimulationCreate.vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -39,6 +40,7 @@ import {
   type TerminalDrayageView,
 } from '../api/terminalDrayages'
 import { listContainerArrivalTimes, updateContainerExpectedArrival, type ContainerArrivalTime } from '../api/containerArrivalTimes'
+import { projectWarehouseArrival } from '../warehouseArrival'
 import type { ContainerBookingResource, ContainerDocumentStatus, ContainerPlanStatus, ContainerSaveRequest, ContainerWorkbenchAction, ContainerWorkbenchRow } from '../types'
 
 type Filters = QueryModel & { customerId: string; keyword: string; containerType: string; status: ContainerPlanStatus | ''; sailingRange: string[] }
@@ -284,6 +286,13 @@ function optional(value: string | null) { return value?.trim() || null }
 function statusText(status: ContainerPlanStatus) { return ({ WAIT_LOADING: '待装柜', EDITING: '预装柜中', LOADING: '拣货中', COMPLETED: '装柜完成' })[status] }
 function documentStatusText(status: ContainerDocumentStatus | null | undefined) { return status ? ({ MISSING: '未上传', UPLOADED: '已上传', COMPLETED: '已完成' })[status] : '—' }
 function formatTime(value: string | null | undefined) { return value?.replace('T', ' ').slice(0, 16) || '—' }
+function defaultArrivalDate(source: object) {
+  const row = source as ContainerWorkbenchRow
+  const arrival = arrivalTimes.value[row.id]
+  const projected = projectWarehouseArrival(row.actualFacts?.arrivedDestinationPortAt || row.actualPortArrivalAt || row.estimatedPortArrivalAt,
+    arrival ? { ...arrival, plannedAt: arrival.estimatedWarehouseArrivalAt } : undefined)
+  return projected.isDefault ? projected.date : null
+}
 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_EMPTY_RETURN: '确认还柜', SEND_PICKUP_EMAIL: '发送提柜邮件' } as Record<TerminalDrayageAction, string>)[action] }
@@ -576,7 +585,7 @@ async function saveDrayageAction() {
 }
 async function saveExpectedArrival(row: ContainerBookingResource, value: string | null) {
   const current = arrivalTimes.value[row.id]
-  if (!value || !current || current.version < 0 || arrivalSavingIds.value.includes(row.id)) return
+  if (!value || !current || current.version < 0 || current.planCount > 0 || arrivalSavingIds.value.includes(row.id)) return
   arrivalSavingIds.value.push(row.id)
   try {
     const updated = await updateContainerExpectedArrival(row.id, {
@@ -730,19 +739,20 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
 </script>
 
 <template>
-  <AdminPage class="admin-density" as="div">
+  <AdminPage class="admin-density admin-workbench" as="div">
     <section class="container-page">
       <ListPageLayout :ariaLabel="isDomestic ? '送柜报关工作台' : '清关提柜工作台'">
 
 
-        <section id="container-workbench-results" ><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="container-loading-table" empty-text="暂无货柜">
-        <template #toolbar-start><h1>{{ isDomestic ? '货柜列表' : '清关提柜' }}</h1></template>
-        <template #filters>
-        <div class="container-query-panel integrated-query-group">
-          <div class="container-scope-tabs density-status-tabs" role="tablist" aria-label="货柜完结状态">
+        <section id="container-workbench-results" ><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="container-loading-table" empty-text="暂无货柜">
+        <template #toolbar-start>
+          <div class="container-scope-tabs density-status-tabs workbench-list-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>
+        </template>
+        <template #filters>
+        <div class="container-query-panel integrated-query-group">
           <QueryToolbar v-model="filters" class="container-query-toolbar" ariaLabel="货柜筛选" :fields="queryFields" preference-key="container-loading-query" @search="search" />
         </div>
       </template>
@@ -758,7 +768,7 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
             <template #oceanBooking="{ row }"><span v-if="row.oceanBookingId"><strong>{{ row.billOfLadingNo || '已关联订舱' }}</strong><small>{{ row.containerNo ? `集装箱号：${row.containerNo}` : '集装箱号：待补录' }}</small></span><span v-else>未关联</span></template>
             <template #containerNo="{ row }">{{ row.containerNo || '待补录' }}</template>
             <template #terminalTruckingCompany="{ row }"><el-select class="fleet-select" :model-value="drayageFor(row.id)?.fleetSupplierId || ''" filterable remote reserve-keyword remote-show-suffix placeholder="输入车队名称或联系人搜索" :remote-method="searchTerminalFleets" :loading="terminalFleetLoading || drayageSavingIds.includes(row.id)" :disabled="!canDrayage(row as ContainerBookingResource, 'SELECT_FLEET') || drayageSavingIds.includes(row.id)" no-data-text="未找到合作中的码头车队" @visible-change="handleTerminalFleetVisible" @update:model-value="selectRowFleet(row, $event)"><el-option v-if="drayageFor(row.id)?.fleetSupplierName && !terminalFleetOptions.some((item) => item.id === drayageFor(row.id)?.fleetSupplierId)" :label="drayageFor(row.id)?.fleetSupplierName || '原码头车队'" :value="drayageFor(row.id)?.fleetSupplierId || ''" disabled /><el-option v-for="supplier in terminalFleetOptions" :key="supplier.id" :label="supplier.name" :value="supplier.id" /></el-select></template>
-            <template #pickupAppointmentAt="{ row }"><div class="arrival-time-cell"><el-date-picker v-model="arrivalInputs[row.id]" class="arrival-time-picker" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" format="YYYY-MM-DD HH:mm" placeholder="选择预计到仓" :disabled="!canExpectedArrivalEdit || !arrivalTimes[row.id] || arrivalTimes[row.id].version < 0 || arrivalSavingIds.includes(row.id)" @change="saveExpectedArrival(row as ContainerBookingResource, $event as string | null)" /></div></template>
+            <template #pickupAppointmentAt="{ row }"><div class="arrival-time-cell" :title="defaultArrivalDate(row) ? '到港日期＋2个自然日（默认推算）；可选择日期时间人工调整' : undefined"><el-date-picker v-model="arrivalInputs[row.id]" class="arrival-time-picker" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" format="YYYY-MM-DD HH:mm" :placeholder="defaultArrivalDate(row) ? `${defaultArrivalDate(row)}（默认）` : '选择预计到仓'" :disabled="!canExpectedArrivalEdit || !arrivalTimes[row.id] || arrivalTimes[row.id].version < 0 || arrivalTimes[row.id].planCount > 0 || arrivalSavingIds.includes(row.id)" @change="saveExpectedArrival(row as ContainerBookingResource, $event as string | null)" /></div></template>
             <template #actualPickupAt="{ row }">{{ formatTime(arrivalTimes[row.id]?.actualWarehouseArrivalAt) }}</template>
             <template #estimatedEmptyReturnAt="{ row }">{{ formatTime(drayageFor(row.id)?.estimatedEmptyReturnAt) }}</template>
             <template #actualEmptyReturnAt="{ row }">{{ formatTime(drayageFor(row.id)?.actualEmptyReturnAt) }}</template>
@@ -770,56 +780,56 @@ onMounted(async () => { await Promise.all([loadCustomers(), loadRows()]) })
             <template #estimatedSailingAt="{ row }">{{ formatTime(row.estimatedSailingAt) }}</template>
             <template #actualSailingAt="{ row }">{{ formatTime(row.actualFacts?.actualSailingAt) }}</template>
             <template #estimatedPortArrivalAt="{ row }">{{ formatTime(row.estimatedPortArrivalAt) }}</template>
-            <template #actualPortArrivalAt="{ row }">{{ formatTime(row.actualFacts?.actualPortArrivalAt) }}</template>
-          </DataTable></section>
+            <template #actualPortArrivalAt="{ row }">{{ formatTime(row.actualFacts?.arrivedDestinationPortAt) }}</template>
+          </DataTable></div></section>
       </ListPageLayout>
 
     <OceanBookingLinkDialog v-model="linkOpen" :container="linkTarget" @linked="loadRows" />
 
-    <AppDialog v-model="editorOpen" class="container-editor-dialog admin-density-dialog" :title="editorTitle" width="min(1080px, calc(100vw - 28px))" fullscreenable :confirm-loading="saving" :confirm-disabled="Boolean(warehouseError)" confirm-text="确定" cancel-text="关闭" @confirm="save">
+    <AppDialog v-model="editorOpen" class="container-editor-dialog admin-density-dialog admin-workbench is-dialog" :title="editorTitle" width="min(1080px, calc(100vw - 28px))" fullscreenable :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>
       <p class="density-dialog-note">货柜基础资料不提供柜号写入；请在拖车提柜或预装详情中补录，后续纠错也在预装详情完成。</p>
       <section v-if="!warehouseError" class="density-dialog-section" data-tone="work">
         <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="120px" class="density-form">
-          <table class="density-table density-table--editable container-editor-table" aria-label="货柜基础资料"><tbody>
+          <div class="workbench-evidence"><table class="density-table density-table--editable container-editor-table" aria-label="货柜基础资料"><tbody>
             <tr><td><el-form-item label="真实集装箱号"><span>{{ form.containerNo || '待补录' }}</span></el-form-item></td><td><el-form-item label="柜次号"><span>{{ form.cabinetNo || '—' }}</span></el-form-item></td><td><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></td></tr>
             <tr><td><el-form-item label="提单号"><el-input v-model="form.billOfLadingNo" maxlength="128" /></el-form-item></td><td><el-form-item label="船名"><el-input v-model="form.vesselName" maxlength="128" placeholder="请输入船名" /></el-form-item></td><td><el-form-item label="航次"><el-input v-model="form.voyageNo" maxlength="64" placeholder="请输入航次" /></el-form-item></td></tr>
             <tr><td><el-form-item label="箱型（货柜类型）" prop="containerType"><el-select :model-value="form.containerType" placeholder="请选择箱型" @update:model-value="applyContainerSpecification(form, String($event || ''))"><el-option v-for="item in CONTAINER_SPECIFICATIONS" :key="item.type" :label="item.type" :value="item.type" /></el-select></el-form-item></td><td><el-form-item label="船公司"><el-select :model-value="shippingCompanyValue" filterable clearable placeholder="请选择船公司" :loading="businessOptionsLoading" loading-text="船公司加载中" no-data-text="暂无可用船公司" @update:model-value="selectShippingCompany(String($event || ''))"><el-option v-if="shippingCompanyValue && !shippingCompanies.some((partner) => String(partner.id) === shippingCompanyValue)" :label="form.shippingCompanyName || '原船公司'" :value="shippingCompanyValue" /><el-option v-for="partner in shippingCompanies" :key="String(partner.id)" :label="partnerLabel(partner)" :value="String(partner.id)" /></el-select></el-form-item></td><td><el-form-item label="起运港"><el-select :model-value="departurePortValue" filterable clearable placeholder="请选择起运港" :loading="businessOptionsLoading" loading-text="港口加载中" no-data-text="暂无订舱港口数据" @update:model-value="selectPort('departure', String($event || ''))"><el-option v-for="port in departurePorts" :key="port.value" :label="portLabel(port)" :value="port.value" /></el-select></el-form-item></td></tr>
             <tr><td><el-form-item label="目的港"><el-select :model-value="destinationPortValue" filterable clearable placeholder="请选择目的港" :loading="businessOptionsLoading" loading-text="港口加载中" no-data-text="暂无订舱港口数据" @update:model-value="selectPort('destination', String($event || ''))"><el-option v-for="port in destinationPorts" :key="port.value" :label="portLabel(port)" :value="port.value" /></el-select></el-form-item></td><td><el-form-item label="目的仓"><el-select :model-value="destinationWarehouseValue" filterable clearable placeholder="请选择目的仓" :loading="warehouseLoading" loading-text="目的仓加载中" no-data-text="暂无可用海外/FBA仓库" @update:model-value="selectDestinationWarehouse(String($event || ''))"><el-option v-if="destinationWarehouseValue && !destinationWarehouses.some((warehouse) => warehouse.warehouseCode === destinationWarehouseValue)" :label="form.destinationWarehouseName || form.destinationWarehouseCode || '原目的仓'" :value="destinationWarehouseValue" /><el-option v-for="warehouse in destinationWarehouses" :key="String(warehouse.id)" :label="`${warehouse.warehouseName}（${warehouse.warehouseCode}）`" :value="warehouse.warehouseCode" /></el-select></el-form-item></td><td><el-form-item label="货柜容量（m³）"><span>{{ form.capacityCbm == null ? '—' : `${form.capacityCbm} m³` }}</span></el-form-item></td></tr>
             <tr><td><el-form-item label="重量上限（kg）"><span>{{ form.maxWeightKg == null ? '—' : `${form.maxWeightKg} kg` }}</span></el-form-item></td><td><el-form-item label="拖车公司" prop="terminalTruckingCompany"><el-select :model-value="selectedTruckingSupplierId" filterable clearable placeholder="请选择拖车供应商" :loading="businessOptionsLoading" loading-text="拖车供应商加载中" no-data-text="暂无可用拖车供应商" @update:model-value="selectTruckingSupplier(String($event || ''))"><el-option v-if="form.terminalTruckingCompany && !selectedTruckingSupplierId" :label="`${form.terminalTruckingCompany}（需重新选择）`" value="" disabled /><el-option v-for="supplier in truckingCompanies" :key="supplier.id" :label="supplier.name" :value="supplier.id" /></el-select></el-form-item></td><td><el-form-item label="计划装柜时间"><el-date-picker v-model="form.loadingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择计划装柜时间" /></el-form-item></td></tr>
             <tr><td><el-form-item label="预计开船时间"><el-date-picker v-model="form.estimatedSailingAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计开船时间" /></el-form-item></td><td colspan="2"><el-form-item label="预计到港时间"><el-date-picker v-model="form.estimatedPortArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="请选择预计到港时间" /></el-form-item></td></tr>
-          </tbody></table>
+          </tbody></table></div>
         </el-form>
       </section>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog" v-model="drayageActionOpen" :title="containerDialogTitle(drayageActionText(drayageAction), drayageTarget)" width="min(520px, calc(100vw - 28px))" :confirm-text="drayageActionText(drayageAction)" cancel-text="取消" :confirm-loading="drayageActionSaving" :confirm-disabled="!drayageActionAt" @confirm="saveDrayageAction">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="drayageActionOpen" :title="containerDialogTitle(drayageActionText(drayageAction), drayageTarget)" 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="实际还柜时间" 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 class="admin-density-dialog" v-model="emailHistoryOpen" :title="containerDialogTitle('车队邮件记录', emailTarget)" fullscreenable width="min(1100px, calc(100vw - 28px))" :show-footer="false">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="emailHistoryOpen" :title="containerDialogTitle('车队邮件记录', emailTarget)" fullscreenable width="min(1100px, calc(100vw - 28px))" :show-footer="false">
       <p class="density-dialog-note">集装箱号：{{ 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>
-      <section v-else class="density-dialog-section" data-tone="source"><DataTable :data="emails" :columns="emailColumns" :loading="emailsLoading" column-settings-mode="hide" empty-text="暂无邮件记录">
+      <section v-else class="density-dialog-section" data-tone="source"><div class="workbench-table"><DataTable :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 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></section>
+      </DataTable></div></section>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="drayageHistoryOpen" :title="containerDialogTitle('码头拖车记录', drayageTarget)" fullscreenable width="min(980px, calc(100vw - 28px))" :show-footer="false">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="drayageHistoryOpen" :title="containerDialogTitle('码头拖车记录', drayageTarget)" fullscreenable 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>
-      <div v-else class="density-dialog-sections"><section v-if="drayageTarget && drayageFor(drayageTarget.id)" class="density-dialog-section" data-tone="summary"><el-descriptions :column="4" border class="density-descriptions"><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></section><section class="density-dialog-section" data-tone="source"><DataTable :data="drayageHistory" :columns="drayageHistoryColumns" :loading="drayageHistoryLoading" stripe column-settings-mode="hide" empty-text="暂无码头拖车操作记录" /></section></div>
+      <div v-else class="density-dialog-sections"><section v-if="drayageTarget && drayageFor(drayageTarget.id)" class="density-dialog-section" data-tone="summary"><el-descriptions :column="4" border class="density-descriptions"><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></section><section class="density-dialog-section" data-tone="source"><div class="workbench-table"><DataTable :data="drayageHistory" :columns="drayageHistoryColumns" :loading="drayageHistoryLoading" stripe column-settings-mode="hide" empty-text="暂无码头拖车操作记录" /></div></section></div>
     </AppDialog>
     </section>
   </AdminPage>
 </template>
 
 <style scoped>
-.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 { min-width: 0; }.container-query-toolbar { border: 0; }.row-actions { flex-wrap: nowrap; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.container-editor-table { table-layout: fixed; }.fleet-select { width: 100%; }.arrival-time-cell { display: flex; align-items: center; width: 100%; min-width: 0; padding-right: var(--admin-space-1); box-sizing: border-box; }.arrival-time-picker { width: 200px !important; max-width: 100%; min-width: 0; box-sizing: border-box; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: var(--admin-space-5); }.drayage-summary { margin-bottom: var(--admin-space-5); }
+.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(--workbench-muted); }.container-query-panel { min-width: 0; }.container-query-toolbar { border: 0; }.row-actions { flex-wrap: nowrap; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 0; }.container-editor-table { table-layout: fixed; }.fleet-select { width: 100%; }.arrival-time-cell { display: flex; align-items: center; width: 100%; min-width: 0; padding-right: var(--admin-space-1); box-sizing: border-box; }.arrival-time-picker { width: 200px !important; max-width: 100%; min-width: 0; box-sizing: border-box; }.details :deep(.el-descriptions__label) { width: 120px; }.drayage-load-alert { margin-bottom: var(--admin-space-5); }.drayage-summary { margin-bottom: var(--admin-space-5); }
 .container-query-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
 .container-page .table-panel { width: 100%; max-width: 100%; min-width: 0; }
 @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; }}

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

@@ -1,13 +1,15 @@
-import ElementPlus, { ElCheckboxButton, ElInputNumber, ElMessage, ElMessageBox } from 'element-plus'
+import ElementPlus, { ElCheckboxButton, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect } from 'element-plus'
 import { AxiosError } from 'axios'
 import { createPinia, setActivePinia } from 'pinia'
-import { flushPromises, mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DOMWrapper, enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import QueryToolbar from '@/shared/components/QueryToolbar.vue'
+import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import GlobalSmartLoadingView from './GlobalSmartLoadingView.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
+import SmartLoadingDialog from '../components/SmartLoadingDialog.vue'
 import type { ContainerBookingResource } from '../types'
 import {
   assignPendingReviewSmartLoadingOrder,
@@ -26,6 +28,8 @@ import {
   removeSmartLoadingPallet,
 } from '../api/platformContainerLoading'
 
+enableAutoUnmount(afterEach)
+
 const { routerPush } = vi.hoisted(() => ({ routerPush: vi.fn() }))
 
 vi.mock('vue-router', () => ({
@@ -35,7 +39,8 @@ vi.mock('vue-router', () => ({
 vi.mock('@/core/access/accessPreview', () => ({
   useAccessPreviewStore: () => ({ can: () => true }),
 }))
-vi.mock('@/modules/iam', () => ({
+vi.mock('@/modules/iam', async importOriginal => ({
+  ...await importOriginal<typeof import('@/modules/iam')>(),
   listPlatformTenants: vi.fn().mockResolvedValue({ records: [], page: 1, size: 200, total: 0, pages: 0 }),
 }))
 vi.mock('../api/platformContainerLoading', () => ({
@@ -118,7 +123,50 @@ function mockContainerSearch(records: ContainerBookingResource[]) {
   ))))
 }
 
+function assignmentDialog() {
+  const root = document.body.querySelector<HTMLElement>('.smart-loading-assignment-dialog')
+  if (!root) throw new Error('assignment dialog is missing')
+  return new DOMWrapper(root)
+}
+
 describe('GlobalSmartLoadingView', () => {
+  it('mounts assignment outside the parent workbench and keeps fullscreen and reopen states independent', async () => {
+    const wrapper = mount(SmartLoadingDialog, { attachTo: document.body, props: { modelValue: true }, global: { plugins: [ElementPlus] } })
+    try {
+      await flushPromises()
+      const workbench = wrapper.getComponent(GlobalSmartLoadingView)
+      const openAssignment = async () => {
+        await workbench.get('.candidate-pane .el-table__body-wrapper').findAll('button').find(button => button.text() === '加入')!.trigger('click')
+        await flushPromises()
+      }
+      await openAssignment()
+      const popup = workbench.getComponent(AppDialog)
+      const outer = document.querySelector('.smart-loading-dialog')!
+      const child = assignmentDialog()
+      expect(document.body.contains(child.element)).toBe(true)
+      expect(outer.contains(child.element)).toBe(false)
+      expect(child.element.closest('.global-loading-page')).toBeNull()
+      expect(child.classes()).toEqual(expect.arrayContaining(['admin-density-dialog', 'admin-workbench', 'is-dialog']))
+      popup.getComponent(ElInputNumber).vm.$emit('update:modelValue', 4)
+      await child.get('[aria-label="展开全屏"]').trigger('click')
+      expect(child.classes()).toContain('is-fullscreen')
+      expect(outer.classList.contains('is-fullscreen')).toBe(true)
+      await child.findAll('button').find(button => button.text() === '取消')!.trigger('click')
+      await flushPromises()
+      expect(popup.props('modelValue')).toBe(false)
+      expect(wrapper.getComponent(AppDialog).props('modelValue')).toBe(true)
+      expect(workbench.get('.container-option.selected').attributes('aria-pressed')).toBe('true')
+      await openAssignment()
+      expect(popup.props('modelValue')).toBe(true)
+      expect(assignmentDialog().classes()).not.toContain('is-fullscreen')
+      expect(popup.getComponent(ElInputNumber).props('modelValue')).toBe(candidate.availablePackageCount)
+      expect(outer.classList.contains('is-fullscreen')).toBe(true)
+      expect(assignSmartLoadingItem).not.toHaveBeenCalled()
+    } finally {
+      wrapper.unmount()
+    }
+  })
+
   it.each(['PACKAGE', 'SEALED_PALLET'] as const)('分配窗口全屏保留来源及输入，按%s原接口提交', async (unitType) => {
     if (unitType === 'SEALED_PALLET') {
       vi.mocked(listSmartLoadingCandidates).mockResolvedValue(candidatePage([{
@@ -136,7 +184,7 @@ describe('GlobalSmartLoadingView', () => {
     await wrapper.get('.candidate-pane .el-table__body-wrapper').findAll('button').find(button => button.text() === '加入')!.trigger('click')
     await flushPromises()
     const popup = wrapper.getComponent(AppDialog)
-    expect(popup.get('table[aria-label="全局装柜分配来源"]').text()).toContain('CB-1')
+    expect(assignmentDialog().get('table[aria-label="全局装柜分配来源"]').text()).toContain('CB-1')
     if (unitType === 'PACKAGE') {
       const input = popup.getComponent(ElInputNumber)
       expect(input.props('modelValue')).toBe(candidate.availablePackageCount)
@@ -144,11 +192,11 @@ describe('GlobalSmartLoadingView', () => {
       input.vm.$emit('update:modelValue', 4)
     } else {
       expect(popup.findComponent(ElInputNumber).exists()).toBe(false)
-      expect(popup.get('details').text()).toContain('I181：9 箱')
+      expect(assignmentDialog().get('details').text()).toContain('I181：9 箱')
       expect(popup.props('title')).toBe('整托加入当前柜次 · DP-TEST-1')
     }
-    await popup.get('[aria-label="展开全屏"]').trigger('click')
-    expect(popup.find('.el-dialog.is-fullscreen').exists()).toBe(true)
+    await assignmentDialog().get('[aria-label="展开全屏"]').trigger('click')
+    expect(assignmentDialog().classes()).toContain('is-fullscreen')
     if (unitType === 'PACKAGE') expect(popup.getComponent(ElInputNumber).props('modelValue')).toBe(4)
     popup.vm.$emit('confirm'); await flushPromises()
     if (unitType === 'PACKAGE') {
@@ -175,6 +223,7 @@ describe('GlobalSmartLoadingView', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
     vi.clearAllMocks()
+    vi.mocked(listPlatformTenants).mockReset().mockResolvedValue({ records: [], page: 1, size: 50, total: 0, pages: 0 })
     mockContainerSearch([container])
     vi.mocked(getSmartLoadingPlanByBooking).mockResolvedValue(plan)
     vi.mocked(listSmartLoadingCandidates).mockResolvedValue(candidatePage([candidate]))
@@ -264,12 +313,13 @@ describe('GlobalSmartLoadingView', () => {
 
     const option = wrapper.find('.container-option')
     expect(option.text()).toContain('模拟柜次')
-    expect(option.text()).toContain('柜次号：待生成')
-    expect(option.text()).toContain('集装箱号：待补录')
+    expect(option.get('.container-option__top strong').text()).toBe('待生成')
+    expect(option.text()).not.toContain('空柜')
+    expect(option.text()).toContain('集装箱：待补录')
     expect(option.text()).not.toContain('开始装柜前录入集装箱号')
     expect(option.text()).toContain('渠道：美森正班')
-    expect(option.text()).toContain('仓库：义乌国内仓')
-    expect(option.text()).toContain('柜型：40HQ')
+    expect(option.get('.container-option__meta').text()).toContain('义乌国内仓')
+    expect(option.get('.container-option__meta').text()).toContain('40HQ')
     expect(option.text()).not.toContain('2088475410134773762')
     expect(wrapper.text()).not.toContain('真实柜号')
   })
@@ -294,7 +344,7 @@ describe('GlobalSmartLoadingView', () => {
     expect(wrapper.findAll('.container-option')).toHaveLength(1)
     expect(wrapper.text()).toContain('MSCU-1')
     expect(wrapper.text()).not.toContain('MSCU-2')
-    expect(wrapper.text()).toContain('柜子数量1 个')
+    expect(wrapper.text()).toContain('柜次1 个')
 
     expect(wrapper.findAll('.channel-tags .el-checkbox-button').map((item) => item.text())).toEqual([
       '美森正班', '美森加班', 'EXX', '合德', '洛杉矶普船', '芝加哥普船', '休斯顿普船', '萨凡纳普船', '纽约普船海卡',
@@ -306,7 +356,7 @@ describe('GlobalSmartLoadingView', () => {
     expect(wrapper.findAll('.container-option')).toHaveLength(2)
     expect(wrapper.text()).toContain('MSCU-1')
     expect(wrapper.text()).toContain('MSCU-2')
-    expect(wrapper.text()).toContain('柜子数量2 个')
+    expect(wrapper.text()).toContain('柜次2 个')
   })
 
   it('selects only the double-clicked channel as a shortcut', async () => {
@@ -456,12 +506,35 @@ describe('GlobalSmartLoadingView', () => {
 
   it('sends the active name-only customer selector to the server candidate query', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/GlobalSmartLoadingView.vue'), 'utf8')
-    expect(source).toContain("listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' })")
+    expect(source).toContain('useActiveCustomerOptions(')
+    expect(source).toContain('remoteMethod: loadCustomers')
     expect(source).toContain("label: customer.tenantName")
     expect(source).toContain('params.customerId = customerId')
     expect(source).not.toContain('customer.tenantCode')
   })
 
+  it('searches customers remotely, loads more options, and applies the selected customer to candidates', async () => {
+    const target = { id: '9007199254740999', tenantName: '柏悦物流', status: 'ACTIVE' } as PlatformTenantResource
+    vi.mocked(listPlatformTenants).mockImplementation(async query => ({
+      records: query.keyword || query.page === 2 ? [target] : [{ id: '1', tenantName: '跨客户车次-测试客户', status: 'ACTIVE' } as PlatformTenantResource],
+      page: query.page, size: 50, total: query.keyword ? 1 : 350, pages: query.keyword ? 1 : 7,
+    }))
+    const wrapper = mount(GlobalSmartLoadingView, { global: { plugins: [ElementPlus] } })
+    await flushPromises()
+    const selector = wrapper.findAllComponents(ElSelect).find(item => item.props('placeholder') === '全部客户')!
+    expect(selector.props('remote')).toBe(true)
+    selector.vm.$emit('end-reached', 'bottom'); await flushPromises()
+    expect(listPlatformTenants).toHaveBeenLastCalledWith({ page: 2, size: 50, status: 'ACTIVE' })
+    await selector.props('remoteMethod')?.('柏悦'); await flushPromises()
+    expect(listPlatformTenants).toHaveBeenLastCalledWith({ page: 1, size: 50, status: 'ACTIVE', keyword: '柏悦' })
+    expect(selector.findAllComponents(ElOption).map(option => option.props('label'))).toContain('柏悦物流')
+    selector.vm.$emit('update:modelValue', target.id); await flushPromises()
+    const toolbar = wrapper.findComponent(QueryToolbar)
+    toolbar.vm.$emit('search', toolbar.props('modelValue')); await flushPromises()
+    expect(listSmartLoadingCandidates).toHaveBeenLastCalledWith(expect.objectContaining({ customerId: target.id }))
+    wrapper.unmount()
+  })
+
   it('defaults ordinary candidate assignment to all available boxes', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/GlobalSmartLoadingView.vue'), 'utf8')
     expect(source).toContain(': candidate.availablePackageCount')
@@ -545,11 +618,11 @@ describe('GlobalSmartLoadingView', () => {
     expect(document.body.textContent).toContain('不能部分输入、单独分配或单独移除')
     const popup = wrapper.getComponent(AppDialog)
     expect(popup.props('title')).toBe('整组加入当前柜次 · CLG-2093539779795795969')
-    const contextRows = popup.findAll('table[aria-label="全局装柜分配来源"] tr')
+    const contextRows = assignmentDialog().findAll('table[aria-label="全局装柜分配来源"] tr')
     expect(contextRows[0]!.findAll('td').map(cell => cell.text())).toEqual(['CB-1', 'MSCU-1'])
     expect(contextRows[1]!.findAll('td').map(cell => cell.text())).toEqual(['义乌仓', '美森正班'])
-    await popup.get('[aria-label="展开全屏"]').trigger('click')
-    expect(popup.get('table[aria-label="全局装柜同柜组成员"]').text()).toContain('NYEXX2608290051-B')
+    await assignmentDialog().get('[aria-label="展开全屏"]').trigger('click')
+    expect(assignmentDialog().get('table[aria-label="全局装柜同柜组成员"]').text()).toContain('NYEXX2608290051-B')
     expect(document.body.textContent).not.toContain('本次分配箱数')
     ;([...document.body.querySelectorAll('button')].find((button) => button.textContent?.includes('确认整组分配')) as HTMLButtonElement).click()
     await flushPromises()
@@ -585,9 +658,9 @@ describe('GlobalSmartLoadingView', () => {
     await flushPromises()
     const popup = wrapper.getComponent(AppDialog)
     expect(popup.props('title')).toBe('加入当前柜次 · EXXHK2609020361')
-    const measurements = popup.findAll('table[aria-label="全局装柜分配填写"] tr').find(row => row.text().includes('平均单箱毛重'))!
+    const measurements = assignmentDialog().findAll('table[aria-label="全局装柜分配填写"] tr').find(row => row.text().includes('平均单箱毛重'))!
     expect(measurements.findAll('td').map(cell => cell.text())).toEqual(['待测量', '待测量'])
-    const channel = popup.findAll('table[aria-label="全局装柜分配来源"] tr').find(row => row.text().includes('订单渠道'))!
+    const channel = assignmentDialog().findAll('table[aria-label="全局装柜分配来源"] tr').find(row => row.text().includes('订单渠道'))!
     expect(channel.findAll('td')[0]!.text()).toBe('合德海卡')
     expect(document.body.textContent).toContain('这是人工装柜分配，确认后仍会加入')
     expect(document.body.textContent).toContain('智能推荐不会跨渠道')
@@ -751,6 +824,8 @@ describe('GlobalSmartLoadingView', () => {
       { value: 'LOADING', label: '装柜中' },
     ])
     expect(fields.find((field) => field.key === 'orderStatuses')?.props).toMatchObject({ multiple: true, collapseTags: true, maxCollapseTags: 2 })
+    expect(fields.find((field) => field.key === 'createdRange')?.props).toMatchObject({ startPlaceholder: '创建起始', endPlaceholder: '创建截止', 'aria-label': '创建日期范围' })
+    expect(fields.find((field) => field.key === 'expectedArrivalRange')?.props).toMatchObject({ startPlaceholder: '到货起始', endPlaceholder: '到货截止', 'aria-label': '预计到货日期范围' })
     expect(source).not.toContain('目的仓')
 
     expect(wrapper.text()).not.toContain('税率')
@@ -862,6 +937,42 @@ describe('GlobalSmartLoadingView', () => {
     expect(listSmartLoadingCandidates).toHaveBeenCalledWith({ channelGroupCodes: ['MATSON_CLX'], page: 1, size: 20 })
   })
 
+  it('keeps assignment failures and diagnostic IDs inside the open dialog without losing the quantity', async () => {
+    vi.spyOn(ElMessage, 'error').mockImplementation(() => undefined as never)
+    vi.mocked(assignSmartLoadingItem).mockRejectedValueOnce(new AxiosError(
+      'forbidden', 'ERR_BAD_REQUEST', undefined, undefined,
+      { data: { code: 'A0403', message: 'Access denied', requestId: 'assign-request', traceId: 'assign-trace' }, status: 403, statusText: 'Forbidden', headers: {}, config: {} as never },
+    ))
+    const wrapper = mount(GlobalSmartLoadingView, { attachTo: document.body, global: { plugins: [ElementPlus] } })
+    await flushPromises()
+    await wrapper.get('.candidate-pane .el-table__body-wrapper').findAll('button').find(button => button.text() === '加入')!.trigger('click')
+    await flushPromises()
+    const popup = wrapper.getComponent(AppDialog)
+    const input = popup.getComponent(ElInputNumber)
+    input.vm.$emit('update:modelValue', 7)
+    await flushPromises()
+
+    // 箱数与上方资料使用同一标签列，保留输入名称与原范围。
+    const label = assignmentDialog().get('label[for="global-loading-assignment-count"]')
+    expect(label.element.parentElement?.tagName).toBe('TH')
+    expect(label.element.parentElement?.nextElementSibling?.getAttribute('colspan')).toBe('3')
+    expect(assignmentDialog().find('input#global-loading-assignment-count').exists()).toBe(true)
+    expect(input.props('max')).toBe(candidate.availablePackageCount)
+    popup.vm.$emit('confirm')
+    await flushPromises()
+
+    expect(assignSmartLoadingItem).toHaveBeenCalledWith(plan.id, { inboundId: candidate.inboundId, packageCount: 7, expectedVersion: plan.version })
+    expect(popup.props('modelValue')).toBe(true)
+    expect(input.props('modelValue')).toBe(7)
+    expect(assignmentDialog().text()).toContain('加入当前柜次失败')
+    expect(assignmentDialog().text()).toContain('当前账号无权访问该数据')
+    expect(assignmentDialog().text()).toContain('assign-request')
+    expect(assignmentDialog().text()).toContain('assign-trace')
+    expect(assignmentDialog().findAll('.load-error-state')).toHaveLength(1)
+    expect(wrapper.get('.global-loading-page').findAll('.load-error-state')).toHaveLength(0)
+    wrapper.unmount()
+  })
+
   it('refreshes the latest plan after A0409 without losing the selected container', async () => {
     const warningMessage = vi.spyOn(ElMessage, 'warning').mockImplementation(() => undefined as never)
     const wrapper = mount(GlobalSmartLoadingView, { global: { plugins: [ElementPlus] } })
@@ -1073,7 +1184,7 @@ describe('GlobalSmartLoadingView', () => {
     expect(source).toContain('size="small"')
     expect(source).toContain('type="danger" plain')
     expect(source).toContain(':max="adjustmentMax(row)"')
-    expect(source).toContain("{ key: 'customerName', prop: 'customerName', label: '客户', minWidth: 70, slotName: 'customerName' }")
+    expect(source).toContain("{ key: 'customerName', prop: 'customerName', label: '客户', minWidth: 120, slotName: 'customerName' }")
     expect(source).not.toContain('link type="danger"')
     expect(source).toContain('@media (max-width: 720px)')
     expect(source.match(/<DataTable[\s\S]*?\bstripe\b/g)).toHaveLength(2)
@@ -1083,9 +1194,9 @@ describe('GlobalSmartLoadingView', () => {
     const source = readFileSync(resolve(process.cwd(), 'src/modules/container-loading/pages/GlobalSmartLoadingView.vue'), 'utf8')
 
     expect(source).toContain('height: clamp(520px, 68vh, 720px); min-height: 0;')
-    expect(source).toContain('grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr);')
+    expect(source).toContain('grid-template-columns: minmax(0, 1.05fr) 240px minmax(0, 1fr);')
     expect(source).toContain('.dispatch-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; }')
-    expect(source).toContain('.candidate-pane :deep(.data-table),.plan-pane :deep(.data-table) { min-height: 0; flex: 1; }')
+    expect(source).toContain('.candidate-pane :deep(.data-table),.plan-pane :deep(.data-table) { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }')
     expect(source).toContain(".candidate-pane :deep(.data-table__page-button[aria-label^='第']),.candidate-pane :deep(.data-table__page-ellipsis) { display: none; }")
     expect(source).toContain('.candidate-pane :deep(.data-table__page-size .el-select) { width: 68px; }')
     expect(source).toContain('.container-list { display: grid; min-height: 0; flex: 1;')
@@ -1093,11 +1204,12 @@ describe('GlobalSmartLoadingView', () => {
     expect(source).toContain('overflow-wrap: anywhere;')
     expect(source).toContain('.candidate-pane,.plan-pane { height: min(68vh, 560px); min-height: 420px; }')
     expect(source).toContain('.container-pane { max-height: min(58vh, 460px); }')
-    expect(source).toContain('min-height: 112px')
+    expect(source).toContain('gap: var(--admin-space-1); padding: var(--admin-space-4);')
+    expect(source).toContain('.candidate-pane :deep(.data-table__pagination) { flex: 0 0 auto; }')
     expect(source).toContain("label: '创建日期'")
     expect(source).toContain("label: '预计到货时间'")
     expect(source).toContain("label: '订单状态'")
-    expect(source).toContain('.smart-loading-query .query-toolbar__filters) { flex-wrap: nowrap; gap: 8px; overflow-x: auto; }')
+    expect(source).toContain('.smart-loading-query .query-toolbar__filters) { flex-wrap: wrap; gap: 8px; }')
     expect(source).toContain('.smart-loading-query .query-toolbar__actions) { flex-wrap: nowrap; gap: 6px; }')
     expect(source).toContain(':page-sizes="[20, 50, 100]"')
   })
@@ -1112,10 +1224,10 @@ describe('GlobalSmartLoadingView', () => {
     expect(source).toContain("ElMessage.warning('至少选择一个渠道')")
     expect(source).toContain('class="compact-summary" aria-label="已选渠道装柜统计"')
     expect(source).toContain('<dt>候选明细</dt>')
-    expect(source).toContain('<dt>柜子数量</dt>')
-    expect(source).toContain('<dt>已装</dt>')
-    expect(source).toContain('<dt>总重量</dt>')
-    expect(source).toContain('<dt>总体积</dt>')
+    expect(source).toContain('<dt>柜次</dt>')
+    expect(source).toContain('<dt>当前柜次分配</dt>')
+    expect(source).toContain('formatNumber(totalWeight, 1)')
+    expect(source).toContain('formatNumber(totalVolume)')
     expect(source).toContain('.channel-tags :deep(.el-checkbox-button__inner)')
     expect(source).toContain('flex-wrap: nowrap; gap: 6px;')
     expect(source).toContain('height: 34px; padding: 0 10px;')

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { Pencil, RefreshCw, Sparkles, Trash2 } from '@lucide/vue'
 import SmartLoadingCandidateInbounds from '../components/SmartLoadingCandidateInbounds.vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
-import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
+import { listPlatformTenants, useActiveCustomerOptions } from '@/modules/iam'
 import { listAllPlatformWarehouses, type PlatformWarehouseSummaryResource } from '@/modules/warehouses'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -49,8 +50,6 @@ const editingQuantityId = ref('')
 const access = useAccessPreviewStore()
 const containers = ref<SmartLoadingWorkbenchContainer[]>([])
 const warehouses = ref<PlatformWarehouseSummaryResource[]>([])
-const customers = ref<PlatformTenantResource[]>([])
-const customersLoading = ref(false)
 const selectedContainerId = ref('')
 const selectedChannelCodes = ref<string[]>([])
 const plan = ref<SmartLoadingPlan | null>(null)
@@ -76,6 +75,7 @@ const assignForm = reactive({ packageCount: 1 })
 const quantityDrafts = reactive<Record<string, number>>({})
 const planGroupsByInboundId = ref(new Map<string, SmartLoadingPlanCoLoadGroup>())
 const query = ref<QueryModel>({ warehouseId: '', customerId: '', inboundCode: '', createdRange: [], expectedArrivalRange: [], orderStatuses: [] })
+const { customers, loading: customersLoading, error: customersError, search: loadCustomers, endReached: customerEndReached, retry: retryCustomers } = useActiveCustomerOptions(() => String(query.value.customerId || ''), listPlatformTenants)
 const appliedQuery = ref<QueryModel>({ ...query.value, orderStatuses: [] })
 const candidatePage = ref(1)
 const candidatePageSize = ref(20)
@@ -216,10 +216,10 @@ function candidateStatusLabel(status: string | null | undefined) {
 }
 const queryFields = computed<QueryField[]>(() => [
   { key: 'warehouseId', type: 'select', label: '发货仓', placeholder: '全部发货仓', width: 160, options: warehouseOptions.value, props: { filterable: true } },
-  { key: 'customerId', type: 'select', label: '客户', placeholder: '全部客户', width: 180, options: customers.value.filter((customer) => customer.status === 'ACTIVE').map((customer) => ({ label: customer.tenantName, value: String(customer.id) })), props: { filterable: true, loading: customersLoading.value } },
+  { key: 'customerId', type: 'select', label: '客户', placeholder: '全部客户', width: 180, options: customers.value.map((customer) => ({ label: customer.tenantName, value: String(customer.id) })), props: { filterable: true, remote: true, remoteMethod: loadCustomers, onEndReached: customerEndReached, loading: customersLoading.value } },
   { key: 'inboundCode', type: 'input', label: '入仓码', placeholder: '请输入入仓码', width: 210 },
-  { key: 'createdRange', type: 'daterange', label: '创建日期', placeholder: '请选择创建日期范围', width: 260 },
-  { key: 'expectedArrivalRange', type: 'daterange', label: '预计到货时间', placeholder: '请选择预计到货时间范围', width: 260 },
+  { key: 'createdRange', type: 'daterange', label: '创建日期', placeholder: '请选择创建日期范围', width: 260, props: { startPlaceholder: '创建起始', endPlaceholder: '创建截止', 'aria-label': '创建日期范围' } },
+  { key: 'expectedArrivalRange', type: 'daterange', label: '预计到货时间', placeholder: '请选择预计到货时间范围', width: 260, props: { startPlaceholder: '到货起始', endPlaceholder: '到货截止', 'aria-label': '预计到货日期范围' } },
   { key: 'orderStatuses', type: 'select', label: '订单状态', placeholder: '全部订单状态', width: 210, options: candidateOrderStatusOptions, props: { multiple: true, collapseTags: true, collapseTagsTooltip: true, maxCollapseTags: 2 } },
 ])
 
@@ -240,28 +240,27 @@ function preferredContainerId() {
 
 const candidateColumns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
-  { key: 'inboundCode', label: '入仓码', minWidth: 220, fixed: 'left', slotName: 'candidateInbounds' },
-  { key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 145, showOverflowTooltip: true },
-  { key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
-  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 70, slotName: 'customerName' },
+  { key: 'inboundCode', label: '入仓码', minWidth: 180, fixed: 'left', slotName: 'candidateInbounds' },
+  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 120, slotName: 'customerName' },
   { key: 'orderStatusSnapshot', prop: 'orderStatusSnapshot', label: '订单状态', width: 100, slotName: 'orderStatusSnapshot' },
   { key: 'availablePackageCount', prop: 'availablePackageCount', label: '箱数', width: 80 },
-  // { key: 'cartonIdentityStatus', label: '箱号归属', width: 105, slotName: 'cartonIdentityStatus' },
+  { key: 'totalGrossWeightKg', label: '重量', width: 100, slotName: 'candidateTotalWeight' },
+  { key: 'totalVolumeCbm', label: '体积', width: 100, slotName: 'candidateTotalVolume' },
+  { key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 145, showOverflowTooltip: true },
+  { key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
   { key: 'unitGrossWeightKg', label: '单位毛重', width: 90, slotName: 'unitGrossWeight' },
-  { key: 'totalGrossWeightKg', label: '重量', width: 90, slotName: 'candidateTotalWeight' },
   { key: 'averageUnitVolumeCbm', label: '单位体积', width: 90, slotName: 'averageUnitVolume' },
-  { key: 'totalVolumeCbm', label: '体积', width: 90, slotName: 'candidateTotalVolume' },
   { key: 'estimatedVolumeCbm', label: '预估体积', width: 100, slotName: 'estimatedVolume' },
 ]
 const itemColumns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
-  { key: 'inboundCode', label: '入仓码', minWidth: 220, fixed: 'left', slotName: 'planInbounds' },
-  { key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 145, showOverflowTooltip: true },
-  { key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
-  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 70, slotName: 'customerName' },
+  { key: 'inboundCode', label: '入仓码', minWidth: 180, fixed: 'left', slotName: 'planInbounds' },
+  { key: 'customerName', prop: 'customerName', label: '客户', minWidth: 120, slotName: 'customerName' },
   { key: 'packageCount', label: '分配箱数', width: 140, slotName: 'packageCount' },
   { key: 'grossWeightKg', label: '毛重', width: 90, slotName: 'weight' },
   { key: 'volumeCbm', label: '体积', width: 90, slotName: 'volume' },
+  { key: 'palletNo', prop: 'palletNo', label: '托盘号', minWidth: 145, showOverflowTooltip: true },
+  { key: 'coLoadGroup', label: '装柜规则', minWidth: 170, slotName: 'coLoadGroup' },
 ]
 
 function formatNumber(value: number, digits = 3) {
@@ -451,17 +450,6 @@ async function loadAll(preserved: Record<string, number> = {}) {
   }
 }
 async function load() { await loadAll() }
-async function loadCustomers() {
-  customersLoading.value = true
-  try {
-    const result = await listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' })
-    customers.value = result.records.filter((customer) => customer.status === 'ACTIVE')
-  } catch {
-    customers.value = []
-  } finally {
-    customersLoading.value = false
-  }
-}
 async function selectContainer(containerId: string) {
   if (selectedContainerId.value === containerId) return
   selectedContainerId.value = containerId
@@ -506,6 +494,7 @@ function openAssign(source: object) {
   const candidate = candidateRow(source)
   if (candidateBlocked(candidate)) return
   selectedCandidate.value = candidate
+  mutationError.value = null
   assignForm.packageCount = candidate.coLoadGroupId
     ? Number(candidate.groupTotalBoxes || candidate.availablePackageCount)
     : candidate.availablePackageCount
@@ -687,8 +676,8 @@ onMounted(() => { void load(); void loadCustomers() })
 </script>
 
 <template>
-  <component class="admin-density" :is="props.embedded ? 'div' : AdminPage" :class="{ 'embedded-smart-loading': props.embedded }">
-    <section class="global-loading-page">
+  <component class="admin-density admin-workbench" :is="props.embedded ? 'div' : AdminPage" :class="{ 'embedded-smart-loading': props.embedded }">
+    <section class="global-loading-page admin-workbench">
       <div v-if="channelOptions.length" class="channel-summary-row">
         <el-checkbox-group :model-value="selectedChannelCodes" class="channel-tags" aria-label="渠道筛选，至少选择一项" @change="selectChannels($event as string[])">
           <span class="channel-tags__label">渠道</span>
@@ -703,10 +692,8 @@ onMounted(() => { void load(); void loadCustomers() })
         </el-checkbox-group>
         <dl class="compact-summary" aria-label="已选渠道装柜统计">
           <div><dt>候选明细</dt><dd><strong>{{ candidateTotal }}</strong> 条</dd></div>
-          <div><dt>柜子数量</dt><dd><strong>{{ filteredContainers.length }}</strong> 个</dd></div>
-          <div><dt>已装</dt><dd><strong>{{ totalPackages }}</strong> 箱</dd></div>
-          <div><dt>总重量</dt><dd><strong>{{ formatNumber(totalWeight, 1) }}</strong> kg</dd></div>
-          <div><dt>总体积</dt><dd><strong>{{ formatNumber(totalVolume) }}</strong> m³</dd></div>
+          <div><dt>柜次</dt><dd><strong>{{ filteredContainers.length }}</strong> 个</dd></div>
+          <div><dt>当前柜次分配</dt><dd><strong>{{ totalPackages }}</strong> 箱</dd></div>
         </dl>
       </div>
       <el-alert v-if="missingChannelContainerCount && !mappedWorkbenchContainerCount" type="warning" :closable="false" show-icon :title="`${missingChannelContainerCount} 个可编排柜次缺少计划渠道，已隔离；请重新创建模拟柜`" />
@@ -723,11 +710,14 @@ onMounted(() => { void load(); void loadCustomers() })
         @reset="applyFilters"
       />
 
+      <LoadErrorState v-if="customersError" title="客户选项加载失败" :message="customersError.message" :loading="customersLoading" compact @retry="retryCustomers">
+        <template #details><ApiErrorMeta :details="customersError" /></template>
+      </LoadErrorState>
       <LoadErrorState v-if="loadError" title="智能装柜工作台加载失败" :message="loadError.message" :loading="loading" @retry="load">
         <template #details><ApiErrorMeta :details="loadError" /></template>
       </LoadErrorState>
       <template v-else>
-        <LoadErrorState v-if="mutationError" title="装柜操作失败" :message="mutationError.message" compact retry-text="刷新工作台" @retry="loadWorkbenchData()">
+        <LoadErrorState v-if="mutationError && !assignOpen" title="装柜操作失败" :message="mutationError.message" compact retry-text="刷新工作台" @retry="loadWorkbenchData()">
           <template #details><ApiErrorMeta :details="mutationError" /></template>
         </LoadErrorState>
         <section class="dispatch-grid" aria-label="智能装柜调度台">
@@ -736,7 +726,7 @@ onMounted(() => { void load(); void loadCustomers() })
             <LoadErrorState v-if="candidateError" title="候选明细加载失败" :message="candidateError.message" compact @retry="loadCandidateData()">
               <template #details><ApiErrorMeta :details="candidateError" /></template>
             </LoadErrorState>
-            <DataTable
+            <div class="workbench-table"><DataTable
               :page="candidatePage"
               :page-size="candidatePageSize"
               :data="displayedCandidates"
@@ -773,7 +763,7 @@ onMounted(() => { void load(); void loadCustomers() })
                 <template #candidateTotalVolume="{ row }">{{ formatMeasurement(row.totalVolumeCbm, 'm³') }}</template>
                 <template #estimatedVolume="{ row }">{{ row.estimatedVolumeCbm == null ? '—' : `${formatNumber(Number(row.estimatedVolumeCbm))} m³` }}</template>
               <template #cartonIdentityStatus><el-tag size="small" type="info" effect="plain">未核验</el-tag></template>
-            </DataTable>
+            </DataTable></div>
           </section>
 
           <aside class="dispatch-pane container-pane" aria-label="货柜列表">
@@ -790,15 +780,14 @@ onMounted(() => { void load(); void loadCustomers() })
                 @click="selectContainer(item.bookingId)"
               >
                 <span class="container-option__top">
-                  <strong>{{ hasRealContainerNo(item) ? displayActualContainerNo(item) : '模拟柜次' }}</strong>
+                  <strong>{{ displayCabinetNo(item) }}</strong>
                   <el-tag size="small" :type="hasRealContainerNo(item) ? 'success' : 'info'">
-                    {{ hasRealContainerNo(item) ? '已录入集装箱号' : '空柜' }}
+                    {{ hasRealContainerNo(item) ? '已录柜号' : '模拟柜次' }}
                   </el-tag>
                 </span>
-                <span class="container-option__identity">柜次号：{{ displayCabinetNo(item) }}</span>
-                <span>集装箱号：{{ displayActualContainerNo(item) }}</span>
+                <span class="container-option__identity">集装箱：{{ displayActualContainerNo(item) }}</span>
                 <span>渠道：{{ containerChannelGroup(item)?.name || '渠道待补充' }}</span>
-                <span>仓库：{{ item.warehouseName || '仓库待补充' }} · 柜型：{{ item.containerType || '柜型待补充' }}</span>
+                <span class="container-option__meta"><span>{{ item.warehouseName || '仓库待补充' }}</span><span>{{ item.containerType || '柜型待补充' }}</span></span>
                 <!-- 空柜的操作时机由状态和操作按钮表达，不在每张柜次卡片重复提示。 -->
               </button>
             </div>
@@ -837,7 +826,7 @@ onMounted(() => { void load(); void loadCustomers() })
                 <div><div class="meter-title"><span>体积</span><strong>{{ formatNumber(totalVolume) }} / {{ formatNumber(volumeLimit) }} m³</strong></div><el-progress :percentage="Math.min(displayedVolumePercent, 100)" :status="volumePercent > 100 ? 'exception' : undefined" /></div>
                 <div><div class="meter-title"><span>重量</span><strong>{{ formatNumber(totalWeight, 1) }} / {{ formatNumber(weightLimit, 1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent, 100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div>
               </div>
-              <DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="selectionLoading || mutating" stripe preference-key="global-smart-loading-items" column-settings-mode="hide" empty-text="当前柜次暂无装柜明细">
+              <div class="workbench-table"><DataTable :data="displayedPlanItems" :columns="itemColumns" :loading="selectionLoading || mutating" stripe preference-key="global-smart-loading-items" column-settings-mode="hide" empty-text="当前柜次暂无装柜明细">
                 <template #actions="{ row }"><div class="row-actions density-actions"><el-button class="density-action" data-tone="danger" v-if="canDelete && editable && row.canRemove" size="small" type="danger" plain :disabled="mutating" @click="remove(row)"><Trash2 :size="15" />删除</el-button></div></template>
                 <template #planInbounds="{ row }"><SmartLoadingCandidateInbounds :members="row.palletMembers" :sealed-pallet="row.unitType === 'SEALED_PALLET'" :fallback-inbound-code="row.inboundCode" /></template>
                 <template #customerName="{ row }"><LineClampText :content="row.customerName" /></template>
@@ -845,36 +834,39 @@ onMounted(() => { void load(); void loadCustomers() })
                 <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="多规格，需删除后重加" /><LineClampText v-if="row.pickedPackageCount > 0" :content="`已拣 ${row.pickedPackageCount} 箱`" /></div></template>
                 <template #weight="{ row }">{{ formatNumber(Number(row.grossWeightKg || 0), 1) }} kg</template>
                 <template #volume="{ row }">{{ formatNumber(Number(row.volumeCbm || 0)) }} m³</template>
-              </DataTable>
+              </DataTable></div>
             </template>
           </section>
         </section>
 
-        <AppDialog class="admin-density-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(920px, calc(100vw - 28px))" fullscreenable :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认加入'" @confirm="assign">
+        <AppDialog class="smart-loading-assignment-dialog admin-density-dialog admin-workbench is-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(920px, calc(100vw - 28px))" append-to-body fullscreenable :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认加入'" @confirm="assign">
+          <LoadErrorState v-if="mutationError" title="加入当前柜次失败" :message="mutationError.message" compact :show-retry="false">
+            <template #details><ApiErrorMeta :details="mutationError" /></template>
+          </LoadErrorState>
           <div v-if="selectedCandidate" class="density-dialog-sections">
             <section class="density-dialog-section" data-tone="source">
-              <table class="density-table assignment-context-table" aria-label="全局装柜分配来源"><tbody>
+              <div class="workbench-evidence"><table class="density-table assignment-context-table" aria-label="全局装柜分配来源"><tbody>
                 <tr><th>目标柜次</th><td>{{ displayCabinetNo(selectedContainer) }}</td><th>集装箱号</th><td>{{ displayActualContainerNo(selectedContainer) }}</td></tr>
                 <tr><th>发货仓</th><td>{{ selectedContainer?.warehouseName || '—' }}</td><th>柜次渠道</th><td>{{ containerChannelGroup(selectedContainer)?.name || '—' }}</td></tr>
                 <tr><th>订单渠道</th><td>{{ selectedCandidate.channelName || '—' }}</td><th>{{ selectedCandidate.coLoadGroupId ? '同柜组' : '客户' }}</th><td>{{ selectedCandidate.coLoadGroupId ? selectedCandidate.groupNo : selectedCandidate.customerName || '客户待补充' }}</td></tr>
-              </tbody></table>
+              </tbody></table></div>
             </section>
             <el-alert v-if="crossChannelAssignment" title="订单渠道与柜次渠道不同；这是人工装柜分配，确认后仍会加入。智能推荐不会跨渠道。" type="warning" :closable="false" />
             <section class="density-dialog-section" data-tone="work">
               <el-form class="density-form">
-                <table class="density-table density-table--editable assignment-context-table" aria-label="全局装柜分配填写"><tbody>
+                <div class="workbench-evidence"><table class="density-table density-table--editable assignment-context-table" aria-label="全局装柜分配填写"><tbody>
                   <tr v-if="selectedCandidate.coLoadGroupId"><th>整组范围</th><td colspan="3">组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</td></tr>
                   <tr v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><th>托盘号</th><td>{{ selectedCandidate.palletNo || '—' }}</td><th>整托箱数</th><td>整托 {{ selectedCandidate.availablePackageCount }} 箱</td></tr>
                   <template v-else>
                     <tr><th>入仓码</th><td>{{ selectedCandidate.inboundCode || '—' }}</td><th>可用箱数</th><td>{{ selectedCandidate.availablePackageCount }} 箱</td></tr>
                     <tr><th>平均单箱毛重</th><td>{{ formatMeasurement(selectedCandidate.unitGrossWeightKg, 'kg', 1) }}</td><th>平均单箱体积</th><td>{{ formatMeasurement(selectedCandidate.averageUnitVolumeCbm, 'm³') }}</td></tr>
-                    <tr><td colspan="4"><el-form-item label="本次分配箱数" label-position="left" label-width="128px" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
+                    <tr><th><label for="global-loading-assignment-count"><span class="assignment-required" aria-hidden="true">*</span>本次分配箱数</label></th><td colspan="3"><el-form-item><el-input-number id="global-loading-assignment-count" v-model="assignForm.packageCount" aria-label="本次分配箱数" aria-required="true" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
                   </template>
-                </tbody></table>
+                </tbody></table></div>
               </el-form>
             </section>
             <template v-if="selectedCandidate.coLoadGroupId">
-              <section class="density-dialog-section" data-tone="source"><table class="density-table" aria-label="全局装柜同柜组成员"><thead><tr><th>组内订单及入仓片段</th></tr></thead><tbody><tr v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary"><td>{{ summary }}</td></tr></tbody></table></section>
+              <section class="density-dialog-section" data-tone="source"><div class="workbench-evidence"><table class="density-table" aria-label="全局装柜同柜组成员"><thead><tr><th>组内订单及入仓片段</th></tr></thead><tbody><tr v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary"><td>{{ summary }}</td></tr></tbody></table></div></section>
               <el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入、单独分配或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" />
             </template>
             <template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'">
@@ -892,61 +884,69 @@ onMounted(() => { void load(); void loadCustomers() })
 <style scoped>
 .assignment-context-table { table-layout: fixed; }
 .assignment-context-table th { width: 120px; }
+.assignment-required { margin-right: var(--admin-space-1); color: var(--el-color-danger); }
 .global-loading-page { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 12px; }
 .embedded-smart-loading { display: flex; width: 100%; min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
 .embedded-smart-loading .global-loading-page { width: 100%; min-height: 0; flex: 1; overflow: hidden; }
-.channel-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; border-bottom: 2px solid var(--cc-border); background: #fff; }
+.channel-summary-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; border-bottom: 1px solid var(--workbench-border); background: var(--workbench-surface); }
 .channel-tags { display: flex; min-width: 0; align-items: center; flex-wrap: nowrap; gap: 6px; padding: 6px 0; overflow-x: auto; }
-.channel-tags__label { flex: 0 0 auto; margin-right: 2px; color: var(--cc-text); font-size: var(--admin-font-body); font-weight: 600; }
+.channel-tags__label { flex: 0 0 auto; margin-right: 2px; color: var(--workbench-text); font-size: var(--admin-font-body); font-weight: 600; }
 .channel-tags :deep(.el-checkbox-button) { flex: 0 0 auto; }
-.channel-tags :deep(.el-checkbox-button__inner) { height: 34px; padding: 0 10px; border: 1px solid var(--cc-border) !important; border-radius: 6px !important; box-shadow: none !important; font-size: var(--admin-font-body); line-height: 32px; }
+.channel-tags :deep(.el-checkbox-button__inner) { height: 34px; padding: 0 10px; border: 1px solid var(--workbench-border) !important; border-radius: 6px !important; box-shadow: none !important; font-size: var(--admin-font-body); line-height: 32px; }
 .compact-summary { display: flex; min-height: 46px; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; padding: 5px 8px; white-space: nowrap; }
 .compact-summary > div { display: flex; align-items: baseline; gap: 4px; }
-.compact-summary dt { color: var(--cc-muted); font-size: var(--admin-font-caption); }
-.compact-summary dd { margin: 0; color: var(--cc-text); font-size: var(--admin-font-caption); }
+.compact-summary dt { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.compact-summary dd { margin: 0; color: var(--workbench-text); font-size: var(--admin-font-caption); }
 .compact-summary strong { color: var(--el-color-primary); font-size: var(--admin-font-section); }
 :deep(.smart-loading-query.query-toolbar) { padding: 0; border: 0; background: transparent; }
-:deep(.smart-loading-query .query-toolbar__filters) { flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
-:deep(.smart-loading-query .query-toolbar__tail) { flex-wrap: nowrap; gap: 8px; }
+:deep(.smart-loading-query .query-toolbar__filters) { flex-wrap: wrap; gap: 8px; }
+:deep(.smart-loading-query .query-toolbar__tail) { flex-wrap: wrap; gap: 8px; }
 :deep(.smart-loading-query .query-toolbar__actions) { flex-wrap: nowrap; gap: 6px; }
-.pane-header small,.container-option span,.global-loading-page small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
-.dispatch-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr); height: clamp(520px, 68vh, 720px); min-height: 0; overflow-x: auto; border: 1px solid var(--cc-border); background: #fff; }
+.pane-header small,.container-option span,.global-loading-page small { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.dispatch-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) 240px minmax(0, 1fr); height: clamp(520px, 68vh, 720px); min-height: 0; overflow-x: auto;   }
 .embedded-smart-loading .dispatch-grid { height: auto; min-height: 0; flex: 1; }
+.dispatch-pane > .workbench-table { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
 .dispatch-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
-.dispatch-pane + .dispatch-pane { border-left: 1px solid var(--cc-border); }
-.pane-header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--cc-border); background: #fff; }
+.dispatch-pane + .dispatch-pane { border-left: 1px solid var(--workbench-border); }
+.pane-header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--workbench-border); background: var(--workbench-surface); }
 .pane-header > div:first-child { display: grid; min-width: 0; gap: 3px; }
-.candidate-pane :deep(.data-table),.plan-pane :deep(.data-table) { min-height: 0; flex: 1; }
-.candidate-pane :deep(.el-table),.plan-pane :deep(.el-table) { height: 100%; }
+.candidate-pane :deep(.data-table),.plan-pane :deep(.data-table) { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
+.candidate-pane :deep(.el-table),.plan-pane :deep(.el-table) { min-height: 0; height: auto; flex: 1; }
+.plan-pane :deep(.el-table__empty-block) { min-height: 220px; }
+.candidate-pane :deep(.data-table__pagination) { flex: 0 0 auto; }
 .candidate-pane :deep(.data-table__pagination) { min-height: 46px; flex-wrap: nowrap; gap: 8px; padding: 7px 8px; }
 .candidate-pane :deep(.data-table__pagination-left) { flex: 0 0 auto; white-space: nowrap; }
 .candidate-pane :deep(.data-table__pagination-controls),.candidate-pane :deep(.data-table__page-size),.candidate-pane :deep(.data-table__page-buttons) { flex-wrap: nowrap; gap: 4px; white-space: nowrap; }
 .candidate-pane :deep(.data-table__page-button[aria-label^='第']),.candidate-pane :deep(.data-table__page-ellipsis) { display: none; }
 .candidate-pane :deep(.data-table__page-size .el-select) { width: 68px; }
-.container-pane { background: #fafafa; }
-.container-list { display: grid; min-height: 0; flex: 1; grid-auto-rows: max-content; align-content: start; gap: 8px; padding: 10px; overflow-y: auto; }
-.container-option { display: grid; width: 100%; min-height: 112px; height: auto; align-content: start; gap: 6px; padding: 14px; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; color: var(--cc-text); line-height: 1.4; text-align: left; cursor: pointer; }
-.container-option:hover,.container-option:focus-visible { border-color: var(--el-color-primary); outline: none; }
+.container-pane { background: var(--workbench-surface-soft); }
+.container-list { display: grid; min-height: 0; flex: 1; grid-auto-rows: max-content; align-content: start; gap: var(--admin-space-3); padding: var(--admin-space-3); overflow-y: auto; }
+.container-option { display: grid; width: 100%; height: auto; align-content: start; gap: var(--admin-space-1); padding: var(--admin-space-4); overflow: hidden; border: 1px solid var(--workbench-border); border-radius: var(--workbench-tab-radius); background: var(--workbench-surface); color: var(--workbench-text); line-height: 1.4; text-align: left; cursor: pointer; }
+.container-option:hover { border-color: var(--workbench-primary); }
+.container-option:focus-visible { outline: 2px solid var(--workbench-primary); outline-offset: 2px; }
 .container-option.selected { border-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
-.container-option__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cc-text) !important; }
-.container-option__identity { color: var(--cc-text); font-size: var(--admin-font-body); font-weight: 600; }
+.container-option__top { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); }
+.container-option__top strong { color: var(--workbench-text); font-size: var(--admin-font-body); }
+.container-option__top .el-tag { flex: 0 0 auto; }
+.container-option__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--admin-space-3); }
+.container-option__identity { overflow-wrap: anywhere; }
 .container-option__hint { color: var(--el-color-warning); font-weight: 600; }
 .container-option span,.container-option strong { min-width: 0; overflow-wrap: anywhere; }
 .plan-header { flex-wrap: wrap; }
 .plan-actions,.row-actions,.meter-title { display: flex; align-items: center; gap: 8px; }
 .plan-actions,.row-actions { flex-wrap: wrap; }
 .plan-actions :deep(.el-button + .el-button),.row-actions :deep(.el-button + .el-button) { margin-left: 0; }
-.capacity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-bottom: 1px solid var(--cc-border); }
+.capacity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; border-bottom: 1px solid var(--workbench-border); }
 .preload-readiness-alert { border-radius: 0; border-right: 0; border-left: 0; }
 .readonly-status-card { display: grid; align-content: start; justify-items: start; gap: 10px; padding: 28px 24px; }
 .readonly-status-card strong { font-size: var(--admin-font-title); }
-.readonly-status-card p { max-width: 460px; margin: 0; color: var(--cc-muted); line-height: 1.6; }
+.readonly-status-card p { max-width: 460px; margin: 0; color: var(--workbench-muted); line-height: 1.6; }
 .meter-title { justify-content: space-between; margin-bottom: 8px; font-size: var(--admin-font-caption); }
 .package-count-editor { display: grid; min-width: 0; gap: 4px; }
 .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: var(--admin-font-body); font-weight: 600; }
-.package-count-summary small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
+.package-count-summary small { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .plan-pane :deep(.package-count-editor .el-input-number) { width: 100%; min-width: 0; }
 .candidate-group { display: grid; width: 100%; min-width: 0; gap: 4px; }
 .candidate-group :deep(.el-tag),.candidate-group :deep(.el-tag__content),.candidate-group :deep(.line-clamp-text) { max-width: 100%; min-width: 0; }
@@ -956,7 +956,7 @@ onMounted(() => { void load(); void loadCustomers() })
   :deep(.smart-loading-query .query-toolbar__filters),:deep(.smart-loading-query .query-toolbar__tail),:deep(.smart-loading-query .query-toolbar__actions) { flex-wrap: wrap; overflow: visible; }
   .dispatch-grid { grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; }
   .embedded-smart-loading .dispatch-grid { height: auto; }
-  .dispatch-pane + .dispatch-pane { border-top: 1px solid var(--cc-border); border-left: 0; }
+  .dispatch-pane + .dispatch-pane { border-top: 1px solid var(--workbench-border); border-left: 0; }
   .candidate-pane,.plan-pane { height: min(68vh, 560px); min-height: 420px; }
   .candidate-pane :deep(.data-table__pagination) { flex-wrap: wrap; }
   .container-pane { max-height: min(58vh, 460px); }

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

@@ -3,13 +3,15 @@ import { AxiosError } from 'axios'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import { createPinia, setActivePinia } from 'pinia'
 import { createMemoryHistory, createRouter } from 'vue-router'
-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 { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
 import SmartLoadingWorkbenchView from './SmartLoadingWorkbenchView.vue'
 import { assignSmartLoadingGroup, assignSmartLoadingItem, assignSmartLoadingPallet, getContainer, getSmartLoadingPlanByBooking, listSmartLoadingCandidates, recommendSmartLoading, removeSmartLoadingGroup } from '../api/platformContainerLoading'
 
+enableAutoUnmount(afterEach)
+
 vi.mock('../api/platformContainerLoading', () => ({
   getContainer: vi.fn(), getSmartLoadingPlanByBooking: vi.fn(), listSmartLoadingCandidates: vi.fn(),
   createSmartLoadingPlan: vi.fn(), assignSmartLoadingItem: vi.fn(), assignSmartLoadingPallet: vi.fn(), assignSmartLoadingGroup: vi.fn(), recommendSmartLoading: vi.fn(),
@@ -233,6 +235,11 @@ describe('SmartLoadingWorkbenchView', () => {
     const dialog = wrapper.getComponent(AppDialog)
     expect(dialog.props('title')).toBe('按入仓码分配箱数 · IN-1')
     const count = dialog.getComponent({ name: 'ElInputNumber' })
+    const label = dialog.get('label[for="cabinet-loading-assignment-count"]')
+    expect(label.element.parentElement?.tagName).toBe('TH')
+    expect(label.element.parentElement?.nextElementSibling?.getAttribute('colspan')).toBe('3')
+    expect(dialog.get('input#cabinet-loading-assignment-count').attributes('aria-label')).toBe('本次计划装柜箱数')
+    expect(count.attributes('aria-required')).toBe('true')
     expect(count.props('max')).toBe(12)
     count.vm.$emit('update:modelValue', 5)
     ;([...document.body.querySelectorAll('button')].find((button) => button.textContent?.trim() === '确认分配') as HTMLButtonElement).click()

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

@@ -3,6 +3,7 @@ import InlineHelp from '@/shared/components/InlineHelp.vue'
 import SmartLoadingCandidateInbounds from '../components/SmartLoadingCandidateInbounds.vue'
 import { containerDialogTitle } from '../containerDialogTitle'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, ListChecks, RefreshCw, Sparkles } from '@lucide/vue'
@@ -358,9 +359,9 @@ onMounted(load)
 </script>
 
 <template>
-  <AdminPage class="admin-density">
+  <AdminPage class="admin-density admin-workbench">
   <section class="business-page workbench">
-    <section class="surface-panel workbench-command-bar" aria-label="装柜作业摘要">
+    <section class="workbench-panel is-compact workbench-command-bar" aria-label="装柜作业摘要">
       <div class="workbench-identities">
         <div class="workbench-identity">
           <span>柜次号</span>
@@ -380,7 +381,7 @@ onMounted(load)
     <LoadErrorState v-if="loadError" title="智能装柜加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
     <template v-else>
       <LoadErrorState v-if="mutationError" title="装柜操作失败" :message="mutationError.message" compact retry-text="刷新最新计划" @retry="load"><template #details><ApiErrorMeta :details="mutationError" /></template></LoadErrorState>
-      <section v-if="container?.planStatus === 'COMPLETED'" class="readonly-status-card" aria-label="装柜完成状态">
+      <section v-if="container?.planStatus === 'COMPLETED'" class="readonly-status-card workbench-panel is-compact" aria-label="装柜完成状态">
         <el-tag type="success">装柜完成</el-tag>
         <strong>该柜次已完成装柜</strong>
         <p>智能装柜方案已锁定，不能继续调整。请进入装柜清单查看完整记录。</p>
@@ -388,12 +389,12 @@ onMounted(load)
       </section>
       <template v-else>
       <section v-if="container" class="summary-band"><div><span>柜型</span><strong>{{ container.containerType }}</strong></div><div><span>装柜仓库</span><strong>{{ container.warehouseName || '—' }}</strong></div></section>
-      <section v-if="container" class="capacity-grid"><div><div class="meter-title"><span>体积占用（含 150% 上限）</span><strong>{{ formatNumber(totalVolume) }} / {{ formatNumber(volumeLimit) }} m³</strong></div><el-progress :percentage="Math.min(displayedVolumePercent,100)" :status="volumePercent > 100 ? 'exception' : undefined" /></div><div><div class="meter-title"><span>重量占用（含 150% 上限）</span><strong>{{ formatNumber(totalWeight,1) }} / {{ formatNumber(weightLimit,1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent,100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div></section>
+      <section v-if="container" class="capacity-grid workbench-panel is-compact"><div><div class="meter-title"><span>体积占用（含 150% 上限）</span><strong>{{ formatNumber(totalVolume) }} / {{ formatNumber(volumeLimit) }} m³</strong></div><el-progress :percentage="Math.min(displayedVolumePercent,100)" :status="volumePercent > 100 ? 'exception' : undefined" /></div><div><div class="meter-title"><span>重量占用（含 150% 上限）</span><strong>{{ formatNumber(totalWeight,1) }} / {{ formatNumber(weightLimit,1) }} kg</strong></div><el-progress :percentage="Math.min(displayedWeightPercent,100)" :status="weightPercent > 100 ? 'exception' : undefined" /></div></section>
       <el-empty v-if="noDraft" description="该柜次缺少自动生成的预装计划，请刷新后重试" />
       <template v-else-if="plan">
         <el-alert v-if="plan.status === 'LOADING' && plan.canEdit" type="warning" :closable="false" show-icon title="已下发 PDA，仍可维护未完成的装柜明细" description="新增、增加或移除未拣明细会刷新 PDA 明细与版本；PDA 端需要刷新后继续操作。" />
         <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="暂无已分配货物">
+        <div class="workbench-table"><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) }} 装柜方案 <InlineHelp title="装柜说明"><p>智能建议必须经人工核对。</p><p>系统基于装柜仓库、物流渠道、可用箱数及 150% 容量上限校验。</p></InlineHelp></h2></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 }"><SmartLoadingCandidateInbounds :members="row.palletMembers" :sealed-pallet="row.unitType === 'SEALED_PALLET'" :fallback-inbound-code="row.inboundCode" /></template>
@@ -402,8 +403,8 @@ onMounted(load)
           <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" 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="当前仓库暂无可装柜货物">
+        </DataTable></div>
+        <div class="workbench-table"><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></div></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)">加入</el-button></template>
           <template #candidateInbounds="{ row }"><SmartLoadingCandidateInbounds :candidate="row as SmartLoadingCandidate" /></template>
@@ -412,27 +413,28 @@ onMounted(load)
           <template #coLoadGroup="{ row }"><details v-if="row.coLoadGroupId" class="candidate-group"><summary>整组加入 · 不可拆</summary><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="该组已锁定，不能重复分配" /></details><LineClampText v-else :content="row.unitType === 'SEALED_PALLET' ? '整托加入 · 不可拆' : '按箱加入'" /></template>
           <template #averageUnitVolume="{ row }">{{ formatNumber(Number(row.averageUnitVolumeCbm || 0)) }} m³</template><template #unitGrossWeight="{ row }">{{ formatNumber(Number(row.unitGrossWeightKg || 0),1) }} kg</template>
           <template #cartonIdentityStatus><el-tag size="small" type="info" effect="plain">未核验</el-tag></template>
-        </DataTable>
+        </DataTable></div>
       </template>
       </template>
     </template>
-    <AppDialog class="admin-density-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(780px, calc(100vw - 28px))" :fullscreenable="Boolean(selectedCandidate?.coLoadGroupId || selectedCandidate?.unitType === 'SEALED_PALLET')" :confirm-loading="mutating" :confirm-disabled="Boolean(selectedCandidate?.blockReason || selectedCandidate?.locked)" :confirm-text="selectedCandidate?.unitType === 'SEALED_PALLET' ? '确认整托分配' : selectedCandidate?.coLoadGroupId ? '确认整组分配' : '确认分配'" @confirm="assign">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="assignOpen" :title="assignmentTitle" width="min(780px, calc(100vw - 28px))" :fullscreenable="Boolean(selectedCandidate?.coLoadGroupId || selectedCandidate?.unitType === 'SEALED_PALLET')" :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="density-dialog-sections">
         <section class="density-dialog-section" data-tone="work">
           <el-form class="density-form">
-            <table class="density-table density-table--editable assignment-table" aria-label="加入当前柜次"><tbody>
+            <div class="workbench-evidence"><table class="density-table density-table--editable assignment-table" aria-label="加入当前柜次"><tbody>
               <tr><th>来源编号</th><td>{{ selectedCandidate.palletNo || selectedCandidate.groupNo || selectedCandidate.inboundCode || '入仓码暂缺' }}</td><th>当前柜次</th><td>{{ container?.cabinetNo || displayContainerNo(container) }}</td></tr>
               <tr v-if="selectedCandidate.coLoadGroupId"><th>整组范围</th><td colspan="3">组内 {{ selectedCandidate.memberOrderCount }} 票、{{ selectedCandidate.inboundFragmentCount }} 个入仓片段，共 {{ selectedCandidate.groupTotalBoxes }} 箱</td></tr>
               <tr v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'"><th>整托箱数</th><td colspan="3">整托 {{ selectedCandidate.availablePackageCount }} 箱</td></tr>
               <template v-else>
                 <tr><th>货物摘要</th><td colspan="3"><LineClampText :content="selectedCandidate.goodsSummary || '货物摘要暂缺'" /></td></tr>
-                <tr><th>可用箱数</th><td>{{ selectedCandidate.availablePackageCount }} 箱</td><td colspan="2"><el-form-item label="本次计划装柜箱数" label-position="left" label-width="140px" required><el-input-number v-model="assignForm.packageCount" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
+                <tr><th>可用箱数</th><td colspan="3">{{ selectedCandidate.availablePackageCount }} 箱</td></tr>
+                <tr><th><label for="cabinet-loading-assignment-count"><span class="assignment-required" aria-hidden="true">*</span>本次计划装柜箱数</label></th><td colspan="3"><el-form-item><el-input-number id="cabinet-loading-assignment-count" v-model="assignForm.packageCount" aria-label="本次计划装柜箱数" aria-required="true" :min="1" :max="selectedCandidate.availablePackageCount" :step="1" controls-position="right" placeholder="请输入本次分配箱数" /></el-form-item></td></tr>
               </template>
-            </tbody></table>
+            </tbody></table></div>
           </el-form>
         </section>
         <template v-if="selectedCandidate.coLoadGroupId">
-          <section class="density-dialog-section" data-tone="source"><table class="density-table" aria-label="同柜组成员"><thead><tr><th>组内订单及入仓片段</th></tr></thead><tbody><tr v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary"><td>{{ summary }}</td></tr></tbody></table></section>
+          <section class="density-dialog-section" data-tone="source"><div class="workbench-evidence"><table class="density-table" aria-label="同柜组成员"><thead><tr><th>组内订单及入仓片段</th></tr></thead><tbody><tr v-for="summary in selectedCandidate.memberOrderSummaries" :key="summary"><td>{{ summary }}</td></tr></tbody></table></div></section>
           <el-alert :title="selectedCandidate.blockReason || '同柜且不可拆：全部订单及其入仓片段按完整箱数一次加入，不能部分输入或单独移除。'" :type="selectedCandidate.blockReason ? 'error' : 'warning'" :closable="false" />
         </template>
         <template v-else-if="selectedCandidate.unitType === 'SEALED_PALLET'">
@@ -450,41 +452,44 @@ onMounted(load)
 </template>
 
 <style scoped>
+.assignment-table { table-layout: fixed; }
+.assignment-table th { width: 128px; }
+.assignment-required { margin-right: var(--admin-space-1); color: var(--el-color-danger); }
 .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: var(--admin-space-5); padding: var(--admin-space-5) var(--admin-space-5); }
+.workbench-command-bar { justify-content: space-between; gap: 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: var(--admin-font-caption); }
+.workbench-identity span { color: var(--workbench-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 { font-size: var(--admin-font-section); }
-.workbench h2 + p,.workbench small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); }
+.workbench h2 + p,.workbench small { display: block; margin-top: var(--admin-space-1); color: var(--workbench-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 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border: 1px solid var(--workbench-border); background: var(--workbench-border); }
 .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); }
+.summary-band span { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
+.capacity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--admin-space-5);     }
+.readonly-status-card { display: grid; justify-items: start; gap: var(--admin-space-4);     }
 .readonly-status-card strong { font-size: var(--admin-font-section); }
-.readonly-status-card p { margin: 0; color: var(--cc-muted); }
+.readonly-status-card p { margin: 0; color: var(--workbench-muted); }
 .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: var(--admin-font-caption); font-weight: 400; }
+.goods-cell :deep(.goods-cell__sku.line-clamp-text) { color: var(--workbench-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: 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); }
+.package-count-summary small { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .workbench :deep(.package-count-editor .el-input-number) { width: 100%; min-width: 0; }
 .assignment-table { table-layout: fixed; }
 .assignment-table th { width: 90px; }
 .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: var(--admin-font-caption); }
+.candidate-group :deep(.line-clamp-text) { width: 100%; color: var(--workbench-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

@@ -224,6 +224,7 @@ export interface ContainerWorkbenchStatusSummary {
 }
 
 export interface ContainerWorkbenchActualFacts {
+  arrivedDestinationPortAt?: string | null
   actualSailingAt?: string | null
   actualPortArrivalAt?: string | null
   actualWarehouseArrivalAt?: string | null

src/modules/container-loading/warehouseArrival.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { projectWarehouseArrival } from './warehouseArrival'
+
+describe('shared warehouse arrival projection', () => {
+  it.each([
+    ['2026-10-21T15:49:00', '2026-10-23'],
+    ['2026-10-30T23:30:00-07:00', '2026-11-01'],
+    ['2026-12-31T23:30:00', '2027-01-02'],
+    ['2026-03-07T23:30:00-08:00', '2026-03-09'],
+  ])('adds two local calendar days to %s without manufacturing a time', (arrivalAt, date) => {
+    expect(projectWarehouseArrival(arrivalAt, { plannedAt: null, version: 0, planCount: 0 })).toEqual({ date, time: '', isDefault: true })
+  })
+  it('keeps manually maintained and frozen dates instead of following port arrival', () => {
+    for (const plan of [{ plannedAt: '2026-10-28T09:30:00', version: 1, planCount: 0 }, { plannedAt: '2026-10-28T09:30:00', version: 0, planCount: 1 }]) {
+      expect(projectWarehouseArrival('2026-10-21T15:49:00', plan)).toEqual({ date: '2026-10-28', time: '09:30', isDefault: false })
+    }
+  })
+  it('does not replace inconsistent or frozen missing dates with defaults', () => {
+    for (const plan of [{ plannedAt: null, version: -1, planCount: 0 }, { plannedAt: null, version: 0, planCount: 1 }, { plannedAt: null, version: 1, planCount: 0 }]) {
+      expect(projectWarehouseArrival('2026-10-21T15:49:00', plan).date).toBeNull()
+    }
+    for (const arrival of [null, '', 'invalid', '2026-02-30T09:00:00']) expect(projectWarehouseArrival(arrival, undefined).date).toBeNull()
+  })
+})

src/modules/container-loading/warehouseArrival.ts

@@ -0,0 +1,20 @@
+export interface WarehouseArrivalPlan {
+  plannedAt: string | null
+  version: number
+  planCount: number
+}
+
+/** 默认值只有当地日期，不能作为人工维护的日期时间提交。 */
+export function projectWarehouseArrival(arrivalAt: string | null | undefined, plan: WarehouseArrivalPlan | undefined) {
+  const canDefault = !plan || plan.version === 0 && plan.planCount === 0
+  let date = plan?.plannedAt?.slice(0, 10) || null
+  if (!date && canDefault && arrivalAt) {
+    const day = arrivalAt.slice(0, 10)
+    const calendarDate = new Date(`${day}T12:00:00Z`)
+    if (/^\d{4}-\d{2}-\d{2}$/.test(day) && !Number.isNaN(calendarDate.getTime()) && calendarDate.toISOString().slice(0, 10) === day) {
+      calendarDate.setUTCDate(calendarDate.getUTCDate() + 2)
+      date = calendarDate.toISOString().slice(0, 10)
+    }
+  }
+  return { date, time: plan?.plannedAt?.slice(11, 16) || '', isDefault: !plan?.plannedAt && canDefault }
+}

src/modules/customers/CustomerOverseasStorageFeePanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
@@ -48,7 +49,7 @@ async function openEditor() {
 }
 async function beforeEditorClose(done: () => void) {
   if (saving.value) return
-  if (dirty.value) { try { await ElMessageBox.confirm('海外仓费用尚未保存，确定放弃修改吗？', customerDialogTitle('放弃编辑', { tenantName: props.customerName }), { customClass: 'admin-density-confirm', confirmButtonText: '放弃', cancelButtonText: '继续编辑', type: 'warning' }) } catch { return } }
+  if (dirty.value) { try { await ElMessageBox.confirm('海外仓费用尚未保存，确定放弃修改吗？', customerDialogTitle('放弃编辑', { tenantName: props.customerName }), { customClass: 'admin-density-confirm admin-workbench', confirmButtonText: '放弃', cancelButtonText: '继续编辑', type: 'warning' }) } catch { return } }
   done()
 }
 async function closeEditor() {
@@ -75,22 +76,22 @@ onMounted(load)
 </script>
 
 <template>
-  <section class="overseas-fee-panel admin-density customer-density">
+  <section class="overseas-fee-panel admin-density customer-density admin-workbench">
     <header class="panel-heading"><div><h2>海外仓费用</h2></div><el-button v-if="canEdit && config" type="primary" :loading="loading" @click="openEditor">编辑费用</el-button></header>
     <div v-if="error" class="fee-error" role="alert"><div><strong>海外仓费用加载失败</strong><p>{{ error.message }}</p><ApiErrorMeta :details="error" /></div><el-button plain type="primary" :loading="loading" @click="load">重新加载</el-button></div>
     <div v-else-if="loading && !config" v-loading="true" class="fee-loading" />
     <template v-else-if="config">
       <div class="fee-meta"><span>币种：<strong>{{ config.currency }}</strong></span><span>按整组保存，版本 {{ config.version }}</span></div>
-      <div class="fee-groups"><div><h3>仓租（{{ config.currency }}/CBM/天）</h3><table><thead><tr><th>天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in config.tiers.filter((item) => item.feeType === 'STORAGE')" :key="tier.id"><td>{{ dayLabel(tier) }}</td><td>{{ tier.unitPrice }}</td></tr></tbody></table></div><div><h3>退货仓储费（{{ config.currency }}/托/天）</h3><table><thead><tr><th>天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in config.tiers.filter((item) => item.feeType === 'RETURN_STORAGE')" :key="tier.id"><td>{{ dayLabel(tier) }}</td><td>{{ tier.unitPrice }}</td></tr></tbody></table></div></div>
+      <div class="fee-groups"><div class="workbench-evidence"><h3>仓租（{{ config.currency }}/CBM/天）</h3><table class="density-table"><thead><tr><th>天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in config.tiers.filter((item) => item.feeType === 'STORAGE')" :key="tier.id"><td>{{ dayLabel(tier) }}</td><td>{{ tier.unitPrice }}</td></tr></tbody></table></div><div class="workbench-evidence"><h3>退货仓储费（{{ config.currency }}/托/天）</h3><table class="density-table"><thead><tr><th>天数</th><th>价格</th></tr></thead><tbody><tr v-for="tier in config.tiers.filter((item) => item.feeType === 'RETURN_STORAGE')" :key="tier.id"><td>{{ dayLabel(tier) }}</td><td>{{ tier.unitPrice }}</td></tr></tbody></table></div></div>
     </template>
     <div v-else class="fee-empty">当前客户暂无海外仓费用配置</div>
-    <AppDialog class="admin-density-dialog customer-density-dialog" v-model="visible" :title="customerDialogTitle('编辑海外仓费用', { tenantName: customerName })" fullscreenable width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" :show-cancel="false" :before-close="beforeEditorClose" @confirm="save">
+    <AppDialog class="admin-density-dialog customer-density-dialog admin-workbench is-dialog" v-model="visible" :title="customerDialogTitle('编辑海外仓费用', { tenantName: customerName })" fullscreenable width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" :show-cancel="false" :before-close="beforeEditorClose" @confirm="save">
 <el-form ref="formRef" :model="form" label-position="left" label-width="80px" class="density-form density-dialog-sections">
-        <section class="density-dialog-section" data-tone="work"><table class="density-table density-table--editable customer-fee-currency" aria-label="费用币种"><tbody><tr><td><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></td></tr></tbody></table></section>
+        <section class="density-dialog-section workbench-evidence" data-tone="work"><table class="density-table density-table--editable customer-fee-currency" aria-label="费用币种"><tbody><tr><td><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></td></tr></tbody></table></section>
         <div class="customer-fee-tier-groups">
           <section v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex" class="density-dialog-section" data-tone="work">
             <div class="customer-fee-tier-heading"><h3 class="density-dialog-section__title">{{ 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>
-            <div class="customer-fee-tier-table-wrap"><table class="density-table density-table--editable customer-fee-tier-table" :aria-label="groupIndex === 0 ? '仓租阶梯填写' : '退货仓储费阶梯填写'"><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody>
+            <div class="customer-fee-tier-table-wrap workbench-evidence"><table class="density-table density-table--editable customer-fee-tier-table" :aria-label="groupIndex === 0 ? '仓租阶梯填写' : '退货仓储费阶梯填写'"><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>
           </section>
@@ -102,7 +103,7 @@ onMounted(load)
 </template>
 
 <style scoped>
-.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); }.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)); }.fee-groups > div { min-width:0; }.fee-groups table { width:100%; border-collapse:collapse; font-size:var(--admin-font-caption, 12px); }.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; }.fee-groups th { color:var(--cc-muted); font-weight:650; }.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); }
+.overseas-fee-panel { border: 1px solid var(--workbench-border); background: var(--workbench-surface); }.panel-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--workbench-border); }.panel-heading h2 { margin:0; color:var(--workbench-text); }.fee-groups h3 { margin:0; color:var(--workbench-text); }.fee-meta { display:flex; flex-wrap:wrap; gap:var(--admin-space-7, 24px); padding:var(--admin-space-5, 12px) 18px; color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); background:var(--workbench-surface-soft); }.fee-meta strong { color:var(--workbench-text); }.fee-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.fee-groups > div { 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(--workbench-muted); }
 
 @media (max-width:760px) { .panel-heading,.fee-error { align-items:stretch; flex-direction:column; }.fee-groups { grid-template-columns:1fr; padding:12px; }.panel-heading :deep(.el-button) { min-height:44px; } }
 </style>

src/modules/customers/components/CustomerBillingRulesPanel.test.ts

@@ -77,7 +77,11 @@ describe('CustomerBillingRulesPanel', () => {
     await flushPromises()
     expect(getCustomerDimensionConfig).toHaveBeenCalledWith('8')
     expect(document.body.textContent).toContain('按箱规尺寸计算')
-    expect(document.body.textContent).toContain('长、宽、高各加 2X = 外径尺寸')
+    expect(document.querySelector('.formula-band')).toBeNull()
+    const help = document.querySelector<HTMLButtonElement>('button[aria-label="查看箱规计算说明"]')
+    expect(help).not.toBeNull()
+    help!.focus()
+    await vi.waitFor(() => expect(document.body.textContent).toContain('长、宽、高各加 2X = 外径尺寸'))
     expect(document.body.textContent).toContain('小箱')
     expect(document.body.textContent).toContain('特大箱')
     expect(document.body.textContent).toContain('34 × 24 × 24')
@@ -213,7 +217,7 @@ describe('CustomerBillingRulesPanel', () => {
     const confirmation = vi.spyOn(ElMessageBox, 'confirm').mockRejectedValueOnce('cancel')
     document.querySelector<HTMLButtonElement>('.customer-density-dialog .el-dialog__headerbtn')!.click()
     await flushPromises()
-    expect(confirmation).toHaveBeenCalledWith(expect.stringContaining('尚未保存'), '放弃编辑 · C0008', expect.objectContaining({ customClass: 'admin-density-confirm' }))
+    expect(confirmation).toHaveBeenCalledWith(expect.stringContaining('尚未保存'), '放弃编辑 · C0008', expect.objectContaining({ customClass: 'admin-density-confirm admin-workbench' }))
     expect(wrapper.findComponent(AppDialog).props('modelValue')).toBe(true)
     expect(input.value).toBe('32.000')
     confirmation.mockRestore()

src/modules/customers/components/CustomerBillingRulesPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
@@ -199,7 +200,7 @@ async function openEditor() {
 async function confirmAbandon(): Promise<boolean> {
   try {
     await ElMessageBox.confirm('箱规尺寸尚未保存，确定放弃修改吗？', customerDialogTitle('放弃编辑', { tenantCode: props.customerCode, tenantName: props.customerName }), {
-      customClass: 'admin-density-confirm', confirmButtonText: '放弃', cancelButtonText: '继续编辑', type: 'warning',
+      customClass: 'admin-density-confirm admin-workbench', confirmButtonText: '放弃', cancelButtonText: '继续编辑', type: 'warning',
     })
     return true
   } catch {
@@ -364,7 +365,7 @@ onBeforeUnmount(stopInitializationPolling)
 </script>
 
 <template>
-  <div class="dimension-rule-panel admin-density customer-density">
+  <div class="dimension-rule-panel admin-density customer-density admin-workbench">
     <div v-if="initializationPending" class="rule-state initialization-state" role="status">
       <Ruler :size="30" />
       <strong>客户计费规则正在初始化</strong>
@@ -381,26 +382,25 @@ onBeforeUnmount(stopInitializationPolling)
     <section v-else-if="initializationReady && config" class="rule-card">
       <header class="rule-card-heading">
         <div class="rule-title-row">
-          <h2>按箱规尺寸计算</h2>
+          <h2>按箱规尺寸计算<InlineHelp title="箱规计算说明"><p>长、宽、高各加 2X = 外径尺寸（X 为单边加宽，按实测尺寸匹配箱规）。</p><p>体积公式：外径长 × 外径宽 × 外径高 ÷ 1,000,000 = CBM。</p><p>低于最低档使用最低档，超出当前档自动匹配下一档，超出最大档使用最大档。</p></InlineHelp></h2>
         <el-checkbox :model-value="defaultCalculationMode === 'DIMENSION'" :disabled="!canEdit || defaultModeSaving" @change="selectDefaultCalculationMode('DIMENSION', Boolean($event))">设为默认规则</el-checkbox>
         </div>
         <el-button v-if="canEdit" type="primary" :disabled="loading" @click="openEditor">编辑规则</el-button>
       </header>
-      <div class="formula-band"><span>计算方式：<strong>长、宽、高各加 2X = 外径尺寸</strong>（X 为单边加宽，按实测尺寸匹配箱规）</span><span>体积公式：外径长 × 外径宽 × 外径高 ÷ 1,000,000 = CBM</span><span>低于最低档使用最低档，超出当前档自动匹配下一档，超出最大档使用最大档</span></div>
-      <DataTable :data="config.rules" :columns="columns" :loading="loading" row-key="boxType" empty-text="当前客户暂无箱规尺寸规则">
+      <div class="workbench-table"><DataTable :data="config.rules" :columns="columns" :loading="loading" row-key="boxType" empty-text="当前客户暂无箱规尺寸规则">
         <template #boxTypeName="{ row }"><strong>{{ row.boxTypeName }}</strong></template>
         <template #inner="{ row }">{{ formatDimension(row.innerLengthCm, row.innerWidthCm, row.innerHeightCm) }}</template>
         <template #edgeAdditionCm="{ row }"><el-tag effect="light">单边 +{{ row.edgeAdditionCm }}cm</el-tag></template>
         <template #outer="{ row }">{{ formatDimension(row.outerLengthCm, row.outerWidthCm, row.outerHeightCm) }}</template>
         <template #volumeCbm="{ row }"><strong class="volume-value">{{ Number(row.volumeCbm).toFixed(3) }}</strong></template>
         <template #empty><div class="rule-state"><Ruler :size="28" /><strong>当前客户暂无箱规尺寸规则</strong></div></template>
-      </DataTable>
+      </DataTable></div>
     </section>
     <div v-else-if="initializationReady" v-loading="loading" class="loading-state" />
 
     <section v-if="initializationReady && canChargeView" class="rule-card charge-rule-card">
       <header class="rule-card-heading"><div><div class="rule-title-row"><h2>箱规按权重系数计算<InlineHelp title="默认规则说明"><p>勾选后客户下单数据才会按该规则调整；未勾选时默认使用实测原尺寸（不调整）。</p></InlineHelp></h2><el-checkbox :model-value="defaultCalculationMode === 'WEIGHT'" :disabled="!canEdit || defaultModeSaving" @change="selectDefaultCalculationMode('WEIGHT', Boolean($event))">设为默认规则</el-checkbox></div></div></header>
-      <el-table v-loading="chargeLoading" :data="chargeDisplayRows" border stripe empty-text="暂无系数配置">
+      <div class="workbench-table"><el-table v-loading="chargeLoading" :data="chargeDisplayRows" border stripe empty-text="暂无系数配置">
         <el-table-column prop="boxTypeName" label="箱规类型" min-width="110" />
         <el-table-column label="内径尺寸（长×宽×高 cm）" min-width="240"><template #default="{ row }">{{ row.dimension ? formatDimension(row.dimension.innerLengthCm, row.dimension.innerWidthCm, row.dimension.innerHeightCm) : '—' }}</template></el-table-column>
         <el-table-column label="权重系数" min-width="110"><template #default="{ row }"><strong>{{ row.coefficient }}</strong></template></el-table-column>
@@ -409,22 +409,22 @@ onBeforeUnmount(stopInitializationPolling)
         <el-table-column label="重量（kg）" min-width="105"><template #default="{ row }">{{ row.weight ? row.weight.toFixed(2) : '—' }}</template></el-table-column>
         <el-table-column label="体积重（kg）" min-width="115"><template #default="{ row }">{{ row.dimension ? (Number(row.dimension.volumeCbm) * row.coefficient * 167).toFixed(2) : '—' }}</template></el-table-column>
         <el-table-column prop="remark" label="备注" min-width="180" align="left" header-align="left" class-name="charge-remark-column" label-class-name="charge-remark-column"><template #default="{ row }">{{ row.remark || '—' }}</template></el-table-column>
-      </el-table>
+      </el-table></div>
     </section>
 
-    <AppDialog class="admin-density-dialog customer-density-dialog" v-model="editorVisible" :title="customerDialogTitle('编辑箱规尺寸 / 计算规则', { tenantCode: customerCode, tenantName: customerName })" fullscreenable width="min(1200px, calc(100vw - 28px))" :confirm-loading="editorSaving || chargeSaving" :show-cancel="false" :before-close="beforeEditorClose" @confirm="saveConfig">
+    <AppDialog class="admin-density-dialog customer-density-dialog admin-workbench is-dialog" v-model="editorVisible" :title="customerDialogTitle('编辑箱规尺寸 / 计算规则', { tenantCode: customerCode, tenantName: customerName })" fullscreenable width="min(1200px, calc(100vw - 28px))" :confirm-loading="editorSaving || chargeSaving" :show-cancel="false" :before-close="beforeEditorClose" @confirm="saveConfig">
       <el-form ref="editorForm" :model="form" label-position="top" class="density-form density-dialog-sections">
         <section class="density-dialog-section" data-tone="work">
           <h3 class="density-dialog-section__title">按箱规尺寸计算<InlineHelp title="箱规计算公式"><p>计算公式：按长、宽、高匹配箱规；长、宽、高各加 2X（X 为单边加宽），体积(CBM) = 外径长 × 外径宽 × 外径高 ÷ 1,000,000</p></InlineHelp></h3>
 
-          <div class="editor-table-wrap">
+          <div class="editor-table-wrap workbench-evidence">
             <table class="density-table density-table--editable editor-table" aria-label="箱规尺寸规则填写"><thead><tr><th>箱规类型</th><th>内径长(cm)</th><th>内径宽(cm)</th><th>内径高(cm)</th><th>单边加宽(cm)</th><th>备注</th></tr></thead><tbody>
               <tr v-for="row in form.rules" :key="row.boxType"><th scope="row">{{ row.boxTypeName }}</th><td><el-input-number v-model="row.innerLengthCm" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径长" /></td><td><el-input-number v-model="row.innerWidthCm" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径宽" /></td><td><el-input-number v-model="row.innerHeightCm" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径高" /></td><td><el-input-number v-model="row.edgeAdditionCm" :min="0.001" :max="100" :precision="3" :controls="false" placeholder="请输入边长加值" /></td><td><el-input v-model="row.remark" maxlength="500" placeholder="请输入备注（选填）" /></td></tr>
             </tbody></table>
           </div>
           <div class="rule-save-row density-actions density-actions--footer"><el-button type="primary" :loading="editorSaving" @click="saveConfig">保存规则</el-button></div>
         </section>
-        <section v-if="canChargeView" class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">箱规按权重系数计算<InlineHelp title="系数匹配规则"><p>长、宽、高任一项超出当前挡位时进入下一挡；命中规格的一个系数统一应用于长、宽、高。</p></InlineHelp></h3><div class="charge-rule-editor-wrap"><table class="density-table density-table--editable charge-rule-editor" aria-label="权重系数规则填写"><thead><tr><th>箱规类型</th><th>内径长(cm)</th><th>内径宽(cm)</th><th>内径高(cm)</th><th>权重系数</th><th>重量(kg)</th><th>备注</th></tr></thead><tbody><tr v-for="row in chargeRows" :key="`combined-${row.boxType}`"><th scope="row">{{ BOX_NAMES[row.boxType] }}</th><td><el-input-number v-model="row.length" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径长" /></td><td><el-input-number v-model="row.width" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径宽" /></td><td><el-input-number v-model="row.height" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径高" /></td><td><el-input-number v-model="row.coefficient" :min="0.001" :precision="3" :controls="false" placeholder="请输入权重系数" /></td><td><el-input-number v-model="row.weight" :min="0.001" :precision="3" :controls="false" placeholder="请输入重量" /></td><td><el-input v-model="row.remark" maxlength="500" placeholder="请输入备注（选填）" /></td></tr></tbody></table></div><div class="rule-save-row density-actions density-actions--footer"><el-button type="primary" :loading="chargeSaving" @click="saveChargeConfig">保存系数规则</el-button></div></section>
+        <section v-if="canChargeView" class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">箱规按权重系数计算<InlineHelp title="系数匹配规则"><p>长、宽、高任一项超出当前挡位时进入下一挡；命中规格的一个系数统一应用于长、宽、高。</p></InlineHelp></h3><div class="charge-rule-editor-wrap workbench-evidence"><table class="density-table density-table--editable charge-rule-editor" aria-label="权重系数规则填写"><thead><tr><th>箱规类型</th><th>内径长(cm)</th><th>内径宽(cm)</th><th>内径高(cm)</th><th>权重系数</th><th>重量(kg)</th><th>备注</th></tr></thead><tbody><tr v-for="row in chargeRows" :key="`combined-${row.boxType}`"><th scope="row">{{ BOX_NAMES[row.boxType] }}</th><td><el-input-number v-model="row.length" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径长" /></td><td><el-input-number v-model="row.width" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径宽" /></td><td><el-input-number v-model="row.height" :min="0.001" :precision="3" :controls="false" placeholder="请输入内径高" /></td><td><el-input-number v-model="row.coefficient" :min="0.001" :precision="3" :controls="false" placeholder="请输入权重系数" /></td><td><el-input-number v-model="row.weight" :min="0.001" :precision="3" :controls="false" placeholder="请输入重量" /></td><td><el-input v-model="row.remark" maxlength="500" placeholder="请输入备注（选填）" /></td></tr></tbody></table></div><div class="rule-save-row density-actions density-actions--footer"><el-button type="primary" :loading="chargeSaving" @click="saveChargeConfig">保存系数规则</el-button></div></section>
       </el-form>
       <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="editorSaving || chargeSaving" @click="closeEditor">取消</el-button></div></template>
     </AppDialog>
@@ -434,25 +434,25 @@ onBeforeUnmount(stopInitializationPolling)
 <style scoped>
 .dimension-rule-panel { min-width: 0; }
 .rule-heading { align-items: center; }
-.rule-heading h2 { margin: 0; color: var(--cc-text); }.rule-heading p { margin: var(--admin-space-2, 6px) 0 0; color: var(--cc-muted); }
+.rule-heading h2 { margin: 0; color: var(--workbench-text); }.rule-heading p { margin: var(--admin-space-2, 6px) 0 0; color: var(--workbench-muted); }
 .heading-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3, 8px); }
 .heading-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-card { min-width: 0; }.rule-card-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--workbench-border); }.rule-card-heading h2 { margin: 0; color: var(--workbench-text); }
+.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(--workbench-border); border-radius: 6px; background: var(--workbench-surface); }.rule-title-row :deep(.el-checkbox.is-checked) { border-color: var(--workbench-primary); background: var(--workbench-accent-soft); }
+.rule-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--admin-space-3, 8px); color: var(--workbench-muted); text-align: center; }.rule-state strong { color: var(--workbench-text); font-size: var(--admin-font-body, 13px); }.rule-state p { margin: 0; color: var(--workbench-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-table,.charge-rule-editor { min-width:920px; table-layout:fixed; } .editor-table th:first-child,.charge-rule-editor th:first-child { width:100px; } .editor-table th:last-child,.charge-rule-editor th:last-child { width:20%; }.editor-table-wrap { overflow-x: auto; }.section-hint { margin: 5px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }
+.volume-value { color: var(--workbench-primary); } .editor-table,.charge-rule-editor { min-width:920px; table-layout:fixed; } .editor-table th:first-child,.charge-rule-editor th:first-child { width:100px; } .editor-table th:last-child,.charge-rule-editor th:last-child { width:20%; }.editor-table-wrap { overflow-x: auto; }.section-hint { margin: 5px 0 0; color: var(--workbench-muted); font-size: var(--admin-font-caption, 12px); font-weight: 400; }
 
 .charge-rule-editor-wrap { overflow-x: auto; }
 
 .rule-save-row { padding: var(--admin-space-5, 12px) 0 var(--admin-space-1, 4px); }
 
 
-.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; }
-@media (max-width: 760px) { .rule-heading { align-items: stretch; flex-direction: column; }.rule-card-heading { align-items: stretch; flex-direction: column; }.rule-card-heading :deep(.el-button) { min-height: 44px; }.formula-band { align-items: flex-start; flex-direction: column; gap: 8px; }.rule-error { align-items: stretch; flex-direction: column; } }
+.charge-rule-card :deep(.el-table strong) { color: var(--workbench-primary); font-weight: 650; }
+@media (max-width: 760px) { .rule-heading { align-items: stretch; flex-direction: column; }.rule-card-heading { align-items: stretch; flex-direction: column; }.rule-card-heading :deep(.el-button) { min-height: 44px; }.rule-error { align-items: stretch; flex-direction: column; } }
 </style>

src/modules/customers/customerDensity.css

@@ -4,12 +4,12 @@
 .customer-density-dialog.admin-density-dialog .el-button .lucide-copy { display: none; }
 
 .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.customer-detail-page .detail-header { padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--workbench-surface); border: 1px solid var(--workbench-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 .tab-panel { padding-top: 0; min-height: 0; background: var(--workbench-surface); border: 1px solid var(--workbench-border); border-top: 0; }
 .customer-density.admin-density .basic-layout { grid-template-columns: 1fr; gap: 0; }
-.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 { padding: var(--admin-space-5, 12px); border: 0; border-bottom: 1px solid var(--workbench-border); border-radius: 0; background: var(--workbench-surface); 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: var(--admin-space-5, 12px); margin-bottom: var(--admin-space-3, 8px); padding-bottom: var(--admin-space-3, 8px); }
@@ -17,17 +17,17 @@
 .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 .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: 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 { gap: 0; border: 1px solid var(--workbench-border); }
+.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(--workbench-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: 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 .file-preview-label { color: var(--workbench-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: 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 { border: 1px solid var(--workbench-border); border-radius: 0; }
 .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; }
@@ -46,7 +46,6 @@
 .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: var(--admin-space-5, 12px); }
@@ -61,7 +60,7 @@
 
 /* Customer dialog business geometry; common appearance stays in adminDensity.css. */
 .customer-editor-dialog .customer-editor-table { table-layout: fixed; }
-.customer-editor-dialog .customer-editor-table td { width: 50%; }
+.customer-editor-dialog .customer-editor-table td:not([colspan]) { width: calc(100% / 3); }
 .customer-review-table th { width: 120px; }
 .customer-review-documents th:first-child { width: 150px; }
 .customer-review-documents th:last-child { width: 150px; }

src/modules/customers/customerFeeDialogs.test.ts

@@ -102,7 +102,7 @@ describe('customer overseas fee dialog entry points', () => {
     const confirmation = vi.spyOn(ElMessageBox, 'confirm').mockRejectedValueOnce('cancel')
     document.querySelector<HTMLButtonElement>('.customer-density-dialog .el-dialog__headerbtn')!.click()
     await flushPromises()
-    expect(confirmation).toHaveBeenCalledWith(expect.stringContaining('尚未保存'), '放弃编辑 · 费用测试客户', expect.objectContaining({ customClass: 'admin-density-confirm' }))
+    expect(confirmation).toHaveBeenCalledWith(expect.stringContaining('尚未保存'), '放弃编辑 · 费用测试客户', expect.objectContaining({ customClass: 'admin-density-confirm admin-workbench' }))
     expect(wrapper.findComponent(AppDialog).props('modelValue')).toBe(true)
     expect(price.value).toBe('9.123456')
     const done = vi.fn()

src/modules/customers/pages/CustomerDetailView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
@@ -166,7 +167,7 @@ async function changeStatus() {
   const verb = next === 'ACTIVE' ? '启用' : '停用'
   try {
     await ElMessageBox.confirm(`确认${verb}客户“${customer.value.tenantName}”吗？`, customerDialogTitle(`${verb}客户`, customer.value), {
-      customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消',
+      customClass: 'admin-density-confirm admin-workbench', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消',
     })
     statusChanging.value = true
     customer.value = await changePlatformTenantStatus(tenantId.value, next)
@@ -217,7 +218,7 @@ onBeforeUnmount(() => {
   FORM: 精确继承原型的详情工作台结构，以现有后台组件体系实现。
   FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
   -->
-  <AdminPage as="div" class="customer-detail-page admin-density customer-density">
+  <AdminPage as="div" class="customer-detail-page admin-density customer-density admin-workbench">
     <LoadErrorState v-if="loadError" title="客户详情暂时无法加载" :message="loadError.message" :loading="loading" @retry="loadDetail">
       <template #details><ApiErrorMeta :details="loadError" /></template>
     </LoadErrorState>
@@ -287,8 +288,8 @@ onBeforeUnmount(() => {
               </section>
               <section class="detail-panel user-panel">
                 <div class="panel-title"><div><h2>企业用户<InlineHelp title="账号信息说明"><p>登录手机号属于账号信息；请在成员/账号管理中单独维护，修改会影响登录</p></InlineHelp></h2></div><UsersRound :size="19" /></div>
-                <div v-if="enterpriseMembers.length" class="user-table-wrap">
-                  <table><thead><tr><th>账号</th><th>成员类型</th><th>登录手机号</th><th>邮箱</th><th>角色</th><th>状态</th></tr></thead>
+                <div v-if="enterpriseMembers.length" class="user-table-wrap workbench-evidence">
+                  <table class="density-table"><thead><tr><th>账号</th><th>成员类型</th><th>登录手机号</th><th>邮箱</th><th>角色</th><th>状态</th></tr></thead>
                     <tbody><tr v-for="member in enterpriseMembers" :key="String(member.membershipId)">
                       <td><div class="user-identity"><span>{{ (member.displayName || member.username || '?').slice(0, 1) }}</span><div><strong>{{ displayText(member.username) }}</strong><small>{{ displayText(member.displayName) }}</small></div></div></td>
                       <td>{{ member.memberType === 'OWNER' ? '企业管理员' : '企业员工' }}</td>
@@ -309,7 +310,7 @@ onBeforeUnmount(() => {
       </div>
     </DetailPageLayout>
 
-    <AppDialog class="admin-density-dialog customer-density-dialog customer-qualification-preview" v-model="previewOpen" :title="customerDialogTitle('查看资质文件', customer)" fullscreenable width="min(920px, calc(100vw - 28px))" append-to-body :show-footer="false">
+    <AppDialog class="admin-density-dialog customer-density-dialog customer-qualification-preview admin-workbench is-dialog" v-model="previewOpen" :title="customerDialogTitle('查看资质文件', customer)" fullscreenable width="min(920px, calc(100vw - 28px))" append-to-body :show-footer="false">
       <p class="density-dialog-note customer-preview-filename">{{ previewName }}</p>
       <div class="density-dialog-section qualification-preview" data-tone="source"><img v-if="previewKind === 'image'" :src="previewUrl" :alt="`${previewName}预览`" /><iframe v-else :src="previewUrl" :title="`${previewName}预览`" /></div>
     </AppDialog>
@@ -317,7 +318,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.detail-tabs { border-bottom: 1px solid var(--cc-border); }
+.detail-tabs { border-bottom: 1px solid var(--workbench-border); }
 
 .customer-detail-page { min-width: 0; }
 .detail-header { display:flex; min-width:0; align-items:center; gap:var(--admin-space-5, 12px); }
@@ -329,25 +330,25 @@ onBeforeUnmount(() => {
 .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); }
+.panel-title { display:flex; justify-content:space-between; border-bottom:1px solid var(--workbench-border); }
+.panel-title h2 { margin:0; color:var(--workbench-text); }.panel-title p { margin:5px 0 0; color:var(--workbench-muted); }.panel-title > svg { color:var(--workbench-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 button { display:grid; width:100%; align-items:center; background:var(--workbench-surface); color:inherit; text-align:left; cursor:pointer; }
+.qualification-list button:hover { border-color:var(--workbench-accent-border); background:var(--workbench-surface-soft); }.qualification-list button:disabled { cursor:wait; opacity:.65; }
 .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; }
+.qualification-list small { display:block; }.qualification-list small { margin-top:3px; color:var(--workbench-muted); }.file-date { margin-top:3px; color:var(--workbench-muted); }.file-date { margin:0; white-space:nowrap; }
+.section-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--workbench-muted); text-align:center; }
+.module-empty { display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--workbench-muted); text-align:center; }
+.section-empty strong { color:var(--workbench-text); font-size:var(--admin-font-body, 13px); }
+.module-empty strong { color:var(--workbench-text); font-size:var(--admin-font-body, 13px); }.section-empty span { max-width:600px; margin:0; color:var(--workbench-muted); line-height:1.7; }.module-empty p { max-width:600px; margin:0; color:var(--workbench-muted); font-size:var(--admin-font-caption, 11px); line-height:1.7; }
+.section-empty button { border:0; background:transparent; color:var(--workbench-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: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; }
+table { min-width:720px; }
+.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:var(--workbench-accent-soft); color:var(--workbench-primary); font-weight:700; }.user-identity strong { display:block; }.user-identity small { display:block; }.user-identity small { margin-top:3px; color:var(--workbench-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; }
+.member-contact small { display:block; }.member-contact small { margin-top:3px; color:var(--workbench-muted); }.module-empty > svg { color:var(--workbench-muted); }.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(--workbench-surface-soft); }.contract-note strong { color:var(--workbench-text); font-size:var(--admin-font-caption, 12px); }.contract-note p { margin:5px 0 0; color:var(--workbench-muted); font-size:var(--admin-font-caption, 11px); line-height:1.7; }
 
 @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; } }

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

@@ -1,4 +1,5 @@
-import ElementPlus, { ElMessageBox } from 'element-plus'
+import { ElMessageBox } from 'element-plus'
+import { createRequire } from 'node:module'
 import { createPinia, setActivePinia } from 'pinia'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
@@ -31,6 +32,8 @@ import AppDialog from '@/shared/components/AppDialog.vue'
 import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
 import CustomersView from './CustomersView.vue'
 
+const { default: ElementPlus } = createRequire(import.meta.url)('element-plus') as typeof import('element-plus')
+
 const customersSource = readFileSync(resolve(process.cwd(), 'src/modules/customers/pages/CustomersView.vue'), 'utf8')
 
 const { routerPush, routerReplace, routeControl } = vi.hoisted(() => ({
@@ -189,11 +192,33 @@ describe('CustomersView', () => {
     expect(customersSource).toContain("router.push({ name: 'customer-detail'")
     expect(customersSource).toContain("const editorDialogWidth = 'min(1120px, calc(100vw - 28px))'")
     expect(customersSource.match(/class="density-table density-table--editable customer-editor-table"/g)).toHaveLength(2)
-    expect(customersSource).toContain('width="min(520px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog customer-password-dialog"')
-    expect(customersSource).toContain('width="min(1040px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog review-decision-dialog"')
+    expect(customersSource).toContain('width="min(520px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog customer-password-dialog admin-workbench is-dialog"')
+    expect(customersSource).toContain('width="min(1040px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog review-decision-dialog admin-workbench is-dialog"')
     expect(customersSource).not.toContain('<AppDrawer v-model="editorOpen"')
   })
 
+  it('keeps compact customer fields in three columns and leaves wide fields and validation readable', async () => {
+    mount(CustomersView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
+    await flushPromises()
+    tableButtonByText('编辑')!.click()
+    await flushPromises()
+    const tables = Array.from(document.querySelectorAll<HTMLTableElement>('.customer-editor-dialog .customer-editor-table'))
+    expect(tables).toHaveLength(2)
+    expect(Array.from(tables[0]!.rows, row => row.cells.length)).toEqual([3, 3, 1, 1])
+    expect(Array.from(tables[1]!.rows, row => row.cells.length)).toEqual([3, 3, 1])
+    expect(tables.flatMap(table => Array.from(table.querySelectorAll('td[colspan]'), cell => cell.getAttribute('colspan')))).toEqual(['3', '3', '3'])
+    expect(document.querySelector<HTMLElement>('.customer-editor-dialog .qualification-credit-code .el-form-item__label')?.style.width).toBe('144px')
+    const company = document.querySelector<HTMLInputElement>('.customer-editor-dialog input[placeholder="请输入工商登记公司名称"]')!
+    expect(company.closest('.el-form-item')?.querySelector<HTMLElement>('.el-form-item__label')?.style.width).toBe('120px')
+    company.value = ''
+    company.dispatchEvent(new Event('input', { bubbles: true }))
+    await flushPromises()
+    company.dispatchEvent(new FocusEvent('blur'))
+    await vi.waitFor(() => expect(company.closest('.el-form-item')?.querySelector('.el-form-item__error')?.textContent).toContain('请输入公司名称'))
+    expect(document.querySelector('.customer-editor-dialog .el-dialog__footer')?.textContent).toContain('保存资料和资质')
+    expect(updatePlatformTenant).not.toHaveBeenCalled()
+  })
+
   it('keeps qualification file controls usable when the editor dialog is narrow', () => {
     expect(customersSource).toContain('class="qualification-validity" role="cell"')
     expect(customersSource).toContain('grid-template-columns:170px minmax(0,1fr) 220px')

src/modules/customers/pages/CustomersView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
@@ -643,7 +644,7 @@ async function submitReview() {
     const missing = qualifications.value.filter((item) => item.required && !item.uploaded)
     for (const item of missing) item.error = `${item.label}为提交审核必填文件`
     if (missing.length) { ElMessage.warning(`请先上传${missing.map((item) => item.label).join('、')}`); return }
-    await ElMessageBox.confirm('提交后客户资料与资质将进入企业审核，审核完成前不能继续替换文件。确认提交吗？', customerDialogTitle('提交企业审核', editorCustomer.value), { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '继续完善' })
+    await ElMessageBox.confirm('提交后客户资料与资质将进入企业审核，审核完成前不能继续替换文件。确认提交吗？', customerDialogTitle('提交企业审核', editorCustomer.value), { customClass: 'admin-density-confirm admin-workbench', type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '继续完善' })
     const saved = await submitPlatformTenantReview(editingId.value)
     editorStatus.value = saved.status; ElMessage.success('审核单已提交')
     editorOpen.value = false; await loadCustomers()
@@ -732,7 +733,7 @@ function handleMoreAction(row: PlatformTenantResource, command: string) {
 async function toggleStatus(row: PlatformTenantResource) {
   const next = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'; const verb = next === 'ACTIVE' ? '启用' : '停用'
   try {
-    await ElMessageBox.confirm(`确认${verb}客户“${row.tenantName}”吗？`, customerDialogTitle(`${verb}客户`, row), { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
+    await ElMessageBox.confirm(`确认${verb}客户“${row.tenantName}”吗？`, customerDialogTitle(`${verb}客户`, row), { customClass: 'admin-density-confirm admin-workbench', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
     rowActionId.value = String(row.id); await changePlatformTenantStatus(row.id, next)
     ElMessage.success(`客户已${verb}`); await loadCustomers()
   } catch (error) {
@@ -1059,12 +1060,12 @@ onMounted(() => { void loadCustomers() })
 </script>
 
 <template>
-  <AdminPage as="div" class="customers-page admin-density customer-density">
+  <AdminPage as="div" class="customers-page admin-density customer-density admin-workbench">
     <OperationErrorToast :details="passwordError || impersonationError || archiveError" />
     <ListPageLayout aria-label="客户管理">
 
 
-      <section :aria-busy="loading"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" 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" border>
+      <section class="workbench-table is-page-surface" :aria-busy="loading"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError" 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" border>
         <template #toolbar-start><h1>客户列表</h1></template>
         <template #filters><QueryToolbar v-model="filters" ariaLabel="客户筛选" :fields="queryFields" preference-key="customers-query" @search="applyFilters" /></template>
         <template #notices><template v-if="loadError">
@@ -1083,29 +1084,27 @@ onMounted(() => { void loadCustomers() })
       </DataTable></section>
     </ListPageLayout>
 
-    <AppDialog v-model="editorOpen" :title="editorTitle" :width="editorDialogWidth" class="admin-density-dialog customer-density-dialog customer-editor-dialog" :loading="editorLoading" :confirm-loading="saving" fullscreenable destroy-on-close>
-      <el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="left" label-width="144px" class="density-form density-dialog-sections" :disabled="editorLoading || saving || submitting || uploadingQualifications">
-        <section class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">基础资料</h3>
+    <AppDialog v-model="editorOpen" :title="editorTitle" :width="editorDialogWidth" class="admin-density-dialog customer-density-dialog customer-editor-dialog admin-workbench is-dialog" :loading="editorLoading" :confirm-loading="saving" fullscreenable destroy-on-close>
+      <el-form ref="formRef" v-loading="editorLoading" :model="form" :rules="rules" label-position="left" label-width="120px" class="density-form density-dialog-sections" :disabled="editorLoading || saving || submitting || uploadingQualifications">
+        <section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">基础资料</h3>
           <table class="density-table density-table--editable customer-editor-table" aria-label="基础资料"><tbody>
-            <tr><td><el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item></td><td><el-form-item label="客户昵称" prop="customerNickname"><el-input v-model="form.customerNickname" placeholder="不填默认生成中文拼音大写首字母，如 SZWL" maxlength="32" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="营业执照企业名称" prop="legalName" required><el-input v-model="form.legalName" placeholder="请输入营业执照上的企业名称" maxlength="128" /></el-form-item></td><td><el-form-item label="法定代表人" prop="legalRepresentative"><el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名（选填）" maxlength="64" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="企业类型" prop="enterpriseType"><el-input v-model="form.enterpriseType" placeholder="如：有限责任公司" maxlength="64" /></el-form-item></td><td><el-form-item label="成立日期" prop="establishedDate"><el-date-picker style="width: 100%;" v-model="form.establishedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择成立日期" :disabled-date="(date: Date) => date.getTime() > Date.now()" /></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="注册资本" prop="registeredCapital"><div class="capital-input"><el-input-number v-model="form.registeredCapital" :min="0" :precision="2" controls-position="right" placeholder="请输入注册资本（选填）" /><el-select v-model="form.registeredCapitalCurrency" aria-label="注册资本币种"><el-option label="人民币 CNY" value="CNY" /><el-option label="美元 USD" value="USD" /><el-option label="港币 HKD" value="HKD" /></el-select></div></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="form.registeredAddress" placeholder="请输入省市区、街道及门牌信息" maxlength="500" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="公司名称" prop="tenantName" required><el-input v-model="form.tenantName" placeholder="请输入工商登记公司名称" maxlength="128" /></el-form-item></td><td><el-form-item label="客户昵称" prop="customerNickname"><el-input v-model="form.customerNickname" placeholder="不填默认生成中文拼音大写首字母，如 SZWL" maxlength="32" /></el-form-item></td><td><el-form-item label="营业执照企业名称" prop="legalName" required><el-input v-model="form.legalName" placeholder="请输入营业执照上的企业名称" maxlength="128" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="法定代表人" prop="legalRepresentative"><el-input v-model="form.legalRepresentative" placeholder="请输入法定代表人姓名（选填）" maxlength="64" /></el-form-item></td><td><el-form-item label="企业类型" prop="enterpriseType"><el-input v-model="form.enterpriseType" placeholder="如：有限责任公司" maxlength="64" /></el-form-item></td><td><el-form-item label="成立日期" prop="establishedDate"><el-date-picker style="width: 100%;" v-model="form.establishedDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择成立日期" :disabled-date="(date: Date) => date.getTime() > Date.now()" /></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="注册资本" prop="registeredCapital"><div class="capital-input"><el-input-number v-model="form.registeredCapital" :min="0" :precision="2" controls-position="right" placeholder="请输入注册资本（选填）" /><el-select v-model="form.registeredCapitalCurrency" aria-label="注册资本币种"><el-option label="人民币 CNY" value="CNY" /><el-option label="美元 USD" value="USD" /><el-option label="港币 HKD" value="HKD" /></el-select></div></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="注册地址" prop="registeredAddress"><el-input v-model="form.registeredAddress" placeholder="请输入省市区、街道及门牌信息" maxlength="500" /></el-form-item></td></tr>
           </tbody></table>
         </section>
 
-        <section class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">联系与商务<InlineHelp title="企业联系信息说明"><p>仅用于企业业务联系，不会修改企业管理员登录手机号；登录手机号请在成员/账号管理中单独维护，修改会影响登录。</p></InlineHelp></h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">联系与商务<InlineHelp title="企业联系信息说明"><p>仅用于企业业务联系，不会修改企业管理员登录手机号；登录手机号请在成员/账号管理中单独维护，修改会影响登录。</p></InlineHelp></h3>
           <table class="density-table density-table--editable customer-editor-table" aria-label="联系与商务"><tbody>
-            <tr><td><el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item></td><td><el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入公司联系电话" maxlength="32" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item></td><td><el-form-item label="联系微信" prop="contactWechat"><el-input v-model="form.contactWechat" placeholder="请输入联系人微信号" maxlength="64" /></el-form-item></td></tr>
-            <tr><td><el-form-item label="销售人员" prop="salesOwnerName"><el-input v-model="form.salesOwnerName" placeholder="请输入负责销售人员" maxlength="64" /></el-form-item></td><td><el-form-item label="账期(天)" prop="paymentTermDays" required><el-input-number v-model="form.paymentTermDays" :min="0" :max="365" controls-position="right" placeholder="请输入账期天数" /></el-form-item></td></tr>
-            <tr><td colspan="2"><el-form-item label="内部备注" prop="internalRemark"><el-input v-model="form.internalRemark" type="textarea" :rows="3" placeholder="请输入仅平台人员可见的客户备注" maxlength="1000" show-word-limit /></el-form-item></td></tr>
+            <tr><td><el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item></td><td><el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入公司联系电话" maxlength="32" /></el-form-item></td><td><el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="联系微信" prop="contactWechat"><el-input v-model="form.contactWechat" placeholder="请输入联系人微信号" maxlength="64" /></el-form-item></td><td><el-form-item label="销售人员" prop="salesOwnerName"><el-input v-model="form.salesOwnerName" placeholder="请输入负责销售人员" maxlength="64" /></el-form-item></td><td><el-form-item label="账期(天)" prop="paymentTermDays" required><el-input-number v-model="form.paymentTermDays" :min="0" :max="365" controls-position="right" placeholder="请输入账期天数" /></el-form-item></td></tr>
+            <tr><td colspan="3"><el-form-item label="内部备注" prop="internalRemark"><el-input v-model="form.internalRemark" type="textarea" :rows="3" placeholder="请输入仅平台人员可见的客户备注" maxlength="1000" show-word-limit /></el-form-item></td></tr>
           </tbody></table>
         </section>
 
-        <section class="density-dialog-section qualification-section" data-tone="work"><h3 class="density-dialog-section__title">企业认证资料<InlineHelp title="资质提交规则"><p>营业执照和18位统一社会信用代码为必填业务项；法人身份证、货代资质证书和银行开户许可证均为选填。</p><p>支持 PDF、JPG、PNG，单个文件不超过 5MB；<span>*</span> 为提交审核必填项。</p></InlineHelp></h3><div v-if="editorStatus" class="qualification-heading"><el-tag :type="statusMeta(editorStatus).type" effect="light">{{ statusMeta(editorStatus).label }}</el-tag></div>
-          <table class="density-table density-table--editable" aria-label="企业信用代码"><tbody><tr><td><el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" required class="qualification-credit-code"><span v-if="creditCodeEstablished">{{ form.unifiedSocialCreditCode }}</span><el-input v-else v-model="form.unifiedSocialCreditCode" placeholder="请输入18位大写字母或数字" maxlength="18" @input="form.unifiedSocialCreditCode = String($event).toUpperCase()" /><small>{{ creditCodeEstablished ? '已登记的统一社会信用代码不可直接修改。' : '必须与营业执照一致，并随营业执照共同保存；法人身份证为选填。' }}</small></el-form-item></td></tr></tbody></table>
+        <section class="density-dialog-section qualification-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">企业认证资料<InlineHelp title="资质提交规则"><p>营业执照和18位统一社会信用代码为必填业务项；法人身份证、货代资质证书和银行开户许可证均为选填。</p><p>支持 PDF、JPG、PNG，单个文件不超过 5MB；<span>*</span> 为提交审核必填项。</p></InlineHelp></h3><div v-if="editorStatus" class="qualification-heading"><el-tag :type="statusMeta(editorStatus).type" effect="light">{{ statusMeta(editorStatus).label }}</el-tag></div>
+          <table class="density-table density-table--editable" aria-label="企业信用代码"><tbody><tr><td><el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" label-width="144px" required class="qualification-credit-code"><span v-if="creditCodeEstablished">{{ form.unifiedSocialCreditCode }}</span><el-input v-else v-model="form.unifiedSocialCreditCode" placeholder="请输入18位大写字母或数字" maxlength="18" @input="form.unifiedSocialCreditCode = String($event).toUpperCase()" /><small>{{ creditCodeEstablished ? '已登记的统一社会信用代码不可直接修改。' : '必须与营业执照一致，并随营业执照共同保存；法人身份证为选填。' }}</small></el-form-item></td></tr></tbody></table>
           <div v-if="qualificationLoadError" class="qualification-load-error" role="alert">{{ qualificationLoadError }}<el-button v-if="editingId" link type="primary" @click="loadEditorQualifications(editingId)">重试</el-button></div>
           <div class="qualification-table" role="table" aria-label="客户资质文件">
             <div class="qualification-row qualification-header" role="row"><span role="columnheader">文件类型</span><span role="columnheader">上传文件</span><span role="columnheader">有效期</span></div>
@@ -1128,7 +1127,7 @@ onMounted(() => { void loadCustomers() })
       <template #footer><div class="customer-editor-footer"><span>保存资料时会一并上传已选资质；进入审核仍需点击“提交审核”并再次确认</span><div class="density-actions density-actions--footer"><el-button :disabled="editorLoading || saving || submitting || uploadingQualifications" @click="editorOpen = false">关闭</el-button><el-button :loading="saving" :disabled="editorLoading || submitting || uploadingQualifications" @click="saveCustomer">保存资料和资质</el-button><el-button v-if="canSubmitReview" type="primary" :loading="submitting" :disabled="editorLoading || saving || uploadingQualifications" @click="submitReview">提交审核</el-button></div></div></template>
     </AppDialog>
 
-    <AppDialog v-model="qualificationPreviewOpen" :title="customerDialogTitle('查看资质文件', editorCustomer)" width="min(860px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog qualification-preview-dialog customer-qualification-preview" fullscreenable destroy-on-close :show-confirm="false" cancel-text="关闭预览">
+    <AppDialog v-model="qualificationPreviewOpen" :title="customerDialogTitle('查看资质文件', editorCustomer)" width="min(860px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog qualification-preview-dialog customer-qualification-preview admin-workbench is-dialog" fullscreenable destroy-on-close :show-confirm="false" cancel-text="关闭预览">
       <p class="density-dialog-note customer-preview-filename">{{ qualificationPreviewName }}</p>
       <div class="density-dialog-section qualification-preview" data-tone="source">
         <img v-if="qualificationPreviewUrl && qualificationPreviewKind === 'image'" :src="qualificationPreviewUrl" :alt="`${qualificationPreviewName}预览`" />
@@ -1136,10 +1135,10 @@ onMounted(() => { void loadCustomers() })
       </div>
     </AppDialog>
 
-    <AppDialog v-model="approvalResultOpen" :title="customerDialogTitle(credentialSource === 'creation' ? '客户已创建，管理员账号已生成' : '审核通过，管理员账号已创建', credentialSource === 'creation' ? editorCustomer : selectedReview)" width="min(560px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog approval-result-dialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+    <AppDialog v-model="approvalResultOpen" :title="customerDialogTitle(credentialSource === 'creation' ? '客户已创建，管理员账号已生成' : '审核通过，管理员账号已创建', credentialSource === 'creation' ? editorCustomer : selectedReview)" width="min(560px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog approval-result-dialog admin-workbench is-dialog" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
       <div v-if="approvalResult" class="density-dialog-sections">
         <div class="approval-result-warning" role="alert"><ShieldCheck :size="20" /><div><strong>请立即保存以下一次性凭证</strong><span>临时密码只在本次{{ credentialSource === 'creation' ? '创建' : '审核' }}响应中返回，关闭后无法再次查看。</span></div></div>
-        <section class="density-dialog-section" data-tone="summary"><table class="density-table" aria-label="一次性管理员凭据"><tbody>
+        <section class="density-dialog-section workbench-evidence" data-tone="summary"><table class="density-table" aria-label="一次性管理员凭据"><tbody>
           <tr><th scope="row">登录账号</th><td><div class="customer-credential-value"><code>{{ approvalResult.administratorUsername || '未返回' }}</code><CopyButton v-if="approvalResult.administratorUsername" :value="approvalResult.administratorUsername" label="登录账号" size="small" /></div></td></tr>
           <tr><th scope="row">临时密码</th><td><div class="customer-credential-value"><code>{{ approvalResult.temporaryPassword || '未返回' }}</code><CopyButton v-if="approvalResult.temporaryPassword" :value="approvalResult.temporaryPassword" label="临时密码" size="small" /></div></td></tr>
         </tbody></table></section>
@@ -1147,9 +1146,9 @@ onMounted(() => { void loadCustomers() })
       <template #footer><el-button type="primary" @click="closeApprovalResult">我已保存，关闭</el-button></template>
     </AppDialog>
 
-    <AppDialog v-model="decisionOpen" :title="customerDialogTitle('客户入驻审核', selectedReview)" fullscreenable :confirm-loading="reviewSubmitting" :lock-while-submitting="false" width="min(1040px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog review-decision-dialog" :close-on-click-modal="false">
+    <AppDialog v-model="decisionOpen" :title="customerDialogTitle('客户入驻审核', selectedReview)" fullscreenable :confirm-loading="reviewSubmitting" :lock-while-submitting="false" width="min(1040px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog review-decision-dialog admin-workbench is-dialog" :close-on-click-modal="false">
       <div v-if="selectedReview" class="density-dialog-sections">
-        <section class="density-dialog-section" data-tone="source">
+        <section class="density-dialog-section workbench-evidence" data-tone="source">
           <h3 class="density-dialog-section__title">企业基本信息 <el-tag type="warning" effect="plain">待审核</el-tag></h3>
           <table class="density-table customer-review-table" aria-label="待审核企业资料"><tbody>
             <tr><th scope="row">客户名称</th><td>{{ selectedReview.tenantName || '未填写' }}</td><th scope="row">客户编号</th><td>{{ selectedReview.tenantCode || '未生成' }}</td></tr>
@@ -1157,7 +1156,7 @@ onMounted(() => { void loadCustomers() })
             <tr><th scope="row">联系邮箱</th><td>{{ selectedReview.contactEmail || '未填写' }}</td><th scope="row">提交时间</th><td>{{ formatDate(selectedReview.submittedAt || selectedReview.createdAt) }}</td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="source">
+        <section class="density-dialog-section workbench-evidence" data-tone="source">
           <h3 class="density-dialog-section__title">资质文件</h3>
           <p class="density-dialog-note">营业执照为必填；法人身份证及其他资质为选填。共 {{ reviewQualifications.length }} 份</p>
           <div v-if="reviewQualificationsLoading" class="review-document-state">正在加载资质文件...</div>
@@ -1179,12 +1178,12 @@ onMounted(() => { void loadCustomers() })
       <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="reviewSubmitting" @click="decisionOpen = false">取消</el-button><el-button v-if="access.can('platform:customer:reject') && decision.type === 'reject'" type="danger" :loading="reviewSubmitting" @click="submitDecision">确认驳回</el-button><el-button v-if="access.can('platform:customer:approve') && decision.type === 'approve'" type="primary" :loading="reviewSubmitting" @click="submitDecision">审核通过</el-button></div></template>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog customer-density-dialog customer-qualification-preview" v-model="reviewPreviewOpen" :title="customerDialogTitle('查看审核资质', selectedReview)" fullscreenable width="min(860px, calc(100vw - 28px))" destroy-on-close :show-confirm="false" cancel-text="关闭预览" @closed="clearReviewPreview">
+    <AppDialog class="admin-density-dialog customer-density-dialog customer-qualification-preview admin-workbench is-dialog" v-model="reviewPreviewOpen" :title="customerDialogTitle('查看审核资质', selectedReview)" fullscreenable width="min(860px, calc(100vw - 28px))" destroy-on-close :show-confirm="false" cancel-text="关闭预览" @closed="clearReviewPreview">
       <p class="density-dialog-note customer-preview-filename">{{ reviewPreviewName }}</p>
       <div class="density-dialog-section qualification-preview" data-tone="source"><img v-if="reviewPreviewUrl && reviewPreviewKind === 'image'" :src="reviewPreviewUrl" :alt="`${reviewPreviewName}预览`" /><iframe v-else-if="reviewPreviewUrl" :src="reviewPreviewUrl" :title="`${reviewPreviewName} PDF 预览`" /></div>
     </AppDialog>
 
-    <AppDialog v-model="passwordDialogOpen" :title="customerDialogTitle('重置客户密码', passwordTenant)" :confirm-loading="passwordSubmitting" width="min(520px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog customer-password-dialog" :close-on-click-modal="false" :close-on-press-escape="!passwordSubmitting" :show-close="!passwordSubmitting">
+    <AppDialog v-model="passwordDialogOpen" :title="customerDialogTitle('重置客户密码', passwordTenant)" :confirm-loading="passwordSubmitting" width="min(520px, calc(100vw - 28px))" class="admin-density-dialog customer-density-dialog customer-password-dialog admin-workbench is-dialog" :close-on-click-modal="false" :close-on-press-escape="!passwordSubmitting" :show-close="!passwordSubmitting">
       <div v-if="passwordTenant" class="decision-summary"><div><strong>正在重置企业管理员登录密码</strong><span>{{ passwordTenant.tenantName }}</span></div><span>客户编号：{{ passwordTenant.tenantCode }}</span></div>
       <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-position="top" class="density-form">
         <el-form-item label="新密码" prop="newPassword" required><div class="password-input-row"><el-input v-model="passwordForm.newPassword" type="password" show-password autocomplete="new-password" placeholder="请输入 8-20 位新密码" /><el-button @click="randomPassword">随机生成</el-button></div></el-form-item>
@@ -1195,14 +1194,14 @@ onMounted(() => { void loadCustomers() })
       <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="passwordSubmitting" @click="passwordDialogOpen = false">取消</el-button><el-button type="primary" :loading="passwordSubmitting" @click="submitResetPassword">确认重置</el-button></div></template>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog customer-density-dialog" v-model="impersonationDialogOpen" :title="customerDialogTitle('跳转登录客户工作台', impersonationTenant)" :confirm-loading="impersonationSubmitting" width="min(560px, calc(100vw - 28px))" :close-on-click-modal="false" :close-on-press-escape="!impersonationSubmitting" :show-close="!impersonationSubmitting">
+    <AppDialog class="admin-density-dialog customer-density-dialog admin-workbench is-dialog" v-model="impersonationDialogOpen" :title="customerDialogTitle('跳转登录客户工作台', impersonationTenant)" :confirm-loading="impersonationSubmitting" width="min(560px, calc(100vw - 28px))" :close-on-click-modal="false" :close-on-press-escape="!impersonationSubmitting" :show-close="!impersonationSubmitting">
       <div v-if="impersonationTenant" class="decision-summary"><div><strong>{{ impersonationTenant.tenantName }}</strong><span>将以企业管理员身份打开客户工作台</span></div><span>客户编号：{{ impersonationTenant.tenantCode }}</span></div>
       <el-alert type="warning" :closable="false" show-icon>本操作会生成一次性、短时有效的客户会话，并记录代登录原因；不会替换当前 Admin 会话。</el-alert>
       <el-form ref="impersonationFormRef" :model="impersonationForm" :rules="impersonationRules" label-position="top" class="density-form"><el-form-item label="代登录原因" prop="reason" required><el-input v-model="impersonationForm.reason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请填写 5-500 字的业务原因" /></el-form-item></el-form>
       <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="impersonationSubmitting" @click="impersonationDialogOpen = false">取消</el-button><el-button type="primary" :loading="impersonationSubmitting" @click="submitImpersonation">确认跳转</el-button></div></template>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog customer-density-dialog" v-model="archiveDialogOpen" :title="customerDialogTitle('删除客户', archiveTenant)" :confirm-loading="archiveSubmitting" width="min(560px, calc(100vw - 28px))" :close-on-click-modal="false" :close-on-press-escape="!archiveSubmitting" :show-close="!archiveSubmitting">
+    <AppDialog class="admin-density-dialog customer-density-dialog admin-workbench is-dialog" v-model="archiveDialogOpen" :title="customerDialogTitle('删除客户', archiveTenant)" :confirm-loading="archiveSubmitting" width="min(560px, calc(100vw - 28px))" :close-on-click-modal="false" :close-on-press-escape="!archiveSubmitting" :show-close="!archiveSubmitting">
       <el-alert type="warning" :closable="false" show-icon>删除是逻辑归档：历史业务数据会保留，客户账号会被停用。是否允许归档由服务端最终判断。</el-alert>
       <div v-if="archiveTenant" class="archive-confirm"><strong>{{ archiveTenant.tenantName }}</strong><span>请输入客户编号 {{ archiveTenant.tenantCode }} 以确认。</span><el-input v-model="archiveConfirmCode" :disabled="archiveSubmitting" :placeholder="archiveTenant.tenantCode" autocomplete="off" /></div>
       <template #footer><div class="density-actions density-actions--footer"><el-button :disabled="archiveSubmitting" @click="archiveDialogOpen = false">取消</el-button><el-button type="danger" :loading="archiveSubmitting" :disabled="!archiveTenant || archiveConfirmCode.trim() !== archiveTenant.tenantCode" @click="submitArchive">确认删除</el-button></div></template>
@@ -1211,25 +1210,24 @@ onMounted(() => { void loadCustomers() })
 </template>
 
 <style scoped>
-.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-heading { display:flex; min-width:0; align-items:baseline; gap:var(--admin-space-4, 10px); } .customers-table-heading h2 { margin:0; color:var(--workbench-text); font-size:var(--admin-font-title, 16px); } .customers-table-heading span { color:var(--workbench-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: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); }
+.customer-company-name { display:block; overflow:hidden; color:var(--workbench-text); font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
 :deep(.customer-list-table .customer-code-column .cell) { white-space:nowrap; }
 .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 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 { container-type:inline-size; 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-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(--workbench-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 small { display:block; margin-top:var(--admin-space-2, 6px); color:var(--workbench-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(--workbench-muted); line-height:1.5; }
+.qualification-table { container-type:inline-size; overflow:hidden; margin-top:14px; border:1px solid var(--workbench-border); border-radius:8px; } .qualification-row { display:grid; grid-template-columns:170px minmax(0,1fr) 220px; min-width:0; border-top:1px solid var(--workbench-border); } .qualification-row:first-child { border-top:0; } .qualification-row > * { display:flex; min-width:0; align-items:center; } .qualification-header { min-height:44px; background:var(--cc-list-table-header-bg); color:var(--cc-list-table-header-text); 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: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-optional { padding:2px 5px; border-radius:var(--admin-radius, 4px); background:var(--el-fill-color-light); color:var(--workbench-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(--workbench-border); border-radius:6px; background:var(--workbench-surface); color:var(--workbench-text); cursor:pointer; } .file-picker:focus-within { outline:2px solid color-mix(in srgb,var(--workbench-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(--workbench-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(--workbench-border); border-radius:6px; background:var(--workbench-surface-soft); color:var(--workbench-muted); cursor:pointer; }
+.qualification-preview-trigger:hover { border-color:var(--workbench-primary); color:var(--workbench-primary); }
+.qualification-preview-trigger:focus-visible { outline:2px solid color-mix(in srgb,var(--workbench-primary) 42%,transparent); outline-offset:2px; }
 .qualification-preview-trigger:disabled { cursor:wait; opacity:.72; }
 @container (max-width:660px) {
   .qualification-row { grid-template-columns:112px minmax(0,1fr); }
@@ -1237,19 +1235,19 @@ onMounted(() => { void loadCustomers() })
   .qualification-label { grid-row:span 2; align-items:center; }
   .qualification-file,.qualification-validity { min-height:44px; }
 }
-.qualification-preview-trigger img { width:100%; height:100%; object-fit:contain; background:var(--admin-surface, #fff); }
+.qualification-preview-trigger img { width:100%; height:100%; object-fit:contain; background:var(--workbench-surface); }
 .qualification-preview-placeholder { display:grid; place-items:center; gap:2px; }
 .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-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(--workbench-surface); }
 .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; }
-.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-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); }
+.customer-editor-footer { display:flex; align-items:center; justify-content:space-between; gap:var(--admin-space-6, 16px); } .customer-editor-footer > span { color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); text-align:left; }
+.decision-summary { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--admin-space-5, 12px); background:var(--workbench-surface-soft); } .decision-summary > * { min-width:0; overflow-wrap:anywhere; } .decision-summary strong { color:var(--workbench-text); font-size:var(--admin-font-body, 13px); } .decision-summary span { color:var(--workbench-muted); font-size:var(--admin-font-caption, 11px); }
+.review-document-state { padding:14px; color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); }
+.review-document-error { padding:14px; color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); }
+.review-document-empty { padding:14px; color:var(--workbench-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; }
-.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); }.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); }
+.review-document-empty { display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; }.review-document-empty svg { color:var(--workbench-muted); }
+.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); }.archive-confirm { display:grid; gap:var(--admin-space-3, 8px); margin:var(--admin-space-6, 16px) 0; }.archive-confirm strong { color:var(--workbench-text); }.archive-confirm span { color:var(--workbench-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; }
 @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-document-header,.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; } }

src/modules/customers/pages/OverseasStorageFeesView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '@/modules/customers/customerDensity.css'
 import { computed, onMounted, reactive, ref } from 'vue'
@@ -67,11 +68,11 @@ onMounted(() => { void load() })
 </script>
 
 <template>
-  <AdminPage>
+  <AdminPage class="admin-workbench">
   <div class="business-page overseas-fees-page admin-density customer-density">
     <ListPageLayout ariaLabel="海外仓阶梯费用列表">
 
-    <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!error" 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 empty-text="暂无海外仓阶梯费用配置" @update:page="load" @update:page-size="load">
+    <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!error" 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 empty-text="暂无海外仓阶梯费用配置" @update:page="load" @update:page-size="load">
         <template #toolbar-start><h1>海外仓阶梯费用</h1></template>
         <template #filters><QueryToolbar v-model="filters" :fields="queryFields" ariaLabel="海外仓阶梯费用筛选" preference-key="overseas-storage-fees-query" @search="search" /></template>
         <template #notices><template v-if="error"><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></template>
@@ -90,13 +91,13 @@ onMounted(() => { void load() })
         <template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个客户</span></template>
       </DataTable></section>
     </ListPageLayout>
-    <AppDialog class="admin-density-dialog customer-density-dialog" v-model="dialogOpen" :title="customerDialogTitle('编辑海外仓阶梯费用', { tenantName: editing?.customerName })" fullscreenable width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save">
+    <AppDialog class="admin-density-dialog customer-density-dialog admin-workbench is-dialog" v-model="dialogOpen" :title="customerDialogTitle('编辑海外仓阶梯费用', { tenantName: editing?.customerName })" fullscreenable width="min(1120px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save">
 <el-form label-position="left" label-width="80px" class="density-form density-dialog-sections">
-        <section class="density-dialog-section" data-tone="work"><table class="density-table density-table--editable customer-fee-currency" aria-label="费用币种"><tbody><tr><td><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></td></tr></tbody></table></section>
+        <section class="density-dialog-section workbench-evidence" data-tone="work"><table class="density-table density-table--editable customer-fee-currency" aria-label="费用币种"><tbody><tr><td><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></td></tr></tbody></table></section>
         <div class="customer-fee-tier-groups">
           <section v-for="(group, groupIndex) in [storageTiers, returnTiers]" :key="groupIndex" class="density-dialog-section" data-tone="work">
             <div class="customer-fee-tier-heading"><h3 class="density-dialog-section__title">{{ 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>
-            <div class="customer-fee-tier-table-wrap"><table class="density-table density-table--editable customer-fee-tier-table" :aria-label="groupIndex === 0 ? '仓租阶梯填写' : '退货仓储费阶梯填写'"><thead><tr><th>操作</th><th>开始天数</th><th>结束天数</th><th>价格</th></tr></thead><tbody>
+            <div class="customer-fee-tier-table-wrap workbench-evidence"><table class="density-table density-table--editable customer-fee-tier-table" :aria-label="groupIndex === 0 ? '仓租阶梯填写' : '退货仓储费阶梯填写'"><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>
           </section>
@@ -110,10 +111,10 @@ 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: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-list:empty::after { content:'—'; color:var(--workbench-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: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; }
+.tier-item dt { flex:0 0 auto; color:var(--workbench-muted); font-size:var(--admin-font-caption, 12px); }
+.tier-item dd { min-width:0; margin:0; color:var(--workbench-text); font-size:var(--admin-font-body, 13px); font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
 
 @media (max-width:720px) { .error-state { align-items:stretch; flex-direction:column; gap:12px; } .error-state :deep(.el-button) { width:100%; min-height:44px; } .tier-list { grid-template-columns:1fr; }   }
 </style>

src/modules/customs/pages/CustomsCasesView.test.ts

@@ -42,9 +42,9 @@ describe('CustomsCasesView', () => {
     expect(source).not.toContain("label: '入库单标识'")
   })
   it('keeps the detail dialog responsive with internal scrolling', () => {
-    expect(source).toContain('width:min(900px,calc(100vw - 28px))!important')
-    expect(source).toContain('max-height:90vh')
-    expect(source).toContain('overflow-y:auto')
+    expect(source).toContain('width="min(900px, calc(100vw - 28px))"')
+    expect(source).toContain('admin-density-dialog admin-workbench is-dialog')
+    expect(source).not.toContain(':global(.el-dialog:has(')
   })
   it('uses a bordered view action instead of a text link', () => {
     expect(source).toContain('size="small" type="primary" plain')

src/modules/customs/pages/CustomsCasesView.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Eye, Send } from '@lucide/vue'
@@ -37,6 +39,6 @@ async function openDetail(id: string) { detailOpen.value = true; detailLoading.v
 async function submit() { if (!detail.value || !submitForm.customsAgentId || !customsAgents.value.some((item) => item.id === submitForm.customsAgentId)) { actionError.value = { message: '请选择有效的合作中报关供应商' }; return } actionError.value = null; try { await submitCustomsCase(detail.value.customsCase.id, { ...submitForm, expectedVersion: detail.value.customsCase.version }); ElMessage.success('已登记线下提交批次'); detail.value = await getCustomsCase(detail.value.customsCase.id) } catch (cause) { actionError.value = getApiErrorDetails(cause); if (actionError.value.code === 'A0409') detail.value = await getCustomsCase(detail.value.customsCase.id) } }
 watch([page, pageSize], () => void load()); onMounted(() => { void load(); void loadCustomers(); void loadCustomsAgents() })
 </script>
-<template><AdminPage as="div"><ListPageLayout aria-label="报关协同列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="报关协同筛选" :fields="fields" @search="search" /></template><template v-if="error" #state><LoadErrorState title="报关协同加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe row-key="id" preference-key="customs-cases" empty-text="暂无报关协同记录"><template #actions="{ row }"><el-button v-if="access.can('platform:firstleg:customs:view')" size="small" type="primary" plain @click="openDetail(row.id)"><Eye :size="15" />查看</el-button></template><template #status="{ row }"><StatusBadge :status="customsStatusLabel(row.status)" /></template></DataTable></section></ListPageLayout>
-<AppDialog v-model="detailOpen" title="报关协同详情" width="900px" :show-confirm="false"><LoadErrorState v-if="actionError && !detail" title="详情加载失败" :message="actionError.message" :loading="detailLoading" :show-retry="false"><template #details><ApiErrorMeta :details="actionError" /></template></LoadErrorState><template v-if="detail"><el-alert v-if="actionError" type="error" :closable="false"><ApiErrorMeta :details="actionError" /></el-alert><el-descriptions :column="2" border><el-descriptions-item label="报关编号">{{ detail.customsCase.customsNo }}</el-descriptions-item><el-descriptions-item label="状态"><StatusBadge :status="customsStatusLabel(detail.customsCase.status)" /></el-descriptions-item><el-descriptions-item label="资料清单">{{ detail.customsCase.checklistCode }} / {{ detail.customsCase.checklistVersionNo }}</el-descriptions-item><el-descriptions-item label="资料/回执">{{ detail.documents.length }} / {{ detail.receipts.length }}</el-descriptions-item></el-descriptions><el-form v-if="canSubmit" label-position="top" class="submit-form"><el-alert v-if="customsAgentsError" type="warning" :closable="false" :title="customsAgentsError"><el-button link type="warning" :loading="customsAgentsLoading" @click="loadCustomsAgents">重新加载</el-button></el-alert><el-row :gutter="12"><el-col :xs="24" :sm="12"><el-form-item label="报关代理" required><el-select :model-value="submitForm.customsAgentId" filterable clearable placeholder="请选择报关代理" :loading="customsAgentsLoading" no-data-text="暂无可用报关供应商" style="width:100%" @update:model-value="selectCustomsAgent(String($event || ''))"><el-option v-for="supplier in customsAgents" :key="supplier.id" :label="supplier.name" :value="supplier.id" /></el-select></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="外部参考号"><el-input v-model="submitForm.externalReference" /></el-form-item></el-col><el-col :xs="24"><el-form-item label="提交备注"><el-input v-model="submitForm.note" /></el-form-item></el-col></el-row><el-button type="primary" :disabled="!submitForm.customsAgentId" @click="submit"><Send :size="16" />登记线下提交</el-button></el-form><h3>提交批次</h3><el-empty v-if="!detail.submissionBatches.length" description="暂无提交批次" :image-size="56" /><el-timeline v-else><el-timeline-item v-for="batch in detail.submissionBatches" :key="batch.id" :timestamp="batch.createdAt">报关代理：{{ batch.customsAgentName || '服务端未返回名称快照' }}</el-timeline-item></el-timeline><h3>状态历史</h3><el-timeline><el-timeline-item v-for="entry in detail.history" :key="entry.id" :timestamp="entry.createdAt">{{ customsHistoryActionLabel(entry.action) }}：{{ customsStatusLabel(entry.fromStatus) }} → {{ customsStatusLabel(entry.toStatus) }}<small>{{ entry.note || '' }}</small></el-timeline-item></el-timeline></template></AppDialog></AdminPage></template>
-<style scoped>.submit-form{margin-top:18px}.submit-form+.el-button{margin-bottom:12px}h3{margin:20px 0 12px}small{display:block;color:var(--cc-muted)}:global(.el-dialog:has(.submit-form,.el-descriptions)){width:min(900px,calc(100vw - 28px))!important;max-height:90vh;overflow:hidden}:global(.el-dialog:has(.submit-form,.el-descriptions) .el-dialog__body){max-height:calc(90vh - 120px);overflow-y:auto}</style>
+<template><AdminPage class="admin-workbench admin-density" as="div"><ListPageLayout aria-label="报关协同列表"><template #toolbar><QueryToolbar v-model="filters" class="workbench-query" ariaLabel="报关协同筛选" :fields="fields" @search="search" /></template><template v-if="error" #state><LoadErrorState title="报关协同加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template><section v-if="!error" class="table-panel"><div class="workbench-table is-page-surface"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe row-key="id" preference-key="customs-cases" empty-text="暂无报关协同记录"><template #actions="{ row }"><el-button v-if="access.can('platform:firstleg:customs:view')" size="small" type="primary" plain @click="openDetail(row.id)"><Eye :size="15" />查看</el-button></template><template #status="{ row }"><StatusBadge :status="customsStatusLabel(row.status)" /></template></DataTable></div></section></ListPageLayout>
+<AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="detailOpen" title="报关协同详情" width="min(900px, calc(100vw - 28px))" :show-confirm="false"><LoadErrorState v-if="actionError && !detail" title="详情加载失败" :message="actionError.message" :loading="detailLoading" :show-retry="false"><template #details><ApiErrorMeta :details="actionError" /></template></LoadErrorState><template v-if="detail"><el-alert v-if="actionError" type="error" :closable="false"><ApiErrorMeta :details="actionError" /></el-alert><el-descriptions class="density-descriptions" :column="2" border><el-descriptions-item label="报关编号">{{ detail.customsCase.customsNo }}</el-descriptions-item><el-descriptions-item label="状态"><StatusBadge :status="customsStatusLabel(detail.customsCase.status)" /></el-descriptions-item><el-descriptions-item label="资料清单">{{ detail.customsCase.checklistCode }} / {{ detail.customsCase.checklistVersionNo }}</el-descriptions-item><el-descriptions-item label="资料/回执">{{ detail.documents.length }} / {{ detail.receipts.length }}</el-descriptions-item></el-descriptions><el-form v-if="canSubmit" label-position="top" class="submit-form density-form"><el-alert v-if="customsAgentsError" type="warning" :closable="false" :title="customsAgentsError"><el-button link type="warning" :loading="customsAgentsLoading" @click="loadCustomsAgents">重新加载</el-button></el-alert><el-row :gutter="12"><el-col :xs="24" :sm="12"><el-form-item label="报关代理" required><el-select :model-value="submitForm.customsAgentId" filterable clearable placeholder="请选择报关代理" :loading="customsAgentsLoading" no-data-text="暂无可用报关供应商" style="width:100%" @update:model-value="selectCustomsAgent(String($event || ''))"><el-option v-for="supplier in customsAgents" :key="supplier.id" :label="supplier.name" :value="supplier.id" /></el-select></el-form-item></el-col><el-col :xs="24" :sm="12"><el-form-item label="外部参考号"><el-input v-model="submitForm.externalReference" /></el-form-item></el-col><el-col :xs="24"><el-form-item label="提交备注"><el-input v-model="submitForm.note" /></el-form-item></el-col></el-row><el-button type="primary" :disabled="!submitForm.customsAgentId" @click="submit"><Send :size="16" />登记线下提交</el-button></el-form><h3>提交批次</h3><el-empty v-if="!detail.submissionBatches.length" description="暂无提交批次" :image-size="56" /><el-timeline v-else><el-timeline-item v-for="batch in detail.submissionBatches" :key="batch.id" :timestamp="batch.createdAt">报关代理：{{ batch.customsAgentName || '服务端未返回名称快照' }}</el-timeline-item></el-timeline><h3>状态历史</h3><el-timeline><el-timeline-item v-for="entry in detail.history" :key="entry.id" :timestamp="entry.createdAt">{{ customsHistoryActionLabel(entry.action) }}：{{ customsStatusLabel(entry.fromStatus) }} → {{ customsStatusLabel(entry.toStatus) }}<small>{{ entry.note || '' }}</small></el-timeline-item></el-timeline></template></AppDialog></AdminPage></template>
+<style scoped>.submit-form{margin-top:18px}.submit-form+.el-button{margin-bottom:12px}h3{margin:20px 0 12px}small{display:block;color:var(--workbench-muted)}</style>

src/modules/dashboard/operation-matrix.md

@@ -0,0 +1,13 @@
+# 首页数据看板逐操作矩阵
+
+依据：2026-10-20 用户确认全 Admin 推广清爽蓝白风格；视觉参考为工作区 `docs/界面参考/蓝白卡片式工作台风格参考.md` 与其中的用户参考图。当前页面入口为 `pages/DashboardView.vue`，路由 `/dashboard`；本轮只调整展示，不改变指标口径、权限和接口。
+
+| 页面 | 操作 | 当前承载与依据 | 本轮结论与验证 |
+| --- | --- | --- | --- |
+| 首页数据看板 | 查看核心指标 | `DashboardView.vue` 的 `metrics` 与核心业务指标区域；四列指标卡，按读取权限显示 | 接入公共工作台卡片、图标、数值和状态样式；正常统计口径收进可聚焦的信息提示，箱型未知仍可见；加载中、未知和真实零保持原义 |
+| 首页数据看板 | 刷新数据 | `loadMetrics`，顶部原地只读刷新按钮 | 保留按钮位置、加载禁用、部分请求失败提示与成功结果；不增加轮询或缓存 |
+| 首页数据看板 | 全屏展示／退出 | `toggleFullscreen` 与 `dashboardRef`，同一页面根进入浏览器全屏 | 保留状态同步和 `aria-pressed`，全屏继续继承公共主题 |
+| 首页数据看板 | 无指标权限 | `hasMetrics` 与现有授权菜单提示 | 不发无权限指标请求；提示保留，不显示假指标或新增业务入口 |
+| 首页数据看板 | 详情、新增、编辑、审核、文件预览、删除 | 当前页面无上述操作 | 不新增操作或浮层 |
+
+自动回归入口：`pages/DashboardView.test.ts`、`api/dashboard.test.ts`。本模块未独立执行检查，统一由本轮总控完成。视觉待人工 `1920×1080`、浏览器缩放 `100%` 截图确认。

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

@@ -1,4 +1,5 @@
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
+import { ElButton, ElTooltip } from 'element-plus'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import DashboardView from './DashboardView.vue'
 import { getTodayNewOrderCount, getActiveCustomerCount, getDashboardOperationalMetrics } from '../api/dashboard'
@@ -20,6 +21,10 @@ vi.mock('../api/dashboard', () => ({
 
 enableAutoUnmount(afterEach)
 
+function mountDashboard() {
+  return mount(DashboardView, { global: { components: { ElButton, ElTooltip } } })
+}
+
 describe('DashboardView', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -28,7 +33,7 @@ describe('DashboardView', () => {
 
   it('makes no metric requests for a minimal pool sales account and gives an authorized-menu hint', async () => {
     access.permissions = new Set(['platform:fleet:capacity-offer:list', 'platform:fleet:capacity-offer:inquiry-create', 'platform:fleet:capacity-offer:inquiry-edit', 'platform:fleet:capacity-offer:inquiry-cancel'])
-    const wrapper = mount(DashboardView); await flushPromises()
+    const wrapper = mountDashboard(); await flushPromises()
     expect(getTodayNewOrderCount).not.toHaveBeenCalled(); expect(getActiveCustomerCount).not.toHaveBeenCalled(); expect(getDashboardOperationalMetrics).not.toHaveBeenCalled()
     expect(wrapper.findAll('.dashboard-metric')).toHaveLength(0)
     expect(wrapper.text()).toContain('请从左侧菜单进入已授权业务')
@@ -37,28 +42,30 @@ describe('DashboardView', () => {
 
   it('requests only granted metric sources and requires both container and customs permissions', async () => {
     access.permissions = new Set(['platform:customer:list', 'platform:firstleg:container:list'])
-    const wrapper = mount(DashboardView); await flushPromises()
+    const wrapper = mountDashboard(); await flushPromises()
     expect(getActiveCustomerCount).toHaveBeenCalledOnce(); expect(getTodayNewOrderCount).not.toHaveBeenCalled(); expect(getDashboardOperationalMetrics).not.toHaveBeenCalled()
-    expect(wrapper.findAll('.dashboard-metric p').map(node => node.text())).toEqual(['活跃客户'])
+    expect(wrapper.findAll('.workbench-metric-label').map(node => node.text())).toEqual(['活跃客户'])
     await wrapper.findAll('button').find(button => button.text().trim() === '刷新数据')!.trigger('click'); await flushPromises()
     expect(getActiveCustomerCount).toHaveBeenCalledTimes(2); expect(getDashboardOperationalMetrics).not.toHaveBeenCalled()
   })
 
   it('renders only the four live metrics', async () => {
-    const wrapper = mount(DashboardView)
+    const wrapper = mountDashboard()
     await flushPromises()
 
     expect(wrapper.find('.dashboard-context > p').exists()).toBe(false)
+    expect(wrapper.classes()).toContain('admin-workbench')
     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.findAll('.workbench-metric-label').map(label => label.text())).toEqual(['今日新运单', '在途柜量', '活跃客户', '待清关票数'])
     expect(wrapper.find('.density-fields').exists()).toBe(false)
-    expect(wrapper.findAll('.dashboard-metric-mark')).toHaveLength(4)
+    expect(wrapper.findAll('.dashboard-metric.workbench-metric .workbench-icon')).toHaveLength(4)
+    expect(wrapper.findAll('button[aria-label^="查看"]')).toHaveLength(4)
     expect(wrapper.text()).toContain('12 票')
     expect(wrapper.text()).toContain('4.25 TEU')
     expect(wrapper.text()).toContain('8 家')
     expect(wrapper.text()).toContain('7 票')
-    expect(wrapper.text()).toContain('1 柜箱型未知')
+    expect(wrapper.get('.dashboard-metric .workbench-badge[data-tone="amber"]').text()).toBe('1 柜箱型未知')
     expect(wrapper.text()).not.toContain('近 30 天运单量趋势')
     expect(wrapper.text()).not.toContain('运单状态分布')
     expect(wrapper.text()).not.toContain('TOP10 航线货量')
@@ -69,7 +76,7 @@ describe('DashboardView', () => {
 
   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)
+    const wrapper = mountDashboard()
     await flushPromises()
     expect(wrapper.text()).toContain('部分核心指标加载失败')
     expect(wrapper.get('.dashboard-metric strong').text()).toContain('—')
@@ -82,7 +89,7 @@ describe('DashboardView', () => {
   })
 
   it('uses the same visualization root when entering and exiting fullscreen', async () => {
-    const wrapper = mount(DashboardView)
+    const wrapper = mountDashboard()
     await flushPromises()
     let fullscreen: Element | null = null
     const previousElement = Object.getOwnPropertyDescriptor(document, 'fullscreenElement')

src/modules/dashboard/pages/DashboardView.vue

@@ -2,12 +2,19 @@
 import dayjs from 'dayjs'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import {
+  ClipboardCheck,
   Expand,
+  FileText,
   Minimize,
   RefreshCw,
+  Ship,
+  Users,
 } from '@lucide/vue'
 import AdminPage from '@/shared/components/AdminPage.vue'
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import {
   getActiveCustomerCount,
   getDashboardOperationalMetrics,
@@ -36,17 +43,19 @@ function displayNumber(value: number | null | undefined, maximumFractionDigits =
 }
 
 const metrics = computed(() => [
-  { label: '今日新运单', value: displayNumber(todayNewOrderCount.value), unit: '票', note: '按今日创建时间统计', tone: 'blue', visible: canReadOrders.value },
+  { label: '今日新运单', value: displayNumber(todayNewOrderCount.value), unit: '票', note: '按今日创建时间统计', warning: '', icon: FileText, tone: 'blue', visible: canReadOrders.value },
   {
     label: '在途柜量', value: displayNumber(operationalMetrics.value?.inTransitTeu, 2), unit: 'TEU',
     note: operationalMetrics.value
       ? `已开船未到仓 · ${operationalMetrics.value.inTransitContainerCount} 柜${operationalMetrics.value.unknownContainerTypeCount ? ` · ${operationalMetrics.value.unknownContainerTypeCount} 柜箱型未知` : ''}`
       : '已开船且尚未到仓',
+    warning: operationalMetrics.value?.unknownContainerTypeCount ? `${operationalMetrics.value.unknownContainerTypeCount} 柜箱型未知` : '',
+    icon: Ship,
     tone: 'green',
     visible: canReadOperations.value,
   },
-  { label: '活跃客户', value: displayNumber(activeCustomerCount.value), unit: '家', note: '客户状态为启用', tone: 'purple', visible: canReadCustomers.value },
-  { label: '待清关票数', value: displayNumber(operationalMetrics.value?.pendingCustomsOrderCount), unit: '票', note: '已进入清关且尚未完成', tone: 'rose', visible: canReadOperations.value },
+  { label: '活跃客户', value: displayNumber(activeCustomerCount.value), unit: '家', note: '客户状态为启用', warning: '', icon: Users, tone: 'purple', visible: canReadCustomers.value },
+  { label: '待清关票数', value: displayNumber(operationalMetrics.value?.pendingCustomsOrderCount), unit: '票', note: '已进入清关且尚未完成', warning: '', icon: ClipboardCheck, tone: 'rose', visible: canReadOperations.value },
 ].filter(metric => metric.visible))
 
 async function toggleFullscreen() {
@@ -84,30 +93,33 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 </script>
 
 <template>
-  <section ref="dashboardRef" class="dashboard-view">
-    <AdminPage as="div" spacing="normal">
+  <section ref="dashboardRef" class="dashboard-view admin-workbench">
+    <AdminPage as="div" spacing="normal" class="admin-density admin-workbench">
       <section class="dashboard-context" aria-label="数据看板操作">
-        <p v-if="!hasMetrics || metricsError">{{ !hasMetrics ? '当前账号暂无可查看的首页指标，请从左侧菜单进入已授权业务。' : '部分核心指标加载失败，可刷新重试。' }}</p>
+        <p v-if="!hasMetrics || metricsError" class="workbench-notice workbench-tone" data-tone="amber" role="status">{{ !hasMetrics ? '当前账号暂无可查看的首页指标，请从左侧菜单进入已授权业务。' : '部分核心指标加载失败，可刷新重试。' }}</p>
         <div class="dashboard-head-actions">
-          <span v-if="hasMetrics">数据更新时间：{{ metricsUpdatedAt ? dayjs(metricsUpdatedAt).format('YYYY-MM-DD HH:mm') : '加载中' }}</span>
-          <button v-if="hasMetrics" type="button" class="dashboard-outline-button" :disabled="metricsLoading" @click="loadMetrics">
+          <span v-if="hasMetrics" class="workbench-meta">数据更新时间：{{ metricsUpdatedAt ? dayjs(metricsUpdatedAt).format('YYYY-MM-DD HH:mm') : '加载中' }}</span>
+          <el-button v-if="hasMetrics" native-type="button" class="dashboard-outline-button" :disabled="metricsLoading" @click="loadMetrics">
             <RefreshCw :size="16" aria-hidden="true" />
             刷新数据
-          </button>
-          <button type="button" class="dashboard-outline-button" :aria-pressed="isFullscreen" @click="toggleFullscreen">
+          </el-button>
+          <el-button native-type="button" class="dashboard-outline-button" :aria-pressed="isFullscreen" @click="toggleFullscreen">
             <Minimize v-if="isFullscreen" :size="16" aria-hidden="true" />
             <Expand v-else :size="16" aria-hidden="true" />
             {{ isFullscreen ? '退出全屏' : '全屏展示' }}
-          </button>
+          </el-button>
         </div>
       </section>
 
       <div v-if="hasMetrics" class="dashboard-metrics" aria-label="核心业务指标">
-        <article v-for="metric in metrics" :key="metric.label" class="dashboard-metric" :class="`is-${metric.tone}`">
-          <span class="dashboard-metric-mark" aria-hidden="true" />
-          <p>{{ metric.label }}</p>
-          <strong>{{ metric.value }} <small>{{ metric.unit }}</small></strong>
-          <span>{{ metric.note }}</span>
+        <article v-for="metric in metrics" :key="metric.label" class="dashboard-metric workbench-metric workbench-tone" :data-tone="metric.tone">
+          <div class="workbench-metric-heading">
+            <span class="workbench-icon" aria-hidden="true"><component :is="metric.icon" /></span>
+            <p class="workbench-metric-label">{{ metric.label }}</p>
+            <InlineHelp :title="metric.label" :teleported="false"><p>{{ metric.note }}</p></InlineHelp>
+          </div>
+          <div class="workbench-metric-value"><strong>{{ metric.value }}</strong> <span>{{ metric.unit }}</span></div>
+          <span v-if="metric.warning" class="workbench-badge is-toned workbench-tone" data-tone="amber">{{ metric.warning }}</span>
         </article>
       </div>
     </AdminPage>
@@ -115,24 +127,14 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 </template>
 
 <style scoped>
-.dashboard-view { --dashboard-panel: var(--cc-surface, #fff); display: block; min-width: 0; color: var(--cc-text, #172033); }
-.dashboard-view:fullscreen { overflow: auto; padding: 24px; background: var(--cc-page, #f4f6f8); }
-.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 { margin-left: auto; 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; 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; }
-.dashboard-metric { position: relative; min-width: 0; overflow: hidden; padding: 20px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--dashboard-panel); }
-.dashboard-metric-mark { position: absolute; top: -38px; right: -30px; width: 110px; height: 110px; border-radius: 50%; background: #edf1ff; }
-.dashboard-metric.is-green .dashboard-metric-mark { background: #e8f7ee; }
-.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; 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; }
+.dashboard-view { display: block; min-width: 0; }
+.dashboard-view:fullscreen { overflow: auto; background: var(--workbench-surface); }
+.dashboard-context { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--workbench-section-gap); }
+.dashboard-head-actions { display: flex; margin-left: auto; align-items: center; gap: 12px; white-space: nowrap; }
+.dashboard-outline-button + .dashboard-outline-button { margin-left: 0; }
+.dashboard-outline-button :deep(> span) { gap: 6px; }
+.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--workbench-grid-gap); }
+.dashboard-metric .workbench-metric-label { flex: 1; }
 @media (max-width: 1180px) {
   .dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 }
@@ -144,13 +146,7 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
 @media (max-width: 420px) {
   .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
   .dashboard-metric { min-height: 116px; padding: 13px; }
-  .dashboard-metric-mark { top: -30px; right: -24px; width: 80px; height: 80px; }
-  .dashboard-metric p { margin-bottom: 12px; font-size: 11px; }
-  .dashboard-metric strong { font-size: 23px; }
-  .dashboard-metric strong small { font-size: 10px; }
-  .dashboard-metric > span:last-child { margin-top: 10px; font-size: 10px; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .dashboard-outline-button { transition: none; }
+  .dashboard-metric .workbench-metric-value > strong { font-size: 23px; }
+  .dashboard-metric .workbench-metric-heading { flex-wrap: wrap; gap: 8px; }
 }
 </style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { onMounted, ref } from 'vue'
 import { ArrowLeft } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -54,13 +55,15 @@ onMounted(load)
 </script>
 
 <template>
-  <AdminPage as="div" class="inventory-detail-page admin-density">
-    <section class="inventory-overview">
-    <header class="detail-header">
-      <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>
+  <AdminPage as="div" class="inventory-detail-page admin-density admin-workbench">
+    <section class="inventory-overview workbench-panel is-flush is-page-surface">
+      <header class="density-detail-header">
+        <div class="density-detail-heading">
+          <el-button link class="density-back" aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回列表</el-button>
+          <h1 class="density-detail-title">{{ detail?.inventory.containerNo || '整柜库存详情' }}</h1>
+          <StatusBadge v-if="detail" :status="inventoryStatus(detail.inventory.inventoryStatus)" />
+        </div>
+      </header>
 
     <LoadErrorState v-if="error" title="整柜库存详情加载失败" :message="error.message" :loading="loading" @retry="load">
       <template #details><ApiErrorMeta :details="error" /></template>
@@ -77,7 +80,7 @@ onMounted(load)
           <div><dt>出库单数量</dt><dd>{{ detail.outboundOrderCount }}</dd></div>
           <div><dt>入库箱数</dt><dd>{{ detail.inventory.inboundBoxes }} 箱</dd></div>
           <div><dt>已出库箱数</dt><dd>{{ detail.inventory.outboundBoxes }} 箱</dd></div>
-          <div><dt>当前库存</dt><dd>{{ detail.inventory.availableBoxes }} 箱</dd></div>
+          <div><dt>当前库存</dt><dd><strong class="inventory-available">{{ detail.inventory.availableBoxes }}</strong> 箱</dd></div>
           <div><dt>累计入库体积</dt><dd>{{ detail.inventory.inboundVolumeCbm.toFixed(2) }} m³</dd></div>
           <div><dt>最后更新时间</dt><dd>{{ displayTime(detail.inventory.updatedAt) }}</dd></div>
           <div><dt>库存版本</dt><dd>{{ detail.inventory.version }}</dd></div>
@@ -88,25 +91,25 @@ onMounted(load)
 
       <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>
+        <div class="transactions-table workbench-table is-page-surface"><DataTable :data="detail.transactions" :columns="transactionColumns" row-key="id" stripe column-settings-mode="hide" empty-text="暂无进销存流水">
+          <template #businessType="{ row }"><el-tag :type="row.businessType === 'INBOUND' ? 'success' : 'primary'" effect="light" size="small" round>{{ row.businessType === 'INBOUND' ? '入库' : '出库' }}</el-tag></template>
+        </DataTable></div>
       </section>
   </AdminPage>
 </template>
 
 <style scoped>
 .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); }
+.inventory-overview { min-width: 0; }
+.transactions { min-width: 0; }
 .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); }
+.transactions-table { padding: 0 var(--admin-space-5, 12px); }
+.inventory-available { color: var(--workbench-number); font-variant-numeric: tabular-nums; }
+.detail-loading { min-height: 180px; padding: var(--admin-space-7, 24px); border: 1px solid var(--workbench-border); background: var(--admin-surface, #fff); color: var(--workbench-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; } }
+@media (max-width: 520px) { .density-detail-heading { flex-wrap: wrap; } .density-detail-title { width: 100%; font-size: 18px; } .detail-fields { grid-template-columns: 1fr; } }
 </style>

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

@@ -15,7 +15,20 @@ describe('DomesticContainersView', () => {
   it('gates create actions with backend permissions', () => { expect(source).toContain("access.can('platform:domestic-container:inbound:create')"); expect(source).toContain("access.can('platform:domestic-container:outbound:create')") })
   it('loads only active domestic warehouse candidates and surfaces errors', () => { expect(source).toContain("listAllPlatformWarehouses({ warehouseType: 'DOMESTIC', status: 'ACTIVE' })"); expect(source).toContain('国内仓候选加载失败') })
   it('keeps idempotency key stable through retry and handles conflicts by refreshing inventory', () => { expect(source).toContain('idempotencyKey.value'); expect(source).toContain("submitError.value.code === 'A0409'"); expect(source).toContain('await loadCandidates()'); expect(source).not.toContain('localStorage') })
-  it('reuses the order-list tab panel and keyboard interaction', () => { expect(source).toContain('class="business-query-panel integrated-query-group"'); expect(source).toContain('role="tablist"'); expect(source).toContain('role="tab"'); expect(source).toContain('handleTabKeydown'); expect(source).toContain('class="status-tabs density-status-tabs"'); expect(source).not.toContain('<el-tabs') })
+  it('keeps business tabs in the list toolbar with keyboard interaction and separate filters', () => {
+    const toolbar = source.match(/<template #toolbar-start>([\s\S]*?)<\/template>/)?.[1]
+    const filters = source.match(/<template #filters>([\s\S]*?)<\/template>/)?.[1]
+    expect(toolbar).toContain('class="status-tabs density-status-tabs workbench-list-tabs"')
+    expect(toolbar).toContain('role="tablist"')
+    expect(toolbar).toContain('role="tab"')
+    expect(toolbar).toContain('@click="switchTab(tab.value)"')
+    expect(toolbar).toContain('@keydown="handleTabKeydown($event, index)"')
+    expect(toolbar).not.toContain('<h1>')
+    expect(filters).toContain('class="business-query-panel integrated-query-group"')
+    expect(filters).toContain('<QueryToolbar')
+    expect(filters).not.toContain('role="tablist"')
+    expect(source).not.toContain('<el-tabs')
+  })
   it('keeps desktop filters and actions on one row with explicit field widths', () => { expect(source).toContain("key: 'warehouseId', type: 'select', width: 210"); expect(source).toContain("key: 'orderNo', type: 'input', width: 220"); expect(source).toContain("key: 'containerNo', type: 'input', width: 220"); expect(source).toContain("key: 'cargoName', type: 'input', width: 220"); expect(source).toContain("key: 'status', type: 'select', width: 180") })
   it('uses the shared query toolbar flow without a page-level layout override', () => { expect(source).not.toContain('.query-toolbar__filters') })
   it('keeps all four inventory facts in the approved compact summary', () => {

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { Plus } from '@lucide/vue'
@@ -72,18 +73,18 @@ async function submit() { if (!await formRef.value?.validate().catch(() => false
 watch([page, pageSize], load); onMounted(async () => { await Promise.all([loadWarehouses(), load()]) })
 </script>
 
-<template><AdminPage as="div" class="domestic-containers-page admin-density">
+<template><AdminPage as="div" class="domestic-containers-page admin-density admin-workbench">
 <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' ? '整柜出库单' : '整柜库存'}列表`"><section id="domestic-container-results" ><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" row-key="id" :preference-key="`domestic-containers-${activeTab}-table`" :empty-text="activeTab === 'inbound' ? '暂无整柜入库单' : activeTab === 'outbound' ? '暂无整柜出库单' : '暂无整柜库存'">
-        <template #toolbar-start><h1>整柜业务</h1></template>
-        <template #filters><div class="business-query-panel integrated-query-group"><div class="status-tabs density-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)">{{ 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>
+<ListPageLayout :aria-label="`${activeTab === 'inbound' ? '整柜入库单' : activeTab === 'outbound' ? '整柜出库单' : '整柜库存'}列表`"><section id="domestic-container-results" ><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" row-key="id" :preference-key="`domestic-containers-${activeTab}-table`" :empty-text="activeTab === 'inbound' ? '暂无整柜入库单' : activeTab === 'outbound' ? '暂无整柜出库单' : '暂无整柜库存'">
+        <template #toolbar-start><div class="status-tabs density-status-tabs workbench-list-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)">{{ tab.label }}</button></div></template>
+        <template #filters><div class="business-query-panel integrated-query-group"><QueryToolbar v-model="filters" class="business-query-toolbar" ariaLabel="整柜业务筛选" :fields="queryFields" :preference-key="`domestic-containers-${activeTab}-query`" @search="search" /></div></template>
         <template #notices><template v-if="loadError"><LoadErrorState title="整柜业务加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template></template>
         <template #before-results><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></template>
-<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 }"><div class="row-actions density-actions admin-text-actions"><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></div></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">
+<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 }"><div class="row-actions density-actions admin-text-actions"><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></div></template><template #status="{ row }"><StatusBadge :status="statusLabel(row as ContainerOrder | InventoryRecord)" /></template></DataTable></div></section></ListPageLayout>
+<AppDialog v-model="dialogOpen" class="domestic-container-create-dialog admin-density-dialog admin-workbench is-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="left" label-width="100px" class="density-form">
-    <table class="density-table density-table--editable container-entry-table" :aria-label="dialogType === 'inbound' ? '整柜入库资料' : '整柜出库资料'">
+    <div class="workbench-evidence"><table class="density-table density-table--editable container-entry-table" :aria-label="dialogType === 'inbound' ? '整柜入库资料' : '整柜出库资料'">
       <tbody>
         <template v-if="dialogType === 'inbound'">
           <tr>
@@ -117,8 +118,8 @@ watch([page, pageSize], load); onMounted(async () => { await Promise.all([loadWa
         <tr><td colspan="2"><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></td></tr>
         <tr><td colspan="2"><el-form-item label="备注"><el-input v-model="currentForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" /></el-form-item></td></tr>
       </tbody>
-    </table>
+    </table></div>
   </el-form>
 </AppDialog></AdminPage></template>
 
-<style scoped>.domestic-containers-page{min-width:0}.business-query-panel{min-width:0}.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}.container-entry-table{table-layout:fixed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.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){.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{min-width:0}.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(--workbench-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(--workbench-border)}.inventory-summary>div:last-child{border-right:0}.inventory-summary span{color:var(--workbench-muted);font-size:var(--admin-font-caption, 12px)}.inventory-summary strong{font-size:15px}.container-entry-table{table-layout:fixed}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:720px){.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(--workbench-border)}}@media(max-width:360px){.inventory-summary{grid-template-columns:1fr}.inventory-summary>div{border-right:0;border-bottom:1px solid var(--workbench-border)}.inventory-summary>div:last-child{border-bottom:0}}</style>

src/modules/downloads/pages/DownloadCenterView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
@@ -275,14 +276,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <AdminPage class="admin-density">
+  <AdminPage class="admin-density admin-workbench">
   <div class="business-page download-center-page">
     <ListPageLayout ariaLabel="下载任务列表">
 
 
 
 
-    <section :aria-busy="loading"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError" 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="下载任务列表">
+    <section class="workbench-table is-page-surface" :aria-busy="loading"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError" 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 #toolbar-start><h1>下载中心</h1></template>
         <template #filters>
         <QueryToolbar v-model="filters" ariaLabel="下载任务筛选" :fields="queryFields" preference-key="downloads-query" @search="applyFilters" />
@@ -314,7 +315,7 @@ onBeforeUnmount(() => {
       </DataTable></section>
     </ListPageLayout>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="detailOpen"
       :title="detailTask?.taskNo?.trim() ? `任务详情 · ${detailTask.taskNo.trim()}` : '任务详情'"
       width="min(720px, calc(100vw - 28px))"
@@ -377,11 +378,11 @@ onBeforeUnmount(() => {
 .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-error p { margin: 5px 0; color: var(--workbench-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); }
-small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: var(--admin-font-caption); }
+small { display: block; margin-top: 3px; color: var(--workbench-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,6 +1,7 @@
 <script setup lang="ts">
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.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'
@@ -432,8 +433,8 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="price-book-detail admin-density" spacing="normal">
-    <DetailPageLayout class="density-detail-layout surface-panel" aria-label="船期价格表版本详情">
+  <AdminPage as="div" class="price-book-detail admin-density admin-workbench" spacing="normal">
+    <DetailPageLayout class="density-detail-layout workbench-panel is-compact is-page-surface" aria-label="船期价格表版本详情">
       <template #header>
         <div class="density-detail-header">
           <div class="density-detail-heading">
@@ -555,37 +556,37 @@ onMounted(() => {
 
 <style scoped>
 .price-book-detail { min-width: 0; max-width: 1880px; }
-.version-panel, .mapping-section, .detail-section { padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--cc-border); }
+.version-panel, .mapping-section, .detail-section { padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--workbench-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 { overflow-wrap: anywhere; margin: 5px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.55; }
+.section-heading h2 { display: flex; align-items: center; gap: var(--admin-space-3); margin: 0; color: var(--workbench-text); font-size: var(--admin-font-section); }
+.section-heading h2 svg { color: var(--workbench-primary); }
+.section-heading p { overflow-wrap: anywhere; margin: 5px 0 0; color: var(--workbench-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: var(--admin-space-5); }
 .mapping-section .section-heading, .detail-section .section-heading { margin-bottom: 0; }
 .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-group h3 { margin: 0; color: var(--workbench-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(--workbench-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 strong { overflow-wrap: anywhere; color: var(--workbench-text); font-size: var(--admin-font-body); }
+.mapping-row span { color: var(--workbench-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: 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 { 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(--workbench-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); }
+.mapping-load-error p { margin: var(--admin-space-1) 0; color: var(--workbench-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: 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); }
+.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(--workbench-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%; }
   .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .detail-grid > div, .detail-grid > div:nth-child(5n) { border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
+  .detail-grid > div, .detail-grid > div:nth-child(5n) { border-right: 1px solid var(--workbench-border); border-bottom: 1px solid var(--workbench-border); }
   .detail-grid > div:nth-child(2n) { border-right: 0; }
   .detail-grid__wide, .detail-grid__wide + .detail-grid__wide { grid-column: span 2; }
   .mapping-row { grid-template-columns: 1fr; gap: 10px; }

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import InlineHelp from '@/shared/components/InlineHelp.vue'
 import '@/styles/adminDensity.css'
+import '@/styles/adminWorkbench.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { FileSpreadsheet, FileUp } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -318,13 +319,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="price-book-page admin-density" spacing="normal">
+  <AdminPage as="div" class="price-book-page admin-density admin-workbench" spacing="normal">
     <ListPageLayout aria-label="承运商报价版本管理">
 
 
 
 
-      <section aria-live="polite"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
+      <section aria-live="polite"><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError"
         v-model:page="page"
         v-model:page-size="pageSize"
         :data="pagedRows"
@@ -385,10 +386,10 @@ onMounted(() => {
         <template #issues="{ row }"><div class="issue-counts"><span :class="{ 'is-blocking': (row as PlatformPriceBookVersion).blockingErrorCount }">阻断 {{ (row as PlatformPriceBookVersion).blockingErrorCount }}</span><span>警告 {{ (row as PlatformPriceBookVersion).warningCount }}</span></div></template>
         <template #empty><el-empty description="暂无船期价格表版本" /></template>
         <template #pagination-left>共 {{ rows.length }} 个版本 · {{ activeCount }} 个生效中 · {{ pendingCount }} 个待确认</template>
-      </DataTable></section>
+      </DataTable></div></section>
     </ListPageLayout>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="uploadOpen"
       title="上传船期价格表"
       width="min(560px, calc(100vw - 28px))"
@@ -400,13 +401,13 @@ onMounted(() => {
       <div class="density-dialog-sections">
 
       <el-form class="density-form" label-position="left" label-width="90px" :disabled="uploading">
-        <table class="density-table density-table--editable" aria-label="上传价格表资料"><tbody>
+        <div class="workbench-evidence"><table class="density-table density-table--editable" aria-label="上传价格表资料"><tbody>
           <tr><td><el-form-item label="报价范围"><template #label><span>报价范围<InlineHelp title="报价上传规则"><p>上传后先展示解析结果和仓库映射；确认后只替换同一报价范围的当前生效版本。客户专属报价生效后，计价时优先于平台公共报价。</p></InlineHelp></span></template><el-select v-model="uploadCustomerId" filterable :disabled="uploading" aria-label="上传报价范围"><el-option label="平台公共报价" value="0" /><el-option v-for="customer in customerOptions" :key="String(customer.id)" :label="`客户专属 · ${customer.tenantName || '未命名客户'}`" :value="String(customer.id)" /></el-select></el-form-item></td></tr>
           <tr><td><el-form-item label="价格表文件">
             <input ref="uploadInput" class="visually-hidden-input" type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" aria-label="选择 XLSX 船期价格表" :disabled="uploading" @change="selectUploadFile" />
             <div class="upload-file-control"><el-button :disabled="uploading" @click="uploadInput?.click()"><FileSpreadsheet :size="16" />选择 XLSX 文件</el-button><span class="upload-file-name">{{ uploadFile?.name || '尚未选择文件' }}</span></div>
           </el-form-item></td></tr>
-        </tbody></table>
+        </tbody></table></div>
       </el-form>
       <p class="density-dialog-note">{{ uploadFile ? (uploadFile.size / 1024 / 1024).toFixed(2) + ' MB' : '最大 10MB' }}</p>
       <el-alert v-if="uploadFileError" :title="uploadFileError" type="error" :closable="false" show-icon />
@@ -419,15 +420,16 @@ onMounted(() => {
 <style scoped>
 .price-book-page { min-width: 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: var(--admin-font-caption); }
+.version-cell strong { color: var(--workbench-text); }
+.version-cell span, .metric-cell span { color: var(--workbench-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); }
+.metric-cell strong { color: var(--workbench-text); font-size: var(--admin-font-body); }
+.issue-counts { color: var(--workbench-muted); font-size: var(--admin-font-caption); }
 .issue-counts .is-blocking, .is-danger { color: var(--el-color-danger); font-weight: 700; }
 .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: var(--admin-space-5); }
-.upload-file-name { min-width: 0; overflow-wrap: anywhere; }
+.upload-file-control { display: flex; width: 100%; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--admin-space-5); }
+.upload-file-control > :deep(.el-button) { flex: 0 0 auto; }
+.upload-file-name { min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
 @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

@@ -129,7 +129,9 @@ describe('FeeItemsView public master data and access', () => {
     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('appearance="integrated" :stripe="false"')
+    expect(source).toContain('appearance="integrated"')
+    expect(source).not.toContain(':stripe="false"')
+    expect(source).not.toContain(':stripe="false"')
     expect(source).toContain(':page-sizes="[20, 50, 100]"')
     expect(source).toContain('@media (max-width: 720px)')
     expect(source).toContain('.fee-item-editor-table tr { display: grid; }')

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
@@ -341,7 +342,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="fee-items-page admin-density" spacing="normal">
+  <AdminPage as="div" class="fee-items-page admin-density admin-workbench" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权查看费用项目" sub-title="请联系管理员开通费用项目查看权限" />
 
     <ListPageLayout v-else aria-label="费用项目管理">
@@ -349,7 +350,7 @@ onMounted(() => {
 
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
+      <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!loadError"
           v-model:page="page"
           v-model:page-size="pageSize"
           :data="rows"
@@ -429,7 +430,7 @@ onMounted(() => {
         </DataTable></section>
     </ListPageLayout>
 
-    <AppDrawer class="admin-density admin-density-drawer admin-density-drawer--editor"
+    <AppDrawer class="admin-density admin-density-drawer admin-density-drawer--editor admin-workbench is-drawer"
       v-model="editorOpen"
       :title="editorTitle"
       size="min(620px, 94vw)"
@@ -437,14 +438,14 @@ onMounted(() => {
       :confirm-loading="saving"
     >
       <el-form class="density-form density-dialog-sections" ref="formRef" :model="form" :rules="rules" label-position="left" label-width="100px" :disabled="saving || editorLoading">
-        <section class="density-dialog-section" data-tone="work" aria-label="费用基本信息">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用基本信息">
           <h3 class="density-dialog-section__title">基本信息 <InlineHelp title="默认价格说明">选择费用项目时自动带入，使用时仍可修改；清空表示不设置默认价格。</InlineHelp></h3>
           <table class="density-table density-table--editable fee-item-editor-table"><tbody>
             <tr><td><el-form-item label="费用名称" prop="feeTypeName" required><el-input v-model="form.feeTypeName" maxlength="128" placeholder="请输入费用名称" /></el-form-item></td><td><el-form-item label="费用分类" prop="category" required><el-input v-model="form.category" maxlength="64" placeholder="例如 仓储成本" /></el-form-item></td></tr>
             <tr><td><el-form-item label="贸易范围" prop="tradeScope" required><el-segmented v-model="form.tradeScope" :options="[{ label: '国内', value: 'DOMESTIC' }, { label: '国际', value: 'INTERNATIONAL' }]" /></el-form-item></td><td><el-form-item label="默认价格(CNY)" prop="defaultPrice"><el-input-number v-model="form.defaultPrice" :min="0" :max="9999999999.99" :precision="2" controls-position="right" placeholder="不填则由使用时手工录入" /></el-form-item></td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用方向与供应商">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用方向与供应商">
           <h3 class="density-dialog-section__title">费用方向 <InlineHelp title="费用方向说明">选择费用在提货和仓库环节的应收、应付属性。</InlineHelp></h3>
           <table class="density-table density-table--editable fee-direction-table"><thead><tr><th scope="col">环节</th><th scope="col">应付</th><th scope="col">应收</th></tr></thead><tbody>
             <tr><th scope="row">提货环节</th><td><el-checkbox v-model="form.pickupPayable" aria-label="提货环节应付" /></td><td><el-checkbox v-model="form.pickupReceivable" aria-label="提货环节应收" /></td></tr>
@@ -453,7 +454,7 @@ onMounted(() => {
             <tr v-if="hasPayableDirection"><td colspan="3"><el-form-item label="供应商类别" required><el-select v-model="form.supplierCategory" placeholder="请选择供应商类别"><el-option v-for="(label, value) in categoryLabels" :key="value" :label="label" :value="value" /></el-select></el-form-item></td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用适用说明">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用适用说明">
           <h3 class="density-dialog-section__title">适用说明</h3>
           <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="说明"><el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用场景或核算说明" /></el-form-item></td></tr></tbody></table>
         </section>
@@ -466,7 +467,7 @@ onMounted(() => {
       </template>
     </AppDrawer>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="statusOpen"
       :title="`${statusTarget?.status === 'ACTIVE' ? '停用' : '启用'}费用项目${statusTarget?.feeTypeName?.trim() ? ' · ' + statusTarget.feeTypeName.trim() : ''}`"
       :confirm-text="statusTarget?.status === 'ACTIVE' ? '确认停用' : '确认启用'"
@@ -480,7 +481,7 @@ onMounted(() => {
       </p>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog"
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog"
       v-model="deleteOpen"
       :title="deleteTarget?.feeTypeName?.trim() ? `删除费用项目 · ${deleteTarget.feeTypeName.trim()}` : '删除费用项目'"
       confirm-text="确认删除"
@@ -499,7 +500,7 @@ onMounted(() => {
 .fee-item-editor-table td { width: 50%; }
 .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: var(--admin-font-caption); }
+.fee-item-name small { color: var(--workbench-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; }
 @media (max-width: 720px) {
   .fee-item-editor-table tr { display: grid; }

src/modules/finance/financeDensity.css

@@ -5,7 +5,7 @@
 .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 .finance-detail-context { min-width: 0; color: var(--workbench-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); }

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

@@ -321,7 +321,7 @@ describe('fee source and statement native dialogs', () => {
     const prompt = vi.spyOn(ElMessageBox, 'prompt').mockResolvedValue(Object.assign('confirm', { value: '测试原因', action: 'confirm' as const }))
     const { wrapper } = await mountPage('statements')
     await rowClick(wrapper, label)
-    expect(prompt).toHaveBeenCalledWith('请输入操作原因', expect.stringContaining(statement.billNo), expect.objectContaining({ customClass: 'admin-density-confirm', inputPattern: /\S+/ }))
+    expect(prompt).toHaveBeenCalledWith('请输入操作原因', expect.stringContaining(statement.billNo), expect.objectContaining({ customClass: 'admin-density-confirm admin-workbench', inputPattern: /\S+/ }))
     expect(api.actionReconciliationStatement).toHaveBeenCalledWith(statement.id, { action, reason: '测试原因', expectedVersion: 3 })
   })
   it('does not change statement state when its reason prompt is cancelled', async () => {

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

@@ -67,7 +67,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(page).toContain('<DetailPageLayout')
     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('class="ledger-query workbench-query"')
     expect(page).toContain('@search="ledgerPage = 1; void loadLedger($event)"')
     expect(page).toContain('class="ledger-table"')
     expect(page).toContain('<template #toolbar-actions>')
@@ -87,10 +87,10 @@ describe('FinanceCustomerAccountsView delivery', () => {
     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('class="surface-panel finance-account-detail__surface workbench-panel is-flush is-page-surface"')
     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="detail-table-scroll workbench-table"')
     expect(page).toContain('class="ledger-identifier"')
     expect(page).toContain('class="ledger-document"')
     expect(page).toContain('text-overflow: ellipsis')

src/modules/finance/pages/FinanceCustomerAccountsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
@@ -440,12 +441,12 @@ onBeforeUnmount(clearVoucherPreview)
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-account-page admin-density" spacing="normal">
+  <AdminPage as="div" class="finance-account-page admin-density admin-workbench" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问客户账户" sub-title="请联系管理员开通客户账户查看权限" />
     <ListPageLayout v-else-if="!detailOpen" aria-label="客户账户">
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!stateError" 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()">
+      <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!stateError" 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-start><h1>客户账户</h1></template>
         <template #filters><QueryToolbar v-model="filters" ariaLabel="客户账户筛选" :fields="queryFields" preference-key="finance-customer-accounts-query" @search="search" /></template>
         <template #notices><template v-if="stateError"><LoadErrorState title="客户账户加载失败" :message="stateError.message" :loading="loading || customersLoading" @retry="customersError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="stateError" /></template></LoadErrorState></template></template>
@@ -463,7 +464,7 @@ onBeforeUnmount(clearVoucherPreview)
         </DataTable></section>
     </ListPageLayout>
     <AdminPage v-else as="div" class="finance-account-detail admin-density" spacing="normal">
-      <section class="surface-panel finance-account-detail__surface">
+      <section class="surface-panel finance-account-detail__surface workbench-panel is-flush is-page-surface">
       <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>
@@ -472,7 +473,7 @@ onBeforeUnmount(clearVoucherPreview)
           <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">
+            <div v-else class="detail-table-scroll workbench-table"><DataTable class="recharge-table" :data="sortedRechargeRequests" :columns="rechargeColumns" :loading="rechargeLoading" row-key="requestId" empty-text="暂无充值申请" column-settings-mode="hide">
               <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>
@@ -481,8 +482,8 @@ onBeforeUnmount(clearVoucherPreview)
             </DataTable></div>
           </FormSection>
           <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>
+            <QueryToolbar v-model="ledgerFilters" class="ledger-query workbench-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; void loadLedger($event)" />
+            <div class="detail-table-scroll workbench-table"><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 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>
@@ -490,9 +491,9 @@ onBeforeUnmount(clearVoucherPreview)
       </DetailPageLayout>
       </section>
     </AdminPage>
-    <AppDialog class="admin-density-dialog" v-model="adjustmentOpen" :title="`${adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'} · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(720px, calc(100vw - 28px))" fullscreenable :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="adjustmentOpen" :title="`${adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'} · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(720px, calc(100vw - 28px))" fullscreenable :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
       <div class="density-dialog-sections">
-        <section class="density-dialog-section" data-tone="summary" aria-label="当前账户资料">
+        <section class="density-dialog-section workbench-evidence" data-tone="summary" aria-label="当前账户资料">
           <h3 class="density-dialog-section__title">当前账户（CNY） <InlineHelp v-if="adjustmentForm.type === 'RECHARGE'" title="充值说明">充值会先归还已用授信，剩余金额计入实际余额。</InlineHelp></h3>
           <table class="density-table wallet-summary"><tbody>
             <tr><th scope="row">客户名称</th><td colspan="3">{{ adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—' }}</td></tr>
@@ -500,7 +501,7 @@ onBeforeUnmount(clearVoucherPreview)
           </tbody></table>
         </section>
         <el-alert v-if="adjustmentForm.type === 'DEDUCTION'" title="扣款先使用未冻结的实际余额，不足部分再使用可用授信。" type="warning" :closable="false" />
-        <section class="density-dialog-section" data-tone="work" aria-label="账户变动登记">
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="账户变动登记">
           <h3 class="density-dialog-section__title">{{ adjustmentForm.type === 'RECHARGE' ? '充值登记' : '扣款登记' }}</h3>
           <el-form label-position="left" label-width="100px" class="density-form" :disabled="adjustmentSaving">
             <table class="density-table density-table--editable wallet-adjustment-table"><tbody>
@@ -512,11 +513,11 @@ onBeforeUnmount(clearVoucherPreview)
         </section>
       </div>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="creditLimitOpen" :title="`设置授信额度 · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(560px, calc(100vw - 28px))" fullscreenable confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="creditLimitOpen" :title="`设置授信额度 · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(560px, calc(100vw - 28px))" fullscreenable confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
       <div class="density-dialog-sections">
-        <section class="density-dialog-section" data-tone="summary" aria-label="当前授信资料"><h3 class="density-dialog-section__title">当前授信（CNY）</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">客户名称</th><td>{{ adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—' }}</td></tr><tr><th scope="row">当前已用授信</th><td>{{ money(adjustmentAccount?.creditUsed) }}</td></tr></tbody></table></section>
+        <section class="density-dialog-section workbench-evidence" data-tone="summary" aria-label="当前授信资料"><h3 class="density-dialog-section__title">当前授信（CNY）</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">客户名称</th><td>{{ adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—' }}</td></tr><tr><th scope="row">当前已用授信</th><td>{{ money(adjustmentAccount?.creditUsed) }}</td></tr></tbody></table></section>
         <el-alert title="授信到期日当天仍有效，次日授信失效；届时负数实际余额将阻止客户提交新订单。" type="warning" :closable="false" />
-        <section class="density-dialog-section" data-tone="work" aria-label="授信额度设置"><h3 class="density-dialog-section__title">授信设置</h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="授信额度设置"><h3 class="density-dialog-section__title">授信设置</h3>
           <el-form label-position="left" label-width="100px" class="density-form" :disabled="creditLimitSaving"><table class="density-table density-table--editable"><tbody>
             <tr><td><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item></td></tr>
             <tr><td><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></td></tr>
@@ -525,10 +526,10 @@ onBeforeUnmount(clearVoucherPreview)
         </section>
       </div>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="reviewOpen" :title="`审核充值申请 · ${reviewRequest?.requestNo || '—'}`" width="min(620px, calc(100vw - 28px))" fullscreenable confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="reviewOpen" :title="`审核充值申请 · ${reviewRequest?.requestNo || '—'}`" width="min(620px, calc(100vw - 28px))" fullscreenable confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
       <div class="density-dialog-sections">
-        <section v-if="reviewRequest" class="density-dialog-section" data-tone="source" aria-label="充值申请资料"><h3 class="density-dialog-section__title">充值申请</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">申请单号</th><td>{{ reviewRequest.requestNo || '—' }}</td></tr><tr><th scope="row">充值金额（CNY）</th><td>{{ money(reviewRequest.amount) }}</td></tr><tr><th scope="row">付款凭证</th><td>{{ reviewRequest.voucherFileName || '—' }}</td></tr></tbody></table></section>
-        <section class="density-dialog-section" data-tone="work" aria-label="充值审核登记"><h3 class="density-dialog-section__title">审核登记</h3>
+        <section v-if="reviewRequest" class="density-dialog-section workbench-evidence" data-tone="source" aria-label="充值申请资料"><h3 class="density-dialog-section__title">充值申请</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">申请单号</th><td>{{ reviewRequest.requestNo || '—' }}</td></tr><tr><th scope="row">充值金额（CNY）</th><td>{{ money(reviewRequest.amount) }}</td></tr><tr><th scope="row">付款凭证</th><td>{{ reviewRequest.voucherFileName || '—' }}</td></tr></tbody></table></section>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="充值审核登记"><h3 class="density-dialog-section__title">审核登记</h3>
           <el-form label-position="left" label-width="100px" class="density-form" :disabled="reviewSaving"><table class="density-table density-table--editable"><tbody>
             <tr><td><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></td></tr>
             <tr><td><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></td></tr>
@@ -536,7 +537,7 @@ onBeforeUnmount(clearVoucherPreview)
         </section>
       </div>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" fullscreenable :loading="voucherPreviewLoading" :show-footer="false">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" fullscreenable :loading="voucherPreviewLoading" :show-footer="false">
       <section class="density-dialog-section" data-tone="source" aria-label="付款凭证"><div class="voucher-preview"><img v-if="voucherPreviewUrl" class="voucher-preview__image" :src="voucherPreviewUrl" :alt="voucherPreviewName" /></div></section>
     </AppDialog>
   </AdminPage>
@@ -571,7 +572,7 @@ onBeforeUnmount(clearVoucherPreview)
 }
 
 .balance-value {
-  color: var(--cc-text);
+  color: var(--workbench-text);
   font-variant-numeric: tabular-nums;
 }
 
@@ -607,7 +608,7 @@ onBeforeUnmount(clearVoucherPreview)
 
 .recharge-section {
   padding: var(--admin-space-4) 0 0;
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
+  border-bottom: 1px solid var(--workbench-border);
 }
 
 .recharge-table {
@@ -620,8 +621,6 @@ onBeforeUnmount(clearVoucherPreview)
 
 :deep(.ledger-query.query-toolbar) {
   padding: 0;
-  border: 0;
-  background: transparent;
 }
 
 .detail-table-scroll {
@@ -656,7 +655,7 @@ onBeforeUnmount(clearVoucherPreview)
 }
 
 .term-label {
-  color: var(--cc-text);
+  color: var(--workbench-text);
   font-size: var(--admin-font-section);
   font-weight: 600;
 }
@@ -666,7 +665,7 @@ onBeforeUnmount(clearVoucherPreview)
 }
 
 .term-unit {
-  color: var(--cc-muted);
+  color: var(--workbench-muted);
 }
 
 .wallet-summary { table-layout: fixed; }

src/modules/finance/pages/FinanceCustomerArapView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
@@ -396,13 +397,13 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-arap-page admin-density" spacing="normal">
+  <AdminPage as="div" class="finance-arap-page admin-density admin-workbench" spacing="normal">
     <OperationErrorToast :details="reviewError || mutationError" />
       <el-result v-if="!canView" icon="warning" title="无权访问客户应收应付" sub-title="请联系管理员开通账单查看权限" />
     <ListPageLayout v-else-if="!detailOpen" aria-label="客户应收应付">
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!customersError && !loadError" 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()">
+      <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!customersError && !loadError" 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-start><h1>客户应收应付</h1></template>
         <template #filters><QueryToolbar v-model="filters" ariaLabel="客户应收应付筛选" :fields="queryFields" preference-key="finance-customer-arap-query" @search="search" /></template>
         <template #notices><template v-if="stateError"><LoadErrorState title="客户应收应付加载失败" :message="stateError.message" :loading="customersLoading || loading" @retry="customersError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="stateError" /></template></LoadErrorState></template></template>
@@ -418,18 +419,18 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
       </DataTable></section>
     </ListPageLayout>
     <AdminPage v-else as="div" class="finance-arap-detail admin-density" spacing="normal">
-      <section class="surface-panel finance-arap-detail__surface">
+      <section class="surface-panel finance-arap-detail__surface workbench-panel is-flush is-page-surface">
       <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 && selected && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && selected && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected)"><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 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>
+        <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"><div class="workbench-table"><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></div></FormSection></template>
       </DetailPageLayout>
       </section>
     </AdminPage>
-    <AppDialog class="admin-density-dialog" v-model="reviewOpen" :title="`费用来源审核 · ${selected?.documentNo || '费用来源'}`" fullscreenable confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="reviewOpen" :title="`费用来源审核 · ${selected?.documentNo || '费用来源'}`" fullscreenable confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
       <div class="density-dialog-sections">
-      <section v-if="detail" class="density-dialog-section" data-tone="source" aria-label="费用来源资料">
+      <section v-if="detail" class="density-dialog-section workbench-evidence" data-tone="source" aria-label="费用来源资料">
         <h3 class="density-dialog-section__title">费用来源</h3>
         <table class="density-table fee-dialog-facts"><tbody>
           <tr><th scope="row">客户</th><td colspan="3">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</td></tr>
@@ -438,7 +439,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
           <tr><th scope="row">收付方向</th><td>{{ financeDirectionLabel(detail.direction) }}</td><th scope="row">审核状态</th><td>{{ statusLabel(detail.reviewStatus) }}</td></tr>
         </tbody></table>
       </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用审核登记"><h3 class="density-dialog-section__title">审核登记</h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用审核登记"><h3 class="density-dialog-section__title">审核登记</h3>
           <el-form class="density-form" label-position="left" label-width="110px" :disabled="reviewSaving"><table class="density-table density-table--editable"><tbody>
             <tr><td><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item></td></tr>
             <tr><td><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'" :required="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></td></tr>
@@ -446,9 +447,9 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
         </section>
       </div>
     </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="mutationOpen" :title="`${mutationTitle} · ${selected?.documentNo || '费用来源'}`" fullscreenable :confirm-type="mutationMode === 'VOID' ? 'danger' : 'primary'" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="mutationOpen" :title="`${mutationTitle} · ${selected?.documentNo || '费用来源'}`" fullscreenable :confirm-type="mutationMode === 'VOID' ? 'danger' : 'primary'" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
       <div class="density-dialog-sections">
-      <section v-if="detail" class="density-dialog-section" data-tone="source" aria-label="费用来源资料">
+      <section v-if="detail" class="density-dialog-section workbench-evidence" data-tone="source" aria-label="费用来源资料">
         <h3 class="density-dialog-section__title">费用来源</h3>
         <table class="density-table fee-dialog-facts"><tbody>
           <tr><th scope="row">客户</th><td colspan="3">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</td></tr>
@@ -457,7 +458,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
           <tr><th scope="row">收付方向</th><td>{{ financeDirectionLabel(detail.direction) }}</td><th scope="row">审核状态</th><td>{{ statusLabel(detail.reviewStatus) }}</td></tr>
         </tbody></table>
       </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="费用操作登记"><h3 class="density-dialog-section__title">{{ mutationTitle }}</h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="费用操作登记"><h3 class="density-dialog-section__title">{{ mutationTitle }}</h3>
           <el-form class="density-form" label-position="left" label-width="110px" :disabled="mutationSaving"><table class="density-table density-table--editable"><tbody>
             <tr v-if="mutationMode === 'EDIT' || mutationMode === 'ADJUST'"><td><el-form-item label="金额（CNY）" required><el-input-number v-model="mutationForm.amount" :min="0.01" :precision="2" :controls="false" placeholder="请输入调整金额" /></el-form-item></td></tr>
             <tr><td><el-form-item label="操作原因" required><el-input v-model="mutationForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请填写操作原因" show-word-limit /></el-form-item></td></tr>
@@ -518,14 +519,14 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 }
 
 .muted-action {
-  color: var(--cc-muted);
+  color: var(--workbench-muted);
 }
 
 .arap-detail-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
   gap: var(--admin-space-6);
-  border-bottom: 1px solid var(--cc-border, #e3e8ef);
+  border-bottom: 1px solid var(--workbench-border);
 }
 
 .arap-information,
@@ -536,7 +537,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 
 .arap-settlement {
   padding-left: var(--admin-space-6);
-  border-left: 1px solid var(--cc-border, #e3e8ef);
+  border-left: 1px solid var(--workbench-border);
 }
 
 
@@ -548,7 +549,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 
 :deep(.arap-detail .el-descriptions__label) {
   width: 112px;
-  color: var(--cc-muted);
+  color: var(--workbench-muted);
 }
 
 .operation-log :deep(.el-empty) {
@@ -562,7 +563,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
 .operation-log small {
   display: block;
   margin-top: var(--admin-space-1);
-  color: var(--cc-muted);
+  color: var(--workbench-muted);
 }
 
 @media (min-width: 1920px) {
@@ -598,7 +599,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
   .arap-settlement {
     padding-left: 0;
     border-left: 0;
-    border-top: 1px solid var(--cc-border, #e3e8ef);
+    border-top: 1px solid var(--workbench-border);
   }
 }
 

src/modules/finance/pages/FinanceCustomerStatementsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -514,7 +515,7 @@ async function createStatement() {
 async function performAction(row: FinanceStatementReadModel, actionName: ReconciliationActionPayload['action']) {
   const title = ({ REJECT: '驳回对账单', VOID: '作废对账单', REOPEN: '重开对账单' } as Partial<Record<ReconciliationActionPayload['action'], string>>)[actionName] || '对账单操作'
   const reason = ['REJECT', 'VOID', 'REOPEN'].includes(actionName)
-    ? await ElMessageBox.prompt('请输入操作原因', `${title} · ${row.billNo || '—'}`, { customClass: 'admin-density-confirm', inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
+    ? await ElMessageBox.prompt('请输入操作原因', `${title} · ${row.billNo || '—'}`, { customClass: 'admin-density-confirm admin-workbench', inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
     : undefined
   if (reason === null) return
   actionBusy.value = true
@@ -606,9 +607,9 @@ watch(detailRouteId, (statementId) => {
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-statements-page admin-density" spacing="normal">
+  <AdminPage as="div" class="finance-statements-page admin-density admin-workbench" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问客户对账单" sub-title="请联系管理员开通财务查看权限" />
-    <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail" aria-label="客户对账单详情">
+    <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail workbench-panel is-flush is-page-surface" aria-label="客户对账单详情">
       <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="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>
         <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>
@@ -642,7 +643,7 @@ watch(detailRouteId, (statementId) => {
           <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 class="density-form-section" v-else-if="detail" title="账单明细" :bordered="false">
-            <div class="detail-table-scroll">
+            <div class="detail-table-scroll workbench-table">
               <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>
                 <template #sourceType="{ row }">{{ financeSourceTypeLabel(row.sourceType) }}</template>
@@ -657,12 +658,12 @@ watch(detailRouteId, (statementId) => {
                 <template #periodEnd>{{ detail.periodEnd || '—' }}</template>
               </DataTable>
             </div>
-            <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>
+            <el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><div class="workbench-table"><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></div></el-collapse-item></el-collapse>
           </FormSection>
         </el-tab-pane>
         <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">
+            <div class="detail-table-scroll workbench-table">
               <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>
                 <template #transactionDate="{ row }">{{ formatDateTime(row.transactionDate).slice(0, 10) }}</template>
@@ -679,7 +680,7 @@ watch(detailRouteId, (statementId) => {
     <ListPageLayout v-else aria-label="客户对账单">
 
 
-      <section><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!customerError && !error" v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" aria-label="客户对账单列表" row-key="id" empty-text="暂无客户对账单" preference-key="finance-customer-statements" @row-click="openDetail">
+      <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!customerError && !error" v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" aria-label="客户对账单列表" row-key="id" empty-text="暂无客户对账单" preference-key="finance-customer-statements" @row-click="openDetail">
         <template #toolbar-start><h1>客户对账单</h1></template>
         <template #filters><QueryToolbar v-model="filters" ariaLabel="客户对账单筛选" :fields="fields" :loading="loading" preference-key="finance-statements-query" :search-on-clear="false" @search="load" /></template>
         <template #notices><template v-if="customerError || error"><LoadErrorState title="客户对账单加载失败" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState></template></template>
@@ -708,9 +709,9 @@ watch(detailRouteId, (statementId) => {
           </DataTable></section>
     </ListPageLayout>
 
-    <AppDialog class="admin-density-dialog" v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" fullscreenable :confirm-loading="createBusy" @confirm="createStatement">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" fullscreenable :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>
-      <section class="density-dialog-section" data-tone="work" aria-label="对账单生成设置">
+      <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="对账单生成设置">
         <h3 class="density-dialog-section__title">生成设置 <InlineHelp title="对账单生成说明">按账期自动汇总，或指定审核通过、已发布且未出账的应收费用；生成币种为CNY。</InlineHelp></h3>
         <el-form class="density-form" label-position="left" label-width="90px" :disabled="createBusy"><table class="density-table density-table--editable statement-create-table"><tbody>
           <tr><td colspan="2"><el-form-item label="生成方式"><el-radio-group v-model="createForm.generationMode"><el-radio-button value="BY_CUTOFF">按账期自动汇总</el-radio-button><el-radio-button value="SELECTED" :disabled="!canSelectSources">指定费用生成</el-radio-button></el-radio-group></el-form-item></td></tr>
@@ -726,13 +727,13 @@ watch(detailRouteId, (statementId) => {
       </section>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog" v-model="adjustOpen" :title="`调整客户对账单 · ${adjustStatement?.billNo || '—'}`" width="min(900px, 96vw)" fullscreenable :confirm-loading="adjustBusy" @confirm="submitAdjustment">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="adjustOpen" :title="`调整客户对账单 · ${adjustStatement?.billNo || '—'}`" width="min(900px, 96vw)" fullscreenable :confirm-loading="adjustBusy" @confirm="submitAdjustment">
       <OperationErrorToast :details="adjustError" />
       <el-form class="density-form density-dialog-sections" label-position="left" label-width="110px" :disabled="adjustBusy">
-        <section v-if="adjustStatement" class="density-dialog-section" data-tone="summary" aria-label="当前对账单"><h3 class="density-dialog-section__title">当前对账单</h3><table class="density-table statement-dialog-facts"><tbody><tr><th scope="row">对账单号</th><td>{{ adjustStatement.billNo || '—' }}</td><th scope="row">客户</th><td>{{ customerDisplayName(adjustStatement.customerId, adjustStatement.customerName) }}</td></tr></tbody></table></section>
+        <section v-if="adjustStatement" class="density-dialog-section workbench-evidence" data-tone="summary" aria-label="当前对账单"><h3 class="density-dialog-section__title">当前对账单</h3><table class="density-table statement-dialog-facts"><tbody><tr><th scope="row">对账单号</th><td>{{ adjustStatement.billNo || '—' }}</td><th scope="row">客户</th><td>{{ customerDisplayName(adjustStatement.customerId, adjustStatement.customerName) }}</td></tr></tbody></table></section>
         <section class="density-dialog-section" data-tone="work" aria-label="对账单调整登记"><h3 class="density-dialog-section__title">调整登记</h3><div class="statement-adjust-editor">
-          <table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></td></tr></tbody></table>
-          <el-table :data="adjustLines" size="small" border :stripe="false" row-key="statementLineId"><el-table-column label="选择" width="64"><template #default="{ row }"><el-checkbox v-model="row.selected" :aria-label="`选择${row.feeItemName || '费用明细'}`" /></template></el-table-column><el-table-column prop="feeItemName" label="费用项目" min-width="150" show-overflow-tooltip /><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>
+          <div class="workbench-evidence"><table class="density-table density-table--editable"><tbody><tr><td><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></td></tr></tbody></table></div>
+          <div class="workbench-table"><el-table :data="adjustLines" size="small" border stripe row-key="statementLineId"><el-table-column label="选择" width="64"><template #default="{ row }"><el-checkbox v-model="row.selected" :aria-label="`选择${row.feeItemName || '费用明细'}`" /></template></el-table-column><el-table-column prop="feeItemName" label="费用项目" min-width="150" show-overflow-tooltip /><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></div>
         </div></section>
       </el-form>
     </AppDialog>
@@ -748,7 +749,7 @@ watch(detailRouteId, (statementId) => {
 .statement-dialog-facts th { width: var(--admin-label-width); }
 .statement-adjust-editor { display: grid; gap: var(--admin-space-5); }
 .statement-detail-page { min-width: 0; width: min(100%, 1920px); margin: 0 auto; overflow: hidden; }
-.statement-summary-section { padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid var(--cc-border-subtle); }
+.statement-summary-section { padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid var(--workbench-border); }
 .statement-outstanding { color: var(--el-color-warning-dark-2); }
 .statement-detail-tabs { min-width: 0; }
 .statement-detail-table { min-width: 0; }

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

@@ -42,9 +42,9 @@ describe('Finance formal settlement desktop presentation', () => {
   })
 
   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 finance-density-detail"')
+    expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail workbench-panel is-flush is-page-surface"')
     expect(source).toContain('class="settlement-detail-content"')
-    expect(source).toContain('class="detail-table-scroll"')
+    expect(source).toContain('class="detail-table-scroll workbench-table"')
     expect(source).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
     expect(source).not.toContain('class="settlement-detail-card"')
   })
@@ -64,7 +64,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.match(/class="density-dialog-section partial-summary"/g)).toHaveLength(2)
+    expect(source.match(/class="density-dialog-section partial-summary workbench-evidence"/g)).toHaveLength(2)
     expect(source).toContain('density-table density-table--editable settlement-operation-table')
     expect(source).toContain('.settlement-operation-table td:not([colspan]) { width: 50%; }')
     expect(source).toContain('<OperationErrorToast :message="receiptValidationError" />')

src/modules/finance/pages/FinanceFormalSettlementPage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -453,7 +454,7 @@ async function submitPayment() {
 
 async function performAction(row: SettlementRow, action: 'VOID' | 'REOPEN') {
   const reason = await ElMessageBox.prompt('请输入操作原因', `${action === 'VOID' ? '作废' : '重开'}${title.value} · ${row.settlementNo || '—'}`, {
-    customClass: 'admin-density-confirm',
+    customClass: 'admin-density-confirm admin-workbench',
     inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消',
   }).then((result) => result.value.trim()).catch(() => null)
   if (reason === null) return
@@ -519,12 +520,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-settlement-page admin-density" spacing="normal">
+  <AdminPage as="div" class="finance-settlement-page admin-density admin-workbench" spacing="normal">
     <OperationErrorToast v-if="createOpen || paymentOpen" :details="error" />
     <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 finance-density-detail" :aria-label="`${title}详情`">
+    <DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail workbench-panel is-flush is-page-surface" :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>
@@ -562,7 +563,7 @@ onMounted(() => {
           </el-descriptions>
         </FormSection>
         <FormSection class="density-form-section" title="费用明细">
-          <div class="detail-table-scroll">
+          <div class="detail-table-scroll workbench-table">
           <el-table :data="detail.lines" size="small" border stripe empty-text="暂无费用明细">
             <el-table-column prop="feeItemName" label="费用类型" min-width="150" />
             <el-table-column prop="sourceType" label="来源类型" min-width="140"><template #default="scope">{{ financeSourceTypeLabel(scope.row.sourceType) }}</template></el-table-column>
@@ -575,7 +576,7 @@ onMounted(() => {
           </div>
         </FormSection>
         <FormSection class="density-form-section" :title="kind === 'receivable' ? '收款记录' : '付款记录'">
-          <div class="detail-table-scroll">
+          <div class="detail-table-scroll workbench-table">
           <el-table :data="detail.transactions" size="small" border stripe :empty-text="kind === 'receivable' ? '暂无收款记录' : '暂无付款记录'">
             <el-table-column prop="transactionDate" :label="kind === 'receivable' ? '收款日期' : '付款日期'" width="130" />
             <el-table-column prop="amount" label="金额(CNY)" width="130" align="right"><template #default="scope">{{ money(scope.row.amount) }}</template></el-table-column>
@@ -589,7 +590,7 @@ onMounted(() => {
           </div>
         </FormSection>
         <FormSection class="density-form-section" title="修订记录" :bordered="false">
-          <div class="detail-table-scroll">
+          <div class="detail-table-scroll workbench-table">
           <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>
             <el-table-column prop="beforeAmount" label="调整前(CNY)" width="140" align="right"><template #default="scope">{{ money(scope.row.beforeAmount) }}</template></el-table-column>
@@ -605,7 +606,7 @@ onMounted(() => {
     <ListPageLayout v-else :aria-label="title">
 
 
-      <section><DataTable :preference-key="`finance-settlement-${kind}-table`" appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!customerError && !error" 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="暂无符合条件的结算单">
+      <section class="workbench-table is-page-surface"><DataTable :preference-key="`finance-settlement-${kind}-table`" appearance="integrated" column-settings-mode="show" :results-visible="!customerError && !error" 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><h1>{{ title }}</h1></template>
         <template #filters>
         <QueryToolbar v-model="filters" :ariaLabel="`${title}筛选`" :fields="fields" :preference-key="`finance-settlement-${kind}-query`" :search-on-clear="false" @search="load" />
@@ -654,8 +655,8 @@ onMounted(() => {
           </DataTable></section>
     </ListPageLayout>
 
-    <AppDialog class="admin-density-dialog" v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" fullscreenable :confirm-loading="createBusy" @confirm="submitCreate">
-      <section class="density-dialog-section" data-tone="work" aria-label="结算单生成设置"><h3 class="density-dialog-section__title">生成设置</h3>
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" fullscreenable :confirm-loading="createBusy" @confirm="submitCreate">
+      <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="结算单生成设置"><h3 class="density-dialog-section__title">生成设置</h3>
         <el-form class="density-form" label-position="left" label-width="120px" :disabled="createBusy"><table class="density-table density-table--editable"><tbody>
           <tr><td><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></td></tr>
           <tr><td><el-form-item label="币种"><span>CNY</span></el-form-item></td></tr>
@@ -669,16 +670,16 @@ onMounted(() => {
       </section>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog" v-model="paymentOpen" :title="`登记付款 · ${detail?.settlementNo || '—'}`" width="min(760px, 94vw)" fullscreenable :confirm-loading="paymentBusy" @confirm="submitPayment">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="paymentOpen" :title="`登记付款 · ${detail?.settlementNo || '—'}`" width="min(760px, 94vw)" fullscreenable :confirm-loading="paymentBusy" @confirm="submitPayment">
       <div class="density-dialog-sections">
-        <section v-if="detail" class="density-dialog-section partial-summary" data-tone="summary" aria-label="当前结算资料"><h3 class="density-dialog-section__title">当前结算（CNY）</h3>
+        <section v-if="detail" class="density-dialog-section partial-summary workbench-evidence" data-tone="summary" aria-label="当前结算资料"><h3 class="density-dialog-section__title">当前结算（CNY）</h3>
           <table class="density-table settlement-dialog-facts"><tbody>
             <tr><th scope="row">结算单号</th><td>{{ detail.settlementNo || '—' }}</td><th scope="row">供应商</th><td>{{ detailPartyName() }}</td></tr>
             <tr><th scope="row">应付金额</th><td>{{ money(detail.amount) }}</td><th scope="row">已付金额</th><td class="is-success">{{ money(detail.paidAmount) }}</td></tr>
             <tr><th scope="row">当前余额</th><td colspan="3" class="is-danger">{{ money(detail.outstandingAmount) }}</td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="付款登记"><h3 class="density-dialog-section__title">付款登记</h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="付款登记"><h3 class="density-dialog-section__title">付款登记</h3>
           <el-form class="settlement-operation-form density-form" label-position="left" label-width="140px" :disabled="paymentBusy"><table class="density-table density-table--editable settlement-operation-table"><tbody>
               <tr><td><el-form-item label="付款日期"><el-date-picker v-model="paymentForm.transactionDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td><td><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></td></tr>
               <tr><td><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></td><td><el-form-item label="银行流水号/凭证号"><el-input v-model="paymentForm.referenceNo" placeholder="请输入付款流水号" /></el-form-item></td></tr>
@@ -690,16 +691,16 @@ onMounted(() => {
       </div>
     </AppDialog>
 
-    <AppDialog class="admin-density-dialog" v-model="receiptOpen" :title="`登记收款 · ${detail?.settlementNo || '—'}`" width="min(760px, 94vw)" fullscreenable :confirm-loading="receiptBusy" @confirm="submitReceipt">
+    <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="receiptOpen" :title="`登记收款 · ${detail?.settlementNo || '—'}`" width="min(760px, 94vw)" fullscreenable :confirm-loading="receiptBusy" @confirm="submitReceipt">
       <div class="density-dialog-sections">
-        <section v-if="detail" class="density-dialog-section partial-summary" data-tone="summary" aria-label="当前结算资料"><h3 class="density-dialog-section__title">当前结算（CNY）</h3>
+        <section v-if="detail" class="density-dialog-section partial-summary workbench-evidence" data-tone="summary" aria-label="当前结算资料"><h3 class="density-dialog-section__title">当前结算（CNY）</h3>
           <table class="density-table settlement-dialog-facts"><tbody>
             <tr><th scope="row">结算单号</th><td>{{ detail.settlementNo || '—' }}</td><th scope="row">客户公司</th><td>{{ detailPartyName() }}</td></tr>
             <tr><th scope="row">应收金额</th><td>{{ money(detail.amount) }}</td><th scope="row">已收金额</th><td class="is-success">{{ money(detail.paidAmount) }}</td></tr>
             <tr><th scope="row">当前余额</th><td colspan="3" class="is-danger">{{ money(detail.outstandingAmount) }}</td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section" data-tone="work" aria-label="收款登记"><h3 class="density-dialog-section__title">收款登记</h3>
+        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="收款登记"><h3 class="density-dialog-section__title">收款登记</h3>
           <el-form class="settlement-operation-form density-form" label-position="left" label-width="140px" :disabled="receiptBusy"><table class="density-table density-table--editable settlement-operation-table"><tbody>
               <tr><td><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td><td><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></td></tr>
               <tr><td colspan="2"><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></td></tr>

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

@@ -4,6 +4,7 @@ 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 workbench = readFileSync(resolve(process.cwd(), 'src/styles/adminWorkbench.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')
@@ -24,7 +25,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 finance-density-detail"')
+    expect(settlement).toContain('class="settlement-detail-page surface-panel finance-density-detail workbench-panel is-flush is-page-surface"')
     expect(settlement).toContain('返回列表')
     expect(settlement).not.toContain('AppDrawer')
     expect(settlement).toContain('登记后剩余余额')
@@ -33,12 +34,12 @@ describe('finance presentation governance', () => {
   })
 
   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-page surface-panel finance-density-detail workbench-panel is-flush is-page-surface"')
     expect(settlement).toContain('class="settlement-detail-content"')
     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.match(/class="detail-table-scroll workbench-table"/g)).toHaveLength(3)
     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)
@@ -131,12 +132,12 @@ describe('finance presentation governance', () => {
   it('keeps bordered statement details and lets the adjustment editor scroll with its dialog', () => {
     expect(statements).toContain(':data="detail.lines" size="small" border stripe')
     expect(statements).toContain(':data="detail.revisions" size="small" border stripe')
-    expect(statements).toContain(':data="adjustLines" size="small" border :stripe="false" row-key="statementLineId"')
+    expect(statements).toContain(':data="adjustLines" size="small" border stripe row-key="statementLineId"')
     expect(statements).not.toContain('max-height="420"')
   })
 
   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 finance-density-detail"')
+    expect(statements).toContain('v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail workbench-panel is-flush is-page-surface"')
     expect(statements).toContain('@row-click="openDetail"')
     expect(statements).toContain("name: 'finance-customer-statement-detail'")
     expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
@@ -153,8 +154,13 @@ describe('finance presentation governance', () => {
     expect(density).toContain('.density-detail-overview')
     expect(accounts).toContain(':deep(.ledger-query.query-toolbar)')
     expect(accounts).toContain('padding: 0;')
-    expect(accounts).toContain('border: 0;')
-    expect(accounts).toContain('background: transparent;')
+    const summaryStyles = density.match(/\.density-detail-overview \{([^}]*)\}/)?.[1]
+    expect(summaryStyles).toContain('display: flex;')
+    expect(summaryStyles).toContain('flex-wrap: wrap;')
+    const queryStyles = workbench.match(/\.query-toolbar\.workbench-query \{([^}]*)\}/)?.[1]
+    expect(accounts).toContain('class="ledger-query workbench-query"')
+    expect(queryStyles).toContain('border-color: var(--workbench-border);')
+    expect(queryStyles).toContain('background: var(--workbench-surface);')
     expect(accounts).not.toContain('展示应收、应付及每次变动后的未收金额。')
     expect(accounts).not.toContain('到期日按账单日期加客户账期计算；每个客户独立设置，默认 30 天。')
   })

src/modules/finance/pages/FinanceReceivableStatisticsView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onMounted, ref } from 'vue'
@@ -89,10 +90,10 @@ onMounted(() => { void loadCustomers(); void load() })
 </script>
 
 <template>
-  <AdminPage class="receivable-statistics-page admin-density" spacing="normal">
+  <AdminPage class="receivable-statistics-page admin-density admin-workbench" spacing="normal">
     <el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
     <template v-else>
-      <DataTable class="statistics-table" appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!error" 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()">
+      <div class="workbench-table is-page-surface"><DataTable class="statistics-table" appearance="integrated" column-settings-mode="show" :results-visible="!error" 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-start><h1>应收款统计表</h1></template>
           <template #filters><section class="query-toolbar 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>
@@ -109,26 +110,27 @@ onMounted(() => { void loadCustomers(); void 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>
+          </DataTable></div>
     </template>
   </AdminPage>
 </template>
 
 <style scoped>
 .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 { display: grid; min-width: 220px; gap: var(--admin-space-2); color: var(--workbench-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: var(--admin-space-3); }
 .report-actions { margin-left: auto; }
 .query-actions :deep(.el-button), .report-actions :deep(.el-button) { margin-left: 0; }
 .outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
 .statistics-table { overflow: hidden; }
-.statistics-report-heading { 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-report-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--workbench-border); }
 .statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
-.statistics-report-heading span { color: var(--cc-muted); font-size: var(--admin-font-body); }
+.statistics-report-heading span { color: var(--workbench-muted); font-size: var(--admin-font-body); }
 @media print {
   .statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
-  .receivable-statistics-page { gap: 10px; color: #000; }
+  .receivable-statistics-page { gap: 10px; padding: 0; color: #000; }
+  .workbench-table > :deep(.data-table) { border-radius: var(--admin-radius); box-shadow: none; }
   .statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
 }
 </style>

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

@@ -277,7 +277,7 @@ describe('formal settlement native dialogs', () => {
     const wrapper = await mountPage(kind)
     await click(wrapper, action === 'VOID' ? '作废' : '重开', '.el-table__body-wrapper button')
     const current = kind === 'receivable' ? ar : ap
-    expect(prompt).toHaveBeenCalledWith('请输入操作原因', expect.stringContaining(current.settlementNo), expect.objectContaining({ customClass: 'admin-density-confirm', inputPattern: /\S+/ }))
+    expect(prompt).toHaveBeenCalledWith('请输入操作原因', expect.stringContaining(current.settlementNo), expect.objectContaining({ customClass: 'admin-density-confirm admin-workbench', inputPattern: /\S+/ }))
     expect(api.actionFinanceSettlement).toHaveBeenCalledWith(current.id, { action, reason: '测试原因', expectedVersion: current.version })
   })
 })

src/modules/iam/AGENTS.md

@@ -14,6 +14,7 @@
 | 角色与角色成员 | `pages/RolesView.vue`；`system/roles` | `api/platformIam.ts`；`iam/` |
 | 权限资源与菜单 | `pages/PermissionsView.vue`、`utils/permissionTree.ts`；`system/permissions` | `api/platformIam.ts`；`iam/` 菜单资源 |
 | 客户作用域选择器 | `components/PlatformTenantSelector.vue` | `iam/` 客户主档 |
+| 启用客户远程候选（智能装柜、订舱草稿） | `useActiveCustomerOptions.ts`，经 `index.ts` 公开；按关键词查询、触底翻页，保留当前选中项 | `api/platformIam.ts` 的 `listPlatformTenants`，使用既有 `keyword/page/size/status` |
 | 权限判定与展示 | `utils/platformPermission.ts`、`../core/access/` | 服务端权限快照；前端不替代鉴权 |
 | 模块密度样式 | `iamDensity.css` | 按公共密度规范接入 |
 

src/modules/iam/index.ts

@@ -1,2 +1,3 @@
 export * from './api/platformIam'
+export { useActiveCustomerOptions } from './useActiveCustomerOptions'
 export { default as PlatformTenantSelector } from './components/PlatformTenantSelector.vue'