feat(assets): 使用 file-saver 库优化文件下载功能

- 引入 file-saver 库替代手动创建下载链接的方式
- 在 asset-transfer.ts 中使用 saveAs 替代 URL.createObjectURL 和手动点击链接
- 在 canvas-export.ts 中使用 saveAs 替代原有的文件下载逻辑
- 更新 package.json 添加 file-saver 依赖
- 更新 bun.lock 文件同步依赖变更
This commit is contained in:
HouYunFei
2026-05-26 13:21:52 +08:00
parent 9311b8a92b
commit de25ef515e
8 changed files with 22 additions and 28 deletions
+3 -6
View File
@@ -1,3 +1,5 @@
import { saveAs } from "file-saver";
import { createZip, readZip } from "@/lib/zip";
import { getMediaBlob, setMediaBlob } from "@/services/file-storage";
import { getImageBlob, setImageBlob } from "@/services/image-storage";
@@ -36,12 +38,7 @@ export async function exportAssets(assets: Asset[]) {
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);
saveAs(zip, "我的素材.zip");
}
export async function readAssetPackage(file: File) {
+2 -4
View File
@@ -3,6 +3,7 @@
import { Copy, Download, PencilLine, Search, Trash2, Upload } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { App, Button, Card, Drawer, Empty, Form, Image, Input, Modal, Pagination, Select, Space, Tag, Typography } from "antd";
import { saveAs } from "file-saver";
import { useCopyText } from "@/hooks/use-copy-text";
import { formatBytes, readFileAsDataUrl } from "@/lib/image-utils";
@@ -149,10 +150,7 @@ export default function AssetsPage() {
const downloadImage = (asset: Asset) => {
if (asset.kind !== "image" && asset.kind !== "video") return;
const link = document.createElement("a");
link.href = asset.kind === "video" ? asset.data.url : asset.data.dataUrl;
link.download = `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`;
link.click();
saveAs(asset.kind === "video" ? asset.data.url : asset.data.dataUrl, `${asset.title || "asset"}.${asset.data.mimeType.split("/")[1] || "png"}`);
};
const exportAllAssets = async () => {