mce/templates/admin/static/js/audit.js

/* =====================================================
   MetaLab 管理面板 - 审核管理 JS
   单一职责：审核列表 TAB 切换、分页、审批操作
   ===================================================== */

let currentTab = 'username';
const pageSize = 20;
const pages = {
    username: 1,
    avatar: 1,
    bio: 1,
    history: 1
};
let pendingRejectId = null;

document.addEventListener('DOMContentLoaded', () => {
    // TAB 切换
    document.querySelectorAll('.audit-tab').forEach(tab => {
        tab.addEventListener('click', () => {
            document.querySelectorAll('.audit-tab').forEach(t => t.classList.remove('active'));
            tab.classList.add('active');
            currentTab = tab.dataset.tab;
            document.querySelectorAll('.audit-panel').forEach(p => p.classList.remove('active'));
            document.getElementById('panel-' + currentTab).classList.add('active');
            loadCurrentTab();
        });
    });

    // 初始加载
    loadCurrentTab();
});

/* =========================================
   数据加载
   ========================================= */

function loadCurrentTab() {
    if (currentTab === 'history') {
        loadHistory();
    } else if (currentTab === 'avatar') {
        loadAvatarAudits();
    } else {
        loadTableAudits();
    }
}

function loadTableAudits() {
    const page = pages[currentTab];
    api.get(`/api/admin/audits?type=${currentTab}&page=${page}&page_size=${pageSize}`)
        .then(res => {
            if (res.success) {
                renderTable(res.data.items, currentTab + 'TableBody');
                renderPagination(res.data.total, res.data.page, currentTab + 'Pagination');
            } else {
                showToast(res.message || '加载失败', 'error');
            }
        })
        .catch(() => showToast('网络错误', 'error'));
}

function loadAvatarAudits() {
    const page = pages['avatar'];
    api.get(`/api/admin/audits?type=avatar&page=${page}&page_size=${pageSize}`)
        .then(res => {
            if (res.success) {
                renderAvatarCards(res.data.items);
                renderPagination(res.data.total, res.data.page, 'avatarPagination');
            } else {
                showToast(res.message || '加载失败', 'error');
            }
        })
        .catch(() => showToast('网络错误', 'error'));
}

function loadHistory() {
    const page = pages['history'];
    api.get(`/api/admin/audits?page=${page}&page_size=${pageSize}&status=`)
        .then(res => {
            if (res.success) {
                renderHistoryTable(res.data.items);
                renderPagination(res.data.total, res.data.page, 'historyPagination');
            } else {
                showToast(res.message || '加载失败', 'error');
            }
        })
        .catch(() => showToast('网络错误', 'error'));
}

/* =========================================
   表格渲染（用户名/签名）
   ========================================= */

function renderTable(items, bodyId) {
    const tbody = document.getElementById(bodyId);
    if (!items || items.length === 0) {
        const cols = currentTab === 'bio' ? 4 : 5;
        tbody.innerHTML = `<tr><td colspan="${cols}" style="text-align:center;padding:40px;color:#636e72;">没有待审核记录</td></tr>`;
        return;
    }
    tbody.innerHTML = items.map(item => {
        if (currentTab === 'bio') {
            return renderBioRow(item);
        }
        return renderUsernameRow(item);
    }).join('');
}

function renderUsernameRow(item) {
    return `
        <tr>
            <td>${escapeHtml(item.submitter_username || '—')}</td>
            <td>—</td>
            <td><strong>${escapeHtml(item.new_value)}</strong></td>
            <td>${formatTime(item.created_at)}</td>
            <td class="col-actions">
                <button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
                <button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
            </td>
        </tr>`;
}

function renderBioRow(item) {
    const text = item.new_value || '';
    const display = text.length > 40 ? text.substring(0, 40) + '...' : text;
    return `
        <tr>
            <td>${escapeHtml(item.submitter_username || '—')}</td>
            <td title="${escapeHtml(text)}">${escapeHtml(display)}</td>
            <td>${formatTime(item.created_at)}</td>
            <td class="col-actions">
                <button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
                <button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
            </td>
        </tr>`;
}

/* =========================================
   头像卡片渲染
   ========================================= */

