@tmagic/editor 1.5.21 → 1.5.24

package/dist/tmagic-editor.umd.cjs

@@ -4820,7 +4820,7 @@
     return (array && array.length) ? baseUniq(array) : [];
   }
 
-  const _hoisted_1$$ = ["src"];
+  const _hoisted_1$10 = ["src"];
   const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -4846,7 +4846,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$$)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$10)
           ]),
           _: 1
           /* STABLE */
@@ -4882,7 +4882,7 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$_ = {
+  const _hoisted_1$$ = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
   const _hoisted_2$n = {
@@ -4904,7 +4904,8 @@
       }) },
       height: {},
       autoSave: { type: Boolean, default: true },
-      parse: { type: Boolean, default: false }
+      parse: { type: Boolean, default: false },
+      disabledFullScreen: { type: Boolean, default: false }
     },
     emits: ["initd", "save"],
     setup(__props, { expose: __expose, emit: __emit }) {
@@ -4964,6 +4965,9 @@
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
       const init = async () => {
         if (!codeEditorEl.value) return;
+        if (codeEditorEl.value.clientHeight === 0) {
+          await vue.nextTick();
+        }
         const options = {
           value: values.value,
           language: props.language,
@@ -4971,12 +4975,11 @@
           ...props.options
         };
         if (props.type === "diff") {
-          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditorEl.value, options);
+          vsDiffEditor = getEditorConfig("customCreateMonacoDiffEditor")(monaco__namespace, codeEditorEl.value, options);
         } else {
-          vsEditor = monaco__namespace.editor.create(codeEditorEl.value, options);
+          vsEditor = getEditorConfig("customCreateMonacoEditor")(monaco__namespace, codeEditorEl.value, options);
         }
         setEditorValue(props.initValues, props.modifiedValues);
-        loading.value = false;
         emit("initd", vsEditor);
         codeEditorEl.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
@@ -5010,12 +5013,27 @@
           immediate: true
         }
       );
+      vue.watch(
+        () => props.options,
+        (v) => {
+          vsEditor?.updateOptions(v);
+          vsDiffEditor?.updateOptions(v);
+        },
+        {
+          deep: true
+        }
+      );
       vue.onMounted(async () => {
         loading.value = true;
-        init();
+        await init();
+        loading.value = false;
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
+        vsEditor?.dispose();
+        vsDiffEditor?.dispose();
+        vsEditor = null;
+        vsDiffEditor = null;
       });
       const fullScreen = vue.ref(false);
       const fullScreenHandler = () => {
@@ -5046,7 +5064,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -5058,7 +5076,8 @@
                 style: vue.normalizeStyle(!fullScreen.value && _ctx.height ? `height: ${_ctx.height}` : "100%")
               },
               [
-                vue.createVNode(vue.unref(designPlugin.TMagicButton), {
+                !_ctx.disabledFullScreen ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
+                  key: 0,
                   class: "magic-code-editor-full-screen-icon",
                   circle: "",
                   size: "small",
@@ -5069,7 +5088,7 @@
                   ]),
                   _: 1
                   /* STABLE */
-                }),
+                })) : vue.createCommentVNode("v-if", true),
                 vue.createElementVNode(
                   "div",
                   _hoisted_2$n,
@@ -5435,6 +5454,20 @@
     title: "高级",
     lazy: true,
     items: [
+      {
+        name: core.NODE_DISABLE_CODE_BLOCK_KEY,
+        text: "禁用代码块",
+        type: "switch",
+        defaultValue: false,
+        extra: "开启后，配置的代码块将不会被执行"
+      },
+      {
+        name: core.NODE_DISABLE_DATA_SOURCE_KEY,
+        text: "禁用数据源",
+        type: "switch",
+        defaultValue: false,
+        extra: "开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效"
+      },
       {
         name: "created",
         text: "created",
@@ -5470,7 +5503,11 @@
       }
     ]
   };
-  const fillConfig$1 = (config = [], labelWidth = "80px") => {
+  const fillConfig$1 = (config = [], {
+    labelWidth = "80px",
+    disabledDataSource = false,
+    disabledCodeBlock = false
+  } = {}) => {
     const propsConfig = [];
     if (!config.find((item) => item.name === "type")) {
       propsConfig.push({
@@ -5504,22 +5541,31 @@
         text: "组件名称"
       });
     }
-    return [
-      {
-        type: "tab",
-        labelWidth,
-        items: [
-          {
-            title: "属性",
-            items: [...propsConfig, ...config]
-          },
-          { ...styleTabConfig },
-          { ...eventTabConfig },
-          { ...advancedTabConfig },
-          { ...displayTabConfig }
-        ]
-      }
-    ];
+    const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => item.type !== "code-select");
+    if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) {
+      advancedTabConfig.items = noCodeAdvancedTabItems;
+    }
+    const tabConfig = {
+      type: "tab",
+      labelWidth,
+      items: [
+        {
+          title: "属性",
+          items: [...propsConfig, ...config]
+        },
+        { ...styleTabConfig },
+        { ...eventTabConfig }
+      ]
+    };
+    if (!disabledCodeBlock) {
+      tabConfig.items.push({ ...advancedTabConfig });
+    } else if (noCodeAdvancedTabItems.length > 0) {
+      tabConfig.items.push({ ...advancedTabConfig });
+    }
+    if (!disabledDataSource) {
+      tabConfig.items.push({ ...displayTabConfig });
+    }
+    return [tabConfig];
   };
 
   const log = (...args) => {
@@ -5974,22 +6020,29 @@
      * @deprecated 请使用usePlugin代替
      */
     use(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
+      for (const [methodName2, method] of Object.entries(options)) {
         if (typeof method === "function") this.middleware[methodName2].push(method);
-      });
+      }
     }
     usePlugin(options) {
-      Object.entries(options).forEach(([methodName2, method]) => {
+      for (const [methodName2, method] of Object.entries(options)) {
         if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
-      });
+      }
+    }
+    removePlugin(options) {
+      for (const [methodName2, method] of Object.entries(options)) {
+        if (Array.isArray(this.pluginOptionsList[methodName2])) {
+          this.pluginOptionsList[methodName2] = this.pluginOptionsList[methodName2].filter((item) => item !== method);
+        }
+      }
     }
     removeAllPlugins() {
-      Object.keys(this.pluginOptionsList).forEach((key) => {
+      for (const key of Object.keys(this.pluginOptionsList)) {
         this.pluginOptionsList[key] = [];
-      });
-      Object.keys(this.middleware).forEach((key) => {
+      }
+      for (const key of Object.keys(this.middleware)) {
         this.middleware[key] = [];
-      });
+      }
     }
     async doTask() {
       this.doingTask = true;
@@ -6017,7 +6070,11 @@
     state = vue.reactive({
       propsConfigMap: {},
       propsValueMap: {},
-      relateIdMap: {}
+      relateIdMap: {},
+      /** 禁用数据源 */
+      disabledDataSource: false,
+      /** 禁用代码块 */
+      disabledCodeBlock: false
     });
     constructor() {
       super([
@@ -6025,6 +6082,18 @@
         ...canUsePluginMethods$7.sync.map((methodName) => ({ name: methodName, isAsync: false }))
       ]);
     }
+    setDisabledDataSource(disabled) {
+      this.state.disabledDataSource = disabled;
+    }
+    setDisabledCodeBlock(disabled) {
+      this.state.disabledCodeBlock = disabled;
+    }
+    getDisabledDataSource() {
+      return this.state.disabledDataSource;
+    }
+    getDisabledCodeBlock() {
+      return this.state.disabledCodeBlock;
+    }
     setPropsConfigs(configs) {
       Object.keys(configs).forEach((type) => {
         this.setPropsConfig(utils.toLine(type), configs[type]);
@@ -6032,7 +6101,11 @@
       this.emit("props-configs-change");
     }
     async fillConfig(config, labelWidth) {
-      return fillConfig$1(config, typeof labelWidth !== "function" ? labelWidth : "80px");
+      return fillConfig$1(config, {
+        labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
+        disabledDataSource: this.getDisabledDataSource(),
+        disabledCodeBlock: this.getDisabledCodeBlock()
+      });
     }
     async setPropsConfig(type, config) {
       let c = config;
@@ -7952,7 +8025,7 @@
     }
   });
 
-  const _hoisted_1$Z = { class: "m-fields-code-select-col" };
+  const _hoisted_1$_ = { class: "m-fields-code-select-col" };
   const _hoisted_2$m = { class: "code-select-container" };
   const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -8053,7 +8126,7 @@
         eventBus?.emit("edit-code", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
           vue.createElementVNode("div", _hoisted_2$m, [
             vue.createCommentVNode(" 代码块下拉框 "),
             vue.createVNode(vue.unref(formPlugin.MContainer), {
@@ -8165,9 +8238,9 @@
                   vue.mergeProps(
                     {
                       class: "tmagic-design-option",
-                      key: option.value,
-                      ref_for: true
+                      key: option.value
                     },
+                    { ref_for: true },
                     vue.unref(optionComponent)?.props({
                       label: option.text,
                       value: option.value
@@ -8192,7 +8265,7 @@
     }
   });
 
-  const _hoisted_1$Y = {
+  const _hoisted_1$Z = {
     ref: "title",
     class: "m-editor-float-box-title"
   };
@@ -8340,7 +8413,7 @@
             [
               vue.createElementVNode(
                 "div",
-                _hoisted_1$Y,
+                _hoisted_1$Z,
                 [
                   vue.renderSlot(_ctx.$slots, "title", {}, () => [
                     vue.createElementVNode(
@@ -8574,7 +8647,8 @@
       moveableOptions: stageOptions.moveableOptions,
       updateDragEl: stageOptions.updateDragEl,
       guidesOptions: stageOptions.guidesOptions,
-      disabledMultiSelect: stageOptions.disabledMultiSelect
+      disabledMultiSelect: stageOptions.disabledMultiSelect,
+      disabledRule: stageOptions.disabledRule
     });
     vue.watch(
       () => editorService.get("disabledMultiSelect"),
@@ -8782,10 +8856,12 @@
           const visible = filterIsMatch(text, node2);
           if (visible && parents.length) {
             parents.forEach((parent) => {
-              updateStatus(nodeStatusMap.value, parent.id, {
-                visible,
-                expand: true
-              });
+              if (text || text.length) {
+                updateStatus(nodeStatusMap.value, parent.id, {
+                  visible,
+                  expand: true
+                });
+              }
             });
           }
           updateStatus(nodeStatusMap.value, node2.id, {
@@ -8886,7 +8962,7 @@
     };
   };
 
-  const _hoisted_1$X = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$Y = { class: "m-editor-data-source-fields" };
   const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -9153,10 +9229,11 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
-            columns: fieldColumns
+            columns: fieldColumns,
+            border: true
           }, null, 8, ["data"]),
           vue.createElementVNode("div", _hoisted_2$l, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
@@ -9168,8 +9245,8 @@
               default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                 vue.createTextVNode("快速添加")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [8]
             }, 8, ["disabled"]),
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
@@ -9181,8 +9258,8 @@
               default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                 vue.createTextVNode("添加")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [9]
             }, 8, ["disabled"])
           ]),
           vue.createVNode(_sfc_main$1j, {
@@ -9235,7 +9312,7 @@
     }
   });
 
-  const _hoisted_1$W = { class: "m-editor-data-source-field-select" };
+  const _hoisted_1$X = { class: "m-editor-data-source-field-select" };
   const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
@@ -9244,7 +9321,7 @@
       checkStrictly: { type: Boolean },
       size: {},
       dataSourceFieldType: {},
-      notEditable: { type: Boolean }
+      notEditable: { type: [Boolean, Function] }
     }, {
       "modelValue": { default: [] },
       "modelModifiers": {}
@@ -9317,7 +9394,7 @@
         eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             { key: 0 },
@@ -9340,9 +9417,9 @@
                         vue.mergeProps(
                           {
                             class: "tmagic-design-option",
-                            key: option.value,
-                            ref_for: true
+                            key: option.value
                           },
+                          { ref_for: true },
                           vue.unref(optionComponent)?.props({
                             label: option.text,
                             value: option.value,
@@ -9420,7 +9497,7 @@
     }
   });
 
-  const _hoisted_1$V = { class: "m-fields-data-source-field-select" };
+  const _hoisted_1$W = { class: "m-fields-data-source-field-select" };
   const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
@@ -9455,9 +9532,10 @@
           immediate: true
         }
       );
-      const { dataSourceService } = useServices();
+      const { dataSourceService, propsService } = useServices();
       const mForm = vue.inject("mForm");
       const dataSources = vue.computed(() => dataSourceService.get("dataSources") || []);
+      const disabledDataSource = vue.computed(() => propsService.getDisabledDataSource());
       const type = vue.computed(() => {
         let type2 = props.config.fieldConfig?.type;
         if (typeof type2 === "function") {
@@ -9522,8 +9600,8 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
-          showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$1h, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+          !disabledDataSource.value && (showDataSourceFieldSelect.value || !_ctx.config.fieldConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$1h, {
             key: 0,
             "model-value": _ctx.model[_ctx.name],
             disabled: _ctx.disabled,
@@ -9545,7 +9623,7 @@
             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(designPlugin.TMagicTooltip), {
+          _ctx.config.fieldConfig && !disabledDataSource.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
             key: 2,
             disabled: showDataSourceFieldSelect.value,
             content: "选择数据源"
@@ -9572,7 +9650,7 @@
     }
   });
 
-  const _hoisted_1$U = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_1$V = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
   const _hoisted_2$k = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$7 = { class: "el-input__inner t-input__inner" };
   const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
@@ -9595,13 +9673,14 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const { dataSourceService } = useServices();
+      const { dataSourceService, propsService } = useServices();
       const autocompleteRef = vue.useTemplateRef("autocomplete");
       const isFocused = vue.ref(false);
       const state = vue.ref("");
       const displayState = vue.ref([]);
       const input = vue.computed(() => autocompleteRef.value?.inputRef?.input);
       const dataSources = vue.computed(() => dataSourceService.get("dataSources"));
+      const disabledDataSource = vue.computed(() => propsService.getDisabledDataSource());
       const setDisplayState = () => {
         displayState.value = getDisplayField(dataSources.value, state.value);
       };
@@ -9751,13 +9830,21 @@
         changeHandler(state.value);
       };
       return (_ctx, _cache) => {
-        return _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(designPlugin.getDesignConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
+        return disabledDataSource.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicInput), {
+          key: 0,
+          modelValue: state.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
+          disabled: _ctx.disabled,
+          size: _ctx.size,
+          clearable: true,
+          onChange: changeHandler
+        }, null, 8, ["modelValue", "disabled", "size"])) : _ctx.disabled || isFocused.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(designPlugin.getDesignConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.mergeProps(
           {
-            key: 0,
+            key: 1,
             class: "tmagic-design-auto-complete",
             ref: "autocomplete",
             modelValue: state.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.value = $event)
           },
           vue.unref(designPlugin.getDesignConfig)("components")?.autocomplete.props({
             disabled: _ctx.disabled,
@@ -9777,7 +9864,7 @@
             vue.createVNode(_sfc_main$1r, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$U, [
+            vue.createElementVNode("div", _hoisted_1$V, [
               vue.createElementVNode(
                 "div",
                 null,
@@ -9799,7 +9886,7 @@
         }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock(
           "div",
           {
-            key: 1,
+            key: 2,
             class: vue.normalizeClass(`tmagic-data-source-input-text el-input t-input t-size-${_ctx.size?.[0]} el-input--${_ctx.size}`),
             onMouseup: mouseupHandler
           },
@@ -9868,7 +9955,7 @@
     }
   });
 
-  const _hoisted_1$T = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_1$U = { style: { "display": "flex", "margin-bottom": "10px" } };
   const _hoisted_2$j = { style: { "flex": "1" } };
   const _hoisted_3$6 = { style: { "flex": "1" } };
   const _hoisted_4$5 = { class: "dialog-footer" };
@@ -10096,8 +10183,8 @@
                       default: vue.withCtx(() => _cache[6] || (_cache[6] = [
                         vue.createTextVNode("查看修改")
                       ])),
-                      _: 1
-                      /* STABLE */
+                      _: 1,
+                      __: [6]
                     })) : vue.createCommentVNode("v-if", true)
                   ]),
                   _: 1
@@ -10112,7 +10199,8 @@
                 title: "查看修改",
                 modelValue: difVisible.value,
                 "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => difVisible.value = $event),
-                fullscreen: ""
+                fullscreen: "",
+                "destroy-on-close": ""
               }, {
                 footer: vue.withCtx(() => [
                   vue.createElementVNode("span", _hoisted_4$5, [
@@ -10123,8 +10211,8 @@
                       default: vue.withCtx(() => _cache[9] || (_cache[9] = [
                         vue.createTextVNode("取消")
                       ])),
-                      _: 1
-                      /* STABLE */
+                      _: 1,
+                      __: [9]
                     }),
                     vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                       size: "small",
@@ -10134,13 +10222,13 @@
                       default: vue.withCtx(() => _cache[10] || (_cache[10] = [
                         vue.createTextVNode("确定")
                       ])),
-                      _: 1
-                      /* STABLE */
+                      _: 1,
+                      __: [10]
                     })
                   ])
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_1$T, [
+                  vue.createElementVNode("div", _hoisted_1$U, [
                     vue.createElementVNode("div", _hoisted_2$j, [
                       vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                         size: "small",
@@ -10149,8 +10237,8 @@
                         default: vue.withCtx(() => _cache[7] || (_cache[7] = [
                           vue.createTextVNode("修改前")
                         ])),
-                        _: 1
-                        /* STABLE */
+                        _: 1,
+                        __: [7]
                       })
                     ]),
                     vue.createElementVNode("div", _hoisted_3$6, [
@@ -10161,20 +10249,20 @@
                         default: vue.withCtx(() => _cache[8] || (_cache[8] = [
                           vue.createTextVNode("修改后")
                         ])),
-                        _: 1
-                        /* STABLE */
+                        _: 1,
+                        __: [8]
                       })
                     ])
                   ]),
