@tmagic/editor 1.5.3 → 1.5.5

package/dist/tmagic-editor.umd.cjs

@@ -23,7 +23,7 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$Y = ["src"];
+  const _hoisted_1$10 = ["src"];
   const _sfc_main$1s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
@@ -48,7 +48,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$Y)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$10)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,9 +76,13 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$X = {
+  const _hoisted_1$$ = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
+  const _hoisted_2$o = {
+    ref: "codeEditor",
+    class: "magic-code-editor-content"
+  };
   const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
@@ -132,7 +136,7 @@
       let vsDiffEditor = null;
       const values = vue.ref("");
       const loading = vue.ref(false);
-      const codeEditor = vue.useTemplateRef("codeEditor");
+      const codeEditorEl = vue.useTemplateRef("codeEditor");
       const resizeObserver = new globalThis.ResizeObserver(
         lodashEs.throttle(() => {
           vsEditor?.layout();
@@ -153,7 +157,7 @@
       };
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
       const init = async () => {
-        if (!codeEditor.value) return;
+        if (!codeEditorEl.value) return;
         const options = {
           value: values.value,
           language: props.language,
@@ -161,14 +165,14 @@
           ...props.options
         };
         if (props.type === "diff") {
-          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
+          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditorEl.value, options);
         } else {
-          vsEditor = monaco__namespace.editor.create(codeEditor.value, options);
+          vsEditor = monaco__namespace.editor.create(codeEditorEl.value, options);
         }
         setEditorValue(props.initValues, props.modifiedValues);
         loading.value = false;
         emit("initd", vsEditor);
-        codeEditor.value.addEventListener("keydown", (e) => {
+        codeEditorEl.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
             e.stopPropagation();
@@ -186,7 +190,7 @@
             }
           });
         }
-        resizeObserver.observe(codeEditor.value);
+        resizeObserver.observe(codeEditorEl.value);
       };
       vue.watch(
         () => props.initValues,
@@ -236,7 +240,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -256,11 +260,7 @@
                 ]),
                 _: 1
               }),
-              vue.createElementVNode("div", {
-                ref_key: "codeEditor",
-                ref: codeEditor,
-                class: "magic-code-editor-content"
-              }, null, 512)
+              vue.createElementVNode("div", _hoisted_2$o, null, 512)
             ], 6)
           ], 8, ["disabled"]))
         ]);
