ai-agent-router 0.1.0

package/dist/src/app/api/providers/test/route.js

@@ -0,0 +1,154 @@
+import { NextResponse } from 'next/server';
+import { getDatabase } from '@/db/database';
+import { getProviderById, getModelById } from '@/db/queries';
+import { getProviderAdapter } from '@/server/providers';
+// Ensure Node.js runtime (required for SQLite)
+export const runtime = 'nodejs';
+export async function POST(request) {
+    try {
+        getDatabase();
+        const body = await request.json();
+        const { provider_id, model_id } = body;
+        if (!provider_id || !model_id) {
+            return NextResponse.json({ error: 'Provider ID and Model ID are required' }, { status: 400 });
+        }
+        // Get provider and model
+        const provider = getProviderById(provider_id);
+        if (!provider) {
+            return NextResponse.json({ error: 'Provider not found' }, { status: 404 });
+        }
+        const model = getModelById(model_id);
+        if (!model || model.provider_id !== provider_id) {
+            return NextResponse.json({ error: 'Model not found or does not belong to this provider' }, { status: 404 });
+        }
+        // Get provider adapter
+        const adapter = getProviderAdapter(provider.protocol);
+        // Create a test request based on protocol
+        const testRequest = createTestRequest(provider.protocol, model.model_id);
+        // Send test request with timeout
+        const timeoutPromise = new Promise((_, reject) => {
+            setTimeout(() => reject(new Error('连接超时，请检查网络或稍后重试')), 10000);
+        });
+        const testPromise = adapter.forwardRequest({ ...model, provider }, testRequest);
+        const response = await Promise.race([testPromise, timeoutPromise]);
+        // Check response status
+        if (response.status >= 200 && response.status < 300) {
+            return NextResponse.json({
+                success: true,
+                message: '连接成功，模型可用',
+            });
+        }
+        else {
+            // Parse error message
+            let errorMessage = '连接失败';
+            if (response.body?.error?.message) {
+                errorMessage = response.body.error.message;
+            }
+            else if (typeof response.body === 'string') {
+                errorMessage = response.body;
+            }
+            // Map common error codes to friendly messages
+            if (response.status === 401 || response.status === 403) {
+                errorMessage = 'API Key 无效，请检查配置';
+            }
+            else if (response.status === 404) {
+                errorMessage = '模型不存在或不可用';
+            }
+            else if (response.status >= 500) {
+                errorMessage = '服务器错误，请稍后重试';
+            }
+            return NextResponse.json({
+                success: false,
+                error: errorMessage,
+                status: response.status,
+            }, { status: 200 } // Return 200 so frontend can handle the error
+            );
+        }
+    }
+    catch (error) {
+        console.error('Test connection error:', error);
+        // Handle specific error types
+        let errorMessage = '连接失败';
+        if (error.message.includes('超时')) {
+            errorMessage = error.message;
+        }
+        else if (error.message.includes('fetch failed') || error.message.includes('ECONNREFUSED')) {
+            errorMessage = '无法连接到服务器，请检查 Base URL 和网络连接';
+        }
+        else if (error.message.includes('ENOTFOUND') || error.message.includes('DNS')) {
+            errorMessage = 'DNS 解析失败，请检查 Base URL';
+        }
+        else {
+            errorMessage = error.message || '连接失败，请检查配置';
+        }
+        return NextResponse.json({
+            success: false,
+            error: errorMessage,
+        }, { status: 200 } // Return 200 so frontend can handle the error
+        );
+    }
+}
+function createTestRequest(protocol, modelId) {
+    switch (protocol) {
+        case 'openai':
+            return {
+                method: 'POST',
+                path: '/v1/chat/completions',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                query: {},
+                body: {
+                    model: modelId,
+                    messages: [
+                        {
+                            role: 'user',
+                            content: 'test',
+                        },
+                    ],
+                    max_tokens: 5,
+                },
+            };
+        case 'anthropic':
+            return {
+                method: 'POST',
+                path: '/v1/messages',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                query: {},
+                body: {
+                    model: modelId,
+                    max_tokens: 5,
+                    messages: [
+                        {
+                            role: 'user',
+                            content: 'test',
+                        },
+                    ],
+                },
+            };
+        case 'gemini':
+            return {
+                method: 'POST',
+                path: `/v1/models/${modelId}:generateContent`,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                query: {},
+                body: {
+                    contents: [
+                        {
+                            parts: [
+                                {
+                                    text: 'test',
+                                },
+                            ],
+                        },
+                    ],
+                },
+            };
+        default:
+            throw new Error(`Unsupported protocol: ${protocol}`);
+    }
+}

