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/pages/Providers/ProviderTable.tsx

@@ -0,0 +1,106 @@
+import { Button, Table, Tag, Popconfirm, Space } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import type { Provider, Model } from '@/types';
+import { ModelTable } from './ModelTable';
+
+interface ProviderTableProps {
+  providers: Provider[];
+  loading: boolean;
+  onAdd: () => void;
+  onEdit: (provider: Provider) => void;
+  onDelete: (id: string) => void;
+  onAddModel: (providerId: string) => void;
+  onEditModel: (model: Model) => void;
+}
+
+function maskApiKey(key: string | null | undefined): string {
+  if (!key) return '****';
+  if (key.length <= 4) return '****';
+  return `****${key.slice(-4)}`;
+}
+
+export function ProviderTable({
+  providers,
+  loading,
+  onAdd,
+  onEdit,
+  onDelete,
+  onAddModel,
+  onEditModel,
+}: ProviderTableProps) {
+  const columns: ColumnsType<Provider> = [
+    {
+      title: '名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Base URL',
+      dataIndex: 'baseUrl',
+      key: 'baseUrl',
+    },
+    {
+      title: 'API Key',
+      dataIndex: 'apiKey',
+      key: 'apiKey',
+      render: (key: string | null | undefined) => maskApiKey(key),
+    },
+    {
+      title: '状态',
+      dataIndex: 'enabled',
+      key: 'enabled',
+      render: (enabled: boolean) =>
+        enabled ? <Tag color="green">启用</Tag> : <Tag color="red">禁用</Tag>,
+      width: 80,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 160,
+      render: (_, record) => (
+        <Space>
+          <Button type="link" size="small" onClick={() => onEdit(record)}>
+            编辑
+          </Button>
+          <Popconfirm
+            title="确定要删除这个供应商吗？关联的模型也会被删除。"
+            onConfirm={() => onDelete(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link" danger size="small">
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
+        <h2 style={{ margin: 0 }}>供应商列表</h2>
+        <Button type="primary" onClick={onAdd}>
+          添加供应商
+        </Button>
+      </div>
+      <Table<Provider>
+        columns={columns}
+        dataSource={providers}
+        rowKey="id"
+        loading={loading}
+        expandable={{
+          expandedRowRender: (record) => (
+            <ModelTable
+              providerId={record.id}
+              onAdd={() => onAddModel(record.id)}
+              onEdit={onEditModel}
+            />
+          ),
+        }}
+        pagination={false}
+      />
+    </>
+  );
+}