feat: 重构为 SOCKS5 代理管理平台 v2.0
架构: - engine/server.py: asyncio SOCKS5 服务器引擎(含隧道/认证/限速) - engine/instances.py: 多实例管理器(独立事件循环/热启动/热停止) - services/user_service.py: 用户认证/流量统计/IP白名单/防爆破 - services/stats_service.py: 实时监控/流量趋势/连接追踪 - services/backup_service.py: 数据库备份与恢复 - api/v1.py: 完整 RESTful API - web/routes.py: Web 管理面板(暗色 Bootstrap 5 主题) 功能覆盖: ✅ 多实例 SOCKS5 管理(创建/启动/停止/重启/热加载) ✅ 用户认证(无认证/账号密码/流量上限/限速/并发限制) ✅ IP 白名单/黑名单/防爆破 ✅ 实时仪表盘(CPU/内存/网络/活跃连接) ✅ 流量统计(30天趋势图/用户排名/实例统计) ✅ 活跃连接追踪 ✅ 审计日志(事件/用户/IP 筛选) ✅ 数据库备份与恢复 ✅ 管理员密码保护 ✅ 16 项功能测试全部通过
This commit is contained in:
Your Name
+133
-63
@@ -2,70 +2,97 @@
|
||||
{% block title %}仪表盘 · SOCKS Manager{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h4 class="mb-4"><i class="bi bi-speedometer2"></i> 仪表盘</h4>
|
||||
<h5 class="mb-3"><i class="bi bi-speedometer2"></i> 仪表盘</h5>
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-3"><div class="card stat-card p-3">
|
||||
<div class="text-muted small">代理总数</div>
|
||||
<div class="stat-value">{{ total }}</div>
|
||||
</div></div>
|
||||
<div class="col-md-3"><div class="card stat-card p-3">
|
||||
<div class="text-muted small"><span class="status-dot dot-online"></span>在线</div>
|
||||
<div class="stat-value text-success">{{ online }}</div>
|
||||
</div></div>
|
||||
<div class="col-md-3"><div class="card stat-card p-3">
|
||||
<div class="text-muted small"><span class="status-dot dot-offline"></span>离线</div>
|
||||
<div class="stat-value text-danger">{{ offline }}</div>
|
||||
</div></div>
|
||||
<div class="col-md-3"><div class="card stat-card p-3">
|
||||
<div class="text-muted small">分组数</div>
|
||||
<div class="stat-value">{{ groups }}</div>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-globe"></i> 最近活跃代理</span>
|
||||
<button class="btn btn-outline-primary btn-sm" onclick="checkAll()">
|
||||
<i class="bi bi-arrow-clockwise"></i> 全部检测</button>
|
||||
<!-- 系统状态卡片 -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">CPU 使用率</div>
|
||||
<div class="stat-value text-info">{{ "%.1f"|format(s.system.cpu if s.system else 0) }}%</div>
|
||||
<div class="stat-sub">实时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if proxies %}
|
||||
<table class="table table-dark table-hover mb-0">
|
||||
<thead><tr><th>名称</th><th>地址</th><th>状态</th><th>延迟</th><th>最后检测</th></tr></thead>
|
||||
<tbody>
|
||||
{% for p in proxies %}
|
||||
<tr>
|
||||
<td>{{ p.name }}</td>
|
||||
<td><code>{{ p.host }}:{{ p.port }}</code></td>
|
||||
<td><span class="status-dot dot-{{ p.status }}"></span>{{ p.status }}</td>
|
||||
<td>{{ "%.1f"|format(p.latency_ms) if p.latency_ms else '-' }}ms</td>
|
||||
<td>{{ p.last_check.strftime('%Y-%m-%d %H:%M') if p.last_check else '-' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="text-center py-4 text-muted">暂无代理，<a href="/proxies/add" class="text-info">添加一个</a></div>
|
||||
{% endif %}
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">内存使用</div>
|
||||
<div class="stat-value text-warning">{{ s.system.mem_percent if s.system else 0 }}%</div>
|
||||
<div class="stat-sub">{{ s.system.mem_used_mb if s.system else 0 }} / {{ s.system.mem_total_mb if s.system else 0 }} MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">活跃连接</div>
|
||||
<div class="stat-value text-success">{{ s.active_connections }}</div>
|
||||
<div class="stat-sub">当前</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">今日日志</div>
|
||||
<div class="stat-value">{{ s.today_logs }}</div>
|
||||
<div class="stat-sub">条</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 业务概览 -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">代理实例</div>
|
||||
<div class="stat-value">{{ s.running_instances }}<span class="text-muted small"> / {{ s.total_instances }}</span></div>
|
||||
<div class="stat-sub">运行中 / 总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">活跃用户</div>
|
||||
<div class="stat-value text-primary">{{ s.active_users }}<span class="text-muted small"> / {{ s.total_users }}</span></div>
|
||||
<div class="stat-sub">可用 / 总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">入站流量</div>
|
||||
<div class="stat-value text-info">{{ "%.1f"|format((s.system.net_bytes_recv or 0) / 1024 / 1024) }} MB</div>
|
||||
<div class="stat-sub">累计</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">出站流量</div>
|
||||
<div class="stat-value text-info">{{ "%.1f"|format((s.system.net_bytes_sent or 0) / 1024 / 1024) }} MB</div>
|
||||
<div class="stat-sub">累计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实时指标图表 -->
|
||||
<div class="card">
|
||||
<div class="card-header"><span><i class="bi bi-journal-text"></i> 最近操作日志</span></div>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-graph-up"></i> 实时系统指标（最近 10 分钟）</span>
|
||||
<span class="text-muted small">每 10 秒刷新</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="metricsChart" height="80"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近审计日志 -->
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span><i class="bi bi-journal-text"></i> 最近操作</span>
|
||||
<a href="/logs" class="btn btn-sm btn-outline-secondary">查看全部</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-dark mb-0 table-sm">
|
||||
<thead><tr><th>时间</th><th>级别</th><th>操作</th><th>目标</th><th>详情</th></tr></thead>
|
||||
<table class="table table-dark table-sm">
|
||||
<thead><tr><th>时间</th><th>事件</th><th>用户</th><th>来源IP</th><th>详情</th></tr></thead>
|
||||
<tbody>
|
||||
{% for l in recent %}
|
||||
<tr>
|
||||
<td>{{ l.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
|
||||
<td><span class="badge bg-{{ 'success' if l.level=='INFO' else 'warning' if l.level=='WARN' else 'danger' }}">{{ l.level }}</span></td>
|
||||
<td>{{ l.action }}</td>
|
||||
<td>{{ l.target or '-' }}</td>
|
||||
<td>{{ l.detail or '-' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% set logs = namespace(count=0) %}
|
||||
{% for _ in range(0) %}{% endfor %}
|
||||
<tr><td colspan="5" class="text-center text-muted py-4">
|
||||
<a href="/logs">查看审计日志 →</a></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -75,14 +102,57 @@
|
||||
|
||||
{% block extra_script %}
|
||||
<script>
|
||||
async function checkAll() {
|
||||
const btn = event.currentTarget;
|
||||
btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 检测中...';
|
||||
// 实时指标图表
|
||||
const ctx = document.getElementById('metricsChart');
|
||||
const chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{ label: 'CPU %', data: [], borderColor: '#818cf8', backgroundColor: 'rgba(129,140,248,.1)',
|
||||
tension: 0.4, fill: true },
|
||||
{ label: '内存 %', data: [], borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,.1)',
|
||||
tension: 0.4, fill: true },
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { labels: { color: '#94a3b8' } },
|
||||
},
|
||||
scales: {
|
||||
x: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280' } },
|
||||
y: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280' }, min: 0, max: 100 },
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// 每 10 秒刷新
|
||||
async function refreshMetrics() {
|
||||
try {
|
||||
const r = await apiFetch('/health/check-all');
|
||||
toast(`检测完成: ${r.checked} 个, ${r.online} 在线, ${r.offline} 离线`, r.offline?'warning':'success');
|
||||
} catch(e) { toast('检测失败: '+e.message, 'danger'); }
|
||||
btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 全部检测';
|
||||
const r = await fetch('/api/stats/system');
|
||||
const data = await r.json();
|
||||
const history = data.history || [];
|
||||
if (history.length === 0) return;
|
||||
const labels = history.map(h => new Date(h.ts).toLocaleTimeString('zh-CN', {hour:'2-digit',minute:'2-digit',second:'2-digit'}));
|
||||
const cpuData = history.map(h => h.cpu);
|
||||
const memData = history.map(h => h.mem_percent);
|
||||
chart.data.labels = labels;
|
||||
chart.data.datasets[0].data = cpuData;
|
||||
chart.data.datasets[1].data = memData;
|
||||
chart.update('none');
|
||||
|
||||
// 更新 CPU 显示
|
||||
const latest = history[history.length-1];
|
||||
const cpuEl = document.querySelector('.stat-card .stat-value.text-info');
|
||||
if (cpuEl) cpuEl.textContent = latest.cpu.toFixed(1) + '%';
|
||||
const memEl = document.querySelectorAll('.stat-card .stat-value.text-warning')[0];
|
||||
if (memEl) memEl.textContent = latest.mem_percent + '%';
|
||||
const memSub = document.querySelectorAll('.stat-card .stat-sub')[1];
|
||||
if (memSub) memSub.textContent = latest.mem_used_mb + ' / ' + latest.mem_total_mb + ' MB';
|
||||
} catch(e) {}
|
||||
}
|
||||
setInterval(refreshMetrics, 10000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user