solve_conflict

package.json

@@ -15,7 +15,7 @@
     "file-saver": "^2.0.5",
     "jszip": "^3.10.0",
     "localforage": "^1.10.0",
-    "monaco-editor": "^0.28.1",
+    "monaco-editor": "^0.37.1",
     "tdesign-vue-next": "^1.3.0",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
@@ -31,8 +31,8 @@
     "postcss-import": "^14.1.0",
     "postcss-nested": "^6.0.1",
     "typescript": "^4.7.4",
-    "vite": "^4.0.3",
-    "vite-plugin-monaco-editor": "^1.0.10",
-    "vue-tsc": "^1.0.5"
+    "vite": "^4.3.1",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vue-tsc": "^1.4.4"
   }
 }

pnpm-lock.yaml

@@ -13,17 +13,17 @@ specifiers:
   file-saver: ^2.0.5
   jszip: ^3.10.0
   localforage: ^1.10.0
-  monaco-editor: ^0.28.1
+  monaco-editor: ^0.37.1
   postcss: ^8.4.6
   postcss-import: ^14.1.0
   postcss-nested: ^6.0.1
   tdesign-vue-next: ^1.3.0
   typescript: ^4.7.4
-  vite: ^4.0.3
-  vite-plugin-monaco-editor: ^1.0.10
+  vite: ^4.3.1
+  vite-plugin-monaco-editor: ^1.1.0
   vue: ^3.2.37
   vue-router: ^4.1.3
-  vue-tsc: ^1.0.5
+  vue-tsc: ^1.4.4
 
 dependencies:
   axios: 0.26.1
@@ -32,7 +32,7 @@ dependencies:
   file-saver: 2.0.5
   jszip: 3.10.1
   localforage: 1.10.0
-  monaco-editor: 0.28.1
+  monaco-editor: 0.37.1
   tdesign-vue-next: 1.3.1_vue@3.2.47
   vue: 3.2.47
   vue-router: 4.1.6_vue@3.2.47
@@ -49,7 +49,7 @@ devDependencies:
   postcss-nested: 6.0.1_postcss@8.4.23
   typescript: 4.9.5
   vite: 4.3.2_@types+node@18.16.1
-  vite-plugin-monaco-editor: 1.1.0_monaco-editor@0.28.1
+  vite-plugin-monaco-editor: 1.1.0_monaco-editor@0.37.1
   vue-tsc: 1.4.4_typescript@4.9.5
 
 packages:
@@ -1124,8 +1124,8 @@ packages:
     resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
     dev: false
 
-  /monaco-editor/0.28.1:
-    resolution: {integrity: sha512-P1vPqxB4B1ZFzTeR1ScggSp9/5NoQrLCq88fnlNUsuRAP1usEBN4TIpI2lw0AYIZNVIanHk0qwjze2uJwGOHUw==}
+  /monaco-editor/0.37.1:
+    resolution: {integrity: sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==}
 
   /ms/2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -1376,12 +1376,12 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
-  /vite-plugin-monaco-editor/1.1.0_monaco-editor@0.28.1:
+  /vite-plugin-monaco-editor/1.1.0_monaco-editor@0.37.1:
     resolution: {integrity: sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==}
     peerDependencies:
       monaco-editor: '>=0.33.0'
     dependencies:
-      monaco-editor: 0.28.1
+      monaco-editor: 0.37.1
     dev: true
 
   /vite/4.3.2_@types+node@18.16.1:

src/global.d.ts

