fix: 代码审查修复 — serde camelCase/CSP/TS检查/replay/undo/AI禁手/星位/未使用依赖

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/board/BoardCanvas.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useCallback } from 'react';
-import { useGameStore } from '../../store/gameStore';
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { useGameStore, buildReplayBoard } from '../../store/gameStore';
 import {
   computeBoardDimensions,
   canvasToBoard,
@@ -15,8 +15,26 @@ export default function BoardCanvas() {
   const placePiece = useGameStore((s) => s.placePiece);
   const aiMove = useGameStore((s) => s.aiMove);
   const moves = useGameStore((s) => s.moves);
+  const replayStep = useGameStore((s) => s.replayStep);
 
-  const lastMove = moves.length > 0 ? moves[moves.length - 1].position : null;
+  // 复盘模式下根据 replayStep 重建棋盘
+  const displayBoard = useMemo(() => {
+    if (mode === 'Replay') {
+      return buildReplayBoard(boardSize, moves, replayStep);
+    }
+    return board;
+  }, [mode, board, boardSize, moves, replayStep]);
+
+  // 复盘模式下的最后一手
+  const displayLastMove = useMemo(() => {
+    if (mode !== 'Replay') {
+      return moves.length > 0 ? moves[moves.length - 1].position : null;
+    }
+    if (replayStep > 0 && replayStep <= moves.length) {
+      return moves[replayStep - 1].position;
+    }
+    return null;
+  }, [mode, moves, replayStep]);
 
   const render = useCallback(() => {
     const canvas = canvasRef.current;
@@ -31,8 +49,8 @@ export default function BoardCanvas() {
     ctx.scale(dpr, dpr);
 
     const cfg = computeBoardDimensions(boardSize, rect.width, rect.height);
-    renderBoard(ctx, board, cfg, lastMove);
-  }, [board, boardSize, lastMove]);
+    renderBoard(ctx, displayBoard, cfg, displayLastMove);
+  }, [displayBoard, boardSize, displayLastMove]);
 
   useEffect(() => {
     render();

src/components/board/board-renderer.ts

@@ -6,6 +6,26 @@ export interface RenderConfig {
   boardSize: number;
 }
 
+/**
+ * 根据棋盘大小动态生成星位坐标。
+ * 标准五子棋/围棋星位: 四角和中心及边中点。
+ * 9x9 起可用，更小的棋盘仅使用中心点。
+ */
+export function computeStarPoints(boardSize: number): [number, number][] {
+  if (boardSize < 9) {
+    const mid = Math.floor(boardSize / 2);
+    return [[mid, mid]];
+  }
+  const a = Math.min(3, Math.floor(boardSize / 4));
+  const b = Math.floor(boardSize / 2);
+  const c = boardSize - 1 - a;
+  return [
+    [a, a], [a, b], [a, c],
+    [b, a], [b, b], [b, c],
+    [c, a], [c, b], [c, c],
+  ];
+}
+
 export function computeBoardDimensions(boardSize: number, canvasWidth: number, canvasHeight: number): RenderConfig {
   const maxBoardPixelSize = Math.min(canvasWidth, canvasHeight) * 0.85;
   const cellSize = Math.floor(maxBoardPixelSize / (boardSize - 1));
@@ -64,12 +84,8 @@ export function renderBoard(
     ctx.stroke();
   }
 
-  // 星位
-  const starPoints = [
-    [3, 3], [3, 7], [3, 11],
-    [7, 3], [7, 7], [7, 11],
-    [11, 3], [11, 7], [11, 11],
-  ];
+  // 星位 — 根据棋盘大小动态计算
+  const starPoints = computeStarPoints(boardSize);
   ctx.fillStyle = '#8B7355';
   for (const [r, c] of starPoints) {
     if (r < boardSize && c < boardSize) {

src/components/game/GameControls.tsx

@@ -8,7 +8,6 @@ interface Props {
 export default function GameControls({ onBackToMenu }: Props) {
   const { t } = useTranslation();
   const undo = useGameStore((s) => s.undo);
-  const mode = useGameStore((s) => s.mode);
   const status = useGameStore((s) => s.status);
 
   const handleUndo = () => {

src/components/menu/AiGameSetup.tsx

@@ -24,6 +24,7 @@ export default function AiGameSetup({ onBack, onStart }: Props) {
       aiDifficulty: difficulty,
       playerColor,
       isServer: false,
+      remoteAddress: '',
     };
     await startGame('VsAi', config);
     onStart();

src/components/menu/LocalGameSetup.tsx

@@ -20,6 +20,7 @@ export default function LocalGameSetup({ onBack, onStart }: Props) {
       aiDifficulty: 3,
       playerColor: 'Black',
       isServer: false,
+      remoteAddress: '',
     };
     await startGame('Local', config);
     onStart();

src/components/menu/OnlineSetup.tsx

@@ -13,6 +13,7 @@ export default function OnlineSetup({ onBack, onStart }: Props) {
   const baseConfig: GameConfig = {
     boardSize: 15, useForbiddenRules: true, useTimer: false,
     timeLimitSecs: 60, aiDifficulty: 3, playerColor: 'Black', isServer: false,
+    remoteAddress: '',
   };
 
   const handleHost = async () => {
@@ -21,7 +22,7 @@ export default function OnlineSetup({ onBack, onStart }: Props) {
   };
 
   const handleJoin = async () => {
-    await startGame('Online', { ...baseConfig });
+    await startGame('Online', { ...baseConfig, remoteAddress: ip });
     onStart();
   };
 

src/components/replay/ReplayView.tsx

@@ -12,31 +12,34 @@ interface Props {
 export default function ReplayView({ onBackToMenu }: Props) {
   const { t } = useTranslation();
   const moves = useGameStore((s) => s.moves);
-  const [step, setStep] = useState(moves.length);
+  const replayStep = useGameStore((s) => s.replayStep);
+  const setReplayStep = useGameStore((s) => s.setReplayStep);
   const [isPlaying, setIsPlaying] = useState(false);
 
+  const step = replayStep;
+
   useEffect(() => {
     if (!isPlaying) return;
     if (step >= moves.length) {
       setIsPlaying(false);
       return;
     }
-    const timer = setInterval(() => setStep((s) => s + 1), 500);
+    const timer = setInterval(() => setReplayStep(step + 1), 500);
     return () => clearInterval(timer);
-  }, [isPlaying, step, moves.length]);
+  }, [isPlaying, step, moves.length, setReplayStep]);
 
   return (
     <div className="replay-view">
       <div className="board-container">
         <BoardCanvas />
       </div>
-      <StepSlider current={step} total={moves.length} onChange={setStep} />
+      <StepSlider current={step} total={moves.length} onChange={setReplayStep} />
       <div>{t('replay.step', { current: step, total: moves.length })}</div>
       <ReplayControls
         isPlaying={isPlaying}
         onTogglePlay={() => setIsPlaying(!isPlaying)}
-        onPrev={() => setStep(Math.max(0, step - 1))}
-        onNext={() => setStep(Math.min(moves.length, step + 1))}
+        onPrev={() => setReplayStep(Math.max(0, step - 1))}
+        onNext={() => setReplayStep(Math.min(moves.length, step + 1))}
       />
       <button onClick={onBackToMenu}>返回菜单</button>
     </div>