feat: v1.2.0 房间详情/聊天/踢人 + 速率限制 + WebSocket增强
Server: - API速率限制中间件 (120 req/min per IP, X-RateLimit headers) - 房间聊天API: POST /rooms/:id/chat - 认证中间件放行公开GET路由和房间join - WebSocket: 房间订阅/取消订阅 (subscribe/unsubscribe) - WebSocket: 房间聊天广播 (chat -> broadcastToRoom) - WebSocket: 房间事件通知 (roomCreated/Deleted/playerJoined/Left) Client: - 房间详情弹窗: 点击房间卡片打开 - 房间信息网格 (房间号/房主/版本/人数) - 在线玩家列表 (5秒自动刷新) - 踢出玩家 (确认对话框) - 房间聊天 (实时发送/显示) - 加入房间 / 删除房间按钮 - 连接状态指示器动画 (online/offline/connecting) - 房间卡片hover效果 - 版本更新到 v1.2.0 - ApiClient: 新增 getRoomDetail/kickPlayer/sendChat - Preload: 新增对应IPC方法 - Main: 新增 rooms:detail/kick/chat handlers
This commit is contained in:
FunMC
@@ -326,6 +326,122 @@ async function showRecentServers() {
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Room Detail Modal =====
|
||||
let currentModalRoomId = null;
|
||||
let modalRefreshTimer = null;
|
||||
|
||||
function openRoomModal(roomId) {
|
||||
currentModalRoomId = roomId;
|
||||
$('#modal-overlay').classList.remove('hidden');
|
||||
refreshModalRoom();
|
||||
modalRefreshTimer = setInterval(refreshModalRoom, 5000);
|
||||
}
|
||||
|
||||
function closeRoomModal() {
|
||||
currentModalRoomId = null;
|
||||
$('#modal-overlay').classList.add('hidden');
|
||||
if (modalRefreshTimer) { clearInterval(modalRefreshTimer); modalRefreshTimer = null; }
|
||||
}
|
||||
|
||||
$('#modal-close').addEventListener('click', closeRoomModal);
|
||||
$('#modal-overlay').addEventListener('click', (e) => {
|
||||
if (e.target === $('#modal-overlay')) closeRoomModal();
|
||||
});
|
||||
|
||||
async function refreshModalRoom() {
|
||||
if (!currentModalRoomId || !isConnected) return;
|
||||
const result = await window.funmc.getRoomDetail(currentModalRoomId);
|
||||
if (!result || !result.success) return;
|
||||
const room = result.data.room;
|
||||
const players = result.data.players || [];
|
||||
|
||||
$('#modal-room-name').textContent = `${room.name} ${room.password ? '🔒' : ''}`;
|
||||
$('#modal-room-info').innerHTML = [
|
||||
{ l: '房间号', v: room.id },
|
||||
{ l: '房主', v: room.hostName },
|
||||
{ l: '版本', v: `${room.gameEdition === 'java' ? 'Java' : '基岩'} ${room.gameVersion}` },
|
||||
{ l: '玩家', v: `${room.currentPlayers}/${room.maxPlayers}` },
|
||||
].map(i => `<div class="modal-info-item"><div class="label">${i.l}</div><div class="value">${i.v}</div></div>`).join('');
|
||||
|
||||
$('#modal-player-count').textContent = `(${players.length})`;
|
||||
if (players.length === 0) {
|
||||
$('#modal-player-list').innerHTML = '<div class="player-empty">暂无玩家在线</div>';
|
||||
} else {
|
||||
$('#modal-player-list').innerHTML = players.map(p => `
|
||||
<div class="player-item">
|
||||
<div>
|
||||
<span class="player-name">👤 ${escapeHtml(p.name)}</span>
|
||||
<span class="player-time">${formatTimeSince(p.joinedAt)}</span>
|
||||
</div>
|
||||
<button class="btn-kick" onclick="kickPlayer('${currentModalRoomId}','${p.id}')">踢出</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
}
|
||||
|
||||
async function kickPlayer(roomId, playerId) {
|
||||
if (!confirm('确定要踢出该玩家吗？')) return;
|
||||
const result = await window.funmc.kickPlayer(roomId, playerId);
|
||||
if (result && result.success) {
|
||||
refreshModalRoom();
|
||||
} else {
|
||||
alert('踢出失败: ' + (result?.error || '未知错误'));
|
||||
}
|
||||
}
|
||||
|
||||
$('#modal-join-btn').addEventListener('click', () => {
|
||||
if (currentModalRoomId) {
|
||||
closeRoomModal();
|
||||
quickJoin(currentModalRoomId);
|
||||
}
|
||||
});
|
||||
|
||||
$('#modal-delete-btn').addEventListener('click', async () => {
|
||||
if (!currentModalRoomId) return;
|
||||
if (!confirm('确定要删除此房间吗？此操作不可撤销。')) return;
|
||||
const result = await window.funmc.deleteRoom(currentModalRoomId);
|
||||
if (result && result.success) {
|
||||
closeRoomModal();
|
||||
loadRooms();
|
||||
} else {
|
||||
alert('删除失败: ' + (result?.error || '未知错误'));
|
||||
}
|
||||
});
|
||||
|
||||
// Chat in modal
|
||||
$('#modal-chat-send').addEventListener('click', sendChatMessage);
|
||||
$('#modal-chat-input').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') sendChatMessage();
|
||||
});
|
||||
|
||||
async function sendChatMessage() {
|
||||
const input = $('#modal-chat-input');
|
||||
const msg = input.value.trim();
|
||||
if (!msg || !currentModalRoomId) return;
|
||||
input.value = '';
|
||||
const sender = appSettings.playerName || 'Player';
|
||||
appendChatMessage(sender, msg);
|
||||
await window.funmc.sendChat(currentModalRoomId, sender, msg);
|
||||
}
|
||||
|
||||
function appendChatMessage(sender, text, time) {
|
||||
const container = $('#modal-chat-messages');
|
||||
const t = time || new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
|
||||
const div = document.createElement('div');
|
||||
div.className = 'chat-msg';
|
||||
div.innerHTML = `<span class="chat-sender">${escapeHtml(sender)}</span> <span class="chat-text">${escapeHtml(text)}</span><span class="chat-time">${t}</span>`;
|
||||
container.appendChild(div);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
// Make room cards open modal
|
||||
document.addEventListener('click', (e) => {
|
||||
const card = e.target.closest('.room-card');
|
||||
if (card && !e.target.classList.contains('room-btn-join')) {
|
||||
openRoomModal(card.dataset.id);
|
||||
}
|
||||
});
|
||||
|
||||
// ===== Utilities =====
|
||||
function showMsg(selector, text, type) {
|
||||
const el = $(selector);
|
||||
@@ -347,3 +463,11 @@ function formatUptime(seconds) {
|
||||
if (m > 0) return `${m}分${s}秒`;
|
||||
return `${s}秒`;
|
||||
}
|
||||
|
||||
function formatTimeSince(dateStr) {
|
||||
const ms = Date.now() - new Date(dateStr).getTime();
|
||||
const m = Math.floor(ms / 60000);
|
||||
if (m < 1) return '刚刚';
|
||||
if (m < 60) return `${m}分钟前`;
|
||||
return `${Math.floor(m / 60)}小时前`;
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
<span class="nav-icon">ℹ️</span> 关于
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-footer">v1.0.0</div>
|
||||
<div class="sidebar-footer">v1.2.0</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
@@ -233,7 +233,7 @@
|
||||
<div class="about-header">
|
||||
<div class="about-logo">F</div>
|
||||
<div>
|
||||
<h3>FunConnect v1.0.0</h3>
|
||||
<h3>FunConnect v1.2.0</h3>
|
||||
<p>Minecraft 联机客户端</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -273,6 +273,35 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Room Detail Modal -->
|
||||
<div class="modal-overlay hidden" id="modal-overlay">
|
||||
<div class="modal" id="room-detail-modal">
|
||||
<div class="modal-header">
|
||||
<h3 id="modal-room-name">房间详情</h3>
|
||||
<button class="modal-close" id="modal-close">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-info" id="modal-room-info"></div>
|
||||
<div class="modal-section">
|
||||
<h4>在线玩家 <span id="modal-player-count"></span></h4>
|
||||
<div id="modal-player-list" class="player-list"></div>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>房间聊天</h4>
|
||||
<div id="modal-chat-messages" class="chat-messages"></div>
|
||||
<div class="chat-input-row">
|
||||
<input type="text" id="modal-chat-input" class="input" placeholder="输入消息...">
|
||||
<button class="btn btn-primary btn-sm" id="modal-chat-send">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" id="modal-join-btn">加入此房间</button>
|
||||
<button class="btn btn-danger" id="modal-delete-btn">删除房间</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -471,6 +471,94 @@ select.input { cursor: pointer; }
|
||||
.recent-list-item .url { flex: 1; }
|
||||
.recent-list-empty { font-size: 12px; color: #555; padding: 8px 0; }
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.6); z-index: 1000;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.modal {
|
||||
background: var(--bg-card); border: 1px solid var(--border);
|
||||
border-radius: 14px; width: 520px; max-height: 80vh;
|
||||
display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-header {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 16px 20px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modal-header h3 { font-size: 15px; color: var(--text); margin: 0; }
|
||||
.modal-close {
|
||||
background: none; border: none; color: var(--text-dim); font-size: 22px;
|
||||
cursor: pointer; padding: 0 4px; line-height: 1;
|
||||
}
|
||||
.modal-close:hover { color: var(--red); }
|
||||
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
|
||||
.modal-info {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
|
||||
}
|
||||
.modal-info-item {
|
||||
background: var(--bg-dark); border-radius: 8px; padding: 8px 12px;
|
||||
}
|
||||
.modal-info-item .label { font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }
|
||||
.modal-info-item .value { font-size: 13px; color: var(--text); font-weight: 600; }
|
||||
.modal-section { margin-top: 16px; }
|
||||
.modal-section h4 { font-size: 13px; color: var(--green); margin-bottom: 8px; }
|
||||
.modal-footer {
|
||||
display: flex; gap: 8px; padding: 12px 20px;
|
||||
border-top: 1px solid var(--border); justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Player List */
|
||||
.player-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
.player-item {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
background: var(--bg-dark); border-radius: 6px; padding: 8px 12px;
|
||||
}
|
||||
.player-item .player-name { font-size: 13px; color: var(--text); }
|
||||
.player-item .player-time { font-size: 10px; color: var(--text-dim); }
|
||||
.player-item .btn-kick {
|
||||
background: rgba(233,69,96,0.15); border: none; color: var(--red);
|
||||
padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
|
||||
}
|
||||
.player-item .btn-kick:hover { background: rgba(233,69,96,0.3); }
|
||||
.player-empty { font-size: 12px; color: #555; padding: 12px 0; text-align: center; }
|
||||
|
||||
/* Chat */
|
||||
.chat-messages {
|
||||
background: var(--bg-dark); border-radius: 8px;
|
||||
height: 160px; overflow-y: auto; padding: 8px 12px;
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.chat-msg {
|
||||
font-size: 12px; line-height: 1.4;
|
||||
}
|
||||
.chat-msg .chat-sender { color: var(--green); font-weight: 600; }
|
||||
.chat-msg .chat-text { color: var(--text-dim); }
|
||||
.chat-msg .chat-time { color: #555; font-size: 10px; margin-left: 6px; }
|
||||
.chat-msg.system { color: #888; font-style: italic; }
|
||||
.chat-input-row { display: flex; gap: 6px; }
|
||||
.chat-input-row .input { flex: 1; padding: 8px 10px; font-size: 12px; }
|
||||
.btn-sm { padding: 6px 14px !important; font-size: 12px !important; }
|
||||
|
||||
/* Connection status indicator */
|
||||
.sidebar-status {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 8px 16px; font-size: 11px;
|
||||
}
|
||||
.status-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
||||
.status-dot.offline { background: #555; }
|
||||
.status-dot.connecting { background: #ff9800; animation: pulse 1s infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
/* Room card clickable */
|
||||
.room-card { cursor: pointer; transition: border-color 0.2s, transform 0.1s; }
|
||||
.room-card:hover { border-color: var(--green); transform: translateY(-1px); }
|
||||
|
||||
/* Utility */
|
||||
.hidden { display: none !important; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user