style(finance): unify list and detail layouts and receipt controls

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>