package/dist/src/app/api/service/start/route.js

@@ -0,0 +1,55 @@
+import { NextResponse } from 'next/server';
+import { getDatabase } from '@/db/database';
+import { serviceManager } from '@/server/service-manager';
+import { getConfig } from '@/db/queries';
+import net from 'net';
+// Ensure Node.js runtime (required for service manager)
+export const runtime = 'nodejs';
+export async function POST(request) {
+    try {
+        // Initialize database
+        getDatabase();
+        const body = await request.json().catch(() => ({}));
+        const port = body.port ? parseInt(body.port, 10) : null;
+        // Get port from config if not provided
+        let targetPort = port;
+        if (!targetPort) {
+            const portConfig = getConfig('port');
+            targetPort = portConfig ? parseInt(portConfig.value, 10) : 3000;
+        }
+        // In development, if port is 3000 (default dev server port), check for conflict
+        const isDev = process.env.NODE_ENV !== 'production';
+        if (isDev && targetPort === 3000) {
+            // Check if port 3000 is in use (likely by the dev server)
+            const testServer = net.createServer();
+            const portInUse = await new Promise((resolve) => {
+                testServer.listen(3000, () => {
+                    testServer.close(() => resolve(false));
+                });
+                testServer.on('error', () => resolve(true));
+                setTimeout(() => {
+                    testServer.close(() => resolve(false));
+                }, 100);
+            });
+            if (portInUse) {
+                return NextResponse.json({
+                    status: 'stopped',
+                    error: 'Port 3000 is already in use by the development server. Please configure a different port (e.g., 3001) in the settings above.'
+                }, { status: 400 });
+            }
+        }
+        // Validate port
+        if (isNaN(targetPort) || targetPort < 1 || targetPort > 65535) {
+            return NextResponse.json({ status: 'stopped', error: 'Invalid port number' }, { status: 400 });
+        }
+        const result = await serviceManager.start(targetPort);
+        if (result.error) {
+            return NextResponse.json(result, { status: 400 });
+        }
+        return NextResponse.json(result);
+    }
+    catch (error) {
+        console.error('Service start API error:', error);
+        return NextResponse.json({ status: 'stopped', error: error.message || 'Failed to start service' }, { status: 500 });
+    }
+}

package/dist/src/app/api/service/status/route.js

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { getDatabase } from '@/db/database';
+import { serviceManager } from '@/server/service-manager';
+// Ensure Node.js runtime (required for service manager)
+export const runtime = 'nodejs';
+export async function GET(request) {
+    try {
+        // Initialize database
+        getDatabase();
+        const status = await serviceManager.getStatus();
+        return NextResponse.json(status);
+    }
+    catch (error) {
+        console.error('Service status API error:', error);
+        return NextResponse.json({ status: 'stopped', error: error.message || 'Failed to get service status' }, { status: 500 });
+    }
+}

package/dist/src/app/api/service/stop/route.js

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import { getDatabase } from '@/db/database';
+import { serviceManager } from '@/server/service-manager';
+// Ensure Node.js runtime (required for service manager)
+export const runtime = 'nodejs';
+export async function POST(request) {
+    try {
+        // Initialize database
+        getDatabase();
+        const result = await serviceManager.stop();
+        if (result.error) {
+            return NextResponse.json(result, { status: 400 });
+        }
+        return NextResponse.json(result);
+    }
+    catch (error) {
+        console.error('Service stop API error:', error);
+        return NextResponse.json({ status: 'stopped', error: error.message || 'Failed to stop service' }, { status: 500 });
+    }
+}

package/dist/src/app/components/ConfirmDialog.jsx

