pay-admin/src/common/components/layout/TabsExample.tsx

import React from 'react';
import { Button, Card, Space, Divider } from 'antd';
import { PlusOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
import { MyPageContainer } from './MyPageContainer';
import { usePageTabs } from './usePageTabs';
import { history } from '@umijs/max';

/**
 * 标签页使用示例组件
 * 展示如何使用MyPageContainer的多标签页功能
 */
export function TabsExample() {
  const tabsApi = usePageTabs({
    tabKey: 'tabs-example',
    tabLabel: '标签页示例'
  });

  const handleAddTab = (key: string, label: string, path: string) => {
    tabsApi.addTab({
      key,
      label,
      path,
      closable: true
    });
    history.push(path);
  };

  return (
    <MyPageContainer
      enableTabs
      tabKey="tabs-example"
      tabLabel="标签页示例"
      title="多标签页功能演示"
    >
      <Card title="标签页操作示例" style={{ marginBottom: 16 }}>
        <Space wrap>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => handleAddTab('user-list', '用户列表', '/users')}
          >
            打开用户列表
          </Button>
          
          <Button
            icon={<UserOutlined />}
            onClick={() => handleAddTab('user-profile', '用户详情', '/users/profile')}
          >
            打开用户详情
          </Button>
          
          <Button
            icon={<SettingOutlined />}
            onClick={() => handleAddTab('settings', '系统设置', '/settings')}
          >
            打开系统设置
          </Button>
        </Space>
        
        <Divider />
        
        <Space wrap>
          <Button onClick={() => tabsApi.closeOtherTabs()}>
            关闭其他标签
          </Button>
          
          <Button onClick={() => tabsApi.closeLeftTabs()}>
            关闭左侧标签
          </Button>
          
          <Button onClick={() => tabsApi.closeRightTabs()}>
            关闭右侧标签
          </Button>
          
          <Button onClick={() => tabsApi.refreshTab()}>
            刷新当前标签
          </Button>
        </Space>
      </Card>
      
      <Card title="功能说明">
        <div style={{ lineHeight: '1.8' }}>
          <h4>🎯 核心功能</h4>
          <ul>
            <li><strong>多标签页支持</strong>：支持同时打开多个页面标签</li>
            <li><strong>右键菜单</strong>：右键点击标签页显示操作菜单</li>
            <li><strong>智能导航</strong>：关闭标签时自动切换到相邻标签</li>
            <li><strong>状态持久化</strong>：标签页状态在组件间共享</li>
          </ul>
          
          <h4>🖱️ 右键菜单操作</h4>
          <ul>
            <li><strong>刷新</strong>：重新加载当前标签页</li>
            <li><strong>关闭</strong>：关闭当前标签页</li>
            <li><strong>关闭其他</strong>：关闭除当前标签外的所有标签</li>
            <li><strong>关闭左侧</strong>：关闭当前标签左侧的所有标签</li>
            <li><strong>关闭右侧</strong>：关闭当前标签右侧的所有标签</li>
          </ul>
          
          <h4>💻 使用方法</h4>
          <pre style={{ background: '#f5f5f5', padding: '12px', borderRadius: '4px' }}>
{`// 1. 在页面组件中使用
import { MyPageContainer, usePageTabs } from '@/common';

function YourPage() {
  usePageTabs({
    tabKey: 'your-page',
    tabLabel: '页面标题'
  });

  return (
    <MyPageContainer
      enableTabs
      tabKey="your-page"
      tabLabel="页面标题"
    >
      {/* 页面内容 */}
    </MyPageContainer>
  );
}`}
          </pre>
        </div>
      </Card>
    </MyPageContainer>
  );
}