162 lines
8.2 KiB
HTML
162 lines
8.2 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}通知管理 - AI 视界{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="w-full h-full overflow-y-auto p-8 lg:p-12 custom-scrollbar">
|
||
|
|
<div class="max-w-6xl mx-auto space-y-8">
|
||
|
|
<!-- 头部 -->
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<div class="w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg">
|
||
|
|
<i data-lucide="megaphone" class="w-7 h-7"></i>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 class="text-3xl font-black text-slate-900 tracking-tight">系统通知管理</h1>
|
||
|
|
<p class="text-slate-400 text-sm font-bold">发布全局公告，通知每一位创作者</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button onclick="openModal()" class="btn-primary px-6 py-3 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2">
|
||
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
||
|
|
发布新通知
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 列表 -->
|
||
|
|
<div class="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
|
||
|
|
<div class="overflow-x-auto">
|
||
|
|
<table class="w-full text-left border-collapse">
|
||
|
|
<thead>
|
||
|
|
<tr class="bg-slate-50 border-b border-slate-100 sticky top-0 z-10">
|
||
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-50">状态</th>
|
||
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-50">标题</th>
|
||
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-50">发布时间</th>
|
||
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest bg-slate-50 text-right">操作</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="notifTableBody" class="text-sm font-medium">
|
||
|
|
<!-- 动态加载 -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 编辑弹窗 -->
|
||
|
|
<div id="notifModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
||
|
|
<div class="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl p-10 space-y-8 transform scale-95 transition-transform duration-300">
|
||
|
|
<h2 id="modalTitle" class="text-2xl font-black text-slate-900">发布通知</h2>
|
||
|
|
<form id="notifForm" class="space-y-5">
|
||
|
|
<input type="hidden" id="notifId">
|
||
|
|
<div class="space-y-2">
|
||
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">通知标题</label>
|
||
|
|
<input type="text" id="notifTitle" required placeholder="例如：系统维护公告" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
||
|
|
</div>
|
||
|
|
<div class="space-y-2">
|
||
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">详细内容</label>
|
||
|
|
<textarea id="notifContent" required rows="6" placeholder="支持换行展示..." class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold resize-none"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 pt-2">
|
||
|
|
<input type="checkbox" id="notifActive" checked class="w-4 h-4 rounded border-slate-200 text-indigo-600 focus:ring-indigo-500">
|
||
|
|
<label for="notifActive" class="text-sm font-bold text-slate-600">立即上线 (激活状态)</label>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-4 pt-4">
|
||
|
|
<button type="button" onclick="closeModal()" class="flex-1 px-8 py-4 rounded-2xl border border-slate-100 font-bold text-slate-400 hover:bg-slate-50 transition-all">取消</button>
|
||
|
|
<button type="submit" class="flex-1 btn-primary px-8 py-4 rounded-2xl font-bold shadow-lg shadow-indigo-100">确认发布</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
<script>
|
||
|
|
async function loadNotifications() {
|
||
|
|
try {
|
||
|
|
const r = await fetch('/api/admin/notifications');
|
||
|
|
const d = await r.json();
|
||
|
|
const body = document.getElementById('notifTableBody');
|
||
|
|
|
||
|
|
body.innerHTML = d.notifications.map(n => `
|
||
|
|
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors">
|
||
|
|
<td class="px-8 py-5">
|
||
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase ${
|
||
|
|
n.is_active ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-400'
|
||
|
|
}">${n.is_active ? '激活中' : '已下线'}</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-8 py-5 text-slate-700 font-bold">${n.title}</td>
|
||
|
|
<td class="px-8 py-5 text-slate-400 font-mono text-xs">${n.created_at}</td>
|
||
|
|
<td class="px-8 py-5 text-right space-x-2">
|
||
|
|
<button onclick='editNotif(${JSON.stringify(n)})' class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors">
|
||
|
|
<i data-lucide="edit-3" class="w-4 h-4"></i>
|
||
|
|
</button>
|
||
|
|
<button onclick="deleteNotif(${n.id})" class="p-2 text-rose-500 hover:bg-rose-50 rounded-lg transition-colors">
|
||
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||
|
|
</button>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
`).join('');
|
||
|
|
lucide.createIcons();
|
||
|
|
} catch (e) { console.error(e); }
|
||
|
|
}
|
||
|
|
|
||
|
|
function openModal() {
|
||
|
|
document.getElementById('modalTitle').innerText = '发布通知';
|
||
|
|
document.getElementById('notifForm').reset();
|
||
|
|
document.getElementById('notifId').value = '';
|
||
|
|
const m = document.getElementById('notifModal');
|
||
|
|
m.classList.remove('hidden');
|
||
|
|
setTimeout(() => { m.classList.add('opacity-100'); m.querySelector('div').classList.remove('scale-95'); }, 10);
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
const m = document.getElementById('notifModal');
|
||
|
|
m.classList.remove('opacity-100');
|
||
|
|
m.querySelector('div').classList.add('scale-95');
|
||
|
|
setTimeout(() => m.classList.add('hidden'), 300);
|
||
|
|
}
|
||
|
|
|
||
|
|
function editNotif(n) {
|
||
|
|
openModal();
|
||
|
|
document.getElementById('modalTitle').innerText = '编辑通知';
|
||
|
|
document.getElementById('notifId').value = n.id;
|
||
|
|
document.getElementById('notifTitle').value = n.title;
|
||
|
|
document.getElementById('notifContent').value = n.content;
|
||
|
|
document.getElementById('notifActive').checked = n.is_active;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteNotif(id) {
|
||
|
|
if(!confirm('确定要删除这条通知吗？用户将无法再看到它。')) return;
|
||
|
|
const r = await fetch('/api/admin/notifications/delete', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json'},
|
||
|
|
body: JSON.stringify({id})
|
||
|
|
});
|
||
|
|
if(r.ok) loadNotifications();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.getElementById('notifForm').onsubmit = async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const data = {
|
||
|
|
id: document.getElementById('notifId').value,
|
||
|
|
title: document.getElementById('notifTitle').value,
|
||
|
|
content: document.getElementById('notifContent').value,
|
||
|
|
is_active: document.getElementById('notifActive').checked
|
||
|
|
};
|
||
|
|
|
||
|
|
const r = await fetch('/api/admin/notifications', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json'},
|
||
|
|
body: JSON.stringify(data)
|
||
|
|
});
|
||
|
|
if(r.ok) {
|
||
|
|
closeModal();
|
||
|
|
loadNotifications();
|
||
|
|
showToast('通知发布成功', 'success');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
loadNotifications();
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|