127 lines
6.4 KiB
HTML
127 lines
6.4 KiB
HTML
{% extends "admin_base.html" %}
|
|
|
|
{% block title %}帖子管理 - 智联青云管理后台{% endblock %}
|
|
|
|
{% block admin_content %}
|
|
<div class="space-y-6">
|
|
<h1 class="text-2xl font-bold text-slate-900">帖子管理</h1>
|
|
|
|
<div class="flex gap-4">
|
|
<input id="search-input" type="text" placeholder="搜索标题/内容..." class="flex-1 px-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<select id="tag-filter" class="px-4 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
|
<option value="">全部标签</option>
|
|
<option value="讨论">讨论</option>
|
|
<option value="求助">求助</option>
|
|
<option value="分享">分享</option>
|
|
<option value="公告">公告</option>
|
|
</select>
|
|
<button onclick="loadPosts()" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">搜索</button>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-sm rounded-lg border border-slate-200 overflow-hidden">
|
|
<table class="min-w-full divide-y divide-slate-200">
|
|
<thead class="bg-slate-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">ID</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">标题</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">作者</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">标签</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">置顶</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">发布时间</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 uppercase">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="posts-tbody" class="bg-white divide-y divide-slate-200"></tbody>
|
|
</table>
|
|
<div id="loading-spinner" class="text-center py-8 text-slate-400 hidden">
|
|
<svg class="animate-spin h-6 w-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span class="text-sm">加载中...</span>
|
|
</div>
|
|
<div id="empty-msg" class="text-center py-12 text-slate-400 hidden">暂无帖子</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
const tagClassMap = {
|
|
'讨论': 'bg-blue-100 text-blue-800',
|
|
'求助': 'bg-yellow-100 text-yellow-800',
|
|
'分享': 'bg-green-100 text-green-800',
|
|
'公告': 'bg-red-100 text-red-800'
|
|
};
|
|
|
|
async function loadPosts() {
|
|
const q = document.getElementById('search-input').value;
|
|
const tag = document.getElementById('tag-filter').value;
|
|
const tbody = document.getElementById('posts-tbody');
|
|
const spinner = document.getElementById('loading-spinner');
|
|
const empty = document.getElementById('empty-msg');
|
|
|
|
tbody.innerHTML = '';
|
|
spinner.classList.remove('hidden');
|
|
empty.classList.add('hidden');
|
|
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (q) params.set('q', q);
|
|
if (tag) params.set('tag', tag);
|
|
const res = await fetch('/api/admin/posts?' + params);
|
|
const data = await res.json();
|
|
spinner.classList.add('hidden');
|
|
|
|
if (!data.success || !data.posts.length) {
|
|
empty.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
data.posts.forEach(p => {
|
|
const tagClass = tagClassMap[p.tag] || 'bg-slate-100 text-slate-800';
|
|
html += `<tr>
|
|
<td class="px-6 py-4 text-sm text-slate-900">${p.id}</td>
|
|
<td class="px-6 py-4 text-sm text-slate-900 max-w-xs truncate">${p.title}</td>
|
|
<td class="px-6 py-4 text-sm text-slate-500">${p.author}</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full ${tagClass}">${p.tag || '-'}</span></td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2 py-1 text-xs rounded-full ${p.pinned ? 'bg-orange-100 text-orange-800' : 'bg-slate-100 text-slate-500'}">${p.pinned ? '已置顶' : '未置顶'}</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-slate-500">${p.created_at}</td>
|
|
<td class="px-6 py-4 space-x-2">
|
|
<button onclick="togglePin(${p.id}, ${p.pinned})" class="px-2 py-1 text-xs ${p.pinned ? 'bg-slate-100 text-slate-700 border-slate-300' : 'bg-orange-100 text-orange-700 border-orange-300'} border rounded hover:opacity-80">${p.pinned ? '取消置顶' : '置顶'}</button>
|
|
<button onclick="deletePost(${p.id}, '${p.title.replace(/'/g, "\\'")}')" class="px-2 py-1 text-xs bg-red-100 text-red-700 border border-red-300 rounded hover:bg-red-200">删除</button>
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
tbody.innerHTML = html;
|
|
} catch(e) {
|
|
spinner.classList.add('hidden');
|
|
empty.textContent = '加载失败，请稍后重试';
|
|
empty.classList.remove('hidden');
|
|
}
|
|
}
|
|
async function togglePin(id, currentlyPinned) {
|
|
if (!confirm(currentlyPinned ? '确定取消置顶？' : '确定置顶该帖子？')) return;
|
|
try {
|
|
const res = await fetch(`/api/admin/posts/${id}/pin`, {method: 'PUT'});
|
|
const data = await res.json();
|
|
if (data.success) { loadPosts(); } else { alert(data.message || '操作失败'); }
|
|
} catch(e) { alert('网络错误'); }
|
|
}
|
|
|
|
async function deletePost(id, title) {
|
|
if (!confirm(`确定删除帖子「${title}」？此操作不可恢复！`)) return;
|
|
try {
|
|
const res = await fetch(`/api/admin/posts/${id}`, {method: 'DELETE'});
|
|
const data = await res.json();
|
|
if (data.success) { loadPosts(); } else { alert(data.message || '操作失败'); }
|
|
} catch(e) { alert('网络错误'); }
|
|
}
|
|
|
|
document.getElementById('search-input').addEventListener('keydown', e => { if (e.key === 'Enter') loadPosts(); });
|
|
document.addEventListener('DOMContentLoaded', loadPosts);
|
|
</script>
|
|
{% endblock %}
|