fix: 处理报错

src/assets/styles/index.less

@@ -56,6 +56,58 @@ 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/PageTabs.module.less

@@ -38,7 +38,7 @@
   }
 
   // ── hover 态（非激活） ──
-  &:not(.active) {
+  &:not(.tabItemActive) {
     &:hover {
       // 自身分隔线消失
       > .divider {
@@ -54,7 +54,7 @@
   }
 
   // ── 激活态 ──
-  &.active {
+  &.tabItemActive {
     z-index: 2;
     // 右侧邻居的分隔线消失
     & + .tabItem {
@@ -164,7 +164,7 @@
 }
 
 // hover 只在非激活标签时生效
-.tabItem:not(.active) {
+.tabItem:not(.tabItemActive) {
   .tabTitleCon:hover {
     background-color: rgba(0, 0, 0, 0.06);
   }

src/components/page/PageTabs.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, type PropType } from 'vue';
 import { message } from 'ant-design-vue';
-import type { TabView } from '@/stores/tabsStore';
+import type { TabView } from '@/types';
 import styles from './PageTabs.module.less';
 
 /**
@@ -12,7 +12,7 @@ import styles from './PageTabs.module.less';
  * - 标签间分隔线
  * - 关闭按钮
  */
-export default defineComponent({
+const PageTabs = defineComponent({
   name: 'PageTabs',
   props: {
     /** 标签列表 */
@@ -49,7 +49,7 @@ export default defineComponent({
           return (
             <div
               key={tab.path}
-              class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].join(' ')}
+              class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
               onClick={() => handleClick(tab.path)}
             >
               {/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
@@ -59,7 +59,7 @@ export default defineComponent({
               />
 
               {/* Chrome 风格背景：激活态 */}
-              <div class={[styles.tabBg, isActive ? styles.tabBgActive : ''].join(' ')}>
+              <div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
                 <div class={styles.tabBgInner} />
                 {/* 左下曲线 */}
                 <svg class={styles.tabBgCurveBefore} height="7" width="7">
@@ -87,3 +87,5 @@ export default defineComponent({
     );
   },
 });
+
+export default PageTabs;

src/pages/finance/payments/index.tsx

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

src/pages/finance/reports/index.tsx

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

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

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

src/pages/finance/withdraw/index.tsx

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

src/stores/tabsStore.ts

@@ -1,18 +1,8 @@
 import { reactive, computed, toRefs } from 'vue';
 import router from '@/router';
+import type { TabView } from '@/types';
 
-/**
+export type { TabView };
- * 单个页面标签的数据结构（标签 = 已经访问过的页面）
- *
- * path  唯一标识，用于路由激活态判断
- * name  路由组件 name,用于 <keep-alive :include="cachedViews">
- * title 展示在 tab 上的文字
- */
-export interface TabView {
-  path: string;
-  name: string;
-  title: string;
-}
 
 interface TabsState {
   /** 已打开的页面标签列表，按访问顺序累加 */

src/types/index.ts

@@ -23,6 +23,13 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
+/** 页面标签栏单个 tab 的数据结构 */
+export interface TabView {
+  path: string;
+  name: string;
+  title: string;
+}
+
 // ── 菜单 & 权限 ──
 
 /**