import { MyPageContainer, usePageTabs } from '@/common';

function UserListPage() {
  // 使用 Hook 简化标签页管理
  usePageTabs({
    tabKey: 'user-list',
    tabLabel: '用户列表'
  });

  return (
    <MyPageContainer
      enableTabs
      tabKey="user-list"
      tabLabel="用户列表"
      title="用户管理"
    >
      {/* 页面内容 */}
      <div>用户列表内容</div>
    </MyPageContainer>
  );
}

高级用法

import { MyPageContainer, usePageTabs, tabsManager } from '@/common';
import { Button, Space } from 'antd';
import { history } from '@umijs/max';

function DashboardPage() {
  const tabsApi = usePageTabs({
    tabKey: 'dashboard',
    tabLabel: '仪表盘',
    closable: false // 首页不可关闭
  });

  const openUserPage = () => {
    tabsApi.addTab({
      key: 'user-list',
      label: '用户列表',
      path: '/users'
    });
    history.push('/users');
  };

  return (
    <MyPageContainer
      enableTabs
      tabKey="dashboard"
      tabLabel="仪表盘"
      title="系统仪表盘"
    >
      <Space>
        <Button type="primary" onClick={openUserPage}>
          打开用户列表
        </Button>
        <Button onClick={() => tabsApi.closeOtherTabs()}>
          关闭其他标签
        </Button>
      </Space>
    </MyPageContainer>
  );
}

📚 API 文档

MyPageContainer Props

参数	说明	类型	默认值
enableTabs	是否启用多标签页功能	`boolean`	`true`
tabKey	标签页唯一标识	`string`	-
tabLabel	标签页显示标题	`string`	-
onTabChange	标签页切换回调	`(activeKey: string) => void`	-
...rest	继承 PageContainerProps 的所有属性	`PageContainerProps`	-

usePageTabs Hook

参数

interface UsePageTabsOptions {
  tabKey: string;        // 标签页唯一标识
  tabLabel: string;      // 标签页显示标题
  closable?: boolean;    // 是否可关闭，默认 true
  autoAdd?: boolean;     // 是否自动添加，默认 true
}

返回值

interface UsePageTabsReturn {
  addTab: (tab: TabItem) => void;           // 添加标签页
  removeTab: (key: string) => void;         // 关闭标签页
  switchTab: (key: string) => void;         // 切换标签页
  closeOtherTabs: (currentKey?: string) => void;  // 关闭其他标签
  closeLeftTabs: (currentKey?: string) => void;   // 关闭左侧标签
  closeRightTabs: (currentKey?: string) => void;  // 关闭右侧标签
  refreshTab: (key?: string) => void;       // 刷新标签页
  getTabs: () => TabItem[];                 // 获取所有标签
  getActiveKey: () => string;               // 获取当前激活标签
}

TabsManager 全局管理器

import { tabsManager } from '@/common';

// 直接操作标签页管理器
tabsManager.addTab({
  key: 'new-page',
  label: '新页面',
  path: '/new-page',
  closable: true
});

// 监听标签页变化
const unsubscribe = tabsManager.subscribe(() => {
  console.log('标签页状态已更新');
});

// 取消监听
unsubscribe();

🎨 样式定制

CSS 变量

// 自定义标签页样式
.tabs-header-only {
  .ant-tabs-tab {
    // 标签页样式
    &:hover {
      background-color: #f5f5f5;
    }
  }
  
  .ant-tabs-tab-active {
    // 激活状态样式
    background-color: #e6f7ff;
  }
}

主题定制

import { ConfigProvider } from 'antd';

<ConfigProvider
  theme={{
    components: {
      Tabs: {
        cardBg: '#ffffff',
        itemActiveColor: '#1890ff',
        itemHoverColor: '#40a9ff'
      }
    }
  }}
>
  <MyPageContainer enableTabs tabKey="page" tabLabel="页面" />
</ConfigProvider>

🔧 最佳实践

1. 标签页命名规范

// ✅ 推荐：使用语义化的 key
usePageTabs({
  tabKey: 'user-list',
  tabLabel: '用户列表'
});

// ❌ 不推荐：使用随机或无意义的 key
usePageTabs({
  tabKey: 'page1',
  tabLabel: '页面1'
});

2. 路由集成

// 在路由配置中使用
export default {
  path: '/users',
  component: () => import('./UserListPage'),
  // 可以在路由元信息中定义标签页信息
  meta: {
    tabKey: 'user-list',
    tabLabel: '用户列表'
  }
};

3. 权限控制

function ProtectedPage() {
  const { hasPermission } = useAccess();
  
  usePageTabs({
    tabKey: 'admin-panel',
    tabLabel: '管理面板',
    // 根据权限决定是否可关闭
    closable: hasPermission('admin')
  });
  
  return (
    <MyPageContainer
      enableTabs
      tabKey="admin-panel"
      tabLabel="管理面板"
    >
      {/* 内容 */}
    </MyPageContainer>
  );
}

4. 性能优化

// 使用 React.memo 优化组件渲染
const OptimizedPage = React.memo(() => {
  usePageTabs({
    tabKey: 'heavy-page',
    tabLabel: '重型页面'
  });
  
  return (
    <MyPageContainer
      enableTabs
      tabKey="heavy-page"
      tabLabel="重型页面"
    >
      {/* 复杂内容 */}
    </MyPageContainer>
  );
});

🐛 常见问题

Q: 标签页不显示？

A: 确保设置了 enableTabs={true} 并提供了 tabKey 和 tabLabel。

Q: 右键菜单不工作？

A: 检查是否正确导入了 CSS 样式文件。

Q: 标签页状态丢失？

A: 标签页状态是全局的，但在页面刷新后会重置。如需持久化，可以结合 localStorage 实现。

Q: 如何禁用某些标签页的关闭功能？

A: 在添加标签页时设置 closable: false。

🔄 更新日志

v1.0.0

✨ 新增多标签页功能
✨ 新增右键菜单操作
✨ 新增 usePageTabs Hook
✨ 新增全局状态管理
🎨 优化样式和交互体验

📄 许可证

MIT License