mirror of
https://gitee.com/xiarenalofs/squad-rain-ops-mini.git
synced 2026-08-08 14:25:33 +08:00
659 lines
21 KiB
HTML
659 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RainOps Mini Squad 战术小队服务器管理面板</title>
|
|
<link rel="stylesheet" href="/lib/css/font-awesome.min.css">
|
|
<style>
|
|
:root {
|
|
/* Modern Palette */
|
|
--primary-color: #4361ee;
|
|
--secondary-color: #3f37c9;
|
|
--success-color: #4caf50;
|
|
--info-color: #00b4d8;
|
|
--warning-color: #f72585;
|
|
--danger-color: #f44336;
|
|
--bg-color: #f8f9fa;
|
|
--sidebar-bg: #ffffff;
|
|
--sidebar-width: 240px;
|
|
--sidebar-collapsed-width: 64px;
|
|
--text-primary: #2b2d42;
|
|
--text-secondary: #8d99ae;
|
|
--border-color: #edf2f4;
|
|
--hover-bg: #e8f0fe;
|
|
--active-bg: #d2e3fc;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-primary);
|
|
height: 100vh;
|
|
display: flex;
|
|
overflow: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background-color: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
z-index: 100;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.03);
|
|
transition: width 0.3s ease, transform 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar.collapsed {
|
|
width: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
.brand {
|
|
padding: 15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.brand-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: opacity 0.2s;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sidebar.collapsed .brand-content {
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar.collapsed .brand-text,
|
|
.sidebar.collapsed .brand-sub {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar.collapsed .brand-logo {
|
|
margin: 0;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: var(--primary-color);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2px 4px rgba(67, 97, 238, 0.3);
|
|
}
|
|
|
|
.brand-text {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toggle-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
font-size: 1rem;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggle-btn-desktop {
|
|
position: absolute;
|
|
right: -12px;
|
|
top: 18px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
z-index: 101;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.toggle-btn:hover {
|
|
background-color: var(--hover-bg);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Mobile Header / Toggle */
|
|
.mobile-header {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50px;
|
|
background: white;
|
|
border-bottom: 1px solid var(--border-color);
|
|
z-index: 90;
|
|
padding: 0 15px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-menu {
|
|
flex: 1;
|
|
padding: 10px 8px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
height: 40px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item {
|
|
justify-content: center;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item span:not(.nav-icon) {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar.collapsed .nav-item .nav-icon {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: var(--hover-bg);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background-color: var(--active-bg);
|
|
color: var(--secondary-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-icon {
|
|
font-size: 1.1rem;
|
|
width: 24px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-footer {
|
|
padding: 15px;
|
|
border-top: 1px solid var(--border-color);
|
|
font-size: 0.75rem;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar.collapsed .nav-footer {
|
|
display: none;
|
|
}
|
|
|
|
.nav-bottom {
|
|
padding: 8px;
|
|
border-top: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.nav-item-danger {
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
.nav-item-danger:hover {
|
|
background-color: #fff5f5;
|
|
color: var(--danger-color);
|
|
}
|
|
|
|
/* Main Content Area */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--bg-color);
|
|
position: relative;
|
|
width: 100%; /* Ensure it takes full width */
|
|
overflow: hidden;
|
|
}
|
|
|
|
iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
display: block;
|
|
}
|
|
|
|
/* Mobile Overlay */
|
|
.sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 95;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
/* Media Queries */
|
|
@media (max-width: 768px) {
|
|
.mobile-header {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
transform: translateX(-100%);
|
|
width: 260px !important; /* Always full width on mobile when open */
|
|
}
|
|
|
|
.sidebar.mobile-open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar-overlay.show {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
.main-content {
|
|
padding-top: 50px; /* Space for mobile header */
|
|
}
|
|
|
|
.toggle-btn-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 2000;
|
|
justify-content: center;
|
|
align-items: center;
|
|
backdrop-filter: blur(3px);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.show {
|
|
display: flex;
|
|
opacity: 1;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
padding: 40px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
|
text-align: center;
|
|
max-width: 400px;
|
|
width: 90%;
|
|
position: relative;
|
|
transform: translateY(20px);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.modal-overlay.show .modal-content {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 20px;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
color: #ccc;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.modal-close:hover {
|
|
color: #333;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.group-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: var(--primary-blue);
|
|
margin: 20px 0;
|
|
padding: 15px;
|
|
background: #f0f7ff;
|
|
border-radius: 12px;
|
|
user-select: all;
|
|
letter-spacing: 1px;
|
|
border: 1px solid #e0eaff;
|
|
}
|
|
|
|
.modal-footer {
|
|
margin-top: 20px;
|
|
color: #888;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Mobile Header -->
|
|
<div class="mobile-header">
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
<button class="toggle-btn" onclick="toggleMobileSidebar()">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<div style="font-weight: bold; font-size: 1.1rem;">RainOps Mini</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar Overlay -->
|
|
<div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleMobileSidebar()"></div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<button class="toggle-btn toggle-btn-desktop" onclick="toggleSidebar()">
|
|
<i class="fas fa-chevron-left" id="sidebar-toggle-icon"></i>
|
|
</button>
|
|
<div class="brand">
|
|
<div class="brand-content">
|
|
<div class="brand-logo">面</div>
|
|
<div>
|
|
<div class="brand-text">RainOps Mini</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-menu">
|
|
<div class="nav-item active" data-perm="dashboard" onclick="navigate('dashboard.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-tachometer-alt"></i></span>
|
|
<span>仪表盘</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="analytics" onclick="navigate('analytics.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-chart-line"></i></span>
|
|
<span>数据分析</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="history" onclick="navigate('match-history.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-history"></i></span>
|
|
<span>历史对局</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="players" onclick="navigate('players.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-id-card"></i></span>
|
|
<span>玩家库</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="points" onclick="navigate('points-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-coins"></i></span>
|
|
<span>积分管理</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="chat" onclick="navigate('chat-history.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-comments"></i></span>
|
|
<span>聊天消息</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="rcon" onclick="navigate('rcon-console.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-terminal"></i></span>
|
|
<span>RCON 控制台</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="logs" onclick="navigate('logs.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-file-alt"></i></span>
|
|
<span>日志查询</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="admins" onclick="navigate('admin-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-user-shield"></i></span>
|
|
<span>权限管理</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="vips" onclick="navigate('vip-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-crown"></i></span>
|
|
<span>会员管理</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="cdks" onclick="navigate('cdk-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-key"></i></span>
|
|
<span>CDK 管理</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="bans" onclick="navigate('ban-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-ban"></i></span>
|
|
<span>封禁管理</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="plugins" onclick="navigate('plugins.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-plug"></i></span>
|
|
<span>插件管理</span>
|
|
</div>
|
|
<div class="nav-item" onclick="navigate('frp-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-globe"></i></span>
|
|
<span>FRP 管理</span>
|
|
</div>
|
|
<div class="nav-item" data-perm="configs" onclick="navigate('config-editor.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-cog"></i></span>
|
|
<span>配置文件</span>
|
|
</div>
|
|
|
|
<div class="nav-item" data-perm="users" onclick="navigate('user-manager.html', this)">
|
|
<span class="nav-icon"><i class="fas fa-users"></i></span>
|
|
<span>子账户管理</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-bottom">
|
|
<div class="nav-item" onclick="window.open('help.html', '_blank')">
|
|
<span class="nav-icon"><i class="fas fa-book"></i></span>
|
|
<span>使用手册</span>
|
|
</div>
|
|
<div class="nav-item" onclick="showAboutModal()">
|
|
<span class="nav-icon"><i class="fas fa-info-circle"></i></span>
|
|
<span>关于</span>
|
|
</div>
|
|
<div class="nav-item nav-item-danger" onclick="logout()">
|
|
<span class="nav-icon"><i class="fas fa-sign-out-alt"></i></span>
|
|
<span>退出登录</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-footer">
|
|
© 2026 RainOps
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<iframe id="content-frame" src="dashboard.html" title="Main Content"></iframe>
|
|
</div>
|
|
|
|
<!-- About Modal -->
|
|
<div class="modal-overlay" id="about-modal" onclick="if(event.target === this) hideAboutModal()">
|
|
<div class="modal-content">
|
|
<span class="modal-close" onclick="hideAboutModal()">×</span>
|
|
<div class="modal-title">RainOps 交流群</div>
|
|
<div>欢迎加入我们的官方交流群</div>
|
|
<div class="group-number">732423368</div>
|
|
<div class="modal-footer">点击群号即可复制（仅部分浏览器支持）</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const icon = document.getElementById('sidebar-toggle-icon');
|
|
sidebar.classList.toggle('collapsed');
|
|
|
|
if (sidebar.classList.contains('collapsed')) {
|
|
icon.className = 'fas fa-chevron-right';
|
|
} else {
|
|
icon.className = 'fas fa-chevron-left';
|
|
}
|
|
}
|
|
|
|
function toggleMobileSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('sidebar-overlay');
|
|
sidebar.classList.toggle('mobile-open');
|
|
overlay.classList.toggle('show');
|
|
}
|
|
|
|
function navigate(url, element) {
|
|
// Update iframe src
|
|
document.getElementById('content-frame').src = url;
|
|
|
|
// Update active state
|
|
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
|
|
if (element) {
|
|
element.classList.add('active');
|
|
}
|
|
|
|
// Close mobile sidebar if open
|
|
if (window.innerWidth <= 768) {
|
|
document.getElementById('sidebar').classList.remove('mobile-open');
|
|
document.getElementById('sidebar-overlay').classList.remove('show');
|
|
}
|
|
}
|
|
|
|
// Modal Functions
|
|
function showAboutModal() {
|
|
document.getElementById('about-modal').classList.add('show');
|
|
}
|
|
|
|
function hideAboutModal() {
|
|
document.getElementById('about-modal').classList.remove('show');
|
|
}
|
|
function logout() {
|
|
// Clear local storage
|
|
localStorage.removeItem('permissions');
|
|
localStorage.removeItem('isSuperAdmin');
|
|
// Redirect to login (backend will clear cookie if we had a logout endpoint, but simply redirecting to login is fine as cookie will be overwritten on next login or expire)
|
|
// Ideally we should have a logout API
|
|
window.location.href = '/login.html';
|
|
}
|
|
|
|
// On Load: Check Permissions
|
|
window.onload = async function() {
|
|
try {
|
|
// Always fetch fresh permissions from backend
|
|
const res = await fetch('/api/auth/me');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
|
|
// Update localStorage
|
|
localStorage.setItem('permissions', JSON.stringify(data.permissions));
|
|
localStorage.setItem('isSuperAdmin', data.isSuperAdmin.toString());
|
|
localStorage.setItem('username', data.username);
|
|
|
|
const perms = data.permissions;
|
|
const isSuper = data.isSuperAdmin;
|
|
|
|
// Apply permissions to menu
|
|
document.querySelectorAll('.nav-item[data-perm]').forEach(el => {
|
|
const requiredPerm = el.getAttribute('data-perm');
|
|
|
|
if (!isSuper && !perms.includes('all') && !perms.includes(requiredPerm)) {
|
|
el.style.display = 'none';
|
|
} else {
|
|
el.style.display = 'flex';
|
|
}
|
|
});
|
|
} else if (res.status === 401) {
|
|
// Not logged in
|
|
window.location.href = '/login.html';
|
|
}
|
|
} catch (e) {
|
|
console.error("Error fetching permissions", e);
|
|
// Fallback to localStorage if API fails (network error)
|
|
const permsStr = localStorage.getItem('permissions');
|
|
if (permsStr) {
|
|
try {
|
|
const perms = JSON.parse(permsStr);
|
|
const isSuper = localStorage.getItem('isSuperAdmin') === 'true';
|
|
|
|
document.querySelectorAll('.nav-item[data-perm]').forEach(el => {
|
|
const requiredPerm = el.getAttribute('data-perm');
|
|
|
|
if (!isSuper && !perms.includes('all') && !perms.includes(requiredPerm)) {
|
|
el.style.display = 'none';
|
|
} else {
|
|
el.style.display = 'flex';
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.error("Error parsing permissions from storage", e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
|
|
|