萝卜芽科技小站 - 控制�?/title> <link rel="icon" href="../萝卜芽科技小站.png" type="image/png"> <style> :root { --primary-color: #FF6B6B; --secondary-color: #4ECDC4; --bg-dark: #1a1a2e; --bg-card: #16213e; --bg-hover: #1f3460; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', monospace; background: var(--bg-dark); min-height: 100vh; color: #fff; line-height: 1.6; } .header { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 32px; height: 32px; border-radius: 6px; } .logo-text h1 { font-size: 24px; font-weight: 700; } .user-section { display: flex; align-items: center; gap: 15px; } .user-info { text-align: right; } .user-name { font-weight: 600; } .user-level { font-size: 12px; color: rgba(255,255,255,0.8); } .logout-btn { background: rgba(255,255,255,0.2); padding: 8px 20px; border-radius: 20px; text-decoration: none; color: white; font-size: 14px; transition: all 0.3s; } .logout-btn:hover { background: rgba(255,255,255,0.3); } .main-container { display: flex; min-height: calc(100vh - 70px); } .sidebar { width: 260px; background: var(--bg-card); padding: 20px 0; border-right: 1px solid rgba(255,255,255,0.05); } .sidebar-menu { list-style: none; } .sidebar-menu li { margin-bottom: 5px; } .sidebar-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 25px; color: #b0b0b0; text-decoration: none; font-size: 15px; transition: all 0.3s; border-left: 3px solid transparent; } .sidebar-menu a:hover { background: var(--bg-hover); color: white; } .sidebar-menu a.active { background: var(--bg-hover); color: var(--primary-color); border-left-color: var(--primary-color); } .sidebar-menu .icon { font-size: 18px; } .content { flex: 1; padding: 30px; overflow-y: auto; } .page-title { font-size: 24px; font-weight: 600; margin-bottom: 30px; color: white; } .card { background: var(--bg-card); border-radius: 12px; padding: 25px; margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.05); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.08); } .card-title { font-size: 18px; font-weight: 600; color: white; } .card-subtitle { font-size: 13px; color: #888; margin-top: 5px; } .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .stat-item { background: var(--bg-hover); padding: 20px; border-radius: 10px; text-align: center; } .stat-value { font-size: 32px; font-weight: 700; color: var(--secondary-color); margin-bottom: 5px; } .stat-label { font-size: 13px; color: #888; } .log-container { background: #0d0d1a; border-radius: 8px; padding: 20px; max-height: 400px; overflow-y: auto; font-family: 'Consolas', 'Monaco', monospace; font-size: 13px; line-height: 1.6; } .log-entry { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; gap: 15px; } .log-time { color: #666; min-width: 140px; } .log-user { color: var(--secondary-color); min-width: 100px; } .log-action { color: #aaa; } .log-type { padding: 2px 8px; border-radius: 4px; font-size: 11px; min-width: 60px; text-align: center; } .log-type.login { background: #2e7d32; color: white; } .log-type.logout { background: #c62828; color: white; } .log-type.action { background: #1565c0; color: white; } .log-type.system { background: #6a1b9a; color: white; } .code-section { background: #0d0d1a; border-radius: 8px; padding: 20px; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; word-break: break-all; margin-bottom: 20px; } .generate-btn { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: white; padding: 12px 30px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .generate-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,107,107,0.3); } .generate-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .info-box { background: rgba(255,193,7,0.1); border-left: 4px solid #ffc107; padding: 15px; border-radius: 0 8px 8px 0; color: #ffc107; font-size: 14px; } .footer { background: var(--bg-card); padding: 20px 30px; text-align: center; color: #666; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.05); } .beian-info a { color: #4da6ff; text-decoration: none; } .beian-info a:hover { text-decoration: underline; } .access-denied { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: #1a1a2e; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; color: #888; font-size: 14px; } .form-group select { width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: var(--bg-hover); color: white; font-size: 14px; } .form-group select option { background: #1f3460; color: white; } .invite-info { background: rgba(78, 205, 196, 0.1); border-left: 4px solid #4ECDC4; padding: 15px; border-radius: 0 8px 8px 0; color: #4ECDC4; font-size: 14px; margin-top: 15px; } @media screen and (max-width: 768px) { .main-container { flex-direction: column; } .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); } .sidebar-menu a { padding: 12px 20px; } .content { padding: 20px 15px; } .stats-row { grid-template-columns: repeat(2, 1fr); } .log-container { max-height: 300px; } } </style> </head> <body> <div id="main-content"> <div class="header"> <div class="logo"> <img src="../萝卜芽科技小站.png" class="logo-icon" alt="logo"> <div class="logo-text"> <h1>萝卜芽科技小站 - 控制�?/h1> </div> </div> <div class="user-section"> <div class="user-info"> <div class="user-name" id="currentUser">管理�?/div> <div class="user-level" id="currentLevel">萝卜管理�?/div> </div> <a href="../logout" class="logout-btn">退出登�?/a> </div> </div> <div class="main-container"> <div class="sidebar"> <ul class="sidebar-menu"> <li><a href="index.html" class="active"><span class="icon">📊</span> 控制台首�?/a></li> <li><a href="#logs" onclick="showTab('logs')"><span class="icon">📝</span> 系统日志</a></li> <li><a href="#special-login" onclick="showTab('special-login')"><span class="icon">🔑</span> 特殊登录</a></li> <li><a href="#invite" onclick="showTab('invite')"><span class="icon">📩</span> 邀请用�?/a></li> <li><a href="#server" onclick="showTab('server')"><span class="icon">🖥�?/span> 服务器状�?/a></li> <li><a href="#users" onclick="showTab('users')"><span class="icon">👥</span> 用户管理</a></li> <li><a href="../learning-cabin/index.html" target="_blank"><span class="icon">📚</span> 学习小屋</a></li> <li><a href="../" target="_blank"><span class="icon">🏠</span> 返回首页</a></li> </ul> </div> <div class="content"> <h1 class="page-title">欢迎来到控制�?/h1> <div class="stats-row"> <div class="stat-item"> <div class="stat-value" id="statOnline">--</div> <div class="stat-label">在线用户</div> </div> <div class="stat-item"> <div class="stat-value" id="statUptime">--</div> <div class="stat-label">运行时长</div> </div> <div class="stat-item"> <div class="stat-value" id="statCpu">--</div> <div class="stat-label">CPU使用�?/div> </div> <div class="stat-item"> <div class="stat-value" id="statMemory">--</div> <div class="stat-label">内存使用�?/div> </div> </div> <div class="card" id="logs-tab"> <div class="card-header"> <div> <div class="card-title">📝 系统操作日志</div> <div class="card-subtitle">实时记录所有用户操�?/div> </div> <button class="generate-btn" onclick="refreshLogs()">🔄 刷新日志</button> </div> <div class="log-container" id="logContainer"> <div class="log-entry"> <span class="log-time">加载�?..</span> <span class="log-user">-</span> <span class="log-action">正在获取日志数据...</span> </div> </div> </div> <div class="card" id="special-login-tab" style="display: none;"> <div class="card-header"> <div> <div class="card-title">🔑 特殊登录密钥</div> <div class="card-subtitle">生成一次性免登录密钥，有效期1小时</div> </div> </div> <div class="info-box"> <strong>⚠️ 安全提示�?/strong>此密钥仅供管理员使用，请妥善保管，切勿泄露给他人�? </div> <div style="margin-top: 20px;"> <button class="generate-btn" onclick="generateKey()">🎲 生成新密�?/button> </div> <div id="keyResult" style="display: none; margin-top: 20px;"> <div style="margin-bottom: 10px; font-size: 14px; color: #888;">您的登录密钥�?/div> <div class="code-section" id="keyDisplay">-----</div> <div style="margin-top: 15px; font-size: 13px; color: #888;"> <strong>有效期：</strong>1小时�?span id="keyExpire">-</span>�? </div> <div style="margin-top: 10px; font-size: 13px; color: #888;"> <strong>使用方法�?/strong>登录页面 �?选择密钥登录 �?输入此密�? </div> </div> </div> <div class="card" id="invite-tab" style="display: none;"> <div class="card-header"> <div> <div class="card-title">📩 邀请用�?/div> <div class="card-subtitle">生成邀请链接，邀请新用户注册</div> </div> </div> <div class="form-group"> <label for="inviteLevel">选择邀请用户等级：</label> <select id="inviteLevel" disabled> <option value="">请选择</option> </select> </div> <div id="inviteQuotaInfo" class="invite-info" style="display: none;"> <strong>📊 本月邀请配额：</strong>已使�?<span id="usedQuota">0</span> / <span id="maxQuota">0</span> �? </div> <div style="margin-top: 20px;"> <button class="generate-btn" id="inviteBtn" disabled onclick="generateInviteLink()">🎲 生成邀请链�?/button> </div> <div id="inviteResult" style="display: none; margin-top: 20px;"> <div style="margin-bottom: 10px; font-size: 14px; color: #888;">邀请链接（有效�?2小时）：</div> <div class="code-section" id="inviteLinkDisplay">-----</div> <div style="margin-top: 15px; font-size: 13px; color: #888;"> <strong>使用方法�?/strong>将此链接分享给被邀请用户，用户打开链接后可注册为指定等�? </div> </div> </div> <div class="card" id="server-tab" style="display: none;"> <div class="card-header"> <div class="card-title">🖥�?服务器状态监�?/div> </div> <div class="stats-row"> <div class="stat-item"> <div class="stat-value" id="serverCpu">--</div> <div class="stat-label">CPU使用�?/div> </div> <div class="stat-item"> <div class="stat-value" id="serverMemory">--</div> <div class="stat-label">内存使用�?/div> </div> <div class="stat-item"> <div class="stat-value" id="serverDisk">--</div> <div class="stat-label">磁盘使用�?/div> </div> <div class="stat-item"> <div class="stat-value" id="serverSpeed">--</div> <div class="stat-label">响应速度</div> </div> </div> </div> <div class="card" id="users-tab" style="display: none;"> <div class="card-header"> <div class="card-title">👥 用户管理</div> </div> <p style="color: #888;">用户管理功能开发中...</p> </div> </div> </div> <div class="footer"> <p>© 2024-2026 萝卜芽科技小站版权所�?/p> <div class="beian-info" style="margin-top: 10px;"> <a href="http://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">浙ICP�?026019837�?1</a> </div> </div> </div> <script> var currentTab = 'logs'; var currentUserLevel = ''; function init() { loadUserInfo(); } function loadUserInfo() { var xhr = new XMLHttpRequest(); xhr.open('GET', '../user', true); xhr.withCredentials = true; xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var user = JSON.parse(xhr.responseText); if (user.loggedIn) { currentUserLevel = user.level; document.getElementById('currentUser').innerHTML = user.username; document.getElementById('currentLevel').innerHTML = user.level; checkAccessPermission(); } else { showAccessDenied(); } } else { showAccessDenied(); } }; xhr.send(); } function checkAccessPermission() { var allowedLevels = ['萝卜管理�?, '萝卜超级管理�?]; if (!allowedLevels.includes(currentUserLevel)) { showAccessDenied(); return; } loadServerStats(); loadLogs(); loadInviteConfig(); setInterval(loadServerStats, 3000); } function showAccessDenied() { document.body.innerHTML = ` <div class="access-denied"> <div style="font-size: 6rem; margin-bottom: 20px;">🚫</div> <h1 style="color: #FF6B6B; font-size: 2rem; margin-bottom: 10px;">权限不足</h1> <p style="color: #888; margin-bottom: 30px;">您没有访问控制面板的权限</p> <p style="color: #666; font-size: 14px; text-align: center; max-width: 400px;"> 只有萝卜管理员和萝卜超级管理员可以访问控制面�?br> 其他等级用户请返回首页使用其他功�? </p> <a href="../" style="margin-top: 30px; padding: 12px 30px; background: linear-gradient(135deg, #FF6B6B, #4ECDC4); color: white; border-radius: 8px; text-decoration: none; font-weight: 600;"> 返回首页 </a> </div> `; } function loadServerStats() { document.getElementById('statOnline').innerHTML = '0'; document.getElementById('statUptime').innerHTML = '0�?0�?0�?0�?; document.getElementById('statCpu').innerHTML = '20%'; document.getElementById('statMemory').innerHTML = '50%'; document.getElementById('serverCpu').innerHTML = '20%'; document.getElementById('serverMemory').innerHTML = '50%'; document.getElementById('serverDisk').innerHTML = '45%'; document.getElementById('serverSpeed').innerHTML = '50ms'; } function loadLogs() { var xhr = new XMLHttpRequest(); xhr.open('POST', '../admin', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); if (result.success && result.data) { var html = ''; result.data.forEach(function(log) { var type = 'action'; if (log.loginStatus === 'SUCCESS') type = 'login'; else if (log.loginStatus === 'FAILED') type = 'logout'; html += '<div class="log-entry">' + '<span class="log-time">' + formatTimeStr(log.loginTime) + '</span>' + '<span class="log-user">' + (log.username || log.email) + '</span>' + '<span class="log-type ' + type + '">' + getTypeLabel(type) + '</span>' + '<span class="log-action">登录 ' + log.loginStatus.toLowerCase() + ' - ' + (log.deviceInfo || '未知设备') + '</span>' + '</div>'; }); document.getElementById('logContainer').innerHTML = html; } } }; xhr.send('action=getLogs'); } function loadInviteConfig() { var xhr = new XMLHttpRequest(); xhr.open('POST', '../admin', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); if (result.success && result.data) { var select = document.getElementById('inviteLevel'); select.innerHTML = ''; result.data.allowedLevels.forEach(function(level) { var option = document.createElement('option'); option.value = level; option.textContent = level; select.appendChild(option); }); document.getElementById('usedQuota').innerHTML = result.data.usedCount; document.getElementById('maxQuota').innerHTML = result.data.maxCount; document.getElementById('inviteQuotaInfo').style.display = 'block'; if (result.data.maxCount > result.data.usedCount) { select.disabled = false; document.getElementById('inviteBtn').disabled = false; } } } }; xhr.send('action=getInviteConfig'); } function generateInviteLink() { var level = document.getElementById('inviteLevel').value; if (!level) { alert('请选择邀请等�?); return; } var xhr = new XMLHttpRequest(); xhr.open('POST', '../admin', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); if (result.success) { document.getElementById('inviteLinkDisplay').innerHTML = result.link; document.getElementById('inviteResult').style.display = 'block'; loadInviteConfig(); } else { alert(result.message); } } }; xhr.send('action=generateLink&level=' + encodeURIComponent(level)); } function getTypeLabel(type) { var labels = { login: '登录', logout: '退�?, action: '操作', system: '系统' }; return labels[type] || type; } function formatTimeStr(timeStr) { if (!timeStr) return '-'; var date = new Date(timeStr); var pad = function(n) { return n < 10 ? '0' + n : n; }; return date.getFullYear() + '-' + pad(date.getMonth() + 1) + '-' + pad(date.getDate()) + ' ' + pad(date.getHours()) + ':' + pad(date.getMinutes()) + ':' + pad(date.getSeconds()); } function refreshLogs() { loadLogs(); } function generateKey() { var key = generateRandomKey(); var expireTime = new Date(Date.now() + 3600000); document.getElementById('keyDisplay').innerHTML = key; document.getElementById('keyExpire').innerHTML = formatTimeStr(expireTime.toISOString()); document.getElementById('keyResult').style.display = 'block'; var xhr = new XMLHttpRequest(); xhr.open('POST', '../generateKey', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('key=' + key); } function generateRandomKey() { var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; var key = ''; for (var i = 0; i < 8; i++) { key += chars.charAt(Math.floor(Math.random() * chars.length)); } return key; } function showTab(tab) { currentTab = tab; document.querySelectorAll('.sidebar-menu a').forEach(function(a) { a.classList.remove('active'); }); document.querySelectorAll('.card').forEach(function(card) { card.style.display = 'none'; }); document.getElementById(tab + '-tab').style.display = 'block'; if (tab === 'invite') { loadInviteConfig(); } } window.onload = init; </script> <script src="js/click-effect.js"></script> </body> </html>