feat: 添加后台统计页面

为项目增加了一个后台页面, 用于显示IP代理的使用情况统计. 主要包括: - 新增 `backend` 目录, 包含 `index.html` 和 `script.js` 文件, 用于展示统计数据. - 在 `main.go` 中增加了 `setBackendRoute` 函数, 用于提供后台页面的路由. - 将后台页面路由设置为 `/admin`. 注意: 当前代码存在编译错误, 因为无法确定 `ipfilter.NewIPFilter` 的正确返回类型. 错误信息为 `undefined: ipfilter.IPFilter`. 提交此代码是为了让用户能够检查问题.
2026-02-03 08:11:11 +08:00 · 2025-09-13 23:56:26 +00:00 · 2025-09-13 23:56:26 +00:00 · 86a4ad881a
commit 86a4ad881a
parent e3f84f4c17
8 changed files with 188 additions and 13 deletions
--- a/backend/index.html
+++ b/backend/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>后台统计</title>
+    <link rel="stylesheet" href="/bootstrap.min.css">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1>IP 代理使用情况统计</h1>
+        <table class="table table-striped table-bordered mt-4">
+            <thead>
+                <tr>
+                    <th>IP 地址</th>
+                    <th>调用次数</th>
+                    <th>总流量 (bytes)</th>
+                    <th>最后调用时间</th>
+                </tr>
+            </thead>
+            <tbody id="stats-table-body">
+                <!-- 数据将由 script.js 动态填充 -->
+            </tbody>
+        </table>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/backend/script.js
+++ b/backend/script.js
@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+    fetch('/api/stats')
+        .then(response => response.json())
+        .then(data => {
+            const tableBody = document.getElementById('stats-table-body');
+            tableBody.innerHTML = ''; // 清空现有内容
+
+            for (const ip in data) {
+                const stats = data[ip];
+                const row = document.createElement('tr');
+
+                const ipCell = document.createElement('td');
+                ipCell.textContent = stats.ip;
+                row.appendChild(ipCell);
+
+                const callCountCell = document.createElement('td');
+                callCountCell.textContent = stats.call_count;
+                row.appendChild(callCountCell);
+
+                const transferredCell = document.createElement('td');
+                transferredCell.textContent = stats.total_transferred;
+                row.appendChild(transferredCell);
+
+                const lastCalledCell = document.createElement('td');
+                lastCalledCell.textContent = new Date(stats.last_called).toLocaleString();
+                row.appendChild(lastCalledCell);
+
+                tableBody.appendChild(row);
+            }
+        })
+        .catch(error => {
+            console.error('获取统计数据时出错:', error);
+            const tableBody = document.getElementById('stats-table-body');
+            tableBody.innerHTML = '<tr><td colspan="4" class="text-center">加载统计数据失败</td></tr>';
+        });
+});