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

package/dist/tmagic-editor.umd.cjs

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('@tmagic/design'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/table'), require('@tmagic/utils'), require('moveable'), require('@tmagic/dep'), require('events'), require('gesto'), require('sortablejs'), require('@tmagic/stage'), require('@tmagic/core'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', '@tmagic/design', 'emmet-monaco-es', 'monaco-editor', '@tmagic/form', '@tmagic/schema', '@tmagic/table', '@tmagic/utils', 'moveable', '@tmagic/dep', 'events', 'gesto', 'sortablejs', '@tmagic/stage', '@tmagic/core', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.design, global.emmetMonacoEs, global.monaco, global.form, global.schema, global.table, global.utils, global.VanillaMoveable, global.dep, global.events, global.Gesto, global.Sortable, global.StageCore, global.core, global.KeyController));
-})(this, (function (exports, vue, iconsVue, lodashEs, serialize, design, emmetMonacoEs, monaco, form, schema, table, utils, VanillaMoveable, dep, events, Gesto, Sortable, StageCore, core, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tmagic/design'), require('@tmagic/form'), require('@tmagic/table'), require('vue'), require('@element-plus/icons-vue'), require('lodash-es'), require('serialize-javascript'), require('emmet-monaco-es'), require('monaco-editor'), require('@tmagic/core'), require('@tmagic/utils'), require('moveable'), require('@tmagic/stage'), require('events'), require('gesto'), require('sortablejs'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tmagic/design', '@tmagic/form', '@tmagic/table', 'vue', '@element-plus/icons-vue', 'lodash-es', 'serialize-javascript', 'emmet-monaco-es', 'monaco-editor', '@tmagic/core', '@tmagic/utils', 'moveable', '@tmagic/stage', 'events', 'gesto', 'sortablejs', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.designPlugin, global.formPlugin, global.tablePlugin, global.Vue, global.iconsVue, global.lodashEs, global.serialize, global.emmetMonacoEs, global.monaco, global.core, global.utils, global.VanillaMoveable, global.StageCore, global.events, global.Gesto, global.Sortable, global.KeyController));
+})(this, (function (exports, designPlugin, formPlugin, tablePlugin, vue, iconsVue, lodashEs, serialize, emmetMonacoEs, monaco, core, utils, VanillaMoveable, StageCore, events, Gesto, Sortable, KeyController) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -35,7 +35,7 @@
     setup(__props) {
       const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
       return (_ctx, _cache) => {
-        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicIcon), {
           key: 0,
           class: "magic-editor-icon"
         }, {
@@ -43,7 +43,7 @@
             vue.createVNode(vue.unref(iconsVue.Edit))
           ]),
           _: 1
-        })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicIcon), {
           key: 1,
           class: "magic-editor-icon"
         }, {
@@ -54,7 +54,7 @@
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
           key: 2,
           class: vue.normalizeClass(["magic-editor-icon", _ctx.icon])
-        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicIcon), {
           key: 3,
           class: "magic-editor-icon"
         }, {
@@ -68,10 +68,10 @@
   });
 
   let $TMAGIC_EDITOR = {};
-  const setConfig = (option) => {
+  const setEditorConfig = (option) => {
     $TMAGIC_EDITOR = option;
   };
-  const getConfig = (key) => $TMAGIC_EDITOR[key];
+  const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
@@ -119,14 +119,14 @@
         }
         return value;
       };
-      const parse = (v, language) => {
+      const parseCode = (v, language) => {
         if (typeof v !== "string") {
           return v;
         }
         if (language === "json") {
           return JSON.parse(v);
         }
-        return getConfig("parseDSL")(v);
+        return getEditorConfig("parseDSL")(v);
       };
       let vsEditor = null;
       let vsDiffEditor = null;
@@ -174,7 +174,7 @@
             e.stopPropagation();
             const newValue = getEditorValue();
             values.value = newValue;
-            emit("save", props.parse ? parse(newValue, props.language) : newValue);
+            emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
           }
         });
         if (props.type !== "diff" && props.autoSave) {
@@ -182,7 +182,7 @@
             const newValue = getEditorValue();
             if (values.value !== newValue) {
               values.value = newValue;
-              emit("save", props.parse ? parse(newValue, props.language) : newValue);
+              emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
             }
           });
         }