@@ -2830,13 +2830,14 @@
   };
   class IdleTask extends events.EventEmitter {
     taskList = [];
+    hightLevelTaskList = [];
     taskHandle = null;
     constructor() {
       super();
       this.setMaxListeners(1e3);
     }
-    enqueueTask(taskHandler, taskData) {
-      this.taskList.push({
+    enqueueTask(taskHandler, taskData, isHightLevel = false) {
+      (isHightLevel ? this.hightLevelTaskList : this.taskList).push({
         handler: taskHandler,
         data: taskData
       });
@@ -2845,6 +2846,10 @@
       }
     }
     clearTasks() {
+      if (this.taskHandle) {
+        globalThis.cancelIdleCallback(this.taskHandle);
+      }
+      this.hightLevelTaskList = [];
       this.taskList = [];
     }
     on(eventName, listener) {
@@ -2857,7 +2862,8 @@
       return super.emit(eventName, ...args);
     }
     runTaskQueue(deadline) {
-      while (deadline.timeRemaining() > 0 && this.taskList.length) {
+      const { hightLevelTaskList, taskList } = this;
+      while (deadline.timeRemaining() > 0 && (taskList.length || hightLevelTaskList.length)) {
         const timeRemaining = deadline.timeRemaining();
         let times = 0;
         if (timeRemaining <= 5) {
@@ -2870,16 +2876,19 @@
           times = 600;
         }
         for (let i = 0; i < times; i++) {
-          const task = this.taskList.shift();
+          const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
           if (task) {
             task.handler(task.data);
           }
-          if (this.taskList.length === 0) {
+          if (hightLevelTaskList.length === 0 && taskList.length === 0) {
             break;
           }
         }
       }
-      if (this.taskList.length) {
+      if (!hightLevelTaskList.length) {
+        this.emit("hight-level-finish");
+      }
+      if (hightLevelTaskList.length || taskList.length) {
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
       } else {
         this.taskHandle = 0;
@@ -3041,7 +3050,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const form = vue.useTemplateRef("form");
+      const formRef = vue.useTemplateRef("form");
       const getFormConfig = (items = []) => [
         {
           type: "fieldset",
@@ -3064,7 +3073,7 @@
       );
       const onParamsChangeHandler = async (v, eventData) => {
         try {
-          const value = await form.value?.submitForm(true);
+          const value = await formRef.value?.submitForm(true);
           emit("change", value, eventData);
         } catch (e) {
           error(e);
@@ -3072,8 +3081,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MForm), {
-          ref_key: "form",
-          ref: form,
+          ref: "form",
           config: codeParamsConfig.value,
           "init-values": _ctx.model,
           disabled: _ctx.disabled,
@@ -3085,8 +3093,8 @@
     }
   });
 
-  const _hoisted_1$W = { class: "m-fields-code-select-col" };
-  const _hoisted_2$m = { class: "code-select-container" };
+  const _hoisted_1$_ = { class: "m-fields-code-select-col" };
+  const _hoisted_2$n = { class: "code-select-container" };
   const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
@@ -3183,8 +3191,8 @@
         eventBus?.emit("edit-code", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
-          vue.createElementVNode("div", _hoisted_2$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
+          vue.createElementVNode("div", _hoisted_2$n, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: selectConfig,
@@ -3305,6 +3313,10 @@
     }
   });
 
+  const _hoisted_1$Z = {
+    ref: "title",
+    class: "m-editor-float-box-title"
+  };
   const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: /* @__PURE__ */ vue.mergeModels({
@@ -3325,8 +3337,8 @@
       const height = vue.useModel(__props, "height");
       const visible = vue.useModel(__props, "visible");
       const props = __props;
-      const target = vue.useTemplateRef("target");
-      const titleEl = vue.useTemplateRef("titleEl");
+      const targetEl = vue.useTemplateRef("target");
+      const titleEl = vue.useTemplateRef("title");
       const zIndex = designPlugin.useZIndex();
       const curZIndex = vue.ref(0);
       const titleHeight = vue.ref(0);
@@ -3334,8 +3346,8 @@
         if (height.value) {
           return height.value - titleHeight.value;
         }
-        if (target.value) {
-          return target.value.clientHeight - titleHeight.value;
+        if (targetEl.value) {
+          return targetEl.value.clientHeight - titleHeight.value;
         }
         return "auto";
       });
@@ -3357,7 +3369,7 @@
       const initMoveable = () => {
         moveable = new VanillaMoveable(globalThis.document.body, {
           className: "m-editor-floating-box-moveable",
-          target: target.value,
+          target: targetEl.value,
           draggable: true,
           resizable: true,
           edge: true,
@@ -3391,7 +3403,7 @@
           if (visible2) {
             await vue.nextTick();
             curZIndex.value = zIndex.nextZIndex();
-            const targetRect = target.value?.getBoundingClientRect();
+            const targetRect = targetEl.value?.getBoundingClientRect();
             if (targetRect) {
               width.value = targetRect.width;
               height.value = targetRect.height;
@@ -3427,10 +3439,10 @@
       const nextZIndex = () => {
         curZIndex.value = zIndex.nextZIndex();
       };
-      vue.provide("parentFloating", target);
+      vue.provide("parentFloating", targetEl);
       __expose({
         bodyHeight,
-        target,
+        target: targetEl,
         titleEl
       });
       return (_ctx, _cache) => {
@@ -3439,17 +3451,12 @@
           to: "body"
         }, [
           vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
+            ref: "target",
             class: "m-editor-float-box",
             style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
             onMousedown: nextZIndex
           }, [
-            vue.createElementVNode("div", {
-              ref_key: "titleEl",
-              ref: titleEl,
-              class: "m-editor-float-box-title"
-            }, [
+            vue.createElementVNode("div", _hoisted_1$Z, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
               ]),
@@ -3481,7 +3488,7 @@
   const useCodeBlockEdit = (codeBlockService) => {
     const codeConfig = vue.ref();
     const codeId = vue.ref();
-    const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
+    const codeBlockEditorRef = vue.useTemplateRef("codeBlockEditor");
     const createCodeBlock = async () => {
       if (!codeBlockService) {
         designPlugin.tMagicMessage.error("新增代码块失败");
@@ -3496,7 +3503,7 @@
       };
       codeId.value = await codeBlockService.getUniqueId();
       await vue.nextTick();
-      codeBlockEditor.value?.show();
+      codeBlockEditorRef.value?.show();
     };
     const editCode = async (id) => {
       const codeBlock = await codeBlockService?.getCodeContentById(id);
@@ -3514,7 +3521,7 @@
       };
       codeId.value = id;
       await vue.nextTick();
-      codeBlockEditor.value?.show();
+      codeBlockEditorRef.value?.show();
     };
     const deleteCode = async (key) => {
       codeBlockService?.deleteCodeDslByIds([key]);
@@ -3522,12 +3529,12 @@
     const submitCodeBlockHandler = async (values) => {
       if (!codeId.value) return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
-      codeBlockEditor.value?.hide();
+      codeBlockEditorRef.value?.hide();
     };
     return {
       codeId,
       codeConfig,
-      codeBlockEditor,
+      codeBlockEditor: codeBlockEditorRef,
       createCodeBlock,
       editCode,
       deleteCode,
@@ -3535,7 +3542,7 @@
     };
   };
 
-  const state = vue.reactive({
+  const state = vue.shallowReactive({
     uiSelectMode: false,
     showSrc: false,
     showStylePanel: true,
@@ -3983,8 +3990,8 @@
     };
   };
 
-  const _hoisted_1$V = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_1$Y = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$m = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
@@ -4249,12 +4256,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$l, [
+          vue.createElementVNode("div", _hoisted_2$m, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4327,7 +4334,7 @@
     }
   });
 
-  const _hoisted_1$U = { class: "m-editor-data-source-field-select" };
+  const _hoisted_1$X = { class: "m-editor-data-source-field-select" };
   const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
@@ -4409,7 +4416,7 @@
         eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
@@ -4491,7 +4498,7 @@
     }
   });
 
-  const _hoisted_1$T = { class: "m-fields-data-source-field-select" };
+  const _hoisted_1$W = { class: "m-fields-data-source-field-select" };
   const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
@@ -4593,7 +4600,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
           showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$1i, {
             key: 0,
             "model-value": _ctx.model[_ctx.name],
@@ -4641,8 +4648,8 @@
     }
   });
 
-  const _hoisted_1$S = { 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_1$V = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$l = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
   const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
   const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -4665,11 +4672,11 @@
       const props = __props;
       const emit = __emit;
       const { dataSourceService } = vue.inject("services") || {};
-      const autocomplete = vue.useTemplateRef("autocomplete");
+      const autocompleteRef = vue.useTemplateRef("autocomplete");
       const isFocused = vue.ref(false);
       const state = vue.ref("");
       const displayState = vue.ref([]);
-      const input = vue.computed(() => autocomplete.value?.inputRef?.input);
+      const input = vue.computed(() => autocompleteRef.value?.inputRef?.input);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const setDisplayState = () => {
         displayState.value = getDisplayField(dataSources.value, state.value);
@@ -4688,7 +4695,7 @@
         const focusOffset = selection?.focusOffset || 0;
         isFocused.value = true;
         await vue.nextTick();
-        autocomplete.value?.focus();
+        autocompleteRef.value?.focus();
         if (focusOffset && input.value) {
           input.value.setSelectionRange(anchorOffset, focusOffset);
         }
@@ -4824,8 +4831,7 @@
           {
             key: 0,
             class: "tmagic-design-auto-complete",
-            ref_key: "autocomplete",
-            ref: autocomplete,
+            ref: "autocomplete",
             modelValue: state.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
           },
@@ -4847,9 +4853,9 @@
             vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$S, [
+            vue.createElementVNode("div", _hoisted_1$V, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$k, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$l, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -4890,8 +4896,8 @@
     }
   });
 
-  const _hoisted_1$R = { style: { "display": "flex", "margin-bottom": "10px" } };
-  const _hoisted_2$j = { style: { "flex": "1" } };
+  const _hoisted_1$U = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$k = { style: { "flex": "1" } };
   const _hoisted_3$7 = { style: { "flex": "1" } };
   const _hoisted_4$5 = { class: "dialog-footer" };
   const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
@@ -4920,12 +4926,12 @@
       const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
       const { rect: windowRect } = useWindowRect();
-      const magicVsEditor = vue.useTemplateRef("magicVsEditor");
+      const magicVsEditorRef = vue.useTemplateRef("magicVsEditor");
       const diffChange = () => {
-        if (!magicVsEditor.value || !formBox.value?.form) {
+        if (!magicVsEditorRef.value || !formBox.value?.form) {
           return;
         }
-        formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+        formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
         difVisible.value = false;
       };
       const defaultParamColConfig = {
@@ -5144,8 +5150,8 @@
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$R, [
-                  vue.createElementVNode("div", _hoisted_2$j, [
+                vue.createElementVNode("div", _hoisted_1$U, [
+                  vue.createElementVNode("div", _hoisted_2$k, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5170,8 +5176,7 @@
                 ]),
                 difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
                   key: 0,
-                  ref_key: "magicVsEditor",
-                  ref: magicVsEditor,
+                  ref: "magicVsEditor",
                   type: "diff",
                   language: "json",
                   initValues: _ctx.content.content,
@@ -5187,8 +5192,8 @@
     }
   });
 
-  const _hoisted_1$Q = { class: "m-editor-data-source-methods" };
-  const _hoisted_2$i = { class: "m-editor-data-source-methods-footer" };
+  const _hoisted_1$T = { class: "m-editor-data-source-methods" };
+  const _hoisted_2$j = { class: "m-editor-data-source-methods-footer" };
   const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
@@ -5210,7 +5215,7 @@
       const props = __props;
       const emit = __emit;
       const codeConfig = vue.ref();
-      const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
+      const codeBlockEditorRef = vue.useTemplateRef("codeBlockEditor");
       let editIndex = -1;
       const methodColumns = [
         {
@@ -5249,7 +5254,7 @@
                 };
                 editIndex = index;
                 vue.nextTick(() => {
-                  codeBlockEditor.value?.show();
+                  codeBlockEditorRef.value?.show();
                 });
               }
             },
@@ -5275,7 +5280,7 @@
         };
         editIndex = -1;
         vue.nextTick(() => {
-          codeBlockEditor.value?.show();
+          codeBlockEditorRef.value?.show();
         });
       };
       const submitCodeHandler = (value, data) => {
@@ -5307,15 +5312,15 @@
         }
         editIndex = -1;
         codeConfig.value = void 0;
-        codeBlockEditor.value?.hide();
+        codeBlockEditorRef.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5331,8 +5336,7 @@
           ]),
           codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1f, {
             key: 0,
-            ref_key: "codeBlockEditor",
-            ref: codeBlockEditor,
+            ref: "codeBlockEditor",
             disabled: _ctx.disabled,
             content: codeConfig.value,
             "is-data-source": true,
@@ -5344,8 +5348,8 @@
     }
   });
 
-  const _hoisted_1$P = { class: "m-fields-data-source-method-select" };
-  const _hoisted_2$h = { class: "data-source-method-select-container" };
+  const _hoisted_1$S = { class: "m-fields-data-source-method-select" };
+  const _hoisted_2$i = { class: "data-source-method-select-container" };
   const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
@@ -5432,8 +5436,8 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
-          vue.createElementVNode("div", _hoisted_2$h, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5476,8 +5480,8 @@
     }
   });
 
-  const _hoisted_1$O = { class: "m-editor-data-source-fields" };
-  const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
+  const _hoisted_1$R = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
   const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
@@ -5682,12 +5686,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5728,7 +5732,7 @@
     }
   });
 
-  const _hoisted_1$N = { class: "m-fields-data-source-select" };
+  const _hoisted_1$Q = { class: "m-fields-data-source-select" };
   const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
@@ -5786,7 +5790,7 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -5954,8 +5958,8 @@
     }
   });
 
-  const _hoisted_1$M = { class: "m-fields-event-select" };
-  const _hoisted_2$f = {
+  const _hoisted_1$P = { class: "m-fields-event-select" };
+  const _hoisted_2$g = {
     key: 1,
     class: "fullWidth"
   };
@@ -6235,7 +6239,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$M, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             name: "events",
@@ -6244,7 +6248,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6296,7 +6300,7 @@
     }
   });
 
-  const _hoisted_1$L = {
+  const _hoisted_1$O = {
     viewBox: "0 0 32 32",
     version: "1.1",
     xmlns: "http://www.w3.org/2000/svg",
@@ -6309,15 +6313,15 @@
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$L, _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$K = { class: "m-fields-key-value" };
-  const _hoisted_2$e = { key: 0 };
+  const _hoisted_1$N = { class: "m-fields-key-value" };
+  const _hoisted_2$f = { key: 0 };
   const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
@@ -6380,8 +6384,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$K, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -6454,8 +6458,8 @@
     }
   });
 
-  const _hoisted_1$J = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$d = { class: "page-fragment-select-container" };
+  const _hoisted_1$M = { class: "m-fields-page-fragment-select" };
+  const _hoisted_2$e = { class: "page-fragment-select-container" };
   const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
@@ -6502,8 +6506,8 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$J, [
-          vue.createElementVNode("div", _hoisted_2$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6523,8 +6527,8 @@
     }
   });
 
-  const _hoisted_1$I = { class: "background-position-container" };
-  const _hoisted_2$c = { class: "presets-value-list" };
+  const _hoisted_1$L = { class: "background-position-container" };
+  const _hoisted_2$d = { class: "presets-value-list" };
   const _hoisted_3$6 = { class: "custom-value" };
   const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
     __name: "BackgroundPosition",
@@ -6581,8 +6585,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
-          vue.createElementVNode("div", _hoisted_2$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item, index) => {
               return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                 key: index,
@@ -6624,13 +6628,13 @@
 
   const _sfc_main$14 = {};
 
-  const _hoisted_1$H = {
+  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$H, _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)
     ])))
   }
@@ -6638,13 +6642,13 @@
 
   const _sfc_main$13 = {};
 
