@tmagic/editor 1.5.2 → 1.5.4

package/dist/tmagic-editor.umd.cjs

@@ -23,8 +23,8 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$y = ["src"];
-  const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$10 = ["src"];
+  const _sfc_main$1s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -48,7 +48,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$y)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$10)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,10 +76,14 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$x = {
+  const _hoisted_1$$ = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$o = {
+    ref: "codeEditor",
+    class: "magic-code-editor-content"
+  };
+  const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -132,7 +136,7 @@
       let vsDiffEditor = null;
       const values = vue.ref("");
       const loading = vue.ref(false);
-      const codeEditor = vue.useTemplateRef("codeEditor");
+      const codeEditorEl = vue.useTemplateRef("codeEditor");
       const resizeObserver = new globalThis.ResizeObserver(
         lodashEs.throttle(() => {
           vsEditor?.layout();
@@ -153,7 +157,7 @@
       };
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
       const init = async () => {
-        if (!codeEditor.value) return;
+        if (!codeEditorEl.value) return;
         const options = {
           value: values.value,
           language: props.language,
@@ -161,14 +165,14 @@
           ...props.options
         };
         if (props.type === "diff") {
-          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditor.value, options);
+          vsDiffEditor = monaco__namespace.editor.createDiffEditor(codeEditorEl.value, options);
         } else {
-          vsEditor = monaco__namespace.editor.create(codeEditor.value, options);
+          vsEditor = monaco__namespace.editor.create(codeEditorEl.value, options);
         }
         setEditorValue(props.initValues, props.modifiedValues);
         loading.value = false;
         emit("initd", vsEditor);
-        codeEditor.value.addEventListener("keydown", (e) => {
+        codeEditorEl.value.addEventListener("keydown", (e) => {
           if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
             e.preventDefault();
             e.stopPropagation();
@@ -186,7 +190,7 @@
             }
           });
         }
-        resizeObserver.observe(codeEditor.value);
+        resizeObserver.observe(codeEditorEl.value);
       };
       vue.watch(
         () => props.initValues,
@@ -236,7 +240,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -252,15 +256,11 @@
                 onClick: fullScreenHandler
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.FullScreen) }, null, 8, ["icon"])
+                  vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.FullScreen) }, null, 8, ["icon"])
                 ]),
                 _: 1
               }),
-              vue.createElementVNode("div", {
-                ref_key: "codeEditor",
-                ref: codeEditor,
-                class: "magic-code-editor-content"
-              }, null, 512)
+              vue.createElementVNode("div", _hoisted_2$o, null, 512)
             ], 6)
           ], 8, ["disabled"]))
         ]);
@@ -268,7 +268,7 @@
     }
   });
 
-  const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsVsCode"
     },
@@ -291,7 +291,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$1r, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -306,7 +306,7 @@
     }
   });
 
-  const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeLink"
     },
@@ -385,7 +385,7 @@
     }
   });
 
-  const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelect"
     },
@@ -528,303 +528,60 @@
     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"
             ]
           }
         ]
