Merge remote-tracking branch 'origin/release/0.01' into feature/0723/ZR

Reviewed-on: #2

src/assets/styles/pageLayout.module.less

@@ -37,6 +37,49 @@
     overflow: hidden;
     border-radius: 10px;
 
+    .tableBody {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+
+      :global {
+        .ant-spin-nested-loading,
+        .ant-spin-container,
+        .ant-table,
+        .ant-table-container {
+          height: 100%;
+        }
+      }
+    }
+
+    // ── 汇总 ──
+    .summary {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0 32px;
+      flex-shrink: 0;
+      padding: 14px 15px;
+      border-radius: 8px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+
+    .summaryItem {
+      display: inline-flex;
+      align-items: baseline;
+    }
+
+    .summaryLabel {
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    .summaryValue {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.85);
+      letter-spacing: 0.3px;
+    }
+
     .pagination {
       flex-shrink: 0;
       display: flex;

src/components/pageTabs/PageTabs.module.less

@@ -19,7 +19,6 @@
     height: 100%;
     user-select: none;
     transition: all 0.15s ease;
-    border-radius: 5px;
 
     &:not(:first-child) {
       margin-left: -9px;
@@ -40,6 +39,14 @@
             opacity: 0;
           }
         }
+
+        .tabContent {
+          background-color: rgba(0, 0, 0, 0.06);
+        }
+      }
+
+      .tabClose:hover {
+        color: rgba(0, 0, 0, 0.85);
       }
     }
 
@@ -70,12 +77,6 @@
         }
       }
     }
-
-    &:not(.tabItemActive) {
-      .tabTitleCon:hover {
-        background-color: rgba(0, 0, 0, 0.06);
-      }
-    }
   }
 
   .divider {
@@ -126,11 +127,33 @@
     transition: fill 0.15s;
   }
 
