From b3ab87f22cb2164e056b365bca04c353bd085505 Mon Sep 17 00:00:00 2001
From: ouyangxq <775153912@qq.com>
Date: Tue, 27 Oct 2026 16:55:34 +0800
Subject: [PATCH] style(finance): unify list and detail layouts and receipt
 controls

---
 src/modules/finance/financeDensity.css        |  30 ++++-
 .../pages/FinanceCustomerAccountsView.test.ts |  17 +--
 .../pages/FinanceCustomerAccountsView.vue     | 112 +++++++++---------
 .../pages/FinanceCustomerArapView.test.ts     |  10 +-
 .../finance/pages/FinanceCustomerArapView.vue |  43 ++-----
 .../FinanceCustomerStatementsView.test.ts     |  29 ++++-
 .../pages/FinanceCustomerStatementsView.vue   |  80 +++++++------
 .../FinanceFormalSettlementLayout.test.ts     |   8 +-
 .../pages/FinanceFormalSettlementPage.vue     |  91 +++++++-------
 .../finance/pages/FinancePresentation.test.ts |  28 ++---
 .../FinanceReceivableStatisticsView.test.ts   |   3 +
 .../pages/FinanceReceivableStatisticsView.vue |  40 ++++---
 .../overseas-warehouse/pages/PalletsView.vue  |   2 +-
 .../pallets/pages/PalletsView.vue             |   2 +-
 src/shared/components/DataTable.vue           |   2 +
 src/shared/components/FormSection.vue         |   2 +-
 src/styles/adminDensity.test.ts               | 104 ++++++++++++++++
 17 files changed, 385 insertions(+), 218 deletions(-)

diff --git a/src/modules/finance/financeDensity.css b/src/modules/finance/financeDensity.css
index 3e7b4049..1b606a86 100644
--- a/src/modules/finance/financeDensity.css
+++ b/src/modules/finance/financeDensity.css
@@ -7,7 +7,6 @@
 .admin-density .finance-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--admin-space-3); }
 .admin-density .finance-detail-context { min-width: 0; color: var(--workbench-muted); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
 .admin-density .statement-summary-grid .statement-summary-item--remark { grid-column: span 2; }
-.admin-density .settlement-summary.density-detail-overview { padding: 0; border: 0; }
 .admin-density .statement-summary-section { padding: var(--admin-space-5); }
 .admin-density .account-metrics .is-negative,
 .admin-density .density-detail-overview .is-danger,
@@ -15,3 +14,32 @@
 .admin-density .density-detail-overview .is-success,
 .admin-density-dialog .partial-summary .is-success { color: var(--el-color-success); }
 .admin-density-dialog .partial-summary { margin-bottom: var(--admin-space-5); }
+
+/* Outrank AdminPage scoped spacing regardless of stylesheet load order; the toolbar supplies the gap. */
+.admin-workbench.receivable-statistics-page.admin-page.is-spacing-compact,
+.admin-workbench.finance-settlement-page.admin-page.is-spacing-compact { gap: 0; }
+.admin-workbench .finance-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--workbench-grid-gap); }
+@media (max-width: 720px) {
+  .admin-workbench .finance-metric-grid { grid-template-columns: 1fr; }
+}
+
+/* The outer AdminPage owns the screen inset for every finance detail section. */
+@media screen {
+  .admin-density .detail-page-layout.finance-density-detail > :is(.detail-page-layout__header, .detail-page-layout__summary, .detail-page-layout__content, .detail-page-layout__footer),
+  .admin-density .finance-density-detail > .detail-page-layout__header > .density-detail-header,
+  .admin-density .finance-density-detail > .detail-page-layout__summary > :is(.density-detail-overview, .statement-summary-section),
+  .admin-density .finance-density-detail > .detail-page-layout__content > .settlement-detail-content {
+    padding-inline: 0;
+  }
+}
+
+/* Detail sections share one vertical rhythm instead of stacking section padding. */
+.admin-density .finance-density-detail > .detail-page-layout__content,
+.admin-density .finance-density-detail .settlement-detail-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--admin-space-5);
+}
+.admin-density .finance-density-detail > .detail-page-layout__content .density-form-section {
+  padding-block: 0;
+}
diff --git a/src/modules/finance/pages/FinanceCustomerAccountsView.test.ts b/src/modules/finance/pages/FinanceCustomerAccountsView.test.ts
index daa356e5..123aa5d4 100644
--- a/src/modules/finance/pages/FinanceCustomerAccountsView.test.ts
+++ b/src/modules/finance/pages/FinanceCustomerAccountsView.test.ts
@@ -65,7 +65,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(page).toContain('v-else-if="!detailOpen"')
     expect(page).toContain('返回客户账户')
     expect(page).toContain('<DetailPageLayout')
-    expect(page).toContain('class="density-detail-overview account-metrics"')
+    expect(page).toContain('class="account-metrics"')
     for (const metric of ['实际余额', '冻结金额', '总可用余额', '授信额度', '已用授信', '可用授信']) expect(page).toContain(metric)
     expect(page).toContain('class="ledger-query workbench-query"')
     expect(page).toContain('@search="ledgerPage = 1; void loadLedger($event)"')
@@ -83,18 +83,18 @@ describe('FinanceCustomerAccountsView delivery', () => {
 
   it('keeps term editing aligned with the account summary and nearby actions', () => {
     for (const marker of ['class="term-section density-form-section"', 'class="term-editor"', '账期天数', '#footer', '保存账期']) expect(page).toContain(marker)
-    expect(page).toContain('density-detail-overview account-metrics')
+    expect(page).toContain('account-metrics')
     for (const column of ['实际余额(CNY)', '冻结金额(CNY)', '总可用余额(CNY)', '授信额度(CNY)', '已用授信(CNY)', '待审核充值']) expect(page).toContain(column)
     expect(page).toContain('grid-template-columns: 120px minmax(0, 220px)')
     expect(page).toContain('justify-content: start')
     expect(page).toContain('class="surface-panel finance-account-detail__surface workbench-panel is-flush is-page-surface"')
     expect(page).toContain('class="density-detail-header"')
     expect(page).toContain('padding: var(--admin-space-4) 0')
-    expect(page).toContain('class="detail-table-scroll workbench-table"')
+    expect(page).toContain('class="detail-table-scroll workbench-table is-page-surface"')
     expect(page).toContain('class="ledger-identifier"')
     expect(page).toContain('class="ledger-document"')
-    expect(page).toContain('text-overflow: ellipsis')
-    expect(page).toContain('white-space: nowrap')
+    expect(page).toContain('overflow-wrap: anywhere')
+    expect(page).not.toContain('text-overflow: ellipsis')
   })
 
   it('keeps account detail and term editing readable across the 1920 workspace', () => {
@@ -186,7 +186,10 @@ describe('FinanceCustomerAccountsView delivery', () => {
     await flushPromises()
 
     expect(wrapper.text()).toContain('客户A')
-    expect(wrapper.text()).toContain('C-001')
+    const profile = wrapper.find('.customer-profile-section')
+    expect(profile.text()).toContain('客户名称客户A')
+    expect(profile.text()).not.toContain('客户编号')
+    expect(profile.text()).not.toContain('C-001')
     expect(wrapper.text()).toContain('张三')
     expect(wrapper.text()).toContain('13800000000')
     const metrics = wrapper.find('.account-metrics')
@@ -194,7 +197,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
     expect(metrics.text()).toContain('实际余额¥126580.50 CNY')
     expect(metrics.text()).toContain('冻结金额¥8500.00 CNY')
     expect(metrics.text()).toContain('总可用余额¥138080.50 CNY')
-    expect(metrics.text()).toContain('授信额度¥20000.00 2028-09-10 到期')
+    expect(metrics.text()).toContain('授信额度¥20000.00 CNY2028-09-10 到期')
     expect(metrics.text()).toContain('已用授信¥0.00 CNY')
     expect(metrics.text()).toContain('可用授信¥20000.00 CNY')
     for (const auxiliary of ['待开账金额', '本期已收', '总成本', '已付成本', '已收客户款', '客户线下支付']) expect(metrics.text()).not.toContain(auxiliary)
diff --git a/src/modules/finance/pages/FinanceCustomerAccountsView.vue b/src/modules/finance/pages/FinanceCustomerAccountsView.vue
index 6033a7ee..5216714b 100644
--- a/src/modules/finance/pages/FinanceCustomerAccountsView.vue
+++ b/src/modules/finance/pages/FinanceCustomerAccountsView.vue
@@ -4,7 +4,7 @@ import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ArrowLeft, CreditCard, Download, MinusCircle, PlusCircle, Save } from '@lucide/vue'
+import { ArrowLeft, CircleCheck, CreditCard, Download, LockKeyhole, MinusCircle, PlusCircle, Save, Wallet } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
@@ -100,13 +100,13 @@ const columns: DataTableColumn[] = [
   { key: 'customerCode', label: '客户编号', width: 150, slotName: 'customerCode' },
   { key: 'contactName', label: '联系人', width: 130, slotName: 'contactName' },
   { key: 'contactPhone', label: '联系电话', width: 150, slotName: 'contactPhone' },
-  { key: 'actualBalance', label: '实际余额(CNY)', width: 155, slotName: 'actualBalance' },
-  { key: 'frozenBalance', label: '冻结金额(CNY)', width: 150, slotName: 'frozenBalance' },
-  { key: 'availableBalance', label: '总可用余额(CNY)', width: 155, slotName: 'availableBalance' },
-  { key: 'creditLimit', label: '授信额度(CNY)', width: 155, slotName: 'creditLimit' },
+  { key: 'actualBalance', label: '实际余额(CNY)', align: 'right', width: 155, slotName: 'actualBalance' },
+  { key: 'frozenBalance', label: '冻结金额(CNY)', align: 'right', width: 150, slotName: 'frozenBalance' },
+  { key: 'availableBalance', label: '总可用余额(CNY)', align: 'right', width: 155, slotName: 'availableBalance' },
+  { key: 'creditLimit', label: '授信额度(CNY)', align: 'right', width: 155, slotName: 'creditLimit' },
   { key: 'creditExpiresOn', label: '授信有效期', width: 140, slotName: 'creditExpiresOn' },
-  { key: 'creditUsed', label: '已用授信(CNY)', width: 150, slotName: 'creditUsed' },
-  { key: 'pendingRechargeCount', label: '待审核充值', width: 120, slotName: 'pendingRechargeCount' },
+  { key: 'creditUsed', label: '已用授信(CNY)', align: 'right', width: 150, slotName: 'creditUsed' },
+  { key: 'pendingRechargeCount', label: '待审核充值', align: 'right', width: 120, slotName: 'pendingRechargeCount' },
   { key: 'status', label: '客户状态', width: 110, slotName: 'status' },
   { key: 'lastChangedAt', label: '最近变动', width: 170, slotName: 'lastChangedAt' },
 ]
@@ -123,18 +123,18 @@ const ledgerQueryFields: QueryField[] = [
 const ledgerColumns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
   { key: 'ledgerId', label: '流水号', width: 180, slotName: 'ledgerId' }, { key: 'occurredAt', label: '发生时间', width: 170, slotName: 'occurredAt' }, { key: 'businessType', label: '业务类型', width: 140, slotName: 'businessType' },
-  { key: 'documentNo', label: '关联单据', width: 220, slotName: 'documentNo' }, { key: 'amount', label: '余额变动(CNY)', width: 145, slotName: 'amount' },
+  { key: 'documentNo', label: '关联单据', width: 220, slotName: 'documentNo' }, { key: 'amount', label: '余额变动(CNY)', width: 145, align: 'right', slotName: 'amount' },
   { key: 'paymentMethod', label: '支付方式', width: 130, slotName: 'ledgerPaymentMethod' },
-  { key: 'actualBalanceAfter', label: '变动后实际余额', width: 160, slotName: 'actualBalanceAfter' },
-  { key: 'frozenBalanceAfter', label: '变动后冻结金额', width: 160, slotName: 'frozenBalanceAfter' },
-  { key: 'availableBalanceAfter', label: '变动后可用余额', width: 160, slotName: 'availableBalanceAfter' },
-  { key: 'creditUsedAfter', label: '变动后已用授信', width: 160, slotName: 'creditUsedAfter' },
+  { key: 'actualBalanceAfter', label: '变动后实际余额', width: 160, align: 'right', slotName: 'actualBalanceAfter' },
+  { key: 'frozenBalanceAfter', label: '变动后冻结金额', width: 160, align: 'right', slotName: 'frozenBalanceAfter' },
+  { key: 'availableBalanceAfter', label: '变动后可用余额', width: 160, align: 'right', slotName: 'availableBalanceAfter' },
+  { key: 'creditUsedAfter', label: '变动后已用授信', width: 160, align: 'right', slotName: 'creditUsedAfter' },
   { key: 'operatorName', label: '操作人', width: 140, slotName: 'operatorName' }, { key: 'remark', label: '备注', minWidth: 180 },
 ]
 const rechargeColumns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 150, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
   { key: 'requestNo', label: '申请单号', minWidth: 190 }, { key: 'createdAt', label: '提交时间', width: 170, slotName: 'createdAt' },
-  { key: 'amount', label: '充值金额(CNY)', width: 150, slotName: 'amount' },
+  { key: 'amount', label: '充值金额(CNY)', width: 150, align: 'right', slotName: 'amount' },
   { key: 'voucherFileName', label: '付款凭证', minWidth: 170, slotName: 'voucherFileName' }, { key: 'submittedByName', label: '提交人', width: 130 },
   { key: 'status', label: '状态', width: 110, slotName: 'status' }, { key: 'reviewedByName', label: '审核人', width: 130 },
   { key: 'reviewRemark', label: '审核备注', minWidth: 180 }, { key: 'reviewedAt', label: '审核时间', width: 170, slotName: 'reviewedAt' },
@@ -516,18 +516,43 @@ onBeforeUnmount(clearVoucherPreview)
           <template #pagination-left><span>共 {{ total }} 个客户账户</span></template>
         </DataTable></section>
     </ListPageLayout>
-    <AdminPage v-else as="div" class="finance-account-detail admin-density" spacing="normal">
+    <AdminPage v-else as="div" class="finance-account-detail admin-density admin-workbench is-embedded" spacing="normal">
       <section class="surface-panel finance-account-detail__surface workbench-panel is-flush is-page-surface">
       <DetailPageLayout class="finance-account-detail__layout finance-density-detail" :aria-label="editing ? '维护客户账期' : '客户账户详情'">
-        <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button><h1 class="density-detail-title">{{ selected ? customerName(selected.customerId, selected.customerName) : '客户账户' }}</h1><span class="finance-detail-context">{{ editing ? '维护客户账期' : 'CNY 资金账户' }}</span></div><div v-if="selected && !editing" class="finance-detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button></div></div></template>
-        <template v-if="selected && !ledgerError" #summary><dl class="density-detail-overview account-metrics" aria-label="客户资金账户余额"><div class="account-metric is-actual"><dt>实际余额</dt><dd :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }} <small>CNY</small></dd></div><div class="account-metric is-frozen"><dt>冻结金额</dt><dd>{{ money(selected.frozenBalance) }} <small>CNY</small></dd></div><div class="account-metric is-available"><dt>总可用余额</dt><dd>{{ money(selected.availableBalance) }} <small>CNY</small></dd></div><div class="account-metric"><dt>授信额度</dt><dd>{{ money(selected.creditLimit) }} <small>{{ creditExpiryLabel(selected) }}</small></dd></div><div class="account-metric is-frozen"><dt>已用授信</dt><dd>{{ money(selected.creditUsed) }} <small>CNY</small></dd></div><div class="account-metric"><dt>可用授信</dt><dd>{{ money(selected.availableCredit) }} <small>CNY</small></dd></div></dl></template>
+        <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button><h1 class="density-detail-title">{{ selected ? customerName(selected.customerId, selected.customerName) : '客户账户' }}</h1><span class="finance-detail-context">{{ editing ? '维护客户账期' : 'CNY 资金账户' }}</span></div><div v-if="selected && !editing" class="finance-detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></div></div></template>
+        <template v-if="selected && !ledgerError" #summary><section class="account-metrics" aria-label="客户资金账户余额">
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="blue">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Wallet aria-hidden="true" /></span><h2 class="workbench-metric-label">实际余额</h2></div>
+            <div class="workbench-metric-value"><strong :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }}</strong> <span>CNY</span></div>
+          </article>
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="purple">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><LockKeyhole aria-hidden="true" /></span><h2 class="workbench-metric-label">冻结金额</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(selected.frozenBalance) }}</strong> <span>CNY</span></div>
+          </article>
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="green">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CircleCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">总可用余额</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(selected.availableBalance) }}</strong> <span>CNY</span></div>
+          </article>
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="blue">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CreditCard aria-hidden="true" /></span><h2 class="workbench-metric-label">授信额度</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(selected.creditLimit) }}</strong> <span>CNY</span></div><div class="workbench-note" :class="{ 'credit-expired': selected.creditExpiresOn && !selected.creditActive }">{{ creditExpiryLabel(selected) }}</div>
+          </article>
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="purple">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CreditCard aria-hidden="true" /></span><h2 class="workbench-metric-label">已用授信</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(selected.creditUsed) }}</strong> <span>CNY</span></div>
+          </article>
+          <article class="account-metric workbench-metric workbench-tone is-compact" data-tone="green">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CreditCard aria-hidden="true" /></span><h2 class="workbench-metric-label">可用授信</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(selected.availableCredit) }}</strong> <span>CNY</span></div>
+          </article>
+        </section></template>
         <LoadErrorState v-if="ledgerError" :title="editing ? '客户账期加载失败' : '账户流水加载失败'" :message="ledgerError.message" :loading="ledgerLoading || detailLoading" @retry="retryDrawer"><template #details><ApiErrorMeta :details="ledgerError" /></template></LoadErrorState>
         <template v-else-if="selected">