@@ -0,0 +1,31 @@
+'use client';
+export default function ConfirmDialog({ open, title, message, onConfirm, onCancel, confirmText = '确认', cancelText = '取消', type = 'info', }) {
+    if (!open)
+        return null;
+    const buttonColors = {
+        danger: 'bg-rose-500 hover:bg-rose-600 focus:ring-rose-500/50',
+        warning: 'bg-amber-500 hover:bg-amber-600 focus:ring-amber-500/50',
+        info: 'bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500/50',
+    };
+    return (<div className="fixed z-50 inset-0 overflow-y-auto">
+      <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" onClick={onCancel}></div>
+        <div className="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full border border-emerald-100/50">
+          <div className="bg-white px-5 pt-5 pb-4 sm:p-6">
+            <div className="mb-4">
+              <h3 className="text-base font-bold text-slate-800 mb-1">{title}</h3>
+              <p className="text-xs text-slate-600">{message}</p>
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+              <button type="button" onClick={onCancel} className="px-3.5 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400/30 transition-all duration-300">
+                {cancelText}
+              </button>
+              <button type="button" onClick={onConfirm} className={`px-4 py-1.5 border border-transparent rounded-lg text-xs font-semibold text-white focus:outline-none focus:ring-2 focus:ring-offset-1 transition-all duration-300 ${buttonColors[type]}`}>
+                {confirmText}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>);
+}

package/dist/src/app/components/Nav.jsx

@@ -0,0 +1,45 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+export default function Nav() {
+    const pathname = usePathname();
+    const navItems = [
+        { href: '/', label: '配置' },
+        { href: '/providers', label: '供应商' },
+        { href: '/models', label: '模型' },
+        { href: '/logs', label: '日志' },
+    ];
+    return (<nav className="bg-white/70 backdrop-blur-xl border-b border-emerald-100/30 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
+        <div className="flex items-center justify-between h-16">
+          <div className="flex items-center space-x-12">
+            <Link href="/" className="flex flex-col group transition-all duration-300">
+              <span className="text-xl font-bold text-emerald-700 group-hover:text-emerald-600 transition-colors duration-300 leading-none">
+                AAR
+              </span>
+              <span className="text-[9px] font-medium text-slate-400 tracking-wider uppercase mt-0.5 leading-none">
+                AI Agent Router
+              </span>
+            </Link>
+            <div className="hidden sm:flex sm:items-center">
+              {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (<Link key={item.href} href={item.href} className="relative inline-flex items-center justify-center w-[68px] h-9 text-xs font-medium transition-colors duration-300 group" style={{ minWidth: '68px', maxWidth: '68px' }}>
+                    {/* 固定宽度和高度，完全避免抖动 - 使用绝对定位确保位置不变 */}
+                    <span className={`absolute inset-0 flex items-center justify-center transition-colors duration-300 ${isActive
+                    ? 'text-emerald-700 font-semibold'
+                    : 'text-slate-500 group-hover:text-slate-700'}`}>
+                      {item.label}
+                    </span>
+                    {/* 选中状态背景 - 固定尺寸，不改变布局 */}
+                    <span className={`absolute inset-0 rounded-lg transition-all duration-300 ${isActive
+                    ? 'bg-emerald-50/60'
+                    : 'bg-transparent group-hover:bg-slate-50/40'}`}/>
+                  </Link>);
+        })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>);
+}

package/dist/src/app/components/Toast.jsx

@@ -0,0 +1,37 @@
+'use client';
+import { useEffect } from 'react';
+export default function Toast({ message, type = 'info', onClose, duration = 3000 }) {
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            onClose();
+        }, duration);
+        return () => clearTimeout(timer);
+    }, [duration, onClose]);
+    const colors = {
+        success: 'bg-emerald-500 text-white border-emerald-600/30 shadow-emerald-500/20',
+        error: 'bg-rose-500 text-white border-rose-600/30 shadow-rose-500/20',
+        info: 'bg-slate-600 text-white border-slate-700/30 shadow-slate-600/20',
+    };
+    const icons = {
+        success: (<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7"/>
+      </svg>),
+        error: (<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12"/>
+      </svg>),
+        info: (<svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>),
+    };
+    return (<div className="fixed top-20 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-top fade-in duration-300">
+      <div className={`flex items-center gap-2 px-3 py-2 rounded-lg shadow-lg border backdrop-blur-sm ${colors[type]}`}>
+        <span className="flex-shrink-0">{icons[type]}</span>
+        <span className="text-xs font-medium leading-tight">{message}</span>
+        <button onClick={onClose} className="ml-1.5 flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity p-0.5">
+          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>);
+}

package/dist/src/app/components/ToastProvider.jsx

