wangxuming/makelore
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(canvas): add full-height history rail

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

26
tests/e2e/image-workspace-v2.spec.ts
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);

17
tests/unit/image-canvas-page.test.tsx
View File

@@ -125,13 +125,17 @@ describe('AI Design Canvas page', () => {
expect(screen.queryByText(/规格版本|编译器|生成策略|字段决策/)).not.toBeInTheDocument();
});
it('leaves desktop Workspace navigation to the shared left project sidebar', () => {
it('places desktop production history in a full-height right rail', () => {
setViewport(true);
prepareWorkspace();
render(<ImageCanvas />);
const historyRail = screen.getByTestId('image-workspace-history-rail');
expect(historyRail).toHaveClass('h-full', 'border-l');
expect(within(historyRail).getByRole('heading', { name: '历史作品' })).toBeInTheDocument();
expect(within(historyRail).getByText('还没有历史作品')).toBeInTheDocument();
expect(screen.queryByTestId('image-workspace-works-rail')).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: '作品' })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: '项目' })).not.toBeInTheDocument();
});
it('prioritizes an offered current plan over older completed-work status', () => {
@@ -142,17 +146,18 @@ describe('AI Design Canvas page', () => {
render(<ImageCanvas />);
expect(screen.getByText(/制作方案已准备好，确认前仍可修改/)).toBeInTheDocument();
expect(screen.getByTestId('image-workspace-history-rail')).toBeInTheDocument();
expect(screen.queryByTestId('image-workspace-works-rail')).not.toBeInTheDocument();
});
it('opens the Works rail as a left sheet on compact layouts', () => {
it('opens project navigation as a left sheet on compact layouts', () => {
prepareWorkspace();
render(<ImageCanvas />);
fireEvent.click(screen.getByRole('button', { name: '作品' }));
fireEvent.click(screen.getByRole('button', { name: '项目' }));
const rail = screen.getByTestId('image-workspace-works-rail');
expect(rail).toBeInTheDocument();
expect(within(rail).getByRole('heading', { name: '我的作品' })).toBeInTheDocument();
expect(within(rail).getByRole('heading', { name: '设计项目' })).toBeInTheDocument();
expect(rail.closest('[role="dialog"]')).toHaveClass('left-0');
expect(rail.closest('[role="dialog"]')).not.toHaveClass('right-0');
});
@@ -423,6 +428,6 @@ describe('AI Design Canvas page', () => {
render(<ImageCanvas />);
fireEvent.click(screen.getByRole('button', { name: '开始第一个作品' }));
await waitFor(() => expect(screen.getByRole('heading', { name: '新建作品' })).toBeInTheDocument());
await waitFor(() => expect(screen.getByRole('heading', { name: '新建项目' })).toBeInTheDocument());
});
});