refactor: 迁移 UI 组件库从 Ant Design 至 TDesign
- 替换 antd 为 tdesign-react 作为主要 UI 组件库 - 引入 Recharts 替代 @ant-design/charts 实现图表功能 - 移除主题系统相关代码(ThemeContext、themes 目录) - 更新所有组件以适配 TDesign 组件 API - 更新测试用例以匹配新的组件实现 - 新增 TDesign 和 Recharts 集成规范文档
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user