@tmagic/editor 1.3.3 → 1.3.5

package/dist/tmagic-editor.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, provide, Transition, toHandlers, mergeDefaults } from 'vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, provide, Transition, toHandlers, mergeDefaults } from 'vue';
 import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, ArrowRight, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
@@ -7,7 +7,7 @@ import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagi
 import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
-import { guid, isPop, getNodePath, isNumber, isPage, toLine, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getDefaultValueFromFields, getKeys, addClassName, removeClassName, removeClassNameByClassName, getNodes } from '@tmagic/utils';
+import { guid, isPop, getNodePath, isNumber, isPage, toLine, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
 import Gesto from 'gesto';
 import Moveable from 'moveable';
 import { DepTargetType, Watcher, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
@@ -407,7 +407,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$w = { style: { "display": "flex", "margin-bottom": "10px" } };
 const _hoisted_2$p = { style: { "flex": "1" } };
-const _hoisted_3$b = { style: { "flex": "1" } };
+const _hoisted_3$c = { style: { "flex": "1" } };
 const _hoisted_4$7 = { class: "dialog-footer" };
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
@@ -665,7 +665,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              createElementVNode("div", _hoisted_3$b, [
+              createElementVNode("div", _hoisted_3$c, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "success"
@@ -770,6 +770,7 @@ const HttpFormConfig = [
         name: "data",
         type: "key-value",
         defaultValue: {},
+        advanced: true,
         text: "请求体"
       },
       {
@@ -2531,7 +2532,9 @@ class Editor extends BaseService {
   async update(config) {
     const nodes = Array.isArray(config) ? config : [config];
     const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
-    this.pushHistoryState();
+    if (newNodes[0]?.type !== NodeType.ROOT) {
+      this.pushHistoryState();
+    }
     this.emit("update", newNodes);
     return Array.isArray(config) ? newNodes : newNodes[0];
   }
@@ -3284,7 +3287,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       },
       {
         label: "属性描述",
-        prop: "desc"
+        prop: "description"
       },
       {
         label: "默认值",
@@ -3415,6 +3418,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       data: {}
     });
     const newFromJsonHandler = () => {
+      jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
       addFromJsonDialog.value?.show();
     };
     const getValueType = (value) => {
@@ -3432,33 +3436,35 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         return "string";
       return "any";
     };
-    const getFieldsConfig = (value) => {
+    const getFieldsConfig = (value, fields = []) => {
       if (!value || typeof value !== "object")
         throw new Error("数据格式错误");
-      const fields = [];
+      const newFields = [];
       Object.entries(value).forEach(([key, value2]) => {
         const type = getValueType(value2);
+        const oldField = fields.find((field) => field.name === key);
         let childFields = [];
         if (Array.isArray(value2) && value2.length > 0) {
-          childFields = getFieldsConfig(value2[0]);
+          childFields = getFieldsConfig(value2[0], oldField?.fields);
         } else if (type === "object") {
-          childFields = getFieldsConfig(value2);
+          childFields = getFieldsConfig(value2, oldField?.fields);
         }
-        fields.push({
+        newFields.push({
           name: key,
-          title: key,
+          title: oldField?.title || key,
           type,
+          description: oldField?.description || "",
+          enable: oldField?.enable ?? true,
           defaultValue: value2,
           fields: childFields
         });
       });
-      return fields;
+      return newFields;
     };
     const addFromJsonFromChange = ({ data }) => {
-      console.log(data);
       try {
         const value = JSON.parse(data);
-        props.model[props.name] = getFieldsConfig(value);
+        props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
         addFromJsonDialog.value?.hide();
         emit("change", props.model[props.name]);
       } catch (e) {
@@ -3580,7 +3586,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1$s = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
 const _hoisted_2$m = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$a = { class: "el-input__inner" };
+const _hoisted_3$b = { class: "el-input__inner" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
@@ -3788,7 +3794,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$a, [
+          createElementVNode("div", _hoisted_3$b, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -4676,9 +4682,32 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-fields-key-value" };
-const _hoisted_2$h = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _hoisted_1$n = {
+  viewBox: "0 0 32 32",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  "xmlns:xlink": "http://www.w3.org/1999/xlink"
+};
+const _hoisted_2$h = /* @__PURE__ */ 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_4$6 = [
+  _hoisted_2$h
+];
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeIcon"
+  },
+  __name: "CodeIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$n, _hoisted_4$6);
+    };
+  }
+});
+
+const _hoisted_1$m = { class: "m-fields-key-value" };
+const _hoisted_2$g = { key: 0 };
+const _hoisted_3$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4699,8 +4728,16 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const records = ref([]);
+    const showCode = ref(false);
     watchEffect(() => {
-      records.value = Object.entries(props.model[props.name] || {});
+      const initValues = Object.entries(props.model[props.name] || {});
+      for (const [, value] of initValues) {
+        if (typeof value !== "string") {
+          showCode.value = true;
+          break;
+        }
+      }
+      records.value = initValues;
     });
     const getValue = () => {
       const record = {};
@@ -4724,66 +4761,90 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
       emit("change", getValue());
     };
+    const save = (v) => {
+      emit("change", v);
+    };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
-          return openBlock(), createElementBlock("div", {
-            class: "m-fields-key-value-item",
-            key: index
-          }, [
-            createVNode(unref(TMagicInput), {
-              placeholder: "key",
-              modelValue: records.value[index][0],
-              "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
-              disabled: _ctx.disabled,
-              size: _ctx.size,
-              onChange: keyChangeHandler
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$h,
-            createVNode(unref(TMagicInput), {
-              placeholder: "value",
-              modelValue: records.value[index][1],
-              "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
-              disabled: _ctx.disabled,
-              size: _ctx.size,
-              onChange: valueChangeHandler
-            }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            createVNode(unref(TMagicButton), {
-              class: "m-fileds-key-value-delete",
-              type: "danger",
-              size: _ctx.size,
-              disabled: _ctx.disabled,
-              circle: "",
-              plain: "",
-              icon: unref(Delete),
-              onClick: ($event) => deleteHandler(index)
-            }, null, 8, ["size", "disabled", "icon", "onClick"])
-          ]);
-        }), 128)),
-        createVNode(unref(TMagicButton), {
-          type: "primary",
-          size: _ctx.size,
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        !showCode.value ? (openBlock(), createElementBlock("div", _hoisted_2$g, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              class: "m-fields-key-value-item",
+              key: index
+            }, [
+              createVNode(unref(TMagicInput), {
+                placeholder: "key",
+                modelValue: records.value[index][0],
+                "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
+                disabled: _ctx.disabled,
+                size: _ctx.size,
+                onChange: keyChangeHandler
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
+              _hoisted_3$a,
+              createVNode(unref(TMagicInput), {
+                placeholder: "value",
+                modelValue: records.value[index][1],
+                "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
+                disabled: _ctx.disabled,
+                size: _ctx.size,
+                onChange: valueChangeHandler
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
+              createVNode(unref(TMagicButton), {
+                class: "m-fileds-key-value-delete",
+                type: "danger",
+                size: _ctx.size,
+                disabled: _ctx.disabled,
+                circle: "",
+                plain: "",
+                icon: unref(Delete),
+                onClick: ($event) => deleteHandler(index)
+              }, null, 8, ["size", "disabled", "icon", "onClick"])
+            ]);
+          }), 128)),
+          createVNode(unref(TMagicButton), {
+            type: "primary",
+            size: _ctx.size,
+            disabled: _ctx.disabled,
+            plain: "",
+            icon: unref(Plus),
+            onClick: addHandler
+          }, {
+            default: withCtx(() => [
+              createTextVNode("添加")
+            ]),
+            _: 1
+          }, 8, ["size", "disabled", "icon"])
+        ])) : createCommentVNode("", true),
+        _ctx.config.advanced && showCode.value ? (openBlock(), createBlock(_sfc_main$T, {
+          key: 1,
+          height: "200px",
+          "init-values": _ctx.model[_ctx.name],
+          language: "json",
+          options: {
+            readOnly: _ctx.disabled
+          },
+          parse: true,
+          onSave: save
+        }, null, 8, ["init-values", "options"])) : createCommentVNode("", true),
+        _ctx.config.advanced ? (openBlock(), createBlock(unref(TMagicButton), {
+          key: 2,
+          size: "default",
           disabled: _ctx.disabled,
-          plain: "",
-          icon: unref(Plus),
-          onClick: addHandler
-        }, {
-          default: withCtx(() => [
-            createTextVNode("添加")
-          ]),
-          _: 1
-        }, 8, ["size", "disabled", "icon"])
+          text: "",
+          icon: _sfc_main$D,
+          onClick: _cache[0] || (_cache[0] = ($event) => showCode.value = !showCode.value)
+        }, null, 8, ["disabled"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const _hoisted_1$m = {
+const _hoisted_1$l = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -4873,7 +4934,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$l, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -4970,7 +5031,7 @@ const useGetSo = (target, emit) => {
   };
 };
 
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -4992,7 +5053,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -5119,7 +5180,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$B, { onChange: changeLeft })
+          createVNode(_sfc_main$A, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -5128,7 +5189,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$B, { onChange: changeRight }),
+          createVNode(_sfc_main$A, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -5141,10 +5202,10 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-editor-empty-panel" };
-const _hoisted_2$g = { class: "m-editor-empty-content" };
+const _hoisted_1$k = { class: "m-editor-empty-panel" };
+const _hoisted_2$f = { class: "m-editor-empty-content" };
 const _hoisted_3$9 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -5164,8 +5225,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
-        createElementVNode("div", _hoisted_2$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", _hoisted_2$f, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
@@ -5185,7 +5246,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -5266,7 +5327,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$A, {
+        ]) : (openBlock(), createBlock(_sfc_main$z, {
           key: 1,
           ref_key: "splitView",
           ref: splitView,
@@ -5288,7 +5349,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$z)
+              createVNode(_sfc_main$y)
             ])
           ]),
           _: 2
@@ -5313,12 +5374,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = {
+const _hoisted_1$j = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$f = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_2$e = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -5397,7 +5458,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$j, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -5462,7 +5523,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$f, [
+            createElementVNode("span", _hoisted_2$e, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -5479,7 +5540,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5641,7 +5702,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$x, {
+              return openBlock(), createBlock(_sfc_main$w, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5653,8 +5714,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-editor-props-panel" };
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _hoisted_1$i = { class: "m-editor-props-panel" };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5708,7 +5769,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$i, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -5859,7 +5920,7 @@ const useFloatBox = (slideKeys) => {
   };
 };
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -5899,8 +5960,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_1$h = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$d = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -5911,38 +5972,16 @@ const _hoisted_2$e = /* @__PURE__ */ createElementVNode("g", {
   /* @__PURE__ */ createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
 ], -1);
 const _hoisted_3$8 = [
-  _hoisted_2$e
-];
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorAppManageIcon"
-  },
-  __name: "AppManageIcon",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$8);
-    };
-  }
-});
-
-const _hoisted_1$h = {
-  viewBox: "0 0 32 32",
-  version: "1.1",
-  xmlns: "http://www.w3.org/2000/svg",
-  "xmlns:xlink": "http://www.w3.org/1999/xlink"
-};
-const _hoisted_2$d = /* @__PURE__ */ 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_4$6 = [
   _hoisted_2$d
 ];
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCodeIcon"
+    name: "MEditorAppManageIcon"
   },
-  __name: "CodeIcon",
+  __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$6);
+      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_3$8);
     };
   }
 });
