深度优化: 修复跨服务器登录、密码哈希、仪表盘UI、流量趋势等12项问题

### 严重修复
1. 跨服务器无法登录 - 新增SESSION_COOKIE_DOMAIN/SECURE/NAME配置
2. SOCKS5用户密码明文存储→bcrypt哈希（兼容自动迁移）
3. 仪表盘审计日志不显示→替换为空循环为真实API加载
4. 管理员登录防爆破未生效→auth.py集成check_fail2ban

### 中等问题修复
5. 流量趋势图表无数据→新增record_traffic_snapshot后台线程
6. 网络流量累计值跳变→新增基线差值机制
7. asyncio连接计数非线程安全→加锁保护

### 优化改进
8. API密钥页面截断文本修复
9. 新增gunicorn/bcrypt依赖
10. 更新README环境变量文档和生产建议
11. 登录密码常量时间对比防时序攻击
12. 仪表盘图表添加animation:false防卡顿

templates/dashboard.html

@@ -56,14 +56,14 @@
     <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 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 class="stat-sub">累计（系统级）</div>
     </div>
   </div>
 </div>
@@ -80,7 +80,7 @@
 </div>
 
 <!-- 最近审计日志 -->
-<div class="card">
+<div class="card mt-3">
   <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>
@@ -88,11 +88,9 @@
   <div class="card-body p-0">
     <table class="table table-dark table-sm">
       <thead><tr><th>时间</th><th>事件</th><th>用户</th><th>来源IP</th><th>详情</th></tr></thead>
-      <tbody>
-        {% set logs = namespace(count=0) %}
-        {% for _ in range(0) %}{% endfor %}
+      <tbody id="recentLogsBody">
         <tr><td colspan="5" class="text-center text-muted py-4">
-          <a href="/logs">查看审计日志 &rarr;</a></td></tr>
+          加载中...</td></tr>
       </tbody>
     </table>
   </div>
@@ -118,6 +116,7 @@ const chart = new Chart(ctx, {
   options: {
     responsive: true,
     maintainAspectRatio: false,
+    animation: false,
     plugins: {
       legend: { labels: { color: '#94a3b8' } },
     },
@@ -128,6 +127,36 @@ const chart = new Chart(ctx, {
   }
 });
 
+// 加载最近日志
+async function loadRecentLogs() {
+  try {
+    const r = await fetch('/api/logs?page=1');
+    const data = await r.json();
+    const logs = data.logs || [];
+    const tbody = document.getElementById('recentLogsBody');
+    if (logs.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-4">暂无日志</td></tr>';
+      return;
+    }
+    tbody.innerHTML = logs.slice(0, 5).map(l => {
+      let badgeClass = 'secondary';
+      if (l.event.includes('success')) badgeClass = 'success';
+      else if (l.event.includes('fail') || l.event.includes('reject')) badgeClass = 'danger';
+      else if (l.event.includes('start') || l.event.includes('stop')) badgeClass = 'warning';
+      return `<tr>
+        <td><small>${l.timestamp.slice(0,19).replace('T',' ')}</small></td>
+        <td><span class="badge badge-${badgeClass}">${l.event}</span></td>
+        <td>${l.user || '-'}</td>
+        <td><code>${l.src_ip || '-'}</code></td>
+        <td><small class="text-muted">${l.detail || '-'}</small></td>
+      </tr>`;
+    }).join('');
+  } catch(e) {
+    document.getElementById('recentLogsBody').innerHTML =
+      '<tr><td colspan="5" class="text-center text-muted py-4">加载失败</td></tr>';
+  }
+}
+
 // 每 10 秒刷新
 async function refreshMetrics() {
   try {
@@ -143,7 +172,6 @@ async function refreshMetrics() {
     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) + '%';
@@ -153,6 +181,8 @@ async function refreshMetrics() {
     if (memSub) memSub.textContent = latest.mem_used_mb + ' / ' + latest.mem_total_mb + ' MB';
   } catch(e) {}
 }
+
+loadRecentLogs();
 setInterval(refreshMetrics, 10000);
 </script>
 {% endblock %}