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/hooks/useModels.ts

@@ -0,0 +1,62 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { message } from 'antd';
+import type { CreateModelInput, UpdateModelInput } from '@/types';
+import * as api from '@/api/models';
+
+export const modelKeys = {
+  all: ['models'] as const,
+  filtered: (providerId?: string) => ['models', providerId] as const,
+};
+
+export function useModels(providerId?: string) {
+  return useQuery({
+    queryKey: modelKeys.filtered(providerId),
+    queryFn: () => api.listModels(providerId),
+  });
+}
+
+export function useCreateModel() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateModelInput) => api.createModel(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: modelKeys.all });
+      message.success('模型创建成功');
+    },
+    onError: (error: Error) => {
+      message.error(error.message);
+    },
+  });
+}
+
+export function useUpdateModel() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateModelInput }) =>
+      api.updateModel(id, input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: modelKeys.all });
+      message.success('模型更新成功');
+    },
+    onError: (error: Error) => {
+      message.error(error.message);
+    },
+  });
+}
+
+export function useDeleteModel() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => api.deleteModel(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: modelKeys.all });
+      message.success('模型删除成功');
+    },
+    onError: (error: Error) => {
+      message.error(error.message);
+    },
+  });
+}