243 lines
7.4 KiB
TypeScript
243 lines
7.4 KiB
TypeScript
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>
|
||
);
|
||
} |