新增后台管理系统

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

端口: 19008

README.md

@@ -188,8 +188,37 @@ llm-proxy/
 └── README.md
 ```
 
+## 后台管理
+
+后台管理系统提供可视化监控和配置查看。
+
+启动后台：
+
+```bash
+python admin/app.py
+```
+
+后台地址: http://localhost:19008
+
+### 功能模块
+
+| 模块 | 功能 |
+|------|------|
+| 仪表盘 | 统计数据、提供商状态、调用流程 |
+| 提供商管理 | 查看提供商、测试连接、详情 |
+| 模型管理 | 模型别名、目标模型、提供商映射 |
+| 日志查看 | 实时日志、自动刷新 |
+| 系统配置 | 配置查看 |
+
 ## 版本历史
 
+### v0.2.0 (2026-04-08)
+- 新增后台管理系统
+- 仪表盘统计
+- 提供商管理
+- 模型管理
+- 日志查看
+
 ### v0.1.0 (2026-04-08)
 - 初始版本
 - 多提供商支持

admin/app.py

@@ -0,0 +1,288 @@
+"""
+大模型API中转系统 - 后台管理系统
+"""
+
+from flask import Flask, render_template, jsonify, request
+from flask_cors import CORS
+import json
+import time
+from datetime import datetime
+from pathlib import Path
+import sys
+
+# 添加父目录到路径
+sys.path.insert(0, str(Path(__file__).parent.parent))
+from config.settings import (
+    UPSTREAM_PROVIDERS, MODEL_ALIASES, SERVER_CONFIG, 
+    LOG_CONFIG, RETRY_CONFIG
+)
+
+app = Flask(__name__)
+CORS(app)
+
+# 数据目录
+DATA_DIR = Path(__file__).parent.parent / 'data'
+DATA_DIR.mkdir(exist_ok=True)
+STATS_FILE = DATA_DIR / 'stats.json'
+LOGS_DIR = Path(__file__).parent.parent / 'logs'
+
+# 提供商状态（从主程序同步）
+provider_status = {}
+for provider in UPSTREAM_PROVIDERS:
+    provider_status[provider['name']] = {
+        'available': True,
+        'last_check': None,
+        'error_count': 0,
+        'last_error': None,
+        'request_count': 0,
+        'success_count': 0,
+        'total_tokens': 0,
+    }
+
+def load_stats():
+    """加载统计数据"""
+    if STATS_FILE.exists():
+        return json.loads(STATS_FILE.read_text(encoding='utf-8'))
+    return {
+        'total_requests': 0,
+        'total_success': 0,
+        'total_errors': 0,
+        'total_tokens': 0,
+        'requests_today': 0,
+        'providers': {},
+        'last_updated': None
+    }
+
+def save_stats(stats):
+    """保存统计数据"""
+    stats['last_updated'] = datetime.now().isoformat()
+    STATS_FILE.write_text(json.dumps(stats, ensure_ascii=False, indent=2), encoding='utf-8')
+
+# ============ 页面路由 ============
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/providers')
+def providers_page():
+    return render_template('providers.html')
+
+@app.route('/models')
+def models_page():
+    return render_template('models.html')
+
+@app.route('/logs')
+def logs_page():
+    return render_template('logs.html')
+
+@app.route('/config')
+def config_page():
+    return render_template('config.html')
+
+# ============ API路由 ============
+
+@app.route('/api/stats')
+def api_stats():
+    """获取统计数据"""
+    stats = load_stats()
+    
+    # 统计提供商状态
+    available_count = sum(1 for p in UPSTREAM_PROVIDERS if provider_status.get(p['name'], {}).get('available', True))
+    
+    # 今日请求
+    today = datetime.now().strftime('%Y-%m-%d')
+    
+    return jsonify({
+        'total_requests': stats.get('total_requests', 0),
+        'total_success': stats.get('total_success', 0),
+        'total_errors': stats.get('total_errors', 0),
+        'total_tokens': stats.get('total_tokens', 0),
+        'providers_count': len(UPSTREAM_PROVIDERS),
+        'available_providers': available_count,
+        'models_count': len(MODEL_ALIASES),
+        'uptime': time.time(),
+    })
+
+@app.route('/api/providers')
+def api_providers():
+    """获取提供商列表"""
+    stats = load_stats()
+    providers_data = []
+    
+    for provider in sorted(UPSTREAM_PROVIDERS, key=lambda x: x['priority']):
+        p_stats = stats.get('providers', {}).get(provider['name'], {})
+        p_status = provider_status.get(provider['name'], {})
+        
+        providers_data.append({
+            'name': provider['name'],
+            'priority': provider['priority'],
+            'enabled': provider['enabled'],
+            'available': p_status.get('available', True),
+            'base_url': provider['base_url'],
+            'models': provider['models'],
+            'default_model': provider['default_model'],
+            'timeout': provider.get('timeout', 120),
+            'request_count': p_stats.get('request_count', 0),
+            'success_count': p_stats.get('success_count', 0),
+            'error_count': p_status.get('error_count', 0),
+            'last_error': p_status.get('last_error'),
+            'last_check': p_status.get('last_check'),
+        })
+    
+    return jsonify(providers_data)
+
+@app.route('/api/providers/<name>', methods=['GET'])
+def api_provider_detail(name):
+    """获取提供商详情"""
+    provider = next((p for p in UPSTREAM_PROVIDERS if p['name'] == name), None)
+    
+    if not provider:
+        return jsonify({'error': 'Provider not found'}), 404
+    
+    stats = load_stats()
+    p_stats = stats.get('providers', {}).get(name, {})
+    p_status = provider_status.get(name, {})
+    
+    return jsonify({
+        **provider,
+        'status': {
+            'available': p_status.get('available', True),
+            'error_count': p_status.get('error_count', 0),
+            'last_error': p_status.get('last_error'),
+            'request_count': p_stats.get('request_count', 0),
+            'success_count': p_stats.get('success_count', 0),
+        }
+    })
+
+@app.route('/api/providers/<name>/toggle', methods=['POST'])
+def api_toggle_provider(name):
+    """切换提供商启用状态"""
+    # 这里需要修改配置文件，简化处理只返回成功
+    return jsonify({'success': True, 'message': f'Provider {name} toggled'})
+
+@app.route('/api/providers/<name>/test', methods=['POST'])
+def api_test_provider(name):
+    """测试提供商连接"""
+    import requests
+    
+    provider = next((p for p in UPSTREAM_PROVIDERS if p['name'] == name), None)
+    
+    if not provider:
+        return jsonify({'success': False, 'error': 'Provider not found'}), 404
+    
+    try:
+        # 测试模型列表接口
+        url = f"{provider['base_url'].rstrip('/')}/models"
+        headers = {"Authorization": f"Bearer {provider['api_key']}"}
+        
+        response = requests.get(url, headers=headers, timeout=10)
+        
+        if response.status_code == 200:
+            provider_status[name]['available'] = True
+            provider_status[name]['last_check'] = datetime.now().isoformat()
+            return jsonify({'success': True, 'message': 'Connection successful'})
+        else:
+            return jsonify({
+                'success': False, 
+                'error': f'HTTP {response.status_code}: {response.text[:200]}'
+            })
+            
+    except Exception as e:
+        provider_status[name]['available'] = False
+        provider_status[name]['last_error'] = str(e)
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/api/models')
+def api_models():
+    """获取模型列表"""
+    models_list = []
+    added = set()
+    
+    # 添加auto
+    models_list.append({
+        'alias': 'auto',
+        'target': 'auto',
+        'description': '自动选择可用模型（按优先级）'
+    })
+    added.add('auto')
+    
+    # 从提供商获取模型
+    for provider in UPSTREAM_PROVIDERS:
+        for model in provider['models']:
+            if model not in added:
+                models_list.append({
+                    'alias': model,
+                    'target': model,
+                    'provider': provider['name'],
+                    'priority': provider['priority'],
+                })
+                added.add(model)
+    
+    # 添加别名
+    for alias, target in MODEL_ALIASES.items():
+        if alias != 'auto' and alias not in added:
+            # 找到目标模型对应的提供商
+            provider_name = None
+            for p in UPSTREAM_PROVIDERS:
+                if target in p['models']:
+                    provider_name = p['name']
+                    break
+            
+            models_list.append({
+                'alias': alias,
+                'target': target,
+                'provider': provider_name,
+            })
+    
+    return jsonify(models_list)
+
+@app.route('/api/logs')
+def api_logs():
+    """获取日志"""
+    log_file = LOGS_DIR / 'proxy.log'
+    
+    lines = []
+    if log_file.exists():
+        content = log_file.read_text(encoding='utf-8')
+        lines = content.strip().split('\n')[-100:]  # 最近100条
+    
+    return jsonify({
+        'logs': lines,
+        'total_lines': len(lines)
+    })
+
+@app.route('/api/config')
+def api_config():
+    """获取配置"""
+    return jsonify({
+        'providers': [{
+            'name': p['name'],
+            'priority': p['priority'],
+            'base_url': p['base_url'],
+            'models': p['models'],
+            'timeout': p.get('timeout', 120),
+            'enabled': p['enabled'],
+        } for p in UPSTREAM_PROVIDERS],
+        'model_aliases': MODEL_ALIASES,
+        'retry_config': RETRY_CONFIG,
+        'server_config': {
+            'port': SERVER_CONFIG['port'],
+        }
+    })
+
+@app.route('/api/requests/recent')
+def api_recent_requests():
+    """获取最近请求记录"""
+    # 模拟数据
+    return jsonify([])
+
+if __name__ == '__main__':
+    print("=" * 50)
+    print("大模型API中转系统 - 后台管理")
+    print("=" * 50)
+    print(f"访问地址: http://localhost:19008")
+    print(f"前台地址: http://localhost:19007")
+    print("=" * 50)
+    
+    app.run(host='0.0.0.0', port=19008, debug=True)

admin/templates/config.html

@@ -0,0 +1,117 @@
+<!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 text-slate-300 hover:bg-slate-700 hover: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 bg-slate-700 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="configContent" class="space-y-6">
+                <p class="text-gray-500">加载中...</p>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        async function loadConfig() {
+            const res = await fetch('/api/config');
+            const data = await res.json();
+            
+            const container = document.getElementById('configContent');
+            
+            container.innerHTML = `
+                <div class="bg-white rounded-xl border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">服务配置</h2>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <p class="text-sm text-gray-500">监听端口</p>
+                            <p class="font-medium">${data.server_config.port}</p>
+                        </div>
+                        <div>
+                            <p class="text-sm text-gray-500">重试次数</p>
+                            <p class="font-medium">${data.retry_config.max_retries}</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">提供商配置</h2>
+                    <div class="space-y-4">
+                        ${data.providers.map(p => `
+                            <div class="p-4 bg-gray-50 rounded-lg">
+                                <div class="flex items-center justify-between mb-2">
+                                    <span class="font-medium">${p.name}</span>
+                                    <span class="text-sm ${p.enabled ? 'text-green-600' : 'text-gray-400'}">${p.enabled ? '已启用' : '已禁用'}</span>
+                                </div>
+                                <div class="text-sm text-gray-500 space-y-1">
+                                    <p>API: ${p.base_url}</p>
+                                    <p>模型: ${p.models.join(', ')}</p>
+                                    <p>超时: ${p.timeout}s</p>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">模型别名</h2>
+                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
+                        ${Object.entries(data.model_aliases).map(([alias, target]) => `
+                            <div class="p-3 bg-gray-50 rounded-lg">
+                                <code class="text-purple-600">${alias}</code>
+                                <span class="text-gray-400 mx-2">→</span>
+                                <code class="text-gray-700">${target}</code>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                
+                <div class="bg-yellow-50 border border-yellow-200 rounded-xl p-4">
+                    <p class="text-yellow-700 text-sm">
+                        <i class="ri-information-line mr-1"></i>
+                        配置修改请编辑 <code>config/settings.py</code> 文件
+                    </p>
+                </div>
+            `;
+        }
+
+        loadConfig();
+    </script>
+</body>
+</html>

admin/templates/index.html

@@ -0,0 +1,225 @@
+<!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 bg-slate-700 text-white">
+                    <i class="ri-dashboard-line"></i><span>仪表盘</span>
+                </a>
+                <a href="/providers" class="flex items-center gap-3 px-6 py-3 text-slate-300 hover:bg-slate-700 hover: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>
+            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-700">
+                <a href="http://localhost:19007" target="_blank" class="text-slate-400 hover:text-white text-sm flex items-center gap-2">
+                    <i class="ri-external-link-line"></i> 访问API
+                </a>
+            </div>
+        </aside>
+
+        <!-- 主内容 -->
+        <main class="ml-64 flex-1 p-8">
+            <!-- 统计卡片 -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500 text-sm">总请求数</p>
+                            <p class="text-3xl font-bold text-gray-800 mt-2" id="stat-requests">-</p>
+                        </div>
+                        <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
+                            <i class="ri-send-plane-line text-2xl text-purple-600"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500 text-sm">成功率</p>
+                            <p class="text-3xl font-bold text-green-600 mt-2" id="stat-success">-</p>
+                        </div>
+                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
+                            <i class="ri-check-double-line text-2xl text-green-600"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500 text-sm">提供商状态</p>
+                            <p class="text-3xl font-bold text-gray-800 mt-2" id="stat-providers">-</p>
+                        </div>
+                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
+                            <i class="ri-server-line text-2xl text-blue-600"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-gray-500 text-sm">支持模型</p>
+                            <p class="text-3xl font-bold text-gray-800 mt-2" id="stat-models">-</p>
+                        </div>
+                        <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
+                            <i class="ri-cpu-line text-2xl text-orange-600"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 提供商状态 -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                        <i class="ri-server-line text-purple-500"></i>
+                        提供商状态
+                    </h2>
+                    <div id="providerList" class="space-y-3">
+                        <p class="text-gray-500">加载中...</p>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                        <i class="ri-route-line text-blue-500"></i>
+                        调用流程
+                    </h2>
+                    <div class="space-y-4 text-sm">
+                        <div class="flex items-center gap-3 p-3 bg-purple-50 rounded-lg">
+                            <span class="w-6 h-6 bg-purple-500 text-white rounded-full flex items-center justify-center text-xs">1</span>
+                            <div>
+                                <p class="font-medium text-gray-800">客户端请求</p>
+                                <p class="text-gray-500">POST /v1/chat/completions</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-3 p-3 bg-blue-50 rounded-lg">
+                            <span class="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs">2</span>
+                            <div>
+                                <p class="font-medium text-gray-800">解析模型名</p>
+                                <p class="text-gray-500">model="auto" → 按优先级选择</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-3 p-3 bg-green-50 rounded-lg">
+                            <span class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs">3</span>
+                            <div>
+                                <p class="font-medium text-gray-800">转发请求</p>
+                                <p class="text-gray-500">调用高优先级提供商</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center gap-3 p-3 bg-orange-50 rounded-lg">
+                            <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs">4</span>
+                            <div>
+                                <p class="font-medium text-gray-800">故障切换</p>
+                                <p class="text-gray-500">失败自动切换备用提供商</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 最近请求 -->
+            <div class="mt-6 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+                <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
+                    <i class="ri-time-line text-green-500"></i>
+                    快速操作
+                </h2>
+                <div class="flex gap-4">
+                    <a href="/providers" class="px-4 py-2 gradient-bg text-white rounded-lg text-sm">
+                        <i class="ri-server-line mr-1"></i> 管理提供商
+                    </a>
+                    <a href="http://localhost:19007/status" target="_blank" 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> 查看API状态
+                    </a>
+                    <a href="/logs" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50">
+                        <i class="ri-file-list-line mr-1"></i> 查看日志
+                    </a>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        async function loadStats() {
+            const res = await fetch('/api/stats');
+            const data = await res.json();
+            
+            document.getElementById('stat-requests').textContent = data.total_requests;
+            document.getElementById('stat-models').textContent = data.models_count;
+            
+            const successRate = data.total_requests > 0 
+                ? Math.round(data.total_success / data.total_requests * 100) + '%'
+                : '0%';
+            document.getElementById('stat-success').textContent = successRate;
+            
+            document.getElementById('stat-providers').textContent = 
+                `${data.available_providers}/${data.providers_count}`;
+        }
+
+        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="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                    <div class="flex items-center gap-3">
+                        <span class="w-8 h-8 ${p.available ? 'bg-green-500' : 'bg-red-500'} text-white rounded-full flex items-center justify-center text-xs font-bold">
+                            ${p.priority}
+                        </span>
+                        <div>
+                            <p class="font-medium text-gray-800">${p.name}</p>
+                            <p class="text-xs text-gray-500">${p.models.length} 个模型</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <span class="px-2 py-1 rounded text-xs ${p.available ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'}">
+                            ${p.available ? '可用' : '不可用'}
+                        </span>
+                        <span class="text-xs text-gray-400">${p.request_count} 请求</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        loadStats();
+        loadProviders();
+    </script>
+</body>
+</html>

admin/templates/logs.html

@@ -0,0 +1,98 @@
+<!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%); }
+        .log-line { font-family: monospace; font-size: 12px; }
+        .log-info { color: #2563eb; }
+        .log-warning { color: #d97706; }
+        .log-error { color: #dc2626; }
+    </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 text-slate-300 hover:bg-slate-700 hover: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 bg-slate-700 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">
+            <div class="flex items-center justify-between mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">日志查看</h1>
+                <button onclick="loadLogs()" class="px-4 py-2 border border-gray-300 rounded-lg text-sm hover:bg-gray-50">
+                    <i class="ri-refresh-line mr-1"></i> 刷新
+                </button>
+            </div>
+
+            <div class="bg-white rounded-xl border border-gray-100 p-4">
+                <div id="logContent" class="bg-gray-900 rounded-lg p-4 max-h-[600px] overflow-auto">
+                    <p class="text-gray-500">加载中...</p>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        async function loadLogs() {
+            const res = await fetch('/api/logs');
+            const data = await res.json();
+            
+            const container = document.getElementById('logContent');
+            
+            if (data.logs.length === 0) {
+                container.innerHTML = '<p class="text-gray-400">暂无日志</p>';
+                return;
+            }
+            
+            container.innerHTML = data.logs.map(line => {
+                let cls = 'text-gray-300';
+                if (line.includes('ERROR') || line.includes('error')) cls = 'log-error';
+                else if (line.includes('WARNING') || line.includes('warning')) cls = 'log-warning';
+                else if (line.includes('INFO')) cls = 'log-info';
+                
+                return `<div class="log-line ${cls}">${escapeHtml(line)}</div>`;
+            }).join('');
+        }
+        
+        function escapeHtml(text) {
+            return text
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;');
+        }
+
+        loadLogs();
+        // 自动刷新
+        setInterval(loadLogs, 10000);
+    </script>
+</body>
+</html>

admin/templates/models.html

@@ -0,0 +1,91 @@
+<!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 text-slate-300 hover:bg-slate-700 hover:text-white">
+                    <i class="ri-server-line"></i><span>提供商管理</span>
+                </a>
+                <a href="/models" class="flex items-center gap-3 px-6 py-3 bg-slate-700 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 class="bg-white rounded-xl border border-gray-100 overflow-hidden">
+                <table class="w-full">
+                    <thead class="bg-gray-50 border-b border-gray-100">
+                        <tr>
+                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">模型别名</th>
+                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">目标模型</th>
+                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">提供商</th>
+                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">优先级</th>
+                            <th class="px-6 py-3 text-left text-sm font-medium text-gray-500">说明</th>
+                        </tr>
+                    </thead>
+                    <tbody id="modelTable">
+                        <tr><td colspan="5" class="px-6 py-8 text-center text-gray-500">加载中...</td></tr>
+                    </tbody>
+                </table>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        async function loadModels() {
+            const res = await fetch('/api/models');
+            const models = await res.json();
+            
+            const tbody = document.getElementById('modelTable');
+            
+            tbody.innerHTML = models.map(m => `
+                <tr class="border-b border-gray-50 hover:bg-gray-50">
+                    <td class="px-6 py-4 font-medium text-gray-800">
+                        <code class="px-2 py-1 bg-purple-100 text-purple-700 rounded">${m.alias}</code>
+                    </td>
+                    <td class="px-6 py-4">
+                        <code class="text-gray-600">${m.target}</code>
+                    </td>
+                    <td class="px-6 py-4 text-gray-600">${m.provider || '-'}</td>
+                    <td class="px-6 py-4">
+                        ${m.priority ? `<span class="px-2 py-1 bg-blue-100 text-blue-600 rounded text-sm">优先级 ${m.priority}</span>` : '-'}
+                    </td>
+                    <td class="px-6 py-4 text-sm text-gray-500">${m.description || ''}</td>
+                </tr>
+            `).join('');
+        }
+
+        loadModels();
+    </script>
+</body>
+</html>

admin/templates/providers.html

@@ -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>