# MyPageContainer 多标签页功能

基于 Ant Design Pro Components 的企业级多标签页解决方案，提供完整的标签页管理功能。

## ✨ 特性

- 🎯 **多标签页支持** - 支持同时打开多个页面标签
- 🖱️ **右键菜单** - 丰富的标签页操作菜单
- 🔄 **智能导航** - 关闭标签时自动切换到相邻标签
- 💾 **状态管理** - 全局标签页状态管理
- 🎨 **主题适配** - 完美适配 Ant Design 主题
- 📱 **响应式设计** - 支持不同屏幕尺寸

## 🚀 快速开始

### 基础用法

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

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

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

### 高级用法

```tsx
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

#### 参数

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

#### 返回值

```tsx
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 全局管理器

```tsx
import { tabsManager } from '@/common';

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

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

// 取消监听
unsubscribe();
```

## 🎨 样式定制

### CSS 变量

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

### 主题定制

```tsx
import { ConfigProvider } from 'antd';

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

## 🔧 最佳实践

### 1. 标签页命名规范

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

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

### 2. 路由集成

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

### 3. 权限控制

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

### 4. 性能优化

```tsx
// 使用 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