feat(editor,stage): 支持切换runtimeUrl

packages/editor/src/Editor.vue

@@ -128,7 +128,7 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { provide } from 'vue';
+import { provide, watch } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 
@@ -209,6 +209,22 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
+watch(
+  () => props.runtimeUrl,
+  (url) => {
+    if (!url) {
+      return;
+    }
+
+    const stage = editorService.get('stage');
+    if (!stage) {
+      return;
+    }
+
+    stage.reloadIframe(url);
+  },
+);
+
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);

packages/stage/src/StageCore.ts

@@ -236,6 +236,10 @@ export default class StageCore extends EventEmitter {
     this.actionManager?.enableMultiSelect();
   }
 
+  public reloadIframe(url: string) {
+    this.renderer?.reloadIframe(url);
+  }
+
   /**
    * 销毁实例
    */

packages/stage/src/StageRender.ts

@@ -172,14 +172,31 @@ export default class StageRender extends EventEmitter {
     );
   }
 
-  /**
+  public reloadIframe(url: string) {
-   * 销毁实例
+    if (this.renderType !== RenderType.IFRAME) return;
-   */
+
-  public destroy(): void {
+    const el = this.iframe?.parentElement;
+    this.destroyIframe();
+    this.runtimeUrl = url;
+    this.createIframe();
+    this.mount(el as HTMLDivElement);
+    this.runtime = null;
+  }
+
+  public destroyIframe() {
     this.iframe?.removeEventListener('load', this.iframeLoadHandler);
     this.contentWindow = null;
     this.iframe?.remove();
     this.iframe = undefined;
+  }
+
+  /**
+   * 销毁实例
+   */
+  public destroy(): void {
+    this.destroyIframe();
+    // @ts-ignore
+    globalThis.runtime = undefined;
     this.removeAllListeners();
   }