@@ -1,3 +1,9 @@
+import { Meta2d } from '@meta2d/core';
+
+declare global {
+  var meta2d: Meta2d;
+}
+
 declare interface Window {
   company: string;
   accountHome: string;

src/services/register.ts

@@ -1,22 +1,15 @@
-import {
-  Meta2d,
-  register,
-  registerAnchors,
-  registerCanvasDraw,
-} from "@meta2d/core";
-import { flowPens, flowAnchors } from "@meta2d/flow-diagram";
+import { register, registerAnchors, registerCanvasDraw } from '@meta2d/core';
+import { flowPens, flowAnchors } from '@meta2d/flow-diagram';
 import {
   activityDiagram,
   activityDiagramByCtx,
-} from "@meta2d/activity-diagram";
-import { classPens } from "@meta2d/class-diagram";
-import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
-import { register as registerEcharts } from "@meta2d/chart-diagram";
-import { registerHighcharts } from "@meta2d/chart-diagram";
-import { registerLightningChart } from "@meta2d/chart-diagram";
-import { formPens } from "@meta2d/form-diagram";
-import { chartsPens } from "@meta2d/le5le-charts";
-import { ftaPens, ftaPensbyCtx, ftaAnchors } from "@meta2d/fta-diagram";
+} from '@meta2d/activity-diagram';
+import { classPens } from '@meta2d/class-diagram';
+import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram';
+import { register as registerEcharts } from '@meta2d/chart-diagram';
+import { formPens } from '@meta2d/form-diagram';
+import { chartsPens } from '@meta2d/le5le-charts';
+import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram';
 
 export function registerBasicDiagram() {
   register(flowPens());
@@ -27,8 +20,6 @@ export function registerBasicDiagram() {
   register(sequencePens());
   registerCanvasDraw(sequencePensbyCtx());
   registerEcharts();
-  registerHighcharts();
-  registerLightningChart();
   registerCanvasDraw(formPens());
   registerCanvasDraw(chartsPens());
   register(ftaPens());

src/styles/tdesign.css

@@ -283,6 +283,12 @@
   overflow-y: auto;
 }
 
+.t-tabs__nav-container {
+  &.t-is-top::after {
+    background-color: var(--color-border-input);
+  }
+}
+
 .t-tabs__nav-item-wrapper > div {
   display: none;
 }

src/views/Index.vue

@@ -22,20 +22,20 @@ import {
   onUnmounted,
   ref,
   provide,
-  nextTick
-} from "vue";
-import axios from "axios";
+  nextTick,
+} from 'vue';
+import axios from 'axios';
 // import { Pen } from "@meta2d/core";
-import { strictAssign } from "@/services/utils";
+import { strictAssign } from '@/services/utils';
 
-import Header from "./components/Header.vue";
-import Graphics from "./components/Graphics.vue";
-import View from "./components/View.vue";
-import FileProps from "./components/FileProps.vue";
-import PenProps from "./components/PenProps.vue";
-import PensProps from "./components/PensProps.vue";
+import Header from './components/Header.vue';
+import Graphics from './components/Graphics.vue';
+import View from './components/View.vue';
+import FileProps from './components/FileProps.vue';
+import PenProps from './components/PenProps.vue';
+import PensProps from './components/PensProps.vue';
 
-import { useSelection, SelectionMode } from "@/services/selections";
+import { useSelection, SelectionMode } from '@/services/selections';
 
 const { selections } = useSelection();
 