-  .tabClose {
+  // 仅包裹文字 + 关闭按钮，通过 margin 收在 tab 内部
-    position: absolute;
+  .tabContent {
-    right: 12px;
+    position: relative;
-    top: 50%;
+    height: 28px;
     z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 10px 0 10px;
+    padding: 2px 2px 2px 8px;
+    border-radius: 8px;
+    transition: background-color 0.35s;
+  }
+
+  .tabTitle {
+    min-width: 0;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.65);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tabClose {
+    flex-shrink: 0;
     width: 16px;
     height: 16px;
     line-height: 16px;
@@ -139,32 +162,6 @@
     color: rgba(0, 0, 0, 0.45);
     border-radius: 50%;
     cursor: pointer;
-    transform: translateY(-50%);
     transition: all 0.15s;
-
-    &:hover {
-      color: rgba(0, 0, 0, 0.85);
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  .tabTitleCon {
-    height: 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-  }
-
-  .tabTitle {
-    position: relative;
-    z-index: 2;
-    min-width: 0;
-    padding: 2px 32px 2px 18px;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.65);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }

src/components/pageTabs/PageTabs.tsx

@@ -71,14 +71,14 @@ const PageTabs = defineComponent({
                 </svg>
               </div>
 
-              {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+              {/* 标签内容：hover 背景包裹文字 + 关闭按钮 */}
+              <div class={styles.tabContent}>
                 <div class={styles.tabTitle}>{tab.title}</div>
-
-              {/* 关闭按钮（flex 子元素，不参与 shrink） */}
                 <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
                   ✕
                 </div>
               </div>
+            </div>
           );
         })}
       </div>

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

@@ -1,46 +0,0 @@
-// ===== 汇总（按图片：左对齐两段加粗数字） =====
-.summary {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0 32px;
-  flex-shrink: 0;
-  padding: 14px 15px;
-  background: #fff;
-  border-radius: 8px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.summaryItem {
-  display: inline-flex;
-  align-items: baseline;
-}
-
-.summaryLabel {
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.summaryValue {
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  letter-spacing: 0.3px;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-// ===== 表格 body 容器：占满 flex 剩余空间 =====
-.tableBody {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-}

src/pages/finance/payments/index.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue';
 import { Button, Input, Table, Form, Space, Pagination, Select, DatePicker } from 'ant-design-vue';
 import { usePaymentsModel } from './model/usePaymentsModel';
 import { useContainerSize } from '@/hooks';
-import styles from './index.module.less';
+import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -28,9 +28,9 @@ export default defineComponent({
     const { containerRef, height } = useContainerSize({ headerOffset: 55 });
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="时间" name="timeRange">
               <RangePicker
@@ -77,22 +77,21 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
-          {/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
+          {/* ===== 汇总区 ===== */}
-          <div class={styles.summary}>
+          <div class={pageStyles.summary}>
-            <span class={styles.summaryItem}>
+            <span class={pageStyles.summaryItem}>
-              <span class={styles.summaryLabel}>总支付金额：</span>
+              <span class={pageStyles.summaryLabel}>总支付金额：</span>
-              <span class={styles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
+              <span class={pageStyles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
             </span>
-            <span class={styles.summaryItem}>
+            <span class={pageStyles.summaryItem}>
-              <span class={styles.summaryLabel}>总退款金额：</span>
+              <span class={pageStyles.summaryLabel}>总退款金额：</span>
-              <span class={styles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
+              <span class={pageStyles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
             </span>
           </div>
-          <div ref={containerRef} class={styles.tableBody}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
             <Table
               columns={columns}
-
               dataSource={dataSource.value}
               loading={loading.value}
               scroll={{ x: 'max-content', y: height.value }}
@@ -101,7 +100,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.module.less

@@ -1,50 +1,50 @@
 // ===== 整页可滚动：内容超出视口时出滚动条 =====
-.pageWrap {
+.reportsMain {
-  height: auto !important;
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   padding-bottom: 16px;
-}
 
-// ===== 顶部标题区 =====
+  // ===== 顶部标题区 =====
-.reportHeader {
+  .reportHeader {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: 4px 4px 0;
     flex-shrink: 0;
-}
+  }
 
-.headerLeft {
+  .headerLeft {
     display: flex;
     flex-direction: column;
     gap: 6px;
-}
+  }
 
-.reportTitle {
+  .reportTitle {
     font-size: 20px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.88);
     letter-spacing: 0.5px;
-}
+  }
 
-.reportSub {
+  .reportSub {
     font-size: 12px;
     color: rgba(0, 0, 0, 0.45);
     letter-spacing: 0.3px;
-}
+  }
 
-// ===== 顶部 3 张统计卡 =====
+  // ===== 顶部 3 张统计卡 =====
-.statCards {
+  .statCards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     flex-shrink: 0;
     margin: 16px 0;
-}
+  }
 
-.statCard {
+  .statCard {
     padding: 20px 24px;
     border-radius: 10px;
     display: flex;
@@ -57,39 +57,37 @@
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
     }
-}
+  }
 
-.statLabel {
+  .statLabel {
     font-size: 13px;
     color: rgba(0, 0, 0, 0.55);
     letter-spacing: 0.3px;
-}
+  }
 
-.statValue {
+  .statValue {
     font-size: 26px;
     font-weight: 600;
     line-height: 1.2;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     letter-spacing: 0.3px;
-}
+  }
 
-.statDesc {
+  .statDesc {
     font-size: 12px;
     letter-spacing: 0.3px;
-}
+  }
 
-// ===== 图表卡 =====
+  // ===== 图表卡 =====
-.chartCard {
+  .chartCard {
     flex-shrink: 0;
     background: #fff;
     border-radius: 10px;
     padding: 18px 20px 14px;
     margin-bottom: 16px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-}
+  }
 
-.cardTitle {
+  .cardTitle {
     font-size: 14px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
@@ -97,20 +95,20 @@
     display: flex;
     align-items: center;
     gap: 6px;
-}
+  }
 
-.cardTitleIcon {
+  .cardTitleIcon {
     font-size: 14px;
-}
+  }
 
-// ===== 柱状图（echarts） =====
+  // ===== 柱状图（echarts） =====
-.chartEcharts {
+  .chartEcharts {
     width: 100%;
     height: 300px;
-}
+  }
 
-// ===== 明细表卡（按内容自适应高度，不被压缩） =====
+  // ===== 明细表卡（按内容自适应高度，不被压缩） =====
-.detailCard {
+  .detailCard {
     flex: none;
     display: flex;
     flex-direction: column;
@@ -124,4 +122,5 @@
       font-weight: 600;
       color: rgba(0, 0, 0, 0.85);
     }
+  }
 }

src/pages/finance/reports/index.tsx

@@ -157,7 +157,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class={['page-container', styles.pageWrap]}>
+        <div class={styles.reportsMain}>
           {/* ===== 顶部标题 + 时间范围 ===== */}
           <div class={styles.reportHeader}>
             <div class={styles.headerLeft}>

src/pages/finance/wallet/components/WalletDetailModal.module.less

@@ -1,20 +1,21 @@
-// ===== 自定义标题栏 =====
+.walletDetailModalMain {
-.modalHeader {
+  // ===== 自定义标题栏 =====
+  .modalHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 0 16px;
     margin-bottom: 16px;
     border-bottom: 1px solid #f0f0f0;
-}
+  }
 
-.modalTitle {
+  .modalTitle {
     font-size: 16px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
-}
+  }
 
-.closeBtn {
+  .closeBtn {
     width: 28px;
     height: 28px;
     border: none;
@@ -30,33 +31,26 @@
       background: rgba(0, 0, 0, 0.04);
       color: rgba(0, 0, 0, 0.85);
     }
-}
+  }
 
-// ===== 内容区 =====
+  // ===== 内容区 =====
-.modalBody {
+  .modalBody {
     padding-top: 0;
-}
+  }
 
-// ===== 筛选区 =====
+  // ===== 筛选区 =====
-.filterBar {
+  .filterBar {
     flex-shrink: 0;
     padding: 16px 20px;
     margin-bottom: 16px;
     background: #fafafa;
     border: 1px solid #f0f0f0;
     border-radius: 6px;
-}
+  }
 
-// ===== 表格区 =====
+  // ===== 表格区 =====
-.tableWrap {
+  .tableWrap {
     flex: 1;
     min-height: 0;
-}
-
-// ===== Modal 外层包裹：去除 antd 默认内边距 =====
-/* .walletModalWrap {
-  :global(.ant-modal-body) {
-    padding-top: 16px;
-    padding-bottom: 20px;
   }
-} */
+}

src/pages/finance/wallet/components/WalletDetailModal.tsx

@@ -207,6 +207,7 @@ export default defineComponent({
         destroyOnClose
         footer={null}
         centered
+        wrapClassName={styles.walletDetailModalMain}
       >
         <div class={styles.modalBody}>
           {/* ===== 弹窗内筛选区 ===== */}

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

@@ -1,28 +1,14 @@
-// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
+// ===== 页面容器 =====
-.tableBody {
+.walletMain {
-  flex: 1;
+  // ===== 顶部 3 张统计卡 =====
-  min-height: 0;
+  .statCards {
-  overflow: hidden;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-}
-
-// ===== 顶部 3 张统计卡 =====
-.statCards {
     display: flex;
     gap: 16px;
     flex-shrink: 0;
     margin-bottom: 16px;
-}
+  }
 
-.statCard {
+  .statCard {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -40,13 +26,13 @@
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     }
-}
+  }
 
-.statCardLeft {
+  .statCardLeft {
     flex-shrink: 0;
-}
+  }
 
-.statIconWrap {
+  .statIconWrap {
     width: 52px;
     height: 52px;
     display: flex;
@@ -59,49 +45,29 @@
     .statCard:hover & {
       transform: scale(1.05);
     }
-}
+  }
 
-.statCardRight {
+  .statCardRight {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 6px;
-}
+  }
 
-.statLabel {
+  .statLabel {
     font-size: 13px;
     color: rgba(0, 0, 0, 0.55);
     letter-spacing: 0.3px;
-}
+  }
 
-.statValue {
+  .statValue {
     font-size: 26px;
     font-weight: 600;
     line-height: 1.2;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     letter-spacing: 0.3px;
     white-space: nowrap;
     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 '@/assets/styles/pageLayout.module.less';
 
 interface StatCardItem {
   key: string;
@@ -105,7 +106,7 @@ export default defineComponent({
       ];
 
       return (
-        <div class="page-container">
+        <div class={[pageStyles.containerMain, styles.walletMain]}>
           {/* ===== 顶部统计卡 ===== */}
           <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,8 +197,8 @@ export default defineComponent({
           {/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
 
           {/* ===== 表格区 ===== */}
-          <div class="page-table">
+          <div class={pageStyles.table}>
-            <div ref={containerRef} class={styles.tableBody}>
+            <div ref={containerRef} class={pageStyles.tableBody}>
               <Table
                 columns={tableColumns}
                 dataSource={dataSource.value}
@@ -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/components/WithdrawAuditModal.module.less

@@ -1,27 +1,26 @@
 // ===== Modal 外层包裹：去掉 antd 默认内边距 =====
-.modalWrap {
+.withdrawAuditModalMain {
   :global(.ant-modal-header) {
     display: none;
   }
-}
 
-// ===== 自定义标题栏 =====
+  // ===== 自定义标题栏 =====
-.modalHeader {
+  .modalHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 14px;
     margin-bottom: 8px;
     border-bottom: 1px solid #f0f0f0;
-}
+  }
 
-.modalTitle {
+  .modalTitle {
     font-size: 16px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
-}
+  }
 
-.closeBtn {
+  .closeBtn {
     width: 28px;
     height: 28px;
     border: none;
@@ -37,10 +36,10 @@
       background: rgba(0, 0, 0, 0.04);
       color: rgba(0, 0, 0, 0.85);
     }
-}
+  }
 
-// ===== 通用区块 =====
+  // ===== 通用区块 =====
-.section {
+  .section {
     padding: 14px 0;
     border-bottom: 1px dashed #f0f0f0;
 
@@ -48,9 +47,9 @@
       border-bottom: none;
       padding-bottom: 0;
     }
-}
+  }
 
-.sectionTitle {
+  .sectionTitle {
     font-size: 14px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
@@ -69,30 +68,30 @@
       background: #1677ff;
       border-radius: 2px;
     }
-}
+  }
 
-// ===== 描述项栅格（3 列） =====
+  // ===== 描述项栅格（3 列） =====
-.descGrid {
+  .descGrid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     row-gap: 14px;
     column-gap: 24px;
-}
+  }
 
-.descItem {
+  .descItem {
     display: flex;
     align-items: baseline;
     min-width: 0;
-}
+  }
 
-.descLabel {
+  .descLabel {
     flex-shrink: 0;
     color: rgba(0, 0, 0, 0.55);
     font-size: 13px;
     white-space: nowrap;
-}
+  }
 
-.descValue {
+  .descValue {
     flex: 1;
     min-width: 0;
     color: rgba(0, 0, 0, 0.85);
@@ -100,15 +99,15 @@
     word-break: break-all;
     overflow: hidden;
     text-overflow: ellipsis;
-}
+  }
 
-.descValueBold {
+  .descValueBold {
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
-}
+  }
 
-// ===== 审核表单 =====
+  // ===== 审核表单 =====
-.formRow {
+  .formRow {
     display: flex;
     align-items: flex-start;
     margin-bottom: 18px;
@@ -116,28 +115,28 @@
     &:last-child {
       margin-bottom: 0;
     }
-}
+  }
 
-.formLabel {
+  .formLabel {
     width: 88px;
     flex-shrink: 0;
     color: rgba(0, 0, 0, 0.55);
     font-size: 13px;
     padding-top: 6px;
-}
+  }
 
-.formLabelTop {
+  .formLabelTop {
     padding-top: 6px;
-}
+  }
 
-.footer {
+  .footer {
     display: flex;
     justify-content: flex-end;
     margin-top: 24px;
-}
+  }
 
-// ===== 上传 =====
+  // ===== 上传 =====
-.uploader {
+  .uploader {
     flex: 1;
 
     :global {
@@ -151,9 +150,9 @@
         margin: 0;
       }
     }
-}
+  }
 
-.uploadTrigger {
+  .uploadTrigger {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -169,27 +168,28 @@
       color: #1677ff;
       background: #f0f7ff;
     }
-}
+  }
 
-.uploadText {
+  .uploadText {
     font-size: 12px;
     margin-top: 4px;
     color: rgba(0, 0, 0, 0.45);
-}
+  }
 
-// ===== 审核信息（只读，逐行展示） =====
+  // ===== 审核信息（只读，逐行展示） =====
-.infoColumn {
+  .infoColumn {
     display: flex;
     flex-direction: column;
     row-gap: 14px;
-}
+  }
 
-.auditImg {
+  .auditImg {
     border-radius: 4px;
     object-fit: cover;
     margin-right: 8px;
-}
+  }
 
-.noImage {
+  .noImage {
     color: rgba(0, 0, 0, 0.45);
+  }
 }

src/pages/finance/withdraw/components/WithdrawAuditModal.tsx

@@ -105,9 +105,9 @@ export default defineComponent({
           width={850}
           centered
           footer={null}
-          wrapClassName={styles.modalWrap}
           title={null}
           closable={false}
+          wrapClassName={styles.withdrawAuditModalMain}
         >
           {/* 自定义标题栏 */}
           <div class={styles.modalHeader}>

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

@@ -1,15 +0,0 @@
-// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
-.tableBody {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-}

src/pages/finance/withdraw/index.tsx

@@ -3,7 +3,7 @@ import { Button, Input, Table, Form, Space, Pagination, Select } from 'ant-desig
 import { useWithdrawModel } from './model/useWithdrawModel';
 import { useContainerSize } from '@/hooks';
 import WithdrawAuditModal from './components/WithdrawAuditModal';
-import styles from './index.module.less';
+import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮）
@@ -78,9 +78,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="申请人昵称" name="searchUserName">
               <Input
@@ -136,8 +136,8 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
-          <div ref={containerRef} class={styles.tableBody}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
             <Table
               columns={tableColumns}
               dataSource={dataSource.value}
@@ -157,7 +157,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}