fix: less模块化调用

Reviewed-on: #1

package.json

@@ -22,6 +22,7 @@
     "ant-design-vue": "^4.0.0",
     "china-area-data": "^5.0.1",
     "dayjs": "^1.11.21",
+    "echarts": "^5.6.0",
     "express": "^5.2.1",
     "html2canvas": "^1.4.1",
     "qs": "^6.15.0",

src/assets/styles/index.less

@@ -56,57 +56,6 @@ 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/index.ts

@@ -4,3 +4,4 @@
  */
 export { default as HelloWorld } from './HelloWorld';
 export { default as ChangePasswordModal } from './ChangePasswordModal';
+export { default as PageTabs } from './page/PageTabs';

src/components/page/PageTabs.module.less

@@ -0,0 +1,185 @@
+/**
+ * PageTabs — Chrome 风格标签栏样式
+ *
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签间通过负 margin 重叠
+ * - 激活态使用 SVG 绘制左下/右下曲线填充，形成 Chrome tab 效果
+ * - hover 态浅灰背景
+ * - 分隔线在相邻非激活标签之间
+ */
+
+// 主色调（antd 默认蓝）
+@primary: #1677ff;
+
+.tabsWrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // 隐藏横向滚动条
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+}
+
+.tabItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  user-select: none;
+  transition: all 0.15s ease;
+  padding: 0 8px 0 14px;
+
+  &:global(:not(.dragging)) {
+    cursor: pointer;
+  }
+
+  // ── hover 态（非激活） ──
+  &:not(.active) {
+    &:hover {
+      // 自身分隔线消失
+      > .divider {
+        opacity: 0;
+      }
+      // 右侧邻居的分隔线也消失
+      & + .tabItem {
+        > .divider {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  // ── 激活态 ──
+  &.active {
+    z-index: 2;
+    // 右侧邻居的分隔线消失
+    & + .tabItem {
+      > .divider {
+        opacity: 0 !important;
+      }
+    }
+    // 文字激活色
+    .tabTitle {
+      color: @primary;
+      font-weight: 500;
+    }
+    // 背景蓝色
+    .tabBg {
+      &.tabBgActive {
+        .tabBgInner {
+          background-color: fade(@primary, 8%);
+        }
+        .tabBgCurveBefore,
+        .tabBgCurveAfter {
+          fill: fade(@primary, 8%);
+        }
+      }
+    }
+  }
+}
+
+// ── 分隔线 ──
+.divider {
+  position: absolute;
+  left: 7px;
+  top: 50%;
+  z-index: 0;
+  width: 1px;
+  height: 16px;
+  background-color: #e8e8e8;
+  transform: translateY(-50%);
+  transition: opacity 0.15s;
+}
+
+// ── Chrome 风格背景层（激活态可见，hover 态可见但偏浅） ──
+.tabBg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  padding: 0 calc(7px - 1px);
+  transition: opacity 0.15s;
+}
+
+// 背景主体：顶部圆角
+.tabBgInner {
+  height: 100%;
+  border-radius: 7px 7px 0 0;
+  transition:
+    background-color 0.15s,
+    margin 0.15s,
+    border-radius 0.15s;
+}
+
+// 左下 SVG 曲线
+.tabBgCurveBefore {
+  position: absolute;
+  left: -1px;
+  bottom: 0;
+  fill: transparent;
+  transition: fill 0.15s;
+}
+
+// 右下 SVG 曲线
+.tabBgCurveAfter {
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  fill: transparent;
+  transition: fill 0.15s;
+}
+
+// ── 关闭按钮（flex 子元素，文字同行自然居中） ──
+.tabClose {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  font-size: 10px;
+  text-align: center;
+  margin-right: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  border-radius: 50%;
+  cursor: pointer;
+  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;
+}
+
+// hover 只在非激活标签时生效
+.tabItem:not(.active) {
+  .tabTitleCon:hover {
+    background-color: rgba(0, 0, 0, 0.06);
+  }
+}
+
+// ── 标签文字（flex 子元素，可收缩） ──
+.tabTitle {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  min-width: 0;
+  padding: 2px 8px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.65);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/components/page/PageTabs.tsx

@@ -0,0 +1,89 @@
+import { defineComponent, type PropType } from 'vue';
+import { message } from 'ant-design-vue';
+import type { TabView } from '@/stores/tabsStore';
+import styles from './PageTabs.module.less';
+
+/**
+ * Chrome 风格的页面标签栏组件
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签重叠排列（负 margin）
+ * - 激活态：圆角背景 + SVG 底部曲线
+ * - hover 态：浅灰背景
+ * - 标签间分隔线
+ * - 关闭按钮
+ */
+export default defineComponent({
+  name: 'PageTabs',
+  props: {
+    /** 标签列表 */
+    tabs: { type: Array as PropType<TabView[]>, required: true },
+    /** 当前激活 key */
+    activeKey: { type: String, required: true },
+    /** 关闭标签 */
+    onClose: { type: Function as PropType<(key: string) => void>, default: undefined },
+    /** 切换标签 */
+    onChange: { type: Function as PropType<(key: string) => void>, default: undefined },
+  },
+  setup(props) {
+    const handleClick = (key: string) => {
+      if (key !== props.activeKey && props.onChange) {
+        props.onChange(key);
+      }
+    };
+
+    const handleClose = (key: string, e: Event) => {
+      e.stopPropagation();
+      if (props.tabs.length <= 1) {
+        message.warning('至少保留一个标签');
+        return;
+      }
+      if (props.onClose) {
+        props.onClose(key);
+      }
+    };
+
+    return () => (
+      <div class={styles.tabsWrap}>
+        {props.tabs.map((tab, i) => {
+          const isActive = tab.path === props.activeKey;
+          return (
+            <div
+              key={tab.path}
+              class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].join(' ')}
+              onClick={() => handleClick(tab.path)}
+            >
+              {/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
+              <div
+                v-show={i !== 0 && !isActive && props.tabs[i - 1]?.path !== props.activeKey}
+                class={styles.divider}
+              />
+
+              {/* Chrome 风格背景：激活态 */}
+              <div class={[styles.tabBg, isActive ? styles.tabBgActive : ''].join(' ')}>
+                <div class={styles.tabBgInner} />
+                {/* 左下曲线 */}
+                <svg class={styles.tabBgCurveBefore} height="7" width="7">
+                  <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
+                </svg>
+                {/* 右下曲线 */}
+                <svg class={styles.tabBgCurveAfter} height="7" width="7">
+                  <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
+                </svg>
+              </div>
+
+              <div class={styles.tabTitleCon}>
+                {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+                <span class={styles.tabTitle}>{tab.title}</span>
+              </div>
+
+              {/* 关闭按钮（flex 子元素，不参与 shrink） */}
+              <span class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
+                ✕
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+});

src/components/page/pageLayout.module.less

@@ -0,0 +1,47 @@
+// 页面容器：纵向 flex，占满高度
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+// 页面筛选区域：横向 flex，可换行
+.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;
+}
+
+// 筛选区域操作按钮组
+.filterActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-left: 0;
+}
+
+// 表格显示区域：纵向 flex，占据剩余高度
+.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;
+}
+
+.pagination {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 14px;
+}

src/config/fallbackRoutes.ts

@@ -54,30 +54,35 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
         name: '赛事列表',
         path: 'events/list',
         component: 'events/list',
+        componentName: 'EventList',
       },
       {
         id: 'events_orders',
         name: '订单管理',
         path: 'events/orders',
         component: 'events/orders',
+        componentName: 'EventOrders',
       },
       {
         id: 'events_users',
         name: '用户列表',
         path: 'events/users',
         component: 'events/users',
+        componentName: 'EventUsers',
       },
       {
         id: 'events_banner',
         name: 'Banner配置',
         path: 'events/banner',
         component: 'events/banner',
+        componentName: 'EventBanner',
       },
       {
         id: 'events_logs',
         name: '赛事操作日志',
         path: 'events/logs',
         component: 'events/logs',
+        componentName: 'EventLogs',
       },
     ],
   },
@@ -92,24 +97,28 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
         name: '提现申请',
         path: 'finance/withdraw',
         component: 'finance/withdraw',
+        componentName: 'FinanceWithdraw',
       },
       {
         id: 'finance_wallet',
         name: '用户钱包',
         path: 'finance/wallet',
         component: 'finance/wallet',
+        componentName: 'FinanceWallet',
       },
       {
         id: 'finance_payments',
         name: '支付流水',
         path: 'finance/payments',
         component: 'finance/payments',
+        componentName: 'FinancePayments',
       },
       {
         id: 'finance_reports',
         name: '账务报表',
         path: 'finance/reports',
         component: 'finance/reports',
+        componentName: 'FinanceReports',
       },
     ],
   },
@@ -124,18 +133,21 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
         name: '用户管理',
         path: 'system/users',
         component: 'system/users',
+        componentName: 'SystemUsers',
       },
       {
         id: 'system_roles',
         name: '角色权限',
         path: 'system/roles',
         component: 'system/roles',
+        componentName: 'SystemRoles',
       },
       {
         id: 'system_logs',
         name: '操作日志',
         path: 'system/logs',
         component: 'system/logs',
+        componentName: 'SystemLogs',
       },
     ],
   },

src/layouts/BasicLayout.module.less

@@ -113,3 +113,21 @@
   display: flex;
   flex-direction: column;
 }
