@tmagic/editor 1.5.3 → 1.5.5

package/dist/tmagic-editor.js

@@ -7,7 +7,7 @@ export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, shallowReactive, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, Grid, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -27,7 +27,7 @@ import { detailedDiff } from 'deep-object-diff';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
-const _hoisted_1$Y = ["src"];
+const _hoisted_1$10 = ["src"];
 const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -52,7 +52,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$Y)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$10)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -80,9 +80,13 @@ const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$X = {
+const _hoisted_1$$ = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
+const _hoisted_2$o = {
+  ref: "codeEditor",
+  class: "magic-code-editor-content"
+};
 const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
@@ -136,7 +140,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     let vsDiffEditor = null;
     const values = ref("");
     const loading = ref(false);
-    const codeEditor = useTemplateRef("codeEditor");
+    const codeEditorEl = useTemplateRef("codeEditor");
     const resizeObserver = new globalThis.ResizeObserver(
       throttle(() => {
         vsEditor?.layout();
@@ -157,7 +161,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
     };
     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,
@@ -165,14 +169,14 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
         ...props.options
       };
       if (props.type === "diff") {
-        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
       } else {
-        vsEditor = monaco.editor.create(codeEditor.value, options);
+        vsEditor = monaco.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();
@@ -190,7 +194,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
           }
         });
       }
-      resizeObserver.observe(codeEditor.value);
+      resizeObserver.observe(codeEditorEl.value);
     };
     watch(
       () => props.initValues,
@@ -240,7 +244,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$X, [
+      return openBlock(), createElementBlock("div", _hoisted_1$$, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -260,11 +264,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }),
-            createElementVNode("div", {
-              ref_key: "codeEditor",
-              ref: codeEditor,
-              class: "magic-code-editor-content"
-            }, null, 512)
+            createElementVNode("div", _hoisted_2$o, null, 512)
           ], 6)
         ], 8, ["disabled"]))
       ]);
@@ -2834,13 +2834,14 @@ globalThis.requestIdleCallback = globalThis.requestIdleCallback || function(cb)
 };
 class IdleTask extends 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
     });