@@ -2209,8 +1966,8 @@
       if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
       const node = vue.toRaw(info.node);
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
-      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-        if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+      newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue, key, object, source) => {
+        if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) {
           return "";
         }
         if (lodashEs.isObject(srcValue) && Array.isArray(objValue)) {
@@ -3073,13 +2830,14 @@
   };
   class IdleTask extends events.EventEmitter {
     taskList = [];
+    hightLevelTaskList = [];
     taskHandle = null;
     constructor() {
       super();
       this.setMaxListeners(1e3);
     }
-    enqueueTask(taskHandler, taskData) {
-      this.taskList.push({
+    enqueueTask(taskHandler, taskData, isHightLevel = false) {
+      (isHightLevel ? this.hightLevelTaskList : this.taskList).push({
         handler: taskHandler,
         data: taskData
       });
@@ -3088,6 +2846,10 @@
       }
     }
     clearTasks() {
+      if (this.taskHandle) {
+        globalThis.cancelIdleCallback(this.taskHandle);
+      }
+      this.hightLevelTaskList = [];
       this.taskList = [];
     }
     on(eventName, listener) {
@@ -3100,7 +2862,8 @@
       return super.emit(eventName, ...args);
     }
     runTaskQueue(deadline) {
-      while (deadline.timeRemaining() > 0 && this.taskList.length) {
+      const { hightLevelTaskList, taskList } = this;
+      while (deadline.timeRemaining() > 0 && taskList.length) {
         const timeRemaining = deadline.timeRemaining();
         let times = 0;
         if (timeRemaining <= 5) {
@@ -3113,16 +2876,19 @@
           times = 600;
         }
         for (let i = 0; i < times; i++) {
-          const task = this.taskList.shift();
+          const task = hightLevelTaskList.length > 0 ? hightLevelTaskList.shift() : taskList.shift();
           if (task) {
             task.handler(task.data);
           }
-          if (this.taskList.length === 0) {
+          if (hightLevelTaskList.length === 0 && taskList.length === 0) {
             break;
           }
         }
       }
-      if (this.taskList.length) {
+      if (!hightLevelTaskList.length) {
+        this.emit("hight-level-finish");
+      }
+      if (hightLevelTaskList.length || taskList.length) {
         this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 300 });
       } else {
         this.taskHandle = 0;
@@ -3268,7 +3034,7 @@
     });
   };
 
-  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3284,7 +3050,7 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const form = vue.useTemplateRef("form");
+      const formRef = vue.useTemplateRef("form");
       const getFormConfig = (items = []) => [
         {
           type: "fieldset",
@@ -3307,7 +3073,7 @@
       );
       const onParamsChangeHandler = async (v, eventData) => {
         try {
-          const value = await form.value?.submitForm(true);
+          const value = await formRef.value?.submitForm(true);
           emit("change", value, eventData);
         } catch (e) {
           error(e);
@@ -3315,8 +3081,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.MForm), {
-          ref_key: "form",
-          ref: form,
+          ref: "form",
           config: codeParamsConfig.value,
           "init-values": _ctx.model,
           disabled: _ctx.disabled,
@@ -3328,9 +3093,9 @@
     }
   });
 
-  const _hoisted_1$w = { class: "m-fields-code-select-col" };
-  const _hoisted_2$i = { class: "code-select-container" };
-  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$_ = { class: "m-fields-code-select-col" };
+  const _hoisted_2$n = { class: "code-select-container" };
+  const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
     },
@@ -3426,8 +3191,8 @@
         eventBus?.emit("edit-code", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
-          vue.createElementVNode("div", _hoisted_2$i, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
+          vue.createElementVNode("div", _hoisted_2$n, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: selectConfig,
@@ -3442,14 +3207,14 @@
               onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Z, {
+                vue.createVNode(_sfc_main$1s, {
                   icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                 }, null, 8, ["icon"])
               ]),
               _: 1
             }, 8, ["size"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$1n, {
             name: "params",
             key: _ctx.model[_ctx.name],
             model: _ctx.model,
@@ -3462,7 +3227,7 @@
     }
   });
 
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCondOpSelect"
     },
@@ -3548,7 +3313,11 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$Z = {
+    ref: "title",
+    class: "m-editor-float-box-title"
+  };
+  const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: /* @__PURE__ */ vue.mergeModels({
       position: { default: () => ({ left: 0, top: 0 }) },
@@ -3568,8 +3337,8 @@
       const height = vue.useModel(__props, "height");
       const visible = vue.useModel(__props, "visible");
       const props = __props;
-      const target = vue.useTemplateRef("target");
-      const titleEl = vue.useTemplateRef("titleEl");
+      const targetEl = vue.useTemplateRef("target");
+      const titleEl = vue.useTemplateRef("title");
       const zIndex = designPlugin.useZIndex();
       const curZIndex = vue.ref(0);
       const titleHeight = vue.ref(0);
@@ -3577,8 +3346,8 @@
         if (height.value) {
           return height.value - titleHeight.value;
         }
-        if (target.value) {
-          return target.value.clientHeight - titleHeight.value;
+        if (targetEl.value) {
+          return targetEl.value.clientHeight - titleHeight.value;
         }
         return "auto";
       });
@@ -3600,7 +3369,7 @@
       const initMoveable = () => {
         moveable = new VanillaMoveable(globalThis.document.body, {
           className: "m-editor-floating-box-moveable",
-          target: target.value,
+          target: targetEl.value,
           draggable: true,
           resizable: true,
           edge: true,
@@ -3634,7 +3403,7 @@
           if (visible2) {
             await vue.nextTick();
             curZIndex.value = zIndex.nextZIndex();
-            const targetRect = target.value?.getBoundingClientRect();
+            const targetRect = targetEl.value?.getBoundingClientRect();
             if (targetRect) {
               width.value = targetRect.width;
               height.value = targetRect.height;
@@ -3670,10 +3439,10 @@
       const nextZIndex = () => {
         curZIndex.value = zIndex.nextZIndex();
       };
-      vue.provide("parentFloating", target);
+      vue.provide("parentFloating", targetEl);
       __expose({
         bodyHeight,
-        target,
+        target: targetEl,
         titleEl
       });
       return (_ctx, _cache) => {
@@ -3682,17 +3451,12 @@
           to: "body"
         }, [
           vue.createElementVNode("div", {
-            ref_key: "target",
-            ref: target,
+            ref: "target",
             class: "m-editor-float-box",
             style: vue.normalizeStyle({ ...style.value, zIndex: curZIndex.value }),
             onMousedown: nextZIndex
           }, [
-            vue.createElementVNode("div", {
-              ref_key: "titleEl",
-              ref: titleEl,
-              class: "m-editor-float-box-title"
-            }, [
+            vue.createElementVNode("div", _hoisted_1$Z, [
               vue.renderSlot(_ctx.$slots, "title", {}, () => [
                 vue.createElementVNode("span", null, vue.toDisplayString(_ctx.title), 1)
               ]),
@@ -3703,7 +3467,7 @@
                   onClick: closeHandler
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                    vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
                   ]),
                   _: 1
                 })
@@ -3724,7 +3488,7 @@
   const useCodeBlockEdit = (codeBlockService) => {
     const codeConfig = vue.ref();
     const codeId = vue.ref();
-    const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
+    const codeBlockEditorRef = vue.useTemplateRef("codeBlockEditor");
     const createCodeBlock = async () => {
       if (!codeBlockService) {
         designPlugin.tMagicMessage.error("新增代码块失败");
@@ -3739,7 +3503,7 @@
       };
       codeId.value = await codeBlockService.getUniqueId();
       await vue.nextTick();
-      codeBlockEditor.value?.show();
+      codeBlockEditorRef.value?.show();
     };
     const editCode = async (id) => {
       const codeBlock = await codeBlockService?.getCodeContentById(id);
@@ -3757,7 +3521,7 @@
       };
       codeId.value = id;
       await vue.nextTick();
-      codeBlockEditor.value?.show();
+      codeBlockEditorRef.value?.show();
     };
     const deleteCode = async (key) => {
       codeBlockService?.deleteCodeDslByIds([key]);
@@ -3765,12 +3529,12 @@
     const submitCodeBlockHandler = async (values) => {
       if (!codeId.value) return;
       await codeBlockService?.setCodeDslById(codeId.value, values);
-      codeBlockEditor.value?.hide();
+      codeBlockEditorRef.value?.hide();
     };
     return {
       codeId,
       codeConfig,
-      codeBlockEditor,
+      codeBlockEditor: codeBlockEditorRef,
       createCodeBlock,
       editCode,
       deleteCode,
@@ -3778,7 +3542,7 @@
     };
   };
 
-  const state = vue.reactive({
+  const state = vue.shallowReactive({
     uiSelectMode: false,
     showSrc: false,
     showStylePanel: true,
@@ -4226,9 +3990,9 @@
     };
   };
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
     },
@@ -4492,12 +4256,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Y, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$h, [
+          vue.createElementVNode("div", _hoisted_2$m, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4522,7 +4286,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$R, {
+          vue.createVNode(_sfc_main$1k, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -4545,7 +4309,7 @@
             ]),
             _: 1
           }, 8, ["visible", "width", "height", "title", "position"]),
-          vue.createVNode(_sfc_main$R, {
+          vue.createVNode(_sfc_main$1k, {
             visible: addFromJsonDialogVisible.value,
             "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
             width: width.value,
@@ -4570,8 +4334,8 @@
     }
   });
 
-  const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$X = { class: "m-editor-data-source-field-select" };
+  const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
       value: {},
@@ -4652,7 +4416,7 @@
         eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$u, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
@@ -4720,7 +4484,7 @@
                 onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Z, {
+                  vue.createVNode(_sfc_main$1s, {
                     icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                   }, null, 8, ["icon"])
                 ]),
@@ -4734,8 +4498,8 @@
     }
   });
 
-  const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$W = { class: "m-fields-data-source-field-select" };
+  const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
     },
@@ -4836,8 +4600,8 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
-          showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$P, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
+          showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (vue.openBlock(), vue.createBlock(_sfc_main$1i, {
             key: 0,
             "model-value": _ctx.model[_ctx.name],
             disabled: _ctx.disabled,
@@ -4872,7 +4636,7 @@
                 onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+                  vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
                 ]),
                 _: 1
               }, 8, ["type", "size"])
@@ -4884,10 +4648,10 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
     },
@@ -4908,11 +4672,11 @@
       const props = __props;
       const emit = __emit;
       const { dataSourceService } = vue.inject("services") || {};
-      const autocomplete = vue.useTemplateRef("autocomplete");
+      const autocompleteRef = vue.useTemplateRef("autocomplete");
       const isFocused = vue.ref(false);
       const state = vue.ref("");
       const displayState = vue.ref([]);
-      const input = vue.computed(() => autocomplete.value?.inputRef?.input);
+      const input = vue.computed(() => autocompleteRef.value?.inputRef?.input);
       const dataSources = vue.computed(() => dataSourceService?.get("dataSources") || []);
       const setDisplayState = () => {
         displayState.value = getDisplayField(dataSources.value, state.value);
@@ -4931,7 +4695,7 @@
         const focusOffset = selection?.focusOffset || 0;
         isFocused.value = true;
         await vue.nextTick();
-        autocomplete.value?.focus();
+        autocompleteRef.value?.focus();
         if (focusOffset && input.value) {
           input.value.setSelectionRange(anchorOffset, focusOffset);
         }
@@ -5067,8 +4831,7 @@
           {
             key: 0,
             class: "tmagic-design-auto-complete",
-            ref_key: "autocomplete",
-            ref: autocomplete,
+            ref: "autocomplete",
             modelValue: state.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
           },
@@ -5087,12 +4850,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$s, [
+            vue.createElementVNode("div", _hoisted_1$V, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$g, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$l, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -5104,7 +4867,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$4, [
+            vue.createElementVNode("div", _hoisted_3$8, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -5122,7 +4885,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$Z, {
+              vue.createVNode(_sfc_main$1s, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -5133,11 +4896,11 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -5163,12 +4926,12 @@
       const { height: codeBlockEditorHeight } = useEditorContentHeight();
       const difVisible = vue.ref(false);
       const { rect: windowRect } = useWindowRect();
-      const magicVsEditor = vue.useTemplateRef("magicVsEditor");
+      const magicVsEditorRef = vue.useTemplateRef("magicVsEditor");
       const diffChange = () => {
-        if (!magicVsEditor.value || !formBox.value?.form) {
+        if (!magicVsEditorRef.value || !formBox.value?.form) {
           return;
         }
-        formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+        formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
         difVisible.value = false;
       };
       const defaultParamColConfig = {
@@ -5310,7 +5073,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createVNode(_sfc_main$R, {
+          vue.createVNode(_sfc_main$1k, {
             visible: boxVisible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
             width: width.value,
@@ -5364,7 +5127,7 @@
               fullscreen: ""
             }, {
               footer: vue.withCtx(() => [
-                vue.createElementVNode("span", _hoisted_4$3, [
+                vue.createElementVNode("span", _hoisted_4$5, [
                   vue.createVNode(vue.unref(designPlugin.TMagicButton), {
                     size: "small",
                     onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
@@ -5387,8 +5150,8 @@
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$r, [
-                  vue.createElementVNode("div", _hoisted_2$f, [
+                vue.createElementVNode("div", _hoisted_1$U, [
+                  vue.createElementVNode("div", _hoisted_2$k, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5399,7 +5162,7 @@
                       _: 1
                     })
                   ]),
-                  vue.createElementVNode("div", _hoisted_3$3, [
+                  vue.createElementVNode("div", _hoisted_3$7, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "success"
@@ -5411,10 +5174,9 @@
                     })
                   ])
                 ]),
-                difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+                difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
                   key: 0,
-                  ref_key: "magicVsEditor",
-                  ref: magicVsEditor,
+                  ref: "magicVsEditor",
                   type: "diff",
                   language: "json",
                   initValues: _ctx.content.content,
@@ -5430,9 +5192,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
     },
@@ -5453,7 +5215,7 @@
       const props = __props;
       const emit = __emit;
       const codeConfig = vue.ref();
-      const codeBlockEditor = vue.useTemplateRef("codeBlockEditor");
+      const codeBlockEditorRef = vue.useTemplateRef("codeBlockEditor");
       let editIndex = -1;
       const methodColumns = [
         {
@@ -5492,7 +5254,7 @@
                 };
                 editIndex = index;
                 vue.nextTick(() => {
-                  codeBlockEditor.value?.show();
+                  codeBlockEditorRef.value?.show();
                 });
               }
             },
@@ -5518,7 +5280,7 @@
         };
         editIndex = -1;
         vue.nextTick(() => {
-          codeBlockEditor.value?.show();
+          codeBlockEditorRef.value?.show();
         });
       };
       const submitCodeHandler = (value, data) => {
@@ -5550,15 +5312,15 @@
         }
         editIndex = -1;
         codeConfig.value = void 0;
-        codeBlockEditor.value?.hide();
+        codeBlockEditorRef.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$T, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$e, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5572,10 +5334,9 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1f, {
             key: 0,
-            ref_key: "codeBlockEditor",
-            ref: codeBlockEditor,
+            ref: "codeBlockEditor",
             disabled: _ctx.disabled,
             content: codeConfig.value,
             "is-data-source": true,
@@ -5587,9 +5348,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
     },
@@ -5675,8 +5436,8 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
-          vue.createElementVNode("div", _hoisted_2$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5695,7 +5456,7 @@
                   onClick: editCodeHandler
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(_sfc_main$Z, {
+                    vue.createVNode(_sfc_main$1s, {
                       icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                     }, null, 8, ["icon"])
                   ]),
@@ -5705,7 +5466,7 @@
               _: 1
             }, 8, ["content"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$U, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$1n, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -5719,9 +5480,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
     },
@@ -5810,7 +5571,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$Y,
+          component: _sfc_main$1r,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -5925,12 +5686,12 @@
       const parentFloating = vue.inject("parentFloating", vue.ref(null));
       const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$R, [
           vue.createVNode(vue.unref(tablePlugin.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$c, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5944,7 +5705,7 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.createVNode(_sfc_main$R, {
+          vue.createVNode(_sfc_main$1k, {
             visible: addDialogVisible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
             width: width.value,
@@ -5971,8 +5732,8 @@
     }
   });
 
-  const _hoisted_1$n = { class: "m-fields-data-source-select" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$Q = { class: "m-fields-data-source-select" };
+  const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
     },
@@ -6029,7 +5790,7 @@
         eventBus?.emit("edit-data-source", id);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -6051,7 +5812,7 @@
                 onClick: editHandler
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_sfc_main$Z, {
+                  vue.createVNode(_sfc_main$1s, {
                     icon: !notEditable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View)
                   }, null, 8, ["icon"])
                 ]),
@@ -6065,7 +5826,7 @@
     }
   });
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "m-fields-display-conds"
     },
@@ -6097,7 +5858,8 @@
           {
             type: "table",
             name: "cond",
-            operateColWidth: 50,
+            operateColWidth: 100,
+            enableToggleMode: false,
             items: [
               parentFields.value.length ? {
                 type: "cascader",
@@ -6196,12 +5958,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsEventSelect"
     },
@@ -6477,7 +6239,7 @@
       const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             name: "events",
@@ -6486,7 +6248,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$g, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6538,29 +6300,29 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$l, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$O, _cache[0] || (_cache[0] = [
           vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
         ]));
       };
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-key-value" };
-  const _hoisted_2$a = { key: 0 };
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$N = { class: "m-fields-key-value" };
+  const _hoisted_2$f = { key: 0 };
+  const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
     },
@@ -6622,8 +6384,8 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$N, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$f, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: "m-fields-key-value-item",
@@ -6672,7 +6434,7 @@
               _: 1
             }, 8, ["size", "disabled", "icon"])
           ])) : vue.createCommentVNode("", true),
-          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+          _ctx.config.advanced && showCode.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
             key: 1,
             height: "200px",
             "init-values": _ctx.model[_ctx.name],
@@ -6688,7 +6450,7 @@
             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"])) : vue.createCommentVNode("", true)
         ]);
@@ -6696,9 +6458,9 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-page-fragment-select" };
-  const _hoisted_2$9 = { class: "page-fragment-select-container" };
-  const _sfc_main$D = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
     },
@@ -6744,8 +6506,8 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
-          vue.createElementVNode("div", _hoisted_2$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$M, [
+          vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6753,7 +6515,7 @@
               size: _ctx.size,
               onChange: changeHandler
             }, null, 8, ["model", "size"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
               key: 0,
               class: "icon",
               icon: vue.unref(iconsVue.Edit),
@@ -6765,16 +6527,11 @@
     }
   });
 
-  const _hoisted_1$i = {
-    key: 1,
-    class: "m-fields-ui-select",
-    style: { "display": "flex" }
-  };
-  const _sfc_main$C = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    __name: "BackgroundPosition",
     props: {
       config: {},
       model: {},
@@ -6788,43 +6545,1173 @@
     },
     emits: ["change"],
     setup(__props, { emit: __emit }) {
-      const props = __props;
       const emit = __emit;
-      const services = vue.inject("services");
-      const mForm = vue.inject("mForm");
-      const val = vue.computed(() => props.model[props.name]);
-      const uiSelectMode = vue.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 = utils.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 = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$L, [
+          vue.createElementVNode("div", _hoisted_2$d, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (item, index) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
+                key: index,
+                link: "",
+                class: vue.normalizeClass(_ctx.model[_ctx.name] === item.value && "btn-active"),
+                onClick: ($event) => changeHandler(item.value)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass(["position-icon", item.class, _ctx.model[_ctx.name] === item.value && "active"])
+                  }, null, 2)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]);
+            }), 128))
+          ]),
+          vue.createElementVNode("div", _hoisted_3$6, [
+            vue.createVNode(vue.unref(designPlugin.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$K, _cache[0] || (_cache[0] = [
+      vue.createStaticVNode("<path d=\"M884.736 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C696.32 311.296 712.704 327.68 733.184 327.68l147.456 0c20.48 0 36.864-16.384 36.864-36.864L917.504 139.264C921.6 118.784 905.216 102.4 884.736 102.4zM884.736 290.816l-147.456 0L737.28 139.264l147.456 0L884.736 290.816z\"></path><path d=\"M884.736 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 712.704 905.216 696.32 884.736 696.32zM884.736 884.736l-147.456 0 0-147.456 147.456 0L884.736 884.736z\"></path><path d=\"M884.736 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 417.792 905.216 401.408 884.736 401.408zM884.736 585.728l-147.456 0 0-147.456 147.456 0L884.736 585.728z\"></path><path d=\"M585.728 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 417.792 606.208 401.408 585.728 401.408zM585.728 585.728l-147.456 0 0-147.456 147.456 0L585.728 585.728z\"></path><path d=\"M585.728 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864L622.592 139.264C622.592 118.784 606.208 102.4 585.728 102.4zM585.728 290.816l-147.456 0L438.272 139.264l147.456 0L585.728 290.816z\"></path><path d=\"M585.728 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 712.704 606.208 696.32 585.728 696.32zM585.728 884.736l-147.456 0 0-147.456 147.456 0L585.728 884.736z\"></path><path d=\"M290.816 696.32 139.264 696.32c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 712.704 311.296 696.32 290.816 696.32zM290.816 884.736 139.264 884.736l0-147.456 147.456 0L286.72 884.736z\"></path><path d=\"M290.816 401.408 139.264 401.408c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 417.792 311.296 401.408 290.816 401.408zM290.816 585.728 139.264 585.728l0-147.456 147.456 0L286.72 585.728z\"></path><path d=\"M290.816 102.4 139.264 102.4c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C102.4 311.296 118.784 327.68 139.264 327.68l147.456 0C311.296 327.68 327.68 311.296 327.68 290.816L327.68 139.264C327.68 118.784 311.296 102.4 290.816 102.4zM290.816 290.816 139.264 290.816 139.264 139.264l147.456 0L286.72 290.816z\"></path>", 9)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$J, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        d: "M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z",
+        fill: "#333333"
+      }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$I, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        d: "M170.666667 227.555556v227.555555h682.666666V227.555556H170.666667z m625.777777 56.888888v113.777778H227.555556V284.444444h568.888888zM170.666667 568.888889v227.555555h682.666666v-227.555555H170.666667z m625.777777 56.888889v113.777778H227.555556v-113.777778h568.888888zM56.888889 56.888889h910.222222v56.888889H56.888889zM56.888889 910.222222h910.222222v56.888889H56.888889z",
+        fill: "#333333"
+      }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", {
+        d: "M912.526651 867.741144 555.540144 510.712681l356.986507-357.000833c11.171434-11.18576 11.171434-29.257348 0-40.443108-11.20111-11.18576-29.272697-11.18576-40.444131 0L515.096013 470.267527 158.096203 113.267716c-11.187807-11.159154-29.258371-11.159154-40.444131 0-11.186783 11.186783-11.186783 29.286 0 40.47176L474.623229 510.712681 117.623419 867.741144c-11.159154 11.172457-11.159154 29.216415 0 40.443108 11.18576 11.17348 29.284977 11.17348 40.47176 0l357.000833-357.027439 356.985484 357.027439c11.171434 11.17348 29.243021 11.17348 40.444131 0C923.698085 896.957559 923.725714 878.913601 912.526651 867.741144z",
+        fill: "#5D5D5D"
+      }, null, -1)
+    ])))
+  }
+  const BackgroundNoRepeat = /*#__PURE__*/_export_sfc(_sfc_main$11, [['render',_sfc_render$h]]);
+
+  const _sfc_main$10 = /* @__PURE__ */ vue.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: vue.markRaw(BackgroundRepeat), tooltip: "垂直和水平方向重复 repeat" },
+              { value: "repeat-x", icon: vue.markRaw(BackgroundRepeatX), tooltip: "水平方向重复 repeat-x" },
+              { value: "repeat-y", icon: vue.markRaw(BackgroundRepeatY), tooltip: "垂直方向重复 repeat-y" },
+              { value: "no-repeat", icon: vue.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 vue.openBlock(), vue.createBlock(vue.unref(formPlugin.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1)
+    ])))
+  }
+  const AlignRight = /*#__PURE__*/_export_sfc(_sfc_main$Z, [['render',_sfc_render$e]]);
+
+  const _sfc_main$Y = /* @__PURE__ */ vue.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: vue.markRaw(AlignLeft), tooltip: "左对齐 row" },
+              { value: "center", icon: vue.markRaw(AlignCenter), tooltip: "居中对齐 center" },
+              { value: "right", icon: vue.markRaw(AlignRight), tooltip: "右对齐 right" }
+            ]
+          }
+        ]
+      };
+      const change = (value, eventData) => {
+        emit("change", value, eventData);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(formPlugin.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__ */ vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
+            return vue.createElementVNode("div", {
+              key: index,
+              class: vue.normalizeClass(item.class)
+            }, [
+              item.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("span", _hoisted_3$5, [
+                vue.withDirectives(vue.createElementVNode("input", {
+                  "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
+                  title: _ctx.model[item.name],
+                  onChange: ($event) => change($event, item.name),
+                  placeholder: "0"
+                }, null, 40, _hoisted_4$4), [
+                  [vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-96 64a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V288a32 32 0 0 1 32-32h704z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192zM352 256v512H160V256h192z m256 0v512h-192V256h192z m256 0v512h-192V256h192z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$A, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M787.616 651.36a142.72 142.72 0 0 0 52.864 31.904 205.504 205.504 0 0 0 67.264 10.848 245.76 245.76 0 0 0 38.784-2.4c9.504-1.6 19.36-4 30.208-7.04 8.16-2.24 15.968-5.12 23.36-8.32l23.392-10.816V587.52h-8.736c-3.968 3.424-8.96 7.648-15.104 12.544a190.272 190.272 0 0 1-19.936 13.504 120.32 120.32 0 0 1-27.616 12.544 102.528 102.528 0 0 1-62.72-0.576 80 80 0 0 1-29.824-17.088 89.28 89.28 0 0 1-21.664-32.512c-5.696-13.664-8.64-30.784-8.64-51.296 0-19.744 2.72-36.384 7.968-50.08 5.248-13.664 12.384-24.896 20.992-33.056 9.12-8.832 18.816-14.816 29.632-18.816a101.824 101.824 0 0 1 63.68-0.736c9.408 3.136 18.08 7.04 26.112 11.68 13.024 7.808 25.28 16.768 36.672 26.784H1024v-78.72c-6.08-2.88-13.12-6.08-21.12-9.6a205.984 205.984 0 0 0-57.152-15.36 270.016 270.016 0 0 0-37.056-2.304c-24.864 0-47.744 4-68.704 11.84-20.992 7.776-38.432 18.784-52.64 33.6a144.256 144.256 0 0 0-33.632 54.176 207.68 207.68 0 0 0-12.48 70.176c0 27.84 3.968 52.352 12.16 73.568a146.08 146.08 0 0 0 34.176 53.184l0.064 0.416z m-186.112 34.656a122.912 122.912 0 0 0 42.784-21.504c11.2-8.32 20.224-19.296 26.24-31.936 6.56-13.664 9.888-28.704 9.664-43.904 0-22.784-6.272-41.024-18.912-54.72-12.544-13.92-29.664-23.04-51.104-27.36v-2.304c14.4-6.24 26.688-16.448 35.52-29.408 8.384-12.544 12.544-27.008 12.544-43.52 0-14.24-2.944-26.784-9.12-37.6a65.696 65.696 0 0 0-27.936-26.24 117.44 117.44 0 0 0-36.48-12.096A437.312 437.312 0 0 0 526.656 352h-127.552v340.384h143.392c23.84 0 43.52-2.112 59.008-6.4z m-118.112-271.584h7.968c16.544 0 29.472 0.128 38.656 0.352 9.248 0.576 16.864 1.728 23.04 4a26.24 26.24 0 0 1 14.4 13.12c2.656 5.28 4.064 11.072 4.128 16.96 0.16 6.656-1.056 13.248-3.52 19.392a28.064 28.064 0 0 1-15.04 13.696c-7.04 2.912-14.56 4.48-22.208 4.576-9.472 0.32-20.864 0.544-34.24 0.544h-13.184v-72.64z m6.144 215.52h-6.144v-84.8h18.464c12.64 0 24.736 0 36.384 0.256 9.216-0.16 18.432 0.896 27.36 3.2 9.696 2.848 16.544 7.232 20.512 13.12 4 5.92 6.08 14.24 6.08 25.088 0 8.192-1.728 15.488-4.992 21.824-3.232 6.336-9.696 11.392-18.24 15.392-8.544 4-18.24 5.696-28.48 6.272-10.304 0.224-27.392 0.224-51.328 0.224l0.384-0.576z m-378.56-6.016h124.672l23.36 68.416H348.8L224.32 353.728H124.416L0 692.384h87.52l23.488-68.416-0.064-0.032z m62.336-183.552l41.472 121.44h-82.88l41.408-121.44z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-131.936 158.496c65.984 1.824 109.024 32.512 129.184 92.064l-65.952 15.136-1.856-5.664c-9.984-27.52-30.432-42.112-61.376-43.84-46.72 2.784-71.456 35.296-74.208 97.6 1.856 63.2 26.56 96.64 74.24 100.32 37.536-0.928 59.52-23.36 65.92-67.328L960 559.36l-1.792 7.232c-16.96 63.872-60.352 95.84-130.144 95.84-93.44-4.608-142.464-56.8-147.04-156.672 4.576-98.048 53.6-149.792 147.04-155.296z m-568.928 4.128l114.08 302.336H297.6l-22.016-65.984H160.192L138.24 656.96H64l112.672-302.336h82.464z m278.976 0l7.68 0.32c62.816 3.36 96 27.104 99.52 71.136 0 35.744-19.712 59.552-59.104 71.456 42.144 9.184 65.952 32.544 71.456 70.08 0 59.552-37.568 89.344-112.672 89.344h-148.416v-302.336h141.536z m-4.128 173.152H465.28v81.088h67.328c33.92 0 51.296-13.76 52.224-41.248-2.752-25.632-19.68-38.912-50.848-39.84zM217.92 408.224h-1.376l-0.96 7.36c-1.184 7.232-3.168 13.92-5.92 20.128l-34.336 103.04h87.936l-38.464-104.416-2.624-9.024c-1.6-5.888-3.04-11.584-4.256-17.088z m309.184-2.752H465.28v71.456h61.824c29.344-0.928 44.448-13.76 45.376-38.464-0.96-22.016-16.032-32.992-45.376-32.992z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M931.37 477.14c-43.94-69.49-93.39-125.03-147.99-166.35L663.31 441.46c8.79 21.36 13.63 44.91 13.63 69.62 0 96.27-73.84 174.32-164.95 174.32-21.63 0-42.28-4.39-61.32-12.47l-94.09 102.52a455.097 455.097 0 0 0 155.41 26.2c172.62 0 312.43-85.54 419.59-256.63 12.83-20.43 12.72-47.45-0.21-67.88zM795.52 127.99L682.24 252.82C627.73 231 570.1 220.04 512.11 220.5c-171.15 0-310.99 85.66-419.48 256.75-12.93 20.43-13.04 47.33-0.2 67.78 46.95 75.15 100.3 133.68 160.01 175.82L131.9 853.65l38.9 42.36 663.6-725.76-38.88-42.26zM519.68 438.37c-3.72-0.59-7.46-0.81-11.27-0.81-45.63 0-82.43 39.03-82.43 87.16 0 4.97 0.42 9.81 1.14 14.54l-57.15 60.14-5.92 8.33c-13.15-24.94-20.5-53.68-20.5-84.28 0-96.3 73.84-174.45 164.95-174.45 27.2 0 52.76 6.93 75.4 19.29l-64.22 70.08z m52.05 135.53c21.74-23.26 27.17-55.48 16.31-81.39l-96.42 103.16c26.59 9.08 58.38 1.48 80.11-21.77z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
+      vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
+      vue.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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1)
+    ])))
+  }
+  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 (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
+      vue.createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1)
+    ])))
+  }
+  const JustifyContentSpaceBetween = /*#__PURE__*/_export_sfc(_sfc_main$J, [['render',_sfc_render]]);
+
+  const _sfc_main$I = /* @__PURE__ */ vue.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: vue.markRaw(DisplayInline), tooltip: "内联布局 inline" },
+              { value: "flex", icon: vue.markRaw(DisplayFlex), tooltip: "弹性布局 flex" },
+              { value: "block", icon: vue.markRaw(DisplayBlock), tooltip: "块级布局 block" },
+              { value: "inline-block", icon: vue.markRaw(DisplayInlineBlock), tooltip: "内联块布局 inline-block" },
+              { value: "none", icon: vue.markRaw(DisplayNone), tooltip: "隐藏 none" }
+            ]
+          },
+          {
+            name: "flexDirection",
+            text: "主轴方向",
+            type: "radioGroup",
+            childType: "button",
+            labelWidth: "68px",
+            options: [
+              { value: "row", icon: vue.markRaw(FlexDirectionRow), tooltip: "水平方向 起点在左侧 row" },
+              { value: "row-reverse", icon: vue.markRaw(FlexDirectionRowReverse), tooltip: "水平方向 起点在右侧 row-reverse" },
+              { value: "column", icon: vue.markRaw(FlexDirectionColumn), tooltip: "垂直方向 起点在上沿 column" },
+              {
+                value: "column-reverse",
+                icon: vue.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: vue.markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+              { value: "flex-end", icon: vue.markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+              { value: "center", icon: vue.markRaw(JustifyContentCenter), tooltip: "居中 center" },
+              { value: "space-between", icon: vue.markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+              { value: "space-around", icon: vue.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: vue.markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+              { value: "flex-end", icon: vue.markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+              { value: "center", icon: vue.markRaw(JustifyContentCenter), tooltip: "居中 center" },
+              { value: "space-between", icon: vue.markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+              { value: "space-around", icon: vue.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 vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(formPlugin.MContainer), {
+            config,
+            model: _ctx.values,
+            onChange: change
+          }, null, 8, ["model"]),
+          vue.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__ */ vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
+            return vue.createElementVNode("div", {
+              key: index,
+              class: vue.normalizeClass(item.class)
+            }, [
+              vue.createElementVNode("span", _hoisted_2$b, [
+                vue.withDirectives(vue.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), [
+                  [vue.vModelText, _ctx.model[item.name]]
+                ])
+              ])
+            ], 2);
+          }), 64))
+        ]);
+      };
+    }
+  });
+
+  const _sfc_main$G = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(formPlugin.MContainer), {
+            config,
+            model: _ctx.values,
+            onChange: change
+          }, null, 8, ["model"]),
+          vue.withDirectives(vue.createVNode(_sfc_main$H, {
+            model: _ctx.values,
+            onChange: change
+          }, null, 8, ["model"]), [
+            [vue.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__ */ vue.defineComponent({
+    __name: "Border",
+    props: {
+      model: {}
+    },
+    emits: ["change"],
+    setup(__props, { emit: __emit }) {
+      const direction = vue.ref("");
+      const config = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createElementVNode("div", _hoisted_3$3, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["border-icon border-icon-top", { active: direction.value === "Top" }]),
+                onClick: _cache[0] || (_cache[0] = ($event) => selectDirection("Top"))
+              }, null, 2)
+            ]),
+            vue.createElementVNode("div", _hoisted_4$3, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["border-icon border-icon-left", { active: direction.value === "Left" }]),
+                onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
+              }, null, 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["border-icon", { active: direction.value === "" }]),
+                onClick: _cache[2] || (_cache[2] = ($event) => selectDirection())
+              }, null, 2),
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["border-icon border-icon-right", { active: direction.value === "Right" }]),
+                onClick: _cache[3] || (_cache[3] = ($event) => selectDirection("Right"))
+              }, null, 2)
+            ]),
+            vue.createElementVNode("div", _hoisted_5$1, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["border-icon border-icon-bottom", { active: direction.value === "Bottom" }]),
+                onClick: _cache[4] || (_cache[4] = ($event) => selectDirection("Bottom"))
+              }, null, 2)
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_6, [
+            vue.createVNode(vue.unref(formPlugin.MContainer), {
+              config: config.value,
+              model: _ctx.model,
+              onChange: change
+            }, null, 8, ["config", "model"])
+          ])
+        ]);
+      };
+    }
+  });
+
+  const _sfc_main$E = /* @__PURE__ */ vue.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 vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+          vue.createVNode(vue.unref(formPlugin.MContainer), {
+            config,
+            model: _ctx.values,
+            onChange: change
+          }, null, 8, ["model"]),
+          vue.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__ */ vue.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 = vue.shallowRef(
+        Array(list.length).fill(1).map((x, i) => `${i}`)
+      );
+      const change = (v, eventData) => {
+        emit("change", v, eventData);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+          vue.createVNode(vue.unref(designPlugin.TMagicCollapse), { "model-value": collapseValue.value }, {
+            default: vue.withCtx(() => [
+              (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
+                return vue.createVNode(vue.unref(designPlugin.TMagicCollapseItem), {
+                  key: index,
+                  name: `${index}`
+                }, {
+                  title: vue.withCtx(() => [
+                    vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                    vue.createTextVNode(vue.toDisplayString(item.title), 1)
+                  ]),
+                  default: vue.withCtx(() => [
+                    item.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.component), {
+                      key: 0,
+                      values: _ctx.model[_ctx.name],
+                      onChange: change
+                    }, null, 40, ["values"])) : vue.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__ */ vue.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 = vue.inject("services");
+      const mForm = vue.inject("mForm");
+      const val = vue.computed(() => props.model[props.name]);
+      const uiSelectMode = vue.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 = utils.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 = vue.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", "");
@@ -6868,7 +7755,7 @@
             ])),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicTooltip), {
               content: "清除",
@@ -6943,12 +7830,11 @@
     emits: ["change"],
     setup(__props, { emit: __emit }) {
       const emit = __emit;
-      const target = vue.useTemplateRef("target");
-      const { isDragging } = useGetSo(target, emit);
+      const targetEl = vue.useTemplateRef("target");
+      const { isDragging } = useGetSo(targetEl, emit);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
-          ref_key: "target",
-          ref: target,
+          ref: "target",
           class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": vue.unref(isDragging) }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
@@ -6977,7 +7863,7 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const emit = __emit;
       const props = __props;
-      const el = vue.useTemplateRef("el");
+      const el = vue.useTemplateRef("target");
       const hasLeft = vue.computed(() => typeof props.left !== "undefined");
       const hasRight = vue.computed(() => typeof props.right !== "undefined");
       const center = vue.ref(0);
@@ -7083,8 +7969,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "el",
-          ref: el,
+          ref: "target",
           class: "m-editor-layout",
           style: vue.normalizeStyle(`min-width: ${props.minCenter + props.minLeft + props.minRight}px`)
         }, [
@@ -7117,11 +8002,11 @@
     }
   });
 
-  const _hoisted_1$h = {
+  const _hoisted_1$k = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
@@ -7193,7 +8078,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -7207,7 +8092,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -7225,7 +8110,7 @@
               title: _ctx.data.text
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -7258,7 +8143,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$8, [
+              vue.createElementVNode("span", _hoisted_2$9, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(designPlugin.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -7275,12 +8160,12 @@
     }
   });
 
-  const _hoisted_1$g = {
+  const _hoisted_1$j = {
     key: 0,
     id: "m-editor-page-bar-add-icon",
     class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
   };
-  const _hoisted_2$7 = {
+  const _hoisted_2$8 = {
     key: 1,
     style: { "width": "21px" }
   };
@@ -7306,10 +8191,10 @@
         editorService.add(pageConfig);
       };
       return (_ctx, _cache) => {
-        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
             reference: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+              vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
             ]),
             default: vue.withCtx(() => [
               vue.createVNode(_sfc_main$z, {
@@ -7333,11 +8218,20 @@
             ]),
             _: 1
           })
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7));
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$8));
       };
     }
   });
 
