Files
ProxyAuto/templates/logs.html

93 lines
3.2 KiB
HTML

{% extends "base.html" %}
{% block title %}运行日志 - ProxyAuto Pro{% endblock %}
{% block content %}
<div class="page-header">
<h1>运行日志</h1>
</div>
<section class="section">
<div class="logs-toolbar">
<div class="form-group inline">
<label for="lines-count">显示最近</label>
<select id="lines-count" onchange="loadLogs()">
<option value="50">50 行</option>
<option value="100" selected>100 行</option>
<option value="200">200 行</option>
<option value="300">300 行</option>
<option value="500">500 行</option>
</select>
</div>
<button class="btn btn-secondary" onclick="loadLogs()">
<svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="23 4 23 10 17 10"/>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
</svg>
刷新日志
</button>
</div>
<div class="divider"></div>
<div id="logs-container">
<div class="loading-state" id="logs-loading">
<svg class="spinner large" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-linecap="round"/>
</svg>
<p>加载日志中...</p>
</div>
<div class="empty-state" id="logs-empty" style="display: none;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
</svg>
<h3>暂无日志</h3>
<p>系统首次运行后将生成日志</p>
</div>
<pre id="logs-content" class="logs-content" style="display: none;"></pre>
</div>
</section>
{% endblock %}
{% block scripts %}
<script>
async function loadLogs() {
const linesCount = document.getElementById('lines-count').value;
const loading = document.getElementById('logs-loading');
const empty = document.getElementById('logs-empty');
const content = document.getElementById('logs-content');
loading.style.display = 'flex';
empty.style.display = 'none';
content.style.display = 'none';
try {
const response = await fetch(`/api/logs?lines=${linesCount}`);
const result = await response.json();
loading.style.display = 'none';
if (result.ok) {
if (result.empty || !result.content) {
empty.style.display = 'flex';
} else {
content.textContent = result.content;
content.style.display = 'block';
// 滚动到底部
content.scrollTop = content.scrollHeight;
}
} else {
showToast('error', result.message);
}
} catch (error) {
loading.style.display = 'none';
showToast('error', `加载失败: ${error.message}`);
}
}
// 页面加载时自动加载日志
document.addEventListener('DOMContentLoaded', loadLogs);
</script>
{% endblock %}