fix: 修复客户端中继协议 + 全平台房间详情/分享

关键修复:
- RelayClient: 二进制头部改为FUNMC_JOIN:roomId|playerName|password协议
- RelayClient: 等待服务端OK:CONNECTED/ERROR:*握手响应
- rooms:join: 先连接中继再启动本地代理, 传入playerName和password
- 连接失败自动cleanup

Web管理面板:
- 房间详情弹窗: 点击房间卡片打开
- 玩家列表 + 踢出功能 (UserX图标)
- 复制房间号 / 删除房间按钮

Mobile:
- 房间详情底部弹窗 (Modal slide)
- 在线玩家列表
- 分享房间号 (Share API)
- 复制房间号
- apiClient.getRoomDetail 方法

server/web/src/pages/Rooms.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react';
 import { Link } from 'react-router-dom';
-import { Gamepad2, Users, Clock, Lock, Trash2, Copy, Plus, RefreshCw, Search, X } from 'lucide-react';
+import { Gamepad2, Users, Clock, Lock, Trash2, Copy, Plus, RefreshCw, Search, X, Eye, UserX } from 'lucide-react';
 import { apiService, type RoomInfo } from '../api';
 
 export default function Rooms() {
@@ -11,6 +11,9 @@ export default function Rooms() {
   const [editionFilter, setEditionFilter] = useState<string>('all');
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
   const [copied, setCopied] = useState<string | null>(null);
+  const [detailRoom, setDetailRoom] = useState<any>(null);
+  const [detailPlayers, setDetailPlayers] = useState<any[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
 
   const loadRooms = useCallback(async () => {
     try {
@@ -56,8 +59,76 @@ export default function Rooms() {
     setTimeout(() => setCopied(null), 2000);
   }
 
+  async function openDetail(roomId: string) {
+    setDetailLoading(true);
+    try {
+      const data = await apiService.getRoom(roomId);
+      setDetailRoom(data.room);
+      setDetailPlayers(data.players || []);
+    } catch { setDetailRoom(null); }
+    setDetailLoading(false);
+  }
+
+  async function handleKick(roomId: string, playerId: string) {
+    if (!confirm('确定要踢出该玩家吗？')) return;
+    try {
+      await apiService.kickPlayer(roomId, playerId);
+      openDetail(roomId);
+    } catch { alert('踢出失败'); }
+  }
+
   return (
     <div>
+      {/* Room Detail Modal */}
+      {detailRoom && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50" onClick={() => setDetailRoom(null)}>
+          <div className="bg-mc-darker border border-mc-accent/40 rounded-xl p-6 max-w-lg w-full mx-4" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-bold flex items-center gap-2">
+                {detailRoom.name}
+                {detailRoom.password && <Lock className="w-3.5 h-3.5 text-yellow-400" />}
+              </h3>
+              <button onClick={() => setDetailRoom(null)} className="text-gray-500 hover:text-gray-300"><X className="w-5 h-5" /></button>
+            </div>
+            <div className="grid grid-cols-2 gap-2 mb-4">
+              {[
+                { l: '房间号', v: detailRoom.id },
+                { l: '房主', v: detailRoom.hostName },
+                { l: '版本', v: `${detailRoom.gameEdition === 'java' ? 'Java' : '基岩'} ${detailRoom.gameVersion}` },
+                { l: '玩家', v: `${detailRoom.currentPlayers}/${detailRoom.maxPlayers}` },
+              ].map((item, i) => (
+                <div key={i} className="bg-mc-dark/60 rounded-lg p-2.5">
+                  <p className="text-[10px] text-gray-500">{item.l}</p>
+                  <p className="text-sm font-semibold">{item.v}</p>
+                </div>
+              ))}
+            </div>
+            <h4 className="text-sm font-bold text-mc-green mb-2">在线玩家 ({detailPlayers.length})</h4>
+            {detailPlayers.length === 0 ? (
+              <p className="text-gray-500 text-xs py-4 text-center">暂无玩家在线</p>
+            ) : (
+              <div className="space-y-1 max-h-48 overflow-y-auto">
+                {detailPlayers.map((p: any) => (
+                  <div key={p.id} className="flex items-center justify-between bg-mc-dark/60 rounded-lg px-3 py-2">
+                    <div>
+                      <span className="text-sm">👤 {p.name}</span>
+                      <span className="text-[10px] text-gray-500 ml-2">{new Date(p.joinedAt).toLocaleTimeString('zh-CN')}</span>
+                    </div>
+                    <button onClick={() => handleKick(detailRoom.id, p.id)} className="text-red-400 hover:text-red-300 transition-colors" title="踢出">
+                      <UserX className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="flex gap-2 mt-4 justify-end">
+              <button onClick={() => { copyRoomId(detailRoom.id); }} className="btn-secondary text-xs flex items-center gap-1"><Copy className="w-3 h-3" /> 复制房间号</button>
+              <button onClick={() => { setDeleteConfirm(detailRoom.id); setDetailRoom(null); }} className="bg-red-500/20 hover:bg-red-500/30 text-red-400 px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors flex items-center gap-1"><Trash2 className="w-3 h-3" /> 删除</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Delete Confirmation Dialog */}
       {deleteConfirm && (
         <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
@@ -151,7 +222,7 @@ export default function Rooms() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
         {filteredRooms.map(room => (
-          <div key={room.id} className="card hover:border-mc-accent/60 transition-colors">
+          <div key={room.id} className="card hover:border-mc-accent/60 transition-colors cursor-pointer" onClick={() => openDetail(room.id)}>
             <div className="flex items-start justify-between">
               <div className="flex items-center gap-3">
                 <div className="w-10 h-10 rounded-lg bg-mc-green/20 flex items-center justify-center">