Merge pull request 'feature/0.01_cst' (#2) from feature/0.01_cst into release/0.01

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/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,11 +1,11 @@
 // ===== 整页可滚动：内容超出视口时出滚动条 =====
-.pageWrap {
+.reportsMain {
-  height: auto !important;
+  display: flex;
+  flex-direction: column;
   min-height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   padding-bottom: 16px;
-}
 
   // ===== 顶部标题区 =====
   .reportHeader {
@@ -69,8 +69,6 @@
     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;
   }
 
@@ -125,3 +123,4 @@
       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,3 +1,4 @@
+.walletDetailModalMain {
   // ===== 自定义标题栏 =====
   .modalHeader {
     display: flex;
@@ -52,11 +53,4 @@
     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,19 +1,5 @@
-// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
+// ===== 页面容器 =====
-.tableBody {
+.walletMain {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-}
-
   // ===== 顶部 3 张统计卡 =====
   .statCards {
     display: flex;
@@ -79,29 +65,9 @@
     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,9 +1,8 @@
 // ===== Modal 外层包裹：去掉 antd 默认内边距 =====
-.modalWrap {
+.withdrawAuditModalMain {
   :global(.ant-modal-header) {
     display: none;
   }
-}
 
   // ===== 自定义标题栏 =====
   .modalHeader {
@@ -193,3 +192,4 @@
   .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}