-  const _hoisted_1$G = {
+  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$G, _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"
@@ -6655,13 +6659,13 @@
 
   const _sfc_main$12 = {};
 
-  const _hoisted_1$F = {
+  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$F, _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"
@@ -6672,13 +6676,13 @@
 
   const _sfc_main$11 = {};
 
-  const _hoisted_1$E = {
+  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$E, _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"
@@ -6764,13 +6768,13 @@
 
   const _sfc_main$$ = {};
 
-  const _hoisted_1$D = {
+  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$D, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -6778,13 +6782,13 @@
 
   const _sfc_main$_ = {};
 
-  const _hoisted_1$C = {
+  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$C, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -6792,13 +6796,13 @@
 
   const _sfc_main$Z = {};
 
-  const _hoisted_1$B = {
+  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$B, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -6888,8 +6892,8 @@
     }
   });
 
-  const _hoisted_1$A = { class: "layout-box-container" };
-  const _hoisted_2$b = {
+  const _hoisted_1$D = { class: "layout-box-container" };
+  const _hoisted_2$c = {
     key: 0,
     class: "help-txt"
   };
@@ -6945,13 +6949,13 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
             return vue.createElementVNode("div", {
               key: index,
               class: vue.normalizeClass(item.class)
             }, [
-              item.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true),
+              item.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true),
               vue.createElementVNode("span", _hoisted_3$5, [
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
@@ -6971,13 +6975,13 @@
 
   const _sfc_main$W = {};
 
-  const _hoisted_1$z = {
+  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$z, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -6985,13 +6989,13 @@
 
   const _sfc_main$V = {};
 
-  const _hoisted_1$y = {
+  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$y, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -6999,13 +7003,13 @@
 
   const _sfc_main$U = {};
 
-  const _hoisted_1$x = {
+  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$x, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7013,13 +7017,13 @@
 
   const _sfc_main$T = {};
 
-  const _hoisted_1$w = {
+  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$w, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7027,13 +7031,13 @@
 
   const _sfc_main$S = {};
 
-  const _hoisted_1$v = {
+  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$v, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7041,13 +7045,13 @@
 
   const _sfc_main$R = {};
 
-  const _hoisted_1$u = {
+  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$u, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7055,13 +7059,13 @@
 
   const _sfc_main$Q = {};
 
-  const _hoisted_1$t = {
+  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$t, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7069,13 +7073,13 @@
 
   const _sfc_main$P = {};
 
-  const _hoisted_1$s = {
+  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$s, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7083,13 +7087,13 @@
 
   const _sfc_main$O = {};
 
-  const _hoisted_1$r = {
+  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$r, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7097,13 +7101,13 @@
 
   const _sfc_main$N = {};
 
-  const _hoisted_1$q = {
+  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$q, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7111,13 +7115,13 @@
 
   const _sfc_main$M = {};
 
-  const _hoisted_1$p = {
+  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$p, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7125,13 +7129,13 @@
 
   const _sfc_main$L = {};
 
-  const _hoisted_1$o = {
+  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$o, _cache[0] || (_cache[0] = [
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
       vue.createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1)
     ])))
   }
@@ -7139,13 +7143,13 @@
 
   const _sfc_main$K = {};
 
-  const _hoisted_1$n = {
+  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$n, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7153,13 +7157,13 @@
 
   const _sfc_main$J = {};
 
-  const _hoisted_1$m = {
+  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$m, _cache[0] || (_cache[0] = [
+    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)
     ])))
   }
@@ -7315,8 +7319,8 @@
     }
   });
 
-  const _hoisted_1$l = { class: "layout-box-container" };
-  const _hoisted_2$a = { class: "next-input" };
+  const _hoisted_1$o = { class: "layout-box-container" };
+  const _hoisted_2$b = { class: "next-input" };
   const _hoisted_3$4 = ["onUpdate:modelValue", "title", "onChange"];
   const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     __name: "Position",
@@ -7350,13 +7354,13 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
             return vue.createElementVNode("div", {
               key: index,
               class: vue.normalizeClass(item.class)
             }, [
-              vue.createElementVNode("span", _hoisted_2$a, [
+              vue.createElementVNode("span", _hoisted_2$b, [
                 vue.withDirectives(vue.createElementVNode("input", {
                   "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
                   title: _ctx.model[item.name],
@@ -7428,8 +7432,8 @@
     }
   });
 
-  const _hoisted_1$k = { class: "border-box-container" };
-  const _hoisted_2$9 = { class: "border-icon-container" };
+  const _hoisted_1$n = { 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" };
   const _hoisted_5$1 = { class: "border-icon-container-row" };
@@ -7487,8 +7491,8 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+          vue.createElementVNode("div", _hoisted_2$a, [
             vue.createElementVNode("div", _hoisted_3$3, [
               vue.createElementVNode("div", {
                 class: vue.normalizeClass(["border-icon border-icon-top", { active: direction.value === "Top" }]),
@@ -7568,7 +7572,7 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-style-setter" };
+  const _hoisted_1$m = { class: "m-fields-style-setter" };
   const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsStyleSetter"
@@ -7618,7 +7622,7 @@
         emit("change", v, eventData);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           vue.createVNode(vue.unref(designPlugin.TMagicCollapse), { "model-value": collapseValue.value }, {
             default: vue.withCtx(() => [
               (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
@@ -7648,7 +7652,7 @@
     }
   });
 
-  const _hoisted_1$i = {
+  const _hoisted_1$l = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
@@ -7751,7 +7755,7 @@
             ])),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "清除",
@@ -7826,12 +7830,11 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const target = vue.useTemplateRef("target");
-      const { isDragging } = useGetSo(target, emit);
+      const targetEl = vue.useTemplateRef("target");
+      const { isDragging } = useGetSo(targetEl, emit);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
-          ref_key: "target",
-          ref: target,
+          ref: "target",
           class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": vue.unref(isDragging) }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
@@ -7860,7 +7863,7 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const props = __props;
-      const el = vue.useTemplateRef("el");
+      const el = vue.useTemplateRef("target");
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
       const center = vue.ref(0);
@@ -7966,8 +7969,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "el",
-          ref: el,
+          ref: "target",
           class: "m-editor-layout",
           style: vue.normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
         }, [
@@ -8000,11 +8002,11 @@
     }
   });
 
-  const _hoisted_1$h = {
+  const _hoisted_1$k = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -8076,7 +8078,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -8141,7 +8143,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$8, [
+              vue.createElementVNode("span", _hoisted_2$9, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -8158,12 +8160,12 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$j = {
     key: 0,
     id: "m-editor-page-bar-add-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
   };
-  const _hoisted_2$7 = {
+  const _hoisted_2$8 = {
     key: 1,
     style: { "width": "21px" }
   };
@@ -8189,7 +8191,7 @@
         editorService.add(pageConfig);
       };
       return (_ctx, _cache) => {
-        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
             reference: vue.withCtx(() => [
               vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
@@ -8216,11 +8218,20 @@
             ]),
             _: 1
           })
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7));
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8));
       };
     }
   });
 
+  const _hoisted_1$i = {
+    class: "m-editor-page-bar",
+    ref: "pageBar"
+  };
+  const _hoisted_2$7 = {
+    key: 0,
+    class: "m-editor-page-bar-items",
+    ref: "itemsContainer"
+  };
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
@@ -8235,33 +8246,33 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const uiService = services?.uiService;
-      const itemsContainer = vue.useTemplateRef("itemsContainer");
+      const itemsContainerEl = vue.useTemplateRef("itemsContainer");
       const canScroll = vue.ref(false);
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
       const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
       const itemsContainerWidth = vue.ref(0);
+      const pageBarEl = vue.useTemplateRef("pageBar");
       const setCanScroll = () => {
-        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
+        itemsContainerWidth.value = (pageBarEl.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
         vue.nextTick(() => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+          if (itemsContainerEl.value) {
+            canScroll.value = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value > 1;
           }
         });
       };
       const resizeObserver = new ResizeObserver(() => {
         setCanScroll();
       });
-      const pageBar = vue.useTemplateRef("pageBar");
       vue.onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
+        pageBarEl.value && resizeObserver.observe(pageBarEl.value);
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
       });
       let translateLeft = 0;
       const scroll = (type) => {
-        if (!itemsContainer.value || !canScroll.value) return;
-        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (!itemsContainerEl.value || !canScroll.value) return;
+        const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
         if (type === "left") {
           scrollTo(translateLeft + 200);
         } else if (type === "right") {
@@ -8273,8 +8284,8 @@
         }
       };
       const scrollTo = (value) => {
-        if (!itemsContainer.value || !canScroll.value) return;
-        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (!itemsContainerEl.value || !canScroll.value) return;
+        const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
         if (value >= 0) {
           value = 0;
         }
@@ -8282,7 +8293,7 @@
           value = -maxScrollLeft;
         }
         translateLeft = value;
-        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+        itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
       vue.watch(
         () => props.length,
@@ -8341,18 +8352,9 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-page-bar",
-          ref_key: "pageBar",
-          ref: pageBar
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.renderSlot(_ctx.$slots, "prepend"),
-          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "m-editor-page-bar-items",
-            ref_key: "itemsContainer",
-            ref: itemsContainer
-          }, [
+          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 512)) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -8374,7 +8376,7 @@
     }
   });
 
-  const _hoisted_1$f = {
+  const _hoisted_1$h = {
     key: 0,
     id: "m-editor-page-bar-list-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -8397,7 +8399,7 @@
         await editorService?.select(id);
       };
       return (_ctx, _cache) => {
-        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
@@ -8437,7 +8439,7 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+  const _hoisted_1$g = { 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: {
@@ -8476,7 +8478,7 @@
         emit("search", values);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           vue.createVNode(_sfc_main$1s, {
             icon: vue.unref(iconsVue.Search),
             onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
@@ -8501,7 +8503,7 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_1$f = { 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"];
@@ -8553,38 +8555,37 @@
       const remove = (node) => {
         editorService?.remove(node);
       };
-      const pageBarScrollContainer = vue.useTemplateRef("pageBarScrollContainer");
-      const pageBarItems = vue.useTemplateRef("pageBarItems");
+      const pageBarScrollContainerRef = vue.useTemplateRef("pageBarScrollContainer");
+      const pageBarItemEls = vue.useTemplateRef("pageBarItems");
       vue.watch(page, (page2) => {
-        if (!page2 || !pageBarScrollContainer.value?.itemsContainerWidth || !pageBarItems.value || pageBarItems.value.length < 2) {
+        if (!page2 || !pageBarScrollContainerRef.value?.itemsContainerWidth || !pageBarItemEls.value || pageBarItemEls.value.length < 2) {
           return;
         }
-        const firstItem = pageBarItems.value[0];
-        const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+        const firstItem = pageBarItemEls.value[0];
+        const lastItem = pageBarItemEls.value[pageBarItemEls.value.length - 1];
         if (page2.id === firstItem.dataset.pageId) {
-          pageBarScrollContainer.value.scroll("start");
+          pageBarScrollContainerRef.value.scroll("start");
         } else if (page2.id === lastItem.dataset.pageId) {
-          pageBarScrollContainer.value.scroll("end");
+          pageBarScrollContainerRef.value.scroll("end");
         } else {
-          const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page2.id);
+          const pageItem = pageBarItemEls.value.find((item) => item.dataset.pageId === page2.id);
           if (!pageItem) {
             return;
           }
           const pageItemRect = pageItem.getBoundingClientRect();
           const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
-          const { itemsContainerWidth } = pageBarScrollContainer.value;
+          const { itemsContainerWidth } = pageBarScrollContainerRef.value;
           const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
-          const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+          const translateLeft = pageBarScrollContainerRef.value.getTranslateLeft();
           if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
-            pageBarScrollContainer.value.scrollTo(left);
+            pageBarScrollContainerRef.value.scrollTo(left);
           }
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.createVNode(_sfc_main$x, {
-            ref_key: "pageBarScrollContainer",
-            ref: pageBarScrollContainer,
+            ref: "pageBarScrollContainer",
             "page-bar-sort-options": _ctx.pageBarSortOptions,
             length: list.value.length
           }, {
@@ -8608,8 +8609,7 @@
                 return vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
                   ref_for: true,
-                  ref_key: "pageBarItems",
-                  ref: pageBarItems,
+                  ref: "pageBarItems",
                   key: item.id,
                   "data-page-id": item.id,
                   onClick: ($event) => switchPage(item.id)
@@ -8670,7 +8670,7 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_1$e = { class: "m-editor-empty-panel" };
   const _hoisted_2$5 = { class: "m-editor-empty-content" };
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -8694,7 +8694,7 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
@@ -8721,6 +8721,11 @@
     }
   });
 
+  const _hoisted_1$d = {
+    class: "m-editor",
+    ref: "content",
+    style: { "min-width": "180px" }
+  };
   const DEFAULT_LEFT_COLUMN_WIDTH = 310;
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
@@ -8738,8 +8743,8 @@
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
-      const content = vue.useTemplateRef("content");
-      const splitView = vue.useTemplateRef("splitView");
+      const contentEl = vue.useTemplateRef("content");
+      const splitViewRef = vue.useTemplateRef("splitView");
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
@@ -8752,7 +8757,7 @@
         right: getRightColumnWidthCacheData()
       });
       vue.watch(pageLength, () => {
-        splitView.value?.updateWidth();
+        splitViewRef.value?.updateWidth();
       });
       vue.watch(
         () => uiService?.get("hideSlideBar"),
@@ -8777,8 +8782,8 @@
         });
       });
       vue.onMounted(() => {
-        if (content.value) {
-          resizerObserver.observe(content.value);
+        if (contentEl.value) {
+          resizerObserver.observe(contentEl.value);
         }
       });
       vue.onBeforeUnmount(() => {
@@ -8793,12 +8798,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor",
-          ref_key: "content",
-          ref: content,
-          style: { "min-width": "180px" }
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
@@ -8811,8 +8811,7 @@
             }, null, 8, ["init-values", "options"])
           ]) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
-            ref_key: "splitView",
-            ref: splitView,
+            ref: "splitView",
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
             "center-class": "m-editor-framework-center",
@@ -9023,8 +9022,9 @@
         });
         return data;
       });
+      const navMenuEl = vue.useTemplateRef("navMenu");
       const resizeObserver = new ResizeObserver(() => {
-        const rect = navMenu.value?.getBoundingClientRect();
+        const rect = navMenuEl.value?.getBoundingClientRect();
         if (rect) {
           uiService?.set("navMenuRect", {
             left: rect.left,
@@ -9034,9 +9034,8 @@
           });
         }
       });
-      const navMenu = vue.useTemplateRef("navMenu");
       vue.onMounted(() => {
-        navMenu.value && resizeObserver.observe(navMenu.value);
+        navMenuEl.value && resizeObserver.observe(navMenuEl.value);
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
@@ -9045,8 +9044,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
           style: vue.normalizeStyle({ height: `${_ctx.height}px` }),
-          ref_key: "navMenu",
-          ref: navMenu
+          ref: "navMenu"
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -9067,7 +9065,7 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-editor-props-form-panel" };
+  const _hoisted_1$c = { class: "m-editor-props-form-panel" };
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFormPanel"
@@ -9092,11 +9090,11 @@
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const { height: editorContentHeight } = useEditorContentHeight();
       const stage = vue.computed(() => services?.editorService.get("stage"));
-      const configForm = vue.useTemplateRef("configForm");
+      const configFormRef = vue.useTemplateRef("configForm");
       vue.watchEffect(() => {
-        if (configForm.value) {
-          configForm.value.formState.stage = stage.value;
-          configForm.value.formState.services = services;
+        if (configFormRef.value) {
+          configFormRef.value.formState.stage = stage.value;
+          configFormRef.value.formState.services = services;
         }
       });
       const internalInstance = vue.getCurrentInstance();
@@ -9105,7 +9103,7 @@
       });
       const submit = async (v, eventData) => {
         try {
-          const values = await configForm.value?.submitForm();
+          const values = await configFormRef.value?.submitForm();
           emit("submit", values, eventData);
         } catch (e) {
           emit("submit-error", e);
@@ -9117,15 +9115,14 @@
       const saveCode = (values) => {
         emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
       };
-      __expose({ configForm, submit });
+      __expose({ configForm: configFormRef, submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.renderSlot(_ctx.$slots, "props-form-panel-header"),
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(formPlugin.MForm), {
-                ref_key: "configForm",
-                ref: configForm,
+                ref: "configForm",
                 class: vue.normalizeClass(propsPanelSize.value),
                 "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
                 "label-width": _ctx.labelWidth,
@@ -9191,7 +9188,7 @@
     };
   };
 
-  const _hoisted_1$a = {
+  const _hoisted_1$b = {
     ref: "propsPanel",
     class: "m-editor-props-panel"
   };
@@ -9257,8 +9254,10 @@
       const errorHandler = (e) => {
         emit("form-error", e);
       };
-      const mountedHandler = (e) => {
-        emit("mounted", e);
+      const mountedHandler = () => {
+        if (propertyFormPanelRef.value) {
+          emit("mounted", propertyFormPanelRef.value);
+        }
       };
       const propsPanelEl = vue.useTemplateRef("propsPanel");
       const widthChange = ({ deltaX }) => {
@@ -9279,7 +9278,7 @@
         submit
       });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(_sfc_main$q, {
             ref: "propertyFormPanel",
@@ -9363,9 +9362,9 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const menu = vue.useTemplateRef("menu");
-      const buttons = vue.useTemplateRef("buttons");
-      const subMenu = vue.useTemplateRef("subMenu");
+      const menuEl = vue.useTemplateRef("menu");
+      const buttonRefs = vue.useTemplateRef("buttons");
+      const subMenuRef = vue.useTemplateRef("subMenu");
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
       const zIndex = designPlugin.useZIndex();
@@ -9379,11 +9378,11 @@
         left: `${menuPosition.value.left + 2}px`,
         zIndex: curZIndex.value
       }));
-      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
+      const contains = (el) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
       const hide = () => {
         if (!visible.value) return;
         visible.value = false;
-        subMenu.value?.hide();
+        subMenuRef.value?.hide();
         emit("hide");
       };
       const clickHandler = (event) => {
@@ -9404,7 +9403,7 @@
         hide();
       };
       const setPosition = (e) => {
-        const menuHeight = menu.value?.clientHeight || 0;
+        const menuHeight = menuEl.value?.clientHeight || 0;
         let top = e.clientY;
         if (menuHeight + e.clientY > document.body.clientHeight) {
           top = document.body.clientHeight - menuHeight;
@@ -9432,14 +9431,14 @@
           if (!visible.value) {
             return;
           }
-          if (menu.value) {
-            let y = menu.value.offsetTop;
-            if (buttons.value?.[index].$el) {
-              const rect = buttons.value?.[index].$el.getBoundingClientRect();
+          if (menuEl.value) {
+            let y = menuEl.value.offsetTop;
+            if (buttonRefs.value?.[index].$el) {
+              const rect = buttonRefs.value?.[index].$el.getBoundingClientRect();
               y = rect.top;
             }
-            subMenu.value?.show({
-              clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+            subMenuRef.value?.show({
+              clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
               clientY: y
             });
           }
@@ -9457,7 +9456,7 @@
         globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
       });
       __expose({
-        menu,
+        menu: menuEl,
         menuPosition,
         hide,
         show,
@@ -9470,8 +9469,7 @@
           default: vue.withCtx(() => [
             vue.withDirectives(vue.createElementVNode("div", {
               class: "magic-editor-content-menu",
-              ref_key: "menu",
-              ref: menu,
+              ref: "menu",
               style: vue.normalizeStyle(menuStyle.value),
               onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
               onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(() => {
@@ -9483,8 +9481,7 @@
                   return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                     "event-type": "mouseup",
                     ref_for: true,
-                    ref_key: "buttons",
-                    ref: buttons,
+                    ref: "buttons",
                     class: vue.normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
                     data: item,
                     key: index,
@@ -9497,8 +9494,7 @@
                 subMenuData.value.length ? (vue.openBlock(), vue.createBlock(_component_content_menu, {
                   key: 0,
                   class: "sub-menu",
-                  ref_key: "subMenu",
-                  ref: subMenu,
+                  ref: "subMenu",
                   active: _ctx.active,
                   "menu-data": subMenuData.value,
                   "is-sub-menu": true,
@@ -9556,7 +9552,7 @@
     }
   });
 
-  const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
+  const _hoisted_1$a = ["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 = {
@@ -9682,14 +9678,14 @@
               }, 1032, ["data", "parent", "parentsId", "node-status-map", "indent"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 40, _hoisted_1$9)), [
+        ], 40, _hoisted_1$a)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 1,
     class: "m-editor-tree-empty"
   };
@@ -9736,7 +9732,7 @@
               ]),
               _: 2
             }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
-          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
             vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
           ]))
         ], 32);
@@ -9987,7 +9983,7 @@
     };
   };
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
@@ -10005,9 +10001,9 @@
       const { codeBlockService } = vue.inject("services") || {};
       const editable = vue.computed(() => codeBlockService?.getEditStatus());
       const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
-      const codeBlockList = vue.useTemplateRef("codeBlockList");
+      const codeBlockListRef = vue.useTemplateRef("codeBlockList");
       const filterTextChangeHandler = (val) => {
-        codeBlockList.value?.filter(val);
+        codeBlockListRef.value?.filter(val);
       };
       eventBus?.on("edit-code", (id) => {
         editCode(id);
@@ -10017,7 +10013,7 @@
         menuData: contentMenuData,
         contentMenuHideHandler
       } = useContentMenu$1((id) => {
-        codeBlockList.value?.deleteCode(id);
+        codeBlockListRef.value?.deleteCode(id);
       });
       const menuData = vue.computed(() => props.customContentMenu(contentMenuData, "code-block"));
       return (_ctx, _cache) => {
@@ -10025,7 +10021,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$7, [
+                vue.createElementVNode("div", _hoisted_1$8, [
                   vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                     key: 0,
@@ -10043,8 +10039,7 @@
                 ])
               ]),
               vue.createVNode(_sfc_main$k, {
-                ref_key: "codeBlockList",
-                ref: codeBlockList,
+                ref: "codeBlockList",
                 "custom-error": _ctx.customError,
                 indent: _ctx.indent,
                 "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
@@ -10423,7 +10418,7 @@
     };
   };
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
+  const _hoisted_1$7 = { class: "search-wrapper" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -10486,7 +10481,7 @@
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$6, [
+              vue.createElementVNode("div", _hoisted_1$7, [
                 vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicPopover), {
                   key: 0,
@@ -10558,7 +10553,7 @@
     }
   });
 
-  const _hoisted_1$5 = {
+  const _hoisted_1$6 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -10573,7 +10568,7 @@
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
           vue.createElementVNode("path", {
             "fill-rule": "evenodd",
             d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
@@ -10671,7 +10666,7 @@
       const props = __props;
       const emit = __emit;
       const services = vue.inject("services");
-      const menu = vue.useTemplateRef("menu");
+      const menuRef = vue.useTemplateRef("menu");
       const node = vue.computed(() => services?.editorService.get("node"));
       const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
@@ -10747,7 +10742,7 @@
         )
       );
       const show = (e) => {
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       __expose({
         show
@@ -10755,8 +10750,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
-          ref_key: "menu",
-          ref: menu,
+          ref: "menu",
           style: { "overflow": "initial" }
         }, null, 8, ["menu-data"]);
       };
@@ -10798,7 +10792,7 @@
     }
   });
 
-  const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+  const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     const isMultiSelect = vue.computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
     const select = async (data) => {
       if (!data.id) {
@@ -10863,9 +10857,8 @@
         select(data);
       });
     };
-    const menu = vue.useTemplateRef("menu");
     return {
-      menu,
+      menuRef,
       nodeClickHandler,
       nodeContentMenuHandler(event, data) {
         event.preventDefault();
@@ -10873,7 +10866,7 @@
         if (nodes.length < 2 || !nodes.includes(data)) {
           nodeClickHandler(event, data);
         }
-        menu.value?.show(event);
+        menuRef.value?.show(event);
       },
       highlightHandler
     };
@@ -11274,11 +11267,11 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const tree = vue.useTemplateRef("tree");
+      const treeRef = vue.useTemplateRef("tree");
       const page = vue.computed(() => editorService?.get("page"));
       const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
       const { nodeStatusMap } = useNodeStatus(services);
-      const { isCtrlKeyDown } = useKeybinding(services, tree);
+      const { isCtrlKeyDown } = useKeybinding(services, treeRef);
       const filterNodeMethod = (v, data) => {
         let name = "";
         if (data.name) {
@@ -11300,12 +11293,12 @@
         }
       };
       const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+      const menuRef = vue.useTemplateRef("menu");
       const {
-        menu,
         nodeClickHandler,
         nodeContentMenuHandler,
         highlightHandler: mouseenterHandler
-      } = useClick(services, isCtrlKeyDown, nodeStatusMap);
+      } = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
@@ -11314,8 +11307,7 @@
             page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: 0,
               tabindex: "-1",
-              ref_key: "tree",
-              ref: tree,
+              ref: "tree",
               data: nodeData.value,
               "node-status-map": vue.unref(nodeStatusMap),
               indent: _ctx.indent,
@@ -11343,8 +11335,7 @@
             }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$e, {
-                ref_key: "menu",
-                ref: menu,
+                ref: "menu",
                 "layer-content-menu": _ctx.layerContentMenu,
                 "custom-content-menu": _ctx.customContentMenu,
                 onCollapseAll: collapseAllHandler
@@ -11357,7 +11348,7 @@
     }
   });
 
-  const _hoisted_1$4 = ["onClick", "onDragstart"];
+  const _hoisted_1$5 = ["onClick", "onDragstart"];
   const _hoisted_2$2 = ["title"];
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -11478,7 +11469,7 @@
                                   title: item.text
                                 }, vue.toDisplayString(item.text), 9, _hoisted_2$2)
                               ])
