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 方法

client/src/main/index.ts

@@ -147,18 +147,13 @@ ipcMain.handle('rooms:delete', async (_event, roomId: string) => {
 });
 
 // Join room - start local proxy and relay connection
-ipcMain.handle('rooms:join', async (_event, opts: { serverHost: string; serverPort: number; roomId: string; localPort: number }) => {
+ipcMain.handle('rooms:join', async (_event, opts: { serverHost: string; serverPort: number; roomId: string; localPort: number; password?: string }) => {
   try {
     cleanup();
 
-    relayClient = new RelayClient(opts.serverHost, opts.serverPort, opts.roomId);
-    localProxy = new LocalProxy(opts.localPort, relayClient);
+    const playerName = (store.get('playerName') as string) || 'Player';
+    relayClient = new RelayClient(opts.serverHost, opts.serverPort, opts.roomId, playerName, opts.password);
 
-    await localProxy.start();
-
-    relayClient.on('connected', () => {
-      mainWindow?.webContents.send('relay:status', { status: 'connected' });
-    });
     relayClient.on('disconnected', () => {
       mainWindow?.webContents.send('relay:status', { status: 'disconnected' });
     });
@@ -166,8 +161,17 @@ ipcMain.handle('rooms:join', async (_event, opts: { serverHost: string; serverPo
       mainWindow?.webContents.send('relay:status', { status: 'error', error: err });
     });
 
+    // Connect to relay server first (handshake)
+    await relayClient.connect();
+
+    // Then start local proxy for Minecraft to connect to
+    localProxy = new LocalProxy(opts.localPort, relayClient);
+    await localProxy.start();
+
+    mainWindow?.webContents.send('relay:status', { status: 'connected' });
     return { success: true, localPort: opts.localPort };
   } catch (err: any) {
+    cleanup();
     return { success: false, error: err.message };
   }
 });

client/src/main/relay-client.ts

@@ -9,7 +9,9 @@ export class RelayClient extends EventEmitter {
   constructor(
     private host: string,
     private port: number,
-    private roomId: string
+    private roomId: string,
+    private playerName: string = 'Player',
+    private password?: string
   ) {
     super();
   }
@@ -17,21 +19,35 @@ export class RelayClient extends EventEmitter {
   connect(): Promise<void> {
     return new Promise((resolve, reject) => {
       this.socket = new net.Socket();
+      let handshakeDone = false;
 
       this.socket.connect(this.port, this.host, () => {
+        // Send FUNMC_JOIN handshake matching server relay protocol
+        const parts = [this.roomId, this.playerName];
+        if (this.password) parts.push(this.password);
+        this.socket!.write(`FUNMC_JOIN:${parts.join('|')}\n`);
+      });
+
+      // Wait for server response before marking as connected
+      this.socket.once('data', (data) => {
+        const response = data.toString('utf8').trim();
+        handshakeDone = true;
+        if (response.startsWith('OK:')) {
           this.connected = true;
-        // Send room ID as initial handshake
-        const header = Buffer.alloc(2 + this.roomId.length);
-        header.writeUInt16BE(this.roomId.length, 0);
-        header.write(this.roomId, 2);
-        this.socket!.write(header);
+          this.socket!.setTimeout(0); // clear timeout after handshake
           this.emit('connected');
           resolve();
+        } else {
+          // e.g. ERROR:ROOM_NOT_FOUND, ERROR:WRONG_PASSWORD, ERROR:ROOM_FULL, ERROR:HOST_OFFLINE
+          const errorMsg = response.replace('ERROR:', '');
+          this.socket!.destroy();
+          reject(new Error(errorMsg));
+        }
       });
 
       this.socket.on('error', (err) => {
         this.emit('error', err.message);
-        if (!this.connected) reject(err);
+        if (!handshakeDone) reject(err);
       });
 
       this.socket.on('close', () => {
@@ -40,7 +56,9 @@ export class RelayClient extends EventEmitter {
       });
 
       this.socket.setTimeout(10000, () => {
+        if (!handshakeDone) {
           this.socket?.destroy(new Error('Connection timeout'));
+        }
       });
     });
   }

mobile/src/lib/api.ts

@@ -92,6 +92,10 @@ class ApiClient {
   async getTraffic() {
     return request(this.api('/traffic'));
   }
+
+  async getRoomDetail(roomId: string): Promise<{ room: RoomInfo; players: any[] }> {
+    return request(this.api(`/rooms/${roomId}`));
+  }
 }
 
 export const apiClient = new ApiClient();

mobile/src/screens/RoomsScreen.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import {
   View, Text, TouchableOpacity, StyleSheet, FlatList,
-  RefreshControl, Alert, TextInput,
+  RefreshControl, Alert, TextInput, Modal, Share, ScrollView,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { colors, spacing } from '../lib/theme';
@@ -41,14 +41,36 @@ export default function RoomsScreen() {
     return matchSearch && matchFilter;
   });
 
+  const [detailVisible, setDetailVisible] = useState(false);
+  const [detailRoom, setDetailRoom] = useState<RoomInfo | null>(null);
+  const [detailPlayers, setDetailPlayers] = useState<any[]>([]);
+
   async function copyId(id: string) {
     await Clipboard.setStringAsync(id);
     Alert.alert('已复制', `房间号 ${id} 已复制到剪贴板`);
   }
 
+  async function shareRoom(room: RoomInfo) {
+    try {
+      await Share.share({
+        message: `来FunConnect联机吧！\n房间: ${room.name}\n房间号: ${room.id}\n版本: ${room.gameEdition === 'java' ? 'Java' : '基岩'} ${room.gameVersion}\n玩家: ${room.currentPlayers}/${room.maxPlayers}`,
+      });
+    } catch { /* cancelled */ }
+  }
+
+  async function openDetail(room: RoomInfo) {
+    setDetailRoom(room);
+    setDetailVisible(true);
+    try {
+      const data = await apiClient.getRoomDetail(room.id);
+      if (data.room) setDetailRoom(data.room);
+      setDetailPlayers(data.players || []);
+    } catch { setDetailPlayers([]); }
+  }
+
   function renderRoom({ item }: { item: RoomInfo }) {
     return (
-      <View style={styles.roomCard}>
+      <TouchableOpacity style={styles.roomCard} onPress={() => openDetail(item)} activeOpacity={0.7}>
         <View style={styles.roomTop}>
           <View style={styles.roomIcon}><Text style={{ fontSize: 20 }}>🎮</Text></View>
           <View style={{ flex: 1 }}>
@@ -75,7 +97,7 @@ export default function RoomsScreen() {
             <Text style={styles.copyText}>复制号</Text>
           </TouchableOpacity>
         </View>
-      </View>
+      </TouchableOpacity>
     );
   }
 
@@ -120,6 +142,54 @@ export default function RoomsScreen() {
         </View>
       </View>
 
+      {/* Room Detail Modal */}
+      <Modal visible={detailVisible} animationType="slide" transparent>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>{detailRoom?.name} {detailRoom?.password ? '🔒' : ''}</Text>
+              <TouchableOpacity onPress={() => setDetailVisible(false)}>
+                <Text style={{ fontSize: 20, color: colors.textDim }}>✕</Text>
+              </TouchableOpacity>
+            </View>
+            <ScrollView style={{ maxHeight: 400 }}>
+              <View style={styles.modalInfoGrid}>
+                {[
+                  { 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) => (
+                  <View key={i} style={styles.modalInfoItem}>
+                    <Text style={styles.modalInfoLabel}>{item.l}</Text>
+                    <Text style={styles.modalInfoValue}>{item.v}</Text>
+                  </View>
+                ))}
+              </View>
+              <Text style={styles.sectionTitle}>在线玩家 ({detailPlayers.length})</Text>
+              {detailPlayers.length === 0 ? (
+                <Text style={styles.playerEmpty}>暂无玩家在线</Text>
+              ) : (
+                detailPlayers.map((p: any) => (
+                  <View key={p.id} style={styles.playerItem}>
+                    <Text style={styles.playerName}>👤 {p.name}</Text>
+                    <Text style={styles.playerTime}>{new Date(p.joinedAt).toLocaleTimeString('zh-CN')}</Text>
+                  </View>
+                ))
+              )}
+            </ScrollView>
+            <View style={styles.modalActions}>
+              <TouchableOpacity style={styles.shareBtn} onPress={() => detailRoom && shareRoom(detailRoom)}>
+                <Text style={styles.shareBtnText}>📤 分享</Text>
+              </TouchableOpacity>
+              <TouchableOpacity style={styles.modalCopyBtn} onPress={() => detailRoom && copyId(detailRoom.id)}>
+                <Text style={styles.modalCopyText}>📋 复制房间号</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+        </View>
+      </Modal>
+
       <FlatList
         data={filtered}
         renderItem={renderRoom}
@@ -183,4 +253,46 @@ const styles = StyleSheet.create({
   copyText: { color: '#fff', fontSize: 11, fontWeight: '600' },
   empty: { alignItems: 'center', paddingTop: 60 },
   emptyText: { fontSize: 14, color: colors.textDim, marginTop: 12 },
+  modalOverlay: {
+    flex: 1, backgroundColor: 'rgba(0,0,0,0.6)',
+    justifyContent: 'flex-end',
+  },
+  modalContent: {
+    backgroundColor: colors.bgDarker, borderTopLeftRadius: 20, borderTopRightRadius: 20,
+    padding: spacing.lg, maxHeight: '80%',
+  },
+  modalHeader: {
+    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
+    marginBottom: spacing.md,
+  },
+  modalTitle: { fontSize: 17, fontWeight: '700', color: colors.text },
+  modalInfoGrid: {
+    flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: spacing.md,
+  },
+  modalInfoItem: {
+    backgroundColor: colors.input, borderRadius: 8, padding: 10,
+    width: '47%' as any,
+  },
+  modalInfoLabel: { fontSize: 10, color: colors.textDim, marginBottom: 2 },
+  modalInfoValue: { fontSize: 13, fontWeight: '600', color: colors.text },
+  sectionTitle: { fontSize: 13, fontWeight: '700', color: colors.green, marginBottom: 8 },
+  playerEmpty: { fontSize: 12, color: '#555', textAlign: 'center', paddingVertical: 16 },
+  playerItem: {
+    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
+    backgroundColor: colors.input, borderRadius: 6, paddingHorizontal: 12,
+    paddingVertical: 8, marginBottom: 4,
+  },
+  playerName: { fontSize: 13, color: colors.text },
+  playerTime: { fontSize: 10, color: colors.textDim },
+  modalActions: { flexDirection: 'row', gap: 8, marginTop: spacing.md },
+  shareBtn: {
+    flex: 1, backgroundColor: colors.bgAccent, borderRadius: 8,
+    paddingVertical: 10, alignItems: 'center',
+  },
+  shareBtnText: { color: colors.blue, fontSize: 13, fontWeight: '600' },
+  modalCopyBtn: {
+    flex: 1, backgroundColor: colors.green, borderRadius: 8,
+    paddingVertical: 10, alignItems: 'center',
+  },
+  modalCopyText: { color: '#fff', fontSize: 13, fontWeight: '600' },
 });

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">