70 lines
5.3 KiB
JavaScript
70 lines
5.3 KiB
JavaScript
const Dashboard = {
|
|
async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },
|
|
|
|
async mount() {
|
|
const ct = document.getElementById('page-content');
|
|
document.getElementById('page-title').textContent = '控制台';
|
|
document.getElementById('page-actions').innerHTML = `
|
|
<button class="btn btn-p btn-sm" onclick="App.navigate('tickets','create?type=report')"><i class="fas fa-flag"></i> 举报</button>
|
|
<button class="btn btn-s btn-sm" onclick="App.navigate('tickets','create?type=suggestion')"><i class="fas fa-lightbulb"></i> 建议</button>
|
|
<button class="btn btn-w btn-sm" onclick="App.navigate('tickets','create?type=appeal')"><i class="fas fa-gavel"></i> 申诉</button>
|
|
`;
|
|
|
|
try {
|
|
const [stats, exports] = await Promise.all([
|
|
API.get('/tickets/stats'),
|
|
Auth.isOwner() ? API.get('/export/dashboard') : null,
|
|
]);
|
|
const bans = Auth.isAdmin() ? await API.get('/bans/active').catch(()=>[]) : [];
|
|
this.renderContent(ct, stats, exports, bans);
|
|
} catch (e) { ct.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
|
|
},
|
|
|
|
renderContent(ct, stats, exports) {
|
|
const byStatus = stats.byStatus || {};
|
|
|
|
ct.innerHTML = `
|
|
<div class="stats-grid">
|
|
<div class="stat-card"><div class="si" style="background:#eef2ff;color:var(--p)"><i class="fas fa-ticket-alt"></i></div><div><div class="sv">${stats.total}</div><div class="sl">工单总数</div></div></div>
|
|
<div class="stat-card"><div class="si" style="background:#fef3c7;color:#d97706"><i class="fas fa-clock"></i></div><div><div class="sv">${byStatus.pending || 0}</div><div class="sl">待处理</div></div></div>
|
|
<div class="stat-card"><div class="si" style="background:#ede9fe;color:#7c3aed"><i class="fas fa-cogs"></i></div><div><div class="sv">${byStatus.processing || 0}</div><div class="sl">处理中</div></div></div>
|
|
<div class="stat-card"><div class="si" style="background:#d1fae5;color:var(--s)"><i class="fas fa-check-circle"></i></div><div><div class="sv">${byStatus.resolved || 0}</div><div class="sl">已解决</div></div></div>
|
|
</div>
|
|
|
|
${Auth.isAdmin() ? `
|
|
<div class="card"><div class="card-h"><i class="fas fa-ban"></i> 封禁列表 ${Auth.isOwner() ? `<button class="btn btn-p btn-sm" onclick="Dashboard.showAddBan()">添加</button>`:''}</div>
|
|
<div id="ban-list" class="card-b">${bans.length === 0 ? '<span class="tm">暂无封禁记录</span>' : `<table><thead><tr><th>玩家</th><th>类型</th><th>原因</th><th>时长</th><th>时间</th></tr></thead><tbody>${bans.map(b=>`<tr><td>${U.esc(b.player_name)}</td><td>${b.type==='ban'?'封禁':b.type==='mute'?'禁言':'其他'}</td><td class="ts">${U.esc(b.reason||'')}</td><td>${b.duration||'永久'}</td><td class="ts">${U.date(b.created_at)}</td></tr>`).join('')}</tbody></table>`}</div>
|
|
</div>` : ''}
|
|
<div class="card"><div class="card-h">类型分布</div><div class="card-b">
|
|
${(exports.byType||[]).map(r => `<div class="detail-row"><span class="lbl">${U.TYPE[r.type]||r.type}</span><span class="val fb">${r.c} 条</span></div>`).join('')}
|
|
</div></div>
|
|
<div class="card"><div class="card-h">状态分布</div><div class="card-b">
|
|
${(exports.byStatus||[]).map(r => `<div class="detail-row"><span class="lbl">${U.STATUS[r.status]||r.status}</span><span class="val fb">${r.c} 条</span></div>`).join('')}
|
|
</div></div>
|
|
</div>
|
|
${exports.monthly?.length ? `
|
|
<div class="card"><div class="card-h">月度趋势</div><div class="card-b table-wrap"><table><thead><tr><th>月份</th><th>数量</th></tr></thead><tbody>${exports.monthly.map(m=>`<tr><td>${m.m}</td><td>${m.c}</td></tr>`).join('')}</tbody></table></div></div>` : ''}
|
|
` : ''}
|
|
<p class="tm ts tc">提示: 可在"工单列表"中查看和管理所有工单</p>
|
|
`;
|
|
},
|
|
|
|
showAddBan() {
|
|
U.modal('添加封禁', `
|
|
<form id="ban-form">
|
|
<div class="grid-2"><div class="form-group"><label>玩家名 *</label><input id="ban-name" required></div><div class="form-group"><label>UID</label><input id="ban-uid"></div></div>
|
|
<div class="grid-2"><div class="form-group"><label>类型</label><select id="ban-type"><option value="ban">封禁</option><option value="mute">禁言</option><option value="warn">警告</option></select></div><div class="form-group"><label>时长</label><select id="ban-dur"><option value="">永久</option><option value="1天">1天</option><option value="3天">3天</option><option value="7天">7天</option><option value="30天">30天</option></select></div></div>
|
|
<div class="form-group"><label>原因</label><textarea id="ban-reason" rows="2"></textarea></div>
|
|
<div class="modal-f"><button type="button" class="btn btn-o" data-action="App:closeModal">取消</button><button type="submit" class="btn btn-p">添加</button></div>
|
|
</form>
|
|
`);
|
|
document.getElementById('ban-form').onsubmit = async e => {
|
|
e.preventDefault();
|
|
try {
|
|
await API.post('/bans', { player_name: document.getElementById('ban-name').value, player_uid: document.getElementById('ban-uid').value, type: document.getElementById('ban-type').value, duration: document.getElementById('ban-dur').value, reason: document.getElementById('ban-reason').value });
|
|
App.closeModal(); this.mount();
|
|
} catch(ex) { alert(ex.message); }
|
|
};
|
|
}
|
|
};
|