+  const _hoisted_1$i = {
+    class: "m-editor-page-bar",
+    ref: "pageBar"
+  };
+  const _hoisted_2$7 = {
+    key: 0,
+    class: "m-editor-page-bar-items",
+    ref: "itemsContainer"
+  };
   const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPageBarScrollContainer"
@@ -7352,33 +8246,33 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const uiService = services?.uiService;
-      const itemsContainer = vue.useTemplateRef("itemsContainer");
+      const itemsContainerEl = vue.useTemplateRef("itemsContainer");
       const canScroll = vue.ref(false);
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
       const showPageListButton = vue.computed(() => uiService?.get("showPageListButton"));
       const itemsContainerWidth = vue.ref(0);
+      const pageBarEl = vue.useTemplateRef("pageBar");
       const setCanScroll = () => {
-        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
+        itemsContainerWidth.value = (pageBarEl.value?.clientWidth || 0) - 37 * 2 - 37 - (showAddPageButton.value ? 37 : 21) - (showPageListButton.value ? 37 : 0);
         vue.nextTick(() => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+          if (itemsContainerEl.value) {
+            canScroll.value = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value > 1;
           }
         });
       };
       const resizeObserver = new ResizeObserver(() => {
         setCanScroll();
       });
-      const pageBar = vue.useTemplateRef("pageBar");
       vue.onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
