98 lines
3.2 KiB
HTML
98 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>日志查询</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 16px; }
|
|
.row { margin-bottom: 10px; }
|
|
input { padding: 6px; margin-right: 6px; }
|
|
button { padding: 6px 12px; }
|
|
pre { background: #f5f5f5; padding: 12px; white-space: pre-wrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>日志查询</h2>
|
|
<div class="row">
|
|
<input id="token" placeholder="日志Token(可选)" />
|
|
<input id="keyword" placeholder="关键字" />
|
|
<input id="start" placeholder="开始时间(YYYY-MM-DDTHH:MM:SS)" />
|
|
<input id="end" placeholder="结束时间(YYYY-MM-DDTHH:MM:SS)" />
|
|
</div>
|
|
<div class="row">
|
|
<button id="moreBtn" onclick="loadMore()" disabled>显示更多</button>
|
|
</div>
|
|
<div class="row">
|
|
<pre id="result">等待查询...</pre>
|
|
</div>
|
|
<script>
|
|
let currentPage = 1;
|
|
const pageSize = 50;
|
|
let debounceTimer = null;
|
|
|
|
async function queryLogs() {
|
|
currentPage = 1;
|
|
await fetchLogs(true);
|
|
}
|
|
|
|
async function loadMore() {
|
|
currentPage += 1;
|
|
await fetchLogs(false);
|
|
}
|
|
|
|
async function fetchLogs(reset) {
|
|
const token = document.getElementById('token').value.trim();
|
|
const keyword = document.getElementById('keyword').value.trim();
|
|
const start = document.getElementById('start').value.trim();
|
|
const end = document.getElementById('end').value.trim();
|
|
const params = new URLSearchParams();
|
|
if (keyword) params.append('keyword', keyword);
|
|
if (start) params.append('start', start);
|
|
if (end) params.append('end', end);
|
|
params.append('page', String(currentPage));
|
|
params.append('size', String(pageSize));
|
|
if (token) params.append('token', token);
|
|
const res = await fetch('/logs/query?' + params.toString());
|
|
let data = {};
|
|
try {
|
|
data = await res.json();
|
|
} catch (e) {
|
|
data = {};
|
|
}
|
|
const text = (data.lines || []).join('\n');
|
|
const result = document.getElementById('result');
|
|
if (!res.ok) {
|
|
result.textContent = '查询失败：' + (data.detail || res.status);
|
|
} else if (reset) {
|
|
result.textContent = text || '暂无日志';
|
|
} else {
|
|
result.textContent = result.textContent + '\\n' + text;
|
|
}
|
|
const btn = document.getElementById('moreBtn');
|
|
btn.disabled = !data.has_more;
|
|
}
|
|
|
|
function bindAutoQuery() {
|
|
const inputs = ['token', 'keyword', 'start', 'end'];
|
|
inputs.forEach((id) => {
|
|
const el = document.getElementById(id);
|
|
el.addEventListener('input', () => {
|
|
if (debounceTimer) {
|
|
clearTimeout(debounceTimer);
|
|
}
|
|
debounceTimer = setTimeout(() => {
|
|
queryLogs();
|
|
}, 400);
|
|
});
|
|
});
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
bindAutoQuery();
|
|
queryLogs();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|