✨ 添加附件系统，以及图片节点的加载和保存

Author: zty012

.lintstagedrc

@@ -1,4 +1,4 @@
 {
   "*.{ts,tsx}": ["eslint --fix"],
-  "*.{json,md,yaml,yml}": ["prettier --write"]
+  "*.{json,md,yaml,yml,ts,tsx}": ["prettier --write"]
 }

app/package.json

@@ -72,6 +72,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.525.0",
     "md5": "^2.3.0",
+    "mime": "^4.0.7",
     "next-themes": "^0.4.6",
     "openai": "^5.8.2",
     "react": "^19.1.0",

app/src/core/Project.tsx

@@ -73,7 +73,8 @@ import { StageObject } from "@/core/stage/stageObject/abstract/StageObject";
 import { projectsAtom, store } from "@/state";
 import { deserialize, serialize } from "@graphif/serializer";
 import { Decoder, Encoder } from "@msgpack/msgpack";
-import { Uint8ArrayReader, Uint8ArrayWriter, ZipReader, ZipWriter } from "@zip.js/zip.js";
+import { BlobReader, BlobWriter, Uint8ArrayReader, Uint8ArrayWriter, ZipReader, ZipWriter } from "@zip.js/zip.js";
+import mime from "mime";
 import { URI } from "vscode-uri";
 
 if (import.meta.hot) {
@@ -209,16 +210,26 @@ export class Project {
       const fileContent = await this.fs.read(this.uri);
       const reader = new ZipReader(new Uint8ArrayReader(fileContent));
       const entries = await reader.getEntries();
+      let serializedStageObjects: any[] = [];
       for (const entry of entries) {
         if (entry.filename === "stage.msgpack") {
           const stageRawData = await entry.getData!(new Uint8ArrayWriter());
-          const decoded = this.decoder.decode(stageRawData) as any[];
-          for (const serializedStageObject of decoded) {
-            const stageObject = deserialize(serializedStageObject, this);
-            this.stage.push(stageObject);
+          serializedStageObjects = this.decoder.decode(stageRawData) as any[];
+        } else if (entry.filename.startsWith("attachments/")) {
+          const match = entry.filename.trim().match(/^attachments\/([a-zA-Z0-9-]+)\.([a-zA-Z0-9]+)$/);
+          if (!match) {
+            console.warn("[Project] 附件文件名不符合规范: %s", entry.filename);
+            continue;
           }
+          const uuid = match[1];
+          const ext = match[2];
+          const type = mime.getType(ext) || "application/octet-stream";
+          const attachment = await entry.getData!(new BlobWriter(type));
+          this.attachments.set(uuid, attachment);
         }
       }
+      this.stage = serializedStageObjects.map((it) => deserialize(it, this));
+      this.state = ProjectState.Saved;
     }
   }
 
@@ -303,6 +314,10 @@ export class Project {
     const uwriter = new Uint8ArrayWriter();
     const writer = new ZipWriter(uwriter);
     writer.add("stage.msgpack", new Uint8ArrayReader(encodedStage));
+    // 添加附件
+    for (const [uuid, attachment] of this.attachments.entries()) {
+      writer.add(`attachments/${uuid}.${mime.getExtension(attachment.type)}`, new BlobReader(attachment));
+    }
     await writer.close();
     const fileContent = await uwriter.getData();
     await this.fs.write(this.uri, fileContent);

app/src/core/render/canvas2d/entityRenderer/EntityRenderer.tsx

@@ -246,7 +246,7 @@ export class EntityRenderer {
       );
     } else if (imageNode.state === "notFound") {
       this.project.textRenderer.renderTextFromCenter(
-        "not found",
+        `not found ${imageNode.attachmentId}`,
         this.project.renderer.transformWorld2View(imageNode.rectangle.center),
         20 * this.project.camera.currentScale,
         this.project.stageStyleManager.currentStyle.StageObjectBorder,

app/src/core/service/GlobalMenu.tsx

@@ -457,12 +457,23 @@ export async function onOpenFile() {
   const t = performance.now();
   loadAllServices(project);
   const loadServiceTime = performance.now() - t;
-  await project.init();
-  const readFileTime = performance.now() - t;
-  store.set(projectsAtom, [...store.get(projectsAtom), project]);
-  store.set(activeProjectAtom, project);
-  Telemetry.event("打开文件", {
-    loadServiceTime,
-    readFileTime,
+  toast.promise(project.init(), {
+    loading: "正在打开文件...",
+    success: () => {
+      const readFileTime = performance.now() - t;
+      store.set(projectsAtom, [...store.get(projectsAtom), project]);
+      store.set(activeProjectAtom, project);
+      Telemetry.event("打开文件", {
+        loadServiceTime,
+        readFileTime,
+      });
+      return `耗时 ${readFileTime} ms，共 ${project.stage.length} 个舞台对象，${project.attachments.size} 个附件`;
+    },
+    error: (e) => {
+      Telemetry.event("打开文件失败", {
+        error: String(e),
+      });
+      return `读取时发生错误，已发送错误报告，可在群内联系开发者\n${String(e)}`;
+    },
   });
 }

app/src/core/stage/stageManager/StageHistoryManager.tsx

@@ -87,7 +87,6 @@ export class HistoryManager {
     const data = patches.reduce((acc, patch) => {
       return applyPatch(acc, patch).newDocument;
     }, this.initialStage);
-    console.log(data);
     // 反序列化得到舞台对象
     const stage = deserialize(data);
     return stage;

packages/serializer/src/index.ts

@@ -85,7 +85,7 @@ export function deserialize(json: any, extra?: any): any {
   const className = json._;
   const class_ = classes.get(className);
   if (!class_) {
-    throw TypeError(`[Serializer] Cannot find class ${class_}`);
+    throw TypeError(`[Serializer] Cannot find class ${class_} of ${JSON.stringify(json)}`);
   }
   // 先把json中有_的值反序列化
   for (const key in json) {