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/__tests__/components/ProviderTable.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ProviderTable } from '@/pages/Providers/ProviderTable';
+import type { Provider } from '@/types';
+
+const mockModelsData = [
+  { id: 'model-1', providerId: 'openai', modelName: 'gpt-4o', enabled: true },
+  { id: 'model-2', providerId: 'openai', modelName: 'gpt-3.5-turbo', enabled: false },
+];
+
+vi.mock('@/hooks/useModels', () => ({
+  useModels: vi.fn(() => ({ data: mockModelsData, isLoading: false })),
+  useDeleteModel: vi.fn(() => ({ mutate: vi.fn() })),
+}));
+
+const mockProviders: Provider[] = [
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    apiKey: 'sk-abcdefgh12345678',
+    baseUrl: 'https://api.openai.com/v1',
+    enabled: true,
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+  },
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    apiKey: 'sk-ant-test',
+    baseUrl: 'https://api.anthropic.com',
+    enabled: false,
+    createdAt: '2024-01-02T00:00:00Z',
+    updatedAt: '2024-01-02T00:00:00Z',
+  },
+];
+
+const defaultProps = {
+  providers: mockProviders,
+  loading: false,
+  onAdd: vi.fn(),
+  onEdit: vi.fn(),
+  onDelete: vi.fn(),
+  onAddModel: vi.fn(),
+  onEditModel: vi.fn(),
+};
+
+describe('ProviderTable', () => {
+  it('renders provider list with name, baseUrl, masked apiKey, and status tags', () => {
+    render(<ProviderTable {...defaultProps} />);
+
+    expect(screen.getByText('供应商列表')).toBeInTheDocument();
+
+    expect(screen.getByText('OpenAI')).toBeInTheDocument();
+    expect(screen.getByText('https://api.openai.com/v1')).toBeInTheDocument();
+    expect(screen.getByText('****5678')).toBeInTheDocument();
+
+    expect(screen.getByText('Anthropic')).toBeInTheDocument();
+    expect(screen.getByText('https://api.anthropic.com')).toBeInTheDocument();
+    expect(screen.getByText('****test')).toBeInTheDocument();
+
+    const enabledTags = screen.getAllByText('启用');
+    const disabledTags = screen.getAllByText('禁用');
+    expect(enabledTags.length).toBeGreaterThanOrEqual(1);
+    expect(disabledTags.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders short api keys fully masked', () => {
+    const shortKeyProvider: Provider[] = [
+      {
+        ...mockProviders[0],
+        id: 'short',
+        name: 'ShortKey',
+        apiKey: 'ab',
+      },
+    ];
+    render(<ProviderTable {...defaultProps} providers={shortKeyProvider} />);
+
+    expect(screen.getByText('****')).toBeInTheDocument();
+  });
+
+  it('calls onAdd when clicking "添加供应商" button', async () => {
+    const user = userEvent.setup();
+    const onAdd = vi.fn();
+    render(<ProviderTable {...defaultProps} onAdd={onAdd} />);
+
+    await user.click(screen.getByRole('button', { name: '添加供应商' }));
+    expect(onAdd).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onEdit with correct provider when clicking "编辑"', async () => {
+    const user = userEvent.setup();
+    const onEdit = vi.fn();
+    render(<ProviderTable {...defaultProps} onEdit={onEdit} />);
+
+    const editButtons = screen.getAllByRole('button', { name: '编辑' });
+    await user.click(editButtons[0]);
+
+    expect(onEdit).toHaveBeenCalledTimes(1);
+    expect(onEdit).toHaveBeenCalledWith(mockProviders[0]);
+  });
+
+  it('calls onDelete with correct provider ID when delete is confirmed', async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+    render(<ProviderTable {...defaultProps} onDelete={onDelete} />);
+
+    // Find and click the delete button for the first row
+    const deleteButtons = screen.getAllByRole('button', { name: '删除' });
+    await user.click(deleteButtons[0]);
+
+    // Find and click the "确 定" confirm button in the Popconfirm popup
+    // antd renders the text with spaces between Chinese characters
+    const confirmButtons = await screen.findAllByText('确 定');
+    await user.click(confirmButtons[0]);
+
+    // Assert that onDelete was called with the correct provider ID
+    expect(onDelete).toHaveBeenCalledTimes(1);
+    expect(onDelete).toHaveBeenCalledWith('openai');
+  });
+
+  it('shows loading state', () => {
+    render(<ProviderTable {...defaultProps} loading={true} />);
+    expect(document.querySelector('.ant-spin')).toBeInTheDocument();
+  });
+
+  it('renders expandable ModelTable when row is expanded', async () => {
+    const user = userEvent.setup();
+    render(<ProviderTable {...defaultProps} />);
+
+    // Find and click the expand button for the first row
+    const expandButtons = screen.getAllByRole('button', { name: /expand/i });
+    expect(expandButtons.length).toBeGreaterThanOrEqual(1);
+    await user.click(expandButtons[0]);
+
+    // Verify that ModelTable content is rendered with data from mocked useModels
+    expect(await screen.findByText('gpt-4o')).toBeInTheDocument();
+    expect(screen.getByText('gpt-3.5-turbo')).toBeInTheDocument();
+  });
+});