+
+// ── 顶部行：原 Header 中的三个区域（折叠按钮 / 面包屑 / 右侧账号信息）整体包成一个 row ──
+.headerRow {
+  padding: 0 16px;
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+// ── 页面标签栏容器（Chrome 风格 PageTabs 的外壳） ──
+.pageTabs {
+  width: 100%;
+  padding: 4px 16px 0 16px;
+  height: 42px;
+  background: #fff;
+  border-top: 1px solid #f0f0f0;
+}

src/layouts/BasicLayout.tsx

@@ -1,5 +1,6 @@
 import { computed, defineComponent, h, ref } from 'vue';
 import type { CSSProperties } from 'vue';
+import { KeepAlive } from 'vue';
 import { useRouter, useRoute, RouterView } from 'vue-router';
 import { Layout, Menu, Modal, Breadcrumb, Dropdown, message } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
@@ -16,8 +17,9 @@ import {
 } from '@ant-design/icons-vue';
 import { useMenuStore } from '@/stores/menuStore';
 import { useUserStore } from '@/stores/userStore';
+import { useTabsStore } from '@/stores/tabsStore';
 import { useState, useBreadcrumb, auth } from '@/hooks';
-import { ChangePasswordModal } from '@/components';
+import { ChangePasswordModal, PageTabs } from '@/components';
 import logoutSvg from '@/assets/img/icon/logout.svg';
 import styles from './BasicLayout.module.less';
 
@@ -25,11 +27,13 @@ const { Header, Sider, Content, Footer } = Layout;
 
 const headerStyle: CSSProperties = {
   background: '#fff',
-  padding: '0 16px',
+  padding: '0',
   display: 'flex',
-  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
   color: '#1a1a1a',
   boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
+  height: 'auto',
 };
 
 const siderStyle: CSSProperties = {
@@ -93,6 +97,7 @@ export default defineComponent({
 
     const { menuItems } = useMenuStore();
     const { phone } = useUserStore();
+    const { tabs, cachedViews, removeTab } = useTabsStore();
     const { breadcrumbs } = useBreadcrumb();
 
     const selectedKeys = computed<string[]>(() => [route.path]);
@@ -107,6 +112,8 @@ export default defineComponent({
       collapsed.value = !collapsed.value;
     };
 
+    const activeTabKey = computed(() => route.path);
+
     /** ===== 退出登录 ===== */
     const handleLogout = () => {
       Modal.confirm({
@@ -154,6 +161,17 @@ export default defineComponent({
       }
     };
 
+    /** ===== PageTabs 事件 ===== */
+    const handleTabChange = (key: string) => {
+      if (key !== route.path) {
+        router.push(key);
+      }
+    };
+
+    const handleTabClose = (key: string) => {
+      removeTab(key);
+    };
+
     return () => (
       <Layout class={styles.container}>
         <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
@@ -171,6 +189,12 @@ export default defineComponent({
 
         <Layout class={styles.main}>
           <Header style={headerStyle}>
+            {/*
+              ── 顶部行：折叠按钮 + 面包屑 + 右侧账号信息 ──
+              按需求把原来平铺在 Header 里的三块统一包到一个 row 容器内，
+              形成「行容器 + tabs 容器」的两层结构
+            */}
+            <div class={styles.headerRow}>
               <span class={styles.trigger} onClick={toggleCollapsed}>
                 {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
               </span>
@@ -217,10 +241,37 @@ export default defineComponent({
                   }}
                 </Dropdown>
               </div>
+            </div>
+
+            {/*
+              ── Tabs 行：Chrome 风格页面标签栏 ──
+              数据来自 tabsStore，点击切换路由，关闭按钮走 store.removeTab
+            */}
+            <div class={styles.pageTabs}>
+              <PageTabs
+                tabs={tabs.value}
+                activeKey={activeTabKey.value}
+                onChange={handleTabChange}
+                onClose={handleTabClose}
+              />
+            </div>
           </Header>
 
+          {/*
+            ── 路由出口 ──
+            用 <KeepAlive :include="cachedViews"> 缓存已访问过的页面,
+            include 是组件 name 列表,所以页面组件需要在 defineComponent 中显式给出 name
+          */}
           <Content class={styles.content}>
-            <RouterView />
+            <RouterView
+              v-slots={{
+                default: ({ Component }: any) => (
+                  <KeepAlive include={cachedViews.value}>
+                    <Component />
+                  </KeepAlive>
+                ),
+              }}
+            />
           </Content>
 
           <Footer style={footerStyle}>六个羽友赛事运营平台 ©{new Date().getFullYear()}</Footer>

src/pages/events/banner/index.tsx

@@ -15,6 +15,7 @@ import { useBannerModel, BANNER_STATUS_OPTIONS } from './model/useBannerModel';
 import { useContainerSize } from '@/hooks';
 import BannerFormModal from './components/BannerFormModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -193,9 +194,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="标题" name="searchTitle">
               <Input
@@ -229,7 +230,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -253,7 +254,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/list/index.tsx

@@ -24,6 +24,7 @@ import { useContainerSize, useState } from '@/hooks';
 import EventRegulationModal from './components/EventRegulationModal';
 import EventDetailModal from './components/EventDetailModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -154,9 +155,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="创建时间" name="createTimeRange">
               <RangePicker
@@ -249,7 +250,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -271,7 +272,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/orders/index.tsx

@@ -15,6 +15,7 @@ import { useOrderModel, ORDER_STATUS_OPTIONS, REFUND_STATUS_OPTIONS } from './mo
 import { useContainerSize, useState } from '@/hooks';
 import OrderDetailModal from './components/OrderDetailModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -135,9 +136,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="订单时间" name="orderTimeRange">
               <RangePicker
@@ -201,7 +202,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           {/* 金额汇总 */}
           <div class={styles.summaryBar}>
             <span class={styles.summaryItem}>
@@ -238,7 +239,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页，右下方 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/events/users/index.tsx

@@ -13,6 +13,7 @@ import {
 import { useUserModel, USER_STATUS_OPTIONS } from './model/useUserModel';
 import { useContainerSize } from '@/hooks';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -102,9 +103,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户昵称" name="searchUserName">
               <Input
@@ -143,7 +144,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -163,7 +164,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/payments/index.module.less

@@ -0,0 +1,46 @@
+// ===== 汇总（按图片：左对齐两段加粗数字） =====
+.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

@@ -1,4 +1,11 @@
 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 '@/components/page/pageLayout.module.less';
+
+const { RangePicker } = DatePicker;
 
 /**
  * 支付流水
@@ -6,9 +13,107 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'FinancePayments',
   setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      summary,
+      pagination,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      PAYMENT_TYPE_OPTIONS,
+    } = usePaymentsModel();
+
+    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>支付流水 - 开发中</div>
+        {/* ===== 筛选区 ===== */}
+        <div class={pageStyles.filter}>
+          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+            <Form.Item label="时间" name="timeRange">
+              <RangePicker
+                value={filterForm.timeRange as any}
+                style={{ width: '240px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.timeRange = val)}
+              />
+            </Form.Item>
+            <Form.Item label="用户昵称" name="searchUserName">
+              <Input
+                placeholder="请输入"
+                style={{ width: '180px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="手机号" name="searchPhone">
+              <Input
+                placeholder="请输入"
+                style={{ width: '180px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="类型" name="type">
+              <Select
+                value={filterForm.type}
+                options={PAYMENT_TYPE_OPTIONS as any}
+                style={{ width: '140px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.type = val || '')}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button onClick={handleReset}>重置</Button>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* ===== 表格区 ===== */}
+        <div class={pageStyles.table}>
+          {/* ===== 汇总区（按图片样式：左对齐的两段加粗数字） ===== */}
+          <div class={styles.summary}>
+            <span class={styles.summaryItem}>
+              <span class={styles.summaryLabel}>总支付金额：</span>
+              <span class={styles.summaryValue}>{summary.value.totalPay.toFixed(2)}元</span>
+            </span>
+            <span class={styles.summaryItem}>
+              <span class={styles.summaryLabel}>总退款金额：</span>
+              <span class={styles.summaryValue}>{summary.value.totalRefund.toFixed(2)}元</span>
+            </span>
+          </div>
+          <div ref={containerRef} class={styles.tableBody}>
+            <Table
+              columns={columns}
+
+              dataSource={dataSource.value}
+              loading={loading.value}
+              scroll={{ x: 'max-content', y: height.value }}
+              pagination={false}
+            />
+          </div>
+
+          {/* 独立分页，右下方 */}
+          <div class={pageStyles.pagination}>
+            <Pagination
+              current={pagination.value.current}
+              pageSize={pagination.value.pageSize}
+              total={pagination.value.total}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+              onShowSizeChange={handlePageChange}
+            />
+          </div>
+        </div>
       </div>
     );
   },

src/pages/finance/payments/model/usePaymentsModel.ts

@@ -0,0 +1,201 @@
+import { reactive, toRef, Ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 类型选项（筛选） */
+export const PAYMENT_TYPE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '报名', label: '报名' },
+  { value: '取消报名', label: '取消报名' },
+  { value: '提现', label: '提现' },
+] as const;
+
+// ============================================================
+// 汇总假数据
+// ============================================================
+
+const MOCK_SUMMARY = {
+  totalPay: 113255.0,
+  totalRefund: 3255.0,
+};
+
+// ============================================================
+// 支付流水假数据（5 条）
+// ============================================================
+
+const MOCK_DATA = [
+  {
+    key: '1',
+    flowNo: 'xxxxxx',
+    orderNo: 'xxxxxxxx',
+    type: '报名',
+    nickName: '张三',
+    phone: '12345678997',
+    amount: 99.0,
+    thirdFlowNo: 'xxxxxxxxxxxxxxxxxxxx',
+    tradeTime: '2026-05-26 08:00:00',
+  },
+  {
+    key: '2',
+    flowNo: '',
+    orderNo: '',
+    type: '取消报名',
+    nickName: '李四',
+    phone: '12345678998',
+    amount: 100.0,
+    thirdFlowNo: '',
+    tradeTime: '2026-05-26 07:00:00',
+  },
+  {
+    key: '3',
+    flowNo: '',
+    orderNo: '',
+    type: '提现',
+    nickName: '王五',
+    phone: '12345678998',
+    amount: 1000.0,
+    thirdFlowNo: '',
+    tradeTime: '2026-05-26 06:00:00',
+  },
+  {
+    key: '4',
+    flowNo: '',
+    orderNo: '',
+    type: '报名',
+    nickName: '赵六',
+    phone: '13800138000',
+    amount: 199.0,
+    thirdFlowNo: '',
+    tradeTime: '2026-05-25 19:30:00',
+  },
+  {
+    key: '5',
+    flowNo: '',
+    orderNo: '',
+    type: '取消报名',
+    nickName: '钱七',
+    phone: '13900139001',
+    amount: 50.0,
+    thirdFlowNo: '',
+    tradeTime: '2026-05-25 15:20:00',
+  },
+];
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 支付流水页数据模型
+ */
+export function usePaymentsModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    timeRange: null as [string, string] | null,
+    searchUserName: '',
+    searchPhone: '',
+    type: '',
+  });
+
+  // 可搜索字段防抖
+  const { debouncedValue: debouncedUserName } = useDebounce(
+    toRef(filterForm, 'searchUserName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedPhone } = useDebounce(
+    toRef(filterForm, 'searchPhone') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 汇总 =====
+  const [summary, setSummary] = useState(MOCK_SUMMARY);
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: MOCK_DATA.length,
+  });
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '流水号', dataIndex: 'flowNo', key: 'flowNo', width: 140 },
+    { title: '订单编号', dataIndex: 'orderNo', key: 'orderNo', width: 140 },
+    { title: '类型', dataIndex: 'type', key: 'type', width: 110 },
+    { title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
+    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
+    {
+      title: '金额',
+      dataIndex: 'amount',
+      key: 'amount',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+    { title: '第三方流水单号', dataIndex: 'thirdFlowNo', key: 'thirdFlowNo', width: 220 },
+    {
+      title: '交易时间',
+      dataIndex: 'tradeTime',
+      key: 'tradeTime',
+      width: 170,
+    },
+  ];
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', {
+        timeRange: filterForm.timeRange,
+        nickName: debouncedUserName.value,
+        phone: debouncedPhone.value,
+        type: filterForm.type,
+      });
+      // TODO: 替换为真实 API 调用
+      setDataSource(MOCK_DATA);
+      setPagination({ ...pagination.value, total: MOCK_DATA.length });
+      setSummary(MOCK_SUMMARY);
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.timeRange = null;
+    filterForm.searchUserName = '';
+    filterForm.searchPhone = '';
+    filterForm.type = '';
+    setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
+    setDataSource(MOCK_DATA);
+    setSummary(MOCK_SUMMARY);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    summary,
+    pagination,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    PAYMENT_TYPE_OPTIONS: PAYMENT_TYPE_OPTIONS as any,
+  };
+}

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

@@ -0,0 +1,127 @@
+// ===== 整页可滚动：内容超出视口时出滚动条 =====
+.pageWrap {
+  height: auto !important;
+  min-height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 16px;
+}
+
+// ===== 顶部标题区 =====
+.reportHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 4px 4px 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 {
+  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;
+}
+
+.statDesc {
+  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

@@ -1,15 +1,223 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+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';
 
 /**
  * 账务报表
+ *
+ * 页面结构：
+ *   1. 顶部标题 + 时间范围选择
+ *   2. 三张统计卡（总收入 / 总提现 / 平台余额）
+ *   3. 月度收支趋势（近 6 个月，echarts 柱状图）
+ *   4. 月度收支明细（表格）
  */
 export default defineComponent({
   name: 'FinanceReports',
   setup() {
-    return () => (
+    const {
-      <div class="page-container">
+      range,
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>账务报表 - 开发中</div>
+      handleRangeChange,
+      summary,
+      chartData,
+      detailColumns,
+      detailData,
+      formatMoney,
+      RANGE_OPTIONS,
+    } = useReportsModel();
+
+    // ===== 柱状图（echarts） =====
+    const chartRef = ref<HTMLElement>();
+    let chartInstance: any = null;
+
+    const getChartOption = () => {
+      const months = chartData.value.map((d) => d.month);
+      const order = chartData.value.map((d) => d.order);
+      const netIncome = chartData.value.map((d) => d.netIncome);
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          valueFormatter: (v: number) => `¥${formatMoney(v)}`,
+        },
+        legend: {
+          data: ['订单金额', '净收入'],
+          bottom: 8,
+          icon: 'roundRect',
+          itemWidth: 14,
+          itemHeight: 10,
+          textStyle: { color: 'rgba(0, 0, 0, 0.65)' },
+        },
+        grid: { left: 8, right: 16, top: 24, bottom: 48, containLabel: true },
+        xAxis: {
+          type: 'category',
+          data: months,
+          axisTick: { show: false },
+          axisLine: { lineStyle: { color: '#e8e8e8' } },
+          axisLabel: { color: 'rgba(0, 0, 0, 0.55)' },
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: 'rgba(0, 0, 0, 0.45)',
+            formatter: (v: number) => (v >= 1000 ? `${v / 1000}k` : `${v}`),
+          },
+          splitLine: { lineStyle: { color: '#f5f5f5' } },
+        },
+        series: [
+          {
+            name: '订单金额',
+            type: 'bar',
+            data: order,
+            barWidth: 30,
+            itemStyle: { color: '#1677ff', borderRadius: [3, 3, 0, 0] },
+          },
+          {
+            name: '净收入',
+            type: 'bar',
+            data: netIncome,
+            barWidth: 30,
+            itemStyle: { color: '#52c41a', borderRadius: [3, 3, 0, 0] },
+          },
+        ],
+      };
+    };
+
+    const renderChart = () => {
+      if (!chartRef.value) return;
+      if (!chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+      }
+      chartInstance.setOption(getChartOption());
+    };
+
+    const handleResize = () => {
+      chartInstance?.resize();
+    };
+
+    onMounted(() => {
+      nextTick(() => {
+        renderChart();
+      });
+      window.addEventListener('resize', handleResize);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', handleResize);
+      chartInstance?.dispose();
+      chartInstance = null;
+    });
+
+    // 时间范围切换时刷新图表（接入 API 后生效）
+    watch(range, () => {
+      renderChart();
+    });
+
+    return () => {
+      /** 根据增长率构建箭头 + 颜色（正值 ↑ 绿，负值 ↓ 红，null 时固定文本） */
+      const changeDesc = (rate: number | null) => {
+        if (rate == null) return { desc: '= 总收入 - 提现金额', descColor: 'rgba(0, 0, 0, 0.55)' };
+        const arrow = rate > 0 ? '↑' : '↓';
+        const sign = rate > 0 ? '+' : '';
+        return {
+          desc: `${arrow} 较上月 ${sign}${rate}%`,
+          descColor: rate > 0 ? '#52c41a' : '#ff4d4f',
+        };
+      };
+
+      /** 顶部 3 张统计卡配置 */
+      const statCards = [
+        {
+          key: 'totalIncome',
+          label: '总收入（扣除退款后）',
+          value: summary.value.totalIncome,
+          bgColor: '#f6ffed',
+          accentColor: '#52c41a',
+          ...changeDesc(12.5),
+        },
+        {
+          key: 'totalWithdraw',
+          label: '总提现金额',
+          value: summary.value.totalWithdraw,
+          bgColor: '#fffbe6',
+          accentColor: '#faad14',
+          ...changeDesc(32),
+        },
+        {
+          key: 'totalBalance',
+          label: '平台余额（所有用户余额总和）',
+          value: summary.value.totalBalance,
+          bgColor: '#e6f4ff',
+          accentColor: '#1677ff',
+          ...changeDesc(null),
+        },
+      ];
+
+      return (
+        <div class={[pageStyles.container, styles.pageWrap]}>
+          {/* ===== 顶部标题 + 时间范围 ===== */}
+          <div class={styles.reportHeader}>
+            <div class={styles.headerLeft}>
+              <div class={styles.reportTitle}>财务报表</div>
+              <div class={styles.reportSub}>
+                平台资金流水概览，包括收入、退款、提现、用户余额等核心财务指标
+              </div>
+            </div>
+            <Select
+              value={range.value}
+              onUpdate:value={(val: string) => handleRangeChange(val)}
+              options={[...RANGE_OPTIONS]}
+              style={{ width: 120 }}
+            />
+          </div>
+
+          {/* ===== 统计卡 ===== */}
+          <div class={styles.statCards}>
+            {statCards.map((item) => (
+              <div key={item.key} class={styles.statCard} style={{ backgroundColor: item.bgColor }}>
+                <div class={styles.statLabel}>{item.label}</div>
+                <div class={styles.statValue} style={{ color: item.accentColor }}>
+                  ¥{formatMoney(item.value)}
+                </div>
+                <div class={styles.statDesc} style={{ color: item.descColor }}>
+                  {item.desc}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* ===== 柱状图卡（echarts） ===== */}
+          <div class={styles.chartCard}>
+            <div class={styles.cardTitle}>
+              <span class={styles.cardTitleIcon}>📊</span>
+              月度收支趋势（近 6 个月）
+            </div>
+            <div
+              ref={(el: any) => {
+                if (el) chartRef.value = el as HTMLElement;
+              }}
+              class={styles.chartEcharts}
+            />
+          </div>
+
+          {/* ===== 月度收支明细 ===== */}
+          <div class={styles.detailCard}>
+            <div class={styles.cardTitle}>月度收支明细</div>
+            <Table
+              columns={detailColumns}
+              dataSource={detailData.value}
+              pagination={false}
+              size="middle"
+              bordered={false}
+              rowKey="key"
+            />
+          </div>
         </div>
       );
+    };
   },
 });

src/pages/finance/reports/model/useReportsModel.ts

@@ -0,0 +1,163 @@
+import { ref } from 'vue';
+import { useState } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 时间范围选项 */
+export const RANGE_OPTIONS = [
+  { value: 'month', label: '本月' },
+  { value: '3m', label: '近 3 个月' },
+  { value: '6m', label: '近 6 个月' },
+  { value: 'year', label: '本年' },
+] as const;
+
+// ============================================================
+// 假数据（数值自洽：总收入 - 总提现 = 平台余额）
+// ============================================================
+
+/** 6 个月柱状图数据（月份标签 + 订单金额 + 净收入） */
+const CHART_DATA = [
+  { month: '01月', order: 22500, netIncome: 19000, withdraw: 300 },
+  { month: '02月', order: 24500, netIncome: 21500, withdraw: 1850 },
+  { month: '03月', order: 24800, netIncome: 23200, withdraw: 1400 },
+  { month: '04月', order: 26100, netIncome: 24900, withdraw: 1500 },
+  { month: '05月', order: 28900, netIncome: 27400, withdraw: 1800 },
+  { month: '06月', order: 32500, netIncome: 31860, withdraw: 2100 },
+];
+
+/** 月度收支明细（最近 4 个月） */
+const DETAIL_DATA = [
+  {
+    key: '2026-06',
+    month: '2026-06',
+    order: 32500,
+    refund: 640,
+    netIncome: 31860,
+    withdraw: 2100,
+  },
+  {
+    key: '2026-05',
+    month: '2026-05',
+    order: 28900,
+    refund: 1500,
+    netIncome: 27400,
+    withdraw: 1800,
+  },
+  {
+    key: '2026-04',
+    month: '2026-04',
+    order: 26100,
+    refund: 1200,
+    netIncome: 24900,
+    withdraw: 1500,
+  },
+  {
+    key: '2026-03',
+    month: '2026-03',
+    order: 24800,
+    refund: 1600,
+    netIncome: 23200,
+    withdraw: 1400,
+  },
+];
+
+/** 顶部 3 张统计卡数据 */
+const SUMMARY = {
+  totalIncome: 147860, // 总收入（净收入合计）
+  totalWithdraw: 8950, // 总提现
+  totalBalance: 138910, // 平台余额 = 总收入 - 总提现
+};
+
+// ============================================================
+// 工具
+// ============================================================
+
+/** 千分位 + 保留 2 位小数 */
+function formatMoney(n: number): string {
+  return (n || 0).toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 账务报表数据模型
+ */
+export function useReportsModel() {
+  // ===== 时间范围 =====
+  const [range, setRange] = useState<string>('month');
+
+  /** 切换时间范围（演示用：打日志，不改数据） */
+  const handleRangeChange = (val: string) => {
+    setRange(val);
+    // TODO: 接入 API 时按 range 重新拉取汇总 / 图表 / 明细
+  };
+
+  // ===== 汇总 =====
+  const summary = ref({ ...SUMMARY });
+
+  // ===== 图表 =====
+  const chartData = ref([...CHART_DATA]);
+
+  // ===== 明细表 =====
+  const detailColumns = [
+    {
+      title: '月份',
+      dataIndex: 'month',
+      key: 'month',
+      width: 140,
+      align: 'left' as const,
+    },
+    {
+      title: '订单金额',
+      dataIndex: 'order',
+      key: 'order',
+      align: 'right' as const,
+      customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+    },
+    {
+      title: '退款金额',
+      dataIndex: 'refund',
+      key: 'refund',
+      align: 'right' as const,
+      customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+      customCell: (_record: any) => ({ style: { color: '#ff4d4f' } }),
+    },
+    {
+      title: '净收入',
+      dataIndex: 'netIncome',
+      key: 'netIncome',
+      align: 'right' as const,
+      customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+      customCell: (_record: any) => ({
+        style: { color: '#52c41a', fontWeight: 600 },
+      }),
+    },
+    {
+      title: '提现金额',
+      dataIndex: 'withdraw',
+      key: 'withdraw',
+      align: 'right' as const,
+      customRender: ({ text }: { text: number }) => `¥${formatMoney(text)}`,
+      customCell: (_record: any) => ({ style: { color: '#fa8c16' } }),
+    },
+  ];
+  const detailData = ref([...DETAIL_DATA]);
+
+  return {
+    range,
+    handleRangeChange,
+    summary,
+    chartData,
+    detailColumns,
+    detailData,
+    formatMoney,
+    RANGE_OPTIONS: RANGE_OPTIONS as any,
+  };
+}

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

@@ -0,0 +1,62 @@
+// ===== 自定义标题栏 =====
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modalTitle {
+  font-size: 16px;
+  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);
+  }
+}
+
+// ===== 内容区 =====
+.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;
+}
+
+// ===== Modal 外层包裹：去除 antd 默认内边距 =====
+/* .walletModalWrap {
+  :global(.ant-modal-body) {
+    padding-top: 16px;
+    padding-bottom: 20px;
+  }
+} */

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

@@ -0,0 +1,276 @@
+import { defineComponent, ref, reactive, computed, watch } from 'vue';
+import { Modal, Table, Button, Select, Form, Space, DatePicker } from 'ant-design-vue';
+import {
+  useWalletModel,
+  TRANSACTION_TYPE_OPTIONS,
+  TRANSACTION_STATUS_OPTIONS,
+} from '../model/useWalletModel';
+import styles from './WalletDetailModal.module.less';
+
+const { RangePicker } = DatePicker;
+
+interface WalletDetailModalProps {
+  visible: boolean;
+  record: any;
+  onClose: () => void;
+}
+
+/**
+ * 钱包交易明细弹窗
+ */
+export default defineComponent({
+  name: 'WalletDetailModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: () => ({}) },
+    onClose: { type: Function, required: true },
+  },
+  setup(props: WalletDetailModalProps) {
+    const { loadTransactions, renderTransactionStatus } = useWalletModel();
+
+    // ===== 弹窗内筛选条件 =====
+    const detailFilter = reactive({
+      timeRange: null as [string, string] | null,
+      type: '',
+      status: '',
+    });
+
+    // ===== 加载明细 =====
+    const loading = ref<boolean>(false);
+    const allTransactions = ref<any[]>([]);
+
+    const fetchTransactions = async () => {
+      loading.value = true;
+      try {
+        allTransactions.value = await loadTransactions(props.record);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    /**
+     * 弹窗内筛选后的数据（用 computed 自动响应全量数据和筛选条件的变化）
+     * 真实场景应传给后端做查询；此处做前端过滤演示
+     */
+    const filteredTransactions = computed(() => {
+      return allTransactions.value.filter((item) => {
+        if (detailFilter.type && item.type !== detailFilter.type) return false;
+        if (detailFilter.status && item.status !== detailFilter.status) return false;
+        if (detailFilter.timeRange && detailFilter.timeRange.length === 2) {
+          const [start, end] = detailFilter.timeRange;
+          if (item.time < start || item.time > end) return false;
+        }
+        return true;
+      });
+    });
+
+    const handleSearch = () => {
+      // computed 会自动响应；这里保留方法以便将来扩展（如后端查询）
+    };
+
+    const handleReset = () => {
+      detailFilter.timeRange = null;
+      detailFilter.type = '';
+      detailFilter.status = '';
+    };
+
+    // ===== 分页 =====
+    const pagination = reactive({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total: number) => `共 ${total} 条`,
+    });
+
+    /** 筛选条件变化时重置到第 1 页，并同步总数 */
+    watch(filteredTransactions, (list) => {
+      pagination.total = list.length;
+      pagination.current = 1;
+    });
+
+    const handleTableChange = (pag: any) => {
+      pagination.current = pag.current;
+      pagination.pageSize = pag.pageSize;
+    };
+
+    /** 监听 visible 变化：打开时加载明细 */
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          detailFilter.timeRange = null;
+          detailFilter.type = '';
+          detailFilter.status = '';
+          allTransactions.value = [];
+          fetchTransactions();
+        }
+      },
+    );
+
+    // ===== 表格列配置 =====
+    const detailColumns = [
+      {
+        title: '类型',
+        dataIndex: 'type',
+        key: 'type',
+        width: 120,
+      },
+      {
+        title: '金额',
+        dataIndex: 'amount',
+        key: 'amount',
+        width: 110,
+        align: 'center' as const,
+        customRender: ({ text }: { text: number }) => {
+          const num = text || 0;
+          const isPlus = num > 0;
+          const isMinus = num < 0;
+          const color = isPlus ? '#52c41a' : isMinus ? '#ff4d4f' : 'rgba(0,0,0,0.85)';
+          const sign = isPlus ? '+' : '';
+          return (
+            <span style={{ color, fontWeight: 500 }}>
+              {sign}
+              {num.toFixed(2)}
+            </span>
+          );
+        },
+      },
+      {
+        title: '余额',
+        dataIndex: 'balance',
+        key: 'balance',
+        width: 110,
+        align: 'center' as const,
+        customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
+      },
+      {
+        title: '可提现金额',
+        dataIndex: 'withdrawable',
+        key: 'withdrawable',
+        width: 130,
+        align: 'center' as const,
+        customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
+      },
+      {
+        title: '冻结金额',
+        dataIndex: 'frozen',
+        key: 'frozen',
+        width: 110,
+        align: 'center' as const,
+        customRender: ({ text }: { text: number }) => `¥${(text || 0).toFixed(2)}`,
+      },
+      {
+        title: '状态',
+        dataIndex: 'status',
+        key: 'status',
+        width: 90,
+        align: 'center' as const,
+        customRender: ({ text }: { text: string }) => renderTransactionStatus(text),
+      },
+      {
+        title: '冻结时间',
+        dataIndex: 'frozenTime',
+        key: 'frozenTime',
+        width: 130,
+        align: 'center' as const,
+      },
+      {
+        title: '解冻时间',
+        dataIndex: 'unfreezeTime',
+        key: 'unfreezeTime',
+        width: 130,
+        align: 'center' as const,
+      },
+      {
+        title: '关联单号',
+        dataIndex: 'relatedNo',
+        key: 'relatedNo',
+        width: 130,
+        align: 'center' as const,
+      },
+      {
+        title: '时间',
+        dataIndex: 'time',
+        key: 'time',
+        width: 130,
+        align: 'center' as const,
+      },
+    ];
+
+    return () => (
+      <Modal
+        title="明细详情"
+        visible={props.visible}
+        onCancel={props.onClose}
+        width={1300}
+        destroyOnClose
+        footer={null}
+        centered
+      >
+        <div class={styles.modalBody}>
+          {/* ===== 弹窗内筛选区 ===== */}
+          <div class={styles.filterBar}>
+            <Form layout="inline" model={detailFilter}>
+              <Form.Item label="时间" name="timeRange">
+                <RangePicker
+                  value={detailFilter.timeRange as any}
+                  style={{ width: '240px' }}
+                  allowClear
+                  onUpdate:value={(val: any) => (detailFilter.timeRange = val)}
+                />
+              </Form.Item>
+              <Form.Item label="类型" name="type">
+                <Select
+                  value={detailFilter.type}
+                  options={TRANSACTION_TYPE_OPTIONS as any}
+                  style={{ width: '140px' }}
+                  allowClear
+                  onUpdate:value={(val: any) => (detailFilter.type = val || '')}
+                />
+              </Form.Item>
+              <Form.Item label="状态" name="status">
+                <Select
+                  value={detailFilter.status}
+                  options={TRANSACTION_STATUS_OPTIONS as any}
+                  style={{ width: '140px' }}
+                  allowClear
+                  onUpdate:value={(val: any) => (detailFilter.status = val || '')}
+                />
+              </Form.Item>
+              <Form.Item>
+                <Space>
+                  <Button onClick={handleReset}>重置</Button>
+                  <Button type="primary" onClick={handleSearch}>
+                    查询
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </div>
+
+          {/* ===== 表格区 ===== */}
+          <div class={styles.tableWrap}>
+            <Table
+              columns={detailColumns}
+              dataSource={filteredTransactions.value}
+              loading={loading.value}
+              size="middle"
+              bordered
+              pagination={{
+                current: pagination.current,
+                pageSize: pagination.pageSize,
+                total: pagination.total,
+                showSizeChanger: pagination.showSizeChanger,
+                showTotal: pagination.showTotal,
+              }}
+              onChange={handleTableChange}
+              scroll={{ x: 'max-content' }}
+              locale={{ emptyText: '暂无交易明细' }}
+            />
+          </div>
+        </div>
+      </Modal>
+    );
+  },
+});

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

@@ -0,0 +1,88 @@
+// ===== 表格 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%;
+    }
+  }
+}
+
+// ===== 顶部 3 张统计卡 =====
+.statCards {
+  display: flex;
+  gap: 16px;
+  flex-shrink: 0;
+  margin-bottom: 16px;
+}
+
+.statCard {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  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);
+  }
+}
+
+.statCardLeft {
+  flex-shrink: 0;
+}
+
+.statIconWrap {
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  font-size: 26px;
+  transition: transform 0.25s ease;
+
+  .statCard:hover & {
+    transform: scale(1.05);
+  }
+}
+
+.statCardRight {
+  flex: 1;
+  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;
+}

src/pages/finance/wallet/index.tsx

@@ -1,4 +1,44 @@
 import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space, Pagination } from 'ant-design-vue';
+import { WalletOutlined, LockOutlined, RiseOutlined } from '@ant-design/icons-vue';
+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;
+  label: string;
+  value: number;
+  icon: any;
+  color: string;
+  bgColor: string;
+}
+
+/**
+ * bodyCell 渲染函数
+ */
+function renderBodyCell({
+  column,
+  record,
+  onViewDetail,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onViewDetail: (record: any) => void;
+}) {
+  // 操作列
+  if (column.key === 'action') {
+    return (
+      <Button type="link" size="small" onClick={() => onViewDetail(record)}>
+        明细
+      </Button>
+    );
+  }
+  return;
+}
 
 /**
  * 用户钱包
@@ -6,10 +46,198 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'FinanceWallet',
   setup() {
-    return () => (
+    const {
-      <div class="page-container">
+      filterForm,
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>用户钱包 - 开发中</div>
+      loading,
+      dataSource,
+      columns,
+      summary,
+      pagination,
+      detailVisible,
+      currentWallet,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      handleViewDetail,
+      handleCloseDetail,
+    } = useWalletModel();
+
+    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+
+    /** 最终表格列：模型列 + 操作 */
+    const tableColumns = [
+      ...columns,
+      {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
+    return () => {
+      /** 顶部统计卡配置 */
+      const statCards: StatCardItem[] = [
+        {
+          key: 'totalBalance',
+          label: '总余额',
+          value: summary.value.totalBalance,
+          icon: WalletOutlined,
+          color: '#1677ff',
+          bgColor: 'rgba(22, 119, 255, 0.08)',
+        },
+        {
+          key: 'frozenAmount',
+          label: '冻结金额',
+          value: summary.value.frozenAmount,
+          icon: LockOutlined,
+          color: '#fa8c16',
+          bgColor: 'rgba(250, 140, 22, 0.08)',
+        },
+        {
+          key: 'totalWithdraw',
+          label: '累计提现',
+          value: summary.value.totalWithdraw,
+          icon: RiseOutlined,
+          color: '#52c41a',
+          bgColor: 'rgba(82, 196, 26, 0.08)',
+        },
+      ];
+
+      return (
+        <div class={pageStyles.container}>
+          {/* ===== 顶部统计卡 ===== */}
+          <div class={styles.statCards}>
+            {statCards.map((item) => (
+              <div key={item.key} class={styles.statCard}>
+                <div class={styles.statCardLeft}>
+                  <div
+                    class={styles.statIconWrap}
+                    style={{ color: item.color, backgroundColor: item.bgColor }}
+                  >
+                    <item.icon />
+                  </div>
+                </div>
+                <div class={styles.statCardRight}>
+                  <div class={styles.statLabel}>{item.label}</div>
+                  <div class={styles.statValue} style={{ color: item.color }}>
+                    ¥
+                    {item.value.toLocaleString('zh-CN', {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2,
+                    })}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* ===== 筛选区 ===== */}
+          <div class={pageStyles.filter}>
+            <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+              <Form.Item label="用户昵称" name="searchUserName">
+                <Input
+                  placeholder="请输入"
+                  style={{ width: '180px' }}
+                  allowClear
+                  onPressEnter={handleSearch}
+                />
+              </Form.Item>
+              <Form.Item label="手机号" name="searchPhone">
+                <Input
+                  placeholder="请输入"
+                  style={{ width: '180px' }}
+                  allowClear
+                  onPressEnter={handleSearch}
+                />
+              </Form.Item>
+              <Form.Item label="余额筛选">
+                <Space.Compact>
+                  <Input
+                    placeholder="请输入"
+                    style={{ width: '130px' }}
+                    value={filterForm.minBalance}
+                    onUpdate:value={(val: any) => (filterForm.minBalance = val ?? '')}
+                    onPressEnter={handleSearch}
+                    allowClear
+                  />
+                  <Input
+                    style={{
+                      width: '40px',
+                      textAlign: 'center',
+                      backgroundColor: '#fafafa',
+                      pointerEvents: 'none',
+                      color: 'rgba(0,0,0,0.45)',
+                    }}
+                    value="至"
+                    disabled
+                  />
+                  <Input
+                    placeholder="请输入"
+                    style={{ width: '130px' }}
+                    value={filterForm.maxBalance}
+                    onUpdate:value={(val: any) => (filterForm.maxBalance = val ?? '')}
+                    onPressEnter={handleSearch}
+                    allowClear
+                  />
+                </Space.Compact>
+              </Form.Item>
+              <Form.Item>
+                <Space>
+                  <Button onClick={handleReset}>重置</Button>
+                  <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                    查询
+                  </Button>
+                </Space>
+              </Form.Item>
+            </Form>
+          </div>
+
+          {/* ===== 下方区域：筛选 + 表格（独立白卡片） ===== */}
+
+          {/* ===== 表格区 ===== */}
+          <div class={pageStyles.table}>
+            <div ref={containerRef} class={styles.tableBody}>
+              <Table
+                columns={tableColumns}
+                dataSource={dataSource.value}
+                loading={loading.value}
+                scroll={{ x: 'max-content', y: height.value }}
+                pagination={false}
+              >
+                {{
+                  bodyCell: (args: any) =>
+                    renderBodyCell({
+                      ...args,
+                      onViewDetail: handleViewDetail,
+                    }),
+                }}
+              </Table>
+            </div>
+
+            {/* 独立分页，右下方 */}
+            <div class={pageStyles.pagination}>
+              <Pagination
+                current={pagination.value.current}
+                pageSize={pagination.value.pageSize}
+                total={pagination.value.total}
+                showSizeChanger
+                showTotal={(total: number) => `共 ${total} 条`}
+                onChange={handlePageChange}
+                onShowSizeChange={handlePageChange}
+              />
+            </div>
+          </div>
+
+          {/* ===== 交易明细弹窗 ===== */}
+          <WalletDetailModal
+            visible={detailVisible.value}
+            record={currentWallet.value}
+            onClose={handleCloseDetail}
+          />
         </div>
       );
+    };
   },
 });

src/pages/finance/wallet/model/useWalletModel.ts

@@ -0,0 +1,349 @@
+import { computed, reactive, toRef, Ref, h } from 'vue';
+import { message, Tag } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 明细类型选项（弹窗内筛选） */
+export const TRANSACTION_TYPE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '报名收入', label: '报名收入' },
+  { value: '提现', label: '提现' },
+  { value: '取消报名退款', label: '取消报名退款' },
+] as const;
+
+/** 明细状态选项（弹窗内筛选） */
+export const TRANSACTION_STATUS_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '正常', label: '正常' },
+  { value: '冻结中', label: '冻结中' },
+  { value: '已解冻', label: '已解冻' },
+] as const;
+
+/** 明细状态映射（用于表格 Tag 渲染） */
+const TRANSACTION_STATUS_MAP: Record<string, { label: string; color: string }> = {
+  正常: { label: '正常', color: 'blue' },
+  冻结中: { label: '冻结中', color: 'orange' },
+  已解冻: { label: '已解冻', color: 'green' },
+};
+
+// ============================================================
+// 顶部统计卡假数据
+// ============================================================
+
+const MOCK_SUMMARY = {
+  totalBalance: 86520.0,
+  frozenAmount: 3200.0,
+  totalWithdraw: 63080.0,
+};
+
+// ============================================================
+// 假数据（钱包列表）
+// ============================================================
+
+const MOCK_DATA = [
+  {
+    key: '1',
+    userId: 'U20260701001',
+    nickName: '张三',
+    phone: '12345678997',
+    balance: 0,
+    frozen: 0,
+    totalWithdraw: 0,
+  },
+  {
+    key: '2',
+    userId: '',
+    nickName: '李四',
+    phone: '12345678998',
+    balance: 350,
+    frozen: 200,
+    totalWithdraw: 1450,
+  },
+  {
+    key: '3',
+    userId: '',
+    nickName: '王五',
+    phone: '12345678999',
+    balance: 1280,
+    frozen: 0,
+    totalWithdraw: 800,
+  },
+  {
+    key: '4',
+    userId: 'U20260701004',
+    nickName: '赵六',
+    phone: '13800138000',
+    balance: 560,
+    frozen: 100,
+    totalWithdraw: 200,
+  },
+  {
+    key: '5',
+    userId: '',
+    nickName: '钱七',
+    phone: '13900139001',
+    balance: 4200,
+    frozen: 1500,
+    totalWithdraw: 5600,
+  },
+  {
+    key: '6',
+    userId: '',
+    nickName: '孙八',
+    phone: '12345678997',
+    balance: 880,
+    frozen: 0,
+    totalWithdraw: 300,
+  },
+];
+
+// ============================================================
+// 交易明细假数据（所有用户共用，演示用）
+// ============================================================
+
+const MOCK_TRANSACTIONS: any[] = [
+  {
+    key: 't-1',
+    type: '报名收入',
+    amount: 100,
+    balance: 600,
+    withdrawable: 500,
+    frozen: 100,
+    status: '已解冻',
+    frozenTime: '2026-06-10 08:00',
+    unfreezeTime: '2026-06-12 08:00',
+    relatedNo: 'xxxxxxxx',
+    time: '2026-06-10 08:00',
+  },
+  {
+    key: 't-2',
+    type: '提现',
+    amount: -500,
+    balance: 1100,
+    withdrawable: 500,
+    frozen: 600,
+    status: '冻结中',
+    frozenTime: '2026-06-10 06:00',
+    unfreezeTime: '-',
+    relatedNo: 'xxxxxxxx',
+    time: '2026-06-10 06:00',
+  },
+  {
+    key: 't-3',
+    type: '取消报名退款',
+    amount: -100,
+    balance: 500,
+    withdrawable: 500,
+    frozen: 0,
+    status: '正常',
+    frozenTime: '-',
+    unfreezeTime: '-',
+    relatedNo: 'xxxxxxxx',
+    time: '2026-06-10 05:00',
+  },
+  {
+    key: 't-4',
+    type: '报名收入',
+    amount: 350,
+    balance: 850,
+    withdrawable: 750,
+    frozen: 100,
+    status: '正常',
+    frozenTime: '-',
+    unfreezeTime: '-',
+    relatedNo: 'xxxxxxxx',
+    time: '2026-06-09 17:30',
+  },
+  {
+    key: 't-5',
+    type: '提现',
+    amount: -250,
+    balance: 600,
+    withdrawable: 500,
+    frozen: 100,
+    status: '已解冻',
+    frozenTime: '2026-06-08 10:00',
+    unfreezeTime: '2026-06-09 08:00',
+    relatedNo: 'xxxxxxxx',
+    time: '2026-06-08 10:00',
+  },
+];
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 用户钱包页数据模型
+ */
+export function useWalletModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    searchUserName: '',
+    searchPhone: '',
+    minBalance: '' as string | number,
+    maxBalance: '' as string | number,
+  });
+
+  // 可搜索字段防抖
+  const { debouncedValue: debouncedUserName } = useDebounce(
+    toRef(filterForm, 'searchUserName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedPhone } = useDebounce(
+    toRef(filterForm, 'searchPhone') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 顶部统计 =====
+  const [summary, setSummary] = useState(MOCK_SUMMARY);
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: MOCK_DATA.length,
+  });
+
+  // ===== 详情弹窗状态 =====
+  const [detailVisible, setDetailVisible] = useState<boolean>(false);
+  const [currentWallet, setCurrentWallet] = useState<any>({});
+  const [detailLoading, setDetailLoading] = useState<boolean>(false);
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '用户ID', dataIndex: 'userId', key: 'userId', width: 160 },
+    { title: '用户昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
+    { title: '手机号', dataIndex: 'phone', key: 'phone', width: 140 },
+    {
+      title: '余额',
+      dataIndex: 'balance',
+      key: 'balance',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+    {
+      title: '冻结金额',
+      dataIndex: 'frozen',
+      key: 'frozen',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+    {
+      title: '累计提现',
+      dataIndex: 'totalWithdraw',
+      key: 'totalWithdraw',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+  ];
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return (
+      debouncedUserName.value.trim() !== '' ||
+      debouncedPhone.value.trim() !== '' ||
+      filterForm.minBalance !== '' ||
+      filterForm.maxBalance !== ''
+    );
+  });
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', {
+        nickName: debouncedUserName.value,
+        phone: debouncedPhone.value,
+        minBalance: filterForm.minBalance,
+        maxBalance: filterForm.maxBalance,
+      });
+      // TODO: 替换为真实 API 调用
+      setDataSource(MOCK_DATA);
+      setPagination({ ...pagination.value, total: MOCK_DATA.length });
+      setSummary(MOCK_SUMMARY);
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchUserName = '';
+    filterForm.searchPhone = '';
+    filterForm.minBalance = '';
+    filterForm.maxBalance = '';
+    setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
+    setDataSource(MOCK_DATA);
+    setSummary(MOCK_SUMMARY);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  /** 打开明细弹窗 */
+  const handleViewDetail = (record: any) => {
+    setCurrentWallet(record);
+    setDetailVisible(true);
+  };
+
+  /** 关闭明细弹窗 */
+  const handleCloseDetail = () => {
+    setDetailVisible(false);
+  };
+
+  /**
+   * 加载某用户的交易明细
+   * 真实场景应调用 API；演示阶段所有用户共用同一份假数据
+   */
+  const loadTransactions = async (_record: any): Promise<any[]> => {
+    setDetailLoading(true);
+    try {
+      // 模拟接口延迟
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      return [...MOCK_TRANSACTIONS];
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  /** 渲染交易状态 Tag */
+  const renderTransactionStatus = (status: string) => {
+    const info = TRANSACTION_STATUS_MAP[status] || { label: status || '-', color: 'default' };
+    return h(Tag, { color: info.color }, () => info.label);
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    summary,
+    pagination,
+    hasFilter,
+    detailVisible,
+    currentWallet,
+    detailLoading,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleViewDetail,
+    handleCloseDetail,
+    loadTransactions,
+    renderTransactionStatus,
+    TRANSACTION_TYPE_OPTIONS: TRANSACTION_TYPE_OPTIONS as any,
+    TRANSACTION_STATUS_OPTIONS: TRANSACTION_STATUS_OPTIONS as any,
+  };
+}

src/pages/finance/withdraw/components/WithdrawAuditModal.module.less

@@ -0,0 +1,195 @@
+// ===== Modal 外层包裹：去掉 antd 默认内边距 =====
+.modalWrap {
+  :global(.ant-modal-header) {
+    display: none;
+  }
+}
+
+// ===== 自定义标题栏 =====
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 14px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.modalTitle {
+  font-size: 16px;
+  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);
+  }
+}
+
+// ===== 通用区块 =====
+.section {
+  padding: 14px 0;
+  border-bottom: 1px dashed #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+    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);
+}

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

