@tmagic/editor 1.5.0-beta.1 → 1.5.0-beta.3

package/dist/style.css

@@ -432,12 +432,13 @@
   width: 100%;
 }
 .m-editor-page-bar-tabs .tmagic-design-button.m-editor-page-bar-switch-type-button {
-  margin-left: 7px;
+  margin-left: 10px;
   position: relative;
   top: 1px;
   border-radius: 3px 3px 0 0;
   border: 1px solid #d9dbdd;
   border-bottom: 1px solid transparent;
+  padding: 5px 10px;
 }
 .m-editor-page-bar-tabs .tmagic-design-button.m-editor-page-bar-switch-type-button.active {
   background-color: #f3f3f3;

package/dist/tmagic-editor.js

@@ -1012,11 +1012,14 @@ const getMiddleTop = (node, parentNode, stage) => {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
   return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
@@ -1131,7 +1134,7 @@ const fixNodePosition = (config, parent, stage) => {
   return {
     ...config.style || {},
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
   };
 };
 const serializeConfig = (config) => serialize(config, {
@@ -1940,7 +1943,7 @@ class Editor extends BaseService {
       historyService.resetState();
     }
     if (node?.id) {
-      this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+      this.get("stage")?.renderer?.runtime?.getApp?.()?.page?.emit(
         "editor:select",
         {
           node,
@@ -2294,7 +2297,7 @@ class Editor extends BaseService {
   }
   async doPaste(config, position = {}) {
     propsService.clearRelateId();
-    const doc = this.get("stage")?.renderer.contentWindow?.document;
+    const doc = this.get("stage")?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -2308,7 +2311,7 @@ class Editor extends BaseService {
     }
     if (!node.style) return config;
     const stage = this.get("stage");
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
     if (doc) {
       const el = getElById()(doc, node.id);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
@@ -3881,7 +3884,7 @@ const useStage = (stageOptions) => {
       }
     }
   );
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
   ]);
@@ -3937,6 +3940,9 @@ const useStage = (stageOptions) => {
       globalThis.localStorage.removeItem(storageKey);
     }
   });
+  onBeforeUnmount(() => {
+    stage.destroy();
+  });
   return stage;
 };
 
@@ -4798,7 +4804,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           "last-values": _ctx.lastValues,
           "init-values": _ctx.initValues,
           values: _ctx.values,
-          prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
+          prop: _ctx.prop,
           onChange: onChangeHandler
         }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
         _ctx.config.fieldConfig ? (openBlock(), createBlock(unref(TMagicTooltip), {
@@ -7385,8 +7391,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicPopover), {
           "popper-class": "page-bar-popover",
           placement: "top",
+          trigger: "hover",
           width: 160,
-          trigger: "hover"
+          "destroy-on-close": true
         }, {
           reference: withCtx(() => [
             createVNode(unref(TMagicIcon), { class: "m-editor-page-list-menu-icon" }, {
@@ -7583,8 +7590,9 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
                 createVNode(unref(TMagicPopover), {
                   "popper-class": "page-bar-popover",
                   placement: "top",
+                  trigger: "hover",
                   width: 160,
-                  trigger: "hover"
+                  "destroy-on-close": true
                 }, {
                   reference: withCtx(() => [
                     createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
@@ -8897,7 +8905,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 key: 0,
                 placement: "right",
                 trigger: "hover",
-                "popper-class": "data-source-list-panel-add-menu"
+                "popper-class": "data-source-list-panel-add-menu",
+                "destroy-on-close": true
               }, {
                 reference: withCtx(() => [
                   createVNode(unref(TMagicButton), {
@@ -9181,8 +9190,8 @@ const usePasteMenu = (menu) => ({
       const stage = services?.editorService?.get("stage");
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-      const initialTop = calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
+      const initialLeft = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+      const initialTop = calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();
@@ -9965,7 +9974,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         globalThis.clearTimeout(timeout);
         timeout = void 0;
       }
-      const doc = stage.value?.renderer.getDocument();
+      const doc = stage.value?.renderer?.getDocument();
       if (doc && stageOptions?.containerHighlightClassName) {
         removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
       }
@@ -10591,7 +10600,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         if (!stage2) return;
         nextTick(() => unWatch());
         stage2.on("select", (el, event) => {
-          const els = stage2.renderer.getElementsFromPoint(event) || [];
+          const els = stage2.renderer?.getElementsFromPoint(event) || [];
           const ids = els.map((el2) => getIdFromEl()(el2)).filter((id) => Boolean(id));
           buttonVisible.value = ids.length > 3;
           filterTextChangeHandler(ids);
@@ -10690,7 +10699,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     watch(stage, (stage2) => {
       if (stage2) {
         stage2.on("dblclick", async (event) => {
-          const el = await stage2.actionManager.getElementFromPoint(event);
+          const el = await stage2.actionManager?.getElementFromPoint(event) || null;
           services?.stageOverlayService.openOverlay(el);
         });
       } else {
@@ -10705,7 +10714,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         subStage.mount(stageOverlay2);
         const { mask, renderer } = subStage;
         const { contentWindow } = renderer;
-        mask.showRule(false);
+        mask?.showRule(false);
         services?.stageOverlayService.updateOverlay();
         contentWindow?.magic.onRuntimeReady({});
       }
@@ -11018,7 +11027,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const config = parseDSL(`(${data})`);
       if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
       e.preventDefault();
-      const doc = stage?.renderer.contentWindow?.document;
+      const doc = stage?.renderer?.contentWindow?.document;
       const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
       let parent = page.value;
       const parentId = getIdFromEl()(parentEl);
@@ -11961,6 +11970,10 @@ class StageOverlay extends BaseService {
     const subStage = this.get("stage");
     const wrapDiv = this.get("wrapDiv");
     subStage?.destroy();
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.remove();
     this.set("stage", null);
     this.set("sourceEl", null);
@@ -11986,7 +11999,7 @@ class StageOverlay extends BaseService {
       autoScrollIntoView: false,
       render: async (stage) => {
         this.copyDocumentElement();
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (["SCRIPT", "STYLE"].includes(element.tagName)) {
@@ -12015,8 +12028,8 @@ class StageOverlay extends BaseService {
   copyDocumentElement() {
     const subStage = this.get("stage");
     const stage = editorService.get("stage");
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
     }
@@ -12034,12 +12047,13 @@ class StageOverlay extends BaseService {
       height: ${sourceEl?.scrollHeight}px;
       background-color: #fff;
     `;
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
     wrapDiv.appendChild(contentEl);
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
     if (await stageOptions?.canSelect?.(contentEl)) {
       const id = getIdFromEl()(contentEl);
@@ -12279,7 +12293,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const getApp = () => {
     const stage = editorService.get("stage");
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
   const updateDataSourceSchema = () => {
     const root = editorService.get("root");

package/dist/tmagic-editor.umd.cjs

@@ -1016,11 +1016,14 @@
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
-    const { scrollTop = 0, wrapperHeight } = stage.mask;
-    const wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
-    const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
-    if (utils.isPage(parentNode)) {
-      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    let wrapperHeightDeal = parentHeight;
+    if (stage.mask && stage.renderer) {
+      const { scrollTop = 0, wrapperHeight } = stage.mask;
+      wrapperHeightDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), wrapperHeight);
+      const scrollTopDeal = utils.calcValueByFontsize(stage.renderer.getDocument(), scrollTop);
+      if (utils.isPage(parentNode)) {
+        return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+      }
     }
     return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
   };
@@ -1135,7 +1138,7 @@
     return {
       ...config.style || {},
       top: getMiddleTop(config, parent, stage),
-      left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
+      left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document)
     };
   };
   const serializeConfig = (config) => serialize(config, {
@@ -1944,7 +1947,7 @@
         historyService.resetState();
       }
       if (node?.id) {
-        this.get("stage")?.renderer.runtime?.getApp?.()?.page?.emit(
+        this.get("stage")?.renderer?.runtime?.getApp?.()?.page?.emit(
           "editor:select",
           {
             node,
@@ -2298,7 +2301,7 @@
     }
     async doPaste(config, position = {}) {
       propsService.clearRelateId();
-      const doc = this.get("stage")?.renderer.contentWindow?.document;
+      const doc = this.get("stage")?.renderer?.contentWindow?.document;
       const pasteConfigs = beforePaste(position, lodashEs.cloneDeep(config), doc);
       return pasteConfigs;
     }
@@ -2312,7 +2315,7 @@
       }
       if (!node.style) return config;
       const stage = this.get("stage");
-      const doc = stage?.renderer.contentWindow?.document;
+      const doc = stage?.renderer?.contentWindow?.document;
       if (doc) {
         const el = utils.getElById()(doc, node.id);
         const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
@@ -3885,7 +3888,7 @@
         }
       }
     );
-    stage.mask.setGuides([
+    stage.mask?.setGuides([
       getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
@@ -3941,6 +3944,9 @@
         globalThis.localStorage.removeItem(storageKey);
       }
     });
+    vue.onBeforeUnmount(() => {
+      stage.destroy();
+    });
     return stage;
   };
 
@@ -4802,7 +4808,7 @@
             "last-values": _ctx.lastValues,
             "init-values": _ctx.initValues,
             values: _ctx.values,
-            prop: `${_ctx.prop}${_ctx.prop ? "." : ""}${_ctx.name}`,
+            prop: _ctx.prop,
             onChange: onChangeHandler
           }, null, 40, ["config", "model", "name", "disabled", "size", "last-values", "init-values", "values", "prop"])),
           _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
@@ -7389,8 +7395,9 @@
           vue.createVNode(vue.unref(design.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
+            trigger: "hover",
             width: 160,
-            trigger: "hover"
+            "destroy-on-close": true
           }, {
             reference: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-list-menu-icon" }, {
@@ -7587,8 +7594,9 @@
                   vue.createVNode(vue.unref(design.TMagicPopover), {
                     "popper-class": "page-bar-popover",
                     placement: "top",
+                    trigger: "hover",
                     width: 160,
-                    trigger: "hover"
+                    "destroy-on-close": true
                   }, {
                     reference: vue.withCtx(() => [
                       vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
@@ -8901,7 +8909,8 @@
                   key: 0,
                   placement: "right",
                   trigger: "hover",
-                  "popper-class": "data-source-list-panel-add-menu"
+                  "popper-class": "data-source-list-panel-add-menu",
+                  "destroy-on-close": true
                 }, {
                   reference: vue.withCtx(() => [
                     vue.createVNode(vue.unref(design.TMagicButton), {
@@ -9185,8 +9194,8 @@
         const stage = services?.editorService?.get("stage");
         const rect = menu.value.$el.getBoundingClientRect();
         const parentRect = stage?.container?.getBoundingClientRect();
-        const initialLeft = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
-        const initialTop = utils.calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
+        const initialLeft = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) / services.uiService.get("zoom");
+        const initialTop = utils.calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) / services.uiService.get("zoom");
         services?.editorService?.paste({ left: initialLeft, top: initialTop });
       } else {
         services?.editorService?.paste();
@@ -9969,7 +9978,7 @@
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        const doc = stage.value?.renderer.getDocument();
+        const doc = stage.value?.renderer?.getDocument();
         if (doc && stageOptions?.containerHighlightClassName) {
           utils.removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
         }
@@ -10595,7 +10604,7 @@
           if (!stage2) return;
           vue.nextTick(() => unWatch());
           stage2.on("select", (el, event) => {
-            const els = stage2.renderer.getElementsFromPoint(event) || [];
+            const els = stage2.renderer?.getElementsFromPoint(event) || [];
             const ids = els.map((el2) => utils.getIdFromEl()(el2)).filter((id) => Boolean(id));
             buttonVisible.value = ids.length > 3;
             filterTextChangeHandler(ids);
@@ -10694,7 +10703,7 @@
       vue.watch(stage, (stage2) => {
         if (stage2) {
           stage2.on("dblclick", async (event) => {
-            const el = await stage2.actionManager.getElementFromPoint(event);
+            const el = await stage2.actionManager?.getElementFromPoint(event) || null;
             services?.stageOverlayService.openOverlay(el);
           });
         } else {
@@ -10709,7 +10718,7 @@
           subStage.mount(stageOverlay2);
           const { mask, renderer } = subStage;
           const { contentWindow } = renderer;
-          mask.showRule(false);
+          mask?.showRule(false);
           services?.stageOverlayService.updateOverlay();
           contentWindow?.magic.onRuntimeReady({});
         }
@@ -11022,7 +11031,7 @@
         const config = parseDSL(`(${data})`);
         if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
         e.preventDefault();
-        const doc = stage?.renderer.contentWindow?.document;
+        const doc = stage?.renderer?.contentWindow?.document;
         const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
         let parent = page.value;
         const parentId = utils.getIdFromEl()(parentEl);
@@ -11965,6 +11974,10 @@
       const subStage = this.get("stage");
       const wrapDiv = this.get("wrapDiv");
       subStage?.destroy();
+      for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+        const child = wrapDiv.children[i];
+        child.remove();
+      }
       wrapDiv.remove();
       this.set("stage", null);
       this.set("sourceEl", null);
@@ -11990,7 +12003,7 @@
         autoScrollIntoView: false,
         render: async (stage) => {
           this.copyDocumentElement();
-          const rootEls = stage.renderer.getDocument()?.body.children;
+          const rootEls = stage.renderer?.getDocument()?.body.children;
           if (rootEls) {
             Array.from(rootEls).forEach((element) => {
               if (["SCRIPT", "STYLE"].includes(element.tagName)) {
@@ -12019,8 +12032,8 @@
     copyDocumentElement() {
       const subStage = this.get("stage");
       const stage = editorService.get("stage");
-      const doc = subStage?.renderer.getDocument();
-      const documentElement = stage?.renderer.getDocument()?.documentElement;
+      const doc = subStage?.renderer?.getDocument();
+      const documentElement = stage?.renderer?.getDocument()?.documentElement;
       if (doc && documentElement) {
         doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
       }
@@ -12038,12 +12051,13 @@
       height: ${sourceEl?.scrollHeight}px;
       background-color: #fff;
     `;
-      Array.from(wrapDiv.children).forEach((element) => {
-        element.remove();
-      });
+      for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+        const child = wrapDiv.children[i];
+        child.remove();
+      }
       wrapDiv.appendChild(contentEl);
       setTimeout(() => {
-        subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+        subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
       });
       if (await stageOptions?.canSelect?.(contentEl)) {
         const id = utils.getIdFromEl()(contentEl);
@@ -12283,7 +12297,7 @@
     };
     const getApp = () => {
       const stage = editorService.get("stage");
-      return stage?.renderer.runtime?.getApp?.();
+      return stage?.renderer?.runtime?.getApp?.();
     };
     const updateDataSourceSchema = () => {
       const root = editorService.get("root");

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0-beta.3",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -55,8 +55,8 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/table": "1.5.0-beta.1",
-    "@tmagic/dep": "1.5.0-beta.1"
+    "@tmagic/dep": "1.5.0-beta.3",
+    "@tmagic/table": "1.5.0-beta.3"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -77,12 +77,12 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": "^3.4.35",
-    "@tmagic/core": "1.5.0-beta.1",
-    "@tmagic/design": "1.5.0-beta.1",
-    "@tmagic/form": "1.5.0-beta.1",
-    "@tmagic/schema": "1.5.0-beta.1",
-    "@tmagic/stage": "1.5.0-beta.1",
-    "@tmagic/utils": "1.5.0-beta.1"
+    "@tmagic/form": "1.5.0-beta.3",
+    "@tmagic/schema": "1.5.0-beta.3",
+    "@tmagic/core": "1.5.0-beta.3",
+    "@tmagic/design": "1.5.0-beta.3",
+    "@tmagic/stage": "1.5.0-beta.3",
+    "@tmagic/utils": "1.5.0-beta.3"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -141,7 +141,15 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type {
+  EventBus,
+  FrameworkSlots,
+  PropsPanelSlots,
+  Services,
+  SidebarSlots,
+  StageOptions,
+  WorkspaceSlots,
+} from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -186,7 +194,7 @@ initServiceState(props, services);
 keybindingService.register(keybindingConfig);
 keybindingService.registerEl('global');
 
-const stageOptions = {
+const stageOptions: StageOptions = {
   runtimeUrl: props.runtimeUrl,
   autoScrollIntoView: props.autoScrollIntoView,
   render: props.render,

package/src/editorProps.ts

@@ -82,7 +82,7 @@ export interface EditorProps {
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
   updateDragEl?: UpdateDragEl;
   /** 用于设置画布上的dom是否可以被选中 */

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -22,7 +22,7 @@
       :last-values="lastValues"
       :init-values="initValues"
       :values="values"
-      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      :prop="prop"
       @change="onChangeHandler"
     ></component>
 

package/src/hooks/use-stage.ts

@@ -1,4 +1,4 @@
-import { computed, watch } from 'vue';
+import { computed, onBeforeUnmount, watch } from 'vue';
 
 import type { MNode } from '@tmagic/schema';
 import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
@@ -62,7 +62,7 @@ export const useStage = (stageOptions: StageOptions) => {
     },
   );
 
-  stage.mask.setGuides([
+  stage.mask?.setGuides([
     getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
     getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
   ]);
@@ -131,5 +131,9 @@ export const useStage = (stageOptions: StageOptions) => {
     }
   });
 
+  onBeforeUnmount(() => {
+    stage.destroy();
+  });
+
   return stage;
 };

package/src/initService.ts

@@ -242,7 +242,7 @@ export const initServiceEvents = (
 
   const getApp = () => {
     const stage = editorService.get('stage');
-    return stage?.renderer.runtime?.getApp?.();
+    return stage?.renderer?.runtime?.getApp?.();
   };
 
   const updateDataSourceSchema = () => {

package/src/layouts/page-bar/PageBar.vue

@@ -24,7 +24,13 @@
           </slot>
         </div>
 
-        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <TMagicPopover
+          popper-class="page-bar-popover"
+          placement="top"
+          trigger="hover"
+          :width="160"
+          :destroy-on-close="true"
+        >
           <div>
             <slot name="page-bar-popover" :page="item">
               <ToolButton

package/src/layouts/page-bar/PageList.vue

@@ -4,7 +4,13 @@
     id="m-editor-page-bar-list-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
   >
-    <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+    <TMagicPopover
+      popper-class="page-bar-popover"
+      placement="top"
+      trigger="hover"
+      :width="160"
+      :destroy-on-close="true"
+    >
       <div>
         <slot name="page-list-popover" :list="list">
           <ToolButton

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -111,7 +111,7 @@ const dragendHandler = () => {
     globalThis.clearTimeout(timeout);
     timeout = undefined;
   }
-  const doc = stage.value?.renderer.getDocument();
+  const doc = stage.value?.renderer?.getDocument();
   if (doc && stageOptions?.containerHighlightClassName) {
     removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
   }

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,7 +2,13 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right" trigger="hover" popper-class="data-source-list-panel-add-menu">
+      <TMagicPopover
+        v-if="editable"
+        placement="right"
+        trigger="hover"
+        popper-class="data-source-list-panel-add-menu"
+        :destroy-on-close="true"
+      >
         <template #reference>
           <TMagicButton type="primary" size="small">新增</TMagicButton>
         </template>

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -61,7 +61,7 @@ const unWatch = watch(
     nextTick(() => unWatch());
 
     stage.on('select', (el: HTMLElement, event: MouseEvent) => {
-      const els = stage.renderer.getElementsFromPoint(event) || [];
+      const els = stage.renderer?.getElementsFromPoint(event) || [];
       const ids = els.map((el) => getIdFromEl()(el)).filter((id) => Boolean(id)) as string[];
 
       buttonVisible.value = ids.length > 3;

package/src/layouts/workspace/viewer/Stage.vue

@@ -196,7 +196,7 @@ const dropHandler = async (e: DragEvent) => {
 
   e.preventDefault();
 
-  const doc = stage?.renderer.contentWindow?.document;
+  const doc = stage?.renderer?.contentWindow?.document;
   const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
 
   let parent: MContainer | undefined | null = page.value;
@@ -209,7 +209,7 @@ const dropHandler = async (e: DragEvent) => {
     const layout = await services?.editorService.getLayout(parent);
 
     const containerRect = stageContainer.value.getBoundingClientRect();
-    const { scrollTop, scrollLeft } = stage.mask;
+    const { scrollTop, scrollLeft } = stage.mask!;
     const { style = {} } = config.data;
 
     let top = 0;

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -34,7 +34,7 @@ const style = computed(() => ({
 watch(stage, (stage) => {
   if (stage) {
     stage.on('dblclick', async (event: MouseEvent) => {
-      const el = await stage.actionManager.getElementFromPoint(event);
+      const el = (await stage.actionManager?.getElementFromPoint(event)) || null;
       services?.stageOverlayService.openOverlay(el);
     });
   } else {
@@ -53,8 +53,8 @@ watch(stageOverlay, (stageOverlay) => {
 
     const { mask, renderer } = subStage;
 
-    const { contentWindow } = renderer;
-    mask.showRule(false);
+    const { contentWindow } = renderer!;
+    mask?.showRule(false);
 
     services?.stageOverlayService.updateOverlay();
 

package/src/services/editor.ts

@@ -267,7 +267,7 @@ class Editor extends BaseService {
 
     if (node?.id) {
       this.get('stage')
-        ?.renderer.runtime?.getApp?.()
+        ?.renderer?.runtime?.getApp?.()
         ?.page?.emit(
           'editor:select',
           {
@@ -737,7 +737,7 @@ class Editor extends BaseService {
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const doc = this.get('stage')?.renderer.contentWindow?.document;
+    const doc = this.get('stage')?.renderer?.contentWindow?.document;
     const pasteConfigs = beforePaste(position, cloneDeep(config), doc);
     return pasteConfigs;
   }
@@ -756,7 +756,7 @@ class Editor extends BaseService {
     if (!node.style) return config;
 
     const stage = this.get('stage');
-    const doc = stage?.renderer.contentWindow?.document;
+    const doc = stage?.renderer?.contentWindow?.document;
 
     if (doc) {
       const el = getElById()(doc, node.id);

package/src/services/stageOverlay.ts

@@ -64,6 +64,12 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const wrapDiv = this.get('wrapDiv');
     subStage?.destroy();
+
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.remove();
 
     this.set('stage', null);
@@ -97,7 +103,7 @@ class StageOverlay extends BaseService {
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 
-        const rootEls = stage.renderer.getDocument()?.body.children;
+        const rootEls = stage.renderer?.getDocument()?.body.children;
         if (rootEls) {
           Array.from(rootEls).forEach((element) => {
             if (['SCRIPT', 'STYLE'].includes(element.tagName)) {
@@ -135,8 +141,8 @@ class StageOverlay extends BaseService {
     const subStage = this.get('stage');
     const stage = editorService.get('stage');
 
-    const doc = subStage?.renderer.getDocument();
-    const documentElement = stage?.renderer.getDocument()?.documentElement;
+    const doc = subStage?.renderer?.getDocument();
+    const documentElement = stage?.renderer?.getDocument()?.documentElement;
 
     if (doc && documentElement) {
       doc.replaceChild(documentElement.cloneNode(true), doc.documentElement);
@@ -160,13 +166,15 @@ class StageOverlay extends BaseService {
       background-color: #fff;
     `;
 
-    Array.from(wrapDiv.children).forEach((element) => {
-      element.remove();
-    });
+    for (let i = 0, l = wrapDiv.children.length; i < l; i++) {
+      const child = wrapDiv.children[i];
+      child.remove();
+    }
+
     wrapDiv.appendChild(contentEl);
 
     setTimeout(() => {
-      subStage?.renderer.contentWindow?.magic.onPageElUpdate(wrapDiv);
+      subStage?.renderer?.contentWindow?.magic.onPageElUpdate(wrapDiv);
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {

package/src/theme/page-bar.scss

@@ -5,12 +5,13 @@
   width: 100%;
 
   .tmagic-design-button.m-editor-page-bar-switch-type-button {
-    margin-left: 7px;
+    margin-left: 10px;
     position: relative;
     top: 1px;
     border-radius: 3px 3px 0 0;
     border: 1px solid $--border-color;
     border-bottom: 1px solid transparent;
+    padding: 5px 10px;
 
     &.active {
       background-color: #f3f3f3;

package/src/type.ts

@@ -145,7 +145,7 @@ export interface StageOptions {
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
   disabledDragStart?: boolean;
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;

package/src/utils/content-menu.ts

@@ -47,10 +47,10 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
       const initialLeft =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
         services.uiService.get('zoom');
       const initialTop =
-        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        calcValueByFontsize(stage?.renderer?.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
         services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {

package/src/utils/editor.ts

@@ -109,12 +109,16 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
   }
 
   const { height: parentHeight } = parentNode.style;
-  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
-  const { scrollTop = 0, wrapperHeight } = stage.mask;
-  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
-  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
-  if (isPage(parentNode)) {
-    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+
+  let wrapperHeightDeal = parentHeight;
+  if (stage.mask && stage.renderer) {
+    // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
+    const { scrollTop = 0, wrapperHeight } = stage.mask;
+    wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
+    const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
+    if (isPage(parentNode)) {
+      return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+    }
   }
 
   // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
@@ -263,7 +267,7 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
   return {
     ...(config.style || {}),
     top: getMiddleTop(config, parent, stage),
-    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+    left: fixNodeLeft(config, parent, stage?.renderer?.contentWindow?.document),
   };
 };
 

package/types/index.d.ts

@@ -916,7 +916,7 @@ interface StageOptions {
     containerHighlightDuration?: number;
     containerHighlightType?: ContainerHighlightType;
     disabledDragStart?: boolean;
-    render?: (stage: StageCore__default) => HTMLDivElement | Promise<HTMLDivElement>;
+    render?: (stage: StageCore__default) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
     moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
     canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
     isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
@@ -2694,7 +2694,7 @@ interface EditorProps {
     /** 禁用属性配置面板右下角显示源码的按钮 */
     disabledShowSrc?: boolean;
     /** 中间工作区域中画布渲染的内容 */
-    render?: (stage: StageCore__default) => HTMLDivElement | Promise<HTMLDivElement>;
+    render?: (stage: StageCore__default) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
     /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
     updateDragEl?: UpdateDragEl;
     /** 用于设置画布上的dom是否可以被选中 */