Your Name
0bd9bcac12
后端修复: - engine/instances.py: Socks5Server.start() 端口占用时死循环, 增加超时和异常透传 - engine/instances.py: import time 移至顶层 - engine/instances.py: sync_instances/start_instance 容忍单实例启动失败 - run.py: 启动时 sync_instances 失败不退出进程 - web/routes.py: instances start/restart/edit 路由捕获 OSError, flash 友好提示 - api/v1.py: instances start/restart/update API 返回 JSON 错误而非 500 崩溃 - web/routes.py: toggle_user/ban_user 支持 hidden 字段语义, 缺字段时切换状态 - web/routes.py: inject_nav 增加独立 nav.dashboard 和 page_name, 修复双 active bug - auth.py: login 路由添加 logging import, 修 NameError 前端重构: - templates/base.html: 全局对比度提升(--text #f1f5f9, --accent #a5b4fc), 标题色显式声明, alert/modal/progress/table 完整暗色样式 - templates/base.html: main-content padding-top 修复 navbar 遮挡内容 - templates/base.html: 侧边栏 active 高亮 (白字 + elevated bg + 左边框) - templates/base.html: 顶栏动态显示当前页面名 - templates/*.html: 统一 page-header 类, 所有图标按钮添加 title tooltip - templates/users.html: toggle/ban 表单添加 hidden enabled/ban 字段 - templates/connections.html: fmtBytes 改为 Jinja macro, 时间格式化 - templates/dashboard.html: 时间格式化为 YYYY-MM-DD HH:MM:SS, chart canvas 高度调整 - templates/logs.html: 时间格式化为可读格式 - templates/stats.html: 提升 chart 颜色对比度 - templates/system.html: 使用 time.localtime() 显示本地时间
103 lines
3.3 KiB
HTML
103 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}流量统计 · SOCKS Manager{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<h5><i class="bi bi-graph-up"></i> 流量统计</h5>
|
|
</div>
|
|
|
|
<!-- 流量趋势图表 -->
|
|
<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: '#cbd5e1' } } },
|
|
scales: {
|
|
x: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf', maxTicksLimit: 10 } },
|
|
y: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf' } },
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|