-                  difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1q, {
-                    key: 0,
+                  vue.createVNode(_sfc_main$1q, {
                     ref: "magicVsEditor",
                     type: "diff",
                     language: "json",
+                    "disabled-full-screen": true,
                     initValues: _ctx.content.content,
-                    modifiedValues: vue.unref(formBox)?.form?.values.content,
-                    style: vue.normalizeStyle(`height: ${vue.unref(windowRect).height - 150}px`)
-                  }, null, 8, ["initValues", "modifiedValues", "style"])) : vue.createCommentVNode("v-if", true)
+                    modifiedValues: formBox.value?.form?.values.content,
+                    height: `${vue.unref(windowRect).height - 150}px`
+                  }, null, 8, ["initValues", "modifiedValues", "height"])
                 ]),
                 _: 1
                 /* STABLE */
@@ -10188,7 +10276,7 @@
     }
   });
 
-  const _hoisted_1$S = { class: "m-editor-data-source-methods" };
+  const _hoisted_1$T = { class: "m-editor-data-source-methods" };
   const _hoisted_2$i = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -10307,10 +10395,11 @@
         codeBlockEditorRef.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
-            columns: methodColumns
+            columns: methodColumns,
+            border: true
           }, null, 8, ["data"]),
           vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
@@ -10323,8 +10412,8 @@
               default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                 vue.createTextVNode("添加")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [0]
             }, 8, ["disabled"])
           ]),
           codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1e, {
@@ -10341,7 +10430,7 @@
     }
   });
 
-  const _hoisted_1$R = { class: "m-fields-data-source-method-select" };
+  const _hoisted_1$S = { class: "m-fields-data-source-method-select" };
   const _hoisted_2$h = { class: "data-source-method-select-container" };
   const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -10428,7 +10517,7 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
           vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
@@ -10474,7 +10563,7 @@
     }
   });
 
-  const _hoisted_1$Q = { class: "m-editor-data-source-fields" };
+  const _hoisted_1$R = { class: "m-editor-data-source-fields" };
   const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -10680,7 +10769,7 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
@@ -10696,8 +10785,8 @@
               default: vue.withCtx(() => _cache[4] || (_cache[4] = [
                 vue.createTextVNode("添加")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [4]
             }, 8, ["disabled"])
           ]),
           vue.createVNode(_sfc_main$1j, {
@@ -10728,7 +10817,7 @@
     }
   });
 
-  const _hoisted_1$P = { class: "m-fields-data-source-select" };
+  const _hoisted_1$Q = { class: "m-fields-data-source-select" };
   const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
@@ -10786,7 +10875,7 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -10956,7 +11045,7 @@
     }
   });
 
-  const _hoisted_1$O = { class: "m-fields-event-select" };
+  const _hoisted_1$P = { class: "m-fields-event-select" };
   const _hoisted_2$f = {
     key: 1,
     class: "fullWidth"
@@ -10981,7 +11070,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
+      const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
       const eventNameConfig = vue.computed(() => {
         const defaultEventNameConfig = {
           name: "name",
@@ -11053,24 +11142,31 @@
           text: "联动类型",
           type: "select",
           defaultValue: core.ActionType.COMP,
-          options: () => [
-            {
-              text: "组件",
-              label: "组件",
-              value: core.ActionType.COMP
-            },
-            {
-              text: "代码",
-              label: "代码",
-              disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-              value: core.ActionType.CODE
-            },
-            {
-              text: "数据源",
-              label: "数据源",
-              value: core.ActionType.DATA_SOURCE
+          options: () => {
+            const o = [
+              {
+                text: "组件",
+                label: "组件",
+                value: core.ActionType.COMP
+              }
+            ];
+            if (!propsService.getDisabledCodeBlock()) {
+              o.push({
+                text: "代码",
+                label: "代码",
+                disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+                value: core.ActionType.CODE
+              });
             }
-          ]
+            if (!propsService.getDisabledDataSource()) {
+              o.push({
+                text: "数据源",
+                label: "数据源",
+                value: core.ActionType.DATA_SOURCE
+              });
+            }
+            return o;
+          }
         };
         return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
       });
@@ -11231,7 +11327,7 @@
       const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             name: "events",
@@ -11251,8 +11347,8 @@
               default: vue.withCtx(() => _cache[1] || (_cache[1] = [
                 vue.createTextVNode("添加事件")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [1]
             }, 8, ["size", "disabled"]),
             (vue.openBlock(true), vue.createElementBlock(
               vue.Fragment,
@@ -11300,7 +11396,7 @@
     }
   });
 
-  const _hoisted_1$N = {
+  const _hoisted_1$O = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -11313,14 +11409,14 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$N, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$O, _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$M = { class: "m-fields-key-value" };
+  const _hoisted_1$N = { class: "m-fields-key-value" };
   const _hoisted_2$e = { key: 0 };
   const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -11384,7 +11480,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
           !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
             (vue.openBlock(true), vue.createElementBlock(
               vue.Fragment,
@@ -11407,7 +11503,7 @@
                     { class: "m-fields-key-value-delimiter" },
                     ":",
                     -1
-                    /* HOISTED */
+                    /* CACHED */
                   )),
                   vue.createVNode(vue.unref(designPlugin.TMagicInput), {
                     placeholder: "value",
@@ -11443,8 +11539,8 @@
               default: vue.withCtx(() => _cache[2] || (_cache[2] = [
                 vue.createTextVNode("添加")
               ])),
-              _: 1
-              /* STABLE */
+              _: 1,
+              __: [2]
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("v-if", true),
           _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1q, {
@@ -11471,7 +11567,7 @@
     }
   });
 
-  const _hoisted_1$L = { class: "m-fields-page-fragment-select" };
+  const _hoisted_1$M = { class: "m-fields-page-fragment-select" };
   const _hoisted_2$d = { class: "page-fragment-select-container" };
   const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -11519,7 +11615,7 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
           vue.createElementVNode("div", _hoisted_2$d, [
             vue.createCommentVNode(" 页面片下拉框 "),
             vue.createVNode(_component_m_form_container, {
@@ -11542,7 +11638,7 @@
     }
   });
 
-  const _hoisted_1$K = { class: "background-position-container" };
+  const _hoisted_1$L = { class: "background-position-container" };
   const _hoisted_2$c = { class: "presets-value-list" };
   const _hoisted_3$5 = { class: "custom-value" };
   const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
@@ -11600,7 +11696,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
           vue.createElementVNode("div", _hoisted_2$c, [
             (vue.openBlock(true), vue.createElementBlock(
               vue.Fragment,
@@ -11656,13 +11752,13 @@
 
   const _sfc_main$13 = {  };
 
-  const _hoisted_1$J = {
+  const _hoisted_1$K = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$k(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$J, _cache[0] || (_cache[0] = [
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$K, _cache[0] || (_cache[0] = [
       vue.createStaticVNode("<path d=\"M884.736 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C696.32 311.296 712.704 327.68 733.184 327.68l147.456 0c20.48 0 36.864-16.384 36.864-36.864L917.504 139.264C921.6 118.784 905.216 102.4 884.736 102.4zM884.736 290.816l-147.456 0L737.28 139.264l147.456 0L884.736 290.816z\"></path><path d=\"M884.736 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 712.704 905.216 696.32 884.736 696.32zM884.736 884.736l-147.456 0 0-147.456 147.456 0L884.736 884.736z\"></path><path d=\"M884.736 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 417.792 905.216 401.408 884.736 401.408zM884.736 585.728l-147.456 0 0-147.456 147.456 0L884.736 585.728z\"></path><path d=\"M585.728 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 417.792 606.208 401.408 585.728 401.408zM585.728 585.728l-147.456 0 0-147.456 147.456 0L585.728 585.728z\"></path><path d=\"M585.728 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864L622.592 139.264C622.592 118.784 606.208 102.4 585.728 102.4zM585.728 290.816l-147.456 0L438.272 139.264l147.456 0L585.728 290.816z\"></path><path d=\"M585.728 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 712.704 606.208 696.32 585.728 696.32zM585.728 884.736l-147.456 0 0-147.456 147.456 0L585.728 884.736z\"></path><path d=\"M290.816 696.32 139.264 696.32c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 712.704 311.296 696.32 290.816 696.32zM290.816 884.736 139.264 884.736l0-147.456 147.456 0L286.72 884.736z\"></path><path d=\"M290.816 401.408 139.264 401.408c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 417.792 311.296 401.408 290.816 401.408zM290.816 585.728 139.264 585.728l0-147.456 147.456 0L286.72 585.728z\"></path><path d=\"M290.816 102.4 139.264 102.4c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C102.4 311.296 118.784 327.68 139.264 327.68l147.456 0C311.296 327.68 327.68 311.296 327.68 290.816L327.68 139.264C327.68 118.784 311.296 102.4 290.816 102.4zM290.816 290.816 139.264 290.816 139.264 139.264l147.456 0L286.72 290.816z\"></path>", 9)
     ])))
   }
@@ -11670,51 +11766,51 @@
 
   const _sfc_main$12 = {  };
 
-  const _hoisted_1$I = {
+  const _hoisted_1$J = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$j(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$I, _cache[0] || (_cache[0] = [
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$J, _cache[0] || (_cache[0] = [
       vue.createElementVNode("path", {
         d: "M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z",
         fill: "#333333"
-      }, null, -1 /* HOISTED */)
+      }, null, -1 /* CACHED */)
     ])))
   }
   const BackgroundRepeatX = /*#__PURE__*/_export_sfc(_sfc_main$12, [['render',_sfc_render$j]]);
 
   const _sfc_main$11 = {  };
 
-  const _hoisted_1$H = {
+  const _hoisted_1$I = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$i(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$I, _cache[0] || (_cache[0] = [
       vue.createElementVNode("path", {
         d: "M170.666667 227.555556v227.555555h682.666666V227.555556H170.666667z m625.777777 56.888888v113.777778H227.555556V284.444444h568.888888zM170.666667 568.888889v227.555555h682.666666v-227.555555H170.666667z m625.777777 56.888889v113.777778H227.555556v-113.777778h568.888888zM56.888889 56.888889h910.222222v56.888889H56.888889zM56.888889 910.222222h910.222222v56.888889H56.888889z",
         fill: "#333333"
-      }, null, -1 /* HOISTED */)
+      }, null, -1 /* CACHED */)
     ])))
   }
   const BackgroundRepeatY = /*#__PURE__*/_export_sfc(_sfc_main$11, [['render',_sfc_render$i]]);
 
   const _sfc_main$10 = {  };
 
-  const _hoisted_1$G = {
+  const _hoisted_1$H = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$h(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
       vue.createElementVNode("path", {
         d: "M912.526651 867.741144 555.540144 510.712681l356.986507-357.000833c11.171434-11.18576 11.171434-29.257348 0-40.443108-11.20111-11.18576-29.272697-11.18576-40.444131 0L515.096013 470.267527 158.096203 113.267716c-11.187807-11.159154-29.258371-11.159154-40.444131 0-11.186783 11.186783-11.186783 29.286 0 40.47176L474.623229 510.712681 117.623419 867.741144c-11.159154 11.172457-11.159154 29.216415 0 40.443108 11.18576 11.17348 29.284977 11.17348 40.47176 0l357.000833-357.027439 356.985484 357.027439c11.171434 11.17348 29.243021 11.17348 40.444131 0C923.698085 896.957559 923.725714 878.913601 912.526651 867.741144z",
         fill: "#5D5D5D"
-      }, null, -1 /* HOISTED */)
+      }, null, -1 /* CACHED */)
     ])))
   }
   const BackgroundNoRepeat = /*#__PURE__*/_export_sfc(_sfc_main$10, [['render',_sfc_render$h]]);
@@ -11796,42 +11892,42 @@
 
   const _sfc_main$_ = {  };
 
-  const _hoisted_1$F = {
+  const _hoisted_1$G = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$g(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1 /* CACHED */)
     ])))
   }
   const AlignLeft = /*#__PURE__*/_export_sfc(_sfc_main$_, [['render',_sfc_render$g]]);
 
   const _sfc_main$Z = {  };
 
-  const _hoisted_1$E = {
+  const _hoisted_1$F = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$f(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1 /* CACHED */)
     ])))
   }
   const AlignCenter = /*#__PURE__*/_export_sfc(_sfc_main$Z, [['render',_sfc_render$f]]);
 
   const _sfc_main$Y = {  };
 
-  const _hoisted_1$D = {
+  const _hoisted_1$E = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$e(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1 /* CACHED */)
     ])))
   }
   const AlignRight = /*#__PURE__*/_export_sfc(_sfc_main$Y, [['render',_sfc_render$e]]);
@@ -11920,7 +12016,7 @@
     }
   });
 
-  const _hoisted_1$C = { class: "layout-box-container" };
+  const _hoisted_1$D = { class: "layout-box-container" };
   const _hoisted_2$b = {
     key: 0,
     class: "help-txt"
@@ -11977,7 +12073,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
           (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             null,
@@ -12021,196 +12117,196 @@
 
   const _sfc_main$V = {  };
 
-  const _hoisted_1$B = {
+  const _hoisted_1$C = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$d(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z" }, null, -1 /* CACHED */)
     ])))
   }
   const DisplayBlock = /*#__PURE__*/_export_sfc(_sfc_main$V, [['render',_sfc_render$d]]);
 
   const _sfc_main$U = {  };
 
-  const _hoisted_1$A = {
+  const _hoisted_1$B = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$c(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192zM352 256v512H160V256h192z m256 0v512h-192V256h192z m256 0v512h-192V256h192z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192zM352 256v512H160V256h192z m256 0v512h-192V256h192z m256 0v512h-192V256h192z" }, null, -1 /* CACHED */)
     ])))
   }
   const DisplayFlex = /*#__PURE__*/_export_sfc(_sfc_main$U, [['render',_sfc_render$c]]);
 
   const _sfc_main$T = {  };
 
