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,127 +1,126 @@
 // ===== 整页可滚动：内容超出视口时出滚动条 =====
-.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;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: flex-end;
+    align-items: flex-end;
-  padding: 4px 4px 0;
+    padding: 4px 4px 0;
-  flex-shrink: 0;
+    flex-shrink: 0;
-}
-
-.headerLeft {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.reportTitle {
-  font-size: 20px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.88);
-  letter-spacing: 0.5px;
-}
-
-.reportSub {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
-  letter-spacing: 0.3px;
-}
-
-// ===== 顶部 3 张统计卡 =====
-.statCards {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  flex-shrink: 0;
-  margin: 16px 0;
-}
-
-.statCard {
-  padding: 20px 24px;
-  border-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  transition: all 0.25s ease;
-  cursor: default;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
   }
-}
 
-.statLabel {
+  .headerLeft {
-  font-size: 13px;
+    display: flex;
-  color: rgba(0, 0, 0, 0.55);
+    flex-direction: column;
-  letter-spacing: 0.3px;
+    gap: 6px;
-}
+  }
 
-.statValue {
+  .reportTitle {
-  font-size: 26px;
+    font-size: 20px;
-  font-weight: 600;
+    font-weight: 600;
-  line-height: 1.2;
+    color: rgba(0, 0, 0, 0.88);
-  font-family:
+    letter-spacing: 0.5px;
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
-  letter-spacing: 0.3px;
-}
 
-.statDesc {
+  .reportSub {
-  font-size: 12px;
+    font-size: 12px;
-  letter-spacing: 0.3px;
+    color: rgba(0, 0, 0, 0.45);
-}
+    letter-spacing: 0.3px;
+  }
 
-// ===== 图表卡 =====
+  // ===== 顶部 3 张统计卡 =====
-.chartCard {
+  .statCards {
-  flex-shrink: 0;
+    display: grid;
-  background: #fff;
+    grid-template-columns: repeat(3, 1fr);
-  border-radius: 10px;
+    gap: 16px;
-  padding: 18px 20px 14px;
+    flex-shrink: 0;
-  margin-bottom: 16px;
+    margin: 16px 0;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+  }
-}
 
-.cardTitle {
+  .statCard {
-  font-size: 14px;
+    padding: 20px 24px;
-  font-weight: 600;
+    border-radius: 10px;
-  color: rgba(0, 0, 0, 0.85);
+    display: flex;
-  margin-bottom: 14px;
+    flex-direction: column;
-  display: flex;
+    gap: 8px;
-  align-items: center;
+    transition: all 0.25s ease;
-  gap: 6px;
+    cursor: default;
-}
 
-.cardTitleIcon {
+    &:hover {
-  font-size: 14px;
+      transform: translateY(-2px);
-}
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+    }
+  }
 
-// ===== 柱状图（echarts） =====
+  .statLabel {
-.chartEcharts {
+    font-size: 13px;
-  width: 100%;
+    color: rgba(0, 0, 0, 0.55);
-  height: 300px;
+    letter-spacing: 0.3px;
-}
+  }
 
-// ===== 明细表卡（按内容自适应高度，不被压缩） =====
+  .statValue {
-.detailCard {
+    font-size: 26px;
-  flex: none;
+    font-weight: 600;
-  display: flex;
+    line-height: 1.2;
-  flex-direction: column;
+    letter-spacing: 0.3px;
-  background: #fff;
+  }
-  border-radius: 10px;
-  padding: 18px 20px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
 
-  :global(.ant-table-thead > tr > th) {
+  .statDesc {
-    background: #fafafa;
+    font-size: 12px;
+    letter-spacing: 0.3px;
+  }
+
+  // ===== 图表卡 =====
+  .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 {
+    font-size: 14px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 14px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .cardTitleIcon {
+    font-size: 14px;
+  }
+
+  // ===== 柱状图（echarts） =====
+  .chartEcharts {
+    width: 100%;
+    height: 300px;
+  }
+
+  // ===== 明细表卡（按内容自适应高度，不被压缩） =====
+  .detailCard {
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-radius: 10px;
+    padding: 18px 20px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+
+    :global(.ant-table-thead > tr > th) {
+      background: #fafafa;
+      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,62 +1,56 @@
-// ===== 自定义标题栏 =====
+.walletDetailModalMain {
-.modalHeader {
+  // ===== 自定义标题栏 =====
-  display: flex;
+  .modalHeader {
-  justify-content: space-between;
+    display: flex;
-  align-items: center;
+    justify-content: space-between;
-  padding: 0 0 16px;
+    align-items: center;
-  margin-bottom: 16px;
+    padding: 0 0 16px;
-  border-bottom: 1px solid #f0f0f0;
+    margin-bottom: 16px;
-}
+    border-bottom: 1px solid #f0f0f0;
+  }
 
-.modalTitle {
+  .modalTitle {
-  font-size: 16px;
+    font-size: 16px;
-  font-weight: 600;
+    font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.closeBtn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  font-size: 22px;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.2s;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.85);
   }
-}
 
-// ===== 内容区 =====
+  .closeBtn {
-.modalBody {
+    width: 28px;
-  padding-top: 0;
+    height: 28px;
-}
+    border: none;
+    background: transparent;
+    font-size: 22px;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
 
-// ===== 筛选区 =====
+    &:hover {
-.filterBar {
+      background: rgba(0, 0, 0, 0.04);
-  flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.85);
-  padding: 16px 20px;
+    }
-  margin-bottom: 16px;
-  background: #fafafa;
-  border: 1px solid #f0f0f0;
-  border-radius: 6px;
-}
-
-// ===== 表格区 =====
-.tableWrap {
-  flex: 1;
-  min-height: 0;
-}
-
-// ===== Modal 外层包裹：去除 antd 默认内边距 =====
-/* .walletModalWrap {
-  :global(.ant-modal-body) {
-    padding-top: 16px;
-    padding-bottom: 20px;
   }
-} */
+
+  // ===== 内容区 =====
+  .modalBody {
+    padding-top: 0;
+  }
+
+  // ===== 筛选区 =====
+  .filterBar {
+    flex-shrink: 0;
+    padding: 16px 20px;
+    margin-bottom: 16px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+  }
+
+  // ===== 表格区 =====
+  .tableWrap {
+    flex: 1;
+    min-height: 0;
+  }
+}

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,107 +1,73 @@
-// ===== 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100% =====
+// ===== 页面容器 =====
-.tableBody {
+.walletMain {
-  flex: 1;
+  // ===== 顶部 3 张统计卡 =====
-  min-height: 0;
+  .statCards {
-  overflow: hidden;
+    display: flex;
+    gap: 16px;
+    flex-shrink: 0;
+    margin-bottom: 16px;
+  }
 
-  :global {
+  .statCard {
-    .ant-spin-nested-loading,
+    flex: 1;
-    .ant-spin-container,
+    min-width: 0;
-    .ant-table,
+    display: flex;
-    .ant-table-container {
+    align-items: center;
-      height: 100%;
+    gap: 16px;
+    padding: 22px 24px;
+    background: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+    transition: all 0.25s ease;
+    cursor: default;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
     }
   }
-}
 
-// ===== 顶部 3 张统计卡 =====
+  .statCardLeft {
-.statCards {
+    flex-shrink: 0;
-  display: flex;
+  }
-  gap: 16px;
-  flex-shrink: 0;
-  margin-bottom: 16px;
-}
 
-.statCard {
+  .statIconWrap {
-  flex: 1;
+    width: 52px;
-  min-width: 0;
+    height: 52px;
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  gap: 16px;
+    justify-content: center;
-  padding: 22px 24px;
+    border-radius: 12px;
-  background: #fff;
+    font-size: 26px;
-  border: 1px solid #f0f0f0;
+    transition: transform 0.25s ease;
-  border-radius: 10px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-  transition: all 0.25s ease;
-  cursor: default;
 
-  &:hover {
+    .statCard:hover & {
-    transform: translateY(-2px);
+      transform: scale(1.05);
-    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    }
-  }
+  }
-}
+
-
+  .statCardRight {
-.statCardLeft {
+    flex: 1;
-  flex-shrink: 0;
+    min-width: 0;
-}
+    display: flex;
-
+    flex-direction: column;
-.statIconWrap {
+    gap: 6px;
-  width: 52px;
+  }
-  height: 52px;
+
-  display: flex;
+  .statLabel {
-  align-items: center;
+    font-size: 13px;
-  justify-content: center;
+    color: rgba(0, 0, 0, 0.55);
-  border-radius: 12px;
+    letter-spacing: 0.3px;
-  font-size: 26px;
+  }
-  transition: transform 0.25s ease;
+
-
+  .statValue {
-  .statCard:hover & {
+    font-size: 26px;
-    transform: scale(1.05);
+    font-weight: 600;
-  }
+    line-height: 1.2;
-}
+    letter-spacing: 0.3px;
-
+    white-space: nowrap;
-.statCardRight {
+    overflow: hidden;
-  flex: 1;
+    text-overflow: ellipsis;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.statLabel {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.55);
-  letter-spacing: 0.3px;
-}
-
-.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,195 +1,195 @@
 // ===== Modal 外层包裹：去掉 antd 默认内边距 =====
-.modalWrap {
+.withdrawAuditModalMain {
   :global(.ant-modal-header) {
     display: none;
   }
-}
 
-// ===== 自定义标题栏 =====
+  // ===== 自定义标题栏 =====
-.modalHeader {
+  .modalHeader {
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  align-items: center;
+    align-items: center;
-  padding-bottom: 14px;
+    padding-bottom: 14px;
-  margin-bottom: 8px;
+    margin-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
-}
+  }
 
-.modalTitle {
+  .modalTitle {
-  font-size: 16px;
+    font-size: 16px;
-  font-weight: 600;
+    font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.closeBtn {
-  width: 28px;
-  height: 28px;
-  border: none;
-  background: transparent;
-  font-size: 22px;
-  line-height: 1;
-  color: rgba(0, 0, 0, 0.45);
-  cursor: pointer;
-  border-radius: 4px;
-  transition: all 0.2s;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.04);
     color: rgba(0, 0, 0, 0.85);
   }
-}
 
-// ===== 通用区块 =====
+  .closeBtn {
-.section {
+    width: 28px;
-  padding: 14px 0;
+    height: 28px;
-  border-bottom: 1px dashed #f0f0f0;
+    border: none;
+    background: transparent;
+    font-size: 22px;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s;
 
-  &:last-child {
+    &:hover {
-    border-bottom: none;
+      background: rgba(0, 0, 0, 0.04);
-    padding-bottom: 0;
+      color: rgba(0, 0, 0, 0.85);
-  }
-}
-
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 14px;
-  position: relative;
-  padding-left: 10px;
-
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 3px;
-    height: 14px;
-    background: #1677ff;
-    border-radius: 2px;
-  }
-}
-
-// ===== 描述项栅格（3 列） =====
-.descGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 14px;
-  column-gap: 24px;
-}
-
-.descItem {
-  display: flex;
-  align-items: baseline;
-  min-width: 0;
-}
-
-.descLabel {
-  flex-shrink: 0;
-  color: rgba(0, 0, 0, 0.55);
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.descValue {
-  flex: 1;
-  min-width: 0;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 13px;
-  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.descValueBold {
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-}
-
-// ===== 审核表单 =====
-.formRow {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 18px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.formLabel {
-  width: 88px;
-  flex-shrink: 0;
-  color: rgba(0, 0, 0, 0.55);
-  font-size: 13px;
-  padding-top: 6px;
-}
-
-.formLabelTop {
-  padding-top: 6px;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 24px;
-}
-
-// ===== 上传 =====
-.uploader {
-  flex: 1;
-
-  :global {
-    .ant-upload-list-picture-card-container {
-      width: 96px;
-      height: 96px;
-    }
-    .ant-upload-select {
-      width: 96px;
-      height: 96px;
-      margin: 0;
     }
   }
-}
 
-.uploadTrigger {
+  // ===== 通用区块 =====
-  display: flex;
+  .section {
-  flex-direction: column;
+    padding: 14px 0;
-  align-items: center;
+    border-bottom: 1px dashed #f0f0f0;
-  justify-content: center;
-  height: 100%;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 22px;
-  background: #fafafa;
-  border-radius: 4px;
-  transition: all 0.2s;
 
-  &:hover {
+    &:last-child {
-    color: #1677ff;
+      border-bottom: none;
-    background: #f0f7ff;
+      padding-bottom: 0;
+    }
+  }
+
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 14px;
+    position: relative;
+    padding-left: 10px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 3px;
+      height: 14px;
+      background: #1677ff;
+      border-radius: 2px;
+    }
+  }
+
+  // ===== 描述项栅格（3 列） =====
+  .descGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 14px;
+    column-gap: 24px;
+  }
+
+  .descItem {
+    display: flex;
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  .descLabel {
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .descValue {
+    flex: 1;
+    min-width: 0;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 13px;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .descValueBold {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  // ===== 审核表单 =====
+  .formRow {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 18px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .formLabel {
+    width: 88px;
+    flex-shrink: 0;
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 13px;
+    padding-top: 6px;
+  }
+
+  .formLabelTop {
+    padding-top: 6px;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 24px;
+  }
+
+  // ===== 上传 =====
+  .uploader {
+    flex: 1;
+
+    :global {
+      .ant-upload-list-picture-card-container {
+        width: 96px;
+        height: 96px;
+      }
+      .ant-upload-select {
+        width: 96px;
+        height: 96px;
+        margin: 0;
+      }
+    }
+  }
+
+  .uploadTrigger {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 22px;
+    background: #fafafa;
+    border-radius: 4px;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #1677ff;
+      background: #f0f7ff;
+    }
+  }
+
+  .uploadText {
+    font-size: 12px;
+    margin-top: 4px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+
+  // ===== 审核信息（只读，逐行展示） =====
+  .infoColumn {
+    display: flex;
+    flex-direction: column;
+    row-gap: 14px;
+  }
+
+  .auditImg {
+    border-radius: 4px;
+    object-fit: cover;
+    margin-right: 8px;
+  }
+
+  .noImage {
+    color: rgba(0, 0, 0, 0.45);
   }
 }
-
-.uploadText {
-  font-size: 12px;
-  margin-top: 4px;
-  color: rgba(0, 0, 0, 0.45);
-}
-
-// ===== 审核信息（只读，逐行展示） =====
-.infoColumn {
-  display: flex;
-  flex-direction: column;
-  row-gap: 14px;
-}
-
-.auditImg {
-  border-radius: 4px;
-  object-fit: cover;
-  margin-right: 8px;
-}
-
-.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}