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

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' },
 });