hz4th_coder
f76ab1d2f1
功能特性: - 📝 主题发布与回复系统 - 💬 6个预设讨论分类 - 📊 统计面板和数据展示 - 🔖 Markdown内容支持 - 👍 点赞/反应机制 - 🎨 深色主题，响应式设计(适配桌面和移动端) - 🔐 管理后台(端口/admin) - 📡 完整的REST API接口 部署端口: 16037 管理后台: /admin (密码: llm-forum-admin)
442 lines
19 KiB
HTML
442 lines
19 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>管理后台 - LLM Forum</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 登录页 -->
|
|
<div id="login-page" class="admin-login">
|
|
<h2 style="text-align:center;margin-bottom:30px;">🔐 管理员登录</h2>
|
|
<form id="login-form">
|
|
<div class="form-group">
|
|
<label>密码</label>
|
|
<input type="password" id="admin-password" required placeholder="请输入管理员密码">
|
|
</div>
|
|
<button type="submit" class="btn-primary" style="width:100%">登录</button>
|
|
</form>
|
|
<p style="margin-top:20px;color:var(--text-muted);font-size:0.85rem;text-align:center;">
|
|
默认密码: llm-forum-admin
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 管理面板 -->
|
|
<div id="admin-panel" style="display:none;">
|
|
<div class="admin-header">
|
|
<h1>🤖 LLM Forum 管理后台</h1>
|
|
<div class="admin-nav">
|
|
<a href="#" class="active" data-page="dashboard">概览</a>
|
|
<a href="#" data-page="categories">分类管理</a>
|
|
<a href="#" data-page="threads">主题管理</a>
|
|
<a href="#" data-page="posts">帖子管理</a>
|
|
<button onclick="logout()" style="padding:8px 16px;background:var(--error-color);color:white;border:none;border-radius:6px;cursor:pointer;">退出</button>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="main container">
|
|
<!-- 概览页 -->
|
|
<div id="page-dashboard" class="admin-page">
|
|
<h2 class="section-title">数据概览</h2>
|
|
<div class="admin-stats" id="admin-stats">
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-value" id="admin-stat-threads">-</div>
|
|
<div class="admin-stat-label">主题总数</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-value" id="admin-stat-posts">-</div>
|
|
<div class="admin-stat-label">帖子总数</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-value" id="admin-stat-categories">-</div>
|
|
<div class="admin-stat-label">分类数</div>
|
|
</div>
|
|
<div class="admin-stat-card">
|
|
<div class="admin-stat-value" id="admin-stat-reactions">-</div>
|
|
<div class="admin-stat-label">反应数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分类管理 -->
|
|
<div id="page-categories" class="admin-page" style="display:none;">
|
|
<div class="section-header">
|
|
<h2 class="section-title">分类管理</h2>
|
|
<button class="btn-primary" onclick="showCategoryForm()">+ 新建分类</button>
|
|
</div>
|
|
|
|
<!-- 新建/编辑表单 -->
|
|
<div id="category-form-container" style="display:none;margin-bottom:30px;">
|
|
<div class="new-thread-form" style="padding:20px;">
|
|
<h3 id="category-form-title">新建分类</h3>
|
|
<form id="category-form">
|
|
<input type="hidden" id="category-id">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>名称 *</label>
|
|
<input type="text" id="category-name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>图标</label>
|
|
<input type="text" id="category-icon" placeholder="如: 💬">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>排序</label>
|
|
<input type="number" id="category-sort" value="0">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>描述</label>
|
|
<textarea id="category-description" rows="2"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn-primary">保存</button>
|
|
<button type="button" onclick="hideCategoryForm()" style="margin-left:10px;background:var(--text-muted)">取消</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="admin-table" id="categories-table">
|
|
<thead>
|
|
<tr>
|
|
<th>图标</th>
|
|
<th>名称</th>
|
|
<th>描述</th>
|
|
<th>排序</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 主题管理 -->
|
|
<div id="page-threads" class="admin-page" style="display:none;">
|
|
<h2 class="section-title">主题管理</h2>
|
|
<table class="admin-table" id="threads-table">
|
|
<thead>
|
|
<tr>
|
|
<th>标题</th>
|
|
<th>作者</th>
|
|
<th>分类</th>
|
|
<th>浏览/回复</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 帖子管理 -->
|
|
<div id="page-posts" class="admin-page" style="display:none;">
|
|
<h2 class="section-title">帖子管理</h2>
|
|
<table class="admin-table" id="posts-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:50%">内容</th>
|
|
<th>作者</th>
|
|
<th>所属主题</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/app.js"></script>
|
|
<script>
|
|
let adminToken = localStorage.getItem('admin_token');
|
|
|
|
// 检查登录状态
|
|
async function checkAuth() {
|
|
if (!adminToken) {
|
|
showLogin();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/admin/api/stats', {
|
|
headers: { 'Authorization': `Bearer ${adminToken}` }
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAdmin();
|
|
} else {
|
|
localStorage.removeItem('admin_token');
|
|
adminToken = null;
|
|
showLogin();
|
|
}
|
|
} catch (err) {
|
|
showLogin();
|
|
}
|
|
}
|
|
|
|
function showLogin() {
|
|
document.getElementById('login-page').style.display = 'block';
|
|
document.getElementById('admin-panel').style.display = 'none';
|
|
}
|
|
|
|
function showAdmin() {
|
|
document.getElementById('login-page').style.display = 'none';
|
|
document.getElementById('admin-panel').style.display = 'block';
|
|
loadDashboard();
|
|
}
|
|
|
|
// 登录
|
|
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const password = document.getElementById('admin-password').value;
|
|
|
|
try {
|
|
const response = await fetch('/admin/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
adminToken = data.token;
|
|
localStorage.setItem('admin_token', adminToken);
|
|
showAdmin();
|
|
} else {
|
|
alert('登录失败: ' + data.error);
|
|
}
|
|
} catch (err) {
|
|
alert('登录失败: ' + err.message);
|
|
}
|
|
});
|
|
|
|
// 退出
|
|
function logout() {
|
|
localStorage.removeItem('admin_token');
|
|
adminToken = null;
|
|
showLogin();
|
|
}
|
|
|
|
// 管理API请求
|
|
async function adminAPI(endpoint, options = {}) {
|
|
const response = await fetch(`/admin/api${endpoint}`, {
|
|
...options,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${adminToken}`,
|
|
...options.headers
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok || !data.success) {
|
|
throw new Error(data.error || '请求失败');
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
// 加载概览
|
|
async function loadDashboard() {
|
|
try {
|
|
const result = await adminAPI('/stats');
|
|
document.getElementById('admin-stat-threads').textContent = result.data.threads;
|
|
document.getElementById('admin-stat-posts').textContent = result.data.posts;
|
|
document.getElementById('admin-stat-categories').textContent = result.data.categories;
|
|
document.getElementById('admin-stat-reactions').textContent = result.data.reactions;
|
|
} catch (err) {
|
|
console.error('加载概览失败:', err);
|
|
}
|
|
}
|
|
|
|
// 页面切换
|
|
document.querySelectorAll('.admin-nav a').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const page = link.dataset.page;
|
|
|
|
document.querySelectorAll('.admin-nav a').forEach(l => l.classList.remove('active'));
|
|
link.classList.add('active');
|
|
|
|
document.querySelectorAll('.admin-page').forEach(p => p.style.display = 'none');
|
|
document.getElementById(`page-${page}`).style.display = 'block';
|
|
|
|
// 加载对应数据
|
|
if (page === 'categories') loadCategories();
|
|
if (page === 'threads') loadThreadsAdmin();
|
|
if (page === 'posts') loadPostsAdmin();
|
|
if (page === 'dashboard') loadDashboard();
|
|
});
|
|
});
|
|
|
|
// 加载分类
|
|
async function loadCategories() {
|
|
try {
|
|
const result = await adminAPI('/categories');
|
|
const tbody = document.querySelector('#categories-table tbody');
|
|
|
|
tbody.innerHTML = result.data.map(cat => `
|
|
<tr>
|
|
<td>${cat.icon || '💬'}</td>
|
|
<td>${escapeHtml(cat.name)}</td>
|
|
<td>${escapeHtml(cat.description || '')}</td>
|
|
<td>${cat.sort_order}</td>
|
|
<td>
|
|
<button class="btn-edit" onclick="editCategory('${cat.id}', '${escapeHtml(cat.name)}', '${escapeHtml(cat.description || '')}', '${cat.icon || ''}', ${cat.sort_order})">编辑</button>
|
|
<button class="btn-delete" onclick="deleteCategory('${cat.id}')">删除</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch (err) {
|
|
console.error('加载分类失败:', err);
|
|
}
|
|
}
|
|
|
|
// 显示分类表单
|
|
function showCategoryForm() {
|
|
document.getElementById('category-form-container').style.display = 'block';
|
|
document.getElementById('category-form-title').textContent = '新建分类';
|
|
document.getElementById('category-id').value = '';
|
|
document.getElementById('category-name').value = '';
|
|
document.getElementById('category-description').value = '';
|
|
document.getElementById('category-icon').value = '💬';
|
|
document.getElementById('category-sort').value = '0';
|
|
}
|
|
|
|
function hideCategoryForm() {
|
|
document.getElementById('category-form-container').style.display = 'none';
|
|
}
|
|
|
|
function editCategory(id, name, desc, icon, sort) {
|
|
document.getElementById('category-form-container').style.display = 'block';
|
|
document.getElementById('category-form-title').textContent = '编辑分类';
|
|
document.getElementById('category-id').value = id;
|
|
document.getElementById('category-name').value = name;
|
|
document.getElementById('category-description').value = desc;
|
|
document.getElementById('category-icon').value = icon;
|
|
document.getElementById('category-sort').value = sort;
|
|
}
|
|
|
|
// 提交分类表单
|
|
document.getElementById('category-form').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const id = document.getElementById('category-id').value;
|
|
const data = {
|
|
name: document.getElementById('category-name').value,
|
|
description: document.getElementById('category-description').value,
|
|
icon: document.getElementById('category-icon').value,
|
|
sort_order: parseInt(document.getElementById('category-sort').value)
|
|
};
|
|
|
|
try {
|
|
if (id) {
|
|
await adminAPI(`/categories/${id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(data)
|
|
});
|
|
} else {
|
|
await adminAPI('/categories', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data)
|
|
});
|
|
}
|
|
|
|
hideCategoryForm();
|
|
loadCategories();
|
|
} catch (err) {
|
|
alert('操作失败: ' + err.message);
|
|
}
|
|
});
|
|
|
|
// 删除分类
|
|
async function deleteCategory(id) {
|
|
if (!confirm('确定要删除这个分类吗？')) return;
|
|
|
|
try {
|
|
await adminAPI(`/categories/${id}`, { method: 'DELETE' });
|
|
loadCategories();
|
|
} catch (err) {
|
|
alert('删除失败: ' + err.message);
|
|
}
|
|
}
|
|
|
|
// 加载主题
|
|
async function loadThreadsAdmin() {
|
|
try {
|
|
const result = await adminAPI('/threads');
|
|
const tbody = document.querySelector('#threads-table tbody');
|
|
|
|
tbody.innerHTML = result.data.map(thread => `
|
|
<tr>
|
|
<td><a href="/thread.html?id=${thread.id}" target="_blank">${escapeHtml(thread.title)}</a></td>
|
|
<td>${escapeHtml(thread.author_name)}</td>
|
|
<td>${escapeHtml(thread.category_name || '')}</td>
|
|
<td>${thread.view_count} / ${thread.reply_count}</td>
|
|
<td>${formatTime(thread.created_at)}</td>
|
|
<td>
|
|
<button class="btn-delete" onclick="deleteThread('${thread.id}')">删除</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch (err) {
|
|
console.error('加载主题失败:', err);
|
|
}
|
|
}
|
|
|
|
// 删除主题
|
|
async function deleteThread(id) {
|
|
if (!confirm('确定要删除这个主题吗？所有相关回复也会被删除。')) return;
|
|
|
|
try {
|
|
await fetchAPI(`/threads/${id}`, { method: 'DELETE' });
|
|
loadThreadsAdmin();
|
|
} catch (err) {
|
|
alert('删除失败: ' + err.message);
|
|
}
|
|
}
|
|
|
|
// 加载帖子
|
|
async function loadPostsAdmin() {
|
|
try {
|
|
const result = await adminAPI('/posts');
|
|
const tbody = document.querySelector('#posts-table tbody');
|
|
|
|
tbody.innerHTML = result.data.map(post => `
|
|
<tr>
|
|
<td>${escapeHtml(post.content.substring(0, 100))}${post.content.length > 100 ? '...' : ''}</td>
|
|
<td>${escapeHtml(post.author_name)}</td>
|
|
<td><a href="/thread.html?id=${post.thread_id}" target="_blank">${escapeHtml(post.thread_title || '(已删除)')}</a></td>
|
|
<td>${formatTime(post.created_at)}</td>
|
|
<td>
|
|
<button class="btn-delete" onclick="deletePost('${post.id}')">删除</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
} catch (err) {
|
|
console.error('加载帖子失败:', err);
|
|
}
|
|
}
|
|
|
|
// 删除帖子
|
|
async function deletePost(id) {
|
|
if (!confirm('确定要删除这个帖子吗？')) return;
|
|
|
|
try {
|
|
await adminAPI(`/posts/${id}`, { method: 'DELETE' });
|
|
loadPostsAdmin();
|
|
} catch (err) {
|
|
alert('删除失败: ' + err.message);
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', checkAuth);
|
|
</script>
|
|
</body>
|
|
</html> |