+        pageBarEl.value && resizeObserver.observe(pageBarEl.value);
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
       });
       let translateLeft = 0;
       const scroll = (type) => {
-        if (!itemsContainer.value || !canScroll.value) return;
-        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (!itemsContainerEl.value || !canScroll.value) return;
+        const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
         if (type === "left") {
           scrollTo(translateLeft + 200);
         } else if (type === "right") {
@@ -7390,8 +8284,8 @@
         }
       };
       const scrollTo = (value) => {
-        if (!itemsContainer.value || !canScroll.value) return;
-        const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+        if (!itemsContainerEl.value || !canScroll.value) return;
+        const maxScrollLeft = itemsContainerEl.value.scrollWidth - itemsContainerWidth.value;
         if (value >= 0) {
           value = 0;
         }
@@ -7399,7 +8293,7 @@
           value = -maxScrollLeft;
         }
         translateLeft = value;
-        itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+        itemsContainerEl.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
       vue.watch(
         () => props.length,
@@ -7458,18 +8352,9 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-page-bar",
-          ref_key: "pageBar",
-          ref: pageBar
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
           vue.renderSlot(_ctx.$slots, "prepend"),
-          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "m-editor-page-bar-items",
-            ref_key: "itemsContainer",
-            ref: itemsContainer
-          }, [
+          _ctx.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 512)) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -7477,21 +8362,21 @@
             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"))
           }, [
-            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           canScroll.value ? (vue.openBlock(), vue.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"))
           }, [
-            vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.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"
@@ -7514,7 +8399,7 @@
         await editorService?.select(id);
       };
       return (_ctx, _cache) => {
-        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+        return showPageListButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           vue.createVNode(vue.unref(designPlugin.TMagicPopover), {
             "popper-class": "page-bar-popover",
             placement: "top",
@@ -7554,7 +8439,7 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+  const _hoisted_1$g = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
   const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "Search",
     props: {
@@ -7593,8 +8478,8 @@
         emit("search", values);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-          vue.createVNode(_sfc_main$Z, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          vue.createVNode(_sfc_main$1s, {
             icon: vue.unref(iconsVue.Search),
             onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
             class: vue.normalizeClass({ "icon-active": visible.value })
@@ -7618,7 +8503,7 @@
     }
   });
 
-  const _hoisted_1$d = { class: "m-editor-page-bar-tabs" };
+  const _hoisted_1$f = { class: "m-editor-page-bar-tabs" };
   const _hoisted_2$6 = ["data-page-id", "onClick"];
   const _hoisted_3$2 = { class: "m-editor-page-bar-title" };
   const _hoisted_4$2 = ["title"];
@@ -7670,38 +8555,37 @@
       const remove = (node) => {
         editorService?.remove(node);
       };
-      const pageBarScrollContainer = vue.useTemplateRef("pageBarScrollContainer");
-      const pageBarItems = vue.useTemplateRef("pageBarItems");
+      const pageBarScrollContainerRef = vue.useTemplateRef("pageBarScrollContainer");
+      const pageBarItemEls = vue.useTemplateRef("pageBarItems");
       vue.watch(page, (page2) => {
-        if (!page2 || !pageBarScrollContainer.value?.itemsContainerWidth || !pageBarItems.value || pageBarItems.value.length < 2) {
+        if (!page2 || !pageBarScrollContainerRef.value?.itemsContainerWidth || !pageBarItemEls.value || pageBarItemEls.value.length < 2) {
           return;
         }
-        const firstItem = pageBarItems.value[0];
-        const lastItem = pageBarItems.value[pageBarItems.value.length - 1];
+        const firstItem = pageBarItemEls.value[0];
+        const lastItem = pageBarItemEls.value[pageBarItemEls.value.length - 1];
         if (page2.id === firstItem.dataset.pageId) {
-          pageBarScrollContainer.value.scroll("start");
+          pageBarScrollContainerRef.value.scroll("start");
         } else if (page2.id === lastItem.dataset.pageId) {
-          pageBarScrollContainer.value.scroll("end");
+          pageBarScrollContainerRef.value.scroll("end");
         } else {
-          const pageItem = pageBarItems.value.find((item) => item.dataset.pageId === page2.id);
+          const pageItem = pageBarItemEls.value.find((item) => item.dataset.pageId === page2.id);
           if (!pageItem) {
             return;
           }
           const pageItemRect = pageItem.getBoundingClientRect();
           const offsetLeft = pageItemRect.left - firstItem.getBoundingClientRect().left;
-          const { itemsContainerWidth } = pageBarScrollContainer.value;
+          const { itemsContainerWidth } = pageBarScrollContainerRef.value;
           const left = itemsContainerWidth - offsetLeft - pageItemRect.width;
-          const translateLeft = pageBarScrollContainer.value.getTranslateLeft();
+          const translateLeft = pageBarScrollContainerRef.value.getTranslateLeft();
           if (offsetLeft + translateLeft < 0 || offsetLeft + pageItemRect.width > itemsContainerWidth - translateLeft) {
-            pageBarScrollContainer.value.scrollTo(left);
+            pageBarScrollContainerRef.value.scrollTo(left);
           }
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.createVNode(_sfc_main$x, {
-            ref_key: "pageBarScrollContainer",
-            ref: pageBarScrollContainer,
+            ref: "pageBarScrollContainer",
             "page-bar-sort-options": _ctx.pageBarSortOptions,
             length: list.value.length
           }, {
@@ -7725,8 +8609,7 @@
                 return vue.openBlock(), vue.createElementBlock("div", {
                   class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
                   ref_for: true,
-                  ref_key: "pageBarItems",
-                  ref: pageBarItems,
+                  ref: "pageBarItems",
                   key: item.id,
                   "data-page-id": item.id,
                   onClick: ($event) => switchPage(item.id)
@@ -7787,7 +8670,7 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor-empty-panel" };
+  const _hoisted_1$e = { class: "m-editor-empty-panel" };
   const _hoisted_2$5 = { class: "m-editor-empty-content" };
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -7811,14 +8694,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _cache[2] || (_cache[2] = vue.createElementVNode("p", null, "新增页面", -1))
             ]),
@@ -7828,7 +8711,7 @@
               onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(vue.unref(core.NodeType).PAGE_FRAGMENT))
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _cache[3] || (_cache[3] = vue.createElementVNode("p", null, "新增页面片", -1))
             ])) : vue.createCommentVNode("", true)
@@ -7838,6 +8721,11 @@
     }
   });
 
+  const _hoisted_1$d = {
+    class: "m-editor",
+    ref: "content",
+    style: { "min-width": "180px" }
+  };
   const DEFAULT_LEFT_COLUMN_WIDTH = 310;
   const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
   const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
@@ -7855,8 +8743,8 @@
     setup(__props) {
       const codeOptions = vue.inject("codeOptions", {});
       const { editorService, uiService } = vue.inject("services") || {};
-      const content = vue.useTemplateRef("content");
-      const splitView = vue.useTemplateRef("splitView");
+      const contentEl = vue.useTemplateRef("content");
+      const splitViewRef = vue.useTemplateRef("splitView");
       const root = vue.computed(() => editorService?.get("root"));
       const page = vue.computed(() => editorService?.get("page"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
@@ -7869,7 +8757,7 @@
         right: getRightColumnWidthCacheData()
       });
       vue.watch(pageLength, () => {
-        splitView.value?.updateWidth();
+        splitViewRef.value?.updateWidth();
       });
       vue.watch(
         () => uiService?.get("hideSlideBar"),
@@ -7894,8 +8782,8 @@
         });
       });
       vue.onMounted(() => {
-        if (content.value) {
-          resizerObserver.observe(content.value);
+        if (contentEl.value) {
+          resizerObserver.observe(contentEl.value);
         }
       });
       vue.onBeforeUnmount(() => {
@@ -7910,17 +8798,12 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor",
-          ref_key: "content",
-          ref: content,
-          style: { "min-width": "180px" }
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
           vue.renderSlot(_ctx.$slots, "header"),
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$Y, {
+            vue.createVNode(_sfc_main$1r, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
@@ -7928,8 +8811,7 @@
             }, null, 8, ["init-values", "options"])
           ]) : (vue.openBlock(), vue.createBlock(_sfc_main$A, {
             key: 1,
-            ref_key: "splitView",
-            ref: splitView,
+            ref: "splitView",
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
             "center-class": "m-editor-framework-center",
@@ -8140,8 +9022,9 @@
         });
         return data;
       });
+      const navMenuEl = vue.useTemplateRef("navMenu");
       const resizeObserver = new ResizeObserver(() => {
-        const rect = navMenu.value?.getBoundingClientRect();
+        const rect = navMenuEl.value?.getBoundingClientRect();
         if (rect) {
           uiService?.set("navMenuRect", {
             left: rect.left,
@@ -8151,9 +9034,8 @@
           });
         }
       });
-      const navMenu = vue.useTemplateRef("navMenu");
       vue.onMounted(() => {
-        navMenu.value && resizeObserver.observe(navMenu.value);
+        navMenuEl.value && resizeObserver.observe(navMenuEl.value);
       });
       vue.onBeforeUnmount(() => {
         resizeObserver.disconnect();
@@ -8162,8 +9044,7 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
           style: vue.normalizeStyle({ height: `${_ctx.height}px` }),
-          ref_key: "navMenu",
-          ref: navMenu
+          ref: "navMenu"
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
@@ -8184,7 +9065,7 @@
     }
   });
 
-  const _hoisted_1$b = { class: "m-editor-props-form-panel" };
+  const _hoisted_1$c = { class: "m-editor-props-form-panel" };
   const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFormPanel"
@@ -8209,20 +9090,20 @@
       const propsPanelSize = vue.computed(() => services?.uiService.get("propsPanelSize") || "small");
       const { height: editorContentHeight } = useEditorContentHeight();
       const stage = vue.computed(() => services?.editorService.get("stage"));
-      const configForm = vue.useTemplateRef("configForm");
+      const configFormRef = vue.useTemplateRef("configForm");
       vue.watchEffect(() => {
-        if (configForm.value) {
-          configForm.value.formState.stage = stage.value;
-          configForm.value.formState.services = services;
+        if (configFormRef.value) {
+          configFormRef.value.formState.stage = stage.value;
+          configFormRef.value.formState.services = services;
         }
       });
       const internalInstance = vue.getCurrentInstance();
       vue.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);
@@ -8234,15 +9115,14 @@
       const saveCode = (values) => {
         emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
       };
-      __expose({ configForm, submit });
+      __expose({ configForm: configFormRef, submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.renderSlot(_ctx.$slots, "props-form-panel-header"),
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), null, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(formPlugin.MForm), {
-                ref_key: "configForm",
-                ref: configForm,
+                ref: "configForm",
                 class: vue.normalizeClass(propsPanelSize.value),
                 "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
                 "label-width": _ctx.labelWidth,
@@ -8266,11 +9146,11 @@
             onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
+              vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Document) }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["type"])) : vue.createCommentVNode("", true),
-          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Y, {
+          showSrc.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1r, {
             key: 1,
             class: "m-editor-props-panel-src-code",
             height: `${vue.unref(editorContentHeight)}px`,
@@ -8308,7 +9188,10 @@
     };
   };
 
