From a3fed35cbdc29c3532c13f7dc075026f9346887d Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Mon, 15 Jun 2026 15:56:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=9B=BE=E7=89=87=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E7=B4=A0=E6=9D=90=E4=B8=8E=E4=B8=8A=E4=B8=8B=E6=96=87?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加素材拖拽上传遮罩、素材移动和默认文件夹归一

补齐画布右键菜单、复制剪切粘贴、层级和翻转操作

补齐生成图入库、项目返回入口和项目名称标题

扩展画布测试覆盖素材、右键菜单、生成图和布局交互
---
 .../ImageCanvasEditorPrimitives.tsx           |   16 +
 .../ImageCanvasEditorView.test.tsx            |  877 +++++++++-
 .../image-editor/ImageCanvasEditorView.tsx    | 1449 ++++++++++++++---
 src/index.css                                 |  111 ++
 4 files changed, 2182 insertions(+), 271 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index 86a7edb6..8b82d2b5 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -1,6 +1,7 @@
 import type {
   ComponentType,
   DragEventHandler,
+  MouseEventHandler,
   PointerEventHandler,
   ReactNode,
 } from 'react';
@@ -68,9 +69,14 @@ export type SidebarMediaItemProps = {
   primaryClassName?: string;
   actions?: ReactNode;
   titleNode?: ReactNode;
+  draggable?: boolean;
+  onDragStart?: DragEventHandler<HTMLDivElement>;
+  onDragEnd?: DragEventHandler<HTMLDivElement>;
   onDragOver?: DragEventHandler<HTMLDivElement>;
   onDrop?: DragEventHandler<HTMLDivElement>;
+  onPointerDown?: PointerEventHandler<HTMLDivElement>;
   onPointerEnter?: PointerEventHandler<HTMLDivElement>;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
 };
 
 export function SidebarMediaItem({
@@ -87,16 +93,26 @@ export function SidebarMediaItem({
   primaryClassName,
   actions,
   titleNode,
+  draggable,
+  onDragStart,
+  onDragEnd,
   onDragOver,
   onDrop,
+  onPointerDown,
   onPointerEnter,
+  onContextMenu,
 }: SidebarMediaItemProps) {
   return (
     <div
       className={`${rowClassName} ${selected ? `${rowClassName}--selected` : ''}`}
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
       onDragOver={onDragOver}
       onDrop={onDrop}
+      onPointerDown={onPointerDown}
       onPointerEnter={onPointerEnter}
+      onContextMenu={onContextMenu}
     >
       <button
         type="button"
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 8eda8f37..6017f7b3 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -12,6 +12,7 @@ const editEditorImageMock = vi.hoisted(() => vi.fn());
 const createEditorAssetMock = vi.hoisted(() => vi.fn());
 const createEditorProjectResourceMock = vi.hoisted(() => vi.fn());
 const createEditorAssetFolderMock = vi.hoisted(() => vi.fn());
+const updateEditorAssetMock = vi.hoisted(() => vi.fn());
 const updateEditorAssetFolderMock = vi.hoisted(() => vi.fn());
 const deleteEditorAssetFolderMock = vi.hoisted(() => vi.fn());
 const deleteEditorAssetMock = vi.hoisted(() => vi.fn());
@@ -20,6 +21,85 @@ const loadEditorProjectMock = vi.hoisted(() => vi.fn());
 const loadOrCreateRecentEditorProjectMock = vi.hoisted(() => vi.fn());
 const saveEditorProjectLayoutMock = vi.hoisted(() => vi.fn());
 
+const defaultProjectLayers = [
+  {
+    layerId: 'layer-puzzle',
+    resourceId: 'resource-puzzle',
+    title: '拼图素材',
+    src: '/creation-type-references/puzzle.webp',
+    x: 470,
+    y: 300,
+    width: 420,
+    height: 420,
+    originalWidth: 640,
+    originalHeight: 640,
+    zIndex: 1,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    layerId: 'layer-big-fish',
+    resourceId: 'resource-big-fish',
+    title: '大鱼素材',
+    src: '/creation-type-references/big-fish.webp',
+    x: 930,
+    y: 360,
+    width: 420,
+    height: 236,
+    originalWidth: 720,
+    originalHeight: 405,
+    zIndex: 2,
+    sourceType: 'uploaded' as const,
+  },
+];
+
+const defaultAccountAssets = [
+  {
+    assetId: 'asset-puzzle',
+    folderId: 'project',
+    label: '拼图素材',
+    imageSrc: '/creation-type-references/puzzle.webp',
+    width: 640,
+    height: 640,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-match3d',
+    folderId: 'project',
+    label: '抓大鹅素材',
+    imageSrc: '/creation-type-references/match3d.webp',
+    width: 640,
+    height: 640,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-big-fish',
+    folderId: 'project',
+    label: '大鱼素材',
+    imageSrc: '/creation-type-references/big-fish.webp',
+    width: 720,
+    height: 405,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-bark-battle',
+    folderId: 'project',
+    label: '声浪素材',
+    imageSrc: '/creation-type-references/bark-battle.webp',
+    width: 640,
+    height: 900,
+    sourceType: 'uploaded' as const,
+  },
+  {
+    assetId: 'asset-visual-novel',
+    folderId: 'project',
+    label: '视觉小说素材',
+    imageSrc: '/creation-type-references/visual-novel.webp',
+    width: 720,
+    height: 405,
+    sourceType: 'uploaded' as const,
+  },
+];
+
 vi.mock('../../services/image-editor/editorProjectClient', async () => {
   const actual = await vi.importActual<
     typeof import('../../services/image-editor/editorProjectClient')
@@ -37,6 +117,7 @@ vi.mock('../../services/image-editor/editorProjectClient', async () => {
     loadEditorProject: loadEditorProjectMock,
     loadOrCreateRecentEditorProject: loadOrCreateRecentEditorProjectMock,
     saveEditorProjectLayout: saveEditorProjectLayoutMock,
+    updateEditorAsset: updateEditorAssetMock,
     updateEditorAssetFolder: updateEditorAssetFolderMock,
   };
 });
@@ -55,13 +136,38 @@ function dispatchPointerEvent(
   fireEvent(target, event);
 }
 
+function createDataTransferStub() {
+  const store = new Map<string, string>();
+  return {
+    files: [],
+    types: [] as string[],
+    dropEffect: 'none',
+    effectAllowed: 'all',
+    setData(type: string, value: string) {
+      store.set(type, value);
+      if (!this.types.includes(type)) {
+        this.types.push(type);
+      }
+    },
+    getData(type: string) {
+      return store.get(type) ?? '';
+    },
+  };
+}
+
+async function renderLoadedEditor() {
+  render(<ImageCanvasEditorView />);
+  await screen.findByAltText('画布图片：拼图素材');
+  await screen.findByRole('button', { name: '添加拼图素材' });
+}
+
 describe('ImageCanvasEditorView', () => {
   beforeEach(() => {
     loadOrCreateRecentEditorProjectMock.mockResolvedValue({
       projectId: 'editor-project-default',
       title: '默认项目',
       viewport: { x: 0, y: 0, scale: 1 },
-      layers: [],
+      layers: defaultProjectLayers,
       resources: [],
       updatedAt: '2026-06-12T00:00:00.000Z',
     });
@@ -75,7 +181,7 @@ describe('ImageCanvasEditorView', () => {
           systemDefault: true,
         },
       ],
-      assets: [],
+      assets: defaultAccountAssets,
     });
     createEditorAssetMock.mockImplementation(async (input) => ({
       assetId: `persisted-${input.label}`,
@@ -92,6 +198,15 @@ describe('ImageCanvasEditorView', () => {
       collapsed: false,
       systemDefault: false,
     });
+    updateEditorAssetMock.mockImplementation(async (assetId, input) => ({
+      assetId,
+      folderId: input.folderId ?? 'project',
+      label: input.label ?? '拼图素材',
+      imageSrc: '/creation-type-references/puzzle.webp',
+      width: 640,
+      height: 640,
+      sourceType: 'uploaded',
+    }));
     updateEditorAssetFolderMock.mockImplementation(async (folderId, input) => ({
       folderId,
       label: input.label ?? '角色上传',
@@ -130,6 +245,7 @@ describe('ImageCanvasEditorView', () => {
     createEditorAssetMock.mockReset();
     createEditorProjectResourceMock.mockReset();
     createEditorAssetFolderMock.mockReset();
+    updateEditorAssetMock.mockReset();
     updateEditorAssetFolderMock.mockReset();
     deleteEditorAssetFolderMock.mockReset();
     deleteEditorAssetMock.mockReset();
@@ -163,9 +279,140 @@ describe('ImageCanvasEditorView', () => {
     expect(loadOrCreateRecentEditorProjectMock).not.toHaveBeenCalled();
   });
 
-  it('toggles the shared sidebar from canvas panel buttons', () => {
+  it('offers a topbar entry back to the project page', async () => {
+    await renderLoadedEditor();
+
+    const projectLink = screen.getByRole('link', { name: '返回项目页面' });
+
+    expect(projectLink.getAttribute('href')).toBe('/project');
+  });
+
+  it('uses the loaded project name as the canvas title', async () => {
+    await renderLoadedEditor();
+
+    expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: '图片编辑器' })).toBeNull();
+  });
+
+  it('does not inject built-in mock assets or layers when persistence returns empty data', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-empty',
+      title: '空项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+
     render(<ImageCanvasEditorView />);
 
+    await waitFor(() => {
+      expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
+    });
+    expect(screen.queryByRole('button', { name: '添加拼图素材' })).toBeNull();
+    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+    expect(screen.getByRole('region', { name: '项目素材' })).toBeTruthy();
+  });
+
+  it('removes invalid uploaded layers when the canvas opens', async () => {
+    loadOrCreateRecentEditorProjectMock.mockResolvedValueOnce({
+      projectId: 'editor-project-invalid-layer',
+      title: '包含失效素材的项目',
+      viewport: { x: 0, y: 0, scale: 1 },
+      layers: [
+        {
+          layerId: 'layer-valid-asset',
+          resourceId: 'resource-valid-asset',
+          title: '账号素材A',
+          src: 'data:image/png;base64,YQ==',
+          x: 120,
+          y: 120,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 1,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-a',
+        },
+        {
+          layerId: 'layer-missing-asset',
+          resourceId: 'resource-missing-asset',
+          title: '已删除素材',
+          src: 'data:image/png;base64,bWlzc2luZw==',
+          x: 480,
+          y: 120,
+          width: 320,
+          height: 240,
+          originalWidth: 320,
+          originalHeight: 240,
+          zIndex: 2,
+          sourceType: 'uploaded',
+          sourceAssetId: 'asset-missing',
+        },
+      ],
+      resources: [],
+      updatedAt: '2026-06-12T00:00:00.000Z',
+    });
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-a',
+          folderId: 'project',
+          label: '账号素材A',
+          imageSrc: 'data:image/png;base64,YQ==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+
+    render(<ImageCanvasEditorView />);
+
+    await waitFor(() => {
+      expect(screen.getByAltText('画布图片：账号素材A')).toBeTruthy();
+      expect(screen.queryByAltText('画布图片：已删除素材')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(saveEditorProjectLayoutMock).toHaveBeenCalledWith(
+        'editor-project-invalid-layer',
+        expect.objectContaining({
+          layers: [
+            expect.objectContaining({
+              layerId: 'layer-valid-asset',
+              sourceAssetId: 'asset-a',
+            }),
+          ],
+        }),
+      );
+    });
+  });
+
+  it('toggles the shared sidebar from canvas panel buttons', async () => {
+    await renderLoadedEditor();
+
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
     const assetsButton = within(panelToolbar).getByRole('button', { name: '打开素材' });
@@ -196,7 +443,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('groups assets by folder and renames sidebar materials', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     expect(within(sidebar).getByRole('region', { name: '项目素材' })).toBeTruthy();
@@ -258,6 +505,34 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByAltText('画布图片：角色草图.png')).toBeNull();
   });
 
+  it('keeps only one non-deletable default asset folder', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'legacy-default',
+          label: '默认素材',
+          sortOrder: 1,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await screen.findByRole('region', { name: '项目素材' });
+
+    expect(screen.queryByRole('button', { name: '删除文件夹项目素材' })).toBeNull();
+    expect(screen.getByRole('button', { name: '删除文件夹默认素材' })).toBeTruthy();
+  });
+
   it('renames and deletes asset folders through the persisted asset library API', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -301,6 +576,67 @@ describe('ImageCanvasEditorView', () => {
     expect(deleteEditorAssetFolderMock).toHaveBeenCalledWith('folder-role');
   });
 
+  it('moves an asset to another folder when dragging inside the asset library', async () => {
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+        {
+          folderId: 'folder-role',
+          label: '角色',
+          sortOrder: 100,
+          collapsed: false,
+          systemDefault: false,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-puzzle',
+          folderId: 'project',
+          label: '拼图素材',
+          imageSrc: '/creation-type-references/puzzle.webp',
+          width: 640,
+          height: 640,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    const sourceAsset = await screen.findByRole('button', { name: '添加拼图素材' });
+    const sourceAssetRow = sourceAsset.closest('.image-canvas-editor__asset-row');
+    const projectFolder = screen.getByRole('region', { name: '项目素材' });
+    const roleFolder = screen.getByRole('region', { name: '角色' });
+    const dataTransfer = createDataTransferStub();
+
+    if (!sourceAssetRow) {
+      throw new Error('asset row should exist');
+    }
+    fireEvent.dragStart(sourceAssetRow, {
+      dataTransfer,
+    });
+    fireEvent.dragOver(roleFolder, {
+      dataTransfer,
+    });
+    fireEvent.drop(roleFolder, {
+      dataTransfer,
+    });
+
+    expect(updateEditorAssetMock).toHaveBeenCalledWith('asset-puzzle', {
+      folderId: 'folder-role',
+    });
+    expect(within(projectFolder).queryByRole('button', { name: '添加拼图素材' })).toBeNull();
+    expect(
+      within(roleFolder).getByRole('button', { name: '添加拼图素材' }),
+    ).toBeTruthy();
+    expect(createEditorAssetMock).not.toHaveBeenCalled();
+  });
+
   it('uploads multiple files as account-level assets without adding canvas layers', async () => {
     render(<ImageCanvasEditorView />);
 
@@ -365,6 +701,75 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '选择素材账号素材A' })).toBeNull();
   });
 
+  it('removes canvas layers linked to deleted assets', async () => {
+    const user = userEvent.setup();
+    loadEditorAssetLibraryMock.mockResolvedValueOnce({
+      folders: [
+        {
+          folderId: 'project',
+          label: '项目素材',
+          sortOrder: 0,
+          collapsed: false,
+          systemDefault: true,
+        },
+      ],
+      assets: [
+        {
+          assetId: 'asset-a',
+          folderId: 'project',
+          label: '账号素材A',
+          imageSrc: 'data:image/png;base64,YQ==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+        {
+          assetId: 'asset-b',
+          folderId: 'project',
+          label: '账号素材B',
+          imageSrc: 'data:image/png;base64,Yg==',
+          width: 320,
+          height: 240,
+          sourceType: 'uploaded',
+        },
+      ],
+    });
+    render(<ImageCanvasEditorView />);
+
+    await user.click(await screen.findByRole('button', { name: '添加账号素材A' }));
+    await user.click(screen.getByRole('button', { name: '添加账号素材B' }));
+    expect(screen.getByAltText('画布图片：账号素材A')).toBeTruthy();
+    expect(screen.getByAltText('画布图片：账号素材B')).toBeTruthy();
+
+    await user.click(screen.getByRole('button', { name: '素材选择模式' }));
+    await user.click(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByRole(
+        'button',
+        { name: '全选' },
+      ),
+    );
+    await waitFor(() => {
+      expect(
+        within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByText(
+          /已选 2/u,
+        ),
+      ).toBeTruthy();
+    });
+    await user.click(
+      within(screen.getByRole('toolbar', { name: '素材批量操作' })).getByRole(
+        'button',
+        { name: '删除' },
+      ),
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByAltText('画布图片：账号素材A')).toBeNull();
+      expect(screen.queryByAltText('画布图片：账号素材B')).toBeNull();
+    });
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-a');
+    expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-b');
+  });
+
   it('selects multiple assets with a marquee in asset selection mode', async () => {
     const user = userEvent.setup();
     loadEditorAssetLibraryMock.mockResolvedValueOnce({
@@ -448,11 +853,11 @@ describe('ImageCanvasEditorView', () => {
     });
 
     await user.click(screen.getByRole('button', { name: '素材选择模式' }));
-    dispatchPointerEvent(assetList, 'pointerdown', {
+    dispatchPointerEvent(firstAssetButton.closest('[data-asset-id]') as HTMLElement, 'pointerdown', {
       button: 0,
       pointerId: 88,
-      clientX: 8,
-      clientY: 100,
+      clientX: 32,
+      clientY: 140,
     });
     dispatchPointerEvent(assetList, 'pointermove', {
       button: 0,
@@ -471,9 +876,9 @@ describe('ImageCanvasEditorView', () => {
     expect(within(batchToolbar).getByText(/已选 2/u)).toBeTruthy();
   });
 
-  it('shows image size on hover and placeholder toolbar after selecting a layer', () => {
+  it('shows image size on hover and placeholder toolbar after selecting a layer', async () => {
     const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const canvasImage = screen.getByAltText('画布图片：拼图素材');
     fireEvent.mouseEnter(canvasImage.closest('button')!);
@@ -502,8 +907,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('toolbar', { name: '图片工具栏' })).toBeTruthy();
   });
 
-  it('treats puzzle material as a normal asset without generated metadata tools', () => {
-    render(<ImageCanvasEditorView />);
+  it('treats puzzle material as a normal asset without generated metadata tools', async () => {
+    await renderLoadedEditor();
 
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
       button: 0,
@@ -516,8 +921,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '修改图片' })).toBeNull();
   });
 
-  it('deletes the selected layer from the floating toolbar', () => {
-    render(<ImageCanvasEditorView />);
+  it('deletes the selected layer from the floating toolbar', async () => {
+    await renderLoadedEditor();
 
     expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
 
@@ -533,8 +938,55 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
   });
 
-  it('drops an image file on the canvas as a new canvas layer', async () => {
-    render(<ImageCanvasEditorView />);
+  it('applies floating toolbar delete to every selected canvas layer', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      button: 0,
+      pointerId: 151,
+      clientX: 120,
+      clientY: 120,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 151,
+      clientX: 120,
+      clientY: 120,
+    });
+    fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.pointerDown(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      button: 0,
+      pointerId: 152,
+      clientX: 520,
+      clientY: 180,
+      shiftKey: true,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 152,
+      clientX: 520,
+      clientY: 180,
+    });
+    fireEvent.keyUp(window, { key: 'Shift', code: 'ShiftLeft' });
+
+    await waitFor(() => {
+      expect(
+        screen.getByAltText('画布图片：拼图素材').closest('button')?.className,
+      ).toContain('image-canvas-editor__layer--selected');
+      expect(
+        screen.getByAltText('画布图片：大鱼素材').closest('button')?.className,
+      ).toContain('image-canvas-editor__layer--selected');
+    });
+    fireEvent.click(screen.getByRole('button', { name: '删除图片' }));
+
+    expect(screen.queryByAltText('画布图片：拼图素材')).toBeNull();
+    expect(screen.queryByAltText('画布图片：大鱼素材')).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '撤销' }));
+    expect(screen.getByAltText('画布图片：拼图素材')).toBeTruthy();
+    expect(screen.getByAltText('画布图片：大鱼素材')).toBeTruthy();
+  });
+
+  it('drops multiple image files on the canvas as new canvas layers', async () => {
+    await renderLoadedEditor();
     await waitFor(() => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
@@ -544,27 +996,84 @@ describe('ImageCanvasEditorView', () => {
       clientX: 430,
       clientY: 260,
       dataTransfer: {
-        files: [new File(['image'], '测试上传.png', { type: 'image/png' })],
+        files: [
+          new File(['image-a'], '测试上传A.png', { type: 'image/png' }),
+          new File(['image-b'], '测试上传B.png', { type: 'image/png' }),
+        ],
         types: ['Files'],
       },
     });
 
     await waitFor(() => {
-      expect(screen.getByAltText('画布图片：测试上传.png')).toBeTruthy();
+      expect(screen.getByAltText('画布图片：测试上传A.png')).toBeTruthy();
+      expect(screen.getByAltText('画布图片：测试上传B.png')).toBeTruthy();
     });
-    expect(createEditorAssetMock).toHaveBeenCalledWith(
+    expect(createEditorAssetMock).toHaveBeenCalledTimes(2);
+    expect(createEditorProjectResourceMock).toHaveBeenCalledTimes(2);
+    expect(createEditorAssetMock).toHaveBeenNthCalledWith(
+      1,
       expect.objectContaining({
-        label: '测试上传.png',
+        label: '测试上传A.png',
         imageSrc: expect.stringMatching(/^data:image\/png;base64,/u),
       }),
     );
-    expect(screen.getByRole('button', { name: '选择图层测试上传.png' })).toBeTruthy();
+    expect(createEditorAssetMock).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        label: '测试上传B.png',
+        imageSrc: expect.stringMatching(/^data:image\/png;base64,/u),
+      }),
+    );
+    expect(screen.getByRole('button', { name: '选择图层测试上传A.png' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '选择图层测试上传B.png' })).toBeTruthy();
+  });
+
+  it('shows a canvas drop overlay while dragging uploaded images over the canvas', async () => {
+    await renderLoadedEditor();
+
+    const viewport = screen.getByLabelText('画布工作区');
+    fireEvent.dragOver(viewport, {
+      dataTransfer: {
+        files: [new File(['image'], '画布提示.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    expect(screen.getByText('添加到画布')).toBeTruthy();
+    expect(screen.getByText('松开即可添加')).toBeTruthy();
+
+    fireEvent.drop(viewport, {
+      clientX: 430,
+      clientY: 260,
+      dataTransfer: {
+        files: [new File(['image'], '画布提示.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('添加到画布')).toBeNull();
+    });
+    await waitFor(() => {
+      expect(screen.getByAltText('画布图片：画布提示.png')).toBeTruthy();
+    });
   });
 
   it('drops files into the asset panel only once without creating canvas layers', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
-    fireEvent.drop(screen.getByRole('region', { name: '项目素材' }), {
+    const assetFolder = screen.getByRole('region', { name: '项目素材' });
+    fireEvent.dragOver(assetFolder, {
+      dataTransfer: {
+        files: [new File(['image'], '素材拖拽.png', { type: 'image/png' })],
+        types: ['Files'],
+      },
+    });
+
+    expect(screen.getByText('添加到素材')).toBeTruthy();
+    expect(screen.getByText('松开即可添加')).toBeTruthy();
+
+    fireEvent.drop(assetFolder, {
       dataTransfer: {
         files: [new File(['image'], '素材拖拽.png', { type: 'image/png' })],
         types: ['Files'],
@@ -574,26 +1083,154 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByRole('button', { name: '添加素材拖拽.png' })).toBeTruthy();
     });
+    expect(screen.queryByText('添加到素材')).toBeNull();
     expect(createEditorAssetMock).toHaveBeenCalledTimes(1);
     expect(screen.queryByAltText('画布图片：素材拖拽.png')).toBeNull();
   });
 
-  it('blocks the browser context menu inside the editor workspace', () => {
-    render(<ImageCanvasEditorView />);
+  it('shows the blank canvas context menu with paste disabled before copying', async () => {
+    await renderLoadedEditor();
 
-    const editor = screen.getByRole('region', { name: '图片画布编辑器' });
-    const contextMenuEvent = new MouseEvent('contextmenu', {
-      bubbles: true,
-      cancelable: true,
+    const viewport = screen.getByLabelText('画布工作区');
+    fireEvent.contextMenu(viewport, {
+      clientX: 320,
+      clientY: 220,
     });
-    const wasNotCanceled = editor.dispatchEvent(contextMenuEvent);
 
-    expect(wasNotCanceled).toBe(false);
-    expect(contextMenuEvent.defaultPrevented).toBe(true);
+    const menu = screen.getByRole('menu', { name: '画布右键菜单' });
+    expect(
+      (within(menu).getByRole('menuitem', { name: '粘贴' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+    expect(within(menu).getByRole('menuitem', { name: '放大' })).toBeTruthy();
+    expect(
+      within(menu).getByRole('menuitem', { name: '显示画布所有元素' }),
+    ).toBeTruthy();
   });
 
-  it('switches the shared sidebar between assets and layers', () => {
-    render(<ImageCanvasEditorView />);
+  it('keeps context menus inside the viewport instead of relying on internal scrollbars', async () => {
+    await renderLoadedEditor();
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 640,
+    });
+    Object.defineProperty(window, 'innerHeight', {
+      configurable: true,
+      value: 480,
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      clientX: 630,
+      clientY: 470,
+    });
+
+    const menu = screen.getByRole('menu', { name: '图层右键菜单' }) as HTMLElement;
+    expect(Number.parseFloat(menu.style.left)).toBeLessThan(630);
+    expect(Number.parseFloat(menu.style.top)).toBeLessThan(470);
+  });
+
+  it('copies a layer from the target context menu and pastes it on the canvas', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
+      clientX: 510,
+      clientY: 330,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '复制' }));
+
+    fireEvent.contextMenu(screen.getByLabelText('画布工作区'), {
+      clientX: 360,
+      clientY: 240,
+    });
+    const blankMenu = screen.getByRole('menu', { name: '画布右键菜单' });
+    expect(
+      (within(blankMenu).getByRole('menuitem', {
+        name: '粘贴',
+      }) as HTMLButtonElement).disabled,
+    ).toBe(false);
+    fireEvent.click(within(blankMenu).getByRole('menuitem', { name: '粘贴' }));
+
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+  });
+
+  it('handles target context menu duplicate, hide, lock, flip, group, ungroup, and delete', async () => {
+    await renderLoadedEditor();
+
+    const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
+    fireEvent.contextMenu(firstLayer, { clientX: 510, clientY: 330 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '创建副本' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+
+    const copiedLayer = screen.getAllByAltText(/画布图片：拼图素材/u)[1]!.closest('button')!;
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '水平翻转' }));
+    expect(
+      (screen.getAllByAltText(/画布图片：拼图素材/u)[1] as HTMLElement).style
+        .transform,
+    ).toBe('scale(-1, 1)');
+
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '锁定' }));
+    await waitFor(() => {
+      expect(copiedLayer.className).toContain('image-canvas-editor__layer--locked');
+    });
+
+    fireEvent.contextMenu(copiedLayer, { clientX: 540, clientY: 360 });
+    fireEvent.click(screen.getByRole('menuitem', { name: '隐藏' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
+    expect(screen.getByText(/已隐藏/u)).toBeTruthy();
+    fireEvent.contextMenu(screen.getByText(/已隐藏/u).closest('.image-canvas-editor__layer-row')!, {
+      clientX: 80,
+      clientY: 220,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '显示' }));
+    expect(screen.getAllByAltText(/画布图片：拼图素材/u)).toHaveLength(2);
+
+    fireEvent.keyDown(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.pointerDown(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      button: 0,
+      pointerId: 181,
+      clientX: 950,
+      clientY: 380,
+      shiftKey: true,
+    });
+    fireEvent.pointerUp(screen.getByLabelText('画布工作区'), {
+      pointerId: 181,
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.keyUp(window, { key: 'Shift', code: 'ShiftLeft' });
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '创建组' }));
+    await waitFor(() => {
+      expect(screen.getAllByText(/已打组/u).length).toBeGreaterThan(0);
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '解除组' }));
+    await waitFor(() => {
+      expect(screen.queryByText(/已打组/u)).toBeNull();
+    });
+
+    fireEvent.contextMenu(screen.getByAltText('画布图片：大鱼素材').closest('button')!, {
+      clientX: 950,
+      clientY: 380,
+    });
+    fireEvent.click(screen.getByRole('menuitem', { name: '删除' }));
+    expect(screen.queryByAltText('画布图片：大鱼素材')).toBeNull();
+  });
+
+  it('switches the shared sidebar between assets and layers', async () => {
+    await renderLoadedEditor();
 
     const sidebar = screen.getByRole('complementary', { name: '图片资源栏' });
     expect(within(sidebar).getByText('素材')).toBeTruthy();
@@ -619,16 +1256,16 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '添加拼图素材' })).toBeTruthy();
   });
 
-  it('adds assets from the sidebar and supports zoom buttons', () => {
-    render(<ImageCanvasEditorView />);
+  it('adds assets from the sidebar and supports zoom buttons', async () => {
+    await renderLoadedEditor();
 
     expect(
-      screen.getByRole('button', { name: '当前缩放比例 82%' }).className,
+      screen.getByRole('button', { name: '当前缩放比例 100%' }).className,
     ).toContain('platform-inline-option-button');
 
-    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 82%' }));
+    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 100%' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '放大' }));
-    expect(screen.getByRole('button', { name: '当前缩放比例 95%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 116%' })).toBeTruthy();
 
     fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
 
@@ -636,10 +1273,19 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('complementary', { name: '图片资源栏' })).toBeTruthy();
   });
 
-  it('offers Lovart-style zoom menu commands', async () => {
-    render(<ImageCanvasEditorView />);
+  it('places the zoom percentage at the far right of the bottom-left panel dock', async () => {
+    await renderLoadedEditor();
 
-    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 82%' }));
+    const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
+    const controls = within(panelToolbar).getAllByRole('button');
+
+    expect(controls.at(-1)?.getAttribute('aria-label')).toBe('当前缩放比例 100%');
+  });
+
+  it('offers Lovart-style zoom menu commands', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 100%' }));
 
     expect(screen.getByRole('menu', { name: '缩放菜单' })).toBeTruthy();
     expect(screen.getByRole('menuitem', { name: '显示画布所有元素' })).toBeTruthy();
@@ -652,8 +1298,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('button', { name: '当前缩放比例 50%' })).toBeTruthy();
   });
 
-  it('shows the Lovart-style minimap and canvas background controls', () => {
-    render(<ImageCanvasEditorView />);
+  it('shows the Lovart-style minimap and canvas background controls', async () => {
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
     const panelToolbar = screen.getByRole('toolbar', { name: '画布面板入口' });
@@ -674,14 +1320,14 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.queryByRole('button', { name: '画布小地图' })).toBeNull();
   });
 
-  it('uses normal wheel for vertical canvas scroll and ctrl wheel for zoom', () => {
-    render(<ImageCanvasEditorView />);
+  it('uses normal wheel for vertical canvas scroll and ctrl wheel for zoom', async () => {
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
-    expect(screen.getByRole('button', { name: '当前缩放比例 82%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
 
     fireEvent.wheel(viewport, { deltaY: 120, clientX: 400, clientY: 280 });
-    expect(screen.getByRole('button', { name: '当前缩放比例 82%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
 
     fireEvent.wheel(viewport, {
       deltaY: -120,
@@ -689,7 +1335,7 @@ describe('ImageCanvasEditorView', () => {
       clientX: 400,
       clientY: 280,
     });
-    expect(screen.getByRole('button', { name: '当前缩放比例 90%' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '当前缩放比例 110%' })).toBeTruthy();
 
     const ctrlWheelEvent = new WheelEvent('wheel', {
       bubbles: true,
@@ -704,7 +1350,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('selects multiple canvas layers with shift click', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
     const secondLayer = screen.getByAltText('画布图片：大鱼素材').closest('button')!;
@@ -750,8 +1396,8 @@ describe('ImageCanvasEditorView', () => {
     });
   });
 
-  it('drags the minimap to move the canvas viewport', () => {
-    render(<ImageCanvasEditorView />);
+  it('drags the minimap to move the canvas viewport', async () => {
+    await renderLoadedEditor();
 
     const minimap = screen.getByRole('button', { name: '画布小地图' });
     vi.spyOn(minimap, 'getBoundingClientRect').mockReturnValue({
@@ -766,19 +1412,29 @@ describe('ImageCanvasEditorView', () => {
       toJSON: () => ({}),
     });
     dispatchPointerEvent(minimap, 'pointerdown', {
+      button: 0,
+      pointerId: 71,
+      clientX: 60,
+      clientY: 42,
+    });
+    const world = screen
+      .getByLabelText('画布工作区')
+      .querySelector('.image-canvas-editor__world') as HTMLElement;
+    const transformAfterDown = world.style.transform;
+
+    dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
       button: 0,
       pointerId: 71,
       clientX: 120,
       clientY: 72,
     });
 
-    const firstLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
-    expect(Number.parseFloat((firstLayer as HTMLElement).style.left)).toBe(470);
+    expect(world.style.transform).not.toBe(transformAfterDown);
     expect(screen.getByRole('button', { name: '画布小地图' })).toBeTruthy();
   });
 
   it('persists layer groups in the canvas layer snapshot', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
@@ -855,7 +1511,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-real-task-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     fireEvent.click(within(bottomToolbar).getByRole('button', { name: '生成工具' }));
@@ -908,6 +1564,23 @@ describe('ImageCanvasEditorView', () => {
     await waitFor(() => {
       expect(screen.getByAltText(/画布图片：生成图片/)).toBeTruthy();
     });
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          folderId: 'project',
+          label: expect.stringMatching(/^生成图片/u),
+          imageSrc: 'data:image/png;base64,ZmFrZS1pbWFnZQ==',
+          sourceType: 'generated',
+          prompt: '一张明亮的拼图主视觉',
+          model: 'gpt-image-2',
+          provider: 'VectorEngine',
+          taskId: 'editor-real-task-1',
+        }),
+      );
+    });
+    fireEvent.click(screen.getByRole('button', { name: '打开素材' }));
+    expect(screen.getByRole('button', { name: /添加生成图片/u })).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: '打开图层' }));
     const generatedLayer = screen.getByAltText(/画布图片：生成图片/).closest('button')!;
     const anchoredGenerateDialog = screen.getByRole('dialog', { name: '生成图片' });
     expect(anchoredGenerateDialog).toBeTruthy();
@@ -936,7 +1609,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-drag-frame-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
     await waitFor(() => {
       expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled();
     });
@@ -986,8 +1659,8 @@ describe('ImageCanvasEditorView', () => {
     expect(Number.parseFloat((generatedLayer as HTMLElement).style.top)).toBeGreaterThan(180);
   });
 
-  it('hides the generation composer when selecting another image but keeps the placeholder', () => {
-    render(<ImageCanvasEditorView />);
+  it('hides the generation composer when selecting another image but keeps the placeholder', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
@@ -1012,8 +1685,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
   });
 
-  it('keeps the generation composer when clicking the canvas outside generation controls', () => {
-    render(<ImageCanvasEditorView />);
+  it('keeps the generation composer when clicking the canvas outside generation controls', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     expect(screen.getByRole('dialog', { name: '生成图片' })).toBeTruthy();
@@ -1029,8 +1702,8 @@ describe('ImageCanvasEditorView', () => {
     expect(screen.getByLabelText('图像生成占位图')).toBeTruthy();
   });
 
-  it('closes the generation composer without removing the placeholder frame', () => {
-    render(<ImageCanvasEditorView />);
+  it('closes the generation composer without removing the placeholder frame', async () => {
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.click(screen.getByRole('button', { name: '关闭生成图片' }));
@@ -1041,7 +1714,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('shows generation errors instead of falling back to mock images', async () => {
     generateEditorImageMock.mockRejectedValueOnce(new Error('VectorEngine 未配置'));
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1066,7 +1739,7 @@ describe('ImageCanvasEditorView', () => {
         code: 'UNAUTHORIZED',
       }),
     );
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1084,7 +1757,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('switches tools and restores the previous tool after holding Space', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     const selectTool = within(bottomToolbar).getByRole('button', { name: '选择工具' });
@@ -1105,7 +1778,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('switches away from hand tool from the bottom toolbar', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const bottomToolbar = screen.getByRole('toolbar', { name: 'AI画布工具栏' });
     const handTool = within(bottomToolbar).getByRole('button', { name: '抓手工具' });
@@ -1120,7 +1793,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('pans with the middle mouse button without leaving select mode', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const viewport = screen.getByLabelText('画布工作区');
     const middlePointerDown = new MouseEvent('pointerdown', {
@@ -1146,7 +1819,7 @@ describe('ImageCanvasEditorView', () => {
   });
 
   it('shows snap guides when dragging a layer near another layer alignment', async () => {
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     const puzzleLayer = screen.getByAltText('画布图片：拼图素材').closest('button')!;
     dispatchPointerEvent(puzzleLayer, 'pointerdown', {
@@ -1157,8 +1830,8 @@ describe('ImageCanvasEditorView', () => {
     });
     dispatchPointerEvent(screen.getByLabelText('画布工作区'), 'pointermove', {
       pointerId: 21,
-      clientX: 499,
-      clientY: 169,
+      clientX: 580,
+      clientY: 180,
     });
 
     expect(screen.getByTestId('image-canvas-editor-snap-guide-vertical')).toBeTruthy();
@@ -1167,7 +1840,7 @@ describe('ImageCanvasEditorView', () => {
 
   it('can switch tools after a layer drag started without pointer release', async () => {
     const user = userEvent.setup();
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.pointerDown(screen.getByAltText('画布图片：拼图素材').closest('button')!, {
       button: 0,
@@ -1212,7 +1885,7 @@ describe('ImageCanvasEditorView', () => {
       provider: 'VectorEngine',
       taskId: 'editor-real-edit-1',
     });
-    render(<ImageCanvasEditorView />);
+    await renderLoadedEditor();
 
     fireEvent.click(screen.getByRole('button', { name: '生成工具' }));
     fireEvent.change(screen.getByLabelText('生成提示词'), {
@@ -1262,6 +1935,66 @@ describe('ImageCanvasEditorView', () => {
       expect(screen.queryByRole('dialog', { name: '修改图片' })).toBeNull();
     });
     expect(screen.getByAltText(/画布图片：生成图片 .* 修改结果/)).toBeTruthy();
+    await waitFor(() => {
+      expect(createEditorAssetMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: expect.stringMatching(/修改结果/u),
+          imageSrc: 'data:image/png;base64,ZWRpdGVkLWltYWdl',
+          sourceType: 'generated',
+          prompt: '把画面改成黄昏光线',
+          taskId: 'editor-real-edit-1',
+        }),
+      );
+    });
     expect(screen.getByRole('button', { name: '当前缩放比例 100%' })).toBeTruthy();
   });
+
+  it('undoes and redoes canvas layer changes from the panel controls', async () => {
+    await renderLoadedEditor();
+
+    expect(screen.getByRole('button', { name: '撤销' })).toHaveProperty(
+      'disabled',
+      true,
+    );
+    expect(screen.getByRole('button', { name: '重做' })).toHaveProperty(
+      'disabled',
+      true,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
+
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+    expect(screen.getByRole('button', { name: '撤销' })).toHaveProperty(
+      'disabled',
+      false,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '撤销' }));
+
+    expect(screen.queryByAltText('画布图片：声浪素材')).toBeNull();
+    expect(screen.getByRole('button', { name: '重做' })).toHaveProperty(
+      'disabled',
+      false,
+    );
+    fireEvent.click(screen.getByRole('button', { name: '重做' }));
+
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+  });
+
+  it('supports undo and redo keyboard shortcuts inside the editor', async () => {
+    await renderLoadedEditor();
+
+    fireEvent.click(screen.getByRole('button', { name: '添加声浪素材' }));
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+
+    fireEvent.keyDown(window, { key: 'z', code: 'KeyZ', ctrlKey: true });
+    expect(screen.queryByAltText('画布图片：声浪素材')).toBeNull();
+
+    fireEvent.keyDown(window, {
+      key: 'Z',
+      code: 'KeyZ',
+      ctrlKey: true,
+      shiftKey: true,
+    });
+    expect(screen.getByAltText('画布图片：声浪素材')).toBeTruthy();
+  });
 });
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 23b25f7c..71d5589b 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -3,6 +3,7 @@ import {
   Check,
   CheckSquare,
   ChevronDown,
+  ChevronLeft,
   ChevronRight,
   Copy,
   Crop,
@@ -25,12 +26,15 @@ import {
   Square,
   Trash2,
   Type,
+  Redo2,
+  Undo2,
   WandSparkles,
   X,
 } from 'lucide-react';
 import {
   type DragEvent as ReactDragEvent,
   type KeyboardEvent as ReactKeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
   useCallback,
   useEffect,
@@ -116,7 +120,12 @@ type CanvasLayer = {
   objectKey?: string | null;
   assetObjectId?: string | null;
   sourceResourceId?: string | null;
+  sourceAssetId?: string | null;
   groupId?: string | null;
+  hidden?: boolean;
+  locked?: boolean;
+  flipX?: boolean;
+  flipY?: boolean;
 };
 
 type CanvasViewport = {
@@ -189,6 +198,35 @@ type CanvasMarqueeState = {
   currentY: number;
 };
 
+type CanvasHistorySnapshot = {
+  layers: CanvasLayer[];
+  viewport: CanvasViewport;
+  generateDialog: GenerateDialogState | null;
+  selectedLayerId: string | null;
+  selectedLayerIds: string[];
+};
+
+type CanvasClipboard = {
+  layers: CanvasLayer[];
+};
+
+type CanvasContextMenuState =
+  | {
+      kind: 'blank';
+      x: number;
+      y: number;
+      canvasPoint: { x: number; y: number };
+    }
+  | {
+      kind: 'layer';
+      x: number;
+      y: number;
+      layerId: string;
+      canvasPoint: { x: number; y: number };
+    };
+
+type UploadDropTarget = 'canvas' | 'assets' | null;
+
 type DragState =
   | {
       kind: 'pan';
@@ -223,64 +261,6 @@ type DragState =
       pointerId: number;
     };
 
-const EDITOR_ASSETS: EditorAsset[] = [
-  {
-    id: 'puzzle',
-    label: '拼图素材',
-    src: '/creation-type-references/puzzle.webp',
-    width: 640,
-    height: 640,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'match3d',
-    label: '抓大鹅素材',
-    src: '/creation-type-references/match3d.webp',
-    width: 640,
-    height: 640,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'big-fish',
-    label: '大鱼素材',
-    src: '/creation-type-references/big-fish.webp',
-    width: 720,
-    height: 405,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'bark-battle',
-    label: '声浪素材',
-    src: '/creation-type-references/bark-battle.webp',
-    width: 640,
-    height: 900,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-  {
-    id: 'visual-novel',
-    label: '视觉小说素材',
-    src: '/creation-type-references/visual-novel.webp',
-    width: 720,
-    height: 405,
-    folderId: 'project',
-    sourceKind: 'built-in',
-    sourceType: 'uploaded',
-    persisted: false,
-  },
-];
-
 const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
   {
     id: 'project',
@@ -291,47 +271,23 @@ const EDITOR_ASSET_FOLDERS: EditorAssetFolder[] = [
   },
 ];
 
-const INITIAL_LAYERS: CanvasLayer[] = [
-  {
-    id: 'layer-puzzle',
-    resourceId: 'resource-puzzle',
-    title: '拼图素材',
-    src: '/creation-type-references/puzzle.webp',
-    x: 470,
-    y: 300,
-    width: 420,
-    height: 420,
-    originalWidth: 640,
-    originalHeight: 640,
-    zIndex: 1,
-    sourceType: 'uploaded',
-  },
-  {
-    id: 'layer-big-fish',
-    resourceId: 'resource-big-fish',
-    title: '大鱼素材',
-    src: '/creation-type-references/big-fish.webp',
-    x: 930,
-    y: 360,
-    width: 420,
-    height: 236,
-    originalWidth: 720,
-    originalHeight: 405,
-    zIndex: 2,
-    sourceType: 'uploaded',
-  },
-];
-
 const CANVAS_WORLD_SIZE = 12000;
 const CANVAS_WORLD_ORIGIN = CANVAS_WORLD_SIZE / 2;
 const MIN_SCALE = 0.24;
 const MAX_SCALE = 3.2;
+const MAX_HISTORY_STEPS = 80;
 const TOOLBAR_HALF_WIDTH = 132;
 const DEFAULT_CANVAS_SIZE = { width: 900, height: 640 };
 const SNAP_THRESHOLD_SCREEN_PX = 18;
 const FIT_VIEW_PADDING = 10;
 const MINIMAP_SIZE = { width: 132, height: 84 };
 const MINIMAP_PADDING = 8;
+const CONTEXT_MENU_SIZE = {
+  blank: { width: 176, height: 148 },
+  layer: { width: 176, height: 444 },
+};
+const CONTEXT_MENU_VIEWPORT_MARGIN = 8;
+const ASSET_DRAG_MIME_TYPE = 'application/x-genarrative-editor-asset';
 const CANVAS_BACKGROUND_OPTIONS = [
   { label: '白色', value: '#ffffff' },
   { label: '浅灰', value: '#f8fafc' },
@@ -385,6 +341,7 @@ function createLayerFromAsset(
     taskId: asset.taskId,
     objectKey: asset.objectKey,
     assetObjectId: asset.assetObjectId,
+    sourceAssetId: asset.id,
   } satisfies CanvasLayer;
 }
 
@@ -410,7 +367,12 @@ function serializeLayer(layer: CanvasLayer): EditorProjectLayerSnapshot {
     objectKey: layer.objectKey,
     assetObjectId: layer.assetObjectId,
     sourceResourceId: layer.sourceResourceId,
+    sourceAssetId: layer.sourceAssetId,
     groupId: layer.groupId,
+    hidden: layer.hidden,
+    locked: layer.locked,
+    flipX: layer.flipX,
+    flipY: layer.flipY,
   };
 }
 
@@ -446,7 +408,12 @@ function hydrateLayer(snapshot: EditorProjectLayerSnapshot): CanvasLayer | null
     objectKey: stringOrNull(snapshot.objectKey),
     assetObjectId: stringOrNull(snapshot.assetObjectId),
     sourceResourceId: stringOrNull(snapshot.sourceResourceId),
+    sourceAssetId: stringOrNull(snapshot.sourceAssetId),
     groupId: stringOrNull(snapshot.groupId),
+    hidden: booleanFromSnapshot(snapshot.hidden),
+    locked: booleanFromSnapshot(snapshot.locked),
+    flipX: booleanFromSnapshot(snapshot.flipX),
+    flipY: booleanFromSnapshot(snapshot.flipY),
   };
 }
 
@@ -483,15 +450,29 @@ function mapAssetLibrarySnapshot(library: EditorAssetLibrarySnapshot): {
   };
 }
 
-function mergeAssetLibraryWithBuiltIns(library: EditorAssetLibrarySnapshot) {
+function normalizeAssetLibrary(library: EditorAssetLibrarySnapshot) {
   const mapped = mapAssetLibrarySnapshot(library);
-  const persistedFolderIds = new Set(mapped.folders.map((folder) => folder.id));
-  const builtInFolders = EDITOR_ASSET_FOLDERS.filter(
-    (folder) => !persistedFolderIds.has(folder.id),
-  );
+  let hasDefaultFolder = false;
+  const normalizedFolders = mapped.folders.map((folder) => {
+    if (!folder.systemDefault) {
+      return folder;
+    }
+    if (hasDefaultFolder) {
+      return {
+        ...folder,
+        systemDefault: false,
+      };
+    }
+    hasDefaultFolder = true;
+    return folder;
+  });
+  const persistedFolderIds = new Set(normalizedFolders.map((folder) => folder.id));
+  const fallbackFolders = hasDefaultFolder
+    ? []
+    : EDITOR_ASSET_FOLDERS.filter((folder) => !persistedFolderIds.has(folder.id));
   return {
-    folders: [...mapped.folders, ...builtInFolders],
-    assets: [...EDITOR_ASSETS, ...mapped.assets],
+    folders: [...normalizedFolders, ...fallbackFolders],
+    assets: mapped.assets,
   };
 }
 
@@ -503,6 +484,49 @@ function stringOrNull(value: unknown) {
   return typeof value === 'string' && value.trim() ? value : null;
 }
 
+function booleanFromSnapshot(value: unknown) {
+  return value === true;
+}
+
+function resolveContextMenuPosition(
+  clientX: number,
+  clientY: number,
+  kind: CanvasContextMenuState['kind'],
+) {
+  if (typeof window === 'undefined') {
+    return { x: clientX, y: clientY };
+  }
+  const menuSize = CONTEXT_MENU_SIZE[kind];
+  return {
+    x: clamp(
+      clientX,
+      CONTEXT_MENU_VIEWPORT_MARGIN,
+      Math.max(
+        CONTEXT_MENU_VIEWPORT_MARGIN,
+        window.innerWidth - menuSize.width - CONTEXT_MENU_VIEWPORT_MARGIN,
+      ),
+    ),
+    y: clamp(
+      clientY,
+      CONTEXT_MENU_VIEWPORT_MARGIN,
+      Math.max(
+        CONTEXT_MENU_VIEWPORT_MARGIN,
+        window.innerHeight - menuSize.height - CONTEXT_MENU_VIEWPORT_MARGIN,
+      ),
+    ),
+  };
+}
+
+function getDraggedAssetId(dataTransfer: DataTransfer) {
+  if (
+    !dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE) ||
+    typeof dataTransfer.getData !== 'function'
+  ) {
+    return '';
+  }
+  return dataTransfer.getData(ASSET_DRAG_MIME_TYPE);
+}
+
 function isCanvasSourceType(value: unknown): value is CanvasLayer['sourceType'] {
   return value === 'uploaded' || value === 'generated' || value === 'mock_generated';
 }
@@ -511,6 +535,22 @@ function isGeneratedLayer(layer: CanvasLayer) {
   return layer.sourceType === 'generated' || layer.sourceType === 'mock_generated';
 }
 
+function isLayerLinkedToAsset(layer: CanvasLayer, asset: EditorAsset) {
+  return (
+    layer.sourceAssetId === asset.id ||
+    Boolean(asset.assetObjectId && layer.assetObjectId === asset.assetObjectId) ||
+    Boolean(asset.objectKey && layer.objectKey === asset.objectKey) ||
+    layer.src === asset.src
+  );
+}
+
+function isLayerValidForAssetLibrary(layer: CanvasLayer, assets: EditorAsset[]) {
+  if (isGeneratedLayer(layer)) {
+    return true;
+  }
+  return assets.some((asset) => isLayerLinkedToAsset(layer, asset));
+}
+
 function getLayerBounds(targetLayers: CanvasLayer[]) {
   if (targetLayers.length === 0) {
     return null;
@@ -609,10 +649,24 @@ export function ImageCanvasEditorView() {
   const assetListRef = useRef<HTMLDivElement | null>(null);
   const dragStateRef = useRef<DragState | null>(null);
   const isShiftPressedRef = useRef(false);
-  const layerCounterRef = useRef(INITIAL_LAYERS.length);
+  const layerCounterRef = useRef(0);
   const saveTimerRef = useRef<number | null>(null);
+  const undoStackRef = useRef<CanvasHistorySnapshot[]>([]);
+  const redoStackRef = useRef<CanvasHistorySnapshot[]>([]);
+  const layersRef = useRef<CanvasLayer[]>([]);
+  const viewportRef = useRef<CanvasViewport>({
+    x: -260,
+    y: 70,
+    scale: 0.82,
+  });
+  const generateDialogRef = useRef<GenerateDialogState | null>(null);
+  const selectedLayerIdRef = useRef<string | null>(null);
+  const selectedLayerIdsRef = useRef<string[]>([]);
+  const dragHistoryCapturedRef = useRef(false);
   const [projectId, setProjectId] = useState<string | null>(null);
+  const [projectTitle, setProjectTitle] = useState('未命名画布');
   const [isProjectReady, setIsProjectReady] = useState(false);
+  const [isAssetLibraryReady, setIsAssetLibraryReady] = useState(false);
   const [activeSidebarPanel, setActiveSidebarPanel] =
     useState<SidebarPanel | null>('assets');
   const [viewport, setViewport] = useState<CanvasViewport>({
@@ -623,8 +677,8 @@ export function ImageCanvasEditorView() {
   const [canvasSize, setCanvasSize] = useState(DEFAULT_CANVAS_SIZE);
   const [assetFolders, setAssetFolders] =
     useState<EditorAssetFolder[]>(EDITOR_ASSET_FOLDERS);
-  const [assets, setAssets] = useState<EditorAsset[]>(EDITOR_ASSETS);
-  const [layers, setLayers] = useState<CanvasLayer[]>(INITIAL_LAYERS);
+  const [assets, setAssets] = useState<EditorAsset[]>([]);
+  const [layers, setLayers] = useState<CanvasLayer[]>([]);
   const [renamingAsset, setRenamingAsset] = useState<{
     assetId: string;
     value: string;
@@ -646,12 +700,8 @@ export function ImageCanvasEditorView() {
   const [canvasMarquee, setCanvasMarquee] = useState<CanvasMarqueeState | null>(
     null,
   );
-  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(
-    INITIAL_LAYERS[0]?.id ?? null,
-  );
-  const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>(
-    INITIAL_LAYERS[0]?.id ? [INITIAL_LAYERS[0].id] : [],
-  );
+  const [selectedLayerId, setSelectedLayerId] = useState<string | null>(null);
+  const [selectedLayerIds, setSelectedLayerIds] = useState<string[]>([]);
   const [hoveredLayerId, setHoveredLayerId] = useState<string | null>(null);
   const [activeTool, setActiveTool] = useState<CanvasTool>('select');
   const [isSpacePanning, setIsSpacePanning] = useState(false);
@@ -666,12 +716,21 @@ export function ImageCanvasEditorView() {
   const [metadataLayer, setMetadataLayer] = useState<CanvasLayer | null>(null);
   const [generateDialog, setGenerateDialog] =
     useState<GenerateDialogState | null>(null);
+  const [historyVersion, setHistoryVersion] = useState(0);
+  const [canvasClipboard, setCanvasClipboard] =
+    useState<CanvasClipboard | null>(null);
+  const [contextMenu, setContextMenu] =
+    useState<CanvasContextMenuState | null>(null);
+  const [uploadDropTarget, setUploadDropTarget] =
+    useState<UploadDropTarget>(null);
 
   const effectiveTool: CanvasTool = isSpacePanning ? 'hand' : activeTool;
   const selectedLayer = useMemo(
     () => layers.find((layer) => layer.id === selectedLayerId) ?? null,
     [layers, selectedLayerId],
   );
+  const selectedLayerCount = selectedLayerIds.length;
+  const hasMultipleSelectedLayers = selectedLayerCount > 1;
   const activeGenerationLayer = useMemo(
     () =>
       generateDialog?.mode === 'generate' && generateDialog.generatedLayerId
@@ -723,6 +782,116 @@ export function ImageCanvasEditorView() {
     selectableAssets.length > 0 &&
     selectableAssets.every((asset) => selectedAssetIds.has(asset.id));
 
+  useEffect(() => {
+    layersRef.current = layers;
+  }, [layers]);
+
+  useEffect(() => {
+    viewportRef.current = viewport;
+  }, [viewport]);
+
+  useEffect(() => {
+    generateDialogRef.current = generateDialog;
+  }, [generateDialog]);
+
+  useEffect(() => {
+    selectedLayerIdRef.current = selectedLayerId;
+  }, [selectedLayerId]);
+
+  useEffect(() => {
+    selectedLayerIdsRef.current = selectedLayerIds;
+  }, [selectedLayerIds]);
+
+  const getCanvasHistorySnapshot = useCallback(
+    (): CanvasHistorySnapshot => ({
+      layers: layersRef.current.map((layer) => ({ ...layer })),
+      viewport: { ...viewportRef.current },
+      generateDialog: generateDialogRef.current
+        ? {
+            ...generateDialogRef.current,
+            placeholder: generateDialogRef.current.placeholder
+              ? { ...generateDialogRef.current.placeholder }
+              : undefined,
+          }
+        : null,
+      selectedLayerId: selectedLayerIdRef.current,
+      selectedLayerIds: [...selectedLayerIdsRef.current],
+    }),
+    [],
+  );
+
+  const restoreCanvasHistorySnapshot = useCallback(
+    (snapshot: CanvasHistorySnapshot) => {
+      setLayers(snapshot.layers.map((layer) => ({ ...layer })));
+      setViewport({ ...snapshot.viewport });
+      setGenerateDialog(
+        snapshot.generateDialog
+          ? {
+              ...snapshot.generateDialog,
+              placeholder: snapshot.generateDialog.placeholder
+                ? { ...snapshot.generateDialog.placeholder }
+                : undefined,
+            }
+          : null,
+      );
+      setSelectedLayerId(snapshot.selectedLayerId);
+      setSelectedLayerIds([...snapshot.selectedLayerIds]);
+      setHoveredLayerId(null);
+      setMetadataLayer(null);
+      setCanvasMarquee(null);
+      setSnapGuide(null);
+      setIsPanning(false);
+      dragStateRef.current = null;
+    },
+    [],
+  );
+
+  const captureCanvasHistory = useCallback(
+    (options: { clearRedo?: boolean } = {}) => {
+      undoStackRef.current = [
+        ...undoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+        getCanvasHistorySnapshot(),
+      ];
+      if (options.clearRedo !== false) {
+        redoStackRef.current = [];
+      }
+      setHistoryVersion((version) => version + 1);
+    },
+    [getCanvasHistorySnapshot],
+  );
+
+  const undoCanvasChange = useCallback(() => {
+    const previousSnapshot = undoStackRef.current.at(-1);
+    if (!previousSnapshot) {
+      return;
+    }
+    undoStackRef.current = undoStackRef.current.slice(0, -1);
+    redoStackRef.current = [
+      ...redoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+      getCanvasHistorySnapshot(),
+    ];
+    restoreCanvasHistorySnapshot(previousSnapshot);
+    setHistoryVersion((version) => version + 1);
+  }, [getCanvasHistorySnapshot, restoreCanvasHistorySnapshot]);
+
+  const redoCanvasChange = useCallback(() => {
+    const nextSnapshot = redoStackRef.current.at(-1);
+    if (!nextSnapshot) {
+      return;
+    }
+    redoStackRef.current = redoStackRef.current.slice(0, -1);
+    undoStackRef.current = [
+      ...undoStackRef.current.slice(-(MAX_HISTORY_STEPS - 1)),
+      getCanvasHistorySnapshot(),
+    ];
+    restoreCanvasHistorySnapshot(nextSnapshot);
+    setHistoryVersion((version) => version + 1);
+  }, [getCanvasHistorySnapshot, restoreCanvasHistorySnapshot]);
+
+  const canUndo = undoStackRef.current.length > 0;
+  const canRedo = redoStackRef.current.length > 0;
+  void historyVersion;
+
   const selectSingleLayer = (layerId: string | null) => {
     setSelectedLayerId(layerId);
     setSelectedLayerIds(layerId ? [layerId] : []);
@@ -807,15 +976,17 @@ export function ImageCanvasEditorView() {
           return;
         }
         setProjectId(project.projectId);
+        setProjectTitle(project.title?.trim() || '未命名画布');
         setViewport(project.viewport);
         const hydratedLayers = project.layers
           .map(hydrateLayer)
           .filter((layer): layer is CanvasLayer => Boolean(layer));
-        if (hydratedLayers.length > 0) {
-          layerCounterRef.current = hydratedLayers.length;
-          setLayers(hydratedLayers);
-          selectSingleLayer(hydratedLayers[0]?.id ?? null);
-        }
+        layerCounterRef.current = hydratedLayers.length;
+        setLayers(hydratedLayers);
+        selectSingleLayer(hydratedLayers[0]?.id ?? null);
+        undoStackRef.current = [];
+        redoStackRef.current = [];
+        setHistoryVersion((version) => version + 1);
         setIsProjectReady(true);
       })
       .catch(() => {
@@ -836,15 +1007,16 @@ export function ImageCanvasEditorView() {
         if (cancelled) {
           return;
         }
-        const nextLibrary = mergeAssetLibraryWithBuiltIns(library);
+        const nextLibrary = normalizeAssetLibrary(library);
         setAssetFolders(nextLibrary.folders);
         setAssets(nextLibrary.assets);
         const defaultFolder = nextLibrary.folders.find(
           (folder) => folder.systemDefault,
         );
         setActiveUploadFolderId(defaultFolder?.id ?? nextLibrary.folders[0]?.id ?? 'project');
+        setIsAssetLibraryReady(true);
       })
-      .catch(() => {});
+      .catch(() => setIsAssetLibraryReady(true));
     return () => {
       cancelled = true;
     };
@@ -877,6 +1049,22 @@ export function ImageCanvasEditorView() {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      const isHistoryShortcut =
+        !isEditableTarget(event) && (event.ctrlKey || event.metaKey);
+      if (isHistoryShortcut && event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        if (event.shiftKey) {
+          redoCanvasChange();
+        } else {
+          undoCanvasChange();
+        }
+        return;
+      }
+      if (isHistoryShortcut && event.key.toLowerCase() === 'y') {
+        event.preventDefault();
+        redoCanvasChange();
+        return;
+      }
       if (event.key === 'Shift') {
         isShiftPressedRef.current = true;
       }
@@ -884,6 +1072,7 @@ export function ImageCanvasEditorView() {
         setActiveSidebarPanel(null);
         setIsZoomMenuOpen(false);
         setIsBackgroundMenuOpen(false);
+        setContextMenu(null);
         setGenerateDialog((currentDialog) =>
           currentDialog?.status === 'generating'
             ? currentDialog
@@ -919,7 +1108,25 @@ export function ImageCanvasEditorView() {
       window.removeEventListener('keydown', handleKeyDown);
       window.removeEventListener('keyup', handleKeyUp);
     };
-  }, []);
+  }, [redoCanvasChange, undoCanvasChange]);
+
+  useEffect(() => {
+    if (!contextMenu) {
+      return undefined;
+    }
+    const closeContextMenu = (event: PointerEvent) => {
+      const target = event.target;
+      if (
+        target instanceof Element &&
+        target.closest('.image-canvas-editor__context-menu')
+      ) {
+        return;
+      }
+      setContextMenu(null);
+    };
+    window.addEventListener('pointerdown', closeContextMenu);
+    return () => window.removeEventListener('pointerdown', closeContextMenu);
+  }, [contextMenu]);
 
   useEffect(() => {
     const blockBrowserZoom = (event: WheelEvent) => {
@@ -942,6 +1149,31 @@ export function ImageCanvasEditorView() {
     };
   }, []);
 
+  useEffect(() => {
+    if (!isProjectReady || !isAssetLibraryReady) {
+      return;
+    }
+    const invalidLayerIds = layers
+      .filter((layer) => !isLayerValidForAssetLibrary(layer, assets))
+      .map((layer) => layer.id);
+    if (!invalidLayerIds.length) {
+      return;
+    }
+    const invalidLayerIdSet = new Set(invalidLayerIds);
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !invalidLayerIdSet.has(layer.id)),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter((layerId) => !invalidLayerIdSet.has(layerId)),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId && invalidLayerIdSet.has(currentId) ? null : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer && invalidLayerIdSet.has(currentLayer.id) ? null : currentLayer,
+    );
+  }, [assets, isAssetLibraryReady, isProjectReady, layers]);
+
   useEffect(() => {
     if (!projectId || !isProjectReady) {
       return undefined;
@@ -984,6 +1216,7 @@ export function ImageCanvasEditorView() {
         MAX_SCALE,
       );
 
+      captureCanvasHistory();
       setViewport({
         x:
           canvasSize.width / 2 -
@@ -994,12 +1227,13 @@ export function ImageCanvasEditorView() {
         scale,
       });
     },
-    [canvasSize.height, canvasSize.width, layers],
+    [captureCanvasHistory, canvasSize.height, canvasSize.width, layers],
   );
 
   const updateScaleFromCenter = (nextScale: number) => {
     const viewportElement = canvasViewportRef.current;
     if (!viewportElement) {
+      captureCanvasHistory();
       setViewport((currentViewport) => ({
         ...currentViewport,
         scale: clamp(nextScale, MIN_SCALE, MAX_SCALE),
@@ -1010,6 +1244,7 @@ export function ImageCanvasEditorView() {
     const rect = viewportElement.getBoundingClientRect();
     const centerX = rect.width > 0 ? rect.width / 2 : canvasSize.width / 2;
     const centerY = rect.height > 0 ? rect.height / 2 : canvasSize.height / 2;
+    captureCanvasHistory();
     setViewport((currentViewport) => {
       const scale = clamp(nextScale, MIN_SCALE, MAX_SCALE);
       const worldX = (centerX - currentViewport.x) / currentViewport.scale;
@@ -1022,6 +1257,230 @@ export function ImageCanvasEditorView() {
     });
   };
 
+  const getCanvasPointFromClient = (clientX: number, clientY: number) => {
+    const rect = canvasViewportRef.current?.getBoundingClientRect();
+    const screenX = clientX - (rect?.left ?? 0);
+    const screenY = clientY - (rect?.top ?? 0);
+    return {
+      x: (screenX - viewport.x) / viewport.scale,
+      y: (screenY - viewport.y) / viewport.scale,
+    };
+  };
+
+  const getContextTargetLayerIds = (
+    menu: CanvasContextMenuState | null = contextMenu,
+  ) => {
+    if (menu?.kind !== 'layer') {
+      return [];
+    }
+    return selectedLayerIds.includes(menu.layerId)
+      ? selectedLayerIds
+      : [menu.layerId];
+  };
+
+  const duplicateLayersToPoint = (
+    sourceLayers: CanvasLayer[],
+    canvasPoint?: { x: number; y: number },
+  ) => {
+    if (!sourceLayers.length) {
+      return [];
+    }
+    const minX = Math.min(...sourceLayers.map((layer) => layer.x));
+    const minY = Math.min(...sourceLayers.map((layer) => layer.y));
+    const maxZIndex = layersRef.current.reduce(
+      (maxZ, layer) => Math.max(maxZ, layer.zIndex),
+      0,
+    );
+    return sourceLayers.map((layer, index) => ({
+      ...layer,
+      id: `layer-copy-${Date.now()}-${index}`,
+      resourceId: `local-resource-copy-${Date.now()}-${index}`,
+      title: `${layer.title} 副本`,
+      x: canvasPoint ? canvasPoint.x + (layer.x - minX) : layer.x + 32,
+      y: canvasPoint ? canvasPoint.y + (layer.y - minY) : layer.y + 32,
+      zIndex: maxZIndex + index + 1,
+      groupId: null,
+    }));
+  };
+
+  const pasteCanvasClipboard = (canvasPoint?: { x: number; y: number }) => {
+    if (!canvasClipboard?.layers.length) {
+      return;
+    }
+    const nextLayers = duplicateLayersToPoint(canvasClipboard.layers, canvasPoint);
+    if (!nextLayers.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+    setSelectedLayerId(nextLayers[0]?.id ?? null);
+    setActiveTool('select');
+    setContextMenu(null);
+  };
+
+  const copyContextLayers = (options: { cut?: boolean } = {}) => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayers = layers.filter((layer) => targetIds.includes(layer.id));
+    if (!targetLayers.length) {
+      return;
+    }
+    setCanvasClipboard({
+      layers: targetLayers.map((layer) => ({ ...layer })),
+    });
+    if (options.cut) {
+      captureCanvasHistory();
+      setLayers((currentLayers) =>
+        currentLayers.filter((layer) => !targetIds.includes(layer.id)),
+      );
+      selectSingleLayer(null);
+      setMetadataLayer((currentLayer) =>
+        currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+      );
+    }
+    setContextMenu(null);
+  };
+
+  const duplicateContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayers = layers.filter((layer) => targetIds.includes(layer.id));
+    const nextLayers = duplicateLayersToPoint(targetLayers);
+    if (!nextLayers.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) => [...currentLayers, ...nextLayers]);
+    setSelectedLayerIds(nextLayers.map((layer) => layer.id));
+    setSelectedLayerId(nextLayers[0]?.id ?? null);
+    setContextMenu(null);
+  };
+
+  const updateContextLayers = (
+    updater: (layer: CanvasLayer, targetIds: string[]) => CanvasLayer,
+  ) => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      currentLayers.map((layer) =>
+        targetIds.includes(layer.id) ? updater(layer, targetIds) : layer,
+      ),
+    );
+    setContextMenu(null);
+  };
+
+  const moveContextLayers = (mode: 'up' | 'down' | 'top' | 'bottom') => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    const maxZIndex = layers.reduce((maxZ, layer) => Math.max(maxZ, layer.zIndex), 0);
+    const minZIndex = layers.reduce((minZ, layer) => Math.min(minZ, layer.zIndex), 0);
+    let offsetIndex = 0;
+    updateContextLayers((layer) => {
+      if (mode === 'up') {
+        return { ...layer, zIndex: layer.zIndex + 1 };
+      }
+      if (mode === 'down') {
+        return { ...layer, zIndex: layer.zIndex - 1 };
+      }
+      offsetIndex += 1;
+      if (mode === 'top') {
+        return { ...layer, zIndex: maxZIndex + offsetIndex };
+      }
+      return { ...layer, zIndex: minZIndex - (targetIds.length - offsetIndex + 1) };
+    });
+  };
+
+  const groupContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    const groupId = `layer-group-${Date.now()}`;
+    updateContextLayers((layer) => ({
+      ...layer,
+      groupId,
+    }));
+  };
+
+  const ungroupContextLayers = () => {
+    updateContextLayers((layer) => ({
+      ...layer,
+      groupId: null,
+    }));
+  };
+
+  const toggleContextLayerVisibility = () => {
+    const targetIds = getContextTargetLayerIds();
+    const shouldHide = layers
+      .filter((layer) => targetIds.includes(layer.id))
+      .some((layer) => !layer.hidden);
+    updateContextLayers((layer) => ({
+      ...layer,
+      hidden: shouldHide,
+    }));
+  };
+
+  const toggleContextLayerLock = () => {
+    const targetIds = getContextTargetLayerIds();
+    const shouldLock = layers
+      .filter((layer) => targetIds.includes(layer.id))
+      .some((layer) => !layer.locked);
+    updateContextLayers((layer) => ({
+      ...layer,
+      locked: shouldLock,
+    }));
+  };
+
+  const flipContextLayers = (axis: 'x' | 'y') => {
+    updateContextLayers((layer) =>
+      axis === 'x'
+        ? {
+            ...layer,
+            flipX: !layer.flipX,
+          }
+        : {
+            ...layer,
+            flipY: !layer.flipY,
+          },
+    );
+  };
+
+  const exportContextLayer = () => {
+    const targetIds = getContextTargetLayerIds();
+    const targetLayer = layers.find((layer) => targetIds.includes(layer.id));
+    if (!targetLayer) {
+      return;
+    }
+    const link = document.createElement('a');
+    link.href = targetLayer.src;
+    link.download = `${targetLayer.title || 'canvas-layer'}.png`;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setContextMenu(null);
+  };
+
+  const deleteContextLayers = () => {
+    const targetIds = getContextTargetLayerIds();
+    if (!targetIds.length) {
+      return;
+    }
+    captureCanvasHistory();
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !targetIds.includes(layer.id)),
+    );
+    selectSingleLayer(null);
+    setHoveredLayerId(null);
+    setMetadataLayer((currentLayer) =>
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
+    );
+    setContextMenu(null);
+  };
+
   const createProjectResourceForLayer = (
     layer: CanvasLayer,
     options: { onCreated?: (resourceId: string) => void } = {},
@@ -1059,6 +1518,104 @@ export function ImageCanvasEditorView() {
       .catch(() => {});
   };
 
+  const createAssetFromGeneratedLayer = (layer: CanvasLayer) => {
+    const targetFolder =
+      assetFolders.find((folder) => folder.systemDefault) ?? assetFolders[0];
+    if (!targetFolder) {
+      return;
+    }
+    const temporaryAssetId = `generated-asset-${layer.id}`;
+    const temporaryAsset: EditorAsset = {
+      id: temporaryAssetId,
+      label: layer.title,
+      src: layer.src,
+      width: layer.originalWidth,
+      height: layer.originalHeight,
+      folderId: targetFolder.id,
+      sourceKind: 'uploaded',
+      sourceType: layer.sourceType,
+      persisted: false,
+      prompt: layer.prompt ?? undefined,
+      actualPrompt: layer.actualPrompt ?? undefined,
+      model: layer.model ?? undefined,
+      provider: layer.provider ?? undefined,
+      taskId: layer.taskId ?? undefined,
+      objectKey: layer.objectKey ?? undefined,
+      assetObjectId: layer.assetObjectId ?? undefined,
+    };
+
+    setAssets((currentAssets) => [...currentAssets, temporaryAsset]);
+    setAssetFolders((currentFolders) =>
+      currentFolders.map((folder) =>
+        folder.id === targetFolder.id
+          ? {
+              ...folder,
+              collapsed: false,
+            }
+          : folder,
+      ),
+    );
+
+    createEditorAsset({
+      folderId: targetFolder.id,
+      label: layer.title,
+      imageSrc: layer.src,
+      width: layer.originalWidth,
+      height: layer.originalHeight,
+      sourceType: layer.sourceType,
+      prompt: layer.prompt,
+      actualPrompt: layer.actualPrompt,
+      model: layer.model,
+      provider: layer.provider,
+      taskId: layer.taskId,
+      objectKey: layer.objectKey,
+      assetObjectId: layer.assetObjectId,
+    })
+      .then((asset) => {
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === temporaryAssetId
+              ? {
+                  ...currentAsset,
+                  id: asset.assetId,
+                  folderId: asset.folderId,
+                  label: asset.label,
+                  src: asset.imageSrc,
+                  width: asset.width,
+                  height: asset.height,
+                  sourceType: asset.sourceType,
+                  prompt: asset.prompt ?? undefined,
+                  actualPrompt: asset.actualPrompt ?? undefined,
+                  model: asset.model ?? undefined,
+                  provider: asset.provider ?? undefined,
+                  taskId: asset.taskId ?? undefined,
+                  objectKey: asset.objectKey ?? undefined,
+                  assetObjectId: asset.assetObjectId ?? undefined,
+                  persisted: true,
+                }
+              : currentAsset,
+          ),
+        );
+        setLayers((currentLayers) =>
+          currentLayers.map((currentLayer) =>
+            currentLayer.id === layer.id
+              ? {
+                  ...currentLayer,
+                  sourceAssetId: asset.assetId,
+                  objectKey: asset.objectKey ?? currentLayer.objectKey,
+                  assetObjectId: asset.assetObjectId ?? currentLayer.assetObjectId,
+                }
+              : currentLayer,
+          ),
+        );
+      })
+      .catch(() => {
+        setAssets((currentAssets) =>
+          currentAssets.filter((asset) => asset.id !== temporaryAssetId),
+        );
+      });
+  };
+
   const addAssetLayer = (asset: EditorAsset, position?: { x: number; y: number }) => {
     setActiveUploadFolderId(asset.folderId);
     layerCounterRef.current += 1;
@@ -1071,6 +1628,7 @@ export function ImageCanvasEditorView() {
         y: position?.y ?? canvasSize.height / 2,
       },
     );
+    captureCanvasHistory();
     setLayers((currentLayers) => [...currentLayers, nextLayer]);
     selectSingleLayer(nextLayer.id);
     setHoveredLayerId(null);
@@ -1106,6 +1664,48 @@ export function ImageCanvasEditorView() {
     setRenamingAsset(null);
   };
 
+  const moveAssetToFolder = (assetId: string, folderId: string) => {
+    const movingAsset = assets.find((asset) => asset.id === assetId);
+    if (!movingAsset || movingAsset.folderId === folderId) {
+      return;
+    }
+    const previousFolderId = movingAsset.folderId;
+    setAssets((currentAssets) =>
+      currentAssets.map((asset) =>
+        asset.id === assetId
+          ? {
+              ...asset,
+              folderId,
+            }
+          : asset,
+      ),
+    );
+    setAssetFolders((currentFolders) =>
+      currentFolders.map((folder) =>
+        folder.id === folderId
+          ? {
+              ...folder,
+              collapsed: false,
+            }
+          : folder,
+      ),
+    );
+    if (movingAsset.persisted) {
+      updateEditorAsset(assetId, { folderId }).catch(() => {
+        setAssets((currentAssets) =>
+          currentAssets.map((asset) =>
+            asset.id === assetId
+              ? {
+                  ...asset,
+                  folderId: previousFolderId,
+                }
+              : asset,
+          ),
+        );
+      });
+    }
+  };
+
   const toggleAssetFolder = (folderId: string) => {
     const nextFolder = assetFolders.find((folder) => folder.id === folderId);
     const nextCollapsed = !(nextFolder?.collapsed ?? false);
@@ -1180,9 +1780,32 @@ export function ImageCanvasEditorView() {
     if (asset.sourceKind !== 'uploaded') {
       return;
     }
+    captureCanvasHistory();
     setAssets((currentAssets) =>
       currentAssets.filter((currentAsset) => currentAsset.id !== asset.id),
     );
+    setLayers((currentLayers) =>
+      currentLayers.filter((layer) => !isLayerLinkedToAsset(layer, asset)),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter(
+        (layerId) =>
+          !layersRef.current.some(
+            (layer) => layer.id === layerId && isLayerLinkedToAsset(layer, asset),
+          ),
+      ),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId &&
+      layersRef.current.some(
+        (layer) => layer.id === currentId && isLayerLinkedToAsset(layer, asset),
+      )
+        ? null
+        : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer && isLayerLinkedToAsset(currentLayer, asset) ? null : currentLayer,
+    );
     setRenamingAsset((currentRename) =>
       currentRename?.assetId === asset.id ? null : currentRename,
     );
@@ -1246,7 +1869,7 @@ export function ImageCanvasEditorView() {
     if (folder.persisted) {
       deleteEditorAssetFolder(folder.id)
         .then((library) => {
-          const nextLibrary = mergeAssetLibraryWithBuiltIns(library);
+          const nextLibrary = normalizeAssetLibrary(library);
           setAssetFolders(nextLibrary.folders);
           setAssets(nextLibrary.assets);
         })
@@ -1276,9 +1899,44 @@ export function ImageCanvasEditorView() {
 
   const deleteSelectedAssets = () => {
     const ids = [...selectedAssetIds];
+    const deletingAssets = assets.filter((asset) => selectedAssetIds.has(asset.id));
+    if (deletingAssets.length) {
+      captureCanvasHistory();
+    }
     setAssets((currentAssets) =>
       currentAssets.filter((asset) => !selectedAssetIds.has(asset.id)),
     );
+    setLayers((currentLayers) =>
+      currentLayers.filter(
+        (layer) => !deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+      ),
+    );
+    setSelectedLayerIds((currentIds) =>
+      currentIds.filter(
+        (layerId) =>
+          !layersRef.current.some(
+            (layer) =>
+              layer.id === layerId &&
+              deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+          ),
+      ),
+    );
+    setSelectedLayerId((currentId) =>
+      currentId &&
+      layersRef.current.some(
+        (layer) =>
+          layer.id === currentId &&
+          deletingAssets.some((asset) => isLayerLinkedToAsset(layer, asset)),
+      )
+        ? null
+        : currentId,
+    );
+    setMetadataLayer((currentLayer) =>
+      currentLayer &&
+      deletingAssets.some((asset) => isLayerLinkedToAsset(currentLayer, asset))
+        ? null
+        : currentLayer,
+    );
     setSelectedAssetIds(new Set());
     ids.forEach((assetId) => {
       void deleteEditorAsset(assetId);
@@ -1329,7 +1987,10 @@ export function ImageCanvasEditorView() {
       return;
     }
     const target = event.target as HTMLElement;
-    if (target.closest('button, input, textarea, select, [data-asset-id]')) {
+    if (target.closest('input, textarea, select')) {
+      return;
+    }
+    if (target.closest('button') && !target.closest('[data-asset-id]')) {
       return;
     }
     event.preventDefault();
@@ -1572,6 +2233,9 @@ export function ImageCanvasEditorView() {
       addToCanvas?: boolean;
     } = {},
   ) => {
+    if (options.addToCanvas) {
+      captureCanvasHistory();
+    }
     Array.from(files).forEach((file, index) => {
       layerCounterRef.current += 1;
       const uploadIndex = layerCounterRef.current;
@@ -1590,11 +2254,18 @@ export function ImageCanvasEditorView() {
   };
 
   const deleteSelectedLayer = () => {
-    if (!selectedLayerId) {
+    const targetIds = selectedLayerIds.length
+      ? selectedLayerIds
+      : selectedLayerId
+        ? [selectedLayerId]
+        : [];
+    if (!targetIds.length) {
       return;
     }
+    captureCanvasHistory();
     setLayers((currentLayers) => {
-      const nextLayers = currentLayers.filter((layer) => layer.id !== selectedLayerId);
+      const targetIdSet = new Set(targetIds);
+      const nextLayers = currentLayers.filter((layer) => !targetIdSet.has(layer.id));
       const nextSelectedLayer = nextLayers
         .slice()
         .sort((left, right) => right.zIndex - left.zIndex)[0];
@@ -1603,7 +2274,7 @@ export function ImageCanvasEditorView() {
     });
     setHoveredLayerId(null);
     setMetadataLayer((currentLayer) =>
-      currentLayer?.id === selectedLayerId ? null : currentLayer,
+      currentLayer && targetIds.includes(currentLayer.id) ? null : currentLayer,
     );
   };
 
@@ -1612,6 +2283,7 @@ export function ImageCanvasEditorView() {
     const placeholderHeight = 420;
     const worldCenterX = (canvasSize.width / 2 - viewport.x) / viewport.scale;
     const worldCenterY = (canvasSize.height / 2 - viewport.y) / viewport.scale;
+    captureCanvasHistory();
     setGenerateDialog({
       mode: 'generate',
       prompt: '',
@@ -1710,6 +2382,7 @@ export function ImageCanvasEditorView() {
     if (options.sourceLayer) {
       fitLayers([options.sourceLayer, nextLayer]);
     }
+    createAssetFromGeneratedLayer(nextLayer);
     createProjectResourceForLayer(nextLayer);
   };
 
@@ -1717,6 +2390,7 @@ export function ImageCanvasEditorView() {
     const normalizedPrompt =
       dialog.prompt.trim() ||
       (dialog.mode === 'edit' ? '修改当前图片' : 'AI 生成图片');
+    captureCanvasHistory();
     setGenerateDialog({
       ...dialog,
       prompt: normalizedPrompt,
@@ -1743,13 +2417,13 @@ export function ImageCanvasEditorView() {
         addGeneratedResultLayer(generated, { frame: dialog.placeholder });
       }
     } catch (error) {
-    setGenerateDialog({
-      ...dialog,
-      prompt: normalizedPrompt,
-      status: 'failed',
-      composerOpen: true,
-      errorMessage: resolveImageGenerationErrorMessage(error),
-    });
+      setGenerateDialog({
+        ...dialog,
+        prompt: normalizedPrompt,
+        status: 'failed',
+        composerOpen: true,
+        errorMessage: resolveImageGenerationErrorMessage(error),
+      });
     }
   };
 
@@ -1790,6 +2464,69 @@ export function ImageCanvasEditorView() {
     });
   };
 
+  const handleViewportContextMenu = (
+    event: ReactMouseEvent<HTMLDivElement>,
+  ) => {
+    event.preventDefault();
+    const target = event.target as HTMLElement;
+    if (target.closest('.image-canvas-editor__layer')) {
+      return;
+    }
+    const canvasPoint = getCanvasPointFromClient(event.clientX, event.clientY);
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'blank',
+    );
+    selectSingleLayer(null);
+    setContextMenu({
+      kind: 'blank',
+      x: position.x,
+      y: position.y,
+      canvasPoint,
+    });
+  };
+
+  const handleLayerContextMenu = (
+    event: ReactMouseEvent<HTMLElement>,
+    layer: CanvasLayer,
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const nextSelectedIds = selectedLayerIds.includes(layer.id)
+      ? selectedLayerIds
+      : [layer.id];
+    setSelectedLayerId(layer.id);
+    setSelectedLayerIds(nextSelectedIds);
+    setGenerateDialog((currentDialog) => {
+      if (currentDialog?.mode !== 'generate') {
+        return currentDialog;
+      }
+      if (currentDialog.generatedLayerId === layer.id) {
+        return {
+          ...currentDialog,
+          composerOpen: true,
+        };
+      }
+      return {
+        ...currentDialog,
+        composerOpen: false,
+      };
+    });
+    const position = resolveContextMenuPosition(
+      event.clientX,
+      event.clientY,
+      'layer',
+    );
+    setContextMenu({
+      kind: 'layer',
+      x: position.x,
+      y: position.y,
+      layerId: layer.id,
+      canvasPoint: getCanvasPointFromClient(event.clientX, event.clientY),
+    });
+  };
+
   const startPan = (event: ReactPointerEvent<HTMLDivElement>) => {
     event.preventDefault();
     const pointer = getPointerClient(event);
@@ -1802,11 +2539,12 @@ export function ImageCanvasEditorView() {
       startClientY: pointer.y,
       startViewport: viewport,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const handleCanvasPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
     const button = getPointerButton(event);
-    if (button !== 0 || effectiveTool === 'hand') {
+    if (button === 1 || (button === 0 && effectiveTool === 'hand')) {
       startPan(event);
       return;
     }
@@ -1841,16 +2579,26 @@ export function ImageCanvasEditorView() {
   const handleCanvasDragOver = (event: ReactDragEvent<HTMLDivElement>) => {
     if (event.dataTransfer.types.includes('Files')) {
       event.preventDefault();
+      setUploadDropTarget('canvas');
       event.dataTransfer.dropEffect = 'copy';
     }
   };
 
+  const handleCanvasDragLeave = (event: ReactDragEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+      setUploadDropTarget((currentTarget) =>
+        currentTarget === 'canvas' ? null : currentTarget,
+      );
+    }
+  };
+
   const handleCanvasDrop = (event: ReactDragEvent<HTMLDivElement>) => {
     const files = event.dataTransfer.files;
     if (!files.length) {
       return;
     }
     event.preventDefault();
+    setUploadDropTarget(null);
     const rect = canvasViewportRef.current?.getBoundingClientRect();
     const canvasPoint = rect
       ? {
@@ -1886,8 +2634,6 @@ export function ImageCanvasEditorView() {
 
     event.preventDefault();
     event.stopPropagation();
-    const pointer = getPointerClient(event);
-    canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
     const isMultiSelectGesture = event.shiftKey || isShiftPressedRef.current;
     const nextSelectedIds = isMultiSelectGesture
       ? selectedLayerIds.includes(layer.id)
@@ -1913,8 +2659,18 @@ export function ImageCanvasEditorView() {
         composerOpen: false,
       };
     });
+    if (layer.locked) {
+      dragStateRef.current = null;
+      return;
+    }
+    const pointer = getPointerClient(event);
+    canvasViewportRef.current?.setPointerCapture?.(event.pointerId);
     const dragLayerIds = nextSelectedIds.includes(layer.id)
-      ? nextSelectedIds
+      ? nextSelectedIds.filter((layerId) =>
+          layers.some(
+            (currentLayer) => currentLayer.id === layerId && !currentLayer.locked,
+          ),
+        )
       : [layer.id];
     const startLayers = layers
       .filter((currentLayer) => dragLayerIds.includes(currentLayer.id))
@@ -1935,6 +2691,7 @@ export function ImageCanvasEditorView() {
       startLayers,
       startScale: viewport.scale,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const handleGenerationFramePointerDown = (
@@ -1976,6 +2733,7 @@ export function ImageCanvasEditorView() {
       startFrameY: generateDialog.placeholder.y,
       startScale: viewport.scale,
     };
+    dragHistoryCapturedRef.current = false;
   };
 
   const moveViewportFromMinimapPointer = (clientX: number, clientY: number) => {
@@ -2013,6 +2771,8 @@ export function ImageCanvasEditorView() {
       kind: 'minimap',
       pointerId: getPointerId(event),
     };
+    captureCanvasHistory();
+    dragHistoryCapturedRef.current = true;
     moveViewportFromMinimapPointer(pointer.x, pointer.y);
   };
 
@@ -2064,6 +2824,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'pan') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       setViewport({
         ...dragState.startViewport,
@@ -2074,6 +2838,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'generation-frame') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       const deltaX = (pointer.x - dragState.startClientX) / dragState.startScale;
       const deltaY = (pointer.y - dragState.startClientY) / dragState.startScale;
@@ -2093,6 +2861,10 @@ export function ImageCanvasEditorView() {
     }
 
     if (dragState.kind === 'minimap') {
+      if (!dragHistoryCapturedRef.current) {
+        captureCanvasHistory();
+        dragHistoryCapturedRef.current = true;
+      }
       const pointer = getPointerClient(event);
       moveViewportFromMinimapPointer(pointer.x, pointer.y);
       return;
@@ -2103,6 +2875,10 @@ export function ImageCanvasEditorView() {
       return;
     }
     const pointer = getPointerClient(event);
+    if (!dragHistoryCapturedRef.current) {
+      captureCanvasHistory();
+      dragHistoryCapturedRef.current = true;
+    }
     const deltaX = (pointer.x - dragState.startClientX) / dragState.startScale;
     const deltaY = (pointer.y - dragState.startClientY) / dragState.startScale;
     const snapped = resolveSnappedLayerPosition(
@@ -2158,6 +2934,7 @@ export function ImageCanvasEditorView() {
       (dragState.pointerId < 0 || pointerId < 0 || dragState.pointerId === pointerId)
     ) {
       dragStateRef.current = null;
+      dragHistoryCapturedRef.current = false;
       setIsPanning(false);
       setSnapGuide(null);
       if (canvasViewportRef.current?.hasPointerCapture?.(event.pointerId)) {
@@ -2197,6 +2974,7 @@ export function ImageCanvasEditorView() {
       return;
     }
     const groupId = `layer-group-${Date.now()}`;
+    captureCanvasHistory();
     setLayers((currentLayers) =>
       currentLayers.map((layer) =>
         targetIds.includes(layer.id)
@@ -2225,6 +3003,11 @@ export function ImageCanvasEditorView() {
     { id: 'shape', label: '形状标注工具', icon: Shapes },
     { id: 'export', label: '导出工具', icon: Download },
   ];
+  const contextTargetLayers = contextMenu?.kind === 'layer'
+    ? layers.filter((layer) => getContextTargetLayerIds(contextMenu).includes(layer.id))
+    : [];
+  const contextShouldShowLayer = contextTargetLayers.some((layer) => layer.hidden);
+  const contextShouldUnlockLayer = contextTargetLayers.some((layer) => layer.locked);
 
   return (
     <section
@@ -2297,12 +3080,19 @@ export function ImageCanvasEditorView() {
           {activeSidebarPanel === 'assets' ? (
             <div
               ref={assetListRef}
-              className="image-canvas-editor__asset-list"
-              onPointerDown={handleAssetMarqueePointerDown}
-              onPointerMove={handleAssetMarqueePointerMove}
-              onPointerUp={handleAssetMarqueePointerUp}
-              onPointerCancel={handleAssetMarqueePointerUp}
-            >
+          className="image-canvas-editor__asset-list"
+          onPointerDown={handleAssetMarqueePointerDown}
+          onPointerMove={handleAssetMarqueePointerMove}
+          onPointerUp={handleAssetMarqueePointerUp}
+          onPointerCancel={handleAssetMarqueePointerUp}
+          onDragLeave={(event) => {
+            if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+              setUploadDropTarget((currentTarget) =>
+                currentTarget === 'assets' ? null : currentTarget,
+              );
+            }
+          }}
+        >
               {creatingFolder ? (
                 <form
                   className="image-canvas-editor__folder-create"
@@ -2348,18 +3138,35 @@ export function ImageCanvasEditorView() {
                   className="image-canvas-editor__asset-folder"
                   aria-label={folder.label}
                   onDragOver={(event) => {
+                    if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      setUploadDropTarget('assets');
+                      event.dataTransfer.dropEffect = 'move';
+                      return;
+                    }
                     if (event.dataTransfer.types.includes('Files')) {
                       event.preventDefault();
                       event.stopPropagation();
+                      setUploadDropTarget('assets');
                       event.dataTransfer.dropEffect = 'copy';
                     }
                   }}
                   onDrop={(event) => {
+                    const movingAssetId = getDraggedAssetId(event.dataTransfer);
+                    if (movingAssetId) {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      setUploadDropTarget(null);
+                      moveAssetToFolder(movingAssetId, folder.id);
+                      return;
+                    }
                     if (!event.dataTransfer.files.length) {
                       return;
                     }
                     event.preventDefault();
                     event.stopPropagation();
+                    setUploadDropTarget(null);
                     addUploadedFiles(event.dataTransfer.files, { folderId: folder.id });
                   }}
                 >
@@ -2533,6 +3340,39 @@ export function ImageCanvasEditorView() {
                             metaClassName="image-canvas-editor__asset-meta"
                             titleNode={titleNode}
                             actions={actions}
+                            draggable={!isRenaming}
+                            onDragStart={(event) => {
+                              if (isRenaming) {
+                                event.preventDefault();
+                                return;
+                              }
+                              event.dataTransfer.effectAllowed = 'move';
+                              event.dataTransfer.setData(
+                                ASSET_DRAG_MIME_TYPE,
+                                asset.id,
+                              );
+                              event.dataTransfer.setData('text/plain', asset.label);
+                              setUploadDropTarget('assets');
+                            }}
+                            onDragEnd={() => {
+                              setUploadDropTarget((currentTarget) =>
+                                currentTarget === 'assets' ? null : currentTarget,
+                              );
+                            }}
+                            onPointerDown={(event) => {
+                              if (!isAssetSelectionMode || event.button !== 0) {
+                                return;
+                              }
+                              const target = event.target as HTMLElement;
+                              if (target.closest('button')) {
+                                return;
+                              }
+                              event.preventDefault();
+                              event.stopPropagation();
+                              handleAssetMarqueePointerDown(
+                                event as ReactPointerEvent<HTMLDivElement>,
+                              );
+                            }}
                             onPointerEnter={(event) => {
                               if (isAssetSelectionMode && event.buttons === 1) {
                                 setSelectedAssetIds((currentIds) => {
@@ -2543,18 +3383,37 @@ export function ImageCanvasEditorView() {
                               }
                             }}
                             onDragOver={(event) => {
+                              if (event.dataTransfer.types.includes(ASSET_DRAG_MIME_TYPE)) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setUploadDropTarget('assets');
+                                event.dataTransfer.dropEffect = 'move';
+                                return;
+                              }
                               if (event.dataTransfer.types.includes('Files')) {
                                 event.preventDefault();
                                 event.stopPropagation();
+                                setUploadDropTarget('assets');
                                 event.dataTransfer.dropEffect = 'copy';
                               }
                             }}
                             onDrop={(event) => {
+                              const movingAssetId = getDraggedAssetId(
+                                event.dataTransfer,
+                              );
+                              if (movingAssetId) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                setUploadDropTarget(null);
+                                moveAssetToFolder(movingAssetId, asset.folderId);
+                                return;
+                              }
                               if (!event.dataTransfer.files.length) {
                                 return;
                               }
                               event.preventDefault();
                               event.stopPropagation();
+                              setUploadDropTarget(null);
                               addUploadedFiles(event.dataTransfer.files, {
                                 folderId: asset.folderId,
                               });
@@ -2615,6 +3474,15 @@ export function ImageCanvasEditorView() {
                   }}
                 />
               ) : null}
+              {uploadDropTarget === 'assets' ? (
+                <div
+                  className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--assets"
+                  role="status"
+                >
+                  <span>添加到素材</span>
+                  <strong>松开即可添加</strong>
+                </div>
+              ) : null}
             </div>
           ) : (
             <div className="image-canvas-editor__layers-list">
@@ -2625,16 +3493,24 @@ export function ImageCanvasEditorView() {
                   <SidebarMediaItem
                     key={layer.id}
                     title={layer.title}
-                    detail={`${Math.round(layer.width)} x ${Math.round(layer.height)}${layer.groupId ? ' · 已打组' : ''}`}
+                    detail={[
+                      `${Math.round(layer.width)} x ${Math.round(layer.height)}`,
+                      layer.groupId ? '已打组' : null,
+                      layer.hidden ? '已隐藏' : null,
+                      layer.locked ? '已锁定' : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
                     imageSrc={layer.src}
                     imageAlt={`图层缩略图：${layer.title}`}
-                    selected={selectedLayerId === layer.id}
+                    selected={selectedLayerIds.includes(layer.id)}
                     primaryLabel={`选择图层${layer.title}`}
                     onPrimaryClick={() => selectSingleLayer(layer.id)}
                     rowClassName="image-canvas-editor__layer-row"
                     primaryClassName="image-canvas-editor__layer-row-button"
                     thumbnailClassName="image-canvas-editor__layer-row-thumb"
                     metaClassName="image-canvas-editor__layer-row-meta"
+                    onContextMenu={(event) => handleLayerContextMenu(event, layer)}
                   />
                 ))}
             </div>
@@ -2644,9 +3520,19 @@ export function ImageCanvasEditorView() {
 
       <div className="image-canvas-editor__main">
         <div className="image-canvas-editor__topbar">
-          <div className="image-canvas-editor__title-block">
-            <h1>图片编辑器</h1>
-            <span>画布</span>
+          <div className="image-canvas-editor__topbar-title">
+            <a
+              className="image-canvas-editor__project-back-button"
+              href="/project"
+              aria-label="返回项目页面"
+              title="返回项目"
+            >
+              <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+            </a>
+            <div className="image-canvas-editor__title-block">
+              <h1>{projectTitle}</h1>
+              <span>画布</span>
+            </div>
           </div>
         </div>
 
@@ -2661,8 +3547,19 @@ export function ImageCanvasEditorView() {
           onPointerCancel={finishDrag}
           onWheel={handleWheel}
           onDragOver={handleCanvasDragOver}
+          onDragLeave={handleCanvasDragLeave}
           onDrop={handleCanvasDrop}
+          onContextMenu={handleViewportContextMenu}
         >
+          {uploadDropTarget === 'canvas' ? (
+            <div
+              className="image-canvas-editor__upload-drop-overlay image-canvas-editor__upload-drop-overlay--canvas"
+              role="status"
+            >
+              <span>添加到画布</span>
+              <strong>松开即可添加</strong>
+            </div>
+          ) : null}
           <div
             className="image-canvas-editor__world"
             style={{
@@ -2688,6 +3585,7 @@ export function ImageCanvasEditorView() {
 
             {layers
               .slice()
+              .filter((layer) => !layer.hidden)
               .sort((left, right) => left.zIndex - right.zIndex)
               .map((layer) => {
                 const isSelected = selectedLayerIds.includes(layer.id);
@@ -2696,7 +3594,7 @@ export function ImageCanvasEditorView() {
                   <button
                     key={layer.id}
                     type="button"
-                    className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''}`}
+                    className={`image-canvas-editor__layer ${isSelected ? 'image-canvas-editor__layer--selected' : ''} ${isHovered ? 'image-canvas-editor__layer--hovered' : ''} ${layer.locked ? 'image-canvas-editor__layer--locked' : ''}`}
                     style={{
                       left: layer.x,
                       top: layer.y,
@@ -2705,6 +3603,7 @@ export function ImageCanvasEditorView() {
                       zIndex: layer.zIndex,
                     }}
                     onPointerDown={(event) => handleLayerPointerDown(event, layer)}
+                    onContextMenu={(event) => handleLayerContextMenu(event, layer)}
                     onMouseEnter={() => setHoveredLayerId(layer.id)}
                     onMouseLeave={() =>
                       setHoveredLayerId((currentId) =>
@@ -2713,7 +3612,13 @@ export function ImageCanvasEditorView() {
                     }
                     aria-label={`选择${layer.title}`}
                   >
-                    <img src={layer.src} alt={`画布图片：${layer.title}`} />
+                    <img
+                      src={layer.src}
+                      alt={`画布图片：${layer.title}`}
+                      style={{
+                        transform: `scale(${layer.flipX ? -1 : 1}, ${layer.flipY ? -1 : 1})`,
+                      }}
+                    />
                     {isGeneratedLayer(layer) ? (
                       <PlatformIconButton
                         asChild="spanButton"
@@ -2792,7 +3697,7 @@ export function ImageCanvasEditorView() {
             ) : null}
           </div>
 
-          {selectedLayer && selectedToolbarStyle ? (
+          {selectedLayer && !selectedLayer.hidden && selectedToolbarStyle ? (
             <div
               className="image-canvas-editor__floating-toolbar"
               style={selectedToolbarStyle}
@@ -2815,7 +3720,7 @@ export function ImageCanvasEditorView() {
                 icon={Trash2}
                 onClick={deleteSelectedLayer}
               />
-              {isGeneratedLayer(selectedLayer) ? (
+              {!hasMultipleSelectedLayers && isGeneratedLayer(selectedLayer) ? (
                 <>
                   <EditorIconButton
                     label={`查看${selectedLayer.title}元数据`}
@@ -2834,6 +3739,138 @@ export function ImageCanvasEditorView() {
             </div>
           ) : null}
 
+          {contextMenu ? (
+            <div
+              className="image-canvas-editor__context-menu"
+              role="menu"
+              aria-label={
+                contextMenu.kind === 'blank' ? '画布右键菜单' : '图层右键菜单'
+              }
+              style={{
+                left: contextMenu.x,
+                top: contextMenu.y,
+              }}
+              onContextMenu={(event) => event.preventDefault()}
+              onPointerDown={(event) => event.stopPropagation()}
+            >
+              {contextMenu.kind === 'blank' ? (
+                <>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={!canvasClipboard?.layers.length}
+                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
+                  >
+                    粘贴
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 1.16);
+                      setContextMenu(null);
+                    }}
+                  >
+                    放大
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 0.86);
+                      setContextMenu(null);
+                    }}
+                  >
+                    缩小
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => {
+                      fitLayers();
+                      setContextMenu(null);
+                    }}
+                  >
+                    显示画布所有元素
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button type="button" role="menuitem" onClick={() => copyContextLayers()}>
+                    复制
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={() => copyContextLayers({ cut: true })}
+                  >
+                    剪切
+                  </button>
+                  <button
+                    type="button"
+                    role="menuitem"
+                    disabled={!canvasClipboard?.layers.length}
+                    onClick={() => pasteCanvasClipboard(contextMenu.canvasPoint)}
+                  >
+                    粘贴
+                  </button>
+                  <button type="button" role="menuitem" onClick={duplicateContextLayers}>
+                    创建副本
+                  </button>
+                  <hr />
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('up')}>
+                    上移一层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('down')}>
+                    下移一层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('top')}>
+                    移动至顶层
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => moveContextLayers('bottom')}>
+                    移动至底层
+                  </button>
+                  <hr />
+                  <button
+                    type="button"
+                    role="menuitem"
+                    onClick={groupContextLayers}
+                  >
+                    创建组
+                  </button>
+                  <button type="button" role="menuitem" onClick={ungroupContextLayers}>
+                    解除组
+                  </button>
+                  <button type="button" role="menuitem" onClick={toggleContextLayerVisibility}>
+                    {contextShouldShowLayer ? '显示' : '隐藏'}
+                  </button>
+                  <button type="button" role="menuitem" onClick={toggleContextLayerLock}>
+                    {contextShouldUnlockLayer ? '解锁' : '锁定'}
+                  </button>
+                  <hr />
+                  <button type="button" role="menuitem" onClick={() => flipContextLayers('x')}>
+                    水平翻转
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => flipContextLayers('y')}>
+                    垂直翻转
+                  </button>
+                  <button type="button" role="menuitem" onClick={exportContextLayer}>
+                    导出为
+                  </button>
+                  <hr />
+                  <button
+                    type="button"
+                    role="menuitem"
+                    className="image-canvas-editor__context-menu-danger"
+                    onClick={deleteContextLayers}
+                  >
+                    删除
+                  </button>
+                </>
+              )}
+            </div>
+          ) : null}
+
           <EditorIconButton
             className="image-canvas-editor__reset-button"
             label="重置画布视图"
@@ -2848,60 +3885,20 @@ export function ImageCanvasEditorView() {
             aria-label="画布面板入口"
             onPointerDown={(event) => event.stopPropagation()}
           >
-            <div className="image-canvas-editor__zoom-menu-wrap">
-              <PlatformInlineOptionButton
-                className="image-canvas-editor__zoom-trigger"
-                aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
-                aria-haspopup="menu"
-                aria-expanded={isZoomMenuOpen}
-                onClick={() => setIsZoomMenuOpen((open) => !open)}
-              >
-                {formatPercent(viewport.scale)}
-              </PlatformInlineOptionButton>
-              {isZoomMenuOpen ? (
-                <PlatformFloatingMenu label="缩放菜单" placement="top-start">
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 1.16);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    放大
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      updateScaleFromCenter(viewport.scale * 0.86);
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    缩小
-                  </PlatformFloatingMenuItem>
-                  <PlatformFloatingMenuItem
-                    className="image-canvas-editor__zoom-menu-item"
-                    onClick={() => {
-                      fitLayers();
-                      setIsZoomMenuOpen(false);
-                    }}
-                  >
-                    显示画布所有元素
-                  </PlatformFloatingMenuItem>
-                  {[0.5, 1, 2].map((scale) => (
-                    <PlatformFloatingMenuItem
-                      key={scale}
-                      className="image-canvas-editor__zoom-menu-item"
-                      onClick={() => {
-                        updateScaleFromCenter(scale);
-                        setIsZoomMenuOpen(false);
-                      }}
-                    >
-                      缩放至{Math.round(scale * 100)}%
-                    </PlatformFloatingMenuItem>
-                  ))}
-                </PlatformFloatingMenu>
-              ) : null}
-            </div>
+            <EditorIconButton
+              label="撤销"
+              title="撤销"
+              icon={Undo2}
+              disabled={!canUndo}
+              onClick={undoCanvasChange}
+            />
+            <EditorIconButton
+              label="重做"
+              title="重做"
+              icon={Redo2}
+              disabled={!canRedo}
+              onClick={redoCanvasChange}
+            />
             <div className="image-canvas-editor__background-control">
               <PlatformIconButton
                 label="画布背景色"
@@ -2962,6 +3959,60 @@ export function ImageCanvasEditorView() {
               pressed={isMinimapOpen}
               onClick={() => setIsMinimapOpen((open) => !open)}
             />
+            <div className="image-canvas-editor__zoom-menu-wrap">
+              <PlatformInlineOptionButton
+                className="image-canvas-editor__zoom-trigger"
+                aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
+                aria-haspopup="menu"
+                aria-expanded={isZoomMenuOpen}
+                onClick={() => setIsZoomMenuOpen((open) => !open)}
+              >
+                {formatPercent(viewport.scale)}
+              </PlatformInlineOptionButton>
+              {isZoomMenuOpen ? (
+                <PlatformFloatingMenu label="缩放菜单" placement="top-start">
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 1.16);
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    放大
+                  </PlatformFloatingMenuItem>
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      updateScaleFromCenter(viewport.scale * 0.86);
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    缩小
+                  </PlatformFloatingMenuItem>
+                  <PlatformFloatingMenuItem
+                    className="image-canvas-editor__zoom-menu-item"
+                    onClick={() => {
+                      fitLayers();
+                      setIsZoomMenuOpen(false);
+                    }}
+                  >
+                    显示画布所有元素
+                  </PlatformFloatingMenuItem>
+                  {[0.5, 1, 2].map((scale) => (
+                    <PlatformFloatingMenuItem
+                      key={scale}
+                      className="image-canvas-editor__zoom-menu-item"
+                      onClick={() => {
+                        updateScaleFromCenter(scale);
+                        setIsZoomMenuOpen(false);
+                      }}
+                    >
+                      缩放至{Math.round(scale * 100)}%
+                    </PlatformFloatingMenuItem>
+                  ))}
+                </PlatformFloatingMenu>
+              ) : null}
+            </div>
           </div>
 
           {isMinimapOpen && minimapModel ? (
diff --git a/src/index.css b/src/index.css
index d8c799d3..548a2522 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3328,6 +3328,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button,
+.image-canvas-editor__project-back-button,
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
 .image-canvas-editor__reset-button {
@@ -3345,6 +3346,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button:hover,
+.image-canvas-editor__project-back-button:hover,
 .image-canvas-editor__floating-toolbar button:hover,
 .image-canvas-editor__bottom-toolbar button:hover,
 .image-canvas-editor__reset-button:hover {
@@ -3487,6 +3489,40 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   pointer-events: none;
 }
 
+.image-canvas-editor__upload-drop-overlay {
+  position: absolute;
+  z-index: 30;
+  display: grid;
+  place-content: center;
+  gap: 0.3rem;
+  border: 1.5px dashed rgba(37, 99, 235, 0.72);
+  background: rgba(239, 246, 255, 0.78);
+  color: #1d4ed8;
+  pointer-events: none;
+  text-align: center;
+  backdrop-filter: blur(2px);
+}
+
+.image-canvas-editor__upload-drop-overlay span {
+  font-size: 0.82rem;
+  font-weight: 820;
+}
+
+.image-canvas-editor__upload-drop-overlay strong {
+  font-size: 1rem;
+  font-weight: 920;
+}
+
+.image-canvas-editor__upload-drop-overlay--assets {
+  inset: 0.45rem;
+  border-radius: 0.55rem;
+}
+
+.image-canvas-editor__upload-drop-overlay--canvas {
+  inset: 0.85rem;
+  border-radius: 0.65rem;
+}
+
 .image-canvas-editor__canvas-marquee {
   position: absolute;
   z-index: 7;
@@ -3701,6 +3737,24 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 0.55rem 0.7rem;
 }
 
+.image-canvas-editor__topbar-title {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.image-canvas-editor__project-back-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.15rem;
+  height: 2.15rem;
+  flex-shrink: 0;
+  border-radius: 0.45rem;
+  text-decoration: none;
+}
+
 .image-canvas-editor__zoom-menu-wrap {
   position: relative;
   z-index: 20;
@@ -3799,6 +3853,63 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
 }
 
+.image-canvas-editor__layer--locked {
+  cursor: default;
+}
+
+.image-canvas-editor__context-menu {
+  position: fixed;
+  z-index: 80;
+  display: grid;
+  min-width: 168px;
+  max-height: calc(100vh - 16px);
+  overflow: hidden;
+  padding: 0.35rem;
+  border: 1px solid rgba(148, 163, 184, 0.32);
+  border-radius: 0.45rem;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.18);
+  color: #172033;
+}
+
+.image-canvas-editor__context-menu button {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 2rem;
+  border: 0;
+  border-radius: 0.32rem;
+  background: transparent;
+  padding: 0 0.65rem;
+  color: inherit;
+  font-size: 0.86rem;
+  font-weight: 720;
+  text-align: left;
+  cursor: default;
+}
+
+.image-canvas-editor__context-menu button:hover:not(:disabled),
+.image-canvas-editor__context-menu button:focus-visible:not(:disabled) {
+  background: rgba(37, 99, 235, 0.1);
+  outline: none;
+}
+
+.image-canvas-editor__context-menu button:disabled {
+  color: rgba(100, 116, 139, 0.5);
+}
+
+.image-canvas-editor__context-menu hr {
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background: rgba(148, 163, 184, 0.25);
+  margin: 0.3rem 0;
+}
+
+.image-canvas-editor__context-menu-danger {
+  color: #b42318 !important;
+}
+
 .image-canvas-editor__generation-frame {
   position: absolute;
   z-index: 6;