declare meta2d

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/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
@@ -71,7 +73,7 @@
               :auto-upload="true"
               :upload-all-files-in-one-request="false"
               @success="fileSuccessed"
-              @remove = fileRemoved
+              @remove="fileRemoved"
             />
           </div>
         </t-space>
@@ -148,35 +150,34 @@
         <ElementTree />
       </t-tab-panel>
     </t-tabs>
-    <t-dialog v-model:visible="initVisible">
-            <p>This is a dialog</p>
-          </t-dialog>
-    <MonacoModal 
-      :visible="initVisible"
+    <MonacoModal
+      v-model:visible="initVisible"
       :code="initCode"
       title="初始化动作"
       language="javascript"
-      @changeCode="changeInitCode"/>
-    <MonacoModal 
-      :visible="formatVisible"
+      @changeCode="changeInitCode"
+    />
+    <MonacoModal
+      v-model:visible="formatVisible"
       :code="formatCode"
       title="数据格式转换"
       language="javascript"
-      @changeCode="changeformatCode"/>
+      @changeCode="changeformatCode"
+    />
   </div>
 </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,
@@ -188,12 +189,12 @@ const meta2dInfo = ref<Meta2dData | any>();
 
 const screenList = reactive([
   {
-    name: "大屏",
+    name: '大屏',
     width: 1920,
     height: 1080,
   },
   {
-    name: "网页",
+    name: '网页',
     width: 1440,
     height: 1024,
   },
@@ -208,76 +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 (!meta2d.store.data.width) {
+    meta2d.store.data.width = 1920;
+  }
+  if (!meta2d.store.data.height) {
+    meta2d.store.data.height = 1080;
+  }
+  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,
       },
     ];
   }
@@ -291,29 +305,20 @@ const formatCode = ref('');
 
 const clickInit = () => {
   initVisible.value = true;
-}
+};
 
 const clickFormat = () => {
   formatVisible.value = true;
-}
+};
 const changeInitCode = (code: string) => {
-  console.log(code, initCode.value);
-  try {
-          code = JSON.parse(code);
-        } catch (error) {
-          console.log('无法转换成 js 对象', error);
-          return; // return 不修改外界值
-        }
-}
+  initCode.value = code;
+  meta2d.store.data.initJs = code;
+};
 
-const changeformatCode = (code:string) => {
-  try {
-          code = JSON.parse(code);
-        } catch (error) {
-          console.log('无法转换成 js 对象', error);
-          return; // return 不修改外界值
-        }
-}
+const changeformatCode = (code: string) => {
+  formatCode.value = code;
+  meta2d.store.data.socketCbJs = code;
+};
 </script>
 <style lang="postcss" scoped>
 .props {

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,21 +101,47 @@
 
 <script lang="ts" setup>
 import { Meta2d, Options } from '@meta2d/core';
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, watch } from 'vue';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+
 import { registerBasicDiagram } from '@/services/register';
+import axios from 'axios';
+
+const route = useRoute();
+const router = useRouter();
 
 const meta2dOptions: Options = {
   cdn: 'https://assets.le5lecdn.com',
   rule: true,
 };
 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();
   }
 });
 </script>

src/views/components/common/MonacoModal.vue

@@ -1,10 +1,14 @@
 <template>
-  <div>
-  <t-dialog :header="title" className="" :visible="visible" width="900px" :on-confirm="handleOk" :on-cancel="cancel">
-    <!-- <div ref="monacoDom" class="monaco"></div> -->
-    <p>及惹</p>
- </t-dialog>
-</div>
+  <t-dialog
+    :header="title"
+    :visible="visible"
+    width="900px"
+    :on-confirm="handleOk"
+    :on-cancel="cancel"
+    :on-close="cancel"
+  >
+    <div ref="monacoDom" class="monaco"></div>
+  </t-dialog>
 </template>
 
 <script setup lang="ts">
@@ -19,6 +23,7 @@ import {
   watch,
 } from "vue";
 import { monaco } from "./customMonaco";
+
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -68,27 +73,26 @@ const monacoDom: any = ref(null);
 
 watch(
   () => props.visible,
-    (newV) => {
-    console.log("props.visible", props.visible);
-    // if (newV) {
-    //   nextTick(async () => {
-    //     if (!editor) {
-    //       editor = monaco.editor.create(monacoDom.value, {
-    //         theme: curTheme,
-    //         automaticLayout: true,
-    //         language: props.language,
-    //       });
-    //       console.log("进入")
-    //     }
-    //     // 可见状态
-    //     editor.setValue(props.code);
-    //     monaco.editor.setModelLanguage(editor.getModel(), props.language);
-    //     // 格式化
-    //     setTimeout(() => {
-    //       editor.getAction(["editor.action.formatDocument"])._run();
-    //     }, 300);
-    //   });
-    // }
+  (newV) => {
+    // console.log("props.visible", props.visible);
+    if (newV) {
+      nextTick(async () => {
+        if (!editor) {
+          editor = monaco.editor.create(monacoDom.value, {
+            theme: curTheme,
+            automaticLayout: true,
+            language: props.language,
+          });
+        }
+        // 可见状态
+        editor.setValue(props.code);
+        monaco.editor.setModelLanguage(editor.getModel(), props.language);
+        // 格式化
+        setTimeout(() => {
+          editor.getAction(["editor.action.formatDocument"])._run();
+        }, 300);
+      });
+    }
   }
 );
 
@@ -98,12 +102,11 @@ onUnmounted(() => {
 </script>
 
 <style lang="postcss">
-.editorModal {
-  .ant-modal-body {
-    padding: 0;
-    .monaco {
-      height: 400px;
-    }
+.t-dialog__body {
+  /* padding: 0; */
+  overflow: hidden;
+  .monaco {
+    height: 400px;
   }
 }
 </style>