-  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__ */ vue.defineComponent({
     ...{
@@ -8352,7 +9235,18 @@
           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);
         }
@@ -8360,8 +9254,20 @@
       const errorHandler = (e) => {
         emit("form-error", e);
       };
-      const mountedHandler = (e) => {
-        emit("mounted", e);
+      const mountedHandler = () => {
+        if (propertyFormPanelRef.value) {
+          emit("mounted", propertyFormPanelRef.value);
+        }
+      };
+      const propsPanelEl = vue.useTemplateRef("propsPanel");
+      const widthChange = ({ deltaX }) => {
+        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 = vue.useTemplateRef("propertyFormPanel");
@@ -8372,7 +9278,7 @@
         submit
       });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(_sfc_main$q, {
             ref: "propertyFormPanel",
@@ -8386,8 +9292,12 @@
             onFormError: errorHandler,
             onMounted: mountedHandler
           }, null, 8, ["class", "config", "values", "disabledShowSrc", "extendState"]),
-          vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+          vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
             key: 0,
+            onChange: widthChange
+          })) : vue.createCommentVNode("", true),
+          vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
+            key: 1,
             class: "m-editor-props-style-panel",
             "label-position": "top",
             "code-value-key": "style",
@@ -8409,7 +9319,7 @@
                     onClick: vue.unref(closeStylePanelHandler)
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+                      vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
                     ]),
                     _: 1
                   }, 8, ["onClick"])
