@tmagic/editor 1.5.2 → 1.5.3

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
+import designPlugin__default, { TMagicIcon, TMagicButton, TMagicCard, tMagicMessage, getDesignConfig, TMagicSelect, useZIndex, tMagicMessageBox, TMagicCascader, TMagicTooltip, TMagicTag, TMagicDialog, TMagicSwitch, TMagicInput, TMagicCollapse, TMagicCollapseItem, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 export * from '@tmagic/design';
 export { default as designPlugin } from '@tmagic/design';
 import formPlugin__default, { MContainer, MForm, filterFunction, createValues, MFormBox, MSelect, MGroupList, MPanel, createForm } from '@tmagic/form';
@@ -7,8 +7,8 @@ export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, withModifiers, toHandlers, createSlots, markRaw, getCurrentInstance, withDirectives, vShow, Transition, resolveDirective, mergeDefaults } from 'vue';
-import { Edit, FullScreen, View, Close, Coin, Delete, Plus, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, computed, reactive, resolveComponent, inject, createCommentVNode, Fragment, renderList, mergeProps, mergeModels, useModel, nextTick, provide, renderSlot, toDisplayString, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
+import { Edit, FullScreen, View, Close, Coin, Delete, Plus, Grid, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, CaretBottom, DocumentCopy, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
 import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
@@ -27,8 +27,8 @@ import { detailedDiff } from 'deep-object-diff';
 import Sortable from 'sortablejs';
 import KeyController from 'keycon';
 
-const _hoisted_1$y = ["src"];
-const _sfc_main$Z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Y = ["src"];
+const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -52,7 +52,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$y)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$Y)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -80,10 +80,10 @@ const getEditorConfig = (key) => $TMAGIC_EDITOR[key];
 emmetHTML(monaco);
 emmetCSS(monaco, ["css", "scss"]);
 
-const _hoisted_1$x = {
+const _hoisted_1$X = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+const _sfc_main$1r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -240,7 +240,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$x, [
+      return openBlock(), createElementBlock("div", _hoisted_1$X, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -256,7 +256,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
               onClick: fullScreenHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, { icon: unref(FullScreen) }, null, 8, ["icon"])
+                createVNode(_sfc_main$1s, { icon: unref(FullScreen) }, null, 8, ["icon"])
               ]),
               _: 1
             }),
