From 3b4b6cac85cb75687d3a066a59cdc82bc039a206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= <kvtodev@outlook.com>
Date: Mon, 27 Jul 2026 16:37:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=B4=A0=E6=9D=90=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=B9=B6=E5=8F=91=E7=AB=9E=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用同步 ref 互斥量保护集合导出和单选导出

在导出 finally 中释放互斥量并保留 state 作为忙碌 UI

新增同一事件循环连续导出的回归测试
---
 ...useImageCanvasAssetExportWorkflow.test.tsx | 54 +++++++++++++++++++
 .../useImageCanvasAssetExportWorkflow.ts      | 15 ++++--
 2 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
index ea7785b14..8641b149b 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx
@@ -65,6 +65,15 @@ function ExportWorkflowHarness({ layers }: { layers: CanvasLayer[] }) {
       >
         导出画布素材
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          void workflow.exportCanvasAssets();
+          void workflow.exportCanvasAssets();
+        }}
+      >
+        连续导出画布素材
+      </button>
       <button
         type="button"
         onClick={() => workflow.exportLayerImage(layers[0] ?? null)}
@@ -163,6 +172,51 @@ describe('useImageCanvasAssetExportWorkflow', () => {
     }
   });
 
+  it('prevents concurrent collection exports before React re-renders', async () => {
+    const originalFetch = globalThis.fetch;
+    let resolveFetch: (response: Response) => void = () => {};
+    const fetchMock = vi.fn(
+      () =>
+        new Promise<Response>((resolve) => {
+          resolveFetch = resolve;
+        }),
+    );
+    globalThis.fetch = fetchMock as typeof fetch;
+    Object.defineProperty(URL, 'createObjectURL', {
+      configurable: true,
+      value: vi.fn(() => 'blob:mutex-export'),
+    });
+    Object.defineProperty(URL, 'revokeObjectURL', {
+      configurable: true,
+      value: vi.fn(),
+    });
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
+
+    try {
+      render(
+        <ExportWorkflowHarness
+          layers={[createLayer('slow-export', { src: '/slow-export.png' })]}
+        />,
+      );
+
+      fireEvent.click(
+        screen.getByRole('button', { name: '连续导出画布素材' }),
+      );
+
+      expect(fetchMock).toHaveBeenCalledTimes(1);
+      resolveFetch(new Response(new Blob(['image'], { type: 'image/png' })));
+      await waitFor(() => {
+        expect(screen.getByTestId('status').textContent).toBe(
+          'success:画布素材已导出',
+        );
+      });
+    } finally {
+      globalThis.fetch = originalFetch;
+      delete (URL as unknown as { createObjectURL?: unknown }).createObjectURL;
+      delete (URL as unknown as { revokeObjectURL?: unknown }).revokeObjectURL;
+    }
+  });
+
   it('exports canvas assets into a zip with metadata and failed image records', async () => {
     const originalFetch = globalThis.fetch;
     const fetchMock = vi.fn(async (url: string) => {
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index be985a491..db7d1221c 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -1,5 +1,5 @@
 import JSZip from 'jszip';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import type {
   CanvasAssetExportImage,
@@ -273,6 +273,7 @@ export function useImageCanvasAssetExportWorkflow({
   const [assetExportStatus, setAssetExportStatus] =
     useState<AssetExportStatus | null>(null);
   const [isExportingAssets, setIsExportingAssets] = useState(false);
+  const isExportingAssetsRef = useRef(false);
 
   const exportLayerImage = useCallback(
     async (
@@ -347,7 +348,7 @@ export function useImageCanvasAssetExportWorkflow({
       emptyMessage: string;
       successMessage: string;
     }) => {
-      if (isExportingAssets) {
+      if (isExportingAssetsRef.current) {
         return;
       }
       const exportableLayers = targetLayers
@@ -361,6 +362,7 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
 
+      isExportingAssetsRef.current = true;
       setIsExportingAssets(true);
       setAssetExportStatus(null);
 
@@ -609,10 +611,11 @@ export function useImageCanvasAssetExportWorkflow({
           message: '素材导出失败',
         });
       } finally {
+        isExportingAssetsRef.current = false;
         setIsExportingAssets(false);
       }
     },
-    [isExportingAssets, projectTitle],
+    [projectTitle],
   );
 
   const exportCanvasAssets = useCallback(
@@ -628,7 +631,7 @@ export function useImageCanvasAssetExportWorkflow({
 
   const exportSelectedAssets = useCallback(
     async (selectedLayers: CanvasLayer[]) => {
-      if (isExportingAssets) {
+      if (isExportingAssetsRef.current) {
         return;
       }
       const exportableLayers = selectedLayers.filter(
@@ -642,11 +645,13 @@ export function useImageCanvasAssetExportWorkflow({
         return;
       }
       if (exportableLayers.length === 1) {
+        isExportingAssetsRef.current = true;
         setIsExportingAssets(true);
         setAssetExportStatus(null);
         try {
           await exportLayerImage(exportableLayers[0] ?? null);
         } finally {
+          isExportingAssetsRef.current = false;
           setIsExportingAssets(false);
         }
         return;
@@ -658,7 +663,7 @@ export function useImageCanvasAssetExportWorkflow({
         successMessage: '选中素材已导出',
       });
     },
-    [exportAssetCollection, exportLayerImage, isExportingAssets],
+    [exportAssetCollection, exportLayerImage],
   );
 
   return {