Migrate project from typing_practiceweb

src/components/MinesweeperTabs.tsx

@@ -0,0 +1,59 @@
+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;