first commit
This commit is contained in:
lihansani
153
templates/base.html
Normal file
153
templates/base.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}自动签名系统{% endblock %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
:root { --header-height: 56px; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; padding: 0; font-family: "Microsoft YaHei", "Segoe UI", sans-serif; background: #f0f2f5; overflow: hidden; height: 100vh; }
|
||||
|
||||
.app-header {
|
||||
height: var(--header-height);
|
||||
background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||
z-index: 100;
|
||||
}
|
||||
.app-header h1 { font-size: 18px; margin: 0; font-weight: 600; white-space: nowrap; }
|
||||
.app-header .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; display: inline-block; margin-left: 10px; }
|
||||
.app-header .nav-links { margin-left: auto; display: flex; gap: 4px; }
|
||||
.app-header .nav-links a {
|
||||
color: rgba(255,255,255,0.8); text-decoration: none; padding: 5px 12px;
|
||||
border-radius: 6px; font-size: 13px; transition: all 0.2s;
|
||||
}
|
||||
.app-header .nav-links a:hover, .app-header .nav-links a.active { background: rgba(255,255,255,0.15); color: #fff; }
|
||||
|
||||
.app-body {
|
||||
height: calc(100vh - var(--header-height));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||||
}
|
||||
.card-section h6 {
|
||||
font-size: 14px; font-weight: 600; color: #1a237e;
|
||||
margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e8eaf6;
|
||||
}
|
||||
|
||||
.form-label { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
|
||||
.form-control, .form-select { font-size: 13px; }
|
||||
.btn-primary { background: #1a237e; border-color: #1a237e; }
|
||||
.btn-primary:hover { background: #283593; border-color: #283593; }
|
||||
|
||||
.stamp-item {
|
||||
background: #f5f5f5; border: 1px solid #e0e0e0;
|
||||
border-radius: 6px; padding: 12px; margin-bottom: 8px;
|
||||
}
|
||||
.stamp-item .stamp-header {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.preview-container { display: flex; gap: 12px; align-items: flex-start; }
|
||||
.preview-box {
|
||||
border: 1px dashed #bdbdbd; border-radius: 6px; padding: 8px;
|
||||
text-align: center; min-height: 100px; min-width: 120px;
|
||||
background: repeating-conic-gradient(#f5f5f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;
|
||||
}
|
||||
.preview-box img { max-width: 200px; max-height: 150px; }
|
||||
.preview-box .label { font-size: 11px; color: #757575; margin-top: 4px; }
|
||||
|
||||
.highlight-error {
|
||||
animation: highlight-pulse 1.5s ease-in-out;
|
||||
border-color: #c62828 !important;
|
||||
box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.3) !important;
|
||||
}
|
||||
@keyframes highlight-pulse {
|
||||
0%, 100% { box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.3); }
|
||||
50% { box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.5); }
|
||||
}
|
||||
|
||||
.table { font-size: 13px; }
|
||||
.table th { font-weight: 600; background: #e8eaf6; color: #1a237e; }
|
||||
|
||||
.json-preview {
|
||||
background: #263238; color: #aed581; padding: 12px; border-radius: 6px;
|
||||
font-family: "Consolas", monospace; font-size: 12px;
|
||||
max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
|
||||
.log-toolbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 16px; background: #fff; border-bottom: 1px solid #e0e0e0; flex-shrink: 0;
|
||||
}
|
||||
.log-toolbar .btn { font-size: 12px; padding: 4px 10px; }
|
||||
.log-toolbar .form-select { font-size: 12px; padding: 4px 8px; width: auto; }
|
||||
.log-toolbar .form-control { font-size: 12px; padding: 4px 8px; }
|
||||
|
||||
.log-content {
|
||||
flex: 1; overflow-y: auto; padding: 8px 12px;
|
||||
font-family: "Consolas", "Courier New", monospace; font-size: 12px; line-height: 1.6;
|
||||
}
|
||||
.log-entry {
|
||||
padding: 2px 4px; border-radius: 2px; white-space: pre-wrap; word-break: break-all;
|
||||
}
|
||||
.log-entry:hover { background: #e3f2fd; cursor: pointer; }
|
||||
.log-entry.level-INFO { color: #333; }
|
||||
.log-entry.level-WARN { color: #e65100; }
|
||||
.log-entry.level-ERROR { color: #c62828; background: #ffebee; }
|
||||
.log-source-frontend { color: #757575; font-size: 11px; }
|
||||
.log-source-api { color: #1565c0; font-size: 11px; }
|
||||
.log-timestamp { color: #9e9e9e; font-size: 11px; }
|
||||
|
||||
.two-col { display: flex; gap: 16px; }
|
||||
.two-col .col-left { flex: 1; min-width: 0; }
|
||||
.two-col .col-right { flex: 1; min-width: 0; }
|
||||
|
||||
.pagination-area { display: flex; justify-content: center; padding: 8px 0; }
|
||||
</style>
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header class="app-header">
|
||||
<h1><i class="bi bi-pen-fill"></i> 自动签名系统</h1>
|
||||
<span class="status-dot" id="serviceStatus"></span>
|
||||
<nav class="nav-links">
|
||||
<a href="/" class="{{ 'active' if request.path == '/' else '' }}">签章</a>
|
||||
<a href="/db-manager" class="{{ 'active' if request.path == '/db-manager' else '' }}">数据库管理</a>
|
||||
<a href="/logs" class="{{ 'active' if request.path == '/logs' else '' }}">日志</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="app-body">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
276
templates/db_manager.html
Normal file
276
templates/db_manager.html
Normal file
@@ -0,0 +1,276 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}自动签名系统 - 数据库管理{% endblock %}
|
||||
{% block content %}
|
||||
<div class="main-content">
|
||||
<div class="two-col">
|
||||
<div class="col-left" style="max-width:360px;flex-shrink:0;">
|
||||
<div class="card-section">
|
||||
<h6><i class="bi bi-search"></i> 搜索</h6>
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control" type="text" id="searchKeyword" placeholder="人员ID或姓名">
|
||||
<button class="btn btn-primary" id="btnSearch"><i class="bi bi-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-section">
|
||||
<h6><i class="bi bi-plus-circle"></i> 新增记录</h6>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">人员ID</label>
|
||||
<input class="form-control form-control-sm" type="text" id="addUserId" placeholder="仅字母和数字">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">人员姓名</label>
|
||||
<input class="form-control form-control-sm" type="text" id="addUserName" placeholder="中文或英文">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">签章图片</label>
|
||||
<input class="form-control form-control-sm" type="file" id="addSignImage" accept="image/png,image/jpeg">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="addIsSignature">
|
||||
<label class="form-check-label" for="addIsSignature" style="font-size:12px;">手写签字(预览时执行黑白二值化)</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm w-100" id="btnAddRecord"><i class="bi bi-plus"></i> 新增</button>
|
||||
</div>
|
||||
|
||||
<div class="card-section">
|
||||
<h6><i class="bi bi-upload"></i> 批量导入</h6>
|
||||
<div class="mb-2">
|
||||
<input class="form-control form-control-sm" type="file" id="batchFiles" multiple accept="image/png,image/jpeg">
|
||||
<small class="text-muted">文件名自动作为人员姓名</small>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="batchAutoId">
|
||||
<label class="form-check-label" for="batchAutoId" style="font-size:12px;">自动生成ID</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<input class="form-control form-control-sm" type="text" id="batchIdPrefix" placeholder="ID前缀(默认USER)" value="USER">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="batchIsSignature">
|
||||
<label class="form-check-label" for="batchIsSignature" style="font-size:12px;">手写签字</label>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-success btn-sm w-100" id="btnBatchImport"><i class="bi bi-upload"></i> 批量导入</button>
|
||||
</div>
|
||||
|
||||
<div class="card-section" id="editSection" style="display:none;">
|
||||
<h6><i class="bi bi-pencil"></i> 编辑记录</h6>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">人员ID</label>
|
||||
<input class="form-control form-control-sm" type="text" id="editUserId" readonly>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">人员姓名</label>
|
||||
<input class="form-control form-control-sm" type="text" id="editUserName">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label">签章图片(留空不修改)</label>
|
||||
<input class="form-control form-control-sm" type="file" id="editSignImage" accept="image/png,image/jpeg">
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="editIsSignature">
|
||||
<label class="form-check-label" for="editIsSignature" style="font-size:12px;">手写签字</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary btn-sm" id="btnUpdateRecord"><i class="bi bi-check"></i> 保存</button>
|
||||
<button class="btn btn-outline-secondary btn-sm" id="btnCancelEdit"><i class="bi bi-x"></i> 取消</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-section" id="previewSection" style="display:none;">
|
||||
<h6><i class="bi bi-eye"></i> 图片预览</h6>
|
||||
<div class="preview-container">
|
||||
<div>
|
||||
<div class="preview-box"><img id="previewOriginal" src="" alt="原图"></div>
|
||||
<div class="label">原图</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="preview-box"><img id="previewProcessed" src="" alt="效果图"></div>
|
||||
<div class="label" id="previewLabel">抠图效果</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-right">
|
||||
<div class="card-section">
|
||||
<h6><i class="bi bi-table"></i> 签章数据</h6>
|
||||
<div id="dataTableArea"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
let currentPage = 1;
|
||||
const pageSize = 20;
|
||||
|
||||
function loadRecords(page) {
|
||||
currentPage = page || 1;
|
||||
const keyword = document.getElementById('searchKeyword').value;
|
||||
fetch(`/api/db/list?page=${currentPage}&page_size=${pageSize}&keyword=${encodeURIComponent(keyword)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
renderTable(data.data);
|
||||
} else {
|
||||
alert('加载列表失败: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(err => alert('请求失败: ' + err.message));
|
||||
}
|
||||
|
||||
function renderTable(pageData) {
|
||||
const area = document.getElementById('dataTableArea');
|
||||
const totalPages = Math.ceil(pageData.total / pageData.page_size);
|
||||
let html = `
|
||||
<table class="table table-hover table-sm">
|
||||
<thead>
|
||||
<tr><th>人员ID</th><th>人员姓名</th><th>图片属性</th><th>创建时间</th><th>操作</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
pageData.data.forEach(row => {
|
||||
const sigLabel = row.is_signature ? '<span class="badge bg-info">手写签字</span>' : '<span class="badge bg-secondary">普通签章</span>';
|
||||
html += `
|
||||
<tr>
|
||||
<td>${escapeHtml(row.user_id)}</td>
|
||||
<td>${escapeHtml(row.user_name)}</td>
|
||||
<td>${sigLabel}</td>
|
||||
<td>${row.create_time || '-'}</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-primary btn-sm" onclick="previewRecord('${escapeHtml(row.user_id)}')"><i class="bi bi-eye"></i></button>
|
||||
<button class="btn btn-outline-warning btn-sm" onclick="editRecord('${escapeHtml(row.user_id)}')"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-outline-danger btn-sm" onclick="deleteRecord('${escapeHtml(row.user_id)}')"><i class="bi bi-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
html += '</tbody></table>';
|
||||
|
||||
html += `<div class="pagination-area">`;
|
||||
if (currentPage > 1) html += `<button class="btn btn-sm btn-outline-primary" onclick="loadRecords(${currentPage - 1})">上一页</button>`;
|
||||
html += `<span style="padding:4px 12px;font-size:13px;">第 ${currentPage}/${totalPages} 页 (共${pageData.total}条)</span>`;
|
||||
if (currentPage < totalPages) html += `<button class="btn btn-sm btn-outline-primary" onclick="loadRecords(${currentPage + 1})">下一页</button>`;
|
||||
html += `</div>`;
|
||||
|
||||
area.innerHTML = html;
|
||||
}
|
||||
|
||||
function previewRecord(userId) {
|
||||
document.getElementById('previewSection').style.display = '';
|
||||
document.getElementById('previewOriginal').src = `/api/db/image/${encodeURIComponent(userId)}?t=${Date.now()}`;
|
||||
document.getElementById('previewProcessed').src = `/api/db/preview/${encodeURIComponent(userId)}?t=${Date.now()}`;
|
||||
}
|
||||
|
||||
function editRecord(userId) {
|
||||
fetch(`/api/db/get/${encodeURIComponent(userId)}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const row = data.data;
|
||||
document.getElementById('editUserId').value = row.user_id;
|
||||
document.getElementById('editUserName').value = row.user_name;
|
||||
document.getElementById('editIsSignature').checked = row.is_signature;
|
||||
document.getElementById('editSection').style.display = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function deleteRecord(userId) {
|
||||
if (!confirm(`确定删除人员 ${userId} 的记录?`)) return;
|
||||
fetch(`/api/db/delete/${encodeURIComponent(userId)}`, { method: 'DELETE' })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
loadRecords(currentPage);
|
||||
} else {
|
||||
alert('删除失败: ' + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btnSearch').addEventListener('click', () => loadRecords(1));
|
||||
document.getElementById('searchKeyword').addEventListener('keypress', e => { if (e.key === 'Enter') loadRecords(1); });
|
||||
|
||||
document.getElementById('btnAddRecord').addEventListener('click', function() {
|
||||
const formData = new FormData();
|
||||
formData.append('user_id', document.getElementById('addUserId').value);
|
||||
formData.append('user_name', document.getElementById('addUserName').value);
|
||||
formData.append('sign_image', document.getElementById('addSignImage').files[0]);
|
||||
formData.append('is_signature', document.getElementById('addIsSignature').checked ? '1' : '0');
|
||||
|
||||
fetch('/api/db/add', { method: 'POST', body: formData })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
document.getElementById('addUserId').value = '';
|
||||
document.getElementById('addUserName').value = '';
|
||||
document.getElementById('addSignImage').value = '';
|
||||
document.getElementById('addIsSignature').checked = false;
|
||||
loadRecords(1);
|
||||
} else {
|
||||
alert('新增失败: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(err => alert('请求失败: ' + err.message));
|
||||
});
|
||||
|
||||
document.getElementById('btnUpdateRecord').addEventListener('click', function() {
|
||||
const userId = document.getElementById('editUserId').value;
|
||||
const formData = new FormData();
|
||||
formData.append('user_name', document.getElementById('editUserName').value);
|
||||
formData.append('is_signature', document.getElementById('editIsSignature').checked ? '1' : '0');
|
||||
const imgFile = document.getElementById('editSignImage').files[0];
|
||||
if (imgFile) formData.append('sign_image', imgFile);
|
||||
|
||||
fetch(`/api/db/update/${encodeURIComponent(userId)}`, { method: 'PUT', body: formData })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
document.getElementById('editSection').style.display = 'none';
|
||||
loadRecords(currentPage);
|
||||
} else {
|
||||
alert('更新失败: ' + data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btnCancelEdit').addEventListener('click', function() {
|
||||
document.getElementById('editSection').style.display = 'none';
|
||||
});
|
||||
|
||||
document.getElementById('btnBatchImport').addEventListener('click', function() {
|
||||
const formData = new FormData();
|
||||
const files = document.getElementById('batchFiles').files;
|
||||
for (let f of files) formData.append('files', f);
|
||||
formData.append('auto_id', document.getElementById('batchAutoId').checked ? '1' : '0');
|
||||
formData.append('id_prefix', document.getElementById('batchIdPrefix').value || 'USER');
|
||||
formData.append('is_signature', document.getElementById('batchIsSignature').checked ? '1' : '0');
|
||||
|
||||
fetch('/api/db/batch_import', { method: 'POST', body: formData })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
const d = data.data;
|
||||
alert(`批量导入完成: 成功${d.success}条, 失败${d.fail}条`);
|
||||
loadRecords(1);
|
||||
} else {
|
||||
alert('批量导入失败: ' + data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
loadRecords(1);
|
||||
</script>
|
||||
{% endblock %}
|
||||
1552
templates/index.html
Normal file
1552
templates/index.html
Normal file
File diff suppressed because it is too large
Load Diff
123
templates/logs.html
Normal file
123
templates/logs.html
Normal file
@@ -0,0 +1,123 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}自动签名系统 - 日志{% endblock %}
|
||||
{% block content %}
|
||||
<div style="display:flex;flex-direction:column;height:100%;">
|
||||
<div class="log-toolbar">
|
||||
<span style="font-size:13px;font-weight:600;color:#1a237e;"><i class="bi bi-terminal"></i> 系统日志</span>
|
||||
<select class="form-select" id="logSourceFilter">
|
||||
<option value="all">全部来源</option>
|
||||
<option value="前端操作">前端操作</option>
|
||||
<option value="外部API">外部API</option>
|
||||
</select>
|
||||
<select class="form-select" id="logLevelFilter">
|
||||
<option value="all">全部级别</option>
|
||||
<option value="INFO">INFO</option>
|
||||
<option value="WARN">WARN</option>
|
||||
<option value="ERROR">ERROR</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" id="logKeyword" placeholder="关键字搜索" style="width:200px;">
|
||||
<div class="form-check form-check-inline ms-2">
|
||||
<input class="form-check-input" type="checkbox" id="autoScroll" checked>
|
||||
<label class="form-check-label" for="autoScroll" style="font-size:12px;">自动滚动</label>
|
||||
</div>
|
||||
<button class="btn btn-outline-secondary btn-sm" id="btnClearLog"><i class="bi bi-trash"></i> 清空</button>
|
||||
<button class="btn btn-outline-danger btn-sm" id="btnLocateError"><i class="bi bi-exclamation-triangle"></i> 定位异常</button>
|
||||
<span class="ms-auto" style="font-size:12px;color:#757575;" id="logCount">0 条</span>
|
||||
</div>
|
||||
<div class="log-content" id="logContent"></div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
(function() {
|
||||
const logContent = document.getElementById('logContent');
|
||||
const logSourceFilter = document.getElementById('logSourceFilter');
|
||||
const logLevelFilter = document.getElementById('logLevelFilter');
|
||||
const logKeyword = document.getElementById('logKeyword');
|
||||
const autoScroll = document.getElementById('autoScroll');
|
||||
const logCountEl = document.getElementById('logCount');
|
||||
let allLogs = [];
|
||||
let logId = 0;
|
||||
|
||||
function addLogEntry(level, source, message) {
|
||||
logId++;
|
||||
const entry = { id: logId, level, source, message, time: new Date() };
|
||||
allLogs.push(entry);
|
||||
renderEntry(entry);
|
||||
logCountEl.textContent = allLogs.length + ' 条';
|
||||
}
|
||||
|
||||
function renderEntry(entry) {
|
||||
if (!matchFilter(entry)) return;
|
||||
const div = document.createElement('div');
|
||||
div.className = `log-entry level-${entry.level}`;
|
||||
div.dataset.id = entry.id;
|
||||
div.dataset.level = entry.level;
|
||||
div.dataset.source = entry.source;
|
||||
|
||||
const sourceClass = entry.source === '外部API' ? 'log-source-api' : 'log-source-frontend';
|
||||
const timeStr = entry.time.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
|
||||
div.innerHTML = `<span class="log-timestamp">[${timeStr}]</span> <span class="${sourceClass}">[${entry.source}]</span> <span style="font-weight:600;">[${entry.level}]</span> ${escapeHtml(entry.message)}`;
|
||||
logContent.appendChild(div);
|
||||
|
||||
if (autoScroll.checked) {
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function matchFilter(entry) {
|
||||
const src = logSourceFilter.value;
|
||||
const lvl = logLevelFilter.value;
|
||||
const kw = logKeyword.value.trim().toLowerCase();
|
||||
if (src !== 'all' && entry.source !== src) return false;
|
||||
if (lvl !== 'all' && entry.level !== lvl) return false;
|
||||
if (kw && !entry.message.toLowerCase().includes(kw)) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function rerenderAll() {
|
||||
logContent.innerHTML = '';
|
||||
allLogs.forEach(entry => renderEntry(entry));
|
||||
}
|
||||
|
||||
logSourceFilter.addEventListener('change', rerenderAll);
|
||||
logLevelFilter.addEventListener('change', rerenderAll);
|
||||
logKeyword.addEventListener('input', rerenderAll);
|
||||
|
||||
document.getElementById('btnClearLog').addEventListener('click', function() {
|
||||
allLogs = [];
|
||||
logContent.innerHTML = '';
|
||||
logCountEl.textContent = '0 条';
|
||||
});
|
||||
|
||||
document.getElementById('btnLocateError').addEventListener('click', function() {
|
||||
const errorEntries = logContent.querySelectorAll('.level-ERROR');
|
||||
if (errorEntries.length > 0) {
|
||||
errorEntries.forEach(e => e.classList.remove('highlight-error'));
|
||||
const last = errorEntries[errorEntries.length - 1];
|
||||
last.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
last.classList.add('highlight-error');
|
||||
} else {
|
||||
alert('没有发现异常日志');
|
||||
}
|
||||
});
|
||||
|
||||
const evtSource = new EventSource('/api/logs/stream');
|
||||
evtSource.onmessage = function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
addLogEntry(data.level || 'INFO', data.source || '系统', data.message || '');
|
||||
} catch (e) {
|
||||
addLogEntry('INFO', '系统', event.data);
|
||||
}
|
||||
};
|
||||
evtSource.onerror = function() {
|
||||
addLogEntry('WARN', '系统', '日志流连接断开，5秒后重连...');
|
||||
};
|
||||
|
||||
addLogEntry('INFO', '系统', '日志页面已加载，正在监听系统日志...');
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
1192
templates/ui_prototype.html
Normal file
1192
templates/ui_prototype.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user