ai_v/templates/notifications.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 %}