sudoku leader board fixed

src/components/SudokuGame.tsx

@@ -158,6 +158,7 @@ const SudokuGame: React.FC = () => {
         },
         body: JSON.stringify({
           difficulty,
+          gameMode,
           timeSeconds,
           won
         })

src/components/SudokuLeaderboard.tsx

@@ -19,11 +19,13 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import { API_BASE_URL } from '../config';
 
 type Difficulty = 'easy' | 'medium' | 'hard';
+type GameMode = 'all' | 'standard' | 'irregular';
 
 interface LeaderboardRecord {
   userId: string;
   username: string;
   fullname: string;
+  gameMode: 'standard' | 'irregular';
   bestTime: number;
   totalGames: number;
   wonGames: number;
@@ -47,6 +49,7 @@ const DIFFICULTY_LABELS: Record<Difficulty, string> = {
 
 const SudokuLeaderboard: React.FC = () => {
   const [difficulty, setDifficulty] = useState<Difficulty>('hard');
+  const [gameModeFilter, setGameModeFilter] = useState<GameMode>('all');
   const [records, setRecords] = useState<LeaderboardRecord[]>([]);
   const [page, setPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
@@ -55,14 +58,14 @@ const SudokuLeaderboard: React.FC = () => {
 
   useEffect(() => {
     fetchLeaderboard();
-  }, [difficulty, page]);
+  }, [difficulty, page, gameModeFilter]);
 
   const fetchLeaderboard = async () => {
     setLoading(true);
     setError(null);
     try {
       const response = await fetch(
-        `${API_BASE_URL}/api/sudoku/leaderboard/${difficulty}?page=${page}&limit=10`
+        `${API_BASE_URL}/api/sudoku/leaderboard/${difficulty}?page=${page}&limit=10&mode=${gameModeFilter}`
       );
 
       if (!response.ok) {
@@ -85,6 +88,11 @@ const SudokuLeaderboard: React.FC = () => {
     setPage(1);
   };
 
+  const handleGameModeChange = (_event: React.SyntheticEvent, newValue: GameMode) => {
+    setGameModeFilter(newValue);
+    setPage(1);
+  };
+
   const handlePageChange = (_event: React.ChangeEvent<unknown>, value: number) => {
     setPage(value);
   };
@@ -139,12 +147,27 @@ const SudokuLeaderboard: React.FC = () => {
         </Tabs>
       </Box>
 
+      <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
+        <Tabs
+          value={gameModeFilter}
+          onChange={handleGameModeChange}
+          centered
+          textColor="primary"
+          indicatorColor="primary"
+        >
+          <Tab value="all" label="全部" />
+          <Tab value="standard" label="标准" />
+          <Tab value="irregular" label="不规则" />
+        </Tabs>
+      </Box>
+
       <TableContainer component={Paper} sx={{ mb: 3 }}>
         <Table>
           <TableHead>
             <TableRow>
               <TableCell align="center" width="80px">排名</TableCell>
               <TableCell>姓名</TableCell>
+              <TableCell align="center">模式</TableCell>
               <TableCell align="center">最佳时间</TableCell>
               <TableCell align="center">总游戏次数</TableCell>
               <TableCell align="center">获胜次数</TableCell>
@@ -155,7 +178,7 @@ const SudokuLeaderboard: React.FC = () => {
           <TableBody>
             {records.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={7} align="center">
+                <TableCell colSpan={8} align="center">
                   <Typography variant="body2" color="textSecondary" py={3}>
                     暂无排行榜数据
                   </Typography>
@@ -167,7 +190,7 @@ const SudokuLeaderboard: React.FC = () => {
                 const badge = page === 1 ? getRankBadge(rank) : null;
                 return (
                   <TableRow
-                    key={record.userId}
+                    key={`${record.userId}_${record.gameMode}`}
                     sx={badge ? { backgroundColor: 'rgba(255, 215, 0, 0.1)' } : {}}
                   >
                     <TableCell align="center">
@@ -181,6 +204,13 @@ const SudokuLeaderboard: React.FC = () => {
                         {record.fullname || record.username}
                       </Typography>
                     </TableCell>
+                    <TableCell align="center">
+                      <Chip
+                        label={record.gameMode === 'standard' ? '标准' : '不规则'}
+                        color={record.gameMode === 'standard' ? 'primary' : 'secondary'}
+                        size="small"
+                      />
+                    </TableCell>
                     <TableCell align="center">
                       <Chip
                         label={formatTime(record.bestTime)}