Merge pull request 'feature/0723/ZR' (#3) from feature/0723/ZR into release/0.01

Reviewed-on: #3

src/assets/styles/index.less

@@ -107,6 +107,7 @@ a {
   justify-content: flex-end;
   padding: 14px;
 }
+
 // ===== antd 组件覆盖 =====
 
 // Tag 默认 margin-right: 8px，会挤开表格列或卡片内间距，统一去掉

src/assets/styles/pageLayout.module.less

@@ -0,0 +1,47 @@
+// 页面布局根容器：筛选区 + 表格区作为直接子元素
+.containerMain {
+  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/components/ChangePasswordModal/index.tsx

@@ -61,6 +61,7 @@ export default defineComponent({
         destroyOnClose
         footer={null}
         centered
+        wrapClassName={styles.changePasswordModalMain}
         class={styles.modal}
       >
         <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>

src/components/ChangePasswordModal/style.module.less

@@ -1,37 +1,36 @@
-.form {
-  :global {
-    .ant-form-item {
-      margin-bottom: 16px;
-    }
-    .ant-form-item-explain-error {
-      font-size: 12px;
+.changePasswordModalMain {
+  .modal {
+    :global {
+      .ant-modal-body {
+        padding: 16px 24px 0;
+      }
     }
   }
-}
 
-/* 底部提示文案 */
-.tip {
-  margin-top: -4px;
-  margin-bottom: 24px;
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-/* 底部按钮 */
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-}
-
-/* 微调 Modal 内部样式 */
-.modal {
-  :global {
-    .ant-modal-body {
-      padding: 16px 24px 0;
+  .form {
+    :global {
+      .ant-form-item {
+        margin-bottom: 16px;
+      }
+      .ant-form-item-explain-error {
+        font-size: 12px;
+      }
     }
   }
+
+  .tip {
+    margin-top: -4px;
+    margin-bottom: 24px;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
 }

src/components/HelloWorld.module.less

@@ -1,16 +1,16 @@
-.container {
+.helloWorldMain {
   text-align: center;
   padding: 16px;
-}
 
-.title {
-  color: #1677ff;
-}
+  .title {
+    color: #1677ff;
+  }
 
-.desc {
-  code {
-    background: #f5f5f5;
-    padding: 2px 6px;
-    border-radius: 4px;
+  .desc {
+    code {
+      background: #f5f5f5;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
   }
 }

src/components/HelloWorld.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
   },
   setup(props) {
     return () => (
-      <div class={styles.container}>
+      <div class={styles.helloWorldMain}>
         <h3 class={styles.title}>{props.msg}</h3>
         <p class={styles.desc}>
           这是一个公共组件示例,采用 TSX 写法。你可以在

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 './pageTabs/PageTabs';

src/components/pageTabs/PageTabs.module.less

@@ -0,0 +1,164 @@
+@primary: #1677ff;
+
+.pageTabsMain {
+  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;
+    }
+
+    &:not(.tabItemActive) {
+      &:hover {
+        > .divider {
+          opacity: 0;
+        }
+
+        & + .tabItem {
+          > .divider {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    &.tabItemActive {
+      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%);
+          }
+        }
+      }
+    }
+
+    &:not(.tabItemActive) {
+      .tabTitleCon:hover {
+        background-color: rgba(0, 0, 0, 0.06);
+      }
+    }
+  }
+
+  .divider {
+    position: absolute;
+    left: 7px;
+    top: 50%;
+    z-index: 0;
+    width: 1px;
+    height: 16px;
+    background-color: #e8e8e8;
+    transform: translateY(-50%);
+    transition: opacity 0.15s;
+  }
+
+  .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;
+  }
+
+  .tabBgCurveBefore {
+    position: absolute;
+    left: -1px;
+    bottom: 0;
+    fill: transparent;
+    transition: fill 0.15s;
+  }
+
+  .tabBgCurveAfter {
+    position: absolute;
+    right: -1px;
+    bottom: 0;
+    fill: transparent;
+    transition: fill 0.15s;
+  }
+
+  .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;
+  }
+
+  .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/pageTabs/PageTabs.tsx

@@ -0,0 +1,91 @@
+import { defineComponent, type PropType } from 'vue';
+import { message } from 'ant-design-vue';
+import type { TabView } from '@/types';
+import styles from './PageTabs.module.less';
+
+/**
+ * Chrome 风格的页面标签栏组件
+ * 参考 VBEN tabs-chrome 的视觉设计：
+ * - 标签重叠排列（负 margin）
+ * - 激活态：圆角背景 + SVG 底部曲线
+ * - hover 态：浅灰背景
+ * - 标签间分隔线
+ * - 关闭按钮
+ */
+const PageTabs = 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.pageTabsMain}>
+        {props.tabs.map((tab, i) => {
+          const isActive = tab.path === props.activeKey;
+          return (
+            <div
+              key={tab.path}
+              class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).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].filter(Boolean).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>
+    );
+  },
+});
+
+export default PageTabs;

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

@@ -1,115 +1,128 @@
-.container {
+.basicLayoutMain {
   min-height: 100vh;
   height: 100vh;
-}
 
-.logo {
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  color: #1a1a1a;
-  background: #fff;
-}
-
-.logoText {
-  font-size: 16px;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.trigger {
-  font-size: 18px;
-  cursor: pointer;
-  transition: color 0.3s;
-  padding: 0 12px;
-  display: inline-flex;
-  align-items: center;
-
-  &:hover {
-    color: #1677ff;
+  .logo {
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: #1a1a1a;
+    background: #fff;
   }
-}
 
-// 面包屑
-.breadcrumb {
-  flex: 1;
-  margin-left: 8px;
-  font-size: 14px;
+  .logoText {
+    font-size: 16px;
+    font-weight: 600;
+    white-space: nowrap;
+  }
 
-  :global {
-    .ant-breadcrumb-link,
-    .ant-breadcrumb-separator,
-    .ant-breadcrumb-item a {
-      color: rgba(0, 0, 0, 0.65);
+  .trigger {
+    font-size: 18px;
+    cursor: pointer;
+    transition: color 0.3s;
+    padding: 0 12px;
+    display: inline-flex;
+    align-items: center;
+
+    &:hover {
+      color: #1677ff;
     }
+  }
 
-    .ant-breadcrumb-item:last-child {
+  .breadcrumb {
+    flex: 1;
+    margin-left: 8px;
+    font-size: 14px;
+
+    :global {
       .ant-breadcrumb-link,
       .ant-breadcrumb-separator,
-      a {
-        color: rgba(0, 0, 0, 0.88);
-        font-weight: 500;
-        cursor: default;
+      .ant-breadcrumb-item a {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      .ant-breadcrumb-item:last-child {
+        .ant-breadcrumb-link,
+        .ant-breadcrumb-separator,
+        a {
+          color: rgba(0, 0, 0, 0.88);
+          font-weight: 500;
+          cursor: default;
+        }
       }
     }
   }
-}
 
-// Header 右侧：账号信息 + 退出图标
-.headerRight {
-  margin-left: auto;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.userPhone {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.65);
-}
-
-.logoutIcon {
-  width: 18px;
-  height: 18px;
-  opacity: 0.45;
-  cursor: pointer;
-  transition: opacity 0.3s;
-
-  &:hover {
-    opacity: 1;
+  .headerRight {
+    margin-left: auto;
+    display: flex;
+    gap: 10px;
+    align-items: center;
   }
-}
 
-// 下拉菜单项：图标 + 文字
-.menuItem {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-
-  :global(.anticon) {
+  .userPhone {
     font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  .logoutIcon {
+    width: 18px;
+    height: 18px;
+    opacity: 0.45;
+    cursor: pointer;
+    transition: opacity 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .menuItem {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+
+    :global(.anticon) {
+      font-size: 14px;
+    }
+  }
+
+  .menuItemDanger {
+    color: #ff4d4f;
+  }
+
+  .content {
+    margin: 16px;
+    border-radius: 8px;
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .main {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .headerRow {
+    padding: 0 16px;
+    width: 100%;
+    height: 48px;
+    display: flex;
+    align-items: center;
+  }
+
+  .pageTabs {
+    width: 100%;
+    padding: 4px 16px 0 16px;
+    height: 42px;
+    background: #fff;
+    border-top: 1px solid #f0f0f0;
   }
 }
-
-.menuItemDanger {
-  color: #ff4d4f;
-}
-
-.content {
-  margin: 16px;
-  border-radius: 8px;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.main {
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}

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,8 +161,19 @@ 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}>
+      <Layout class={styles.basicLayoutMain}>
         <Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
           <div class={styles.logo}>
             <span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
@@ -171,56 +189,89 @@ export default defineComponent({
 
         <Layout class={styles.main}>
           <Header style={headerStyle}>
-            <span class={styles.trigger} onClick={toggleCollapsed}>
-              {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-            </span>
+            {/*
+              ── 顶部行：折叠按钮 + 面包屑 + 右侧账号信息 ──
+              按需求把原来平铺在 Header 里的三块统一包到一个 row 容器内，
+              形成「行容器 + tabs 容器」的两层结构
+            */}
+            <div class={styles.headerRow}>
+              <span class={styles.trigger} onClick={toggleCollapsed}>
+                {collapsed.value ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              </span>
 
-            {/* 面包屑：紧跟在折叠按钮之后 */}
-            <Breadcrumb separator=">" class={styles.breadcrumb}>
-              {breadcrumbs.value.map((item, index) => {
-                const isLast = index === breadcrumbs.value.length - 1;
-                return (
-                  <Breadcrumb.Item key={item.path || index}>
-                    {isLast || !item.path ? (
-                      <span>{item.title}</span>
-                    ) : (
-                      <a onClick={() => router.push(item.path as string)}>{item.title}</a>
-                    )}
-                  </Breadcrumb.Item>
-                );
-              })}
-            </Breadcrumb>
+              {/* 面包屑：紧跟在折叠按钮之后 */}
+              <Breadcrumb separator=">" class={styles.breadcrumb}>
+                {breadcrumbs.value.map((item, index) => {
+                  const isLast = index === breadcrumbs.value.length - 1;
+                  return (
+                    <Breadcrumb.Item key={item.path || index}>
+                      {isLast || !item.path ? (
+                        <span>{item.title}</span>
+                      ) : (
+                        <a onClick={() => router.push(item.path as string)}>{item.title}</a>
+                      )}
+                    </Breadcrumb.Item>
+                  );
+                })}
+              </Breadcrumb>
 
-            {/* 右侧: 账号信息 + 退出 */}
-            <div class={styles.headerRight}>
-              <span class={styles.userPhone}>{phone.value}</span>
-              <Dropdown trigger={['hover']} placement="bottomLeft">
-                {{
-                  default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
-                  overlay: () => (
-                    <Menu onClick={handleUserMenuClick}>
-                      <Menu.Item key="changePassword">
-                        <span class={styles.menuItem}>
-                          <EditOutlined />
-                          修改密码
-                        </span>
-                      </Menu.Item>
-                      <Menu.Divider />
-                      <Menu.Item key="logout">
-                        <span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
-                          <LogoutOutlined />
-                          退出登录
-                        </span>
-                      </Menu.Item>
-                    </Menu>
-                  ),
-                }}
-              </Dropdown>
+              {/* 右侧: 账号信息 + 退出 */}
+              <div class={styles.headerRight}>
+                <span class={styles.userPhone}>{phone.value}</span>
+                <Dropdown trigger={['hover']} placement="bottomLeft">
+                  {{
+                    default: () => <img src={logoutSvg} class={styles.logoutIcon} />,
+                    overlay: () => (
+                      <Menu onClick={handleUserMenuClick}>
+                        <Menu.Item key="changePassword">
+                          <span class={styles.menuItem}>
+                            <EditOutlined />
+                            修改密码
+                          </span>
+                        </Menu.Item>
+                        <Menu.Divider />
+                        <Menu.Item key="logout">
+                          <span class={`${styles.menuItem} ${styles.menuItemDanger}`}>
+                            <LogoutOutlined />
+                            退出登录
+                          </span>
+                        </Menu.Item>
+                      </Menu>
+                    ),
+                  }}
+                </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/about/index.module.less

@@ -1,20 +1,18 @@
-.container {
-  // 容器
-}
+.aboutMain {
+  .title {
+    margin-top: 0;
+    margin-bottom: 24px;
+    font-size: 20px;
+    font-weight: 600;
+  }
 
-.title {
-  margin-top: 0;
-  margin-bottom: 24px;
-  font-size: 20px;
-  font-weight: 600;
-}
+  .subtitle {
+    margin: 16px 0 8px;
+  }
 
-.subtitle {
-  margin: 16px 0 8px;
-}
-
-.list {
-  margin: 0;
-  padding-left: 20px;
-  line-height: 2;
+  .list {
+    margin: 0;
+    padding-left: 20px;
+    line-height: 2;
+  }
 }

src/pages/about/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class={styles.container}>
+      <div class={styles.aboutMain}>
         <h2 class={styles.title}>关于</h2>
         <Card>
           <p>CPMS 运营平台前端 PC 端。</p>

src/pages/dashboard/index.module.less

@@ -1,27 +1,25 @@
-.container {
-  // 容器
-}
-
-.title {
-  margin-top: 0;
-  margin-bottom: 24px;
-  font-size: 20px;
-  font-weight: 600;
-}
-
-.panel {
-  margin-top: 16px;
-
-  ul {
-    margin: 12px 0 0;
-    padding-left: 20px;
-    line-height: 2;
+.dashboardMain {
+  .title {
+    margin-top: 0;
+    margin-bottom: 24px;
+    font-size: 20px;
+    font-weight: 600;
   }
 
-  code {
-    padding: 2px 8px;
-    background: #f5f5f5;
-    border-radius: 4px;
-    font-size: 13px;
+  .panel {
+    margin-top: 16px;
+
+    ul {
+      margin: 12px 0 0;
+      padding-left: 20px;
+      line-height: 2;
+    }
+
+    code {
+      padding: 2px 8px;
+      background: #f5f5f5;
+      border-radius: 4px;
+      font-size: 13px;
+    }
   }
 }

src/pages/dashboard/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class={styles.container}>
+      <div class={styles.dashboardMain}>
         <h2 class={styles.title}>工作台</h2>
 
         <Row gutter={[16, 16]}>

src/pages/events/banner/components/BannerFormModal.module.less

@@ -1,133 +1,130 @@
-.form {
-  :global {
-    .ant-form-item {
-      margin-bottom: 16px;
-    }
-    .ant-form-item-explain-error {
-      font-size: 12px;
+.bannerFormModalMain {
+  .form {
+    :global {
+      .ant-form-item {
+        margin-bottom: 16px;
+      }
+      .ant-form-item-explain-error {
+        font-size: 12px;
+      }
     }
   }
-}
 
-/* ===== 上传 ===== */
-.uploader {
-  position: relative;
-}
-
-.uploadCard {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 140px;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  background-color: #fafafa;
-  cursor: pointer;
-  transition: border-color 0.2s;
-  gap: 4px;
-
-  &:hover {
-    border-color: #1677ff;
+  .uploader {
+    position: relative;
   }
-}
 
-.uploadCardError {
-  border-color: #ff4d4f;
-}
+  .uploadCard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 140px;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    gap: 4px;
 
-.uploadIcon {
-  font-size: 32px;
-  color: #999;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.uploadHint {
-  color: #666;
-  font-size: 14px;
-}
-
-.uploadTip {
-  color: #999;
-  font-size: 12px;
-  text-align: center;
-  line-height: 1.6;
-}
-
-/* ===== 预览 ===== */
-.previewWrapper {
-  position: relative;
-  width: 100%;
-  height: 140px;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
-  overflow: hidden;
-  background-color: #f5f5f5;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container {
-      width: 100%;
-      height: 100%;
+    &:hover {
+      border-color: #1677ff;
     }
   }
-}
 
-.previewImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
+  .uploadCardError {
+    border-color: #ff4d4f;
+  }
 
-.uploadAgainBtn {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.5);
-  color: #fff;
-  text-align: center;
-  padding: 4px 0;
-  cursor: pointer;
-  font-size: 12px;
-  user-select: none;
-  transition: background 0.2s;
+  .uploadIcon {
+    font-size: 32px;
+    color: #999;
+    font-weight: 300;
+    line-height: 1;
+  }
 
-  &:hover {
-    background: rgba(0, 0, 0, 0.65);
+  .uploadHint {
+    color: #666;
+    font-size: 14px;
+  }
+
+  .uploadTip {
+    color: #999;
+    font-size: 12px;
+    text-align: center;
+    line-height: 1.6;
+  }
+
+  .previewWrapper {
+    position: relative;
+    width: 100%;
+    height: 140px;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+
+    :global {
+      .ant-spin-nested-loading,
+      .ant-spin-container {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .previewImg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .uploadAgainBtn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    text-align: center;
+    padding: 4px 0;
+    cursor: pointer;
+    font-size: 12px;
+    user-select: none;
+    transition: background 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.65);
+    }
+  }
+
+  .tip {
+    padding: 8px 12px;
+    margin-bottom: 16px;
+    background-color: #f0f5ff;
+    border: 1px solid #d6e4ff;
+    border-radius: 4px;
+    color: #1677ff;
+    font-size: 13px;
+  }
+
+  .timeRow {
+    display: flex;
+    gap: 16px;
+
+    .timeItem {
+      flex: 1;
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 8px;
   }
 }
-
-/* ===== 提示 ===== */
-.tip {
-  padding: 8px 12px;
-  margin-bottom: 16px;
-  background-color: #f0f5ff;
-  border: 1px solid #d6e4ff;
-  border-radius: 4px;
-  color: #1677ff;
-  font-size: 13px;
-}
-
-/* ===== 时间行（双列）===== */
-.timeRow {
-  display: flex;
-  gap: 16px;
-
-  .timeItem {
-    flex: 1;
-  }
-}
-
-/* ===== 底部按钮 ===== */
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 8px;
-}

src/pages/events/banner/components/BannerFormModal.tsx

@@ -266,6 +266,7 @@ export default defineComponent({
           destroyOnClose
           footer={null}
           centered
+          wrapClassName={styles.bannerFormModalMain}
         >
           <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
             {/* ===== Banner 标题 ===== */}

src/pages/events/banner/index.module.less

@@ -1,14 +1,21 @@
-.tableBody {
+.eventBannerMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      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/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 '@/assets/styles/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -193,9 +194,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="标题" name="searchTitle">
               <Input
@@ -229,40 +230,42 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-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,
-                    renderJumpType,
-                    renderStatus,
-                    onEdit: handleEdit,
-                    onToggleStatus: confirmToggleStatus,
-                    onDelete: confirmDelete,
-                  }),
-              }}
-            </Table>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.eventBannerMain}>
+            <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,
+                      renderJumpType,
+                      renderStatus,
+                      onEdit: handleEdit,
+                      onToggleStatus: confirmToggleStatus,
+                      onDelete: confirmDelete,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 独立分页，右下方 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 独立分页，右下方 */}
+            <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/events/list/components/EventAuditModal.module.less

@@ -0,0 +1,61 @@
+.eventAuditModalMain {
+  .section {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+    padding-left: 8px;
+    border-left: 3px solid #1677ff;
+  }
+
+  .desc {
+    :global(.ant-descriptions-item-label) {
+      width: 110px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+
+  .auditSection {
+    margin-top: 24px;
+  }
+
+  .auditHeader {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .auditTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    padding-left: 8px;
+    border-left: 3px solid #1677ff;
+  }
+
+  .auditForm {
+    border-top: 1px solid #f0f0f0;
+    padding-top: 16px;
+  }
+
+  .auditField {
+    margin-bottom: 16px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    :global(.ant-form-item-label) {
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}

src/pages/events/list/components/EventAuditModal.tsx

@@ -0,0 +1,157 @@
+import { defineComponent, reactive } from 'vue';
+import { Modal, Descriptions, Image, Radio, Input, Form } from 'ant-design-vue';
+import styles from './EventAuditModal.module.less';
+
+const { TextArea } = Input;
+
+interface EventAuditModalProps {
+  visible: boolean;
+  record: any;
+  onClose: () => void;
+  onSubmit?: (payload: { approved: boolean; comment: string }) => void;
+}
+
+// ===== Mock 数据 =====
+const MOCK_DETAIL = {
+  name: '第二届全国地学羽毛球邀请赛',
+  eventTime: '2026.05.26 08:00 ~ 2026.05.31 22:00',
+  descr:
+    '赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍赛事介绍。',
+  registerTime: '2026.05.24 08:00 ~ 2026.05.26 22:00',
+  cancelDeadline: '2026.05.25 22:00',
+  region: '北京市 北京市 东城区',
+  address: '李宁体育馆',
+  venueNo: '李宁体育馆',
+  publicEvent: '在首页展示赛事',
+  needIdCard: '无需提供',
+  needIdCardImage: '无需提供',
+  createTime: '2026.05.26 08:00',
+  creator: '张三',
+  status: '待审核',
+  enrolledCount: 100,
+  cancelledCount: 1,
+  maxCount: 1000,
+  crossedCount: 50,
+  completedCount: 50,
+  cover: 'https://picsum.photos/seed/eventcover/600/300',
+};
+
+/**
+ * 赛事审核弹窗
+ * 包含：基础信息 + 封面 + 审核操作（通过/未通过 + 审核内容）
+ */
+export default defineComponent({
+  name: 'EventAuditModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: () => ({}) },
+    onClose: { type: Function, required: true },
+    onSubmit: { type: Function, default: undefined },
+  },
+  setup(props: EventAuditModalProps) {
+    const detail = MOCK_DETAIL;
+
+    // 审核表单
+    const auditForm = reactive({
+      approved: true,
+      comment: '',
+    });
+
+    const handleOk = () => {
+      if (!auditForm.comment.trim()) {
+        // 不通过时强制要求填写审核内容
+        if (!auditForm.approved) {
+          // 这里交给校验,简化版本不做强制校验
+        }
+      }
+      if (props.onSubmit) {
+        props.onSubmit({ approved: auditForm.approved, comment: auditForm.comment });
+      }
+    };
+
+    return () => (
+      <Modal
+        visible={props.visible}
+        title="审核"
+        width={900}
+        onCancel={props.onClose}
+        onOk={handleOk}
+        okText="提交审核"
+        cancelText="取消"
+        centered
+        destroyOnClose
+        wrapClassName={styles.eventAuditModalMain}
+      >
+        {/* ===== 基础信息 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>基础信息</div>
+          <Descriptions size="small" bordered column={3} class={styles.desc}>
+            <Descriptions.Item label="赛事名称">{detail.name}</Descriptions.Item>
+            <Descriptions.Item label="赛事时间" span={2}>
+              {detail.eventTime}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="赛事说明" span={3}>
+              {detail.descr}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="报名起止时间">{detail.registerTime}</Descriptions.Item>
+            <Descriptions.Item label="取消报名截止时间" span={2}>
+              {detail.cancelDeadline}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="省市区">{detail.region}</Descriptions.Item>
+            <Descriptions.Item label="地点">{detail.address}</Descriptions.Item>
+            <Descriptions.Item label="场地编号">{detail.venueNo}</Descriptions.Item>
+
+            <Descriptions.Item label="公开活动">{detail.publicEvent}</Descriptions.Item>
+            <Descriptions.Item label="证件号">{detail.needIdCard}</Descriptions.Item>
+            <Descriptions.Item label="证件图片">{detail.needIdCardImage}</Descriptions.Item>
+
+            <Descriptions.Item label="创建时间">{detail.createTime}</Descriptions.Item>
+            <Descriptions.Item label="创建人">{detail.creator}</Descriptions.Item>
+            <Descriptions.Item label="状态">{detail.status}</Descriptions.Item>
+            <Descriptions.Item label="报名人数">{detail.enrolledCount}</Descriptions.Item>
+            <Descriptions.Item label="取消报名人数" span={1}>
+              {detail.cancelledCount}
+            </Descriptions.Item>
+
+            <Descriptions.Item label="最大人数">{detail.maxCount}</Descriptions.Item>
+            <Descriptions.Item label="对岸数量">{detail.crossedCount}</Descriptions.Item>
+            <Descriptions.Item label="已完成对岸数量">{detail.completedCount}</Descriptions.Item>
+          </Descriptions>
+        </div>
+
+        {/* ===== 封面 ===== */}
+        <div class={styles.section}>
+          <div class={styles.sectionTitle}>封面</div>
+          <Image src={detail.cover} />
+        </div>
+
+        {/* ===== 审核操作 ===== */}
+        <div class={styles.auditSection}>
+          <div class={styles.auditHeader}>
+            <span class={styles.auditTitle}>审核操作</span>
+          </div>
+          <Form layout="horizontal" class={styles.auditForm}>
+            <Form.Item label="审核状态" class={styles.auditField}>
+              <Radio.Group v-model={auditForm.approved}>
+                <Radio value={true}>通过</Radio>
+                <Radio value={false}>未通过</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item label="审核内容" class={styles.auditField}>
+              <TextArea
+                v-model={auditForm.comment}
+                placeholder="请输入审核内容"
+                rows={4}
+                maxlength={500}
+                showCount
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    );
+  },
+});

src/pages/events/list/components/EventDetailModal.module.less

@@ -1,67 +1,68 @@
-.section {
-  margin-bottom: 24px;
-}
+.eventDetailModalMain {
+  .section {
+    margin-bottom: 24px;
 
-.section:last-child {
-  margin-bottom: 0;
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 12px;
-  padding-left: 8px;
-  border-left: 3px solid #1677ff;
-}
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+    padding-left: 8px;
+    border-left: 3px solid #1677ff;
+  }
 
-.textBlock {
-  font-size: 13px;
-  line-height: 1.8;
-  color: rgba(0, 0, 0, 0.65);
-  white-space: pre-wrap;
-  background: #fafafa;
-  padding: 12px 16px;
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-}
+  .textBlock {
+    font-size: 13px;
+    line-height: 1.8;
+    color: rgba(0, 0, 0, 0.65);
+    white-space: pre-wrap;
+    background: #fafafa;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #f0f0f0;
+  }
 
-// Descriptions 列宽稍微压缩一些，避免单标签被挤
-.desc :global(.ant-descriptions-item-label) {
-  width: 110px;
-  color: rgba(0, 0, 0, 0.65);
-}
+  .desc {
+    :global(.ant-descriptions-item-label) {
+      width: 110px;
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
 
-// 组别信息下的子表格
-.group {
-  margin-bottom: 16px;
-}
+  .group {
+    margin-bottom: 16px;
 
-.group:last-child {
-  margin-bottom: 0;
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-.groupTitle {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 8px;
-  font-weight: 500;
-}
+  .groupTitle {
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
 
-.paginationRow {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
+  .paginationRow {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 8px;
+  }
 
-// 分组信息列表
-.divisionList {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
+  .divisionList {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
 
-.divisionItem {
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.65);
+  .divisionItem {
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.65);
+  }
 }

src/pages/events/list/components/EventDetailModal.tsx

@@ -110,6 +110,7 @@ export default defineComponent({
         footer={null}
         centered
         destroyOnClose
+        wrapClassName={styles.eventDetailModalMain}
       >
         {/* ===== 基础信息 ===== */}
         <div class={styles.section}>

src/pages/events/list/components/EventRegulationModal.module.less

@@ -1,51 +1,53 @@
-.section {
-  margin-bottom: 20px;
-}
+.eventRegulationModalMain {
+  .section {
+    margin-bottom: 20px;
 
-.section:last-child {
-  margin-bottom: 0;
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 10px;
-  padding-left: 8px;
-  border-left: 3px solid #1677ff;
-}
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 10px;
+    padding-left: 8px;
+    border-left: 3px solid #1677ff;
+  }
 
-.textBlock {
-  font-size: 13px;
-  line-height: 1.5;
-  color: rgba(0, 0, 0, 0.65);
-  white-space: pre-wrap;
-  background: #fafafa;
-  padding: 12px 16px;
-  border-radius: 4px;
-  border: 1px solid #f0f0f0;
-}
+  .textBlock {
+    font-size: 13px;
+    line-height: 1.5;
+    color: rgba(0, 0, 0, 0.65);
+    white-space: pre-wrap;
+    background: #fafafa;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #f0f0f0;
+  }
 
-.imageGrid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
+  .imageGrid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+  }
 
-.imageCell {
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  background: #f5f5f5;
-  border-radius: 4px;
-  overflow: hidden;
-  border: 1px solid #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .imageCell {
+    width: 100%;
+    aspect-ratio: 3 / 2;
+    background: #f5f5f5;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-.imageCell :global(.ant-image) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+    :global(.ant-image) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
 }

src/pages/events/list/components/EventRegulationModal.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
         footer={null}
         centered
         destroyOnClose
+        wrapClassName={styles.eventRegulationModalMain}
       >
         {/* 规程文字 */}
         <div class={styles.section}>

src/pages/events/list/index.module.less

@@ -1,18 +1,21 @@
-/**
- * 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
- * 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
- */
-.tableBody {
+.eventListMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      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/events/list/index.tsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
   Pagination,
   Modal,
+  message,
 } from 'ant-design-vue';
 import {
   useEventListModel,
@@ -23,7 +24,9 @@ import { regionOptions } from '@/utils/areaData';
 import { useContainerSize, useState } from '@/hooks';
 import EventRegulationModal from './components/EventRegulationModal';
 import EventDetailModal from './components/EventDetailModal';
+import EventAuditModal from './components/EventAuditModal';
 import styles from './index.module.less';
+import pageStyles from '@/assets/styles/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -35,15 +38,15 @@ function renderBodyCell({
   text,
   record,
   onView,
-  onRemove,
-  onViewRegulation,
+  onAudit,
+  onToggleShelf,
 }: {
   column: any;
   text: any;
   record: any;
   onView: (record: any) => void;
-  onRemove: (record: any) => void;
-  onViewRegulation: (record: any) => void;
+  onAudit: (record: any) => void;
+  onToggleShelf: (record: any) => void;
 }) {
   if (column.dataIndex === 'eventName') {
     const maxLen = 15;
@@ -60,29 +63,59 @@ function renderBodyCell({
 
   if (column.key === 'regulation') {
     return (
-      <a style={{ cursor: 'pointer' }} onClick={() => onViewRegulation(record)}>
+      <a style={{ cursor: 'pointer' }} onClick={() => onView(record)}>
         查看
       </a>
     );
   }
 
   if (column.key === 'action') {
-    const isRemoved = record.status === 'removed';
+    const status = record.status;
+
     return (
-      <Space>
+      // 待审核：查看 + 审核
+      (status === 'pending' && (
+        <Space>
+          <Button type="link" size="small" onClick={() => onView(record)}>
+            查看
+          </Button>
+          <Button type="link" size="small" onClick={() => onAudit(record)}>
+            审核
+          </Button>
+        </Space>
+      )) ||
+      // 报名中：查看 + 下架
+      (status === 'enrolling' && (
+        <Space>
+          <Button type="link" size="small" onClick={() => onView(record)}>
+            查看
+          </Button>
+          <Button type="link" size="small" danger onClick={() => onToggleShelf(record)}>
+            下架
+          </Button>
+        </Space>
+      )) ||
+      // 已下架：查看 + 上架
+      (status === 'removed' && (
+        <Space>
+          <Button type="link" size="small" onClick={() => onView(record)}>
+            查看
+          </Button>
+          <Button
+            type="link"
+            size="small"
+            style={{ color: '#52c41a' }}
+            onClick={() => onToggleShelf(record)}
+          >
+            上架
+          </Button>
+        </Space>
+      )) || (
+        // 审核不通过 / 已删除：仅查看
         <Button type="link" size="small" onClick={() => onView(record)}>
           查看
         </Button>
-        <Button
-          type="link"
-          size="small"
-          danger={!isRemoved}
-          style={isRemoved ? { color: '#52c41a' } : {}}
-          onClick={() => onRemove(record)}
-        >
-          {isRemoved ? '上架' : '下架'}
-        </Button>
-      </Space>
+      )
     );
   }
 
@@ -111,6 +144,7 @@ export default defineComponent({
     // 弹窗状态
     const [regulationModalVisible, setRegulationModalVisible] = useState<boolean>(false);
     const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
+    const [auditModalVisible, setAuditModalVisible] = useState<boolean>(false);
     const [currentRecord, setCurrentRecord] = useState<any>({});
 
     const handleView = (record: any) => {
@@ -119,7 +153,8 @@ export default defineComponent({
       setDetailModalVisible(true);
     };
 
-    const handleRemove = (record: any) => {
+    /** 上架 / 下架 通用 */
+    const handleToggleShelf = (record: any) => {
       const isRemoved = record.status === 'removed';
       const actionText = isRemoved ? '上架' : '下架';
       Modal.confirm({
@@ -130,10 +165,26 @@ export default defineComponent({
         onOk: () => {
           console.log(`${actionText}赛事:`, record.eventId);
           // TODO: 替换为真实 API 调用
+          message.success(`${actionText}成功`);
         },
       });
     };
 
+    /** 打开审核弹窗 */
+    const handleAudit = (record: any) => {
+      console.log('审核赛事:', record.eventId);
+      setCurrentRecord(record);
+      setAuditModalVisible(true);
+    };
+
+    /** 提交审核 */
+    const handleAuditSubmit = (payload: { approved: boolean; comment: string }) => {
+      console.log('提交审核:', currentRecord.value.eventId, payload);
+      // TODO: 替换为真实 API 调用
+      message.success('审核提交成功');
+      setAuditModalVisible(false);
+    };
+
     const handleViewRegulation = (record: any) => {
       console.log('查看规程:', record.eventId);
       setCurrentRecord(record);
@@ -154,9 +205,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="创建时间" name="createTimeRange">
               <RangePicker
@@ -249,38 +300,40 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-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,
-                    onView: handleView,
-                    onRemove: handleRemove,
-                    onViewRegulation: handleViewRegulation,
-                  }),
-              }}
-            </Table>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.eventListMain}>
+            <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,
+                      onView: handleView,
+                      onAudit: handleAudit,
+                      onToggleShelf: handleToggleShelf,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 独立分页，右下方 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 独立分页，右下方 */}
+            <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>
 
@@ -298,6 +351,14 @@ export default defineComponent({
             onClose={() => setDetailModalVisible(false)}
           />
         )}
+        {auditModalVisible.value && (
+          <EventAuditModal
+            visible={auditModalVisible.value}
+            record={currentRecord.value}
+            onClose={() => setAuditModalVisible(false)}
+            onSubmit={handleAuditSubmit}
+          />
+        )}
       </div>
     );
   },

src/pages/events/list/model/useEventListModel.ts

@@ -9,11 +9,11 @@ import { useState, useDebounce, useThrottleFn } from '@/hooks';
 /** 赛事状态选项 */
 export const EVENT_STATUS_OPTIONS = [
   { value: '', label: '全部' },
+  { value: 'pending', label: '待审核' },
   { value: 'enrolling', label: '报名中' },
-  { value: 'ongoing', label: '进行中' },
-  { value: 'finished', label: '已结束' },
   { value: 'deleted', label: '已删除' },
   { value: 'removed', label: '已下架' },
+  { value: 'rejected', label: '审核不通过' },
 ] as const;
 
 /** 公开活动选项 */
@@ -61,18 +61,18 @@ const MOCK_DATA = Array.from({ length: 12 }, (_, i) => ({
   creatorNickname: ['张运营', '李管理', '王策划', '赵赛事'][i % 4],
   creatorPhone: ['13800138001', '13900139002', '13700137003', '13600136004'][i % 4],
   createTime: '2026-07-01 14:30:00',
-  status: (['enrolling', 'ongoing', 'finished', 'deleted', 'removed'] as const)[i % 5],
+  status: (['pending', 'enrolling', 'deleted', 'removed', 'rejected'] as const)[i % 5],
   enrolledCount: [128, 256, 512, 64, 0][i % 5],
   cancelledCount: [5, 12, 8, 3, 0][i % 5],
 }));
 
 /** 状态标签映射 */
 const STATUS_MAP: Record<string, { label: string; color: string }> = {
+  pending: { label: '待审核', color: 'gold' },
   enrolling: { label: '报名中', color: 'blue' },
-  ongoing: { label: '进行中', color: 'green' },
-  finished: { label: '已结束', color: 'default' },
   deleted: { label: '已删除', color: 'red' },
   removed: { label: '已下架', color: 'orange' },
+  rejected: { label: '审核不通过', color: 'volcano' },
 };
 
 // ============================================================

src/pages/events/orders/components/OrderDetailModal.module.less

@@ -1,194 +1,186 @@
-// ===== 自定义标题栏 =====
-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 0 16px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
+.orderDetailModalMain {
+  .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);
+  .modalTitle {
+    font-size: 16px;
+    font-weight: 600;
     color: rgba(0, 0, 0, 0.85);
   }
-}
 
-// ===== 内容区 =====
-.modalBody {
-  padding-top: 0;
-}
-
-// ===== 订单信息 grid =====
-.infoGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 12px;
-  column-gap: 24px;
-  font-size: 13px;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.infoItem {
-  display: flex;
-  align-items: baseline;
-  min-width: 0;
-}
-
-.infoLabel {
-  color: rgba(0, 0, 0, 0.65);
-  flex-shrink: 0;
-}
-
-// ===== 通用 section =====
-.section {
-  margin-bottom: 24px;
-}
-
-.section:last-child {
-  margin-bottom: 0;
-}
-
-.sectionTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 12px;
-  padding-left: 8px;
-  border-left: 3px solid #1677ff;
-}
-
-// ===== 退款记录 =====
-.refundHeader {
-  margin-bottom: 12px;
-}
-
-.refundSummary {
-  display: flex;
-  gap: 32px;
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.85);
-  margin-bottom: 12px;
-}
-
-/** 固定高度 + 滚动 */
-.refundList {
-  max-height: 320px;
-  overflow-y: auto;
-  padding-right: 4px;
-
-  // 自定义滚动条样式
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: #d9d9d9;
-    border-radius: 3px;
-  }
-  &::-webkit-scrollbar-track {
+  .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;
+  }
+
+  .infoGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    row-gap: 12px;
+    column-gap: 24px;
+    font-size: 13px;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  .infoItem {
+    display: flex;
+    align-items: baseline;
+    min-width: 0;
+  }
+
+  .infoLabel {
+    color: rgba(0, 0, 0, 0.65);
+    flex-shrink: 0;
+  }
+
+  .section {
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .sectionTitle {
+    font-size: 14px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+    padding-left: 8px;
+    border-left: 3px solid #1677ff;
+  }
+
+  .refundHeader {
+    margin-bottom: 12px;
+  }
+
+  .refundSummary {
+    display: flex;
+    gap: 32px;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+  }
+
+  .refundList {
+    max-height: 320px;
+    overflow-y: auto;
+    padding-right: 4px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: #d9d9d9;
+      border-radius: 3px;
+    }
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+  }
+
+  .refundCard {
+    padding: 14px 16px;
+    margin-bottom: 12px;
+    background: #fafafa;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .refundCardHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 10px;
+    border-bottom: 1px dashed #e0e0e0;
+  }
+
+  .refundIndex {
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+  }
+
+  .refundCardBody {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px 24px;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.65);
+    line-height: 1.8;
+  }
+
+  .refundCol {
+    min-width: 0;
+  }
+
+  .refundAmount {
+    color: rgba(0, 0, 0, 0.85);
+    font-weight: 500;
+  }
+
+  .partialMark {
+    margin-left: 4px;
+    color: #fa8c16;
+    font-size: 12px;
+  }
+
+  .refundEmpty {
+    padding: 32px 0;
+    text-align: center;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.45);
+    background: #fafafa;
+    border-radius: 6px;
+    border: 1px dashed #e0e0e0;
+  }
+
+  .refundPagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
+
+  .modalFooter {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding-top: 16px;
+    margin-top: 8px;
+    border-top: 1px solid #f0f0f0;
   }
 }
 
-.refundCard {
-  padding: 14px 16px;
-  margin-bottom: 12px;
-  background: #fafafa;
-  border: 1px solid #f0f0f0;
-  border-radius: 6px;
-}
-
-.refundCard:last-child {
-  margin-bottom: 0;
-}
-
-.refundCardHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px dashed #e0e0e0;
-}
-
-.refundIndex {
-  font-size: 13px;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.refundCardBody {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 6px 24px;
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.65);
-  line-height: 1.8;
-}
-
-.refundCol {
-  min-width: 0;
-}
-
-.refundAmount {
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 500;
-}
-
-.partialMark {
-  margin-left: 4px;
-  color: #fa8c16;
-  font-size: 12px;
-}
-
-.refundEmpty {
-  padding: 32px 0;
-  text-align: center;
-  font-size: 13px;
-  color: rgba(0, 0, 0, 0.45);
-  background: #fafafa;
-  border-radius: 6px;
-  border: 1px dashed #e0e0e0;
-}
-
-// 分页：右下角
-.refundPagination {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
-}
-
-// ===== 底部按钮区 =====
-.modalFooter {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding-top: 16px;
-  margin-top: 8px;
-  border-top: 1px solid #f0f0f0;
-}
-
-// ===== Modal 外层包裹：去除 antd 默认内边距，让自定义标题贴合 =====
 .orderModalWrap {
   :global(.ant-modal-body) {
     padding-top: 16px;

src/pages/events/orders/components/OrderDetailModal.tsx

@@ -128,142 +128,144 @@ export default defineComponent({
         closable={false}
         wrapClassName={styles.orderModalWrap}
       >
-        {/* ===== 自定义标题栏 ===== */}
-        <div class={styles.modalHeader}>
-          <span class={styles.modalTitle}>订单信息</span>
-          <button class={styles.closeBtn} onClick={props.onClose} aria-label="关闭">
-            ×
-          </button>
-        </div>
-
-        <div class={styles.modalBody}>
-          {/* ===== 订单信息 ===== */}
-          <div class={styles.infoGrid}>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>赛事名称：</span>
-              <span>{props.record?.eventName}</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>订单编号：</span>
-              <span>{props.record?.orderId}</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>订单时间：</span>
-              <span>{props.record?.orderTime}</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>支付时间：</span>
-              <span>{props.record?.payTime}</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>订单金额：</span>
-              <span>{props.record?.totalAmount?.toFixed(2)}元</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>优惠金额：</span>
-              <span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>实付金额：</span>
-              <span>{props.record?.paidAmount?.toFixed(2)}元</span>
-            </div>
-            <div class={styles.infoItem}>
-              <span class={styles.infoLabel}>退款金额：</span>
-              <span>{props.record?.refundAmount?.toFixed(2)}元</span>
-            </div>
+        <div class={styles.orderDetailModalMain}>
+          {/* ===== 自定义标题栏 ===== */}
+          <div class={styles.modalHeader}>
+            <span class={styles.modalTitle}>订单信息</span>
+            <button class={styles.closeBtn} onClick={props.onClose} aria-label="关闭">
+              ×
+            </button>
           </div>
 
-          {/* ===== 选手信息 ===== */}
-          <div class={styles.section}>
-            <div class={styles.sectionTitle}>选手信息</div>
-            <Table
-              columns={PLAYER_COLUMNS}
-              dataSource={props.record?.players || []}
-              size="small"
-              bordered
-              pagination={false}
-              scroll={{ x: 'max-content' }}
-            />
-          </div>
-
-          {/* ===== 退款记录 ===== */}
-          <div class={styles.section}>
-            <div class={styles.refundHeader}>
-              <span class={styles.sectionTitle}>退款记录</span>
+          <div class={styles.modalBody}>
+            {/* ===== 订单信息 ===== */}
+            <div class={styles.infoGrid}>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>赛事名称：</span>
+                <span>{props.record?.eventName}</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>订单编号：</span>
+                <span>{props.record?.orderId}</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>订单时间：</span>
+                <span>{props.record?.orderTime}</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>支付时间：</span>
+                <span>{props.record?.payTime}</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>订单金额：</span>
+                <span>{props.record?.totalAmount?.toFixed(2)}元</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>优惠金额：</span>
+                <span>{(props.record?.discountAmount || 0).toFixed(2)}元</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>实付金额：</span>
+                <span>{props.record?.paidAmount?.toFixed(2)}元</span>
+              </div>
+              <div class={styles.infoItem}>
+                <span class={styles.infoLabel}>退款金额：</span>
+                <span>{props.record?.refundAmount?.toFixed(2)}元</span>
+              </div>
             </div>
-            {hasRefund.value ? (
-              <>
-                <div class={styles.refundSummary}>
-                  <span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
-                  <span>退款次数：{refundRecords.value.length}次</span>
-                </div>
-                {/* 固定高度 + 内部滚动 */}
-                <div class={styles.refundList}>
-                  {pagedRefunds.value.map((r, idx) => {
-                    const statusInfo = REFUND_STATUS_MAP[r.status] || {
-                      label: '-',
-                      color: 'default',
-                    };
-                    const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
-                    return (
-                      <div key={r.key} class={styles.refundCard}>
-                        <div class={styles.refundCardHeader}>
-                          <span class={styles.refundIndex}>第{realIdx}次退款</span>
-                          <Tag color={statusInfo.color}>{statusInfo.label}</Tag>
-                        </div>
-                        <div class={styles.refundCardBody}>
-                          <div class={styles.refundCol}>
-                            <div>
-                              退款金额：
-                              <span class={styles.refundAmount}>
-                                ¥{r.amount.toFixed(2)}
-                                {r.isPartial && (
-                                  <span class={styles.partialMark}>（部分退款）</span>
-                                )}
-                              </span>
+
+            {/* ===== 选手信息 ===== */}
+            <div class={styles.section}>
+              <div class={styles.sectionTitle}>选手信息</div>
+              <Table
+                columns={PLAYER_COLUMNS}
+                dataSource={props.record?.players || []}
+                size="small"
+                bordered
+                pagination={false}
+                scroll={{ x: 'max-content' }}
+              />
+            </div>
+
+            {/* ===== 退款记录 ===== */}
+            <div class={styles.section}>
+              <div class={styles.refundHeader}>
+                <span class={styles.sectionTitle}>退款记录</span>
+              </div>
+              {hasRefund.value ? (
+                <>
+                  <div class={styles.refundSummary}>
+                    <span>已退金额：{totalRefunded.value.toFixed(2)}元</span>
+                    <span>退款次数：{refundRecords.value.length}次</span>
+                  </div>
+                  {/* 固定高度 + 内部滚动 */}
+                  <div class={styles.refundList}>
+                    {pagedRefunds.value.map((r, idx) => {
+                      const statusInfo = REFUND_STATUS_MAP[r.status] || {
+                        label: '-',
+                        color: 'default',
+                      };
+                      const realIdx = (refundPage.value - 1) * refundPageSize.value + idx + 1;
+                      return (
+                        <div key={r.key} class={styles.refundCard}>
+                          <div class={styles.refundCardHeader}>
+                            <span class={styles.refundIndex}>第{realIdx}次退款</span>
+                            <Tag color={statusInfo.color}>{statusInfo.label}</Tag>
+                          </div>
+                          <div class={styles.refundCardBody}>
+                            <div class={styles.refundCol}>
+                              <div>
+                                退款金额：
+                                <span class={styles.refundAmount}>
+                                  ¥{r.amount.toFixed(2)}
+                                  {r.isPartial && (
+                                    <span class={styles.partialMark}>（部分退款）</span>
+                                  )}
+                                </span>
+                              </div>
+                              <div>申请时间：{r.applyTime}</div>
+                              <div>完款时间：{r.completeTime || '-'}</div>
+                            </div>
+                            <div class={styles.refundCol}>
+                              <div>退款方式：{r.method}</div>
+                              <div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
                             </div>
-                            <div>申请时间：{r.applyTime}</div>
-                            <div>完款时间：{r.completeTime || '-'}</div>
-                          </div>
-                          <div class={styles.refundCol}>
-                            <div>退款方式：{r.method}</div>
-                            <div>第三方退款单号：{r.thirdPartyNo || '-'}</div>
                           </div>
                         </div>
-                      </div>
-                    );
-                  })}
-                </div>
-                <div class={styles.refundPagination}>
-                  <Pagination
-                    current={refundPage.value}
-                    pageSize={refundPageSize.value}
-                    total={refundRecords.value.length}
-                    showSizeChanger={false}
-                    size="small"
-                    onChange={handleRefundPageChange}
-                  />
-                </div>
-              </>
+                      );
+                    })}
+                  </div>
+                  <div class={styles.refundPagination}>
+                    <Pagination
+                      current={refundPage.value}
+                      pageSize={refundPageSize.value}
+                      total={refundRecords.value.length}
+                      showSizeChanger={false}
+                      size="small"
+                      onChange={handleRefundPageChange}
+                    />
+                  </div>
+                </>
+              ) : (
+                <div class={styles.refundEmpty}>暂无退款记录</div>
+              )}
+            </div>
+          </div>
+
+          {/* ===== 底部按钮 ===== */}
+          <div class={styles.modalFooter}>
+            <Button onClick={props.onClose}>取消</Button>
+            {hasRefund.value ? (
+              <Button danger onClick={handleReRefund}>
+                重新退款
+              </Button>
             ) : (
-              <div class={styles.refundEmpty}>暂无退款记录</div>
+              <Button type="primary" onClick={handleConfirm}>
+                确认
+              </Button>
             )}
           </div>
         </div>
-
-        {/* ===== 底部按钮 ===== */}
-        <div class={styles.modalFooter}>
-          <Button onClick={props.onClose}>取消</Button>
-          {hasRefund.value ? (
-            <Button danger onClick={handleReRefund}>
-              重新退款
-            </Button>
-          ) : (
-            <Button type="primary" onClick={handleConfirm}>
-              确认
-            </Button>
-          )}
-        </div>
       </Modal>
     );
   },

src/pages/events/orders/index.module.less

@@ -1,37 +1,40 @@
-/**
- * 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
- * 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
- */
-.tableBody {
+.eventOrdersMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
-
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      height: 100%;
-    }
-  }
-}
-
-.summaryBar {
-  flex-shrink: 0;
   display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 12px 16px;
-  font-size: 14px;
-  color: #1a1a1a;
+  flex-direction: column;
 
-  .summaryItem {
-    font-weight: 500;
+  .summaryBar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 12px 16px;
+    font-size: 14px;
+    color: #1a1a1a;
 
-    .summaryLabel {
-      color: #666;
-      font-weight: 400;
+    .summaryItem {
+      font-weight: 500;
+
+      .summaryLabel {
+        color: #666;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .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/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 '@/assets/styles/pageLayout.module.less';
 
 const { RangePicker } = DatePicker;
 
@@ -135,9 +136,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="订单时间" name="orderTimeRange">
               <RangePicker
@@ -201,53 +202,55 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-table">
-          {/* 金额汇总 */}
-          <div class={styles.summaryBar}>
-            <span class={styles.summaryItem}>
-              <span class={styles.summaryLabel}>总订单金额（已支付）：</span>
-              {summary.value.totalOrderAmount.toFixed(2)}元
-            </span>
-            <span class={styles.summaryItem}>
-              <span class={styles.summaryLabel}>总实付金额：</span>
-              {summary.value.totalPaidAmount.toFixed(2)}元
-            </span>
-            <span class={styles.summaryItem}>
-              <span class={styles.summaryLabel}>总退款金额：</span>
-              {summary.value.totalRefundAmount.toFixed(2)}元
-            </span>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.eventOrdersMain}>
+            {/* 金额汇总 */}
+            <div class={styles.summaryBar}>
+              <span class={styles.summaryItem}>
+                <span class={styles.summaryLabel}>总订单金额（已支付）：</span>
+                {summary.value.totalOrderAmount.toFixed(2)}元
+              </span>
+              <span class={styles.summaryItem}>
+                <span class={styles.summaryLabel}>总实付金额：</span>
+                {summary.value.totalPaidAmount.toFixed(2)}元
+              </span>
+              <span class={styles.summaryItem}>
+                <span class={styles.summaryLabel}>总退款金额：</span>
+                {summary.value.totalRefundAmount.toFixed(2)}元
+              </span>
+            </div>
 
-          <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,
-                    onView: handleView,
-                    onReRefund: handleReRefund,
-                  }),
-              }}
-            </Table>
-          </div>
+            <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,
+                      onView: handleView,
+                      onReRefund: handleReRefund,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 独立分页，右下方 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 独立分页，右下方 */}
+            <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/events/users/index.module.less

@@ -1,18 +1,21 @@
-/**
- * 表格 body 容器：占满 flex 剩余空间，并确保 antd 嵌套 div 逐层传递 height: 100%，
- * 使得 Table scroll.y = 'calc(100% - 55px)' 中的 100% 能正确解析。
- */
-.tableBody {
+.eventUsersMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      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/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 '@/assets/styles/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -102,9 +103,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户昵称" name="searchUserName">
               <Input
@@ -143,36 +144,38 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-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,
-                    onToggleStatus: handleToggleStatus,
-                  }),
-              }}
-            </Table>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.eventUsersMain}>
+            <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,
+                      onToggleStatus: handleToggleStatus,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 独立分页，右下方 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 独立分页，右下方 */}
+            <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>
       </div>

src/pages/login/index.tsx

@@ -92,7 +92,7 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class={styles.container}>
+      <div class={styles.loginMain}>
         <div class={styles.brand}>
           <div class={styles.orb1} />
           <div class={styles.orb2} />

src/pages/system/roles/components/RoleFormModal.module.less

@@ -1,33 +1,35 @@
-.form {
-  :global {
-    .ant-form-item {
-      margin-bottom: 16px;
+.roleFormModalMain {
+  .modal {
+    :global {
+      .ant-modal-body {
+        padding: 16px 24px 0;
+      }
     }
   }
-}
 
-.treeWrapper {
-  max-height: 380px;
-  overflow: auto;
-  padding: 8px 12px;
-  border: 1px solid #f0f0f0;
-  border-radius: 4px;
-  background: #fafafa;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 8px;
-}
-
-.modal {
-  :global {
-    .ant-modal-body {
-      padding: 16px 24px 0;
+  .form {
+    :global {
+      .ant-form-item {
+        margin-bottom: 16px;
+      }
     }
   }
+
+  .treeWrapper {
+    max-height: 380px;
+    overflow: auto;
+    padding: 8px 12px;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+    background: #fafafa;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 8px;
+  }
 }

src/pages/system/roles/components/RoleFormModal.tsx

@@ -100,6 +100,7 @@ export default defineComponent({
           destroyOnClose
           footer={null}
           centered
+          wrapClassName={styles.roleFormModalMain}
           class={styles.modal}
         >
           <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>

src/pages/system/roles/components/UserListModal.module.less

@@ -1,23 +1,25 @@
-.filter {
-  margin-bottom: 16px;
-}
+.userListModalMain {
+  .filter {
+    margin-bottom: 16px;
+  }
 
-.bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
-}
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+    padding-top: 12px;
+    border-top: 1px solid #f0f0f0;
+  }
 
-.total {
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 13px;
-}
+  .total {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 13px;
+  }
 
-.paginationRow {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 12px;
+  .paginationRow {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+  }
 }

src/pages/system/roles/components/UserListModal.tsx

@@ -78,6 +78,7 @@ export default defineComponent({
           footer={null}
           centered
           destroyOnClose
+          wrapClassName={styles.userListModalMain}
         >
           {/* 筛选 */}
           <div class={styles.filter}>

src/pages/system/roles/index.module.less

@@ -1,43 +1,45 @@
-/**
- * 表格 body 容器：占满 flex 剩余空间
- */
-.tableBody {
+.systemRolesMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      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%;
+      }
     }
   }
-}
 
-/* 用户数链接 */
-.userCountLink {
-  font-variant-numeric: tabular-nums;
-}
-
-/* ===== 删除确认弹窗 ===== */
-.confirmContent {
-  padding: 4px 24px;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-
-  strong {
-    margin: 0 4px;
-    font-weight: 600;
+  .userCountLink {
+    font-variant-numeric: tabular-nums;
   }
-}
 
-.confirmTip {
-  margin-top: 8px;
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
-  line-height: 1.5;
+  .confirmContent {
+    padding: 4px 24px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+
+    strong {
+      margin: 0 4px;
+      font-weight: 600;
+    }
+  }
+
+  .confirmTip {
+    margin-top: 8px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 1.5;
+  }
 }
 
 :global(.deleteConfirmModal) {

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 '@/assets/styles/pageLayout.module.less';
 
 /**
  * bodyCell 渲染
@@ -56,13 +57,15 @@ function confirmDelete({ record, onOk }: { record: any; onOk: (record: any) => v
     icon: null,
     class: styles.deleteConfirmModal,
     content: (
-      <div class={styles.confirmContent}>
-        <div>
-          <span>确定要删除角色</span>
-          <strong>{record.roleName}</strong>
-          <span>吗？</span>
+      <div class={styles.systemRolesMain}>
+        <div class={styles.confirmContent}>
+          <div>
+            <span>确定要删除角色</span>
+            <strong>{record.roleName}</strong>
+            <span>吗？</span>
+          </div>
+          <div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
         </div>
-        <div class={styles.confirmTip}>删除后该角色下的用户将失去对应的权限，请谨慎操作。</div>
       </div>
     ),
     okText: '确认',
@@ -119,9 +122,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="角色" name="searchKeyword">
               <Input
@@ -146,38 +149,40 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-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,
-                    onViewUsers: handleViewUsers,
-                    onEdit: handleEdit,
-                    onDelete: triggerDelete,
-                  }),
-              }}
-            </Table>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.systemRolesMain}>
+            <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,
+                      onViewUsers: handleViewUsers,
+                      onEdit: handleEdit,
+                      onDelete: triggerDelete,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 分页 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 分页 */}
+            <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/system/users/components/UserFormModal.module.less

@@ -1,52 +1,49 @@
-/* ===== 表单行/列布局 ===== */
-.row {
-  display: flex;
-  gap: 16px;
-  flex-wrap: wrap;
-}
+.userFormModalMain {
+  .row {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
 
-.col {
-  flex: 1;
-  min-width: 0;
-}
+  .col {
+    flex: 1;
+    min-width: 0;
+  }
 
-/* 让 antd Form.Item 在 col 里能正确控制宽度 */
-.form {
-  :global {
-    .ant-form-item {
-      flex: 1;
-      min-width: 0;
+  .form {
+    :global {
+      .ant-form-item {
+        flex: 1;
+        min-width: 0;
+      }
     }
   }
-}
 
-/* ===== 密码区重置链接 ===== */
-.resetLink {
-  font-size: 14px;
-  color: #1677ff;
-  cursor: pointer;
-  user-select: none;
+  .resetLink {
+    font-size: 14px;
+    color: #1677ff;
+    cursor: pointer;
+    user-select: none;
 
-  &:hover {
-    color: #4096ff;
+    &:hover {
+      color: #4096ff;
+    }
+  }
+
+  .cancelRow {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -8px;
+    margin-bottom: 16px;
+    font-size: 12px;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 8px;
   }
 }
-
-/* ===== 取消重置行 ===== */
-.cancelRow {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: -8px;
-  margin-bottom: 16px;
-  font-size: 12px;
-}
-
-/* ===== 底部按钮 ===== */
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 16px;
-  border-top: 1px solid #f0f0f0;
-  margin-top: 8px;
-}

src/pages/system/users/components/UserFormModal.tsx

@@ -121,6 +121,7 @@ export default defineComponent({
           destroyOnClose
           footer={null}
           centered
+          wrapClassName={styles.userFormModalMain}
         >
           <Form ref={formRef} layout="vertical" model={formData} class={styles.form} requiredMark>
             {/* 姓名 / 手机号：同一行 */}

src/pages/system/users/index.module.less

@@ -1,41 +1,39 @@
-/**
- * 表格 body 容器：占满 flex 剩余空间，
- * 确保 antd 嵌套 div 逐层传递 height: 100%，
- * 使得 Table scroll.y 能正确解析。
- */
-.tableBody {
+.systemUsersMain {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 
-  :global {
-    .ant-spin-nested-loading,
-    .ant-spin-container,
-    .ant-table,
-    .ant-table-container {
-      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%;
+      }
+    }
+  }
+
+  .confirmContent {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 4px 0;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+
+    strong {
+      margin: 0 4px;
+      font-weight: 600;
     }
   }
 }
 
-/* ===== 禁用/启用 二次确认弹窗 ===== */
-
-/* 内容块：左右加 padding，按用户要求 */
-.confirmContent {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 4px 0;
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-
-  strong {
-    margin: 0 4px;
-    font-weight: 600;
-  }
-}
-
-/* antd Modal.confirm 默认 body 已经有 padding，这里额外覆盖一下确保一致 */
 :global(.toggleConfirmModal) {
   .ant-modal-confirm-body {
     padding: 24px !important;

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 '@/assets/styles/pageLayout.module.less';
 
 /**
  * bodyCell 渲染函数
@@ -53,10 +54,12 @@ function confirmToggleStatus({ record, onOk }: { record: any; onOk: (record: any
     title: `确认${actionText}`,
     class: styles.toggleConfirmModal,
     content: (
-      <div class={styles.confirmContent}>
-        <span>确定要{actionText}用户</span>
-        <strong>{record.realName}</strong>
-        <span>吗？</span>
+      <div class={styles.systemUsersMain}>
+        <div class={styles.confirmContent}>
+          <span>确定要{actionText}用户</span>
+          <strong>{record.realName}</strong>
+          <span>吗？</span>
+        </div>
       </div>
     ),
     okText: '确认',
@@ -117,9 +120,9 @@ export default defineComponent({
     ];
 
     return () => (
-      <div class="page-container">
+      <div class={pageStyles.containerMain}>
         {/* ===== 筛选区 ===== */}
-        <div class="page-filter">
+        <div class={pageStyles.filter}>
           <Form style={{ rowGap: '10px' }} layout="inline" model={filterForm}>
             <Form.Item label="用户" name="searchKeyword">
               <Input
@@ -162,37 +165,39 @@ export default defineComponent({
         </div>
 
         {/* ===== 表格区 ===== */}
-        <div class="page-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,
-                    onEdit: triggerEdit,
-                    onToggleStatus: triggerToggle,
-                  }),
-              }}
-            </Table>
-          </div>
+        <div class={pageStyles.table}>
+          <div class={styles.systemUsersMain}>
+            <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,
+                      onEdit: triggerEdit,
+                      onToggleStatus: triggerToggle,
+                    }),
+                }}
+              </Table>
+            </div>
 
-          {/* 独立分页 */}
-          <div class="page-pagination">
-            <Pagination
-              current={pagination.value.current}
-              pageSize={pagination.value.pageSize}
-              total={pagination.value.total}
-              showSizeChanger
-              showTotal={(total: number) => `共 ${total} 条`}
-              onChange={handlePageChange}
-              onShowSizeChange={handlePageChange}
-            />
+            {/* 独立分页 */}
+            <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/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,110 @@
+import { reactive, computed, toRefs } from 'vue';
+import router from '@/router';
+import type { TabView } from '@/types';
+
+export type { TabView };
+
+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

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