feat(asset): 添加素材导入导出功能

- 实现了素材批量导出为包含 assets.json 和媒体文件的压缩包 - 实现了从压缩包导入素材到本地存储的功能 - 在素材页面添加了导出素材和导入素材的按钮入口 - 创建了 asset-transfer 模块处理素材打包和解包逻辑 - 支持图片和视频文件的存储路径映射和恢复 - 添加了文件安全命名和 MIME 类型识别功能
2026-08-06 01:14:36 +08:00 · 2026-05-26 13:13:05 +08:00
parent 1fb782819b
commit 9311b8a92b
3 changed files with 130 additions and 7 deletions
@@ -0,0 +1,75 @@
+import { createZip, readZip } from "@/lib/zip";
+import { getMediaBlob, setMediaBlob } from "@/services/file-storage";
+import { getImageBlob, setImageBlob } from "@/services/image-storage";
+import type { Asset } from "@/stores/use-asset-store";
+
+type AssetExportFile = {
+    app: "infinite-canvas";
+    version: 1;
+    exportedAt: string;
+    assets: Asset[];
+    files: AssetExportItem[];
+};
+
+type AssetExportItem = {
+    storageKey: string;
+    path: string;
+    mimeType: string;
+    bytes: number;
+};
+
+export async function exportAssets(assets: Asset[]) {
+    const files: AssetExportItem[] = [];
+    const zipFiles: { name: string; data: BlobPart }[] = [];
+
+    await Promise.all(
+        assets.map(async (asset) => {
+            const storageKey = asset.kind === "image" || asset.kind === "video" ? asset.data.storageKey : undefined;
+            if (!storageKey) return;
+            const blob = asset.kind === "image" ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
+            if (!blob) return;
+            const path = `files/${safeFileName(storageKey)}.${fileExtension(blob.type, asset.kind)}`;
+            files.push({ storageKey, path, mimeType: blob.type || asset.data.mimeType, bytes: blob.size });
+            zipFiles.push({ name: path, data: blob });
+        }),
+    );
+
+    const data: AssetExportFile = { app: "infinite-canvas", version: 1, exportedAt: new Date().toISOString(), assets, files };
+    const zip = await createZip([{ name: "assets.json", data: JSON.stringify(data, null, 2) }, ...zipFiles]);
+    const url = URL.createObjectURL(zip);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "我的素材.zip";
+    link.click();
+    URL.revokeObjectURL(url);
+}
+
+export async function readAssetPackage(file: File) {
+    const zip = await readZip(file);
+    const assetFile = zip.get("assets.json");
+    if (!assetFile) throw new Error("missing assets.json");
+    const data = JSON.parse(await assetFile.text()) as AssetExportFile;
+    await Promise.all(
+        data.files.map(async (item) => {
+            const blob = zip.get(item.path);
+            if (!blob) return;
+            const typedBlob = blob.type ? blob : blob.slice(0, blob.size, item.mimeType);
+            await (item.storageKey.startsWith("image:") ? setImageBlob(item.storageKey, typedBlob) : setMediaBlob(item.storageKey, typedBlob));
+        }),
+    );
+    return data.assets;
+}
+
+function safeFileName(value: string) {
+    return value.replace(/[\\/:*?"<>|]/g, "_");
+}
+
+function fileExtension(mimeType: string, kind: Asset["kind"]) {
+    if (mimeType.includes("png")) return "png";
+    if (mimeType.includes("jpeg")) return "jpg";
+    if (mimeType.includes("webp")) return "webp";
+    if (mimeType.includes("gif")) return "gif";
+    if (mimeType.includes("mp4")) return "mp4";
+    if (mimeType.includes("webm")) return "webm";
+    return kind === "image" ? "png" : "bin";
+}