Test

Sleeping

App Files Files Community

XCAPI commited on Nov 11, 2024

Commit

43f7389

verified ·

1 Parent(s): 533e81b

Update admin.html

Browse files

Files changed (1) hide show

admin.html +307 -249

admin.html CHANGED Viewed

@@ -1,249 +1,307 @@
-<!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: 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="endpoint-group">
+        <h2>IP 黑名单</h2>
+        <div class="endpoint">
+            <input type="text" id="ipInput" placeholder="输入要封禁的IP地址">
+            <button onclick="addToBlacklist(document.getElementById('ipInput').value)">添加到黑名单</button>
+        </div>
+        <div id="blacklistEntries"></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;
+        }
+        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 = '';
+                config.models.forEach(ep => {
+                    addEndpoint('models', ep.url, ep.weight, ep.enabled);
+                });
+                config.chat.forEach(ep => {
+                    addEndpoint('chat', ep.url, ep.weight, ep.enabled);
+                });
+                // 加载黑名单
+                loadBlacklist();
+            } catch (error) {
+                showStatus('加载配置���败: ' + error.message, true);
+            }
+        }
+        async function loadBlacklist() {
+            try {
+                const response = await fetchWithAuth('/admin/blacklist');
+                const blacklist = await response.json();
+                const container = document.getElementById('blacklistEntries');
+                container.innerHTML = '';
+                blacklist.forEach(ip => {
+                    const div = document.createElement('div');
+                    div.className = 'endpoint';
+                    div.innerHTML = `
+                        <span>${ip}</span>
+                        <button class="delete" onclick="removeFromBlacklist('${ip}')">解除封禁</button>
+                    `;
+                    container.appendChild(div);
+                });
+            } catch (error) {
+                showStatus('加载黑名单失败: ' + error.message, true);
+            }
+        }
+        async function addToBlacklist(ip) {
+            if (!ip) return;
+            try {
+                const response = await fetchWithAuth('/admin/blacklist', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ip: ip, action: 'add'})
+                });
+                if (response.ok) {
+                    showStatus('IP已添加到黑名单');
+                    document.getElementById('ipInput').value = '';
+                    loadBlacklist();
+                }
+            } catch (error) {
+                showStatus('添加失败: ' + error.message, true);
+            }
+        }
+        async function removeFromBlacklist(ip) {
+            try {
+                const response = await fetchWithAuth('/admin/blacklist', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({ip: ip, action: 'remove'})
+                });
+                if (response.ok) {
+                    showStatus('IP已从黑名单移除');
+                    loadBlacklist();
+                }
+            } catch (error) {
+                showStatus('移除失败: ' + error.message, true);
+            }
+        }
+        function logout() {
+            localStorage.removeItem('apiKey');
+            window.location.reload();
+        }
+        document.addEventListener('DOMContentLoaded', loadConfig);
+    </script>
+</body>
+</html>