From b6e91bfbac889d9c43ea0b74b1563e64adb7edb0 Mon Sep 17 00:00:00 2001
From: ZhuRui <GodRuiCollection@163.com>
Date: Mon, 27 Jul 2026 17:02:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.less               | 52 ++++++++++++++++++++++
 src/pages/finance/payments/index.tsx       |  9 ++--
 src/pages/finance/reports/index.tsx        |  3 +-
 src/pages/finance/wallet/index.module.less | 19 ++++++++
 src/pages/finance/wallet/index.tsx         |  9 ++--
 src/pages/finance/withdraw/index.tsx       |  9 ++--
 6 files changed, 84 insertions(+), 17 deletions(-)

diff --git a/src/assets/styles/index.less b/src/assets/styles/index.less
index 30c80a7..2f0d68e 100644
--- a/src/assets/styles/index.less
+++ b/src/assets/styles/index.less
@@ -56,6 +56,58 @@ a {
   background: transparent;
 }
 
+// ===== 页面布局公共类 =====
+
+// 页面容器:纵向 flex,占满高度;筛选区与表格区作为直接子元素
+.page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// 页面筛选区域:横向 flex,可换行
+.page-filter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 12px;
+  flex-shrink: 0;
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+
+// 筛选区域操作按钮组:横向 flex
+.page-filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 0;
+}
+
+// 表格显示区域:纵向 flex,占据剩余高度。
+// overflow: hidden 防止子元素撑开容器，滚动由 Table 的 scroll.x/y 接管。
+// 分页组件作为独立子元素置于 Table 下方，不占用 Table 的 scroll 空间。
+.page-table {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  background-color: #fff;
+  min-height: 0;
+  min-width: 0;
+  margin-top: 16px;
+  overflow: hidden;
+  border-radius: 10px;
+}
+
+.page-pagination {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 14px;
+}
+
 // ===== antd 组件覆盖 =====
 
 // Tag 默认 margin-right: 8px，会挤开表格列或卡片内间距，统一去掉
diff --git a/src/pages/finance/payments/index.tsx b/src/pages/finance/payments/index.tsx
index f98b5e4..bb354fc 100644
--- a/src/pages/finance/payments/index.tsx
+++ b/src/pages/finance/payments/index.tsx
@@ -3,7 +3,6 @@ import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } fro
 import { usePaymentsModel } from './model/usePaymentsModel';
 import { useContainerSize } from '@/hooks';
 import styles from './index.module.less';
-import pageStyles from '@/components/page/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -29,9 +28,9 @@ export default defineComponent({
     const { containerRef, height } = useContainerSize({ headerOffset: 55 });
 
     return () => (
-      <div class={pageStyles.container}>
+      <div class="page-container">
         {/* ===== 筛选区 ===== */}
-        <div class={pageStyles.filter}>
+        <div class="page-filter">
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="时间" name="timeRange">
               <RangePicker
@@ -78,7 +77,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class={pageStyles.table}>
+        <div class="page-table">
           {/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
           <div class={styles.summary}>
             <span class={styles.summaryItem}>
@@ -102,7 +101,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class={pageStyles.pagination}>
+          <div class="page-pagination">
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}
diff --git a/src/pages/finance/reports/index.tsx b/src/pages/finance/reports/index.tsx
index 11cfc80..2c4db89 100644
--- a/src/pages/finance/reports/index.tsx
+++ b/src/pages/finance/reports/index.tsx
@@ -3,7 +3,6 @@ import { Select, Table } from 'ant-design-vue';
 import * as echarts from 'echarts';
 import { useReportsModel } from './model/useReportsModel';
 import styles from './index.module.less';
-import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * 账务报表
@@ -158,7 +157,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class={[pageStyles.container, styles.pageWrap]}>
+        <div class={['page-container', styles.pageWrap]}>
           {/* ===== 顶部标题 + 时间范围 ===== */}
           <div class={styles.reportHeader}>
             <div class={styles.headerLeft}>
diff --git a/src/pages/finance/wallet/index.module.less b/src/pages/finance/wallet/index.module.less
index c4ed3e8..3dae585 100644
--- a/src/pages/finance/wallet/index.module.less
+++ b/src/pages/finance/wallet/index.module.less
@@ -86,3 +86,22 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+// ===== 下方白卡片：包裹筛选区 + 表格区 =====
+.tableSection {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 20px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  overflow: hidden;
+
+  // 表格区紧贴筛选区下方，控制间距
+  :global(.page-table) {
+    margin-top: 16px;
+  }
+}
diff --git a/src/pages/finance/wallet/index.tsx b/src/pages/finance/wallet/index.tsx
index 02d37bc..a2437fa 100644
--- a/src/pages/finance/wallet/index.tsx
+++ b/src/pages/finance/wallet/index.tsx
@@ -5,7 +5,6 @@ import { useWalletModel } from './model/useWalletModel';
 import { useContainerSize } from '@/hooks';
 import WalletDetailModal from './components/WalletDetailModal';
 import styles from './index.module.less';
-import pageStyles from '@/components/page/pageLayout.module.less';
 
 interface StatCardItem {
   key: string;
@@ -106,7 +105,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class={pageStyles.container}>
+        <div class="page-container">
           {/* ===== 顶部统计卡 ===== */}
           <div class={styles.statCards}>
             {statCards.map((item) => (
@@ -134,7 +133,7 @@ export default defineComponent({
           </div>
 
           {/* ===== 筛选区 ===== */}
-          <div class={pageStyles.filter}>
+          <div class="page-filter">
             <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
               <Form.Item label="用户昵称" name="searchUserName">
                 <Input
@@ -197,7 +196,7 @@ export default defineComponent({
           {/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
 
           {/* ===== 表格区 ===== */}
-          <div class={pageStyles.table}>
+          <div class="page-table">
             <div ref={containerRef} class={styles.tableBody}>
               <Table
                 columns={tableColumns}
@@ -217,7 +216,7 @@ export default defineComponent({
             </div>
 
             {/* 独立分页，右下方 */}
-            <div class={pageStyles.pagination}>
+            <div class="page-pagination">
               <Pagination
                 current={pagination.value.current}
                 pageSize={pagination.value.pageSize}
diff --git a/src/pages/finance/withdraw/index.tsx b/src/pages/finance/withdraw/index.tsx
index 63bb583..54f0be3 100644
--- a/src/pages/finance/withdraw/index.tsx
+++ b/src/pages/finance/withdraw/index.tsx
@@ -4,7 +4,6 @@ import { useWithdrawModel } from './model/useWithdrawModel';
 import { useContainerSize } from '@/hooks';
 import WithdrawAuditModal from './components/WithdrawAuditModal';
 import styles from './index.module.less';
-import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮）
@@ -79,9 +78,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class={pageStyles.container}>
+      <div class="page-container">
         {/* ===== 筛选区 ===== */}
-        <div class={pageStyles.filter}>
+        <div class="page-filter">
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="申请人昵称" name="searchUserName">
               <Input
@@ -137,7 +136,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class={pageStyles.table}>
+        <div class="page-table">
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -158,7 +157,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class={pageStyles.pagination}>
+          <div class="page-pagination">
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}