Test

Sleeping

App Files Files Community

XCAPI commited on Nov 11, 2024

Commit

aee6f2b

verified ·

1 Parent(s): 2f8351b

Update admin.html

Browse files

Files changed (1) hide show

admin.html +289 -249

admin.html CHANGED Viewed

@@ -1,249 +1,289 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>代理端点管理</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            max-width: 1000px;
-            margin: 20px auto;
-            padding: 0 20px;
-        }
-        .endpoint-group {
-            margin: 20px 0;
-            padding: 15px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-        }
-        .endpoint {
-            display: flex;
-            align-items: center;
-            margin: 10px 0;
-            padding: 10px;
-            border: 1px solid #eee;
-            border-radius: 4px;
-            background-color: #f9f9f9;
-        }
-        .endpoint input[type="text"] {
-            flex: 1;
-            margin-right: 10px;
-            padding: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        .endpoint input[type="number"] {
-            width: 80px;
-            margin: 0 10px;
-            padding: 8px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        .endpoint input[type="checkbox"] {
-            margin: 0 10px;
-            transform: scale(1.2);
-        }
-        button {
-            padding: 8px 15px;
-            margin: 5px;
-            cursor: pointer;
-            border: none;
-            border-radius: 4px;
-            background-color: #4CAF50;
-            color: white;
-        }
-        button:hover {
-            background-color: #45a049;
-        }
-        button.delete {
-            background-color: #f44336;
-        }
-        button.delete:hover {
-            background-color: #da190b;
-        }
-        .status {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 15px;
-            border-radius: 4px;
-            display: none;
-            z-index: 1000;
-        }
-        .success {
-            background-color: #4CAF50;
-            color: white;
-        }
-        .error {
-            background-color: #f44336;
-            color: white;
-        }
-        h2 {
-            color: #333;
-            border-bottom: 2px solid #4CAF50;
-            padding-bottom: 10px;
-        }
-        .controls {
-            margin: 20px 0;
-            padding: 10px;
-            background-color: #f5f5f5;
-            border-radius: 4px;
-            text-align: right;
-        }
-    </style>
-</head>
-<body>
-<h1>代理端点管理</h1>
-<div class="endpoint-group">
-    <h2>Models 端点</h2>
-    <div id="modelsEndpoints"></div>
-    <button onclick="addEndpoint('models')">添加 Models 端点</button>
-</div>
-<div class="endpoint-group">
-    <h2>Chat 端点</h2>
-    <div id="chatEndpoints"></div>
-    <button onclick="addEndpoint('chat')">添加 Chat 端点</button>
-</div>
-<div class="controls">
-    <button onclick="saveConfig()">保存所有配置</button>
-    <button onclick="logout()" style="background-color: #f44336;">退出登录</button>
-</div>
-<div id="status" class="status"></div>
-<script>
-    // 获取存储的密钥
-    let apiKey = localStorage.getItem('apiKey');
-    // 如果没有密钥，提示输入
-    if (!apiKey) {
-        apiKey = prompt('请输入访问密钥:');
-        if (apiKey) {
-            localStorage.setItem('apiKey', apiKey);
-        } else {
-            window.location.href = '/';
-        }
-    }
-    // 显示状态信息
-    function showStatus(message, isError = false) {
-        const status = document.getElementById('status');
-        status.textContent = message;
-        status.className = 'status ' + (isError ? 'error' : 'success');
-        status.style.display = 'block';
-        setTimeout(() => status.style.display = 'none', 3000);
-    }
-    // 添加端点
-    function addEndpoint(type, url = '', weight = 1, enabled = true) {
-        const container = document.getElementById(type + 'Endpoints');
-        const div = document.createElement('div');
-        div.className = 'endpoint';
-        div.innerHTML = `
-                <input type="text" placeholder="输入端点URL" value="${url}">
-                <input type="number" placeholder="权重" value="${weight}" min="1">
-                <label>
-                    <input type="checkbox" ${enabled ? 'checked' : ''}>
-                    启用
-                </label>
-                <button class="delete" onclick="this.parentElement.remove()">删除</button>
-            `;
-        container.appendChild(div);
-    }
-    // 获取端点配置
-    function getEndpointsConfig(type) {
-        const endpoints = [];
-        document.querySelectorAll(`#${type}Endpoints .endpoint`).forEach(el => {
-            endpoints.push({
-                url: el.querySelector('input[type="text"]').value.trim(),
-                weight: parseInt(el.querySelector('input[type="number"]').value) || 1,
-                enabled: el.querySelector('input[type="checkbox"]').checked
-            });
-        });
-        return endpoints;
-    }
-    // 带认证的fetch
-    async function fetchWithAuth(url, options = {}) {
-        const headers = {
-            ...options.headers,
-            'Authorization': apiKey
-        };
-        const response = await fetch(url, { ...options, headers });
-        if (response.status === 401) {
-            localStorage.removeItem('apiKey');
-            window.location.reload();
-            return null;
-        }
-        return response;
-    }
-    // 保存配置
-    async function saveConfig() {
-        const config = {
-            models: getEndpointsConfig('models'),
-            chat: getEndpointsConfig('chat')
-        };
-        try {
-            const response = await fetchWithAuth('/admin/config', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(config)
-            });
-            if (!response) return;
-            if (response.ok) {
-                showStatus('配置已保存');
-            } else {
-                showStatus('保存失败: ' + await response.text(), true);
-            }
-        } catch (error) {
-            showStatus('保存失败: ' + error.message, true);
-        }
-    }
-    // 加载配置
-    async function loadConfig() {
-        try {
-            const response = await fetchWithAuth('/admin/config');
-            if (!response) return;
-            const config = await response.json();
-            // 清空现有配置
-            document.getElementById('modelsEndpoints').innerHTML = '';
-            document.getElementById('chatEndpoints').innerHTML = '';
-            // 加载Models端点
-            config.models.forEach(ep => {
-                addEndpoint('models', ep.url, ep.weight, ep.enabled);
-            });
-            // 加载Chat端点
-            config.chat.forEach(ep => {
-                addEndpoint('chat', ep.url, ep.weight, ep.enabled);
-            });
-        } catch (error) {
-            showStatus('加载配置失败: ' + error.message, true);
-        }
-    }
-    // 退出登录
-    function logout() {
-        localStorage.removeItem('apiKey');
-        window.location.reload();
-    }
-    // 页面加载时获取配置
-    document.addEventListener('DOMContentLoaded', loadConfig);
-</script>
-</body>
-</html>

+<!DOCTYPE html>
+<html>
+<head>
+    <title>代理端点管理</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 20px auto;
+            padding: 0 20px;
+        }
+        .endpoint-group {
+            margin: 20px 0;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+        .endpoint {
+            display: flex;
+            align-items: center;
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+        }
+        .endpoint input[type="text"] {
+            flex: 1;
+            margin-right: 10px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .endpoint input[type="number"] {
+            width: 80px;
+            margin: 0 10px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        .endpoint input[type="checkbox"] {
+            margin: 0 10px;
+            transform: scale(1.2);
+        }
+        button {
+            padding: 8px 15px;
+            margin: 5px;
+            cursor: pointer;
+            border: none;
+            border-radius: 4px;
+            background-color: #4CAF50;
+            color: white;
+        }
+        button:hover {
+            background-color: #45a049;
+        }
+        button.delete {
+            background-color: #f44336;
+        }
+        button.delete:hover {
+            background-color: #da190b;
+        }
+        .status {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px;
+            border-radius: 4px;
+            display: none;
+            z-index: 1000;
+        }
+        .success {
+            background-color: #4CAF50;
+            color: white;
+        }
+        .error {
+            background-color: #f44336;
+            color: white;
+        }
+        h2 {
+            color: #333;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 10px;
+        }
+        .controls {
+            margin: 20px 0;
+            padding: 10px;
+            background-color: #f5f5f5;
+            border-radius: 4px;
+            text-align: right;
+        }
+        .stats-group {
+            margin: 20px 0;
+        }
+        .stat-item {
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+        }
+        .stat-item p {
+            margin: 5px 0;
+        }
+        .blocked {
+            background-color: #ffebee;
+        }
+    </style>
+</head>
+<body>
+<h1>代理端点管理</h1>
+<div class="endpoint-group">
+    <h2>Models 端点</h2>
+    <div id="modelsEndpoints"></div>
+    <button onclick="addEndpoint('models')">添加 Models 端点</button>
+</div>
+<div class="endpoint-group">
+    <h2>Chat 端点</h2>
+    <div id="chatEndpoints"></div>
+    <button onclick="addEndpoint('chat')">添加 Chat 端点</button>
+</div>
+<div class="stats-group">
+    <h2>请求统计</h2>
+    <div id="statsData"></div>
+</div>
+<div class="controls">
+    <button onclick="saveConfig()">保存所有配置</button>
+    <button onclick="logout()" style="background-color: #f44336;">退出登录</button>
+</div>
+<div id="status" class="status"></div>
+<script>
+    // 获取存储的密钥
+    let apiKey = localStorage.getItem('apiKey');
+    // 如果没有密钥，提示输入
+    if (!apiKey) {
+        apiKey = prompt('请输入访问密钥:');
+        if (apiKey) {
+            localStorage.setItem('apiKey', apiKey);
+        } else {
+            window.location.href = '/';
+        }
+    }
+    // 显示状态信息
+    function showStatus(message, isError = false) {
+        const status = document.getElementById('status');
+        status.textContent = message;
+        status.className = 'status ' + (isError ? 'error' : 'success');
+        status.style.display = 'block';
+        setTimeout(() => status.style.display = 'none', 3000);
+    }
+    // 添加端点
+    function addEndpoint(type, url = '', weight = 1, enabled = true) {
+        const container = document.getElementById(type + 'Endpoints');
+        const div = document.createElement('div');
+        div.className = 'endpoint';
+        div.innerHTML = `
+                <input type="text" placeholder="输入端点URL" value="${url}">
+                <input type="number" placeholder="权重" value="${weight}" min="1">
+                <label>
+                    <input type="checkbox" ${enabled ? 'checked' : ''}>
+                    启用
+                </label>
+                <button class="delete" onclick="this.parentElement.remove()">删除</button>
+            `;
+        container.appendChild(div);
+    }
+    // 获取端点配置
+    function getEndpointsConfig(type) {
+        const endpoints = [];
+        document.querySelectorAll(`#${type}Endpoints .endpoint`).forEach(el => {
+            endpoints.push({
+                url: el.querySelector('input[type="text"]').value.trim(),
+                weight: parseInt(el.querySelector('input[type="number"]').value) || 1,
+                enabled: el.querySelector('input[type="checkbox"]').checked
+            });
+        });
+        return endpoints;
+    }
+    // 带认证的fetch
+    async function fetchWithAuth(url, options = {}) {
+        const headers = {
+            ...options.headers,
+            'Authorization': apiKey
+        };
+        const response = await fetch(url, { ...options, headers });
+        if (response.status === 401) {
+            localStorage.removeItem('apiKey');
+            window.location.reload();
+            return null;
+        }
+        return response;
+    }
+    // 保存配置
+    async function saveConfig() {
+        const config = {
+            models: getEndpointsConfig('models'),
+            chat: getEndpointsConfig('chat')
+        };
+        try {
+            const response = await fetchWithAuth('/admin/config', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(config)
+            });
+            if (!response) return;
+            if (response.ok) {
+                showStatus('配置已保存');
+                loadConfig(); // 重新加载配置以更新统计数据
+            } else {
+                showStatus('保存失败: ' + await response.text(), true);
+            }
+        } catch (error) {
+            showStatus('保存失败: ' + error.message, true);
+        }
+    }
+    // 加载配置和统计数据
+    async function loadConfig() {
+        try {
+            const response = await fetchWithAuth('/admin/config');
+            if (!response) return;
+            const config = await response.json();
+            // 清空现有配置
+            document.getElementById('modelsEndpoints').innerHTML = '';
+            document.getElementById('chatEndpoints').innerHTML = '';
+            document.getElementById('statsData').innerHTML = '';
+            // 加载Models端点
+            config.models.forEach(ep => {
+                addEndpoint('models', ep.url, ep.weight, ep.enabled);
+            });
+            // 加载Chat端点
+            config.chat.forEach(ep => {
+                addEndpoint('chat', ep.url, ep.weight, ep.enabled);
+            });
+            // 显示统计数据
+            const statsHtml = Object.entries(config.stats).map(([fingerprint, stat]) => `
+                    <div class="stat-item ${stat.blocked ? 'blocked' : ''}">
+                        <p><strong>指纹:</strong> ${fingerprint}</p>
+                        <p><strong>IP:</strong> ${stat.ip}</p>
+                        <p><strong>设备:</strong> ${stat.user_agent}</p>
+                        <p><strong>请求次数:</strong> ${stat.chat_count}</p>
+                        <p><strong>最后访问:</strong> ${new Date(stat.last_access).toLocaleString()}</p>
+                        <p><strong>状态:</strong> ${stat.blocked ? '已拉黑' : '正常'}</p>
+                    </div>
+                `).join('');
+            document.getElementById('statsData').innerHTML = statsHtml || '<p>暂无统计数据</p>';
+        } catch (error) {
+            showStatus('加载配置失败: ' + error.message, true);
+        }
+    }
+    // 退出登录
+    function logout() {
+        localStorage.removeItem('apiKey');
+        window.location.reload();
+    }
+    // 页面加载时获取配置
+    document.addEventListener('DOMContentLoaded', loadConfig);
+    // 定期刷新统计数据
+    setInterval(loadConfig, 30000); // 每30秒刷新一次
+</script>
+</body>
+</html>