@@ -8419,14 +9329,14 @@
             _: 1
           }, 8, ["values", "disabledShowSrc", "extendState"])) : vue.createCommentVNode("", true),
           !vue.unref(showStylePanel) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
-            key: 1,
+            key: 2,
             class: "m-editor-props-panel-style-icon",
             circle: "",
             type: vue.unref(showStylePanel) ? "primary" : "",
             onClick: vue.unref(showStylePanelHandler)
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Sugar) }, null, 8, ["icon"])
+              vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Sugar) }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["type", "onClick"])) : vue.createCommentVNode("", true)
@@ -8452,9 +9362,9 @@
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const menu = vue.useTemplateRef("menu");
-      const buttons = vue.useTemplateRef("buttons");
-      const subMenu = vue.useTemplateRef("subMenu");
+      const menuEl = vue.useTemplateRef("menu");
+      const buttonRefs = vue.useTemplateRef("buttons");
+      const subMenuRef = vue.useTemplateRef("subMenu");
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
       const zIndex = designPlugin.useZIndex();
@@ -8468,11 +9378,11 @@
         left: `${menuPosition.value.left + 2}px`,
         zIndex: curZIndex.value
       }));
-      const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
+      const contains = (el) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
       const hide = () => {
         if (!visible.value) return;
         visible.value = false;
-        subMenu.value?.hide();
+        subMenuRef.value?.hide();
         emit("hide");
       };
       const clickHandler = (event) => {
@@ -8493,7 +9403,7 @@
         hide();
       };
       const setPosition = (e) => {
-        const menuHeight = menu.value?.clientHeight || 0;
+        const menuHeight = menuEl.value?.clientHeight || 0;
         let top = e.clientY;
         if (menuHeight + e.clientY > document.body.clientHeight) {
           top = document.body.clientHeight - menuHeight;
@@ -8521,14 +9431,14 @@
           if (!visible.value) {
             return;
           }
-          if (menu.value) {
-            let y = menu.value.offsetTop;
-            if (buttons.value?.[index].$el) {
-              const rect = buttons.value?.[index].$el.getBoundingClientRect();
+          if (menuEl.value) {
+            let y = menuEl.value.offsetTop;
+            if (buttonRefs.value?.[index].$el) {
+              const rect = buttonRefs.value?.[index].$el.getBoundingClientRect();
               y = rect.top;
             }
-            subMenu.value?.show({
-              clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+            subMenuRef.value?.show({
+              clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
               clientY: y
             });
           }
@@ -8546,7 +9456,7 @@
         globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
       });
       __expose({
-        menu,
+        menu: menuEl,
         menuPosition,
         hide,
         show,
@@ -8559,8 +9469,7 @@
           default: vue.withCtx(() => [
             vue.withDirectives(vue.createElementVNode("div", {
               class: "magic-editor-content-menu",
-              ref_key: "menu",
-              ref: menu,
+              ref: "menu",
               style: vue.normalizeStyle(menuStyle.value),
               onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
               onContextmenu: _cache[1] || (_cache[1] = vue.withModifiers(() => {
@@ -8572,8 +9481,7 @@
                   return vue.openBlock(), vue.createBlock(_sfc_main$z, {
                     "event-type": "mouseup",
                     ref_for: true,
-                    ref_key: "buttons",
-                    ref: buttons,
+                    ref: "buttons",
                     class: vue.normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
                     data: item,
                     key: index,
@@ -8586,8 +9494,7 @@
                 subMenuData.value.length ? (vue.openBlock(), vue.createBlock(_component_content_menu, {
                   key: 0,
                   class: "sub-menu",
-                  ref_key: "subMenu",
-                  ref: subMenu,
+                  ref: "subMenu",
                   active: _ctx.active,
                   "menu-data": subMenuData.value,
                   "is-sub-menu": true,
@@ -8645,7 +9552,7 @@
     }
   });
 
-  const _hoisted_1$9 = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
+  const _hoisted_1$a = ["draggable", "data-node-id", "data-parent-id", "data-parents-id", "data-is-container"];
   const _hoisted_2$3 = { class: "tree-node-label" };
   const _hoisted_3$1 = { class: "tree-node-tool" };
   const _hoisted_4$1 = {
@@ -8726,7 +9633,7 @@
             onContextmenu: nodeContentmenuHandler,
             onMouseenter: mouseenterHandler
           }, [
-            vue.createVNode(_sfc_main$Z, {
+            vue.createVNode(_sfc_main$1s, {
               class: "expand-icon",
               style: vue.normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
               icon: expanded.value ? vue.unref(iconsVue.ArrowDown) : vue.unref(iconsVue.ArrowRight),
@@ -8771,14 +9678,14 @@
               }, 1032, ["data", "parent", "parentsId", "node-status-map", "indent"]);
             }), 128))
           ])) : vue.createCommentVNode("", true)
-        ], 40, _hoisted_1$9)), [
+        ], 40, _hoisted_1$a)), [
           [vue.vShow, visible.value]
         ]);
       };
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 1,
     class: "m-editor-tree-empty"
   };
@@ -8825,7 +9732,7 @@
               ]),
               _: 2
             }, 1032, ["data", "indent", "next-level-indent-increment", "node-status-map"]);
-          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          }), 128)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
             vue.createElementVNode("p", null, vue.toDisplayString(_ctx.emptyText), 1)
           ]))
         ], 32);
@@ -8976,7 +9883,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Z, {
+                vue.createVNode(_sfc_main$1s, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -8991,7 +9898,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Z, {
+                vue.createVNode(_sfc_main$1s, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -9076,7 +9983,7 @@
     };
   };
 
-  const _hoisted_1$7 = { class: "search-wrapper" };
+  const _hoisted_1$8 = { class: "search-wrapper" };
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
@@ -9094,9 +10001,9 @@
       const { codeBlockService } = vue.inject("services") || {};
       const editable = vue.computed(() => codeBlockService?.getEditStatus());
       const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } = useCodeBlockEdit(codeBlockService);
-      const codeBlockList = vue.useTemplateRef("codeBlockList");
+      const codeBlockListRef = vue.useTemplateRef("codeBlockList");
       const filterTextChangeHandler = (val) => {
-        codeBlockList.value?.filter(val);
+        codeBlockListRef.value?.filter(val);
       };
       eventBus?.on("edit-code", (id) => {
         editCode(id);
@@ -9106,7 +10013,7 @@
         menuData: contentMenuData,
         contentMenuHideHandler
       } = useContentMenu$1((id) => {
-        codeBlockList.value?.deleteCode(id);
+        codeBlockListRef.value?.deleteCode(id);
       });
       const menuData = vue.computed(() => props.customContentMenu(contentMenuData, "code-block"));
       return (_ctx, _cache) => {
@@ -9114,7 +10021,7 @@
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-                vue.createElementVNode("div", _hoisted_1$7, [
+                vue.createElementVNode("div", _hoisted_1$8, [
                   vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                   editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicButton), {
                     key: 0,
@@ -9132,8 +10039,7 @@
                 ])
               ]),
               vue.createVNode(_sfc_main$k, {
-                ref_key: "codeBlockList",
-                ref: codeBlockList,
+                ref: "codeBlockList",
                 "custom-error": _ctx.customError,
                 indent: _ctx.indent,
                 "next-level-indent-increment": _ctx.nextLevelIndentIncrement,
@@ -9152,7 +10058,7 @@
             ]),
             _: 3
           }),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$1f, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -9252,7 +10158,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$R, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$1k, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
           width: width.value,
@@ -9416,7 +10322,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Z, {
+                vue.createVNode(_sfc_main$1s, {
                   icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -9431,7 +10337,7 @@
               placement: "bottom"
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$Z, {
+                vue.createVNode(_sfc_main$1s, {
                   icon: vue.unref(iconsVue.Close),
                   class: "edit-icon",
                   onClick: vue.withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -9512,7 +10418,7 @@
     };
   };
 
-  const _hoisted_1$6 = { class: "search-wrapper" };
+  const _hoisted_1$7 = { class: "search-wrapper" };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
@@ -9575,7 +10481,7 @@
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createVNode(vue.unref(designPlugin.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$6, [
+              vue.createElementVNode("div", _hoisted_1$7, [
                 vue.createVNode(_sfc_main$n, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicPopover), {
                   key: 0,
@@ -9647,7 +10553,7 @@
     }
   });
 
-  const _hoisted_1$5 = {
+  const _hoisted_1$6 = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -9662,7 +10568,7 @@
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, _cache[0] || (_cache[0] = [
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [
           vue.createElementVNode("path", {
             "fill-rule": "evenodd",
             d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
@@ -9760,7 +10666,7 @@
       const props = __props;
       const emit = __emit;
       const services = vue.inject("services");
-      const menu = vue.useTemplateRef("menu");
+      const menuRef = vue.useTemplateRef("menu");
       const node = vue.computed(() => services?.editorService.get("node"));
       const nodes = vue.computed(() => services?.editorService.get("nodes"));
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
@@ -9836,7 +10742,7 @@
         )
       );
       const show = (e) => {
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       __expose({
         show
@@ -9844,8 +10750,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
-          ref_key: "menu",
-          ref: menu,
+          ref: "menu",
           style: { "overflow": "initial" }
         }, null, 8, ["menu-data"]);
       };
@@ -9870,12 +10775,12 @@
       };
       return (_ctx, _cache) => {
         return _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+          _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
             key: 0,
             icon: vue.unref(iconsVue.Hide),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => setNodeVisible(true), ["stop"])),
             title: "点击显示"
-          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+          }, null, 8, ["icon"])) : (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
             key: 1,
             icon: vue.unref(iconsVue.View),
             onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -9887,7 +10792,7 @@
     }
   });
 
-  const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
+  const useClick = (services, isCtrlKeyDown, nodeStatusMap, menuRef) => {
     const isMultiSelect = vue.computed(() => isCtrlKeyDown.value && !services?.editorService.get("disabledMultiSelect"));
     const select = async (data) => {
       if (!data.id) {
@@ -9952,9 +10857,8 @@
         select(data);
       });
     };
-    const menu = vue.useTemplateRef("menu");
     return {
-      menu,
+      menuRef,
       nodeClickHandler,
       nodeContentMenuHandler(event, data) {
         event.preventDefault();
@@ -9962,7 +10866,7 @@
         if (nodes.length < 2 || !nodes.includes(data)) {
           nodeClickHandler(event, data);
         }
-        menu.value?.show(event);
+        menuRef.value?.show(event);
       },
       highlightHandler
     };
@@ -10363,11 +11267,11 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const tree = vue.useTemplateRef("tree");
+      const treeRef = vue.useTemplateRef("tree");
       const page = vue.computed(() => editorService?.get("page"));
       const nodeData = vue.computed(() => !page.value ? [] : [page.value]);
       const { nodeStatusMap } = useNodeStatus(services);
-      const { isCtrlKeyDown } = useKeybinding(services, tree);
+      const { isCtrlKeyDown } = useKeybinding(services, treeRef);
       const filterNodeMethod = (v, data) => {
         let name = "";
         if (data.name) {
@@ -10389,12 +11293,12 @@
         }
       };
       const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services);
+      const menuRef = vue.useTemplateRef("menu");
       const {
-        menu,
         nodeClickHandler,
         nodeContentMenuHandler,
         highlightHandler: mouseenterHandler
-      } = useClick(services, isCtrlKeyDown, nodeStatusMap);
+      } = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(designPlugin.TMagicScrollbar), { class: "m-editor-layer-panel" }, {
           default: vue.withCtx(() => [
@@ -10403,8 +11307,7 @@
             page.value && vue.unref(nodeStatusMap) ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
               key: 0,
               tabindex: "-1",
-              ref_key: "tree",
-              ref: tree,
+              ref: "tree",
               data: nodeData.value,
               "node-status-map": vue.unref(nodeStatusMap),
               indent: _ctx.indent,
@@ -10432,8 +11335,7 @@
             }, 8, ["data", "node-status-map", "indent", "next-level-indent-increment", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$e, {
-                ref_key: "menu",
-                ref: menu,
+                ref: "menu",
                 "layer-content-menu": _ctx.layerContentMenu,
                 "custom-content-menu": _ctx.customContentMenu,
                 onCollapseAll: collapseAllHandler
@@ -10446,7 +11348,7 @@
     }
   });
 
-  const _hoisted_1$4 = ["onClick", "onDragstart"];
+  const _hoisted_1$5 = ["onClick", "onDragstart"];
   const _hoisted_2$2 = ["title"];
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     ...{
@@ -10536,7 +11438,7 @@
                         name: `${index}`
                       }, {
                         title: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$Z, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                          vue.createVNode(_sfc_main$1s, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                           vue.createTextVNode(vue.toDisplayString(group.title), 1)
                         ]),
                         default: vue.withCtx(() => [
@@ -10557,7 +11459,7 @@
                                   content: item.desc
                                 }, {
                                   default: vue.withCtx(() => [
-                                    vue.createVNode(_sfc_main$Z, {
+                                    vue.createVNode(_sfc_main$1s, {
                                       icon: item.icon
                                     }, null, 8, ["icon"])
                                   ]),
@@ -10567,7 +11469,7 @@
                                   title: item.text
                                 }, vue.toDisplayString(item.text), 9, _hoisted_2$2)
                               ])
-                            ], 40, _hoisted_1$4);
+                            ], 40, _hoisted_1$5);
                           }), 128))
                         ]),
                         _: 2
