9649519745
Server: - 添加房间密码验证 POST /rooms/:id/join - 添加玩家踢出 POST /rooms/:id/kick/:playerId - 添加房间过期自动清理（30分钟无活动） - 添加流量统计 GET /traffic - 添加token认证中间件保护写操作API - 房间详情返回玩家列表 Client: - 添加设置持久化（electron-store） - 添加设置页面（玩家名、本地端口、自动重连、托盘最小化） - 添加系统托盘支持（最小化到托盘、右键菜单） - 添加最近连接服务器记录 - 连接成功自动保存服务器地址 - 加入房间自动填充默认端口
279 lines
11 KiB
HTML
279 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'">
|
||
<title>FunConnect</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- Title Bar -->
|
||
<div class="titlebar" id="titlebar">
|
||
<div class="titlebar-drag">
|
||
<span class="titlebar-icon">⛏</span>
|
||
<span class="titlebar-title">FunConnect</span>
|
||
</div>
|
||
<div class="titlebar-controls">
|
||
<button class="tb-btn" id="btn-min">─</button>
|
||
<button class="tb-btn" id="btn-max">□</button>
|
||
<button class="tb-btn tb-close" id="btn-close">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Container -->
|
||
<div class="app">
|
||
<!-- Sidebar -->
|
||
<nav class="sidebar">
|
||
<div class="sidebar-logo">
|
||
<div class="logo-icon">F</div>
|
||
<div class="logo-text">
|
||
<span class="logo-name">FunConnect</span>
|
||
<span class="logo-sub">MC联机客户端</span>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar-status" id="server-status">
|
||
<span class="status-dot offline"></span>
|
||
<span class="status-text">未连接</span>
|
||
</div>
|
||
<ul class="sidebar-nav">
|
||
<li class="nav-item active" data-page="connect">
|
||
<span class="nav-icon">🔗</span> 连接服务器
|
||
</li>
|
||
<li class="nav-item" data-page="rooms">
|
||
<span class="nav-icon">🎮</span> 房间列表
|
||
</li>
|
||
<li class="nav-item" data-page="host">
|
||
<span class="nav-icon">🏠</span> 创建房间
|
||
</li>
|
||
<li class="nav-item" data-page="join">
|
||
<span class="nav-icon">🚀</span> 加入房间
|
||
</li>
|
||
<li class="nav-item" data-page="settings">
|
||
<span class="nav-icon">⚙️</span> 设置
|
||
</li>
|
||
<li class="nav-item" data-page="about">
|
||
<span class="nav-icon">ℹ️</span> 关于
|
||
</li>
|
||
</ul>
|
||
<div class="sidebar-footer">v1.0.0</div>
|
||
</nav>
|
||
|
||
<!-- Content -->
|
||
<main class="content">
|
||
<!-- Connect Page -->
|
||
<div class="page active" id="page-connect">
|
||
<h2 class="page-title">连接服务器</h2>
|
||
<p class="page-desc">输入FunMC中继服务器地址来开始联机</p>
|
||
<div class="card">
|
||
<div class="form-group">
|
||
<label>服务器地址</label>
|
||
<input type="text" id="server-url" class="input" placeholder="http://your-server:3000" value="http://localhost:3000">
|
||
<div id="recent-servers" class="recent-servers hidden"></div>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-connect">连接服务器</button>
|
||
<div class="msg" id="connect-msg"></div>
|
||
<div class="server-info hidden" id="server-info">
|
||
<h3>服务器信息</h3>
|
||
<div class="info-grid" id="server-info-grid"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rooms Page -->
|
||
<div class="page" id="page-rooms">
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">房间列表</h2>
|
||
<p class="page-desc">当前在线的联机房间</p>
|
||
</div>
|
||
<button class="btn btn-secondary" id="btn-refresh-rooms">刷新</button>
|
||
</div>
|
||
<div id="rooms-list" class="rooms-grid">
|
||
<div class="empty-state">
|
||
<span class="empty-icon">🎮</span>
|
||
<p>请先连接服务器</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Host Page -->
|
||
<div class="page" id="page-host">
|
||
<h2 class="page-title">创建房间</h2>
|
||
<p class="page-desc">将你的本地Minecraft服务器共享给好友</p>
|
||
<div class="card">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>房间名称</label>
|
||
<input type="text" id="host-name" class="input" placeholder="我的联机房间">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>本地MC端口</label>
|
||
<input type="number" id="host-port" class="input" value="25565">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>游戏版本</label>
|
||
<input type="text" id="host-version" class="input" value="1.20.4">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>版本类型</label>
|
||
<select id="host-edition" class="input">
|
||
<option value="java">Java版</option>
|
||
<option value="bedrock">基岩版</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>最大人数</label>
|
||
<input type="number" id="host-maxplayers" class="input" value="10" min="2" max="100">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>房间密码（可选）</label>
|
||
<input type="password" id="host-password" class="input" placeholder="留空则不设密码">
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-host">创建房间</button>
|
||
<div class="msg" id="host-msg"></div>
|
||
<div class="room-result hidden" id="host-result">
|
||
<div class="result-title">房间创建成功！</div>
|
||
<div class="result-room-id" id="host-room-id"></div>
|
||
<p class="result-hint">将此房间号发给好友，他们可以通过「加入房间」连接</p>
|
||
<button class="btn btn-secondary" id="btn-copy-room">复制房间号</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Join Page -->
|
||
<div class="page" id="page-join">
|
||
<h2 class="page-title">加入房间</h2>
|
||
<p class="page-desc">输入房间号加入好友的联机房间</p>
|
||
<div class="card">
|
||
<div class="form-group">
|
||
<label>房间号</label>
|
||
<input type="text" id="join-room-id" class="input" placeholder="输入房间号">
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>中继服务器地址</label>
|
||
<input type="text" id="join-host" class="input" placeholder="relay.funmc.cn" value="localhost">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>中继端口</label>
|
||
<input type="number" id="join-port" class="input" value="25565">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>本地监听端口</label>
|
||
<input type="number" id="join-local-port" class="input" value="25566">
|
||
<span class="form-hint">在Minecraft中添加服务器地址 127.0.0.1:25566 即可连接</span>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-join">加入房间</button>
|
||
<button class="btn btn-danger hidden" id="btn-leave">断开连接</button>
|
||
<div class="msg" id="join-msg"></div>
|
||
<div class="join-status hidden" id="join-status">
|
||
<div class="status-card connected">
|
||
<span class="status-emoji">✅</span>
|
||
<div>
|
||
<div class="status-title">已连接</div>
|
||
<div class="status-detail">在Minecraft中添加服务器: <strong>127.0.0.1:<span id="join-active-port">25566</span></strong></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Page -->
|
||
<div class="page" id="page-settings">
|
||
<h2 class="page-title">设置</h2>
|
||
<p class="page-desc">客户端偏好设置</p>
|
||
<div class="card">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>玩家名称</label>
|
||
<input type="text" id="settings-name" class="input" placeholder="你的游戏名">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>默认本地端口</label>
|
||
<input type="number" id="settings-port" class="input" value="25566">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="toggle-label">
|
||
<input type="checkbox" id="settings-autoreconnect" checked>
|
||
<span>自动重连</span>
|
||
</label>
|
||
<span class="form-hint">连接断开后自动尝试重新连接</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="toggle-label">
|
||
<input type="checkbox" id="settings-tray" checked>
|
||
<span>最小化到托盘</span>
|
||
</label>
|
||
<span class="form-hint">关闭窗口时最小化到系统托盘</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>最近连接的服务器</label>
|
||
<div id="settings-recent-list" class="recent-list"></div>
|
||
</div>
|
||
<button class="btn btn-primary" id="btn-save-settings">保存设置</button>
|
||
<div class="msg" id="settings-msg"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- About Page -->
|
||
<div class="page" id="page-about">
|
||
<h2 class="page-title">关于 FunConnect</h2>
|
||
<div class="card">
|
||
<div class="about-header">
|
||
<div class="about-logo">F</div>
|
||
<div>
|
||
<h3>FunConnect v1.0.0</h3>
|
||
<p>Minecraft 联机客户端</p>
|
||
</div>
|
||
</div>
|
||
<div class="about-section">
|
||
<h4>使用说明</h4>
|
||
<div class="steps">
|
||
<div class="step">
|
||
<span class="step-num">1</span>
|
||
<div>
|
||
<strong>连接服务器</strong>
|
||
<p>输入FunMC中继服务器地址并连接</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<span class="step-num">2</span>
|
||
<div>
|
||
<strong>创建或加入房间</strong>
|
||
<p>房主创建房间后分享房间号，玩家输入房间号加入</p>
|
||
</div>
|
||
</div>
|
||
<div class="step">
|
||
<span class="step-num">3</span>
|
||
<div>
|
||
<strong>开始游戏</strong>
|
||
<p>在Minecraft中添加服务器地址 127.0.0.1:端口 即可联机</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-section">
|
||
<h4>技术信息</h4>
|
||
<p>基于 Electron + Node.js TCP 中继技术</p>
|
||
<p>支持 Java版 和 基岩版 Minecraft</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|