@@ -272,7 +272,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$X = /* @__PURE__ */ defineComponent({
+const _sfc_main$1q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsVsCode"
   },
@@ -295,7 +295,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$Y, {
+      return openBlock(), createBlock(_sfc_main$1r, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -310,7 +310,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$W = /* @__PURE__ */ defineComponent({
+const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeLink"
   },
@@ -389,7 +389,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$V = /* @__PURE__ */ defineComponent({
+const _sfc_main$1o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelect"
   },
@@ -532,303 +532,60 @@ const styleTabConfig = {
   items: [
     {
       name: "style",
+      labelWidth: "100px",
+      type: "style-setter",
       items: [
         {
-          type: "fieldset",
-          legend: "位置",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "position",
-              text: "固定定位",
-              labelPosition: "left",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "checkbox",
-                activeValue: "fixed",
-                inactiveValue: "absolute",
-                defaultValue: "absolute"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "left",
-              text: "left",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "top",
-              text: "top",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedBottom"
-            },
-            {
-              type: "data-source-field-select",
-              name: "right",
-              text: "right",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "bottom",
-              text: "bottom",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              },
-              disabled: (_vm, { model }) => model.position === "fixed" && model._magic_position === "fixedTop"
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "盒子",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "display",
-              text: "display",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: "block", value: "block" },
-                  { text: "flex", value: "flex" },
-                  { text: "none", value: "none" },
-                  { text: "inline-block", value: "inline-block" },
-                  { text: "grid", value: "grid" },
-                  { text: "inline", value: "inline" },
-                  { text: "initial", value: "initial" }
-                ]
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "width",
-              text: "宽度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "height",
-              text: "高度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              text: "overflow",
-              name: "overflow",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: "visible", value: "visible" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "clip", value: "clip" },
-                  { text: "scroll", value: "scroll" },
-                  { text: "auto", value: "auto" },
-                  { text: "overlay", value: "overlay" },
-                  { text: "initial", value: "initial" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "边框",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "borderWidth",
-              text: "宽度",
-              defaultValue: "0",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderColor",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "borderStyle",
-              text: "样式",
-              defaultValue: "none",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "none", value: "none" },
-                  { text: "hidden", value: "hidden" },
-                  { text: "dotted", value: "dotted" },
-                  { text: "dashed", value: "dashed" },
-                  { text: "solid", value: "solid" },
-                  { text: "double", value: "double" },
-                  { text: "groove", value: "groove" },
-                  { text: "ridge", value: "ridge" },
-                  { text: "inset", value: "inset" },
-                  { text: "outset", value: "outset" }
-                ]
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "背景",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "backgroundImage",
-              text: "背景图",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "img-upload"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundColor",
-              text: "背景颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundRepeat",
-              text: "背景图重复",
-              defaultValue: "no-repeat",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "select",
-                options: [
-                  { text: "repeat", value: "repeat" },
-                  { text: "repeat-x", value: "repeat-x" },
-                  { text: "repeat-y", value: "repeat-y" },
-                  { text: "no-repeat", value: "no-repeat" },
-                  { text: "inherit", value: "inherit" }
-                ]
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "backgroundSize",
-              text: "背景图大小",
-              defaultValue: "100% 100%",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "字体",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "color",
-              text: "颜色",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "colorPicker"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontSize",
-              text: "大小",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "fontWeight",
-              text: "粗细",
-              checkStrictly: false,
-              dataSourceFieldType: ["string", "number"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
-          ]
-        },
-        {
-          type: "fieldset",
-          legend: "变形",
-          name: "transform",
-          items: [
-            {
-              type: "data-source-field-select",
-              name: "rotate",
-              text: "旋转角度",
-              checkStrictly: false,
-              dataSourceFieldType: ["string"],
-              fieldConfig: {
-                type: "text"
-              }
-            },
-            {
-              type: "data-source-field-select",
-              name: "scale",
-              text: "缩放",
-              checkStrictly: false,
-              dataSourceFieldType: ["number", "string"],
-              fieldConfig: {
-                type: "text"
-              }
-            }
+          names: [
+            "display",
+            "flexDirection",
+            "justifyContent",
+            "alignItems",
+            "flexWrap",
+            "marginTop",
+            "marginRight",
+            "marginBottom",
+            "marginLeft",
+            "paddingTop",
+            "paddingRight",
+            "paddingBottom",
+            "paddingLeft",
+            "width",
+            "height",
+            "overflow",
+            "fontSize",
+            "lineHeight",
+            "fontWeight",
+            "color",
+            "textAlign",
+            "backgroundColor",
+            "backgroundImage",
+            "backgroundSize",
+            "backgroundPosition",
+            "backgroundRepeat",
+            "position",
+            "zIndex",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "borderRadius",
+            "borderTopWidth",
+            "borderTopStyle",
+            "borderTopColor",
+            "borderRightColor",
+            "borderRightWidth",
+            "borderRightStyle",
+            "borderRightColor",
+            "borderBottomWidth",
+            "borderBottomStyle",
+            "borderBottomColor",
+            "borderLeftStyle",
+            "borderLeftWidth",
+            "borderLeftColor",
+            "borderWidth",
+            "borderStyle",
+            "borderColor"
           ]
         }
       ]
@@ -2213,8 +1970,8 @@ class Editor extends BaseService {
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
     const node = toRaw(info.node);
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
-    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key) => {
-      if (typeof srcValue === "undefined" && Object.hasOwn(newConfig, key)) {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue, key, object, source) => {
+      if (typeof srcValue === "undefined" && Object.hasOwn(source, key)) {
         return "";
       }
       if (isObject(srcValue) && Array.isArray(objValue)) {
@@ -3272,7 +3029,7 @@ const updateStatus = (nodeStatusMap, id, status) => {
   });
 };
 
-const _sfc_main$U = /* @__PURE__ */ defineComponent({
+const _sfc_main$1n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -3332,9 +3089,9 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$w = { class: "m-fields-code-select-col" };
-const _hoisted_2$i = { class: "code-select-container" };
-const _sfc_main$T = /* @__PURE__ */ defineComponent({
+const _hoisted_1$W = { class: "m-fields-code-select-col" };
+const _hoisted_2$m = { class: "code-select-container" };
+const _sfc_main$1m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCodeSelectCol"
   },
@@ -3430,8 +3187,8 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-code", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$w, [
-        createElementVNode("div", _hoisted_2$i, [
+      return openBlock(), createElementBlock("div", _hoisted_1$W, [
+        createElementVNode("div", _hoisted_2$m, [
           createVNode(unref(MContainer), {
             class: "select",
             config: selectConfig,
@@ -3446,14 +3203,14 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => editCode(_ctx.model[_ctx.name]))
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: !notEditable.value ? unref(Edit) : unref(View)
               }, null, 8, ["icon"])
             ]),
             _: 1
           }, 8, ["size"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$1n, {
           name: "params",
           key: _ctx.model[_ctx.name],
           model: _ctx.model,
@@ -3466,7 +3223,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$S = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsCondOpSelect"
   },
@@ -3552,7 +3309,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "FloatingBox",
   props: /* @__PURE__ */ mergeModels({
     position: { default: () => ({ left: 0, top: 0 }) },
@@ -3707,7 +3464,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
                 onClick: closeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
+                  createVNode(_sfc_main$1s, { icon: unref(Close) }, null, 8, ["icon"])
                 ]),
                 _: 1
               })
@@ -4230,9 +3987,9 @@ const useNodeStatus$1 = (nodeData) => {
   };
 };
 
-const _hoisted_1$v = { class: "m-editor-data-source-fields" };
-const _hoisted_2$h = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
+const _hoisted_1$V = { class: "m-editor-data-source-fields" };
+const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFields"
   },
@@ -4496,12 +4253,12 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$v, [
+      return openBlock(), createElementBlock("div", _hoisted_1$V, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$h, [
+        createElementVNode("div", _hoisted_2$l, [
           createVNode(unref(TMagicButton), {
             size: "small",
             disabled: _ctx.disabled,
@@ -4526,7 +4283,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -4549,7 +4306,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["visible", "width", "height", "title", "position"]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addFromJsonDialogVisible.value,
           "onUpdate:visible": _cache[5] || (_cache[5] = ($event) => addFromJsonDialogVisible.value = $event),
           width: width.value,
@@ -4574,8 +4331,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$u = { class: "m-editor-data-source-field-select" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _hoisted_1$U = { class: "m-editor-data-source-field-select" };
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "FieldSelect",
   props: /* @__PURE__ */ mergeModels({
     value: {},
@@ -4656,7 +4413,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$u, [
+      return openBlock(), createElementBlock("div", _hoisted_1$U, [
         _ctx.checkStrictly ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicSelect), {
             "model-value": selectDataSourceId.value,
@@ -4724,7 +4481,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => editHandler(selectDataSourceId.value))
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, {
+                createVNode(_sfc_main$1s, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -4738,8 +4495,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$t = { class: "m-fields-data-source-field-select" };
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _hoisted_1$T = { class: "m-fields-data-source-field-select" };
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceFieldSelect"
   },
@@ -4840,8 +4597,8 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$P, {
+      return openBlock(), createElementBlock("div", _hoisted_1$T, [
+        showDataSourceFieldSelect.value || !_ctx.config.fieldConfig ? (openBlock(), createBlock(_sfc_main$1i, {
           key: 0,
           "model-value": _ctx.model[_ctx.name],
           disabled: _ctx.disabled,
@@ -4876,7 +4633,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
               onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
+                createVNode(_sfc_main$1s, { icon: unref(Coin) }, null, 8, ["icon"])
               ]),
               _: 1
             }, 8, ["type", "size"])
@@ -4888,10 +4645,10 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$g = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$4 = { class: "el-input__inner t-input__inner" };
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _hoisted_1$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__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceInput"
   },
@@ -5091,12 +4848,12 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$Z, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$1s, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$s, [
+          createElementVNode("div", _hoisted_1$S, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$g, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$k, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -5108,7 +4865,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$4, [
+          createElementVNode("div", _hoisted_3$8, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -5126,7 +4883,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$Z, {
+            createVNode(_sfc_main$1s, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -5137,11 +4894,11 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$f = { style: { "flex": "1" } };
-const _hoisted_3$3 = { style: { "flex": "1" } };
-const _hoisted_4$3 = { class: "dialog-footer" };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _hoisted_1$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__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -5314,7 +5071,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: boxVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => boxVisible.value = $event),
           width: width.value,
@@ -5368,7 +5125,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             fullscreen: ""
           }, {
             footer: withCtx(() => [
-              createElementVNode("span", _hoisted_4$3, [
+              createElementVNode("span", _hoisted_4$5, [
                 createVNode(unref(TMagicButton), {
                   size: "small",
                   onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
@@ -5391,8 +5148,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               ])
             ]),
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$r, [
-                createElementVNode("div", _hoisted_2$f, [
+              createElementVNode("div", _hoisted_1$R, [
+                createElementVNode("div", _hoisted_2$j, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "info"
@@ -5403,7 +5160,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                     _: 1
                   })
                 ]),
-                createElementVNode("div", _hoisted_3$3, [
+                createElementVNode("div", _hoisted_3$7, [
                   createVNode(unref(TMagicTag), {
                     size: "small",
                     type: "success"
@@ -5415,7 +5172,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ]),
-              difVisible.value ? (openBlock(), createBlock(_sfc_main$Y, {
+              difVisible.value ? (openBlock(), createBlock(_sfc_main$1r, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -5434,9 +5191,9 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$q = { class: "m-editor-data-source-methods" };
-const _hoisted_2$e = { class: "m-editor-data-source-methods-footer" };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _hoisted_1$Q = { class: "m-editor-data-source-methods" };
+const _hoisted_2$i = { class: "m-editor-data-source-methods-footer" };
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethods"
   },
@@ -5557,12 +5314,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       codeBlockEditor.value?.hide();
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
+      return openBlock(), createElementBlock("div", _hoisted_1$Q, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$e, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5576,7 +5333,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        codeConfig.value ? (openBlock(), createBlock(_sfc_main$M, {
+        codeConfig.value ? (openBlock(), createBlock(_sfc_main$1f, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -5591,9 +5348,9 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$d = { class: "data-source-method-select-container" };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _hoisted_1$P = { class: "m-fields-data-source-method-select" };
+const _hoisted_2$h = { class: "data-source-method-select-container" };
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMethodSelect"
   },
@@ -5679,8 +5436,8 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
-        createElementVNode("div", _hoisted_2$d, [
+      return openBlock(), createElementBlock("div", _hoisted_1$P, [
+        createElementVNode("div", _hoisted_2$h, [
           createVNode(unref(MContainer), {
             class: "select",
             config: cascaderConfig.value,
@@ -5699,7 +5456,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                 onClick: editCodeHandler
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$Z, {
+                  createVNode(_sfc_main$1s, {
                     icon: !notEditable.value ? unref(Edit) : unref(View)
                   }, null, 8, ["icon"])
                 ]),
@@ -5709,7 +5466,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["content"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$U, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$1n, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -5723,9 +5480,9 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-editor-data-source-fields" };
-const _hoisted_2$c = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _hoisted_1$O = { class: "m-editor-data-source-fields" };
+const _hoisted_2$g = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceMocks"
   },
@@ -5814,7 +5571,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const columns = [
       {
         type: "expand",
-        component: _sfc_main$Y,
+        component: _sfc_main$1r,
         props: (row) => ({
           initValues: row.data,
           language: "json",
@@ -5929,12 +5686,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     const parentFloating = inject("parentFloating", ref(null));
     const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$O, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$c, [
+        createElementVNode("div", _hoisted_2$g, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -5948,7 +5705,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        createVNode(_sfc_main$R, {
+        createVNode(_sfc_main$1k, {
           visible: addDialogVisible.value,
           "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => addDialogVisible.value = $event),
           width: width.value,
@@ -5975,8 +5732,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-data-source-select" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$N = { class: "m-fields-data-source-select" };
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsDataSourceSelect"
   },
@@ -6033,7 +5790,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       eventBus?.emit("edit-data-source", id);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$N, [
         createVNode(unref(MSelect), {
           model: _ctx.model,
           name: _ctx.name,
@@ -6055,7 +5812,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               onClick: editHandler
             }, {
               default: withCtx(() => [
-                createVNode(_sfc_main$Z, {
+                createVNode(_sfc_main$1s, {
                   icon: !notEditable.value ? unref(Edit) : unref(View)
                 }, null, 8, ["icon"])
               ]),
@@ -6069,7 +5826,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   ...{
     name: "m-fields-display-conds"
   },
@@ -6101,7 +5858,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         {
           type: "table",
           name: "cond",
-          operateColWidth: 50,
+          operateColWidth: 100,
+          enableToggleMode: false,
           items: [
             parentFields.value.length ? {
               type: "cascader",
@@ -6200,12 +5958,12 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsEventSelect"
   },
@@ -6481,7 +6239,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$M, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           name: "events",
@@ -6490,7 +6248,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$f, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -6542,29 +6300,29 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$l, _cache[0] || (_cache[0] = [
+      return openBlock(), createElementBlock("svg", _hoisted_1$L, _cache[0] || (_cache[0] = [
         createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2)
       ]));
     };
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-key-value" };
-const _hoisted_2$a = { key: 0 };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$K = { class: "m-fields-key-value" };
+const _hoisted_2$e = { key: 0 };
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsKeyValue"
   },
@@ -6626,8 +6384,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$K, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
             return openBlock(), createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -6676,7 +6434,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["size", "disabled", "icon"])
         ])) : createCommentVNode("", true),
-        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$Y, {
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
           height: "200px",
           "init-values": _ctx.model[_ctx.name],
@@ -6692,7 +6450,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           size: "default",
           disabled: _ctx.disabled,
           link: "",
-          icon: _sfc_main$F,
+          icon: _sfc_main$18,
           onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
         }, null, 8, ["disabled"])) : createCommentVNode("", true)
       ]);
@@ -6700,9 +6458,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-page-fragment-select" };
-const _hoisted_2$9 = { class: "page-fragment-select-container" };
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _hoisted_1$J = { class: "m-fields-page-fragment-select" };
+const _hoisted_2$d = { class: "page-fragment-select-container" };
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MFieldsPageFragmentSelect"
   },
@@ -6748,8 +6506,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
-        createElementVNode("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$J, [
+        createElementVNode("div", _hoisted_2$d, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
@@ -6757,7 +6515,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             size: _ctx.size,
             onChange: changeHandler
           }, null, 8, ["model", "size"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$Z, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$1s, {
             key: 0,
             class: "icon",
             icon: unref(Edit),
@@ -6769,16 +6527,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = {
-  key: 1,
-  class: "m-fields-ui-select",
-  style: { "display": "flex" }
-};
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MFieldsUISelect"
-  },
-  __name: "UISelect",
+const _hoisted_1$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__ */ defineComponent({
+  __name: "BackgroundPosition",
   props: {
     config: {},
     model: {},
@@ -6792,54 +6545,1184 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   },
   emits: ["change"],
   setup(__props, { emit: __emit }) {
-    const props = __props;
     const emit = __emit;
-    const services = inject("services");
-    const mForm = inject("mForm");
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
-    const cancelHandler = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", false);
-      uiSelectMode.value = false;
-      globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
-    };
-    const clickHandler = ({ detail }) => {
-      let { id } = detail;
-      if (detail.nodeType) {
-        id = getIdFromEl()(detail) || id;
-      }
-      if (id) {
-        props.model[props.name] = id;
-        emit("change", id);
-        mForm?.$emit("field-change", props.prop, id);
-      }
-      if (cancelHandler) {
-        cancelHandler();
+    const horizontalList = [
+      {
+        value: "left",
+        text: "左"
+      },
+      {
+        value: "center",
+        text: "中"
+      },
+      {
+        value: "right",
+        text: "右"
       }
-    };
-    const toName = computed(() => {
-      const config = services?.editorService.getNodeById(val.value);
-      return config?.name || "";
-    });
-    const startSelect = () => {
-      if (!services?.uiService) return;
-      services.uiService.set("uiSelectMode", true);
-      uiSelectMode.value = true;
-      globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
-    };
-    const deleteHandler = () => {
-      if (props.model) {
-        props.model[props.name] = "";
-        emit("change", "");
-        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) => {
-      if (!services) return;
-      await services.editorService.select(id);
-      services.editorService.get("stage")?.select(id);
-      services.stageOverlayService.get("stage")?.select(id);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$I, [
+        createElementVNode("div", _hoisted_2$c, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item, index) => {
+            return openBlock(), createBlock(unref(TMagicButton), {
+              key: index,
+              link: "",
+              class: normalizeClass(_ctx.model[_ctx.name] === item.value && "btn-active"),
+              onClick: ($event) => changeHandler(item.value)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: normalizeClass(["position-icon", item.class, _ctx.model[_ctx.name] === item.value && "active"])
+                }, null, 2)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3$6, [
+          createVNode(unref(TMagicInput), {
+            modelValue: _ctx.model[_ctx.name],
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.model[_ctx.name] = $event),
+            size: "small",
+            placeholder: "自定义背景位置",
+            clearable: "",
+            onChange: changeHandler
+          }, null, 8, ["modelValue"])
+        ])
+      ]);
+    };
+  }
+});
+
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main$14 = {};
+
+const _hoisted_1$H = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$k(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$H, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$G, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z",
+      fill: "#333333"
+    }, null, -1)
+  ])))
+}
+const BackgroundRepeatX = /*#__PURE__*/_export_sfc(_sfc_main$13, [['render',_sfc_render$j]]);
+
+const _sfc_main$12 = {};
+
+const _hoisted_1$F = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$i(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$F, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$E, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M912.526651 867.741144 555.540144 510.712681l356.986507-357.000833c11.171434-11.18576 11.171434-29.257348 0-40.443108-11.20111-11.18576-29.272697-11.18576-40.444131 0L515.096013 470.267527 158.096203 113.267716c-11.187807-11.159154-29.258371-11.159154-40.444131 0-11.186783 11.186783-11.186783 29.286 0 40.47176L474.623229 510.712681 117.623419 867.741144c-11.159154 11.172457-11.159154 29.216415 0 40.443108 11.18576 11.17348 29.284977 11.17348 40.47176 0l357.000833-357.027439 356.985484 357.027439c11.171434 11.17348 29.243021 11.17348 40.444131 0C923.698085 896.957559 923.725714 878.913601 912.526651 867.741144z",
+      fill: "#5D5D5D"
+    }, null, -1)
+  ])))
+}
+const BackgroundNoRepeat = /*#__PURE__*/_export_sfc(_sfc_main$11, [['render',_sfc_render$h]]);
+
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  __name: "Background",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "backgroundColor",
+          text: "背景色",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: "backgroundImage",
+          text: "背景图",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "img-upload"
+          }
+        },
+        {
+          name: "backgroundSize",
+          text: "背景尺寸",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "auto", text: "默认", tooltip: "默认 auto" },
+            { value: "contain", text: "等比填充", tooltip: "等比填充 contain" },
+            { value: "cover", text: "等比覆盖", tooltip: "等比覆盖 cover" }
+          ]
+        },
+        {
+          name: "backgroundRepeat",
+          text: "重复显示",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "repeat", icon: markRaw(BackgroundRepeat), tooltip: "垂直和水平方向重复 repeat" },
+            { value: "repeat-x", icon: markRaw(BackgroundRepeatX), tooltip: "水平方向重复 repeat-x" },
+            { value: "repeat-y", icon: markRaw(BackgroundRepeatY), tooltip: "垂直方向重复 repeat-y" },
+            { value: "no-repeat", icon: markRaw(BackgroundNoRepeat), tooltip: "不重复 no-repeat" }
+          ]
+        },
+        {
+          name: "backgroundPosition",
+          text: "背景定位",
+          type: "component",
+          component: _sfc_main$15,
+          labelWidth: "68px"
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MContainer), {
+        config,
+        model: _ctx.values,
+        onChange: change
+      }, null, 8, ["model"]);
+    };
+  }
+});
+
+const _sfc_main$$ = {};
+
+const _hoisted_1$D = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$g(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$D, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$C, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1)
+  ])))
+}
+const AlignCenter = /*#__PURE__*/_export_sfc(_sfc_main$_, [['render',_sfc_render$f]]);
+
+const _sfc_main$Z = {};
+
+const _hoisted_1$B = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$e(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$B, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1)
+  ])))
+}
+const AlignRight = /*#__PURE__*/_export_sfc(_sfc_main$Z, [['render',_sfc_render$e]]);
+
+const _sfc_main$Y = /* @__PURE__ */ defineComponent({
+  __name: "Font",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          type: "row",
+          items: [
+            {
+              labelWidth: "68px",
+              name: "fontSize",
+              text: "字号",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              labelWidth: "68px",
+              name: "lineHeight",
+              text: "行高",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          name: "fontWeight",
+          text: "字重",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["normal", "bold"].concat(
+              Array(7).fill(1).map((x, i) => `${i + 1}00`)
+            ).map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        },
+        {
+          labelWidth: "68px",
+          name: "color",
+          text: "颜色",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: "textAlign",
+          text: "对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "left", icon: markRaw(AlignLeft), tooltip: "左对齐 row" },
+            { value: "center", icon: markRaw(AlignCenter), tooltip: "居中对齐 center" },
+            { value: "right", icon: markRaw(AlignRight), tooltip: "右对齐 right" }
+          ]
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(MContainer), {
+        config,
+        model: _ctx.values,
+        onChange: change
+      }, null, 8, ["model"]);
+    };
+  }
+});
+
+const _hoisted_1$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__ */ defineComponent({
+  __name: "Box",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const list = [
+      {
+        name: "marginTop",
+        class: "outer-top-border"
+      },
+      {
+        name: "marginRight",
+        class: "outer-right-border"
+      },
+      {
+        name: "marginBottom",
+        text: "MARGIN",
+        class: "outer-bottom-border"
+      },
+      {
+        name: "marginLeft",
+        class: "outer-left-border"
+      },
+      {
+        name: "paddingTop",
+        class: "inner-top-border"
+      },
+      {
+        name: "paddingRight",
+        class: "inner-right-border"
+      },
+      {
+        name: "paddingBottom",
+        text: "PADDING",
+        class: "inner-bottom-border"
+      },
+      {
+        name: "paddingLeft",
+        class: "inner-left-border"
+      }
+    ];
+    const emit = __emit;
+    const change = (event, name) => {
+      emit("change", event.target.value, {
+        modifyKey: name
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$A, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
+          return createElementVNode("div", {
+            key: index,
+            class: normalizeClass(item.class)
+          }, [
+            item.text ? (openBlock(), createElementBlock("span", _hoisted_2$b, toDisplayString(item.text), 1)) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_3$5, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
+                title: _ctx.model[item.name],
+                onChange: ($event) => change($event, item.name),
+                placeholder: "0"
+              }, null, 40, _hoisted_4$4), [
+                [vModelText, _ctx.model[item.name]]
+              ])
+            ])
+          ], 2);
+        }), 64))
+      ]);
+    };
+  }
+});
+
+const _sfc_main$W = {};
+
+const _hoisted_1$z = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$d(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$z, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$y, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192zM352 256v512H160V256h192z m256 0v512h-192V256h192z m256 0v512h-192V256h192z" }, null, -1)
+  ])))
+}
+const DisplayFlex = /*#__PURE__*/_export_sfc(_sfc_main$V, [['render',_sfc_render$c]]);
+
+const _sfc_main$U = {};
+
+const _hoisted_1$x = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$b(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$x, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$w, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M960 128a64 64 0 0 1 64 64v640a64 64 0 0 1-64 64H64a64 64 0 0 1-64-64V192a64 64 0 0 1 64-64h896z m0 64H64v640h896V192z m-131.936 158.496c65.984 1.824 109.024 32.512 129.184 92.064l-65.952 15.136-1.856-5.664c-9.984-27.52-30.432-42.112-61.376-43.84-46.72 2.784-71.456 35.296-74.208 97.6 1.856 63.2 26.56 96.64 74.24 100.32 37.536-0.928 59.52-23.36 65.92-67.328L960 559.36l-1.792 7.232c-16.96 63.872-60.352 95.84-130.144 95.84-93.44-4.608-142.464-56.8-147.04-156.672 4.576-98.048 53.6-149.792 147.04-155.296z m-568.928 4.128l114.08 302.336H297.6l-22.016-65.984H160.192L138.24 656.96H64l112.672-302.336h82.464z m278.976 0l7.68 0.32c62.816 3.36 96 27.104 99.52 71.136 0 35.744-19.712 59.552-59.104 71.456 42.144 9.184 65.952 32.544 71.456 70.08 0 59.552-37.568 89.344-112.672 89.344h-148.416v-302.336h141.536z m-4.128 173.152H465.28v81.088h67.328c33.92 0 51.296-13.76 52.224-41.248-2.752-25.632-19.68-38.912-50.848-39.84zM217.92 408.224h-1.376l-0.96 7.36c-1.184 7.232-3.168 13.92-5.92 20.128l-34.336 103.04h87.936l-38.464-104.416-2.624-9.024c-1.6-5.888-3.04-11.584-4.256-17.088z m309.184-2.752H465.28v71.456h61.824c29.344-0.928 44.448-13.76 45.376-38.464-0.96-22.016-16.032-32.992-45.376-32.992z" }, null, -1)
+  ])))
+}
+const DisplayInlineBlock = /*#__PURE__*/_export_sfc(_sfc_main$T, [['render',_sfc_render$a]]);
+
+const _sfc_main$S = {};
+
+const _hoisted_1$v = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$9(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$v, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$u, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1)
+  ])))
+}
+const FlexDirectionColumn = /*#__PURE__*/_export_sfc(_sfc_main$R, [['render',_sfc_render$8]]);
+
+const _sfc_main$Q = {};
+
+const _hoisted_1$t = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$7(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$t, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$s, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1)
+  ])))
+}
+const FlexDirectionRow = /*#__PURE__*/_export_sfc(_sfc_main$P, [['render',_sfc_render$6]]);
+
+const _sfc_main$O = {};
+
+const _hoisted_1$r = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$5(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$r, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$q, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1)
+  ])))
+}
+const JustifyContentCenter = /*#__PURE__*/_export_sfc(_sfc_main$N, [['render',_sfc_render$4]]);
+
+const _sfc_main$M = {};
+
+const _hoisted_1$p = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$3(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$p, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$o, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1)
+  ])))
+}
+const JustifyContentFlexStart = /*#__PURE__*/_export_sfc(_sfc_main$L, [['render',_sfc_render$2]]);
+
+const _sfc_main$K = {};
+
+const _hoisted_1$n = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+
+function _sfc_render$1(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$n, _cache[0] || (_cache[0] = [
+    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 (openBlock(), createElementBlock("svg", _hoisted_1$m, _cache[0] || (_cache[0] = [
+    createElementVNode("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1)
+  ])))
+}
+const JustifyContentSpaceBetween = /*#__PURE__*/_export_sfc(_sfc_main$J, [['render',_sfc_render]]);
+
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
+  __name: "Layout",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "display",
+          text: "模式",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "inline", icon: markRaw(DisplayInline), tooltip: "内联布局 inline" },
+            { value: "flex", icon: markRaw(DisplayFlex), tooltip: "弹性布局 flex" },
+            { value: "block", icon: markRaw(DisplayBlock), tooltip: "块级布局 block" },
+            { value: "inline-block", icon: markRaw(DisplayInlineBlock), tooltip: "内联块布局 inline-block" },
+            { value: "none", icon: markRaw(DisplayNone), tooltip: "隐藏 none" }
+          ]
+        },
+        {
+          name: "flexDirection",
+          text: "主轴方向",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "row", icon: markRaw(FlexDirectionRow), tooltip: "水平方向 起点在左侧 row" },
+            { value: "row-reverse", icon: markRaw(FlexDirectionRowReverse), tooltip: "水平方向 起点在右侧 row-reverse" },
+            { value: "column", icon: markRaw(FlexDirectionColumn), tooltip: "垂直方向 起点在上沿 column" },
+            {
+              value: "column-reverse",
+              icon: markRaw(FlexDirectionColumnReverse),
+              tooltip: "垂直方向 起点在下沿 column-reverse"
+            }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "justifyContent",
+          text: "主轴对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "flex-start", icon: markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+            { value: "flex-end", icon: markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+            { value: "center", icon: markRaw(JustifyContentCenter), tooltip: "居中 center" },
+            { value: "space-between", icon: markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+            { value: "space-around", icon: markRaw(JustifyContentSpaceAround), tooltip: "横向平分 space-around" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "alignItems",
+          text: "辅轴对齐",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "flex-start", icon: markRaw(JustifyContentFlexStart), tooltip: "左对齐 flex-start" },
+            { value: "flex-end", icon: markRaw(JustifyContentFlexEnd), tooltip: "右对齐 flex-end" },
+            { value: "center", icon: markRaw(JustifyContentCenter), tooltip: "居中 center" },
+            { value: "space-between", icon: markRaw(JustifyContentSpaceBetween), tooltip: "两端对齐 space-between" },
+            { value: "space-around", icon: markRaw(JustifyContentSpaceAround), tooltip: "横向平分 space-around" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          name: "flexWrap",
+          text: "换行",
+          type: "radioGroup",
+          childType: "button",
+          labelWidth: "68px",
+          options: [
+            { value: "nowrap", text: "不换行", tooltip: "不换行 nowrap" },
+            { value: "wrap", text: "正换行", tooltip: "第一行在上方 wrap" },
+            { value: "wrap-reverse", text: "逆换行", tooltip: "第一行在下方 wrap-reverse" }
+          ],
+          display: (mForm, { model }) => model.display === "flex"
+        },
+        {
+          type: "row",
+          items: [
+            {
+              name: "width",
+              text: "宽度",
+              labelWidth: "68px",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            },
+            {
+              name: "height",
+              text: "宽度",
+              labelWidth: "68px",
+              type: "data-source-field-select",
+              fieldConfig: {
+                type: "text"
+              }
+            }
+          ]
+        },
+        {
+          type: "data-source-field-select",
+          text: "overflow",
+          name: "overflow",
+          checkStrictly: false,
+          dataSourceFieldType: ["string"],
+          fieldConfig: {
+            type: "select",
+            clearable: true,
+            allowCreate: true,
+            options: [
+              { text: "visible", value: "visible" },
+              { text: "hidden", value: "hidden" },
+              { text: "clip", value: "clip" },
+              { text: "scroll", value: "scroll" },
+              { text: "auto", value: "auto" },
+              { text: "overlay", value: "overlay" },
+              { text: "initial", value: "initial" }
+            ]
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        createVNode(_sfc_main$X, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"])
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$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__ */ defineComponent({
+  __name: "Position",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const list = [
+      {
+        name: "top",
+        class: "outer-top-border"
+      },
+      {
+        name: "right",
+        class: "outer-right-border"
+      },
+      {
+        name: "bottom",
+        class: "outer-bottom-border"
+      },
+      {
+        name: "left",
+        class: "outer-left-border"
+      }
+    ];
+    const emit = __emit;
+    const change = (event, name) => {
+      emit("change", event.target.value, {
+        modifyKey: name
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
+          return createElementVNode("div", {
+            key: index,
+            class: normalizeClass(item.class)
+          }, [
+            createElementVNode("span", _hoisted_2$a, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": ($event) => _ctx.model[item.name] = $event,
+                title: _ctx.model[item.name],
+                onChange: ($event) => change($event, item.name),
+                placeholder: "0"
+              }, null, 40, _hoisted_3$4), [
+                [vModelText, _ctx.model[item.name]]
+              ])
+            ])
+          ], 2);
+        }), 64))
+      ]);
+    };
+  }
+});
+
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
+  __name: "Position",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          name: "position",
+          text: "定位",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["static", "relative", "absolute", "fixed", "sticky"].map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        },
+        {
+          labelWidth: "68px",
+          name: "zIndex",
+          text: "zIndex",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        withDirectives(createVNode(_sfc_main$H, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]), [
+          [vShow, _ctx.values["position"] !== "static"]
+        ])
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$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__ */ defineComponent({
+  __name: "Border",
+  props: {
+    model: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const direction = ref("");
+    const config = computed(() => ({
+      items: [
+        {
+          name: `border${direction.value}Width`,
+          text: "边框宽度",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        },
+        {
+          name: `border${direction.value}Color`,
+          text: "边框颜色",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "colorPicker"
+          }
+        },
+        {
+          name: `border${direction.value}Style`,
+          text: "边框样式",
+          labelWidth: "68px",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "select",
+            options: ["solid", "dashed", "dotted"].map((item) => ({
+              value: item,
+              text: item
+            }))
+          }
+        }
+      ]
+    }));
+    const selectDirection = (d) => direction.value = d || "";
+    const emit = __emit;
+    const change = (value, eventData) => {
+      eventData.changeRecords?.forEach((record) => {
+        emit("change", record.value, {
+          modifyKey: record.propPath
+        });
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", _hoisted_2$9, [
+          createElementVNode("div", _hoisted_3$3, [
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-top", { active: direction.value === "Top" }]),
+              onClick: _cache[0] || (_cache[0] = ($event) => selectDirection("Top"))
+            }, null, 2)
+          ]),
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-left", { active: direction.value === "Left" }]),
+              onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
+            }, null, 2),
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon", { active: direction.value === "" }]),
+              onClick: _cache[2] || (_cache[2] = ($event) => selectDirection())
+            }, null, 2),
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-right", { active: direction.value === "Right" }]),
+              onClick: _cache[3] || (_cache[3] = ($event) => selectDirection("Right"))
+            }, null, 2)
+          ]),
+          createElementVNode("div", _hoisted_5$1, [
+            createElementVNode("div", {
+              class: normalizeClass(["border-icon border-icon-bottom", { active: direction.value === "Bottom" }]),
+              onClick: _cache[4] || (_cache[4] = ($event) => selectDirection("Bottom"))
+            }, null, 2)
+          ])
+        ]),
+        createElementVNode("div", _hoisted_6, [
+          createVNode(unref(MContainer), {
+            config: config.value,
+            model: _ctx.model,
+            onChange: change
+          }, null, 8, ["config", "model"])
+        ])
+      ]);
+    };
+  }
+});
+
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  __name: "Border",
+  props: {
+    values: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const config = {
+      items: [
+        {
+          labelWidth: "68px",
+          name: "borderRadius",
+          text: "圆角",
+          type: "data-source-field-select",
+          fieldConfig: {
+            type: "text"
+          }
+        }
+      ]
+    };
+    const change = (value, eventData) => {
+      emit("change", value, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(MContainer), {
+          config,
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"]),
+        createVNode(_sfc_main$F, {
+          model: _ctx.values,
+          onChange: change
+        }, null, 8, ["model"])
+      ], 64);
+    };
+  }
+});
+
+const _hoisted_1$j = { class: "m-fields-style-setter" };
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsStyleSetter"
+  },
+  __name: "Index",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const list = [
+      {
+        name: "font",
+        title: "布局",
+        component: _sfc_main$I
+      },
+      {
+        title: "位置",
+        component: _sfc_main$G
+      },
+      {
+        title: "背景",
+        component: _sfc_main$10
+      },
+      {
+        title: "文字",
+        component: _sfc_main$Y
+      },
+      {
+        title: "边框与圆角",
+        component: _sfc_main$E
+      }
+    ];
+    const collapseValue = shallowRef(
+      Array(list.length).fill(1).map((x, i) => `${i}`)
+    );
+    const change = (v, eventData) => {
+      emit("change", v, eventData);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+        createVNode(unref(TMagicCollapse), { "model-value": collapseValue.value }, {
+          default: withCtx(() => [
+            (openBlock(), createElementBlock(Fragment, null, renderList(list, (item, index) => {
+              return createVNode(unref(TMagicCollapseItem), {
+                key: index,
+                name: `${index}`
+              }, {
+                title: withCtx(() => [
+                  createVNode(_sfc_main$1s, { icon: unref(Grid) }, null, 8, ["icon"]),
+                  createTextVNode(toDisplayString(item.title), 1)
+                ]),
+                default: withCtx(() => [
+                  item.component ? (openBlock(), createBlock(resolveDynamicComponent(item.component), {
+                    key: 0,
+                    values: _ctx.model[_ctx.name],
+                    onChange: change
+                  }, null, 40, ["values"])) : createCommentVNode("", true)
+                ]),
+                _: 2
+              }, 1032, ["name"]);
+            }), 64))
+          ]),
+          _: 1
+        }, 8, ["model-value"])
+      ]);
+    };
+  }
+});
+
+const _hoisted_1$i = {
+  key: 1,
+  class: "m-fields-ui-select",
+  style: { "display": "flex" }
+};
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MFieldsUISelect"
+  },
+  __name: "UISelect",
+  props: {
+    config: {},
+    model: {},
+    initValues: {},
+    values: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean },
+    size: {},
+    lastValues: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const services = inject("services");
+    const mForm = inject("mForm");
+    const val = computed(() => props.model[props.name]);
+    const uiSelectMode = ref(false);
+    const cancelHandler = () => {
+      if (!services?.uiService) return;
+      services.uiService.set("uiSelectMode", false);
+      uiSelectMode.value = false;
+      globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+    };
+    const clickHandler = ({ detail }) => {
+      let { id } = detail;
+      if (detail.nodeType) {
+        id = getIdFromEl()(detail) || id;
+      }
+      if (id) {
+        props.model[props.name] = id;
+        emit("change", id);
+        mForm?.$emit("field-change", props.prop, id);
+      }
+      if (cancelHandler) {
+        cancelHandler();
+      }
+    };
+    const toName = computed(() => {
+      const config = services?.editorService.getNodeById(val.value);
+      return config?.name || "";
+    });
+    const startSelect = () => {
+      if (!services?.uiService) return;
+      services.uiService.set("uiSelectMode", true);
+      uiSelectMode.value = true;
+      globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
+    };
+    const deleteHandler = () => {
+      if (props.model) {
+        props.model[props.name] = "";
+        emit("change", "");
+        mForm?.$emit("field-change", props.prop, "");
+      }
+    };
+    const selectNode = async (id) => {
+      if (!services) return;
+      await services.editorService.select(id);
+      services.editorService.get("stage")?.select(id);
+      services.stageOverlayService.get("stage")?.select(id);
     };
     const highlight = throttle((id) => {
       if (!services) return;
@@ -7211,7 +8094,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7229,7 +8112,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
             title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -7313,7 +8196,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       return showAddPageButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$g, [
         createVNode(unref(TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
           reference: withCtx(() => [
-            createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
           ]),
           default: withCtx(() => [
             createVNode(_sfc_main$z, {
@@ -7481,14 +8364,14 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-left-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$Z, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$1s, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-item-right-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$Z, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$1s, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -7598,7 +8481,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createVNode(_sfc_main$Z, {
+        createVNode(_sfc_main$1s, {
           icon: unref(Search),
           onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
           class: normalizeClass({ "icon-active": visible.value })
@@ -7822,7 +8705,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(unref(NodeType).PAGE))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[2] || (_cache[2] = createElementVNode("p", null, "新增页面", -1))
           ]),
@@ -7832,7 +8715,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => clickHandler(unref(NodeType).PAGE_FRAGMENT))
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$Z, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$1s, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _cache[3] || (_cache[3] = createElementVNode("p", null, "新增页面片", -1))
           ])) : createCommentVNode("", true)
@@ -7924,7 +8807,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$Y, {
+          createVNode(_sfc_main$1r, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
@@ -8222,7 +9105,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     });
     const internalInstance = getCurrentInstance();
     onMounted(() => {
-      emit("mounted", internalInstance);
+      emit("mounted", internalInstance?.proxy);
     });
     const submit = async (v, eventData) => {
       try {
@@ -8270,11 +9153,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           onClick: _cache[0] || (_cache[0] = ($event) => showSrc.value = !showSrc.value)
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Z, { icon: unref(Document) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Document) }, null, 8, ["icon"])
           ]),
           _: 1
         }, 8, ["type"])) : createCommentVNode("", true),
-        showSrc.value ? (openBlock(), createBlock(_sfc_main$Y, {
+        showSrc.value ? (openBlock(), createBlock(_sfc_main$1r, {
           key: 1,
           class: "m-editor-props-panel-src-code",
           height: `${unref(editorContentHeight)}px`,
@@ -8312,7 +9195,10 @@ const useStylePanel = (services) => {
   };
 };
 
-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__ */ defineComponent({
   ...{
@@ -8356,7 +9242,18 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
         if (!v.id) {
           v.id = values.value.id;
         }
-        services?.editorService.update(v, { changeRecords: eventData?.changeRecords });
+        const newValue = {
+          ...v,
+          style: {}
+        };
+        if (v.style) {
+          Object.entries(v.style).forEach(([key, value]) => {
+            if (value !== "" && newValue.style) {
+              newValue.style[key] = value;
+            }
+          });
+        }
+        services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
       } catch (e) {
         emit("submit-error", e);
       }
@@ -8367,6 +9264,16 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     const mountedHandler = (e) => {
       emit("mounted", e);
     };
+    const propsPanelEl = useTemplateRef("propsPanel");
+    const widthChange = ({ deltaX }) => {
+      if (!propsPanelEl.value) {
+        return;
+      }
+      const width = globalThis.parseFloat(
+        getComputedStyle(propsPanelEl.value).getPropertyValue("--props-style-panel-width")
+      );
+      propsPanelEl.value.style.setProperty("--props-style-panel-width", `${width - deltaX}px`);
+    };
     const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
     const propertyFormPanelRef = useTemplateRef("propertyFormPanel");
     __expose({
@@ -8390,8 +9297,12 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           onFormError: errorHandler,
           onMounted: mountedHandler
         }, null, 8, ["class", "config", "values", "disabledShowSrc", "extendState"]),
-        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$q, {
+        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$B, {
           key: 0,
+          onChange: widthChange
+        })) : createCommentVNode("", true),
+        unref(showStylePanel) ? (openBlock(), createBlock(_sfc_main$q, {
+          key: 1,
           class: "m-editor-props-style-panel",
           "label-position": "top",
           "code-value-key": "style",
@@ -8413,7 +9324,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
                   onClick: unref(closeStylePanelHandler)
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$Z, { icon: unref(Close) }, null, 8, ["icon"])
+                    createVNode(_sfc_main$1s, { icon: unref(Close) }, null, 8, ["icon"])
                   ]),
                   _: 1
                 }, 8, ["onClick"])
@@ -8423,14 +9334,14 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           _: 1
         }, 8, ["values", "disabledShowSrc", "extendState"])) : createCommentVNode("", true),
         !unref(showStylePanel) ? (openBlock(), createBlock(unref(TMagicButton), {
-          key: 1,
+          key: 2,
           class: "m-editor-props-panel-style-icon",
           circle: "",
           type: unref(showStylePanel) ? "primary" : "",
           onClick: unref(showStylePanelHandler)
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$Z, { icon: unref(Sugar) }, null, 8, ["icon"])
+            createVNode(_sfc_main$1s, { icon: unref(Sugar) }, null, 8, ["icon"])
           ]),
           _: 1
         }, 8, ["type", "onClick"])) : createCommentVNode("", true)
