fix: less模块化调用

src/assets/styles/index.less

@@ -56,57 +56,6 @@ 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，会挤开表格列或卡片内间距，统一去掉

src/components/page/pageLayout.module.less

@@ -0,0 +1,47 @@
+// 页面容器：纵向 flex，占满高度
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// 页面筛选区域：横向 flex，可换行
+.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;
+}
+
+// 筛选区域操作按钮组
+.filterActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 0;
+}
+
+// 表格显示区域：纵向 flex，占据剩余高度
+.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;
+}
+
+.pagination {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 14px;
+}

src/pages/events/banner/index.tsx

@@ -15,6 +15,7 @@ import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
 import { useContainerSize } from '@/hooks';
 import BannerFormModal from './components/BannerFormModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -193,9 +194,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="标题" name="searchTitle">
               <Input
@@ -229,7 +230,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -253,7 +254,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/list/index.tsx

@@ -24,6 +24,7 @@ import { useContainerSize, useState } from '@/hooks';
 import EventRegulationModal from './components/EventRegulationModal';
 import EventDetailModal from './components/EventDetailModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -154,9 +155,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="创建时间" name="createTimeRange">
               <RangePicker
@@ -249,7 +250,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -271,7 +272,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/orders/index.tsx

@@ -15,6 +15,7 @@ import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './mo
 import { useContainerSize, useState } from '@/hooks';
 import OrderDetailModal from './components/OrderDetailModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -135,9 +136,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="订单时间" name="orderTimeRange">
               <RangePicker
@@ -201,7 +202,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           {/* 金额汇总 */}
           <div class={styles.summaryBar}>
             <span class={styles.summaryItem}>
@@ -238,7 +239,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/users/index.tsx

@@ -13,6 +13,7 @@ import {
 import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
 import { useContainerSize } from '@/hooks';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -102,9 +103,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户昵称" name="searchUserName">
               <Input
@@ -143,7 +144,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -163,7 +164,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/finance/payments/index.tsx

@@ -3,6 +3,7 @@ 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;
 
@@ -28,9 +29,9 @@ export default defineComponent({
     const { containerRef, height } = useContainerSize({ headerOffset: 55 });
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="时间" name="timeRange">
               <RangePicker
@@ -77,7 +78,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           {/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
           <div class={styles.summary}>
             <span class={styles.summaryItem}>
@@ -101,7 +102,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/finance/reports/index.tsx

@@ -3,6 +3,7 @@ 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';
 
 /**
  * 账务报表
@@ -157,7 +158,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class={['page-container', styles.pageWrap]}>
+        <div class={[pageStyles.container, styles.pageWrap]}>
           {/* ===== 顶部标题 + 时间范围 ===== */}
           <div class={styles.reportHeader}>
             <div class={styles.headerLeft}>

src/pages/finance/wallet/index.module.less

@@ -86,22 +86,3 @@
   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;
-  }
-}

src/pages/finance/wallet/index.tsx

@@ -5,6 +5,7 @@ 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;
@@ -105,7 +106,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class="page-container">
+        <div class={pageStyles.container}>
           {/* ===== 顶部统计卡 ===== */}
           <div class={styles.statCards}>
             {statCards.map((item) => (
@@ -133,7 +134,7 @@ export default defineComponent({
           </div>
 
           {/* ===== 筛选区 ===== */}
-          <div class="page-filter">
+          <div class={pageStyles.filter}>
             <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
               <Form.Item label="用户昵称" name="searchUserName">
                 <Input
@@ -196,7 +197,7 @@ export default defineComponent({
           {/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
 
           {/* ===== 表格区 ===== */}
-          <div class="page-table">
+          <div class={pageStyles.table}>
             <div ref={containerRef} class={styles.tableBody}>
               <Table
                 columns={tableColumns}
@@ -216,7 +217,7 @@ export default defineComponent({
             </div>
 
             {/* 独立分页，右下方 */}
-            <div class="page-pagination">
+            <div class={pageStyles.pagination}>
               <Pagination
                 current={pagination.value.current}
                 pageSize={pagination.value.pageSize}

src/pages/finance/withdraw/index.tsx

@@ -4,6 +4,7 @@ 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 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮）
@@ -78,9 +79,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="申请人昵称" name="searchUserName">
               <Input
@@ -136,7 +137,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -157,7 +158,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/system/roles/index.tsx

@@ -6,6 +6,7 @@ import { useContainerSize } from '@/hooks';
 import RoleFormModal from './components/RoleFormModal';
 import UserListModal from './components/UserListModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染
@@ -119,9 +120,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="角色" name="searchKeyword">
               <Input
@@ -146,7 +147,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -168,7 +169,7 @@ export default defineComponent({
           </div>
 
           {/* 分页 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/system/users/index.tsx

@@ -4,6 +4,7 @@ import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/us
 import { useContainerSize } from '@/hooks';
 import UserFormModal from './components/UserFormModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -117,9 +118,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户" name="searchKeyword">
               <Input
@@ -162,7 +163,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -183,7 +184,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}