@tmagic/editor 1.5.1 → 1.5.3

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$Y = ["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$Y)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -76,10 +76,10 @@
   emmetMonacoEs.emmetHTML(monaco__namespace);
   emmetMonacoEs.emmetCSS(monaco__namespace, ["css", "scss"]);
 
-  const _hoisted_1$x = {
+  const _hoisted_1$X = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -236,7 +236,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$x, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -252,7 +252,7 @@
                 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
               }),
@@ -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)) {
@@ -3268,7 +3025,7 @@
     });
   };
 
-  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -3328,9 +3085,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$W = { class: "m-fields-code-select-col" };
+  const _hoisted_2$m = { class: "code-select-container" };
+  const _sfc_main$1m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCodeSelectCol"
     },
@@ -3426,8 +3183,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$W, [
+          vue.createElementVNode("div", _hoisted_2$m, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: selectConfig,
@@ -3442,14 +3199,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 +3219,7 @@
     }
   });
 
-  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsCondOpSelect"
     },
@@ -3548,7 +3305,7 @@
     }
   });
 
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     __name: "FloatingBox",
     props: /* @__PURE__ */ vue.mergeModels({
       position: { default: () => ({ left: 0, top: 0 }) },
@@ -3703,7 +3460,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
                 })
@@ -4226,9 +3983,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$V = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFields"
     },
@@ -4492,12 +4249,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$V, [
           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$l, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               disabled: _ctx.disabled,
@@ -4522,7 +4279,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 +4302,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 +4327,8 @@
     }
   });
 
-  const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$U = { class: "m-editor-data-source-field-select" };
+  const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
     __name: "FieldSelect",
     props: /* @__PURE__ */ vue.mergeModels({
       value: {},
@@ -4652,7 +4409,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$U, [
           _ctx.checkStrictly ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(designPlugin.TMagicSelect), {
               "model-value": selectDataSourceId.value,
@@ -4720,7 +4477,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 +4491,8 @@
     }
   });
 
-  const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$T = { class: "m-fields-data-source-field-select" };
+  const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceFieldSelect"
     },
@@ -4807,15 +4564,15 @@
         }
         return value ?? props.config.value === "key";
       });
-      const onChangeHandler = (value) => {
+      const onChangeHandler = (value, eventData) => {
         if (!Array.isArray(value)) {
-          emit("change", value);
+          emit("change", value, eventData);
           return;
         }
         const [dsId, ...keys] = value;
         const dataSource = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(dsId));
         if (!dataSource) {
-          emit("change", value);
+          emit("change", value, eventData);
           return;
         }
         let fields = dataSource.fields || [];
@@ -4829,15 +4586,15 @@
           dataSourceFieldType.push("any");
         }
         if (!keys.length || field?.type && (field.type === "any" || dataSourceFieldType.includes("any") || dataSourceFieldType.includes(field.type))) {
-          emit("change", value);
+          emit("change", value, eventData);
         } else {
           designPlugin.tMagicMessage.error(`请选择类型为${dataSourceFieldType.join("或")}的字段`);
-          emit("change", [dsId]);
+          emit("change", [dsId], eventData);
         }
       };
       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$T, [
+          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 +4629,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 +4641,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$S = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+  const _hoisted_2$k = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+  const _hoisted_3$8 = { class: "el-input__inner t-input__inner" };
+  const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceInput"
     },