@@ -10585,7 +11487,7 @@
     }
   });
 
-  const _hoisted_1$3 = {
+  const _hoisted_1$4 = {
     key: 0,
     class: "m-editor-sidebar"
   };
@@ -10735,7 +11637,7 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
             vue.createElementVNode("div", _hoisted_2$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
                 return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
@@ -10748,7 +11650,7 @@
                   (...args) => vue.unref(dragstartHandler) && vue.unref(dragstartHandler)(...args)),
                   onDragend: ($event) => vue.unref(dragendHandler)(config.$key, $event)
                 }, [
-                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$Z, {
+                  config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$1s, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -10894,7 +11796,7 @@
           (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$R, {
+                vue.unref(floatBoxStates)[config.$key]?.status ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
                   key: config.$key ?? index,
                   visible: vue.unref(floatBoxStates)[config.$key].status,
                   "onUpdate:visible": ($event) => vue.unref(floatBoxStates)[config.$key].status = $event,
@@ -10940,8 +11842,8 @@
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
-      const bar = vue.useTemplateRef("bar");
-      const thumb = vue.useTemplateRef("thumb");
+      const barEl = vue.useTemplateRef("bar");
+      const thumbEl = vue.useTemplateRef("thumb");
       const thumbSize = vue.computed(() => props.size * (props.size / props.scrollSize));
       const thumbPos = vue.computed(() => props.pos / props.scrollSize * props.size);
       const thumbStyle = vue.computed(() => ({
@@ -10950,9 +11852,8 @@
       }));
       let gesto;
       vue.onMounted(() => {
-        if (!thumb.value) return;
-        const thumbEl = thumb.value;
-        gesto = new Gesto(thumbEl, {
+        if (!thumbEl.value) return;
+        gesto = new Gesto(thumbEl.value, {
           container: window
         });
         gesto.on("dragStart", (e) => {
@@ -10961,11 +11862,11 @@
         }).on("drag", (e) => {
           scrollBy(getDelta(e));
         });
-        bar.value?.addEventListener("wheel", wheelHandler, false);
+        barEl.value?.addEventListener("wheel", wheelHandler, false);
       });
       vue.onBeforeUnmount(() => {
         if (gesto) gesto.off();
-        bar.value?.removeEventListener("wheel", wheelHandler, false);
+        barEl.value?.removeEventListener("wheel", wheelHandler, false);
       });
       const wheelHandler = (e) => {
         const delta = props.isHorizontal ? e.deltaX : e.deltaY;
@@ -10996,13 +11897,11 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          ref_key: "bar",
-          ref: bar,
+          ref: "bar",
           class: vue.normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
         }, [
           vue.createElementVNode("div", {
-            ref_key: "thumb",
-            ref: thumb,
+            ref: "thumb",
             class: "m-editor-scroll-bar-thumb",
             style: vue.normalizeStyle(thumbStyle.value)
           }, null, 4)
@@ -11011,6 +11910,10 @@
     }
   });
 
+  const _hoisted_1$3 = {
+    class: "m-editor-scroll-viewer-container",
+    ref: "container"
+  };
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
@@ -11029,8 +11932,8 @@
     },
     setup(__props, { expose: __expose }) {
       const props = __props;
-      const container = vue.useTemplateRef("container");
-      const el = vue.useTemplateRef("el");
+      const containerEl = vue.useTemplateRef("container");
+      const el = vue.useTemplateRef("target");
       const style = vue.computed(
         () => `
         width: ${utils.isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -11043,9 +11946,9 @@
       const scrollHeight = vue.ref(0);
       let scrollViewer;
       vue.onMounted(() => {
-        if (!container.value || !el.value) return;
+        if (!containerEl.value || !el.value) return;
         scrollViewer = new ScrollViewer({
-          container: container.value,
+          container: containerEl.value,
           target: el.value,
           zoom: props.zoom,
           correctionScrollSize: props.correctionScrollSize
@@ -11081,17 +11984,12 @@
         });
       };
       __expose({
-        container
+        container: containerEl
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-scroll-viewer-container",
-          ref_key: "container",
-          ref: container
-        }, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
           vue.createElementVNode("div", {
-            ref_key: "el",
-            ref: el,
+            ref: "target",
             style: vue.normalizeStyle(style.value)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
@@ -11124,8 +12022,8 @@
       const editorService = services?.editorService;
       const visible = vue.ref(false);
       const buttonVisible = vue.ref(false);
-      const button = vue.useTemplateRef("button");
-      const box = vue.useTemplateRef("box");
+      const buttonEl = vue.useTemplateRef("button");
+      const boxRef = vue.useTemplateRef("box");
       const stage = vue.computed(() => editorService?.get("stage"));
       const page = vue.computed(() => editorService?.get("page"));
       const nodes = vue.computed(() => editorService?.get("nodes") || []);
@@ -11170,12 +12068,12 @@
         top: 0
       });
       vue.watch(visible, async (visible2) => {
-        if (!button.value || !visible2) {
+        if (!buttonEl.value || !visible2) {
           return;
         }
         await vue.nextTick();
-        const rect = button.value.getBoundingClientRect();
-        const height = box.value?.target?.clientHeight || 0;
+        const rect = buttonEl.value.getBoundingClientRect();
+        const height = boxRef.value?.target?.clientHeight || 0;
         menuPosition.value = {
           left: rect.left + rect.width + 5,
           top: rect.top - height / 2 + rect.height / 2
@@ -11189,18 +12087,16 @@
           }, {
             default: vue.withCtx(() => [
               vue.createElementVNode("div", {
-                ref_key: "button",
-                ref: button,
+                ref: "button",
                 class: "m-editor-stage-float-button",
                 onClick: _cache[0] || (_cache[0] = ($event) => visible.value = true)
               }, "可选组件", 512)
             ]),
             _: 1
           })) : vue.createCommentVNode("", true),
-          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$R, {
+          page.value && vue.unref(nodeStatusMap) && buttonVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
             key: 1,
-            ref_key: "box",
-            ref: box,
+            ref: "box",
             visible: visible.value,
             "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
             title: "当前位置下的组件",
@@ -11226,7 +12122,7 @@
     setup(__props) {
       const services = vue.inject("services");
       const stageOptions = vue.inject("stageOptions");
-      const stageOverlay = vue.useTemplateRef("stageOverlay");
+      const stageOverlayEl = vue.useTemplateRef("stageOverlay");
       const stageOverlayVisible = vue.computed(() => services?.stageOverlayService.get("stageOverlayVisible"));
       const wrapWidth = vue.computed(() => services?.stageOverlayService.get("wrapWidth") || 0);
       const wrapHeight = vue.computed(() => services?.stageOverlayService.get("wrapHeight") || 0);
@@ -11245,12 +12141,12 @@
           services?.stageOverlayService.closeOverlay();
         }
       });
-      vue.watch(stageOverlay, (stageOverlay2) => {
+      vue.watch(stageOverlayEl, (stageOverlay) => {
         if (!services) return;
         const subStage = services.stageOverlayService.createStage(stageOptions);
         services?.stageOverlayService.set("stage", subStage);
-        if (stageOverlay2 && subStage) {
-          subStage.mount(stageOverlay2);
+        if (stageOverlay && subStage) {
+          subStage.mount(stageOverlay);
           const { mask, renderer } = subStage;
           const { contentWindow } = renderer;
           mask?.showRule(false);
@@ -11282,8 +12178,7 @@
             _: 1
           }),
           vue.createElementVNode("div", {
-            ref_key: "stageOverlay",
-            ref: stageOverlay,
+            ref: "stageOverlay",
             class: "m-editor-stage-overlay-container",
             style: vue.normalizeStyle(style.value),
             onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
@@ -11347,7 +12242,7 @@
       const props = __props;
       const services = vue.inject("services");
       const editorService = services?.editorService;
-      const menu = vue.useTemplateRef("menu");
+      const menuRef = vue.useTemplateRef("menu");
       const canCenter = vue.ref(false);
       const node = vue.computed(() => editorService?.get("node"));
       const nodes = vue.computed(() => editorService?.get("nodes"));
@@ -11366,7 +12261,7 @@
               }
             },
             useCopyMenu(),
-            usePasteMenu(menu),
+            usePasteMenu(menuRef),
             {
               type: "divider",
               direction: "horizontal",
@@ -11448,14 +12343,13 @@
         { immediate: true }
       );
       const show = (e) => {
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       __expose({ show });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$o, {
           "menu-data": menuData.value,
-          ref_key: "menu",
-          ref: menu
+          ref: "menu"
         }, null, 8, ["menu-data"]);
       };
     }
@@ -11478,9 +12372,9 @@
       let runtime = null;
       const services = vue.inject("services");
       const stageLoading = vue.computed(() => services?.editorService.get("stageLoading") || false);
-      const stageWrap = vue.useTemplateRef("stageWrap");
-      const stageContainer = vue.useTemplateRef("stageContainer");
-      const menu = vue.useTemplateRef("menu");
+      const stageWrapRef = vue.useTemplateRef("stageWrap");
+      const stageContainerEl = vue.useTemplateRef("stageContainer");
+      const menuRef = vue.useTemplateRef("menu");
       const nodes = vue.computed(() => services?.editorService.get("nodes") || []);
       const isMultiSelect = vue.computed(() => nodes.value.length > 1);
       const stageRect = vue.computed(() => services?.uiService.get("stageRect"));
@@ -11491,14 +12385,14 @@
       const node = vue.computed(() => services?.editorService.get("node"));
       vue.watchEffect(() => {
         if (stage || !page.value) return;
-        if (!stageContainer.value) return;
+        if (!stageContainerEl.value) return;
         if (!(props.stageOptions?.runtimeUrl || props.stageOptions?.render) || !root.value) return;
         stage = useStage(props.stageOptions);
         stage.on("select", () => {
-          stageWrap.value?.container?.focus();
+          stageWrapRef.value?.container?.focus();
         });
         services?.editorService.set("stage", vue.markRaw(stage));
-        stage.mount(stageContainer.value);
+        stage.mount(stageContainerEl.value);
         if (!node.value?.id) {
           return;
         }
@@ -11551,9 +12445,9 @@
         }
       });
       vue.onMounted(() => {
-        if (stageWrap.value?.container) {
-          resizeObserver.observe(stageWrap.value.container);
-          services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
+        if (stageWrapRef.value?.container) {
+          resizeObserver.observe(stageWrapRef.value.container);
+          services?.keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
         }
       });
       vue.onBeforeUnmount(() => {
@@ -11566,7 +12460,7 @@
       const parseDSL = getEditorConfig("parseDSL");
       const contextmenuHandler = (e) => {
         e.preventDefault();
-        menu.value?.show(e);
+        menuRef.value?.show(e);
       };
       const dragoverHandler = (e) => {
         if (!e.dataTransfer) return;
@@ -11589,9 +12483,9 @@
         if (parentId) {
           parent = services?.editorService.getNodeById(parentId, false);
         }
-        if (parent && stageContainer.value && stage) {
+        if (parent && stageContainerEl.value && stage) {
           const layout = await services?.editorService.getLayout(parent);
-          const containerRect = stageContainer.value.getBoundingClientRect();
+          const containerRect = stageContainerEl.value.getBoundingClientRect();
           const { scrollTop, scrollLeft } = stage.mask;
           const { style = {} } = config.data;
           let top = 0;
@@ -11625,8 +12519,7 @@
         const _directive_loading = vue.resolveDirective("loading");
         return vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$8, {
           class: "m-editor-stage",
-          ref_key: "stageWrap",
-          ref: stageWrap,
+          ref: "stageWrap",
           tabindex: "-1",
           "element-loading-text": "Runtime 加载中...",
           width: stageRect.value?.width,
@@ -11638,14 +12531,13 @@
             width: 60,
             height: 50
           },
-          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrap)?.container?.focus())
+          onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(stageWrapRef)?.container?.focus())
         }, {
           content: vue.withCtx(() => [
             !_ctx.disabledStageOverlay ? (vue.openBlock(), vue.createBlock(_sfc_main$6, { key: 0 })) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$4, {
-                ref_key: "menu",
-                ref: menu,
+                ref: "menu",
                 "is-multi-select": isMultiSelect.value,
                 "stage-content-menu": _ctx.stageContentMenu,
                 "custom-content-menu": _ctx.customContentMenu
@@ -11655,8 +12547,7 @@
           default: vue.withCtx(() => [
             vue.createElementVNode("div", {
               class: "m-editor-stage-container",
-              ref_key: "stageContainer",
-              ref: stageContainer,
+              ref: "stageContainer",
               style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
               onContextmenu: contextmenuHandler,
               onDrop: dropHandler,
@@ -11997,7 +12888,7 @@
   const codeBlockService = new CodeBlock();
 
   class ComponentList extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       list: []
     });
     constructor() {
@@ -12178,7 +13069,7 @@
 
   const idleTask = new IdleTask();
   class Dep extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       collecting: false
     });
     watcher = new core.Watcher({ initialTargets: vue.reactive({}) });
@@ -12220,6 +13111,7 @@
       });
       this.set("collecting", false);
       this.emit("collected", nodes, deep);
+      this.emit("ds-collected", nodes, deep);
     }
     collectIdle(nodes, depExtendedData = {}, deep = false, type) {
       this.set("collecting", true);
@@ -12240,6 +13132,9 @@
           this.set("collecting", false);
           resolve();
         });
+        idleTask.once("hight-level-finish", () => {
+          this.emit("ds-collected", nodes, deep);
+        });
       });
     }
     collectNode(node, target, depExtendedData = {}, deep = false) {
@@ -12287,7 +13182,8 @@
           node,
           deep: false,
           target
-        }
+        },
+        target.type === core.DepTargetType.DATA_SOURCE
       );
       if (deep && Array.isArray(node.items) && node.items.length) {
         node.items.forEach((item) => {
@@ -12534,7 +13430,7 @@
     sync: ["openOverlay", "closeOverlay", "updateOverlay", "createStage"]
   };
   class StageOverlay extends BaseService {
-    state = vue.reactive({
+    state = vue.shallowReactive({
       wrapDiv: document.createElement("div"),
       sourceEl: null,
       contentEl: null,
@@ -12902,57 +13798,39 @@
       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) => {
-          utils.traverseNode(node, (node2) => {
-            if (!allNodes.includes(node2)) {
-              allNodes.push(node2);
-            }
-          });
-        });
-      } else {
-        allNodes.push(...nodes);
-      }
-      const deps = Object.values(root.dataSourceDeps || {});
-      deps.forEach((dep) => {
-        Object.keys(dep).forEach((id) => {
-          const node = allNodes.find((node2) => node2.id === id);
-          node && stage.value?.update({
-            config: lodashEs.cloneDeep(node),
-            parentId: editorService.getParentById(node.id)?.id,
-            root: lodashEs.cloneDeep(root)
-          });
+      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: lodashEs.cloneDeep(node),
-          parentId: editorService.getParentById(node.id)?.id,
-          root: lodashEs.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) => {
@@ -12981,17 +13859,58 @@
         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: lodashEs.cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: lodashEs.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) => {
+          utils.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(core.createDataSourceTarget(ds, vue.reactive({})));
       depService.addTarget(core.createDataSourceMethodTarget(ds, vue.reactive({})));
@@ -13010,9 +13929,8 @@
       })
     );
     const nodeAddHandler = (nodes) => {
-      collectIdle(nodes, true).then(() => {
-        afterUpdateNodes(nodes);
-      });
+      collectIdle(nodes, true);
+      updateStage(nodes);
     };
     const nodeUpdateHandler = (data) => {
       const needRecollectNodes = [];
@@ -13033,11 +13951,10 @@
         }
       });
       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) => {
@@ -13045,7 +13962,7 @@
     };
     const historyChangeHandler = (page) => {
       collectIdle([page], true).then(() => {
-        updateDataSourceSchema([page], true);
+        updateDataSourceSchema();
       });
     };
     editorService.on("history-change", historyChangeHandler);
@@ -13065,11 +13982,12 @@
     };
     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) {
@@ -13087,11 +14005,12 @@
           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) => {
@@ -13104,7 +14023,7 @@
       const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
       const nodes = utils.getNodes(nodeIds, root?.items);
       collectIdle(nodes, false).then(() => {
-        updateDataSourceSchema(nodes, false);
+        updateDataSourceSchema();
       });
       removeDataSourceTarget(id);
     };
@@ -13114,7 +14033,7 @@
     vue.onBeforeUnmount(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
-      depService.off("collected", depCollectedHandler);
+      depService.off("ds-collected", dsDepCollectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);
@@ -13375,24 +14294,25 @@
       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);
     }
   };
 
@@ -13408,47 +14328,48 @@
   exports.COPY_CODE_STORAGE_KEY = COPY_CODE_STORAGE_KEY;
   exports.COPY_DS_STORAGE_KEY = COPY_DS_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$M;
+  exports.CodeBlockEditor = _sfc_main$1f;
   exports.CodeBlockList = _sfc_main$k;
   exports.CodeBlockListPanel = _sfc_main$j;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$V;
-  exports.CodeSelectCol = _sfc_main$T;
+  exports.CodeSelect = _sfc_main$1o;
+  exports.CodeSelectCol = _sfc_main$1m;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$b;
-  exports.CondOpSelect = _sfc_main$S;
+  exports.CondOpSelect = _sfc_main$1l;
   exports.ContentMenu = _sfc_main$o;
   exports.DataSourceConfigPanel = _sfc_main$i;
-  exports.DataSourceFieldSelect = _sfc_main$O;
-  exports.DataSourceFields = _sfc_main$Q;
-  exports.DataSourceInput = _sfc_main$N;
-  exports.DataSourceMethodSelect = _sfc_main$K;
-  exports.DataSourceMethods = _sfc_main$L;
-  exports.DataSourceMocks = _sfc_main$J;
-  exports.DataSourceSelect = _sfc_main$I;
-  exports.DisplayConds = _sfc_main$H;
+  exports.DataSourceFieldSelect = _sfc_main$1h;
+  exports.DataSourceFields = _sfc_main$1j;
+  exports.DataSourceInput = _sfc_main$1g;
+  exports.DataSourceMethodSelect = _sfc_main$1d;
+  exports.DataSourceMethods = _sfc_main$1e;
+  exports.DataSourceMocks = _sfc_main$1c;
+  exports.DataSourceSelect = _sfc_main$1b;
+  exports.DisplayConds = _sfc_main$1a;
   exports.DragType = DragType;
-  exports.EventSelect = _sfc_main$G;
+  exports.EventSelect = _sfc_main$19;
   exports.Fixed2Other = Fixed2Other;
-  exports.FloatingBox = _sfc_main$R;
+  exports.FloatingBox = _sfc_main$1k;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$Z;
+  exports.Icon = _sfc_main$1s;
   exports.IdleTask = IdleTask;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$E;
+  exports.KeyValue = _sfc_main$17;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$c;
   exports.Layout = Layout;
   exports.LayoutContainer = _sfc_main$A;
-  exports.PageFragmentSelect = _sfc_main$D;
+  exports.PageFragmentSelect = _sfc_main$16;
   exports.PropsFormPanel = _sfc_main$q;
   exports.PropsPanel = _sfc_main$p;
   exports.Resizer = _sfc_main$B;
   exports.ScrollViewer = ScrollViewer;
   exports.SideItemKey = SideItemKey;
   exports.SplitView = _sfc_main$A;
-  exports.TMagicCodeEditor = _sfc_main$Y;
+  exports.StyleSetter = _sfc_main$D;
+  exports.TMagicCodeEditor = _sfc_main$1r;
   exports.TMagicEditor = _sfc_main;
   exports.ToolButton = _sfc_main$z;
   exports.Tree = _sfc_main$l;