-                            ], 40, _hoisted_1$4);
+                            ], 40, _hoisted_1$5);
                           }), 128))
                         ]),
                         _: 2
@@ -11496,7 +11487,7 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     key: 0,
     class: "m-editor-sidebar"
   };
@@ -11646,7 +11637,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
             vue.createElementVNode("div", _hoisted_2$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -11851,8 +11842,8 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const bar = vue.useTemplateRef("bar");
-      const thumb = vue.useTemplateRef("thumb");
+      const barEl = vue.useTemplateRef("bar");
+      const thumbEl = vue.useTemplateRef("thumb");
       const thumbSize = vue.computed(() => props.size * (props.size / props.scrollSize));
       const thumbPos = vue.computed(() => props.pos / props.scrollSize * props.size);
       const thumbStyle = vue.computed(() => ({
@@ -11861,9 +11852,8 @@
       }));
       let gesto;
       vue.onMounted(() => {
-        if (!thumb.value) return;
-        const thumbEl = thumb.value;
-        gesto = new Gesto(thumbEl, {
+        if (!thumbEl.value) return;
+        gesto = new Gesto(thumbEl.value, {
           container: window
         });
         gesto.on("dragStart", (e) => {
@@ -11872,11 +11862,11 @@
         }).on("drag", (e) => {
           scrollBy(getDelta(e));
         });
-        bar.value?.addEventListener("wheel", wheelHandler, false);
+        barEl.value?.addEventListener("wheel", wheelHandler, false);
       });
       vue.onBeforeUnmount(() => {
         if (gesto) gesto.off();
-        bar.value?.removeEventListener("wheel", wheelHandler, false);
+        barEl.value?.removeEventListener("wheel", wheelHandler, false);
       });
       const wheelHandler = (e) => {
         const delta = props.isHorizontal ? e.deltaX : e.deltaY;
@@ -11907,13 +11897,11 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "bar",
-          ref: bar,
+          ref: "bar",
           class: vue.normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
         }, [
           vue.createElementVNode("div", {
-            ref_key: "thumb",
-            ref: thumb,
+            ref: "thumb",
             class: "m-editor-scroll-bar-thumb",
             style: vue.normalizeStyle(thumbStyle.value)
           }, null, 4)
@@ -11922,6 +11910,10 @@
     }
   });
 
+  const _hoisted_1$3 = {
+    class: "m-editor-scroll-viewer-container",
+    ref: "container"
+  };
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
@@ -11940,8 +11932,8 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const container = vue.useTemplateRef("container");
-      const el = vue.useTemplateRef("el");
+      const containerEl = vue.useTemplateRef("container");
+      const el = vue.useTemplateRef("target");
       const style = vue.computed(
         () => `
         width: ${utils.isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -11954,9 +11946,9 @@
       const scrollHeight = vue.ref(0);
       let scrollViewer;
       vue.onMounted(() => {
-        if (!container.value || !el.value) return;
+        if (!containerEl.value || !el.value) return;
         scrollViewer = new ScrollViewer({
-          container: container.value,
+          container: containerEl.value,
           target: el.value,
           zoom: props.zoom,
           correctionScrollSize: props.correctionScrollSize
@@ -11992,17 +11984,12 @@
         });
       };
       __expose({
-        container
+        container: containerEl
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-scroll-viewer-container",
-          ref_key: "container",
-          ref: container
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           vue.createElementVNode("div", {
-            ref_key: "el",
-            ref: el,
+            ref: "target",
             style: vue.normalizeStyle(style.value)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
@@ -12035,8 +12022,8 @@
       const editorService = services?.editorService;
       const visible = vue.ref(false);
       const buttonVisible = vue.ref(false);
-      const button = vue.useTemplateRef("button");
-      const box = vue.useTemplateRef("box");
+      const buttonEl = vue.useTemplateRef("button");
+      const boxRef = vue.useTemplateRef("box");
       const stage = vue.computed(() => editorService?.get("stage"));
       const page = vue.computed(() => editorService?.get("page"));
       const nodes = vue.computed(() => editorService?.get("nodes") || []);
@@ -12081,12 +12068,12 @@
         top: 0
       });
       vue.watch(visible, async (visible2) => {
-        if (!button.value || !visible2) {
+        if (!buttonEl.value || !visible2) {
           return;
         }
         await vue.nextTick();
-        const rect = button.value.getBoundingClientRect();
-        const height = box.value?.target?.clientHeight || 0;
+        const rect = buttonEl.value.getBoundingClientRect();
+        const height = boxRef.value?.target?.clientHeight || 0;
         menuPosition.value = {
           left: rect.left + rect.width + 5,
           top: rect.top - height / 2 + rect.height / 2
@@ -12100,8 +12087,7 @@
           }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", {
-                ref_key: "button",
-                ref: button,
+                ref: "button",
                 class: "m-editor-stage-float-button",
                 onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
               }, "可选组件", 512)
@@ -12110,8 +12096,7 @@
           })) : vue.createCommentVNode("", true),
           page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
             key: 1,
-            ref_key: "box",
-            ref: box,
+            ref: "box",
             visible: visible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
             title: "当前位置下的组件",
@@ -12137,7 +12122,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
-      const stageOverlay = vue.useTemplateRef("stageOverlay");
+      const stageOverlayEl = vue.useTemplateRef("stageOverlay");
       const stageOverlayVisible = vue.computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
       const wrapWidth = vue.computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
       const wrapHeight = vue.computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
@@ -12156,12 +12141,12 @@
           services?.stageOverlayService.closeOverlay();
         }
       });
-      vue.watch(stageOverlay, (stageOverlay2) => {
+      vue.watch(stageOverlayEl, (stageOverlay) => {
         if (!services) return;
         const subStage = services.stageOverlayService.createStage(stageOptions);
         services?.stageOverlayService.set("stage", subStage);
-        if (stageOverlay2 && subStage) {
-          subStage.mount(stageOverlay2);
+        if (stageOverlay && subStage) {
+          subStage.mount(stageOverlay);
           const { mask, renderer } = subStage;
           const { contentWindow } = renderer;
           mask?.showRule(false);
@@ -12193,8 +12178,7 @@
             _: 1
           }),
           vue.createElementVNode("div", {
-            ref_key: "stageOverlay",
-            ref: stageOverlay,
+            ref: "stageOverlay",
             class: "m-editor-stage-overlay-container",
             style: vue.normalizeStyle(style.value),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
@@ -12258,7 +12242,7 @@
       const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const menu = vue.useTemplateRef("menu");
+      const menuRef = vue.useTemplateRef("menu");
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const nodes = vue.computed(() => editorService?.get("nodes"));
@@ -12277,7 +12261,7 @@
               }
             },
             useCopyMenu(),
-            usePasteMenu(menu),
+            usePasteMenu(menuRef),
             {
               type: "divider",
               direction: "horizontal",
@@ -12359,14 +12343,13 @@
         { immediate: true }
       );
       const show = (e) => {
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       __expose({ show });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
-          ref_key: "menu",
-          ref: menu
+          ref: "menu"
         }, null, 8, ["menu-data"]);
       };
     }
@@ -12389,9 +12372,9 @@
       let runtime = null;
       const services = vue.inject("services");
       const stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
-      const stageWrap = vue.useTemplateRef("stageWrap");
-      const stageContainer = vue.useTemplateRef("stageContainer");
-      const menu = vue.useTemplateRef("menu");
+      const stageWrapRef = vue.useTemplateRef("stageWrap");
+      const stageContainerEl = vue.useTemplateRef("stageContainer");
+      const menuRef = vue.useTemplateRef("menu");
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const isMultiSelect = vue.computed(() => nodes.value.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
@@ -12402,14 +12385,14 @@
       const node = vue.computed(() => services?.editorService.get("node"));
       vue.watchEffect(() => {
         if (stage || !page.value) return;
-        if (!stageContainer.value) return;
+        if (!stageContainerEl.value) return;
         if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
         stage = useStage(props.stageOptions);
         stage.on("select", () => {
-          stageWrap.value?.container?.focus();
+          stageWrapRef.value?.container?.focus();
         });
         services?.editorService.set("stage", vue.markRaw(stage));
-        stage.mount(stageContainer.value);
+        stage.mount(stageContainerEl.value);
         if (!node.value?.id) {
           return;
         }
@@ -12462,9 +12445,9 @@
         }
       });
       vue.onMounted(() => {
-        if (stageWrap.value?.container) {
-          resizeObserver.observe(stageWrap.value.container);
-          services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+        if (stageWrapRef.value?.container) {
+          resizeObserver.observe(stageWrapRef.value.container);
+          services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
         }
       });
       vue.onBeforeUnmount(() => {
@@ -12477,7 +12460,7 @@
       const parseDSL = getEditorConfig("parseDSL");
       const contextmenuHandler = (e) => {
         e.preventDefault();
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       const dragoverHandler = (e) => {
         if (!e.dataTransfer) return;
@@ -12500,9 +12483,9 @@
         if (parentId) {
           parent = services?.editorService.getNodeById(parentId, false);
         }
-        if (parent && stageContainer.value && stage) {
+        if (parent && stageContainerEl.value && stage) {
           const layout = await services?.editorService.getLayout(parent);
-          const containerRect = stageContainer.value.getBoundingClientRect();
+          const containerRect = stageContainerEl.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
           const { style = {} } = config.data;
           let top = 0;
@@ -12536,8 +12519,7 @@
         const _directive_loading = vue.resolveDirective("loading");
         return vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$8, {
           class: "m-editor-stage",
-          ref_key: "stageWrap",
-          ref: stageWrap,
+          ref: "stageWrap",
           tabindex: "-1",
           "element-loading-text": "Runtime 加载中...",
           width: stageRect.value?.width,
@@ -12549,14 +12531,13 @@
             width: 60,
             height: 50
           },
-          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrap)?.container?.focus())
+          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrapRef)?.container?.focus())
         }, {
           content: vue.withCtx(() => [
             !_ctx.disabledStageOverlay ? (vue.openBlock(), vue.createBlock(_sfc_main$6, { key: 0 })) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$4, {
-                ref_key: "menu",
-                ref: menu,
+                ref: "menu",
                 "is-multi-select": isMultiSelect.value,
                 "stage-content-menu": _ctx.stageContentMenu,
                 "custom-content-menu": _ctx.customContentMenu
@@ -12566,8 +12547,7 @@
           default: vue.withCtx(() => [
             vue.createElementVNode("div", {
               class: "m-editor-stage-container",
-              ref_key: "stageContainer",
-              ref: stageContainer,
+              ref: "stageContainer",
               style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
               onContextmenu: contextmenuHandler,
               onDrop: dropHandler,
@@ -12908,7 +12888,7 @@
   const codeBlockService = new CodeBlock();
 
   class ComponentList extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       list: []
     });
     constructor() {
@@ -13089,7 +13069,7 @@
 
   const idleTask = new IdleTask();
   class Dep extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       collecting: false
     });
     watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
@@ -13131,6 +13111,7 @@
       });
       this.set("collecting", false);
       this.emit("collected", nodes, deep);
+      this.emit("ds-collected", nodes, deep);
     }
     collectIdle(nodes, depExtendedData = {}, deep = false, type) {
       this.set("collecting", true);
@@ -13149,17 +13130,20 @@
         idleTask.once("finish", () => {
           this.emit("collected", nodes, deep);
           this.set("collecting", false);
+        });
+        idleTask.once("hight-level-finish", () => {
+          this.emit("ds-collected", nodes, deep);
           resolve();
         });
       });
     }
     collectNode(node, target, depExtendedData = {}, deep = false) {
       if (utils.isPage(node)) {
-        Object.entries(target.deps).forEach(([depKey, dep]) => {
+        for (const [depKey, dep] of Object.entries(target.deps)) {
           if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
             delete target.deps[depKey];
           }
-        });
+        }
       } else {
         this.watcher.removeTargetDep(target, node);
       }
@@ -13198,7 +13182,8 @@
           node,
           deep: false,
           target
-        }
+        },
+        target.type === core.DepTargetType.DATA_SOURCE
       );
       if (deep && Array.isArray(node.items) && node.items.length) {
         node.items.forEach((item) => {
@@ -13445,7 +13430,7 @@
     sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
   };
   class StageOverlay extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       wrapDiv: document.createElement("div"),
       sourceEl: null,
       contentEl: null,
@@ -13688,10 +13673,12 @@
       (eventMethodList) => {
         const eventsList = {};
         const methodsList = {};
-        eventMethodList && Object.keys(eventMethodList).forEach((type) => {
-          eventsList[type] = eventMethodList[type].events;
-          methodsList[type] = eventMethodList[type].methods;
-        });
+        if (eventMethodList) {
+          for (const type of Object.keys(eventMethodList)) {
+            eventsList[type] = eventMethodList[type].events;
+            methodsList[type] = eventMethodList[type].methods;
+          }
+        }
         eventsService.setEvents(eventsList);
         eventsService.setMethods(methodsList);
       },
@@ -13702,9 +13689,12 @@
     vue.watch(
       () => props.datasourceConfigs,
       (configs) => {
-        configs && Object.entries(configs).forEach(([key, value]) => {
+        if (!configs) {
+          return;
+        }
+        for (const [key, value] of Object.entries(configs)) {
           dataSourceService.setFormConfig(key, value);
-        });
+        }
       },
       {
         immediate: true
@@ -13713,9 +13703,12 @@
     vue.watch(
       () => props.datasourceValues,
       (values) => {
-        values && Object.entries(values).forEach(([key, value]) => {
+        if (!values) {
+          return;
+        }
+        for (const [key, value] of Object.entries(values)) {
           dataSourceService.setFormValue(key, value);
-        });
+        }
       },
       {
         immediate: true
@@ -13726,16 +13719,18 @@
       (eventMethodList) => {
         const eventsList = {};
         const methodsList = {};
-        eventMethodList && Object.keys(eventMethodList).forEach((type) => {
-          eventsList[type] = eventMethodList[type].events;
-          methodsList[type] = eventMethodList[type].methods;
-        });
-        Object.entries(eventsList).forEach(([key, value]) => {
+        if (eventMethodList) {
+          for (const type of Object.keys(eventMethodList)) {
+            eventsList[type] = eventMethodList[type].events;
+            methodsList[type] = eventMethodList[type].methods;
+          }
+        }
+        for (const [key, value] of Object.entries(eventsList)) {
           dataSourceService.setFormEvent(key, value);
-        });
-        Object.entries(methodsList).forEach(([key, value]) => {
+        }
+        for (const [key, value] of Object.entries(methodsList)) {
           dataSourceService.setFormMethod(key, value);
-        });
+        }
       },
       {
         immediate: true
@@ -13766,6 +13761,91 @@
     });
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+    const getTMagicApp = () => {
+      const renderer = editorService.get("stage")?.renderer;
+      if (!renderer) {
+        return void 0;
+      }
+      if (renderer.runtime) {
+        return renderer.runtime.getApp?.();
+      }
+      return new Promise((resolve) => {
+        const timeout = globalThis.setTimeout(() => {
+          resolve(void 0);
+        }, 1e4);
+        renderer.on("runtime-ready", () => {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+          }
+          resolve(renderer.runtime?.getApp?.());
+        });
+      });
+    };
+    const updateStageNodes = (nodes) => {
+      for (const node of nodes) {
+        updateStageNode(node);
+      }
+    };
+    const updateStageNode = (node) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      return editorService.get("stage")?.update({
+        config: lodashEs.cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: lodashEs.cloneDeep(root)
+      });
+    };
+    const updateDataSourceSchema = async () => {
+      const root = editorService.get("root");
+      const app = await getTMagicApp();
+      if (!app || !root) {
+        return;
+      }
+      if (app.dsl) {
+        app.dsl.dataSources = root.dataSources;
+      }
+      if (root.dataSources) {
+        app.dataSourceManager?.updateSchema(root.dataSources);
+      }
+    };
+    const dsDepCollectedHandler = async () => {
+      const root = editorService.get("root");
+      const app = await getTMagicApp();
+      if (root && app?.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+      }
+    };
+    const collectIdle = (nodes, deep, type) => Promise.all(
+      nodes.map((node) => {
+        let pageId;
+        if (utils.isPage(node)) {
+          pageId = node.id;
+        } else {
+          const info = editorService.getNodeInfo(node.id);
+          pageId = info.page?.id;
+        }
+        return depService.collectIdle([node], { pageId }, deep, type);
+      })
+    );
+    vue.watch(
+      () => editorService.get("stage"),
+      (stage) => {
+        if (!stage) {
+          return;
+        }
+        stage.on("rerender", async () => {
+          const node = editorService.get("node");
+          if (!node) return;
+          await collectIdle([node], true, core.DepTargetType.DATA_SOURCE);
+          updateStageNode(node);
+        });
+      }
+    );
+    const initDataSourceDepTarget = (ds) => {
+      depService.addTarget(core.createDataSourceTarget(ds, vue.reactive({})));
+      depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
+      depService.addTarget(core.createDataSourceCondTarget(ds, vue.reactive({})));
+    };
     const rootChangeHandler = async (value, preValue) => {
       if (!value) return;
       value.codeBlocks = value.codeBlocks || {};
@@ -13773,15 +13853,17 @@
       codeBlockService.setCodeDsl(value.codeBlocks);
       dataSourceService.set("dataSources", value.dataSources);
       depService.removeTargets(core.DepTargetType.CODE_BLOCK);
-      Object.entries(value.codeBlocks).forEach(([id, code]) => {
+      for (const [id, code] of Object.entries(value.codeBlocks)) {
         depService.addTarget(core.createCodeBlockTarget(id, code));
-      });
-      dataSourceService.get("dataSources").forEach((ds) => {
+      }
+      for (const ds of dataSourceService.get("dataSources")) {
         initDataSourceDepTarget(ds);
-      });
+      }
       if (Array.isArray(value.items)) {
         depService.clearIdleTasks();
-        collectIdle(value.items, true);
+        collectIdle(value.items, true).then(() => {
+          updateStageNodes(value.items);
+        });
       } else {
         depService.clear();
         delete value.dataSourceDeps;
@@ -13805,188 +13887,83 @@
         emit("update:modelValue", value);
       }
     };
-    const stage = vue.computed(() => editorService.get("stage"));
-    vue.watch(stage, (stage2) => {
-      if (!stage2) {
-        return;
-      }
-      stage2.on("rerender", () => {
-        const node = editorService.get("node");
-        if (!node) return;
-        collectIdle([node], true).then(() => {
-          afterUpdateNodes([node]);
-        });
-      });
-    });
-    const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
-    const updateDataSourceSchema = (nodes, deep) => {
-      const root = editorService.get("root");
-      const app = getApp();
-      if (root && app?.dsl) {
-        app.dsl.dataSourceDeps = root.dataSourceDeps;
-        app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
-        app.dsl.dataSources = root.dataSources;
-      }
-      if (root?.dataSources) {
-        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
-      }
-      if (!root || !stage.value) return;
-      const allNodes = [];
-      if (deep) {
-        nodes.forEach((node) => {
-          utils.traverseNode(node, (node2) => {
-            if (!allNodes.includes(node2)) {
-              allNodes.push(node2);
-            }
-          });
-        });
-      } else {
-        allNodes.push(...nodes);
-      }
-      const deps = Object.values(root.dataSourceDeps || {});
-      deps.forEach((dep) => {
-        Object.keys(dep).forEach((id) => {
-          const node = allNodes.find((node2) => node2.id === id);
-          node && stage.value?.update({
-            config: lodashEs.cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: lodashEs.cloneDeep(root)
-          });
-        });
-      });
-    };
-    const afterUpdateNodes = (nodes) => {
-      const root = editorService.get("root");
-      if (!root) return;
-      for (const node of nodes) {
-        stage.value?.update({
-          config: lodashEs.cloneDeep(node),
-          parentId: editorService.getParentById(node.id)?.id,
-          root: lodashEs.cloneDeep(root)
-        });
-      }
-    };
-    const targetAddHandler = (target) => {
-      const root = editorService.get("root");
-      if (!root) return;
-      if (target.type === core.DepTargetType.DATA_SOURCE) {
-        if (!root.dataSourceDeps) {
-          root.dataSourceDeps = {};
-        }
-        root.dataSourceDeps[target.id] = target.deps;
-      }
-      if (target.type === core.DepTargetType.DATA_SOURCE_COND) {
-        if (!root.dataSourceCondDeps) {
-          root.dataSourceCondDeps = {};
-        }
-        root.dataSourceCondDeps[target.id] = target.deps;
-      }
-    };
-    const targetRemoveHandler = (id) => {
-      const root = editorService.get("root");
-      if (!root) return;
-      if (root.dataSourceDeps) {
-        delete root.dataSourceDeps[id];
-      }
-      if (root.dataSourceCondDeps) {
-        delete root.dataSourceCondDeps[id];
-      }
-    };
-    const depCollectedHandler = () => {
-      const root = editorService.get("root");
-      if (!root) return;
-      const app = getApp();
-      if (app?.dsl) {
-        app.dsl.dataSourceDeps = root.dataSourceDeps;
-      }
-    };
-    depService.on("add-target", targetAddHandler);
-    depService.on("remove-target", targetRemoveHandler);
-    depService.on("collected", depCollectedHandler);
-    const initDataSourceDepTarget = (ds) => {
-      depService.addTarget(core.createDataSourceTarget(ds, vue.reactive({})));
-      depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
-      depService.addTarget(core.createDataSourceCondTarget(ds, vue.reactive({})));
-    };
-    const collectIdle = (nodes, deep) => Promise.all(
-      nodes.map((node) => {
-        let pageId;
-        if (utils.isPage(node)) {
-          pageId = node.id;
-        } else {
-          const info = editorService.getNodeInfo(node.id);
-          pageId = info.page?.id;
-        }
-        return depService.collectIdle([node], { pageId }, deep);
-      })
-    );
-    const nodeAddHandler = (nodes) => {
-      collectIdle(nodes, true).then(() => {
-        afterUpdateNodes(nodes);
-      });
+    const nodeAddHandler = async (nodes) => {
+      await collectIdle(nodes, true);
+      updateStageNodes(nodes);
     };
-    const nodeUpdateHandler = (data) => {
+    const nodeUpdateHandler = async (data) => {
       const needRecollectNodes = [];
       const normalNodes = [];
-      data.forEach(({ newNode, oldNode, changeRecords }) => {
+      for (const { newNode, oldNode, changeRecords } of data) {
         if (changeRecords?.length) {
-          for (const record of changeRecords) {
-            if (!record.propPath || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === core.NODE_CONDS_KEY || utils.isValueIncludeDataSource(record.value)) {
+          forChangeRecords: for (const record of changeRecords) {
+            if (!record.propPath) {
               needRecollectNodes.push(newNode);
-            } else {
-              normalNodes.push(newNode);
+              break forChangeRecords;
+            }
+            if (new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${core.NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === core.NODE_CONDS_KEY || utils.isValueIncludeDataSource(record.value)) {
+              needRecollectNodes.push(newNode);
+              break forChangeRecords;
+            }
+            for (const target of Object.values(depService.getTargets(core.DepTargetType.DATA_SOURCE))) {
+              if (!target.deps[newNode.id]) {
+                continue;
+              }
+              if (target.deps[newNode.id].keys.includes(record.propPath)) {
+                needRecollectNodes.push(newNode);
+                break forChangeRecords;
+              }
             }
+            normalNodes.push(newNode);
           }
         } else if (isIncludeDataSource(newNode, oldNode)) {
           needRecollectNodes.push(newNode);
         } else {
           normalNodes.push(newNode);
         }
-      });
+      }
       if (needRecollectNodes.length) {
-        collectIdle(needRecollectNodes, true).then(() => {
-          afterUpdateNodes(needRecollectNodes);
-        });
-      } else if (normalNodes.length) {
-        afterUpdateNodes(normalNodes);
+        await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE);
+        await collectIdle(needRecollectNodes, true, core.DepTargetType.DATA_SOURCE_COND);
+        updateStageNodes(needRecollectNodes);
+      } else {
+        updateStageNodes(normalNodes);
+        Promise.all([
+          collectIdle(normalNodes, true, core.DepTargetType.CODE_BLOCK),
+          collectIdle(normalNodes, true, core.DepTargetType.DATA_SOURCE_METHOD)
+        ]);
       }
     };
     const nodeRemoveHandler = (nodes) => {
       depService.clear(nodes);
     };
-    const historyChangeHandler = (page) => {
-      collectIdle([page], true).then(() => {
-        updateDataSourceSchema([page], true);
-      });
+    const historyChangeHandler = async (page) => {
+      await collectIdle([page], true);
+      updateStageNode(page);
     };
     editorService.on("history-change", historyChangeHandler);
     editorService.on("root-change", rootChangeHandler);
     editorService.on("add", nodeAddHandler);
     editorService.on("remove", nodeRemoveHandler);
     editorService.on("update", nodeUpdateHandler);
-    const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
-      if (depService.hasTarget(id, core.DepTargetType.CODE_BLOCK)) {
-        depService.getTarget(id, core.DepTargetType.CODE_BLOCK).name = codeBlock.name;
-        return;
-      }
-      depService.addTarget(core.createCodeBlockTarget(id, codeBlock));
-    };
-    const codeBlockRemoveHandler = (id) => {
-      depService.removeTarget(id, core.DepTargetType.CODE_BLOCK);
-    };
-    codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
-    codeBlockService.on("remove", codeBlockRemoveHandler);
-    const dataSourceAddHandler = (config) => {
+    const dataSourceAddHandler = async (config) => {
       initDataSourceDepTarget(config);
-      getApp()?.dataSourceManager?.addDataSource(config);
+      const app = await getTMagicApp();
+      app?.dataSourceManager?.addDataSource(config);
     };
-    const dataSourceUpdateHandler = (config, { changeRecords }) => {
+    const dataSourceUpdateHandler = async (config, { changeRecords }) => {
       let needRecollectDep = false;
+      let isModifyField = false;
+      let isModifyMock = false;
+      let isModifyMethod = false;
       for (const changeRecord of changeRecords) {
         if (!changeRecord.propPath) {
           continue;
         }
-        needRecollectDep = changeRecord.propPath === "fields" || changeRecord.propPath === "methods" || /fields.(\d)+.name/.test(changeRecord.propPath) || /fields.(\d)+$/.test(changeRecord.propPath) || /methods.(\d)+.name/.test(changeRecord.propPath) || /methods.(\d)+$/.test(changeRecord.propPath);
+        isModifyField = changeRecord.propPath === "fields" || /fields.(\d)+.name/.test(changeRecord.propPath) || /fields.(\d)+$/.test(changeRecord.propPath);
+        isModifyMock = changeRecord.propPath === "mocks";
+        isModifyMethod = changeRecord.propPath === "methods" || /methods.(\d)+.name/.test(changeRecord.propPath) || /methods.(\d)+$/.test(changeRecord.propPath);
+        needRecollectDep = isModifyField || isModifyMock || isModifyMethod;
         if (needRecollectDep) {
           break;
         }
@@ -13997,12 +13974,25 @@
           depService.clearIdleTasks();
           removeDataSourceTarget(config.id);
           initDataSourceDepTarget(config);
-          collectIdle(root.items, true).then(() => {
-            updateDataSourceSchema(root?.items || [], true);
+          let collectIdlePromises = [];
+          if (isModifyField) {
+            collectIdlePromises = [
+              collectIdle(root.items, true, core.DepTargetType.DATA_SOURCE),
+              collectIdle(root.items, true, core.DepTargetType.DATA_SOURCE_COND)
+            ];
+          } else if (isModifyMock) {
+            collectIdlePromises = [collectIdle(root.items, true, core.DepTargetType.DATA_SOURCE)];
+          } else if (isModifyMethod) {
+            collectIdlePromises = [collectIdle(root.items, true, core.DepTargetType.DATA_SOURCE_METHOD)];
+          }
+          Promise.all(collectIdlePromises).then(() => {
+            updateDataSourceSchema();
+            updateStageNodes(root.items);
           });
         }
       } else if (root?.dataSources) {
-        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+        const app = await getTMagicApp();
+        app?.dataSourceManager?.updateSchema(root.dataSources);
       }
     };
     const removeDataSourceTarget = (id) => {
@@ -14014,18 +14004,64 @@
       const root = editorService.get("root");
       const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
       const nodes = utils.getNodes(nodeIds, root?.items);
-      collectIdle(nodes, false).then(() => {
-        updateDataSourceSchema(nodes, false);
+      Promise.all([
+        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE),
+        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_COND),
+        collectIdle(nodes, false, core.DepTargetType.DATA_SOURCE_METHOD)
+      ]).then(() => {
+        updateDataSourceSchema();
+        updateStageNodes(nodes);
       });
       removeDataSourceTarget(id);
     };
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);
     dataSourceService.on("remove", dataSourceRemoveHandler);
+    const codeBlockAddOrUpdateHandler = (id, codeBlock) => {
+      if (depService.hasTarget(id, core.DepTargetType.CODE_BLOCK)) {
+        depService.getTarget(id, core.DepTargetType.CODE_BLOCK).name = codeBlock.name;
+        return;
+      }
+      depService.addTarget(core.createCodeBlockTarget(id, codeBlock));
+    };
+    const codeBlockRemoveHandler = (id) => {
+      depService.removeTarget(id, core.DepTargetType.CODE_BLOCK);
+    };
+    codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
+    codeBlockService.on("remove", codeBlockRemoveHandler);
+    const targetAddHandler = (target) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      if (target.type === core.DepTargetType.DATA_SOURCE) {
+        if (!root.dataSourceDeps) {
+          root.dataSourceDeps = {};
+        }
+        root.dataSourceDeps[target.id] = target.deps;
+      }
+      if (target.type === core.DepTargetType.DATA_SOURCE_COND) {
+        if (!root.dataSourceCondDeps) {
+          root.dataSourceCondDeps = {};
+        }
+        root.dataSourceCondDeps[target.id] = target.deps;
+      }
+    };
+    const targetRemoveHandler = (id) => {
+      const root = editorService.get("root");
+      if (!root) return;
+      if (root.dataSourceDeps) {
+        delete root.dataSourceDeps[id];
+      }
+      if (root.dataSourceCondDeps) {
+        delete root.dataSourceCondDeps[id];
+      }
+    };
+    depService.on("add-target", targetAddHandler);
+    depService.on("remove-target", targetRemoveHandler);
+    depService.on("ds-collected", dsDepCollectedHandler);
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
-      depService.off("collected", depCollectedHandler);
+      depService.off("ds-collected", dsDepCollectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);