@@ -5087,12 +4844,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$S, [
               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$k, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -5104,7 +4861,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 +4879,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 +4890,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$R = { style: { "display": "flex", "margin-bottom": "10px" } };
+  const _hoisted_2$j = { 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"
     },
@@ -5310,7 +5067,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 +5121,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 +5144,8 @@
                 ])
               ]),
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$r, [
-                  vue.createElementVNode("div", _hoisted_2$f, [
+                vue.createElementVNode("div", _hoisted_1$R, [
+                  vue.createElementVNode("div", _hoisted_2$j, [
                     vue.createVNode(vue.unref(designPlugin.TMagicTag), {
                       size: "small",
                       type: "info"
@@ -5399,7 +5156,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,7 +5168,7 @@
                     })
                   ])
                 ]),
-                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,
@@ -5430,9 +5187,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$Q = { class: "m-editor-data-source-methods" };
+  const _hoisted_2$i = { class: "m-editor-data-source-methods-footer" };
+  const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethods"
     },
@@ -5553,12 +5310,12 @@
         codeBlockEditor.value?.hide();
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Q, [
           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$i, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5572,7 +5329,7 @@
               _: 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,
@@ -5587,9 +5344,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$P = { class: "m-fields-data-source-method-select" };
+  const _hoisted_2$h = { class: "data-source-method-select-container" };
+  const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMethodSelect"
     },
@@ -5675,8 +5432,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$P, [
+          vue.createElementVNode("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(formPlugin.MContainer), {
               class: "select",
               config: cascaderConfig.value,
@@ -5695,7 +5452,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 +5462,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 +5476,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$O = { class: "m-editor-data-source-fields" };
+  const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
+  const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceMocks"
     },
@@ -5810,7 +5567,7 @@
       const columns = [
         {
           type: "expand",
-          component: _sfc_main$Y,
+          component: _sfc_main$1r,
           props: (row) => ({
             initValues: row.data,
             language: "json",
@@ -5925,12 +5682,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$O, [
           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$g, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               size: "small",
               type: "primary",
@@ -5944,7 +5701,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 +5728,8 @@
     }
   });
 
-  const _hoisted_1$n = { class: "m-fields-data-source-select" };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$N = { class: "m-fields-data-source-select" };
+  const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsDataSourceSelect"
     },
@@ -6029,7 +5786,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$N, [
           vue.createVNode(vue.unref(formPlugin.MSelect), {
             model: _ctx.model,
             name: _ctx.name,
@@ -6051,7 +5808,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 +5822,7 @@
     }
   });
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "m-fields-display-conds"
     },
@@ -6097,7 +5854,8 @@
           {
             type: "table",
             name: "cond",
-            operateColWidth: 50,
+            operateColWidth: 100,
+            enableToggleMode: false,
             items: [
               parentFields.value.length ? {
                 type: "cascader",
@@ -6196,12 +5954,12 @@
     }
   });
 
-  const _hoisted_1$m = { class: "m-fields-event-select" };
-  const _hoisted_2$b = {
+  const _hoisted_1$M = { class: "m-fields-event-select" };
+  const _hoisted_2$f = {
     key: 1,
     class: "fullWidth"
   };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsEventSelect"
     },
@@ -6477,7 +6235,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$M, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             name: "events",
@@ -6486,7 +6244,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$f, [
             vue.createVNode(vue.unref(designPlugin.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -6538,29 +6296,29 @@
     }
   });
 
-  const _hoisted_1$l = {
+  const _hoisted_1$L = {
     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$L, _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$K = { class: "m-fields-key-value" };
+  const _hoisted_2$e = { key: 0 };
+  const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsKeyValue"
     },
@@ -6622,8 +6380,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$K, [
+          !showCode.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
             (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 +6430,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 +6446,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 +6454,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$J = { class: "m-fields-page-fragment-select" };
+  const _hoisted_2$d = { class: "page-fragment-select-container" };
+  const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MFieldsPageFragmentSelect"
     },
@@ -6744,8 +6502,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$J, [
+          vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
@@ -6753,7 +6511,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 +6523,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$I = { class: "background-position-container" };
+  const _hoisted_2$c = { class: "presets-value-list" };
+  const _hoisted_3$6 = { class: "custom-value" };
+  const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+    __name: "BackgroundPosition",
     props: {
       config: {},
       model: {},
@@ -6788,50 +6541,1180 @@
     },
     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 horizontalList = [
+        {
+          value: "left",
+          text: "左"
+        },
+        {
+          value: "center",
+          text: "中"
+        },
+        {
+          value: "right",
+          text: "右"
         }
-      };
-      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", "");
-          mForm?.$emit("field-change", props.prop, "");
+      ];
+      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 selectNode = async (id) => {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$I, [
+          vue.createElementVNode("div", _hoisted_2$c, [
+            (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$H = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$k(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
+      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$G = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$j(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+      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$F = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$i(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
+      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$E = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$h(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
+      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$D = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$g(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$D, _cache[0] || (_cache[0] = [
+      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$C = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$f(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
+      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$B = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$e(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
+      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$A = { class: "layout-box-container" };
+  const _hoisted_2$b = {
+    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$A, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
+            return vue.createElementVNode("div", {
+              key: index,
+              class: vue.normalizeClass(item.class)
+            }, [
+              item.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, vue.toDisplayString(item.text), 1)) : vue.createCommentVNode("", true),
+              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$z = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$d(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
+      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$y = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$c(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
+      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$x = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$b(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
+      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$w = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$a(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
+      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$v = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$9(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+      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$u = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$8(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+      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$t = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$7(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
+      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$s = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$6(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
+      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$r = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$5(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
+      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$q = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$4(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
+      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$p = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$3(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
+      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$o = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$2(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$o, _cache[0] || (_cache[0] = [
+      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$n = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render$1(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$n, _cache[0] || (_cache[0] = [
+      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$m = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 1024 1024"
+  };
+
+  function _sfc_render(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$m, _cache[0] || (_cache[0] = [
+      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$l = { class: "layout-box-container" };
+  const _hoisted_2$a = { 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$l, [
+          (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(list, (item, index) => {
+            return vue.createElementVNode("div", {
+              key: index,
+              class: vue.normalizeClass(item.class)
+            }, [
+              vue.createElementVNode("span", _hoisted_2$a, [
+                vue.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$k = { class: "border-box-container" };
+  const _hoisted_2$9 = { 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$k, [
+          vue.createElementVNode("div", _hoisted_2$9, [
+            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$j = { 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$j, [
+          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$i = {
+    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", "");
+          mForm?.$emit("field-change", props.prop, "");
+        }
+      };
+      const selectNode = async (id) => {
         if (!services) return;
         await services.editorService.select(id);
         services.editorService.get("stage")?.select(id);
@@ -7207,7 +8090,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 +8108,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),
@@ -7309,7 +8192,7 @@
         return showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
           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, {
@@ -7477,14 +8360,14 @@
             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);
       };
@@ -7594,7 +8477,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
-          vue.createVNode(_sfc_main$Z, {
+          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 })
@@ -7818,7 +8701,7 @@
               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)
@@ -7920,7 +8803,7 @@
           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),
@@ -8218,7 +9101,7 @@
       });
       const internalInstance = vue.getCurrentInstance();
       vue.onMounted(() => {
-        emit("mounted", internalInstance);
+        emit("mounted", internalInstance?.proxy);
       });
       const submit = async (v, eventData) => {
         try {
@@ -8266,11 +9149,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 +9191,10 @@
     };
   };
 
-  const _hoisted_1$a = { class: "m-editor-props-panel" };
+  const _hoisted_1$a = {
+    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 +9238,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);
         }
@@ -8363,6 +9260,16 @@
       const mountedHandler = (e) => {
         emit("mounted", e);
       };
+      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");
       __expose({
@@ -8386,8 +9293,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 +9320,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 +9330,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)
@@ -8726,7 +9637,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),
@@ -8976,7 +9887,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 +9902,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"])
@@ -9152,7 +10063,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 +10163,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 +10327,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 +10342,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"])
@@ -9870,12 +10781,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"])),
@@ -10536,7 +11447,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 +11468,7 @@
                                   content: item.desc
                                 }, {
                                   default: vue.withCtx(() => [
-                                    vue.createVNode(_sfc_main$Z, {
+                                    vue.createVNode(_sfc_main$1s, {
                                       icon: item.icon
                                     }, null, 8, ["icon"])
                                   ]),
@@ -10748,7 +11659,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 +11805,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,
@@ -11197,7 +12108,7 @@
             ]),
             _: 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,
@@ -13375,24 +14286,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 +14320,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;