pay-admin/src/pages/tabs-demo.tsx

import React from 'react';
import { Button, Card, Space, Divider, Row, Col, Statistic, Alert } from 'antd';
import { 
  PlusOutlined, 
  UserOutlined, 
  SettingOutlined, 
  HomeOutlined,
  FileTextOutlined,
  TeamOutlined
} from '@ant-design/icons';
import { MyPageContainer, usePageTabs } from '@/common';
import { history } from '@umijs/max';

/**
 * 多标签页功能演示页面
 * 展示完整的标签页管理功能
 */
export default function TabsDemo() {
  const tabsApi = usePageTabs({
    tabKey: 'tabs-demo',
    tabLabel: '标签页演示',
    closable: false // 演示页面不可关闭
  });

  // 模拟打开不同的页面标签
  const openTab = (key: string, label: string, path: string) => {
    tabsApi.addTab({
      key,
      label,
      path,
      closable: true
    });
    // 注意：在实际项目中，这里应该使用 history.push(path)
    // 由于这是演示，我们只是添加标签而不实际跳转
    console.log(`模拟跳转到: ${path}`);
  };

  const demoTabs = [
    {
      key: 'employees',
      label: '员工管理',
      path: '/employees',
      icon: <TeamOutlined />,
      description: '管理公司员工信息'
    },
    {
      key: 'companies',
      label: '公司管理',
      path: '/company/companies',
      icon: <HomeOutlined />,
      description: '管理公司基本信息'
    },
    {
      key: 'house-bills',
      label: '房屋账单',
      path: '/house_bills',
      icon: <FileTextOutlined />,
      description: '查看和管理房屋账单'
    },
    {
      key: 'system-admins',
      label: '系统管理员',
      path: '/system/admins',
      icon: <UserOutlined />,
      description: '管理系统管理员账户'
    },
    {
      key: 'system-roles',
      label: '角色管理',
      path: '/system/sys_roles',
      icon: <SettingOutlined />,
      description: '管理系统角色权限'
    }
  ];

  return (
    <MyPageContainer
      enableTabs
      tabKey="tabs-demo"
      tabLabel="标签页演示"
      title="多标签页功能演示"
    >
      <Alert
        message="多标签页功能演示"
        description="这个页面展示了 MyPageContainer 的多标签页功能。您可以点击下方按钮打开新的标签页，然后右键点击标签体验各种操作。"
        type="info"
        showIcon
        style={{ marginBottom: 24 }}
      />
      
      {/* 统计信息 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card>
            <Statistic
              title="当前标签数量"
              value={tabsApi.getTabs().length}
              prefix={<FileTextOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="激活标签"
              value={tabsApi.getActiveKey()}
              valueStyle={{ fontSize: '16px' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="可用操作"
              value={6}
              suffix="种"
              prefix={<SettingOutlined />}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card>
            <Statistic
              title="演示页面"
              value={demoTabs.length}
              suffix="个"
              prefix={<PlusOutlined />}
            />
          </Card>
        </Col>
      </Row>

      {/* 快速打开标签页 */}
      <Card title="🚀 快速打开页面" style={{ marginBottom: 24 }}>
        <Row gutter={[16, 16]}>
          {demoTabs.map(tab => (
            <Col span={8} key={tab.key}>
              <Card
                size="small"
                hoverable
                onClick={() => openTab(tab.key, tab.label, tab.path)}
                style={{ cursor: 'pointer', textAlign: 'center' }}
              >
                <div style={{ fontSize: '24px', marginBottom: '8px' }}>
                  {tab.icon}
                </div>
                <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                  {tab.label}
                </div>
                <div style={{ fontSize: '12px', color: '#666' }}>
                  {tab.description}
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

      {/* 标签页操作 */}
      <Card title="🎛️ 标签页操作" style={{ marginBottom: 24 }}>
        <Space wrap size="middle">
          <Button 
            type="primary"
            onClick={() => tabsApi.closeOtherTabs()}
            disabled={tabsApi.getTabs().length <= 1}
          >
            关闭其他标签
          </Button>
          
          <Button 
            onClick={() => tabsApi.closeLeftTabs()}
            disabled={tabsApi.getTabs().length <= 1}
          >
            关闭左侧标签
          </Button>
          
          <Button 
            onClick={() => tabsApi.closeRightTabs()}
            disabled={tabsApi.getTabs().length <= 1}
          >
            关闭右侧标签
          </Button>
          
          <Button 
            onClick={() => tabsApi.refreshTab()}
          >
            刷新当前标签
          </Button>
          
          <Button 
            danger
            onClick={() => {
              const tabs = tabsApi.getTabs();
              const closableTabs = tabs.filter(tab => tab.closable);
              closableTabs.forEach(tab => tabsApi.removeTab(tab.key));
            }}
            disabled={tabsApi.getTabs().filter(tab => tab.closable).length === 0}
          >
            关闭所有可关闭标签
          </Button>
        </Space>
      </Card>

      {/* 功能说明 */}
      <Card title="📖 功能说明">
        <Row gutter={24}>
          <Col span={12}>
            <h4>🎯 核心功能</h4>
            <ul style={{ lineHeight: '1.8' }}>
              <li><strong>多标签页支持</strong>：支持同时打开多个页面标签</li>
              <li><strong>右键菜单</strong>：右键点击标签页显示操作菜单</li>
              <li><strong>智能导航</strong>：关闭标签时自动切换到相邻标签</li>
              <li><strong>状态持久化</strong>：标签页状态在组件间共享</li>
              <li><strong>自定义样式</strong>：支持主题定制和样式覆盖</li>
            </ul>
          </Col>
          
          <Col span={12}>
            <h4>🖱️ 右键菜单操作</h4>
            <ul style={{ lineHeight: '1.8' }}>
              <li><strong>刷新</strong>：重新加载当前标签页</li>
              <li><strong>关闭</strong>：关闭当前标签页</li>
              <li><strong>关闭其他</strong>：关闭除当前标签外的所有标签</li>
              <li><strong>关闭左侧</strong>：关闭当前标签左侧的所有标签</li>
              <li><strong>关闭右侧</strong>：关闭当前标签右侧的所有标签</li>
            </ul>
          </Col>
        </Row>
        
        <Divider />
        
        <h4>💡 使用提示</h4>
        <ul style={{ lineHeight: '1.8' }}>
          <li>点击上方的页面卡片可以快速打开对应的标签页</li>
          <li>右键点击任意标签页可以看到完整的操作菜单</li>
          <li>使用工具栏按钮可以批量操作标签页</li>
          <li>演示页面（当前页面）被设置为不可关闭</li>
          <li>在实际项目中，标签页会自动与路由系统集成</li>
        </ul>
      </Card>
    </MyPageContainer>
  );
}