@tmagic/editor 1.5.2 → 1.5.4

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicCollapse, TMagicCollapseItem, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 export * from '@tmagic/design';
 export { default as designPlugin } from '@tmagic/design';
 import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel, createForm } from '@tmagic/form';
@@ -7,8 +7,8 @@ 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, withModifiers, toHandlers, createSlots, markRaw, getCurrentInstance, withDirectives, vShow, Transition, resolveDirective, mergeDefaults } from 'vue';
-import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-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';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
@@ -27,8 +27,8 @@ import { detailedDiff } from 'deep-object-diff';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
-const _hoisted_1$y = ["src"];
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$10 = ["src"];
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -52,7 +52,7 @@ const _sfc_main$Z = /* @__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,10 +80,14 @@ 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 _sfc_main$Y = /* @__PURE__ */ defineComponent({
+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$Y = /* @__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$Y = /* @__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$Y = /* @__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$Y = /* @__PURE__ */ defineComponent({
           }
         });
       }
-      resizeObserver.observe(codeEditor.value);
+      resizeObserver.observe(codeEditorEl.value);
     };
     watch(
       () => props.initValues,
@@ -240,7 +244,7 @@ const _sfc_main$Y = /* @__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
@@ -256,15 +260,11 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               onClick: fullScreenHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, { icon: unref(FullScreen) }, null, 8, ["icon"])
+                createVNode(_sfc_main$1s, { icon: unref(FullScreen) }, null, 8, ["icon"])
               ]),
               _: 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"]))
       ]);
@@ -272,7 +272,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsVsCode"
   },
@@ -295,7 +295,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$Y, {
+      return openBlock(), createBlock(_sfc_main$1r, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -310,7 +310,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeLink"
   },
@@ -389,7 +389,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelect"
   },
@@ -532,303 +532,60 @@ const styleTabConfig = {
   items: [
     {
       name: "style",
+      labelWidth: "100px",
+      type: "style-setter",
       items: [
         {
-          type: "fieldset",
-          legend: "位置",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "position",
-              text: "固定定位",
-              labelPosition: "left",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "checkbox",
-                activeValue: "fixed",
-                inactiveValue: "absolute",
-                defaultValue: "absolute"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "left",
-              text: "left",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "top",
-              text: "top",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
-            },
-            {
-              type: "data-source-field-select",
-              name: "right",
-              text: "right",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "bottom",
-              text: "bottom",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "盒子",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "display",
-              text: "display",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: "block", value: "block" },
-                  { text: "flex", value: "flex" },
-                  { text: "none", value: "none" },
-                  { text: "inline-block", value: "inline-block" },
-                  { text: "grid", value: "grid" },
-                  { text: "inline", value: "inline" },
-                  { text: "initial", value: "initial" }
-                ]
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "width",
-              text: "宽度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "height",
-              text: "高度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              text: "overflow",
-              name: "overflow",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: "visible", value: "visible" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "clip", value: "clip" },
-                  { text: "scroll", value: "scroll" },
-                  { text: "auto", value: "auto" },
-                  { text: "overlay", value: "overlay" },
-                  { text: "initial", value: "initial" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "边框",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "borderWidth",
-              text: "宽度",
-              defaultValue: "0",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderColor",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderStyle",
-              text: "样式",
-              defaultValue: "none",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "none", value: "none" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "dotted", value: "dotted" },
-                  { text: "dashed", value: "dashed" },
-                  { text: "solid", value: "solid" },
-                  { text: "double", value: "double" },
-                  { text: "groove", value: "groove" },
-                  { text: "ridge", value: "ridge" },
-                  { text: "inset", value: "inset" },
-                  { text: "outset", value: "outset" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "背景",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "backgroundImage",
-              text: "背景图",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "img-upload"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundColor",
-              text: "背景颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundRepeat",
-              text: "背景图重复",
-              defaultValue: "no-repeat",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "repeat", value: "repeat" },
-                  { text: "repeat-x", value: "repeat-x" },
-                  { text: "repeat-y", value: "repeat-y" },
-                  { text: "no-repeat", value: "no-repeat" },
-                  { text: "inherit", value: "inherit" }
-                ]
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundSize",
-              text: "背景图大小",
-              defaultValue: "100% 100%",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "字体",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "color",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontSize",
-              text: "大小",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontWeight",
-              text: "粗细",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "变形",
-          name: "transform",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "rotate",
-              text: "旋转角度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "scale",
-              text: "缩放",
-              checkStrictly: false,
-              dataSourceFieldType: ["number", "string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
+          names: [
+            "display",
+            "flexDirection",
+            "justifyContent",
+            "alignItems",
+            "flexWrap",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+            "paddingTop",
+            "paddingRight",
+            "paddingBottom",
+            "paddingLeft",
+            "width",
+            "height",
+            "overflow",
+            "fontSize",
+            "lineHeight",
+            "fontWeight",
+            "color",
+            "textAlign",
+            "backgroundColor",
+            "backgroundImage",
+            "backgroundSize",
+            "backgroundPosition",
+            "backgroundRepeat",
+            "position",
+            "zIndex",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "borderRadius",
+            "borderTopWidth",
+            "borderTopStyle",
+            "borderTopColor",
+            "borderRightColor",
+            "borderRightWidth",
+            "borderRightStyle",
+            "borderRightColor",
+            "borderBottomWidth",
+            "borderBottomStyle",
+            "borderBottomColor",
+            "borderLeftStyle",
+            "borderLeftWidth",
+            "borderLeftColor",
+            "borderWidth",
+            "borderStyle",
+            "borderColor"
           ]
         }
       ]
@@ -2213,8 +1970,8 @@ class Editor extends BaseService {
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
     const node = toRaw(info.node);
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-      if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object, source) => {
+      if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) {
         return "";
       }
       if (isObject(srcValue) && Array.isArray(objValue)) {
@@ -3077,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
     });
@@ -3092,6 +2850,10 @@ class IdleTask extends EventEmitter {
     }
   }
   clearTasks() {
+    if (this.taskHandle) {
+      globalThis.cancelIdleCallback(this.taskHandle);
+    }
+    this.hightLevelTaskList = [];
     this.taskList = [];
   }
   on(eventName, listener) {
@@ -3104,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) {
       const timeRemaining = deadline.timeRemaining();
       let times = 0;
       if (timeRemaining <= 5) {
@@ -3117,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;
@@ -3272,7 +3038,7 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3288,7 +3054,7 @@ const _sfc_main$U = /* @__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",
@@ -3311,7 +3077,7 @@ const _sfc_main$U = /* @__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);
@@ -3319,8 +3085,7 @@ const _sfc_main$U = /* @__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,
@@ -3332,9 +3097,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$w = { class: "m-fields-code-select-col" };
-const _hoisted_2$i = { class: "code-select-container" };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -3430,8 +3195,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-code", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$_, [
+        createElementVNode("div", _hoisted_2$n, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -3446,14 +3211,14 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: !notEditable.value ? unref(Edit) : unref(View)
               }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["size"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$1n, {
           name: "params",
           key: _ctx.model[_ctx.name],
           model: _ctx.model,
@@ -3466,7 +3231,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCondOpSelect"
   },
@@ -3552,7 +3317,11 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__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({
     position: { default: () => ({ left: 0, top: 0 }) },
@@ -3572,8 +3341,8 @@ const _sfc_main$R = /* @__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);
@@ -3581,8 +3350,8 @@ const _sfc_main$R = /* @__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";
     });
@@ -3604,7 +3373,7 @@ const _sfc_main$R = /* @__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,
@@ -3638,7 +3407,7 @@ const _sfc_main$R = /* @__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;
@@ -3674,10 +3443,10 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     const nextZIndex = () => {
       curZIndex.value = zIndex.nextZIndex();
     };
-    provide("parentFloating", target);
+    provide("parentFloating", targetEl);
     __expose({
       bodyHeight,
-      target,
+      target: targetEl,
       titleEl
     });
     return (_ctx, _cache) => {
@@ -3686,17 +3455,12 @@ const _sfc_main$R = /* @__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)
             ]),
@@ -3707,7 +3471,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                 onClick: closeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
+                  createVNode(_sfc_main$1s, { icon: unref(Close) }, null, 8, ["icon"])
                 ]),
                 _: 1
               })
@@ -3728,7 +3492,7 @@ const _sfc_main$R = /* @__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("新增代码块失败");
@@ -3743,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);
@@ -3761,7 +3525,7 @@ const useCodeBlockEdit = (codeBlockService) => {
     };
     codeId.value = id;
     await nextTick();
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   };
   const deleteCode = async (key) => {
     codeBlockService?.deleteCodeDslByIds([key]);
@@ -3769,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,
@@ -3782,7 +3546,7 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const state = reactive({
+const state = shallowReactive({
   uiSelectMode: false,
   showSrc: false,
   showStylePanel: true,
@@ -4230,9 +3994,9 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _hoisted_1$v = { class: "m-editor-data-source-fields" };
-const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -4496,12 +4260,12 @@ const _sfc_main$Q = /* @__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$h, [
+        createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4526,7 +4290,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -4549,7 +4313,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["visible", "width", "height", "title", "position"]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addFromJsonDialogVisible.value,
           "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
           width: width.value,
@@ -4574,8 +4338,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _hoisted_1$X = { class: "m-editor-data-source-field-select" };
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "FieldSelect",
   props: /* @__PURE__ */ mergeModels({
     value: {},
@@ -4656,7 +4420,7 @@ const _sfc_main$P = /* @__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,
@@ -4724,7 +4488,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, {
+                createVNode(_sfc_main$1s, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -4738,8 +4502,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _hoisted_1$W = { class: "m-fields-data-source-field-select" };
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
   },
@@ -4840,8 +4604,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$P, {
+      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],
           disabled: _ctx.disabled,
@@ -4876,7 +4640,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
+                createVNode(_sfc_main$1s, { icon: unref(Coin) }, null, 8, ["icon"])
               ]),
               _: 1
             }, 8, ["type", "size"])
@@ -4888,10 +4652,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$4 = { class: "el-input__inner t-input__inner" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+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({
   ...{
     name: "MFieldsDataSourceInput"
   },
@@ -4912,11 +4676,11 @@ const _sfc_main$N = /* @__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);
@@ -4935,7 +4699,7 @@ const _sfc_main$N = /* @__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);
       }
@@ -5071,8 +4835,7 @@ const _sfc_main$N = /* @__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)
         },
@@ -5091,12 +4854,12 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
+          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$g, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$l, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -5108,7 +4871,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$4, [
+          createElementVNode("div", _hoisted_3$8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -5126,7 +4889,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$Z, {
+            createVNode(_sfc_main$1s, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -5137,11 +4900,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$f = { style: { "flex": "1" } };
-const _hoisted_3$3 = { style: { "flex": "1" } };
-const _hoisted_4$3 = { class: "dialog-footer" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+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({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -5167,12 +4930,12 @@ const _sfc_main$M = /* @__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 = {
@@ -5314,7 +5077,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
           width: width.value,
@@ -5368,7 +5131,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             fullscreen: ""
           }, {
             footer: withCtx(() => [
-              createElementVNode("span", _hoisted_4$3, [
+              createElementVNode("span", _hoisted_4$5, [
                 createVNode(unref(TMagicButton), {
                   size: "small",
                   onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
@@ -5391,8 +5154,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$r, [
-                createElementVNode("div", _hoisted_2$f, [
+              createElementVNode("div", _hoisted_1$U, [
+                createElementVNode("div", _hoisted_2$k, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5403,7 +5166,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createElementVNode("div", _hoisted_3$3, [
+                createElementVNode("div", _hoisted_3$7, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "success"
@@ -5415,10 +5178,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              difVisible.value ? (openBlock(), createBlock(_sfc_main$Y, {
+              difVisible.value ? (openBlock(), createBlock(_sfc_main$1r, {
                 key: 0,
-                ref_key: "magicVsEditor",
-                ref: magicVsEditor,
+                ref: "magicVsEditor",
                 type: "diff",
                 language: "json",
                 initValues: _ctx.content.content,
@@ -5434,9 +5196,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = { class: "m-editor-data-source-methods" };
-const _hoisted_2$e = { class: "m-editor-data-source-methods-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -5457,7 +5219,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const codeConfig = ref();
-    const codeBlockEditor = useTemplateRef("codeBlockEditor");
+    const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
     let editIndex = -1;
     const methodColumns = [
       {
@@ -5496,7 +5258,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               };
               editIndex = index;
               nextTick(() => {
-                codeBlockEditor.value?.show();
+                codeBlockEditorRef.value?.show();
               });
             }
           },
@@ -5522,7 +5284,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       };
       editIndex = -1;
       nextTick(() => {
-        codeBlockEditor.value?.show();
+        codeBlockEditorRef.value?.show();
       });
     };
     const submitCodeHandler = (value, data) => {
@@ -5554,15 +5316,15 @@ const _sfc_main$L = /* @__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$e, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5576,10 +5338,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        codeConfig.value ? (openBlock(), createBlock(_sfc_main$M, {
+        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,
@@ -5591,9 +5352,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$d = { class: "data-source-method-select-container" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -5679,8 +5440,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$S, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5699,7 +5460,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                 onClick: editCodeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Z, {
+                  createVNode(_sfc_main$1s, {
                     icon: !notEditable.value ? unref(Edit) : unref(View)
                   }, null, 8, ["icon"])
                 ]),
@@ -5709,7 +5470,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["content"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$1n, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -5723,9 +5484,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-const _hoisted_2$c = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -5814,7 +5575,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$Y,
+        component: _sfc_main$1r,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -5929,12 +5690,12 @@ const _sfc_main$J = /* @__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$c, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5948,7 +5709,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -5975,8 +5736,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-data-source-select" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = { class: "m-fields-data-source-select" };
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
   },
@@ -6033,7 +5794,7 @@ const _sfc_main$I = /* @__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,
@@ -6055,7 +5816,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               onClick: editHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, {
+                createVNode(_sfc_main$1s, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -6069,7 +5830,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   ...{
     name: "m-fields-display-conds"
   },
@@ -6101,7 +5862,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         {
           type: "table",
           name: "cond",
-          operateColWidth: 50,
+          operateColWidth: 100,
+          enableToggleMode: false,
           items: [
             parentFields.value.length ? {
               type: "cascader",
@@ -6200,12 +5962,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-fields-event-select" };
-const _hoisted_2$b = {
+const _hoisted_1$P = { class: "m-fields-event-select" };
+const _hoisted_2$g = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsEventSelect"
   },
@@ -6481,7 +6243,7 @@ const _sfc_main$G = /* @__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",
@@ -6490,7 +6252,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$g, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6542,29 +6304,29 @@ const _sfc_main$G = /* @__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",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __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$a = { key: 0 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$N = { class: "m-fields-key-value" };
+const _hoisted_2$f = { key: 0 };
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
   },
@@ -6626,8 +6388,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+      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",
@@ -6676,7 +6438,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$Y, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -6692,7 +6454,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           size: "default",
           disabled: _ctx.disabled,
           link: "",
-          icon: _sfc_main$F,
+          icon: _sfc_main$18,
           onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
         }, null, 8, ["disabled"])) : createCommentVNode("", true)
       ]);
@@ -6700,9 +6462,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$9 = { class: "page-fragment-select-container" };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+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"
   },
@@ -6748,8 +6510,8 @@ const _sfc_main$D = /* @__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$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$M, [
+        createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6757,7 +6519,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$Z, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$1s, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -6769,16 +6531,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = {
-  key: 1,
-  class: "m-fields-ui-select",
-  style: { "display": "flex" }
-};
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFieldsUISelect"
-  },
-  __name: "UISelect",
+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",
   props: {
     config: {},
     model: {},
@@ -6792,43 +6549,1173 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   },
   emits: ["change"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    const services = inject("services");
-    const mForm = inject("mForm");
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
-    const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", false);
-      uiSelectMode.value = false;
-      globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
-    };
-    const clickHandler = ({ detail }) => {
-      let { id } = detail;
-      if (detail.nodeType) {
-        id = getIdFromEl()(detail) || id;
-      }
-      if (id) {
-        props.model[props.name] = id;
-        emit("change", id);
-        mForm?.$emit("field-change", props.prop, id);
+    const horizontalList = [
+      {
+        value: "left",
+        text: "左"
+      },
+      {
+        value: "center",
+        text: "中"
+      },
+      {
+        value: "right",
+        text: "右"
       }
-      if (cancelHandler) {
-        cancelHandler();
+    ];
+    const verticalList = [
+      {
+        value: "top",
+        text: "上"
+      },
+      {
+        value: "center",
+        text: "中"
+      },
+      {
+        value: "bottom",
+        text: "下"
       }
+    ];
+    const list = verticalList.map(
+      (vertical) => horizontalList.map((horizontal) => ({
+        value: `${horizontal.value} ${vertical.value}`,
+        tips: `${horizontal.text}${vertical.text}`,
+        class: `${horizontal.value}-${vertical.value}`
+      }))
+    ).flat();
+    const changeHandler = (v) => {
+      emit("change", v);
     };
-    const toName = computed(() => {
-      const config = services?.editorService.getNodeById(val.value);
-      return config?.name || "";
-    });
-    const startSelect = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", true);
-      uiSelectMode.value = true;
-      globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
-    };
-    const deleteHandler = () => {
+    return (_ctx, _cache) => {
+      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,
+              link: "",
+              class: normalizeClass(_ctx.model[_ctx.name] === item.value && "btn-active"),
+              onClick: ($event) => changeHandler(item.value)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["position-icon", item.class, _ctx.model[_ctx.name] === item.value && "active"])
+                }, null, 2)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3$6, [
+          createVNode(unref(TMagicInput), {
+            modelValue: _ctx.model[_ctx.name],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+            size: "small",
+            placeholder: "自定义背景位置",
+            clearable: "",
+            onChange: changeHandler
+          }, null, 8, ["modelValue"])
+        ])
+      ]);
+    };
+  }
+});
+
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main$14 = {};
+
+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$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)
+  ])))
+}
+const BackgroundRepeat = /*#__PURE__*/_export_sfc(_sfc_main$14, [['render',_sfc_render$k]]);
+
+const _sfc_main$13 = {};
+
+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$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"
+    }, null, -1)
+  ])))
+}
+const BackgroundRepeatX = /*#__PURE__*/_export_sfc(_sfc_main$13, [['render',_sfc_render$j]]);
+
+const _sfc_main$12 = {};
+
+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$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"
+    }, null, -1)
+  ])))
+}
+const BackgroundRepeatY = /*#__PURE__*/_export_sfc(_sfc_main$12, [['render',_sfc_render$i]]);
+
+const _sfc_main$11 = {};
+
+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$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"
+    }, null, -1)
+  ])))
+}
+const BackgroundNoRepeat = /*#__PURE__*/_export_sfc(_sfc_main$11, [['render',_sfc_render$h]]);
+
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  __name: "Background",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "backgroundColor",
+          text: "背景色",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: "backgroundImage",
+          text: "背景图",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "img-upload"
+          }
+        },
+        {
+          name: "backgroundSize",
+          text: "背景尺寸",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "auto", text: "默认", tooltip: "默认 auto" },
+            { value: "contain", text: "等比填充", tooltip: "等比填充 contain" },
+            { value: "cover", text: "等比覆盖", tooltip: "等比覆盖 cover" }
+          ]
+        },
+        {
+          name: "backgroundRepeat",
+          text: "重复显示",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "repeat", icon: markRaw(BackgroundRepeat), tooltip: "垂直和水平方向重复 repeat" },
+            { value: "repeat-x", icon: markRaw(BackgroundRepeatX), tooltip: "水平方向重复 repeat-x" },
+            { value: "repeat-y", icon: markRaw(BackgroundRepeatY), tooltip: "垂直方向重复 repeat-y" },
+            { value: "no-repeat", icon: markRaw(BackgroundNoRepeat), tooltip: "不重复 no-repeat" }
+          ]
+        },
+        {
+          name: "backgroundPosition",
+          text: "背景定位",
+          type: "component",
+          component: _sfc_main$15,
+          labelWidth: "68px"
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MContainer), {
+        config,
+        model: _ctx.values,
+        onChange: change
+      }, null, 8, ["model"]);
+    };
+  }
+});
+
+const _sfc_main$$ = {};
+
+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$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)
+  ])))
+}
+const AlignLeft = /*#__PURE__*/_export_sfc(_sfc_main$$, [['render',_sfc_render$g]]);
+
+const _sfc_main$_ = {};
+
+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$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)
+  ])))
+}
+const AlignCenter = /*#__PURE__*/_export_sfc(_sfc_main$_, [['render',_sfc_render$f]]);
+
+const _sfc_main$Z = {};
+
+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$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)
+  ])))
+}
+const AlignRight = /*#__PURE__*/_export_sfc(_sfc_main$Z, [['render',_sfc_render$e]]);
+
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+  __name: "Font",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          type: "row",
+          items: [
+            {
+              labelWidth: "68px",
+              name: "fontSize",
+              text: "字号",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              labelWidth: "68px",
+              name: "lineHeight",
+              text: "行高",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          name: "fontWeight",
+          text: "字重",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["normal", "bold"].concat(
+              Array(7).fill(1).map((x, i) => `${i + 1}00`)
+            ).map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        },
+        {
+          labelWidth: "68px",
+          name: "color",
+          text: "颜色",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: "textAlign",
+          text: "对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "left", icon: markRaw(AlignLeft), tooltip: "左对齐 row" },
+            { value: "center", icon: markRaw(AlignCenter), tooltip: "居中对齐 center" },
+            { value: "right", icon: markRaw(AlignRight), tooltip: "右对齐 right" }
+          ]
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MContainer), {
+        config,
+        model: _ctx.values,
+        onChange: change
+      }, null, 8, ["model"]);
+    };
+  }
+});
+
+const _hoisted_1$D = { class: "layout-box-container" };
+const _hoisted_2$c = {
+  key: 0,
+  class: "help-txt"
+};
+const _hoisted_3$5 = { class: "next-input" };
+const _hoisted_4$4 = ["onUpdate:modelValue", "title", "onChange"];
+const _sfc_main$X = /* @__PURE__ */ defineComponent({
+  __name: "Box",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const list = [
+      {
+        name: "marginTop",
+        class: "outer-top-border"
+      },
+      {
+        name: "marginRight",
+        class: "outer-right-border"
+      },
+      {
+        name: "marginBottom",
+        text: "MARGIN",
+        class: "outer-bottom-border"
+      },
+      {
+        name: "marginLeft",
+        class: "outer-left-border"
+      },
+      {
+        name: "paddingTop",
+        class: "inner-top-border"
+      },
+      {
+        name: "paddingRight",
+        class: "inner-right-border"
+      },
+      {
+        name: "paddingBottom",
+        text: "PADDING",
+        class: "inner-bottom-border"
+      },
+      {
+        name: "paddingLeft",
+        class: "inner-left-border"
+      }
+    ];
+    const emit = __emit;
+    const change = (event, name) => {
+      emit("change", event.target.value, {
+        modifyKey: name
+      });
+    };
+    return (_ctx, _cache) => {
+      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$c, toDisplayString(item.text), 1)) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_3$5, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
+                title: _ctx.model[item.name],
+                onChange: ($event) => change($event, item.name),
+                placeholder: "0"
+              }, null, 40, _hoisted_4$4), [
+                [vModelText, _ctx.model[item.name]]
+              ])
+            ])
+          ], 2);
+        }), 64))
+      ]);
+    };
+  }
+});
+
+const _sfc_main$W = {};
+
+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$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)
+  ])))
+}
+const DisplayBlock = /*#__PURE__*/_export_sfc(_sfc_main$W, [['render',_sfc_render$d]]);
+
+const _sfc_main$V = {};
+
+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$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)
+  ])))
+}
+const DisplayFlex = /*#__PURE__*/_export_sfc(_sfc_main$V, [['render',_sfc_render$c]]);
+
+const _sfc_main$U = {};
+
+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$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)
+  ])))
+}
+const DisplayInline = /*#__PURE__*/_export_sfc(_sfc_main$U, [['render',_sfc_render$b]]);
+
+const _sfc_main$T = {};
+
+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$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)
+  ])))
+}
+const DisplayInlineBlock = /*#__PURE__*/_export_sfc(_sfc_main$T, [['render',_sfc_render$a]]);
+
+const _sfc_main$S = {};
+
+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$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)
+  ])))
+}
+const DisplayNone = /*#__PURE__*/_export_sfc(_sfc_main$S, [['render',_sfc_render$9]]);
+
+const _sfc_main$R = {};
+
+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$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)
+  ])))
+}
+const FlexDirectionColumn = /*#__PURE__*/_export_sfc(_sfc_main$R, [['render',_sfc_render$8]]);
+
+const _sfc_main$Q = {};
+
+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$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)
+  ])))
+}
+const FlexDirectionColumnReverse = /*#__PURE__*/_export_sfc(_sfc_main$Q, [['render',_sfc_render$7]]);
+
+const _sfc_main$P = {};
+
+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$v, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1)
+  ])))
+}
+const FlexDirectionRow = /*#__PURE__*/_export_sfc(_sfc_main$P, [['render',_sfc_render$6]]);
+
+const _sfc_main$O = {};
+
+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$u, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1)
+  ])))
+}
+const FlexDirectionRowReverse = /*#__PURE__*/_export_sfc(_sfc_main$O, [['render',_sfc_render$5]]);
+
+const _sfc_main$N = {};
+
+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$t, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1)
+  ])))
+}
+const JustifyContentCenter = /*#__PURE__*/_export_sfc(_sfc_main$N, [['render',_sfc_render$4]]);
+
+const _sfc_main$M = {};
+
+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$s, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1)
+  ])))
+}
+const JustifyContentFlexEnd = /*#__PURE__*/_export_sfc(_sfc_main$M, [['render',_sfc_render$3]]);
+
+const _sfc_main$L = {};
+
+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$r, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1)
+  ])))
+}
+const JustifyContentFlexStart = /*#__PURE__*/_export_sfc(_sfc_main$L, [['render',_sfc_render$2]]);
+
+const _sfc_main$K = {};
+
+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$q, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1)
+  ])))
+}
+const JustifyContentSpaceAround = /*#__PURE__*/_export_sfc(_sfc_main$K, [['render',_sfc_render$1]]);
+
+const _sfc_main$J = {};
+
+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$p, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1)
+  ])))
+}
+const JustifyContentSpaceBetween = /*#__PURE__*/_export_sfc(_sfc_main$J, [['render',_sfc_render]]);
+
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
+  __name: "Layout",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "display",
+          text: "模式",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "inline", icon: markRaw(DisplayInline), tooltip: "内联布局 inline" },
+            { value: "flex", icon: markRaw(DisplayFlex), tooltip: "弹性布局 flex" },
+            { value: "block", icon: markRaw(DisplayBlock), tooltip: "块级布局 block" },
+            { value: "inline-block", icon: markRaw(DisplayInlineBlock), tooltip: "内联块布局 inline-block" },
+            { value: "none", icon: markRaw(DisplayNone), tooltip: "隐藏 none" }
+          ]
+        },
+        {
+          name: "flexDirection",
+          text: "主轴方向",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "row", icon: markRaw(FlexDirectionRow), tooltip: "水平方向 起点在左侧 row" },
+            { value: "row-reverse", icon: markRaw(FlexDirectionRowReverse), tooltip: "水平方向 起点在右侧 row-reverse" },
+            { value: "column", icon: markRaw(FlexDirectionColumn), tooltip: "垂直方向 起点在上沿 column" },
+            {
+              value: "column-reverse",
+              icon: markRaw(FlexDirectionColumnReverse),
+              tooltip: "垂直方向 起点在下沿 column-reverse"
+            }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "justifyContent",
+          text: "主轴对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "flex-start", icon: markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+            { value: "flex-end", icon: markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+            { value: "center", icon: markRaw(JustifyContentCenter), tooltip: "居中 center" },
+            { value: "space-between", icon: markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+            { value: "space-around", icon: markRaw(JustifyContentSpaceAround), tooltip: "横向平分 space-around" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "alignItems",
+          text: "辅轴对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "flex-start", icon: markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+            { value: "flex-end", icon: markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+            { value: "center", icon: markRaw(JustifyContentCenter), tooltip: "居中 center" },
+            { value: "space-between", icon: markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+            { value: "space-around", icon: markRaw(JustifyContentSpaceAround), tooltip: "横向平分 space-around" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "flexWrap",
+          text: "换行",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "nowrap", text: "不换行", tooltip: "不换行 nowrap" },
+            { value: "wrap", text: "正换行", tooltip: "第一行在上方 wrap" },
+            { value: "wrap-reverse", text: "逆换行", tooltip: "第一行在下方 wrap-reverse" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          type: "row",
+          items: [
+            {
+              name: "width",
+              text: "宽度",
+              labelWidth: "68px",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              name: "height",
+              text: "宽度",
+              labelWidth: "68px",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          type: "data-source-field-select",
+          text: "overflow",
+          name: "overflow",
+          checkStrictly: false,
+          dataSourceFieldType: ["string"],
+          fieldConfig: {
+            type: "select",
+            clearable: true,
+            allowCreate: true,
+            options: [
+              { text: "visible", value: "visible" },
+              { text: "hidden", value: "hidden" },
+              { text: "clip", value: "clip" },
+              { text: "scroll", value: "scroll" },
+              { text: "auto", value: "auto" },
+              { text: "overlay", value: "overlay" },
+              { text: "initial", value: "initial" }
+            ]
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        createVNode(_sfc_main$X, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"])
+      ], 64);
+    };
+  }
+});
+
+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",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const list = [
+      {
+        name: "top",
+        class: "outer-top-border"
+      },
+      {
+        name: "right",
+        class: "outer-right-border"
+      },
+      {
+        name: "bottom",
+        class: "outer-bottom-border"
+      },
+      {
+        name: "left",
+        class: "outer-left-border"
+      }
+    ];
+    const emit = __emit;
+    const change = (event, name) => {
+      emit("change", event.target.value, {
+        modifyKey: name
+      });
+    };
+    return (_ctx, _cache) => {
+      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$b, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
+                title: _ctx.model[item.name],
+                onChange: ($event) => change($event, item.name),
+                placeholder: "0"
+              }, null, 40, _hoisted_3$4), [
+                [vModelText, _ctx.model[item.name]]
+              ])
+            ])
+          ], 2);
+        }), 64))
+      ]);
+    };
+  }
+});
+
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
+  __name: "Position",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "position",
+          text: "定位",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["static", "relative", "absolute", "fixed", "sticky"].map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        },
+        {
+          labelWidth: "68px",
+          name: "zIndex",
+          text: "zIndex",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        withDirectives(createVNode(_sfc_main$H, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]), [
+          [vShow, _ctx.values["position"] !== "static"]
+        ])
+      ], 64);
+    };
+  }
+});
+
+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" };
+const _hoisted_6 = { class: "border-value-container" };
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
+  __name: "Border",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const direction = ref("");
+    const config = computed(() => ({
+      items: [
+        {
+          name: `border${direction.value}Width`,
+          text: "边框宽度",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        },
+        {
+          name: `border${direction.value}Color`,
+          text: "边框颜色",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: `border${direction.value}Style`,
+          text: "边框样式",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["solid", "dashed", "dotted"].map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        }
+      ]
+    }));
+    const selectDirection = (d) => direction.value = d || "";
+    const emit = __emit;
+    const change = (value, eventData) => {
+      eventData.changeRecords?.forEach((record) => {
+        emit("change", record.value, {
+          modifyKey: record.propPath
+        });
+      });
+    };
+    return (_ctx, _cache) => {
+      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" }]),
+              onClick: _cache[0] || (_cache[0] = ($event) => selectDirection("Top"))
+            }, null, 2)
+          ]),
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-left", { active: direction.value === "Left" }]),
+              onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
+            }, null, 2),
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon", { active: direction.value === "" }]),
+              onClick: _cache[2] || (_cache[2] = ($event) => selectDirection())
+            }, null, 2),
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-right", { active: direction.value === "Right" }]),
+              onClick: _cache[3] || (_cache[3] = ($event) => selectDirection("Right"))
+            }, null, 2)
+          ]),
+          createElementVNode("div", _hoisted_5$1, [
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-bottom", { active: direction.value === "Bottom" }]),
+              onClick: _cache[4] || (_cache[4] = ($event) => selectDirection("Bottom"))
+            }, null, 2)
+          ])
+        ]),
+        createElementVNode("div", _hoisted_6, [
+          createVNode(unref(MContainer), {
+            config: config.value,
+            model: _ctx.model,
+            onChange: change
+          }, null, 8, ["config", "model"])
+        ])
+      ]);
+    };
+  }
+});
+
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  __name: "Border",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          labelWidth: "68px",
+          name: "borderRadius",
+          text: "圆角",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        createVNode(_sfc_main$F, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"])
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$m = { class: "m-fields-style-setter" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsStyleSetter"
+  },
+  __name: "Index",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const list = [
+      {
+        name: "font",
+        title: "布局",
+        component: _sfc_main$I
+      },
+      {
+        title: "位置",
+        component: _sfc_main$G
+      },
+      {
+        title: "背景",
+        component: _sfc_main$10
+      },
+      {
+        title: "文字",
+        component: _sfc_main$Y
+      },
+      {
+        title: "边框与圆角",
+        component: _sfc_main$E
+      }
+    ];
+    const collapseValue = shallowRef(
+      Array(list.length).fill(1).map((x, i) => `${i}`)
+    );
+    const change = (v, eventData) => {
+      emit("change", v, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createVNode(unref(TMagicCollapse), { "model-value": collapseValue.value }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
+              return createVNode(unref(TMagicCollapseItem), {
+                key: index,
+                name: `${index}`
+              }, {
+                title: withCtx(() => [
+                  createVNode(_sfc_main$1s, { icon: unref(Grid) }, null, 8, ["icon"]),
+                  createTextVNode(toDisplayString(item.title), 1)
+                ]),
+                default: withCtx(() => [
+                  item.component ? (openBlock(), createBlock(resolveDynamicComponent(item.component), {
+                    key: 0,
+                    values: _ctx.model[_ctx.name],
+                    onChange: change
+                  }, null, 40, ["values"])) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["name"]);
+            }), 64))
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$l = {
+  key: 1,
+  class: "m-fields-ui-select",
+  style: { "display": "flex" }
+};
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsUISelect"
+  },
+  __name: "UISelect",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const services = inject("services");
+    const mForm = inject("mForm");
+    const val = computed(() => props.model[props.name]);
+    const uiSelectMode = ref(false);
+    const cancelHandler = () => {
+      if (!services?.uiService) return;
+      services.uiService.set("uiSelectMode", false);
+      uiSelectMode.value = false;
+      globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+    };
+    const clickHandler = ({ detail }) => {
+      let { id } = detail;
+      if (detail.nodeType) {
+        id = getIdFromEl()(detail) || id;
+      }
+      if (id) {
+        props.model[props.name] = id;
+        emit("change", id);
+        mForm?.$emit("field-change", props.prop, id);
+      }
+      if (cancelHandler) {
+        cancelHandler();
+      }
+    };
+    const toName = computed(() => {
+      const config = services?.editorService.getNodeById(val.value);
+      return config?.name || "";
+    });
+    const startSelect = () => {
+      if (!services?.uiService) return;
+      services.uiService.set("uiSelectMode", true);
+      uiSelectMode.value = true;
+      globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+    };
+    const deleteHandler = () => {
       if (props.model) {
         props.model[props.name] = "";
         emit("change", "");
@@ -6872,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: "清除",
@@ -6947,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")
@@ -6981,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);
@@ -7087,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`)
       }, [
@@ -7121,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"
@@ -7197,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",
@@ -7211,7 +8096,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7229,7 +8114,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7262,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(() => [
@@ -7279,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" }
 };
@@ -7310,10 +8195,10 @@ 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$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
           ]),
           default: withCtx(() => [
             createVNode(_sfc_main$z, {
@@ -7337,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"
@@ -7356,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") {
@@ -7394,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;
       }
@@ -7403,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,
@@ -7462,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", {
@@ -7481,21 +8366,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$Z, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$1s, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$Z, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$1s, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
   }
 });
 
-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"
@@ -7518,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",
@@ -7558,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: {
@@ -7597,8 +8482,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       emit("search", values);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(_sfc_main$Z, {
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createVNode(_sfc_main$1s, {
           icon: unref(Search),
           onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
           class: normalizeClass({ "icon-active": visible.value })
@@ -7622,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"];
@@ -7674,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
         }, {
@@ -7729,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)
@@ -7791,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({
   ...{
@@ -7815,14 +8698,14 @@ 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",
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[2] || (_cache[2] = createElementVNode("p", null, "新增页面", -1))
           ]),
@@ -7832,7 +8715,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[3] || (_cache[3] = createElementVNode("p", null, "新增页面片", -1))
           ])) : createCommentVNode("", true)
@@ -7842,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";
@@ -7859,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);
@@ -7873,7 +8761,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       right: getRightColumnWidthCacheData()
     });
     watch(pageLength, () => {
-      splitView.value?.updateWidth();
+      splitViewRef.value?.updateWidth();
     });
     watch(
       () => uiService?.get("hideSlideBar"),
@@ -7898,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(() => {
@@ -7914,17 +8802,12 @@ 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"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$Y, {
+          createVNode(_sfc_main$1r, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
@@ -7932,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",
@@ -8144,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,
@@ -8155,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();
@@ -8166,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", {
@@ -8188,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"
@@ -8213,20 +9094,20 @@ 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();
     onMounted(() => {
-      emit("mounted", internalInstance);
+      emit("mounted", internalInstance?.proxy);
     });
     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);
@@ -8238,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,
@@ -8270,11 +9150,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Z, { icon: unref(Document) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Document) }, null, 8, ["icon"])
           ]),
           _: 1
         }, 8, ["type"])) : createCommentVNode("", true),
-        showSrc.value ? (openBlock(), createBlock(_sfc_main$Y, {
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
           class: "m-editor-props-panel-src-code",
           height: `${unref(editorContentHeight)}px`,
@@ -8312,7 +9192,10 @@ const useStylePanel = (services) => {
   };
 };
 
-const _hoisted_1$a = { class: "m-editor-props-panel" };
+const _hoisted_1$b = {
+  ref: "propsPanel",
+  class: "m-editor-props-panel"
+};
 const _hoisted_2$4 = { class: "m-editor-props-style-panel-title" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
@@ -8356,7 +9239,18 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         if (!v.id) {
           v.id = values.value.id;
         }
-        services?.editorService.update(v, { changeRecords: eventData?.changeRecords });
+        const newValue = {
+          ...v,
+          style: {}
+        };
+        if (v.style) {
+          Object.entries(v.style).forEach(([key, value]) => {
+            if (value !== "" && newValue.style) {
+              newValue.style[key] = value;
+            }
+          });
+        }
+        services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
       } catch (e) {
         emit("submit-error", e);
       }
@@ -8364,8 +9258,20 @@ 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 }) => {
+      if (!propsPanelEl.value) {
+        return;
+      }
+      const width = globalThis.parseFloat(
+        getComputedStyle(propsPanelEl.value).getPropertyValue("--props-style-panel-width")
+      );
+      propsPanelEl.value.style.setProperty("--props-style-panel-width", `${width - deltaX}px`);
     };
     const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
     const propertyFormPanelRef = useTemplateRef("propertyFormPanel");
@@ -8376,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",
@@ -8390,8 +9296,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           onFormError: errorHandler,
           onMounted: mountedHandler
         }, null, 8, ["class", "config", "values", "disabledShowSrc", "extendState"]),
-        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$q, {
+        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$B, {
           key: 0,
+          onChange: widthChange
+        })) : createCommentVNode("", true),
+        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 1,
           class: "m-editor-props-style-panel",
           "label-position": "top",
           "code-value-key": "style",
@@ -8413,7 +9323,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   onClick: unref(closeStylePanelHandler)
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
+                    createVNode(_sfc_main$1s, { icon: unref(Close) }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["onClick"])
@@ -8423,14 +9333,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["values", "disabledShowSrc", "extendState"])) : createCommentVNode("", true),
         !unref(showStylePanel) ? (openBlock(), createBlock(unref(TMagicButton), {
-          key: 1,
+          key: 2,
           class: "m-editor-props-panel-style-icon",
           circle: "",
           type: unref(showStylePanel) ? "primary" : "",
           onClick: unref(showStylePanelHandler)
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Z, { icon: unref(Sugar) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Sugar) }, null, 8, ["icon"])
           ]),
           _: 1
         }, 8, ["type", "onClick"])) : createCommentVNode("", true)
@@ -8456,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();
@@ -8472,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) => {
@@ -8497,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;
@@ -8525,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
           });
         }
@@ -8550,7 +9460,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
     });
     __expose({
-      menu,
+      menu: menuEl,
       menuPosition,
       hide,
       show,
@@ -8563,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(() => {
@@ -8576,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,
@@ -8590,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,
@@ -8649,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 = {
@@ -8730,7 +9637,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$Z, {
+          createVNode(_sfc_main$1s, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -8775,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"
 };
@@ -8829,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);
@@ -8980,7 +9887,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -8995,7 +9902,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -9080,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"
@@ -9098,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);
@@ -9110,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) => {
@@ -9118,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,
@@ -9136,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,
@@ -9156,7 +10062,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$1f, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -9256,7 +10162,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$R, {
+      return openBlock(), createBlock(_sfc_main$1k, {
         visible: boxVisible.value,
         "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
         width: width.value,
@@ -9420,7 +10326,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -9435,7 +10341,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -9516,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"
@@ -9579,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,
@@ -9651,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",
@@ -9666,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"
@@ -9764,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() || []);
@@ -9840,7 +10746,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       )
     );
     const show = (e) => {
-      menu.value?.show(e);
+      menuRef.value?.show(e);
     };
     __expose({
       show
@@ -9848,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"]);
     };
@@ -9874,12 +10779,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$Z, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$1s, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$Z, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$1s, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -9891,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) {
@@ -9956,9 +10861,8 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
       select(data);
     });
   };
-  const menu = useTemplateRef("menu");
   return {
-    menu,
+    menuRef,
     nodeClickHandler,
     nodeContentMenuHandler(event, data) {
       event.preventDefault();
@@ -9966,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
   };
@@ -10367,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) {
@@ -10393,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(() => [
@@ -10407,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,
@@ -10436,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
@@ -10450,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({
   ...{
@@ -10540,7 +11442,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       name: `${index}`
                     }, {
                       title: withCtx(() => [
-                        createVNode(_sfc_main$Z, { icon: unref(Grid) }, null, 8, ["icon"]),
+                        createVNode(_sfc_main$1s, { icon: unref(Grid) }, null, 8, ["icon"]),
                         createTextVNode(toDisplayString(group.title), 1)
                       ]),
                       default: withCtx(() => [
@@ -10561,7 +11463,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                                 content: item.desc
                               }, {
                                 default: withCtx(() => [
-                                  createVNode(_sfc_main$Z, {
+                                  createVNode(_sfc_main$1s, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -10571,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
@@ -10589,7 +11491,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 0,
   class: "m-editor-sidebar"
 };
@@ -10739,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", {
@@ -10752,7 +11654,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -10898,7 +11800,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$R, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$1k, {
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
@@ -10944,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(() => ({
@@ -10954,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) => {
@@ -10965,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;
@@ -11000,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)
@@ -11015,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"
@@ -11033,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};
@@ -11047,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
@@ -11085,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")
@@ -11128,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") || []);
@@ -11174,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
@@ -11193,18 +12091,16 @@ 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)
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$R, {
+        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: "当前位置下的组件",
@@ -11230,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);
@@ -11249,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);
@@ -11286,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(() => {
@@ -11351,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"));
@@ -11370,7 +12265,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             }
           },
           useCopyMenu(),
-          usePasteMenu(menu),
+          usePasteMenu(menuRef),
           {
             type: "divider",
             direction: "horizontal",
@@ -11452,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"]);
     };
   }
@@ -11482,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"));
@@ -11495,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;
       }
@@ -11555,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(() => {
@@ -11570,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;
@@ -11593,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;
@@ -11629,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,
@@ -11642,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
@@ -11659,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,
@@ -12001,7 +12892,7 @@ class CodeBlock extends BaseService {
 const codeBlockService = new CodeBlock();
 
 class ComponentList extends BaseService {
-  state = reactive({
+  state = shallowReactive({
     list: []
   });
   constructor() {
@@ -12182,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({}) });
@@ -12224,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);
@@ -12244,6 +13136,9 @@ class Dep extends BaseService {
         this.set("collecting", false);
         resolve();
       });
+      idleTask.once("hight-level-finish", () => {
+        this.emit("ds-collected", nodes, deep);
+      });
     });
   }
   collectNode(node, target, depExtendedData = {}, deep = false) {
@@ -12291,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) => {
@@ -12538,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,
@@ -12906,57 +13802,39 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     stage2.on("rerender", () => {
       const node = editorService.get("node");
       if (!node) return;
-      collectIdle([node], true).then(() => {
-        afterUpdateNodes([node]);
-      });
+      collectIdle([node], true);
+      updateStage([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;
+  const getApp = () => {
+    const renderer = stage.value?.renderer;
+    if (!renderer) {
+      return void 0;
     }
-    if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    if (renderer.runtime) {
+      return renderer.runtime.getApp?.();
     }
-    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)
-        });
+    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 afterUpdateNodes = (nodes) => {
+  const updateDataSourceSchema = async () => {
     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 app = await getApp();
+    if (root && app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+    if (root?.dataSources) {
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
   const targetAddHandler = (target) => {
@@ -12985,17 +13863,58 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       delete root.dataSourceCondDeps[id];
     }
   };
-  const depCollectedHandler = () => {
+  const updateStage = (nodes, inDeps = false) => {
+    const root = editorService.get("root");
+    if (!root) return;
+    const update = (node) => stage.value?.update({
+      config: cloneDeep(node),
+      parentId: editorService.getParentById(node.id)?.id,
+      root: cloneDeep(root)
+    });
+    nodes.forEach((node) => {
+      const inDepsNodeId = [];
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        Object.keys(dep).forEach((id) => {
+          inDepsNodeId.push(id);
+        });
+      });
+      if (inDeps) {
+        if (inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      } else {
+        if (!inDepsNodeId.includes(node.id)) {
+          update(node);
+        }
+      }
+    });
+  };
+  const dsDepCollectedHandler = async (nodes, deep) => {
     const root = editorService.get("root");
     if (!root) return;
-    const app = getApp();
+    const app = await getApp();
     if (app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
     }
+    if (deep) {
+      nodes.forEach((node) => {
+        traverseNode(
+          node,
+          (node2) => {
+            updateStage([node2], true);
+          },
+          [],
+          true
+        );
+      });
+    } else {
+      updateStage(nodes, true);
+    }
   };
   depService.on("add-target", targetAddHandler);
   depService.on("remove-target", targetRemoveHandler);
-  depService.on("collected", depCollectedHandler);
+  depService.on("ds-collected", dsDepCollectedHandler);
   const initDataSourceDepTarget = (ds) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
     depService.addTarget(createDataSourceMethodTarget(ds, reactive({})));
@@ -13014,9 +13933,8 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     })
   );
   const nodeAddHandler = (nodes) => {
-    collectIdle(nodes, true).then(() => {
-      afterUpdateNodes(nodes);
-    });
+    collectIdle(nodes, true);
+    updateStage(nodes);
   };
   const nodeUpdateHandler = (data) => {
     const needRecollectNodes = [];
@@ -13037,11 +13955,10 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       }
     });
     if (needRecollectNodes.length) {
-      collectIdle(needRecollectNodes, true).then(() => {
-        afterUpdateNodes(needRecollectNodes);
-      });
+      collectIdle(needRecollectNodes, true);
+      updateStage(needRecollectNodes);
     } else if (normalNodes.length) {
-      afterUpdateNodes(normalNodes);
+      updateStage(normalNodes);
     }
   };
   const nodeRemoveHandler = (nodes) => {
@@ -13049,7 +13966,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   const historyChangeHandler = (page) => {
     collectIdle([page], true).then(() => {
-      updateDataSourceSchema([page], true);
+      updateDataSourceSchema();
     });
   };
   editorService.on("history-change", historyChangeHandler);
@@ -13069,11 +13986,12 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   };
   codeBlockService.on("addOrUpdate", codeBlockAddOrUpdateHandler);
   codeBlockService.on("remove", codeBlockRemoveHandler);
-  const dataSourceAddHandler = (config) => {
+  const dataSourceAddHandler = async (config) => {
     initDataSourceDepTarget(config);
-    getApp()?.dataSourceManager?.addDataSource(config);
+    const app = await getApp();
+    app?.dataSourceManager?.addDataSource(config);
   };
-  const dataSourceUpdateHandler = (config, { changeRecords }) => {
+  const dataSourceUpdateHandler = async (config, { changeRecords }) => {
     let needRecollectDep = false;
     for (const changeRecord of changeRecords) {
       if (!changeRecord.propPath) {
@@ -13091,11 +14009,12 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
         removeDataSourceTarget(config.id);
         initDataSourceDepTarget(config);
         collectIdle(root.items, true).then(() => {
-          updateDataSourceSchema(root?.items || [], true);
+          updateDataSourceSchema();
         });
       }
     } else if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      const app = await getApp();
+      app?.dataSourceManager?.updateSchema(root.dataSources);
     }
   };
   const removeDataSourceTarget = (id) => {
@@ -13108,7 +14027,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
     const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
     const nodes = getNodes(nodeIds, root?.items);
     collectIdle(nodes, false).then(() => {
-      updateDataSourceSchema(nodes, false);
+      updateDataSourceSchema();
     });
     removeDataSourceTarget(id);
   };
@@ -13118,7 +14037,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
   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);
@@ -13379,25 +14298,26 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
-    app.component("magic-code-editor", _sfc_main$Y);
+    app.component("magic-code-editor", _sfc_main$1r);
     app.component("m-fields-ui-select", _sfc_main$C);
-    app.component("m-fields-code-link", _sfc_main$W);
-    app.component("m-fields-vs-code", _sfc_main$X);
-    app.component("m-fields-code-select", _sfc_main$V);
-    app.component("m-fields-code-select-col", _sfc_main$T);
-    app.component("m-fields-event-select", _sfc_main$G);
-    app.component("m-fields-data-source-fields", _sfc_main$Q);
-    app.component("m-fields-data-source-mocks", _sfc_main$J);
-    app.component("m-fields-key-value", _sfc_main$E);
-    app.component("m-fields-data-source-input", _sfc_main$N);
-    app.component("m-fields-data-source-select", _sfc_main$I);
-    app.component("m-fields-data-source-methods", _sfc_main$L);
-    app.component("m-fields-data-source-method-select", _sfc_main$K);
-    app.component("m-fields-data-source-field-select", _sfc_main$O);
-    app.component("m-fields-page-fragment-select", _sfc_main$D);
-    app.component("m-fields-display-conds", _sfc_main$H);
-    app.component("m-fields-cond-op-select", _sfc_main$S);
+    app.component("m-fields-code-link", _sfc_main$1p);
+    app.component("m-fields-vs-code", _sfc_main$1q);
+    app.component("m-fields-code-select", _sfc_main$1o);
+    app.component("m-fields-code-select-col", _sfc_main$1m);
+    app.component("m-fields-event-select", _sfc_main$19);
+    app.component("m-fields-data-source-fields", _sfc_main$1j);
+    app.component("m-fields-data-source-mocks", _sfc_main$1c);
+    app.component("m-fields-key-value", _sfc_main$17);
+    app.component("m-fields-data-source-input", _sfc_main$1g);
+    app.component("m-fields-data-source-select", _sfc_main$1b);
+    app.component("m-fields-data-source-methods", _sfc_main$1e);
+    app.component("m-fields-data-source-method-select", _sfc_main$1d);
+    app.component("m-fields-data-source-field-select", _sfc_main$1h);
+    app.component("m-fields-page-fragment-select", _sfc_main$16);
+    app.component("m-fields-display-conds", _sfc_main$1a);
+    app.component("m-fields-cond-op-select", _sfc_main$1l);
+    app.component("m-form-style-setter", _sfc_main$D);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$V as CodeSelect, _sfc_main$T as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$S as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$O as DataSourceFieldSelect, _sfc_main$Q as DataSourceFields, _sfc_main$N as DataSourceInput, _sfc_main$K as DataSourceMethodSelect, _sfc_main$L as DataSourceMethods, _sfc_main$J as DataSourceMocks, _sfc_main$I as DataSourceSelect, _sfc_main$H as DisplayConds, DragType, _sfc_main$G as EventSelect, Fixed2Other, _sfc_main$R as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Z as Icon, IdleTask, KeyBindingCommand, _sfc_main$E as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$D as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$Y as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1f as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1o as CodeSelect, _sfc_main$1m as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1l as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1h as DataSourceFieldSelect, _sfc_main$1j as DataSourceFields, _sfc_main$1g as DataSourceInput, _sfc_main$1d as DataSourceMethodSelect, _sfc_main$1e as DataSourceMethods, _sfc_main$1c as DataSourceMocks, _sfc_main$1b as DataSourceSelect, _sfc_main$1a as DisplayConds, DragType, _sfc_main$19 as EventSelect, Fixed2Other, _sfc_main$1k as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1s as Icon, IdleTask, KeyBindingCommand, _sfc_main$17 as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$16 as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$D as StyleSetter, _sfc_main$1r as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };