bat_manage
This commit is contained in:
@@ -0,0 +1,289 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user