@@ -2849,6 +2850,10 @@ class IdleTask extends EventEmitter {
     }
   }
   clearTasks() {
+    if (this.taskHandle) {
+      globalThis.cancelIdleCallback(this.taskHandle);
+    }
+    this.hightLevelTaskList = [];
     this.taskList = [];
   }
   on(eventName, listener) {
@@ -2861,7 +2866,8 @@ class IdleTask extends EventEmitter {
     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) {
@@ -2874,16 +2880,19 @@ class IdleTask extends EventEmitter {
         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;
@@ -3045,7 +3054,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const form = useTemplateRef("form");
+    const formRef = useTemplateRef("form");
     const getFormConfig = (items = []) => [
       {
         type: "fieldset",
@@ -3068,7 +3077,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     );
     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);
@@ -3076,8 +3085,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(MForm), {
-        ref_key: "form",
-        ref: form,
+        ref: "form",
         config: codeParamsConfig.value,
         "init-values": _ctx.model,
         disabled: _ctx.disabled,
@@ -3089,8 +3097,8 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
@@ -3187,8 +3195,8 @@ const _sfc_main$1m = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-code", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$W, [
-        createElementVNode("div", _hoisted_2$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$_, [
+        createElementVNode("div", _hoisted_2$n, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -3309,6 +3317,10 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$Z = {
+  ref: "title",
+  class: "m-editor-float-box-title"
+};
 const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: /* @__PURE__ */ mergeModels({
@@ -3329,8 +3341,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     const height = useModel(__props, "height");
     const visible = useModel(__props, "visible");
     const props = __props;
-    const target = useTemplateRef("target");
-    const titleEl = useTemplateRef("titleEl");
+    const targetEl = useTemplateRef("target");
+    const titleEl = useTemplateRef("title");
     const zIndex = useZIndex();
     const curZIndex = ref(0);
     const titleHeight = ref(0);
@@ -3338,8 +3350,8 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
       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";
     });
@@ -3361,7 +3373,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     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,
@@ -3395,7 +3407,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         if (visible2) {
           await 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;
@@ -3431,10 +3443,10 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     const nextZIndex = () => {
       curZIndex.value = zIndex.nextZIndex();
     };
-    provide("parentFloating", target);
+    provide("parentFloating", targetEl);
     __expose({
       bodyHeight,
-      target,
+      target: targetEl,
       titleEl
     });
     return (_ctx, _cache) => {
@@ -3443,17 +3455,12 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         to: "body"
       }, [
         createElementVNode("div", {
-          ref_key: "target",
-          ref: target,
+          ref: "target",
           class: "m-editor-float-box",
           style: normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
           onMousedown: nextZIndex
         }, [
-          createElementVNode("div", {
-            ref_key: "titleEl",
-            ref: titleEl,
-            class: "m-editor-float-box-title"
-          }, [
+          createElementVNode("div", _hoisted_1$Z, [
             renderSlot(_ctx.$slots, "title", {}, () => [
               createElementVNode("span", null, toDisplayString(_ctx.title), 1)
             ]),
@@ -3485,7 +3492,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
 const useCodeBlockEdit = (codeBlockService) => {
   const codeConfig = ref();
   const codeId = ref();
-  const codeBlockEditor = useTemplateRef("codeBlockEditor");
+  const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
   const createCodeBlock = async () => {
     if (!codeBlockService) {
       tMagicMessage.error("新增代码块失败");
@@ -3500,7 +3507,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     };
     codeId.value = await codeBlockService.getUniqueId();
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
   const editCode = async (id) => {
     const codeBlock = await codeBlockService?.getCodeContentById(id);
@@ -3518,7 +3525,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     };
     codeId.value = id;
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
   const deleteCode = async (key) => {
     codeBlockService?.deleteCodeDslByIds([key]);
@@ -3526,12 +3533,12 @@ const useCodeBlockEdit = (codeBlockService) => {
   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,
@@ -3539,7 +3546,7 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const state = reactive({
+const state = shallowReactive({
   uiSelectMode: false,
   showSrc: false,
   showStylePanel: true,
@@ -3987,8 +3994,8 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
@@ -4253,12 +4260,12 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$V, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Y, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$l, [
+        createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4331,7 +4338,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   __name: "FieldSelect",
   props: /* @__PURE__ */ mergeModels({
@@ -4413,7 +4420,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$U, [
+      return openBlock(), createElementBlock("div", _hoisted_1$X, [
         _ctx.checkStrictly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicSelect), {
             "model-value": selectDataSourceId.value,
@@ -4495,7 +4502,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
@@ -4597,7 +4604,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$T, [
+      return openBlock(), createElementBlock("div", _hoisted_1$W, [
         showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$1i, {
           key: 0,
           "model-value": _ctx.model[_ctx.name],
@@ -4645,8 +4652,8 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -4669,11 +4676,11 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { dataSourceService } = inject("services") || {};
-    const autocomplete = useTemplateRef("autocomplete");
+    const autocompleteRef = useTemplateRef("autocomplete");
     const isFocused = ref(false);
     const state = ref("");
     const displayState = ref([]);
-    const input = computed(() => autocomplete.value?.inputRef?.input);
+    const input = computed(() => autocompleteRef.value?.inputRef?.input);
     const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
     const setDisplayState = () => {
       displayState.value = getDisplayField(dataSources.value, state.value);
@@ -4692,7 +4699,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       const focusOffset = selection?.focusOffset || 0;
       isFocused.value = true;
       await nextTick();
-      autocomplete.value?.focus();
+      autocompleteRef.value?.focus();
       if (focusOffset && input.value) {
         input.value.setSelectionRange(anchorOffset, focusOffset);
       }
@@ -4828,8 +4835,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
         {
           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)
         },
@@ -4851,9 +4857,9 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$1s, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$S, [
+          createElementVNode("div", _hoisted_1$V, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$k, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$l, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -4894,8 +4900,8 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
@@ -4924,12 +4930,12 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     const { height: codeBlockEditorHeight } = useEditorContentHeight();
     const difVisible = ref(false);
     const { rect: windowRect } = useWindowRect();
-    const magicVsEditor = useTemplateRef("magicVsEditor");
+    const magicVsEditorRef = 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 = {
@@ -5148,8 +5154,8 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$R, [
-                createElementVNode("div", _hoisted_2$j, [
+              createElementVNode("div", _hoisted_1$U, [
+                createElementVNode("div", _hoisted_2$k, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5174,8 +5180,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
               ]),
               difVisible.value ? (openBlock(), createBlock(_sfc_main$1r, {
                 key: 0,
-                ref_key: "magicVsEditor",
-                ref: magicVsEditor,
+                ref: "magicVsEditor",
                 type: "diff",
                 language: "json",
                 initValues: _ctx.content.content,
@@ -5191,8 +5196,8 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
@@ -5214,7 +5219,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const codeConfig = ref();
-    const codeBlockEditor = useTemplateRef("codeBlockEditor");
+    const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
     let editIndex = -1;
     const methodColumns = [
       {
@@ -5253,7 +5258,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
               };
               editIndex = index;
               nextTick(() => {
-                codeBlockEditor.value?.show();
+                codeBlockEditorRef.value?.show();
               });
             }
           },
@@ -5279,7 +5284,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
       };
       editIndex = -1;
       nextTick(() => {
-        codeBlockEditor.value?.show();
+        codeBlockEditorRef.value?.show();
       });
     };
     const submitCodeHandler = (value, data) => {
@@ -5311,15 +5316,15 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
       }
       editIndex = -1;
       codeConfig.value = void 0;
-      codeBlockEditor.value?.hide();
+      codeBlockEditorRef.value?.hide();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$T, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5335,8 +5340,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
         ]),
         codeConfig.value ? (openBlock(), createBlock(_sfc_main$1f, {
           key: 0,
-          ref_key: "codeBlockEditor",
-          ref: codeBlockEditor,
+          ref: "codeBlockEditor",
           disabled: _ctx.disabled,
           content: codeConfig.value,
           "is-data-source": true,
@@ -5348,8 +5352,8 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
@@ -5436,8 +5440,8 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$P, [
-        createElementVNode("div", _hoisted_2$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$S, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5480,8 +5484,8 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
@@ -5686,12 +5690,12 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$O, [
+      return openBlock(), createElementBlock("div", _hoisted_1$R, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5732,7 +5736,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
@@ -5790,7 +5794,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$N, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         createVNode(unref(MSelect), {
           model: _ctx.model,
           name: _ctx.name,
@@ -5958,8 +5962,8 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
 };
@@ -6239,7 +6243,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$M, [
+      return openBlock(), createElementBlock("div", _hoisted_1$P, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           name: "events",
@@ -6248,7 +6252,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$f, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6300,7 +6304,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$L = {
+const _hoisted_1$O = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
@@ -6313,15 +6317,15 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$L, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$O, _cache[0] || (_cache[0] = [
         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__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
@@ -6384,8 +6388,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$K, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$N, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6458,8 +6462,8 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
@@ -6506,8 +6510,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$J, [
-        createElementVNode("div", _hoisted_2$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$M, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6527,8 +6531,8 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   __name: "BackgroundPosition",
@@ -6585,8 +6589,8 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$I, [
-        createElementVNode("div", _hoisted_2$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$L, [
+        createElementVNode("div", _hoisted_2$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item, index) => {
             return openBlock(), createBlock(unref(TMagicButton), {
               key: index,
@@ -6628,13 +6632,13 @@ const _export_sfc = (sfc, props) => {
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$K, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -6642,13 +6646,13 @@ const BackgroundRepeat = /*#__PURE__*/_export_sfc(_sfc_main$14, [['render',_sfc_
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$J, _cache[0] || (_cache[0] = [
     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"
@@ -6659,13 +6663,13 @@ const BackgroundRepeatX = /*#__PURE__*/_export_sfc(_sfc_main$13, [['render',_sfc
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$I, _cache[0] || (_cache[0] = [
     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"
@@ -6676,13 +6680,13 @@ const BackgroundRepeatY = /*#__PURE__*/_export_sfc(_sfc_main$12, [['render',_sfc
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
     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"
@@ -6768,13 +6772,13 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$D, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -6782,13 +6786,13 @@ const AlignLeft = /*#__PURE__*/_export_sfc(_sfc_main$$, [['render',_sfc_render$g
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -6796,13 +6800,13 @@ const AlignCenter = /*#__PURE__*/_export_sfc(_sfc_main$_, [['render',_sfc_render
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -6892,8 +6896,8 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
 };
@@ -6949,13 +6953,13 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+      return openBlock(), createElementBlock("div", _hoisted_1$D, [
         (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
           return createElementVNode("div", {
             key: index,
             class: normalizeClass(item.class)
           }, [
-            item.text ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(item.text), 1)) : createCommentVNode("", true),
+            item.text ? (openBlock(), createElementBlock("span", _hoisted_2$c, toDisplayString(item.text), 1)) : createCommentVNode("", true),
             createElementVNode("span", _hoisted_3$5, [
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
@@ -6975,13 +6979,13 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -6989,13 +6993,13 @@ const DisplayBlock = /*#__PURE__*/_export_sfc(_sfc_main$W, [['render',_sfc_rende
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -7003,13 +7007,13 @@ const DisplayFlex = /*#__PURE__*/_export_sfc(_sfc_main$V, [['render',_sfc_render
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$A, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -7017,13 +7021,13 @@ const DisplayInline = /*#__PURE__*/_export_sfc(_sfc_main$U, [['render',_sfc_rend
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -7031,13 +7035,13 @@ const DisplayInlineBlock = /*#__PURE__*/_export_sfc(_sfc_main$T, [['render',_sfc
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
     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)
   ])))
 }
@@ -7045,13 +7049,13 @@ const DisplayNone = /*#__PURE__*/_export_sfc(_sfc_main$S, [['render',_sfc_render
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1)
   ])))
 }
@@ -7059,13 +7063,13 @@ const FlexDirectionColumn = /*#__PURE__*/_export_sfc(_sfc_main$R, [['render',_sf
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z" }, null, -1)
   ])))
 }
@@ -7073,13 +7077,13 @@ const FlexDirectionColumnReverse = /*#__PURE__*/_export_sfc(_sfc_main$Q, [['rend
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1)
   ])))
 }
@@ -7087,13 +7091,13 @@ const FlexDirectionRow = /*#__PURE__*/_export_sfc(_sfc_main$P, [['render',_sfc_r
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1)
   ])))
 }
@@ -7101,13 +7105,13 @@ const FlexDirectionRowReverse = /*#__PURE__*/_export_sfc(_sfc_main$O, [['render'
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1)
   ])))
 }
@@ -7115,13 +7119,13 @@ const JustifyContentCenter = /*#__PURE__*/_export_sfc(_sfc_main$N, [['render',_s
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1)
   ])))
 }
@@ -7129,13 +7133,13 @@ const JustifyContentFlexEnd = /*#__PURE__*/_export_sfc(_sfc_main$M, [['render',_
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$o, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1)
   ])))
 }
@@ -7143,13 +7147,13 @@ const JustifyContentFlexStart = /*#__PURE__*/_export_sfc(_sfc_main$L, [['render'
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$n, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1)
   ])))
 }
@@ -7157,13 +7161,13 @@ const JustifyContentSpaceAround = /*#__PURE__*/_export_sfc(_sfc_main$K, [['rende
 
 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 (openBlock(), createElementBlock("svg", _hoisted_1$m, _cache[0] || (_cache[0] = [
+  return (openBlock(), createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
     createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1)
   ])))
 }
@@ -7319,8 +7323,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   __name: "Position",
@@ -7354,13 +7358,13 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
           return createElementVNode("div", {
             key: index,
             class: normalizeClass(item.class)
           }, [
-            createElementVNode("span", _hoisted_2$a, [
+            createElementVNode("span", _hoisted_2$b, [
               withDirectives(createElementVNode("input", {
                 "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
                 title: _ctx.model[item.name],
@@ -7432,8 +7436,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-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" };
@@ -7491,8 +7495,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        createElementVNode("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+        createElementVNode("div", _hoisted_2$a, [
           createElementVNode("div", _hoisted_3$3, [
             createElementVNode("div", {
               class: normalizeClass(["border-icon border-icon-top", { active: direction.value === "Top" }]),
@@ -7572,7 +7576,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-style-setter" };
+const _hoisted_1$m = { class: "m-fields-style-setter" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsStyleSetter"
@@ -7622,7 +7626,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       emit("change", v, eventData);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         createVNode(unref(TMagicCollapse), { "model-value": collapseValue.value }, {
           default: withCtx(() => [
             (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
@@ -7652,7 +7656,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = {
+const _hoisted_1$l = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
@@ -7755,7 +7759,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           ])),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$i, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$l, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -7830,12 +7834,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
-    const target = useTemplateRef("target");
-    const { isDragging } = useGetSo(target, emit);
+    const targetEl = useTemplateRef("target");
+    const { isDragging } = useGetSo(targetEl, emit);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
-        ref_key: "target",
-        ref: target,
+        ref: "target",
         class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": unref(isDragging) }])
       }, [
         renderSlot(_ctx.$slots, "default")
@@ -7864,7 +7867,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const el = useTemplateRef("el");
+    const el = useTemplateRef("target");
     const hasLeft = computed(() => typeof props.left !== "undefined");
     const hasRight = computed(() => typeof props.right !== "undefined");
     const center = ref(0);
@@ -7970,8 +7973,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
+        ref: "target",
         class: "m-editor-layout",
         style: normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
       }, [
@@ -8004,11 +8006,11 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
@@ -8080,7 +8082,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$h, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -8145,7 +8147,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$8, [
+            createElementVNode("span", _hoisted_2$9, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -8162,12 +8164,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-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" }
 };
@@ -8193,7 +8195,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       editorService.add(pageConfig);
     };
     return (_ctx, _cache) => {
-      return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
         createVNode(unref(TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
           reference: withCtx(() => [
             createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
@@ -8220,11 +8222,20 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$7));
+      ])) : (openBlock(), 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__ */ defineComponent({
   ...{
     name: "MEditorPageBarScrollContainer"
@@ -8239,33 +8250,33 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const editorService = services?.editorService;
     const uiService = services?.uiService;
-    const itemsContainer = useTemplateRef("itemsContainer");
+    const itemsContainerEl = useTemplateRef("itemsContainer");
     const canScroll = ref(false);
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
     const showPageListButton = computed(() => uiService?.get("showPageListButton"));
     const itemsContainerWidth = ref(0);
+    const pageBarEl = 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);
       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 = useTemplateRef("pageBar");
     onMounted(() => {
-      pageBar.value && resizeObserver.observe(pageBar.value);
+      pageBarEl.value && resizeObserver.observe(pageBarEl.value);
     });
     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") {
@@ -8277,8 +8288,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
     };
     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;
       }
@@ -8286,7 +8297,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         value = -maxScrollLeft;
       }
       translateLeft = value;
-      itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+      itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
     };
     watch(
       () => props.length,
@@ -8345,18 +8356,9 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-page-bar",
-        ref_key: "pageBar",
-        ref: pageBar
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
         renderSlot(_ctx.$slots, "prepend"),
-        _ctx.length ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "m-editor-page-bar-items",
-          ref_key: "itemsContainer",
-          ref: itemsContainer
-        }, [
+        _ctx.length ? (openBlock(), createElementBlock("div", _hoisted_2$7, [
           renderSlot(_ctx.$slots, "default")
         ], 512)) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
@@ -8378,7 +8380,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"
@@ -8401,7 +8403,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       await editorService?.select(id);
     };
     return (_ctx, _cache) => {
-      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$f, [
+      return showPageListButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode(unref(TMagicPopover), {
           "popper-class": "page-bar-popover",
           placement: "top",
@@ -8441,7 +8443,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   __name: "Search",
   props: {
@@ -8480,7 +8482,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       emit("search", values);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
         createVNode(_sfc_main$1s, {
           icon: unref(Search),
           onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
@@ -8505,7 +8507,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-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"];
@@ -8557,38 +8559,37 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const remove = (node) => {
       editorService?.remove(node);
     };
-    const pageBarScrollContainer = useTemplateRef("pageBarScrollContainer");
-    const pageBarItems = useTemplateRef("pageBarItems");
+    const pageBarScrollContainerRef = useTemplateRef("pageBarScrollContainer");
+    const pageBarItemEls = useTemplateRef("pageBarItems");
     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 openBlock(), createElementBlock("div", _hoisted_1$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         createVNode(_sfc_main$x, {
-          ref_key: "pageBarScrollContainer",
-          ref: pageBarScrollContainer,
+          ref: "pageBarScrollContainer",
           "page-bar-sort-options": _ctx.pageBarSortOptions,
           length: list.value.length
         }, {
@@ -8612,8 +8613,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               return openBlock(), createElementBlock("div", {
                 class: 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)
@@ -8674,7 +8674,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
@@ -8698,7 +8698,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
@@ -8725,6 +8725,11 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
+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";
@@ -8742,8 +8747,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const codeOptions = inject("codeOptions", {});
     const { editorService, uiService } = inject("services") || {};
-    const content = useTemplateRef("content");
-    const splitView = useTemplateRef("splitView");
+    const contentEl = useTemplateRef("content");
+    const splitViewRef = useTemplateRef("splitView");
     const root = computed(() => editorService?.get("root"));
     const page = computed(() => editorService?.get("page"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
@@ -8756,7 +8761,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       right: getRightColumnWidthCacheData()
     });
     watch(pageLength, () => {
-      splitView.value?.updateWidth();
+      splitViewRef.value?.updateWidth();
     });
     watch(
       () => uiService?.get("hideSlideBar"),
@@ -8781,8 +8786,8 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       });
     });
     onMounted(() => {
-      if (content.value) {
-        resizerObserver.observe(content.value);
+      if (contentEl.value) {
+        resizerObserver.observe(contentEl.value);
       }
     });
     onBeforeUnmount(() => {
@@ -8797,12 +8802,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor",
-        ref_key: "content",
-        ref: content,
-        style: { "min-width": "180px" }
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
         renderSlot(_ctx.$slots, "header"),
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
@@ -8815,8 +8815,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           }, null, 8, ["init-values", "options"])
         ]) : (openBlock(), 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",
@@ -9027,8 +9026,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
       return data;
     });
+    const navMenuEl = useTemplateRef("navMenu");
     const resizeObserver = new ResizeObserver(() => {
-      const rect = navMenu.value?.getBoundingClientRect();
+      const rect = navMenuEl.value?.getBoundingClientRect();
       if (rect) {
         uiService?.set("navMenuRect", {
           left: rect.left,
@@ -9038,9 +9038,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         });
       }
     });
-    const navMenu = useTemplateRef("navMenu");
     onMounted(() => {
-      navMenu.value && resizeObserver.observe(navMenu.value);
+      navMenuEl.value && resizeObserver.observe(navMenuEl.value);
     });
     onBeforeUnmount(() => {
       resizeObserver.disconnect();
@@ -9049,8 +9048,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: "m-editor-nav-menu",
         style: normalizeStyle({ height: `${_ctx.height}px` }),
-        ref_key: "navMenu",
-        ref: navMenu
+        ref: "navMenu"
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
           return openBlock(), createElementBlock("div", {
@@ -9071,7 +9069,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
   ...{
     name: "MEditorFormPanel"
@@ -9096,11 +9094,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const propsPanelSize = computed(() => services?.uiService.get("propsPanelSize") || "small");
     const { height: editorContentHeight } = useEditorContentHeight();
     const stage = computed(() => services?.editorService.get("stage"));
-    const configForm = useTemplateRef("configForm");
+    const configFormRef = useTemplateRef("configForm");
     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 = getCurrentInstance();
@@ -9109,7 +9107,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     });
     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);
@@ -9121,15 +9119,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const saveCode = (values) => {
       emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
     };
-    __expose({ configForm, submit });
+    __expose({ configForm: configFormRef, submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         renderSlot(_ctx.$slots, "props-form-panel-header"),
         createVNode(unref(TMagicScrollbar), null, {
           default: withCtx(() => [
             createVNode(unref(MForm), {
-              ref_key: "configForm",
-              ref: configForm,
+              ref: "configForm",
               class: normalizeClass(propsPanelSize.value),
               "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
               "label-width": _ctx.labelWidth,
@@ -9195,7 +9192,7 @@ const useStylePanel = (services) => {
   };
 };
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   ref: "propsPanel",
   class: "m-editor-props-panel"
 };
@@ -9261,8 +9258,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const errorHandler = (e) => {
       emit("form-error", e);
     };
-    const mountedHandler = (e) => {
-      emit("mounted", e);
+    const mountedHandler = () => {
+      if (propertyFormPanelRef.value) {
+        emit("mounted", propertyFormPanelRef.value);
+      }
     };
     const propsPanelEl = useTemplateRef("propsPanel");
     const widthChange = ({ deltaX }) => {
@@ -9283,7 +9282,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       submit
     });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$b, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(_sfc_main$q, {
           ref: "propertyFormPanel",
@@ -9367,9 +9366,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const menu = useTemplateRef("menu");
-    const buttons = useTemplateRef("buttons");
-    const subMenu = useTemplateRef("subMenu");
+    const menuEl = useTemplateRef("menu");
+    const buttonRefs = useTemplateRef("buttons");
+    const subMenuRef = useTemplateRef("subMenu");
     const visible = ref(false);
     const subMenuData = ref([]);
     const zIndex = useZIndex();
@@ -9383,11 +9382,11 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       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) => {
@@ -9408,7 +9407,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       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;
@@ -9436,14 +9435,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         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
           });
         }
@@ -9461,7 +9460,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
     });
     __expose({
-      menu,
+      menu: menuEl,
       menuPosition,
       hide,
       show,
@@ -9474,8 +9473,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           withDirectives(createElementVNode("div", {
             class: "magic-editor-content-menu",
-            ref_key: "menu",
-            ref: menu,
+            ref: "menu",
             style: normalizeStyle(menuStyle.value),
             onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
             onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {
@@ -9487,8 +9485,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 return openBlock(), createBlock(_sfc_main$z, {
                   "event-type": "mouseup",
                   ref_for: true,
-                  ref_key: "buttons",
-                  ref: buttons,
+                  ref: "buttons",
                   class: normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
                   data: item,
                   key: index,
@@ -9501,8 +9498,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               subMenuData.value.length ? (openBlock(), 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,
@@ -9560,7 +9556,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = {
@@ -9686,14 +9682,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             }, 1032, ["data", "parent", "parentsId", "node-status-map", "indent"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$9)), [
+      ], 40, _hoisted_1$a)), [
         [vShow, visible.value]
       ]);
     };
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   key: 1,
   class: "m-editor-tree-empty"
 };
@@ -9740,7 +9736,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ]),
             _: 2
           }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
-        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$8, [
+        }), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$9, [
           createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
         ]))
       ], 32);
@@ -9991,7 +9987,7 @@ const useContentMenu$1 = (deleteCode) => {
   };
 };
 
-const _hoisted_1$7 = { class: "search-wrapper" };
+const _hoisted_1$8 = { class: "search-wrapper" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
@@ -10009,9 +10005,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const { codeBlockService } = inject("services") || {};
     const editable = computed(() => codeBlockService?.getEditStatus());
     const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
-    const codeBlockList = useTemplateRef("codeBlockList");
+    const codeBlockListRef = useTemplateRef("codeBlockList");
     const filterTextChangeHandler = (val) => {
-      codeBlockList.value?.filter(val);
+      codeBlockListRef.value?.filter(val);
     };
     eventBus?.on("edit-code", (id) => {
       editCode(id);
@@ -10021,7 +10017,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       menuData: contentMenuData,
       contentMenuHideHandler
     } = useContentMenu$1((id) => {
-      codeBlockList.value?.deleteCode(id);
+      codeBlockListRef.value?.deleteCode(id);
     });
     const menuData = computed(() => props.customContentMenu(contentMenuData, "code-block"));
     return (_ctx, _cache) => {
@@ -10029,7 +10025,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              createElementVNode("div", _hoisted_1$7, [
+              createElementVNode("div", _hoisted_1$8, [
                 createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
@@ -10047,8 +10043,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createVNode(_sfc_main$k, {
-              ref_key: "codeBlockList",
-              ref: codeBlockList,
+              ref: "codeBlockList",
               "custom-error": _ctx.customError,
               indent: _ctx.indent,
               "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
@@ -10427,7 +10422,7 @@ const useContentMenu = () => {
   };
 };
 
-const _hoisted_1$6 = { class: "search-wrapper" };
+const _hoisted_1$7 = { class: "search-wrapper" };
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
@@ -10490,7 +10485,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$6, [
+            createElementVNode("div", _hoisted_1$7, [
               createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
@@ -10562,7 +10557,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -10577,7 +10572,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
         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"
@@ -10675,7 +10670,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const services = inject("services");
-    const menu = useTemplateRef("menu");
+    const menuRef = useTemplateRef("menu");
     const node = computed(() => services?.editorService.get("node"));
     const nodes = computed(() => services?.editorService.get("nodes"));
     const componentList = computed(() => services?.componentListService.getList() || []);
@@ -10751,7 +10746,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       )
     );
     const show = (e) => {
-      menu.value?.show(e);
+      menuRef.value?.show(e);
     };
     __expose({
       show
@@ -10759,8 +10754,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$o, {
         "menu-data": menuData.value,
-        ref_key: "menu",
-        ref: menu,
+        ref: "menu",
         style: { "overflow": "initial" }
       }, null, 8, ["menu-data"]);
     };
@@ -10802,7 +10796,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
   const isMultiSelect = computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
   const select = async (data) => {
     if (!data.id) {
@@ -10867,9 +10861,8 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
       select(data);
     });
   };
-  const menu = useTemplateRef("menu");
   return {
-    menu,
+    menuRef,
     nodeClickHandler,
     nodeContentMenuHandler(event, data) {
       event.preventDefault();
@@ -10877,7 +10870,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
       if (nodes.length < 2 || !nodes.includes(data)) {
         nodeClickHandler(event, data);
       }
-      menu.value?.show(event);
+      menuRef.value?.show(event);
     },
     highlightHandler
   };
@@ -11278,11 +11271,11 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
-    const tree = useTemplateRef("tree");
+    const treeRef = useTemplateRef("tree");
     const page = computed(() => editorService?.get("page"));
     const nodeData = 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) {
@@ -11304,12 +11297,12 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
     };
     const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+    const menuRef = useTemplateRef("menu");
     const {
-      menu,
       nodeClickHandler,
       nodeContentMenuHandler,
       highlightHandler: mouseenterHandler
-    } = useClick(services, isCtrlKeyDown, nodeStatusMap);
+    } = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
@@ -11318,8 +11311,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
             key: 0,
             tabindex: "-1",
-            ref_key: "tree",
-            ref: tree,
+            ref: "tree",
             data: nodeData.value,
             "node-status-map": unref(nodeStatusMap),
             indent: _ctx.indent,
@@ -11347,8 +11339,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(_sfc_main$e, {
-              ref_key: "menu",
-              ref: menu,
+              ref: "menu",
               "layer-content-menu": _ctx.layerContentMenu,
               "custom-content-menu": _ctx.customContentMenu,
               onCollapseAll: collapseAllHandler
@@ -11361,7 +11352,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["onClick", "onDragstart"];
+const _hoisted_1$5 = ["onClick", "onDragstart"];
 const _hoisted_2$2 = ["title"];
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
@@ -11482,7 +11473,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                                 title: item.text
                               }, toDisplayString(item.text), 9, _hoisted_2$2)
                             ])
-                          ], 40, _hoisted_1$4);
+                          ], 40, _hoisted_1$5);
                         }), 128))
                       ]),
                       _: 2
@@ -11500,7 +11491,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 0,
   class: "m-editor-sidebar"
 };
@@ -11650,7 +11641,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+        _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
           createElementVNode("div", _hoisted_2$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
               return withDirectives((openBlock(), createElementBlock("div", {
@@ -11855,8 +11846,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const bar = useTemplateRef("bar");
-    const thumb = useTemplateRef("thumb");
+    const barEl = useTemplateRef("bar");
+    const thumbEl = useTemplateRef("thumb");
     const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
     const thumbPos = computed(() => props.pos / props.scrollSize * props.size);
     const thumbStyle = computed(() => ({
@@ -11865,9 +11856,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     }));
     let gesto;
     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) => {
@@ -11876,11 +11866,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }).on("drag", (e) => {
         scrollBy(getDelta(e));
       });
-      bar.value?.addEventListener("wheel", wheelHandler, false);
+      barEl.value?.addEventListener("wheel", wheelHandler, false);
     });
     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;
@@ -11911,13 +11901,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        ref_key: "bar",
-        ref: bar,
+        ref: "bar",
         class: normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
       }, [
         createElementVNode("div", {
-          ref_key: "thumb",
-          ref: thumb,
+          ref: "thumb",
           class: "m-editor-scroll-bar-thumb",
           style: normalizeStyle(thumbStyle.value)
         }, null, 4)
@@ -11926,6 +11914,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$3 = {
+  class: "m-editor-scroll-viewer-container",
+  ref: "container"
+};
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
@@ -11944,8 +11936,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const container = useTemplateRef("container");
-    const el = useTemplateRef("el");
+    const containerEl = useTemplateRef("container");
+    const el = useTemplateRef("target");
     const style = computed(
       () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -11958,9 +11950,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const scrollHeight = ref(0);
     let scrollViewer;
     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
@@ -11996,17 +11988,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       });
     };
     __expose({
-      container
+      container: containerEl
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-scroll-viewer-container",
-        ref_key: "container",
-        ref: container
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", {
-          ref_key: "el",
-          ref: el,
+          ref: "target",
           style: normalizeStyle(style.value)
         }, [
           renderSlot(_ctx.$slots, "default")
@@ -12039,8 +12026,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const editorService = services?.editorService;
     const visible = ref(false);
     const buttonVisible = ref(false);
-    const button = useTemplateRef("button");
-    const box = useTemplateRef("box");
+    const buttonEl = useTemplateRef("button");
+    const boxRef = useTemplateRef("box");
     const stage = computed(() => editorService?.get("stage"));
     const page = computed(() => editorService?.get("page"));
     const nodes = computed(() => editorService?.get("nodes") || []);
@@ -12085,12 +12072,12 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       top: 0
     });
     watch(visible, async (visible2) => {
-      if (!button.value || !visible2) {
+      if (!buttonEl.value || !visible2) {
         return;
       }
       await 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
@@ -12104,8 +12091,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             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)
@@ -12114,8 +12100,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         })) : createCommentVNode("", true),
         page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), 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: "当前位置下的组件",
@@ -12141,7 +12126,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const services = inject("services");
     const stageOptions = inject("stageOptions");
-    const stageOverlay = useTemplateRef("stageOverlay");
+    const stageOverlayEl = useTemplateRef("stageOverlay");
     const stageOverlayVisible = computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
     const wrapWidth = computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
     const wrapHeight = computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
@@ -12160,12 +12145,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         services?.stageOverlayService.closeOverlay();
       }
     });
-    watch(stageOverlay, (stageOverlay2) => {
+    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);
@@ -12197,8 +12182,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           _: 1
         }),
         createElementVNode("div", {
-          ref_key: "stageOverlay",
-          ref: stageOverlay,
+          ref: "stageOverlay",
           class: "m-editor-stage-overlay-container",
           style: normalizeStyle(style.value),
           onClick: _cache[0] || (_cache[0] = withModifiers(() => {
@@ -12262,7 +12246,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
-    const menu = useTemplateRef("menu");
+    const menuRef = useTemplateRef("menu");
     const canCenter = ref(false);
     const node = computed(() => editorService?.get("node"));
     const nodes = computed(() => editorService?.get("nodes"));
@@ -12281,7 +12265,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             }
           },
           useCopyMenu(),
-          usePasteMenu(menu),
+          usePasteMenu(menuRef),
           {
             type: "divider",
             direction: "horizontal",
@@ -12363,14 +12347,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       { immediate: true }
     );
     const show = (e) => {
-      menu.value?.show(e);
+      menuRef.value?.show(e);
     };
     __expose({ show });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$o, {
         "menu-data": menuData.value,
-        ref_key: "menu",
-        ref: menu
+        ref: "menu"
       }, null, 8, ["menu-data"]);
     };
   }
@@ -12393,9 +12376,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     let runtime = null;
     const services = inject("services");
     const stageLoading = computed(() => services?.editorService.get("stageLoading") || false);
-    const stageWrap = useTemplateRef("stageWrap");
-    const stageContainer = useTemplateRef("stageContainer");
-    const menu = useTemplateRef("menu");
+    const stageWrapRef = useTemplateRef("stageWrap");
+    const stageContainerEl = useTemplateRef("stageContainer");
+    const menuRef = useTemplateRef("menu");
     const nodes = computed(() => services?.editorService.get("nodes") || []);
     const isMultiSelect = computed(() => nodes.value.length > 1);
     const stageRect = computed(() => services?.uiService.get("stageRect"));
@@ -12406,14 +12389,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const node = computed(() => services?.editorService.get("node"));
     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", markRaw(stage));
-      stage.mount(stageContainer.value);
+      stage.mount(stageContainerEl.value);
       if (!node.value?.id) {
         return;
       }
@@ -12466,9 +12449,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     });
     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);
       }
     });
     onBeforeUnmount(() => {
@@ -12481,7 +12464,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const parseDSL = getEditorConfig("parseDSL");
     const contextmenuHandler = (e) => {
       e.preventDefault();
-      menu.value?.show(e);
+      menuRef.value?.show(e);
     };
     const dragoverHandler = (e) => {
       if (!e.dataTransfer) return;
@@ -12504,9 +12487,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       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;
@@ -12540,8 +12523,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const _directive_loading = resolveDirective("loading");
       return withDirectives((openBlock(), 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,
@@ -12553,14 +12535,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           width: 60,
           height: 50
         },
-        onClick: _cache[0] || (_cache[0] = ($event) => unref(stageWrap)?.container?.focus())
+        onClick: _cache[0] || (_cache[0] = ($event) => unref(stageWrapRef)?.container?.focus())
       }, {
         content: withCtx(() => [
           !_ctx.disabledStageOverlay ? (openBlock(), createBlock(_sfc_main$6, { key: 0 })) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             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
@@ -12570,8 +12551,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           createElementVNode("div", {
             class: "m-editor-stage-container",
-            ref_key: "stageContainer",
-            ref: stageContainer,
+            ref: "stageContainer",
             style: normalizeStyle(`transform: scale(${zoom.value});`),
             onContextmenu: contextmenuHandler,
             onDrop: dropHandler,
@@ -12912,7 +12892,7 @@ class CodeBlock extends BaseService {
 const codeBlockService = new CodeBlock();
 
 class ComponentList extends BaseService {
-  state = reactive({
+  state = shallowReactive({
     list: []
   });
   constructor() {
@@ -13093,7 +13073,7 @@ const dataSourceService = new DataSource();
 
 const idleTask = new IdleTask();
 class Dep extends BaseService {
-  state = reactive({
+  state = shallowReactive({
     collecting: false
   });
   watcher = new Watcher({ initialTargets: reactive({}) });
@@ -13135,6 +13115,7 @@ class Dep extends BaseService {
     });
     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);
@@ -13153,17 +13134,20 @@ class Dep extends BaseService {
       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 (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);
     }
@@ -13202,7 +13186,8 @@ class Dep extends BaseService {
         node,
         deep: false,
         target
-      }
+      },
+      target.type === DepTargetType.DATA_SOURCE
     );
     if (deep && Array.isArray(node.items) && node.items.length) {
       node.items.forEach((item) => {
@@ -13449,7 +13434,7 @@ const canUsePluginMethods = {
   sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
 };
 class StageOverlay extends BaseService {
-  state = reactive({
+  state = shallowReactive({
     wrapDiv: document.createElement("div"),
     sourceEl: null,
     contentEl: null,
@@ -13692,10 +13677,12 @@ const initServiceState = (props, {
     (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);
     },
@@ -13706,9 +13693,12 @@ const initServiceState = (props, {
   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
@@ -13717,9 +13707,12 @@ const initServiceState = (props, {
   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
@@ -13730,16 +13723,18 @@ const initServiceState = (props, {
     (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
@@ -13770,6 +13765,91 @@ const initServiceState = (props, {
   });
 };
 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: cloneDeep(node),
+      parentId: editorService.getParentById(node.id)?.id,
+      root: 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 (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      return depService.collectIdle([node], { pageId }, deep, type);
+    })
+  );
+  watch(
+    () => editorService.get("stage"),
+    (stage) => {
+      if (!stage) {
+        return;
+      }
+      stage.on("rerender", async () => {
+        const node = editorService.get("node");
+        if (!node) return;
+        await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+        updateStageNode(node);
+      });
+    }
+  );
+  const initDataSourceDepTarget = (ds) => {
+    depService.addTarget(createDataSourceTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
+    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
+  };
   const rootChangeHandler = async (value, preValue) => {
     if (!value) return;
     value.codeBlocks = value.codeBlocks || {};
@@ -13777,15 +13857,17 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     codeBlockService.setCodeDsl(value.codeBlocks);
     dataSourceService.set("dataSources", value.dataSources);
     depService.removeTargets(DepTargetType.CODE_BLOCK);
-    Object.entries(value.codeBlocks).forEach(([id, code]) => {
+    for (const [id, code] of Object.entries(value.codeBlocks)) {
       depService.addTarget(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;
@@ -13809,188 +13891,83 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       emit("update:modelValue", value);
     }
   };
-  const stage = computed(() => editorService.get("stage"));
-  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) => {
-        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: cloneDeep(node),
-          parentId: editorService.getParentById(node.id)?.id,
-          root: cloneDeep(root)
-        });
-      });
-    });
-  };
-  const afterUpdateNodes = (nodes) => {
-    const root = editorService.get("root");
-    if (!root) return;
-    for (const node of nodes) {
-      stage.value?.update({
-        config: cloneDeep(node),
-        parentId: editorService.getParentById(node.id)?.id,
-        root: cloneDeep(root)
-      });
-    }
-  };
-  const targetAddHandler = (target) => {
-    const root = editorService.get("root");
-    if (!root) return;
-    if (target.type === DepTargetType.DATA_SOURCE) {
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
-      }
-      root.dataSourceDeps[target.id] = target.deps;
-    }
-    if (target.type === 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(createDataSourceTarget(ds, reactive({})));
-    depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
-    depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
-  };
-  const collectIdle = (nodes, deep) => Promise.all(
-    nodes.map((node) => {
-      let pageId;
-      if (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(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === NODE_CONDS_KEY || isValueIncludeDataSource(record.value)) {
+        forChangeRecords: for (const record of changeRecords) {
+          if (!record.propPath) {
             needRecollectNodes.push(newNode);
-          } else {
-            normalNodes.push(newNode);
+            break forChangeRecords;
+          }
+          if (new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) || new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) || record.propPath === NODE_CONDS_KEY || isValueIncludeDataSource(record.value)) {
+            needRecollectNodes.push(newNode);
+            break forChangeRecords;
+          }
+          for (const target of Object.values(depService.getTargets(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, DepTargetType.DATA_SOURCE);
+      await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+      updateStageNodes(needRecollectNodes);
+    } else {
+      updateStageNodes(normalNodes);
+      Promise.all([
+        collectIdle(normalNodes, true, DepTargetType.CODE_BLOCK),
+        collectIdle(normalNodes, true, 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, DepTargetType.CODE_BLOCK)) {
-      depService.getTarget(id, DepTargetType.CODE_BLOCK).name = codeBlock.name;
-      return;
-    }
-    depService.addTarget(createCodeBlockTarget(id, codeBlock));
-  };
-  const codeBlockRemoveHandler = (id) => {
-    depService.removeTarget(id, 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;
       }
@@ -14001,12 +13978,25 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         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, DepTargetType.DATA_SOURCE),
+            collectIdle(root.items, true, DepTargetType.DATA_SOURCE_COND)
+          ];
+        } else if (isModifyMock) {
+          collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE)];
+        } else if (isModifyMethod) {
+          collectIdlePromises = [collectIdle(root.items, true, 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) => {
@@ -14018,18 +14008,64 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const root = editorService.get("root");
     const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
     const nodes = getNodes(nodeIds, root?.items);
-    collectIdle(nodes, false).then(() => {
-      updateDataSourceSchema(nodes, false);
+    Promise.all([
+      collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
+      collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
+      collectIdle(nodes, false, 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, DepTargetType.CODE_BLOCK)) {
+      depService.getTarget(id, DepTargetType.CODE_BLOCK).name = codeBlock.name;
+      return;
+    }
+    depService.addTarget(createCodeBlockTarget(id, codeBlock));
+  };
+  const codeBlockRemoveHandler = (id) => {
+    depService.removeTarget(id, 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 === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+    if (target.type === 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);
   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);