<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理后台 - 超协体</title>
<script src="/js/auth.js"></script>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script src="/js/websocket-client.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
}
/* 管理后台导航栏 */
.admin-nav {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.admin-logo {
font-size: 20px;
font-weight: bold;
display: flex;
align-items: center;
gap: 10px;
}
.admin-nav-links {
display: flex;
gap: 10px;
}
.admin-nav-link {
color: white;
text-decoration: none;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 6px;
}
.admin-nav-link:hover,
.admin-nav-link.active {
background: rgba(255, 255, 255, 0.2);
}
.admin-nav-link.back {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* 主容器 */
.admin-container {
max-width: 1400px;
margin: 0 auto;
padding: 30px;
}
/* 页面标题 */
.page-header {
margin-bottom: 30px;
}
.page-title {
color: white;
font-size: 28px;
font-weight: bold;
margin-bottom: 8px;
}
.page-subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
/* 统计卡片网格 */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
transition: transform 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-card.users {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.3);
}
.stat-card.tasks {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
box-shadow: 0 8px 30px rgba(245, 158, 11, 0.3);
}
.stat-card.ai {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.3);
}
.stat-card.pending {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 8px 30px rgba(239, 68, 68, 0.3);
}
.stat-card.active {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3);
}
.stat-number {
font-size: 42px;
font-weight: bold;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
opacity: 0.9;
}
/* 管理卡片 */
.admin-card {
background: rgba(255, 255, 255, 0.95);
padding: 30px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
margin-bottom: 30px;
}
.admin-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
display: flex;
align-items: center;
gap: 10px;
}
/* 快速操作按钮 */
.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
}
.quick-action-btn {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.quick-action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}
.quick-action-btn.success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.quick-action-btn.warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.quick-action-btn.info {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}
.quick-action-icon {
font-size: 24px;
}
.quick-action-text {
display: flex;
flex-direction: column;
text-align: left;
}
.quick-action-text small {
font-weight: normal;
opacity: 0.8;
font-size: 12px;
}
/* 加载状态 */
.loading {
text-align: center;
padding: 40px;
color: #999;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 弹窗 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
display: none;
}
.modal-overlay.active {
display: flex;
}
.modal {
background: white;
border-radius: 16px;
padding: 30px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
}
.modal-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-secondary {
background: #f0f0f0;
color: #333;
}
.btn-danger {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: white;
}
.btn:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* 响应式 */
@media (max-width: 768px) {
.admin-nav {
flex-direction: column;
gap: 15px;
}
.admin-nav-links {
flex-wrap: wrap;
justify-content: center;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.quick-actions-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="admin-nav">
<div class="admin-logo">
<span>⚙</span>
<span>超协体管理后台</span>
</div>
<div class="admin-nav-links">
<a href="/admin.html" class="admin-nav-link active">
<span>📈</span> 概览
</a>
<a href="/admin/users.html" class="admin-nav-link">
<span>👥</span> 用户
</a>
<a href="/admin/tasks.html" class="admin-nav-link">
<span>📋</span> 任务
</a>
<a href="/admin/analytics.html" class="admin-nav-link">
<span>📊</span> 分析
</a>
<a href="/admin/settings.html" class="admin-nav-link">
<span>⚙</span> 配置
</a>
<a href="/dashboard.html" class="admin-nav-link back">
<span>←</span> 返回工作台
</a>
</div>
</nav>
<!-- 主容器 -->
<div class="admin-container">
<!-- 页面标题 -->
<div class="page-header">
<h1 class="page-title">管理后台概览</h1>
<p class="page-subtitle">超协体系统运行状态一览</p>
</div>
<!-- 统计卡片 -->
<div class="stats-grid">
<div class="stat-card users">
<div class="stat-number" id="totalUsers">--</div>
<div class="stat-label">总用户数</div>
</div>
<div class="stat-card tasks">
<div class="stat-number" id="totalTasks">--</div>
<div class="stat-label">总任务数</div>
</div>
<div class="stat-card ai">
<div class="stat-number" id="aiMembers">--</div>
<div class="stat-label">AI成员数</div>
</div>
<div class="stat-card pending">
<div class="stat-number" id="pendingTasks">--</div>
<div class="stat-label">待处理</div>
</div>
<div class="stat-card">
<div class="stat-number" id="inProgressTasks">--</div>
<div class="stat-label">进行中</div>
</div>
<div class="stat-card active">
<div class="stat-number" id="activeToday">--</div>
<div class="stat-label">今日活跃</div>
</div>
</div>
<!-- 快速操作 -->
<div class="admin-card">
<div class="admin-card-title">
<span>⚡</span> 快速操作
</div>
<div class="quick-actions-grid">
<button class="quick-action-btn success" onclick="approveAllCandidates()">
<span class="quick-action-icon">✓</span>
<span class="quick-action-text">
批准所有候选者
<small>将符合条件的候选者升级为成员</small>
</span>
</button>
<a href="/admin/users.html?isAI=true" class="quick-action-btn info">
<span class="quick-action-icon">🤖</span>
<span class="quick-action-text">
管理AI成员
<small>查看和管理AI虚拟成员</small>
</span>
</a>
<a href="/admin/analytics.html" class="quick-action-btn warning">
<span class="quick-action-icon">📊</span>
<span class="quick-action-text">
查看数据分析
<small>用户增长、任务统计、积分流转</small>
</span>
</a>
<a href="/admin/settings.html" class="quick-action-btn">
<span class="quick-action-icon">⚙</span>
<span class="quick-action-text">
系统配置
<small>积分规则、门票配置、AI设置</small>
</span>
</a>
</div>
</div>
<!-- 用户分布 -->
<div class="admin-card">
<div class="admin-card-title">
<span>👥</span> 用户分布
</div>
<div id="userDistribution" class="loading">
<div class="spinner"></div>
正在加载...
</div>
</div>
<!-- 任务概况 -->
<div class="admin-card">
<div class="admin-card-title">
<span>📋</span> 任务概况
</div>
<div id="taskOverview" class="loading">
<div class="spinner"></div>
正在加载...
</div>
</div>
</div>
<!-- 确认弹窗 -->
<div class="modal-overlay" id="confirmModal">
<div class="modal">
<h3 class="modal-title" id="confirmTitle">确认操作</h3>
<p id="confirmMessage">确定要执行此操作吗？</p>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeModal()">取消</button>
<button class="btn btn-primary" id="confirmBtn" onclick="executeConfirm()">确认</button>
</div>
</div>
</div>
<script>
const API_BASE = window.location.origin;
let confirmCallback = null;
// 检查管理员权限
async function checkAdminAccess() {
const token = localStorage.getItem('token');
if (!token) {
alert('请先登录');
window.location.href = '/login.html';
return false;
}
try {
const response = await authFetch('/api/auth/me');
const data = await response.json();
if (!data.success || data.user.role !== 'admin') {
alert('您没有管理员权限');
window.location.href = '/dashboard.html';
return false;
}
return true;
} catch (error) {
console.error('Auth check failed:', error);
window.location.href = '/login.html';
return false;
}
}
// 加载概览数据
async function loadOverview() {
try {
const response = await authFetch('/api/admin/overview');
const data = await response.json();
if (data.success) {
const { users, tasks } = data.data;
// 更新统计数字
document.getElementById('totalUsers').textContent = users.total;
document.getElementById('totalTasks').textContent = tasks.total;
document.getElementById('aiMembers').textContent = users.aiMember;
document.getElementById('pendingTasks').textContent = tasks.pending;
document.getElementById('inProgressTasks').textContent = tasks.inProgress;
document.getElementById('activeToday').textContent = users.activeToday;
// 渲染用户分布
renderUserDistribution(users);
// 渲染任务概况
renderTaskOverview(tasks);
}
} catch (error) {
console.error('加载概览数据失败:', error);
}
}
// 渲染用户分布
function renderUserDistribution(users) {
const container = document.getElementById('userDistribution');
container.innerHTML = `
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px;">
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<div style="font-size: 28px; font-weight: bold; color: #10b981;">${users.member}</div>
<div style="color: #666; font-size: 13px;">正式成员</div>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<div style="font-size: 28px; font-weight: bold; color: #f59e0b;">${users.candidate}</div>
<div style="color: #666; font-size: 13px;">候选者</div>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<div style="font-size: 28px; font-weight: bold; color: #ef4444;">${users.admin}</div>
<div style="color: #666; font-size: 13px;">管理员</div>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<div style="font-size: 28px; font-weight: bold; color: #6366f1;">${users.aiMember}</div>
<div style="color: #666; font-size: 13px;">AI成员</div>
</div>
</div>
`;
}
// 渲染任务概况
function renderTaskOverview(tasks) {
const container = document.getElementById('taskOverview');
const total = tasks.total || 1;
const completedPercent = Math.round((tasks.completed / total) * 100);
const inProgressPercent = Math.round((tasks.inProgress / total) * 100);
const pendingPercent = Math.round((tasks.pending / total) * 100);
const blockedPercent = Math.round((tasks.blocked / total) * 100);
container.innerHTML = `
<div style="margin-bottom: 20px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>已完成</span>
<span>${tasks.completed} (${completedPercent}%)</span>
</div>
<div style="height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden;">
<div style="height: 100%; width: ${completedPercent}%; background: linear-gradient(90deg, #10b981, #059669);"></div>
</div>
</div>
<div style="margin-bottom: 20px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>进行中</span>
<span>${tasks.inProgress} (${inProgressPercent}%)</span>
</div>
<div style="height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden;">
<div style="height: 100%; width: ${inProgressPercent}%; background: linear-gradient(90deg, #f59e0b, #d97706);"></div>
</div>
</div>
<div style="margin-bottom: 20px;">
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>待处理</span>
<span>${tasks.pending} (${pendingPercent}%)</span>
</div>
<div style="height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden;">
<div style="height: 100%; width: ${pendingPercent}%; background: linear-gradient(90deg, #6366f1, #4f46e5);"></div>
</div>
</div>
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
<span>已阻塞</span>
<span>${tasks.blocked} (${blockedPercent}%)</span>
</div>
<div style="height: 10px; background: #e0e0e0; border-radius: 5px; overflow: hidden;">
<div style="height: 100%; width: ${blockedPercent}%; background: linear-gradient(90deg, #ef4444, #dc2626);"></div>
</div>
</div>
`;
}
// 批准所有候选者
async function approveAllCandidates() {
showConfirm('批准所有候选者', '确定要批准所有符合条件的候选者吗？他们将正式成为超协体成员。', async () => {
try {
const response = await authFetch('/api/admin/approve-all-candidates', {
method: 'POST'
});
const data = await response.json();
if (data.success) {
alert(data.message);
loadOverview();
} else {
alert('操作失败: ' + data.message);
}
} catch (error) {
console.error('批准候选者失败:', error);
alert('操作失败，请重试');
}
});
}
// 显示确认弹窗
function showConfirm(title, message, callback) {
document.getElementById('confirmTitle').textContent = title;
document.getElementById('confirmMessage').textContent = message;
document.getElementById('confirmModal').classList.add('active');
confirmCallback = callback;
}
// 关闭弹窗
function closeModal() {
document.getElementById('confirmModal').classList.remove('active');
confirmCallback = null;
}
// 执行确认
function executeConfirm() {
if (confirmCallback) {
confirmCallback();
}
closeModal();
}
// 页面加载时初始化
document.addEventListener('DOMContentLoaded', async () => {
if (await checkAdminAccess()) {
loadOverview();
// 每30秒自动刷新数据
setInterval(loadOverview, 30000);
}
});
</script>
</body>
</html>