@@ -0,0 +1,245 @@
+import { defineComponent, reactive, ref, watch } from 'vue';
+import { Modal, Radio, Input, Button, Upload, Image, message } from 'ant-design-vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { useWithdrawModel } from '../model/useWithdrawModel';
+import styles from './WithdrawAuditModal.module.less';
+
+const { TextArea } = Input;
+
+interface WithdrawAuditModalProps {
+  visible: boolean;
+  record: any;
+  onClose: () => void;
+}
+
+/**
+ * 提现申请详情 / 审核弹窗
+ *
+ * 结构：
+ *   - 基本信息
+ *   - 银行卡信息
+ *   - 支付信息
+ *   - 审核操作
+ */
+export default defineComponent({
+  name: 'WithdrawAuditModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: () => ({}) },
+    onClose: { type: Function, required: true },
+  },
+  setup(props: WithdrawAuditModalProps) {
+    const { submitAudit } = useWithdrawModel();
+
+    // ===== 表单状态 =====
+    const auditForm = reactive({
+      pass: true,
+      remark: '',
+    });
+    const imageList = ref<any[]>([]);
+    const submitting = ref<boolean>(false);
+
+    /** 监听 visible：每次打开都重置表单 */
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          auditForm.pass = true;
+          auditForm.remark = '';
+          imageList.value = [];
+          submitting.value = false;
+        }
+      },
+    );
+
+    /** 上传前校验（演示用：限制 5 张 & 5MB） */
+    const beforeUpload = (file: any) => {
+      const isLt5M = file.size / 1024 / 1024 < 5;
+      if (!isLt5M) {
+        message.error('图片大小不能超过 5MB');
+        return false;
+      }
+      imageList.value = [...imageList.value, file];
+      return false; // 阻止自动上传，由"提交审核"按钮统一处理
+    };
+
+    const handleRemove = (file: any) => {
+      imageList.value = imageList.value.filter((f) => f.uid !== file.uid);
+    };
+
+    const handleSubmit = async () => {
+      if (!auditForm.remark.trim()) {
+        message.warning('请输入审核内容');
+        return;
+      }
+      submitting.value = true;
+      try {
+        // 真实场景应上传图片并调用审核 API
+        const urls = imageList.value.map((f) => f.name || '');
+        submitAudit(auditForm.pass, auditForm.remark.trim(), urls);
+      } finally {
+        submitting.value = false;
+      }
+    };
+
+    /**
+     * 通用描述项渲染
+     */
+    const renderItem = (label: string, value: any, isBold = false) => (
+      <div class={styles.descItem}>
+        <span class={styles.descLabel}>{label}</span>
+        <span class={[styles.descValue, isBold ? styles.descValueBold : '']}>{value || '-'}</span>
+      </div>
+    );
+
+    return () => {
+      const record = props.record || {};
+      const bank = record.bank || {};
+      const pay = record.pay || {};
+      const isPending = record.auditStatus === '待审核';
+
+      return (
+        <Modal
+          visible={props.visible}
+          onCancel={props.onClose}
+          width={850}
+          centered
+          footer={null}
+          wrapClassName={styles.modalWrap}
+          title={null}
+          closable={false}
+        >
+          {/* 自定义标题栏 */}
+          <div class={styles.modalHeader}>
+            <span class={styles.modalTitle}>提现申请详情</span>
+            <button class={styles.closeBtn} onClick={props.onClose}>
+              ×
+            </button>
+          </div>
+
+          {/* ===== 基本信息 ===== */}
+          <div class={styles.section}>
+            <div class={styles.sectionTitle}>基本信息</div>
+            <div class={styles.descGrid}>
+              {renderItem('申请人昵称：', record.nickName)}
+              {renderItem('申请人手机号：', record.phone)}
+              {renderItem('真实姓名：', record.realName)}
+              {renderItem('申请时间：', record.applyTime)}
+              {renderItem('打款类型：', record.withdrawType)}
+              <div style="display: contents;" />
+              {renderItem('提现金额：', `¥${(record.withdrawAmount || 0).toFixed(2)}`, true)}
+              {renderItem('费率：', `${((record.feeRate || 0) * 100).toFixed(2)}%`)}
+              {renderItem('手续费：', `¥${(record.feeAmount || 0).toFixed(2)}`)}
+              {renderItem('到账金额：', `¥${(record.transferAmount || 0).toFixed(2)}`, true)}
+              {renderItem('审核状态：', record.auditStatus, true)}
+              {renderItem('列账状态：', record.transferStatus || '-')}
+            </div>
+          </div>
+
+          {/* ===== 银行卡信息 ===== */}
+          <div class={styles.section}>
+            <div class={styles.sectionTitle}>银行卡信息</div>
+            <div class={styles.descGrid}>
+              {renderItem('银行卡类型：', bank.cardType)}
+              {renderItem('持卡人：', bank.holder)}
+              {renderItem('银行卡号：', bank.cardNo)}
+              {renderItem('开户行：', bank.bankName)}
+              {renderItem('开户支行：', bank.branchName)}
+            </div>
+          </div>
+
+          {/* ===== 支付信息 ===== */}
+          <div class={styles.section}>
+            <div class={styles.sectionTitle}>支付信息</div>
+            <div class={styles.descGrid}>
+              {renderItem('到账支付时间：', pay.transferTime || '-')}
+              {renderItem('商户订单号：', pay.merchantNo)}
+            </div>
+          </div>
+
+          {/* ===== 审核操作 / 审核信息 ===== */}
+          <div class={styles.section}>
+            {isPending ? (
+              <>
+                <div class={styles.sectionTitle}>审核操作</div>
+                <div class={styles.formRow}>
+                  <span class={styles.formLabel}>审核状态</span>
+                  <Radio.Group
+                    value={auditForm.pass}
+                    onUpdate:value={(val: boolean) => (auditForm.pass = val)}
+                  >
+                    <Radio value={true}>通过</Radio>
+                    <Radio value={false}>未通过</Radio>
+                  </Radio.Group>
+                </div>
+
+                <div class={styles.formRow}>
+                  <span class={[styles.formLabel, styles.formLabelTop]}>审核内容</span>
+                  <TextArea
+                    v-model={auditForm.remark}
+                    placeholder="请输入审核内容"
+                    rows={4}
+                    maxlength={500}
+                    showCount
+                    style={{ flex: 1 }}
+                  />
+                </div>
+
+                <div class={styles.formRow}>
+                  <span class={[styles.formLabel, styles.formLabelTop]}>审核图片</span>
+                  <Upload
+                    listType="picture-card"
+                    fileList={imageList.value}
+                    beforeUpload={beforeUpload}
+                    onRemove={handleRemove}
+                    accept="image/*"
+                    class={styles.uploader}
+                  >
+                    {imageList.value.length >= 3 ? null : (
+                      <div class={styles.uploadTrigger}>
+                        <PlusOutlined />
+                        <div class={styles.uploadText}>粘贴图片到此处</div>
+                      </div>
+                    )}
+                  </Upload>
+                </div>
+
+                <div class={styles.footer}>
+                  <Button type="primary" onClick={handleSubmit} loading={submitting.value}>
+                    提交审核
+                  </Button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div class={styles.sectionTitle}>审核信息</div>
+                <div class={styles.infoColumn}>
+                  {renderItem('审核时间：', record.auditTime)}
+                  {renderItem('审核人：', record.auditor)}
+                  <div class={styles.descItem}>
+                    <span class={styles.descLabel}>审核图片：</span>
+                    {record.auditImages && record.auditImages.length ? (
+                      <Image.PreviewGroup>
+                        {record.auditImages.map((src: string, idx: number) => (
+                          <Image
+                            key={idx}
+                            src={src}
+                            width={64}
+                            height={64}
+                            class={styles.auditImg}
+                          />
+                        ))}
+                      </Image.PreviewGroup>
+                    ) : (
+                      <span class={[styles.descValue, styles.noImage]}>暂无</span>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </Modal>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,15 @@
+// ===== 表格 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

@@ -1,4 +1,44 @@
 import { defineComponent } from 'vue';
+import { Button, Input, Table, Form, Space, Pagination, Select } from 'ant-design-vue';
+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 渲染函数（操作列：根据审核状态切换"审核 / 查看"按钮）
+ */
+function renderBodyCell({
+  column,
+  record,
+  onAudit,
+  onView,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onAudit: (record: any) => void;
+  onView: (record: any) => void;
+}) {
+  if (column.key === 'action') {
+    // 待审核：显示「审核」
+    if (record.auditStatus === '待审核') {
+      return (
+        <Button type="link" size="small" onClick={() => onAudit(record)}>
+          审核
+        </Button>
+      );
+    }
+    // 其它状态：仅显示「查看」
+    return (
+      <Button type="link" size="small" onClick={() => onView(record)}>
+        查看
+      </Button>
+    );
+  }
+  return;
+}
 
 /**
  * 提现申请
@@ -6,9 +46,137 @@ import { defineComponent } from 'vue';
 export default defineComponent({
   name: 'FinanceWithdraw',
   setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      auditVisible,
+      currentRecord,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+      handleAudit,
+      handleCloseAudit,
+      handleView,
+      AUDIT_STATUS_OPTIONS,
+      TRANSFER_STATUS_OPTIONS,
+    } = useWithdrawModel();
+
+    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+
+    /** 最终表格列：模型列 + 操作 */
+    const tableColumns = [
+      ...columns,
+      {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
-        <div style={{ padding: '24px', fontSize: '16px', color: '#999' }}>提现申请 - 开发中</div>
+        {/* ===== 筛选区 ===== */}
+        <div class={pageStyles.filter}>
+          <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
+            <Form.Item label="申请人昵称" name="searchUserName">
+              <Input
+                placeholder="请输入"
+                style={{ width: '160px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="手机号" name="searchPhone">
+              <Input
+                placeholder="请输入"
+                style={{ width: '160px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="真实姓名" name="realName">
+              <Input
+                placeholder="请输入"
+                style={{ width: '160px' }}
+                allowClear
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item label="审核状态" name="auditStatus">
+              <Select
+                value={filterForm.auditStatus}
+                options={AUDIT_STATUS_OPTIONS as any}
+                style={{ width: '140px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.auditStatus = val || '')}
+              />
+            </Form.Item>
+            <Form.Item label="到账状态" name="transferStatus">
+              <Select
+                value={filterForm.transferStatus}
+                options={TRANSFER_STATUS_OPTIONS as any}
+                style={{ width: '140px' }}
+                allowClear
+                onUpdate:value={(val: any) => (filterForm.transferStatus = val || '')}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button onClick={handleReset}>重置</Button>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* ===== 表格区 ===== */}
+        <div class={pageStyles.table}>
+          <div ref={containerRef} class={styles.tableBody}>
+            <Table
+              columns={tableColumns}
+              dataSource={dataSource.value}
+              loading={loading.value}
+              scroll={{ x: 'max-content', y: height.value }}
+              pagination={false}
+            >
+              {{
+                bodyCell: (args: any) =>
+                  renderBodyCell({
+                    ...args,
+                    onAudit: handleAudit,
+                    onView: handleView,
+                  }),
+              }}
+            </Table>
+          </div>
+
+          {/* 独立分页，右下方 */}
+          <div class={pageStyles.pagination}>
+            <Pagination
+              current={pagination.value.current}
+              pageSize={pagination.value.pageSize}
+              total={pagination.value.total}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+              onShowSizeChange={handlePageChange}
+            />
+          </div>
+        </div>
+
+        {/* ===== 审核弹窗 ===== */}
+        <WithdrawAuditModal
+          visible={auditVisible.value}
+          record={currentRecord.value}
+          onClose={handleCloseAudit}
+        />
       </div>
     );
   },

src/pages/finance/withdraw/model/useWithdrawModel.ts

@@ -0,0 +1,342 @@
+import { reactive, toRef, Ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { useState, useDebounce, useThrottleFn } from '@/hooks';
+
+// ============================================================
+// 常量
+// ============================================================
+
+/** 审核状态选项（筛选） */
+export const AUDIT_STATUS_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '待审核', label: '待审核' },
+  { value: '审核通过', label: '审核通过' },
+  { value: '审核不通过', label: '审核不通过' },
+] as const;
+
+/** 到账状态选项（筛选） */
+export const TRANSFER_STATUS_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '到账成功', label: '到账成功' },
+  { value: '到账失败', label: '到账失败' },
+  { value: '-', label: '-' },
+] as const;
+
+/** 提现类型选项（筛选） */
+export const WITHDRAW_TYPE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: '银行卡', label: '银行卡' },
+  { value: '支付宝', label: '支付宝' },
+  { value: '微信', label: '微信' },
+] as const;
+
+// ============================================================
+// 提现假数据（4 条，覆盖各审核/到账状态组合）
+// ============================================================
+
+const MOCK_DATA = [
+  {
+    key: '1',
+    nickName: '可乐',
+    phone: '17762466262',
+    realName: '可乐',
+    withdrawType: '银行卡',
+    withdrawAmount: 1.0,
+    feeRate: 0.006,
+    feeAmount: 0.01,
+    transferAmount: 0.99,
+    auditStatus: '待审核',
+    transferStatus: '',
+    thirdNo: '',
+    applyTime: '2026-04-11 09:53',
+    // 银行卡信息
+    bank: {
+      cardType: '个人',
+      holder: '龚',
+      cardNo: '6215581807006475126',
+      bankName: '交通银行',
+      branchName: '交通银行宜昌西坝支行',
+    },
+    // 支付信息
+    pay: {
+      transferTime: '',
+      merchantNo: 'WD04111775872421935100',
+    },
+  },
+  {
+    key: '2',
+    nickName: '李四',
+    phone: '12345678998',
+    realName: '李四',
+    withdrawType: '支付宝',
+    withdrawAmount: 200.0,
+    feeRate: 0.006,
+    feeAmount: 1.2,
+    transferAmount: 198.8,
+    auditStatus: '审核通过',
+    transferStatus: '到账成功',
+    thirdNo: 'yyyyyyyyyy',
+    applyTime: '2026-05-25 14:30:00',
+    bank: {
+      cardType: '个人',
+      holder: '李四',
+      cardNo: '6222021234567890123',
+      bankName: '工商银行',
+      branchName: '工商银行北京中关村支行',
+    },
+    pay: {
+      transferTime: '2026-05-25 14:35:00',
+      merchantNo: 'WD0000111122223333',
+    },
+    // 审核信息（已审核后展示）
+    auditTime: '2026-05-25 14:32:00',
+    auditor: '管理员A',
+    auditImages: [],
+  },
+  {
+    key: '3',
+    nickName: '王五',
+    phone: '13800138000',
+    realName: '王五',
+    withdrawType: '微信',
+    withdrawAmount: 500.0,
+    feeRate: 0.006,
+    feeAmount: 3.0,
+    transferAmount: 497.0,
+    auditStatus: '审核通过',
+    transferStatus: '到账失败',
+    thirdNo: 'zzzzzzzzzz',
+    applyTime: '2026-05-24 11:15:00',
+    bank: {
+      cardType: '个人',
+      holder: '王五',
+      cardNo: '微信钱包',
+      bankName: '微信支付',
+      branchName: '-',
+    },
+    pay: {
+      transferTime: '',
+      merchantNo: 'WD9999888877776666',
+    },
+    // 审核信息（已审核后展示）
+    auditTime: '2026-05-24 11:20:00',
+    auditor: '管理员B',
+    auditImages: [],
+  },
+  {
+    key: '4',
+    nickName: '赵六',
+    phone: '13900139001',
+    realName: '赵六',
+    withdrawType: '银行卡',
+    withdrawAmount: 80.0,
+    feeRate: 0.006,
+    feeAmount: 0.48,
+    transferAmount: 79.52,
+    auditStatus: '审核不通过',
+    transferStatus: '',
+    thirdNo: '',
+    applyTime: '2026-05-23 09:45:00',
+    bank: {
+      cardType: '个人',
+      holder: '赵六',
+      cardNo: '6217858000123456789',
+      bankName: '建设银行',
+      branchName: '建设银行上海陆家嘴支行',
+    },
+    pay: {
+      transferTime: '',
+      merchantNo: '',
+    },
+    // 审核信息（已审核后展示）
+    auditTime: '2026-05-23 10:00:00',
+    auditor: '管理员A',
+    auditImages: [],
+  },
+];
+
+// ============================================================
+// Model
+// ============================================================
+
+/**
+ * 提现申请页数据模型
+ */
+export function useWithdrawModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    searchUserName: '',
+    searchPhone: '',
+    realName: '',
+    auditStatus: '',
+    transferStatus: '',
+  });
+
+  // 可搜索字段防抖
+  const { debouncedValue: debouncedUserName } = useDebounce(
+    toRef(filterForm, 'searchUserName') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedPhone } = useDebounce(
+    toRef(filterForm, 'searchPhone') as Ref<string>,
+    { delay: 300 },
+  );
+  const { debouncedValue: debouncedRealName } = useDebounce(
+    toRef(filterForm, 'realName') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 表格状态 =====
+  const [loading, setLoading] = useState<boolean>(false);
+  const [dataSource, setDataSource] = useState<any[]>(MOCK_DATA);
+  const [pagination, setPagination] = useState({
+    current: 1,
+    pageSize: 10,
+    total: MOCK_DATA.length,
+  });
+
+  // ===== 审核弹窗状态 =====
+  const [auditVisible, setAuditVisible] = useState<boolean>(false);
+  const [currentRecord, setCurrentRecord] = useState<any>({});
+
+  // ===== 表格列配置 =====
+  const columns = [
+    { title: '申请人昵称', dataIndex: 'nickName', key: 'nickName', width: 120 },
+    { title: '申请人手机号', dataIndex: 'phone', key: 'phone', width: 140 },
+    { title: '真实姓名', dataIndex: 'realName', key: 'realName', width: 120 },
+    {
+      title: '提现类型',
+      dataIndex: 'withdrawType',
+      key: 'withdrawType',
+      width: 110,
+    },
+    {
+      title: '提现金额',
+      dataIndex: 'withdrawAmount',
+      key: 'withdrawAmount',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+    {
+      title: '到账金额',
+      dataIndex: 'transferAmount',
+      key: 'transferAmount',
+      width: 120,
+      customRender: ({ text }: { text: number }) => `${(text || 0).toFixed(2)}`,
+    },
+    {
+      title: '审核状态',
+      dataIndex: 'auditStatus',
+      key: 'auditStatus',
+      width: 110,
+    },
+    {
+      title: '到账状态',
+      dataIndex: 'transferStatus',
+      key: 'transferStatus',
+      width: 110,
+    },
+    { title: '第三方单号', dataIndex: 'thirdNo', key: 'thirdNo', width: 160 },
+    {
+      title: '申请时间',
+      dataIndex: 'applyTime',
+      key: 'applyTime',
+      width: 170,
+    },
+  ];
+
+  // ===== 方法 =====
+
+  /** 查询（节流 500ms） */
+  const handleSearch = useThrottleFn(async () => {
+    setLoading(true);
+    try {
+      console.log('搜索条件:', {
+        nickName: debouncedUserName.value,
+        phone: debouncedPhone.value,
+        realName: debouncedRealName.value,
+        auditStatus: filterForm.auditStatus,
+        transferStatus: filterForm.transferStatus,
+      });
+      // TODO: 替换为真实 API 调用
+      setDataSource(MOCK_DATA);
+      setPagination({ ...pagination.value, total: MOCK_DATA.length });
+      message.success('查询成功');
+    } catch (error: any) {
+      message.error(error.msg || '查询失败');
+    } finally {
+      setLoading(false);
+    }
+  }, 500);
+
+  /** 重置（节流 500ms） */
+  const handleReset = useThrottleFn(() => {
+    filterForm.searchUserName = '';
+    filterForm.searchPhone = '';
+    filterForm.realName = '';
+    filterForm.auditStatus = '';
+    filterForm.transferStatus = '';
+    setPagination({ current: 1, pageSize: 10, total: MOCK_DATA.length });
+    setDataSource(MOCK_DATA);
+  }, 500);
+
+  const handlePageChange = (page: number, pageSize: number) => {
+    setPagination({ ...pagination.value, current: page, pageSize });
+    handleSearch();
+  };
+
+  /**
+   * 打开审核弹窗
+   * 真实场景应调用 API；此处直接用列表中的 record
+   */
+  const handleAudit = (record: any) => {
+    setCurrentRecord(record);
+    setAuditVisible(true);
+  };
+
+  /** 关闭审核弹窗 */
+  const handleCloseAudit = () => {
+    setAuditVisible(false);
+  };
+
+  /**
+   * 提交审核结果（在弹窗中调用）
+   * pass = true 通过 / false 不通过
+   */
+  const submitAudit = (pass: boolean, _remark: string, _images: string[]) => {
+    setDataSource(
+      dataSource.value.map((item) =>
+        item.key === currentRecord.value.key
+          ? { ...item, auditStatus: pass ? '审核通过' : '审核不通过' }
+          : item,
+      ),
+    );
+    message.success(pass ? '已审核通过' : '已审核不通过');
+    handleCloseAudit();
+  };
+
+  /** 查看：打开同一个详情弹窗（只读展示审核信息） */
+  const handleView = (record: any) => {
+    setCurrentRecord(record);
+    setAuditVisible(true);
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    auditVisible,
+    currentRecord,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    handleAudit,
+    handleCloseAudit,
+    submitAudit,
+    handleView,
+    AUDIT_STATUS_OPTIONS: AUDIT_STATUS_OPTIONS as any,
+    TRANSFER_STATUS_OPTIONS: TRANSFER_STATUS_OPTIONS as any,
+  };
+}

src/pages/system/roles/index.tsx

@@ -6,6 +6,7 @@ import { useContainerSize } from '@/hooks';
 import RoleFormModal from './components/RoleFormModal';
 import UserListModal from './components/UserListModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染
@@ -119,9 +120,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="角色" name="searchKeyword">
               <Input
@@ -146,7 +147,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -168,7 +169,7 @@ export default defineComponent({
           </div>
 
           {/* 分页 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/pages/system/users/index.tsx

@@ -4,6 +4,7 @@ import { useUserModel, USER_ROLE_OPTIONS, USER_STATUS_OPTIONS } from './model/us
 import { useContainerSize } from '@/hooks';
 import UserFormModal from './components/UserFormModal';
 import styles from './index.module.less';
+import pageStyles from '@/components/page/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -117,9 +118,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.container}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户" name="searchKeyword">
               <Input
@@ -162,7 +163,7 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
+        <div class={pageStyles.table}>
           <div ref={containerRef} class={styles.tableBody}>
             <Table
               columns={tableColumns}
@@ -183,7 +184,7 @@ export default defineComponent({
           </div>
 
           {/* 独立分页 */}
-          <div class="page-pagination">
+          <div class={pageStyles.pagination}>
             <Pagination
               current={pagination.value.current}
               pageSize={pagination.value.pageSize}

src/router/guard.ts

@@ -1,5 +1,6 @@
 import router from '@/router';
 import { auth } from '@/hooks/useAuth';
+import { useTabsStore } from '@/stores/tabsStore';
 
 const appTitle = import.meta.env.VITE_APP_TITLE || 'CPMS 运营平台';
 
@@ -57,4 +58,20 @@ router.beforeEach(async (to, _from, next) => {
 
 router.afterEach((to) => {
   updateDocumentTitle(to.meta.title as string | undefined);
+
+  // ── 路由跳转 → tab 来源 ──
+  // 隐藏的路由（如详情页、编辑页）不进 tab，避免标签栏被噪声污染
+  // /login 也不进 tab
+  if (to.meta?.hideInMenu || to.path === '/login') return;
+  if (typeof to.meta?.title !== 'string') return;
+
+  const componentName = (to.meta.componentName as string) || (to.name as string);
+  if (!componentName) return;
+
+  const { addTab } = useTabsStore();
+  addTab({
+    path: to.path,
+    name: componentName,
+    title: to.meta.title,
+  });
 });

src/stores/menuStore.ts

@@ -152,6 +152,7 @@ function transformMenuToRoutes(nodes: MenuNode[], parentPath = ''): RouteRecordR
         hideInMenu: node.hideInMenu,
         activeMenu: node.activeMenu,
         externalLink: node.externalLink,
+        componentName: node.componentName,
       },
     } as RouteRecordRaw;
 

src/stores/tabsStore.ts

@@ -0,0 +1,120 @@
+import { reactive, computed, toRefs } from 'vue';
+import router from '@/router';
+
+/**
+ * 单个页面标签的数据结构（标签 = 已经访问过的页面）
+ *
+ * path  唯一标识，用于路由激活态判断
+ * name  路由组件 name,用于 <keep-alive :include="cachedViews">
+ * title 展示在 tab 上的文字
+ */
+export interface TabView {
+  path: string;
+  name: string;
+  title: string;
+}
+
+interface TabsState {
+  /** 已打开的页面标签列表，按访问顺序累加 */
+  tabs: TabView[];
+  /** 需要被 keep-alive 缓存的组件 name 列表（来自每个 tab 的 name） */
+  cachedViews: string[];
+}
+
+const state = reactive<TabsState>({
+  tabs: [],
+  cachedViews: [],
+});
+
+/**
+ * 全局唯一 store 的 composable 入口
+ * 参考其他 store (menuStore / permissionStore) 的写法，保持代码风格统一
+ */
+export function useTabsStore() {
+  /**
+   * 往 tabs 列表加入一个 tab。
+   * - 已存在则忽略（根据 path 去重）
+   * - 同步把 name 加入 cachedViews，确保 <keep-alive> 能缓存该组件
+   *
+   * 通常由 router.afterEach 主动调用，所以 nav 来源 = 路由跳转。
+   */
+  const addTab = (view: TabView): void => {
+    if (!view || !view.path || !view.name) return;
+
+    if (!state.tabs.some((t) => t.path === view.path)) {
+      state.tabs.push(view);
+    }
+    if (!state.cachedViews.includes(view.name)) {
+      state.cachedViews.push(view.name);
+    }
+  };
+
+  /**
+   * 主动（程序化地）关闭一个 tab
+   * - 只剩一个标签时不允许关闭（至少保留一个）
+   * - 关闭当前激活的 tab 时，自动跳到相邻 tab
+   * - 同步从 cachedViews 里移除（关闭后下次再访问会重新挂载）
+   */
+  const removeTab = (path: string): void => {
+    if (state.tabs.length <= 1) return;
+
+    const idx = state.tabs.findIndex((t) => t.path === path);
+    if (idx === -1) return;
+
+    const target = state.tabs[idx];
+    const isActive = router.currentRoute.value.path === path;
+    const next = state.tabs[idx + 1] || state.tabs[idx - 1];
+
+    state.tabs.splice(idx, 1);
+
+    const cachedIdx = state.cachedViews.indexOf(target.name);
+    if (cachedIdx !== -1) state.cachedViews.splice(cachedIdx, 1);
+
+    if (isActive && next) {
+      router.push(next.path);
+    }
+  };
+
+  /** 关闭除 path 之外的所有 tab */
+  const removeOtherTabs = (path: string): void => {
+    state.tabs = state.tabs.filter((t) => t.path === path);
+    syncCachedViews();
+  };
+
+  /** 关闭所有 tab，保留第一个并跳转过去 */
+  const removeAllTabs = (): void => {
+    state.tabs = state.tabs.slice(0, 1);
+    syncCachedViews();
+    const first = state.tabs[0];
+    if (first) router.push(first.path);
+  };
+
+  /** 更新某个 tab 的字段（比如标题改名），按 path 定位 */
+  const updateTab = (path: string, partial: Partial<TabView>): void => {
+    const target = state.tabs.find((t) => t.path === path);
+    if (target) Object.assign(target, partial);
+  };
+
+  /** 全部清空——退出登录时调用 */
+  const clearTabs = (): void => {
+    state.tabs = [];
+    state.cachedViews = [];
+  };
+
+  /** 把 cachedViews 同步成「tabs 中仍存在的 name」 */
+  function syncCachedViews() {
+    state.cachedViews = state.cachedViews.filter((name) => state.tabs.some((t) => t.name === name));
+  }
+
+  return {
+    ...toRefs(state),
+    tabs: computed(() => state.tabs),
+    cachedViews: computed(() => state.cachedViews),
+    addTab,
+    removeTab,
+    removeOtherTabs,
+    removeAllTabs,
+    updateTab,
+    clearTabs,
+  };
+}

src/types/index.ts

@@ -57,6 +57,12 @@ export interface MenuNode {
   activeMenu?: string;
   /** 是否禁用（禁用后路由不注册、菜单不显示） */
   disabled?: boolean;
+  /**
+   * 组件 name（PascalCase，用于 KeepAlive 缓存匹配）
+   * 例如: 'EventList'、'SystemUsers'
+   * 后端下发此字段后路由守卫会自动写入 cachedViews
+   */
+  componentName?: string;
   /** 子菜单/子路由 */
   children?: MenuNode[];
 }
@@ -97,5 +103,11 @@ declare module 'vue-router' {
     permission?: string;
     /** 外链地址 */
     externalLink?: string;
+    /** 是否固定标签（不可关闭，常用于首页 dashboard） */
+    affix?: boolean;
+    /** 不参与标签缓存，即使访问过也不进 keep-alive */
+    noCache?: boolean;
+    /** 组件 name，用于 KeepAlive 缓存匹配（如 'EventList'） */
+    componentName?: string;
   }
 }