-  const _hoisted_1$z = {
+  const _hoisted_1$A = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$b(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M787.616 651.36a142.72 142.72 0 0 0 52.864 31.904 205.504 205.504 0 0 0 67.264 10.848 245.76 245.76 0 0 0 38.784-2.4c9.504-1.6 19.36-4 30.208-7.04 8.16-2.24 15.968-5.12 23.36-8.32l23.392-10.816V587.52h-8.736c-3.968 3.424-8.96 7.648-15.104 12.544a190.272 190.272 0 0 1-19.936 13.504 120.32 120.32 0 0 1-27.616 12.544 102.528 102.528 0 0 1-62.72-0.576 80 80 0 0 1-29.824-17.088 89.28 89.28 0 0 1-21.664-32.512c-5.696-13.664-8.64-30.784-8.64-51.296 0-19.744 2.72-36.384 7.968-50.08 5.248-13.664 12.384-24.896 20.992-33.056 9.12-8.832 18.816-14.816 29.632-18.816a101.824 101.824 0 0 1 63.68-0.736c9.408 3.136 18.08 7.04 26.112 11.68 13.024 7.808 25.28 16.768 36.672 26.784H1024v-78.72c-6.08-2.88-13.12-6.08-21.12-9.6a205.984 205.984 0 0 0-57.152-15.36 270.016 270.016 0 0 0-37.056-2.304c-24.864 0-47.744 4-68.704 11.84-20.992 7.776-38.432 18.784-52.64 33.6a144.256 144.256 0 0 0-33.632 54.176 207.68 207.68 0 0 0-12.48 70.176c0 27.84 3.968 52.352 12.16 73.568a146.08 146.08 0 0 0 34.176 53.184l0.064 0.416z m-186.112 34.656a122.912 122.912 0 0 0 42.784-21.504c11.2-8.32 20.224-19.296 26.24-31.936 6.56-13.664 9.888-28.704 9.664-43.904 0-22.784-6.272-41.024-18.912-54.72-12.544-13.92-29.664-23.04-51.104-27.36v-2.304c14.4-6.24 26.688-16.448 35.52-29.408 8.384-12.544 12.544-27.008 12.544-43.52 0-14.24-2.944-26.784-9.12-37.6a65.696 65.696 0 0 0-27.936-26.24 117.44 117.44 0 0 0-36.48-12.096A437.312 437.312 0 0 0 526.656 352h-127.552v340.384h143.392c23.84 0 43.52-2.112 59.008-6.4z m-118.112-271.584h7.968c16.544 0 29.472 0.128 38.656 0.352 9.248 0.576 16.864 1.728 23.04 4a26.24 26.24 0 0 1 14.4 13.12c2.656 5.28 4.064 11.072 4.128 16.96 0.16 6.656-1.056 13.248-3.52 19.392a28.064 28.064 0 0 1-15.04 13.696c-7.04 2.912-14.56 4.48-22.208 4.576-9.472 0.32-20.864 0.544-34.24 0.544h-13.184v-72.64z m6.144 215.52h-6.144v-84.8h18.464c12.64 0 24.736 0 36.384 0.256 9.216-0.16 18.432 0.896 27.36 3.2 9.696 2.848 16.544 7.232 20.512 13.12 4 5.92 6.08 14.24 6.08 25.088 0 8.192-1.728 15.488-4.992 21.824-3.232 6.336-9.696 11.392-18.24 15.392-8.544 4-18.24 5.696-28.48 6.272-10.304 0.224-27.392 0.224-51.328 0.224l0.384-0.576z m-378.56-6.016h124.672l23.36 68.416H348.8L224.32 353.728H124.416L0 692.384h87.52l23.488-68.416-0.064-0.032z m62.336-183.552l41.472 121.44h-82.88l41.408-121.44z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M787.616 651.36a142.72 142.72 0 0 0 52.864 31.904 205.504 205.504 0 0 0 67.264 10.848 245.76 245.76 0 0 0 38.784-2.4c9.504-1.6 19.36-4 30.208-7.04 8.16-2.24 15.968-5.12 23.36-8.32l23.392-10.816V587.52h-8.736c-3.968 3.424-8.96 7.648-15.104 12.544a190.272 190.272 0 0 1-19.936 13.504 120.32 120.32 0 0 1-27.616 12.544 102.528 102.528 0 0 1-62.72-0.576 80 80 0 0 1-29.824-17.088 89.28 89.28 0 0 1-21.664-32.512c-5.696-13.664-8.64-30.784-8.64-51.296 0-19.744 2.72-36.384 7.968-50.08 5.248-13.664 12.384-24.896 20.992-33.056 9.12-8.832 18.816-14.816 29.632-18.816a101.824 101.824 0 0 1 63.68-0.736c9.408 3.136 18.08 7.04 26.112 11.68 13.024 7.808 25.28 16.768 36.672 26.784H1024v-78.72c-6.08-2.88-13.12-6.08-21.12-9.6a205.984 205.984 0 0 0-57.152-15.36 270.016 270.016 0 0 0-37.056-2.304c-24.864 0-47.744 4-68.704 11.84-20.992 7.776-38.432 18.784-52.64 33.6a144.256 144.256 0 0 0-33.632 54.176 207.68 207.68 0 0 0-12.48 70.176c0 27.84 3.968 52.352 12.16 73.568a146.08 146.08 0 0 0 34.176 53.184l0.064 0.416z m-186.112 34.656a122.912 122.912 0 0 0 42.784-21.504c11.2-8.32 20.224-19.296 26.24-31.936 6.56-13.664 9.888-28.704 9.664-43.904 0-22.784-6.272-41.024-18.912-54.72-12.544-13.92-29.664-23.04-51.104-27.36v-2.304c14.4-6.24 26.688-16.448 35.52-29.408 8.384-12.544 12.544-27.008 12.544-43.52 0-14.24-2.944-26.784-9.12-37.6a65.696 65.696 0 0 0-27.936-26.24 117.44 117.44 0 0 0-36.48-12.096A437.312 437.312 0 0 0 526.656 352h-127.552v340.384h143.392c23.84 0 43.52-2.112 59.008-6.4z m-118.112-271.584h7.968c16.544 0 29.472 0.128 38.656 0.352 9.248 0.576 16.864 1.728 23.04 4a26.24 26.24 0 0 1 14.4 13.12c2.656 5.28 4.064 11.072 4.128 16.96 0.16 6.656-1.056 13.248-3.52 19.392a28.064 28.064 0 0 1-15.04 13.696c-7.04 2.912-14.56 4.48-22.208 4.576-9.472 0.32-20.864 0.544-34.24 0.544h-13.184v-72.64z m6.144 215.52h-6.144v-84.8h18.464c12.64 0 24.736 0 36.384 0.256 9.216-0.16 18.432 0.896 27.36 3.2 9.696 2.848 16.544 7.232 20.512 13.12 4 5.92 6.08 14.24 6.08 25.088 0 8.192-1.728 15.488-4.992 21.824-3.232 6.336-9.696 11.392-18.24 15.392-8.544 4-18.24 5.696-28.48 6.272-10.304 0.224-27.392 0.224-51.328 0.224l0.384-0.576z m-378.56-6.016h124.672l23.36 68.416H348.8L224.32 353.728H124.416L0 692.384h87.52l23.488-68.416-0.064-0.032z m62.336-183.552l41.472 121.44h-82.88l41.408-121.44z" }, null, -1 /* CACHED */)
     ])))
   }
   const DisplayInline = /*#__PURE__*/_export_sfc(_sfc_main$T, [['render',_sfc_render$b]]);
 
   const _sfc_main$S = {  };
 
-  const _hoisted_1$y = {
+  const _hoisted_1$z = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$a(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-131.936 158.496c65.984 1.824 109.024 32.512 129.184 92.064l-65.952 15.136-1.856-5.664c-9.984-27.52-30.432-42.112-61.376-43.84-46.72 2.784-71.456 35.296-74.208 97.6 1.856 63.2 26.56 96.64 74.24 100.32 37.536-0.928 59.52-23.36 65.92-67.328L960 559.36l-1.792 7.232c-16.96 63.872-60.352 95.84-130.144 95.84-93.44-4.608-142.464-56.8-147.04-156.672 4.576-98.048 53.6-149.792 147.04-155.296z m-568.928 4.128l114.08 302.336H297.6l-22.016-65.984H160.192L138.24 656.96H64l112.672-302.336h82.464z m278.976 0l7.68 0.32c62.816 3.36 96 27.104 99.52 71.136 0 35.744-19.712 59.552-59.104 71.456 42.144 9.184 65.952 32.544 71.456 70.08 0 59.552-37.568 89.344-112.672 89.344h-148.416v-302.336h141.536z m-4.128 173.152H465.28v81.088h67.328c33.92 0 51.296-13.76 52.224-41.248-2.752-25.632-19.68-38.912-50.848-39.84zM217.92 408.224h-1.376l-0.96 7.36c-1.184 7.232-3.168 13.92-5.92 20.128l-34.336 103.04h87.936l-38.464-104.416-2.624-9.024c-1.6-5.888-3.04-11.584-4.256-17.088z m309.184-2.752H465.28v71.456h61.824c29.344-0.928 44.448-13.76 45.376-38.464-0.96-22.016-16.032-32.992-45.376-32.992z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-131.936 158.496c65.984 1.824 109.024 32.512 129.184 92.064l-65.952 15.136-1.856-5.664c-9.984-27.52-30.432-42.112-61.376-43.84-46.72 2.784-71.456 35.296-74.208 97.6 1.856 63.2 26.56 96.64 74.24 100.32 37.536-0.928 59.52-23.36 65.92-67.328L960 559.36l-1.792 7.232c-16.96 63.872-60.352 95.84-130.144 95.84-93.44-4.608-142.464-56.8-147.04-156.672 4.576-98.048 53.6-149.792 147.04-155.296z m-568.928 4.128l114.08 302.336H297.6l-22.016-65.984H160.192L138.24 656.96H64l112.672-302.336h82.464z m278.976 0l7.68 0.32c62.816 3.36 96 27.104 99.52 71.136 0 35.744-19.712 59.552-59.104 71.456 42.144 9.184 65.952 32.544 71.456 70.08 0 59.552-37.568 89.344-112.672 89.344h-148.416v-302.336h141.536z m-4.128 173.152H465.28v81.088h67.328c33.92 0 51.296-13.76 52.224-41.248-2.752-25.632-19.68-38.912-50.848-39.84zM217.92 408.224h-1.376l-0.96 7.36c-1.184 7.232-3.168 13.92-5.92 20.128l-34.336 103.04h87.936l-38.464-104.416-2.624-9.024c-1.6-5.888-3.04-11.584-4.256-17.088z m309.184-2.752H465.28v71.456h61.824c29.344-0.928 44.448-13.76 45.376-38.464-0.96-22.016-16.032-32.992-45.376-32.992z" }, null, -1 /* CACHED */)
     ])))
   }
   const DisplayInlineBlock = /*#__PURE__*/_export_sfc(_sfc_main$S, [['render',_sfc_render$a]]);
 
   const _sfc_main$R = {  };
 
-  const _hoisted_1$x = {
+  const _hoisted_1$y = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$9(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M931.37 477.14c-43.94-69.49-93.39-125.03-147.99-166.35L663.31 441.46c8.79 21.36 13.63 44.91 13.63 69.62 0 96.27-73.84 174.32-164.95 174.32-21.63 0-42.28-4.39-61.32-12.47l-94.09 102.52a455.097 455.097 0 0 0 155.41 26.2c172.62 0 312.43-85.54 419.59-256.63 12.83-20.43 12.72-47.45-0.21-67.88zM795.52 127.99L682.24 252.82C627.73 231 570.1 220.04 512.11 220.5c-171.15 0-310.99 85.66-419.48 256.75-12.93 20.43-13.04 47.33-0.2 67.78 46.95 75.15 100.3 133.68 160.01 175.82L131.9 853.65l38.9 42.36 663.6-725.76-38.88-42.26zM519.68 438.37c-3.72-0.59-7.46-0.81-11.27-0.81-45.63 0-82.43 39.03-82.43 87.16 0 4.97 0.42 9.81 1.14 14.54l-57.15 60.14-5.92 8.33c-13.15-24.94-20.5-53.68-20.5-84.28 0-96.3 73.84-174.45 164.95-174.45 27.2 0 52.76 6.93 75.4 19.29l-64.22 70.08z m52.05 135.53c21.74-23.26 27.17-55.48 16.31-81.39l-96.42 103.16c26.59 9.08 58.38 1.48 80.11-21.77z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M931.37 477.14c-43.94-69.49-93.39-125.03-147.99-166.35L663.31 441.46c8.79 21.36 13.63 44.91 13.63 69.62 0 96.27-73.84 174.32-164.95 174.32-21.63 0-42.28-4.39-61.32-12.47l-94.09 102.52a455.097 455.097 0 0 0 155.41 26.2c172.62 0 312.43-85.54 419.59-256.63 12.83-20.43 12.72-47.45-0.21-67.88zM795.52 127.99L682.24 252.82C627.73 231 570.1 220.04 512.11 220.5c-171.15 0-310.99 85.66-419.48 256.75-12.93 20.43-13.04 47.33-0.2 67.78 46.95 75.15 100.3 133.68 160.01 175.82L131.9 853.65l38.9 42.36 663.6-725.76-38.88-42.26zM519.68 438.37c-3.72-0.59-7.46-0.81-11.27-0.81-45.63 0-82.43 39.03-82.43 87.16 0 4.97 0.42 9.81 1.14 14.54l-57.15 60.14-5.92 8.33c-13.15-24.94-20.5-53.68-20.5-84.28 0-96.3 73.84-174.45 164.95-174.45 27.2 0 52.76 6.93 75.4 19.29l-64.22 70.08z m52.05 135.53c21.74-23.26 27.17-55.48 16.31-81.39l-96.42 103.16c26.59 9.08 58.38 1.48 80.11-21.77z" }, null, -1 /* CACHED */)
     ])))
   }
   const DisplayNone = /*#__PURE__*/_export_sfc(_sfc_main$R, [['render',_sfc_render$9]]);
 
   const _sfc_main$Q = {  };
 
-  const _hoisted_1$w = {
+  const _hoisted_1$x = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$8(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1 /* CACHED */)
     ])))
   }
   const FlexDirectionColumn = /*#__PURE__*/_export_sfc(_sfc_main$Q, [['render',_sfc_render$8]]);
 
   const _sfc_main$P = {  };
 
-  const _hoisted_1$v = {
+  const _hoisted_1$w = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$7(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z" }, null, -1 /* CACHED */)
     ])))
   }
   const FlexDirectionColumnReverse = /*#__PURE__*/_export_sfc(_sfc_main$P, [['render',_sfc_render$7]]);
 
   const _sfc_main$O = {  };
 
-  const _hoisted_1$u = {
+  const _hoisted_1$v = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$6(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1 /* CACHED */)
     ])))
   }
   const FlexDirectionRow = /*#__PURE__*/_export_sfc(_sfc_main$O, [['render',_sfc_render$6]]);
 
   const _sfc_main$N = {  };
 
-  const _hoisted_1$t = {
+  const _hoisted_1$u = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$5(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1 /* CACHED */)
     ])))
   }
   const FlexDirectionRowReverse = /*#__PURE__*/_export_sfc(_sfc_main$N, [['render',_sfc_render$5]]);
 
   const _sfc_main$M = {  };
 
-  const _hoisted_1$s = {
+  const _hoisted_1$t = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$4(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1 /* CACHED */)
     ])))
   }
   const JustifyContentCenter = /*#__PURE__*/_export_sfc(_sfc_main$M, [['render',_sfc_render$4]]);
 
   const _sfc_main$L = {  };
 
-  const _hoisted_1$r = {
+  const _hoisted_1$s = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$3(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1 /* CACHED */)
     ])))
   }
   const JustifyContentFlexEnd = /*#__PURE__*/_export_sfc(_sfc_main$L, [['render',_sfc_render$3]]);
 
   const _sfc_main$K = {  };
 
-  const _hoisted_1$q = {
+  const _hoisted_1$r = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$2(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1 /* CACHED */)
     ])))
   }
   const JustifyContentFlexStart = /*#__PURE__*/_export_sfc(_sfc_main$K, [['render',_sfc_render$2]]);
 
   const _sfc_main$J = {  };
 
-  const _hoisted_1$p = {
+  const _hoisted_1$q = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render$1(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1 /* CACHED */)
     ])))
   }
   const JustifyContentSpaceAround = /*#__PURE__*/_export_sfc(_sfc_main$J, [['render',_sfc_render$1]]);
 
   const _sfc_main$I = {  };
 
-  const _hoisted_1$o = {
+  const _hoisted_1$p = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 1024 1024"
   };
 
   function _sfc_render(_ctx, _cache) {
-    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$o, _cache[0] || (_cache[0] = [
-      vue.createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1 /* HOISTED */)
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1 /* CACHED */)
     ])))
   }
   const JustifyContentSpaceBetween = /*#__PURE__*/_export_sfc(_sfc_main$I, [['render',_sfc_render]]);
