fix(canvas): add full-height history rail

This commit is contained in:
inman
2026-09-07 15:09:12 +08:00
parent 4477d0da7d
commit a705253261
8 changed files with 230 additions and 122 deletions

View File

@@ -353,6 +353,7 @@ test.describe('AI Design V2 workspace', () => {
await expect(page.getByTestId('image-workspace')).toBeVisible();
await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
await expect(page.getByTestId('sidebar-image-workspace')).toBeVisible();
await expect(page.getByTestId('image-workspace-history-rail')).toBeVisible();
await expect(page.getByTestId('image-workspace-works-rail')).toHaveCount(0);
await expect(page.getByRole('heading', { name: '和 AI 一起完善创作' })).toBeVisible();
await expect(page.getByRole('heading', { name: '制作方案' })).toBeVisible();
@@ -368,12 +369,21 @@ test.describe('AI Design V2 workspace', () => {
?.getBoundingClientRect();
const projectSidebar = document.querySelector('[data-testid="sidebar"]')
?.getBoundingClientRect();
return conversation && projectSidebar
const workspace = document.querySelector('[data-testid="image-workspace"]')
?.getBoundingClientRect();
const historyRail = document.querySelector('[data-testid="image-workspace-history-rail"]')
?.getBoundingClientRect();
return conversation && projectSidebar && workspace && historyRail
? {
conversationHeight: conversation.height,
conversationWidth: conversation.width,
sidebarWidth: projectSidebar.width,
horizontalGap: Math.abs(projectSidebar.right - conversation.left),
historyRailWidth: historyRail.width,
historyRailHeight: historyRail.height,
historyTopGap: Math.abs(workspace.top - historyRail.top),
historyBottomGap: Math.abs(workspace.bottom - historyRail.bottom),
historyHorizontalGap: Math.abs(conversation.right - historyRail.left),
}
: null;
});
@@ -381,24 +391,31 @@ test.describe('AI Design V2 workspace', () => {
expect(layout!.conversationHeight).toBeGreaterThan(300);
expect(layout!.sidebarWidth).toBe(256);
expect(layout!.horizontalGap).toBeLessThanOrEqual(1);
expect(layout!.historyRailWidth).toBeGreaterThanOrEqual(320);
expect(layout!.historyRailHeight).toBeGreaterThan(500);
expect(layout!.historyTopGap).toBeLessThanOrEqual(1);
expect(layout!.historyBottomGap).toBeLessThanOrEqual(1);
expect(layout!.historyHorizontalGap).toBeLessThanOrEqual(1);
expect(layout!.conversationWidth).toBeGreaterThan(600);
const desktopViewport = page.viewportSize();
await page.setViewportSize({ width: 375, height: 800 });
await expect(page.getByTestId('sidebar')).toBeHidden();
await expect(page.getByTestId('image-workspace-history-rail')).toHaveCount(0);
await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
await expect(page.getByTestId('youth-creation-card')).toBeVisible();
await page.getByRole('button', { name: '作品', exact: true }).click();
await page.getByRole('button', { name: '项目', exact: true }).click();
await expect(page.getByTestId('image-workspace-works-rail')).toBeVisible();
await expect(page.getByRole('dialog')).toHaveClass(/left-0/);
await page.keyboard.press('Escape');
await page.setViewportSize({ width: 768, height: 800 });
await expect(page.getByTestId('image-workspace-conversation')).toBeVisible();
await expect(page.getByRole('button', { name: '作品', exact: true })).toBeVisible();
await expect(page.getByRole('button', { name: '项目', exact: true })).toBeVisible();
await page.setViewportSize(desktopViewport ?? { width: 1280, height: 800 });
await expect(page.getByTestId('sidebar-image-workspace')).toBeVisible();
await expect(page.getByTestId('image-workspace-history-rail')).toBeVisible();
await expect(page.getByTestId('image-workspace-works-rail')).toHaveCount(0);
await page.getByRole('combobox', { name: '画幅' }).selectOption('16:9');
@@ -418,7 +435,8 @@ test.describe('AI Design V2 workspace', () => {
await expect(page.getByText(/规格版本|编译器|生成方式|不可变/)).toHaveCount(0);
await page.getByRole('button', { name: '确认并开始制作' }).click();
await expect(page.getByTestId('design-plan-history-task-1')).toBeVisible();
await expect(page.getByTestId('image-workspace-history-rail').getByTestId('design-plan-history-task-1')).toBeVisible();
await expect(page.getByTestId('image-workspace-conversation').getByTestId('design-plan-history-task-1')).toHaveCount(0);
await expect(page.getByText('等待制作')).toBeVisible();
await expect(page.getByTestId('youth-creation-card')).toHaveCount(0);
await expect(page.getByText('1200', { exact: true })).toHaveCount(0);