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 变更记录
2026-04-16 11:21:48 +08:00
parent c17903dcbc
commit 9359ca7f62
61 changed files with 4588 additions and 1095 deletions
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,129 +1,71 @@
-const API_BASE = 'http://localhost:9826/api';
+import { ApiError } from '@/types';

-export interface Provider {
-  id: string;
-  name: string;
-  api_key: string;
-  base_url: string;
-  enabled: boolean;
-  created_at: string;
-  updated_at: string;
+const API_BASE = import.meta.env.VITE_API_BASE || '';
+
+function toCamelCase(str: string): string {
+  return str.replace(/_([a-z])/g, (_, letter: string) => letter.toUpperCase());
 }

-export interface Model {
-  id: string;
-  provider_id: string;
-  model_name: string;
-  enabled: boolean;
-  created_at: string;
+function toSnakeCase(str: string): string {
+  return str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
 }

-export interface UsageStats {
-  id: number;
-  provider_id: string;
-  model_name: string;
-  request_count: number;
-  date: string;
+function transformKeys<T>(obj: unknown, transformer: (key: string) => string): T {
+  if (Array.isArray(obj)) {
+    return obj.map((item) => transformKeys(item, transformer)) as T;
+  }
+  if (obj !== null && typeof obj === 'object') {
+    const result: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(obj as Record<string, unknown>)) {
+      result[transformer(key)] = transformKeys(value, transformer);
+    }
+    return result as T;
+  }
+  return obj as T;
 }

-// Provider API
-export async function listProviders(): Promise<Provider[]> {
-  const response = await fetch(`${API_BASE}/providers`);
-  if (!response.ok) throw new Error('Failed to fetch providers');
-  return response.json();
+export function fromApi<T>(data: unknown): T {
+  return transformKeys<T>(data, toCamelCase);
 }

-export async function createProvider(provider: Omit<Provider, 'created_at' | 'updated_at'>): Promise<Provider> {
-  const response = await fetch(`${API_BASE}/providers`, {
-    method: 'POST',
+export function toApi<T>(data: unknown): T {
+  return transformKeys<T>(data, toSnakeCase);
+}
+
+export async function request<T>(
+  method: string,
+  path: string,
+  body?: unknown,
+): Promise<T> {
+  const url = `${API_BASE}${path}`;
+  const options: RequestInit = {
+    method,
    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(provider),
-  });
-  if (!response.ok) throw new Error('Failed to create provider');
-  return response.json();
-}
-
-export async function updateProvider(id: string, updates: Partial<Provider>): Promise<Provider> {
-  const response = await fetch(`${API_BASE}/providers/${id}`, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(updates),
-  });
-  if (!response.ok) throw new Error('Failed to update provider');
-  return response.json();
-}
-
-export async function deleteProvider(id: string): Promise<void> {
-  const response = await fetch(`${API_BASE}/providers/${id}`, { method: 'DELETE' });
-  if (!response.ok) throw new Error('Failed to delete provider');
-}
-
-// Model API
-export async function listModels(providerId?: string): Promise<Model[]> {
-  const url = providerId ? `${API_BASE}/models?provider_id=${providerId}` : `${API_BASE}/models`;
-  const response = await fetch(url);
-  if (!response.ok) throw new Error('Failed to fetch models');
-  return response.json();
-}
-
-export async function createModel(model: Omit<Model, 'created_at'>): Promise<Model> {
-  const response = await fetch(`${API_BASE}/models`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(model),
-  });
-  if (!response.ok) throw new Error('Failed to create model');
-  return response.json();
-}
-
-export async function updateModel(id: string, updates: Partial<Model>): Promise<Model> {
-  const response = await fetch(`${API_BASE}/models/${id}`, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(updates),
-  });
-  if (!response.ok) throw new Error('Failed to update model');
-  return response.json();
-}
-
-export async function deleteModel(id: string): Promise<void> {
-  const response = await fetch(`${API_BASE}/models/${id}`, { method: 'DELETE' });
-  if (!response.ok) throw new Error('Failed to delete model');
-}
-
-// Stats API
-export async function getStats(params?: {
-  provider_id?: string;
-  model_name?: string;
-  start_date?: string;
-  end_date?: string;
-}): Promise<UsageStats[]> {
-  const query = new URLSearchParams();
-  if (params?.provider_id) query.set('provider_id', params.provider_id);
-  if (params?.model_name) query.set('model_name', params.model_name);
-  if (params?.start_date) query.set('start_date', params.start_date);
-  if (params?.end_date) query.set('end_date', params.end_date);
-
-  const response = await fetch(`${API_BASE}/stats?${query}`);
-  if (!response.ok) throw new Error('Failed to fetch stats');
-  return response.json();
-}
-
-export async function getAggregatedStats(params?: {
-  provider_id?: string;
-  model_name?: string;
-  start_date?: string;
-  end_date?: string;
-  group_by?: 'provider' | 'model' | 'date';
-}): Promise<any[]> {
-  const query = new URLSearchParams();
-  if (params?.provider_id) query.set('provider_id', params.provider_id);
-  if (params?.model_name) query.set('model_name', params.model_name);
-  if (params?.start_date) query.set('start_date', params.start_date);
-  if (params?.end_date) query.set('end_date', params.end_date);
-  if (params?.group_by) query.set('group_by', params.group_by);
-
-  const response = await fetch(`${API_BASE}/stats/aggregate?${query}`);
-  if (!response.ok) throw new Error('Failed to fetch aggregated stats');
-  return response.json();
+  };
+
+  if (body !== undefined) {
+    options.body = JSON.stringify(toApi(body));
+  }
+
+  const response = await fetch(url, options);
+
+  if (!response.ok) {
+    let message = `请求失败 (${response.status})`;
+    try {
+      const errorData = await response.json();
+      if (typeof errorData === 'object' && errorData !== null && 'message' in errorData) {
+        message = (errorData as { message: string }).message;
+      }
+    } catch {
+      // ignore JSON parse error
+    }
+    throw new ApiError(response.status, message);
+  }
+
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  const data = await response.json();
+  return fromApi<T>(data);
 }
--- a/frontend/src/api/models.ts
+++ b/frontend/src/api/models.ts
@@ -0,0 +1,24 @@
+import type { Model, CreateModelInput, UpdateModelInput } from '@/types';
+import { request } from './client';
+
+export async function listModels(providerId?: string): Promise<Model[]> {
+  const path = providerId
+    ? `/api/models?provider_id=${encodeURIComponent(providerId)}`
+    : '/api/models';
+  return request<Model[]>('GET', path);
+}
+
+export async function createModel(input: CreateModelInput): Promise<Model> {
+  return request<Model>('POST', '/api/models', input);
+}
+
+export async function updateModel(
+  id: string,
+  input: UpdateModelInput,
+): Promise<Model> {
+  return request<Model>('PUT', `/api/models/${id}`, input);
+}
+
+export async function deleteModel(id: string): Promise<void> {
+  return request<void>('DELETE', `/api/models/${id}`);
+}
--- a/frontend/src/api/providers.ts
+++ b/frontend/src/api/providers.ts
@@ -0,0 +1,21 @@
+import type { Provider, CreateProviderInput, UpdateProviderInput } from '@/types';
+import { request } from './client';
+
+export async function listProviders(): Promise<Provider[]> {
+  return request<Provider[]>('GET', '/api/providers');
+}
+
+export async function createProvider(input: CreateProviderInput): Promise<Provider> {
+  return request<Provider>('POST', '/api/providers', input);
+}
+
+export async function updateProvider(
+  id: string,
+  input: UpdateProviderInput,
+): Promise<Provider> {
+  return request<Provider>('PUT', `/api/providers/${id}`, input);
+}
+
+export async function deleteProvider(id: string): Promise<void> {
+  return request<void>('DELETE', `/api/providers/${id}`);
+}
--- a/frontend/src/api/stats.ts
+++ b/frontend/src/api/stats.ts
@@ -0,0 +1,26 @@
+import type { UsageStats, StatsQueryParams } from '@/types';
+import { request } from './client';
+
+export async function getStats(params?: StatsQueryParams): Promise<UsageStats[]> {
+  if (!params) {
+    return request<UsageStats[]>('GET', '/api/stats');
+  }
+
+  const query = new URLSearchParams();
+  const snakeParams: Record<string, string | undefined> = {
+    provider_id: params.providerId,
+    model_name: params.modelName,
+    start_date: params.startDate,
+    end_date: params.endDate,
+  };
+
+  for (const [key, value] of Object.entries(snakeParams)) {
+    if (value) {
+      query.set(key, value);
+    }
+  }
+
+  const queryString = query.toString();
+  const path = queryString ? `/api/stats?${queryString}` : '/api/stats';
+  return request<UsageStats[]>('GET', path);
+}