feat: 完成前端重构，采用 Ant Design 5 和完整测试体系

- 采用 Ant Design 5 作为 UI 组件库，替换自定义组件
- 集成 React Router v7 提供路由导航
- 使用 TanStack Query v5 管理数据获取和缓存
- 建立 Vitest + React Testing Library 测试体系
- 添加 Playwright E2E 测试覆盖
- 使用 MSW mock API 响应
- 配置 TypeScript strict 模式
- 采用 SCSS Modules 组织样式
- 更新 OpenSpec 规格以反映前端架构变更
- 归档 frontend-refactor 变更记录

frontend/src/App.tsx

@@ -1,36 +1,24 @@
-import { useState } from 'react';
-import { ProvidersPage } from './pages/ProvidersPage';
-import { StatsPage } from './pages/StatsPage';
-import './App.css';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router';
+import { AppRoutes } from '@/routes';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 30_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
 
 function App() {
-  const [currentPage, setCurrentPage] = useState<'providers' | 'stats'>('providers');
-
   return (
-    <div className="app">
-      <nav className="navbar">
-        <h1>AI Gateway</h1>
-        <div className="nav-links">
-          <button
-            className={currentPage === 'providers' ? 'active' : ''}
-            onClick={() => setCurrentPage('providers')}
-          >
-            供应商管理
-          </button>
-          <button
-            className={currentPage === 'stats' ? 'active' : ''}
-            onClick={() => setCurrentPage('stats')}
-          >
-            用量统计
-          </button>
-        </div>
-      </nav>
-
-      <main className="content">
-        {currentPage === 'providers' && <ProvidersPage />}
-        {currentPage === 'stats' && <StatsPage />}
-      </main>
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <AppRoutes />
+      </BrowserRouter>
+    </QueryClientProvider>
   );
 }