@@ -12398,6 +12494,13 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const positionText = {
+        static: "不定位",
+        relative: "相对定位",
+        absolute: "绝对定位",
+        fixed: "固定定位",
+        sticky: "粘性定位"
+      };
       const config = {
         items: [
           {
@@ -12407,9 +12510,9 @@
             type: "data-source-field-select",
             fieldConfig: {
               type: "select",
-              options: ["static", "relative", "absolute", "fixed", "sticky"].map((item) => ({
+              options: Object.keys(positionText).map((item) => ({
                 value: item,
-                text: item
+                text: `${item}(${positionText[item]})`
               }))
             }
           },
@@ -12483,7 +12586,7 @@
     }
   });
 
-  const _hoisted_1$n = { class: "border-box-container" };
+  const _hoisted_1$o = { class: "border-box-container" };
   const _hoisted_2$a = { class: "border-icon-container" };
   const _hoisted_3$3 = { class: "border-icon-container-row" };
   const _hoisted_4$3 = { class: "border-icon-container-row" };
@@ -12542,7 +12645,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           vue.createElementVNode("div", _hoisted_2$a, [
             vue.createElementVNode("div", _hoisted_3$3, [
               vue.createElementVNode(
@@ -12659,7 +12762,7 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-style-setter" };
+  const _hoisted_1$n = { class: "m-fields-style-setter" };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsStyleSetter"
@@ -12713,7 +12816,7 @@
         emit("change", v, eventData);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           vue.createVNode(vue.unref(designPlugin.TMagicCollapse), { "model-value": collapseValue.value }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createElementBlock(
@@ -12755,7 +12858,7 @@
     }
   });
 
-  const _hoisted_1$l = {
+  const _hoisted_1$m = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
@@ -12851,10 +12954,10 @@
             default: vue.withCtx(() => _cache[2] || (_cache[2] = [
               vue.createTextVNode("取消")
             ])),
-            _: 1
-            /* STABLE */
+            _: 1,
+            __: [2]
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           val.value ? (vue.openBlock(), vue.createElementBlock(
             vue.Fragment,
             { key: 0 },
@@ -12924,8 +13027,8 @@
                 default: vue.withCtx(() => _cache[3] || (_cache[3] = [
                   vue.createTextVNode("点击此处选择")
                 ])),
-                _: 1
-                /* STABLE */
+                _: 1,
+                __: [3]
               }, 8, ["disabled", "size"])
             ]),
             _: 1
@@ -13163,7 +13266,7 @@
     }
   });
 
-  const _hoisted_1$k = {
+  const _hoisted_1$l = {
     key: 1,
     class: "menu-item-text"
   };
@@ -13244,7 +13347,7 @@
               direction: _ctx.data.direction || "vertical"
             }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock(
               "div",
-              _hoisted_1$k,
+              _hoisted_1$l,
               vue.toDisplayString(_ctx.data.text),
               1
               /* TEXT */
@@ -13378,7 +13481,7 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$k = {
     key: 0,
     id: "m-editor-page-bar-add-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -13406,7 +13509,7 @@
         editorService.add(pageConfig);
       };
       return (_ctx, _cache) => {
-        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
             reference: vue.withCtx(() => [
               vue.createVNode(_sfc_main$1r, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
@@ -13439,7 +13542,7 @@
     }
   });
 
-  const _hoisted_1$i = {
+  const _hoisted_1$j = {
     class: "m-editor-page-bar",
     ref: "pageBar"
   };
@@ -13479,6 +13582,7 @@
       });
       vue.onMounted(() => {
         pageBarEl.value && resizeObserver.observe(pageBarEl.value);
+        itemsContainerEl.value && resizeObserver.observe(itemsContainerEl.value);
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
@@ -13526,7 +13630,7 @@
               let beforeDragList = [];
               const options = {
                 ...{
-                  dataIdAttr: "page-id",
+                  dataIdAttr: "data-page-id",
                   // 获取排序后的数据
                   onStart: async (event) => {
                     if (typeof props.pageBarSortOptions?.beforeStart === "function") {
@@ -13568,7 +13672,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
           "div",
-          _hoisted_1$i,
+          _hoisted_1$j,
           [
             vue.renderSlot(_ctx.$slots, "prepend"),
             _ctx.length ? (vue.openBlock(), vue.createElementBlock(
@@ -13602,7 +13706,7 @@
     }
   });
 
-  const _hoisted_1$h = {
+  const _hoisted_1$i = {
     key: 0,
     id: "m-editor-page-bar-list-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -13623,7 +13727,7 @@
         await editorService.select(id);
       };
       return (_ctx, _cache) => {
-        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
@@ -13671,7 +13775,7 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+  const _hoisted_1$h = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "Search",
     props: {
@@ -13710,7 +13814,7 @@
         emit("search", values);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           vue.createVNode(_sfc_main$1r, {
             icon: vue.unref(iconsVue.Search),
             onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
@@ -13735,7 +13839,7 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_1$g = { class: "m-editor-page-bar-tabs" };
   const _hoisted_2$6 = ["data-page-id", "onClick"];
   const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$2 = ["title"];
@@ -13814,7 +13918,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.createVNode(_sfc_main$x, {
             ref: "pageBarScrollContainer",
             "page-bar-sort-options": _ctx.pageBarSortOptions,
@@ -13917,7 +14021,7 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-empty-panel" };
+  const _hoisted_1$f = { class: "m-editor-empty-panel" };
   const _hoisted_2$5 = { class: "m-editor-empty-content" };
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -13939,7 +14043,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
@@ -13953,7 +14057,7 @@
                 null,
                 "新增页面",
                 -1
-                /* HOISTED */
+                /* CACHED */
               ))
             ]),
             !_ctx.disabledPageFragment ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -13969,7 +14073,7 @@
                 null,
                 "新增页面片",
                 -1
-                /* HOISTED */
+                /* CACHED */
               ))
             ])) : vue.createCommentVNode("v-if", true)
           ])
@@ -13978,7 +14082,7 @@
     }
   });
 
-  const _hoisted_1$d = {
+  const _hoisted_1$e = {
     class: "m-editor",
     ref: "content",
     style: { "min-width": "900px" }
@@ -14049,7 +14153,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
           "div",
-          _hoisted_1$d,
+          _hoisted_1$e,
           [
             vue.renderSlot(_ctx.$slots, "header"),
             vue.renderSlot(_ctx.$slots, "nav"),
@@ -14343,7 +14447,7 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-props-form-panel" };
+  const _hoisted_1$d = { class: "m-editor-props-form-panel" };
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFormPanel"
@@ -14358,7 +14462,7 @@
       labelPosition: {},
       extendState: { type: Function }
     },
-    emits: ["submit", "submit-error", "form-error", "mounted"],
+    emits: ["submit", "submit-error", "form-error", "mounted", "unmounted"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -14380,6 +14484,9 @@
       vue.onMounted(() => {
         emit("mounted", internalInstance?.proxy);
       });
+      vue.onUnmounted(() => {
+        emit("unmounted");
+      });
       const submit = async (v, eventData) => {
         try {
           const values = await configFormRef.value?.submitForm();
@@ -14396,7 +14503,7 @@
       };
       __expose({ configForm: configFormRef, submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
           vue.renderSlot(_ctx.$slots, "props-form-panel-header"),
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
             default: vue.withCtx(() => [
@@ -14491,7 +14598,7 @@
     };
   };
 
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     ref: "propsPanel",
     class: "m-editor-props-panel"
   };
@@ -14505,7 +14612,7 @@
       disabledShowSrc: { type: Boolean },
       extendState: { type: Function }
     },
-    emits: ["submit-error", "form-error", "mounted"],
+    emits: ["submit-error", "form-error", "mounted", "unmounted"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const { editorService, uiService, propsService, storageService } = useServices();
@@ -14567,6 +14674,9 @@
           emit("mounted", propertyFormPanelRef.value);
         }
       };
+      const unmountedHandler = () => {
+        emit("unmounted");
+      };
       const propsPanelEl = vue.useTemplateRef("propsPanel");
       const propsPanelWidth = vue.ref(
         storageService.getItem(PROPS_PANEL_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || 300
@@ -14608,7 +14718,7 @@
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
           "div",
-          _hoisted_1$b,
+          _hoisted_1$c,
           [
             vue.renderSlot(_ctx.$slots, "props-panel-header"),
             vue.createVNode(_sfc_main$q, {
@@ -14621,7 +14731,8 @@
               onSubmit: submit,
               onSubmitError: errorHandler,
               onFormError: errorHandler,
-              onMounted: mountedHandler
+              onMounted: mountedHandler,
+              onUnmounted: unmountedHandler
             }, null, 8, ["class", "config", "values", "disabledShowSrc", "extendState"]),
             vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
               key: 0,
@@ -14647,7 +14758,7 @@
                     null,
                     "样式",
                     -1
-                    /* HOISTED */
+                    /* CACHED */
                   )),
                   vue.createElementVNode("div", null, [
                     vue.createVNode(vue.unref(designPlugin.TMagicButton), {
@@ -14912,7 +15023,7 @@
     }
   });
 
-  const _hoisted_1$a = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
+  const _hoisted_1$b = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
   const _hoisted_2$3 = { class: "tree-node-label" };
   const _hoisted_3$1 = { class: "tree-node-tool" };
   const _hoisted_4$1 = {
@@ -15055,14 +15166,14 @@
               /* KEYED_FRAGMENT */
             ))
           ])) : vue.createCommentVNode("v-if", true)
-        ], 40, _hoisted_1$a)), [
+        ], 40, _hoisted_1$b)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$a = {
     key: 1,
     class: "m-editor-tree-empty"
   };
@@ -15119,7 +15230,7 @@
               }),
               128
               /* KEYED_FRAGMENT */
-            )) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+            )) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
               vue.createElementVNode(
                 "p",
                 null,
@@ -15382,7 +15493,7 @@
     };
   };
 
-  const _hoisted_1$8 = { class: "search-wrapper" };
+  const _hoisted_1$9 = { class: "search-wrapper" };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
@@ -15437,7 +15548,7 @@
             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$8, [
+                  vue.createElementVNode("div", _hoisted_1$9, [
                     vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                     editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                       key: 0,
@@ -15449,8 +15560,8 @@
                       default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                         vue.createTextVNode("新增")
                       ])),
-                      _: 1
-                      /* STABLE */
+                      _: 1,
+                      __: [0]
                     }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true),
                     vue.renderSlot(_ctx.$slots, "code-block-panel-search")
                   ])
@@ -15856,7 +15967,7 @@
     };
   };
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -15936,7 +16047,7 @@
           [
             vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$7, [
+                vue.createElementVNode("div", _hoisted_1$8, [
                   vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                   vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicPopover), {
                     key: 0,
@@ -15953,8 +16064,8 @@
                         default: vue.withCtx(() => _cache[0] || (_cache[0] = [
                           vue.createTextVNode("新增")
                         ])),
-                        _: 1
-                        /* STABLE */
+                        _: 1,
+                        __: [0]
                       })
                     ]),
                     default: vue.withCtx(() => [
@@ -16021,7 +16132,7 @@
     }
   });
 
-  const _hoisted_1$6 = {
+  const _hoisted_1$7 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -16036,7 +16147,7 @@
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, _cache[0] || (_cache[0] = [
           vue.createElementVNode(
             "path",
             {
@@ -16045,7 +16156,7 @@
             },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           ),
           vue.createElementVNode(
             "path",
@@ -16055,7 +16166,7 @@
             },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )
         ]));
       };
@@ -16839,7 +16950,7 @@
     }
   });
 
-  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _hoisted_1$6 = ["onClick", "onDragstart"];
   const _hoisted_2$2 = ["title"];
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -16974,7 +17085,7 @@
                                         title: item.text
                                       }, vue.toDisplayString(item.text), 9, _hoisted_2$2)
                                     ])
-                                  ], 40, _hoisted_1$5);
+                                  ], 40, _hoisted_1$6);
                                 }),
                                 128
                                 /* KEYED_FRAGMENT */
@@ -17004,7 +17115,7 @@
     }
   });
 
-  const _hoisted_1$4 = {
+  const _hoisted_1$5 = {
     key: 0,
     class: "m-editor-sidebar"
   };
@@ -17037,7 +17148,7 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const { depService, uiService } = useServices();
+      const { depService, uiService, propsService } = useServices();
       const collecting = vue.computed(() => depService.get("collecting"));
       const taskLength = vue.computed(() => depService.get("taskLength"));
       const tipsBarVisible = vue.ref(true);
@@ -17112,7 +17223,17 @@
         };
         return typeof data === "string" ? map[data] : data;
       };
-      const sideBarItems = vue.computed(() => props.data.items.map((item) => getItemConfig(item)));
+      const sideBarItems = vue.computed(
+        () => props.data.items.map((item) => getItemConfig(item)).filter((item) => {
+          if (item.$key === SideItemKey.DATA_SOURCE) {
+            return !propsService.getDisabledDataSource();
+          }
+          if (item.$key === SideItemKey.CODE_BLOCK) {
+            return !propsService.getDisabledCodeBlock();
+          }
+          return true;
+        })
+      );
       vue.watch(
         sideBarItems,
         (items) => {
@@ -17163,7 +17284,7 @@
           vue.Fragment,
           null,
           [
-            _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+            _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
               vue.createElementVNode("div", _hoisted_2$1, [
                 (vue.openBlock(true), vue.createElementBlock(
                   vue.Fragment,
@@ -17517,7 +17638,7 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     class: "m-editor-scroll-viewer-container",
     ref: "container"
   };
@@ -17596,7 +17717,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(
           "div",
-          _hoisted_1$3,
+          _hoisted_1$4,
           [
             vue.createElementVNode(
               "div",
@@ -17750,19 +17871,25 @@
     }
   });
 
+  const _hoisted_1$3 = {
+    key: 0,
+    class: "m-editor-stage-overlay"
+  };
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "StageOverlay",
     setup(__props) {
-      const { stageOverlayService, editorService } = useServices();
+      const { stageOverlayService, editorService, uiService } = useServices();
       const stageOptions = vue.inject("stageOptions");
       const stageOverlayEl = vue.useTemplateRef("stageOverlay");
       const stageOverlayVisible = vue.computed(() => stageOverlayService.get("stageOverlayVisible"));
       const wrapWidth = vue.computed(() => stageOverlayService.get("wrapWidth"));
       const wrapHeight = vue.computed(() => stageOverlayService.get("wrapHeight"));
       const stage = vue.computed(() => editorService.get("stage"));
+      const zoom = vue.computed(() => uiService.get("zoom"));
+      const columnWidth = vue.computed(() => uiService.get("columnWidth"));
+      const frameworkRect = vue.computed(() => uiService.get("frameworkRect"));
       const style = vue.computed(() => ({
-        width: `${wrapWidth.value}px`,
-        height: `${wrapHeight.value}px`
+        transform: `scale(${zoom.value})`
       }));
       vue.watch(stage, (stage2) => {
         if (stage2) {
@@ -17774,6 +17901,11 @@
           stageOverlayService.closeOverlay();
         }
       });
+      vue.watch(zoom, (zoom2) => {
+        const stage2 = stageOverlayService.get("stage");
+        if (!stage2 || !zoom2) return;
+        stage2.setZoom(zoom2);
+      });
       vue.watch(stageOverlayEl, (stageOverlay) => {
         const subStage = stageOverlayService.createStage(stageOptions);
         stageOverlayService.set("stage", subStage);
@@ -17794,14 +17926,10 @@
         stageOverlayService.closeOverlay();
       };
       return (_ctx, _cache) => {
-        return stageOverlayVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "m-editor-stage-overlay",
-          onClick: closeOverlayHandler
-        }, [
+        return stageOverlayVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           vue.createVNode(vue.unref(designPlugin.TMagicIcon), {
             class: "m-editor-stage-overlay-close",
-            size: "20",
+            size: "30",
             onClick: closeOverlayHandler
           }, {
             default: vue.withCtx(() => [
@@ -17810,19 +17938,30 @@
             _: 1
             /* STABLE */
           }),
-          vue.createElementVNode(
-            "div",
-            {
-              ref: "stageOverlay",
-              class: "m-editor-stage-overlay-container",
-              style: vue.normalizeStyle(style.value),
-              onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-              }, ["stop"]))
-            },
-            null,
-            4
-            /* STYLE */
-          )
+          vue.createVNode(_sfc_main$8, {
+            class: "m-editor-stage",
+            width: wrapWidth.value,
+            height: wrapHeight.value,
+            "wrap-width": columnWidth.value.center,
+            "wrap-height": frameworkRect.value.height,
+            zoom: zoom.value
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                {
+                  ref: "stageOverlay",
+                  class: "m-editor-stage-container",
+                  style: vue.normalizeStyle(style.value)
+                },
+                null,
+                4
+                /* STYLE */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["width", "height", "wrap-width", "wrap-height", "zoom"])
         ])) : vue.createCommentVNode("v-if", true);
       };
     }
@@ -17852,7 +17991,7 @@
             },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           ),
           vue.createElementVNode(
             "path",
@@ -17865,7 +18004,7 @@
             },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           ),
           vue.createElementVNode(
             "path",
@@ -17878,7 +18017,7 @@
             },
             null,
             -1
-            /* HOISTED */
+            /* CACHED */
           )
         ]));
       };
@@ -18055,11 +18194,6 @@
         }
         stage.on("runtime-ready", (rt) => {
           runtime = rt;
-          root.value && runtime?.updateRootConfig?.(cloneDeep(vue.toRaw(root.value)));
-          page.value?.id && runtime?.updatePageId?.(page.value.id);
-          setTimeout(() => {
-            node.value && stage?.select(vue.toRaw(node.value.id));
-          });
         });
       });
       vue.onBeforeUnmount(() => {
@@ -18082,17 +18216,23 @@
             timeoutId = null;
           }, 3e3);
           runtime.updatePageId?.(page2.id);
-          vue.nextTick(() => {
-            stage?.select(page2.id);
-          });
+          const unWatch = vue.watch(
+            stageLoading,
+            () => {
+              if (stageLoading.value) {
+                return;
+              }
+              vue.nextTick(() => {
+                stage?.select(page2.id);
+                unWatch();
+              });
+            },
+            {
+              immediate: true
+            }
+          );
         }
       });
-      const rootChangeHandler = (root2) => {
-        if (runtime && root2) {
-          runtime.updateRootConfig?.(cloneDeep(vue.toRaw(root2)));
-        }
-      };
-      editorService.on("root-change", rootChangeHandler);
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           uiService.set("stageContainerRect", {
@@ -18109,10 +18249,10 @@
       });
       vue.onBeforeUnmount(() => {
         stage?.destroy();
+        stage = null;
         resizeObserver.disconnect();
         editorService.set("stage", null);
         keybindingService.unregisterEl("stage");
-        editorService.off("root-change", rootChangeHandler);
       });
       const parseDSL = getEditorConfig("parseDSL");
       const contextmenuHandler = (e) => {
@@ -18188,7 +18328,7 @@
             width: 60,
             height: 50
           },