@@ -245,7 +245,7 @@
               class: vue.normalizeClass(`magic-code-editor-wrapper${fullScreen.value ? " full-screen" : ""}`),
               style: vue.normalizeStyle(!fullScreen.value && _ctx.height ? `height: ${_ctx.height}` : "100%")
             }, [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 class: "magic-code-editor-full-screen-icon",
                 circle: "",
                 size: "small",
@@ -368,7 +368,7 @@
       const changeHandler = (v) => {
         if (!props.name || !props.model) return;
         try {
-          const parseDSL = getConfig("parseDSL");
+          const parseDSL = getEditorConfig("parseDSL");
           props.model[props.name] = parseDSL(`(${v[props.name]})`);
           emit("change", props.model[props.name]);
         } catch (e) {
@@ -414,7 +414,7 @@
         enableToggleMode: false,
         expandAll: true,
         title: (mForm, { model, index }) => {
-          if (model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD) {
+          if (model.codeType === core.HookCodeType.DATA_SOURCE_METHOD) {
             if (Array.isArray(model.codeId)) {
               if (model.codeId.length < 2) {
                 return index;
@@ -435,12 +435,12 @@
                 name: "codeType",
                 span: 6,
                 options: [
-                  { value: schema.HookCodeType.CODE, text: "代码块" },
-                  { value: schema.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
+                  { value: core.HookCodeType.CODE, text: "代码块" },
+                  { value: core.HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
                 ],
                 defaultValue: "code",
                 onChange: (mForm, v, { model }) => {
-                  if (v === schema.HookCodeType.DATA_SOURCE_METHOD) {
+                  if (v === core.HookCodeType.DATA_SOURCE_METHOD) {
                     model.codeId = [];
                   } else {
                     model.codeId = "";
@@ -453,7 +453,7 @@
                 name: "codeId",
                 span: 18,
                 labelWidth: 0,
-                display: (mForm, { model }) => model.codeType !== schema.HookCodeType.DATA_SOURCE_METHOD,
+                display: (mForm, { model }) => model.codeType !== core.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !services?.codeBlockService.getEditStatus()
               },
               {
@@ -461,7 +461,7 @@
                 name: "codeId",
                 span: 18,
                 labelWidth: 0,
-                display: (mForm, { model }) => model.codeType === schema.HookCodeType.DATA_SOURCE_METHOD,
+                display: (mForm, { model }) => model.codeType === core.HookCodeType.DATA_SOURCE_METHOD,
                 notEditable: () => !services?.dataSourceService.get("editable")
               }
             ]
@@ -473,7 +473,7 @@
         (value) => {
           if (lodashEs.isEmpty(value)) {
             props.model[props.name] = {
-              hookType: schema.HookType.CODE,
+              hookType: core.HookType.CODE,
               hookData: []
             };
           }
@@ -489,9 +489,9 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
         }, [
-          vue.createVNode(vue.unref(design.TMagicCard), null, {
+          vue.createVNode(vue.unref(designPlugin.TMagicCard), null, {
             default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MContainer), {
+              vue.createVNode(vue.unref(formPlugin.MContainer), {
                 config: codeConfig.value,
                 size: _ctx.size,
                 prop: _ctx.prop,
@@ -840,7 +840,7 @@
     items: [
       {
         type: "display-conds",
-        name: schema.NODE_CONDS_KEY,
+        name: core.NODE_CONDS_KEY,
         titlePrefix: "条件组",
         defaultValue: []
       }
@@ -998,7 +998,6 @@
     return pageName;
   };
   const generatePageNameByApp = (app, type) => generatePageName(getPageNameList(type === "page" ? getPageList(app) : getPageFragmentList(app)), type);
-  const isFixed = (node) => node.style?.position === "fixed";
   const getNodeIndex = (id, parent) => {
     const items = parent?.items || [];
     return items.findIndex((item) => `${item.id}` === `${id}`);
@@ -1016,11 +1015,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,22 +1137,13 @@
     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, {
     space: 2,
     unsafe: true
   }).replace(/"(\w+)":\s/g, "$1: ");
-  const traverseNode = (node, cb, parents = []) => {
-    cb(node, parents);
-    if (Array.isArray(node.items) && node.items.length) {
-      parents.push(node);
-      node.items.forEach((item) => {
-        traverseNode(item, cb, [...parents]);
-      });
-    }
-  };
   const moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
     sourceIndices.sort((a, b) => a - b);
     for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -1472,10 +1465,10 @@
     replaceRelateId(originConfigs, targetConfigs, collectorOptions) {
       const relateIdMap = this.getRelateIdMap();
       if (Object.keys(relateIdMap).length === 0) return;
-      const target = new dep.Target({
+      const target = new core.Target({
         ...collectorOptions
       });
-      const coperWatcher = new dep.Watcher();
+      const coperWatcher = new core.Watcher();
       coperWatcher.addTarget(target);
       coperWatcher.collect(originConfigs, {}, true, collectorOptions.type);
       originConfigs.forEach((config) => {
@@ -1707,7 +1700,7 @@
       if (item === null) return null;
       switch (protocol) {
         case "object" /* OBJECT */:
-          return getConfig("parseDSL")(`(${item})`);
+          return getEditorConfig("parseDSL")(`(${item})`);
         case "json" /* JSON */:
           return JSON.parse(item);
         case "number" /* NUMBER */:
@@ -1919,7 +1912,7 @@
      * 只有容器拥有布局
      */
     async getLayout(parent, node) {
-      if (node && typeof node !== "function" && isFixed(node)) return Layout.FIXED;
+      if (node && typeof node !== "function" && StageCore.isFixed(node.style || {})) return Layout.FIXED;
       if (parent.layout) {
         return parent.layout;
       }
@@ -1944,7 +1937,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,
@@ -1959,7 +1952,7 @@
     }
     async selectNextNode() {
       const node = vue.toRaw(this.get("node"));
-      if (!node || utils.isPage(node) || node.type === schema.NodeType.ROOT) return node;
+      if (!node || utils.isPage(node) || node.type === core.NodeType.ROOT) return node;
       const parent = vue.toRaw(this.getParentById(node.id));
       if (!parent) return node;
       const index = getNodeIndex(node.id, parent);
@@ -2020,7 +2013,7 @@
       const curNode = this.get("node");
       const stage = this.get("stage");
       if (!curNode) throw new Error("当前选中节点为空");
-      if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
+      if ((parent.type === core.NodeType.ROOT || curNode?.type === core.NodeType.ROOT) && !(utils.isPage(node) || utils.isPageFragment(node))) {
         throw new Error("app下不能添加组件");
       }
       if (parent.id !== curNode.id && !(utils.isPage(node) || utils.isPageFragment(node))) {
@@ -2160,7 +2153,7 @@
         }
       });
       if (!newConfig.type) throw new Error("配置缺少type值");
-      if (newConfig.type === schema.NodeType.ROOT) {
+      if (newConfig.type === core.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
@@ -2198,7 +2191,7 @@
     async update(config) {
       const nodes = Array.isArray(config) ? config : [config];
       const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
-      if (newNodes[0]?.type !== schema.NodeType.ROOT) {
+      if (newNodes[0]?.type !== core.NodeType.ROOT) {
         this.pushHistoryState();
       }
       this.emit("update", newNodes);
@@ -2249,10 +2242,10 @@
     copyWithRelated(config, collectorOptions) {
       const copyNodes = Array.isArray(config) ? config : [config];
       if (collectorOptions && typeof collectorOptions.isTarget === "function") {
-        const customTarget = new dep.Target({
+        const customTarget = new core.Target({
           ...collectorOptions
         });
-        const coperWatcher = new dep.Watcher();
+        const coperWatcher = new core.Watcher();
         coperWatcher.addTarget(customTarget);
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
@@ -2286,7 +2279,7 @@
       let parent = null;
       if (config.length === 1 && config[0].id === node?.id) {
         parent = this.get("parent");
-        if (parent?.type === schema.NodeType.ROOT) {
+        if (parent?.type === core.NodeType.ROOT) {
           parent = this.get("page");
         }
       }
@@ -2298,7 +2291,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 +2305,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;
@@ -2587,9 +2580,9 @@
     async toggleFixedPosition(dist, src, root) {
       const newConfig = lodashEs.cloneDeep(dist);
       if (!utils.isPop(src) && newConfig.style?.position) {
-        if (isFixed(newConfig) && !isFixed(src)) {
+        if (StageCore.isFixed(newConfig.style) && !StageCore.isFixed(src.style || {})) {
           newConfig.style = change2Fixed(newConfig, root);
-        } else if (!isFixed(newConfig) && isFixed(src)) {
+        } else if (!StageCore.isFixed(newConfig.style) && StageCore.isFixed(src.style || {})) {
           newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
         }
       }
@@ -2651,7 +2644,7 @@
       }
       const root = editorService.get("root");
       if ((utils.isPage(pasteConfig) || utils.isPageFragment(pasteConfig)) && root) {
-        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? schema.NodeType.PAGE : schema.NodeType.PAGE_FRAGMENT);
+        pasteConfig.name = generatePageNameByApp(root, utils.isPage(pasteConfig) ? core.NodeType.PAGE : core.NodeType.PAGE_FRAGMENT);
       }
       return pasteConfig;
     });
@@ -3189,7 +3182,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const form$1 = vue.ref();
+      const form = vue.ref();
       const getFormConfig = (items = []) => [
         {
           type: "fieldset",
@@ -3212,16 +3205,16 @@
       );
       const onParamsChangeHandler = async () => {
         try {
-          const value = await form$1.value?.submitForm(true);
+          const value = await form.value?.submitForm(true);
           emit("change", value);
         } catch (e) {
           error(e);
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(form.MForm), {
+        return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MForm), {
           ref_key: "form",
-          ref: form$1,
+          ref: form,
           config: codeParamsConfig.value,
           "init-values": _ctx.model,
           disabled: _ctx.disabled,
@@ -3234,7 +3227,7 @@
   });
 
   const _hoisted_1$u = { class: "m-fields-code-select-col" };
-  const _hoisted_2$j = { class: "code-select-container" };
+  const _hoisted_2$g = { class: "code-select-container" };
   const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
@@ -3258,7 +3251,7 @@
       const eventBus = vue.inject("eventBus");
       const emit = __emit;
       const props = __props;
-      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
       const hasCodeBlockSidePanel = vue.computed(
         () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK)
       );
@@ -3299,7 +3292,7 @@
         onChange: (formState, codeId, { model }) => {
           paramsConfig.value = getParamItemsConfig(codeId);
           if (paramsConfig.value.length) {
-            model.params = form.createValues(formState, paramsConfig.value, {}, model.params);
+            model.params = formPlugin.createValues(formState, paramsConfig.value, {}, model.params);
           } else {
             model.params = {};
           }
@@ -3315,15 +3308,15 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
-          vue.createElementVNode("div", _hoisted_2$j, [
-            vue.createVNode(vue.unref(form.MContainer), {
+          vue.createElementVNode("div", _hoisted_2$g, [
+            vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: selectConfig,
               model: _ctx.model,
               size: _ctx.size,
               onChange: onParamsChangeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            _ctx.model[_ctx.name] && hasCodeBlockSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
               key: 0,
               class: "m-fields-select-action-button",
               size: _ctx.size,
@@ -3371,7 +3364,7 @@
       const emit = __emit;
       const { dataSourceService } = vue.inject("services") || {};
       const props = __props;
-      const optionComponent = design.getConfig("components")?.option;
+      const optionComponent = designPlugin.getDesignConfig("components")?.option;
       const options = vue.computed(() => {
         const [id, ...fieldNames] = [...props.config.parentFields || [], ...props.model.field];
         const ds = dataSourceService?.getDataSourceById(id);
@@ -3403,7 +3396,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicSelect), {
+        return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicSelect), {
           modelValue: _ctx.model[_ctx.name],
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
           clearable: "",
@@ -3458,7 +3451,7 @@
       const props = __props;
       const target = vue.ref();
       const titleEl = vue.ref();
-      const zIndex = design.useZIndex();
+      const zIndex = designPlugin.useZIndex();
       const curZIndex = vue.ref(0);
       const titleHeight = vue.ref(0);
       const bodyHeight = vue.computed(() => {
@@ -3585,7 +3578,7 @@
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
               ]),
               vue.createElementVNode("div", null, [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   link: "",
                   size: "small",
                   onClick: closeHandler
@@ -3615,7 +3608,7 @@
     const codeBlockEditor = vue.ref();
     const createCodeBlock = async () => {
       if (!codeBlockService) {
-        design.tMagicMessage.error("新增代码块失败");
+        designPlugin.tMagicMessage.error("新增代码块失败");
         return;
       }
       codeConfig.value = {
@@ -3632,7 +3625,7 @@
     const editCode = async (id) => {
       const codeBlock = await codeBlockService?.getCodeContentById(id);
       if (!codeBlock) {
-        design.tMagicMessage.error("获取代码块内容失败");
+        designPlugin.tMagicMessage.error("获取代码块内容失败");
         return;
       }
       let codeContent = codeBlock.content;
@@ -3690,7 +3683,7 @@
       editCode: async (model, methodName) => {
         const method = model.methods?.find((method2) => method2.name === methodName);
         if (!method) {
-          design.tMagicMessage.error("获取数据源方法失败");
+          designPlugin.tMagicMessage.error("获取数据源方法失败");
           return;
         }
         let codeContent = method.content || `({ params, dataSource, app }) => {
@@ -3722,7 +3715,7 @@
           dataSource.value.methods = [];
         }
         if (values.content) {
-          const parseDSL = getConfig("parseDSL");
+          const parseDSL = getEditorConfig("parseDSL");
           if (typeof values.content === "string") {
             values.content = parseDSL(values.content);
           }
@@ -3885,7 +3878,7 @@
         }
       }
     );
-    stage.mask.setGuides([
+    stage.mask?.setGuides([
       getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
       getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
     ]);
@@ -4076,7 +4069,7 @@
     const filter = (text) => {
       if (!nodeData.value.length) return;
       nodeData.value.forEach((node) => {
-        traverseNode(node, (node2, parents) => {
+        utils.traverseNode(node, (node2, parents) => {
           if (!nodeStatusMap.value) return;
           const visible = filterIsMatch(text, node2);
           if (visible && parents.length) {
@@ -4154,7 +4147,7 @@
   const createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
     const map = /* @__PURE__ */ new Map();
     nodeData.forEach(
-      (node) => traverseNode(node, (node2) => {
+      (node) => utils.traverseNode(node, (node2) => {
         map.set(
           node2.id,
           initialLayerNodeStatus?.get(node2.id) || {
@@ -4186,7 +4179,7 @@
   };
 
   const _hoisted_1$t = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$f = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
@@ -4277,7 +4270,7 @@
               text: "删除",
               buttonType: "danger",
               handler: async (row, index) => {
-                await design.tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, "提示");
+                await designPlugin.tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, "提示");
                 props.model[props.name].splice(index, 1);
                 emit("change", props.model[props.name]);
               }
@@ -4429,7 +4422,7 @@
           addFromJsonDialogVisible.value = false;
           emit("change", props.model[props.name]);
         } catch (e) {
-          design.tMagicMessage.error(e.message);
+          designPlugin.tMagicMessage.error(e.message);
         }
       };
       const addDialogVisible = vue.useModel(__props, "visible");
@@ -4439,32 +4432,32 @@
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-          vue.createVNode(vue.unref(table.MagicTable), {
+          vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$i, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
+          vue.createElementVNode("div", _hoisted_2$f, [
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
               plain: "",
               onClick: _cache[0] || (_cache[0] = ($event) => newFromJsonHandler())
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                 vue.createTextVNode("快速添加")
-              ]),
+              ])),
               _: 1
             }, 8, ["disabled"]),
-            vue.createVNode(vue.unref(design.TMagicButton), {
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
               disabled: _ctx.disabled,
               plain: "",
               onClick: _cache[1] || (_cache[1] = ($event) => newHandler())
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                 vue.createTextVNode("添加")
-              ]),
+              ])),
               _: 1
             }, 8, ["disabled"])
           ]),
@@ -4479,7 +4472,7 @@
             position: vue.unref(boxPosition)
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MFormBox), {
+              vue.createVNode(vue.unref(formPlugin.MFormBox), {
                 "label-width": "80px",
                 title: fieldTitle.value,
                 config: dataSourceFieldsConfig,
@@ -4502,7 +4495,7 @@
             position: vue.unref(boxPosition)
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MFormBox), {
+              vue.createVNode(vue.unref(formPlugin.MFormBox), {
                 config: jsonFromConfig,
                 values: jsonFromValues.value,
                 disabled: _ctx.disabled,
@@ -4535,13 +4528,13 @@
       const props = __props;
       const emit = __emit;
       const modelValue = vue.useModel(__props, "modelValue");
-      const optionComponent = design.getConfig("components")?.option;
+      const optionComponent = designPlugin.getDesignConfig("components")?.option;
       const services = vue.inject("services");
       const mForm = vue.inject("mForm");
       const eventBus = vue.inject("eventBus");
       const dataSources = vue.computed(() => services?.dataSourceService.get("dataSources") || []);
       const valueIsKey = vue.computed(() => props.value === "key");
-      const notEditable = vue.computed(() => form.filterFunction(mForm, props.notEditable, props));
+      const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.notEditable, props));
       const dataSourcesOptions = vue.computed(
         () => dataSources.value.map((ds) => ({
           text: ds.title || ds.id,
@@ -4600,7 +4593,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createVNode(vue.unref(design.TMagicSelect), {
+            vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
               clearable: "",
               filterable: "",
@@ -4630,7 +4623,7 @@
               ]),
               _: 1
             }, 8, ["model-value", "size", "disabled"]),
-            vue.createVNode(vue.unref(design.TMagicCascader), {
+            vue.createVNode(vue.unref(designPlugin.TMagicCascader), {
               "model-value": selectFieldsId.value,
               clearable: "",
               filterable: "",
@@ -4642,7 +4635,7 @@
               },
               onChange: fieldChangeHandler
             }, null, 8, ["model-value", "size", "disabled", "options", "props"])
-          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCascader), {
+          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicCascader), {
             key: 1,
             clearable: "",
             filterable: "",
@@ -4655,12 +4648,12 @@
             },
             onChange: onChangeHandler
           }, null, 8, ["model-value", "disabled", "size", "options", "props"])),
-          selectDataSourceId.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          selectDataSourceId.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 2,
             content: notEditable.value ? "查看" : "编辑"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 class: "m-fields-select-action-button",
                 size: _ctx.size,
                 onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
@@ -4777,7 +4770,7 @@
         if (!keys.length || field?.type && (field.type === "any" || dataSourceFieldType.includes("any") || dataSourceFieldType.includes(field.type))) {
           emit("change", value);
         } else {
-          design.tMagicMessage.error(`请选择类型为${dataSourceFieldType.join("或")}的字段`);
+          designPlugin.tMagicMessage.error(`请选择类型为${dataSourceFieldType.join("或")}的字段`);
           emit("change", [dsId]);
         }
       };
@@ -4802,16 +4795,16 @@
             "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), {
+          _ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 2,
             disabled: showDataSourceFieldSelect.value,
             content: "选择数据源"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 style: { "margin-left": "5px" },
                 type: showDataSourceFieldSelect.value ? "primary" : "default",
                 size: _ctx.size,
@@ -4831,8 +4824,8 @@
   });
 
   const _hoisted_1$q = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-  const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-  const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
+  const _hoisted_2$e = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$4 = { class: "el-input__inner t-input__inner" };
   const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
@@ -5009,7 +5002,7 @@
         changeHandler(state.value);
       };
       return (_ctx, _cache) => {
-        return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
+        return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(designPlugin.getDesignConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
           {
             key: 0,
             class: "tmagic-design-auto-complete",
@@ -5018,7 +5011,7 @@
             modelValue: state.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
           },
-          vue.unref(design.getConfig)("components")?.autocomplete.props({
+          vue.unref(designPlugin.getDesignConfig)("components")?.autocomplete.props({
             disabled: _ctx.disabled,
             size: _ctx.size,
             fetchSuggestions: querySearch,
@@ -5038,7 +5031,7 @@
           default: vue.withCtx(({ item }) => [
             vue.createElementVNode("div", _hoisted_1$q, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$e, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -5050,14 +5043,14 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$8, [
+            vue.createElementVNode("div", _hoisted_3$4, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: index,
                     style: { "margin-right": "2px" }
                   }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
-                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
+                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTag), {
                     key: index,
                     size: _ctx.size
                   }, {
@@ -5080,9 +5073,9 @@
   });
 
   const _hoisted_1$p = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$g = { style: { "flex": "1" } };
-  const _hoisted_3$7 = { style: { "flex": "1" } };
-  const _hoisted_4$7 = { class: "dialog-footer" };
+  const _hoisted_2$d = { style: { "flex": "1" } };
+  const _hoisted_3$3 = { style: { "flex": "1" } };
+  const _hoisted_4$3 = { class: "dialog-footer" };
   const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
@@ -5202,10 +5195,10 @@
           height: "500px",
           onChange: (formState, code) => {
             try {
-              getConfig("parseDSL")(code);
+              getEditorConfig("parseDSL")(code);
               return code;
             } catch (error) {
-              design.tMagicMessage.error(error.message);
+              designPlugin.tMagicMessage.error(error.message);
               throw error;
             }
           }
@@ -5216,7 +5209,7 @@
         emit("submit", values);
       };
       const errorHandler = (error) => {
-        design.tMagicMessage.error(error.message);
+        designPlugin.tMagicMessage.error(error.message);
       };
       const formBox = vue.ref();
       const changedValue = vue.ref();
@@ -5228,7 +5221,7 @@
           done();
           return;
         }
-        design.tMagicMessageBox.confirm("当前代码块已修改，是否保存？", "提示", {
+        designPlugin.tMagicMessageBox.confirm("当前代码块已修改，是否保存？", "提示", {
           confirmButtonText: "保存并关闭",
           cancelButtonText: "不保存并关闭",
           type: "warning",
@@ -5268,7 +5261,7 @@
             "before-close": beforeClose
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MFormBox), {
+              vue.createVNode(vue.unref(formPlugin.MFormBox), {
                 class: "m-editor-code-block-editor",
                 ref_key: "formBox",
                 ref: formBox,
@@ -5285,15 +5278,15 @@
                 onClosed: closedHandler
               }, {
                 left: vue.withCtx(() => [
-                  !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  !_ctx.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                     key: 0,
                     type: "primary",
                     link: "",
                     onClick: _cache[0] || (_cache[0] = ($event) => difVisible.value = true)
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[6] || (_cache[6] = [
                       vue.createTextVNode("查看修改")
-                    ]),
+                    ])),
                     _: 1
                   })) : vue.createCommentVNode("", true)
                 ]),
@@ -5303,56 +5296,56 @@
             _: 1
           }, 8, ["visible", "width", "height", "title", "position"]),
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            vue.createVNode(vue.unref(design.TMagicDialog), {
+            vue.createVNode(vue.unref(designPlugin.TMagicDialog), {
               title: "查看修改",
               modelValue: difVisible.value,
               "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
               fullscreen: ""
             }, {
               footer: vue.withCtx(() => [
-                vue.createElementVNode("span", _hoisted_4$7, [
-                  vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createElementVNode("span", _hoisted_4$3, [
+                  vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     size: "small",
                     onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                       vue.createTextVNode("取消")
-                    ]),
+                    ])),
                     _: 1
                   }),
-                  vue.createVNode(vue.unref(design.TMagicButton), {
+                  vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     size: "small",
                     type: "primary",
                     onClick: diffChange
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[10] || (_cache[10] = [
                       vue.createTextVNode("确定")
-                    ]),
+                    ])),
                     _: 1
                   })
                 ])
               ]),
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", _hoisted_1$p, [
-                  vue.createElementVNode("div", _hoisted_2$g, [
-                    vue.createVNode(vue.unref(design.TMagicTag), {
+                  vue.createElementVNode("div", _hoisted_2$d, [
+                    vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
                     }, {
-                      default: vue.withCtx(() => [
+                      default: vue.withCtx(() => _cache[7] || (_cache[7] = [
                         vue.createTextVNode("修改前")
-                      ]),
+                      ])),
                       _: 1
                     })
                   ]),
-                  vue.createElementVNode("div", _hoisted_3$7, [
-                    vue.createVNode(vue.unref(design.TMagicTag), {
+                  vue.createElementVNode("div", _hoisted_3$3, [
+                    vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "success"
                     }, {
-                      default: vue.withCtx(() => [
+                      default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                         vue.createTextVNode("修改后")
-                      ]),
+                      ])),
                       _: 1
                     })
                   ])
@@ -5377,7 +5370,7 @@
   });
 
   const _hoisted_1$o = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$f = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_2$c = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
@@ -5449,21 +5442,21 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
-          vue.createVNode(vue.unref(table.MagicTable), {
+          vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$f, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
+          vue.createElementVNode("div", _hoisted_2$c, [
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
               disabled: _ctx.disabled,
               plain: "",
               onClick: createCodeHandler
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                 vue.createTextVNode("添加")
-              ]),
+              ])),
               _: 1
             }, 8, ["disabled"])
           ]),
@@ -5483,7 +5476,7 @@
   });
 
   const _hoisted_1$n = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$e = { class: "data-source-method-select-container" };
+  const _hoisted_2$b = { class: "data-source-method-select-container" };
   const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
@@ -5511,7 +5504,7 @@
       const hasDataSourceSidePanel = vue.computed(
         () => (services?.uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
       );
-      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources"));
       const isCustomMethod = vue.computed(() => {
         const [id, name] = props.model[props.name];
@@ -5531,7 +5524,7 @@
       const setParamsConfig = (dataSourceMethod, formState = {}) => {
         paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
         if (paramsConfig.value.length) {
-          props.model.params = form.createValues(formState, paramsConfig.value, {}, props.model.params);
+          props.model.params = formPlugin.createValues(formState, paramsConfig.value, {}, props.model.params);
         } else {
           props.model.params = {};
         }
@@ -5571,20 +5564,20 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
-          vue.createElementVNode("div", _hoisted_2$e, [
-            vue.createVNode(vue.unref(form.MContainer), {
+          vue.createElementVNode("div", _hoisted_2$b, [
+            vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
               model: _ctx.model,
               size: _ctx.size,
               onChange: onChangeHandler
             }, null, 8, ["config", "model", "size"]),
-            _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            _ctx.model[_ctx.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               content: notEditable.value ? "查看" : "编辑"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   class: "m-fields-select-action-button",
                   size: _ctx.size,
                   onClick: editCodeHandler
@@ -5615,7 +5608,7 @@
   });
 
   const _hoisted_1$m = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_2$a = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
@@ -5727,7 +5720,7 @@
           label: "是否启用",
           prop: "enable",
           type: "component",
-          component: design.TMagicSwitch,
+          component: designPlugin.TMagicSwitch,
           props: (row) => ({
             modelValue: row.enable,
             activeValue: true,
@@ -5743,7 +5736,7 @@
           label: "编辑器中使用",
           prop: "useInEditor",
           type: "component",
-          component: design.TMagicSwitch,
+          component: designPlugin.TMagicSwitch,
           props: (row) => ({
             modelValue: row.useInEditor,
             activeValue: true,
@@ -5775,7 +5768,7 @@
               text: "删除",
               buttonType: "danger",
               handler: async (row, index) => {
-                await design.tMagicMessageBox.confirm(`确定删除${row.title}?`, "提示");
+                await designPlugin.tMagicMessageBox.confirm(`确定删除${row.title}?`, "提示");
                 props.model[props.name].splice(index, 1);
                 emit("change", props.model[props.name]);
               }
@@ -5821,21 +5814,21 @@
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-          vue.createVNode(vue.unref(table.MagicTable), {
+          vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$d, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
               disabled: _ctx.disabled,
               plain: "",
               onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                 vue.createTextVNode("添加")
-              ]),
+              ])),
               _: 1
             }, 8, ["disabled"])
           ]),
@@ -5850,7 +5843,7 @@
             position: vue.unref(boxPosition)
           }, {
             body: vue.withCtx(() => [
-              vue.createVNode(vue.unref(form.MFormBox), {
+              vue.createVNode(vue.unref(formPlugin.MFormBox), {
                 ref: "addDialog",
                 "label-width": "120px",
                 config: formConfig,
@@ -5892,7 +5885,7 @@
       const { dataSourceService, uiService } = vue.inject("services") || {};
       const eventBus = vue.inject("eventBus");
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
-      const notEditable = vue.computed(() => form.filterFunction(mForm, props.config.notEditable, props));
+      const notEditable = vue.computed(() => formPlugin.filterFunction(mForm, props.config.notEditable, props));
       const hasDataSourceSidePanel = vue.computed(
         () => (uiService?.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE)
       );
@@ -5926,7 +5919,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
-          vue.createVNode(vue.unref(form.MSelect), {
+          vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
             size: _ctx.size,
@@ -5936,12 +5929,12 @@
             "last-values": _ctx.lastValues,
             onChange: changeHandler
           }, null, 8, ["model", "name", "size", "prop", "disabled", "config", "last-values"]),
-          _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          _ctx.model[_ctx.name] && hasDataSourceSidePanel.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 0,
             content: notEditable.value ? "查看" : "编辑"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 class: "m-fields-select-action-button",
                 size: _ctx.size,
                 onClick: editHandler
@@ -5983,7 +5976,7 @@
       const props = __props;
       const { dataSourceService } = vue.inject("services") || {};
       const mForm = vue.inject("mForm");
-      const parentFields = vue.computed(() => form.filterFunction(mForm, props.config.parentFields, props) || []);
+      const parentFields = vue.computed(() => formPlugin.filterFunction(mForm, props.config.parentFields, props) || []);
       const config = vue.computed(() => ({
         type: "groupList",
         name: props.name,
@@ -6074,7 +6067,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(form.MGroupList), {
+        return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MGroupList), {
           style: { "width": "100%" },
           config: config.value,
           name: _ctx.name,
@@ -6090,7 +6083,7 @@
   });
 
   const _hoisted_1$k = { class: "m-fields-event-select" };
-  const _hoisted_2$c = {
+  const _hoisted_2$9 = {
     key: 1,
     class: "fullWidth"
   };
@@ -6148,7 +6141,7 @@
                     }
                   ];
                   pageFragment.items.forEach((node) => {
-                    traverseNode(node, (node2) => {
+                    utils.traverseNode(node, (node2) => {
                       const nodeEvents = node2.type && eventsService.getEvent(node2.type) || [];
                       events.push({
                         label: `${node2.name}_${node2.id}`,
@@ -6190,24 +6183,24 @@
           name: "actionType",
           text: "联动类型",
           type: "select",
-          defaultValue: schema.ActionType.COMP,
+          defaultValue: core.ActionType.COMP,
           options: () => [
             {
               text: "组件",
               label: "组件",
-              value: schema.ActionType.COMP
+              value: core.ActionType.COMP
             },
             {
               text: "代码",
               label: "代码",
               disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
-              value: schema.ActionType.CODE
+              value: core.ActionType.CODE
             },
             {
               text: "数据源",
               label: "数据源",
               disabled: !dataSourceService?.get("dataSources")?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
-              value: schema.ActionType.DATA_SOURCE
+              value: core.ActionType.DATA_SOURCE
             }
           ]
         };
@@ -6218,7 +6211,7 @@
           name: "to",
           text: "联动组件",
           type: "ui-select",
-          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
+          display: (mForm, { model }) => model.actionType === core.ActionType.COMP,
           onChange: (MForm, v, { model }) => {
             model.method = "";
             return v;
@@ -6238,7 +6231,7 @@
             return "select";
           },
           checkStrictly: () => props.config.src !== "component",
-          display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
+          display: (mForm, { model }) => model.actionType === core.ActionType.COMP,
           options: (mForm, { model }) => {
             const node = editorService?.getNodeById(model.to);
             if (!node?.type) return [];
@@ -6249,7 +6242,7 @@
               if (pageFragment) {
                 methods = [];
                 pageFragment.items.forEach((node2) => {
-                  traverseNode(node2, (node3) => {
+                  utils.traverseNode(node2, (node3) => {
                     const nodeMethods = node3.type && eventsService?.getMethod(node3.type) || [];
                     if (nodeMethods.length) {
                       methods.push({
@@ -6277,7 +6270,7 @@
           text: "代码块",
           name: "codeId",
           notEditable: () => !codeBlockService?.getEditStatus(),
-          display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
+          display: (mForm, { model }) => model.actionType === core.ActionType.CODE
         };
         return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
       });
@@ -6287,7 +6280,7 @@
           text: "数据源方法",
           name: "dataSourceMethod",
           notEditable: () => !services?.dataSourceService.get("editable"),
-          display: (mForm, { model }) => model.actionType === schema.ActionType.DATA_SOURCE
+          display: (mForm, { model }) => model.actionType === core.ActionType.DATA_SOURCE
         };
         return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
       });
@@ -6378,21 +6371,21 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
-            vue.createVNode(vue.unref(design.TMagicButton), {
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
               size: _ctx.size,
               disabled: _ctx.disabled,
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[1] || (_cache[1] = [
                 vue.createTextVNode("添加事件")
-              ]),
+              ])),
               _: 1
             }, 8, ["size", "disabled"]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model[_ctx.name], (cardItem, index) => {
-              return vue.openBlock(), vue.createBlock(vue.unref(form.MPanel), {
+              return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MPanel), {
                 key: index,
                 disabled: _ctx.disabled,
                 size: _ctx.size,
@@ -6402,7 +6395,7 @@
                 onChange: onChangeHandler
               }, {
                 header: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(form.MContainer), {
+                  vue.createVNode(vue.unref(formPlugin.MContainer), {
                     class: "fullWidth",
                     config: eventNameConfig.value,
                     model: cardItem,
@@ -6410,7 +6403,7 @@
                     size: _ctx.size,
                     onChange: onChangeHandler
                   }, null, 8, ["config", "model", "disabled", "size"]),
-                  vue.createVNode(vue.unref(design.TMagicButton), {
+                  vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     style: { "color": "#f56c6c" },
                     link: "",
                     icon: vue.unref(iconsVue.Delete),
@@ -6434,10 +6427,6 @@
     xmlns: "http://www.w3.org/2000/svg",
     "xmlns:xlink": "http://www.w3.org/1999/xlink"
   };
-  const _hoisted_2$b = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$6 = [
-    _hoisted_2$b
-  ];
   const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
@@ -6445,14 +6434,15 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _hoisted_4$6);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, _cache[0] || (_cache[0] = [
+          vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
+        ]));
       };
     }
   });
 
   const _hoisted_1$i = { class: "m-fields-key-value" };
-  const _hoisted_2$a = { key: 0 };
-  const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _hoisted_2$8 = { key: 0 };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
@@ -6512,13 +6502,13 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
                 key: index
               }, [
-                vue.createVNode(vue.unref(design.TMagicInput), {
+                vue.createVNode(vue.unref(designPlugin.TMagicInput), {
                   placeholder: "key",
                   modelValue: records.value[index][0],
                   "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
@@ -6526,8 +6516,8 @@
                   size: _ctx.size,
                   onChange: keyChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-                _hoisted_3$6,
-                vue.createVNode(vue.unref(design.TMagicInput), {
+                _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1)),
+                vue.createVNode(vue.unref(designPlugin.TMagicInput), {
                   placeholder: "value",
                   modelValue: records.value[index][1],
                   "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
@@ -6535,7 +6525,7 @@
                   size: _ctx.size,
                   onChange: valueChangeHandler
                 }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   class: "m-fileds-key-value-delete",
                   type: "danger",
                   size: _ctx.size,
@@ -6547,7 +6537,7 @@
                 }, null, 8, ["size", "disabled", "icon", "onClick"])
               ]);
             }), 128)),
-            vue.createVNode(vue.unref(design.TMagicButton), {
+            vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               type: "primary",
               size: _ctx.size,
               disabled: _ctx.disabled,
@@ -6555,9 +6545,9 @@
               icon: vue.unref(iconsVue.Plus),
               onClick: addHandler
             }, {
-              default: vue.withCtx(() => [
+              default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                 vue.createTextVNode("添加")
-              ]),
+              ])),
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
@@ -6572,7 +6562,7 @@
             parse: true,
             onSave: save
           }, null, 8, ["init-values", "options"])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          _ctx.config.advanced ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
             key: 2,
             size: "default",
             disabled: _ctx.disabled,
@@ -6586,7 +6576,7 @@
   });
 
   const _hoisted_1$h = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$9 = { class: "page-fragment-select-container" };
+  const _hoisted_2$7 = { class: "page-fragment-select-container" };
   const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
@@ -6609,7 +6599,7 @@
       const emit = __emit;
       const props = __props;
       const pageList = vue.computed(
-        () => services?.editorService.get("root")?.items.filter((item) => item.type === schema.NodeType.PAGE_FRAGMENT)
+        () => services?.editorService.get("root")?.items.filter((item) => item.type === core.NodeType.PAGE_FRAGMENT)
       );
       const selectConfig = {
         type: "select",
@@ -6634,7 +6624,7 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+          vue.createElementVNode("div", _hoisted_2$7, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6741,7 +6731,7 @@
           class: "m-fields-ui-select",
           onClick: cancelHandler
         }, [
-          vue.createVNode(vue.unref(design.TMagicButton), {
+          vue.createVNode(vue.unref(designPlugin.TMagicButton), {
             type: "danger",
             icon: vue.unref(iconsVue.Delete),
             disabled: _ctx.disabled,
@@ -6749,19 +6739,19 @@
             link: "",
             style: { "padding": "0" }
           }, {
-            default: vue.withCtx(() => [
+            default: vue.withCtx(() => _cache[2] || (_cache[2] = [
               vue.createTextVNode("取消")
-            ]),
+            ])),
             _: 1
           }, 8, ["icon", "disabled", "size"])
         ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-            vue.createVNode(vue.unref(design.TMagicTooltip), {
+            vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "清除",
               placement: "top"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   style: { "padding": "0" },
                   type: "danger",
                   icon: vue.unref(iconsVue.Close),
@@ -6773,12 +6763,12 @@
               ]),
               _: 1
             }),
-            vue.createVNode(vue.unref(design.TMagicTooltip), {
+            vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "点击选中组件",
               placement: "top"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   link: "",
                   style: { "padding": "0", "margin": "0" },
                   disabled: _ctx.disabled,
@@ -6795,22 +6785,22 @@
               ]),
               _: 1
             })
-          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 1,
             content: "点击此处选择",
             placement: "top"
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 link: "",
                 style: { "padding": "0", "margin": "0" },
                 disabled: _ctx.disabled,
                 size: _ctx.size,
                 onClick: startSelect
               }, {
-                default: vue.withCtx(() => [
+                default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                   vue.createTextVNode("点击此处选择")
-                ]),
+                ])),
                 _: 1
               }, 8, ["disabled", "size"])
             ]),
@@ -7007,7 +6997,7 @@
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$6 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -7076,18 +7066,18 @@
           onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(_ctx.data, $event)),
           onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(_ctx.data, $event))
         }, [
-          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
+          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
           }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
               placement: "bottom-start",
               content: _ctx.data.tooltip
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicButton), {
+                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                   size: "small",
                   link: "",
                   disabled: disabled.value
@@ -7103,7 +7093,7 @@
                 }, 8, ["disabled"])
               ]),
               _: 1
-            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+            }, 8, ["content"])) : (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
               key: 1,
               size: "small",
               link: "",
@@ -7119,17 +7109,17 @@
               ]),
               _: 1
             }, 8, ["disabled", "title"]))
-          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
+          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDropdown), {
             key: 3,
             trigger: "click",
             disabled: disabled.value,
             onCommand: dropdownHandler
           }, {
             dropdown: vue.withCtx(() => [
-              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
+              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDropdownMenu), { key: 0 }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (subItem, index) => {
-                    return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
+                    return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDropdownItem), {
                       key: index,
                       command: { data: _ctx.data, subItem }
                     }, {
@@ -7144,9 +7134,9 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$8, [
+              vue.createElementVNode("span", _hoisted_2$6, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
-                vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
+                vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(iconsVue.ArrowDown))
                   ]),
@@ -7314,7 +7304,7 @@
       vue.watch(
         () => props.type,
         (type) => {
-          if (type === schema.NodeType.PAGE) {
+          if (type === core.NodeType.PAGE) {
             unWatchPageFragmentLength?.();
             unWatchPageFragmentLength = null;
             unWatchPageLength = crateWatchLength(pageLength);
@@ -7342,7 +7332,7 @@
           }, [
             vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.type === vue.unref(schema.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(schema.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
+          _ctx.type === vue.unref(core.NodeType).PAGE && pageLength.value || _ctx.type === vue.unref(core.NodeType).PAGE_FRAGMENT && pageFragmentLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
@@ -7386,14 +7376,15 @@
       };
       return (_ctx, _cache) => {
         return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          vue.createVNode(vue.unref(design.TMagicPopover), {
+          vue.createVNode(vue.unref(designPlugin.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" }, {
+              vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "m-editor-page-list-menu-icon" }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(vue.unref(iconsVue.Files))
                 ]),
@@ -7435,11 +7426,11 @@
     setup(__props, { emit: __emit }) {
       const data = [
         {
-          type: schema.NodeType.PAGE,
+          type: core.NodeType.PAGE,
           text: "页面"
         },
         {
-          type: schema.NodeType.PAGE_FRAGMENT,
+          type: core.NodeType.PAGE_FRAGMENT,
           text: "页面片"
         }
       ];
@@ -7449,7 +7440,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(data, (item) => {
-          return vue.createVNode(vue.unref(design.TMagicButton), {
+          return vue.createVNode(vue.unref(designPlugin.TMagicButton), {
             class: vue.normalizeClass(["m-editor-page-bar-switch-type-button", { active: _ctx.modelValue === item.type }]),
             size: "small",
             key: item.type,
@@ -7468,9 +7459,9 @@
   });
 
   const _hoisted_1$c = { class: "m-editor-page-bar-tabs" };
-  const _hoisted_2$7 = ["page-id", "onClick"];
-  const _hoisted_3$5 = { class: "m-editor-page-bar-title" };
-  const _hoisted_4$5 = ["title"];
+  const _hoisted_2$5 = ["page-id", "onClick"];
+  const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
+  const _hoisted_4$2 = ["title"];
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBar"
@@ -7481,37 +7472,37 @@
       pageBarSortOptions: {}
     },
     setup(__props) {
-      const active = vue.ref(schema.NodeType.PAGE);
+      const active = vue.ref(core.NodeType.PAGE);
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
       const pageList = vue.computed(() => getPageList(root.value));
       const pageFragmentList = vue.computed(() => getPageFragmentList(root.value));
-      const list = vue.computed(() => active.value === schema.NodeType.PAGE ? pageList.value : pageFragmentList.value);
+      const list = vue.computed(() => active.value === core.NodeType.PAGE ? pageList.value : pageFragmentList.value);
       const activePage = vue.ref("");
       const activePageFragment = vue.ref("");
       vue.watch(
         page,
         (page2) => {
           if (!page2) {
-            if (active.value === schema.NodeType.PAGE) {
+            if (active.value === core.NodeType.PAGE) {
               activePage.value = "";
             }
-            if (active.value === schema.NodeType.PAGE_FRAGMENT) {
+            if (active.value === core.NodeType.PAGE_FRAGMENT) {
               activePageFragment.value = "";
             }
             return;
           }
           if (utils.isPage(page2)) {
             activePage.value = page2?.id;
-            if (active.value !== schema.NodeType.PAGE) {
-              active.value = schema.NodeType.PAGE;
+            if (active.value !== core.NodeType.PAGE) {
+              active.value = core.NodeType.PAGE;
             }
           } else if (utils.isPageFragment(page2)) {
             activePageFragment.value = page2?.id;
-            if (active.value !== schema.NodeType.PAGE_FRAGMENT) {
-              active.value = schema.NodeType.PAGE_FRAGMENT;
+            if (active.value !== core.NodeType.PAGE_FRAGMENT) {
+              active.value = core.NodeType.PAGE_FRAGMENT;
             }
           }
         },
@@ -7520,7 +7511,7 @@
         }
       );
       vue.watch(active, (active2) => {
-        if (active2 === schema.NodeType.PAGE) {
+        if (active2 === core.NodeType.PAGE) {
           if (!activePage.value && !pageList.value.length) {
             editorService?.selectRoot();
             return;
@@ -7528,7 +7519,7 @@
           switchPage(activePage.value);
           return;
         }
-        if (active2 === schema.NodeType.PAGE_FRAGMENT) {
+        if (active2 === core.NodeType.PAGE_FRAGMENT) {
           if (!activePageFragment.value && !pageFragmentList.value.length) {
             editorService?.selectRoot();
             return;
@@ -7577,21 +7568,22 @@
                   "page-id": item.id,
                   onClick: ($event) => switchPage(item.id)
                 }, [
-                  vue.createElementVNode("div", _hoisted_3$5, [
+                  vue.createElementVNode("div", _hoisted_3$2, [
                     vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
                       vue.createElementVNode("span", {
                         title: item.name
-                      }, vue.toDisplayString(item.name || item.id), 9, _hoisted_4$5)
+                      }, vue.toDisplayString(item.name || item.id), 9, _hoisted_4$2)
                     ])
                   ]),
-                  vue.createVNode(vue.unref(design.TMagicPopover), {
+                  vue.createVNode(vue.unref(designPlugin.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" }, {
+                      vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
                         default: vue.withCtx(() => [
                           vue.createVNode(vue.unref(iconsVue.CaretBottom))
                         ]),
@@ -7622,7 +7614,7 @@
                     ]),
                     _: 2
                   }, 1024)
-                ], 10, _hoisted_2$7);
+                ], 10, _hoisted_2$5);
               }), 128))
             ]),
             _: 3
@@ -7633,9 +7625,7 @@
   });
 
   const _hoisted_1$b = { class: "m-editor-empty-panel" };
-  const _hoisted_2$6 = { class: "m-editor-empty-content" };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _hoisted_4$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面片", -1);
+  const _hoisted_2$4 = { class: "m-editor-empty-content" };
   const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
@@ -7659,25 +7649,25 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-          vue.createElementVNode("div", _hoisted_2$6, [
+          vue.createElementVNode("div", _hoisted_2$4, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
-              onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE))
+              onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
                 vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$4
+              _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "新增页面", -1))
             ]),
             !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: "m-editor-empty-button",
-              onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(schema.NodeType).PAGE_FRAGMENT))
+              onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
                 vue.createVNode(_sfc_main$Y, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_4$4
+              _cache[3] || (_cache[3] = vue.createElementVNode("p", null, "新增页面片", -1))
             ])) : vue.createCommentVNode("", true)
           ])
         ]);
@@ -7750,7 +7740,7 @@
       });
       const saveCode = (value) => {
         try {
-          const parseDSL = getConfig("parseDSL");
+          const parseDSL = getEditorConfig("parseDSL");
           editorService?.set("root", parseDSL(value));
         } catch (e) {
           console.error(e);
@@ -7823,7 +7813,7 @@
             page.value ? {
               name: "right",
               fn: vue.withCtx(() => [
-                vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
+                vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, "props-panel")
                   ]),
@@ -7889,7 +7879,7 @@
               className: "delete",
               icon: vue.markRaw(iconsVue.Delete),
               tooltip: `刪除(Delete)`,
-              disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
+              disabled: () => services?.editorService.get("node")?.type === core.NodeType.PAGE,
               handler: () => {
                 const node = services?.editorService.get("node");
                 node && services?.editorService.remove(node);
@@ -8101,7 +8091,7 @@
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
-          vue.createVNode(vue.unref(form.MForm), {
+          vue.createVNode(vue.unref(formPlugin.MForm), {
             ref_key: "configForm",
             ref: configForm,
             class: vue.normalizeClass(propsPanelSize.value),
@@ -8113,7 +8103,7 @@
             onChange: submit,
             onError: errorHandler
           }, null, 8, ["class", "popper-class", "size", "init-values", "config", "extend-state"]),
-          !_ctx.disabledShowSrc ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+          !_ctx.disabledShowSrc ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
             key: 0,
             class: "m-editor-props-panel-src-icon",
             circle: "",
@@ -8157,10 +8147,11 @@
         timer && clearTimeout(timer);
         timer = setTimeout(() => {
           emit("search", filterText.value);
+          timer = null;
         }, 300);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicInput), {
+        return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicInput), {
           modelValue: filterText.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
           class: "search-input",
@@ -8170,7 +8161,7 @@
           onInput: filterTextChangeHandler
         }, {
           prefix: vue.withCtx(() => [
-            vue.createVNode(vue.unref(design.TMagicIcon), null, {
+            vue.createVNode(vue.unref(designPlugin.TMagicIcon), null, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(iconsVue.Search))
               ]),
@@ -8184,9 +8175,9 @@
   });
 
   const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
-  const _hoisted_2$5 = { class: "tree-node-label" };
-  const _hoisted_3$3 = { class: "tree-node-tool" };
-  const _hoisted_4$3 = {
+  const _hoisted_2$3 = { class: "tree-node-label" };
+  const _hoisted_3$1 = { class: "tree-node-tool" };
+  const _hoisted_4$1 = {
     key: 0,
     class: "m-editor-tree-node-children"
   };
@@ -8200,7 +8191,8 @@
       parent: {},
       parentsId: { default: () => [] },
       nodeStatusMap: {},
-      indent: { default: 0 }
+      indent: { default: 0 },
+      nextLevelIndentIncrement: { default: 11 }
     },
     emits: ["node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
     setup(__props, { emit: __emit }) {
@@ -8274,18 +8266,18 @@
               onClick: nodeClickHandler
             }, [
               vue.renderSlot(_ctx.$slots, "tree-node-content", { data: _ctx.data }, () => [
-                vue.createElementVNode("div", _hoisted_2$5, [
+                vue.createElementVNode("div", _hoisted_2$3, [
                   vue.renderSlot(_ctx.$slots, "tree-node-label", { data: _ctx.data }, () => [
                     vue.createTextVNode(vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1)
                   ])
                 ]),
-                vue.createElementVNode("div", _hoisted_3$3, [
+                vue.createElementVNode("div", _hoisted_3$1, [
                   vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: _ctx.data })
                 ])
               ])
             ])
           ], 38),
-          hasChildren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
+          hasChildren.value && expanded.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (item) => {
               return vue.openBlock(), vue.createBlock(_component_TreeNode, {
                 key: item.id,
@@ -8293,7 +8285,7 @@
                 parent: _ctx.data,
                 parentsId: [..._ctx.parentsId, _ctx.data.id],
                 "node-status-map": _ctx.nodeStatusMap,
-                indent: _ctx.indent + 11
+                indent: _ctx.indent + _ctx.nextLevelIndentIncrement
               }, {
                 "tree-node-content": vue.withCtx(({ data: nodeData }) => [
                   vue.renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })
@@ -8328,6 +8320,7 @@
       data: {},
       nodeStatusMap: {},
       indent: { default: 0 },
+      nextLevelIndentIncrement: {},
       emptyText: { default: "暂无数据" }
     },
     emits: ["node-dragover", "node-dragstart", "node-dragleave", "node-dragend", "node-contextmenu", "node-mouseenter", "node-click"],
@@ -8347,6 +8340,7 @@
               key: item.id,
               data: item,
               indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               "node-status-map": _ctx.nodeStatusMap
             }, {
               "tree-node-content": vue.withCtx(({ data: nodeData }) => [
@@ -8359,7 +8353,7 @@
                 vue.renderSlot(_ctx.$slots, "tree-node-tool", { data: nodeData })
               ]),
               _: 2
-            }, 1032, ["data", "indent", "node-status-map"]);
+            }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
           }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
             vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
           ]))
@@ -8374,6 +8368,8 @@
     },
     __name: "CodeBlockList",
     props: {
+      indent: {},
+      nextLevelIndentIncrement: {},
       customError: { type: Function }
     },
     emits: ["edit", "remove"],
@@ -8384,7 +8380,7 @@
       const { codeBlockService, depService, editorService } = services || {};
       const codeList = vue.computed(
         () => Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
-          const target = depService?.getTarget(codeId, dep.DepTargetType.CODE_BLOCK);
+          const target = depService?.getTarget(codeId, core.DepTargetType.CODE_BLOCK);
           const pageList = editorService?.get("root")?.items.map((page) => ({
             name: page.devconfig?.tabName || page.name,
             type: "node",
@@ -8446,7 +8442,7 @@
         const existBinds = Boolean(currentCode?.items?.length);
         const undeleteableList = codeBlockService?.getUndeletableList() || [];
         if (!existBinds && !undeleteableList.includes(id)) {
-          await design.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+          await designPlugin.tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
             confirmButtonText: "确定",
             cancelButtonText: "取消",
             type: "warning"
@@ -8456,7 +8452,7 @@
           if (typeof props.customError === "function") {
             props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
           } else {
-            design.tMagicMessage.error("代码块删除失败");
+            designPlugin.tMagicMessage.error("代码块删除失败");
           }
         }
       };
@@ -8467,6 +8463,8 @@
         return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: codeList.value,
           "node-status-map": vue.unref(nodeStatusMap),
+          indent: _ctx.indent,
+          "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
           onNodeClick: clickHandler
         }, {
           "tree-node-label": vue.withCtx(({ data }) => [
@@ -8479,7 +8477,7 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            data.type === "code" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
@@ -8494,7 +8492,7 @@
               ]),
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
-            data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            data.type === "code" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 1,
               effect: "dark",
               content: "删除",
@@ -8515,7 +8513,7 @@
             })
           ]),
           _: 3
-        }, 8, ["data", "node-status-map"]);
+        }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
       };
     }
   });
@@ -8527,6 +8525,8 @@
     },
     __name: "CodeBlockListPanel",
     props: {
+      indent: {},
+      nextLevelIndentIncrement: {},
       customError: { type: Function }
     },
     setup(__props) {
@@ -8543,21 +8543,21 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
+          vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
                 vue.createElementVNode("div", _hoisted_1$7, [
                   vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                  editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                     key: 0,
                     class: "create-code-button",
                     type: "primary",
                     size: "small",
                     onClick: vue.unref(createCodeBlock)
                   }, {
-                    default: vue.withCtx(() => [
+                    default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                       vue.createTextVNode("新增")
-                    ]),
+                    ])),
                     _: 1
                   }, 8, ["onClick"])) : vue.createCommentVNode("", true),
                   vue.renderSlot(_ctx.$slots, "code-block-panel-search")
@@ -8567,6 +8567,8 @@
                 ref_key: "codeBlockList",
                 ref: codeBlockList,
                 "custom-error": _ctx.customError,
+                indent: _ctx.indent,
+                "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
                 onEdit: vue.unref(editCode),
                 onRemove: vue.unref(deleteCode)
               }, {
@@ -8577,7 +8579,7 @@
                   })
                 ]),
                 _: 3
-              }, 8, ["custom-error", "onEdit", "onRemove"])
+              }, 8, ["custom-error", "indent", "next-level-indent-increment", "onEdit", "onRemove"])
             ]),
             _: 3
           }),
@@ -8660,7 +8662,7 @@
         emit("submit", values);
       };
       const errorHandler = (error) => {
-        design.tMagicMessage.error(error.message);
+        designPlugin.tMagicMessage.error(error.message);
       };
       __expose({
         show() {
@@ -8683,7 +8685,7 @@
           position: vue.unref(boxPosition)
         }, {
           body: vue.withCtx(() => [
-            vue.createVNode(vue.unref(form.MFormBox), {
+            vue.createVNode(vue.unref(formPlugin.MFormBox), {
               "label-width": "80px",
               title: _ctx.title,
               config: dataSourceConfig.value,
@@ -8705,15 +8707,19 @@
       name: "MEditorDataSourceList"
     },
     __name: "DataSourceList",
+    props: {
+      indent: {},
+      nextLevelIndentIncrement: {}
+    },
     emits: ["edit", "remove"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const { depService, editorService, dataSourceService } = vue.inject("services") || {};
       const editable = vue.computed(() => dataSourceService?.get("editable") ?? true);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
-      const dsDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE) || {});
-      const dsMethodDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_METHOD) || {});
-      const dsCondDep = vue.computed(() => depService?.getTargets(dep.DepTargetType.DATA_SOURCE_COND) || {});
+      const dsDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE) || {});
+      const dsMethodDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE_METHOD) || {});
+      const dsCondDep = vue.computed(() => depService?.getTargets(core.DepTargetType.DATA_SOURCE_COND) || {});
       const getKeyTreeConfig = (dep, type, parentKey) => dep.keys.map((key) => ({
         name: key,
         id: `${parentKey}_${key}`,
@@ -8776,7 +8782,7 @@
         emit("edit", id);
       };
       const removeHandler = async (id) => {
-        await design.tMagicMessageBox.confirm("确定删除?", "提示", {
+        await designPlugin.tMagicMessageBox.confirm("确定删除?", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
@@ -8800,6 +8806,8 @@
         return vue.openBlock(), vue.createBlock(_sfc_main$m, {
           data: list.value,
           "node-status-map": vue.unref(nodeStatusMap),
+          indent: _ctx.indent,
+          "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
           onNodeClick: clickHandler
         }, {
           "tree-node-label": vue.withCtx(({ data }) => [
@@ -8812,7 +8820,7 @@
             }, vue.toDisplayString(data.name) + " " + vue.toDisplayString(data.key ? `(${data.key})` : ""), 3)
           ]),
           "tree-node-tool": vue.withCtx(({ data }) => [
-            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            data.type === "ds" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
               content: editable.value ? "编辑" : "查看",
@@ -8827,7 +8835,7 @@
               ]),
               _: 2
             }, 1032, ["content"])) : vue.createCommentVNode("", true),
-            data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            data.type === "ds" && editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 1,
               effect: "dark",
               content: "删除",
@@ -8845,7 +8853,7 @@
             vue.renderSlot(_ctx.$slots, "data-source-panel-tool", { data })
           ]),
           _: 3
-        }, 8, ["data", "node-status-map"]);
+        }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment"]);
       };
     }
   });
@@ -8856,6 +8864,10 @@
       name: "MEditorDataSourceListPanel"
     },
     __name: "DataSourceListPanel",
+    props: {
+      indent: {},
+      nextLevelIndentIncrement: {}
+    },
     setup(__props) {
       const eventBus = vue.inject("eventBus");
       const { dataSourceService } = vue.inject("services") || {};
@@ -8893,24 +8905,25 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
+          vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", _hoisted_1$6, [
                 vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
-                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
+                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicPopover), {
                   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), {
+                    vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                       type: "primary",
                       size: "small"
                     }, {
-                      default: vue.withCtx(() => [
+                      default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                         vue.createTextVNode("新增")
-                      ]),
+                      ])),
                       _: 1
                     })
                   ]),
@@ -8935,9 +8948,11 @@
               vue.createVNode(_sfc_main$i, {
                 ref_key: "dataSourceList",
                 ref: dataSourceList,
+                indent: _ctx.indent,
+                "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
                 onEdit: vue.unref(editHandler),
                 onRemove: removeHandler
-              }, null, 8, ["onEdit"])
+              }, null, 8, ["indent", "next-level-indent-increment", "onEdit"])
             ]),
             _: 3
           }),
@@ -8974,7 +8989,7 @@
       const subMenu = vue.ref();
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
-      const zIndex = design.useZIndex();
+      const zIndex = designPlugin.useZIndex();
       const curZIndex = vue.ref(0);
       const menuPosition = vue.ref({
         left: 0,
@@ -9127,18 +9142,6 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
-  }, null, -1);
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
-  }, null, -1);
-  const _hoisted_4$2 = [
-    _hoisted_2$4,
-    _hoisted_3$2
-  ];
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
@@ -9146,7 +9149,16 @@
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _hoisted_4$2);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+          vue.createElementVNode("path", {
+            "fill-rule": "evenodd",
+            d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
+          }, null, -1),
+          vue.createElementVNode("path", {
+            "fill-rule": "evenodd",
+            d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
+          }, null, -1)
+        ]));
       };
     }
   });
@@ -9157,7 +9169,7 @@
     icon: iconsVue.Delete,
     display: (services) => {
       const node = services?.editorService?.get("node");
-      return node?.type !== schema.NodeType.ROOT && !utils.isPage(node) && !utils.isPageFragment(node);
+      return node?.type !== core.NodeType.ROOT && !utils.isPage(node) && !utils.isPageFragment(node);
     },
     handler: (services) => {
       const nodes = services?.editorService?.get("nodes");
@@ -9185,8 +9197,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();
@@ -9746,7 +9758,7 @@
       draggable: false
     });
     page.items.forEach(
-      (node) => traverseNode(node, (node2) => {
+      (node) => utils.traverseNode(node, (node2) => {
         map.set(
           node2.id,
           initialLayerNodeStatus?.get(node2.id) || {
@@ -9801,7 +9813,7 @@
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
         if (utils.isPage(node) || utils.isPageFragment(node)) return;
-        traverseNode(node, (node2) => {
+        utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.set(node2.id, {
             visible: true,
             expand: Array.isArray(node2.items),
@@ -9813,7 +9825,7 @@
     });
     services?.editorService.on("remove", (nodes2) => {
       nodes2.forEach((node) => {
-        traverseNode(node, (node2) => {
+        utils.traverseNode(node, (node2) => {
           nodeStatusMap.value?.delete(node2.id);
         });
       });
@@ -9831,6 +9843,8 @@
     __name: "LayerPanel",
     props: {
       layerContentMenu: {},
+      indent: {},
+      nextLevelIndentIncrement: {},
       customContentMenu: { type: Function }
     },
     setup(__props) {
@@ -9869,7 +9883,7 @@
         highlightHandler: mouseenterHandler
       } = useClick(services, isCtrlKeyDown, nodeStatusMap);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
+        return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
             vue.createVNode(_sfc_main$o, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
@@ -9880,6 +9894,8 @@
               ref: tree,
               data: nodeData.value,
               "node-status-map": vue.unref(nodeStatusMap),
+              indent: _ctx.indent,
+              "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
               onNodeDragover: vue.unref(handleDragOver),
               onNodeDragstart: vue.unref(handleDragStart),
               onNodeDragleave: vue.unref(handleDragLeave),
@@ -9900,7 +9916,7 @@
                 vue.renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData2 })
               ]),
               _: 3
-            }, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
+            }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$e, {
                 ref_key: "menu",
@@ -9918,7 +9934,7 @@
   });
 
   const _hoisted_1$4 = ["onClick", "onDragstart"];
-  const _hoisted_2$3 = ["title"];
+  const _hoisted_2$2 = ["title"];
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
@@ -9969,7 +9985,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);
         }
@@ -9990,19 +10006,19 @@
         timeout = stage.value.delayedMarkContainer(e);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), null, {
+        return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), null, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
             vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
             vue.renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [
-              vue.createVNode(vue.unref(design.TMagicCollapse), {
+              vue.createVNode(vue.unref(designPlugin.TMagicCollapse), {
                 class: "ui-component-panel",
                 "model-value": collapseValue.value
               }, {
                 default: vue.withCtx(() => [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                      group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
+                      group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicCollapseItem), {
                         key: index,
                         name: `${index}`
                       }, {
@@ -10022,7 +10038,7 @@
                               onDrag: dragHandler
                             }, [
                               vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                                vue.createVNode(vue.unref(design.TMagicTooltip), {
+                                vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
                                   placement: "right",
                                   disabled: !Boolean(item.desc),
                                   content: item.desc
@@ -10036,7 +10052,7 @@
                                 }, 1032, ["disabled", "content"]),
                                 vue.createElementVNode("span", {
                                   title: item.text
-                                }, vue.toDisplayString(item.text), 9, _hoisted_2$3)
+                                }, vue.toDisplayString(item.text), 9, _hoisted_2$2)
                               ])
                             ], 40, _hoisted_1$4);
                           }), 128))
@@ -10060,13 +10076,13 @@
     key: 0,
     class: "m-editor-sidebar"
   };
-  const _hoisted_2$2 = { class: "m-editor-sidebar-header" };
-  const _hoisted_3$1 = ["draggable", "onClick", "onDragend"];
-  const _hoisted_4$1 = {
+  const _hoisted_2$1 = { class: "m-editor-sidebar-header" };
+  const _hoisted_3 = ["draggable", "onClick", "onDragend"];
+  const _hoisted_4 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const _hoisted_5$1 = { class: "m-editor-slide-list-box" };
+  const _hoisted_5 = { class: "m-editor-slide-list-box" };
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
@@ -10079,6 +10095,8 @@
         items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE]
       }) },
       layerContentMenu: {},
+      indent: {},
+      nextLevelIndentIncrement: {},
       customContentMenu: {}
     },
     setup(__props, { expose: __expose }) {
@@ -10119,7 +10137,9 @@
             text: "已选组件",
             props: {
               layerContentMenu: props.layerContentMenu,
-              customContentMenu: props.customContentMenu
+              customContentMenu: props.customContentMenu,
+              indent: props.indent,
+              nextLevelIndentIncrement: props.nextLevelIndentIncrement
             },
             component: _sfc_main$c,
             slots: {}
@@ -10130,6 +10150,10 @@
             icon: iconsVue.EditPen,
             text: "代码编辑",
             component: _sfc_main$k,
+            props: {
+              indent: props.indent,
+              nextLevelIndentIncrement: props.nextLevelIndentIncrement
+            },
             slots: {}
           },
           [SideItemKey.DATA_SOURCE]: {
@@ -10138,6 +10162,10 @@
             icon: iconsVue.Coin,
             text: "数据源",
             component: _sfc_main$h,
+            props: {
+              indent: props.indent,
+              nextLevelIndentIncrement: props.nextLevelIndentIncrement
+            },
             slots: {}
           }
         };
@@ -10192,7 +10220,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-            vue.createElementVNode("div", _hoisted_2$2, [
+            vue.createElementVNode("div", _hoisted_2$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
@@ -10208,8 +10236,8 @@
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                  config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-                ], 46, _hoisted_3$1)), [
+                  config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+                ], 46, _hoisted_3)), [
                   [vue.vShow, !vue.unref(floatBoxStates)[config.$key]?.status]
                 ]);
               }), 128))
@@ -10364,7 +10392,7 @@
                   }
                 }, {
                   body: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_5$1, [
+                    vue.createElementVNode("div", _hoisted_5, [
                       config && vue.unref(floatBoxStates)[config.$key].status ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.component), vue.mergeProps({
                         key: 0,
                         ref_for: true
@@ -10595,7 +10623,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);
@@ -10639,7 +10667,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          page.value && buttonVisible.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          page.value && buttonVisible.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 0,
             content: "点击查看当前位置下的组件"
           }, {
@@ -10694,7 +10722,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,11 +10737,15 @@
           subStage.mount(stageOverlay2);
           const { mask, renderer } = subStage;
           const { contentWindow } = renderer;
-          mask.showRule(false);
+          mask?.showRule(false);
           services?.stageOverlayService.updateOverlay();
           contentWindow?.magic.onRuntimeReady({});
         }
       });
+      vue.onBeforeUnmount(() => {
+        services?.stageOverlayService.get("stage")?.destroy();
+        services?.stageOverlayService.set("stage", null);
+      });
       const closeOverlayHandler = () => {
         services?.stageOverlayService.closeOverlay();
       };
@@ -10723,7 +10755,7 @@
           class: "m-editor-stage-overlay",
           onClick: closeOverlayHandler
         }, [
-          vue.createVNode(vue.unref(design.TMagicIcon), {
+          vue.createVNode(vue.unref(designPlugin.TMagicIcon), {
             class: "m-editor-stage-overlay-close",
             size: "20",
             onClick: closeOverlayHandler
@@ -10751,32 +10783,6 @@
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$1 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2 4H21V6H2V4Z",
-    fill: "black",
-    "fill-opacity": "0.9"
-  }, null, -1);
-  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M5 11H18V13H5V11Z",
-    fill: "black",
-    "fill-opacity": "0.9"
-  }, null, -1);
-  const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2 18H21V20H2V18Z",
-    fill: "black",
-    "fill-opacity": "0.9"
-  }, null, -1);
-  const _hoisted_5 = [
-    _hoisted_2$1,
-    _hoisted_3,
-    _hoisted_4
-  ];
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCenterIcon"
@@ -10784,7 +10790,29 @@
     __name: "CenterIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _hoisted_5);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [
+          vue.createElementVNode("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M2 4H21V6H2V4Z",
+            fill: "black",
+            "fill-opacity": "0.9"
+          }, null, -1),
+          vue.createElementVNode("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M5 11H18V13H5V11Z",
+            fill: "black",
+            "fill-opacity": "0.9"
+          }, null, -1),
+          vue.createElementVNode("path", {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "M2 18H21V20H2V18Z",
+            fill: "black",
+            "fill-opacity": "0.9"
+          }, null, -1)
+        ]));
       };
     }
   });
@@ -10897,7 +10925,7 @@
           const layout = await editorService.getLayout(parent.value);
           const isLayoutConform = [Layout.ABSOLUTE, Layout.FIXED].includes(layout);
           const isTypeConform = nodes.value?.every(
-            (selectedNode) => ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`)
+            (selectedNode) => ![core.NodeType.ROOT, core.NodeType.PAGE, "pop"].includes(`${selectedNode?.type}`)
           );
           canCenter.value = isLayoutConform && !!isTypeConform;
         },
@@ -10965,6 +10993,9 @@
           });
         });
       });
+      vue.onBeforeUnmount(() => {
+        stage?.destroy();
+      });
       vue.watch(zoom, (zoom2) => {
         if (!stage || !zoom2) return;
         stage.setZoom(zoom2);
@@ -11005,7 +11036,7 @@
         services?.keybindingService.unregisterEl("stage");
         services?.editorService.off("root-change", rootChangeHandler);
       });
-      const parseDSL = getConfig("parseDSL");
+      const parseDSL = getEditorConfig("parseDSL");
       const contextmenuHandler = (e) => {
         e.preventDefault();
         menu.value?.show(e);
@@ -11022,7 +11053,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);
@@ -11135,7 +11166,7 @@
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
             }, [
-              vue.createVNode(vue.unref(design.TMagicButton), {
+              vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                 link: "",
                 disabled: item.id === node.value?.id,
                 onClick: ($event) => select(item)
@@ -11256,7 +11287,7 @@
       if (codeDsl[id] && !force) return;
       const codeConfigProcessed = lodashEs.cloneDeep(codeConfig);
       if (codeConfigProcessed.content) {
-        const parseDSL = getConfig("parseDSL");
+        const parseDSL = getEditorConfig("parseDSL");
         if (typeof codeConfigProcessed.content === "string") {
           codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
         }
@@ -11378,10 +11409,10 @@
       const copyNodes = Array.isArray(config) ? config : [config];
       const copyData = {};
       if (collectorOptions && typeof collectorOptions.isTarget === "function") {
-        const customTarget = new dep.Target({
+        const customTarget = new core.Target({
           ...collectorOptions
         });
-        const coperWatcher = new dep.Watcher();
+        const coperWatcher = new core.Watcher();
         coperWatcher.addTarget(customTarget);
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
@@ -11565,10 +11596,10 @@
       const copyNodes = Array.isArray(config) ? config : [config];
       const copyData = [];
       if (collectorOptions && typeof collectorOptions.isTarget === "function") {
-        const customTarget = new dep.Target({
+        const customTarget = new core.Target({
           ...collectorOptions
         });
-        const coperWatcher = new dep.Watcher();
+        const coperWatcher = new core.Watcher();
         coperWatcher.addTarget(customTarget);
         coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
         Object.keys(customTarget.deps).forEach((nodeId) => {
@@ -11607,8 +11638,8 @@
 
   const idleTask = new IdleTask();
   class Dep extends BaseService {
-    watcher = new dep.Watcher({ initialTargets: vue.reactive({}) });
-    removeTargets(type = dep.DepTargetType.DEFAULT) {
+    watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
+    removeTargets(type = core.DepTargetType.DEFAULT) {
       this.watcher.removeTargets(type);
       const targets = this.watcher.getTargets(type);
       if (!targets) return;
@@ -11616,17 +11647,17 @@
         this.emit("remove-target", target.id);
       }
     }
-    getTargets(type = dep.DepTargetType.DEFAULT) {
+    getTargets(type = core.DepTargetType.DEFAULT) {
       return this.watcher.getTargets(type);
     }
-    getTarget(id, type = dep.DepTargetType.DEFAULT) {
+    getTarget(id, type = core.DepTargetType.DEFAULT) {
       return this.watcher.getTarget(id, type);
     }
     addTarget(target) {
       this.watcher.addTarget(target);
       this.emit("add-target", target);
     }
-    removeTarget(id, type = dep.DepTargetType.DEFAULT) {
+    removeTarget(id, type = core.DepTargetType.DEFAULT) {
       this.watcher.removeTarget(id, type);
       this.emit("remove-target", id);
     }
@@ -11674,10 +11705,10 @@
     clearByType(type, nodes) {
       return this.watcher.clearByType(type, nodes);
     }
-    hasTarget(id, type = dep.DepTargetType.DEFAULT) {
+    hasTarget(id, type = core.DepTargetType.DEFAULT) {
       return this.watcher.hasTarget(id, type);
     }
-    hasSpecifiedTypeTarget(type = dep.DepTargetType.DEFAULT) {
+    hasSpecifiedTypeTarget(type = core.DepTargetType.DEFAULT) {
       return this.watcher.hasSpecifiedTypeTarget(type);
     }
     on(eventName, listener) {
@@ -11965,6 +11996,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 +12025,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 +12054,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 +12073,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);
@@ -12249,9 +12285,9 @@
       value.dataSources = value.dataSources || [];
       codeBlockService.setCodeDsl(value.codeBlocks);
       dataSourceService.set("dataSources", value.dataSources);
-      depService.removeTargets(dep.DepTargetType.CODE_BLOCK);
+      depService.removeTargets(core.DepTargetType.CODE_BLOCK);
       Object.entries(value.codeBlocks).forEach(([id, code]) => {
-        depService.addTarget(dep.createCodeBlockTarget(id, code));
+        depService.addTarget(core.createCodeBlockTarget(id, code));
       });
       dataSourceService.get("dataSources").forEach((ds) => {
         initDataSourceDepTarget(ds);
@@ -12283,7 +12319,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");
@@ -12294,13 +12330,13 @@
     const targetAddHandler = (target) => {
       const root = editorService.get("root");
       if (!root) return;
-      if (target.type === dep.DepTargetType.DATA_SOURCE) {
+      if (target.type === core.DepTargetType.DATA_SOURCE) {
         if (!root.dataSourceDeps) {
           root.dataSourceDeps = {};
         }
         root.dataSourceDeps[target.id] = target.deps;
       }
-      if (target.type === dep.DepTargetType.DATA_SOURCE_COND) {
+      if (target.type === core.DepTargetType.DATA_SOURCE_COND) {
         if (!root.dataSourceCondDeps) {
           root.dataSourceCondDeps = {};
         }
@@ -12316,7 +12352,7 @@
         delete root.dataSourceCondDeps[id];
       }
     };
-    const collectedHandler = (nodes, deep) => {
+    const collectedHandler = lodashEs.debounce((nodes, deep) => {
       const root = editorService.get("root");
       const stage = editorService.get("stage");
       if (!root || !stage) return;
@@ -12331,7 +12367,7 @@
       const allNodes = [];
       if (deep) {
         nodes.forEach((node) => {
-          traverseNode(node, (node2) => {
+          utils.traverseNode(node, (node2) => {
             if (!allNodes.includes(node2)) {
               allNodes.push(node2);
             }
@@ -12351,14 +12387,14 @@
           });
         });
       });
-    };
+    }, 300);
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
     depService.on("collected", collectedHandler);
     const initDataSourceDepTarget = (ds) => {
-      depService.addTarget(dep.createDataSourceTarget(ds, vue.reactive({})));
-      depService.addTarget(dep.createDataSourceMethodTarget(ds, vue.reactive({})));
-      depService.addTarget(dep.createDataSourceCondTarget(ds, vue.reactive({})));
+      depService.addTarget(core.createDataSourceTarget(ds, vue.reactive({})));
+      depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
+      depService.addTarget(core.createDataSourceCondTarget(ds, vue.reactive({})));
     };
     const collectIdle = (nodes, deep) => {
       nodes.forEach((node) => {
@@ -12390,14 +12426,14 @@
     editorService.on("remove", nodeRemoveHandler);
     editorService.on("update", nodeUpdateHandler);
     const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
-      if (depService.hasTarget(id, dep.DepTargetType.CODE_BLOCK)) {
-        depService.getTarget(id, dep.DepTargetType.CODE_BLOCK).name = codeBlock.name;
+      if (depService.hasTarget(id, core.DepTargetType.CODE_BLOCK)) {
+        depService.getTarget(id, core.DepTargetType.CODE_BLOCK).name = codeBlock.name;
         return;
       }
-      depService.addTarget(dep.createCodeBlockTarget(id, codeBlock));
+      depService.addTarget(core.createCodeBlockTarget(id, codeBlock));
     };
     const codeBlockRemoveHandler = (id) => {
-      depService.removeTarget(id, dep.DepTargetType.CODE_BLOCK);
+      depService.removeTarget(id, core.DepTargetType.CODE_BLOCK);
     };
     codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
     codeBlockService.on("remove", codeBlockRemoveHandler);
@@ -12412,9 +12448,9 @@
       collectIdle(root?.items || [], true);
     };
     const removeDataSourceTarget = (id) => {
-      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE);
-      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE_COND);
-      depService.removeTarget(id, dep.DepTargetType.DATA_SOURCE_METHOD);
+      depService.removeTarget(id, core.DepTargetType.DATA_SOURCE);
+      depService.removeTarget(id, core.DepTargetType.DATA_SOURCE_COND);
+      depService.removeTarget(id, core.DepTargetType.DATA_SOURCE_METHOD);
     };
     const dataSourceRemoveHandler = (id) => {
       removeDataSourceTarget(id);
@@ -12475,6 +12511,8 @@
       disabledPageFragment: { type: Boolean },
       disabledStageOverlay: { type: Boolean },
       disabledShowSrc: { type: Boolean },
+      treeIndent: {},
+      treeNextLevelIndentIncrement: {},
       render: { type: Function },
       updateDragEl: { type: Function },
       canSelect: { type: Function },
@@ -12551,7 +12589,9 @@
               vue.createVNode(_sfc_main$a, {
                 data: _ctx.sidebar,
                 "layer-content-menu": _ctx.layerContentMenu,
-                "custom-content-menu": _ctx.customContentMenu
+                "custom-content-menu": _ctx.customContentMenu,
+                indent: _ctx.treeIndent,
+                "next-level-indent-increment": _ctx.treeNextLevelIndentIncrement
               }, {
                 "layer-panel-header": vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "layer-panel-header")
@@ -12593,7 +12633,7 @@
                   vue.renderSlot(_ctx.$slots, "data-source-panel-search")
                 ]),
                 _: 3
-              }, 8, ["data", "layer-content-menu", "custom-content-menu"])
+              }, 8, ["data", "layer-content-menu", "custom-content-menu", "indent", "next-level-indent-increment"])
             ])
           ]),
           workspace: vue.withCtx(() => [
@@ -12663,8 +12703,11 @@
   const index = {
     install: (app, opt) => {
       const option = Object.assign(defaultInstallOpt, opt || {});
+      app.use(designPlugin, opt || {});
+      app.use(formPlugin, opt || {});
+      app.use(tablePlugin);
       app.config.globalProperties.$TMAGIC_EDITOR = option;
-      setConfig(option);
+      setEditorConfig(option);
       app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
       app.component("magic-code-editor", _sfc_main$X);
       app.component("m-fields-ui-select", _sfc_main$B);
@@ -12687,10 +12730,14 @@
     }
   };
 
+  exports.designPlugin = designPlugin;
+  exports.formPlugin = formPlugin;
+  exports.tablePlugin = tablePlugin;
   Object.defineProperty(exports, "DepTargetType", {
     enumerable: true,
-    get: () => dep.DepTargetType
+    get: () => core.DepTargetType
   });
+  exports.StageCore = StageCore;
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_CODE_STORAGE_KEY = COPY_CODE_STORAGE_KEY;
   exports.COPY_DS_STORAGE_KEY = COPY_DS_STORAGE_KEY;
@@ -12764,9 +12811,9 @@
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getAddParent = getAddParent;
   exports.getCascaderOptionsFromFields = getCascaderOptionsFromFields;
-  exports.getConfig = getConfig;
   exports.getDefaultConfig = getDefaultConfig;
   exports.getDisplayField = getDisplayField;
+  exports.getEditorConfig = getEditorConfig;
   exports.getFormConfig = getFormConfig;
   exports.getFormValue = getFormValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
@@ -12779,7 +12826,6 @@
   exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
-  exports.isFixed = isFixed;
   exports.log = log;
   exports.moveItemsInContainer = moveItemsInContainer;
   exports.numberOptions = numberOptions;
@@ -12787,12 +12833,11 @@
   exports.removeDataSourceFieldPrefix = removeDataSourceFieldPrefix;
   exports.serializeConfig = serializeConfig;
   exports.setChildrenLayout = setChildrenLayout;
-  exports.setConfig = setConfig;
+  exports.setEditorConfig = setEditorConfig;
   exports.setLayout = setLayout;
   exports.stageOverlayService = stageOverlayService;
   exports.storageService = storageService;
   exports.styleTabConfig = styleTabConfig;
-  exports.traverseNode = traverseNode;
   exports.uiService = uiService;
   exports.updateStatus = updateStatus;
   exports.useCodeBlockEdit = useCodeBlockEdit;
@@ -12806,6 +12851,36 @@
   exports.useStage = useStage;
   exports.useWindowRect = useWindowRect;
   exports.warn = warn;
+  Object.keys(designPlugin).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => designPlugin[k]
+    });
+  });
+  Object.keys(formPlugin).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => formPlugin[k]
+    });
+  });
+  Object.keys(tablePlugin).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => tablePlugin[k]
+    });
+  });
+  Object.keys(utils).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => utils[k]
+    });
+  });
+  Object.keys(StageCore).forEach(k => {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => StageCore[k]
+    });
+  });
 
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });