perf: 优化图片导出

apps/er-designer/src/models/erModel.tsx

@@ -4,7 +4,7 @@ import { Transform } from "@antv/x6-plugin-transform";
 import { Scroller } from "@antv/x6-plugin-scroller";
 import { Snapline } from "@antv/x6-plugin-snapline";
 import { Keyboard } from "@antv/x6-plugin-keyboard";
-import { Export } from "@repo/x6-plugin-export";
+import { Export } from "@antv/x6-plugin-export";
 import { Selection } from "@antv/x6-plugin-selection";
 import { SaveDataModel, UploadFile } from "@/api";
 import { useFullscreen, useSessionStorageState } from "ahooks";
@@ -167,6 +167,7 @@ export default function erModel() {
       height: height || document.documentElement.clientHeight,
       autoResize: true,
       async: false,
+      virtual: false,
       mousewheel: {
         enabled: true,
         modifiers: "ctrl",
@@ -910,6 +911,26 @@ export default function erModel() {
     setPlayModeEnable(false);
   };
 
+  const getClassRules = (): string => {
+    let rules = ''
+    const { styleSheets } = document
+    for (let i = 0; i < styleSheets.length; i++) {
+      const sheet = styleSheets[i]
+      // 这里是为了过滤掉不同源 css 脚本，防止报错终止导出
+      try {
+        for (let j = 0; j < sheet.cssRules.length; j++) {
+          rules += sheet.cssRules[j].cssText
+        }
+      } catch (error) {
+        console.log(
+          'CSS scripts from different sources have been filtered out',
+        )
+      }
+    }
+
+    return rules
+  }
+
   /**
    * 保存项目
    */
@@ -945,7 +966,9 @@ export default function erModel() {
           width: 300,
           height: 150,
           quality: 0.2,
-          copyStyles: true,
+          copyStyles: false,
+          serializeImages: true,
+          stylesheet: getClassRules(),
         }
       );
 
@@ -988,5 +1011,6 @@ export default function erModel() {
     onSave,
     tableActive,
     setTableActive,
+    getClassRules
   };
 }

apps/er-designer/src/pages/er/components/Menu.tsx

@@ -30,6 +30,7 @@ export default function Menu() {
     enterPlayMode,
     saveTime,
     onSave,
+    getClassRules,
   } = useModel("erModel");
   const [modal, contextHolder] = Modal.useModal();
   const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body);
@@ -78,14 +79,12 @@ export default function Menu() {
   const handleExportImage = () => {
     if (!graph) return;
 
-    graph.exportPNG("", {
+    graph.exportPNG(project.name, {
       quality: 1,
-      copyStyles: true,
-      stylesheet: `
-        .x6-port {
-          display: none;
-        }
-      `
+      padding: 20,
+      copyStyles: false,
+      serializeImages: true,
+      stylesheet: getClassRules()
     });
   };