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/e2e/providers.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('供应商管理', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/providers');
+  });
+
+  test('应显示供应商管理页面', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
+    await expect(page.getByText('供应商列表')).toBeVisible();
+  });
+
+  test('应显示添加供应商按钮', async ({ page }) => {
+    await expect(page.getByRole('button', { name: '添加供应商' })).toBeVisible();
+  });
+
+  test('应通过顶部导航切换页面', async ({ page }) => {
+    await page.getByText('用量统计').click();
+    await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
+
+    await page.getByText('供应商管理').click();
+    await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
+  });
+});

frontend/e2e/stats.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('用量统计', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/stats');
+  });
+
+  test('应显示用量统计页面', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
+  });
+
+  test('应显示筛选控件', async ({ page }) => {
+    await expect(page.getByText('所有供应商')).toBeVisible();
+  });
+
+  test('应通过导航返回供应商页面', async ({ page }) => {
+    await page.getByText('供应商管理').click();
+    await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
+  });
+});