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,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}