678 lines
28 KiB
PHP
678 lines
28 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>MCSManager 实例管理</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
<script>
|
||
|
|
tailwind.config = {
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
primary: '#165DFF',
|
||
|
|
secondary: '#36D399',
|
||
|
|
danger: '#F87272',
|
||
|
|
warning: '#FBBD23',
|
||
|
|
dark: '#1E293B',
|
||
|
|
light: '#F8FAFC'
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
inter: ['Inter', 'system-ui', 'sans-serif'],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style type="text/tailwindcss">
|
||
|
|
@layer utilities {
|
||
|
|
.stat-card {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
.stat-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
@layer utilities {
|
||
|
|
.content-auto {
|
||
|
|
content-visibility: auto;
|
||
|
|
}
|
||
|
|
.server-card {
|
||
|
|
@apply bg-white rounded-lg shadow-md p-4 mb-4 transition-all duration-300 hover:shadow-lg;
|
||
|
|
}
|
||
|
|
.server-status {
|
||
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
@apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
|
||
|
|
}
|
||
|
|
.btn-secondary {
|
||
|
|
@apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50;
|
||
|
|
}
|
||
|
|
.btn-danger {
|
||
|
|
@apply bg-danger text-white hover:bg-danger/90 focus:ring-danger/50;
|
||
|
|
}
|
||
|
|
.btn-warning {
|
||
|
|
@apply bg-warning text-white hover:bg-warning/90 focus:ring-warning/50;
|
||
|
|
}
|
||
|
|
.btn-outline {
|
||
|
|
@apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary/50;
|
||
|
|
}
|
||
|
|
.badge {
|
||
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
||
|
|
}
|
||
|
|
.badge-online {
|
||
|
|
@apply bg-green-100 text-green-800;
|
||
|
|
}
|
||
|
|
.badge-offline {
|
||
|
|
@apply bg-gray-100 text-gray-800;
|
||
|
|
}
|
||
|
|
.badge-starting {
|
||
|
|
@apply bg-blue-100 text-blue-800;
|
||
|
|
}
|
||
|
|
.badge-stopping {
|
||
|
|
@apply bg-yellow-100 text-yellow-800;
|
||
|
|
}
|
||
|
|
.console-line {
|
||
|
|
@apply whitespace-pre font-mono text-sm;
|
||
|
|
}
|
||
|
|
.console-line-info {
|
||
|
|
@apply text-gray-300;
|
||
|
|
}
|
||
|
|
.console-line-warning {
|
||
|
|
@apply text-yellow-300;
|
||
|
|
}
|
||
|
|
.console-line-error {
|
||
|
|
@apply text-red-400;
|
||
|
|
}
|
||
|
|
.console-line-command {
|
||
|
|
@apply text-green-400;
|
||
|
|
}
|
||
|
|
.console-line-player {
|
||
|
|
@apply text-blue-300;
|
||
|
|
}
|
||
|
|
.loading-overlay {
|
||
|
|
@apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
|
||
|
|
}
|
||
|
|
.notification {
|
||
|
|
@apply fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-20 opacity-0;
|
||
|
|
}
|
||
|
|
.notification-visible {
|
||
|
|
@apply translate-y-0 opacity-100;
|
||
|
|
}
|
||
|
|
.notification-success {
|
||
|
|
@apply bg-green-500 text-white;
|
||
|
|
}
|
||
|
|
.notification-error {
|
||
|
|
@apply bg-red-500 text-white;
|
||
|
|
}
|
||
|
|
.notification-info {
|
||
|
|
@apply bg-blue-500 text-white;
|
||
|
|
}
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
|
||
|
|
<!-- 顶部导航栏 -->
|
||
|
|
<header class="bg-primary text-white shadow-md sticky top-0 z-50">
|
||
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<i class="fa fa-server text-xl"></i>
|
||
|
|
<h1 class="text-xl font-bold">CCS实例管理</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- 主内容区 -->
|
||
|
|
<main class="flex-grow container mx-auto px-4 py-6">
|
||
|
|
<!-- 实例信息头部 -->
|
||
|
|
<div class="mb-6">
|
||
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-6">
|
||
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
|
||
|
|
<div>
|
||
|
|
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800" id="instanceName">加载中...</h2>
|
||
|
|
<p class="text-gray-500 mt-1" id="instanceDescription">加载中...</p>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center mt-4 md:mt-0 space-x-3">
|
||
|
|
<span id="instanceStatus" class="px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700">
|
||
|
|
<i class="fa fa-circle-o-notch fa-spin mr-1"></i>加载中
|
||
|
|
</span>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button id="startBtn" class="px-4 py-2 bg-secondary text-white rounded-lg shadow hover:bg-secondary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
|
||
|
|
<i class="fa fa-play mr-1"></i>启动
|
||
|
|
</button>
|
||
|
|
<button id="stopBtn" class="px-4 py-2 bg-danger text-white rounded-lg shadow hover:bg-danger/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
|
||
|
|
<i class="fa fa-stop mr-1"></i>停止
|
||
|
|
</button>
|
||
|
|
<button id="restartBtn" class="px-4 py-2 bg-warning text-white rounded-lg shadow hover:bg-warning/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
|
||
|
|
<i class="fa fa-refresh mr-1"></i>重启
|
||
|
|
</button>
|
||
|
|
<button id="killBtn" class="px-4 py-2 bg-gray-700 text-white rounded-lg shadow hover:bg-gray-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
|
||
|
|
<i class="fa fa-power-off mr-1"></i>强制停止
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 基本信息卡片 -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
|
|
<div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500">CPU 使用率</p>
|
||
|
|
<p class="text-2xl font-bold mt-1" id="cpuUsage">--%</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||
|
|
<i class="fa fa-microchip text-primary text-xl"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div id="cpuUsageBar" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500">内存使用率</p>
|
||
|
|
<p class="text-2xl font-bold mt-1" id="memoryUsage">-- MB / -- MB</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||
|
|
<i class="fa fa-memory text-secondary text-xl"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div id="memoryUsageBar" class="bg-secondary h-2 rounded-full" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500">网络带宽</p>
|
||
|
|
<p class="text-2xl font-bold mt-1" id="networkUsage">-- KB/s</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
|
||
|
|
<i class="fa fa-wifi text-warning text-xl"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 w-full bg-gray-200 rounded-full h-2">
|
||
|
|
<div id="networkUsageBar" class="bg-warning h-2 rounded-full" style="width: 0%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p class="text-sm text-gray-500">在线时间</p>
|
||
|
|
<p class="text-2xl font-bold mt-1" id="uptime">--</p>
|
||
|
|
</div>
|
||
|
|
<div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
|
||
|
|
<i class="fa fa-clock-o text-primary text-xl"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-3 flex items-center text-sm text-gray-500">
|
||
|
|
<i class="fa fa-calendar-o mr-1"></i>
|
||
|
|
<span id="lastUpdate">最后更新: --</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-6">
|
||
|
|
<div class="flex justify-between items-center mb-4">
|
||
|
|
<h3 class="text-lg font-semibold">服务器控制台</h3>
|
||
|
|
<div class="flex space-x-2">
|
||
|
|
<button class="btn btn-outline text-sm" id="clearTerminalBtn">
|
||
|
|
<i class="fa fa-trash mr-1"></i> 清空
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-outline text-sm" id="action-refresh-console">
|
||
|
|
<i class="fa fa-refresh mr-1"></i> 刷新
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-outline text-sm" id="copyTerminalBtn">
|
||
|
|
<i class="fa fa-expand mr-1"></i> 复制
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 控制台输出 -->
|
||
|
|
<div class="bg-gray-900 text-gray-100 rounded-t-md p-3 h-64 overflow-y-auto" id="terminalOutput">
|
||
|
|
<pre class="font-mono text-sm">[CCSNetwork]: 正在获取终端
|
||
|
|
</div>
|
||
|
|
<div class="flex bg-gray-800 rounded-b-md w-full">
|
||
|
|
<div class="flex items-center px-3 text-gray-400">
|
||
|
|
<span class="font-mono">></span>
|
||
|
|
</div>
|
||
|
|
<input type="text" id="commandInput" placeholder="输入命令..." class="flex-grow bg-gray-800 text-gray-100 px-2 py-3 focus:outline-none font-mono w-full">
|
||
|
|
<button class="px-4 py-3 bg-primary text-white hover:bg-primary/90 transition-colors" id="sendCommandBtn">
|
||
|
|
<i class="fa fa-paper-plane"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<!-- 加载遮罩层 -->
|
||
|
|
<div class="loading-overlay hidden" id="loading-overlay">
|
||
|
|
<div class="bg-white p-6 rounded-lg shadow-xl flex flex-col items-center">
|
||
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
|
||
|
|
<p class="text-lg font-medium" id="loading-message">正在处理...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 通知组件 -->
|
||
|
|
<div class="notification notification-info" id="notification">
|
||
|
|
<p id="notification-message">这是一条通知消息</p>
|
||
|
|
</div>
|
||
|
|
<!-- 页脚 -->
|
||
|
|
<footer class="bg-gray-800 text-white py-6">
|
||
|
|
<div class="container mx-auto px-4">
|
||
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
|
|
<div class="mb-4 md:mb-0">
|
||
|
|
<div class="flex items-center space-x-2">
|
||
|
|
<i class="fa fa-server"></i>
|
||
|
|
<span class="font-bold">CCS实例管理</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-gray-400 text-sm mt-1">CCS实例管理面板</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
|
||
|
|
© 2025 圆周云境 | 版本 2.1.3
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
// DOM 元素
|
||
|
|
const instanceNameEl = document.getElementById('instanceName');
|
||
|
|
const instanceDescriptionEl = document.getElementById('instanceDescription');
|
||
|
|
const instanceStatusEl = document.getElementById('instanceStatus');
|
||
|
|
const cpuUsageEl = document.getElementById('cpuUsage');
|
||
|
|
const cpuUsageBarEl = document.getElementById('cpuUsageBar');
|
||
|
|
const memoryUsageEl = document.getElementById('memoryUsage');
|
||
|
|
const memoryUsageBarEl = document.getElementById('memoryUsageBar');
|
||
|
|
const networkUsageEl = document.getElementById('networkUsage');
|
||
|
|
const networkUsageBarEl = document.getElementById('networkUsageBar');
|
||
|
|
const uptimeEl = document.getElementById('uptime');
|
||
|
|
const lastUpdateEl = document.getElementById('lastUpdate');
|
||
|
|
const terminalOutputEl = document.getElementById('terminalOutput');
|
||
|
|
const commandInputEl = document.getElementById('commandInput');
|
||
|
|
const sendCommandBtn = document.getElementById('sendCommandBtn');
|
||
|
|
const clearTerminalBtn = document.getElementById('clearTerminalBtn');
|
||
|
|
const copyTerminalBtn = document.getElementById('copyTerminalBtn');
|
||
|
|
|
||
|
|
// 从URL获取参数
|
||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
||
|
|
const uuid = urlParams.get('uuid') || '5f8b4c2a-3d7e-4b1a-9c5d-6e7f8a9b0c1d';
|
||
|
|
const daemonId = urlParams.get('daemonId') || 'daemon-1';
|
||
|
|
|
||
|
|
// 按钮
|
||
|
|
const startBtn = document.getElementById('startBtn');
|
||
|
|
const stopBtn = document.getElementById('stopBtn');
|
||
|
|
const restartBtn = document.getElementById('restartBtn');
|
||
|
|
const killBtn = document.getElementById('killBtn');
|
||
|
|
|
||
|
|
// 标志变量，控制加载遮罩的显示
|
||
|
|
let isFirstLoad = true;
|
||
|
|
|
||
|
|
// 初始化
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
showLoading("正在加载服务器信息...");
|
||
|
|
|
||
|
|
// 加载服务器详情
|
||
|
|
loadServerDetails();
|
||
|
|
fetchConsoleLog();
|
||
|
|
|
||
|
|
// 添加事件监听器
|
||
|
|
startBtn.addEventListener('click', startServer);
|
||
|
|
stopBtn.addEventListener('click', stopServer);
|
||
|
|
restartBtn.addEventListener('click', restartServer);
|
||
|
|
killBtn.addEventListener('click', killServer);
|
||
|
|
sendCommandBtn.addEventListener('click', sendCommand);
|
||
|
|
commandInputEl.addEventListener('keypress', (e) => {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
sendCommand();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (clearTerminalBtn) {
|
||
|
|
clearTerminalBtn.addEventListener('click', clearTerminal);
|
||
|
|
}
|
||
|
|
if (copyTerminalBtn) {
|
||
|
|
copyTerminalBtn.addEventListener('click', copyTerminal);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 定时刷新服务器状态和控制台
|
||
|
|
setInterval(loadServerDetails, 5000);
|
||
|
|
setInterval(fetchConsoleLog, 2000);
|
||
|
|
});
|
||
|
|
|
||
|
|
function loadServerDetails() {
|
||
|
|
fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
|
||
|
|
.then(response => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`请求失败，状态码: ${response.status}`);
|
||
|
|
}
|
||
|
|
return response.json();
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
console.log('后端返回的数据:', data); // 打印返回的数据
|
||
|
|
if (!data || !data.data) {
|
||
|
|
throw new Error('无效的服务器数据');
|
||
|
|
}
|
||
|
|
|
||
|
|
const server = data.data;
|
||
|
|
|
||
|
|
// 更新基本信息
|
||
|
|
instanceNameEl.textContent = server.config.nickname || '未知服务器';
|
||
|
|
instanceDescriptionEl.textContent = server.config.description || '无描述';
|
||
|
|
|
||
|
|
instanceStatusEl.textContent = server.status === 1 ? '在线' : '离线';
|
||
|
|
instanceStatusEl.className = `px-3 py-1 rounded-full text-sm font-medium bg-${server.status === 1 ? 'success' : 'danger'}-500 text-white`;
|
||
|
|
|
||
|
|
cpuUsageEl.textContent = `${server.processInfo.cpu || 0}%`;
|
||
|
|
cpuUsageBarEl.style.width = `${server.processInfo.cpu || 0}%`;
|
||
|
|
|
||
|
|
const memoryUsed = server.processInfo.memory || 0;
|
||
|
|
const memoryTotal = 1024; // 假设总内存为1024MB
|
||
|
|
const memoryPercent = Math.round((memoryUsed / memoryTotal) * 100);
|
||
|
|
|
||
|
|
memoryUsageEl.textContent = `${memoryUsed} MB / ${memoryTotal} MB`;
|
||
|
|
memoryUsageBarEl.style.width = `${memoryPercent}%`;
|
||
|
|
|
||
|
|
const networkIn = (server.processInfo.networkIn || 0).toFixed(1);
|
||
|
|
const networkOut = (server.processInfo.networkOut || 0).toFixed(1);
|
||
|
|
const networkPercent = Math.round(((networkIn + networkOut) / 10) * 100); // 假设最大10MB/s
|
||
|
|
|
||
|
|
networkUsageEl.textContent = `${networkIn} MB/s 入 / ${networkOut} MB/s 出`;
|
||
|
|
networkUsageBarEl.style.width = `${Math.min(100, networkPercent)}%`;
|
||
|
|
|
||
|
|
uptimeEl.textContent = server.processInfo.elapsed || '未知运行时间';
|
||
|
|
lastUpdateEl.textContent = `最后更新: ${new Date().toLocaleString()}`;
|
||
|
|
|
||
|
|
if (isFirstLoad) {
|
||
|
|
hideLoading(); // 隐藏加载遮罩
|
||
|
|
isFirstLoad = false; // 设置标志变量为false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('获取服务器详情失败:', error);
|
||
|
|
showNotification('获取服务器详情失败', 'error');
|
||
|
|
if (isFirstLoad) {
|
||
|
|
hideLoading(); // 隐藏加载遮罩
|
||
|
|
isFirstLoad = false; // 设置标志变量为false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
let isFirstFetch = true; // 添加一个标志变量，用于控制第一次加载
|
||
|
|
|
||
|
|
async function fetchConsoleLog() {
|
||
|
|
try {
|
||
|
|
const response = await fetch(`proxy.php?path=protected_instance/outputlog&uuid=${uuid}&daemonId=${daemonId}&size=4096`);
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`请求失败，状态码: ${response.status}`);
|
||
|
|
}
|
||
|
|
const data = await response.json();
|
||
|
|
if (data && data.data) {
|
||
|
|
terminalOutputEl.innerHTML = '';
|
||
|
|
|
||
|
|
const lines = data.data.split('\n');
|
||
|
|
|
||
|
|
lines.forEach(line => {
|
||
|
|
const lineEl = document.createElement('div');
|
||
|
|
lineEl.className = 'console-line font-mono text-sm';
|
||
|
|
|
||
|
|
if (line.includes('[INFO]')) {
|
||
|
|
lineEl.classList.add('text-gray-700');
|
||
|
|
} else if (line.includes('[WARNING]')) {
|
||
|
|
lineEl.classList.add('text-yellow-600');
|
||
|
|
} else if (line.includes('[ERROR]')) {
|
||
|
|
lineEl.classList.add('text-red-600');
|
||
|
|
} else if (line.includes('issued server command')) {
|
||
|
|
lineEl.classList.add('text-blue-600');
|
||
|
|
} else if (line.includes('joined the game') || line.includes('left the game')) {
|
||
|
|
lineEl.classList.add('text-green-600');
|
||
|
|
}
|
||
|
|
|
||
|
|
lineEl.textContent = line;
|
||
|
|
terminalOutputEl.appendChild(lineEl);
|
||
|
|
});
|
||
|
|
|
||
|
|
// 只在第一次加载时滚动到最底部
|
||
|
|
if (isFirstFetch) {
|
||
|
|
terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
|
||
|
|
isFirstFetch = false; // 设置标志变量为false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取控制台日志失败:', error);
|
||
|
|
} finally {
|
||
|
|
if (isFirstLoad) {
|
||
|
|
hideLoading(); // 确保在所有情况下都隐藏加载遮罩
|
||
|
|
isFirstLoad = false; // 设置标志变量为false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startServer() {
|
||
|
|
showLoading("正在启动服务器...");
|
||
|
|
|
||
|
|
fetch(`proxy.php?path=protected_instance/open&uuid=${uuid}&daemonId=${daemonId}`, {
|
||
|
|
method: 'POST'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
// 获取并打印终端日志
|
||
|
|
fetchConsoleLog();
|
||
|
|
|
||
|
|
// 如果有终端输出，无论状态如何都打印
|
||
|
|
console.log('服务器启动响应:', data);
|
||
|
|
|
||
|
|
if (data.code === 500) {
|
||
|
|
// 处理服务器返回500错误的情况
|
||
|
|
console.error('服务器返回错误: ', data.message);
|
||
|
|
hideLoading();
|
||
|
|
}
|
||
|
|
|
||
|
|
showNotification('启动命令已发送', 'success');
|
||
|
|
const checkInterval = setInterval(() => {
|
||
|
|
fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(res => {
|
||
|
|
// 获取并打印终端日志
|
||
|
|
fetchConsoleLog();
|
||
|
|
terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
|
||
|
|
hideLoading();
|
||
|
|
console.log('服务器状态响应:', res);
|
||
|
|
|
||
|
|
if (res.data?.status !== 2) { // 不是启动中状态
|
||
|
|
clearInterval(checkInterval);
|
||
|
|
loadServerDetails();
|
||
|
|
hideLoading();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, 2000);
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
// 获取并打印终端日志
|
||
|
|
fetchConsoleLog();
|
||
|
|
terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
|
||
|
|
console.error('启动失败错误:', error);
|
||
|
|
showNotification(`启动失败: ${error.message}`, 'error');
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function stopServer() {
|
||
|
|
if (!confirm('确定要停止服务器吗？')) return;
|
||
|
|
|
||
|
|
showLoading("正在停止服务器...");
|
||
|
|
|
||
|
|
fetch(`proxy.php?path=protected_instance/stop&uuid=${uuid}&daemonId=${daemonId}`, {
|
||
|
|
method: 'POST'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.code === 200) {
|
||
|
|
showNotification('服务器停止请求已发送', 'success');
|
||
|
|
setTimeout(loadServerDetails, 2000); // 延迟刷新状态
|
||
|
|
fetchConsoleLog();
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || '停止失败');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('停止服务器失败:', error);
|
||
|
|
showNotification('停止服务器失败: ' + error.message, 'error');
|
||
|
|
fetchConsoleLog();
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function restartServer() {
|
||
|
|
if (!confirm('确定要重启服务器吗？')) return;
|
||
|
|
|
||
|
|
showLoading("正在重启服务器...");
|
||
|
|
|
||
|
|
fetch(`proxy.php?path=protected_instance/restart&uuid=${uuid}&daemonId=${daemonId}`, {
|
||
|
|
method: 'POST'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.code === 200) {
|
||
|
|
showNotification('服务器重启请求已发送', 'success');
|
||
|
|
setTimeout(loadServerDetails, 2000); // 延迟刷新状态
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || '重启失败');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('重启服务器失败:', error);
|
||
|
|
showNotification('重启服务器失败: ' + error.message, 'error');
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function killServer() {
|
||
|
|
if (!confirm('确定要强制停止服务器吗？')) return;
|
||
|
|
|
||
|
|
showLoading("正在强制停止服务器...");
|
||
|
|
|
||
|
|
fetch(`proxy.php?path=protected_instance/kill&uuid=${uuid}&daemonId=${daemonId}`, {
|
||
|
|
method: 'POST'
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.code === 200) {
|
||
|
|
showNotification('服务器强制停止请求已发送', 'success');
|
||
|
|
setTimeout(loadServerDetails, 2000); // 延迟刷新状态
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || '强制停止失败');
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('强制停止服务器失败:', error);
|
||
|
|
showNotification('强制停止服务器失败: ' + error.message, 'error');
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendCommand() {
|
||
|
|
const command = commandInputEl.value.trim();
|
||
|
|
if (!command) return;
|
||
|
|
|
||
|
|
showLoading("正在发送命令...");
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('uuid', uuid);
|
||
|
|
formData.append('daemonId', daemonId);
|
||
|
|
formData.append('command', command);
|
||
|
|
fetch(`proxy.php?path=protected_instance/command&uuid=${uuid}&daemonId=${daemonId}&command=${command}`, {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
if (data.code === 200) {
|
||
|
|
commandInputEl.value = '';
|
||
|
|
showNotification('命令已发送', 'success');
|
||
|
|
fetchConsoleLog();terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
|
||
|
|
} else {
|
||
|
|
throw new Error(data.message || '命令发送失败');
|
||
|
|
fetchConsoleLog();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('发送命令失败:', error);
|
||
|
|
showNotification('错误: ' + error.message, 'error');
|
||
|
|
fetchConsoleLog();
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function clearTerminal() {
|
||
|
|
terminalOutputEl.innerHTML = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function copyTerminal() {
|
||
|
|
navigator.clipboard.writeText(terminalOutputEl.textContent)
|
||
|
|
.then(() => {
|
||
|
|
showNotification('终端内容已复制', 'success');
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
console.error('复制失败', err);
|
||
|
|
showNotification('复制失败', 'error');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showLoading(message) {
|
||
|
|
const loadingOverlay = document.getElementById('loading-overlay');
|
||
|
|
const loadingMessage = document.getElementById('loading-message');
|
||
|
|
|
||
|
|
if (loadingOverlay && loadingMessage) {
|
||
|
|
loadingMessage.textContent = message;
|
||
|
|
loadingOverlay.classList.remove('hidden'); // 显示遮罩
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideLoading() {
|
||
|
|
const loadingOverlay = document.getElementById('loading-overlay');
|
||
|
|
if (loadingOverlay) {
|
||
|
|
loadingOverlay.classList.add('hidden'); // 隐藏遮罩
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function showNotification(message, type = 'info') {
|
||
|
|
const notification = document.getElementById('notification');
|
||
|
|
const notificationMessage = document.getElementById('notification-message');
|
||
|
|
|
||
|
|
if (!notification || !notificationMessage) {
|
||
|
|
console.error('Notification elements not found');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置通知内容
|
||
|
|
notificationMessage.textContent = message;
|
||
|
|
|
||
|
|
// 设置通知类型
|
||
|
|
notification.classList.remove('notification-success', 'notification-error', 'notification-info');
|
||
|
|
notification.classList.add(`notification-${type}`);
|
||
|
|
|
||
|
|
// 显示通知
|
||
|
|
notification.classList.add('notification-visible');
|
||
|
|
|
||
|
|
// 3秒后隐藏通知
|
||
|
|
setTimeout(() => {
|
||
|
|
notification.classList.remove('notification-visible');
|
||
|
|
}, 3000);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|