From 21143f9ff577c9ed496c526e8080d0cbe3cb2cee 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:05:44 +0800
Subject: [PATCH] format

---
 .../ImageCanvasAssetLibraryPanelView.tsx      | 172 +++---
 .../image-editor/ImageCanvasAssetRowView.tsx  |   4 +-
 ...mageCanvasEditorAssetsIntegration.test.tsx |  24 +-
 .../useImageCanvasAssetExportWorkflow.ts      | 522 +++++++++---------
 .../useImageCanvasAssetLibrary.ts             | 156 +++---
 src/index.test.ts                             |  41 +-
 6 files changed, 471 insertions(+), 448 deletions(-)

diff --git a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
index d02ef342d..8df7f7e30 100644
--- a/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetLibraryPanelView.tsx
@@ -154,100 +154,100 @@ export function ImageCanvasAssetLibraryPanelView({
 }: ImageCanvasAssetLibraryPanelViewProps) {
   return (
     <div className="image-canvas-editor__asset-library">
-    <div
-      ref={assetListRef}
-      className="image-canvas-editor__asset-list"
-      onPointerDown={onAssetMarqueePointerDown}
-      onPointerMove={onAssetMarqueePointerMove}
-      onPointerUp={onAssetMarqueePointerUp}
-      onPointerCancel={onAssetMarqueePointerUp}
-    >
-      {pinnedAssetMoveFolderId ? (
-        <div
-          className="image-canvas-editor__asset-folder-sticky-target"
-          aria-hidden="true"
-        >
-          <Folder className="h-4 w-4" />
-          <span>
+      <div
+        ref={assetListRef}
+        className="image-canvas-editor__asset-list"
+        onPointerDown={onAssetMarqueePointerDown}
+        onPointerMove={onAssetMarqueePointerMove}
+        onPointerUp={onAssetMarqueePointerUp}
+        onPointerCancel={onAssetMarqueePointerUp}
+      >
+        {pinnedAssetMoveFolderId ? (
+          <div
+            className="image-canvas-editor__asset-folder-sticky-target"
+            aria-hidden="true"
+          >
+            <Folder className="h-4 w-4" />
+            <span>
               {assetFolders.find(
                 (folder) => folder.id === pinnedAssetMoveFolderId,
               )?.label ?? '目标文件夹'}
-          </span>
-        </div>
-      ) : null}
-      {creatingFolder ? (
-        <form
-          className="image-canvas-editor__folder-create"
-          onSubmit={(event) => {
-            event.preventDefault();
-            void commitNewAssetFolder();
-          }}
-        >
-          <PlatformTextField
-            aria-label="素材文件夹名称"
-            value={newFolderName}
-            autoFocus
-            size="xs"
-            density="compact"
-            className="image-canvas-editor__folder-create-input"
-            onChange={(event) => setNewFolderName(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                event.preventDefault();
-                setCreatingFolder(false);
-                setNewFolderName('');
-              }
+            </span>
+          </div>
+        ) : null}
+        {creatingFolder ? (
+          <form
+            className="image-canvas-editor__folder-create"
+            onSubmit={(event) => {
+              event.preventDefault();
+              void commitNewAssetFolder();
             }}
-          />
+          >
+            <PlatformTextField
+              aria-label="素材文件夹名称"
+              value={newFolderName}
+              autoFocus
+              size="xs"
+              density="compact"
+              className="image-canvas-editor__folder-create-input"
+              onChange={(event) => setNewFolderName(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  event.preventDefault();
+                  setCreatingFolder(false);
+                  setNewFolderName('');
+                }
+              }}
+            />
             <EditorIconButton
               type="submit"
               label="保存素材文件夹"
               icon={Check}
             />
-          <EditorIconButton
-            label="取消新建素材文件夹"
-            icon={X}
-            onClick={() => {
-              setCreatingFolder(false);
-              setNewFolderName('');
-            }}
-          />
-        </form>
-      ) : null}
-      {groupedAssets.map((folder) => (
-        <ImageCanvasAssetFolderSectionView
-          key={folder.id}
-          folder={folder}
-          assetPointerDragRef={assetPointerDragRef}
-          suppressAssetClickRef={suppressAssetClickRef}
-          isAssetSelectionMode={isAssetSelectionMode}
-          selectedAssetIds={selectedAssetIds}
+            <EditorIconButton
+              label="取消新建素材文件夹"
+              icon={X}
+              onClick={() => {
+                setCreatingFolder(false);
+                setNewFolderName('');
+              }}
+            />
+          </form>
+        ) : null}
+        {groupedAssets.map((folder) => (
+          <ImageCanvasAssetFolderSectionView
+            key={folder.id}
+            folder={folder}
+            assetPointerDragRef={assetPointerDragRef}
+            suppressAssetClickRef={suppressAssetClickRef}
+            isAssetSelectionMode={isAssetSelectionMode}
+            selectedAssetIds={selectedAssetIds}
             visibleAssetIds={visibleAssetIds}
-          assetMoveDropFolderId={assetMoveDropFolderId}
-          renamingFolder={renamingFolder}
-          renamingAsset={renamingAsset}
-          setRenamingFolder={setRenamingFolder}
-          setRenamingAsset={setRenamingAsset}
-          setActiveUploadFolderId={setActiveUploadFolderId}
-          setUploadDropTarget={setUploadDropTarget}
-          setAssetPointerDrag={setAssetPointerDrag}
-          updateAssetMoveDropFolder={updateAssetMoveDropFolder}
-          addUploadedFiles={addUploadedFiles}
-          requestUpload={requestUpload}
-          moveAssetToFolder={moveAssetToFolder}
-          toggleAssetFolder={toggleAssetFolder}
-          startRenamingFolder={startRenamingFolder}
-          commitFolderRename={commitFolderRename}
-          deleteAssetFolder={deleteAssetFolder}
-          startRenamingAsset={startRenamingAsset}
-          commitAssetRename={commitAssetRename}
-          deleteUploadedAsset={deleteUploadedAsset}
-          submitAssetToShowcase={submitAssetToShowcase}
-          toggleAssetSelected={toggleAssetSelected}
-          addAssetLayer={addAssetLayer}
-          onDownloadAsset={onDownloadAsset}
-        />
-      ))}
+            assetMoveDropFolderId={assetMoveDropFolderId}
+            renamingFolder={renamingFolder}
+            renamingAsset={renamingAsset}
+            setRenamingFolder={setRenamingFolder}
+            setRenamingAsset={setRenamingAsset}
+            setActiveUploadFolderId={setActiveUploadFolderId}
+            setUploadDropTarget={setUploadDropTarget}
+            setAssetPointerDrag={setAssetPointerDrag}
+            updateAssetMoveDropFolder={updateAssetMoveDropFolder}
+            addUploadedFiles={addUploadedFiles}
+            requestUpload={requestUpload}
+            moveAssetToFolder={moveAssetToFolder}
+            toggleAssetFolder={toggleAssetFolder}
+            startRenamingFolder={startRenamingFolder}
+            commitFolderRename={commitFolderRename}
+            deleteAssetFolder={deleteAssetFolder}
+            startRenamingAsset={startRenamingAsset}
+            commitAssetRename={commitAssetRename}
+            deleteUploadedAsset={deleteUploadedAsset}
+            submitAssetToShowcase={submitAssetToShowcase}
+            toggleAssetSelected={toggleAssetSelected}
+            addAssetLayer={addAssetLayer}
+            onDownloadAsset={onDownloadAsset}
+          />
+        ))}
         {assetMarquee ? (
           <div
             className="image-canvas-editor__asset-marquee"
@@ -279,9 +279,9 @@ export function ImageCanvasAssetLibraryPanelView({
               <Square className="h-4 w-4" />
             )}
             <span className="min-w-0 truncate">
-            {selectedAssetIds.size > 0
+              {selectedAssetIds.size > 0
                 ? `${allVisibleAssetsSelected ? '取消全选' : '全选'} · 已选 ${selectedAssetIds.size}`
-              : '全选'}
+                : '全选'}
             </span>
           </PlatformActionButton>
           <PlatformActionButton
diff --git a/src/components/image-editor/ImageCanvasAssetRowView.tsx b/src/components/image-editor/ImageCanvasAssetRowView.tsx
index 67e3c4eea..6d4350637 100644
--- a/src/components/image-editor/ImageCanvasAssetRowView.tsx
+++ b/src/components/image-editor/ImageCanvasAssetRowView.tsx
@@ -403,8 +403,8 @@ export function ImageCanvasAssetRowView({
               event.pointerType === 'touch' || event.pointerType === 'pen'
                 ? event.pointerType
                 : 'mouse';
-              return;
-            }
+            return;
+          }
           if (event.button !== 0) {
             return;
           }
diff --git a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
index 4d26e44bd..57f11d9d8 100644
--- a/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorAssetsIntegration.test.tsx
@@ -559,11 +559,11 @@ describe('ImageCanvasEditorView asset library integration', () => {
     const originalCreateElement = document.createElement.bind(document);
     vi.spyOn(document, 'createElement').mockImplementation(
       (tagName, options) => {
-      const element = originalCreateElement(tagName, options);
-      if (tagName === 'video' || tagName === 'audio') {
-        createdMediaElements.push(element as HTMLMediaElement);
-      }
-      return element;
+        const element = originalCreateElement(tagName, options);
+        if (tagName === 'video' || tagName === 'audio') {
+          createdMediaElements.push(element as HTMLMediaElement);
+        }
+        return element;
       },
     );
     Object.defineProperty(URL, 'createObjectURL', {
@@ -1017,13 +1017,13 @@ describe('ImageCanvasEditorView asset library integration', () => {
     await waitFor(() => {
       const savedLayoutWithoutDeletedLayer =
         saveEditorProjectLayoutMock.mock.calls
-        .map((call) => call[1])
-        .find((layout) =>
-          layout.layers.every(
-            (item: { layerId?: unknown }) =>
-              item.layerId !== 'layer-generated-a',
-          ),
-        );
+          .map((call) => call[1])
+          .find((layout) =>
+            layout.layers.every(
+              (item: { layerId?: unknown }) =>
+                item.layerId !== 'layer-generated-a',
+            ),
+          );
       expect(savedLayoutWithoutDeletedLayer).toBeTruthy();
     });
     expect(deleteEditorAssetMock).toHaveBeenCalledWith('asset-generated-a');
diff --git a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
index 1b23329ef..be985a491 100644
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -286,38 +286,12 @@ export function useImageCanvasAssetExportWorkflow({
       if (layer.mediaType === 'image-sequence') {
         try {
           const zipBlob = await buildImageSequenceZip(layer, exportMode);
-            const modeName =
-              exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
+          const modeName =
+            exportMode === 'spine-json' ? 'SpineJSON' : 'Sequence';
           const exportStamp = formatExportDate(new Date());
-            const downloaded = triggerBrowserDownload(
-              zipBlob,
-            `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}-${exportStamp}.zip`,
-            );
-            if (!downloaded) {
-              setAssetExportStatus({
-                tone: 'error',
-                message: '当前浏览器不支持素材下载',
-              });
-            }
-        } catch {
-            setAssetExportStatus({
-              tone: 'error',
-              message: '序列帧导出失败',
-            });
-        }
-        return;
-      }
-
-      try {
-        const blob = await readLayerAssetBlob(layer);
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            layer.mediaType ?? 'image',
-            blob.type,
-            layer.objectKey ?? layer.src,
-          );
           const downloaded = triggerBrowserDownload(
-            blob,
-          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}-${formatExportDate(new Date())}.${extension}`,
+            zipBlob,
+            `${sanitizeExportFilePart(layer.title, '角色动作')}-${modeName}-${exportStamp}.zip`,
           );
           if (!downloaded) {
             setAssetExportStatus({
@@ -325,11 +299,37 @@ export function useImageCanvasAssetExportWorkflow({
               message: '当前浏览器不支持素材下载',
             });
           }
-      } catch {
+        } catch {
           setAssetExportStatus({
             tone: 'error',
-            message: '素材导出失败',
+            message: '序列帧导出失败',
           });
+        }
+        return;
+      }
+
+      try {
+        const blob = await readLayerAssetBlob(layer);
+        const extension = getLayerAssetExtensionFromTypeOrSrc(
+          layer.mediaType ?? 'image',
+          blob.type,
+          layer.objectKey ?? layer.src,
+        );
+        const downloaded = triggerBrowserDownload(
+          blob,
+          `${sanitizeExportFilePart(layer.title, 'canvas-layer')}-${formatExportDate(new Date())}.${extension}`,
+        );
+        if (!downloaded) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '当前浏览器不支持素材下载',
+          });
+        }
+      } catch {
+        setAssetExportStatus({
+          tone: 'error',
+          message: '素材导出失败',
+        });
       }
     },
     [],
@@ -347,270 +347,270 @@ export function useImageCanvasAssetExportWorkflow({
       emptyMessage: string;
       successMessage: string;
     }) => {
-    if (isExportingAssets) {
-      return;
-    }
+      if (isExportingAssets) {
+        return;
+      }
       const exportableLayers = targetLayers
-      .filter((layer) => layer.src.trim().length > 0)
-      .sort((left, right) => left.zIndex - right.zIndex);
-    if (!exportableLayers.length) {
-      setAssetExportStatus({
-        tone: 'info',
+        .filter((layer) => layer.src.trim().length > 0)
+        .sort((left, right) => left.zIndex - right.zIndex);
+      if (!exportableLayers.length) {
+        setAssetExportStatus({
+          tone: 'info',
           message: emptyMessage,
-      });
-      return;
-    }
+        });
+        return;
+      }
 
-    setIsExportingAssets(true);
-    setAssetExportStatus(null);
+      setIsExportingAssets(true);
+      setAssetExportStatus(null);
 
-    try {
-      const exportedAt = new Date();
-      const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
+      try {
+        const exportedAt = new Date();
+        const projectName = sanitizeExportFilePart(projectTitle, '未命名画布');
         const rootFolderName = `${projectName}-${archiveLabel}`;
-      const zip = new JSZip();
-      const rootFolder = zip.folder(rootFolderName) ?? zip;
-      const imagesFolder = rootFolder.folder('images') ?? rootFolder;
-      const mediaFolder = rootFolder.folder('media') ?? rootFolder;
-      const imageByKey = new Map<string, CanvasAssetExportImage>();
-      const usedFileNames = new Map<string, number>();
+        const zip = new JSZip();
+        const rootFolder = zip.folder(rootFolderName) ?? zip;
+        const imagesFolder = rootFolder.folder('images') ?? rootFolder;
+        const mediaFolder = rootFolder.folder('media') ?? rootFolder;
+        const imageByKey = new Map<string, CanvasAssetExportImage>();
+        const usedFileNames = new Map<string, number>();
 
-      for (const layer of exportableLayers) {
-        const key = getLayerExportKey(layer);
-        if (imageByKey.has(key)) {
-          continue;
-        }
-        const index = imageByKey.size + 1;
-        const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
-        const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
-        const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
-        usedFileNames.set(baseFileName, duplicateCount + 1);
-        const indexedFileName =
-          duplicateCount > 0
-            ? `${baseFileName}-${duplicateCount + 1}`
-            : baseFileName;
+        for (const layer of exportableLayers) {
+          const key = getLayerExportKey(layer);
+          if (imageByKey.has(key)) {
+            continue;
+          }
+          const index = imageByKey.size + 1;
+          const safeTitle = sanitizeExportFilePart(layer.title, '画布素材');
+          const baseFileName = `${String(index).padStart(3, '0')}-${safeTitle}`;
+          const duplicateCount = usedFileNames.get(baseFileName) ?? 0;
+          usedFileNames.set(baseFileName, duplicateCount + 1);
+          const indexedFileName =
+            duplicateCount > 0
+              ? `${baseFileName}-${duplicateCount + 1}`
+              : baseFileName;
 
-        try {
-          if (layer.mediaType === 'image-sequence') {
-            const frames = getLayerImageSequenceFrames(layer);
-            if (!frames.length) {
-              throw new Error('序列帧为空');
-            }
-            const sequenceFolderName = `sequences/${indexedFileName}`;
-            const sequenceFolder =
-              rootFolder.folder(sequenceFolderName) ?? rootFolder;
-            const framesFolder =
-              sequenceFolder.folder('frames') ?? sequenceFolder;
-            const failedFrames: Array<{
-              frameIndex: number;
-              error: string;
-            }> = [];
-            const exportedFrames: ExportedImageSequenceFrame[] = [];
-            let successCount = 0;
+          try {
+            if (layer.mediaType === 'image-sequence') {
+              const frames = getLayerImageSequenceFrames(layer);
+              if (!frames.length) {
+                throw new Error('序列帧为空');
+              }
+              const sequenceFolderName = `sequences/${indexedFileName}`;
+              const sequenceFolder =
+                rootFolder.folder(sequenceFolderName) ?? rootFolder;
+              const framesFolder =
+                sequenceFolder.folder('frames') ?? sequenceFolder;
+              const failedFrames: Array<{
+                frameIndex: number;
+                error: string;
+              }> = [];
+              const exportedFrames: ExportedImageSequenceFrame[] = [];
+              let successCount = 0;
 
-            for (const [frameArrayIndex, frame] of frames.entries()) {
-              try {
-                const frameBlob = await readLayerImageSequenceFrameBlob(
-                  layer,
-                  frame,
-                );
-                const fileName = getImageSequenceFrameFileName(
-                  frame,
-                  frameArrayIndex,
-                  frameBlob.type,
-                );
+              for (const [frameArrayIndex, frame] of frames.entries()) {
+                try {
+                  const frameBlob = await readLayerImageSequenceFrameBlob(
+                    layer,
+                    frame,
+                  );
+                  const fileName = getImageSequenceFrameFileName(
+                    frame,
+                    frameArrayIndex,
+                    frameBlob.type,
+                  );
                   framesFolder.file(
                     fileName,
                     await blobToUint8Array(frameBlob),
                   );
-                exportedFrames.push({
-                  frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                  fileName,
-                  width: frame.width,
-                  height: frame.height,
-                });
-                successCount += 1;
-              } catch (error) {
-                failedFrames.push({
-                  frameIndex: frame.frameIndex || frameArrayIndex + 1,
-                  error:
-                    error instanceof Error ? error.message : '序列帧读取失败',
-                });
+                  exportedFrames.push({
+                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
+                    fileName,
+                    width: frame.width,
+                    height: frame.height,
+                  });
+                  successCount += 1;
+                } catch (error) {
+                  failedFrames.push({
+                    frameIndex: frame.frameIndex || frameArrayIndex + 1,
+                    error:
+                      error instanceof Error ? error.message : '序列帧读取失败',
+                  });
+                }
               }
-            }
 
-            if (successCount === 0) {
-              throw new Error('序列帧读取失败');
-            }
+              if (successCount === 0) {
+                throw new Error('序列帧读取失败');
+              }
 
-            sequenceFolder.file(
-              'metadata.json',
-              JSON.stringify(
-                {
-                  title: layer.title,
-                  visible: buildLayerVisibleExportMetadata(layer),
-                  frameCount: frames.length,
-                  exportedFrameCount: successCount,
-                  failedFrames,
-                },
-                null,
-                2,
-              ),
-            );
-            sequenceFolder.file(
-              'skeleton.json',
-              JSON.stringify(
+              sequenceFolder.file(
+                'metadata.json',
+                JSON.stringify(
+                  {
+                    title: layer.title,
+                    visible: buildLayerVisibleExportMetadata(layer),
+                    frameCount: frames.length,
+                    exportedFrameCount: successCount,
+                    failedFrames,
+                  },
+                  null,
+                  2,
+                ),
+              );
+              sequenceFolder.file(
+                'skeleton.json',
+                JSON.stringify(
                   buildSpineImageSequenceJson({
                     layer,
                     frames: exportedFrames,
                   }),
-                null,
-                2,
-              ),
-            );
-            sequenceFolder.file(
-              'README.md',
-              buildSpineImageSequenceReadme(layer),
-            );
-            sequenceFolder.file(
-              'manifest.txt',
-              [
-                `素材：${layer.title}`,
-                `类型：序列帧`,
-                `帧数：${successCount}/${frames.length}`,
-                'Spine JSON：skeleton.json',
-                layer.durationSeconds
-                  ? `时长：${layer.durationSeconds}s`
-                  : null,
+                  null,
+                  2,
+                ),
+              );
+              sequenceFolder.file(
+                'README.md',
+                buildSpineImageSequenceReadme(layer),
+              );
+              sequenceFolder.file(
+                'manifest.txt',
+                [
+                  `素材：${layer.title}`,
+                  `类型：序列帧`,
+                  `帧数：${successCount}/${frames.length}`,
+                  'Spine JSON：skeleton.json',
+                  layer.durationSeconds
+                    ? `时长：${layer.durationSeconds}s`
+                    : null,
                   failedFrames.length
                     ? `失败帧数：${failedFrames.length}`
                     : null,
-              ]
-                .filter(Boolean)
-                .join('\n'),
+                ]
+                  .filter(Boolean)
+                  .join('\n'),
+              );
+              imageByKey.set(key, {
+                key,
+                file: `${sequenceFolderName}/manifest.txt`,
+                layer,
+                blob: new Blob([], { type: 'application/zip' }),
+              });
+              continue;
+            }
+
+            const blob = await readLayerAssetBlob(layer);
+            const mediaType = layer.mediaType ?? 'image';
+            const extension = getLayerAssetExtensionFromTypeOrSrc(
+              mediaType,
+              blob.type,
+              layer.objectKey ?? layer.src,
             );
+            const folderName = mediaType === 'image' ? 'images' : 'media';
+            const targetFolder =
+              mediaType === 'image' ? imagesFolder : mediaFolder;
+            const file = `${folderName}/${indexedFileName}.${extension}`;
             imageByKey.set(key, {
               key,
-              file: `${sequenceFolderName}/manifest.txt`,
+              file,
               layer,
-              blob: new Blob([], { type: 'application/zip' }),
+              blob,
+            });
+            targetFolder.file(
+              `${indexedFileName}.${extension}`,
+              await blobToUint8Array(blob),
+            );
+          } catch (error) {
+            const mediaType = layer.mediaType ?? 'image';
+            const extension = getLayerAssetExtensionFromTypeOrSrc(
+              mediaType,
+              '',
+              layer.objectKey ?? layer.src,
+            );
+            const folderName = mediaType === 'image' ? 'images' : 'media';
+            imageByKey.set(key, {
+              key,
+              file: `${folderName}/${indexedFileName}.${extension}`,
+              layer,
+              error: error instanceof Error ? error.message : '素材读取失败',
             });
-            continue;
           }
-
-          const blob = await readLayerAssetBlob(layer);
-          const mediaType = layer.mediaType ?? 'image';
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            mediaType,
-            blob.type,
-            layer.objectKey ?? layer.src,
-          );
-          const folderName = mediaType === 'image' ? 'images' : 'media';
-          const targetFolder =
-            mediaType === 'image' ? imagesFolder : mediaFolder;
-          const file = `${folderName}/${indexedFileName}.${extension}`;
-          imageByKey.set(key, {
-            key,
-            file,
-            layer,
-            blob,
-          });
-          targetFolder.file(
-            `${indexedFileName}.${extension}`,
-            await blobToUint8Array(blob),
-          );
-        } catch (error) {
-          const mediaType = layer.mediaType ?? 'image';
-          const extension = getLayerAssetExtensionFromTypeOrSrc(
-            mediaType,
-            '',
-            layer.objectKey ?? layer.src,
-          );
-          const folderName = mediaType === 'image' ? 'images' : 'media';
-          imageByKey.set(key, {
-            key,
-            file: `${folderName}/${indexedFileName}.${extension}`,
-            layer,
-            error: error instanceof Error ? error.message : '素材读取失败',
-          });
         }
-      }
 
-      const failedImages = [...imageByKey.values()].filter(
-        (image) => image.error,
-      );
-      const successfulImages = [...imageByKey.values()].filter(
-        (image) => image.blob,
-      );
-      if (!successfulImages.length) {
+        const failedImages = [...imageByKey.values()].filter(
+          (image) => image.error,
+        );
+        const successfulImages = [...imageByKey.values()].filter(
+          (image) => image.blob,
+        );
+        if (!successfulImages.length) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '素材导出失败',
+          });
+          return;
+        }
+
+        const metadata: CanvasAssetExportMetadata = {
+          projectTitle,
+          exportedAt: exportedAt.toISOString(),
+          layers: exportableLayers.map((layer) => {
+            const image = imageByKey.get(getLayerExportKey(layer));
+            return buildLayerExportMetadata(
+              layer,
+              image?.blob ? image.file : null,
+              image?.error,
+            );
+          }),
+          failedImages: failedImages.map((image) => ({
+            title: image.layer.title,
+            error: image.error ?? '素材读取失败',
+          })),
+        };
+        const manifest = [
+          `项目：${projectTitle}`,
+          `导出时间：${metadata.exportedAt}`,
+          `素材数量：${successfulImages.length}`,
+          `图层数量：${exportableLayers.length}`,
+          failedImages.length ? `失败素材数量：${failedImages.length}` : null,
+        ]
+          .filter(Boolean)
+          .join('\n');
+
+        rootFolder.file('metadata.json', JSON.stringify(metadata, null, 2));
+        rootFolder.file('manifest.txt', manifest);
+
+        const zipBlob = await zip.generateAsync({ type: 'blob' });
+        if (
+          typeof URL.createObjectURL !== 'function' ||
+          typeof URL.revokeObjectURL !== 'function'
+        ) {
+          setAssetExportStatus({
+            tone: 'error',
+            message: '当前浏览器不支持素材下载',
+          });
+          return;
+        }
+
+        const downloadUrl = URL.createObjectURL(zipBlob);
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.download = `${rootFolderName}-${formatExportDate(exportedAt)}.zip`;
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(downloadUrl);
+        setAssetExportStatus({
+          tone: failedImages.length ? 'error' : 'success',
+          message: failedImages.length ? '部分素材未能导出' : successMessage,
+        });
+      } catch {
         setAssetExportStatus({
           tone: 'error',
           message: '素材导出失败',
         });
-        return;
+      } finally {
+        setIsExportingAssets(false);
       }
-
-      const metadata: CanvasAssetExportMetadata = {
-        projectTitle,
-        exportedAt: exportedAt.toISOString(),
-        layers: exportableLayers.map((layer) => {
-          const image = imageByKey.get(getLayerExportKey(layer));
-          return buildLayerExportMetadata(
-            layer,
-            image?.blob ? image.file : null,
-            image?.error,
-          );
-        }),
-        failedImages: failedImages.map((image) => ({
-          title: image.layer.title,
-          error: image.error ?? '素材读取失败',
-        })),
-      };
-      const manifest = [
-        `项目：${projectTitle}`,
-        `导出时间：${metadata.exportedAt}`,
-        `素材数量：${successfulImages.length}`,
-        `图层数量：${exportableLayers.length}`,
-        failedImages.length ? `失败素材数量：${failedImages.length}` : null,
-      ]
-        .filter(Boolean)
-        .join('\n');
-
-      rootFolder.file('metadata.json', JSON.stringify(metadata, null, 2));
-      rootFolder.file('manifest.txt', manifest);
-
-      const zipBlob = await zip.generateAsync({ type: 'blob' });
-      if (
-        typeof URL.createObjectURL !== 'function' ||
-        typeof URL.revokeObjectURL !== 'function'
-      ) {
-        setAssetExportStatus({
-          tone: 'error',
-          message: '当前浏览器不支持素材下载',
-        });
-        return;
-      }
-
-      const downloadUrl = URL.createObjectURL(zipBlob);
-      const link = document.createElement('a');
-      link.href = downloadUrl;
-      link.download = `${rootFolderName}-${formatExportDate(exportedAt)}.zip`;
-      document.body.appendChild(link);
-      link.click();
-      link.remove();
-      URL.revokeObjectURL(downloadUrl);
-      setAssetExportStatus({
-        tone: failedImages.length ? 'error' : 'success',
-          message: failedImages.length ? '部分素材未能导出' : successMessage,
-      });
-    } catch {
-      setAssetExportStatus({
-        tone: 'error',
-        message: '素材导出失败',
-      });
-    } finally {
-      setIsExportingAssets(false);
-    }
     },
     [isExportingAssets, projectTitle],
   );
diff --git a/src/components/image-editor/useImageCanvasAssetLibrary.ts b/src/components/image-editor/useImageCanvasAssetLibrary.ts
index 400ae5a04..ad7db3236 100644
--- a/src/components/image-editor/useImageCanvasAssetLibrary.ts
+++ b/src/components/image-editor/useImageCanvasAssetLibrary.ts
@@ -322,21 +322,21 @@ export function useImageCanvasAssetLibrary({
       );
       setAssetFolders(
         (currentFolders) =>
-        replaceLocalAssetFolder({
-          folders: currentFolders,
-          assets: [],
-          localFolderId: folderId,
-          persistedFolder: folder,
-        }).folders,
+          replaceLocalAssetFolder({
+            folders: currentFolders,
+            assets: [],
+            localFolderId: folderId,
+            persistedFolder: folder,
+          }).folders,
       );
       setAssets(
         (currentAssets) =>
-        replaceLocalAssetFolder({
-          folders: [],
-          assets: currentAssets,
-          localFolderId: folderId,
-          persistedFolder: folder,
-        }).assets,
+          replaceLocalAssetFolder({
+            folders: [],
+            assets: currentAssets,
+            localFolderId: folderId,
+            persistedFolder: folder,
+          }).assets,
       );
       setActiveUploadFolderId(folder.folderId);
     } catch {
@@ -362,58 +362,58 @@ export function useImageCanvasAssetLibrary({
   );
 
   const submitAssetToShowcase = useCallback((asset: EditorAsset) => {
-      if (!resolveAssetShowcaseSubmissionState(asset).canSubmit) {
-        return;
-      }
-      const previousAsset = asset;
-      setAssets((currentAssets) =>
-        currentAssets.map((currentAsset) =>
-          currentAsset.id === asset.id
-            ? {
-                ...currentAsset,
-                publicShowcaseEnabled: false,
-                showcaseReviewStatus: 'pending',
-                showcaseDisplayEnabled: false,
-                showcaseSubmitError: undefined,
-              }
-            : currentAsset,
-        ),
-      );
-      submitEditorAssetShowcase(asset.id)
-        .then((showcaseAsset) => {
-          setAssets((currentAssets) =>
-            currentAssets.map((currentAsset) =>
-              currentAsset.id === asset.id
-                ? {
-                    ...currentAsset,
-                    publicShowcaseEnabled: false,
+    if (!resolveAssetShowcaseSubmissionState(asset).canSubmit) {
+      return;
+    }
+    const previousAsset = asset;
+    setAssets((currentAssets) =>
+      currentAssets.map((currentAsset) =>
+        currentAsset.id === asset.id
+          ? {
+              ...currentAsset,
+              publicShowcaseEnabled: false,
+              showcaseReviewStatus: 'pending',
+              showcaseDisplayEnabled: false,
+              showcaseSubmitError: undefined,
+            }
+          : currentAsset,
+      ),
+    );
+    submitEditorAssetShowcase(asset.id)
+      .then((showcaseAsset) => {
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === asset.id
+              ? {
+                  ...currentAsset,
+                  publicShowcaseEnabled: false,
                   showcaseId:
                     showcaseAsset.showcaseId ?? showcaseAsset.resourceId,
-                    showcaseReviewStatus: showcaseAsset.reviewStatus ?? 'pending',
-                    showcaseDisplayEnabled: showcaseAsset.displayEnabled ?? false,
-                    showcaseLikeCount: showcaseAsset.likeCount ?? 0,
-                    generationCostMudPoints:
-                      showcaseAsset.generationCostMudPoints ??
-                      currentAsset.generationCostMudPoints,
-                    showcaseSubmitError: undefined,
-                  }
-                : currentAsset,
-            ),
-          );
-        })
-        .catch((error: unknown) => {
-          const showcaseSubmitError = formatShowcaseSubmitError(error);
-          setAssets((currentAssets) =>
-            currentAssets.map((currentAsset) =>
-              currentAsset.id === asset.id
-                ? {
-                    ...previousAsset,
-                    showcaseSubmitError,
-                  }
-                : currentAsset,
-            ),
-          );
-        });
+                  showcaseReviewStatus: showcaseAsset.reviewStatus ?? 'pending',
+                  showcaseDisplayEnabled: showcaseAsset.displayEnabled ?? false,
+                  showcaseLikeCount: showcaseAsset.likeCount ?? 0,
+                  generationCostMudPoints:
+                    showcaseAsset.generationCostMudPoints ??
+                    currentAsset.generationCostMudPoints,
+                  showcaseSubmitError: undefined,
+                }
+              : currentAsset,
+          ),
+        );
+      })
+      .catch((error: unknown) => {
+        const showcaseSubmitError = formatShowcaseSubmitError(error);
+        setAssets((currentAssets) =>
+          currentAssets.map((currentAsset) =>
+            currentAsset.id === asset.id
+              ? {
+                  ...previousAsset,
+                  showcaseSubmitError,
+                }
+              : currentAsset,
+          ),
+        );
+      });
   }, []);
 
   const startRenamingFolder = useCallback((folder: EditorAssetFolder) => {
@@ -454,21 +454,21 @@ export function useImageCanvasAssetLibrary({
       }
       setAssetFolders(
         (currentFolders) =>
-        deleteAssetFolderLocally({
-          folders: currentFolders,
-          assets: [],
-          folderId: folder.id,
-          defaultFolderId: defaultFolder.id,
-        }).folders,
+          deleteAssetFolderLocally({
+            folders: currentFolders,
+            assets: [],
+            folderId: folder.id,
+            defaultFolderId: defaultFolder.id,
+          }).folders,
       );
       setAssets(
         (currentAssets) =>
-        deleteAssetFolderLocally({
-          folders: [],
-          assets: currentAssets,
-          folderId: folder.id,
-          defaultFolderId: defaultFolder.id,
-        }).assets,
+          deleteAssetFolderLocally({
+            folders: [],
+            assets: currentAssets,
+            folderId: folder.id,
+            defaultFolderId: defaultFolder.id,
+          }).assets,
       );
       if (folder.persisted) {
         deleteEditorAssetFolder(folder.id)
@@ -497,7 +497,7 @@ export function useImageCanvasAssetLibrary({
       });
     },
     [],
-    );
+  );
 
   const toggleAllAssetsSelected = useCallback((visibleAssetIds: string[]) => {
     setSelectedAssetIds((currentIds) =>
@@ -580,9 +580,9 @@ export function useImageCanvasAssetLibrary({
       bottom: number;
     }) => {
       const marqueeSelection = selectUploadedAssetsInRect({
-          assets,
-          assetTargets: readAssetHitTargets(assetListRef.current),
-          selectionRect,
+        assets,
+        assetTargets: readAssetHitTargets(assetListRef.current),
+        selectionRect,
       });
       setSelectedAssetIds(
         new Set([...marqueeBaseSelectionRef.current, ...marqueeSelection]),
diff --git a/src/index.test.ts b/src/index.test.ts
index e59350ba2..f22109dd7 100644
--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -16,10 +16,16 @@ function readPlatformThemeCss() {
 
 function getCssBlock(source: string, selector: string) {
   const selectorIndex = source.indexOf(selector);
-  expect(selectorIndex, `${selector} should exist in src/index.css`).toBeGreaterThanOrEqual(0);
+  expect(
+    selectorIndex,
+    `${selector} should exist in src/index.css`,
+  ).toBeGreaterThanOrEqual(0);
 
   const openBraceIndex = source.indexOf('{', selectorIndex);
-  expect(openBraceIndex, `${selector} should open a CSS block`).toBeGreaterThanOrEqual(0);
+  expect(
+    openBraceIndex,
+    `${selector} should open a CSS block`,
+  ).toBeGreaterThanOrEqual(0);
 
   let depth = 0;
   for (let index = openBraceIndex; index < source.length; index += 1) {
@@ -111,7 +117,9 @@ describe('index stylesheet unread dots', () => {
     );
 
     expect(generatingBlock).toContain('cursor: progress;');
-    expect(generatingScanBlock).toContain('animation: image-canvas-generation-scan');
+    expect(generatingScanBlock).toContain(
+      'animation: image-canvas-generation-scan',
+    );
     expect(iconBlock).toContain('background: linear-gradient(');
     expect(iconDecorationBlock).toContain('width: 42%;');
     expect(css).not.toContain(
@@ -129,11 +137,16 @@ describe('index stylesheet unread dots', () => {
       css,
       '.project-gallery__canvas-cover-loading::before,\n.image-canvas-editor__layer-image-loading::before',
     );
-    const keyframesBlock = getCssBlock(css, '@keyframes image-canvas-generation-scan');
+    const keyframesBlock = getCssBlock(
+      css,
+      '@keyframes image-canvas-generation-scan',
+    );
 
     expect(loadingBlock).toContain('overflow: hidden;');
     expect(loadingBlock).toContain('background: rgba(226, 232, 240, 0.72);');
-    expect(loadingBlock).not.toContain('animation: image-canvas-generation-scan');
+    expect(loadingBlock).not.toContain(
+      'animation: image-canvas-generation-scan',
+    );
 
     expect(shimmerBlock).toContain('left: -64%;');
     expect(shimmerBlock).toContain('width: 64%;');
@@ -215,7 +228,9 @@ describe('index stylesheet unread dots', () => {
     );
     expect(platformShellBlock).toContain('--platform-layout-viewport-height');
     expect(platformShellBlock).not.toContain('translate3d');
-    expect(platformShellBlock).not.toContain('--platform-keyboard-focus-offset');
+    expect(platformShellBlock).not.toContain(
+      '--platform-keyboard-focus-offset',
+    );
   });
 
   it('uses warm brown tokens for draft unread markers instead of red literals', () => {
@@ -248,7 +263,9 @@ describe('index stylesheet unread dots', () => {
     const css = readIndexCss();
     const themeCss = readPlatformThemeCss();
     const titleRuleIndex = css.indexOf('.selection-hero-brand__title');
-    const platformThemeRuleIndex = css.indexOf('.platform-theme,\n.platform-theme *');
+    const platformThemeRuleIndex = css.indexOf(
+      '.platform-theme,\n.platform-theme *',
+    );
 
     expect(titleRuleIndex).toBeGreaterThanOrEqual(0);
     expect(platformThemeRuleIndex).toBeGreaterThan(titleRuleIndex);
@@ -313,7 +330,10 @@ describe('index stylesheet draft mobile cards', () => {
 
     const draftPanelSelector =
       '#platform-tab-panel-saves,\n  #platform-tab-panel-saves *';
-    const draftPanelSelectorIndex = css.indexOf(draftPanelSelector, mobileQueryIndex);
+    const draftPanelSelectorIndex = css.indexOf(
+      draftPanelSelector,
+      mobileQueryIndex,
+    );
     expect(draftPanelSelectorIndex).toBeGreaterThanOrEqual(0);
 
     const draftPanelBlock = getCssBlock(css, draftPanelSelector);
@@ -323,7 +343,10 @@ describe('index stylesheet draft mobile cards', () => {
 
     const editableSelector =
       "#platform-tab-panel-saves :is(input, textarea, [contenteditable='true'])";
-    const editableSelectorIndex = css.indexOf(editableSelector, mobileQueryIndex);
+    const editableSelectorIndex = css.indexOf(
+      editableSelector,
+      mobileQueryIndex,
+    );
     expect(editableSelectorIndex).toBeGreaterThanOrEqual(0);
 
     const editableBlock = getCssBlock(css, editableSelector);