ai-agent-router 0.1.0

package/src/app/api/service/stop/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, 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: NextRequest) {
+  try {
+    // Initialize database
+    getDatabase();
+    
+    const result = await serviceManager.stop();
+    
+    if (result.error) {
+      return NextResponse.json(result, { status: 400 });
+    }
+
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error('Service stop API error:', error);
+    return NextResponse.json(
+      { status: 'stopped', error: error.message || 'Failed to stop service' },
+      { status: 500 }
+    );
+  }
+}

package/src/app/components/ConfirmDialog.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+  type?: 'danger' | 'warning' | 'info';
+}
+
+export default function ConfirmDialog({
+  open,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmText = '确认',
+  cancelText = '取消',
+  type = 'info',
+}: ConfirmDialogProps) {
+  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/src/app/components/Nav.tsx

@@ -0,0 +1,66 @@
+'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/src/app/components/Toast.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface ToastProps {
+  message: string;
+  type?: 'success' | 'error' | 'info';
+  onClose: () => void;
+  duration?: number;
+}
+
+export default function Toast({ message, type = 'info', onClose, duration = 3000 }: ToastProps) {
+  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/src/app/components/ToastProvider.tsx

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

package/src/app/globals.css

@@ -0,0 +1,71 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #fafbf9;
+  --foreground: #2d3436;
+  --emerald-50: #ecfdf5;
+  --emerald-100: #d1fae5;
+  --emerald-500: #10b981;
+  --emerald-700: #047857;
+  --slate-50: #f8fafc;
+  --slate-100: #f1f5f9;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-700: #334155;
+  --slate-800: #1e293b;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  letter-spacing: -0.01em;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+/* 优化输入框样式 - 使用植物绿和莫兰迪色 */
+input, select, textarea {
+  @apply transition-all duration-300;
+}
+
+input:focus, select:focus, textarea:focus {
+  @apply outline-none ring-2 ring-emerald-400/20 ring-offset-2 ring-offset-white;
+}
+
+/* 优化按钮样式 */
+button {
+  @apply transition-all duration-300;
+}
+
+button:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* 轻盈的滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

package/src/app/layout.tsx

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

package/src/app/logs/page.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Nav from '../components/Nav';
+
+interface RequestLog {
+  id: number;
+  model_id: number;
+  model_name?: string;
+  provider_name?: string;
+  request_method: string;
+  request_path: string;
+  request_headers: string;
+  request_query: string;
+  request_body: string;
+  response_status: number;
+  response_body: string;
+  response_time_ms: number;
+  created_at: string;
+}
+
+export default function LogsPage() {
+  const [logs, setLogs] = useState<RequestLog[]>([]);
+  const [selectedLog, setSelectedLog] = useState<RequestLog | null>(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: string) => {
+    try {
+      const parsed = JSON.parse(jsonString);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return jsonString;
+    }
+  };
+
+  const getStatusColor = (status: number) => {
+    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>
+      )}
+    </>
+  );
+}