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 方法
This commit is contained in:
FunMC
@@ -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();
|
||||
|
||||
@@ -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' },
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user