Your Name
558bd8153f
架构: - 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 项功能测试全部通过
101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}流量统计 · SOCKS Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
<h5 class="mb-3"><i class="bi bi-graph-up"></i> 流量统计</h5>
|
|
|
|
<!-- 流量趋势图表 -->
|
|
<div class="card mb-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<span><i class="bi bi-bar-chart"></i> 近 30 天流量趋势</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="trafficChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户流量排名 -->
|
|
<div class="card mb-3">
|
|
<div class="card-header"><span><i class="bi bi-people"></i> 用户流量排名</span></div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-dark table-sm">
|
|
<thead><tr><th>用户名</th><th>入站</th><th>出站</th><th>总计</th><th>流量上限</th><th>用量</th></tr></thead>
|
|
<tbody>
|
|
{% for u in users[:10] %}
|
|
<tr>
|
|
<td>{{ u.username }}</td>
|
|
<td>{{ u.bytes_in_mb }} MB</td>
|
|
<td>{{ u.bytes_out_mb }} MB</td>
|
|
<td><strong>{{ u.total_mb }} MB</strong></td>
|
|
<td>{% if u.limit_mb %}{{ u.limit_mb }} MB{% else %}不限{% endif %}</td>
|
|
<td>
|
|
{% if u.usage_pct is not none %}
|
|
<div class="progress" style="height:18px">
|
|
<div class="progress-bar bg-{{ 'danger' if u.usage_pct>90 else 'warning' if u.usage_pct>70 else 'info' }}"
|
|
style="width:{{ u.usage_pct }}%;min-width:2rem">{{ "%.0f"|format(u.usage_pct) }}%</div>
|
|
</div>
|
|
{% else %}<span class="text-muted">不限</span>{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% if not users %}
|
|
<div class="text-center py-4 text-muted">暂无数据</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 实例流量 -->
|
|
<div class="card">
|
|
<div class="card-header"><span><i class="bi bi-server"></i> 各实例流量</span></div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-dark table-sm">
|
|
<thead><tr><th>实例</th><th>地址</th><th>入站</th><th>出站</th><th>连接数</th></tr></thead>
|
|
<tbody>
|
|
{% for inst in instances %}
|
|
<tr>
|
|
<td>{{ inst.name }}</td>
|
|
<td><code>{{ inst.host }}:{{ inst.port }}</code></td>
|
|
<td>{{ inst.bytes_in_mb }} MB</td>
|
|
<td>{{ inst.bytes_out_mb }} MB</td>
|
|
<td>{{ inst.total_connections }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% if not instances %}
|
|
<div class="text-center py-4 text-muted">暂无数据</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_script %}
|
|
<script>
|
|
const ctx = document.getElementById('trafficChart');
|
|
const data = {{ trend | tojson }};
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.map(d => d.date),
|
|
datasets: [
|
|
{ label: '入站 (MB)', data: data.map(d => d.bytes_in_mb),
|
|
backgroundColor: 'rgba(129,140,248,.7)' },
|
|
{ label: '出站 (MB)', data: data.map(d => d.bytes_out_mb),
|
|
backgroundColor: 'rgba(16,185,129,.7)' },
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend: { labels: { color: '#94a3b8' } } },
|
|
scales: {
|
|
x: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280', maxTicksLimit: 15 } },
|
|
y: { grid: { color: '#1f2335' }, ticks: { color: '#6b7280' } },
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|