@@ -0,0 +1,21 @@
+'use client';
+import { createContext, useContext, useState } from 'react';
+import Toast from './Toast';
+const ToastContext = createContext(undefined);
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within ToastProvider');
+    }
+    return context;
+}
+export function ToastProvider({ children }) {
+    const [toast, setToast] = useState(null);
+    const showToast = (message, type = 'info') => {
+        setToast({ message, type });
+    };
+    return (<ToastContext.Provider value={{ showToast }}>
+      {children}
+      {toast && (<Toast message={toast.message} type={toast.type} onClose={() => setToast(null)}/>)}
+    </ToastContext.Provider>);
+}

package/dist/src/app/layout.jsx

@@ -0,0 +1,13 @@
+import './globals.css';
+import { ToastProvider } from './components/ToastProvider';
+export const metadata = {
+    title: 'AAR - AI Agent Router',
+    description: 'Unified API gateway for managing multiple AI model providers',
+};
+export default function RootLayout({ children, }) {
+    return (<html lang="zh-CN">
+      <body>
+        <ToastProvider>{children}</ToastProvider>
+      </body>
+    </html>);
+}

package/dist/src/app/logs/page.jsx

@@ -0,0 +1,210 @@
+'use client';
+import { useState, useEffect } from 'react';
+import Nav from '../components/Nav';
+export default function LogsPage() {
+    const [logs, setLogs] = useState([]);
+    const [selectedLog, setSelectedLog] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [page, setPage] = useState(0);
+    const [total, setTotal] = useState(0);
+    const limit = 50;
+    useEffect(() => {
+        loadLogs();
+    }, [page]);
+    const loadLogs = async () => {
+        try {
+            const res = await fetch(`/api/logs?limit=${limit}&offset=${page * limit}`);
+            const data = await res.json();
+            setLogs(data.logs || []);
+            setTotal(data.total || 0);
+        }
+        catch (error) {
+            console.error('Failed to load logs:', error);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const formatJSON = (jsonString) => {
+        try {
+            const parsed = JSON.parse(jsonString);
+            return JSON.stringify(parsed, null, 2);
+        }
+        catch {
+            return jsonString;
+        }
+    };
+    const getStatusColor = (status) => {
+        if (status >= 200 && status < 300)
+            return 'text-green-600';
+        if (status >= 400 && status < 500)
+            return 'text-yellow-600';
+        if (status >= 500)
+            return 'text-red-600';
+        return 'text-gray-600';
+    };
+    if (loading) {
+        return (<>
+        <Nav />
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="text-lg">加载中...</div>
+        </div>
+      </>);
+    }
+    return (<>
+      <Nav />
+      <main className="max-w-6xl mx-auto py-6 sm:px-6 lg:px-8">
+        <div className="px-4 py-4 sm:px-0">
+          <div className="mb-5">
+            <h1 className="text-lg font-bold text-slate-800">请求日志</h1>
+            <p className="text-xs text-slate-500 mt-1">查看所有 API 请求记录和响应详情</p>
+          </div>
+
+          <div className="bg-white/70 backdrop-blur-sm shadow-md rounded-2xl border border-emerald-100/50 overflow-hidden">
+            <table className="min-w-full divide-y divide-slate-100">
+              <thead className="bg-emerald-50/30">
+                <tr>
+                  <th className="px-4 py-2.5 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">
+                    时间
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    模型
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    方法
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    路径
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    状态
+                  </th>
+                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    响应时间
+                  </th>
+                  <th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-700 uppercase tracking-wider">
+                    操作
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-slate-100">
+                {logs.length === 0 ? (<tr>
+                    <td colSpan={7} className="px-4 py-12 text-center">
+                      <div className="text-slate-400">
+                        <svg className="mx-auto h-10 w-10 mb-3 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                        </svg>
+                        <p className="text-xs text-slate-500">暂无日志记录</p>
+                      </div>
+                    </td>
+                  </tr>) : (logs.map((log) => (<tr key={log.id} className="hover:bg-emerald-50/20 transition-colors duration-300 cursor-pointer">
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs text-slate-600">
+                          {new Date(log.created_at).toLocaleString('zh-CN')}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs">
+                          <div className="font-medium text-slate-800">{log.model_name || 'Unknown'}</div>
+                          {log.provider_name && (<div className="text-[10px] text-slate-500">{log.provider_name}</div>)}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <span className={`px-2 py-0.5 inline-flex text-xs leading-4 font-semibold rounded-lg border ${log.request_method === 'GET' ? 'bg-sky-50 text-sky-700 border-sky-200/50' :
+                log.request_method === 'POST' ? 'bg-emerald-50 text-emerald-700 border-emerald-200/50' :
+                    'bg-slate-50 text-slate-600 border-slate-200/50'}`}>
+                          {log.request_method}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="text-xs text-slate-600 font-mono max-w-xs truncate">
+                          {log.request_path}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <span className={`px-2 py-0.5 inline-flex text-xs leading-4 font-semibold rounded-full border ${log.response_status >= 200 && log.response_status < 300 ? 'bg-emerald-100/80 text-emerald-700 border-emerald-200/50' :
+                log.response_status >= 400 && log.response_status < 500 ? 'bg-amber-100/80 text-amber-700 border-amber-200/50' :
+                    log.response_status >= 500 ? 'bg-rose-100/80 text-rose-700 border-rose-200/50' :
+                        'bg-slate-100/80 text-slate-600 border-slate-200/50'}`}>
+                          {log.response_status}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap">
+                        <div className="text-xs text-slate-600">
+                          {log.response_time_ms}ms
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 whitespace-nowrap text-right text-xs font-medium">
+                        <button onClick={() => setSelectedLog(log)} className="text-emerald-600 hover:text-emerald-700 font-medium transition-colors duration-300">
+                          查看详情
+                        </button>
+                      </td>
+                    </tr>)))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="mt-5 flex items-center justify-between">
+            <div className="text-xs text-slate-600">
+              共 <span className="font-semibold text-slate-800">{total}</span> 条记录
+            </div>
+            <div className="flex space-x-2">
+              <button onClick={() => setPage(Math.max(0, page - 1))} disabled={page === 0} className="px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300">
+                上一页
+              </button>
+              <button onClick={() => setPage(page + 1)} disabled={(page + 1) * limit >= total} className="px-3 py-1.5 border border-slate-200 rounded-lg text-xs font-medium text-slate-600 bg-white hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300">
+                下一页
+              </button>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {selectedLog && (<div className="fixed z-50 inset-0 overflow-y-auto">
+          <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm transition-opacity" onClick={() => setSelectedLog(null)}></div>
+            <div className="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full border border-emerald-100/50">
+              <div className="bg-white px-6 pt-5 pb-4 sm:p-6">
+                <div className="mb-5">
+                  <h3 className="text-base font-bold text-slate-800 mb-1">
+                    请求详情
+                  </h3>
+                  <p className="text-xs text-slate-500">查看完整的请求和响应信息</p>
+                </div>
+                <div className="space-y-4 max-h-[60vh] overflow-y-auto">
+                  <div>
+                    <h4 className="text-xs font-semibold text-slate-700 mb-2">请求头</h4>
+                    <pre className="bg-slate-50/80 border border-slate-200 p-3 rounded-xl text-[10px] overflow-x-auto font-mono text-slate-700">
+                      {formatJSON(selectedLog.request_headers)}
+                    </pre>
+                  </div>
+                  <div>
+                    <h4 className="text-xs font-semibold text-slate-700 mb-2">请求 Query</h4>
+                    <pre className="bg-slate-50/80 border border-slate-200 p-3 rounded-xl text-[10px] overflow-x-auto font-mono text-slate-700">
+                      {formatJSON(selectedLog.request_query)}
+                    </pre>
+                  </div>
+                  <div>
+                    <h4 className="text-xs font-semibold text-slate-700 mb-2">请求 Body</h4>
+                    <pre className="bg-slate-50/80 border border-slate-200 p-3 rounded-xl text-[10px] overflow-x-auto font-mono text-slate-700">
+                      {formatJSON(selectedLog.request_body)}
+                    </pre>
+                  </div>
+                  <div>
+                    <h4 className="text-xs font-semibold text-slate-700 mb-2">响应 Body</h4>
+                    <pre className="bg-slate-50/80 border border-slate-200 p-3 rounded-xl text-[10px] overflow-x-auto font-mono text-slate-700">
+                      {formatJSON(selectedLog.response_body)}
+                    </pre>
+                  </div>
+                </div>
+                <div className="mt-5 flex justify-end">
+                  <button type="button" onClick={() => setSelectedLog(null)} className="px-4 py-1.5 border border-slate-200 rounded-lg text-xs font-semibold text-slate-600 bg-white hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-400/30 transition-all duration-300">
+                    关闭
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>)}
+    </>);
+}