feat: 实现大模型模型列表与供应商管理，并接入 Playwright 测试

补齐 LLM 子菜单路由，落地模型列表与供应商管理页面交互，同时引入功能与视觉回归用例以便后续页面持续验证。

Co-authored-by: Cursor <cursoragent@cursor.com>

e2e/README.md

@@ -0,0 +1,24 @@
+# E2E 与视觉回归
+
+## 命令
+
+```bash
+pnpm test:e2e          # 功能测试 + 视觉回归
+pnpm test:e2e:ui       # Playwright UI 模式
+pnpm test:e2e:update   # 确认 UI 改动后更新截图基线
+```
+
+测试默认复用本机 Google Chrome，并由 Playwright 自动启动 Vite。
+
+## 目录
+
+- `fixtures/auth.ts`：注入测试登录态，避免每条业务用例重复登录。
+- `pages/`：登录、页面功能和交互测试。
+- `visual/`：页面截图回归。
+- `snapshots/`：由 `test:e2e:update` 生成的基线图。
+
+模型列表、供应商管理的功能和视觉用例已启用。确认页面视觉改动符合预期后，执行
+`pnpm test:e2e:update` 更新基线。
+
+设计目标图位于 `docs/ui/llm/list/`；截图基线用于检测后续代码造成的
+视觉变化，不替代设计稿还原度审查。

e2e/fixtures/auth.ts

@@ -0,0 +1,19 @@
+import { expect, test as base } from '@playwright/test';
+
+export const test = base.extend({
+  page: async ({ page }, applyFixture) => {
+    await page.addInitScript(() => {
+      localStorage.setItem(
+        'user-store',
+        JSON.stringify({
+          state: { token: 'e2e-token' },
+          version: 0,
+        }),
+      );
+    });
+
+    await applyFixture(page);
+  },
+});
+
+export { expect };

e2e/pages/dashboard.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '../fixtures/auth';
+
+test('登录态可直接访问总览', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  await expect(page.getByText('近7日对话趋势')).toBeVisible();
+  await expect(page.getByText('模型调用占比')).toBeVisible();
+  await expect(page.getByText('异常告警')).toBeVisible();
+});

e2e/pages/llm-models.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '../fixtures/auth';
+
+test.describe('大模型 / 模型列表', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/llm/models');
+    await page.getByRole('table').waitFor();
+  });
+
+  test('展示列表及主要操作', async ({ page }) => {
+    await expect(page.getByRole('button', { name: '新增模型' })).toBeVisible();
+    await expect(page.getByRole('table')).toBeVisible();
+    await expect(page.getByText('GPT-4o', { exact: true })).toBeVisible();
+  });
+
+  test('可新增模型', async ({ page }) => {
+    await page.getByRole('button', { name: '新增模型' }).click();
+    const dialog = page.getByRole('dialog', { name: '新增模型' });
+    await expect(dialog).toBeVisible();
+
+    await dialog.getByLabel('模型名称').fill('测试模型');
+    await dialog.getByLabel('模型 ID').fill('test-model');
+    await dialog.getByRole('button', { name: '保 存' }).click();
+
+    await expect(page.getByText('测试模型', { exact: true })).toBeVisible();
+  });
+
+  test('可切换模型状态并查看用量', async ({ page }) => {
+    const statusSwitch = page.getByRole('switch', { name: 'GPT-4o状态' });
+    await expect(statusSwitch).toBeChecked();
+    await statusSwitch.click();
+    await expect(statusSwitch).not.toBeChecked();
+
+    const row = page.getByRole('row').filter({ hasText: 'GPT-4o' });
+    await row.getByRole('button', { name: '用量' }).click();
+    await expect(page.getByText('GPT-4o 用量详情')).toBeVisible();
+    await expect(page.getByText('近 7 日用量趋势')).toBeVisible();
+  });
+
+  test('可调整排序并删除模型', async ({ page }) => {
+    await page.getByRole('spinbutton', { name: 'GPT-4o排序' }).fill('2');
+    await expect(page.locator('.ant-table-tbody .ant-table-row').first()).toContainText('Claude-3.5-Sonnet');
+
+    const row = page.getByRole('row').filter({ hasText: 'GPT-4o' });
+    await row.getByRole('button', { name: '删除' }).click();
+    await page.getByRole('button', { name: '确 定' }).click();
+    await expect(page.getByText('GPT-4o', { exact: true })).toHaveCount(0);
+  });
+});

