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

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

/**
 * 标签页使用示例组件
 * 展示如何使用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);
  };

  const handleAddTabNext = (key: string, label: string, path: string) => {
    tabsApi.addTabNext({
      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 orientation="left">在当前标签右侧打开新标签</Divider>

        <Space wrap>
          <Button
            type="dashed"
            icon={<PlusOutlined />}
            onClick={() =>
              handleAddTabNext('company-1', '机构详情-1', '/company/1')
            }
          >
            打开机构详情-1（右侧）
          </Button>

          <Button
            type="dashed"
            icon={<UserOutlined />}
            onClick={() =>
              handleAddTabNext('employee-1', '员工详情-1', '/employee/1')
            }
          >
            打开员工详情-1（右侧）
          </Button>

          <Button
            type="dashed"
            icon={<SettingOutlined />}
            onClick={() =>
              handleAddTabNext('project-1', '项目详情-1', '/project/1')
            }
          >
            打开项目详情-1（右侧）
          </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>
            <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>
  );
}