function renderAvatarCards(items) {
    const grid = document.getElementById('avatarGrid');
    if (!items || items.length === 0) {
        grid.innerHTML = '<div class="table-loading-full">没有待审核头像</div>';
        return;
    }
    grid.innerHTML = items.map(item => `
        <div class="avatar-audit-card">
            <div class="card-header">
                <span>提交者: <strong>${escapeHtml(item.submitter_username || '—')}</strong></span>
                <span>${formatTime(item.created_at)}</span>
            </div>
            <div class="avatar-compare">
                <span>新头像 →</span>
                <img src="${escapeHtml(item.new_value)}" alt="新头像" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22><rect fill=%22%23eee%22 width=%2280%22 height=%2280%22/><text x=%2240%22 y=%2245%22 text-anchor=%22middle%22 fill=%22%23999%22 font-size=%2212%22>加载失败</text></svg>'">
            </div>
            <div class="card-actions">
                <button class="btn btn-primary btn-sm" onclick="approveAudit(${item.uid})">通过</button>
                <button class="btn btn-outline btn-sm" onclick="openRejectModal(${item.uid})">拒绝</button>
            </div>
        </div>
    `).join('');
}

/* =========================================
   审核记录渲染
   ========================================= */

function renderHistoryTable(items) {
    const tbody = document.getElementById('historyTableBody');
    if (!items || items.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:40px;color:#636e72;">没有审核记录</td></tr>';
        return;
    }
    tbody.innerHTML = items.map(item => {
        const typeLabel = window.__AUDIT_TYPES[item.audit_type] || item.audit_type;
        const statusLabel = window.__AUDIT_STATUS[item.status] || item.status;
        const statusClass = item.status;
        const content = item.new_value.length > 40 ? item.new_value.substring(0, 40) + '...' : item.new_value;
        const reviewer = item.reviewer_name || '—';
        return `
            <tr>
                <td>${typeLabel}</td>
                <td>${escapeHtml(item.submitter_username || '—')}</td>
                <td>${escapeHtml(content)}</td>
                <td><span class="audit-status-tag ${statusClass}">${statusLabel}</span></td>
                <td>${escapeHtml(reviewer)}</td>
                <td>${formatTime(item.created_at)}</td>
            </tr>`;
    }).join('');
}

/* =========================================
   审核操作
   ========================================= */

async function approveAudit(id) {
    const ok = await showConfirm('通过审核', '确定要通过此审核吗？通过后将立即生效。');
    if (!ok) return;
    const res = await api.post('/api/admin/audits/' + id + '/approve');
    if (res.success) {
        showToast(res.message, 'success');
        loadCurrentTab();
    } else {
        showToast(res.message || '操作失败', 'error');
    }
}

function openRejectModal(id) {
    pendingRejectId = id;
    document.getElementById('rejectReason').value = '';
    document.getElementById('rejectModal').style.display = 'flex';
}

function closeRejectModal() {
    pendingRejectId = null;
    document.getElementById('rejectModal').style.display = 'none';
}

document.getElementById('confirmRejectBtn').addEventListener('click', async () => {
    const reason = document.getElementById('rejectReason').value.trim();
    if (!reason) {
        showToast('请填写拒绝理由', 'error');
        return;
    }
    const res = await api.post('/api/admin/audits/' + pendingRejectId + '/reject', { reason });
    if (res.success) {
        showToast(res.message, 'success');
        closeRejectModal();
        loadCurrentTab();
    } else {
        showToast(res.message || '操作失败', 'error');
    }
});

// 点击遮罩关闭弹窗
document.getElementById('rejectModal').addEventListener('click', (e) => {
    if (e.target === e.currentTarget) closeRejectModal();
});

/* =========================================
   分页
   ========================================= */

function renderPagination(total, page, barId) {
    const totalPages = Math.ceil(total / pageSize);
    const bar = document.getElementById(barId);
    if (totalPages <= 1) { bar.innerHTML = ''; return; }

    let html = `<button onclick="goPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>上一页</button>`;
    html += `<span class="page-current">第 ${page} / ${totalPages} 页（共 ${total} 条）</span>`;
    html += `<button onclick="goPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>下一页</button>`;
    bar.innerHTML = html;
}

function goPage(p) {
    pages[currentTab] = p;
    loadCurrentTab();
    window.scrollTo({ top: 0 });
}