289 lines
10 KiB
HTML
289 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>脚本管理平台</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', sans-serif;
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
}
|
|
.main-container {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr;
|
|
gap: 15px;
|
|
height: calc(100vh - 40px);
|
|
}
|
|
#script-list-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
overflow-y: auto;
|
|
}
|
|
#output-area {
|
|
background: #000;
|
|
color: #0f0;
|
|
font-family: 'Consolas', monospace;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
overflow-y: auto;
|
|
height: calc(100% - 220px);
|
|
}
|
|
#config-panel {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 15px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.script-item {
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
border-left: 3px solid transparent;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
cursor: pointer;
|
|
}
|
|
.script-item:hover {
|
|
background: #e9ecef;
|
|
}
|
|
.script-item.active {
|
|
border-left-color: #0d6efd;
|
|
background: #e9ecef;
|
|
}
|
|
.status-indicator {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
.status-running { background: #198754; }
|
|
.status-stopped { background: #dc3545; }
|
|
.form-control, .form-select {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h4 class="mb-3">脚本管理平台</h4>
|
|
|
|
<div class="main-container">
|
|
<!-- 左侧脚本列表 -->
|
|
<div id="script-list-panel">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5>脚本列表</h5>
|
|
<button class="btn btn-sm btn-outline-secondary" onclick="loadScripts()">
|
|
<i class="bi bi-arrow-clockwise"></i> 刷新
|
|
</button>
|
|
</div>
|
|
<div id="script-list"></div>
|
|
</div>
|
|
|
|
<!-- 右侧主区域 -->
|
|
<div>
|
|
<!-- 输出控制台 -->
|
|
<div id="output-area"></div>
|
|
|
|
<!-- 配置面板 -->
|
|
<div id="config-panel">
|
|
<h5>脚本配置</h5>
|
|
<form id="config-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">选择脚本</label>
|
|
<select class="form-select" id="config-script" required>
|
|
<option value="">请选择脚本...</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label">运行模式</label>
|
|
<select class="form-select" id="config-mode">
|
|
<option value="long-running">长期运行</option>
|
|
<option value="interval">定时执行</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="interval-config" style="display: none;">
|
|
<label class="form-label">执行周期</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="config-interval" value="1" min="1">
|
|
<select class="form-select" id="config-unit">
|
|
<option value="minutes">分钟</option>
|
|
<option value="hours">小时</option>
|
|
<option value="days">天</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="bi bi-save"></i> 保存配置
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
let currentScript = null;
|
|
let allScripts = [];
|
|
|
|
// 加载脚本列表
|
|
function loadScripts() {
|
|
$.get('/api/scripts', function(files) {
|
|
allScripts = files;
|
|
renderScriptList();
|
|
|
|
const select = $('#config-script');
|
|
select.empty().append('<option value="">请选择脚本...</option>');
|
|
files.forEach(f => select.append(`<option value="${f}">${f}</option>`));
|
|
|
|
if (currentScript) {
|
|
select.val(currentScript);
|
|
loadConfig(currentScript);
|
|
}
|
|
});
|
|
}
|
|
|
|
// 渲染脚本列表
|
|
function renderScriptList() {
|
|
const container = $('#script-list').empty();
|
|
|
|
allScripts.forEach(scriptName => {
|
|
$.get(`/api/status/${encodeURIComponent(scriptName)}`, function(status) {
|
|
const isRunning = status.running;
|
|
const isActive = currentScript === scriptName;
|
|
|
|
const item = $(`
|
|
<div class="script-item ${isActive ? 'active' : ''}" onclick="selectScript('${scriptName}')">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="status-indicator ${isRunning ? 'status-running' : 'status-stopped'}"></span>
|
|
<strong>${scriptName}</strong>
|
|
</div>
|
|
<button class="btn btn-sm ${isRunning ? 'btn-danger' : 'btn-success'}"
|
|
onclick="event.stopPropagation(); ${isRunning ? `stopScript('${scriptName}')` : `startScript('${scriptName}')`}">
|
|
${isRunning ? '<i class="bi bi-stop-fill"></i>' : '<i class="bi bi-play-fill"></i>'}
|
|
${isRunning ? '停止' : '启动'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
container.append(item);
|
|
});
|
|
});
|
|
|
|
if (currentScript) updateOutput();
|
|
}
|
|
|
|
// 选择脚本
|
|
function selectScript(name) {
|
|
currentScript = name;
|
|
$('.script-item').removeClass('active');
|
|
$(`.script-item:contains('${name}')`).addClass('active');
|
|
$('#config-script').val(name);
|
|
loadConfig(name);
|
|
updateOutput();
|
|
}
|
|
|
|
// 加载配置
|
|
function loadConfig(scriptName) {
|
|
$.get('/api/config', function(configs) {
|
|
const config = configs[scriptName];
|
|
if (config) {
|
|
$('#config-mode').val(config.mode || 'long-running');
|
|
toggleInterval(config.mode);
|
|
if (config.mode === 'interval') {
|
|
$('#config-interval').val(config.interval || 1);
|
|
$('#config-unit').val(config.unit || 'hours');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 切换间隔配置显示
|
|
function toggleInterval(mode) {
|
|
$('#interval-config').toggle(mode === 'interval');
|
|
}
|
|
|
|
// 启动脚本
|
|
function startScript(name) {
|
|
$.get(`/api/start/${encodeURIComponent(name)}`, function(res) {
|
|
renderScriptList();
|
|
}).fail(function(xhr) {
|
|
alert('启动失败: ' + (xhr.responseJSON?.error || xhr.statusText));
|
|
});
|
|
}
|
|
|
|
// 停止脚本
|
|
function stopScript(name) {
|
|
$.get(`/api/stop/${encodeURIComponent(name)}`, function() {
|
|
renderScriptList();
|
|
});
|
|
}
|
|
|
|
// 更新输出
|
|
function updateOutput() {
|
|
if (!currentScript) return;
|
|
|
|
$.get(`/api/status/${encodeURIComponent(currentScript)}`, function(res) {
|
|
const output = $('#output-area').empty();
|
|
res.output.forEach(line => {
|
|
output.append($('<div>').text(line).addClass('output-line'));
|
|
});
|
|
output.scrollTop(output[0].scrollHeight);
|
|
});
|
|
}
|
|
|
|
// 保存配置
|
|
$('#config-form').submit(function(e) {
|
|
e.preventDefault();
|
|
const scriptName = $('#config-script').val();
|
|
if (!scriptName) return alert('请选择脚本');
|
|
|
|
const config = {
|
|
script: scriptName,
|
|
mode: $('#config-mode').val()
|
|
};
|
|
|
|
if (config.mode === 'interval') {
|
|
config.interval = $('#config-interval').val();
|
|
config.unit = $('#config-unit').val();
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/api/config',
|
|
method: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ [scriptName]: config })
|
|
}).done(function() {
|
|
alert('配置已保存');
|
|
renderScriptList();
|
|
}).fail(function(xhr) {
|
|
alert('保存失败: ' + (xhr.responseJSON?.error || xhr.statusText));
|
|
});
|
|
});
|
|
|
|
// 初始化
|
|
$(function() {
|
|
loadScripts();
|
|
$('#config-mode').change(function() {
|
|
toggleInterval($(this).val());
|
|
});
|
|
|
|
// 每2秒更新状态
|
|
setInterval(() => {
|
|
if (currentScript) updateOutput();
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |