lanyuanxiaoyao/nex
1
0
Fork 0
Code Activity

refactor: 迁移 UI 组件库从 Ant Design 至 TDesign

Browse Source 
- 替换 antd 为 tdesign-react 作为主要 UI 组件库
- 引入 Recharts 替代 @ant-design/charts 实现图表功能
- 移除主题系统相关代码（ThemeContext、themes 目录）
- 更新所有组件以适配 TDesign 组件 API
- 更新测试用例以匹配新的组件实现
- 新增 TDesign 和 Recharts 集成规范文档
This commit is contained in:
兰缘小妖
2026-04-17 18:22:13 +08:00
parent 6eeb38c15e
commit 2b1c5e96c3
55 changed files with 1622 additions and 2541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
frontend/e2e/crud.spec.ts
View File

@@ -2,25 +2,25 @@ import { test, expect } from '@playwright/test';
// 辅助：在对话框内定位输入框
function formInputs(page: import('@playwright/test').Page) {
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog:visible');
return {
id: dialog.getByRole('textbox', { name: /ID/ }),
name: dialog.getByRole('textbox', { name: /名称/ }),
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
baseUrl: dialog.getByRole('textbox', { name: /Base URL/ }),
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
// 辅助：在模型对话框内定位输入框
function modelFormInputs(page: import('@playwright/test').Page) {
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog:visible');
return {
id: dialog.locator('input[placeholder="例如: gpt-4o"]').first(),
modelName: dialog.locator('input[placeholder="例如: gpt-4o"]').nth(1),
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
@@ -32,7 +32,7 @@ test.describe('供应商和模型完整CRUD流程', () => {
test('完整的供应商创建流程', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
const testId = `e2e-${Date.now()}`;
@@ -41,39 +41,47 @@ test.describe('供应商和模型完整CRUD流程', () => {
await inputs.apiKey.fill('sk-e2e-test-key');
await inputs.baseUrl.fill('https://api.e2e-test.com/v1');
// 验证所有字段填写正确
await expect(inputs.id).toHaveValue(testId);
await expect(inputs.name).toHaveValue('E2E Test Provider');
await expect(inputs.baseUrl).toHaveValue('https://api.e2e-test.com/v1');
await inputs.saveBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
// 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击
});
test('供应商创建后编辑流程', async ({ page }) => {
const editBtns = page.locator('.ant-table-tbody button:has-text("编辑")');
const editBtns = page.locator('.t-table__body button:has-text("编辑")');
const count = await editBtns.count();
if (count > 0) {
await editBtns.first().click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog:visible')).toBeVisible();
const inputs = formInputs(page);
await inputs.name.clear();
await inputs.name.fill('Updated Provider Name');
// 验证名称字段已更新
await expect(inputs.name).toHaveValue('Updated Provider Name');
await inputs.saveBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
// 注意：对话框关闭依赖后端 API 响应成功，此处仅验证提交按钮可点击
} else {
test.skip();
}
});
test('供应商删除流程', async ({ page }) => {
const deleteBtns = page.locator('.ant-table-tbody button:has-text("删除")');
const deleteBtns = page.locator('.t-table__body button:has-text("删除")');
const count = await deleteBtns.count();
if (count > 0) {
await deleteBtns.first().click();
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
// 点击确认（Popconfirm 按钮最后一个 = "确 定"）
await page.locator('.ant-popconfirm-buttons').getByRole('button').last().click();
// 点击确认（TDesign Popconfirm 确定按钮）
await page.locator('.t-popconfirm').getByRole('button', { name: '确定' }).click();
await expect(page.getByText('确定要删除这个供应商吗？')).not.toBeVisible({ timeout: 3000 });
} else {
test.skip();
@@ -81,19 +89,19 @@ test.describe('供应商和模型完整CRUD流程', () => {
});
test('展开供应商并添加模型', async ({ page }) => {
const expandBtns = page.locator('.ant-table-row-expand-icon');
const expandBtns = page.locator('.t-table__expandable-icon');
const expandCount = await expandBtns.count();
if (expandCount > 0) {
await expandBtns.first().click();
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
const addModelBtn = page.locator('.ant-table-expanded-row button:has-text("添加模型")');
const addModelBtn = page.locator('.t-table__expanded-row button:has-text("添加模型")');
const addCount = await addModelBtn.count();
if (addCount > 0) {
await addModelBtn.first().click();
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('添加模型')).toBeVisible();
@@ -102,7 +110,7 @@ test.describe('供应商和模型完整CRUD流程', () => {
await modelInputs.modelName.fill('gpt-4-turbo');
await modelInputs.saveBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible({ timeout: 5000 });
await expect(page.locator('.t-dialog')).not.toBeVisible({ timeout: 5000 });
} else {
test.skip();
}
@@ -112,19 +120,19 @@ test.describe('供应商和模型完整CRUD流程', () => {
});
test('编辑已有模型', async ({ page }) => {
const expandBtns = page.locator('.ant-table-row-expand-icon');
const expandBtns = page.locator('.t-table__expandable-icon');
const expandCount = await expandBtns.count();
if (expandCount > 0) {
await expandBtns.first().click();
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
const modelEditBtns = page.locator('.ant-table-expanded-row button:has-text("编辑")');
const modelEditBtns = page.locator('.t-table__expanded-row button:has-text("编辑")');
const editCount = await modelEditBtns.count();
if (editCount > 0) {
await modelEditBtns.first().click();
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('编辑模型')).toBeVisible();
@@ -149,7 +157,7 @@ test.describe('错误处理和边界情况', () => {
test('应显示必填字段验证', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
await formInputs(page).saveBtn.click();
@@ -161,7 +169,7 @@ test.describe('错误处理和边界情况', () => {
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
await inputs.id.fill('test-url');
@@ -175,7 +183,7 @@ test.describe('错误处理和边界情况', () => {
test('超长输入处理', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
await inputs.id.fill('test-long');
@@ -190,29 +198,29 @@ test.describe('错误处理和边界情况', () => {
test('快速连续点击只打开一个对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
expect(await page.locator('[role="dialog"]').count()).toBe(1);
expect(await page.locator('.t-dialog').count()).toBe(1);
await formInputs(page).cancelBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible();
await expect(page.locator('.t-dialog')).not.toBeVisible();
});
test('取消后表单应重置', async ({ page }) => {
// 打开并填写表单
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
let inputs = formInputs(page);
await inputs.id.fill('should-be-reset');
await inputs.name.fill('Should Be Reset');
await inputs.cancelBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible();
await expect(page.locator('.t-dialog')).not.toBeVisible();
// 重新打开
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
// 验证表单已重置
inputs = formInputs(page);
@@ -228,8 +236,8 @@ test.describe('用量统计筛选功能', () => {
});
test('组合筛选条件', async ({ page }) => {
await page.locator('.ant-select').first().click();
await page.waitForSelector('.ant-select-dropdown', { timeout: 3000 });
await page.locator('.t-select').first().click();
await page.waitForSelector('.t-select__dropdown', { timeout: 3000 });
await page.keyboard.press('Escape');
await page.getByPlaceholder('模型名称').fill('gpt-4');

47
frontend/e2e/providers.spec.ts
View File

@@ -1,16 +1,15 @@
import { test, expect } from '@playwright/test';
// 辅助：在对话框内定位输入框（Ant Design 6 的 Modal + Form）
// 辅助：在对话框内定位输入框（TDesign Dialog + Form）
function formInputs(page: import('@playwright/test').Page) {
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog:visible');
return {
id: dialog.getByRole('textbox', { name: /ID/ }),
name: dialog.getByRole('textbox', { name: /名称/ }),
id: dialog.locator('input[placeholder="例如: openai"]'),
name: dialog.locator('input[placeholder="例如: OpenAI"]'),
apiKey: dialog.locator('input[type="password"]'),
baseUrl: dialog.getByRole('textbox', { name: /Base URL/ }),
// Ant Design 6 按钮文字带空格："保 存"、"取 消"
saveBtn: dialog.locator('.ant-modal-footer').getByRole('button').last(),
cancelBtn: dialog.locator('.ant-modal-footer').getByRole('button').first(),
baseUrl: dialog.locator('input[placeholder="例如: https://api.openai.com/v1"]'),
saveBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '保存' }),
cancelBtn: dialog.locator('.t-dialog__footer').getByRole('button', { name: '取消' }),
};
}
@@ -29,17 +28,17 @@ test.describe('供应商管理', () => {
});
test('应通过侧边栏导航切换页面', async ({ page }) => {
await page.locator('.ant-layout-sider').getByText('用量统计').click();
await page.locator('aside').getByText('用量统计').click();
await expect(page.getByRole('heading', { name: '用量统计' })).toBeVisible();
await page.locator('.ant-layout-sider').getByText('供应商管理').click();
await page.locator('aside').getByText('供应商管理').click();
await expect(page.getByRole('heading', { name: '供应商管理' })).toBeVisible();
});
test('应能打开添加供应商对话框', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('添加供应商')).toBeVisible();
await expect(formInputs(page).id).toBeVisible();
@@ -50,7 +49,7 @@ test.describe('供应商管理', () => {
test('应验证供应商表单必填字段', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
await formInputs(page).saveBtn.click();
@@ -62,7 +61,7 @@ test.describe('供应商管理', () => {
test('应验证URL格式', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
const inputs = formInputs(page);
await inputs.id.fill('test-provider');
@@ -77,40 +76,40 @@ test.describe('供应商管理', () => {
test('应能取消添加供应商', async ({ page }) => {
await page.getByRole('button', { name: '添加供应商' }).click();
await expect(page.getByRole('dialog')).toBeVisible();
await expect(page.locator('.t-dialog')).toBeVisible();
await formInputs(page).id.fill('test-provider');
await formInputs(page).cancelBtn.click();
await expect(page.getByRole('dialog')).not.toBeVisible();
await expect(page.locator('.t-dialog')).not.toBeVisible();
});
test('应显示供应商列表中的信息', async ({ page }) => {
await expect(page.locator('.ant-table')).toBeVisible();
const tableHeaders = page.locator('.ant-table-thead th');
await expect(page.locator('.t-table')).toBeVisible();
const tableHeaders = page.locator('.t-table__header th');
const count = await tableHeaders.count();
expect(count).toBeGreaterThanOrEqual(3);
});
test('应能展开供应商查看模型列表', async ({ page }) => {
const expandBtns = page.locator('.ant-table-row-expand-icon');
const expandBtns = page.locator('.t-table__expandable-icon');
const count = await expandBtns.count();
if (count > 0) {
await expandBtns.first().click();
await expect(page.locator('.ant-table-expanded-row').first()).toBeVisible();
await expect(page.locator('.t-table__expanded-row').first()).toBeVisible();
} else {
test.skip();
}
});
test('应能打开编辑供应商对话框', async ({ page }) => {
const editBtns = page.locator('.ant-table-tbody button:has-text("编辑")');
const editBtns = page.locator('.t-table__body button:has-text("编辑")');
const count = await editBtns.count();
if (count > 0) {
await editBtns.first().click();
const dialog = page.getByRole('dialog');
const dialog = page.locator('.t-dialog');
await expect(dialog).toBeVisible();
await expect(dialog.getByText('编辑供应商')).toBeVisible();
await expect(formInputs(page).id).toBeDisabled();
@@ -120,15 +119,15 @@ test.describe('供应商管理', () => {
});
test('应显示删除确认对话框', async ({ page }) => {
const deleteBtns = page.locator('.ant-table-tbody button:has-text("删除")');
const deleteBtns = page.locator('.t-table__body button:has-text("删除")');
const count = await deleteBtns.count();
if (count > 0) {
await deleteBtns.first().click();
await expect(page.getByText('确定要删除这个供应商吗？')).toBeVisible();
// Popconfirm 按钮也带空格："确 定"、"取 消"
await page.locator('.ant-popconfirm-buttons').getByRole('button').first().click();
// TDesign Popconfirm 取消按钮
await page.locator('.t-popconfirm').getByRole('button', { name: '取消' }).click();
} else {
test.skip();
}

45
frontend/e2e/sidebar.spec.ts
View File

@@ -6,51 +6,26 @@ test.describe('侧边栏导航', () => {
});
test('应显示侧边栏', async ({ page }) => {
const sider = page.locator('.ant-layout-sider');
await expect(sider).toBeVisible();
// TDesign Layout.Aside 渲染为 aside 标签
const aside = page.locator('aside');
await expect(aside).toBeVisible();
});
test('应显示应用名称', async ({ page }) => {
await expect(page.locator('.ant-layout-sider').getByText('AI Gateway')).toBeVisible();
await expect(page.locator('aside').getByText('AI Gateway')).toBeVisible();
});
test('应显示导航菜单项', async ({ page }) => {
const sider = page.locator('.ant-layout-sider');
await expect(sider.getByText('供应商管理')).toBeVisible();
await expect(sider.getByText('用量统计')).toBeVisible();
});
test('应能折叠和展开侧边栏', async ({ page }) => {
const sider = page.locator('.ant-layout-sider');
const trigger = page.locator('.ant-layout-sider-trigger');
await expect(sider).toBeVisible();
await trigger.click();
await page.waitForTimeout(300);
await trigger.click();
await page.waitForTimeout(300);
await expect(sider).toBeVisible();
});
test('折叠时应只显示图标', async ({ page }) => {
const sider = page.locator('.ant-layout-sider');
const trigger = page.locator('.ant-layout-sider-trigger');
await trigger.click();
await page.waitForTimeout(300);
const collapsedSider = page.locator('.ant-layout-sider-collapsed');
await expect(collapsedSider).toBeVisible();
const aside = page.locator('aside');
await expect(aside.getByText('供应商管理')).toBeVisible();
await expect(aside.getByText('用量统计')).toBeVisible();
});
test('默认应显示亮色侧边栏', async ({ page }) => {
const sider = page.locator('.ant-layout-sider');
await expect(sider).toBeVisible();
const aside = page.locator('aside');
await expect(aside).toBeVisible();
const menu = page.locator('.ant-menu-light');
const menu = page.locator('.t-menu');
await expect(menu).toBeVisible();
});
});

4
frontend/e2e/stats-cards.spec.ts
View File

@@ -24,13 +24,13 @@ test.describe('统计摘要卡片', () => {
test('统计卡片应显示数值', async ({ page }) => {
await page.waitForTimeout(1000);
const cards = page.locator('.ant-card');
const cards = page.locator('.t-card');
const count = await cards.count();
expect(count).toBeGreaterThan(0);
});
test('应显示筛选栏', async ({ page }) => {
await expect(page.getByText('所有供应商')).toBeVisible();
await expect(page.locator('.t-select').first()).toBeVisible();
await expect(page.getByPlaceholder('模型名称')).toBeVisible();
});
});

30
frontend/e2e/stats.spec.ts
View File

@@ -13,13 +13,13 @@ test.describe('用量统计', () => {
test('应显示筛选控件', async ({ page }) => {
// 验证供应商筛选下拉框
await expect(page.getByText('所有供应商')).toBeVisible();
await expect(page.locator('.t-select').first()).toBeVisible();
// 验证模型名称输入框
await expect(page.getByPlaceholder('模型名称')).toBeVisible();
// 验证日期范围选择器
await expect(page.locator('.ant-picker-range')).toBeVisible();
// 验证日期范围选择器 - TDesign DateRangePicker 使用 t-range-input 类
await expect(page.locator('.t-range-input')).toBeVisible();
});
test('应通过导航返回供应商页面', async ({ page }) => {
@@ -29,10 +29,10 @@ test.describe('用量统计', () => {
test('应显示统计表格列标题', async ({ page }) => {
// 验证表格存在
await expect(page.locator('.ant-table')).toBeVisible();
await expect(page.locator('.t-table')).toBeVisible();
// 通过 thead th 验证列标题存在
const headers = page.locator('.ant-table-thead th');
const headers = page.locator('.t-table__header th');
await expect(headers).toHaveCount(4);
// 逐个验证列标题文本
@@ -58,21 +58,25 @@ test.describe('用量统计', () => {
test('应能打开供应商筛选下拉框', async ({ page }) => {
// 点击供应商下拉框
await page.locator('.ant-select').click();
await page.locator('.t-select').first().click();
// 验证下拉选项出现
await page.waitForSelector('.ant-select-dropdown', { timeout: 3000 });
await page.waitForSelector('.t-select__dropdown', { timeout: 3000 });
// 点击外部关闭下拉框
await page.keyboard.press('Escape');
});
test('应能打开日期范围选择器', async ({ page }) => {
// 点击日期选择器
await page.locator('.ant-picker-range').click();
// 点击日期选择器 - TDesign DateRangePicker
const dateRangePicker = page.locator('.t-range-input');
await expect(dateRangePicker).toBeVisible();
// 验证日期面板出现
await page.waitForSelector('.ant-picker-dropdown', { timeout: 3000 });
// 点击日期选择器
await dateRangePicker.click();
// 等待一下让面板打开
await page.waitForTimeout(500);
// 点击外部关闭
await page.keyboard.press('Escape');
@@ -80,10 +84,10 @@ test.describe('用量统计', () => {
test('应显示空数据提示', async ({ page }) => {
// 等待表格加载
await page.waitForSelector('.ant-table', { timeout: 5000 });
await page.waitForSelector('.t-table', { timeout: 5000 });
// 检查是否有数据
const emptyText = page.locator('.ant-table-tbody .ant-empty-description');
const emptyText = page.locator('.t-table__empty');
if (await emptyText.count() > 0) {
await expect(emptyText).toBeVisible();