60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import React, { useMemo } from 'react';
|
|
import { Tabs } from 'antd';
|
|
import { useLocation } from 'react-router-dom';
|
|
import MinesweeperGame from './MinesweeperGame';
|
|
import MinesweeperLeaderboard from './MinesweeperLeaderboard';
|
|
import SpectatorMinesweeper from './SpectatorMinesweeper';
|
|
|
|
const MinesweeperTabs: React.FC = () => {
|
|
const location = useLocation();
|
|
|
|
// 检查是否在旁观模式
|
|
const isSpectatorMode = location.pathname.startsWith('/spectate/');
|
|
const roomId = isSpectatorMode ? location.pathname.split('/')[2] : null;
|
|
|
|
// 选项卡内容
|
|
const items = useMemo(() => {
|
|
if (isSpectatorMode && roomId) {
|
|
// 旁观模式：只显示旁观组件
|
|
return [
|
|
{
|
|
key: 'spectator',
|
|
label: '旁观模式',
|
|
children: <SpectatorMinesweeper roomId={roomId} />,
|
|
},
|
|
];
|
|
} else {
|
|
// 正常模式：显示游戏和排行榜
|
|
return [
|
|
{
|
|
key: 'game',
|
|
label: '扫雷游戏',
|
|
children: <MinesweeperGame />,
|
|
},
|
|
{
|
|
key: 'leaderboard',
|
|
label: '排行榜',
|
|
children: <MinesweeperLeaderboard />,
|
|
},
|
|
];
|
|
}
|
|
}, [isSpectatorMode, roomId]);
|
|
|
|
return (
|
|
<div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 0' }}>
|
|
{isSpectatorMode && roomId ? (
|
|
<SpectatorMinesweeper roomId={roomId} />
|
|
) : (
|
|
<Tabs
|
|
defaultActiveKey="game"
|
|
items={items}
|
|
tabBarGutter={32}
|
|
type="line"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MinesweeperTabs;
|