-          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrapRef)?.container?.focus())
+          onClick: _cache[0] || (_cache[0] = ($event) => stageWrapRef.value?.container?.focus())
         }, {
           content: vue.withCtx(() => [
             !_ctx.disabledStageOverlay ? (vue.openBlock(), vue.createBlock(_sfc_main$6, { key: 0 })) : vue.createCommentVNode("v-if", true),
@@ -18746,33 +18886,1074 @@
   }
   const dataSourceService = new DataSource();
 
-  const jsContent = "(function () {\n  'use strict';\n\n  var events = {exports: {}};\n\n  var hasRequiredEvents;\n\n  function requireEvents () {\n  \tif (hasRequiredEvents) return events.exports;\n  \thasRequiredEvents = 1;\n\n  \tvar R = typeof Reflect === 'object' ? Reflect : null;\n  \tvar ReflectApply = R && typeof R.apply === 'function'\n  \t  ? R.apply\n  \t  : function ReflectApply(target, receiver, args) {\n  \t    return Function.prototype.apply.call(target, receiver, args);\n  \t  };\n\n  \tvar ReflectOwnKeys;\n  \tif (R && typeof R.ownKeys === 'function') {\n  \t  ReflectOwnKeys = R.ownKeys;\n  \t} else if (Object.getOwnPropertySymbols) {\n  \t  ReflectOwnKeys = function ReflectOwnKeys(target) {\n  \t    return Object.getOwnPropertyNames(target)\n  \t      .concat(Object.getOwnPropertySymbols(target));\n  \t  };\n  \t} else {\n  \t  ReflectOwnKeys = function ReflectOwnKeys(target) {\n  \t    return Object.getOwnPropertyNames(target);\n  \t  };\n  \t}\n\n  \tfunction ProcessEmitWarning(warning) {\n  \t  if (console && console.warn) console.warn(warning);\n  \t}\n\n  \tvar NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {\n  \t  return value !== value;\n  \t};\n\n  \tfunction EventEmitter() {\n  \t  EventEmitter.init.call(this);\n  \t}\n  \tevents.exports = EventEmitter;\n  \tevents.exports.once = once;\n\n  \t// Backwards-compat with node 0.10.x\n  \tEventEmitter.EventEmitter = EventEmitter;\n\n  \tEventEmitter.prototype._events = undefined;\n  \tEventEmitter.prototype._eventsCount = 0;\n  \tEventEmitter.prototype._maxListeners = undefined;\n\n  \t// By default EventEmitters will print a warning if more than 10 listeners are\n  \t// added to it. This is a useful default which helps finding memory leaks.\n  \tvar defaultMaxListeners = 10;\n\n  \tfunction checkListener(listener) {\n  \t  if (typeof listener !== 'function') {\n  \t    throw new TypeError('The \"listener\" argument must be of type Function. Received type ' + typeof listener);\n  \t  }\n  \t}\n\n  \tObject.defineProperty(EventEmitter, 'defaultMaxListeners', {\n  \t  enumerable: true,\n  \t  get: function() {\n  \t    return defaultMaxListeners;\n  \t  },\n  \t  set: function(arg) {\n  \t    if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {\n  \t      throw new RangeError('The value of \"defaultMaxListeners\" is out of range. It must be a non-negative number. Received ' + arg + '.');\n  \t    }\n  \t    defaultMaxListeners = arg;\n  \t  }\n  \t});\n\n  \tEventEmitter.init = function() {\n\n  \t  if (this._events === undefined ||\n  \t      this._events === Object.getPrototypeOf(this)._events) {\n  \t    this._events = Object.create(null);\n  \t    this._eventsCount = 0;\n  \t  }\n\n  \t  this._maxListeners = this._maxListeners || undefined;\n  \t};\n\n  \t// Obviously not all Emitters should be limited to 10. This function allows\n  \t// that to be increased. Set to zero for unlimited.\n  \tEventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {\n  \t  if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {\n  \t    throw new RangeError('The value of \"n\" is out of range. It must be a non-negative number. Received ' + n + '.');\n  \t  }\n  \t  this._maxListeners = n;\n  \t  return this;\n  \t};\n\n  \tfunction _getMaxListeners(that) {\n  \t  if (that._maxListeners === undefined)\n  \t    return EventEmitter.defaultMaxListeners;\n  \t  return that._maxListeners;\n  \t}\n\n  \tEventEmitter.prototype.getMaxListeners = function getMaxListeners() {\n  \t  return _getMaxListeners(this);\n  \t};\n\n  \tEventEmitter.prototype.emit = function emit(type) {\n  \t  var args = [];\n  \t  for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);\n  \t  var doError = (type === 'error');\n\n  \t  var events = this._events;\n  \t  if (events !== undefined)\n  \t    doError = (doError && events.error === undefined);\n  \t  else if (!doError)\n  \t    return false;\n\n  \t  // If there is no 'error' event listener then throw.\n  \t  if (doError) {\n  \t    var er;\n  \t    if (args.length > 0)\n  \t      er = args[0];\n  \t    if (er instanceof Error) {\n  \t      // Note: The comments on the `throw` lines are intentional, they show\n  \t      // up in Node's output if this results in an unhandled exception.\n  \t      throw er; // Unhandled 'error' event\n  \t    }\n  \t    // At least give some kind of context to the user\n  \t    var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));\n  \t    err.context = er;\n  \t    throw err; // Unhandled 'error' event\n  \t  }\n\n  \t  var handler = events[type];\n\n  \t  if (handler === undefined)\n  \t    return false;\n\n  \t  if (typeof handler === 'function') {\n  \t    ReflectApply(handler, this, args);\n  \t  } else {\n  \t    var len = handler.length;\n  \t    var listeners = arrayClone(handler, len);\n  \t    for (var i = 0; i < len; ++i)\n  \t      ReflectApply(listeners[i], this, args);\n  \t  }\n\n  \t  return true;\n  \t};\n\n  \tfunction _addListener(target, type, listener, prepend) {\n  \t  var m;\n  \t  var events;\n  \t  var existing;\n\n  \t  checkListener(listener);\n\n  \t  events = target._events;\n  \t  if (events === undefined) {\n  \t    events = target._events = Object.create(null);\n  \t    target._eventsCount = 0;\n  \t  } else {\n  \t    // To avoid recursion in the case that type === \"newListener\"! Before\n  \t    // adding it to the listeners, first emit \"newListener\".\n  \t    if (events.newListener !== undefined) {\n  \t      target.emit('newListener', type,\n  \t                  listener.listener ? listener.listener : listener);\n\n  \t      // Re-assign `events` because a newListener handler could have caused the\n  \t      // this._events to be assigned to a new object\n  \t      events = target._events;\n  \t    }\n  \t    existing = events[type];\n  \t  }\n\n  \t  if (existing === undefined) {\n  \t    // Optimize the case of one listener. Don't need the extra array object.\n  \t    existing = events[type] = listener;\n  \t    ++target._eventsCount;\n  \t  } else {\n  \t    if (typeof existing === 'function') {\n  \t      // Adding the second element, need to change to array.\n  \t      existing = events[type] =\n  \t        prepend ? [listener, existing] : [existing, listener];\n  \t      // If we've already got an array, just append.\n  \t    } else if (prepend) {\n  \t      existing.unshift(listener);\n  \t    } else {\n  \t      existing.push(listener);\n  \t    }\n\n  \t    // Check for listener leak\n  \t    m = _getMaxListeners(target);\n  \t    if (m > 0 && existing.length > m && !existing.warned) {\n  \t      existing.warned = true;\n  \t      // No error code for this since it is a Warning\n  \t      // eslint-disable-next-line no-restricted-syntax\n  \t      var w = new Error('Possible EventEmitter memory leak detected. ' +\n  \t                          existing.length + ' ' + String(type) + ' listeners ' +\n  \t                          'added. Use emitter.setMaxListeners() to ' +\n  \t                          'increase limit');\n  \t      w.name = 'MaxListenersExceededWarning';\n  \t      w.emitter = target;\n  \t      w.type = type;\n  \t      w.count = existing.length;\n  \t      ProcessEmitWarning(w);\n  \t    }\n  \t  }\n\n  \t  return target;\n  \t}\n\n  \tEventEmitter.prototype.addListener = function addListener(type, listener) {\n  \t  return _addListener(this, type, listener, false);\n  \t};\n\n  \tEventEmitter.prototype.on = EventEmitter.prototype.addListener;\n\n  \tEventEmitter.prototype.prependListener =\n  \t    function prependListener(type, listener) {\n  \t      return _addListener(this, type, listener, true);\n  \t    };\n\n  \tfunction onceWrapper() {\n  \t  if (!this.fired) {\n  \t    this.target.removeListener(this.type, this.wrapFn);\n  \t    this.fired = true;\n  \t    if (arguments.length === 0)\n  \t      return this.listener.call(this.target);\n  \t    return this.listener.apply(this.target, arguments);\n  \t  }\n  \t}\n\n  \tfunction _onceWrap(target, type, listener) {\n  \t  var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener };\n  \t  var wrapped = onceWrapper.bind(state);\n  \t  wrapped.listener = listener;\n  \t  state.wrapFn = wrapped;\n  \t  return wrapped;\n  \t}\n\n  \tEventEmitter.prototype.once = function once(type, listener) {\n  \t  checkListener(listener);\n  \t  this.on(type, _onceWrap(this, type, listener));\n  \t  return this;\n  \t};\n\n  \tEventEmitter.prototype.prependOnceListener =\n  \t    function prependOnceListener(type, listener) {\n  \t      checkListener(listener);\n  \t      this.prependListener(type, _onceWrap(this, type, listener));\n  \t      return this;\n  \t    };\n\n  \t// Emits a 'removeListener' event if and only if the listener was removed.\n  \tEventEmitter.prototype.removeListener =\n  \t    function removeListener(type, listener) {\n  \t      var list, events, position, i, originalListener;\n\n  \t      checkListener(listener);\n\n  \t      events = this._events;\n  \t      if (events === undefined)\n  \t        return this;\n\n  \t      list = events[type];\n  \t      if (list === undefined)\n  \t        return this;\n\n  \t      if (list === listener || list.listener === listener) {\n  \t        if (--this._eventsCount === 0)\n  \t          this._events = Object.create(null);\n  \t        else {\n  \t          delete events[type];\n  \t          if (events.removeListener)\n  \t            this.emit('removeListener', type, list.listener || listener);\n  \t        }\n  \t      } else if (typeof list !== 'function') {\n  \t        position = -1;\n\n  \t        for (i = list.length - 1; i >= 0; i--) {\n  \t          if (list[i] === listener || list[i].listener === listener) {\n  \t            originalListener = list[i].listener;\n  \t            position = i;\n  \t            break;\n  \t          }\n  \t        }\n\n  \t        if (position < 0)\n  \t          return this;\n\n  \t        if (position === 0)\n  \t          list.shift();\n  \t        else {\n  \t          spliceOne(list, position);\n  \t        }\n\n  \t        if (list.length === 1)\n  \t          events[type] = list[0];\n\n  \t        if (events.removeListener !== undefined)\n  \t          this.emit('removeListener', type, originalListener || listener);\n  \t      }\n\n  \t      return this;\n  \t    };\n\n  \tEventEmitter.prototype.off = EventEmitter.prototype.removeListener;\n\n  \tEventEmitter.prototype.removeAllListeners =\n  \t    function removeAllListeners(type) {\n  \t      var listeners, events, i;\n\n  \t      events = this._events;\n  \t      if (events === undefined)\n  \t        return this;\n\n  \t      // not listening for removeListener, no need to emit\n  \t      if (events.removeListener === undefined) {\n  \t        if (arguments.length === 0) {\n  \t          this._events = Object.create(null);\n  \t          this._eventsCount = 0;\n  \t        } else if (events[type] !== undefined) {\n  \t          if (--this._eventsCount === 0)\n  \t            this._events = Object.create(null);\n  \t          else\n  \t            delete events[type];\n  \t        }\n  \t        return this;\n  \t      }\n\n  \t      // emit removeListener for all listeners on all events\n  \t      if (arguments.length === 0) {\n  \t        var keys = Object.keys(events);\n  \t        var key;\n  \t        for (i = 0; i < keys.length; ++i) {\n  \t          key = keys[i];\n  \t          if (key === 'removeListener') continue;\n  \t          this.removeAllListeners(key);\n  \t        }\n  \t        this.removeAllListeners('removeListener');\n  \t        this._events = Object.create(null);\n  \t        this._eventsCount = 0;\n  \t        return this;\n  \t      }\n\n  \t      listeners = events[type];\n\n  \t      if (typeof listeners === 'function') {\n  \t        this.removeListener(type, listeners);\n  \t      } else if (listeners !== undefined) {\n  \t        // LIFO order\n  \t        for (i = listeners.length - 1; i >= 0; i--) {\n  \t          this.removeListener(type, listeners[i]);\n  \t        }\n  \t      }\n\n  \t      return this;\n  \t    };\n\n  \tfunction _listeners(target, type, unwrap) {\n  \t  var events = target._events;\n\n  \t  if (events === undefined)\n  \t    return [];\n\n  \t  var evlistener = events[type];\n  \t  if (evlistener === undefined)\n  \t    return [];\n\n  \t  if (typeof evlistener === 'function')\n  \t    return unwrap ? [evlistener.listener || evlistener] : [evlistener];\n\n  \t  return unwrap ?\n  \t    unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);\n  \t}\n\n  \tEventEmitter.prototype.listeners = function listeners(type) {\n  \t  return _listeners(this, type, true);\n  \t};\n\n  \tEventEmitter.prototype.rawListeners = function rawListeners(type) {\n  \t  return _listeners(this, type, false);\n  \t};\n\n  \tEventEmitter.listenerCount = function(emitter, type) {\n  \t  if (typeof emitter.listenerCount === 'function') {\n  \t    return emitter.listenerCount(type);\n  \t  } else {\n  \t    return listenerCount.call(emitter, type);\n  \t  }\n  \t};\n\n  \tEventEmitter.prototype.listenerCount = listenerCount;\n  \tfunction listenerCount(type) {\n  \t  var events = this._events;\n\n  \t  if (events !== undefined) {\n  \t    var evlistener = events[type];\n\n  \t    if (typeof evlistener === 'function') {\n  \t      return 1;\n  \t    } else if (evlistener !== undefined) {\n  \t      return evlistener.length;\n  \t    }\n  \t  }\n\n  \t  return 0;\n  \t}\n\n  \tEventEmitter.prototype.eventNames = function eventNames() {\n  \t  return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];\n  \t};\n\n  \tfunction arrayClone(arr, n) {\n  \t  var copy = new Array(n);\n  \t  for (var i = 0; i < n; ++i)\n  \t    copy[i] = arr[i];\n  \t  return copy;\n  \t}\n\n  \tfunction spliceOne(list, index) {\n  \t  for (; index + 1 < list.length; index++)\n  \t    list[index] = list[index + 1];\n  \t  list.pop();\n  \t}\n\n  \tfunction unwrapListeners(arr) {\n  \t  var ret = new Array(arr.length);\n  \t  for (var i = 0; i < ret.length; ++i) {\n  \t    ret[i] = arr[i].listener || arr[i];\n  \t  }\n  \t  return ret;\n  \t}\n\n  \tfunction once(emitter, name) {\n  \t  return new Promise(function (resolve, reject) {\n  \t    function errorListener(err) {\n  \t      emitter.removeListener(name, resolver);\n  \t      reject(err);\n  \t    }\n\n  \t    function resolver() {\n  \t      if (typeof emitter.removeListener === 'function') {\n  \t        emitter.removeListener('error', errorListener);\n  \t      }\n  \t      resolve([].slice.call(arguments));\n  \t    }\n  \t    eventTargetAgnosticAddListener(emitter, name, resolver, { once: true });\n  \t    if (name !== 'error') {\n  \t      addErrorHandlerIfEventEmitter(emitter, errorListener, { once: true });\n  \t    }\n  \t  });\n  \t}\n\n  \tfunction addErrorHandlerIfEventEmitter(emitter, handler, flags) {\n  \t  if (typeof emitter.on === 'function') {\n  \t    eventTargetAgnosticAddListener(emitter, 'error', handler, flags);\n  \t  }\n  \t}\n\n  \tfunction eventTargetAgnosticAddListener(emitter, name, listener, flags) {\n  \t  if (typeof emitter.on === 'function') {\n  \t    if (flags.once) {\n  \t      emitter.once(name, listener);\n  \t    } else {\n  \t      emitter.on(name, listener);\n  \t    }\n  \t  } else if (typeof emitter.addEventListener === 'function') {\n  \t    // EventTarget does not have `error` event semantics like Node\n  \t    // EventEmitters, we do not listen for `error` events here.\n  \t    emitter.addEventListener(name, function wrapListener(arg) {\n  \t      // IE does not have builtin `{ once: true }` support so we\n  \t      // have to do it manually.\n  \t      if (flags.once) {\n  \t        emitter.removeEventListener(name, wrapListener);\n  \t      }\n  \t      listener(arg);\n  \t    });\n  \t  } else {\n  \t    throw new TypeError('The \"emitter\" argument must be of type EventEmitter. Received type ' + typeof emitter);\n  \t  }\n  \t}\n  \treturn events.exports;\n  }\n\n  requireEvents();\n\n  /*! *****************************************************************************\r\n  Copyright (c) Microsoft Corporation.\r\n\r\n  Permission to use, copy, modify, and/or distribute this software for any\r\n  purpose with or without fee is hereby granted.\r\n\r\n  THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\n  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\n  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\n  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\n  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\n  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\n  PERFORMANCE OF THIS SOFTWARE.\r\n  ***************************************************************************** */\r\n\r\n\n  let cachedTextEncoder = new TextEncoder(\"utf-8\");\n\n  typeof cachedTextEncoder.encodeInto === \"function\"\n      ? function (arg, view) {\n          return cachedTextEncoder.encodeInto(arg, view);\n        }\n      : function (arg, view) {\n          const buf = cachedTextEncoder.encode(arg);\n          view.set(buf);\n          return {\n            read: arg.length,\n            written: buf.length,\n          };\n        };\n\n  const NODE_CONDS_KEY = \"displayConds\";\n  var HookType = /* @__PURE__ */ ((HookType2) => {\n    HookType2[\"CODE\"] = \"code\";\n    return HookType2;\n  })(HookType || {});\n\n  const isObject = (obj) => Object.prototype.toString.call(obj) === \"[object Object]\";\n  const getKeysArray = (keys) => (\n    // 将 array[0] 转成 array.0\n    `${keys}`.replaceAll(/\\[(\\d+)\\]/g, \".$1\").split(\".\")\n  );\n  const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = \"ds-field::\";\n  const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;\n\n  var DepTargetType = /* @__PURE__ */ ((DepTargetType2) => {\n    DepTargetType2[\"DEFAULT\"] = \"default\";\n    DepTargetType2[\"CODE_BLOCK\"] = \"code-block\";\n    DepTargetType2[\"DATA_SOURCE\"] = \"data-source\";\n    DepTargetType2[\"DATA_SOURCE_METHOD\"] = \"data-source-method\";\n    DepTargetType2[\"DATA_SOURCE_COND\"] = \"data-source-cond\";\n    return DepTargetType2;\n  })(DepTargetType || {});\n\n  class Target {\n    /**\n     * 如何识别目标\n     */\n    isTarget;\n    /**\n     * 目标id，不可重复\n     * 例如目标是代码块，则为代码块id\n     */\n    id;\n    /**\n     * 目标名称，用于显示在依赖列表中\n     */\n    name;\n    /**\n     * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type\n     */\n    type = DepTargetType.DEFAULT;\n    /**\n     * 依赖详情\n     * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }\n     */\n    deps = {};\n    /**\n     * 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集\n     */\n    isCollectByDefault;\n    constructor(options) {\n      this.isTarget = options.isTarget;\n      this.id = options.id;\n      this.name = options.name;\n      this.isCollectByDefault = options.isCollectByDefault ?? true;\n      if (options.type) {\n        this.type = options.type;\n      }\n      if (options.initialDeps) {\n        this.deps = options.initialDeps;\n      }\n    }\n    /**\n     * 更新依赖\n     * @param option 节点配置\n     * @param key 哪个key配置了这个目标的id\n     */\n    updateDep({ id, name, key, data }) {\n      const dep = this.deps[id] || {\n        name,\n        keys: []\n      };\n      dep.name = name;\n      dep.data = data;\n      this.deps[id] = dep;\n      if (dep.keys.indexOf(key) === -1) {\n        dep.keys.push(key);\n      }\n    }\n    /**\n     * 删除依赖\n     * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖\n     * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key\n     * @returns void\n     */\n    removeDep(id, key) {\n      if (typeof id === \"undefined\") {\n        Object.keys(this.deps).forEach((depKey) => {\n          delete this.deps[depKey];\n        });\n        return;\n      }\n      const dep = this.deps[id];\n      if (!dep) return;\n      if (key) {\n        const index = dep.keys.indexOf(key);\n        dep.keys.splice(index, 1);\n        if (dep.keys.length === 0) {\n          delete this.deps[id];\n        }\n      } else {\n        delete this.deps[id];\n      }\n    }\n    /**\n     * 判断指定节点下的指定key是否存在在依赖列表中\n     * @param node 哪个节点\n     * @param key 哪个key\n     * @returns boolean\n     */\n    hasDep(id, key) {\n      const dep = this.deps[id];\n      return Boolean(dep?.keys.find((d) => d === key));\n    }\n    destroy() {\n      this.deps = {};\n    }\n  }\n\n  const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({\n    type: DepTargetType.CODE_BLOCK,\n    id,\n    initialDeps,\n    name: codeBlock.name,\n    isTarget: (_key, value) => {\n      if (id === value) {\n        return true;\n      }\n      if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) {\n        const index = value.hookData.findIndex((item) => item.codeId === id);\n        return Boolean(index > -1);\n      }\n      return false;\n    }\n  });\n  const isIncludeArrayField = (keys, fields) => {\n    let f = fields;\n    return keys.some((key, index) => {\n      const field = f.find(({ name }) => name === key);\n      f = field?.fields || [];\n      return field && field.type === \"array\" && // 不是整数\n      /^(?!\\d+$).*$/.test(`${keys[index + 1]}`) && index < keys.length - 1;\n    });\n  };\n  const isDataSourceTemplate = (value, ds, hasArray = false) => {\n    const templates = value.match(dataSourceTemplateRegExp) || [];\n    if (templates.length <= 0) {\n      return false;\n    }\n    const arrayFieldTemplates = [];\n    const fieldTemplates = [];\n    templates.forEach((tpl) => {\n      const expression = tpl.substring(2, tpl.length - 1);\n      const keys = getKeysArray(expression);\n      const dsId = keys.shift();\n      if (!dsId || dsId !== ds.id) {\n        return;\n      }\n      if (isIncludeArrayField(keys, ds.fields)) {\n        arrayFieldTemplates.push(tpl);\n      } else {\n        fieldTemplates.push(tpl);\n      }\n    });\n    if (hasArray) {\n      return arrayFieldTemplates.length > 0;\n    }\n    return fieldTemplates.length > 0;\n  };\n  const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === \"string\";\n  const isUseDataSourceField = (value, id) => {\n    if (!Array.isArray(value) || typeof value[0] !== \"string\") {\n      return false;\n    }\n    const [prefixId] = value;\n    const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);\n    if (prefixIndex === -1) {\n      return false;\n    }\n    const dsId = prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);\n    return dsId === id;\n  };\n  const isDataSourceTarget = (ds, key, value, hasArray = false) => {\n    if (!value || ![\"string\", \"object\"].includes(typeof value)) {\n      return false;\n    }\n    if (`${key}`.startsWith(NODE_CONDS_KEY)) {\n      return false;\n    }\n    if (typeof value === \"string\") {\n      return isDataSourceTemplate(value, ds, hasArray);\n    }\n    if (isObject(value) && value?.isBindDataSource && value.dataSourceId && value.dataSourceId === ds.id) {\n      return true;\n    }\n    if (isSpecificDataSourceTemplate(value, ds.id)) {\n      return true;\n    }\n    if (isUseDataSourceField(value, ds.id)) {\n      const [, ...keys] = value;\n      const includeArray = isIncludeArrayField(keys, ds.fields);\n      if (hasArray) {\n        return includeArray;\n      }\n      return !includeArray;\n    }\n    return false;\n  };\n  const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {\n    if (!Array.isArray(value) || !ds) {\n      return false;\n    }\n    const [dsId, ...keys] = value;\n    if (dsId !== ds.id || !`${key}`.startsWith(NODE_CONDS_KEY)) {\n      return false;\n    }\n    if (ds.fields?.find((field) => field.name === keys[0])) {\n      const includeArray = isIncludeArrayField(keys, ds.fields);\n      if (hasArray) {\n        return includeArray;\n      }\n      return !includeArray;\n    }\n    return false;\n  };\n  const createDataSourceTarget = (ds, initialDeps = {}) => new Target({\n    type: DepTargetType.DATA_SOURCE,\n    id: ds.id,\n    initialDeps,\n    isTarget: (key, value) => isDataSourceTarget(ds, key, value)\n  });\n  const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({\n    type: DepTargetType.DATA_SOURCE_COND,\n    id: ds.id,\n    initialDeps,\n    isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)\n  });\n  const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({\n    type: DepTargetType.DATA_SOURCE_METHOD,\n    id: ds.id,\n    initialDeps,\n    isTarget: (_key, value) => {\n      if (!Array.isArray(value)) {\n        return false;\n      }\n      const [dsId, methodName] = value;\n      if (!methodName || dsId !== ds.id) {\n        return false;\n      }\n      if (ds.methods?.find((method) => method.name === methodName)) {\n        return true;\n      }\n      if (ds.fields?.find((field) => field.name === methodName)) {\n        return false;\n      }\n      return true;\n    }\n  });\n  const traverseTarget = (targetsList, cb, type) => {\n    for (const targets of Object.values(targetsList)) {\n      for (const target of Object.values(targets)) {\n        if (type && target.type !== type) {\n          continue;\n        }\n        cb(target);\n      }\n    }\n  };\n\n  class Watcher {\n    targetsList = {};\n    childrenProp = \"items\";\n    idProp = \"id\";\n    nameProp = \"name\";\n    constructor(options) {\n      if (options?.initialTargets) {\n        this.targetsList = options.initialTargets;\n      }\n      if (options?.childrenProp) {\n        this.childrenProp = options.childrenProp;\n      }\n    }\n    getTargetsList() {\n      return this.targetsList;\n    }\n    /**\n     * 获取指定类型中的所有target\n     * @param type 分类\n     * @returns Target[]\n     */\n    getTargets(type = DepTargetType.DEFAULT) {\n      return this.targetsList[type] || {};\n    }\n    /**\n     * 添加新的目标\n     * @param target Target\n     */\n    addTarget(target) {\n      const targets = this.getTargets(target.type) || {};\n      this.targetsList[target.type] = targets;\n      targets[target.id] = target;\n    }\n    /**\n     * 获取指定id的target\n     * @param id target id\n     * @returns Target\n     */\n    getTarget(id, type = DepTargetType.DEFAULT) {\n      return this.getTargets(type)[id];\n    }\n    /**\n     * 判断是否存在指定id的target\n     * @param id target id\n     * @returns boolean\n     */\n    hasTarget(id, type = DepTargetType.DEFAULT) {\n      return Boolean(this.getTarget(id, type));\n    }\n    /**\n     * 判断是否存在指定类型的target\n     * @param type target type\n     * @returns boolean\n     */\n    hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {\n      return Object.keys(this.getTargets(type)).length > 0;\n    }\n    /**\n     * 删除指定id的target\n     * @param id target id\n     */\n    removeTarget(id, type = DepTargetType.DEFAULT) {\n      const targets = this.getTargets(type);\n      if (targets[id]) {\n        targets[id].destroy();\n        delete targets[id];\n      }\n    }\n    /**\n     * 删除指定分类的所有target\n     * @param type 分类\n     * @returns void\n     */\n    removeTargets(type = DepTargetType.DEFAULT) {\n      const targets = this.targetsList[type];\n      if (!targets) return;\n      for (const target of Object.values(targets)) {\n        target.destroy();\n      }\n      delete this.targetsList[type];\n    }\n    /**\n     * 删除所有target\n     */\n    clearTargets() {\n      for (const key of Object.keys(this.targetsList)) {\n        delete this.targetsList[key];\n      }\n    }\n    /**\n     * 收集依赖\n     * @param nodes 需要收集的节点\n     * @param deep 是否需要收集子节点\n     * @param type 强制收集指定类型的依赖\n     */\n    collect(nodes, depExtendedData = {}, deep = false, type) {\n      this.collectByCallback(nodes, type, ({ node, target }) => {\n        this.removeTargetDep(target, node);\n        this.collectItem(node, target, depExtendedData, deep);\n      });\n    }\n    collectByCallback(nodes, type, cb) {\n      traverseTarget(\n        this.targetsList,\n        (target) => {\n          if (!type && !target.isCollectByDefault) {\n            return;\n          }\n          for (const node of nodes) {\n            cb({ node, target });\n          }\n        },\n        type\n      );\n    }\n    /**\n     * 清除所有目标的依赖\n     * @param nodes 需要清除依赖的节点\n     */\n    clear(nodes, type) {\n      let { targetsList } = this;\n      if (type) {\n        targetsList = {\n          [type]: this.getTargets(type)\n        };\n      }\n      const clearedItemsNodeIds = [];\n      traverseTarget(targetsList, (target) => {\n        if (nodes) {\n          for (const node of nodes) {\n            target.removeDep(node[this.idProp]);\n            if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.includes(node[this.idProp])) {\n              clearedItemsNodeIds.push(node[this.idProp]);\n              this.clear(node[this.childrenProp]);\n            }\n          }\n        } else {\n          target.removeDep();\n        }\n      });\n    }\n    /**\n     * 清除指定类型的依赖\n     * @param type 类型\n     * @param nodes 需要清除依赖的节点\n     */\n    clearByType(type, nodes) {\n      this.clear(nodes, type);\n    }\n    collectItem(node, target, depExtendedData = {}, deep = false) {\n      const collectTarget = (config, prop = \"\") => {\n        const doCollect = (key, value) => {\n          const keyIsItems = key === this.childrenProp;\n          const fullKey = prop ? `${prop}.${key}` : key;\n          if (target.isTarget(fullKey, value)) {\n            target.updateDep({\n              id: node[this.idProp],\n              name: `${node[this.nameProp] || node[this.idProp]}`,\n              data: depExtendedData,\n              key: fullKey\n            });\n          } else if (!keyIsItems && Array.isArray(value)) {\n            for (let i = 0, l = value.length; i < l; i++) {\n              const item = value[i];\n              if (isObject(item)) {\n                collectTarget(item, `${fullKey}[${i}]`);\n              }\n            }\n          } else if (isObject(value)) {\n            collectTarget(value, fullKey);\n          }\n          if (keyIsItems && deep && Array.isArray(value)) {\n            for (const child of value) {\n              this.collectItem(child, target, depExtendedData, deep);\n            }\n          }\n        };\n        for (const [key, value] of Object.entries(config)) {\n          if (typeof value === \"undefined\" || value === \"\") continue;\n          doCollect(key, value);\n        }\n      };\n      collectTarget(node);\n    }\n    removeTargetDep(target, node, key) {\n      target.removeDep(node[this.idProp], key);\n      if (typeof key === \"undefined\" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) {\n        for (const item of node[this.childrenProp]) {\n          this.removeTargetDep(target, item, key);\n        }\n      }\n    }\n  }\n\n  const error = (...args) => {\n    if (process.env.NODE_ENV === \"development\") {\n      console.error(\"magic editor: \", ...args);\n    }\n  };\n\n  onmessage = (e) => {\n    const watcher = new Watcher({ initialTargets: {} });\n    const { dsl } = e.data;\n    try {\n      const mApp = eval(`(${dsl})`);\n      if (!mApp) {\n        postMessage({});\n      }\n      watcher.clearTargets();\n      if (mApp.codeBlocks) {\n        for (const [id, code] of Object.entries(mApp.codeBlocks)) {\n          watcher.addTarget(createCodeBlockTarget(id, code));\n        }\n      }\n      if (mApp.dataSources) {\n        for (const ds of mApp.dataSources) {\n          watcher.addTarget(createDataSourceTarget(ds, {}));\n          watcher.addTarget(createDataSourceMethodTarget(ds, {}));\n          watcher.addTarget(createDataSourceCondTarget(ds, {}));\n        }\n      }\n      watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {\n        watcher.collectItem(node, target, { pageId: node.id }, true);\n      });\n      const data = {\n        [DepTargetType.DATA_SOURCE]: {},\n        [DepTargetType.DATA_SOURCE_METHOD]: {},\n        [DepTargetType.DATA_SOURCE_COND]: {},\n        [DepTargetType.CODE_BLOCK]: {}\n      };\n      traverseTarget(watcher.getTargetsList(), (target) => {\n        data[target.type][target.id] = target.deps;\n      });\n      postMessage(data);\n    } catch (e2) {\n      error(e2);\n      postMessage({});\n    }\n  };\n\n})();\n";
-            const blob = typeof self !== "undefined" && self.Blob && new Blob([jsContent], { type: "text/javascript;charset=utf-8" });
-            function WorkerWrapper(options) {
-              let objURL;
-              try {
-                objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
-                if (!objURL) throw ''
-                const worker = new Worker(objURL, {
-          
-          name: options?.name
+  const jsContent = `(function () {
+  'use strict';
+
+  var events = {exports: {}};
+
+  var hasRequiredEvents;
+
+  function requireEvents () {
+  	if (hasRequiredEvents) return events.exports;
+  	hasRequiredEvents = 1;
+
+  	var R = typeof Reflect === 'object' ? Reflect : null;
+  	var ReflectApply = R && typeof R.apply === 'function'
+  	  ? R.apply
+  	  : function ReflectApply(target, receiver, args) {
+  	    return Function.prototype.apply.call(target, receiver, args);
+  	  };
+
+  	var ReflectOwnKeys;
+  	if (R && typeof R.ownKeys === 'function') {
+  	  ReflectOwnKeys = R.ownKeys;
+  	} else if (Object.getOwnPropertySymbols) {
+  	  ReflectOwnKeys = function ReflectOwnKeys(target) {
+  	    return Object.getOwnPropertyNames(target)
+  	      .concat(Object.getOwnPropertySymbols(target));
+  	  };
+  	} else {
+  	  ReflectOwnKeys = function ReflectOwnKeys(target) {
+  	    return Object.getOwnPropertyNames(target);
+  	  };
+  	}
+
+  	function ProcessEmitWarning(warning) {
+  	  if (console && console.warn) console.warn(warning);
+  	}
+
+  	var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
+  	  return value !== value;
+  	};
+
+  	function EventEmitter() {
+  	  EventEmitter.init.call(this);
+  	}
+  	events.exports = EventEmitter;
+  	events.exports.once = once;
+
+  	// Backwards-compat with node 0.10.x
+  	EventEmitter.EventEmitter = EventEmitter;
+
+  	EventEmitter.prototype._events = undefined;
+  	EventEmitter.prototype._eventsCount = 0;
+  	EventEmitter.prototype._maxListeners = undefined;
+
+  	// By default EventEmitters will print a warning if more than 10 listeners are
+  	// added to it. This is a useful default which helps finding memory leaks.
+  	var defaultMaxListeners = 10;
+
+  	function checkListener(listener) {
+  	  if (typeof listener !== 'function') {
+  	    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
+  	  }
+  	}
+
+  	Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
+  	  enumerable: true,
+  	  get: function() {
+  	    return defaultMaxListeners;
+  	  },
+  	  set: function(arg) {
+  	    if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
+  	      throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
+  	    }
+  	    defaultMaxListeners = arg;
+  	  }
+  	});
+
+  	EventEmitter.init = function() {
+
+  	  if (this._events === undefined ||
+  	      this._events === Object.getPrototypeOf(this)._events) {
+  	    this._events = Object.create(null);
+  	    this._eventsCount = 0;
+  	  }
+
+  	  this._maxListeners = this._maxListeners || undefined;
+  	};
+
+  	// Obviously not all Emitters should be limited to 10. This function allows
+  	// that to be increased. Set to zero for unlimited.
+  	EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
+  	  if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
+  	    throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
+  	  }
+  	  this._maxListeners = n;
+  	  return this;
+  	};
+
+  	function _getMaxListeners(that) {
+  	  if (that._maxListeners === undefined)
+  	    return EventEmitter.defaultMaxListeners;
+  	  return that._maxListeners;
+  	}
+
+  	EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
+  	  return _getMaxListeners(this);
+  	};
+
+  	EventEmitter.prototype.emit = function emit(type) {
+  	  var args = [];
+  	  for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
+  	  var doError = (type === 'error');
+
+  	  var events = this._events;
+  	  if (events !== undefined)
+  	    doError = (doError && events.error === undefined);
+  	  else if (!doError)
+  	    return false;
+
+  	  // If there is no 'error' event listener then throw.
+  	  if (doError) {
+  	    var er;
+  	    if (args.length > 0)
+  	      er = args[0];
+  	    if (er instanceof Error) {
+  	      // Note: The comments on the \`throw\` lines are intentional, they show
+  	      // up in Node's output if this results in an unhandled exception.
+  	      throw er; // Unhandled 'error' event
+  	    }
+  	    // At least give some kind of context to the user
+  	    var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
+  	    err.context = er;
+  	    throw err; // Unhandled 'error' event
+  	  }
+
+  	  var handler = events[type];
+
+  	  if (handler === undefined)
+  	    return false;
+
+  	  if (typeof handler === 'function') {
+  	    ReflectApply(handler, this, args);
+  	  } else {
+  	    var len = handler.length;
+  	    var listeners = arrayClone(handler, len);
+  	    for (var i = 0; i < len; ++i)
+  	      ReflectApply(listeners[i], this, args);
+  	  }
+
+  	  return true;
+  	};
+
+  	function _addListener(target, type, listener, prepend) {
+  	  var m;
+  	  var events;
+  	  var existing;
+
+  	  checkListener(listener);
+
+  	  events = target._events;
+  	  if (events === undefined) {
+  	    events = target._events = Object.create(null);
+  	    target._eventsCount = 0;
+  	  } else {
+  	    // To avoid recursion in the case that type === "newListener"! Before
+  	    // adding it to the listeners, first emit "newListener".
+  	    if (events.newListener !== undefined) {
+  	      target.emit('newListener', type,
+  	                  listener.listener ? listener.listener : listener);
+
+  	      // Re-assign \`events\` because a newListener handler could have caused the
+  	      // this._events to be assigned to a new object
+  	      events = target._events;
+  	    }
+  	    existing = events[type];
+  	  }
+
+  	  if (existing === undefined) {
+  	    // Optimize the case of one listener. Don't need the extra array object.
+  	    existing = events[type] = listener;
+  	    ++target._eventsCount;
+  	  } else {
+  	    if (typeof existing === 'function') {
+  	      // Adding the second element, need to change to array.
+  	      existing = events[type] =
+  	        prepend ? [listener, existing] : [existing, listener];
+  	      // If we've already got an array, just append.
+  	    } else if (prepend) {
+  	      existing.unshift(listener);
+  	    } else {
+  	      existing.push(listener);
+  	    }
+
+  	    // Check for listener leak
+  	    m = _getMaxListeners(target);
+  	    if (m > 0 && existing.length > m && !existing.warned) {
+  	      existing.warned = true;
+  	      // No error code for this since it is a Warning
+  	      // eslint-disable-next-line no-restricted-syntax
+  	      var w = new Error('Possible EventEmitter memory leak detected. ' +
+  	                          existing.length + ' ' + String(type) + ' listeners ' +
+  	                          'added. Use emitter.setMaxListeners() to ' +
+  	                          'increase limit');
+  	      w.name = 'MaxListenersExceededWarning';
+  	      w.emitter = target;
+  	      w.type = type;
+  	      w.count = existing.length;
+  	      ProcessEmitWarning(w);
+  	    }
+  	  }
+
+  	  return target;
+  	}
+
+  	EventEmitter.prototype.addListener = function addListener(type, listener) {
+  	  return _addListener(this, type, listener, false);
+  	};
+
+  	EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+  	EventEmitter.prototype.prependListener =
+  	    function prependListener(type, listener) {
+  	      return _addListener(this, type, listener, true);
+  	    };
+
+  	function onceWrapper() {
+  	  if (!this.fired) {
+  	    this.target.removeListener(this.type, this.wrapFn);
+  	    this.fired = true;
+  	    if (arguments.length === 0)
+  	      return this.listener.call(this.target);
+  	    return this.listener.apply(this.target, arguments);
+  	  }
+  	}
+
+  	function _onceWrap(target, type, listener) {
+  	  var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener };
+  	  var wrapped = onceWrapper.bind(state);
+  	  wrapped.listener = listener;
+  	  state.wrapFn = wrapped;
+  	  return wrapped;
+  	}
+
+  	EventEmitter.prototype.once = function once(type, listener) {
+  	  checkListener(listener);
+  	  this.on(type, _onceWrap(this, type, listener));
+  	  return this;
+  	};
+
+  	EventEmitter.prototype.prependOnceListener =
+  	    function prependOnceListener(type, listener) {
+  	      checkListener(listener);
+  	      this.prependListener(type, _onceWrap(this, type, listener));
+  	      return this;
+  	    };
+
+  	// Emits a 'removeListener' event if and only if the listener was removed.
+  	EventEmitter.prototype.removeListener =
+  	    function removeListener(type, listener) {
+  	      var list, events, position, i, originalListener;
+
+  	      checkListener(listener);
+
+  	      events = this._events;
+  	      if (events === undefined)
+  	        return this;
+
+  	      list = events[type];
+  	      if (list === undefined)
+  	        return this;
+
+  	      if (list === listener || list.listener === listener) {
+  	        if (--this._eventsCount === 0)
+  	          this._events = Object.create(null);
+  	        else {
+  	          delete events[type];
+  	          if (events.removeListener)
+  	            this.emit('removeListener', type, list.listener || listener);
+  	        }
+  	      } else if (typeof list !== 'function') {
+  	        position = -1;
+
+  	        for (i = list.length - 1; i >= 0; i--) {
+  	          if (list[i] === listener || list[i].listener === listener) {
+  	            originalListener = list[i].listener;
+  	            position = i;
+  	            break;
+  	          }
+  	        }
+
+  	        if (position < 0)
+  	          return this;
+
+  	        if (position === 0)
+  	          list.shift();
+  	        else {
+  	          spliceOne(list, position);
+  	        }
+
+  	        if (list.length === 1)
+  	          events[type] = list[0];
+
+  	        if (events.removeListener !== undefined)
+  	          this.emit('removeListener', type, originalListener || listener);
+  	      }
+
+  	      return this;
+  	    };
+
+  	EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
+
+  	EventEmitter.prototype.removeAllListeners =
+  	    function removeAllListeners(type) {
+  	      var listeners, events, i;
+
+  	      events = this._events;
+  	      if (events === undefined)
+  	        return this;
+
+  	      // not listening for removeListener, no need to emit
+  	      if (events.removeListener === undefined) {
+  	        if (arguments.length === 0) {
+  	          this._events = Object.create(null);
+  	          this._eventsCount = 0;
+  	        } else if (events[type] !== undefined) {
+  	          if (--this._eventsCount === 0)
+  	            this._events = Object.create(null);
+  	          else
+  	            delete events[type];
+  	        }
+  	        return this;
+  	      }
+
+  	      // emit removeListener for all listeners on all events
+  	      if (arguments.length === 0) {
+  	        var keys = Object.keys(events);
+  	        var key;
+  	        for (i = 0; i < keys.length; ++i) {
+  	          key = keys[i];
+  	          if (key === 'removeListener') continue;
+  	          this.removeAllListeners(key);
+  	        }
+  	        this.removeAllListeners('removeListener');
+  	        this._events = Object.create(null);
+  	        this._eventsCount = 0;
+  	        return this;
+  	      }
+
+  	      listeners = events[type];
+
+  	      if (typeof listeners === 'function') {
+  	        this.removeListener(type, listeners);
+  	      } else if (listeners !== undefined) {
+  	        // LIFO order
+  	        for (i = listeners.length - 1; i >= 0; i--) {
+  	          this.removeListener(type, listeners[i]);
+  	        }
+  	      }
+
+  	      return this;
+  	    };
+
+  	function _listeners(target, type, unwrap) {
+  	  var events = target._events;
+
+  	  if (events === undefined)
+  	    return [];
+
+  	  var evlistener = events[type];
+  	  if (evlistener === undefined)
+  	    return [];
+
+  	  if (typeof evlistener === 'function')
+  	    return unwrap ? [evlistener.listener || evlistener] : [evlistener];
+
+  	  return unwrap ?
+  	    unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
+  	}
+
+  	EventEmitter.prototype.listeners = function listeners(type) {
+  	  return _listeners(this, type, true);
+  	};
+
+  	EventEmitter.prototype.rawListeners = function rawListeners(type) {
+  	  return _listeners(this, type, false);
+  	};
+
+  	EventEmitter.listenerCount = function(emitter, type) {
+  	  if (typeof emitter.listenerCount === 'function') {
+  	    return emitter.listenerCount(type);
+  	  } else {
+  	    return listenerCount.call(emitter, type);
+  	  }
+  	};
+
+  	EventEmitter.prototype.listenerCount = listenerCount;
+  	function listenerCount(type) {
+  	  var events = this._events;
+
+  	  if (events !== undefined) {
+  	    var evlistener = events[type];
+
+  	    if (typeof evlistener === 'function') {
+  	      return 1;
+  	    } else if (evlistener !== undefined) {
+  	      return evlistener.length;
+  	    }
+  	  }
+
+  	  return 0;
+  	}
+
+  	EventEmitter.prototype.eventNames = function eventNames() {
+  	  return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
+  	};
+
+  	function arrayClone(arr, n) {
+  	  var copy = new Array(n);
+  	  for (var i = 0; i < n; ++i)
+  	    copy[i] = arr[i];
+  	  return copy;
+  	}
+
+  	function spliceOne(list, index) {
+  	  for (; index + 1 < list.length; index++)
+  	    list[index] = list[index + 1];
+  	  list.pop();
+  	}
+
+  	function unwrapListeners(arr) {
+  	  var ret = new Array(arr.length);
+  	  for (var i = 0; i < ret.length; ++i) {
+  	    ret[i] = arr[i].listener || arr[i];
+  	  }
+  	  return ret;
+  	}
+
+  	function once(emitter, name) {
+  	  return new Promise(function (resolve, reject) {
+  	    function errorListener(err) {
+  	      emitter.removeListener(name, resolver);
+  	      reject(err);
+  	    }
+
+  	    function resolver() {
+  	      if (typeof emitter.removeListener === 'function') {
+  	        emitter.removeListener('error', errorListener);
+  	      }
+  	      resolve([].slice.call(arguments));
+  	    }
+  	    eventTargetAgnosticAddListener(emitter, name, resolver, { once: true });
+  	    if (name !== 'error') {
+  	      addErrorHandlerIfEventEmitter(emitter, errorListener, { once: true });
+  	    }
+  	  });
+  	}
+
+  	function addErrorHandlerIfEventEmitter(emitter, handler, flags) {
+  	  if (typeof emitter.on === 'function') {
+  	    eventTargetAgnosticAddListener(emitter, 'error', handler, flags);
+  	  }
+  	}
+
+  	function eventTargetAgnosticAddListener(emitter, name, listener, flags) {
+  	  if (typeof emitter.on === 'function') {
+  	    if (flags.once) {
+  	      emitter.once(name, listener);
+  	    } else {
+  	      emitter.on(name, listener);
+  	    }
+  	  } else if (typeof emitter.addEventListener === 'function') {
+  	    // EventTarget does not have \`error\` event semantics like Node
+  	    // EventEmitters, we do not listen for \`error\` events here.
+  	    emitter.addEventListener(name, function wrapListener(arg) {
+  	      // IE does not have builtin \`{ once: true }\` support so we
+  	      // have to do it manually.
+  	      if (flags.once) {
+  	        emitter.removeEventListener(name, wrapListener);
+  	      }
+  	      listener(arg);
+  	    });
+  	  } else {
+  	    throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type ' + typeof emitter);
+  	  }
+  	}
+  	return events.exports;
+  }
+
+  requireEvents();
+
+  /*! *****************************************************************************\r
+  Copyright (c) Microsoft Corporation.\r
+\r
+  Permission to use, copy, modify, and/or distribute this software for any\r
+  purpose with or without fee is hereby granted.\r
+\r
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r
+  PERFORMANCE OF THIS SOFTWARE.\r
+  ***************************************************************************** */\r
+\r
+
+  let cachedTextEncoder = new TextEncoder("utf-8");
+
+  typeof cachedTextEncoder.encodeInto === "function"
+      ? function (arg, view) {
+          return cachedTextEncoder.encodeInto(arg, view);
+        }
+      : function (arg, view) {
+          const buf = cachedTextEncoder.encode(arg);
+          view.set(buf);
+          return {
+            read: arg.length,
+            written: buf.length,
+          };
+        };
+
+  const NODE_CONDS_KEY = "displayConds";
+  const NODE_DISABLE_DATA_SOURCE_KEY = "_tmagic_node_disabled_data_source";
+  const NODE_DISABLE_CODE_BLOCK_KEY = "_tmagic_node_disabled_code_block";
+  var HookType = /* @__PURE__ */ ((HookType2) => {
+    HookType2["CODE"] = "code";
+    return HookType2;
+  })(HookType || {});
+
+  const isObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
+  const getKeysArray = (keys) => (
+    // 将 array[0] 转成 array.0
+    \`\${keys}\`.replace(/\\[(\\d+)\\]/g, ".$1").split(".")
+  );
+  const DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX = "ds-field::";
+  const dataSourceTemplateRegExp = /\\$\\{([\\s\\S]+?)\\}/g;
+
+  var DepTargetType = /* @__PURE__ */ ((DepTargetType2) => {
+    DepTargetType2["DEFAULT"] = "default";
+    DepTargetType2["CODE_BLOCK"] = "code-block";
+    DepTargetType2["DATA_SOURCE"] = "data-source";
+    DepTargetType2["DATA_SOURCE_METHOD"] = "data-source-method";
+    DepTargetType2["DATA_SOURCE_COND"] = "data-source-cond";
+    return DepTargetType2;
+  })(DepTargetType || {});
+
+  class Target {
+    /**
+     * 如何识别目标
+     */
+    isTarget;
+    /**
+     * 目标id，不可重复
+     * 例如目标是代码块，则为代码块id
+     */
+    id;
+    /**
+     * 目标名称，用于显示在依赖列表中
+     */
+    name;
+    /**
+     * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
+     */
+    type = DepTargetType.DEFAULT;
+    /**
+     * 依赖详情
+     * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
+     */
+    deps = {};
+    /**
+     * 是否默认收集，默认为true，当值为false时需要传入type参数给collect方法才会被收集
+     */
+    isCollectByDefault;
+    constructor(options) {
+      this.isTarget = options.isTarget;
+      this.id = options.id;
+      this.name = options.name;
+      this.isCollectByDefault = options.isCollectByDefault ?? true;
+      if (options.type) {
+        this.type = options.type;
+      }
+      if (options.initialDeps) {
+        this.deps = options.initialDeps;
+      }
+    }
+    /**
+     * 更新依赖
+     * @param option 节点配置
+     * @param key 哪个key配置了这个目标的id
+     */
+    updateDep({ id, name, key, data }) {
+      const dep = this.deps[id] || {
+        name,
+        keys: []
+      };
+      dep.name = name;
+      dep.data = data;
+      this.deps[id] = dep;
+      if (dep.keys.indexOf(key) === -1) {
+        dep.keys.push(key);
+      }
+    }
+    /**
+     * 删除依赖
+     * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖
+     * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key
+     * @returns void
+     */
+    removeDep(id, key) {
+      if (typeof id === "undefined") {
+        Object.keys(this.deps).forEach((depKey) => {
+          delete this.deps[depKey];
         });
-                worker.addEventListener("error", () => {
-                  (self.URL || self.webkitURL).revokeObjectURL(objURL);
-                });
-                return worker;
-              } catch(e) {
-                return new Worker(
-                  'data:text/javascript;charset=utf-8,' + encodeURIComponent(jsContent),
-                  {
-          
-          name: options?.name
+        return;
+      }
+      const dep = this.deps[id];
+      if (!dep) return;
+      if (key) {
+        const index = dep.keys.indexOf(key);
+        dep.keys.splice(index, 1);
+        if (dep.keys.length === 0) {
+          delete this.deps[id];
         }
-                );
-              } finally {
-                      objURL && (self.URL || self.webkitURL).revokeObjectURL(objURL);
-                    }
+      } else {
+        delete this.deps[id];
+      }
+    }
+    /**
+     * 判断指定节点下的指定key是否存在在依赖列表中
+     * @param node 哪个节点
+     * @param key 哪个key
+     * @returns boolean
+     */
+    hasDep(id, key) {
+      const dep = this.deps[id];
+      return Boolean(dep?.keys.find((d) => d === key));
+    }
+    destroy() {
+      this.deps = {};
+    }
+  }
+
+  const createCodeBlockTarget = (id, codeBlock, initialDeps = {}) => new Target({
+    type: DepTargetType.CODE_BLOCK,
+    id,
+    initialDeps,
+    name: codeBlock.name,
+    isTarget: (_key, value) => {
+      if (id === value) {
+        return true;
+      }
+      if (value?.hookType === HookType.CODE && Array.isArray(value.hookData)) {
+        const index = value.hookData.findIndex((item) => item.codeId === id);
+        return Boolean(index > -1);
+      }
+      return false;
+    }
+  });
+  const isIncludeArrayField = (keys, fields) => {
+    let f = fields;
+    return keys.some((key, index) => {
+      const field = f.find(({ name }) => name === key);
+      f = field?.fields || [];
+      return field && field.type === "array" && // 不是整数
+      /^(?!\\d+$).*$/.test(\`\${keys[index + 1]}\`) && index < keys.length - 1;
+    });
+  };
+  const isDataSourceTemplate = (value, ds, hasArray = false) => {
+    const templates = value.match(dataSourceTemplateRegExp) || [];
+    if (templates.length <= 0) {
+      return false;
+    }
+    const arrayFieldTemplates = [];
+    const fieldTemplates = [];
+    templates.forEach((tpl) => {
+      const expression = tpl.substring(2, tpl.length - 1);
+      const keys = getKeysArray(expression);
+      const dsId = keys.shift();
+      if (!dsId || dsId !== ds.id) {
+        return;
+      }
+      if (isIncludeArrayField(keys, ds.fields)) {
+        arrayFieldTemplates.push(tpl);
+      } else {
+        fieldTemplates.push(tpl);
+      }
+    });
+    if (hasArray) {
+      return arrayFieldTemplates.length > 0;
+    }
+    return fieldTemplates.length > 0;
+  };
+  const isSpecificDataSourceTemplate = (value, dsId) => value?.isBindDataSourceField && value.dataSourceId && value.dataSourceId === dsId && typeof value.template === "string";
+  const isUseDataSourceField = (value, id) => {
+    if (!Array.isArray(value) || typeof value[0] !== "string") {
+      return false;
+    }
+    const [prefixId] = value;
+    const prefixIndex = prefixId.indexOf(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
+    if (prefixIndex === -1) {
+      return false;
+    }
+    const dsId = prefixId.substring(prefixIndex + DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX.length);
+    return dsId === id;
+  };
+  const isDataSourceTarget = (ds, key, value, hasArray = false) => {
+    if (!value || !["string", "object"].includes(typeof value)) {
+      return false;
+    }
+    if (\`\${key}\`.startsWith(NODE_CONDS_KEY)) {
+      return false;
+    }
+    if (typeof value === "string") {
+      return isDataSourceTemplate(value, ds, hasArray);
+    }
+    if (isObject(value) && value?.isBindDataSource && value.dataSourceId && value.dataSourceId === ds.id) {
+      return true;
+    }
+    if (isSpecificDataSourceTemplate(value, ds.id)) {
+      return true;
+    }
+    if (isUseDataSourceField(value, ds.id)) {
+      const [, ...keys] = value;
+      const includeArray = isIncludeArrayField(keys, ds.fields);
+      if (hasArray) {
+        return includeArray;
+      }
+      return !includeArray;
+    }
+    return false;
+  };
+  const isDataSourceCondTarget = (ds, key, value, hasArray = false) => {
+    if (!Array.isArray(value) || !ds) {
+      return false;
+    }
+    const [dsId, ...keys] = value;
+    if (dsId !== ds.id || !\`\${key}\`.startsWith(NODE_CONDS_KEY)) {
+      return false;
+    }
+    if (ds.fields?.find((field) => field.name === keys[0])) {
+      const includeArray = isIncludeArrayField(keys, ds.fields);
+      if (hasArray) {
+        return includeArray;
+      }
+      return !includeArray;
+    }
+    return false;
+  };
+  const createDataSourceTarget = (ds, initialDeps = {}) => new Target({
+    type: DepTargetType.DATA_SOURCE,
+    id: ds.id,
+    initialDeps,
+    isTarget: (key, value) => isDataSourceTarget(ds, key, value)
+  });
+  const createDataSourceCondTarget = (ds, initialDeps = {}) => new Target({
+    type: DepTargetType.DATA_SOURCE_COND,
+    id: ds.id,
+    initialDeps,
+    isTarget: (key, value) => isDataSourceCondTarget(ds, key, value)
+  });
+  const createDataSourceMethodTarget = (ds, initialDeps = {}) => new Target({
+    type: DepTargetType.DATA_SOURCE_METHOD,
+    id: ds.id,
+    initialDeps,
+    isTarget: (_key, value) => {
+      if (!Array.isArray(value)) {
+        return false;
+      }
+      const [dsId, methodName] = value;
+      if (!methodName || dsId !== ds.id) {
+        return false;
+      }
+      if (ds.methods?.find((method) => method.name === methodName)) {
+        return true;
+      }
+      if (ds.fields?.find((field) => field.name === methodName)) {
+        return false;
+      }
+      return true;
+    }
+  });
+  const traverseTarget = (targetsList, cb, type) => {
+    for (const targets of Object.values(targetsList)) {
+      for (const target of Object.values(targets)) {
+        if (type && target.type !== type) {
+          continue;
+        }
+        cb(target);
+      }
+    }
+  };
+
+  class Watcher {
+    targetsList = {};
+    childrenProp = "items";
+    idProp = "id";
+    nameProp = "name";
+    constructor(options) {
+      if (options?.initialTargets) {
+        this.targetsList = options.initialTargets;
+      }
+      if (options?.childrenProp) {
+        this.childrenProp = options.childrenProp;
+      }
+    }
+    getTargetsList() {
+      return this.targetsList;
+    }
+    /**
+     * 获取指定类型中的所有target
+     * @param type 分类
+     * @returns Target[]
+     */
+    getTargets(type = DepTargetType.DEFAULT) {
+      return this.targetsList[type] || {};
+    }
+    /**
+     * 添加新的目标
+     * @param target Target
+     */
+    addTarget(target) {
+      const targets = this.getTargets(target.type) || {};
+      this.targetsList[target.type] = targets;
+      targets[target.id] = target;
+    }
+    /**
+     * 获取指定id的target
+     * @param id target id
+     * @returns Target
+     */
+    getTarget(id, type = DepTargetType.DEFAULT) {
+      return this.getTargets(type)[id];
+    }
+    /**
+     * 判断是否存在指定id的target
+     * @param id target id
+     * @returns boolean
+     */
+    hasTarget(id, type = DepTargetType.DEFAULT) {
+      return Boolean(this.getTarget(id, type));
+    }
+    /**
+     * 判断是否存在指定类型的target
+     * @param type target type
+     * @returns boolean
+     */
+    hasSpecifiedTypeTarget(type = DepTargetType.DEFAULT) {
+      return Object.keys(this.getTargets(type)).length > 0;
+    }
+    /**
+     * 删除指定id的target
+     * @param id target id
+     */
+    removeTarget(id, type = DepTargetType.DEFAULT) {
+      const targets = this.getTargets(type);
+      if (targets[id]) {
+        targets[id].destroy();
+        delete targets[id];
+      }
+    }
+    /**
+     * 删除指定分类的所有target
+     * @param type 分类
+     * @returns void
+     */
+    removeTargets(type = DepTargetType.DEFAULT) {
+      const targets = this.targetsList[type];
+      if (!targets) return;
+      for (const target of Object.values(targets)) {
+        target.destroy();
+      }
+      delete this.targetsList[type];
+    }
+    /**
+     * 删除所有target
+     */
+    clearTargets() {
+      for (const key of Object.keys(this.targetsList)) {
+        delete this.targetsList[key];
+      }
+    }
+    /**
+     * 收集依赖
+     * @param nodes 需要收集的节点
+     * @param deep 是否需要收集子节点
+     * @param type 强制收集指定类型的依赖
+     */
+    collect(nodes, depExtendedData = {}, deep = false, type) {
+      this.collectByCallback(nodes, type, ({ node, target }) => {
+        this.removeTargetDep(target, node);
+        this.collectItem(node, target, depExtendedData, deep);
+      });
+    }
+    collectByCallback(nodes, type, cb) {
+      traverseTarget(
+        this.targetsList,
+        (target) => {
+          if (!type && !target.isCollectByDefault) {
+            return;
+          }
+          for (const node of nodes) {
+            cb({ node, target });
+          }
+        },
+        type
+      );
+    }
+    /**
+     * 清除所有目标的依赖
+     * @param nodes 需要清除依赖的节点
+     */
+    clear(nodes, type) {
+      let { targetsList } = this;
+      if (type) {
+        targetsList = {
+          [type]: this.getTargets(type)
+        };
+      }
+      const clearedItemsNodeIds = [];
+      traverseTarget(targetsList, (target) => {
+        if (nodes) {
+          for (const node of nodes) {
+            target.removeDep(node[this.idProp]);
+            if (Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length && !clearedItemsNodeIds.includes(node[this.idProp])) {
+              clearedItemsNodeIds.push(node[this.idProp]);
+              this.clear(node[this.childrenProp]);
             }
+          }
+        } else {
+          target.removeDep();
+        }
+      });
+    }
+    /**
+     * 清除指定类型的依赖
+     * @param type 类型
+     * @param nodes 需要清除依赖的节点
+     */
+    clearByType(type, nodes) {
+      this.clear(nodes, type);
+    }
+    collectItem(node, target, depExtendedData = {}, deep = false) {
+      const dataSourceTargetTypes = [
+        DepTargetType.DATA_SOURCE,
+        DepTargetType.DATA_SOURCE_COND,
+        DepTargetType.DATA_SOURCE_METHOD
+      ];
+      if (node[NODE_DISABLE_DATA_SOURCE_KEY] && dataSourceTargetTypes.includes(target.type)) {
+        return;
+      }
+      if (node[NODE_DISABLE_CODE_BLOCK_KEY] && target.type === DepTargetType.CODE_BLOCK) {
+        return;
+      }
+      const collectTarget = (config, prop = "") => {
+        const doCollect = (key, value) => {
+          const keyIsItems = key === this.childrenProp;
+          const fullKey = prop ? \`\${prop}.\${key}\` : key;
+          if (target.isTarget(fullKey, value)) {
+            target.updateDep({
+              id: node[this.idProp],
+              name: \`\${node[this.nameProp] || node[this.idProp]}\`,
+              data: depExtendedData,
+              key: fullKey
+            });
+          } else if (!keyIsItems && Array.isArray(value)) {
+            for (let i = 0, l = value.length; i < l; i++) {
+              const item = value[i];
+              if (isObject(item)) {
+                collectTarget(item, \`\${fullKey}[\${i}]\`);
+              }
+            }
+          } else if (isObject(value)) {
+            collectTarget(value, fullKey);
+          }
+          if (keyIsItems && deep && Array.isArray(value)) {
+            for (const child of value) {
+              this.collectItem(child, target, depExtendedData, deep);
+            }
+          }
+        };
+        for (const [key, value] of Object.entries(config)) {
+          if (typeof value === "undefined" || value === "") continue;
+          doCollect(key, value);
+        }
+      };
+      collectTarget(node);
+    }
+    removeTargetDep(target, node, key) {
+      target.removeDep(node[this.idProp], key);
+      if (typeof key === "undefined" && Array.isArray(node[this.childrenProp]) && node[this.childrenProp].length) {
+        for (const item of node[this.childrenProp]) {
+          this.removeTargetDep(target, item, key);
+        }
+      }
+    }
+  }
+
+  const error = (...args) => {
+    if (process.env.NODE_ENV === "development") {
+      console.error("magic editor: ", ...args);
+    }
+  };
+
+  onmessage = (e) => {
+    const watcher = new Watcher({ initialTargets: {} });
+    const { dsl } = e.data;
+    try {
+      const mApp = eval(\`(\${dsl})\`);
+      if (!mApp) {
+        postMessage({});
+      }
+      watcher.clearTargets();
+      if (mApp.codeBlocks) {
+        for (const [id, code] of Object.entries(mApp.codeBlocks)) {
+          watcher.addTarget(createCodeBlockTarget(id, code));
+        }
+      }
+      if (mApp.dataSources) {
+        for (const ds of mApp.dataSources) {
+          watcher.addTarget(createDataSourceTarget(ds, {}));
+          watcher.addTarget(createDataSourceMethodTarget(ds, {}));
+          watcher.addTarget(createDataSourceCondTarget(ds, {}));
+        }
+      }
+      watcher.collectByCallback(mApp.items, void 0, ({ node, target }) => {
+        watcher.collectItem(node, target, { pageId: node.id }, true);
+      });
+      const data = {
+        [DepTargetType.DATA_SOURCE]: {},
+        [DepTargetType.DATA_SOURCE_METHOD]: {},
+        [DepTargetType.DATA_SOURCE_COND]: {},
+        [DepTargetType.CODE_BLOCK]: {}
+      };
+      traverseTarget(watcher.getTargetsList(), (target) => {
+        data[target.type][target.id] = target.deps;
+      });
+      postMessage(data);
+    } catch (e2) {
+      error(e2);
+      postMessage({});
+    }
+  };
+
+})();
+`;
+  const blob = typeof self !== "undefined" && self.Blob && new Blob([jsContent], { type: "text/javascript;charset=utf-8" });
+  function WorkerWrapper(options) {
+    let objURL;
+    try {
+      objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
+      if (!objURL) throw "";
+      const worker = new Worker(objURL, {
+        name: options?.name
+      });
+      worker.addEventListener("error", () => {
+        (self.URL || self.webkitURL).revokeObjectURL(objURL);
+      });
+      return worker;
+    } catch (e) {
+      return new Worker(
+        "data:text/javascript;charset=utf-8," + encodeURIComponent(jsContent),
+        {
+          name: options?.name
+        }
+      );
+    } finally {
+      objURL && (self.URL || self.webkitURL).revokeObjectURL(objURL);
+    }
+  }
 
   class Dep extends BaseService {
     state = vue.shallowReactive({
@@ -19134,6 +20315,11 @@
         const { command, keybinding, when } = keybindingItem;
         for (const [type = "", eventType = "keydown"] of when) {
           const cacheItem = { type, command, keybinding, eventType, bound: false };
+          if (this.bindingList.find(
+            (item) => item.command === command && item.eventType === eventType && item.type === type && item.keybinding === keybinding
+          )) {
+            continue;
+          }
           this.bindingList.push(cacheItem);
         }
       }
@@ -19257,9 +20443,9 @@
     createStage(stageOptions = {}) {
       return useStage({
         ...stageOptions,
-        zoom: 1,
         runtimeUrl: "",
         autoScrollIntoView: false,
+        disabledRule: true,
         render: async (stage) => {
           this.copyDocumentElement();
           const rootEls = stage.renderer?.getDocument()?.body.children;
@@ -19361,6 +20547,8 @@
     containerHighlightDuration: 800,
     containerHighlightType: StageCore.ContainerHighlightType.DEFAULT,
     disabledShowSrc: false,
+    disabledDataSource: false,
+    disabledCodeBlock: false,
     componentGroupList: () => [],
     datasourceList: () => [],
     menu: () => ({ left: [], right: [] }),
@@ -19517,6 +20705,20 @@
         immediate: true
       }
     );
+    vue.watch(
+      () => props.disabledCodeBlock,
+      (disabledCodeBlock) => propsService.setDisabledCodeBlock(disabledCodeBlock ?? false),
+      {
+        immediate: true
+      }
+    );
+    vue.watch(
+      () => props.disabledDataSource,
+      (disabledDataSource) => propsService.setDisabledDataSource(disabledDataSource ?? false),
+      {
+        immediate: true
+      }
+    );
     vue.onBeforeUnmount(() => {
       editorService.resetState();
       historyService.resetState();
@@ -19530,13 +20732,14 @@
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
     let getTMagicAppPrimise = null;
-    const getTMagicApp = () => {
-      const renderer = editorService.get("stage")?.renderer;
+    const getTMagicApp = async () => {
+      const stage = await getStage();
+      const { renderer } = stage;
       if (!renderer) {
-        return Promise.resolve(void 0);
+        return void 0;
       }
       if (renderer.runtime) {
-        return Promise.resolve(renderer.runtime.getApp?.());
+        return renderer.runtime.getApp?.();
       }
       if (getTMagicAppPrimise) {
         return getTMagicAppPrimise;
@@ -19618,6 +20821,50 @@
         });
       }
     );
+    const getStage = () => {
+      const stage = editorService.get("stage");
+      if (stage) {
+        return Promise.resolve(stage);
+      }
+      return new Promise((resolve) => {
+        const unWatch = vue.watch(
+          () => editorService.get("stage"),
+          (stage2) => {
+            if (stage2) {
+              resolve(stage2);
+              vue.nextTick(() => {
+                unWatch();
+              });
+            }
+          }
+        );
+      });
+    };
+    const updateStageDsl = async (value) => {
+      const stage = await getStage();
+      const runtime = await stage.renderer?.getRuntime();
+      const app = await getTMagicApp();
+      if (!app?.dataSourceManager) {
+        runtime?.updateRootConfig?.(cloneDeep(vue.toRaw(value)));
+      }
+      const page = editorService.get("page");
+      const node = editorService.get("node");
+      page?.id && runtime?.updatePageId?.(page.id);
+      setTimeout(() => {
+        node && stage?.select(vue.toRaw(node.id));
+      });
+      if (value) {
+        depService.clearIdleTasks();
+        const dsl = cloneDeep(vue.toRaw(value));
+        await (typeof Worker === "undefined" ? collectIdle(dsl.items, true) : depService.collectByWorker(dsl));
+        if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) {
+          for (const node2 of utils.getNodes(utils.getDepNodeIds(dsl.dataSourceDeps), dsl.items)) {
+            core.updateNode(app.dataSourceManager.compiledNode(node2), dsl);
+          }
+        }
+        runtime?.updateRootConfig?.(dsl);
+      }
+    };
     const initDataSourceDepTarget = (ds) => {
       depService.addTarget(core.createDataSourceTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
@@ -19637,10 +20884,7 @@
         initDataSourceDepTarget(ds);
       }
       if (Array.isArray(value.items)) {
-        depService.clearIdleTasks();
-        (typeof Worker === "undefined" ? collectIdle(value.items, true) : depService.collectByWorker(value)).then(() => {
-          updateStageNodes(value.items);
-        });
+        updateStageDsl(value);
       } else {
         depService.clear();
         delete value.dataSourceDeps;
@@ -19933,6 +21177,8 @@
       disabledPageFragment: { type: Boolean },
       disabledStageOverlay: { type: Boolean },
       disabledShowSrc: { type: Boolean },
+      disabledDataSource: { type: Boolean },
+      disabledCodeBlock: { type: Boolean },
       treeIndent: {},
       treeNextLevelIndentIncrement: {},
       render: { type: Function },
@@ -19944,7 +21190,7 @@
       pageBarSortOptions: {},
       pageFilterFunction: { type: Function }
     }, defaultEditorProps),
-    emits: ["props-panel-mounted", "update:modelValue", "props-form-error", "props-submit-error"],
+    emits: ["props-panel-mounted", "props-panel-unmounted", "update:modelValue", "props-form-error", "props-submit-error"],
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const props = __props;
@@ -20003,6 +21249,9 @@
       const propsPanelMountedHandler = (e) => {
         emit("props-panel-mounted", e);
       };
+      const propsPanelUnmountedHandler = () => {
+        emit("props-panel-unmounted");
+      };
       const propsPanelSubmitErrorHandler = (e) => {
         emit("props-submit-error", e);
       };
@@ -20107,6 +21356,7 @@
                 "extend-state": _ctx.extendFormState,
                 "disabled-show-src": _ctx.disabledShowSrc,
                 onMounted: propsPanelMountedHandler,
+                onUnmounted: propsPanelUnmountedHandler,
                 onFormError: propsPanelFormErrorHandler,
                 onSubmitError: propsPanelSubmitErrorHandler
               }, {
@@ -20151,7 +21401,9 @@
 
   const defaultInstallOpt = {
     // eslint-disable-next-line no-eval
-    parseDSL: (dsl) => eval(dsl)
+    parseDSL: (dsl) => eval(dsl),
+    customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+    customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
   };
   const index = {
     install: (app, opt) => {