增加基础设置页面

This commit is contained in:
2026-07-29 16:45:22 +08:00
parent 0b22d4f126
commit a9a890a849
15 changed files with 472 additions and 84 deletions
+92 -4
View File
@@ -46,6 +46,9 @@ document.addEventListener('DOMContentLoaded', () => {
// 用户表单
document.getElementById('user-form').addEventListener('submit', handleUserSubmit);
// 基础设置表单
document.getElementById('settings-form').addEventListener('submit', handleSettingsSubmit);
// 封面图上传
const coverFileInput = document.getElementById('post-cover-file');
if (coverFileInput) {
@@ -116,6 +119,9 @@ function showPage(pageName) {
case 'themes':
loadThemes();
break;
case 'settings':
loadSettings();
break;
case 'theme-editor':
// 主题编辑器由 editTheme() 函数加载
break;
@@ -486,18 +492,24 @@ async function loadPages() {
}
}
// 加载评论
async function loadComments() {
// 加载评论(postId 为空时加载全部)
async function loadComments(postId = '') {
try {
const res = await fetch(`${API_BASE}/comments`, { headers: getHeaders() });
const url = postId ? `${API_BASE}/admin/comments?post_id=${postId}` : `${API_BASE}/admin/comments`;
const res = await fetch(url, { headers: getHeaders() });
const data = await res.json();
// 加载全部评论时刷新文章筛选下拉框
if (!postId) {
populateCommentPostFilter(data.data || []);
}
const tbody = document.getElementById('comments-list');
tbody.innerHTML = data.data?.map(c => `
<tr>
<td>${c.author}</td>
<td>${c.content.substring(0, 50)}${c.content.length > 50 ? '...' : ''}</td>
<td>文章 #${c.post_id}</td>
<td><a href="/post/${encodeURIComponent(c.post_slug || c.post_id)}" target="_blank">${c.post_title || '文章 #' + c.post_id}</a></td>
<td><span class="status-badge status-${c.status}">${c.status}</span></td>
<td>${new Date(c.created_at).toLocaleString()}</td>
<td>
@@ -752,6 +764,82 @@ async function loadUsers() {
}
}
// 填充评论筛选下拉框(所有有评论的文章)
function populateCommentPostFilter(comments) {
const select = document.getElementById('comment-post-filter');
if (!select) return;
// 按文章去重
const posts = new Map();
comments.forEach(c => {
if (!posts.has(c.post_id)) {
posts.set(c.post_id, c.post_title || ('文章 #' + c.post_id));
}
});
select.innerHTML = '<option value="">全部文章</option>';
posts.forEach((title, id) => {
const opt = document.createElement('option');
opt.value = id;
opt.textContent = title;
opt.title = title; // 悬停显示完整标题
select.appendChild(opt);
});
select.value = '';
}
// 按选中文章过滤评论列表
function filterCommentsByPost() {
loadComments(document.getElementById('comment-post-filter').value);
}
// 加载基础设置
async function loadSettings() {
try {
const res = await fetch(`${API_BASE}/admin/settings`, { headers: getHeaders() });
const data = await res.json();
if (!res.ok) {
alert(data.error || '加载设置失败');
return;
}
const s = data.data || {};
document.getElementById('setting-site-name').value = s.site_name || '';
document.getElementById('setting-site-desc').value = s.site_desc || '';
document.getElementById('setting-show-comments').checked = s.show_comments !== '0';
document.getElementById('setting-comments-per-page').value = s.comments_per_page || '10';
} catch (err) {
console.error('加载设置失败:', err);
}
}
// 保存基础设置
async function handleSettingsSubmit(e) {
e.preventDefault();
const body = {
site_name: document.getElementById('setting-site-name').value.trim(),
site_desc: document.getElementById('setting-site-desc').value.trim(),
show_comments: document.getElementById('setting-show-comments').checked,
comments_per_page: parseInt(document.getElementById('setting-comments-per-page').value, 10)
};
try {
const res = await fetch(`${API_BASE}/admin/settings`, {
method: 'PUT',
headers: getHeaders(),
body: JSON.stringify(body)
});
const data = await res.json();
if (res.ok) {
alert('设置已保存');
} else {
alert(data.error || '保存失败');
}
} catch (err) {
alert('保存失败: ' + err.message);
}
}
let usersCache = [];
// 显示新建用户表单
+33 -1
View File
@@ -24,6 +24,7 @@
<a href="#users" class="menu-item" data-page="users">用户管理</a>
<a href="#files" class="menu-item" data-page="files">文件管理</a>
<a href="#themes" class="menu-item" data-page="themes">主题管理</a>
<a href="#settings" class="menu-item" data-page="settings">基础设置</a>
</nav>
<div class="user-info">
<span id="username">Admin</span>
@@ -241,6 +242,9 @@
<div id="comments-page" class="page hidden">
<div class="page-header">
<h1>评论管理</h1>
<select id="comment-post-filter" class="comment-post-filter" onchange="filterCommentsByPost()">
<option value="">全部文章</option>
</select>
</div>
<table class="data-table">
<thead>
@@ -279,6 +283,34 @@
</table>
</div>
<!-- 基础设置 -->
<div id="settings-page" class="page hidden">
<div class="page-header">
<h1>基础设置</h1>
</div>
<form id="settings-form" class="settings-form">
<div class="form-group">
<label>站点名称</label>
<input type="text" id="setting-site-name" required>
</div>
<div class="form-group">
<label>站点描述</label>
<textarea id="setting-site-desc" rows="3"></textarea>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" id="setting-show-comments">
前台显示评论
</label>
</div>
<div class="form-group">
<label>评论每页显示条数</label>
<input type="number" id="setting-comments-per-page" min="1" max="100" required>
</div>
<button type="submit" class="btn-primary">保存设置</button>
</form>
</div>
<!-- 文件管理 -->
<div id="files-page" class="page hidden">
<div class="page-header">
@@ -442,6 +474,6 @@
</div>
</div>
<script src="/static/admin/app.js?v=12"></script>
<script src="/static/admin/app.js?v=16"></script>
</body>
</html>
+50
View File
@@ -950,3 +950,53 @@ body {
padding-left: 24px;
}
/* 评论管理:文章筛选下拉框(固定宽度,超长标题省略显示) */
.comment-post-filter {
width: 260px;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 基础设置表单 */
.settings-form {
max-width: 560px;
background: #fff;
padding: 24px;
border-radius: 8px;
}
.settings-form label {
display: block;
margin-bottom: 6px;
font-weight: 500;
}
.settings-form input[type="text"],
.settings-form input[type="number"],
.settings-form textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.settings-form .checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
.settings-form .checkbox-label input[type="checkbox"] {
width: auto;
margin: 0;
}