lanhao
223761e717
- 新增用户认证系统（登录/登出/邀请码注册） - 新增管理后台（邀请码管理/用户管理/使用记录/用量统计） - 合成接口加登录验证，每次调用记录用户和稿件内容 - SQLite存储用户数据和使用日志 - 默认admin账号: simonkoson Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
314 lines
13 KiB
HTML
314 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>管理后台 - 军事科技AI配音</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="admin-container">
|
|
<header class="admin-header">
|
|
<h1>管理后台</h1>
|
|
<div class="admin-nav">
|
|
<a href="/" class="btn btn-secondary">返回配音</a>
|
|
<button id="logoutBtn" class="btn btn-secondary">退出登录</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tab 导航 -->
|
|
<div class="admin-tabs">
|
|
<button class="tab-btn active" data-tab="invites">邀请码管理</button>
|
|
<button class="tab-btn" data-tab="users">用户管理</button>
|
|
<button class="tab-btn" data-tab="logs">使用记录</button>
|
|
<button class="tab-btn" data-tab="stats">用量统计</button>
|
|
</div>
|
|
|
|
<!-- 邀请码管理 -->
|
|
<div class="tab-panel active" id="panel-invites">
|
|
<div class="panel-toolbar">
|
|
<h2>邀请码管理</h2>
|
|
<div class="invite-create">
|
|
<input type="text" id="editorNameInput" placeholder="编导姓名（如：张三）">
|
|
<button id="createInviteBtn" class="btn btn-primary">生成邀请码</button>
|
|
</div>
|
|
</div>
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>邀请码</th>
|
|
<th>对应编导</th>
|
|
<th>状态</th>
|
|
<th>注册用户名</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="inviteTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 用户管理 -->
|
|
<div class="tab-panel" id="panel-users">
|
|
<h2>用户管理</h2>
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>显示名</th>
|
|
<th>角色</th>
|
|
<th>状态</th>
|
|
<th>调用次数</th>
|
|
<th>总字数</th>
|
|
<th>注册时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="userTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 使用记录 -->
|
|
<div class="tab-panel" id="panel-logs">
|
|
<div class="panel-toolbar">
|
|
<h2>使用记录</h2>
|
|
<div class="log-filters">
|
|
<select id="logUserFilter"><option value="">全部用户</option></select>
|
|
<input type="date" id="logDateFrom">
|
|
<input type="date" id="logDateTo">
|
|
<button id="filterLogsBtn" class="btn btn-secondary">筛选</button>
|
|
</div>
|
|
</div>
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>用户</th>
|
|
<th>引擎</th>
|
|
<th>字数</th>
|
|
<th>稿件内容</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="logTableBody"></tbody>
|
|
</table>
|
|
<div class="pagination" id="logPagination"></div>
|
|
</div>
|
|
|
|
<!-- 用量统计 -->
|
|
<div class="tab-panel" id="panel-stats">
|
|
<h2>用量统计</h2>
|
|
<div class="stats-summary" id="statsSummary"></div>
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>用户</th>
|
|
<th>显示名</th>
|
|
<th>调用次数</th>
|
|
<th>总字数</th>
|
|
<th>最后使用</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="statsTableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentLogPage = 1;
|
|
|
|
// ===== 权限检查 =====
|
|
async function checkAdmin() {
|
|
try {
|
|
const res = await fetch('/api/me');
|
|
if (!res.ok) { window.location.href = '/login.html'; return false; }
|
|
const data = await res.json();
|
|
if (data.user.role !== 'admin') {
|
|
alert('仅管理员可访问');
|
|
window.location.href = '/';
|
|
return false;
|
|
}
|
|
return true;
|
|
} catch (e) {
|
|
window.location.href = '/login.html';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// ===== Tab 切换 =====
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.getElementById('panel-' + btn.dataset.tab).classList.add('active');
|
|
});
|
|
});
|
|
|
|
// ===== 邀请码 =====
|
|
async function loadInvites() {
|
|
const res = await fetch('/api/admin/invites');
|
|
const data = await res.json();
|
|
document.getElementById('inviteTableBody').innerHTML = data.invites.map(inv => `
|
|
<tr>
|
|
<td><code class="invite-code">${inv.code}</code></td>
|
|
<td>${inv.editor_name}</td>
|
|
<td>${inv.is_used
|
|
? '<span class="badge badge-used">已使用</span>'
|
|
: '<span class="badge badge-active">未使用</span>'}</td>
|
|
<td>${inv.used_by_username || '-'}</td>
|
|
<td>${inv.created_at}</td>
|
|
<td>${inv.is_used
|
|
? '-'
|
|
: `<button class="btn-sm btn-danger" onclick="deleteInvite(${inv.id})">删除</button>`}</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
document.getElementById('createInviteBtn').addEventListener('click', async () => {
|
|
const name = document.getElementById('editorNameInput').value.trim();
|
|
if (!name) { alert('请填写编导姓名'); return; }
|
|
const res = await fetch('/api/admin/invites', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ editor_name: name })
|
|
});
|
|
const data = await res.json();
|
|
if (data.success) {
|
|
alert(`邀请码已生成：${data.code}\n对应编导：${data.editor_name}\n\n请将此邀请码发给该编导`);
|
|
document.getElementById('editorNameInput').value = '';
|
|
loadInvites();
|
|
}
|
|
});
|
|
|
|
async function deleteInvite(id) {
|
|
if (!confirm('确认删除该邀请码？')) return;
|
|
await fetch(`/api/admin/invites/${id}`, { method: 'DELETE' });
|
|
loadInvites();
|
|
}
|
|
|
|
// ===== 用户管理 =====
|
|
async function loadUsers() {
|
|
const res = await fetch('/api/admin/users');
|
|
const data = await res.json();
|
|
|
|
// 填充日志筛选下拉框
|
|
const filterSelect = document.getElementById('logUserFilter');
|
|
filterSelect.innerHTML = '<option value="">全部用户</option>'
|
|
+ data.users.map(u => `<option value="${u.id}">${u.display_name}(${u.username})</option>`).join('');
|
|
|
|
document.getElementById('userTableBody').innerHTML = data.users.map(u => `
|
|
<tr>
|
|
<td>${u.username}</td>
|
|
<td>${u.display_name}</td>
|
|
<td>${u.role === 'admin' ? '管理员' : '编导'}</td>
|
|
<td>${u.is_active
|
|
? '<span class="badge badge-active">启用</span>'
|
|
: '<span class="badge badge-used">停用</span>'}</td>
|
|
<td>${u.usage_count}</td>
|
|
<td>${u.total_chars}</td>
|
|
<td>${u.created_at}</td>
|
|
<td>${u.role !== 'admin'
|
|
? `<button class="btn-sm ${u.is_active ? 'btn-danger' : 'btn-primary'}"
|
|
onclick="toggleUser(${u.id}, ${u.is_active ? 0 : 1})">
|
|
${u.is_active ? '停用' : '启用'}
|
|
</button>`
|
|
: '-'}</td>
|
|
</tr>
|
|
`).join('');
|
|
}
|
|
|
|
async function toggleUser(id, newStatus) {
|
|
const action = newStatus ? '启用' : '停用';
|
|
if (!confirm(`确认${action}该用户？`)) return;
|
|
await fetch(`/api/admin/users/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ is_active: newStatus })
|
|
});
|
|
loadUsers();
|
|
}
|
|
|
|
// ===== 使用记录 =====
|
|
async function loadLogs(page) {
|
|
page = page || 1;
|
|
currentLogPage = page;
|
|
const userId = document.getElementById('logUserFilter').value;
|
|
const dateFrom = document.getElementById('logDateFrom').value;
|
|
const dateTo = document.getElementById('logDateTo').value;
|
|
let url = `/api/admin/logs?page=${page}&per_page=50`;
|
|
if (userId) url += `&user_id=${userId}`;
|
|
if (dateFrom) url += `&date_from=${dateFrom}`;
|
|
if (dateTo) url += `&date_to=${dateTo}`;
|
|
|
|
const res = await fetch(url);
|
|
const data = await res.json();
|
|
document.getElementById('logTableBody').innerHTML = data.logs.map(log => `
|
|
<tr>
|
|
<td class="nowrap">${log.created_at}</td>
|
|
<td>${log.display_name}<br><small>${log.username}</small></td>
|
|
<td>${log.engine}</td>
|
|
<td>${log.text_length}</td>
|
|
<td class="text-cell">${escapeHtml(log.text_content)}</td>
|
|
</tr>
|
|
`).join('') || '<tr><td colspan="5" style="text-align:center;color:#999">暂无记录</td></tr>';
|
|
|
|
// 分页
|
|
const pag = document.getElementById('logPagination');
|
|
if (data.total_pages > 1) {
|
|
let html = '';
|
|
for (let i = 1; i <= data.total_pages; i++) {
|
|
html += `<button class="btn-sm ${i === page ? 'btn-primary' : ''}" onclick="loadLogs(${i})">${i}</button> `;
|
|
}
|
|
pag.innerHTML = html;
|
|
} else {
|
|
pag.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
document.getElementById('filterLogsBtn').addEventListener('click', () => loadLogs(1));
|
|
|
|
// ===== 用量统计 =====
|
|
async function loadStats() {
|
|
const res = await fetch('/api/admin/stats');
|
|
const data = await res.json();
|
|
document.getElementById('statsSummary').innerHTML = `
|
|
<div class="stat-card"><h3>${data.totals.total_calls}</h3><p>总调用次数</p></div>
|
|
<div class="stat-card"><h3>${data.totals.total_chars}</h3><p>总合成字数</p></div>
|
|
<div class="stat-card"><h3>${data.totals.active_users}</h3><p>使用人数</p></div>
|
|
`;
|
|
document.getElementById('statsTableBody').innerHTML = data.user_stats.map(s => `
|
|
<tr>
|
|
<td>${s.username}</td>
|
|
<td>${s.display_name}</td>
|
|
<td>${s.call_count}</td>
|
|
<td>${s.total_chars}</td>
|
|
<td>${s.last_used}</td>
|
|
</tr>
|
|
`).join('') || '<tr><td colspan="5" style="text-align:center;color:#999">暂无数据</td></tr>';
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// ===== 退出 =====
|
|
document.getElementById('logoutBtn').addEventListener('click', async () => {
|
|
await fetch('/api/logout', { method: 'POST' });
|
|
window.location.href = '/login.html';
|
|
});
|
|
|
|
// ===== 初始化 =====
|
|
checkAdmin().then(ok => {
|
|
if (ok) {
|
|
loadInvites();
|
|
loadUsers();
|
|
loadLogs();
|
|
loadStats();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|