@@ -65,7 +65,7 @@ const checkPropType = (pens: Pen[]) => {
     // 选中单个画笔
     selections.mode = SelectionMode.Pen;
     if (Array.isArray(pens[0].frames)) {
-      (pens[0] as any).showDuration = (<any>globalThis).meta2d.calcAnimateDuration(pens[0]);
+      (pens[0] as any).showDuration = meta2d.calcAnimateDuration(pens[0]);
     }
     // strictAssign(activePen.value, pens[0]);
     selections.pen = pens[0];
@@ -83,7 +83,7 @@ const checkPropType = (pens: Pen[]) => {
 
 function getPenRectPens(oldPens: Pen[]): Pen[] {
   return oldPens.map((pen) => {
-    const rect = (<any>globalThis).meta2d.getPenRect(pen);
+    const rect = meta2d.getPenRect(pen);
     return {
       ...pen,
       ...rect,
@@ -93,7 +93,7 @@ function getPenRectPens(oldPens: Pen[]): Pen[] {
 
 const inactive = (pens: Pen[]) => {
   setTimeout(() => {
-    active((<any>globalThis).meta2d.store.active);
+    active(meta2d.store.active);
   });
 };
 
@@ -103,13 +103,13 @@ const inactive = (pens: Pen[]) => {
 // });
 
 nextTick(() => {
-  (<any>globalThis).meta2d.on("active", active);
-    (<any>globalThis).meta2d.on("inactive", inactive);
+  meta2d.on('active', active);
+  meta2d.on('inactive', inactive);
 });
 
 onUnmounted(() => {
-  (<any>globalThis).meta2d.off("active", active);
-    (<any>globalThis).meta2d.off("inactive", inactive);
+  meta2d.off('active', active);
+  meta2d.off('inactive', inactive);
 });
 </script>
 

src/views/components/FileProps.vue

@@ -11,6 +11,7 @@
               placeholder="宽"
               theme="column"
               min="1"
+              style="width: 80px"
               @change="changeValue($event, 'width')"
             />
             <t-input-number
@@ -20,6 +21,7 @@
               theme="column"
               min="1"
               :value="meta2dInfo?.height"
+              style="width: 80px"
               @change="changeValue($event, 'height')"
             />
             <t-dropdown
@@ -166,16 +168,16 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, onUnmounted, ref } from "vue";
-import { getCookie } from "@/services/cookie";
-import ElementTree from "./ElementTree.vue";
-import { Meta2dData } from "@meta2d/core";
-import MonacoModal from "./common/MonacoModal.vue";
+import { onMounted, reactive, onUnmounted, ref } from 'vue';
+import { getCookie } from '@/services/cookie';
+import ElementTree from './ElementTree.vue';
+import { Meta2dData } from '@meta2d/core';
+import MonacoModal from './common/MonacoModal.vue';
 
 const headers = {
-  Authorization: "Bearer " + (localStorage.token || getCookie("token") || ""),
+  Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
 };
-const updataData = { directory: "/项目" };
+const updataData = { directory: '/项目' };
 
 const data = reactive<any>({
   tab: 1,
@@ -187,12 +189,12 @@ const meta2dInfo = ref<Meta2dData | any>();
 
 const screenList = reactive([
   {
-    name: "大屏",
+    name: '大屏',
     width: 1920,
     height: 1080,
   },
   {
-    name: "网页",
+    name: '网页',
     width: 1440,
     height: 1024,
   },
@@ -207,89 +209,89 @@ const screenList = reactive([
     height: 1194,
   },
   {
-    name: "平板Mini",
+    name: '平板Mini',
     width: 768,
     height: 1024,
   },
   {
-    name: "华为P8",
+    name: '华为P8',
     width: 360,
     height: 640,
   },
   {
-    name: "华为P40",
+    name: '华为P40',
     width: 395,
     height: 856,
   },
   {
-    name: "手机1",
+    name: '手机1',
     width: 430,
     height: 932,
   },
   {
-    name: "手机2",
+    name: '手机2',
     width: 375,
     height: 812,
   },
 ]);
 
 const selectedSreen = (item: any) => {
-  (<any>globalThis).meta2d.store.data.width = item.width;
-  (<any>globalThis).meta2d.store.data.height = item.height;
-  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
-  (<any>globalThis).meta2d.render();
+  meta2d.store.data.width = item.width;
+  meta2d.store.data.height = item.height;
+  meta2d.store.patchFlagsBackground = true;
+  meta2d.render();
   openData();
 };
 
 const fileSuccessed = async (content: any) => {
-  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
-  (<any>globalThis).meta2d.setBackgroundImage(content.response.url);
-  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
-  (<any>globalThis).meta2d.render();
+  meta2d.store.patchFlagsBackground = true;
+  meta2d.setBackgroundImage(content.response.url);
+  meta2d.store.patchFlagsBackground = true;
+  meta2d.render();
 };
 
 const fileRemoved = () => {
-  (<any>globalThis).meta2d.setBackgroundImage("");
-  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
-  (<any>globalThis).meta2d.render();
+  meta2d.setBackgroundImage('');
+  meta2d.store.patchFlagsBackground = true;
+  meta2d.render();
   bgfile.value = [];
 };
 
 const changeValue = (e: any, key: string) => {
-  (<any>globalThis).meta2d.store.data[key] = e;
-  (<any>globalThis).meta2d.render();
+  meta2d.store.data[key] = e;
+  meta2d.render();
   openData();
 };
 
 onMounted(() => {
   // initMeta2dCanvas();
   openData();
-  (<any>globalThis).meta2d.on("opened", openData);
+  meta2d.on('opened', openData);
 });
 
 onUnmounted(() => {
-  (<any>globalThis).meta2d.off("opened", openData);
+  meta2d.off('opened', openData);
 });
 
-function initMeta2dCanvas(){
-  if (!(<any>globalThis).meta2d.store.data.width) {
-    (<any>globalThis).meta2d.store.data.width = 1920
+function initMeta2dCanvas() {
+  if (!meta2d.store.data.width) {
+    meta2d.store.data.width = 1920;
   }
-  if (!(<any>globalThis).meta2d.store.data.height) {
-    (<any>globalThis).meta2d.store.data.height = 1080
+  if (!meta2d.store.data.height) {
+    meta2d.store.data.height = 1080;
   }
-  if (!(<any>globalThis).meta2d.store.data.background) {
-    (<any>globalThis).meta2d.store.data.background='#ffffff'
+  if (!meta2d.store.data.background) {
+    meta2d.store.data.background = '#ffffff';
   }
 }
 
 function openData() {
-  meta2dInfo.value = Object.assign({}, (<any>globalThis).meta2d.store.data);
-  if ((<any>globalThis).meta2d.store.data.bkImage) {
+  meta2dInfo.value = Object.assign({}, meta2d.store.data);
+  if (meta2d.store.data.bkImage) {
     bgfile.value = [
       {
-        name: (<any>globalThis).meta2d.store.data.bkImage,
-        url: (<any>globalThis).meta2d.store.data.bkImage,
+        name: meta2d.store.data.bkImage,
+        url: meta2d.store.data.bkImage,
       },
     ];
   }
@@ -298,8 +300,8 @@ function openData() {
 // const modal = ref<InstanceType<typeof MyModal> | null>(null)
 const initVisible = ref(false);
 const formatVisible = ref(false);
-const initCode = ref("");
-const formatCode = ref("");
+const initCode = ref('');
+const formatCode = ref('');
 
 const clickInit = () => {
   initVisible.value = true;
@@ -310,12 +312,12 @@ const clickFormat = () => {
 };
 const changeInitCode = (code: string) => {
   initCode.value = code;
-  (<any>globalThis).meta2d.store.data.initJs = code;
+  meta2d.store.data.initJs = code;
 };
 
 const changeformatCode = (code: string) => {
   formatCode.value = code;
-  (<any>globalThis).meta2d.store.data.socketCbJs = code;
+  meta2d.store.data.socketCbJs = code;
 };
 </script>
 <style lang="postcss" scoped>

src/views/components/Header.vue

@@ -272,31 +272,31 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useUser } from "@/services/user";
-import { NotifyPlugin, MessagePlugin } from "tdesign-vue-next";
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUser } from '@/services/user';
+import { NotifyPlugin, MessagePlugin } from 'tdesign-vue-next';
 import {
   showNotification,
   Meta2dBackData,
   dealwithFormatbeforeOpen,
   gotoAccount,
-} from "@/services/utils";
-import { readFile, upload } from "@/services/file";
-import { compareVersion, baseVer, upgrade } from "@/services/upgrade";
-import { parseSvg } from "@meta2d/svg";
-import { Pen } from "@meta2d/core";
+} from '@/services/utils';
+import { readFile, upload } from '@/services/file';
+import { compareVersion, baseVer, upgrade } from '@/services/upgrade';
+import { parseSvg } from '@meta2d/svg';
+import { Pen } from '@meta2d/core';
 
 const router = useRouter();
 const market = import.meta.env.VITE_MARKET;
 
-const baseUrl = import.meta.env.BASE_URL || "/";
+const baseUrl = import.meta.env.BASE_URL || '/';
 
 const { user, message, getUser, getMessage, signout } = useUser();
 
 const isNew = ref(false);
 const data = reactive({
-  name: "空白文件",
+  name: '空白文件',
 });
 
 function login() {
@@ -309,12 +309,12 @@ function login() {
   //       arr[0] = 'http://account';
   //       let accountUrl = arr.join('.');
   //       return `${
-  //         (<any>globalThis).loginUrl ? (<any>globalThis).loginUrl : accountUrl
+  //         loginUrl ? loginUrl : accountUrl
   //       }?cb=${encodeURIComponent(location.href)}`;
   //     }
 }
 
-const title = "系统可能不会保存您所做的更改，是否继续？";
+const title = '系统可能不会保存您所做的更改，是否继续？';
 const newFile = async () => {
   if (isNew.value) {
     if (await showNotification(title)) {
@@ -327,20 +327,18 @@ const newFile = async () => {
 
 const pen = ref(false);
 const drawPen = () => {
-  (<any>globalThis).meta2d.inactive();
+  meta2d.inactive();
   try {
-    if (!(<any>globalThis).meta2d.canvas.drawingLineName) {
+    if (!meta2d.canvas.drawingLineName) {
       // 开了钢笔，需要关掉铅笔
-      (<any>globalThis).meta2d.canvas.pencil && drawingPencil();
-      (<any>globalThis).meta2d.drawLine(
-        (<any>globalThis).meta2d.store.options.drawingLineName
-      );
+      meta2d.canvas.pencil && drawingPencil();
+      meta2d.drawLine(meta2d.store.options.drawingLineName);
     } else {
-      (<any>globalThis).meta2d.finishDrawLine();
-      (<any>globalThis).meta2d.drawLine();
+      meta2d.finishDrawLine();
+      meta2d.drawLine();
     }
     //钢笔
-    pen.value = !!(<any>globalThis).meta2d.canvas.drawingLineName;
+    pen.value = !!meta2d.canvas.drawingLineName;
   } catch (e: any) {
     MessagePlugin.warning(e.message);
   }
@@ -349,14 +347,14 @@ const drawPen = () => {
 const pencil = ref(false);
 const drawingPencil = () => {
   try {
-    if (!(<any>globalThis).meta2d.canvas.pencil) {
+    if (!meta2d.canvas.pencil) {
       // 开了铅笔需要关掉钢笔
-      (<any>globalThis).meta2d.canvas.drawingLineName && drawPen();
-      (<any>globalThis).meta2d.drawingPencil();
+      meta2d.canvas.drawingLineName && drawPen();
+      meta2d.drawingPencil();
     } else {
-      (<any>globalThis).meta2d.stopPencil();
+      meta2d.stopPencil();
     }
-    pencil.value = (<any>globalThis).meta2d.canvas.pencil;
+    pencil.value = meta2d.canvas.pencil;
   } catch (e: any) {
     MessagePlugin.warning(e.message);
   }
@@ -364,58 +362,58 @@ const drawingPencil = () => {
 
 const magnifier = ref(false);
 const showMagnifier = () => {
-  if (!(<any>globalThis).meta2d.canvas.magnifierCanvas.magnifier) {
-    (<any>globalThis).meta2d.showMagnifier();
+  if (!meta2d.canvas.magnifierCanvas.magnifier) {
+    meta2d.showMagnifier();
   } else {
-    (<any>globalThis).meta2d.hideMagnifier();
+    meta2d.hideMagnifier();
   }
-  magnifier.value = (<any>globalThis).meta2d.canvas.magnifierCanvas.magnifier;
+  magnifier.value = meta2d.canvas.magnifierCanvas.magnifier;
 };
 
 const map = ref(false);
 const showMap = () => {
-  if (!(<any>globalThis).meta2d.map?.isShow) {
-    (<any>globalThis).meta2d.showMap();
+  if (!meta2d.map?.isShow) {
+    meta2d.showMap();
   } else {
-    (<any>globalThis).meta2d.hideMap();
+    meta2d.hideMap();
   }
-  map.value = (<any>globalThis).meta2d.map?.isShow;
+  map.value = meta2d.map?.isShow;
 };
 
 async function newfile(noRouter: boolean = false) {
-  (<any>globalThis).meta2d.canvas.drawingLineName && drawPen();
-  (<any>globalThis).meta2d.canvas.pencil && drawingPencil();
-  (<any>globalThis).meta2d.canvas.magnifierCanvas.magnifier && showMagnifier();
-  (<any>globalThis).meta2d.map?.isShow && showMap();
+  meta2d.canvas.drawingLineName && drawPen();
+  meta2d.canvas.pencil && drawingPencil();
+  meta2d.canvas.magnifierCanvas.magnifier && showMagnifier();
+  meta2d.map?.isShow && showMap();
   isNew.value = false;
   // await localforage.removeItem(localMeta2dDataName);
   // 打开文件操作不跳转
   !noRouter &&
     router.replace({
-      path: "/",
-      query: { r: Date.now() + "" },
+      path: '/',
+      query: { r: Date.now() + '' },
     });
 }
 
 function load(newT: boolean = false) {
-  const input = document.createElement("input");
-  input.type = "file";
+  const input = document.createElement('input');
+  input.type = 'file';
   input.onchange = (event) => {
     const elem = event.target as HTMLInputElement;
     if (elem.files && elem.files[0]) {
       newT && newfile(true);
       // 路由跳转 可能在 openFile 后执行
-      if (elem.files[0].name.endsWith(".json")) {
+      if (elem.files[0].name.endsWith('.json')) {
         openJson(elem.files[0], newT);
-      } else if (elem.files[0].name.endsWith(".svg")) {
+      } else if (elem.files[0].name.endsWith('.svg')) {
         MessagePlugin.info(
-          "可二次编辑但转换存在损失，若作为图片使用，请使用右侧属性面板的上传图片功能"
+          '可二次编辑但转换存在损失，若作为图片使用，请使用右侧属性面板的上传图片功能'
         );
         openSvg(elem.files[0]);
-      } else if (elem.files[0].name.endsWith(".zip")) {
+      } else if (elem.files[0].name.endsWith('.zip')) {
         openZip(elem.files[0], newT);
       } else {
-        MessagePlugin.info("打开文件只支持 json，svg，zip 格式");
+        MessagePlugin.info('打开文件只支持 json，svg，zip 格式');
       }
     }
   };
@@ -427,7 +425,7 @@ const openJson = async (file: File, isNew: boolean = false) => {
   try {
     let data: Meta2dBackData = JSON.parse(text);
     if (!data.name) {
-      data.name = file.name.replace(".json", "");
+      data.name = file.name.replace('.json', '');
     }
     if (!data.version || compareVersion(data.version, baseVer) === -1) {
       // 如果版本号不存在或者版本号 version < 1.0.0
@@ -445,7 +443,7 @@ const openJson = async (file: File, isNew: boolean = false) => {
     // if (!(window as any).meta2dFolder?.includes(data.folder)) {
     //   delete data.folder;
     // }
-    (<any>globalThis).meta2d.open(data);
+    meta2d.open(data);
   } catch (e) {
     console.log(e);
   }
@@ -454,13 +452,13 @@ const openJson = async (file: File, isNew: boolean = false) => {
 const openSvg = async (file: File) => {
   const text = await readFile(file);
   const pens: Pen[] = parseSvg(text);
-  (<any>globalThis).meta2d.canvas.addCaches = pens;
-  MessagePlugin.info("svg转换成功，请点击画布决定放置位置");
+  meta2d.canvas.addCaches = pens;
+  MessagePlugin.info('svg转换成功，请点击画布决定放置位置');
 };
 
 const openZip = async (file: File, isNew: boolean = false) => {
   if (!(user && user.username)) {
-    MessagePlugin.warning("请先登录，否则无法保存!");
+    MessagePlugin.warning('请先登录，否则无法保存!');
     return;
   }
 
@@ -470,16 +468,16 @@ const openZip = async (file: File, isNew: boolean = false) => {
     return;
   }
 
-  const { default: JSZip } = await import("jszip");
+  const { default: JSZip } = await import('jszip');
   const zip = new JSZip();
   await zip.loadAsync(file);
 
-  let dataStr = "";
+  let dataStr = '';
   for (const key in zip.files) {
     if (zip.files[key].dir) {
       continue;
     }
-    if (key.endsWith(".json")) {
+    if (key.endsWith('.json')) {
       // 认为只有一个 json 文件
       // dataStr = await zip.file(key).async('string');
       break;
@@ -501,22 +499,22 @@ const openZip = async (file: File, isNew: boolean = false) => {
     let _keyLower = key.toLowerCase();
     // if (!key.endsWith('.json') && (_png !== -1 || _img !== -1 || _image !== -1 || _file !== -1)) {
     if (
-      _keyLower.endsWith(".png") ||
-      _keyLower.endsWith(".svg") ||
-      _keyLower.endsWith(".gif") ||
-      _keyLower.endsWith(".jpg") ||
-      _keyLower.endsWith(".jpeg")
+      _keyLower.endsWith('.png') ||
+      _keyLower.endsWith('.svg') ||
+      _keyLower.endsWith('.gif') ||
+      _keyLower.endsWith('.jpg') ||
+      _keyLower.endsWith('.jpeg')
     ) {
-      let filename = key.substr(key.lastIndexOf("/") + 1);
-      const extPos = filename.lastIndexOf(".");
-      let ext = "";
+      let filename = key.substr(key.lastIndexOf('/') + 1);
+      const extPos = filename.lastIndexOf('.');
+      let ext = '';
       if (extPos > 0) {
         ext = filename.substr(extPos);
       }
       filename = filename.substring(0, extPos > 8 ? 8 : extPos);
 
       // 上传文件
-      const result:any ={}
+      const result: any = {};
       //   await upload(
       //   // await zip.file(key).async('blob'),
       //   true,
@@ -560,7 +558,7 @@ const openZip = async (file: File, isNew: boolean = false) => {
     let data: Meta2dBackData = JSON.parse(dataStr);
     if (data) {
       if (!data.name) {
-        data.name = file.name.replace(".zip", "");
+        data.name = file.name.replace('.zip', '');
       }
       if (!data.version || compareVersion(data.version, baseVer) === -1) {
         // 如果版本号不存在或者版本号 version < 1.0.0
@@ -578,7 +576,7 @@ const openZip = async (file: File, isNew: boolean = false) => {
       if (!(window as any).meta2dFolder?.includes(data.folder)) {
         delete data.folder;
       }
-      (<any>globalThis).meta2d.open(data);
+      meta2d.open(data);
     }
   } catch (e) {
     return false;

src/views/components/View.vue

@@ -101,7 +101,7 @@
 
 <script lang="ts" setup>
 import { Meta2d, Options } from "@meta2d/core";
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted ,watch} from "vue";
 import { registerBasicDiagram } from "@/services/register";
 import { Meta2dBackData, checkData } from "@/services/utils";
 import { useRouter, useRoute } from "vue-router";
@@ -132,13 +132,33 @@ const meta2dOptions: Options = {
   height: 1080,
 };
 onMounted(() => {
-  new Meta2d("meta2d", meta2dOptions);
+  meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
+  open();
 });
 
+const watcher = watch(
+  () => route.query.id,
+  async () => {
+    open();
+  }
+);
+
+const open = async () => {
+  if (route.query.id) {
+    const ret: any = await axios.post('/data/le5le2d/get', {
+      id: route.query.id,
+    });
+    ret && meta2d.open(ret);
+  } else {
+    meta2d.open();
+  }
+};
+
 onUnmounted(() => {
-  if ((<any>globalThis).meta2d) {
-    (<any>globalThis).meta2d.destroy();
+  watcher();
+  if (meta2d) {
+    meta2d.destroy();
   }
 });