@@ -8730,7 +9641,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           onContextmenu: nodeContentmenuHandler,
           onMouseenter: mouseenterHandler
         }, [
-          createVNode(_sfc_main$Z, {
+          createVNode(_sfc_main$1s, {
             class: "expand-icon",
             style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
             icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
@@ -8980,7 +9891,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editCode(`${data.key}`), ["stop"])
@@ -8995,7 +9906,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => deleteCode(`${data.key}`), ["stop"])
@@ -9156,7 +10067,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$1f, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -9256,7 +10167,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$R, {
+      return openBlock(), createBlock(_sfc_main$1k, {
         visible: boxVisible.value,
         "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => boxVisible.value = $event),
         width: width.value,
@@ -9420,7 +10331,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: editable.value ? unref(Edit) : unref(View),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => editHandler(`${data.key}`), ["stop"])
@@ -9435,7 +10346,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             placement: "bottom"
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$Z, {
+              createVNode(_sfc_main$1s, {
                 icon: unref(Close),
                 class: "edit-icon",
                 onClick: withModifiers(($event) => removeHandler(`${data.key}`), ["stop"])
@@ -9874,12 +10785,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$Z, {
+        _ctx.data.visible === false ? (openBlock(), createBlock(_sfc_main$1s, {
           key: 0,
           icon: unref(Hide),
           onClick: _cache[0] || (_cache[0] = withModifiers(($event) => setNodeVisible(true), ["stop"])),
           title: "点击显示"
-        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$Z, {
+        }, null, 8, ["icon"])) : (openBlock(), createBlock(_sfc_main$1s, {
           key: 1,
           icon: unref(View),
           onClick: _cache[1] || (_cache[1] = withModifiers(($event) => setNodeVisible(false), ["stop"])),
@@ -10540,7 +11451,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       name: `${index}`
                     }, {
                       title: withCtx(() => [
-                        createVNode(_sfc_main$Z, { icon: unref(Grid) }, null, 8, ["icon"]),
+                        createVNode(_sfc_main$1s, { icon: unref(Grid) }, null, 8, ["icon"]),
                         createTextVNode(toDisplayString(group.title), 1)
                       ]),
                       default: withCtx(() => [
@@ -10561,7 +11472,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                                 content: item.desc
                               }, {
                                 default: withCtx(() => [
-                                  createVNode(_sfc_main$Z, {
+                                  createVNode(_sfc_main$1s, {
                                     icon: item.icon
                                   }, null, 8, ["icon"])
                                 ]),
@@ -10752,7 +11663,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
                 onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
               }, [
-                config.icon ? (openBlock(), createBlock(_sfc_main$Z, {
+                config.icon ? (openBlock(), createBlock(_sfc_main$1s, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -10898,7 +11809,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         (openBlock(), createBlock(Teleport, { to: "body" }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock(Fragment, null, [
-              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$R, {
+              unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$1k, {
                 key: config.$key ?? index,
                 visible: unref(floatBoxStates)[config.$key].status,
                 "onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
@@ -11201,7 +12112,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         })) : createCommentVNode("", true),
-        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$R, {
+        page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$1k, {
           key: 1,
           ref_key: "box",
           ref: box,
@@ -13379,25 +14290,26 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
     app.component(`${_sfc_main.name || "MEditor"}`, _sfc_main);
-    app.component("magic-code-editor", _sfc_main$Y);
+    app.component("magic-code-editor", _sfc_main$1r);
     app.component("m-fields-ui-select", _sfc_main$C);
-    app.component("m-fields-code-link", _sfc_main$W);
-    app.component("m-fields-vs-code", _sfc_main$X);
-    app.component("m-fields-code-select", _sfc_main$V);
-    app.component("m-fields-code-select-col", _sfc_main$T);
-    app.component("m-fields-event-select", _sfc_main$G);
-    app.component("m-fields-data-source-fields", _sfc_main$Q);
-    app.component("m-fields-data-source-mocks", _sfc_main$J);
-    app.component("m-fields-key-value", _sfc_main$E);
-    app.component("m-fields-data-source-input", _sfc_main$N);
-    app.component("m-fields-data-source-select", _sfc_main$I);
-    app.component("m-fields-data-source-methods", _sfc_main$L);
-    app.component("m-fields-data-source-method-select", _sfc_main$K);
-    app.component("m-fields-data-source-field-select", _sfc_main$O);
-    app.component("m-fields-page-fragment-select", _sfc_main$D);
-    app.component("m-fields-display-conds", _sfc_main$H);
-    app.component("m-fields-cond-op-select", _sfc_main$S);
+    app.component("m-fields-code-link", _sfc_main$1p);
+    app.component("m-fields-vs-code", _sfc_main$1q);
+    app.component("m-fields-code-select", _sfc_main$1o);
+    app.component("m-fields-code-select-col", _sfc_main$1m);
+    app.component("m-fields-event-select", _sfc_main$19);
+    app.component("m-fields-data-source-fields", _sfc_main$1j);
+    app.component("m-fields-data-source-mocks", _sfc_main$1c);
+    app.component("m-fields-key-value", _sfc_main$17);
+    app.component("m-fields-data-source-input", _sfc_main$1g);
+    app.component("m-fields-data-source-select", _sfc_main$1b);
+    app.component("m-fields-data-source-methods", _sfc_main$1e);
+    app.component("m-fields-data-source-method-select", _sfc_main$1d);
+    app.component("m-fields-data-source-field-select", _sfc_main$1h);
+    app.component("m-fields-page-fragment-select", _sfc_main$16);
+    app.component("m-fields-display-conds", _sfc_main$1a);
+    app.component("m-fields-cond-op-select", _sfc_main$1l);
+    app.component("m-form-style-setter", _sfc_main$D);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$V as CodeSelect, _sfc_main$T as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$S as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$O as DataSourceFieldSelect, _sfc_main$Q as DataSourceFields, _sfc_main$N as DataSourceInput, _sfc_main$K as DataSourceMethodSelect, _sfc_main$L as DataSourceMethods, _sfc_main$J as DataSourceMocks, _sfc_main$I as DataSourceSelect, _sfc_main$H as DisplayConds, DragType, _sfc_main$G as EventSelect, Fixed2Other, _sfc_main$R as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$Z as Icon, IdleTask, KeyBindingCommand, _sfc_main$E as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$D as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$Y as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$1f as CodeBlockEditor, _sfc_main$k as CodeBlockList, _sfc_main$j as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$1o as CodeSelect, _sfc_main$1m as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$1l as CondOpSelect, _sfc_main$o as ContentMenu, _sfc_main$i as DataSourceConfigPanel, _sfc_main$1h as DataSourceFieldSelect, _sfc_main$1j as DataSourceFields, _sfc_main$1g as DataSourceInput, _sfc_main$1d as DataSourceMethodSelect, _sfc_main$1e as DataSourceMethods, _sfc_main$1c as DataSourceMocks, _sfc_main$1b as DataSourceSelect, _sfc_main$1a as DisplayConds, DragType, _sfc_main$19 as EventSelect, Fixed2Other, _sfc_main$1k as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$1s as Icon, IdleTask, KeyBindingCommand, _sfc_main$17 as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$16 as PageFragmentSelect, _sfc_main$q as PropsFormPanel, _sfc_main$p as PropsPanel, _sfc_main$B as Resizer, ScrollViewer, SideItemKey, _sfc_main$A as SplitView, _sfc_main$D as StyleSetter, _sfc_main$1r as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$z as ToolButton, _sfc_main$l as Tree, _sfc_main$m as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, eqOptions, error, eventTabConfig, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isIncludeDataSource, log, moveItemsInContainer, numberOptions, propsService, removeDataSourceFieldPrefix, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlayService, storageService, styleTabConfig, uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus$1 as useNodeStatus, useStage, useWindowRect, warn };