feat: Online 模式前端 UI — 房间管理/连接状态/remote-move/禁悔棋

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

src/components/game/GameView.tsx

@@ -1,3 +1,7 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { listen } from '@tauri-apps/api/event';
+import { useGameStore } from '../../store/gameStore';
 import BoardCanvas from '../board/BoardCanvas';
 import GameInfo from './GameInfo';
 import GameControls from './GameControls';
@@ -8,8 +12,33 @@ interface Props {
 }
 
 export default function GameView({ onBackToMenu }: Props) {
+  const { t } = useTranslation();
+  const mode = useGameStore((s) => s.mode);
+  const [connStatus, setConnStatus] = useState<string>('');
+
+  useEffect(() => {
+    if (mode !== 'Online') return;
+    let unlisten1: (() => void) | undefined;
+    let unlisten2: (() => void) | undefined;
+
+    const setup = async () => {
+      unlisten1 = await listen<string>('connection-status', (e) => setConnStatus(e.payload));
+      unlisten2 = await listen<number>('listening-port', (e) => setConnStatus('waiting:' + e.payload));
+    };
+    setup();
+
+    return () => { unlisten1?.(); unlisten2?.(); };
+  }, [mode]);
+
   return (
     <div className="game-view">
+      {mode === 'Online' && connStatus && (
+        <div style={{ fontSize: 14, opacity: 0.8 }}>
+          {connStatus.startsWith('waiting') ? '等待对手加入...' :
+           connStatus === 'connected' ? t('game.opponent_connected') :
+           connStatus === 'disconnected' ? t('game.opponent_disconnected') : ''}
+        </div>
+      )}
       <GameInfo />
       <div className="board-container">
         <BoardCanvas />