e2e/pages/llm-providers.spec.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '../fixtures/auth';
+
+test.describe('大模型 / 供应商管理', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/llm/providers');
+    await page.getByRole('table').waitFor();
+  });
+
+  test('展示列表及主要操作', async ({ page }) => {
+    await expect(page.getByRole('button', { name: '新增供应商' })).toBeVisible();
+    await expect(page.getByRole('table')).toBeVisible();
+    await expect(page.getByText('OpenAI', { exact: true })).toBeVisible();
+    await expect(page.getByText('https://api.openai.com/v1')).toBeVisible();
+  });
+
+  test('可搜索供应商', async ({ page }) => {
+    await page.getByPlaceholder('搜索供应商名称').fill('DeepSeek');
+    await expect(page.getByText('DeepSeek', { exact: true })).toBeVisible();
+    await expect(page.getByText('OpenAI', { exact: true })).toHaveCount(0);
+  });
+
+  test('可新增供应商', async ({ page }) => {
+    await page.getByRole('button', { name: '新增供应商' }).click();
+    const dialog = page.getByRole('dialog', { name: '新增供应商' });
+    await expect(dialog).toBeVisible();
+
+    await dialog.getByLabel('供应商名称').fill('测试供应商');
+    await dialog.getByLabel('Base URL').fill('https://api.test.com/v1');
+    await dialog.getByRole('button', { name: '保 存' }).click();
+
+    await expect(page.getByText('测试供应商', { exact: true })).toBeVisible();
+  });
+
+  test('可切换供应商状态并测试连通', async ({ page }) => {
+    const statusSwitch = page.getByRole('switch', { name: 'OpenAI状态' });
+    await expect(statusSwitch).toBeChecked();
+    await statusSwitch.click();
+    await expect(statusSwitch).not.toBeChecked();
+
+    const row = page.getByRole('row').filter({ hasText: 'OpenAI' });
+    await row.getByRole('button', { name: '测试连通' }).click();
+    await expect(page.getByText('OpenAI 连通正常')).toBeVisible();
+  });
+
+  test('可编辑凭证', async ({ page }) => {
+    const row = page.getByRole('row').filter({ hasText: 'DeepSeek' });
+    await row.getByRole('button', { name: '编辑凭证' }).click();
+    const dialog = page.getByRole('dialog', { name: '编辑供应商' });
+    await expect(dialog).toBeVisible();
+    await dialog.getByLabel('API Key').fill('sk-test-key');
+    await dialog.getByRole('button', { name: '保 存' }).click();
+    await expect(page.getByText('供应商已更新')).toBeVisible();
+  });
+});

e2e/pages/login.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '@playwright/test';
+
+test('账号密码可登录并进入总览', async ({ page }) => {
+  await page.goto('/login');
+
+  await page.getByPlaceholder('用户名: admin or user').fill('admin');
+  await page.getByPlaceholder('密码: 123456').fill('123456');
+  await page.getByRole('button', { name: '登 录' }).click();
+
+  await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(page.getByText('近7日对话趋势')).toBeVisible();
+});

e2e/visual/dashboard.spec.ts

@@ -0,0 +1,12 @@
+import { expect, test } from '../fixtures/auth';
+
+test('总览页面视觉基线', async ({ page }) => {
+  await page.goto('/dashboard');
+  await page.getByText('近7日对话趋势').waitFor();
+  await page.locator('canvas').first().waitFor();
+  await page.evaluate(() => document.fonts.ready);
+
+  await expect(page).toHaveScreenshot('dashboard.png', {
+    fullPage: true,
+  });
+});

e2e/visual/llm-models.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '../fixtures/auth';
+
+test('模型列表视觉基线', async ({ page }) => {
+  await page.goto('/llm/models');
+  await page.getByRole('table').waitFor();
+  await page.evaluate(() => document.fonts.ready);
+
+  await expect(page).toHaveScreenshot('llm-models-list.png', {
+    fullPage: true,
+  });
+});

e2e/visual/llm-providers.spec.ts

@@ -0,0 +1,11 @@
+import { expect, test } from '../fixtures/auth';
+
+test('供应商管理视觉基线', async ({ page }) => {
+  await page.goto('/llm/providers');
+  await page.getByRole('table').waitFor();
+  await page.evaluate(() => document.fonts.ready);
+
+  await expect(page).toHaveScreenshot('llm-providers-list.png', {
+    fullPage: true,
+  });
+});