From 4eb17ece4ff531194362e05a9693b312a4a4f99d Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Fri, 18 Sep 2026 18:50:49 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Jenkinsfile | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/Jenkinsfile b/Jenkinsfile
index 8cc4b3f..88d2dda 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -1,12 +1,15 @@
-def sendProductionWeComNotification(String status, String color, String detail) {
+def sendProductionWeComNotification(String title, String status, String color, String detail) {
   withCredentials([string(credentialsId: 'wecom-prod-webhook', variable: 'WECOM_WEBHOOK')]) {
-    String sourceVersion = env.SOURCE_TAG ?: env.GIT_COMMIT ?: '—'
-    String content = """## 生产部署通知
-> 项目：${env.JOB_NAME}
+    String sourceVersion = env.SOURCE_TAG ?: env.GIT_COMMIT ?: '未解析'
+    String duration = currentBuild.durationString?.replace(' and counting', '') ?: '—'
+    String content = """## ${title}
+> 应用：客户工作台
+> Job：${env.JOB_NAME}
 > 构建：[#${env.BUILD_NUMBER}](${env.BUILD_URL})
 > 提交：${sourceVersion}
 > 状态：<font color="${color}">${status}</font>
-> 详情：${detail}
+${detail}
+> 耗时：${duration}
 > 时间：${new Date().format('yyyy-MM-dd HH:mm:ss', TimeZone.getTimeZone('Asia/Shanghai'))}
 """
     String payloadFile = 'wecom-production-notification.json'
@@ -123,13 +126,6 @@ pipeline {
       }
     }
 
-    stage('确认部署生产前端') {
-      when { expression { env.IS_PRODUCTION == 'true' } }
-      steps {
-        input message: "确认将 main 提交 ${env.SOURCE_TAG} 部署到 app.buggoglobal.com？", ok: '确认部署'
-      }
-    }
-
     stage('部署生产前端') {
       when { expression { env.IS_PRODUCTION == 'true' } }
       steps {
@@ -199,7 +195,12 @@ pipeline {
       script {
         if (env.JOB_BASE_NAME?.endsWith('-prod')) {
           try {
-            sendProductionWeComNotification('部署成功', 'info', 'Client 生产前端已完成发布和部署检查')
+            sendProductionWeComNotification(
+              '✅ 生产部署成功',
+              '成功',
+              'info',
+              '> 结果：Client 生产前端已完成发布和部署流程'
+            )
           } catch (Exception error) {
             echo "企业微信通知失败，不影响原构建结果：${error.message}"
           }
@@ -219,7 +220,12 @@ pipeline {
       script {
         if (env.JOB_BASE_NAME?.endsWith('-prod')) {
           try {
-            sendProductionWeComNotification('部署失败', 'warning', '请打开 Jenkins 构建日志查看失败阶段')
+            sendProductionWeComNotification(
+              '❌ 生产发布失败',
+              '失败',
+              'warning',
+              '> 说明：请打开 Jenkins 构建日志查看失败阶段'
+            )
           } catch (Exception error) {
             echo "企业微信通知失败，不影响原构建结果：${error.message}"
           }
@@ -230,7 +236,12 @@ pipeline {
       script {
         if (env.JOB_BASE_NAME?.endsWith('-prod')) {
           try {
-            sendProductionWeComNotification('部署已取消', 'comment', '生产部署流程被人工取消或中止')
+            sendProductionWeComNotification(
+              '⏹ 生产部署已取消',
+              '已取消',
+              'comment',
+              '> 说明：生产部署流程被人工取消或中止'
+            )
           } catch (Exception error) {
             echo "企业微信通知失败，不影响原构建结果：${error.message}"
           }

From 514abf6eda282a138fc44ec7258ed53d82edcdf8 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Sat, 19 Sep 2026 17:02:11 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ClientSidebarMenu.vue          |   2 -
 src/components/common/DataTable.test.mjs      |  11 ++
 src/components/common/DataTable.vue           |   5 +-
 src/core/staticAssetRecovery.test.mjs         |  24 +++
 src/core/staticAssetRecovery.ts               |  91 +++++++++++
 src/layouts/AppLayout.test.mjs                |   3 +-
 src/main.ts                                   |   3 +
 .../components/BusinessOrdersView.vue         |   1 -
 src/modules/finance/api/account.ts            |  12 +-
 .../finance/views/FinanceAccountView.test.mjs |  25 +--
 .../finance/views/FinanceAccountView.vue      | 147 ++++++++---------
 .../finance/views/FinanceBillsView.test.mjs   |  19 ++-
 .../finance/views/FinanceBillsView.vue        | 106 +++++++------
 .../InboundCodeAssociationDialog.vue          |   1 -
 src/modules/first-leg/routes.ts               |   6 +-
 .../views/FirstLegOrderCreateHubView.vue      |  41 +++++
 .../views/FirstLegOrdersView.test.mjs         |   8 +-
 .../first-leg/views/FirstLegOrdersView.vue    |   7 +-
 .../first-leg/views/QuickOrderView.test.mjs   |  11 +-
 .../first-leg/views/QuickOrderView.vue        |   2 +-
 .../notifications/notifications.test.mjs      |  17 +-
 .../notifications/views/NotificationsView.vue | 148 ++++++++++++++----
 .../order-management/deliveryOrders.test.mjs  |   4 +-
 src/modules/order-management/routes.ts        |   4 +-
 .../views/DeliveryOrdersView.vue              |   3 +-
 .../views/InboundOrdersView.vue               |   1 -
 .../overseas-warehouse/permissions.test.mjs   |   8 +
 src/modules/overseas-warehouse/routes.ts      |   4 +-
 .../views/ReturnInventoryView.vue             |   1 -
 .../views/ReturnOrdersView.vue                |   1 -
 .../views/WarehouseServiceView.vue            |   1 -
 src/navigation/clientNavigation.test.mjs      |  26 +--
 src/navigation/clientNavigation.ts            |   5 -
 33 files changed, 525 insertions(+), 223 deletions(-)
 create mode 100644 src/components/common/DataTable.test.mjs
 create mode 100644 src/core/staticAssetRecovery.test.mjs
 create mode 100644 src/core/staticAssetRecovery.ts
 create mode 100644 src/modules/first-leg/views/FirstLegOrderCreateHubView.vue

diff --git a/src/components/ClientSidebarMenu.vue b/src/components/ClientSidebarMenu.vue
index 9fb3e6e..4c66e7f 100644
--- a/src/components/ClientSidebarMenu.vue
+++ b/src/components/ClientSidebarMenu.vue
@@ -22,8 +22,6 @@ const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleN
 const openedKeys = ref<ReadonlySet<string>>(new Set(activeParentKeys.value))
 
 function handleToggle(key: string) {
-  if (activeParentKeys.value.has(key)) return
-
   const next = new Set(openedKeys.value)
   if (next.has(key)) next.delete(key)
   else next.add(key)
diff --git a/src/components/common/DataTable.test.mjs b/src/components/common/DataTable.test.mjs
new file mode 100644
index 0000000..4466aa9
--- /dev/null
+++ b/src/components/common/DataTable.test.mjs
@@ -0,0 +1,11 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+
+const source = readFileSync(new URL('./DataTable.vue', import.meta.url), 'utf8')
+
+test('keeps action-only table toolbars on the left', () => {
+  assert.match(source, /'data-table__toolbar--actions-only': !\$slots\.toolbar/)
+  assert.match(source, /v-if="\$slots\.toolbar" class="data-table__toolbar-heading"/)
+  assert.match(source, /\.data-table__toolbar--actions-only \{ justify-content: flex-start; \}/)
+})
diff --git a/src/components/common/DataTable.vue b/src/components/common/DataTable.vue
index 815b751..3ef382c 100644
--- a/src/components/common/DataTable.vue
+++ b/src/components/common/DataTable.vue
@@ -143,8 +143,8 @@ function setPage(value: number) {
 
 <template>
   <div class="data-table" :class="$attrs.class">
-    <header v-if="$slots.toolbar || $slots['toolbar-actions']" class="data-table__toolbar">
-      <div class="data-table__toolbar-heading"><slot name="toolbar" /></div>
+    <header v-if="$slots.toolbar || $slots['toolbar-actions']" class="data-table__toolbar" :class="{ 'data-table__toolbar--actions-only': !$slots.toolbar }">
+      <div v-if="$slots.toolbar" class="data-table__toolbar-heading"><slot name="toolbar" /></div>
       <div class="data-table__toolbar-actions"><slot name="toolbar-actions" /></div>
     </header>
     <slot name="before-table" />
@@ -227,6 +227,7 @@ function setPage(value: number) {
 <style scoped>
 .data-table { min-width: 0; }
 .data-table__toolbar { display: flex; min-height: 48px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--client-gap); padding: var(--client-toolbar-padding); border-bottom: 1px solid var(--client-border); }
+.data-table__toolbar--actions-only { justify-content: flex-start; }
 .data-table__toolbar-heading, .data-table__toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--client-gap); }
 .data-table__toolbar-heading { color: var(--client-muted); font-size: 12px; }
 .data-table__toolbar-heading :slotted(strong) { color: var(--client-text); font-size: 14px; }
diff --git a/src/core/staticAssetRecovery.test.mjs b/src/core/staticAssetRecovery.test.mjs
new file mode 100644
index 0000000..924523f
--- /dev/null
+++ b/src/core/staticAssetRecovery.test.mjs
@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+
+const recoverySource = readFileSync(new URL('./staticAssetRecovery.ts', import.meta.url), 'utf8')
+const mainSource = readFileSync(new URL('../main.ts', import.meta.url), 'utf8')
+
+test('refreshes once when a deployment invalidates lazy chunks or same-origin scripts and styles', () => {
+  assert.match(mainSource, /installStaticAssetRecovery\(router\)/)
+  assert.match(recoverySource, /vite:preloadError/)
+  assert.match(recoverySource, /router\.onError/)
+  assert.match(recoverySource, /HTMLScriptElement/)
+  assert.match(recoverySource, /HTMLLinkElement/)
+  assert.match(recoverySource, /window\.location\.reload\(\)/)
+  assert.match(recoverySource, /RECOVERY_COOLDOWN_MS/)
+  assert.match(recoverySource, /previous\?\.href === window\.location\.href/)
+})
+
+test('does not turn ordinary application errors or third-party asset failures into refresh loops', () => {
+  assert.match(recoverySource, /isStaticAssetLoadError\(error\)/)
+  assert.match(recoverySource, /origin !== window\.location\.origin/)
+  assert.match(recoverySource, /sessionStorage/)
+  assert.match(recoverySource, /setTimeout\(clearRecoveryRecord, RECOVERY_STABLE_MS\)/)
+})
diff --git a/src/core/staticAssetRecovery.ts b/src/core/staticAssetRecovery.ts
new file mode 100644
index 0000000..abca250
--- /dev/null
+++ b/src/core/staticAssetRecovery.ts
@@ -0,0 +1,91 @@
+import type { Router } from 'vue-router'
+
+const RECOVERY_KEY = 'client-static-asset-recovery'
+const RECOVERY_COOLDOWN_MS = 60_000
+const RECOVERY_STABLE_MS = 15_000
+
+interface RecoveryRecord {
+  href: string
+  refreshedAt: number
+}
+
+function errorMessage(error: unknown) {
+  if (error instanceof Error) return `${error.name}: ${error.message}`
+  return typeof error === 'string' ? error : ''
+}
+
+export function isStaticAssetLoadError(error: unknown) {
+  return /ChunkLoadError|Loading chunk [\w-]+ failed|Failed to fetch dynamically imported module|Importing a module script failed|error loading dynamically imported module|Unable to preload CSS/i.test(errorMessage(error))
+}
+
+function readRecoveryRecord(): RecoveryRecord | null {
+  try {
+    const raw = window.sessionStorage.getItem(RECOVERY_KEY)
+    if (!raw) return null
+    const value = JSON.parse(raw) as Partial<RecoveryRecord>
+    return typeof value.href === 'string' && typeof value.refreshedAt === 'number'
+      ? { href: value.href, refreshedAt: value.refreshedAt }
+      : null
+  } catch {
+    return null
+  }
+}
+
+function writeRecoveryRecord(record: RecoveryRecord) {
+  try {
+    window.sessionStorage.setItem(RECOVERY_KEY, JSON.stringify(record))
+    return true
+  } catch {
+    // Without a persistent guard, reloading could loop while the deployment is still unavailable.
+    return false
+  }
+}
+
+function clearRecoveryRecord() {
+  try {
+    window.sessionStorage.removeItem(RECOVERY_KEY)
+  } catch {
+    // Storage availability must not affect application startup.
+  }
+}
+
+function recoverFromStaticAssetFailure(error: unknown, confirmedAssetFailure = false) {
+  if (!confirmedAssetFailure && !isStaticAssetLoadError(error)) return false
+  const now = Date.now()
+  const previous = readRecoveryRecord()
+  if (previous?.href === window.location.href && now - previous.refreshedAt < RECOVERY_COOLDOWN_MS) return false
+  if (!writeRecoveryRecord({ href: window.location.href, refreshedAt: now })) return false
+  window.location.reload()
+  return true
+}
+
+function failedApplicationAsset(event: Event) {
+  const target = event.target
+  if (target instanceof HTMLScriptElement) return target.src
+  if (target instanceof HTMLLinkElement && ['stylesheet', 'modulepreload', 'preload'].includes(target.rel)) return target.href
+  return ''
+}
+
+export function installStaticAssetRecovery(router: Router) {
+  window.addEventListener('vite:preloadError', (event) => {
+    const preloadEvent = event as Event & { payload?: unknown }
+    if (recoverFromStaticAssetFailure(preloadEvent.payload, true)) preloadEvent.preventDefault()
+  })
+
+  window.addEventListener('error', (event) => {
+    const assetUrl = failedApplicationAsset(event)
+    if (!assetUrl) return
+    try {
+      if (new URL(assetUrl, window.location.href).origin !== window.location.origin) return
+    } catch {
+      return
+    }
+    recoverFromStaticAssetFailure(assetUrl, true)
+  }, true)
+
+  router.onError((error) => {
+    recoverFromStaticAssetFailure(error)
+  })
+
+  window.setTimeout(clearRecoveryRecord, RECOVERY_STABLE_MS)
+}
diff --git a/src/layouts/AppLayout.test.mjs b/src/layouts/AppLayout.test.mjs
index 3172201..35e8d25 100644
--- a/src/layouts/AppLayout.test.mjs
+++ b/src/layouts/AppLayout.test.mjs
@@ -119,7 +119,8 @@ test('source contract: uses a native recursive disclosure list without Element m
   assert.match(sidebarMenuSource, /const activeParentKeys = computed\(\(\) => new Set\(getNavigationParentKeys\(visibleNavigation\.value, props\.activePath\)\)\)/)
   assert.match(sidebarMenuSource, /const openedKeys = ref<ReadonlySet<string>>\(new Set\(activeParentKeys\.value\)\)/)
   assert.match(sidebarMenuSource, /openedKeys\.value = new Set\(\[\.\.\.openedKeys\.value, \.\.\.activeParentKeys\.value\]\)/)
-  assert.match(sidebarMenuSource, /if \(activeParentKeys\.value\.has\(key\)\) return/)
+  assert.doesNotMatch(sidebarMenuSource, /if \(activeParentKeys\.value\.has\(key\)\) return/)
+  assert.match(sidebarMenuSource, /if \(next\.has\(key\)\) next\.delete\(key\)/)
   assert.match(sidebarMenuSource, /<ul class="client-nav-menu">/)
   assert.match(sidebarMenuSource, /:active-path="activePath"/)
   assert.match(sidebarMenuSource, /:opened-keys="openedKeys"/)
diff --git a/src/main.ts b/src/main.ts
index 5837f4c..fb0e3ef 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,9 +6,12 @@ import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import App from './App.vue'
 import router from './router'
+import { installStaticAssetRecovery } from './core/staticAssetRecovery'
 import 'element-plus/es/components/message/style/css'
 import 'element-plus/es/components/message-box/style/css'
 import './styles/index.css'
 
+installStaticAssetRecovery(router)
+
 const app = createApp({ render: () => h(ElConfigProvider, { locale: zhCn }, { default: () => h(App) }) })
 app.use(createPinia()).use(router).mount('#app')
diff --git a/src/modules/cross-border/components/BusinessOrdersView.vue b/src/modules/cross-border/components/BusinessOrdersView.vue
index 1bdc1bf..e2404e0 100644
--- a/src/modules/cross-border/components/BusinessOrdersView.vue
+++ b/src/modules/cross-border/components/BusinessOrdersView.vue
@@ -393,7 +393,6 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
       <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="订单查询条件" :fields="queryFields" :search-on-reset="false" @search="searchOrders" @reset="resetQuery" />
       <div class="business-table-card">
         <DataTable v-model:page="query.page" v-model:page-size="query.size" :data="rows" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[10, 20, 50, 100]" :row-actions="getRowActions" row-key="orderNo" empty-text="暂无订单">
-          <template #toolbar><strong>订单列表</strong><span>共 {{ total }} 条</span></template>
           <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="resetForm(); mode = 'create'">新增下单</el-button></template>
           <template v-if="error" #error><div class="business-load-error" role="alert"><span>{{ error }}</span><el-button size="small" @click="load">重新加载</el-button></div></template>
           <template #orderNo="{ row }"><button class="business-order-link" type="button" @click="openDetail(row)">{{ (row as BusinessRow).orderNo }}</button></template>
diff --git a/src/modules/finance/api/account.ts b/src/modules/finance/api/account.ts
index 5d51a2d..ecff4df 100644
--- a/src/modules/finance/api/account.ts
+++ b/src/modules/finance/api/account.ts
@@ -61,14 +61,12 @@ export interface AccountLedgerEntry {
   createdAt: string
 }
 
-export type RechargePaymentMethod = 'WECHAT' | 'ALIPAY'
 export type RechargeStatus = 'PENDING' | 'APPROVED' | 'REJECTED'
 
 export interface RechargeRequest {
   requestId: string
   requestNo: string
   amount: string
-  paymentMethod: RechargePaymentMethod
   voucherFileId: string
   voucherFileName: string
   status: RechargeStatus
@@ -81,8 +79,6 @@ export interface RechargeRequest {
 }
 
 export interface RechargeChannel {
-  paymentMethod: RechargePaymentMethod
-  displayName: string
   enabled: boolean
   qrCodeUrl: string | null
 }
@@ -109,15 +105,13 @@ export async function getRechargeRequests(page: number, size: number) {
   return normalizePageResult(result)
 }
 
-export function getRechargeChannels() {
-  return apiRequest<RechargeChannel[]>({ method: 'GET', url: '/client/finance/v1/recharge-channels' })
+export function getRechargeChannel() {
+  return apiRequest<RechargeChannel>({ method: 'GET', url: '/client/finance/v1/recharge-channel' })
 }
 
-export function createRechargeRequest(amount: string, paymentMethod: RechargePaymentMethod, file: File,
-                                      idempotencyKey: string) {
+export function createRechargeRequest(amount: string, file: File, idempotencyKey: string) {
   const formData = new FormData()
   formData.append('amount', amount)
-  formData.append('paymentMethod', paymentMethod)
   formData.append('file', file, file.name)
   return apiRequest<RechargeRequest>({
     method: 'POST',
diff --git a/src/modules/finance/views/FinanceAccountView.test.mjs b/src/modules/finance/views/FinanceAccountView.test.mjs
index db18376..a165140 100644
--- a/src/modules/finance/views/FinanceAccountView.test.mjs
+++ b/src/modules/finance/views/FinanceAccountView.test.mjs
@@ -8,13 +8,13 @@ const routesSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf
 const permissionsSource = readFileSync(new URL('../../tenant-management/contracts.ts', import.meta.url), 'utf8')
 
 test('uses only authenticated client finance account endpoints without customer scope', () => {
-  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests', '/client/finance/v1/recharge-channels']) {
+  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests', '/client/finance/v1/recharge-channel']) {
     assert.match(apiSource, new RegExp(path.replaceAll('/', '\\/')))
   }
   assert.match(apiSource, /headers: \{ 'Idempotency-Key': idempotencyKey \}/)
   assert.match(apiSource, /formData\.append\('amount', amount\)/)
-  assert.match(apiSource, /formData\.append\('paymentMethod', paymentMethod\)/)
   assert.match(apiSource, /formData\.append\('file', file, file\.name\)/)
+  assert.doesNotMatch(apiSource, /RechargePaymentMethod|paymentMethod|WECHAT|ALIPAY/)
   assert.doesNotMatch(apiSource, /customerId|tenantId|mock|fallback/i)
 })
 
@@ -23,12 +23,14 @@ test('activates the account route and maps read and recharge permissions indepen
   assert.match(permissionsSource, /'merchant:finance:account:view': \['merchant:finance:account:view'\]/)
   assert.match(permissionsSource, /'merchant:finance:recharge:create': \['merchant:finance:recharge:create'\]/)
   assert.match(viewSource, /auth\.hasPermission\('merchant:finance:recharge:create'\)/)
-  assert.match(viewSource, /<el-button v-if="canRecharge"/)
+  assert.match(viewSource, /class="balance-title"[\s\S]*?<el-button v-if="canRecharge" size="small" type="primary"/)
+  assert.match(viewSource, /\.balance-summary \{[^}]*grid-template-columns: repeat\(6,/)
+  assert.doesNotMatch(viewSource, /class="account-actions"|class="balance-grid"/)
+  assert.doesNotMatch(viewSource, /class="account-heading"/)
 })
 
 test('renders server balances, ledger and recharge states without internal identifiers', () => {
   for (const field of ['actualBalance', 'frozenBalance', 'availableBalance', 'creditLimit', 'creditUsed', 'availableCredit']) assert.match(viewSource, new RegExp(`account\\?\\.${field}`))
-  for (const field of ['creditUsedAfter', 'availableCreditAfter']) assert.match(viewSource, new RegExp(`row\\.${field}`))
   assert.match(viewSource, /实际可用资金与可用授信合计/)
   assert.match(viewSource, /CREDIT_LIMIT: '授信调整'/)
   assert.match(viewSource, /row-key="businessNo"/)
@@ -39,9 +41,12 @@ test('renders server balances, ledger and recharge states without internal ident
   assert.match(viewSource, /v-loading="pageLoading"/)
   assert.match(viewSource, /function formatAccountAmount[\s\S]*value == null \? '—' : formatAmount\(value\)/)
   assert.match(viewSource, /formatAccountAmount\(account\?\.actualBalance\)/)
-  assert.match(viewSource, /:default-current-page="ledgerPage"/)
-  assert.match(viewSource, /:default-current-page="rechargePage"/)
-  assert.doesNotMatch(viewSource, /<el-pagination (?:v-model:current-page|:current-page)=/)
+  assert.match(viewSource, /<DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize"/)
+  assert.match(viewSource, /<DataTable v-model:page="rechargePage" v-model:page-size="rechargePageSize"/)
+  assert.match(viewSource, /const ledgerColumns: DataTableColumn\[]/)
+  assert.match(viewSource, /const rechargeColumns: DataTableColumn\[]/)
+  assert.doesNotMatch(viewSource, /label: '已用授信'|label: '可用授信'/)
+  assert.doesNotMatch(viewSource, /<el-table|<el-pagination/)
   assert.match(apiSource, /function normalizePageResult<[\s\S]*total: Number\(result\.total\)/)
   assert.match(apiSource, /page: Number\(result\.page\)/)
   assert.doesNotMatch(viewSource, /requestId|ledgerId|customerId|tenantId/)
@@ -50,12 +55,14 @@ test('renders server balances, ledger and recharge states without internal ident
 test('matches the frozen recharge workflow and preserves an idempotency key for failed retries', () => {
   assert.match(viewSource, /title="账户充值" width="760px"/)
   for (const amount of ['50.00', '100.00', '200.00', '500.00']) assert.match(viewSource, new RegExp(amount.replace('.', '\\.')))
-  assert.match(viewSource, /\['WECHAT', 'ALIPAY'\]/)
-  assert.match(viewSource, /selectedChannel\.value\?\.enabled && selectedChannel\.value\.qrCodeUrl/)
+  assert.match(viewSource, /rechargeChannel\.value\?\.enabled && rechargeChannel\.value\.qrCodeUrl/)
+  assert.match(viewSource, /alt="平台收款二维码"/)
+  assert.match(viewSource, /请扫描平台收款二维码，付款后上传截图。/)
   assert.match(viewSource, /accept="\.jpg,\.jpeg,\.png,image\/jpeg,image\/png"/)
   assert.match(viewSource, /if \(!pendingIdempotencyKey\)[\s\S]*globalThis\.crypto\?\.randomUUID\?\.\(\)/)
   assert.match(viewSource, /pendingIdempotencyKey = ''[\s\S]*rechargeVisible\.value = false/)
   assert.match(viewSource, /:disabled="!canSubmit"/)
   assert.match(viewSource, /await loadAccountData\(\)/)
   assert.doesNotMatch(viewSource, /payment SDK|支付成功|模拟成功/)
+  assert.doesNotMatch(viewSource, /微信支付|支付宝|payment-methods|paymentMethod/)
 })
diff --git a/src/modules/finance/views/FinanceAccountView.vue b/src/modules/finance/views/FinanceAccountView.vue
index d1da129..0d2640f 100644
--- a/src/modules/finance/views/FinanceAccountView.vue
+++ b/src/modules/finance/views/FinanceAccountView.vue
@@ -3,18 +3,18 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { CircleDollarSign, RefreshCcw, Upload } from '@lucide/vue'
 import { ElMessage, type UploadFile, type UploadFiles, type UploadInstance } from 'element-plus'
 import { ApiError } from '@/api/http'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
 import { useAuthStore } from '@/modules/auth/public'
 import {
   createRechargeRequest,
   getAccountLedger,
   getFinanceAccount,
-  getRechargeChannels,
+  getRechargeChannel,
   getRechargeRequests,
   type AccountChangeType,
   type AccountLedgerEntry,
   type FinanceAccount,
   type RechargeChannel,
-  type RechargePaymentMethod,
   type RechargeRequest,
   type RechargeStatus,
 } from '../api/account'
@@ -23,15 +23,16 @@ const auth = useAuthStore()
 const account = ref<FinanceAccount | null>(null)
 const ledger = ref<AccountLedgerEntry[]>([])
 const rechargeRequests = ref<RechargeRequest[]>([])
-const channels = ref<RechargeChannel[]>([])
+const rechargeChannel = ref<RechargeChannel | null>(null)
 const pageLoading = ref(false)
 const pageError = ref('')
 const channelsError = ref('')
 const ledgerPage = ref(1)
 const ledgerTotal = ref(0)
+const ledgerPageSize = ref(10)
 const rechargePage = ref(1)
 const rechargeTotal = ref(0)
-const pageSize = 10
+const rechargePageSize = ref(10)
 const rechargeVisible = ref(false)
 const submitting = ref(false)
 const submitError = ref('')
@@ -39,11 +40,10 @@ const voucherFile = ref<File | null>(null)
 const voucherUpload = ref<UploadInstance>()
 let pendingIdempotencyKey = ''
 
-const form = reactive({ amount: '100.00', paymentMethod: 'WECHAT' as RechargePaymentMethod })
+const form = reactive({ amount: '100.00' })
 const quickAmounts = ['50.00', '100.00', '200.00', '500.00']
 const canRecharge = computed(() => auth.hasPermission('merchant:finance:recharge:create'))
-const selectedChannel = computed(() => channels.value.find((item) => item.paymentMethod === form.paymentMethod))
-const channelReady = computed(() => Boolean(selectedChannel.value?.enabled && selectedChannel.value.qrCodeUrl))
+const channelReady = computed(() => Boolean(rechargeChannel.value?.enabled && rechargeChannel.value.qrCodeUrl))
 const amountValid = computed(() => {
   const value = Number(form.amount)
   return Number.isFinite(value) && value > 0 && /^\d+(?:\.\d{1,2})?$/.test(form.amount.trim())
@@ -54,7 +54,27 @@ const changeLabels: Record<AccountChangeType, string> = {
   RECHARGE: '充值', DEDUCTION: '扣款', FREEZE: '冻结', UNFREEZE: '解冻', CONSUMPTION: '消费', CREDIT_LIMIT: '授信调整',
 }
 const statusLabels: Record<RechargeStatus, string> = { PENDING: '待审核', APPROVED: '已通过', REJECTED: '已驳回' }
-const methodLabels: Record<RechargePaymentMethod, string> = { WECHAT: '微信支付', ALIPAY: '支付宝' }
+const ledgerColumns: DataTableColumn[] = [
+  { label: '业务单号', prop: 'businessNo', minWidth: 180 },
+  { label: '变动类型', slotName: 'changeType', width: 100 },
+  { label: '变动金额', slotName: 'amount', width: 120, align: 'right' },
+  { label: '实际余额', slotName: 'actualBalance', width: 120, align: 'right' },
+  { label: '冻结金额', slotName: 'frozenBalance', width: 120, align: 'right' },
+  { label: '可用余额', slotName: 'availableBalance', width: 120, align: 'right' },
+  { label: '操作人', slotName: 'operatorName', width: 120 },
+  { label: '备注', slotName: 'remark', minWidth: 180 },
+  { label: '发生时间', slotName: 'createdAt', width: 160 },
+]
+const rechargeColumns: DataTableColumn[] = [
+  { label: '充值申请单号', prop: 'requestNo', minWidth: 180 },
+  { label: '金额', slotName: 'amount', width: 120, align: 'right' },
+  { label: '付款截图', prop: 'voucherFileName', minWidth: 150 },
+  { label: '状态', slotName: 'status', width: 100 },
+  { label: '提交人', slotName: 'submittedByName', width: 120 },
+  { label: '审核备注', slotName: 'reviewRemark', minWidth: 180 },
+  { label: '提交时间', slotName: 'createdAt', width: 160 },
+  { label: '审核时间', slotName: 'reviewedAt', width: 160 },
+]
 
 function messageOf(error: unknown, fallback: string) {
   return error instanceof ApiError ? error.message : fallback
@@ -87,7 +107,7 @@ async function loadAccountData() {
   pageLoading.value = true
   pageError.value = ''
   channelsError.value = ''
-  const requests = [getFinanceAccount(), getAccountLedger(ledgerPage.value, pageSize), getRechargeRequests(rechargePage.value, pageSize)] as const
+  const requests = [getFinanceAccount(), getAccountLedger(ledgerPage.value, ledgerPageSize.value), getRechargeRequests(rechargePage.value, rechargePageSize.value)] as const
   try {
     const [accountResult, ledgerResult, rechargeResult] = await Promise.all(requests)
     account.value = accountResult
@@ -107,18 +127,17 @@ async function loadAccountData() {
   }
   if (canRecharge.value) {
     try {
-      channels.value = await getRechargeChannels()
+      rechargeChannel.value = await getRechargeChannel()
     } catch (error) {
-      channels.value = []
-      channelsError.value = messageOf(error, '充值渠道加载失败，请稍后重试')
+      rechargeChannel.value = null
+      channelsError.value = messageOf(error, '收款二维码加载失败，请稍后重试')
     }
   }
 }
 
 async function changeLedgerPage(nextPage: number) {
-  ledgerPage.value = nextPage
   try {
-    const result = await getAccountLedger(nextPage, pageSize)
+    const result = await getAccountLedger(nextPage, ledgerPageSize.value)
     ledger.value = result.records
     ledgerTotal.value = result.total
   } catch (error) {
@@ -127,9 +146,8 @@ async function changeLedgerPage(nextPage: number) {
 }
 
 async function changeRechargePage(nextPage: number) {
-  rechargePage.value = nextPage
   try {
-    const result = await getRechargeRequests(nextPage, pageSize)
+    const result = await getRechargeRequests(nextPage, rechargePageSize.value)
     rechargeRequests.value = result.records
     rechargeTotal.value = result.total
   } catch (error) {
@@ -175,7 +193,7 @@ async function submitRecharge() {
     return
   }
   if (!channelReady.value) {
-    submitError.value = `${methodLabels[form.paymentMethod]}收款二维码尚未配置，暂不能提交充值申请`
+    submitError.value = '收款二维码尚未配置，暂不能提交充值申请'
     return
   }
   if (!voucherFile.value) {
@@ -187,7 +205,7 @@ async function submitRecharge() {
   }
   submitting.value = true
   try {
-    await createRechargeRequest(normalizedAmount(), form.paymentMethod, voucherFile.value, pendingIdempotencyKey)
+    await createRechargeRequest(normalizedAmount(), voucherFile.value, pendingIdempotencyKey)
     pendingIdempotencyKey = ''
     rechargeVisible.value = false
     voucherFile.value = null
@@ -201,28 +219,26 @@ async function submitRecharge() {
   }
 }
 
-watch([() => form.amount, () => form.paymentMethod, voucherFile], () => {
+watch([() => form.amount, voucherFile], () => {
   if (!submitting.value) pendingIdempotencyKey = ''
   submitError.value = ''
 })
 
+watch([ledgerPage, ledgerPageSize], () => { void changeLedgerPage(ledgerPage.value) })
+watch([rechargePage, rechargePageSize], () => { void changeRechargePage(rechargePage.value) })
+
 onMounted(() => { void loadAccountData() })
 </script>
 
 <template>
   <div v-loading="pageLoading" class="finance-account-page" :aria-busy="pageLoading">
-    <div class="account-heading">
-      <div><h2>资金账户</h2><p>查看本企业 CNY 资金、授信额度、账户流水和充值申请状态。</p></div>
-      <el-button v-if="canRecharge" type="primary" @click="openRecharge"><CircleDollarSign :size="17" />账户充值</el-button>
-    </div>
-
     <div v-if="pageError" class="account-state account-state--error" role="alert">
       <p>{{ pageError }}</p><el-button @click="loadAccountData"><RefreshCcw :size="15" />重新加载</el-button>
     </div>
 
     <template v-else>
-      <section class="balance-grid" aria-label="账户余额">
-        <article><span>实际余额</span><strong>¥ {{ formatAccountAmount(account?.actualBalance) }}</strong><small>当前账户实际资金</small></article>
+      <section class="balance-summary" aria-label="账户余额">
+        <article><div class="balance-title"><span>实际余额</span><el-button v-if="canRecharge" size="small" type="primary" @click="openRecharge"><CircleDollarSign :size="15" />账户充值</el-button></div><strong>¥ {{ formatAccountAmount(account?.actualBalance) }}</strong><small>当前账户实际资金</small></article>
         <article><span>冻结金额</span><strong>¥ {{ formatAccountAmount(account?.frozenBalance) }}</strong><small>暂不可使用的资金</small></article>
         <article class="balance-available"><span>总可用余额</span><strong>¥ {{ formatAccountAmount(account?.availableBalance) }}</strong><small>实际可用资金与可用授信合计</small></article>
         <article><span>授信额度</span><strong>¥ {{ formatAccountAmount(account?.creditLimit) }}</strong><small>{{ account?.creditExpiresOn ? `${account.creditExpiresOn} ${account.creditActive ? '到期' : '已到期'}` : '未设置有效期' }}</small></article>
@@ -232,36 +248,28 @@ onMounted(() => { void loadAccountData() })
 
       <section class="account-card">
         <div class="section-heading"><div><h3>账户流水</h3><p>每次资金变动均生成唯一业务单号。</p></div></div>
-        <el-table :data="ledger" row-key="businessNo" empty-text="暂无资金流水">
-          <el-table-column prop="businessNo" label="业务单号" min-width="190" />
-          <el-table-column label="变动类型" width="110"><template #default="{ row }">{{ changeLabels[row.changeType as AccountChangeType] }}</template></el-table-column>
-          <el-table-column label="变动金额" width="145" align="right"><template #default="{ row }"><strong :class="amountClass(row.amount)">{{ Number(row.amount) >= 0 ? '+' : '' }}¥ {{ formatAmount(row.amount) }}</strong></template></el-table-column>
-          <el-table-column label="实际余额" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.actualBalanceAfter) }}</template></el-table-column>
-          <el-table-column label="冻结金额" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.frozenBalanceAfter) }}</template></el-table-column>
-          <el-table-column label="可用余额" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.availableBalanceAfter) }}</template></el-table-column>
-          <el-table-column label="已用授信" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.creditUsedAfter) }}</template></el-table-column>
-          <el-table-column label="可用授信" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.availableCreditAfter) }}</template></el-table-column>
-          <el-table-column prop="operatorName" label="操作人" min-width="130"><template #default="{ row }">{{ row.operatorName || '—' }}</template></el-table-column>
-          <el-table-column prop="remark" label="备注" min-width="180"><template #default="{ row }">{{ row.remark || '—' }}</template></el-table-column>
-          <el-table-column label="发生时间" width="170"><template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template></el-table-column>
-        </el-table>
-        <div v-if="ledgerTotal" class="pagination-row"><span>共 {{ ledgerTotal }} 条</span><el-pagination :default-current-page="ledgerPage" :page-size="pageSize" layout="prev, pager, next" :total="ledgerTotal" @current-change="changeLedgerPage" /></div>
+        <DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" :data="ledger" :columns="ledgerColumns" :total="ledgerTotal" :page-sizes="[10, 20, 50]" row-key="businessNo" empty-text="暂无资金流水">
+          <template #changeType="{ row }">{{ changeLabels[row.changeType as AccountChangeType] }}</template>
+          <template #amount="{ row }"><strong :class="amountClass(row.amount)">{{ Number(row.amount) >= 0 ? '+' : '' }}¥ {{ formatAmount(row.amount) }}</strong></template>
+          <template #actualBalance="{ row }">¥ {{ formatAmount(row.actualBalanceAfter) }}</template>
+          <template #frozenBalance="{ row }">¥ {{ formatAmount(row.frozenBalanceAfter) }}</template>
+          <template #availableBalance="{ row }">¥ {{ formatAmount(row.availableBalanceAfter) }}</template>
+          <template #operatorName="{ row }">{{ row.operatorName || '—' }}</template>
+          <template #remark="{ row }">{{ row.remark || '—' }}</template>
+          <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+        </DataTable>
       </section>
 
       <section class="account-card">
         <div class="section-heading"><div><h3>充值申请</h3><p>付款后上传截图，平台审核通过后资金入账。</p></div></div>
-        <el-table :data="rechargeRequests" row-key="requestNo" empty-text="暂无充值申请">
-          <el-table-column prop="requestNo" label="充值申请单号" min-width="190" />
-          <el-table-column label="金额" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.amount) }}</template></el-table-column>
-          <el-table-column label="付款方式" width="120"><template #default="{ row }">{{ methodLabels[row.paymentMethod as RechargePaymentMethod] }}</template></el-table-column>
-          <el-table-column prop="voucherFileName" label="付款截图" min-width="170" />
-          <el-table-column label="状态" width="110"><template #default="{ row }"><el-tag :type="statusType(row.status as RechargeStatus)">{{ statusLabels[row.status as RechargeStatus] }}</el-tag></template></el-table-column>
-          <el-table-column prop="submittedByName" label="提交人" min-width="120"><template #default="{ row }">{{ row.submittedByName || '—' }}</template></el-table-column>
-          <el-table-column prop="reviewRemark" label="审核备注" min-width="180"><template #default="{ row }">{{ row.reviewRemark || '—' }}</template></el-table-column>
-          <el-table-column label="提交时间" width="170"><template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template></el-table-column>
-          <el-table-column label="审核时间" width="170"><template #default="{ row }">{{ formatDateTime(row.reviewedAt) }}</template></el-table-column>
-        </el-table>
-        <div v-if="rechargeTotal" class="pagination-row"><span>共 {{ rechargeTotal }} 条</span><el-pagination :default-current-page="rechargePage" :page-size="pageSize" layout="prev, pager, next" :total="rechargeTotal" @current-change="changeRechargePage" /></div>
+        <DataTable v-model:page="rechargePage" v-model:page-size="rechargePageSize" :data="rechargeRequests" :columns="rechargeColumns" :total="rechargeTotal" :page-sizes="[10, 20, 50]" row-key="requestNo" empty-text="暂无充值申请">
+          <template #amount="{ row }">¥ {{ formatAmount(row.amount) }}</template>
+          <template #status="{ row }"><el-tag :type="statusType(row.status as RechargeStatus)">{{ statusLabels[row.status as RechargeStatus] }}</el-tag></template>
+          <template #submittedByName="{ row }">{{ row.submittedByName || '—' }}</template>
+          <template #reviewRemark="{ row }">{{ row.reviewRemark || '—' }}</template>
+          <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+          <template #reviewedAt="{ row }">{{ formatDateTime(row.reviewedAt) }}</template>
+        </DataTable>
       </section>
     </template>
 
@@ -273,16 +281,12 @@ onMounted(() => { void loadAccountData() })
           <button v-for="amount in quickAmounts" :key="amount" type="button" :class="{ active: form.amount === amount }" @click="chooseAmount(amount)">¥{{ Number(amount) }}</button>
         </div>
 
-        <div class="payment-methods" aria-label="付款方式">
-          <button v-for="method in (['WECHAT', 'ALIPAY'] as RechargePaymentMethod[])" :key="method" type="button" :class="[`payment-${method.toLowerCase()}`, { active: form.paymentMethod === method }]" @click="form.paymentMethod = method"><span>{{ method === 'WECHAT' ? '微' : '支' }}</span>{{ methodLabels[method] }}</button>
-        </div>
-
         <div v-if="channelsError" class="channel-warning" role="alert">{{ channelsError }}</div>
         <div v-else-if="channelReady" class="qr-panel">
-          <img :src="selectedChannel?.qrCodeUrl || ''" :alt="`${methodLabels[form.paymentMethod]}收款二维码`">
-          <p>请使用{{ methodLabels[form.paymentMethod] }}扫码完成付款</p>
+          <img :src="rechargeChannel?.qrCodeUrl || ''" alt="平台收款二维码">
+          <div><strong>扫码付款</strong><p>请扫描平台收款二维码，付款后上传截图。</p></div>
         </div>
-        <div v-else class="channel-warning" role="status">{{ methodLabels[form.paymentMethod] }}收款二维码尚未配置，暂不能提交充值申请。</div>
+        <div v-else class="channel-warning" role="status">收款二维码尚未配置，暂不能提交充值申请。</div>
 
         <div class="voucher-upload">
           <span class="field-label">付款截图</span>
@@ -300,18 +304,21 @@ onMounted(() => { void loadAccountData() })
 
 <style scoped>
 .finance-account-page { display: flex; min-height: 420px; flex-direction: column; gap: 16px; }
-.account-heading, .section-heading, .pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.account-heading h2, .section-heading h3 { margin: 0; color: var(--navy); }.account-heading h2 { font-size: 22px; }.section-heading h3 { font-size: 16px; }
-.account-heading p, .section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }.account-heading .el-button { display: inline-flex; align-items: center; gap: 6px; }
-.balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
-.balance-grid article { display: flex; min-height: 132px; flex-direction: column; padding: 22px 24px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
-.balance-grid span { color: var(--muted); font-size: 13px; }.balance-grid strong { margin-top: 14px; color: var(--navy); font-size: 28px; line-height: 1; }.balance-grid small { margin-top: auto; color: #8a98a8; }.balance-grid .balance-available { border-color: #b9e1db; background: #f3faf8; }.balance-grid .balance-available strong { color: #058b78; }
-.account-card { min-width: 0; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }.section-heading { margin-bottom: 14px; }
-.pagination-row { padding-top: 14px; color: var(--muted); font-size: 12px; }.amount-positive { color: #078a72; }.amount-negative { color: #b42318; }
+.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.section-heading h3 { margin: 0; color: var(--navy); font-size: 16px; }
+.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
+.balance-summary { display: grid; overflow: hidden; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
+.balance-summary article { display: flex; min-width: 0; min-height: 104px; flex-direction: column; padding: 14px 16px; border-right: 1px solid var(--client-border); }
+.balance-summary article:last-child { border-right: 0; }
+.balance-summary span { color: var(--muted); font-size: 12px; }.balance-summary strong { margin-top: 10px; overflow: hidden; color: var(--navy); font-size: 22px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }.balance-summary small { margin-top: auto; overflow: hidden; color: #8a98a8; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.balance-title { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 8px; }.balance-title .el-button { flex: 0 0 auto; height: 28px; padding: 0 9px; }.balance-title .el-button :deep(span) { display: inline-flex; align-items: center; gap: 4px; color: inherit; }
+.balance-summary .balance-available { background: #f3faf8; }.balance-summary .balance-available strong { color: #058b78; }
+.account-card { min-width: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }.section-heading { padding: 14px 16px; border-bottom: 1px solid var(--client-border); }
+.amount-positive { color: #078a72; }.amount-negative { color: #b42318; }
 .account-state { display: flex; min-height: 240px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border-radius: 8px; }.account-state--error { border: 1px solid #f5c2bd; background: #fff8f7; color: #b42318; }.account-state p { margin: 0; }
 .recharge-form { display: flex; flex-direction: column; gap: 16px; }.field-label { color: #4e6075; font-size: 14px; font-weight: 650; }
-.quick-amounts, .payment-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.quick-amounts button, .payment-methods button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active, .payment-methods button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
-.payment-methods { grid-template-columns: repeat(2, 1fr); }.payment-methods button { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 650; }.payment-methods span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; background: #1685ef; color: #fff; font-size: 14px; }.payment-wechat span { background: #09ae42; }
-.qr-panel { display: flex; align-items: center; flex-direction: column; gap: 14px; padding: 22px; border: 1px dashed #bed0e4; border-radius: 12px; background: #f8fafc; }.qr-panel img { width: 210px; height: 210px; border: 1px solid #dae3ed; border-radius: 10px; background: #fff; object-fit: contain; }.qr-panel p { margin: 0; color: #62758d; }
+.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.quick-amounts button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
+.qr-panel { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; border: 1px solid #dbe3ed; border-radius: 12px; background: #f8fafc; }.qr-panel img { width: 210px; height: 210px; border: 1px solid #dae3ed; border-radius: 10px; background: #fff; object-fit: contain; }.qr-panel strong { color: var(--navy); font-size: 17px; }.qr-panel p { margin: 8px 0 0; color: #62758d; }
 .channel-warning { padding: 24px; border: 1px solid #f0d39b; border-radius: 10px; background: #fff9ed; color: #8b5b12; text-align: center; }.voucher-upload { display: grid; gap: 10px; }.voucher-upload :deep(.el-button) { display: inline-flex; align-items: center; gap: 6px; }.submit-error { margin: 0; color: #b42318; font-size: 13px; }.dialog-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.dialog-actions .el-button { min-height: 46px; margin: 0; }
+@media (max-width: 1200px) { .balance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.balance-summary article { border-bottom: 1px solid var(--client-border); }.balance-summary article:nth-child(3n) { border-right: 0; }.balance-summary article:nth-last-child(-n + 3) { border-bottom: 0; } }
 </style>
diff --git a/src/modules/finance/views/FinanceBillsView.test.mjs b/src/modules/finance/views/FinanceBillsView.test.mjs
index f19fefe..7ad9fa5 100644
--- a/src/modules/finance/views/FinanceBillsView.test.mjs
+++ b/src/modules/finance/views/FinanceBillsView.test.mjs
@@ -119,8 +119,9 @@ test('requires both finance statement authorities for the page permission', () =
 })
 
 test('keeps actions first and exposes list, balance, detail, confirmation, receipt, empty and error states', () => {
-  const actionIndex = viewSource.indexOf('label="操作"')
-  const billNumberIndex = viewSource.indexOf('label="账单编号"')
+  const tableDefinition = viewSource.slice(viewSource.indexOf('const tableColumns'))
+  const actionIndex = tableDefinition.indexOf("label: '操作'")
+  const billNumberIndex = tableDefinition.indexOf("label: '账单编号'")
   assert.ok(actionIndex >= 0 && actionIndex < billNumberIndex)
   for (const expected of ['未收余额', '确认账单', '暂无账单', 'state-panel--error']) {
     assert.match(viewSource, new RegExp(expected))
@@ -133,9 +134,9 @@ test('keeps actions first and exposes list, balance, detail, confirmation, recei
   assert.match(detailViewSource, /InboundCodeAssociationDialog/)
   assert.match(detailViewSource, /:inbound-code="inboundAssociationCode"/)
   assert.match(viewSource, /auth\.hasPermission\('finance:bill:confirm'\)/)
-  assert.match(viewSource, /row\.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm/)
-  assert.match(viewSource, /size="small" type="success" plain/)
-  assert.match(viewSource, /confirmStatement\(row as FinanceBillSummary\)/)
+  assert.match(viewSource, /statement\.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm\.value/)
+  assert.match(viewSource, /label: '确认账单'/)
+  assert.match(viewSource, /run: \(\) => confirmStatement\(statement\)/)
   assert.match(detailViewSource, /detail\.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm/)
   assert.match(detailViewSource, /confirmStatement\(detail\)/)
   assert.match(viewSource, /confirmMerchantFinanceStatement\(statementId, statement\.version, key\)/)
@@ -150,6 +151,14 @@ test('keeps actions first and exposes list, balance, detail, confirmation, recei
   assert.match(detailViewSource, /bill-detail-error/)
 })
 
+test('uses the shared compact query, table and pagination layout', () => {
+  assert.match(viewSource, /<QueryToolbar[^>]*layout="grid"/)
+  assert.match(viewSource, /<DataTable[^>]*:row-actions="rowActions"/)
+  assert.match(viewSource, /v-model:page="page" v-model:page-size="pageSize"/)
+  assert.match(viewSource, /:page-sizes="\[20, 50, 100\]"/)
+  assert.doesNotMatch(viewSource, /class="filter-bar"|class="pagination-row"|class="table-empty"/)
+})
+
 test('keeps the existing customer finance view permission mapping', () => {
   assert.match(permissionSource, /code: 'finance:bill:view'/)
   assert.match(permissionSource, /merchant:finance:statement:list/)
diff --git a/src/modules/finance/views/FinanceBillsView.vue b/src/modules/finance/views/FinanceBillsView.vue
index 33816d8..911368a 100644
--- a/src/modules/finance/views/FinanceBillsView.vue
+++ b/src/modules/finance/views/FinanceBillsView.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
-import { CircleDollarSign, Eye, RefreshCcw, Search } from '@lucide/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { RefreshCcw } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { ApiError } from '@/api/http'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import type { TableAction } from '@/components/common/tableActions'
 import { useAuthStore } from '@/modules/auth/public'
 import { confirmMerchantFinanceStatement, getMerchantFinanceBills } from '../api/finance'
 import type { FinanceBillQuery, FinanceBillStatus, FinanceBillSummary, FinanceCustomerConfirmationStatus } from '../contracts'
@@ -28,7 +31,23 @@ const statusOptions: Array<{ label: string; value: FinanceBillStatus }> = [
   { label: '作废', value: 'VOIDED' },
 ]
 
-const hasData = computed(() => bills.value.length > 0)
+const queryModel = ref<QueryModel>({ keyword: '', status: '' })
+const queryFields: QueryField[] = [
+  { key: 'keyword', label: '账单编号', type: 'input', placeholder: '请输入账单编号' },
+  { key: 'status', label: '账单状态', type: 'select', placeholder: '全部', options: statusOptions },
+]
+const tableColumns: DataTableColumn[] = [
+  { label: '操作', slotName: 'actions', width: 190, fixed: 'left' },
+  { label: '账单编号', prop: 'billNo', minWidth: 160 },
+  { label: '出账日期', slotName: 'issueDate', width: 120 },
+  { label: '到期日', slotName: 'dueDate', width: 120 },
+  { label: '账单金额', slotName: 'totalAmount', width: 145, align: 'right' },
+  { label: '已收', slotName: 'receivedAmount', width: 145, align: 'right' },
+  { label: '未收余额', slotName: 'outstandingAmount', width: 145, align: 'right' },
+  { label: '状态', slotName: 'status', width: 110 },
+  { label: '客户确认', slotName: 'confirmationStatus', width: 110 },
+]
+
 const canConfirm = computed(() => auth.hasPermission('finance:bill:confirm'))
 
 function formatAmount(value: string | null | undefined) {
@@ -87,6 +106,21 @@ async function loadBills(nextPage = page.value) {
 
 function openDetail(row: FinanceBillSummary) { void router.push({ name: 'finance-bill-detail', params: { billNo: row.billNo } }) }
 
+function rowActions(row: object): TableAction[] {
+  const statement = row as FinanceBillSummary
+  const actions: TableAction[] = [{ key: 'detail', label: '查看', run: () => openDetail(statement) }]
+  if (statement.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm.value) {
+    actions.push({
+      key: 'confirm',
+      label: '确认账单',
+      loading: confirmingBillId.value === statement.id,
+      disabled: Boolean(confirmingBillId.value),
+      run: () => confirmStatement(statement),
+    })
+  }
+  return actions
+}
+
 async function confirmStatement(statement: FinanceBillSummary) {
   if (!canConfirm.value || statement.customerConfirmationStatus !== 'PENDING_CONFIRMATION' || confirmingBillId.value) return
   try {
@@ -118,16 +152,19 @@ async function confirmStatement(statement: FinanceBillSummary) {
   }
 }
 
-function resetFilters() {
-  filters.keyword = ''
-  filters.status = undefined
-  void loadBills(1)
+function applyQuery(model: QueryModel) {
+  filters.keyword = String(model.keyword || '')
+  filters.status = (model.status || undefined) as FinanceBillStatus | undefined
+  if (page.value !== 1) page.value = 1
+  else void loadBills(1)
 }
 
-function handlePageChange(nextPage: number) {
-  void loadBills(nextPage)
+function resetFilters(model: QueryModel) {
+  queryModel.value = model
+  applyQuery(model)
 }
 
+watch([page, pageSize], () => { void loadBills(page.value) })
 onMounted(() => { void loadBills(1) })
 </script>
 
@@ -139,38 +176,19 @@ onMounted(() => { void loadBills(1) })
       <span class="amount-warning">未收 <strong>¥ {{ formatAmount(totals.outstanding) }}</strong></span>
     </section>
 
+    <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="客户账单筛选" :fields="queryFields" :search-on-reset="false" @search="applyQuery" @reset="resetFilters" />
+
     <section class="content-card">
-      <form class="filter-bar" @submit.prevent="loadBills(1)">
-        <el-input v-model="filters.keyword" clearable placeholder="搜索账单编号" aria-label="搜索账单编号" class="keyword-input">
-          <template #prefix><Search :size="16" /></template>
-        </el-input>
-        <el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="账单状态" class="status-select">
-          <el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value" />
-        </el-select>
-        <el-button type="primary" native-type="submit" :loading="loading">查询</el-button>
-        <el-button :disabled="loading" @click="resetFilters">重置</el-button>
-      </form>
-
-      <div v-if="errorMessage" class="state-panel state-panel--error" role="alert">
-        <p>{{ errorMessage }}</p>
-        <el-button @click="loadBills(1)"><RefreshCcw :size="15" />重试</el-button>
-      </div>
-      <el-table v-else v-loading="loading" :data="bills" row-key="billNo" class="finance-table" aria-label="客户账单列表">
-        <el-table-column label="操作" width="190" fixed="left">
-          <template #default="{ row }"><div class="table-actions"><el-button link type="primary" @click="openDetail(row as FinanceBillSummary)"><Eye :size="15" />查看</el-button><el-button v-if="row.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm" size="small" type="success" plain :loading="confirmingBillId === row.id" :disabled="Boolean(confirmingBillId)" @click="confirmStatement(row as FinanceBillSummary)">确认账单</el-button></div></template>
-        </el-table-column>
-        <el-table-column prop="billNo" label="账单编号" min-width="160" />
-        <el-table-column prop="issueDate" label="出账日期" width="120"><template #default="{ row }">{{ formatDate(row.issueDate) }}</template></el-table-column>
-        <el-table-column prop="dueDate" label="到期日" width="120"><template #default="{ row }">{{ formatDate(row.dueDate) }}</template></el-table-column>
-        <el-table-column label="账单金额" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.totalAmount) }}</template></el-table-column>
-        <el-table-column label="已收" width="145" align="right"><template #default="{ row }">¥ {{ formatAmount(row.receivedAmount) }}</template></el-table-column>
-        <el-table-column label="未收余额" width="145" align="right"><template #default="{ row }"><strong :class="{ 'amount-warning': row.outstandingAmount !== '0' }">¥ {{ formatAmount(row.outstandingAmount) }}</strong></template></el-table-column>
-        <el-table-column label="状态" width="110"><template #default="{ row }"><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template></el-table-column>
-        <el-table-column label="客户确认" width="110"><template #default="{ row }"><el-tag :type="confirmationType(row.customerConfirmationStatus)">{{ confirmationLabel(row.customerConfirmationStatus) }}</el-tag></template></el-table-column>
-        <template #empty><div class="table-empty"><CircleDollarSign :size="32" /><strong>暂无账单</strong><span>平台财务出账后，这里会显示本企业账单。</span></div></template>
-      </el-table>
-
-      <div v-if="!errorMessage && hasData" class="pagination-row"><span>共 {{ total }} 条</span><el-pagination v-model:current-page="page" :page-size="pageSize" layout="prev, pager, next" :total="total" @current-change="handlePageChange" /></div>
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="bills" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[20, 50, 100]" :row-actions="rowActions" row-key="billNo" empty-text="暂无账单">
+        <template v-if="errorMessage" #error><div class="state-panel state-panel--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="loadBills(1)"><RefreshCcw :size="15" />重试</el-button></div></template>
+        <template #issueDate="{ row }">{{ formatDate(row.issueDate) }}</template>
+        <template #dueDate="{ row }">{{ formatDate(row.dueDate) }}</template>
+        <template #totalAmount="{ row }">¥ {{ formatAmount(row.totalAmount) }}</template>
+        <template #receivedAmount="{ row }">¥ {{ formatAmount(row.receivedAmount) }}</template>
+        <template #outstandingAmount="{ row }"><strong :class="{ 'amount-warning': row.outstandingAmount !== '0' }">¥ {{ formatAmount(row.outstandingAmount) }}</strong></template>
+        <template #status="{ row }"><el-tag :type="statusType(row.status)">{{ statusLabel(row.status) }}</el-tag></template>
+        <template #confirmationStatus="{ row }"><el-tag :type="confirmationType(row.customerConfirmationStatus)">{{ confirmationLabel(row.customerConfirmationStatus) }}</el-tag></template>
+      </DataTable>
     </section>
 
   </div>
@@ -179,12 +197,8 @@ onMounted(() => { void loadBills(1) })
 <style scoped>
 .finance-bills-page { display: flex; flex-direction: column; gap: 12px; }
 .finance-summary { display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--muted); font-size: 13px; }.finance-summary strong { margin-left: 6px; color: var(--navy); font-size: 18px; }.amount-warning, .amount-warning strong { color: #b45309; }
-.content-card { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); }
-.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }.keyword-input { width: 260px; }.status-select { width: 140px; }
-.finance-table { width: 100%; }.finance-table :deep(.el-button) { display: inline-flex; align-items: center; gap: 4px; }.table-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
+.content-card { min-width: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--surface, #fff); }
 .state-panel { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 12px; flex-direction: column; color: var(--muted); text-align: center; }.state-panel p { margin: 0; }.state-panel--error { color: #b42318; background: #fff8f7; border: 1px solid #f5c2bd; border-radius: 6px; }
-.table-empty { display: flex; align-items: center; flex-direction: column; gap: 8px; padding: 42px 12px; color: var(--muted); }.table-empty strong { color: var(--navy); }.table-empty span { font-size: 12px; }
-.pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; color: var(--muted); font-size: 12px; }
 .detail-content { min-height: 300px; }.detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.detail-heading h2 { margin: 0 0 5px; color: var(--navy); font-size: 18px; }.detail-heading p { margin: 0; color: var(--muted); font-size: 13px; }.detail-statuses { display: flex; align-items: center; gap: 8px; }.confirmation-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 16px; border: 1px solid #d7e9e4; border-radius: 8px; background: #f3f9f7; }.confirmation-panel strong { color: var(--navy); }.confirmation-panel p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }.detail-section { margin-top: 22px; }.detail-section h3 { margin: 0 0 10px; color: var(--navy); font-size: 14px; }.sub-empty { padding: 22px; color: var(--muted); font-size: 12px; text-align: center; background: #f7fafb; }.readonly-notice { margin: 22px 0 0; padding: 11px 12px; color: #45615d; background: #edf6f4; font-size: 12px; }
-@media (max-width: 720px) { .keyword-input, .status-select { width: 100%; }.filter-bar > .el-button { flex: 1; }.content-card { padding: 12px; }.pagination-row { align-items: flex-start; flex-direction: column; }.finance-summary { align-items: flex-start; flex-direction: column; gap: 6px; } }
+@media (max-width: 720px) { .finance-summary { align-items: flex-start; flex-direction: column; gap: 6px; } }
 </style>
diff --git a/src/modules/first-leg/components/InboundCodeAssociationDialog.vue b/src/modules/first-leg/components/InboundCodeAssociationDialog.vue
index 2fc5e02..b1d4d4a 100644
--- a/src/modules/first-leg/components/InboundCodeAssociationDialog.vue
+++ b/src/modules/first-leg/components/InboundCodeAssociationDialog.vue
@@ -82,7 +82,6 @@ watch(() => [props.modelValue, props.inboundCode] as const, ([open]) => {
           <div><span>入仓码</span><strong>{{ displayValue(association.inboundCode) }}</strong></div>
         </header>
         <dl class="inbound-association-grid">
-          <div><dt>订单号</dt><dd>{{ displayValue(association.orderNo) }}</dd></div>
           <div><dt>订单状态</dt><dd>{{ getFirstLegStatusLabel(association.orderStatus) }}</dd></div>
           <div><dt>客户名称</dt><dd>{{ displayValue(association.customerName) }}</dd></div>
           <div><dt>目的国家</dt><dd>{{ displayValue(association.destinationCountryCode) }}</dd></div>
diff --git a/src/modules/first-leg/routes.ts b/src/modules/first-leg/routes.ts
index cbcd643..9357aae 100644
--- a/src/modules/first-leg/routes.ts
+++ b/src/modules/first-leg/routes.ts
@@ -1,4 +1,4 @@
-import { FileText, Ship, Zap } from '@lucide/vue'
+import { FileText, Ship } from '@lucide/vue'
 import type { ClientModuleManifest } from '../types.ts'
 
 export const firstLegModule = {
@@ -17,8 +17,7 @@ export const firstLegModule = {
     {
       path: 'orders/first-leg/create',
       name: 'first-leg-order-create',
-      component: () => import('./views/FirstLegOrdersView.vue'),
-      props: { createPage: true },
+      component: () => import('./views/FirstLegOrderCreateHubView.vue'),
       release: 'active',
       meta: { title: '创建订单', workspaceTitle: '头程订单 · 新建', description: '填写发货、目的地和货物信息', permission: 'order:first-leg:create' },
     },
@@ -44,7 +43,6 @@ export const firstLegModule = {
       component: () => import('./views/QuickOrderView.vue'),
       release: 'active',
       meta: { title: '快速下单', description: '按渠道、目的仓和产品 SKU 快速生成订单草稿', permission: 'order:first-leg:quick-create' },
-      navigation: { key: 'first-leg-quick-order', title: '快速下单', icon: Zap },
     },
   ],
 } satisfies ClientModuleManifest
diff --git a/src/modules/first-leg/views/FirstLegOrderCreateHubView.vue b/src/modules/first-leg/views/FirstLegOrderCreateHubView.vue
new file mode 100644
index 0000000..b1ac700
--- /dev/null
+++ b/src/modules/first-leg/views/FirstLegOrderCreateHubView.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FilePenLine, Zap } from '@lucide/vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '@/modules/auth/public'
+import FirstLegOrdersView from './FirstLegOrdersView.vue'
+import QuickOrderView from './QuickOrderView.vue'
+
+const route = useRoute()
+const router = useRouter()
+const auth = useAuthStore()
+const canQuickOrder = computed(() => auth.hasPermission('order:first-leg:quick-create'))
+const activeMode = computed<'standard' | 'quick'>(() => route.query.mode === 'quick' && canQuickOrder.value ? 'quick' : 'standard')
+
+function selectMode(mode: 'standard' | 'quick') {
+  if (mode === 'quick' && !canQuickOrder.value) return
+  const query = { ...route.query }
+  if (mode === 'quick') query.mode = 'quick'
+  else delete query.mode
+  void router.replace({ name: 'first-leg-order-create', query })
+}
+</script>
+
+<template>
+  <section class="first-leg-create-hub">
+    <header class="create-hub-heading">
+      <h1>头程下单</h1>
+      <p>填写货物信息，创建新的头程运输订单</p>
+    </header>
+    <nav v-if="canQuickOrder" class="order-mode-switch" aria-label="头程下单方式">
+      <button type="button" :class="{ active: activeMode === 'standard' }" :aria-current="activeMode === 'standard' ? 'page' : undefined" @click="selectMode('standard')"><FilePenLine :size="18" />普通下单</button>
+      <button type="button" :class="{ active: activeMode === 'quick' }" :aria-current="activeMode === 'quick' ? 'page' : undefined" @click="selectMode('quick')"><Zap :size="18" />快速下单</button>
+    </nav>
+    <FirstLegOrdersView v-if="activeMode === 'standard'" create-page />
+    <QuickOrderView v-else />
+  </section>
+</template>
+
+<style scoped>
+.first-leg-create-hub{display:grid;min-width:0;gap:12px}.create-hub-heading{display:grid;gap:5px}.create-hub-heading h1{margin:0;color:var(--navy);font-size:24px;line-height:1.25}.create-hub-heading p{margin:0;color:var(--muted);font-size:13px}.order-mode-switch{display:inline-flex;width:max-content;padding:5px;border:1px solid #dbe4f1;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(26,43,75,.06)}.order-mode-switch button{display:inline-flex;height:38px;align-items:center;gap:8px;padding:0 20px;border:0;border-radius:8px;background:transparent;color:#607087;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.order-mode-switch button.active{background:linear-gradient(135deg,#4f73ee,#8a56dc);color:#fff;box-shadow:0 6px 14px rgba(79,115,238,.22)}.order-mode-switch button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
+</style>
diff --git a/src/modules/first-leg/views/FirstLegOrdersView.test.mjs b/src/modules/first-leg/views/FirstLegOrdersView.test.mjs
index 06b455e..9dd7d9c 100644
--- a/src/modules/first-leg/views/FirstLegOrdersView.test.mjs
+++ b/src/modules/first-leg/views/FirstLegOrdersView.test.mjs
@@ -12,6 +12,7 @@ const progressSource = readFileSync(new URL('../components/OrderProgressPanel.vu
 const customsDialogSource = readFileSync(new URL('../components/CustomsDocumentsDialog.vue', import.meta.url), 'utf8')
 const customsApiSource = readFileSync(new URL('../api/customs.ts', import.meta.url), 'utf8')
 const orderStoreSource = readFileSync(new URL('../store/firstLegOrders.ts', import.meta.url), 'utf8')
+const createHubSource = readFileSync(new URL('./FirstLegOrderCreateHubView.vue', import.meta.url), 'utf8')
 
 test('routes the confirmed first-leg path to the implemented order view', () => {
   assert.match(routerSource, /path: 'orders\/first-leg'[\s\S]*?component: \(\) => import\('\.\/views\/FirstLegOrdersView\.vue'\)[\s\S]*?release: 'active'/)
@@ -19,7 +20,8 @@ test('routes the confirmed first-leg path to the implemented order view', () =>
 
 test('opens order creation as a dedicated protected page while keeping draft editing in a large dialog', () => {
   assert.match(routerSource, /path: 'orders\/first-leg\/create'[\s\S]*?name: 'first-leg-order-create'[\s\S]*?release: 'active'[\s\S]*?permission: 'order:first-leg:create'/)
-  assert.match(routerSource, /name: 'first-leg-order-create'[\s\S]*?props: \{ createPage: true \}/)
+  assert.match(routerSource, /name: 'first-leg-order-create'[\s\S]*?FirstLegOrderCreateHubView\.vue/)
+  assert.match(createHubSource, /<FirstLegOrdersView v-if="activeMode === 'standard'" create-page \/>/)
   assert.match(source, /router\.push\(\{ name: 'first-leg-order-create' \}\)/)
   assert.match(source, /defineProps<\{ createPage\?: boolean; detailPage\?: boolean; showCreateAction\?: boolean \}>/)
   assert.match(source, /const isCreatePage = computed\(\(\) => props\.createPage\)/)
@@ -250,7 +252,9 @@ test('keeps all progress stages and business summary usable on mobile', () => {
 test('keeps the first viewport compact and moves create into the table toolbar', () => {
   const tableToolbarSource = source.slice(source.indexOf('#toolbar-actions'), source.indexOf('class="order-eligibility is-pending"'))
   assert.match(source, /#toolbar-actions/)
-  assert.match(source, /class="order-queue-tabs"[\s\S]*确认计费重[\s\S]*上传资料[\s\S]*共 \{\{ filteredOrders\.length \}\} 条/)
+  assert.match(source, /class="order-queue-tabs"[\s\S]*确认计费重[\s\S]*上传资料[\s\S]*草稿/)
+  assert.match(source, /activeOrderQueue\.value === 'draft'[\s\S]*order\.status === 'DRAFT'/)
+  assert.doesNotMatch(source, /共 \{\{ filteredOrders\.length \}\} 条/)
   assert.match(source, /#toolbar-actions[\s\S]*order:first-leg:create[\s\S]*创建订单[\s\S]*class="order-eligibility is-pending"/)
   assert.match(tableToolbarSource, /下载唛头[\s\S]*导出订单信息[\s\S]*批量提交草稿[\s\S]*创建订单/)
   assert.doesNotMatch(source.slice(source.indexOf('<QueryToolbar'), source.indexOf('<div class="client-card order-table-card">')), /下载唛头|导出订单信息|创建订单/)
diff --git a/src/modules/first-leg/views/FirstLegOrdersView.vue b/src/modules/first-leg/views/FirstLegOrdersView.vue
index 5bdd303..d45c95d 100644
--- a/src/modules/first-leg/views/FirstLegOrdersView.vue
+++ b/src/modules/first-leg/views/FirstLegOrdersView.vue
@@ -191,7 +191,7 @@ const selectedOrders = ref<FirstLegOrder[]>([])
 const selectedOrderCount = computed(() => selectedOrders.value.length)
 const selectedDraftOrders = computed(() => selectedOrders.value.filter((order) => order.status === 'DRAFT'))
 const orderTableVersion = ref(0)
-type OrderQueue = 'all' | 'fee' | 'customs'
+type OrderQueue = 'all' | 'fee' | 'customs' | 'draft'
 const activeOrderQueue = ref<OrderQueue>('all')
 const editorOpen = ref(false)
 const orderFormRef = ref<FormInstance>()
@@ -471,10 +471,12 @@ const orderQueueCounts = computed(() => ({
   all: queryMatchedOrders.value.length,
   fee: queryMatchedOrders.value.filter((order) => order.businessSummary.customerFeeConfirmationRequired).length,
   customs: queryMatchedOrders.value.filter((order) => Boolean(eligibleCustomsDetail(order))).length,
+  draft: queryMatchedOrders.value.filter((order) => order.status === 'DRAFT').length,
 }))
 const filteredOrders = computed(() => queryMatchedOrders.value.filter((order) => {
   if (activeOrderQueue.value === 'fee') return order.businessSummary.customerFeeConfirmationRequired
   if (activeOrderQueue.value === 'customs') return Boolean(eligibleCustomsDetail(order))
+  if (activeOrderQueue.value === 'draft') return order.status === 'DRAFT'
   return true
 }))
 const pagedOrders = computed(() => {
@@ -1945,8 +1947,9 @@ async function searchOrders(model: QueryModel) {
               <button type="button" :class="{ active: activeOrderQueue === 'all' }" @click="selectOrderQueue('all')">全部</button>
               <button type="button" :class="{ active: activeOrderQueue === 'fee' }" @click="selectOrderQueue('fee')">确认计费重<span v-if="orderQueueCounts.fee" class="queue-count">{{ orderQueueCounts.fee }}</span></button>
               <button type="button" :class="{ active: activeOrderQueue === 'customs' }" @click="selectOrderQueue('customs')">上传资料<span v-if="orderQueueCounts.customs" class="queue-count">{{ orderQueueCounts.customs }}</span></button>
+              <button type="button" :class="{ active: activeOrderQueue === 'draft' }" @click="selectOrderQueue('draft')">草稿<span v-if="orderQueueCounts.draft" class="queue-count">{{ orderQueueCounts.draft }}</span></button>
             </nav>
-            <span>共 {{ filteredOrders.length }} 条</span><span v-if="selectedOrderCount">已选 {{ selectedOrderCount }} 条</span>
+            <span v-if="selectedOrderCount">已选 {{ selectedOrderCount }} 条</span>
           </template>
           <template #toolbar-actions>
           <el-popover placement="bottom-end" :width="320" trigger="click" popper-class="order-column-popper">
diff --git a/src/modules/first-leg/views/QuickOrderView.test.mjs b/src/modules/first-leg/views/QuickOrderView.test.mjs
index 2c52cda..b6b4187 100644
--- a/src/modules/first-leg/views/QuickOrderView.test.mjs
+++ b/src/modules/first-leg/views/QuickOrderView.test.mjs
@@ -6,14 +6,23 @@ const source = readFileSync(new URL('./QuickOrderView.vue', import.meta.url), 'u
 const routesSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf8')
 const contractsSource = readFileSync(new URL('../../tenant-management/contracts.ts', import.meta.url), 'utf8')
 const orderViewSource = readFileSync(new URL('./FirstLegOrdersView.vue', import.meta.url), 'utf8')
+const createHubSource = readFileSync(new URL('./FirstLegOrderCreateHubView.vue', import.meta.url), 'utf8')
 
-test('exposes quick order as an active first-leg route with its dedicated permission', () => {
+test('keeps quick order active but moves it from the menu into the head-leg create page', () => {
   assert.match(routesSource, /path: 'first-leg\/quick-order'[\s\S]*?release: 'active'[\s\S]*?permission: 'order:first-leg:quick-create'/)
   assert.match(contractsSource, /code: 'order:first-leg:quick-create'[\s\S]*?label: '快速下单'/)
   assert.match(contractsSource, /'order:first-leg:quick-create': \['merchant:order:quick-create', 'merchant:order:create'\]/)
   assert.match(contractsSource, /FRONTEND_PERMISSIONS_REQUIRING_ALL_BACKEND_CODES[\s\S]*?'order:first-leg:quick-create'/)
   assert.match(routesSource, /path: 'orders\/first-leg\/:draftId\/edit'[\s\S]*?name: 'first-leg-order-edit'[\s\S]*?permission: 'order:first-leg:edit'/)
   assert.match(orderViewSource, /store\.loadDraftDetail\(id\)/)
+  assert.doesNotMatch(routesSource, /navigation: \{ key: 'first-leg-quick-order'/)
+  assert.match(routesSource, /path: 'orders\/first-leg\/create'[\s\S]*?FirstLegOrderCreateHubView\.vue/)
+  assert.match(createHubSource, />普通下单<\/button>/)
+  assert.match(createHubSource, />快速下单<\/button>/)
+  assert.match(createHubSource, /<h1>头程下单<\/h1>/)
+  assert.match(createHubSource, /auth\.hasPermission\('order:first-leg:quick-create'\)/)
+  assert.match(createHubSource, /<FirstLegOrdersView v-if="activeMode === 'standard'" create-page \/>/)
+  assert.match(createHubSource, /<QuickOrderView v-else \/>/)
 })
 
 test('keeps the primary quick-order table focused on inbound code policy, channel, destination and cargo', () => {
diff --git a/src/modules/first-leg/views/QuickOrderView.vue b/src/modules/first-leg/views/QuickOrderView.vue
index 7d96d41..a0f58bb 100644
--- a/src/modules/first-leg/views/QuickOrderView.vue
+++ b/src/modules/first-leg/views/QuickOrderView.vue
@@ -398,7 +398,7 @@ async function submitQuickOrder() {
     else {
       activeBatchKey.value = ''
       await Promise.all(successes.map((item) => store.loadDraftDetail(item.draftId)))
-      workspace.close(['first-leg-quick-order'])
+      workspace.close(['first-leg-quick-order', 'first-leg-order-create'])
       await router.push({ name: 'first-leg-orders' })
       ElMessage.success(`已生成 ${successes.length} 张草稿单，提交后将生成入仓码`)
     }
diff --git a/src/modules/notifications/notifications.test.mjs b/src/modules/notifications/notifications.test.mjs
index 8360836..1c6adaf 100644
--- a/src/modules/notifications/notifications.test.mjs
+++ b/src/modules/notifications/notifications.test.mjs
@@ -28,23 +28,32 @@ test('does not accept browser-selected customer or user scope in the API boundar
 
 test('keeps customer message actions first and covers the requested local states', async () => {
   const source = await readFile(new URL('views/NotificationsView.vue', moduleRoot), 'utf8')
-  const operationColumn = source.indexOf('label="操作"')
-  const titleColumn = source.indexOf('label="消息标题"')
+  const operationColumn = source.indexOf("label: '操作'")
+  const titleColumn = source.indexOf("label: '消息标题'")
   assert.ok(operationColumn >= 0 && operationColumn < titleColumn)
   assert.match(source, /全部标为已读/)
   assert.match(source, /标为已读/)
-  assert.match(source, /state-panel--error/)
+  assert.match(source, /notification-state--error/)
   assert.match(source, /暂无消息/)
   assert.doesNotMatch(source, /清空已读|删除消息/)
   assert.match(source, /Promise\.all\(\[load\(\), notifications\.refreshUnreadCount\(\)\]\)/)
   assert.match(source, /auth\.hasPermission\('merchant:notification:read'\)/)
   assert.match(source, /auth\.hasPermission\('merchant:notification:read-all'\)/)
   assert.match(source, /v-if="canMarkAllRead"/)
-  assert.match(source, /v-if="canMarkRead && row\.status === 'UNREAD'"/)
+  assert.match(source, /canMarkRead\.value && row\.status === 'UNREAD'/)
   assert.match(source, /notificationCategoryLabel\(row\.type\)/)
   assert.match(source, /notificationSentAt\(row\.sentAt\)/)
 })
 
+test('uses the shared compact list language without a repeated page hero', async () => {
+  const source = await readFile(new URL('views/NotificationsView.vue', moduleRoot), 'utf8')
+  assert.match(source, /<QueryToolbar[^>]*layout="grid"/)
+  assert.match(source, /<DataTable[^>]*:row-actions="rowActions"/)
+  assert.match(source, /#toolbar-actions/)
+  assert.match(source, /empty-text="暂无消息"/)
+  assert.doesNotMatch(source, /#toolbar>|page-heading|eyebrow|table-empty|共 \{\{ total \}\} 条/)
+})
+
 test('uses friendly notification values while keeping unknown server codes visible', async () => {
   const source = await readFile(new URL('presentation.ts', moduleRoot), 'utf8')
   assert.match(source, /ORDER: '订单消息'/)
diff --git a/src/modules/notifications/views/NotificationsView.vue b/src/modules/notifications/views/NotificationsView.vue
index bf73626..9f934b1 100644
--- a/src/modules/notifications/views/NotificationsView.vue
+++ b/src/modules/notifications/views/NotificationsView.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
-import { Bell, RefreshCcw } from '@lucide/vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { CheckCheck, RefreshCcw } from '@lucide/vue'
 import { useRouter } from 'vue-router'
 import { ApiError } from '@/api/http'
-import { useNotificationsStore } from '../public'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
+import type { TableAction } from '@/components/common/tableActions'
 import { useAuthStore } from '@/modules/auth/public'
 import { getMyNotifications, markAllMyNotificationsRead, markMyNotificationRead } from '../api/notifications'
-import type { NotificationPage, NotificationStatus, NotificationSummary, NotificationType } from '../contracts'
+import type { NotificationStatus, NotificationSummary } from '../contracts'
 import { notificationCategoryLabel, notificationSentAt } from '../presentation'
+import { useNotificationsStore } from '../public'
 
 const router = useRouter()
 const auth = useAuthStore()
@@ -15,44 +18,121 @@ const notifications = useNotificationsStore()
 const canMarkRead = computed(() => auth.hasPermission('merchant:notification:read'))
 const canMarkAllRead = computed(() => auth.hasPermission('merchant:notification:read-all'))
 const loading = ref(false)
+const markingAll = ref(false)
 const errorMessage = ref('')
-const page = ref<NotificationPage>({ records: [], total: 0, page: 1, size: 20, pages: 0 })
-const filters = reactive<{ status?: NotificationStatus; type?: NotificationType }>({})
+const records = ref<NotificationSummary[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+const pageSize = ref(20)
+const filters = reactive({ status: '', type: '' })
+const queryModel = computed<QueryModel>({ get: () => ({ ...filters }), set: (value) => Object.assign(filters, value) })
+const queryFields: QueryField[] = [
+  { key: 'status', label: '消息状态', type: 'select', options: [{ label: '未读', value: 'UNREAD' }, { label: '已读', value: 'READ' }] },
+  { key: 'type', label: '消息分类', type: 'input', placeholder: '请输入消息分类' },
+]
+const tableColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', slotName: 'actions', width: 128, fixed: 'left' },
+  { prop: 'title', label: '消息标题', minWidth: 210 },
+  { prop: 'summary', label: '内容摘要', minWidth: 320 },
+  { key: 'type', label: '分类', slotName: 'type', width: 130 },
+  { key: 'sentAt', label: '发送时间', slotName: 'sentAt', width: 170 },
+  { key: 'status', label: '状态', slotName: 'status', width: 90, align: 'center' },
+]
 
-function messageOf(error: unknown) { return error instanceof ApiError ? error.message : '消息加载失败，请稍后重试' }
-async function load(nextPage = page.value.page) {
-  loading.value = true; errorMessage.value = ''
-  try { page.value = await getMyNotifications({ ...filters, page: nextPage, size: page.value.size }) } catch (error) { errorMessage.value = messageOf(error); page.value = { records: [], total: 0, page: nextPage, size: 20, pages: 0 } } finally { loading.value = false }
+function messageOf(error: unknown) {
+  return error instanceof ApiError ? error.message : '消息加载失败，请稍后重试'
 }
-async function markRead(row: NotificationSummary) { if (!canMarkRead.value) return; try { await markMyNotificationRead(row.id); await Promise.all([load(), notifications.refreshUnreadCount()]) } catch (error) { errorMessage.value = messageOf(error) } }
-async function markAllRead() { if (!canMarkAllRead.value) return; try { await markAllMyNotificationsRead(); await Promise.all([load(), notifications.refreshUnreadCount()]) } catch (error) { errorMessage.value = messageOf(error) } }
-function openDetail(row: NotificationSummary) { void router.push({ name: 'notification-detail', params: { notificationId: row.id } }) }
+
+async function load() {
+  loading.value = true
+  errorMessage.value = ''
+  try {
+    const result = await getMyNotifications({
+      status: filters.status ? filters.status as NotificationStatus : undefined,
+      type: filters.type.trim() || undefined,
+      page: currentPage.value,
+      size: pageSize.value,
+    })
+    records.value = result.records
+    total.value = result.total
+  } catch (error) {
+    records.value = []
+    total.value = 0
+    errorMessage.value = messageOf(error)
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  if (currentPage.value === 1) void load()
+  else currentPage.value = 1
+}
+
+function reset() {
+  Object.assign(filters, { status: '', type: '' })
+  search()
+}
+
+async function markRead(row: NotificationSummary) {
+  if (!canMarkRead.value) return
+  try {
+    await markMyNotificationRead(row.id)
+    await Promise.all([load(), notifications.refreshUnreadCount()])
+  } catch (error) {
+    errorMessage.value = messageOf(error)
+  }
+}
+
+async function markAllRead() {
+  if (!canMarkAllRead.value || markingAll.value) return
+  markingAll.value = true
+  try {
+    await markAllMyNotificationsRead()
+    await Promise.all([load(), notifications.refreshUnreadCount()])
+  } catch (error) {
+    errorMessage.value = messageOf(error)
+  } finally {
+    markingAll.value = false
+  }
+}
+
+function openDetail(row: NotificationSummary) {
+  void router.push({ name: 'notification-detail', params: { notificationId: row.id } })
+}
+
+function rowActions(candidate: object): TableAction[] {
+  const row = candidate as NotificationSummary
+  const actions: TableAction[] = [{ key: 'detail', label: '详情', run: () => openDetail(row) }]
+  if (canMarkRead.value && row.status === 'UNREAD') actions.push({ key: 'read', label: '标为已读', run: () => markRead(row) })
+  return actions
+}
+
 onMounted(() => { void Promise.all([load(), notifications.refreshUnreadCount()]) })
+watch([currentPage, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) => {
+  if (nextSize !== previousSize && nextPage !== 1) { currentPage.value = 1; return }
+  void load()
+})
 </script>
 
 <template>
-  <div class="notification-page">
-    <header class="page-heading"><div><p class="eyebrow">消息中心</p><h1>我的消息</h1><p>仅显示当前登录企业和成员可见的站内消息。</p></div><Bell :size="34" stroke-width="1.5" aria-hidden="true" /></header>
-    <section class="content-card">
-      <form class="filter-bar" @submit.prevent="load(1)"><el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="消息状态"><el-option label="未读" value="UNREAD" /><el-option label="已读" value="READ" /></el-select><el-input v-model="filters.type" clearable maxlength="64" placeholder="消息分类" aria-label="消息分类" /><el-button type="primary" native-type="submit" :loading="loading">查询</el-button><el-button :disabled="loading" @click="filters.status = undefined; filters.type = undefined; load(1)">重置</el-button><el-button v-if="canMarkAllRead" class="mark-all" :disabled="loading" @click="markAllRead">全部标为已读</el-button></form>
-      <div v-if="errorMessage" class="state-panel state-panel--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="load(page.page)"><RefreshCcw :size="15" />重试</el-button></div>
-      <el-table v-else v-loading="loading" :data="page.records" row-key="id" aria-label="我的消息列表"><el-table-column label="操作" width="150" fixed="left"><template #default="{ row }"><el-button link type="primary" @click="openDetail(row as NotificationSummary)">查看</el-button><el-button v-if="canMarkRead && row.status === 'UNREAD'" link type="primary" @click="markRead(row as NotificationSummary)">标为已读</el-button></template></el-table-column><el-table-column prop="title" label="消息标题" min-width="180" /><el-table-column prop="summary" label="内容摘要" min-width="260" /><el-table-column label="分类" width="140"><template #default="{ row }">{{ notificationCategoryLabel(row.type) }}</template></el-table-column><el-table-column label="发送时间" width="180"><template #default="{ row }">{{ notificationSentAt(row.sentAt) }}</template></el-table-column><el-table-column label="状态" width="90"><template #default="{ row }"><el-tag :type="row.status === 'UNREAD' ? 'danger' : 'info'">{{ row.status === 'UNREAD' ? '未读' : '已读' }}</el-tag></template></el-table-column><template #empty><div class="table-empty"><Bell :size="32" /><strong>暂无消息</strong><span>当前没有可查看的站内消息。</span></div></template></el-table>
-      <div v-if="!errorMessage && page.total > 0" class="pagination-row"><span>共 {{ page.total }} 条</span><el-pagination :current-page="page.page" :page-size="page.size" layout="prev, pager, next" :total="page.total" @current-change="load" /></div>
-    </section>
-  </div>
+  <section class="notification-page client-ui" aria-label="我的消息">
+    <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="消息筛选" :fields="queryFields" :search-on-reset="false" @search="search" @reset="reset" />
+
+    <div class="notification-table-card">
+      <DataTable v-model:page="currentPage" v-model:page-size="pageSize" :data="records" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[10, 20, 50, 100]" :row-actions="rowActions" row-key="id" empty-text="暂无消息">
+        <template #toolbar-actions>
+          <el-button v-if="canMarkAllRead" :loading="markingAll" :disabled="loading || total === 0" @click="markAllRead"><CheckCheck :size="16" />全部标为已读</el-button>
+        </template>
+        <template v-if="errorMessage" #error><div class="notification-state notification-state--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="load"><RefreshCcw :size="15" />重试</el-button></div></template>
+        <template #type="{ row }">{{ notificationCategoryLabel(row.type) }}</template>
+        <template #sentAt="{ row }">{{ notificationSentAt(row.sentAt) }}</template>
+        <template #status="{ row }"><el-tag :type="row.status === 'UNREAD' ? 'danger' : 'info'" effect="light">{{ row.status === 'UNREAD' ? '未读' : '已读' }}</el-tag></template>
+      </DataTable>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-.notification-page{display:flex;flex-direction:column;gap:16px}.page-heading{display:flex;justify-content:space-between;color:var(--navy)}.page-heading h1{margin:2px 0 5px;font-size:24px}.page-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:13px}.eyebrow{margin:0;color:var(--primary);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.content-card{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface,#fff)}.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.mark-all{margin-left:auto}.state-panel{display:flex;min-height:180px;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center}.state-panel--error{color:#b42318;background:#fff8f7;border:1px solid #f5c2bd;border-radius:6px}.state-panel p{margin:0}.table-empty{display:flex;align-items:center;flex-direction:column;gap:8px;padding:42px 12px;color:var(--muted)}.table-empty strong{color:var(--navy)}.table-empty span{font-size:12px}.pagination-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;color:var(--muted);font-size:12px}@media(max-width:720px){.content-card{padding:12px}.mark-all{margin-left:0;width:100%}.filter-bar .el-select,.filter-bar>.el-button{flex:1}.pagination-row{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:21px}}
-/* Keep the notification filters compact and aligned with the other client lists. */
-.filter-bar { align-items: flex-end; }
-.filter-bar > .el-select { width: 190px; }
-.filter-bar > .el-input { width: 260px; }
-.filter-bar > .el-button { flex: 0 0 auto; min-height: 32px; }
-.filter-bar > .el-button + .el-button { margin-left: 0; }
-@media (max-width: 720px) {
-  .filter-bar { align-items: stretch; flex-direction: column; }
-  .filter-bar > .el-select, .filter-bar > .el-input { width: 100%; }
-  .filter-bar > .el-button { width: 100%; }
-}
+.notification-page{display:grid;min-width:0;gap:12px}.notification-table-card{min-width:0;overflow:hidden;border:1px solid var(--client-border);border-radius:var(--client-radius);background:#fff}.notification-state{display:flex;min-height:160px;align-items:center;justify-content:center;gap:10px;flex-direction:column;color:var(--client-muted)}.notification-state p{margin:0}.notification-state--error{margin:16px;border:1px solid #f5c2bd;border-radius:6px;background:#fff8f7;color:#b42318}
 </style>
diff --git a/src/modules/order-management/deliveryOrders.test.mjs b/src/modules/order-management/deliveryOrders.test.mjs
index 164a2c7..20b3d6d 100644
--- a/src/modules/order-management/deliveryOrders.test.mjs
+++ b/src/modules/order-management/deliveryOrders.test.mjs
@@ -31,7 +31,9 @@ test('uses only authenticated merchant delivery endpoints without customer scope
 })
 
 test('keeps list, read-only detail and create permissions independent in active routes', () => {
-  assert.match(routesSource, /path: 'orders\/delivery'[\s\S]*permission: 'merchant:warehouse:delivery:list'[\s\S]*navigation:/)
+  const listRoute = routesSource.match(/path: 'orders\/delivery',[\s\S]*?\n\s*},/)?.[0] ?? ''
+  assert.match(listRoute, /permission: 'merchant:warehouse:delivery:list'/)
+  assert.doesNotMatch(listRoute, /navigation:/)
   assert.match(routesSource, /path: 'orders\/delivery\/create'[\s\S]*DeliveryOrderCreateView\.vue[\s\S]*permission: 'merchant:warehouse:delivery:create'/)
   assert.match(routesSource, /path: 'orders\/delivery\/:deliveryNo'[\s\S]*DeliveryOrderDetailView\.vue[\s\S]*props: true[\s\S]*permission: 'merchant:warehouse:delivery:list'/)
   assert.match(routesSource, /orders-delivery-create[\s\S]*keepAlive: false/)
diff --git a/src/modules/order-management/routes.ts b/src/modules/order-management/routes.ts
index 3292131..c6811eb 100644
--- a/src/modules/order-management/routes.ts
+++ b/src/modules/order-management/routes.ts
@@ -1,4 +1,4 @@
-import { ClipboardList, Package, ReceiptText, Truck } from '@lucide/vue'
+import { ClipboardList, ReceiptText } from '@lucide/vue'
 import type { ClientModuleManifest } from '../types.ts'
 
 export const orderManagementModule = {
@@ -19,7 +19,6 @@ export const orderManagementModule = {
       component: () => import('./views/InboundOrdersView.vue'),
       release: 'active',
       meta: { title: '入库订单列表', description: '查询海外仓入库订单', permission: 'merchant:warehouse:inbound:list' },
-      navigation: { key: 'orders-inbound', icon: Package },
     },
     {
       path: 'orders/inbound/:planNo/detail',
@@ -35,7 +34,6 @@ export const orderManagementModule = {
       component: () => import('./views/DeliveryOrdersView.vue'),
       release: 'active',
       meta: { title: '派送订单列表', description: '查询海外仓派送订单', permission: 'merchant:warehouse:delivery:list' },
-      navigation: { key: 'orders-delivery', icon: Truck },
     },
     {
       path: 'orders/delivery/create',
diff --git a/src/modules/order-management/views/DeliveryOrdersView.vue b/src/modules/order-management/views/DeliveryOrdersView.vue
index 1ad8e24..94fe2ab 100644
--- a/src/modules/order-management/views/DeliveryOrdersView.vue
+++ b/src/modules/order-management/views/DeliveryOrdersView.vue
@@ -138,12 +138,11 @@ watch([page, pageSize], ([nextPage, nextSize], [previousPage, previousSize]) =>
 </script>
 
 <template>
-  <section class="delivery-page" aria-labelledby="delivery-list-title">
+  <section class="delivery-page" aria-label="派送订单">
     <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="派送订单筛选" :fields="queryFields" :search-on-reset="false" @search="search" @reset="reset" />
 
     <div class="delivery-card delivery-table-card">
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="records" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[10, 20, 50, 100]" :row-actions="rowActions" row-key="deliveryNo" empty-text="暂无派送单">
-        <template #toolbar><strong id="delivery-list-title">派送订单</strong><span>共 {{ total }} 条</span></template>
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />创建派送单</el-button></template>
         <template v-if="errorMessage" #error><div class="delivery-state delivery-state--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="loadOrders">重试</el-button></div></template>
         <template #status="{ row }"><el-tag :type="statusType(row.status)" effect="light">{{ statusLabel(row.status) }}</el-tag></template>
diff --git a/src/modules/order-management/views/InboundOrdersView.vue b/src/modules/order-management/views/InboundOrdersView.vue
index 6172456..b884527 100644
--- a/src/modules/order-management/views/InboundOrdersView.vue
+++ b/src/modules/order-management/views/InboundOrdersView.vue
@@ -143,7 +143,6 @@ watch(() => [query.page, query.size] as const, ([nextPage, nextSize], [previousP
       <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="入库订单筛选" :fields="queryFields" :search-on-reset="false" @search="search" @reset="resetQuery" />
       <div class="inbound-table-card">
         <DataTable v-model:page="query.page" v-model:page-size="query.size" :data="rows" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[10, 20, 50, 100]" :row-actions="rowActions" row-key="planNo" empty-text="暂无入库订单">
-          <template #toolbar><strong>入库订单</strong><span>共 {{ total }} 条</span></template>
           <template #overseasWarehouse="{ row }">{{ overseasWarehouseLabel(row.overseasWarehouseCode, row.overseasWarehouseName) }}</template>
           <template #destination="{ row }">{{ text(row.fbaWarehouseCode) }}</template>
           <template #status="{ row }"><el-tag effect="light">{{ statusLabel(row.status) }}</el-tag></template>
diff --git a/src/modules/overseas-warehouse/permissions.test.mjs b/src/modules/overseas-warehouse/permissions.test.mjs
index d459e9b..cd405e3 100644
--- a/src/modules/overseas-warehouse/permissions.test.mjs
+++ b/src/modules/overseas-warehouse/permissions.test.mjs
@@ -57,6 +57,14 @@ test('keeps overseas warehouse writes behind operation-specific button permissio
   assert.match(returns, /v-if="canCreate" type="primary" @click="openCreate"/)
 })
 
+test('keeps all four overseas warehouse create buttons in the shared left-aligned table toolbar', () => {
+  for (const service of ['labeling', 'transfer', 'disposal']) {
+    assert.match(routes, new RegExp(`props: \\{ service: '${service}' \\}`))
+  }
+  assert.match(services, /<DataTable[\s\S]*?<template #toolbar-actions><el-button v-if="canCreate"/)
+  assert.match(returns, /<DataTable[\s\S]*?<template #toolbar-actions><el-button v-if="canCreate"/)
+})
+
 test('publishes all overseas operation permissions in the enterprise role editor', () => {
   for (const permission of [
     'merchant:overseas-warehouse:last-mile-order:list',
diff --git a/src/modules/overseas-warehouse/routes.ts b/src/modules/overseas-warehouse/routes.ts
index 5a5d32c..93ee9f0 100644
--- a/src/modules/overseas-warehouse/routes.ts
+++ b/src/modules/overseas-warehouse/routes.ts
@@ -1,4 +1,4 @@
-import { Boxes, PackageX, RefreshCcw, Tags, Truck, Warehouse } from '@lucide/vue'
+import { PackageX, RefreshCcw, Tags, Truck, Warehouse } from '@lucide/vue'
 import type { ClientModuleManifest } from '../types.ts'
 
 export const overseasWarehouseModule = {
@@ -65,13 +65,11 @@ export const overseasWarehouseModule = {
       path: 'overseas-warehouse/return-inventory', name: 'overseas-return-inventory',
       component: () => import('./views/ReturnInventoryView.vue'), release: 'active',
       meta: { title: '退货库存', description: '按箱号和 SKU 查询海外仓退货实收库存', permission: 'merchant:overseas-warehouse:return-inventory:list' },
-      navigation: { key: 'overseas-return-inventory', icon: Boxes },
     },
     {
       path: 'overseas-warehouse/return-cartons', name: 'overseas-return-cartons',
       component: () => import('./views/ReturnInventoryView.vue'), props: { cartonOnly: true }, release: 'active',
       meta: { title: '退货箱号管理', description: '查询签收及合箱生成的退货箱号和箱内库存', permission: 'merchant:overseas-warehouse:return-inventory:list' },
-      navigation: { key: 'overseas-return-cartons', icon: Boxes },
     },
     {
       path: 'overseas-warehouse/return-cartons/:cartonMark/detail', name: 'overseas-return-carton-detail',
diff --git a/src/modules/overseas-warehouse/views/ReturnInventoryView.vue b/src/modules/overseas-warehouse/views/ReturnInventoryView.vue
index 42a67e7..f82c6e1 100644
--- a/src/modules/overseas-warehouse/views/ReturnInventoryView.vue
+++ b/src/modules/overseas-warehouse/views/ReturnInventoryView.vue
@@ -223,7 +223,6 @@ onMounted(() => { if (props.detailPage) void Promise.all([loadCartonDetail(), lo
     <el-alert v-if="warehouseError" :title="warehouseError" type="warning" show-icon :closable="false"><el-button link type="primary" @click="loadWarehouses">重试加载海外仓</el-button></el-alert>
     <div class="return-inventory-table">
       <DataTable v-model:page="query.page" v-model:page-size="query.size" :data="currentRows" :columns="currentColumns" :loading="loading" :total="total" :page-sizes="[20, 50, 100]" :row-actions="rowActions" :empty-text="loadError ? '库存加载失败，请核对权限或重试' : '暂无数据'">
-        <template #toolbar><strong>{{ props.cartonOnly ? '退货箱号' : activeTab === 'summary' ? 'SKU 汇总库存' : '箱号明细' }}</strong><span>共 {{ total }} 条</span></template>
         <template #warehouse="{ row }">{{ warehouseLabel(row.overseasWarehouseId) }}</template>
         <template #status="{ row }"><el-tag effect="light">{{ cartonStatusLabel(row.status) }}</el-tag></template>
         <template #dimensions="{ row }">{{ row.length && row.width && row.height ? `${row.length} × ${row.width} × ${row.height} cm` : '—' }}</template>
diff --git a/src/modules/overseas-warehouse/views/ReturnOrdersView.vue b/src/modules/overseas-warehouse/views/ReturnOrdersView.vue
index a3d0c59..1e4aa52 100644
--- a/src/modules/overseas-warehouse/views/ReturnOrdersView.vue
+++ b/src/modules/overseas-warehouse/views/ReturnOrdersView.vue
@@ -167,7 +167,6 @@ watch(() => [query.page, query.size] as const, ([nextPage, nextSize], [previousP
     <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="退货签收筛选" :fields="queryFields" @search="search" />
     <div class="return-table-card">
       <DataTable v-model:page="query.page" v-model:page-size="query.size" :data="rows" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[15, 30, 50, 100]" :row-actions="rowActions" row-key="returnNo" empty-text="暂无退货预报">
-        <template #toolbar><strong>退货签收</strong><span>共 {{ total }} 条</span></template>
         <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新建退货预报</el-button></template>
         <template #warehouse="{ row }">{{ operationWarehouseLabel(row.overseasWarehouseId) }}</template>
         <template #relabel="{ row }"><el-tag v-if="row.needRelabel" type="warning" effect="light">需要换标</el-tag><span v-else>否</span></template>
diff --git a/src/modules/overseas-warehouse/views/WarehouseServiceView.vue b/src/modules/overseas-warehouse/views/WarehouseServiceView.vue
index ceed34c..fd5addf 100644
--- a/src/modules/overseas-warehouse/views/WarehouseServiceView.vue
+++ b/src/modules/overseas-warehouse/views/WarehouseServiceView.vue
@@ -1080,7 +1080,6 @@ function selectRelabelInventory(inboundOrderId: string) {
       <QueryToolbar v-model="listQueryModel" layout="grid" :ariaLabel="`${config.title}筛选`" :fields="listQueryFields" :search-on-reset="false" @search="query" @reset="resetListQuery" />
       <div class="warehouse-card warehouse-table-card">
         <DataTable v-model:page="page" v-model:page-size="pageSize" :data="submittedRows" :columns="listColumns" :loading="loading" :total="total" :page-sizes="[15, 30, 50, 100]" :row-actions="listRowActions" :empty-text="config.emptyText">
-          <template #toolbar><strong>{{ config.title }}</strong><span>共 {{ total }} 条</span></template>
           <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />{{ props.service === 'relabel' ? '新建退货换标单' : props.service === 'transfer' ? '新增订单' : `新增${config.title}` }}</el-button></template>
           <template v-if="props.service === 'transfer' && submittedRows.some((item) => item.__status === 'WAIT_CUSTOMER_CONFIRMATION')" #before-table><div class="warehouse-list-notice">部分入库完成订单已有 PDA 实测数据，请在对应行确认测量数据。</div></template>
         </DataTable>
diff --git a/src/navigation/clientNavigation.test.mjs b/src/navigation/clientNavigation.test.mjs
index 8afb9cf..53160e9 100644
--- a/src/navigation/clientNavigation.test.mjs
+++ b/src/navigation/clientNavigation.test.mjs
@@ -42,7 +42,7 @@ test('keeps account and notification routes as fixed-header utilities', () => {
   )
 })
 
-test('organises every implemented business page under five task-oriented sidebar entries', () => {
+test('organises customer-relevant business pages under five task-oriented sidebar entries', () => {
   assert.deepEqual(
     clientNavigation.filter((node) => !node.hidden).map((node) => ({
       title: node.title,
@@ -52,11 +52,11 @@ test('organises every implemented business page under five task-oriented sidebar
       { title: '首页', children: undefined },
       {
         title: '订单中心',
-        children: ['头程订单', '快速建草稿', '海外采购', '美国本土卡', '美本土散板', '入库订单', '派送订单'],
+        children: ['头程订单', '海外采购', '美国本土卡', '美本土散板'],
       },
       {
         title: '海外仓',
-        children: ['贴标申请', '仓储转运', '货物废弃', '退货预报与签收', '退货库存', '退货箱号管理'],
+        children: ['贴标申请', '仓储转运', '货物废弃', '退货预报与签收'],
       },
       {
         title: '费用与账单',
@@ -86,18 +86,13 @@ test('flattens visible leaves with unique paths', () => {
   assert.deepEqual(paths, [
     '/',
     '/orders/first-leg',
-    '/first-leg/quick-order',
     '/cross-border/procurement',
     '/cross-border/domestic-trucking',
     '/cross-border/pallet-shipping',
-    '/orders/inbound',
-    '/orders/delivery',
     '/overseas-warehouse/labeling',
     '/overseas-warehouse/storage-transfer',
     '/overseas-warehouse/cargo-disposal',
     '/overseas-warehouse/return-relabel',
-    '/overseas-warehouse/return-inventory',
-    '/overseas-warehouse/return-cartons',
     '/finance/account',
     '/finance/bills',
     '/company/profile',
@@ -340,7 +335,7 @@ test('keeps the dashboard route permission synchronized with navigation', () =>
   assert.match(dashboardRoute, /permission: 'dashboard:view'/)
 })
 
-test('keeps only the unified my-orders placeholder cataloged while activating implemented business pages', () => {
+test('keeps internal operational pages routable without exposing them in customer navigation', () => {
   const routerSource = [
     'first-leg',
     'cross-border',
@@ -357,15 +352,24 @@ test('keeps only the unified my-orders placeholder cataloged while activating im
     ['overseas-warehouse/cargo-disposal', 'WarehouseServiceView.vue'],
     ['overseas-warehouse/return-relabel', 'ReturnOrdersView.vue'],
     ['overseas-warehouse/return-inventory', 'ReturnInventoryView.vue'],
+    ['overseas-warehouse/return-cartons', 'ReturnInventoryView.vue'],
     ['orders/my', 'MyOrdersView.vue'],
     ['orders/inbound', 'InboundOrdersView.vue'],
     ['orders/delivery', 'DeliveryOrdersView.vue'],
   ]
 
+  const hiddenActivePaths = new Set([
+    'first-leg/quick-order',
+    'orders/inbound',
+    'orders/delivery',
+    'overseas-warehouse/return-inventory',
+    'overseas-warehouse/return-cartons',
+  ])
   for (const [path, view] of routes) {
-    if (path === 'first-leg/quick-order' || path.startsWith('cross-border/') || path.startsWith('overseas-warehouse/') || path === 'orders/inbound' || path === 'orders/delivery') {
+    if (path !== 'orders/my') {
       assert.match(routerSource, new RegExp(`path: '${path}'[\\s\\S]*?\\./views/${view.replace('.', '\\.')}[\\s\\S]*?release: 'active'[\\s\\S]*?permission:`))
-      assert.equal(getNavigationLeaves(clientNavigation).some((item) => item.path === `/${path}`), true)
+      const visible = !hiddenActivePaths.has(path)
+      assert.equal(getNavigationLeaves(clientNavigation).some((item) => item.path === `/${path}`), visible)
       continue
     }
     assert.match(routerSource, new RegExp(`path: '${path}'[\\s\\S]*?\\./views/${view.replace('.', '\\.')}[\\s\\S]*?release: 'prototype'[\\s\\S]*?permission:`))
diff --git a/src/navigation/clientNavigation.ts b/src/navigation/clientNavigation.ts
index 21caf49..e68501f 100644
--- a/src/navigation/clientNavigation.ts
+++ b/src/navigation/clientNavigation.ts
@@ -52,12 +52,9 @@ export const clientNavigation: ClientNavigationNode[] = [
     icon: ClipboardList,
     children: [
       requireLeaf('first-leg-orders', '头程订单'),
-      requireLeaf('first-leg-quick-order', '快速建草稿'),
       requireLeaf('cross-border-procurement'),
       requireLeaf('cross-border-domestic-trucking'),
       requireLeaf('cross-border-pallet-shipping'),
-      requireLeaf('orders-inbound', '入库订单'),
-      requireLeaf('orders-delivery', '派送订单'),
     ],
   },
   {
@@ -69,8 +66,6 @@ export const clientNavigation: ClientNavigationNode[] = [
       requireLeaf('overseas-storage-transfer'),
       requireLeaf('overseas-cargo-disposal'),
       requireLeaf('overseas-return-relabel', '退货预报与签收'),
-      requireLeaf('overseas-return-inventory'),
-      requireLeaf('overseas-return-cartons'),
     ],
   },
   {

From 60e875b2c6d8021e3f0352f7ef79e6c9eff1c176 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Sat, 19 Sep 2026 17:30:27 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 AGENTS.md                                     |   2 +-
 public/customer-recharge-qr.png               | Bin 0 -> 27120 bytes
 src/modules/finance/api/account.ts            |   9 ----
 .../finance/views/FinanceAccountView.test.mjs |   7 +--
 .../finance/views/FinanceAccountView.vue      |  48 ++++++++++--------
 5 files changed, 31 insertions(+), 35 deletions(-)
 create mode 100644 public/customer-recharge-qr.png

diff --git a/AGENTS.md b/AGENTS.md
index da6bea4..71eb0a5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -53,7 +53,7 @@
 | 装柜完成后的退税报关资料 | `src/modules/first-leg/views/FirstLegOrdersView.vue` 的“报关资料”、`components/CustomsDocumentsDialog.vue`、`api/customs.ts` | 只显示登录客户在同柜的退税入仓码；报关开始前可上传、替换、调整同一资料覆盖的一个或多个入仓码及删除误传，全部写入携带幂等键和版本；开始后只读冻结资料，整柜完成后才能下载平台回传的一对一完成文件。Backend `firstleg/customs/container/`、`customs-v1.yaml`，二进制归 `file/` |
 | 统一订单展示 | `src/modules/order-management/` | `src/modules/first-leg/` 与对应后端订单契约 |
 | 客户财务账单、入仓码联查、收款、未收余额与客户确认 | `src/modules/finance/`；确认与明细入口 `views/FinanceBillsView.vue`、`api/finance.ts`，入仓码通过 `src/modules/first-leg/public.ts` 复用 `InboundCodeAssociationDialog` | Backend `finance/`；账单行只显示服务端 `inboundCode` 并按登录客户查询业务关系，缺失显示“—”，不得回退内部 ID。收款方式由服务端枚举映射中文。出账或已出账调整后为 `PENDING_CONFIRMATION`，客户确认提交登录成员、`expectedVersion` 和幂等键 |
-| 客户资金账户、授信与充值申请 | `src/modules/finance/views/FinanceAccountView.vue`、`api/account.ts` | 显示当前企业 CNY 实际余额、冻结金额、授信额度、授信有效期、已用授信、冻结授信、总可用余额和不可变流水；数据加载前显示“—”，不得先伪装为零。授信到期日当天仍有效，次日已用授信并入实际余额，负数实际余额会阻止提交新订单。充值只展示服务端启用的微信/支付宝静态收款码，客户上传 JPG/PNG 付款截图后进入待审核。客户范围只取登录态，无收款码时禁止提交，不模拟支付成功 |
+| 客户资金账户、授信与充值申请 | `src/modules/finance/views/FinanceAccountView.vue`、`api/account.ts` | 显示当前企业 CNY 实际余额、冻结金额、授信额度、授信有效期、已用授信、冻结授信、总可用余额和不可变流水；数据加载前显示“—”，不得先伪装为零。授信到期日当天仍有效，次日已用授信并入实际余额，负数实际余额会阻止提交新订单。充值只展示服务端启用的平台统一静态收款码，客户上传 JPG/PNG 付款截图后进入待审核。客户范围只取登录态，无收款码时禁止提交，不模拟支付成功 |
 | 海外采购、美国本土卡与美本土散板 | `src/modules/cross-border/routes.ts`、`components/BusinessOrdersView.vue`、`api/businessOrders.ts` | 三个路由均为 `active`，客户范围只取 Token；采购创建的 `customerName` 只取当前认证会话企业名称，不允许自由输入或冒用其他客户。Backend `lastleg-service/` 的 `procurement/`、`trucking/`、`looseboard/` 客户接口 |
 | 海外仓入库订单 | `src/modules/order-management/routes.ts`、`views/InboundOrdersView.vue`、`api/inboundPlans.ts` | `orders/inbound` 为只读列表/详情，权限 `merchant:warehouse:inbound:list`；不展示或提交内部 ID |
 | 海外仓贴标、仓储转运、货物废弃 | `src/modules/overseas-warehouse/routes.ts`、`views/WarehouseServiceView.vue`、`api/warehouseServices.ts` | 三个路由均为 `active`；退货预报另见本节独立入口；贴标申请先选国外中转仓和有库存历史入仓单，换标类型为只换 SKU、只换箱唛、SKU+箱唛。涉及箱唛换标时，整张贴标申请只选择一个 FBA 目的仓，全部箱级明细统一提交该目的仓，模板和明细不再逐行选择目的仓。箱唛换标明细一行固定代表一箱，箱数不可编辑，提交也固定为 1。货物明细外层始终提供“SKU 关联”“箱号关联”“SKU 混箱换标”三套模板的下载、上传，不随换标类型切换；上传只进入待导入关系区，客户可勾选部分或全选后导入本次明细，只有进入明细的库存才随申请提交和冻结。明细也支持手动新增编辑，组合换标以仓库唛头连接旧/新 SKU 和新 FBA 箱唛关系。涉及箱唛换标时必须选择卡车、自提或快递；快递可选择打印面单并上传 PDF/图片。PDA 逐箱换标、上传照片并由仓库复核后，客户详情展示完工照片和“换标完成确认”；客户确认前不得继续出库，确认后卡车进入预排车，自提/快递进入换标出库待创建。历史库存位置不能解释成箱唛与具体托盘快照，客户页面不暴露托盘、库位和内部库存 ID |
diff --git a/public/customer-recharge-qr.png b/public/customer-recharge-qr.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bcdde67d164502cb639a335301429c1ccf474ec
GIT binary patch
literal 27120
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

literal 0
HcmV?d00001

diff --git a/src/modules/finance/api/account.ts b/src/modules/finance/api/account.ts
index ecff4df..859ef90 100644
--- a/src/modules/finance/api/account.ts
+++ b/src/modules/finance/api/account.ts
@@ -78,11 +78,6 @@ export interface RechargeRequest {
   reviewedAt: string | null
 }
 
-export interface RechargeChannel {
-  enabled: boolean
-  qrCodeUrl: string | null
-}
-
 export function getFinanceAccount() {
   return apiRequest<FinanceAccount>({ method: 'GET', url: '/client/finance/v1/account' })
 }
@@ -105,10 +100,6 @@ export async function getRechargeRequests(page: number, size: number) {
   return normalizePageResult(result)
 }
 
-export function getRechargeChannel() {
-  return apiRequest<RechargeChannel>({ method: 'GET', url: '/client/finance/v1/recharge-channel' })
-}
-
 export function createRechargeRequest(amount: string, file: File, idempotencyKey: string) {
   const formData = new FormData()
   formData.append('amount', amount)
diff --git a/src/modules/finance/views/FinanceAccountView.test.mjs b/src/modules/finance/views/FinanceAccountView.test.mjs
index a165140..c090ad5 100644
--- a/src/modules/finance/views/FinanceAccountView.test.mjs
+++ b/src/modules/finance/views/FinanceAccountView.test.mjs
@@ -8,7 +8,7 @@ const routesSource = readFileSync(new URL('../routes.ts', import.meta.url), 'utf
 const permissionsSource = readFileSync(new URL('../../tenant-management/contracts.ts', import.meta.url), 'utf8')
 
 test('uses only authenticated client finance account endpoints without customer scope', () => {
-  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests', '/client/finance/v1/recharge-channel']) {
+  for (const path of ['/client/finance/v1/account', '/client/finance/v1/account/ledger', '/client/finance/v1/recharge-requests']) {
     assert.match(apiSource, new RegExp(path.replaceAll('/', '\\/')))
   }
   assert.match(apiSource, /headers: \{ 'Idempotency-Key': idempotencyKey \}/)
@@ -54,8 +54,9 @@ test('renders server balances, ledger and recharge states without internal ident
 
 test('matches the frozen recharge workflow and preserves an idempotency key for failed retries', () => {
   assert.match(viewSource, /title="账户充值" width="760px"/)
-  for (const amount of ['50.00', '100.00', '200.00', '500.00']) assert.match(viewSource, new RegExp(amount.replace('.', '\\.')))
-  assert.match(viewSource, /rechargeChannel\.value\?\.enabled && rechargeChannel\.value\.qrCodeUrl/)
+  for (const amount of ['1000', '5000', '20000', '50000']) assert.match(viewSource, new RegExp(amount))
+  assert.match(viewSource, /自定义/)
+  assert.match(viewSource, /src="\/customer-recharge-qr\.png"/)
   assert.match(viewSource, /alt="平台收款二维码"/)
   assert.match(viewSource, /请扫描平台收款二维码，付款后上传截图。/)
   assert.match(viewSource, /accept="\.jpg,\.jpeg,\.png,image\/jpeg,image\/png"/)
diff --git a/src/modules/finance/views/FinanceAccountView.vue b/src/modules/finance/views/FinanceAccountView.vue
index 0d2640f..d39871c 100644
--- a/src/modules/finance/views/FinanceAccountView.vue
+++ b/src/modules/finance/views/FinanceAccountView.vue
@@ -9,12 +9,10 @@ import {
   createRechargeRequest,
   getAccountLedger,
   getFinanceAccount,
-  getRechargeChannel,
   getRechargeRequests,
   type AccountChangeType,
   type AccountLedgerEntry,
   type FinanceAccount,
-  type RechargeChannel,
   type RechargeRequest,
   type RechargeStatus,
 } from '../api/account'
@@ -23,10 +21,9 @@ const auth = useAuthStore()
 const account = ref<FinanceAccount | null>(null)
 const ledger = ref<AccountLedgerEntry[]>([])
 const rechargeRequests = ref<RechargeRequest[]>([])
-const rechargeChannel = ref<RechargeChannel | null>(null)
 const pageLoading = ref(false)
 const pageError = ref('')
-const channelsError = ref('')
+const qrCodeLoadError = ref(false)
 const ledgerPage = ref(1)
 const ledgerTotal = ref(0)
 const ledgerPageSize = ref(10)
@@ -40,10 +37,11 @@ const voucherFile = ref<File | null>(null)
 const voucherUpload = ref<UploadInstance>()
 let pendingIdempotencyKey = ''
 
-const form = reactive({ amount: '100.00' })
-const quickAmounts = ['50.00', '100.00', '200.00', '500.00']
+const form = reactive({ amount: '1000' })
+const quickAmounts = ['1000', '5000', '20000', '50000']
+const amountMode = ref<'preset' | 'custom'>('preset')
 const canRecharge = computed(() => auth.hasPermission('merchant:finance:recharge:create'))
-const channelReady = computed(() => Boolean(rechargeChannel.value?.enabled && rechargeChannel.value.qrCodeUrl))
+const channelReady = computed(() => !qrCodeLoadError.value)
 const amountValid = computed(() => {
   const value = Number(form.amount)
   return Number.isFinite(value) && value > 0 && /^\d+(?:\.\d{1,2})?$/.test(form.amount.trim())
@@ -106,7 +104,7 @@ function amountClass(amount: string) {
 async function loadAccountData() {
   pageLoading.value = true
   pageError.value = ''
-  channelsError.value = ''
+  qrCodeLoadError.value = false
   const requests = [getFinanceAccount(), getAccountLedger(ledgerPage.value, ledgerPageSize.value), getRechargeRequests(rechargePage.value, rechargePageSize.value)] as const
   try {
     const [accountResult, ledgerResult, rechargeResult] = await Promise.all(requests)
@@ -125,14 +123,6 @@ async function loadAccountData() {
   } finally {
     pageLoading.value = false
   }
-  if (canRecharge.value) {
-    try {
-      rechargeChannel.value = await getRechargeChannel()
-    } catch (error) {
-      rechargeChannel.value = null
-      channelsError.value = messageOf(error, '收款二维码加载失败，请稍后重试')
-    }
-  }
 }
 
 async function changeLedgerPage(nextPage: number) {
@@ -157,13 +147,26 @@ async function changeRechargePage(nextPage: number) {
 
 function openRecharge() {
   submitError.value = ''
+  qrCodeLoadError.value = false
+  amountMode.value = 'preset'
+  form.amount = '1000'
   rechargeVisible.value = true
 }
 
+function handleQrCodeError() {
+  qrCodeLoadError.value = true
+}
+
 function chooseAmount(amount: string) {
+  amountMode.value = 'preset'
   form.amount = amount
 }
 
+function chooseCustomAmount() {
+  amountMode.value = 'custom'
+  if (quickAmounts.includes(form.amount)) form.amount = ''
+}
+
 function handleVoucherChange(uploadFile: UploadFile, _uploadFiles: UploadFiles) {
   const file = uploadFile.raw
   if (!file) return
@@ -276,16 +279,17 @@ onMounted(() => { void loadAccountData() })
     <el-dialog v-model="rechargeVisible" title="账户充值" width="760px" :close-on-click-modal="false" :close-on-press-escape="!submitting" :show-close="!submitting" class="recharge-dialog">
       <div class="recharge-form">
         <label class="field-label" for="recharge-amount">充值金额</label>
-        <el-input id="recharge-amount" v-model="form.amount" size="large" inputmode="decimal" placeholder="请输入充值金额" aria-label="充值金额"><template #prefix>¥</template></el-input>
+        <el-input v-if="amountMode === 'custom'" id="recharge-amount" v-model="form.amount" size="large" inputmode="decimal" placeholder="请输入充值金额" aria-label="充值金额"><template #prefix>¥</template></el-input>
         <div class="quick-amounts" aria-label="快捷充值金额">
-          <button v-for="amount in quickAmounts" :key="amount" type="button" :class="{ active: form.amount === amount }" @click="chooseAmount(amount)">¥{{ Number(amount) }}</button>
+          <button v-for="amount in quickAmounts" :key="amount" type="button" :class="{ active: amountMode === 'preset' && form.amount === amount }" @click="chooseAmount(amount)">¥{{ Number(amount).toLocaleString() }}</button>
+          <button type="button" :class="{ active: amountMode === 'custom' }" @click="chooseCustomAmount">自定义</button>
         </div>
 
-        <div v-if="channelsError" class="channel-warning" role="alert">{{ channelsError }}</div>
-        <div v-else-if="channelReady" class="qr-panel">
-          <img :src="rechargeChannel?.qrCodeUrl || ''" alt="平台收款二维码">
+        <div v-if="channelReady" class="qr-panel">
+          <img src="/customer-recharge-qr.png" alt="平台收款二维码" @error="handleQrCodeError">
           <div><strong>扫码付款</strong><p>请扫描平台收款二维码，付款后上传截图。</p></div>
         </div>
+        <div v-else-if="qrCodeLoadError" class="channel-warning" role="alert">平台收款二维码资源不可用，请联系管理员更新二维码</div>
         <div v-else class="channel-warning" role="status">收款二维码尚未配置，暂不能提交充值申请。</div>
 
         <div class="voucher-upload">
@@ -317,7 +321,7 @@ onMounted(() => { void loadAccountData() })
 .amount-positive { color: #078a72; }.amount-negative { color: #b42318; }
 .account-state { display: flex; min-height: 240px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; border-radius: 8px; }.account-state--error { border: 1px solid #f5c2bd; background: #fff8f7; color: #b42318; }.account-state p { margin: 0; }
 .recharge-form { display: flex; flex-direction: column; gap: 16px; }.field-label { color: #4e6075; font-size: 14px; font-weight: 650; }
-.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.quick-amounts button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
+.quick-amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }.quick-amounts button { min-height: 54px; border: 1px solid #dbe3ed; border-radius: 10px; background: #f8fafc; color: #506077; cursor: pointer; font: inherit; }.quick-amounts button.active { border: 2px solid #1671c9; background: #eef8f7; color: #1467b8; font-weight: 700; }
 .qr-panel { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px; border: 1px solid #dbe3ed; border-radius: 12px; background: #f8fafc; }.qr-panel img { width: 210px; height: 210px; border: 1px solid #dae3ed; border-radius: 10px; background: #fff; object-fit: contain; }.qr-panel strong { color: var(--navy); font-size: 17px; }.qr-panel p { margin: 8px 0 0; color: #62758d; }
 .channel-warning { padding: 24px; border: 1px solid #f0d39b; border-radius: 10px; background: #fff9ed; color: #8b5b12; text-align: center; }.voucher-upload { display: grid; gap: 10px; }.voucher-upload :deep(.el-button) { display: inline-flex; align-items: center; gap: 6px; }.submit-error { margin: 0; color: #b42318; font-size: 13px; }.dialog-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.dialog-actions .el-button { min-height: 46px; margin: 0; }
 @media (max-width: 1200px) { .balance-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }.balance-summary article { border-bottom: 1px solid var(--client-border); }.balance-summary article:nth-child(3n) { border-right: 0; }.balance-summary article:nth-last-child(-n + 3) { border-bottom: 0; } }