@@ -6056,11 +6095,11 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             class: "list-container"
           }, [
             createElementVNode("div", _hoisted_2$c, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$s, {
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$D, {
                 key: 0,
                 class: "codeIcon"
               })) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$t, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$s, {
                 key: 1,
                 class: "compIcon"
               })) : createCommentVNode("", true),
@@ -6135,7 +6174,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
               createElementVNode("div", _hoisted_1$f, [
-                createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+                createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
                 editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -6462,7 +6501,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$d, [
-              createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -6481,7 +6520,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", _hoisted_2$a, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                      return openBlock(), createBlock(_sfc_main$x, {
+                      return openBlock(), createBlock(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -6824,7 +6863,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title"),
             createElementVNode("div", null, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-                return openBlock(), createBlock(_sfc_main$x, {
+                return openBlock(), createBlock(_sfc_main$w, {
                   "event-type": "mouseup",
                   ref_for: true,
                   ref_key: "buttons",
@@ -7622,7 +7661,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$u, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
+          createVNode(_sfc_main$t, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
           page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$l, {
             key: 0,
             tabindex: "-1",
@@ -7745,7 +7784,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$u, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$t, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -8304,8 +8343,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const el = ref();
     const style = computed(
       () => `
-        width: ${props.width}px;
-        height: ${props.height}px;
+        width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
+        height: ${isNumber(`${props.height}`) ? `${props.height}px` : props.height};
         position: absolute;
         margin-top: 30px;
       `
@@ -8443,8 +8482,10 @@ class Ui extends BaseService {
     const { height, width } = stageContainerRect;
     if (!width || !height)
       return 1;
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
+    let stageWidth = convertToNumber(stageRect.width, width);
+    let stageHeight = convertToNumber(stageRect.height, height);
+    stageWidth = stageWidth + 30;
+    stageHeight = stageHeight + 30;
     if (width > stageWidth && height > stageHeight) {
       return 1;
     }
@@ -9164,7 +9205,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         let top = 0;
         let left = 0;
         let position = "relative";
-        if (layout === Layout.ABSOLUTE) {
+        if (style.position === "fixed") {
+          position = "fixed";
+          top = e.clientY - containerRect.top;
+          left = e.clientX - containerRect.left;
+        } else if (layout === Layout.ABSOLUTE) {
           position = "absolute";
           top = e.clientY - containerRect.top + scrollTop;
           left = e.clientX - containerRect.left + scrollLeft;
@@ -9462,7 +9507,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$x, {
+                      createVNode(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: "复制",
@@ -9470,7 +9515,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$x, {
+                      createVNode(_sfc_main$w, {
                         data: {
                           type: "button",
                           text: "删除",
@@ -10385,13 +10430,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     __expose(services);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$y, null, {
+      return openBlock(), createBlock(_sfc_main$x, null, {
         header: withCtx(() => [
           renderSlot(_ctx.$slots, "header")
         ]),
         nav: withCtx(() => [
           renderSlot(_ctx.$slots, "nav", { editorService: unref(editorService) }, () => [
-            createVNode(_sfc_main$w, { data: _ctx.menu }, null, 8, ["data"])
+            createVNode(_sfc_main$v, { data: _ctx.menu }, null, 8, ["data"])
           ])
         ]),
         "content-before": withCtx(() => [
@@ -10458,7 +10503,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         "props-panel": withCtx(() => [
           renderSlot(_ctx.$slots, "props-panel", {}, () => [
-            createVNode(_sfc_main$v, {
+            createVNode(_sfc_main$u, {
               "extend-state": _ctx.extendFormState,
               onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
             }, {
@@ -10496,7 +10541,7 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(_sfc_main.name, _sfc_main);
-    app.component("m-fields-ui-select", _sfc_main$C);
+    app.component("m-fields-ui-select", _sfc_main$B);
     app.component("m-fields-code-link", _sfc_main$R);
     app.component("m-fields-vs-code", _sfc_main$S);
     app.component("magic-code-editor", _sfc_main$T);
@@ -10505,7 +10550,7 @@ const index = {
     app.component("m-fields-event-select", _sfc_main$E);
     app.component("m-fields-data-source-fields", _sfc_main$L);
     app.component("m-fields-data-source-mocks", _sfc_main$G);
-    app.component("m-fields-key-value", _sfc_main$D);
+    app.component("m-fields-key-value", _sfc_main$C);
     app.component("m-fields-data-source-input", _sfc_main$J);
     app.component("m-fields-data-source-select", _sfc_main$F);
     app.component("m-fields-data-source-methods", _sfc_main$I);
@@ -10514,5 +10559,5 @@ const index = {
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$A as LayoutContainer, _sfc_main$v as PropsPanel, _sfc_main$B as Resizer, _sfc_main$A as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$x as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$P as CodeBlockEditor, _sfc_main$r as CodeBlockList, _sfc_main$q as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$Q as CodeSelect, _sfc_main$M as CodeSelectCol, ColumnLayout, _sfc_main$f as ComponentListPanel, _sfc_main$k as ContentMenu, _sfc_main$K as DataSourceFieldSelect, _sfc_main$L as DataSourceFields, _sfc_main$J as DataSourceInput, _sfc_main$H as DataSourceMethodSelect, _sfc_main$I as DataSourceMethods, _sfc_main$G as DataSourceMocks, _sfc_main$F as DataSourceSelect, DragType, _sfc_main$E as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$N as Icon, KeyBindingCommand, _sfc_main$C as KeyValue, Keys, LayerOffset, _sfc_main$g as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$u as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$T as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$w as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChilrenLayout, setConfig, setLayout, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map