-
+
- 删除作品
- 这会隐藏本作品的对话、方案、任务与素材。已另存到电脑的文件不受影响。
+ 删除项目
+ 这会隐藏本项目的对话、方案、任务与素材。已另存到电脑的文件不受影响。
diff --git a/src/pages/ImageCanvas/index.tsx b/src/pages/ImageCanvas/index.tsx
index 6ce6ea9a..c25361c6 100644
--- a/src/pages/ImageCanvas/index.tsx
+++ b/src/pages/ImageCanvas/index.tsx
@@ -21,6 +21,7 @@ import { useAuthStore } from '@/stores/auth';
import { useImagePromptMuseumStore } from '@/stores/image-prompt-museum';
import { useImageWorkspaceStore } from '@/stores/image-workspace';
import { DesignConversationPane } from './DesignConversationPane';
+import { DesignHistoryRail } from './DesignHistoryRail';
import { DesignWorksRail } from './DesignWorksRail';
import { hasActiveCreationPlan } from './plan-lifecycle';
import { projectYouthCreationCard } from './youth-form-projection';
@@ -46,12 +47,22 @@ function useDesktopLayout(): boolean {
function LoadingWorkspace() {
return (
-
-
-
-
-
-
+
+
+
+
+
+ {[0, 1, 2].map((item) => (
+
+ ))}
+
);
@@ -165,99 +176,104 @@ export function ImageCanvas() {
};
return (
-
-
-
-
-
-
- {workspace?.workspace.title ?? 'Makelore Canvas'}
-
+
+
+
+
+
+
+
+ {workspace?.workspace.title ?? 'Makelore Canvas'}
+
+
+
+ {updatedAt ? `${readiness} · 更新于 ${updatedAt}` : readiness}
+
- {updatedAt ? `${readiness} · 更新于 ${updatedAt}` : readiness}
-
-
-
- {streamHealthy ? : }
- {streamHealthy ? '实时同步' : '恢复连接'}
-
-
- {workspace && (
-
- {error && workspace && (
-
- {error}
-
-
- )}
-
-
-
- {workspace ? (
-
- ) : (
-
- )}
-
-
+ {desktopLayout ?
: null}
{!desktopLayout && (
- 我的作品
- 新建、切换、重命名或删除 AI 绘画作品。
+ 设计项目
+ 新建、切换、重命名或删除 AI 绘画项目。
setWorksOpen(false)} />
diff --git a/tests/e2e/image-workspace-v2.spec.ts b/tests/e2e/image-workspace-v2.spec.ts
index 9f18d800..87c3f0d1 100644
--- a/tests/e2e/image-workspace-v2.spec.ts
+++ b/tests/e2e/image-workspace-v2.spec.ts
@@ -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);
diff --git a/tests/unit/image-canvas-page.test.tsx b/tests/unit/image-canvas-page.test.tsx
index 7a8160b0..b0b86888 100644
--- a/tests/unit/image-canvas-page.test.tsx
+++ b/tests/unit/image-canvas-page.test.tsx
@@ -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();
+ 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();
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();
- 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();
fireEvent.click(screen.getByRole('button', { name: '开始第一个作品' }));
- await waitFor(() => expect(screen.getByRole('heading', { name: '新建作品' })).toBeInTheDocument());
+ await waitFor(() => expect(screen.getByRole('heading', { name: '新建项目' })).toBeInTheDocument());
});
});