-          <FormSection class="customer-profile-section density-form-section" title="客户信息" :bordered="false"><el-descriptions border class="density-descriptions" :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
+          <FormSection class="customer-profile-section density-form-section" title="客户信息" :bordered="false"><el-descriptions border class="density-descriptions account-profile" :column="3"><el-descriptions-item label="客户名称">{{ customerName(selected.customerId, selected.customerName) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
           <FormSection v-if="!editing" class="recharge-section density-form-section" title="充值申请" :bordered="false">
             <LoadErrorState v-if="rechargeError" title="充值申请加载失败" :message="rechargeError.message" :loading="rechargeLoading" @retry="loadRechargeRequests" />
-            <div v-else class="detail-table-scroll workbench-table"><DataTable class="recharge-table" :data="sortedRechargeRequests" :columns="rechargeColumns" :loading="rechargeLoading" row-key="requestId" empty-text="暂无充值申请" column-settings-mode="hide">
-              <template #actions="{ row }"><div class="density-actions"><el-button data-tone="warning" class="density-action" v-if="canReviewRecharge && row.status === 'PENDING'" size="small" @click="openReview(row as FinanceRechargeRequest)">审核</el-button></div></template>
+            <div v-else class="detail-table-scroll workbench-table is-page-surface"><DataTable class="recharge-table" :data="sortedRechargeRequests" :columns="rechargeColumns" :loading="rechargeLoading" row-key="requestId" empty-text="暂无充值申请" column-settings-mode="hide">
+              <template #actions="{ row }"><div class="density-actions row-actions admin-text-actions"><el-button data-tone="warning" class="density-action" v-if="canReviewRecharge && row.status === 'PENDING'" size="small" @click="openReview(row as FinanceRechargeRequest)">审核</el-button></div></template>
               <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template><template #reviewedAt="{ row }">{{ row.reviewedAt ? formatDateTime(row.reviewedAt) : '—' }}</template>
               <template #amount="{ row }"><strong class="balance-value is-actual">{{ money(row.amount) }}</strong></template>
               <template #voucherFileName="{ row }"><el-button v-if="row.voucherFileId" link type="primary" @click="previewVoucher(row as FinanceRechargeRequest)">{{ row.voucherFileName || '预览付款凭证' }}</el-button><span v-else>—</span></template>
@@ -535,8 +560,7 @@ onBeforeUnmount(clearVoucherPreview)
             </DataTable></div>
           </FormSection>
           <FormSection v-if="!editing" class="ledger-section density-form-section" title="账户流水" :bordered="false">
-            <QueryToolbar v-model="ledgerFilters" class="ledger-query workbench-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; void loadLedger($event)" />
-            <div class="detail-table-scroll workbench-table"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #actions="{ row }"><el-button v-if="canRefund(row as FinanceLedgerEntry)" link type="primary" @click="openRefund(row as FinanceLedgerEntry)">退款</el-button><span v-else>—</span></template><template #toolbar-actions><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.businessNo || row.ledgerId)">{{ displayLedgerId(row.businessNo || row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ row.occurredDate || formatDateTime(row.createdAt || row.occurredAt) }}</template><template #businessType="{ row }">{{ walletBusinessType(row.changeType || row.businessType) }}</template><template #documentNo="{ row }"><span v-if="row.changeType === 'REFUND'">原消费：</span><span class="ledger-document" :title="displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo)">{{ displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo) }}</span></template><template #amount="{ row }">{{ money(row.amount) }}</template><template #ledgerPaymentMethod="{ row }">{{ row.paymentMethod ? paymentMethodLabel(row.paymentMethod) : '—' }}</template><template #actualBalanceAfter="{ row }">{{ money(row.actualBalanceAfter) }}</template><template #frozenBalanceAfter="{ row }">{{ money(row.frozenBalanceAfter) }}</template><template #availableBalanceAfter="{ row }">{{ money(row.availableBalanceAfter) }}</template><template #creditUsedAfter="{ row }">{{ money(row.creditUsedAfter) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
+            <div class="detail-table-scroll workbench-table is-page-surface"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" appearance="integrated" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #filters><QueryToolbar v-model="ledgerFilters" class="ledger-query workbench-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; void loadLedger($event)" /></template><template #actions="{ row }"><el-button v-if="canRefund(row as FinanceLedgerEntry)" link type="primary" @click="openRefund(row as FinanceLedgerEntry)">退款</el-button><span v-else>—</span></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.businessNo || row.ledgerId)">{{ displayLedgerId(row.businessNo || row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ row.occurredDate || formatDateTime(row.createdAt || row.occurredAt) }}</template><template #businessType="{ row }">{{ walletBusinessType(row.changeType || row.businessType) }}</template><template #documentNo="{ row }"><span v-if="row.changeType === 'REFUND'">原消费：</span><span class="ledger-document" :title="displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo)">{{ displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo) }}</span></template><template #amount="{ row }">{{ money(row.amount) }}</template><template #ledgerPaymentMethod="{ row }">{{ row.paymentMethod ? paymentMethodLabel(row.paymentMethod) : '—' }}</template><template #actualBalanceAfter="{ row }">{{ money(row.actualBalanceAfter) }}</template><template #frozenBalanceAfter="{ row }">{{ money(row.frozenBalanceAfter) }}</template><template #availableBalanceAfter="{ row }">{{ money(row.availableBalanceAfter) }}</template><template #creditUsedAfter="{ row }">{{ money(row.creditUsedAfter) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
           </FormSection>
           <FormSection v-else class="term-section density-form-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" placeholder="请输入账期天数" /><span class="term-unit">天</span></div></div></FormSection>
         </template>
@@ -670,27 +694,26 @@ onBeforeUnmount(clearVoucherPreview)
   object-fit: contain;
 }
 
-.ledger-section {
-  padding: var(--admin-space-4) 0 0;
+.account-metrics {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--admin-space-5);
+  padding-block: var(--admin-space-3) 0;
 }
 
-.recharge-section {
-  padding: var(--admin-space-4) 0 0;
-  border-bottom: 1px solid var(--workbench-border);
+.account-metrics .workbench-metric-value > .is-negative,
+.account-metrics .credit-expired {
+  color: var(--el-color-danger);
+}
+
+.account-profile :deep(.el-descriptions__table) {
+  table-layout: fixed;
 }
 
 .recharge-table {
   min-width: 0;
 }
 
-.ledger-query {
-  margin-bottom: var(--admin-space-3);
-}
-
-:deep(.ledger-query.query-toolbar) {
-  padding: 0;
-}
-
 .detail-table-scroll {
   overflow-x: auto;
 }
@@ -702,9 +725,7 @@ onBeforeUnmount(clearVoucherPreview)
 .ledger-identifier,
 .ledger-document {
   display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
   font-variant-numeric: tabular-nums;
 }
 
@@ -761,12 +782,6 @@ onBeforeUnmount(clearVoucherPreview)
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .account-metric:nth-child(3),
-  .account-metric:nth-child(5) {
-    padding-left: 0;
-    border-left: 0;
-  }
-
   .finance-account-detail__surface {
     width: 100%;
   }
@@ -795,16 +810,7 @@ onBeforeUnmount(clearVoucherPreview)
     gap: 12px;
   }
 
-  .account-metric,
-  .account-metric:first-child,
-  .account-metric:nth-child(3),
-  .account-metric:nth-child(5) {
-    padding-left: 0;
-  }
 
-  .account-metric + .account-metric {
-    border-left: 0;
-  }
 }
 
 @media (max-width: 480px) {
diff --git a/src/modules/finance/pages/FinanceCustomerArapView.test.ts b/src/modules/finance/pages/FinanceCustomerArapView.test.ts
index 854fe8c8..6bd103b7 100644
--- a/src/modules/finance/pages/FinanceCustomerArapView.test.ts
+++ b/src/modules/finance/pages/FinanceCustomerArapView.test.ts
@@ -143,7 +143,7 @@ describe('FinanceCustomerArapView G2 operations', () => {
       await body.get('button').trigger('click')
       await flushPromises()
       expect(wrapper.get('.arap-metrics').text()).toContain(label)
-      expect(wrapper.get('.arap-settlement').text()).toContain('不适用')
+      expect(wrapper.get('.arap-information').text()).toContain('不适用')
     },
   )
 
@@ -273,7 +273,9 @@ describe('FinanceCustomerArapView G2 operations', () => {
     expect(wrapper.find('.arap-metrics').exists()).toBe(true)
     expect(wrapper.findAll('.arap-metric')).toHaveLength(4)
     expect(wrapper.find('.arap-information').text()).toContain('单据信息')
-    expect(wrapper.find('.arap-settlement').text()).toContain('审核与结算')
+    expect(wrapper.find('.arap-settlement').exists()).toBe(false)
+    expect(wrapper.find('.arap-information').text()).toContain('已生成对账单')
+    expect(wrapper.find('.arap-information').text()).toContain('审核原因')
     expect(wrapper.find('.operation-log').text()).toContain('操作记录')
     expect(wrapper.find('.arap-information').text()).toContain('业务日期')
     expect(wrapper.find('.arap-information').text()).not.toContain('T00:00:00')
@@ -282,8 +284,8 @@ describe('FinanceCustomerArapView G2 operations', () => {
   it('keeps the fee-source detail readable across the 1920 workspace', () => {
     const page = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerArapView.vue'), 'utf8')
     expect(page).toContain('width: min(100%, 1920px)')
-    expect(page).toContain('@media (min-width: 1920px)')
-    expect(page).toContain('grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr)')
+    expect(page).toContain('<el-descriptions border :column="3" class="arap-detail density-descriptions">')
+    expect(page).not.toContain('arap-detail-grid')
     expect(page).toContain('finance-density-detail')
     expect(page).not.toContain('max-width: 520px')
   })
diff --git a/src/modules/finance/pages/FinanceCustomerArapView.vue b/src/modules/finance/pages/FinanceCustomerArapView.vue
index d1cf5741..b487960c 100644
--- a/src/modules/finance/pages/FinanceCustomerArapView.vue
+++ b/src/modules/finance/pages/FinanceCustomerArapView.vue
@@ -141,10 +141,17 @@ function closeCustomerSelectOnScroll() {
 function isUpstreamSource(source: { sourceSystem?: unknown; sourceType?: unknown }) {
   return isFirstlegSource(source) || String(source.sourceSystem || '').trim().toUpperCase() === 'LASTLEG'
 }
+// Eight fixed fields precede settlement status; optional source fields also occupy a cell.
+const settlementStatusSpan = computed(() => {
+  const source = detail.value
+  const precedingFields = 8 + Number(source?.direction === 'PAYABLE') + Number(source?.quantity != null) + Number(Boolean(source?.periodStart))
+  return 3 - precedingFields % 3
+})
+
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' }, { key: 'selection', type: 'selection', width: 48, fixed: 'left', selectable: isSelectableReceivable }, { key: 'direction', label: '收付方向', width: 100, slotName: 'direction' },
   { key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' }, { key: 'businessReference', label: '关联业务', minWidth: 220, slotName: 'businessReference' }, { key: 'sourceType', label: '来源类型', width: 120, slotName: 'sourceType' },
-  { key: 'feeName', label: '费用项目', minWidth: 150 }, { key: 'amount', label: '金额(CNY)', width: 130 }, { key: 'supplierName', label: '供应商', minWidth: 170, slotName: 'supplierName' },
+  { key: 'feeName', label: '费用项目', minWidth: 150 }, { key: 'amount', label: '金额(CNY)', align: 'right', width: 130 }, { key: 'supplierName', label: '供应商', minWidth: 170, slotName: 'supplierName' },
   { key: 'status', label: '来源状态', width: 130, slotName: 'sourceStatus' },
   { key: 'reviewStatus', label: '审核状态', width: 120, slotName: 'status' }, { key: 'statementGenerated', label: '已生成对账单', width: 140, slotName: 'generated' }, { key: 'businessDate', label: '业务发生日', width: 170, slotName: 'businessDate' },
 ]
@@ -418,13 +425,13 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
         <template #businessDate="{ row }">{{ formatBusinessDate(row.businessDate) }}</template><template #pagination-left>已选 {{ selectedRows.length }} 笔 · 应收金额 {{ money(selectedAmount) }} CNY</template>
       </DataTable></section>
     </ListPageLayout>
-    <AdminPage v-else as="div" class="finance-arap-detail admin-density" spacing="normal">
+    <AdminPage v-else as="div" class="finance-arap-detail admin-density admin-workbench is-embedded" spacing="normal">
       <section class="surface-panel finance-arap-detail__surface workbench-panel is-flush is-page-surface">
       <DetailPageLayout class="finance-arap-detail__layout finance-density-detail" aria-label="费用来源详情">
         <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><h1 class="density-detail-title">{{ selected?.documentNo || '费用来源详情' }}</h1><span class="finance-detail-context">{{ selected ? customerName(selected.customerId, selected.customerName) : '—' }}</span><StatusBadge v-if="detail" :status="statusLabel(detail.reviewStatus)" /></div><div class="finance-detail-actions"><el-button v-if="canEditSource && detail && selected && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && selected && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected)"><FileCheck2 :size="16" />审核</el-button></div></div></template>
         <template v-if="detail" #summary><dl class="density-detail-overview arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><dt>结算金额</dt><dd>{{ money(detail.amount) }} <small>CNY</small></dd></div><div class="arap-metric"><dt>收付方向</dt><dd>{{ financeDirectionLabel(detail.direction) }}</dd></div><div class="arap-metric"><dt>来源状态</dt><dd>{{ sourceStatusDisplay(detail.sourceStatus) }}</dd></div><div class="arap-metric"><dt>审核状态</dt><dd>{{ statusLabel(detail.reviewStatus) }}</dd></div></dl></template>
         <LoadErrorState v-if="detailError" title="费用来源详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="selected && loadDetail(selected)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
-        <template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information density-form-section" title="单据信息" :bordered="false"><el-descriptions border :column="2" class="arap-detail density-descriptions"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) || '—' }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement density-form-section" title="审核与结算" :bordered="false"><el-descriptions border :column="1" class="arap-detail density-descriptions"><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.direction === 'PAYABLE' ? '不适用' : detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log density-form-section" title="操作记录" :bordered="false"><div class="workbench-table"><DataTable :data="operationLogRows" :columns="operationLogColumns" row-key="rowKey" column-settings-mode="hide" empty-text="暂无操作记录"><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #action="{ row }">{{ financeOperationActionLabel(row.action) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template><template #result="{ row }">{{ row.remark || financeOperationResultLabel(row.result) }}</template></DataTable></div></FormSection></template>
+        <template v-else-if="detail"><FormSection class="arap-information density-form-section" title="单据信息与审核结算" :bordered="false"><el-descriptions border :column="3" class="arap-detail density-descriptions"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) || '—' }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单" :span="settlementStatusSpan">{{ detail.direction === 'PAYABLE' ? '不适用' : detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因" :span="3">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="operation-log density-form-section" title="操作记录" :bordered="false"><div class="workbench-table is-page-surface"><DataTable :data="operationLogRows" :columns="operationLogColumns" row-key="rowKey" column-settings-mode="hide" empty-text="暂无操作记录"><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #action="{ row }">{{ financeOperationActionLabel(row.action) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template><template #result="{ row }">{{ row.remark || financeOperationResultLabel(row.result) }}</template></DataTable></div></FormSection></template>
       </DetailPageLayout>
       </section>
     </AdminPage>
@@ -522,23 +529,12 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
   color: var(--workbench-muted);
 }
 
-.arap-detail-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
-  gap: var(--admin-space-6);
-  border-bottom: 1px solid var(--workbench-border);
-}
 
 .arap-information,
-.arap-settlement,
 .operation-log {
   padding: var(--admin-space-4) 0;
 }
 
-.arap-settlement {
-  padding-left: var(--admin-space-6);
-  border-left: 1px solid var(--workbench-border);
-}
 
 
 
@@ -566,16 +562,6 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
   color: var(--workbench-muted);
 }
 
-@media (min-width: 1920px) {
-
-  .arap-detail-grid {
-    gap: var(--admin-space-4);
-  }
-
-  .arap-settlement {
-    padding-left: var(--admin-space-4);
-  }
-}
 
 @media (max-width: 1080px) {
   .finance-arap-detail__surface {
@@ -591,16 +577,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
     border-left: 0;
   }
 
-  .arap-detail-grid {
-    grid-template-columns: 1fr;
-    gap: 0;
-  }
 
-  .arap-settlement {
-    padding-left: 0;
-    border-left: 0;
-    border-top: 1px solid var(--workbench-border);
-  }
 }
 
 @media (max-width: 720px) {
diff --git a/src/modules/finance/pages/FinanceCustomerStatementsView.test.ts b/src/modules/finance/pages/FinanceCustomerStatementsView.test.ts
index 45c63462..042d39dc 100644
--- a/src/modules/finance/pages/FinanceCustomerStatementsView.test.ts
+++ b/src/modules/finance/pages/FinanceCustomerStatementsView.test.ts
@@ -108,13 +108,37 @@ describe('FinanceCustomerStatementsView', () => {
     expect(document.querySelector('[aria-label="客户对账单列表"]')).toBeNull()
     expect(document.querySelector('[aria-label="所选对账单联动明细"]')).toBeNull()
     expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('200.00 CNY')
-    expect(document.querySelectorAll('.statement-summary-grid .statement-summary-item')).toHaveLength(20)
+    expect(document.querySelectorAll('.statement-summary-grid .statement-summary-item')).toHaveLength(22)
     expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('客户确认人')
     expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('2026-08-05 10:00')
     expect(document.querySelector('.density-detail-heading')?.textContent).toContain('REC-501')
     expect(document.querySelector('[aria-label="客户对账单账单明细"]')).toBeTruthy()
     expect(document.querySelector('.detail-table-scroll [aria-label="客户对账单账单明细"]')).toBeTruthy()
     expect(document.querySelector('.el-drawer')).toBeNull()
+    expect(document.querySelector('.statement-detail-page .el-tabs')).toBeNull()
+    expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('客户A')
+    expect(wrapper.find('[aria-label="调整记录"]').isVisible()).toBe(true)
+    expect(wrapper.find('[aria-label="支付历史"]').isVisible()).toBe(true)
+  })
+
+  it('collapses advanced criteria without losing values and resets hidden filters', async () => {
+    const { wrapper } = await mountPage()
+    const vm = wrapper.vm as unknown as { filters: Record<string, unknown>; appliedFilters: Record<string, unknown> }
+    const toolbar = () => wrapper.find('#statement-query-filters')
+    const toggle = () => toolbar().find('button[aria-controls="statement-query-filters"]')
+    expect(toolbar().findAll('.query-toolbar__field')).toHaveLength(3)
+    await toggle().trigger('click')
+    expect(toolbar().findAll('.query-toolbar__field')).toHaveLength(9)
+    vm.filters.containerNo = 'CONT-31'
+    vm.filters.createdRange = ['2026-08-01', '2026-08-31']
+    await toggle().trigger('click')
+    expect(vm.filters.containerNo).toBe('CONT-31')
+    const reset = toolbar().findAll('button').find((button) => button.text() === '重置')!
+    await reset.trigger('click')
+    await flushPromises()
+    expect(vm.filters.containerNo).toBe('')
+    expect(vm.filters.createdRange).toEqual([])
+    expect(vm.appliedFilters.containerNo).toBe('')
   })
 
   it('uses the shared four-group summary grid with long remarks spanning two groups', () => {
@@ -163,9 +187,8 @@ describe('FinanceCustomerStatementsView', () => {
 
   it('keeps the payment history in the desktop detail layout without duplicating a card container', async () => {
     const { wrapper } = await mountPage()
-    const vm = wrapper.vm as unknown as { openDetail(row: FinanceStatementReadModel): Promise<void>; activeDetailTab: 'lines' | 'payments' }
+    const vm = wrapper.vm as unknown as { openDetail(row: FinanceStatementReadModel): Promise<void> }
     await vm.openDetail(statement)
-    vm.activeDetailTab = 'payments'
     await flushPromises()
 
     expect(document.querySelector('[aria-label="客户对账单支付历史"]')?.textContent).toContain('PAY-701')
diff --git a/src/modules/finance/pages/FinanceCustomerStatementsView.vue b/src/modules/finance/pages/FinanceCustomerStatementsView.vue
index fd83547d..6ce37b74 100644
--- a/src/modules/finance/pages/FinanceCustomerStatementsView.vue
+++ b/src/modules/finance/pages/FinanceCustomerStatementsView.vue
@@ -5,7 +5,7 @@ import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { ArrowLeft, Download, Plus } from '@lucide/vue'
+import { ArrowLeft, Download, Plus, SlidersHorizontal } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
@@ -15,6 +15,7 @@ import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
 import InlineHelp from '@/shared/components/InlineHelp.vue'
+import LineClampText from '@/shared/components/LineClampText.vue'
 import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
@@ -65,7 +66,7 @@ const selectedId = ref('')
 const detail = ref<FinanceReconciliationDetail | null>(null)
 const detailLoading = ref(false)
 const detailError = ref<ApiErrorDetails | null>(null)
-const activeDetailTab = ref<'lines' | 'payments'>('lines')
+const showAdvancedFilters = ref(false)
 const detailCache = new Map<string, FinanceReconciliationDetail>()
 const createOpen = ref(false)
 const createBusy = ref(false)
@@ -118,6 +119,13 @@ const fields = computed<QueryField[]>(() => [
   { key: 'lastPaymentRange', type: 'daterange', label: '最后收款时间', width: 280, props: { valueFormat: 'YYYY-MM-DD', startPlaceholder: '请选择开始日期', endPlaceholder: '请选择结束日期' } },
   { key: 'createdRange', type: 'daterange', label: '创建日期', width: 280, props: { valueFormat: 'YYYY-MM-DD', startPlaceholder: '请选择开始日期', endPlaceholder: '请选择结束日期' } },
 ])
+const visibleFields = computed(() => showAdvancedFilters.value ? fields.value : fields.value.slice(0, 3))
+
+function resetFilters() {
+  filters.value = { status: '', billNo: '', customerId: '', containerNo: '', periodStartRange: [], periodEndRange: [], settled: '', lastPaymentRange: [], createdRange: [] }
+  void load()
+}
+
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 280, fixed: 'left', slotName: 'actions' },
   { key: 'status', label: '对账单状态', width: 120, slotName: 'status' },
@@ -126,15 +134,15 @@ const columns: DataTableColumn[] = [
   { key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' },
   { key: 'periodStart', label: '结算起始日', width: 130 },
   { key: 'periodEnd', label: '结算结束日', width: 130 },
-  { key: 'creditDays', label: '账期(天)', width: 100 },
+  { key: 'creditDays', label: '账期(天)', align: 'right', width: 100 },
   { key: 'lineCount', label: '费用明细数', width: 110 },
   { key: 'sourceCount', label: '来源数量', width: 100 },
   { key: 'currency', label: '货币', width: 86 },
-  { key: 'sourceAmount', label: '调整前金额(CNY)', width: 150 },
-  { key: 'adjustmentAmount', label: '调整金额(CNY)', width: 145 },
-  { key: 'totalAmount', label: '总应收金额(CNY)', width: 155 },
-  { key: 'receivedAmount', label: '已收金额(CNY)', width: 145 },
-  { key: 'outstandingAmount', label: '未收金额(CNY)', width: 145 },
+  { key: 'sourceAmount', label: '调整前金额(CNY)', align: 'right', width: 150 },
+  { key: 'adjustmentAmount', label: '调整金额(CNY)', align: 'right', width: 145 },
+  { key: 'totalAmount', label: '总应收金额(CNY)', align: 'right', width: 155 },
+  { key: 'receivedAmount', label: '已收金额(CNY)', align: 'right', width: 145 },
+  { key: 'outstandingAmount', label: '未收金额(CNY)', align: 'right', width: 145 },
   { key: 'lastPaymentAt', label: '最后收款时间', minWidth: 170, slotName: 'lastPaymentAt' },
   { key: 'settled', label: '是否结清', width: 100, slotName: 'settled' },
   { key: 'remark', label: '备注', minWidth: 180 },
@@ -157,10 +165,10 @@ const detailLineColumns: DataTableColumn[] = [
   { key: 'containerNo', label: '柜次号', minWidth: 150, slotName: 'containerNo' },
   { key: 'businessDate', label: '业务发生日', width: 130, slotName: 'businessDate' },
   { key: 'feeItemName', label: '费用项目', minWidth: 160 },
-  { key: 'quantity', label: '计费量', width: 110, slotName: 'quantity' },
-  { key: 'unitPrice', label: '单价(CNY)', width: 120, slotName: 'unitPrice' },
-  { key: 'sourceAmount', label: '来源金额(CNY)', width: 150 },
-  { key: 'amount', label: '账单金额(CNY)', width: 150 },
+  { key: 'quantity', label: '计费量', align: 'right', width: 110, slotName: 'quantity' },
+  { key: 'unitPrice', label: '单价(CNY)', align: 'right', width: 120, slotName: 'unitPrice' },
+  { key: 'sourceAmount', label: '来源金额(CNY)', align: 'right', width: 150 },
+  { key: 'amount', label: '账单金额(CNY)', align: 'right', width: 150 },
   { key: 'adjustmentReason', label: '调整说明', minWidth: 190 },
   { key: 'billNo', label: '对账单号', minWidth: 190, slotName: 'billNo' },
   { key: 'periodStart', label: '结算起始日', width: 130, slotName: 'periodStart' },
@@ -169,7 +177,7 @@ const detailLineColumns: DataTableColumn[] = [
 const paymentColumns: DataTableColumn[] = [
   { key: 'customerName', label: '客户', minWidth: 200, slotName: 'customerName' },
   { key: 'transactionDate', label: '支付日期', width: 130, slotName: 'transactionDate' },
-  { key: 'amount', label: '支付金额(CNY)', width: 150 },
+  { key: 'amount', label: '支付金额(CNY)', align: 'right', width: 150 },
   { key: 'method', label: '支付方式', width: 130, slotName: 'method' },
   { key: 'referenceNo', label: '支付流水号', minWidth: 180 },
   { key: 'voucherFileIds', label: '收款凭证', minWidth: 130, slotName: 'voucherFileIds' },
@@ -612,9 +620,10 @@ watch(detailRouteId, (statementId) => {
     <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail workbench-panel is-flush is-page-surface" aria-label="客户对账单详情">
       <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button><h1 class="density-detail-title">{{ detail?.billNo || '—' }}</h1><StatusBadge v-if="detail" :status="financeStatusLabel(detail.status)" /></div></div></template>
       <template v-if="detail" #summary>
-        <dl class="density-detail-overview"><div><dt>客户</dt><dd>{{ customerDisplayName(detail.customerId, detail.customerName) }}</dd></div><div><dt>期间</dt><dd>{{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</dd></div></dl>
         <FormSection class="statement-summary-section density-form-section" title="对账单概要" aria-label="对账单摘要">
           <dl class="density-fields statement-summary-grid">
+            <div class="statement-summary-item"><dt>客户</dt><dd>{{ customerDisplayName(detail.customerId, detail.customerName) }}</dd></div>
+            <div class="statement-summary-item"><dt>期间</dt><dd>{{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</dd></div>
             <div class="statement-summary-item"><dt>总应收金额</dt><dd>{{ detail.totalAmount.toFixed(2) }} CNY</dd></div>
             <div class="statement-summary-item"><dt>已收金额</dt><dd>{{ detail.paidAmount.toFixed(2) }} CNY</dd></div>
             <div class="statement-summary-item"><dt>未收金额</dt><dd class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</dd></div>
@@ -638,12 +647,11 @@ watch(detailRouteId, (statementId) => {
           </dl>
         </FormSection>
       </template>
-      <el-tabs v-model="activeDetailTab" class="statement-detail-tabs density-element-tabs density-contained-tabs">
-        <el-tab-pane  name="lines"><template #label><span class="density-tab-icon" aria-hidden="true">📋</span><span>账单明细表</span></template>
           <LoadErrorState v-if="detailError" title="明细加载失败" :message="detailError.message" :loading="detailLoading" @retry="retrySelectedDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
           <el-skeleton v-else-if="detailLoading" :rows="4" animated />
-          <FormSection class="density-form-section" v-else-if="detail" title="账单明细" :bordered="false">
-            <div class="detail-table-scroll workbench-table">
+          <template v-else-if="detail">
+          <FormSection class="density-form-section" :bordered="false" title="账单明细表" aria-label="账单明细">
+            <div class="detail-table-scroll workbench-table is-page-surface">
               <DataTable class="statement-detail-table statement-line-table" :data="detail.lines" size="small" border stripe :columns="detailLineColumns" column-settings-mode="hide" row-key="statementLineId" empty-text="该对账单暂无账单明细" aria-label="客户对账单账单明细">
                 <template #direction="{ row }">{{ row.direction === 'PAYABLE' ? '应付' : '应收' }}</template>
                 <template #sourceType="{ row }">{{ financeSourceTypeLabel(row.sourceType) }}</template>
@@ -658,12 +666,9 @@ watch(detailRouteId, (statementId) => {
                 <template #periodEnd>{{ detail.periodEnd || '—' }}</template>
               </DataTable>
             </div>
-            <el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><div class="workbench-table"><el-table :data="detail.revisions" size="small" border stripe><el-table-column prop="revisionNo" label="修订" width="72" /><el-table-column label="动作" width="130"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column><el-table-column prop="beforeAmount" label="调整前" /><el-table-column prop="afterAmount" label="调整后" /><el-table-column prop="reason" label="原因" /><el-table-column label="操作人" min-width="140"><template #default="{ row }">{{ operatorDisplayName(row.operatorName) }}</template></el-table-column><el-table-column label="发生时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column></el-table></div></el-collapse-item></el-collapse>
           </FormSection>
-        </el-tab-pane>
-        <el-tab-pane  name="payments"><template #label><span class="density-tab-icon" aria-hidden="true">💰</span><span>账单支付历史表</span></template>
-          <FormSection class="density-form-section" v-if="detail" title="支付历史" :bordered="false">
-            <div class="detail-table-scroll workbench-table">
+          <FormSection class="density-form-section" :bordered="false" title="账单支付历史表" aria-label="支付历史">
+            <div class="detail-table-scroll workbench-table is-page-surface">
               <DataTable class="statement-detail-table statement-payment-table" :data="detail.paymentHistory" size="small" border stripe :columns="paymentColumns" column-settings-mode="hide" row-key="transactionId" empty-text="该对账单暂无有效收款记录" aria-label="客户对账单支付历史">
                 <template #customerName>{{ customerDisplayName(detail.customerId, detail.customerName) }}</template>
                 <template #transactionDate="{ row }">{{ formatDateTime(row.transactionDate).slice(0, 10) }}</template>
@@ -674,15 +679,27 @@ watch(detailRouteId, (statementId) => {
               </DataTable>
             </div>
           </FormSection>
-        </el-tab-pane>
-      </el-tabs>
+          <FormSection v-if="detail.revisions.length" class="density-form-section" :bordered="false" title="调整记录" aria-label="调整记录">
+            <div class="workbench-table is-page-surface">
+              <el-table :data="detail.revisions" size="small" border stripe>
+                <el-table-column prop="revisionNo" label="修订" width="72" />
+                <el-table-column label="动作" width="120"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column>
+                <el-table-column prop="beforeAmount" label="调整前" align="right" width="130" />
+                <el-table-column prop="afterAmount" label="调整后" align="right" width="130" />
+                <el-table-column prop="reason" label="原因" min-width="280"><template #default="{ row }"><LineClampText :content="row.reason" :lines="1" /></template></el-table-column>
+                <el-table-column label="操作人" width="170"><template #default="{ row }"><LineClampText :content="operatorDisplayName(row.operatorName)" /></template></el-table-column>
+                <el-table-column label="发生时间" width="180"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column>
+              </el-table>
+            </div>
+          </FormSection>
+      </template>
     </DetailPageLayout>
     <ListPageLayout v-else aria-label="客户对账单">
 
 
       <section class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!customerError && !error" v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" aria-label="客户对账单列表" row-key="id" empty-text="暂无客户对账单" preference-key="finance-customer-statements" @row-click="openDetail">
         <template #toolbar-start><h1>客户对账单</h1></template>
-        <template #filters><QueryToolbar v-model="filters" ariaLabel="客户对账单筛选" :fields="fields" :loading="loading" preference-key="finance-statements-query" :search-on-clear="false" @search="load" /></template>
+        <template #filters><QueryToolbar id="statement-query-filters" v-model="filters" ariaLabel="客户对账单筛选" :fields="visibleFields" :available-fields="fields" :loading="loading" preference-key="finance-statements-query" :search-on-clear="false" :search-on-reset="false" @search="load" @reset="resetFilters"><template #actions><el-button :aria-expanded="showAdvancedFilters" aria-controls="statement-query-filters" @click="showAdvancedFilters = !showAdvancedFilters"><SlidersHorizontal :size="16" />{{ showAdvancedFilters ? '收起筛选' : '高级筛选' }}</el-button></template></QueryToolbar></template>
         <template #notices><template v-if="customerError || error"><LoadErrorState title="客户对账单加载失败" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState></template></template>
 
 
@@ -751,12 +768,8 @@ watch(detailRouteId, (statementId) => {
 .statement-detail-page { min-width: 0; width: min(100%, 1920px); margin: 0 auto; overflow: hidden; }
 .statement-summary-section { padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid var(--workbench-border); }
 .statement-outstanding { color: var(--el-color-warning-dark-2); }
-.statement-detail-tabs { min-width: 0; }
 .statement-detail-table { min-width: 0; }
 .detail-table-scroll { min-width: 0; overflow-x: auto; }
-.statement-line-table { min-width: 1840px; }
-.statement-payment-table { min-width: 1300px; }
-.revision-collapse { margin-top: var(--admin-space-5); }
 :deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
 
 @media (min-width: 1920px) {
@@ -765,13 +778,6 @@ watch(detailRouteId, (statementId) => {
     padding: var(--admin-space-3) var(--admin-space-5);
   }
 
-  .detail-table-scroll {
-    margin-bottom: var(--admin-space-3);
-  }
-
-  .revision-collapse {
-    margin-top: var(--admin-space-3);
-  }
 }
 
 @media (max-width: 640px) {
diff --git a/src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts b/src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts
index 335e01a1..073b3901 100644
--- a/src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts
+++ b/src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts
@@ -6,11 +6,11 @@ const source = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/Fi
 const statementsSource = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
 
 describe('Finance formal settlement desktop presentation', () => {
-  it('keeps the title and actions in the toolbar and settlement totals before results', () => {
+  it('keeps the title and actions in the toolbar and settlement totals above the list', () => {
     expect(source).toContain('<template #toolbar-start>')
     expect(source).toContain('<h1>{{ title }}</h1>')
-    expect(source).toContain('<template #before-results>')
-    expect(source).toContain('<dl class="density-detail-overview settlement-summary" aria-label="结算汇总">')
+    expect(source.indexOf('<section class="finance-metric-grid"')).toBeLessThan(source.indexOf('<ListPageLayout :aria-label="title">'))
+    expect(source).toContain('<section class="finance-metric-grid" aria-label="结算汇总"')
     expect(source).toContain('<template #toolbar-actions>')
     expect(source).toContain('<div class="settlement-list-actions">')
     expect(source).not.toContain('class="settlement-list-toolbar"')
@@ -44,7 +44,7 @@ describe('Finance formal settlement desktop presentation', () => {
   it('uses a continuous detail layout with locally scrollable wide tables', () => {
     expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail workbench-panel is-flush is-page-surface"')
     expect(source).toContain('class="settlement-detail-content"')
-    expect(source).toContain('class="detail-table-scroll workbench-table"')
+    expect(source.match(/class="detail-table-scroll workbench-table is-page-surface"/g)).toHaveLength(3)
     expect(source).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
     expect(source).not.toContain('class="settlement-detail-card"')
   })
diff --git a/src/modules/finance/pages/FinanceFormalSettlementPage.vue b/src/modules/finance/pages/FinanceFormalSettlementPage.vue
index 46a49579..5efce432 100644
--- a/src/modules/finance/pages/FinanceFormalSettlementPage.vue
+++ b/src/modules/finance/pages/FinanceFormalSettlementPage.vue
@@ -5,7 +5,7 @@ import '../financeDensity.css'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
-import { ArrowLeft, CreditCard, Download, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
+import { ArrowLeft, CircleCheck, Clock3, CreditCard, Download, HandCoins, Plus, RotateCcw, Wallet, XCircle } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
@@ -142,9 +142,9 @@ const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'
       { key: 'customerId', label: '客户', minWidth: 180, slotName: 'customer' },
       { key: 'feeItemSummary', label: '费用类型', minWidth: 150, slotName: 'feeItemSummary' },
       { key: 'currency', label: '币种', width: 80 },
-      { key: 'receivableAmount', label: '应收金额', width: 130, slotName: 'money' },
-      { key: 'receivedAmount', label: '已收', width: 120, slotName: 'paidMoney' },
-      { key: 'outstandingAmount', label: '余额', width: 120, slotName: 'outstandingMoney' },
+      { key: 'receivableAmount', label: '应收金额', align: 'right', width: 130, slotName: 'money' },
+      { key: 'receivedAmount', label: '已收', align: 'right', width: 120, slotName: 'paidMoney' },
+      { key: 'outstandingAmount', label: '余额', align: 'right', width: 120, slotName: 'outstandingMoney' },
       { key: 'reconciliationStatementNo', label: '关联对账单', minWidth: 180, slotName: 'reconciliationStatementNo' },
       { key: 'businessPeriod', label: '结算周期', width: 120, slotName: 'businessPeriod' },
       { key: 'generatedDate', label: '生成日期', width: 130, slotName: 'generatedDate' },
@@ -162,9 +162,9 @@ const columns = computed<DataTableColumn[]>(() => props.kind === 'receivable'
       { key: 'customerId', label: '客户', minWidth: 180, slotName: 'customer' },
       { key: 'feeItemSummary', label: '费用类型', minWidth: 150, slotName: 'feeItemSummary' },
       { key: 'currency', label: '币种', width: 80 },
-      { key: 'payableAmount', label: '应付金额', width: 130, slotName: 'money' },
-      { key: 'paidAmount', label: '已付', width: 120, slotName: 'paidMoney' },
-      { key: 'outstandingAmount', label: '余额', width: 120, slotName: 'outstandingMoney' },
+      { key: 'payableAmount', label: '应付金额', align: 'right', width: 130, slotName: 'money' },
+      { key: 'paidAmount', label: '已付', align: 'right', width: 120, slotName: 'paidMoney' },
+      { key: 'outstandingAmount', label: '余额', align: 'right', width: 120, slotName: 'outstandingMoney' },
       { key: 'businessPeriod', label: '结算周期', width: 120, slotName: 'businessPeriod' },
       { key: 'generatedDate', label: '生成日期', width: 130, slotName: 'generatedDate' },
       { key: 'dueDate', label: '到期日', width: 130, slotName: 'dueDate' },
@@ -520,7 +520,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <AdminPage as="div" class="finance-settlement-page admin-density admin-workbench" spacing="normal">
+  <AdminPage as="div" class="finance-settlement-page admin-density admin-workbench" :spacing="detailMode ? 'normal' : 'compact'">
     <OperationErrorToast v-if="createOpen || paymentOpen" :details="error" />
     <OperationErrorToast :message="receiptValidationError" />
     <OperationErrorToast :details="receiptError" />
@@ -534,17 +534,25 @@ onMounted(() => {
           <el-button v-if="detail && canVoid && detail.status === 'VOIDED'" :loading="actionBusy" @click="performAction(detailActionRow(), 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
         </div></div></template>
       <template v-if="detail" #summary>
-        <dl class="density-detail-overview settlement-detail-summary" aria-label="结算金额汇总">
-          <div class="summary-item"><dt>{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</dt><dd>{{ money(detail.amount) }}</dd></div>
-          <div class="summary-item"><dt>{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div>
-          <div class="summary-item"><dt>未结余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div>
-          <div class="summary-item"><dt>到期日</dt><dd class="is-date">{{ displayDate(detail.dueDate) }}</dd></div>
-        </dl>
+        <section class="finance-metric-grid" aria-label="结算金额汇总">
+          <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Wallet aria-hidden="true" /></span><h2 class="workbench-metric-label">{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(detail.amount) }}</strong><span>CNY</span></div>
+          </article>
+          <article class="workbench-metric workbench-tone is-compact" data-tone="green">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CircleCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(detail.paidAmount) }}</strong><span>CNY</span></div>
+          </article>
+          <article class="workbench-metric workbench-tone is-compact" data-tone="purple">
+            <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Clock3 aria-hidden="true" /></span><h2 class="workbench-metric-label">未结余额</h2></div>
+            <div class="workbench-metric-value"><strong>{{ money(detail.outstandingAmount) }}</strong><span>CNY</span></div>
+          </article>
+        </section>
       </template>
       <LoadErrorState v-if="detailError" class="settlement-detail-state" :title="`${title}详情加载失败`" :message="detailError.message" :loading="detailLoading" @retry="loadDetail(String(settlementId || ''))"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
       <el-skeleton v-else-if="detailLoading" class="settlement-detail-state" :rows="10" animated />
       <section v-else-if="detail" class="settlement-detail-content">
-        <FormSection class="density-form-section" title="基本信息">
+        <FormSection class="density-form-section" title="基本信息" :bordered="false">
           <el-descriptions border :column="4" class="settlement-detail-info density-descriptions">
             <el-descriptions-item label="结算单号">{{ detail.settlementNo }}</el-descriptions-item>
             <el-descriptions-item :label="kind === 'receivable' ? '客户' : '供应商'">{{ detailPartyName() }}</el-descriptions-item>
@@ -562,8 +570,8 @@ onMounted(() => {
             <el-descriptions-item :label="kind === 'receivable' ? '最后收款时间' : '最后付款时间'">{{ displayDateTime(detail.lastPaymentAt) }}</el-descriptions-item>
           </el-descriptions>
         </FormSection>
-        <FormSection class="density-form-section" title="费用明细">
-          <div class="detail-table-scroll workbench-table">
+        <FormSection class="density-form-section" title="费用明细" :bordered="false">
+          <div class="detail-table-scroll workbench-table is-page-surface">
           <el-table :data="detail.lines" size="small" border stripe empty-text="暂无费用明细">
             <el-table-column prop="feeItemName" label="费用类型" min-width="150" />
             <el-table-column prop="sourceType" label="来源类型" min-width="140"><template #default="scope">{{ financeSourceTypeLabel(scope.row.sourceType) }}</template></el-table-column>
@@ -575,8 +583,8 @@ onMounted(() => {
           </el-table>
           </div>
         </FormSection>
-        <FormSection class="density-form-section" :title="kind === 'receivable' ? '收款记录' : '付款记录'">
-          <div class="detail-table-scroll workbench-table">
+        <FormSection class="density-form-section" :title="kind === 'receivable' ? '收款记录' : '付款记录'" :bordered="false">
+          <div class="detail-table-scroll workbench-table is-page-surface">
           <el-table :data="detail.transactions" size="small" border stripe :empty-text="kind === 'receivable' ? '暂无收款记录' : '暂无付款记录'">
             <el-table-column prop="transactionDate" :label="kind === 'receivable' ? '收款日期' : '付款日期'" width="130" />
             <el-table-column prop="amount" label="金额(CNY)" width="130" align="right"><template #default="scope">{{ money(scope.row.amount) }}</template></el-table-column>
@@ -590,7 +598,7 @@ onMounted(() => {
           </div>
         </FormSection>
         <FormSection class="density-form-section" title="修订记录" :bordered="false">
-          <div class="detail-table-scroll workbench-table">
+          <div class="detail-table-scroll workbench-table is-page-surface">
           <el-table :data="detail.revisions" size="small" border stripe empty-text="暂无调整记录">
             <el-table-column prop="action" label="动作" min-width="120"><template #default="scope">{{ settlementRevisionActionLabel(scope.row.action) || financeOperationActionLabel(scope.row.action) }}</template></el-table-column>
             <el-table-column prop="beforeAmount" label="调整前(CNY)" width="140" align="right"><template #default="scope">{{ money(scope.row.beforeAmount) }}</template></el-table-column>
@@ -603,7 +611,22 @@ onMounted(() => {
         </FormSection>
       </section>
     </DetailPageLayout>
-    <ListPageLayout v-else :aria-label="title">
+    <template v-else>
+      <section class="finance-metric-grid" aria-label="结算汇总" v-if="!customerError && !error" v-loading="loading" :aria-busy="loading">
+            <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Wallet aria-hidden="true" /></span><h2 class="workbench-metric-label">{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</h2></div>
+              <div class="workbench-metric-value"><strong>{{ loading ? '—' : money(totals.amount) }}</strong><span>CNY</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="green">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CircleCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">{{ kind === 'receivable' ? '已收' : '已付' }}</h2></div>
+              <div class="workbench-metric-value"><strong>{{ loading ? '—' : money(totals.paid) }}</strong><span>CNY</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="purple">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Clock3 aria-hidden="true" /></span><h2 class="workbench-metric-label">{{ kind === 'receivable' ? '待收' : '待付' }}</h2></div>
+              <div class="workbench-metric-value"><strong>{{ loading ? '—' : money(totals.outstanding) }}</strong><span>CNY</span></div>
+            </article>
+          </section>
+    <ListPageLayout :aria-label="title">
 
 
       <section class="workbench-table is-page-surface"><DataTable :preference-key="`finance-settlement-${kind}-table`" appearance="integrated" column-settings-mode="show" :results-visible="!customerError && !error" v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" :aria-label="`${title}列表`" row-key="id" empty-text="暂无符合条件的结算单">
@@ -614,13 +637,7 @@ onMounted(() => {
         <template #notices><template v-if="customerError || error">
         <LoadErrorState :title="`${title}加载失败`" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState>
       </template></template>
-        <template #before-results>
-              <dl class="density-detail-overview settlement-summary" aria-label="结算汇总">
-                <div class="summary-item"><dt>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</dt><dd>{{ money(totals.amount) }}</dd></div>
-                <div class="summary-item"><dt>{{ kind === 'receivable' ? '已收' : '已付' }}</dt><dd class="is-success">{{ money(totals.paid) }}</dd></div>
-                <div class="summary-item"><dt>{{ kind === 'receivable' ? '待收' : '待付' }}</dt><dd class="is-danger">{{ money(totals.outstanding) }}</dd></div>
-              </dl>
-            </template>
+
 
 
             <template #toolbar-actions>
@@ -654,6 +671,7 @@ onMounted(() => {
             <template #pagination-left>共 {{ filteredRows.length }} 条 · 币种：CNY</template>
           </DataTable></section>
     </ListPageLayout>
+    </template>
 
     <AppDialog class="admin-density-dialog admin-workbench is-dialog" v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" fullscreenable :confirm-loading="createBusy" @confirm="submitCreate">
       <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="结算单生成设置"><h3 class="density-dialog-section__title">生成设置</h3>
@@ -700,8 +718,8 @@ onMounted(() => {
             <tr><th scope="row">当前余额</th><td colspan="3" class="is-danger">{{ money(detail.outstandingAmount) }}</td></tr>
           </tbody></table>
         </section>
-        <section class="density-dialog-section workbench-evidence" data-tone="work" aria-label="收款登记"><h3 class="density-dialog-section__title">收款登记</h3>
-          <el-form class="settlement-operation-form density-form" label-position="left" label-width="140px" :disabled="receiptBusy"><table class="density-table density-table--editable settlement-operation-table"><tbody>
+        <section class="density-dialog-section workbench-evidence" aria-label="收款登记"><h3 class="density-dialog-section__title">收款登记</h3>
+          <el-form class="settlement-operation-form density-form density-form--outlined" label-position="left" label-width="140px" :disabled="receiptBusy"><table class="density-table density-table--editable settlement-operation-table"><tbody>
               <tr><td><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td><td><el-form-item label="本次收款金额(CNY)"><el-input-number v-model="receiptForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入收款金额" /></el-form-item></td></tr>
               <tr><td colspan="2"><el-form-item label="收款方式"><el-select v-model="receiptForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item></td></tr>
               <tr><td colspan="2"><el-form-item label="收款凭证"><el-upload :key="receiptUploadKey" :disabled="receiptBusy" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectReceiptFile"><el-button>选择图片</el-button></el-upload></el-form-item></td></tr>
@@ -717,8 +735,7 @@ onMounted(() => {
 
 <style scoped>
 .finance-settlement-page { min-width: 0; }
-.settlement-summary, .settlement-list-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; }
-.settlement-summary { gap: var(--admin-space-2) 0; }
+.settlement-list-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; }
 .settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: var(--admin-space-3); }
 .settlement-list-actions :deep(.el-button + .el-button) { margin-left: 0; }
 .settlement-detail-page { display: flex; width: min(100%, 1920px); margin: 0 auto; min-width: 0; gap: 0; overflow: hidden; padding: 0; }
@@ -754,21 +771,11 @@ onMounted(() => {
     padding: 0 var(--admin-space-5) var(--admin-space-4);
   }
 
-  .detail-table-scroll {
-    margin-bottom: var(--admin-space-3);
-  }
-
 }
 @media (max-width: 720px) {
-  .settlement-detail-summary { grid-template-columns: 1fr; }
-  .settlement-detail-summary { gap: 10px; padding: 12px 16px; }
-  .settlement-detail-summary .summary-item { padding: 0; border-left: 0; }
   .settlement-detail-content { padding: 0 16px 14px; }
   .settlement-detail-state { margin: 14px; }
-  .settlement-summary { align-items: flex-start; flex-direction: column; gap: 6px; }
-  .settlement-summary .summary-item + .summary-item { margin-left: 0; padding-left: 0; border-left: 0; }
   .settlement-list-actions { width: 100%; justify-content: flex-start; }
-  .summary-item strong { font-size: 21px; }
   .settlement-detail-header { align-items: flex-start; flex-direction: column; padding: 16px; }
   .settlement-detail-actions { width: 100%; }
   .settlement-detail-actions :deep(.el-button) { min-height: 40px; }
diff --git a/src/modules/finance/pages/FinancePresentation.test.ts b/src/modules/finance/pages/FinancePresentation.test.ts
index 2280804c..927f4bee 100644
--- a/src/modules/finance/pages/FinancePresentation.test.ts
+++ b/src/modules/finance/pages/FinancePresentation.test.ts
@@ -39,21 +39,21 @@ describe('finance presentation governance', () => {
     expect(settlement).toContain('class="settlement-detail-info density-descriptions"')
     for (const title of ['基本信息', '费用明细', '修订记录']) expect(settlement).toContain('title="' + title + '"')
     expect(settlement).toContain(':title="kind === \'receivable\' ? \'收款记录\' : \'付款记录\'"')
-    expect(settlement.match(/class="detail-table-scroll workbench-table"/g)).toHaveLength(3)
+    expect(settlement.match(/class="detail-table-scroll workbench-table is-page-surface"/g)).toHaveLength(3)
     expect(settlement).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
     expect(settlement).not.toContain('class="detail-section surface-panel"')
     expect(settlement.match(/width="min\(760px, 94vw\)"/g)).toHaveLength(2)
-    expect(settlement.match(/class="settlement-operation-form density-form"/g)).toHaveLength(2)
+    expect(settlement.match(/class="settlement-operation-form density-form(?: density-form--outlined)?"/g)).toHaveLength(2)
     expect(settlement).toContain('density-table density-table--editable settlement-operation-table')
     expect(settlement).toContain('.settlement-operation-table td:not([colspan]) { width: 50%; }')
   })
 
   it('keeps settlement totals and list actions in the table toolbar', () => {
     expect(settlement).toContain('<template #toolbar-start>')
-    expect(settlement).toContain('class="density-detail-overview settlement-summary" aria-label="结算汇总"')
+    expect(settlement).toContain('class="finance-metric-grid" aria-label="结算汇总"')
     expect(settlement).toContain('<template #toolbar-actions>')
     expect(settlement).toContain('class="settlement-list-actions"')
-    expect(financeDensity).toContain('.settlement-summary.density-detail-overview { padding: 0; border: 0; }')
+    expect(financeDensity).toContain('grid-template-columns: repeat(3, minmax(0, 1fr))')
     expect(settlement).not.toContain('class="settlement-list-toolbar"')
   })
 
@@ -148,15 +148,13 @@ describe('finance presentation governance', () => {
     expect(statements).not.toContain('只读展示当前对账单关联的有效收款记录。')
   })
 
-  it('uses a shared compact financial summary row for customer accounts', () => {
-    expect(accounts).toContain('class="density-detail-overview account-metrics"')
+  it('uses shared compact financial cards for customer accounts', () => {
+    expect(accounts).toContain('class="account-metrics"')
     expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
     expect(density).toContain('.density-detail-overview')
-    expect(accounts).toContain(':deep(.ledger-query.query-toolbar)')
-    expect(accounts).toContain('padding: 0;')
-    const summaryStyles = density.match(/\.density-detail-overview \{([^}]*)\}/)?.[1]
-    expect(summaryStyles).toContain('display: flex;')
-    expect(summaryStyles).toContain('flex-wrap: wrap;')
+    expect(accounts).toContain('<template #filters><QueryToolbar v-model="ledgerFilters"')
+    expect(financeDensity).toContain('padding-block: 0;')
+    expect(accounts.match(/account-metric workbench-metric workbench-tone is-compact/g)).toHaveLength(6)
     const queryStyles = workbench.match(/\.query-toolbar\.workbench-query \{([^}]*)\}/)?.[1]
     expect(accounts).toContain('class="ledger-query workbench-query"')
     expect(queryStyles).toContain('border-color: var(--workbench-border);')
@@ -168,9 +166,11 @@ describe('finance presentation governance', () => {
   it('keeps fee-source details continuous without nested metric and section cards', () => {
     expect(arap).toContain('class="density-detail-overview arap-metrics"')
     expect(arap).toContain('class="arap-information density-form-section"')
-    expect(arap).toContain('class="arap-settlement density-form-section"')
-    expect(arap).toContain('padding-left: var(--admin-space-6);')
-    expect(arap).toContain('border-left: 1px solid')
+    expect(arap).toContain('title="单据信息与审核结算"')
+    expect(arap).toContain('label="审核原因" :span="3"')
+    expect(arap).not.toContain('arap-detail-grid')
+    expect(arap).not.toContain('arap-settlement')
+    expect(arap).not.toContain('border-left: 1px solid')
     expect(arap).not.toContain('.arap-metric.is-amount { border-color:')
     for (const description of ['费用来源与关联业务摘要', '当前审核和出账状态', '按时间查看审核与结算调整记录']) expect(arap).not.toContain('description="' + description + '"')
   })
diff --git a/src/modules/finance/pages/FinanceReceivableStatisticsView.test.ts b/src/modules/finance/pages/FinanceReceivableStatisticsView.test.ts
index d6f1dde1..aae3ce7c 100644
--- a/src/modules/finance/pages/FinanceReceivableStatisticsView.test.ts
+++ b/src/modules/finance/pages/FinanceReceivableStatisticsView.test.ts
@@ -9,6 +9,9 @@ describe('receivable statistics page', () => {
     for (const label of ['统计月份', '应收单位', '应收总额', '已收合计', '余额未收', '打印', '导出Excel']) expect(page).toContain(label)
     expect(page).toContain("exportType: 'FINANCE_RECEIVABLE_STATISTICS'")
     expect(page).toContain('window.print()')
+    expect(page).toContain('aria-label="统计月份"')
+    expect(page).toContain('aria-label="应收单位"')
+    for (const removed of ['<span>统计月份</span>', '<span>应收单位</span>', '#before-results', '应收款明细', '仅统计CNY正式应收结算单']) expect(page).not.toContain(removed)
     expect(page).toContain('displayCustomerName(row)')
     expect(page).toContain('/^客户\\s*\\d+$/.test(snapshot)')
     expect(page).toContain("return masterName || '—'")
diff --git a/src/modules/finance/pages/FinanceReceivableStatisticsView.vue b/src/modules/finance/pages/FinanceReceivableStatisticsView.vue
index 734a03b8..d4ab211d 100644
--- a/src/modules/finance/pages/FinanceReceivableStatisticsView.vue
+++ b/src/modules/finance/pages/FinanceReceivableStatisticsView.vue
@@ -3,7 +3,7 @@ import '@/styles/adminWorkbench.css'
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
 import { computed, onMounted, ref } from 'vue'
-import { Download, Printer, RotateCcw, Search } from '@lucide/vue'
+import { CircleCheck, Clock3, Download, Printer, RotateCcw, Search, Wallet } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -39,9 +39,9 @@ const customerNameById = computed(() => new Map(customers.value.map((item) => [S
 const columns: DataTableColumn[] = [
   { key: 'customerName', label: '应收单位', minWidth: 240, slotName: 'customerName' },
   { key: 'currency', label: '币种', width: 100 },
-  { key: 'totalReceivable', label: '应收总额(CNY)', width: 180, slotName: 'totalReceivable' },
-  { key: 'totalReceived', label: '已收合计(CNY)', width: 180, slotName: 'totalReceived' },
-  { key: 'totalOutstanding', label: '余额未收(CNY)', width: 180, slotName: 'totalOutstanding' },
+  { key: 'totalReceivable', label: '应收总额(CNY)', width: 180, align: 'right', slotName: 'totalReceivable' },
+  { key: 'totalReceived', label: '已收合计(CNY)', width: 180, align: 'right', slotName: 'totalReceived' },
+  { key: 'totalOutstanding', label: '余额未收(CNY)', width: 180, align: 'right', slotName: 'totalOutstanding' },
 ]
 
 async function load() {
@@ -90,22 +90,31 @@ onMounted(() => { void loadCustomers(); void load() })
 </script>
 
 <template>
-  <AdminPage class="receivable-statistics-page admin-density admin-workbench" spacing="normal">
+  <AdminPage class="receivable-statistics-page admin-density admin-workbench" spacing="compact">
     <el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
     <template v-else>
+      <section class="finance-metric-grid" aria-label="CNY应收汇总" v-if="!error" v-loading="loading" :aria-busy="loading">
+            <article class="workbench-metric workbench-tone is-compact" data-tone="blue">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Wallet aria-hidden="true" /></span><h2 class="workbench-metric-label">应收总额</h2></div>
+              <div class="workbench-metric-value"><strong>{{ result ? money(result.totalReceivable) : '—' }}</strong><span>CNY</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="green">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><CircleCheck aria-hidden="true" /></span><h2 class="workbench-metric-label">已收合计</h2></div>
+              <div class="workbench-metric-value"><strong>{{ result ? money(result.totalReceived) : '—' }}</strong><span>CNY</span></div>
+            </article>
+            <article class="workbench-metric workbench-tone is-compact" data-tone="purple">
+              <div class="workbench-metric-heading"><span class="workbench-icon is-compact"><Clock3 aria-hidden="true" /></span><h2 class="workbench-metric-label">余额未收</h2></div>
+              <div class="workbench-metric-value"><strong>{{ result ? money(result.totalOutstanding) : '—' }}</strong><span>CNY</span></div>
+            </article>
+          </section>
       <div class="workbench-table is-page-surface"><DataTable class="statistics-table" appearance="integrated" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="result?.totalCustomers ?? 0" :row-key="statisticsRowKey" preference-key="finance-receivable-statistics-table" aria-label="应收款统计列表" empty-text="当前月份暂无应收数据" @update:page="load()" @update:page-size="page = 1; load()">
           <template #toolbar-start><h1>应收款统计表</h1></template>
           <template #filters><section class="query-toolbar statistics-query" aria-label="应收款统计筛选">
-        <div class="query-field"><span>统计月份</span><el-date-picker v-model="month" type="month" value-format="YYYY-MM" format="YYYY年MM月" :clearable="false" aria-label="统计月份" /></div>
-        <div class="query-field"><span>应收单位</span><el-select v-model="customerId" clearable filterable placeholder="全部应收单位" aria-label="应收单位"><el-option v-for="customer in customers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></div>
+        <div class="query-field"><el-date-picker v-model="month" type="month" value-format="YYYY-MM" format="YYYY年MM月" :clearable="false" aria-label="统计月份" /></div>
+        <div class="query-field"><el-select v-model="customerId" clearable filterable placeholder="全部应收单位" aria-label="应收单位"><el-option v-for="customer in customers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></div>
         <div class="query-actions"><el-button type="primary" :loading="loading" @click="search"><Search :size="16" />查询</el-button><el-button @click="reset"><RotateCcw :size="16" />重置</el-button></div>
       </section></template>
           <template #notices><LoadErrorState v-if="error" title="应收款统计加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
-          <template #before-results><dl class="density-detail-overview statistics-summary" aria-label="CNY应收汇总">
-          <div><dt>应收总额</dt><dd>CNY {{ money(result?.totalReceivable) }}</dd></div>
-          <div><dt>已收合计</dt><dd class="is-received">CNY {{ money(result?.totalReceived) }}</dd></div>
-          <div><dt>余额未收</dt><dd class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</dd></div>
-        </dl><div class="statistics-report-heading"><h2>应收款明细</h2><span>共 {{ result?.totalCustomers ?? 0 }} 个应收单位 · 仅统计CNY正式应收结算单</span></div></template>
 
             <template #toolbar-actions><div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div></template>
             <template #customerName="{ row }">{{ displayCustomerName(row) }}</template><template #totalReceivable="{ row }">{{ money(row.totalReceivable) }}</template><template #totalReceived="{ row }">{{ money(row.totalReceived) }}</template><template #totalOutstanding="{ row }"><span class="outstanding-cell">{{ money(row.totalOutstanding) }}</span></template>
@@ -117,20 +126,17 @@ onMounted(() => { void loadCustomers(); void load() })
 
 <style scoped>
 .statistics-query { display: flex; align-items: end; gap: var(--admin-space-5); padding: var(--admin-space-6); }
-.query-field { display: grid; min-width: 220px; gap: var(--admin-space-2); color: var(--workbench-muted); font-size: var(--admin-font-body); }
+.query-field { min-width: 220px; }
 .query-field :deep(.el-select), .query-field :deep(.el-date-editor) { width: 100%; }
 .query-actions, .report-actions { display: flex; gap: var(--admin-space-3); }
 .report-actions { margin-left: auto; }
 .query-actions :deep(.el-button), .report-actions :deep(.el-button) { margin-left: 0; }
 .outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
 .statistics-table { overflow: hidden; }
-.statistics-report-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--workbench-border); }
-.statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
-.statistics-report-heading span { color: var(--workbench-muted); font-size: var(--admin-font-body); }
 @media print {
   .statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
   .receivable-statistics-page { gap: 10px; padding: 0; color: #000; }
   .workbench-table > :deep(.data-table) { border-radius: var(--admin-radius); box-shadow: none; }
-  .statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
+  .finance-metric-grid > article, .statistics-table { border-color: #999; box-shadow: none; break-inside: avoid; }
 }
 </style>
diff --git a/src/modules/overseas-warehouse/pages/PalletsView.vue b/src/modules/overseas-warehouse/pages/PalletsView.vue
index 2ab2a4ef..d30e6476 100644
--- a/src/modules/overseas-warehouse/pages/PalletsView.vue
+++ b/src/modules/overseas-warehouse/pages/PalletsView.vue
@@ -220,7 +220,7 @@ onMounted(initialize)
 </template>
 
 <style scoped>
-.pallet-page.admin-page.is-spacing-compact { gap: var(--admin-space-3); }
+.admin-workbench.pallet-page.admin-page.is-spacing-compact { gap: 0; }
 .pallet-editor-table { table-layout: fixed; }
 .pallet-editor-table td:not([colspan]) { width: 50%; }
 
diff --git a/src/modules/warehouse-resources/pallets/pages/PalletsView.vue b/src/modules/warehouse-resources/pallets/pages/PalletsView.vue
index ff6d1da5..c1542997 100644
--- a/src/modules/warehouse-resources/pallets/pages/PalletsView.vue
+++ b/src/modules/warehouse-resources/pallets/pages/PalletsView.vue
@@ -488,7 +488,7 @@ onMounted(() => {
 
 <style scoped>
 .pallet-page { display: grid; min-width: 0; }
-.pallet-page.admin-page.is-spacing-compact { gap: var(--admin-space-3); }
+.admin-workbench.pallet-page.admin-page.is-spacing-compact { gap: 0; }
 .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--workbench-grid-gap); }
 .table-panel { min-width: 0; }
 .context-empty { padding: var(--admin-space-6, 16px); color: var(--workbench-muted); text-align: center; }
diff --git a/src/shared/components/DataTable.vue b/src/shared/components/DataTable.vue
index a57e9fb5..f9084e8c 100644
--- a/src/shared/components/DataTable.vue
+++ b/src/shared/components/DataTable.vue
@@ -453,6 +453,8 @@ function setPage(value: number) {
 .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > :deep(:where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button + .el-button),
 .data-table > .data-table__toolbar > .data-table__toolbar-actions > :is(.data-table__business-actions, .data-table__utility-actions) > :deep(:where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > :where(div, span):not(:where(.el-overlay, .el-dialog, .el-drawer, .el-popper, .data-table)) > .el-button + .el-button) { margin-left: 0; }
 .data-table__pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--cc-border); color: var(--cc-muted); font-size: var(--cc-list-pagination-font-size); }
+/* Element Plus already supplies the table bottom border. */
+.data-table > .el-table + .data-table__pagination { border-top: 0; }
 .data-table__pagination-left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; }
 .data-table__pagination-controls, .data-table__page-size, .data-table__page-buttons { display: flex; align-items: center; gap: 8px; }
 .data-table__pagination-controls { min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
diff --git a/src/shared/components/FormSection.vue b/src/shared/components/FormSection.vue
index 17830bdb..e1135618 100644
--- a/src/shared/components/FormSection.vue
+++ b/src/shared/components/FormSection.vue
@@ -20,7 +20,7 @@ withDefaults(defineProps<{
 </template>
 
 <style scoped>
-.form-section { min-width: 0; padding: 20px 0; }
+.form-section { min-width: 0; padding: 20px 0; border-bottom: 0; }
 .form-section.is-bordered { border-bottom: 1px solid var(--cc-border, #e3e8ef); }
 .form-section:first-child { padding-top: 0; }
 .form-section:last-child { padding-bottom: 0; border-bottom: 0; }
diff --git a/src/styles/adminDensity.test.ts b/src/styles/adminDensity.test.ts
index e2297e70..887c9880 100644
--- a/src/styles/adminDensity.test.ts
+++ b/src/styles/adminDensity.test.ts
@@ -221,6 +221,110 @@ const cssRoot = (css: string) => {
 }
 
 describe('approved Admin density ownership', () => {
+  it('draws only one separator between an Element table and pagination', () => {
+    const style = parse(read('shared/components/DataTable.vue')).descriptor.styles[0]!
+    const compiled = compileStyle({ source: style.content, filename: 'DataTable.vue', id: 'data-v-border-test', scoped: true })
+    expect(compiled.errors).toHaveLength(0)
+    const selectors: string[] = []
+    compiled.rawResult!.root.walkRules(rule => {
+      if (rule.selector.includes('.el-table + .data-table__pagination')) {
+        selectors.push(rule.selector)
+        expect(rule.nodes.some(node => node.type === 'decl' && node.prop === 'border-top' && node.value === '0')).toBe(true)
+      }
+    })
+    expect(selectors).toHaveLength(1)
+    const host = document.createElement('div')
+    host.innerHTML = `<div class="data-table"><div class="el-table"><div class="el-table__inner-wrapper"></div></div><footer id="standard" class="data-table__pagination" data-v-border-test></footer></div>
+      <div class="data-table"><section class="custom-results"></section><footer id="custom" class="data-table__pagination" data-v-border-test></footer></div>`
+    expect(host.querySelector('#standard')!.matches(selectors[0]!)).toBe(true)
+    expect(host.querySelector('#custom')!.matches(selectors[0]!)).toBe(false)
+    expect(style.content).not.toMatch(/inner-wrapper::before\s*\{[^}]*display:\s*none/)
+  })
+
+  it('uses the shared compact metric cards for finance statistics and settlement totals', () => {
+    expect(read('modules/finance/pages/FinanceReceivableStatisticsView.vue')).toContain('spacing="compact"')
+    expect(read('modules/finance/pages/FinanceFormalSettlementPage.vue')).toContain(':spacing="detailMode ? \'normal\' : \'compact\'"')
+    const financeStyles = read('modules/finance/financeDensity.css')
+    expect(financeStyles).toContain('.admin-workbench.receivable-statistics-page.admin-page.is-spacing-compact,')
+    expect(financeStyles).toContain('.admin-workbench.finance-settlement-page.admin-page.is-spacing-compact { gap: 0; }')
+    expect(financeStyles).not.toContain('.data-table__toolbar')
+    const baseStyle = parse(read('shared/components/AdminPage.vue')).descriptor.styles[0]!
+    const compiled = compileStyle({ source: baseStyle.content, filename: 'AdminPage.vue', id: 'data-v-spacing-check', scoped: true })
+    expect(compiled.errors).toHaveLength(0)
+    const baseSelector = compiled.code.match(/([^{}]+)\{\s*gap: 12px;/)![1]!.trim()
+    const specificity = (selector: string) => (selector.match(/\.[\w-]+|\[[^\]]+\]/g) ?? []).length
+    for (const page of ['receivable-statistics-page', 'finance-settlement-page']) {
+      const selector = `.admin-workbench.${page}.admin-page.is-spacing-compact`
+      expect(specificity(selector), 'must override scoped AdminPage even when it loads later').toBeGreaterThan(specificity(baseSelector))
+    }
+    for (const file of ['FinanceReceivableStatisticsView', 'FinanceFormalSettlementPage']) {
+      const content = read(`modules/finance/pages/${file}.vue`)
+      const summary = content.match(/<section class="finance-metric-grid"[^>]*v-loading="loading"[\s\S]*?<\/section>/)![0]
+      expect(content.indexOf(summary), file).toBeLessThan(content.indexOf('<template #filters>'))
+      const template = parse(content).descriptor.template!.ast!
+      function visit(node: { tag?: string; loc?: { source: string }; children?: unknown[] }, insideTable = false) {
+        if (node.tag === 'section' && node.loc?.source === summary) expect(insideTable, file).toBe(false)
+        for (const child of node.children ?? []) visit(child as typeof node, insideTable || node.tag === 'DataTable')
+      }
+      visit(template)
+      expect(summary.match(/workbench-metric workbench-tone is-compact/g), file).toHaveLength(3)
+      expect(summary).toContain('v-loading="loading" :aria-busy="loading"')
+      expect(summary).not.toContain('density-detail-overview')
+      for (const tone of ['blue', 'green', 'purple']) expect(summary).toContain(`data-tone="${tone}"`)
+    }
+  })
+  it('keeps finance detail tables on one continuous surface', () => {
+    const statements = read('modules/finance/pages/FinanceCustomerStatementsView.vue')
+    const arap = read('modules/finance/pages/FinanceCustomerArapView.vue')
+    expect(statements).not.toContain('<el-tabs')
+    expect(statements).toContain('title="账单明细表"')
+    expect(statements).toContain('title="账单支付历史表"')
+    expect(statements.match(/class="detail-table-scroll workbench-table is-page-surface"/g)).toHaveLength(2)
+    expect(statements).not.toContain('title="账单明细"')
+    expect(statements).not.toContain('title="支付历史"')
+    expect(arap).toContain('<div class="workbench-table is-page-surface"><DataTable :data="operationLogRows"')
+    const css = read('modules/finance/financeDensity.css')
+    expect(css).toContain('.finance-density-detail > .detail-page-layout__content .density-form-section')
+    expect(css).toContain('padding-block: 0;')
+    const accounts = read('modules/finance/pages/FinanceCustomerAccountsView.vue')
+    expect(accounts).not.toContain(':deep(.detail-page-layout__content)')
+  })
+  it('keeps finance detail insets on the outer page without stripping card or cell padding', () => {
+    for (const [file, className] of [['FinanceCustomerAccountsView', 'finance-account-detail'], ['FinanceCustomerArapView', 'finance-arap-detail']]) {
+      expect(read(`modules/finance/pages/${file}.vue`)).toContain(`class="${className} admin-density admin-workbench is-embedded"`)
+    }
+    const css = read('modules/finance/financeDensity.css')
+    const rule = css.slice(css.indexOf('/* The outer AdminPage owns'))
+    expect(rule).toContain('@media screen')
+    expect(rule).toContain('padding-inline: 0;')
+    expect(rule).toContain('.detail-page-layout__content > .settlement-detail-content')
+    expect(rule).toContain(':is(.density-detail-overview, .statement-summary-section)')
+    for (const protectedClass of ['workbench-metric', 'el-descriptions__cell', 'query-toolbar', 'el-table']) expect(rule).not.toContain(protectedClass)
+    const accountStyles = parse(read('modules/finance/pages/FinanceCustomerAccountsView.vue')).descriptor.styles[0]!.content
+    expect(accountStyles.match(/\.account-metrics \{([^}]+)\}/)![1]).not.toMatch(/padding:|padding-inline:|padding-left:|padding-right:/)
+  })
+  it('keeps account detail filters in the shared table layout and long identifiers readable', () => {
+    const content = read('modules/finance/pages/FinanceCustomerAccountsView.vue')
+    const header = content.split('<template #header>')[1]!.split('</template>')[0]!
+    expect(header).toContain('@click="exportLedger"')
+    expect(header).toContain('v-if="canExport"')
+    expect(header).toContain(':loading="ledgerExportBusy"')
+    const ledgerSection = content.split('class="ledger-section density-form-section"')[1]!.split('</FormSection>')[0]!
+    expect(ledgerSection).not.toContain('#toolbar-actions')
+    expect(ledgerSection).toContain('class="detail-table-scroll workbench-table is-page-surface"')
+    expect(ledgerSection).toContain('class="ledger-table" appearance="integrated"')
+    const rechargeSection = content.split('class="recharge-section density-form-section"')[1]!.split('</FormSection>')[0]!
+    expect(rechargeSection).toContain('class="detail-table-scroll workbench-table is-page-surface"')
+    expect(content.match(/account-metric workbench-metric workbench-tone is-compact/g)).toHaveLength(6)
+    expect(content).toContain('creditExpiryLabel(selected)')
+    expect(content).toContain("'is-negative': Number(selected.actualBalance) < 0")
+    expect(content).toContain('<template #filters><QueryToolbar v-model="ledgerFilters"')
+    expect(content).not.toContain(':deep(.ledger-query.query-toolbar)')
+    expect(content).toContain('class="density-descriptions account-profile"')
+    const styles = parse(content).descriptor.styles.map(style => style.content).join('\n')
+    expect(styles).not.toContain('text-overflow: ellipsis')
+    expect(styles).toContain('overflow-wrap: anywhere')
+  })
   it('keeps pallet overview spacing and metric appearance owned by shared primitives', () => {
     for (const file of ['warehouse-resources/pallets/pages/PalletsView.vue', 'overseas-warehouse/pages/PalletsView.vue']) {
       const page = parse(read(`modules/${file}`)).descriptor