coder/llm-proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增后台管理系统

Browse Source 
功能模块:
- 仪表盘: 请求统计、成功率、提供商状态、调用流程说明
- 提供商管理: 查看提供商列表、测试连接、查看详情
- 模型管理: 模型别名映射、提供商对应关系
- 日志查看: 实时日志、自动刷新
- 系统配置: 配置信息查看

端口: 19008
This commit is contained in:
hubian
2026-04-08 15:49:47 +08:00
parent 7c77cb9101
commit 292ff7b03e
7 changed files with 1080 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
admin/templates/providers.html Normal file
View File

@@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>提供商管理 - LLM Proxy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<style>
.gradient-bg { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="flex">
<aside class="w-64 bg-slate-800 min-h-screen fixed left-0 top-0">
<div class="p-6">
<h1 class="text-white text-xl font-bold flex items-center gap-2">
<i class="ri-route-line text-2xl text-purple-400"></i>
LLM Proxy
</h1>
<p class="text-slate-400 text-sm mt-1">后台管理</p>
</div>
<nav class="mt-6">
<a href="/" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-dashboard-line"></i><span>仪表盘</span>
</a>
<a href="/providers" class="flex items-center gap-3 px-6 py-3 bg-slate-700 text-white">
<i class="ri-server-line"></i><span>提供商管理</span>
</a>
<a href="/models" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-cpu-line"></i><span>模型管理</span>
</a>
<a href="/logs" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-file-list-line"></i><span>日志查看</span>
</a>
<a href="/config" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover:text-white">
<i class="ri-settings-3-line"></i><span>系统配置</span>
</a>
</nav>
</aside>
<main class="ml-64 flex-1 p-8">
<h1 class="text-2xl font-bold text-gray-800 mb-6">提供商管理</h1>
<!-- 提供商列表 -->
<div id="providerList" class="space-y-4">
<p class="text-gray-500">加载中...</p>
</div>
</main>
</div>
<!-- 详情弹窗 -->
<div id="detailModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
<div class="bg-white rounded-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
<div class="p-6 border-b flex justify-between items-center">
<h2 class="text-xl font-bold text-gray-800" id="modalTitle">提供商详情</h2>
<button onclick="closeModal()" class="text-gray-400"><i class="ri-close-line text-2xl"></i></button>
</div>
<div class="p-6 overflow-auto flex-1" id="modalContent"></div>
</div>
</div>
<script>
async function loadProviders() {
const res = await fetch('/api/providers');
const providers = await res.json();
const container = document.getElementById('providerList');
if (providers.length === 0) {
container.innerHTML = '<p class="text-gray-500">暂无提供商</p>';
return;
}
container.innerHTML = providers.map(p => `
<div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<span class="w-10 h-10 ${p.available ? 'bg-green-500' : 'bg-red-500'} text-white rounded-lg flex items-center justify-center text-lg font-bold">
${p.priority}
</span>
<div>
<h3 class="font-semibold text-gray-800 text-lg">${p.name}</h3>
<p class="text-sm text-gray-500">优先级 ${p.priority}</p>
</div>
</div>
<div class="flex items-center gap-3">
<span class="px-3 py-1 rounded-full text-sm ${p.available ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'}">
${p.available ? '● 可用' : '○ 不可用'}
</span>
<span class="px-3 py-1 rounded-full text-sm ${p.enabled ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'}">
${p.enabled ? '已启用' : '已禁用'}
</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4 text-sm">
<div>
<p class="text-gray-500">API地址</p>
<p class="text-gray-800 truncate">${p.base_url}</p>
</div>
<div>
<p class="text-gray-500">超时时间</p>
<p class="text-gray-800">${p.timeout}s</p>
</div>
<div>
<p class="text-gray-500">支持模型</p>
<div class="flex flex-wrap gap-1 mt-1">
${p.models.map(m => `<span class="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">${m}</span>`).join('')}
</div>
</div>
<div>
<p class="text-gray-500">请求统计</p>
<p class="text-gray-800">${p.request_count} 请求 · ${p.success_count} 成功</p>
</div>
</div>
<div class="flex gap-2">
<button onclick="testProvider('${p.name}')" class="px-4 py-2 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600">
<i class="ri-refresh-line mr-1"></i> 测试连接
</button>
<button onclick="viewDetail('${p.name}')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50">
<i class="ri-eye-line mr-1"></i> 详情
</button>
</div>
${p.last_error ? `
<div class="mt-4 p-3 bg-red-50 rounded-lg text-sm text-red-600">
<i class="ri-error-warning-line mr-1"></i> 最后错误: ${p.last_error}
</div>
` : ''}
</div>
</div>
`).join('');
}
async function testProvider(name) {
const btn = event.target;
btn.disabled = true;
btn.innerHTML = '<i class="ri-loader-4-line animate-spin mr-1"></i> 测试中...';
try {
const res = await fetch(`/api/providers/${name}/test`, { method: 'POST' });
const data = await res.json();
if (data.success) {
alert('✅ 连接成功！');
} else {
alert('❌ 连接失败: ' + data.error);
}
} catch (e) {
alert('测试失败: ' + e.message);
}
btn.disabled = false;
btn.innerHTML = '<i class="ri-refresh-line mr-1"></i> 测试连接';
loadProviders();
}
async function viewDetail(name) {
const res = await fetch(`/api/providers/${name}`);
const data = await res.json();
document.getElementById('modalTitle').textContent = data.name;
document.getElementById('modalContent').innerHTML = `
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-sm text-gray-500">API地址</p>
<p class="font-medium">${data.base_url}</p>
</div>
<div>
<p class="text-sm text-gray-500">默认模型</p>
<p class="font-medium">${data.default_model}</p>
</div>
<div>
<p class="text-sm text-gray-500">优先级</p>
<p class="font-medium">${data.priority}</p>
</div>
<div>
<p class="text-sm text-gray-500">超时</p>
<p class="font-medium">${data.timeout}s</p>
</div>
</div>
<div>
<p class="text-sm text-gray-500 mb-2">支持模型</p>
<div class="flex flex-wrap gap-2">
${data.models.map(m => `<span class="px-3 py-1 bg-gray-100 rounded-lg text-sm">${m}</span>`).join('')}
</div>
</div>
<div class="p-4 bg-gray-50 rounded-lg">
<h4 class="font-medium mb-2">状态信息</h4>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<p class="text-gray-500">可用状态</p>
<p class="${data.status.available ? 'text-green-600' : 'text-red-600'}">
${data.status.available ? '✓ 可用' : '✗ 不可用'}
</p>
</div>
<div>
<p class="text-gray-500">错误次数</p>
<p>${data.status.error_count}</p>
</div>
<div>
<p class="text-gray-500">请求次数</p>
<p>${data.status.request_count}</p>
</div>
<div>
<p class="text-gray-500">成功次数</p>
<p>${data.status.success_count}</p>
</div>
</div>
</div>
</div>
`;
document.getElementById('detailModal').classList.remove('hidden');
document.getElementById('detailModal').classList.add('flex');
}
function closeModal() {
document.getElementById('detailModal').classList.add('hidden');
document.getElementById('detailModal').classList.remove('flex');
}
loadProviders();
</script>
</body>
</html>