@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.4

package/dist/tmagic-editor.js

@@ -1,9 +1,9 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, Fragment, renderList, watchEffect, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, reactive, watch, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, createTextVNode, mergeProps, toDisplayString, Fragment, renderList, createCommentVNode, nextTick, watchEffect, withModifiers, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, createStaticVNode, withDirectives, Teleport, vShow, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
-import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicPopover } from '@tmagic/design';
+import { TMagicCard, TMagicIcon, TMagicButton, tMagicMessageBox, getConfig as getConfig$1, TMagicTag, TMagicInput, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { Edit, View, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Coin, Aim, Files, CopyDocument, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, Files, CopyDocument, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
 import { createValues, MFormDialog, MForm } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import * as monaco from 'monaco-editor';
@@ -14,16 +14,16 @@ import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLI
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 
-const __default__$w = defineComponent({
-  name: "MEditorCode"
-});
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
-  ...__default__$w,
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCode"
+  },
+  __name: "Code",
   props: {
-    model: null,
-    name: null,
-    config: null,
-    prop: null
+    model: {},
+    name: {},
+    config: {},
+    prop: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -37,26 +37,26 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
       return openBlock(), createBlock(_component_magic_code_editor, {
-        style: normalizeStyle(`height: ${unref(height)}`),
-        "init-values": __props.model[__props.name],
-        language: unref(language),
-        options: __props.config.options,
+        style: normalizeStyle(`height: ${height.value}`),
+        "init-values": _ctx.model[_ctx.name],
+        language: language.value,
+        options: _ctx.config.options,
         onSave: save
       }, null, 8, ["style", "init-values", "language", "options"]);
     };
   }
 });
 
-const __default__$v = defineComponent({
-  name: "MEditorCodeLink"
-});
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
-  ...__default__$v,
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeLink"
+  },
+  __name: "CodeLink",
   props: {
-    config: null,
-    model: null,
-    name: null,
-    prop: null
+    config: {},
+    model: {},
+    name: {},
+    prop: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -111,7 +111,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_fields_link = resolveComponent("m-fields-link");
       return openBlock(), createBlock(_component_m_fields_link, {
-        config: unref(formConfig),
+        config: formConfig.value,
         model: modelValue,
         name: "form",
         onChange: changeHandler
@@ -120,17 +120,17 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$u = defineComponent({
-  name: "MEditorCodeSelect"
-});
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
-  ...__default__$u,
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeSelect"
+  },
+  __name: "CodeSelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -139,6 +139,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       type: "group-list",
       name: "hookData",
       enableToggleMode: false,
+      expandAll: true,
+      titleKey: "codeId",
       items: [
         {
           type: "code-select-col",
@@ -166,13 +168,13 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["m-fields-code-select", __props.config.className])
+        class: normalizeClass(["m-fields-code-select", _ctx.config.className])
       }, [
         createVNode(unref(TMagicCard), null, {
           default: withCtx(() => [
             createVNode(_component_m_form_container, {
-              config: unref(codeConfig),
-              model: __props.model[__props.name],
+              config: codeConfig.value,
+              model: _ctx.model[_ctx.name],
               onChange: changeHandler
             }, null, 8, ["config", "model"])
           ]),
@@ -183,18 +185,18 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = ["src"];
-const __default__$t = defineComponent({
-  name: "MEditorIcon"
-});
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
-  ...__default__$t,
+const _hoisted_1$m = ["src"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorIcon"
+  },
+  __name: "Icon",
   props: {
-    icon: null
+    icon: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+      return !_ctx.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
         key: 0,
         class: "magic-editor-icon"
       }, {
@@ -202,23 +204,23 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           createVNode(unref(Edit))
         ]),
         _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+      })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
         key: 1,
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
         ]),
         _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+      })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
         key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
+        class: normalizeClass(["magic-editor-icon", _ctx.icon])
       }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
         key: 3,
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
+          (openBlock(), createBlock(resolveDynamicComponent(toRaw(_ctx.icon))))
         ]),
         _: 1
       }));
@@ -226,19 +228,19 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { class: "m-fields-code-select-col" };
+const _hoisted_1$l = { class: "m-fields-code-select-col" };
 const _hoisted_2$e = { class: "code-select-container" };
-const __default__$s = defineComponent({
-  name: "MEditorCodeSelectCol"
-});
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
-  ...__default__$s,
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeSelectCol"
+  },
+  __name: "CodeSelectCol",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -320,23 +322,23 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         createElementVNode("div", _hoisted_2$e, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
-            model: __props.model,
+            model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          createVNode(_sfc_main$A, {
+          createVNode(_sfc_main$B, {
             class: "icon",
-            icon: unref(editable) ? unref(Edit) : unref(View),
+            icon: editable.value ? unref(Edit) : unref(View),
             onClick: editCode
           }, null, 8, ["icon"])
         ]),
         createVNode(_component_m_form_container, {
           config: codeParamsConfig.value,
-          model: __props.model,
+          model: _ctx.model,
           onChange: onParamsChangeHandler
         }, null, 8, ["config", "model"])
       ]);
@@ -344,17 +346,19 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-editor-data-source-fields" };
+const _hoisted_1$k = { class: "m-editor-data-source-fields" };
 const _hoisted_2$d = { class: "m-editor-data-source-fields-footer" };
-const _hoisted_3$8 = /* @__PURE__ */ createTextVNode("添加");
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceFields"
+  },
   __name: "DataSourceFields",
   props: {
-    config: null,
-    model: null,
-    prop: null,
+    config: {},
+    model: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    name: null
+    name: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -490,21 +494,21 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createVNode(unref(MagicTable), {
-          data: __props.model[__props.name],
+          data: _ctx.model[_ctx.name],
           columns: filedColumns
         }, null, 8, ["data"]),
         createElementVNode("div", _hoisted_2$d, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
-            disabled: __props.disabled,
+            disabled: _ctx.disabled,
             plain: "",
             onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
           }, {
             default: withCtx(() => [
-              _hoisted_3$8
+              createTextVNode("添加")
             ]),
             _: 1
           }, 8, ["disabled"])
@@ -515,7 +519,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           title: filedTitle.value,
           config: dataSourceFieldsConfig,
           values: fieldValues.value,
-          parentValues: __props.model[__props.name],
+          parentValues: _ctx.model[_ctx.name],
           onSubmit: fieldChange
         }, null, 8, ["title", "values", "parentValues"])
       ]);
@@ -523,23 +527,287 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-event-select" };
-const _hoisted_2$c = {
+const _hoisted_1$j = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_2$c = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_3$5 = { class: "el-input__inner" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceInput"
+  },
+  __name: "DataSourceInput",
+  props: {
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
+    disabled: { type: Boolean, default: false },
+    lastValues: {},
+    size: {}
+  },
+  emits: ["change"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const { dataSourceService } = inject("services") || {};
+    const autocomplete = ref();
+    const isFocused = ref(false);
+    const state = ref("");
+    const displayState = ref([]);
+    const input = computed(() => autocomplete.value?.inputRef?.input);
+    const dataSources = computed(() => dataSourceService?.get("dataSources") || []);
+    const setDisplayState = () => {
+      displayState.value = [];
+      const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+      let index = 0;
+      for (const match of matches) {
+        if (typeof match.index === "undefined")
+          break;
+        displayState.value.push({
+          type: "text",
+          value: state.value.substring(index, match.index)
+        });
+        let dsText = "";
+        let ds;
+        let fields;
+        match[1].split(".").forEach((item, index2) => {
+          if (index2 === 0) {
+            ds = dataSources.value.find((ds2) => ds2.id === item);
+            dsText += ds?.title || item;
+            fields = ds?.fields;
+            return;
+          }
+          const field = fields?.find((field2) => field2.name === item);
+          fields = field?.fields;
+          dsText += `.${field?.title || item}`;
+        });
+        displayState.value.push({
+          type: "var",
+          value: dsText
+        });
+        index = match.index + match[0].length;
+      }
+      if (index < state.value.length) {
+        displayState.value.push({
+          type: "text",
+          value: state.value.substring(index)
+        });
+      }
+    };
+    watch(
+      () => props.model[props.name],
+      (value = "") => {
+        state.value = value;
+        setDisplayState();
+      },
+      { immediate: true }
+    );
+    const mouseupHandler = async () => {
+      isFocused.value = true;
+      await nextTick();
+      autocomplete.value?.focus();
+    };
+    const blurHandler = () => {
+      isFocused.value = false;
+      setDisplayState();
+    };
+    const changeHandler = (v) => {
+      emit("change", v);
+    };
+    let inputText = "";
+    const inputHandler = (v) => {
+      if (!v) {
+        inputText = v;
+      }
+    };
+    const isRightCurlyBracket = (selectionStart = 0) => {
+      const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+      return lastChar === "}";
+    };
+    const getSelectionStart = () => {
+      let selectionStart = input.value?.selectionStart || 0;
+      if (isRightCurlyBracket(selectionStart)) {
+        selectionStart -= 1;
+      }
+      return selectionStart;
+    };
+    const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex) => leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+    const curCharIsDot = (dotIndex) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+    const dsQuerySearch = (queryString, leftCurlyBracketIndex, cb) => {
+      let result = [];
+      if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+        result = dataSources.value;
+      } else if (leftCurlyBracketIndex > -1) {
+        const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
+        result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
+      }
+      cb(
+        result.map((ds) => ({
+          value: ds.id,
+          text: ds.title,
+          type: "dataSource"
+        }))
+      );
+    };
+    const fieldQuerySearch = (queryString, leftAngleIndex, dotIndex, cb) => {
+      let result = [];
+      const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+      const keys = dsKey.split(".");
+      const ds = dataSources.value.find((ds2) => ds2.id === keys.shift());
+      if (!ds) {
+        return;
+      }
+      let fields = ds.fields || [];
+      let key = keys.shift();
+      while (key) {
+        for (const field of fields) {
+          if (field.name === key) {
+            fields = field.fields || [];
+            key = keys.shift();
+            break;
+          }
+        }
+      }
+      if (curCharIsDot(dotIndex)) {
+        result = fields || [];
+      } else if (dotIndex > -1) {
+        const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+        result = fields.filter(
+          (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName)
+        ) || [];
+      }
+      cb(
+        result.map((field) => ({
+          value: field.name,
+          text: field.title,
+          type: "field"
+        }))
+      );
+    };
+    const querySearch = (queryString, cb) => {
+      inputText = queryString;
+      const selectionStart = getSelectionStart();
+      const curQueryString = queryString.substring(0, selectionStart);
+      const fieldKeyStringLastIndex = curQueryString.lastIndexOf(".");
+      const dsKeyStringLastIndex = curQueryString.lastIndexOf("{");
+      const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+      if (isFieldTip) {
+        fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+      } else {
+        dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+      }
+    };
+    const selectHandler = async ({ value, type }) => {
+      const isDataSource = type === "dataSource";
+      const selectionStart = input.value?.selectionStart || 0;
+      let startText = inputText.substring(0, selectionStart);
+      const dotIndex = startText.lastIndexOf(".");
+      const leftCurlyBracketIndex = startText.lastIndexOf("{");
+      const endText = inputText.substring(selectionStart);
+      let suggestText = value;
+      if (isDataSource) {
+        if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+          startText = startText.substring(0, leftCurlyBracketIndex + 1);
+        }
+        if (!isRightCurlyBracket(selectionStart + 1)) {
+          suggestText = `${suggestText}}`;
+        }
+        suggestText = `{${suggestText}}`;
+      } else if (!curCharIsDot(dotIndex)) {
+        startText = startText.substring(0, dotIndex + 1);
+      }
+      state.value = `${startText}${suggestText}${endText}`;
+      await nextTick();
+      let newSelectionStart = 0;
+      if (isDataSource) {
+        newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+      } else {
+        newSelectionStart = dotIndex + suggestText.length + 1;
+      }
+      input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+    };
+    return (_ctx, _cache) => {
+      return _ctx.disabled || isFocused.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(getConfig$1)("components")?.autocomplete.component || "el-autocomplete"), mergeProps(
+        {
+          key: 0,
+          class: "tmagic-design-auto-complete",
+          ref_key: "autocomplete",
+          ref: autocomplete,
+          modelValue: state.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event)
+        },
+        unref(getConfig$1)("components")?.autocomplete.props({
+          disabled: _ctx.disabled,
+          size: _ctx.size,
+          fetchSuggestions: querySearch,
+          triggerOnFocus: false,
+          clearable: true
+        }) || {},
+        {
+          style: { "width": "100%" },
+          onBlur: blurHandler,
+          onChange: changeHandler,
+          onInput: inputHandler,
+          onSelect: selectHandler
+        }
+      ), {
+        suffix: withCtx(() => [
+          createVNode(_sfc_main$B, { icon: unref(Coin) }, null, 8, ["icon"])
+        ]),
+        default: withCtx(({ item }) => [
+          createElementVNode("div", _hoisted_1$j, [
+            createElementVNode("div", null, toDisplayString(item.text), 1),
+            createElementVNode("span", _hoisted_2$c, toDisplayString(item.value), 1)
+          ])
+        ]),
+        _: 1
+      }, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(`el-input el-input--${_ctx.size}`),
+        onMouseup: mouseupHandler
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+        }, [
+          createElementVNode("div", _hoisted_3$5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
+              return openBlock(), createElementBlock(Fragment, null, [
+                item.type === "text" ? (openBlock(), createElementBlock("span", {
+                  key: index,
+                  style: { "margin-right": "2px" }
+                }, toDisplayString(item.value), 1)) : createCommentVNode("", true),
+                item.type === "var" ? (openBlock(), createBlock(unref(TMagicTag), {
+                  key: index,
+                  size: _ctx.size
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(item.value), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["size"])) : createCommentVNode("", true)
+              ], 64);
+            }), 256))
+          ])
+        ], 2)
+      ], 34));
+    };
+  }
+});
+
+const _hoisted_1$i = { class: "m-fields-event-select" };
+const _hoisted_2$b = {
   key: 1,
   class: "fullWidth"
 };
-const _hoisted_3$7 = /* @__PURE__ */ createTextVNode("添加事件");
-const __default__$r = defineComponent({
-  name: "MEditorEventSelect"
-});
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
-  ...__default__$r,
+  ...{
+    name: "MEditorEventSelect"
+  },
+  __name: "EventSelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null,
-    size: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -656,6 +924,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         {
           type: "group-list",
           name: "actions",
+          expandAll: true,
           enableToggleMode: false,
           items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value]
         }
@@ -690,16 +959,16 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_table, {
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
           size: props.size,
-          model: __props.model,
+          model: _ctx.model,
           name: "events",
-          config: unref(tableConfig),
+          config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$c, [
+        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$b, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -707,21 +976,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
             default: withCtx(() => [
-              _hoisted_3$7
+              createTextVNode("添加事件")
             ]),
             _: 1
           }),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.model[__props.name], (cardItem, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model[_ctx.name], (cardItem, index) => {
             return openBlock(), createBlock(_component_m_form_panel, {
               key: index,
-              config: unref(actionsConfig),
+              config: actionsConfig.value,
               model: cardItem,
               onChange: onChangeHandler
             }, {
               header: withCtx(() => [
                 createVNode(_component_m_form_container, {
                   class: "fullWidth",
-                  config: unref(eventNameConfig),
+                  config: eventNameConfig.value,
                   model: cardItem,
                   onChange: onChangeHandler
                 }, null, 8, ["config", "model"]),
@@ -741,19 +1010,21 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = { class: "m-fields-key-value" };
-const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _hoisted_3$6 = /* @__PURE__ */ createTextVNode("添加");
+const _hoisted_1$h = { class: "m-fields-key-value" };
+const _hoisted_2$a = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorKeyValue"
+  },
   __name: "KeyValue",
   props: {
-    config: null,
-    model: null,
-    name: null,
-    prop: null,
+    config: {},
+    model: {},
+    name: {},
+    prop: {},
     disabled: { type: Boolean, default: false },
-    lastValues: null,
-    size: null
+    lastValues: {},
+    size: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -784,7 +1055,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -794,23 +1065,23 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               placeholder: "key",
               modelValue: records.value[index][0],
               "onUpdate:modelValue": ($event) => records.value[index][0] = $event,
-              disabled: __props.disabled,
-              size: __props.size,
+              disabled: _ctx.disabled,
+              size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$b,
+            _hoisted_2$a,
             createVNode(unref(TMagicInput), {
               placeholder: "value",
               modelValue: records.value[index][1],
               "onUpdate:modelValue": ($event) => records.value[index][1] = $event,
-              disabled: __props.disabled,
-              size: __props.size,
+              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: __props.size,
+              size: _ctx.size,
               circle: "",
               plain: "",
               icon: unref(Delete),
@@ -820,13 +1091,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         }), 128)),
         createVNode(unref(TMagicButton), {
           type: "primary",
-          size: __props.size,
+          size: _ctx.size,
           plain: "",
           icon: unref(Plus),
           onClick: addHandler
         }, {
           default: withCtx(() => [
-            _hoisted_3$6
+            createTextVNode("添加")
           ]),
           _: 1
         }, 8, ["size", "icon"])
@@ -835,17 +1106,16 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = /* @__PURE__ */ createTextVNode("取消");
-const __default__$q = defineComponent({
-  name: "MEditorUISelect"
-});
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  ...__default__$q,
+  ...{
+    name: "MEditorUISelect"
+  },
+  __name: "UISelect",
   props: {
-    config: null,
-    model: null,
-    prop: null,
-    name: null
+    config: {},
+    model: {},
+    prop: {},
+    name: {}
   },
   emits: ["change"],
   setup(__props, { emit }) {
@@ -902,7 +1172,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$i
+            createTextVNode("取消")
           ]),
           _: 1
         }, 8, ["icon"])
@@ -912,7 +1182,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
         onClick: startSelect,
         style: { "display": "flex" }
       }, [
-        unref(val) ? (openBlock(), createBlock(unref(TMagicTooltip), {
+        val.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
           content: "清除"
         }, {
@@ -928,7 +1198,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           _: 1
         })) : createCommentVNode("", true),
         createVNode(unref(TMagicTooltip), {
-          content: unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"
+          content: val.value ? toName.value + "_" + val.value : "点击此处选择"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
@@ -936,7 +1206,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
               style: { "padding": "0", "margin": "0" }
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"), 1)
+                createTextVNode(toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
               ]),
               _: 1
             })
@@ -950,15 +1220,15 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const __default__$p = defineComponent({
-  name: "MEditorCodeEditor"
-});
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$p,
+  ...{
+    name: "MEditorCodeEditor"
+  },
+  __name: "CodeEditor",
   props: {
-    initValues: null,
-    modifiedValues: null,
-    type: null,
+    initValues: {},
+    modifiedValues: {},
+    type: {},
     language: { default: "javascript" },
     options: { default: () => ({
       tabSize: 2
@@ -966,7 +1236,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     autoSave: { type: Boolean, default: true }
   },
   emits: ["initd", "save"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const toString = (v, language) => {
       let value = "";
@@ -1057,7 +1327,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     onUnmounted(() => {
       resizeObserver.disconnect();
     });
-    expose({
+    __expose({
       getEditor() {
         return vsEditor || vsDiffEditor;
       },
@@ -1083,11 +1353,11 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const __default__$o = defineComponent({
-  name: "MEditorResizer"
-});
 const _sfc_main$t = /* @__PURE__ */ defineComponent({
-  ...__default__$o,
+  ...{
+    name: "MEditorResizer"
+  },
+  __name: "Resizer",
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
@@ -1119,20 +1389,20 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$n = defineComponent({
-  name: "MEditorLayout"
-});
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  ...__default__$n,
+  ...{
+    name: "MEditorLayout"
+  },
+  __name: "Layout",
   props: {
-    left: null,
-    right: null,
+    left: {},
+    right: {},
     minLeft: { default: 46 },
     minRight: { default: 1 },
     minCenter: { default: 5 },
-    leftClass: null,
-    rightClass: null,
-    centerClass: null
+    leftClass: {},
+    rightClass: {},
+    centerClass: {}
   },
   emits: ["update:left", "change", "update:right"],
   setup(__props, { emit }) {
@@ -1224,26 +1494,26 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ref: el,
         class: "m-editor-layout"
       }, [
-        unref(hasLeft) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        hasLeft.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-left", __props.leftClass]),
-            style: normalizeStyle(`width: ${__props.left}px`)
+            class: normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
+            style: normalizeStyle(`width: ${_ctx.left}px`)
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
           createVNode(_sfc_main$t, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
-          class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
+          class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
           style: normalizeStyle(`width: ${center.value}px`)
         }, [
           renderSlot(_ctx.$slots, "center")
         ], 6),
-        unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        hasRight.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           createVNode(_sfc_main$t, { onChange: changeRight }),
           createElementVNode("div", {
-            class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
-            style: normalizeStyle(`width: ${__props.right}px`)
+            class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
+            style: normalizeStyle(`width: ${_ctx.right}px`)
           }, [
             renderSlot(_ctx.$slots, "right")
           ], 6)
@@ -3107,14 +3377,14 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$h = { class: "m-editor-empty-panel" };
-const _hoisted_2$a = { class: "m-editor-empty-content" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const __default__$m = defineComponent({
-  name: "MEditorAddPageBox"
-});
+const _hoisted_1$g = { class: "m-editor-empty-panel" };
+const _hoisted_2$9 = { class: "m-editor-empty-content" };
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
 const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  ...__default__$m,
+  ...{
+    name: "MEditorAddPageBox"
+  },
+  __name: "AddPageBox",
   setup(__props) {
     const services = inject("services");
     const clickHandler = () => {
@@ -3130,16 +3400,16 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
-        createElementVNode("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+        createElementVNode("div", _hoisted_2$9, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$5
+            _hoisted_3$4
           ])
         ])
       ]);
@@ -3147,25 +3417,25 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = { class: "m-editor" };
-const __default__$l = defineComponent({
-  name: "MEditorFramework"
-});
+const _hoisted_1$f = { class: "m-editor" };
+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$q = /* @__PURE__ */ defineComponent({
-  ...__default__$l,
+  ...{
+    name: "MEditorFramework"
+  },
+  __name: "Framework",
   props: {
     codeOptions: { default: () => ({}) }
   },
   setup(__props) {
-    const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-    const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
     const { editorService, uiService } = inject("services") || {};
     const root = computed(() => editorService?.get("root"));
     const nodes = computed(() => editorService?.get("nodes") || []);
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = computed(() => uiService?.get("showSrc"));
-    const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
-    const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
     const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
     const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
     const columnWidth = ref({
@@ -3221,13 +3491,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-        unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
+        showSrc.value ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
           class: "m-editor-content",
-          "init-values": unref(root),
-          options: __props.codeOptions,
+          "init-values": root.value,
+          options: _ctx.codeOptions,
           onSave: saveCode
         }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$s, {
           key: 1,
@@ -3247,13 +3517,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "sidebar")
           ]),
           center: withCtx(() => [
-            unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+            pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
               createVNode(_sfc_main$r)
             ])
           ]),
           _: 2
         }, [
-          unref(pageLength) > 0 && unref(nodes).length === 1 ? {
+          pageLength.value > 0 && nodes.value.length === 1 ? {
             name: "right",
             fn: withCtx(() => [
               createVNode(unref(TMagicScrollbar), null, {
@@ -3262,7 +3532,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 3
               })
-            ])
+            ]),
+            key: "0"
           } : void 0
         ]), 1032, ["left", "right"]))
       ]);
@@ -3270,16 +3541,16 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = {
+const _hoisted_1$e = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$9 = { class: "el-dropdown-link menubar-menu-button" };
-const __default__$k = defineComponent({
-  name: "MEditorToolButton"
-});
+const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
 const _sfc_main$p = /* @__PURE__ */ defineComponent({
-  ...__default__$k,
+  ...{
+    name: "MEditorToolButton"
+  },
+  __name: "ToolButton",
   props: {
     data: { default: () => ({
       type: "text",
@@ -3344,35 +3615,35 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return unref(display) ? (openBlock(), createElementBlock("div", {
+      return display.value ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: normalizeClass(["menu-item", `${__props.data.type} ${__props.data.className || ""}`]),
-        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(__props.data, $event)),
-        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(__props.data, $event)),
-        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(__props.data, $event))
+        class: normalizeClass(["menu-item", `${_ctx.data.type} ${_ctx.data.className || ""}`]),
+        onClick: _cache[0] || (_cache[0] = ($event) => clickHandler(_ctx.data, $event)),
+        onMousedown: _cache[1] || (_cache[1] = ($event) => mousedownHandler(_ctx.data, $event)),
+        onMouseup: _cache[2] || (_cache[2] = ($event) => mouseupHandler(_ctx.data, $event))
       }, [
-        __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
+        _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
-          direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
+          direction: _ctx.data.direction || "vertical"
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$e, 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",
             placement: "bottom-start",
-            content: __props.data.tooltip
+            content: _ctx.data.tooltip
           }, {
             default: withCtx(() => [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 text: "",
-                disabled: unref(disabled)
+                disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$B, {
                     key: 0,
-                    icon: __props.data.icon
+                    icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(__props.data.text), 1)
+                  createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])
@@ -3382,30 +3653,30 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             key: 1,
             size: "small",
             text: "",
-            disabled: unref(disabled)
+            disabled: disabled.value
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$A, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$B, {
                 key: 0,
-                icon: __props.data.icon
+                icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(__props.data.text), 1)
+              createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
             ]),
             _: 1
           }, 8, ["disabled"]))
-        ], 64)) : __props.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
+        ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
-          disabled: unref(disabled),
+          disabled: disabled.value,
           onCommand: dropdownHandler
         }, {
           dropdown: withCtx(() => [
-            __props.data.items && __props.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
+            _ctx.data.items && _ctx.data.items.length ? (openBlock(), createBlock(unref(TMagicDropdownMenu), { key: 0 }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (subItem, index) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.items, (subItem, index) => {
                   return openBlock(), createBlock(unref(TMagicDropdownItem), {
                     key: index,
-                    command: { data: __props.data, subItem }
+                    command: { data: _ctx.data, subItem }
                   }, {
                     default: withCtx(() => [
                       createTextVNode(toDisplayString(subItem.text), 1)
@@ -3418,8 +3689,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$9, [
-              createTextVNode(toDisplayString(__props.data.text), 1),
+            createElementVNode("span", _hoisted_2$8, [
+              createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
                   createVNode(unref(ArrowDown))
@@ -3429,17 +3700,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 1
-        }, 8, ["disabled"])) : __props.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(__props.data.component), normalizeProps(mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : createCommentVNode("", true)
+        }, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), normalizeProps(mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : createCommentVNode("", true)
       ], 34)) : createCommentVNode("", true);
     };
   }
 });
 
-const __default__$j = defineComponent({
-  name: "MEditorNavMenu"
-});
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$j,
+  ...{
+    name: "MEditorNavMenu"
+  },
+  __name: "NavMenu",
   props: {
     data: { default: () => ({}) },
     height: { default: 35 }
@@ -3588,15 +3859,15 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-nav-menu",
-        style: normalizeStyle({ height: `${__props.height}px` })
+        style: normalizeStyle({ height: `${_ctx.height}px` })
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(keys), (key) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(`menu-${key}`),
             key,
-            style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
+            style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
               return openBlock(), createBlock(_sfc_main$p, {
                 data: item,
                 key: index
@@ -3609,14 +3880,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = { class: "m-editor-props-panel" };
-const __default__$i = defineComponent({
-  name: "MEditorPropsPanel"
-});
+const _hoisted_1$d = { class: "m-editor-props-panel" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
-  ...__default__$i,
+  ...{
+    name: "MEditorPropsPanel"
+  },
+  __name: "PropsPanel",
   emits: ["mounted"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const internalInstance = getCurrentInstance();
     const values = ref({});
     const configForm = ref();
@@ -3657,16 +3928,16 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         tMagicMessage.error(e.message);
       }
     };
-    expose({ submit });
+    __expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
           ref: configForm,
-          class: normalizeClass(`m-editor-props-panel ${unref(propsPanelSize)}`),
-          "popper-class": `m-editor-props-panel-popper ${unref(propsPanelSize)}`,
-          size: unref(propsPanelSize),
+          class: normalizeClass(`m-editor-props-panel ${propsPanelSize.value}`),
+          "popper-class": `m-editor-props-panel-popper ${propsPanelSize.value}`,
+          size: propsPanelSize.value,
           "init-values": values.value,
           config: curFormConfig.value,
           onChange: submit
@@ -3677,6 +3948,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
 });
 
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorSearchInput"
+  },
   __name: "SearchInput",
   emits: ["search"],
   setup(__props, { emit }) {
@@ -3708,80 +3982,77 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-const _sfc_main$l = {};
-
-const _hoisted_1$d = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$8 = /*#__PURE__*/createElementVNode("g", {
+const _hoisted_1$c = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
-  /*#__PURE__*/createElementVNode("path", {
+  /* @__PURE__ */ createElementVNode("path", {
     d: "M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z",
     "fill-rule": "nonzero"
   }),
-  /*#__PURE__*/createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
+  /* @__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$4 = [
-  _hoisted_2$8
+const _hoisted_3$3 = [
+  _hoisted_2$7
 ];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorAppManageIcon"
+  },
+  __name: "AppManageIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+    };
+  }
+});
 
-function _sfc_render$2(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$d, _hoisted_3$4))
-}
-const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$l, [['render',_sfc_render$2]]);
-
-const _sfc_main$k = {};
-
-const _hoisted_1$c = {
+const _hoisted_1$b = {
   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$7 = /*#__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$4 = [
-  _hoisted_2$7
+const _hoisted_2$6 = /* @__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$3 = [
+  _hoisted_2$6
 ];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCodeIcon"
+  },
+  __name: "CodeIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+    };
+  }
+});
 
-function _sfc_render$1(_ctx, _cache) {
-  return (openBlock(), createElementBlock("svg", _hoisted_1$c, _hoisted_4$4))
-}
-const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$k, [['render',_sfc_render$1]]);
-
-const _hoisted_1$b = {
+const _hoisted_1$a = {
   key: 0,
   class: "m-editor-content-bottom"
 };
-const _hoisted_2$6 = /* @__PURE__ */ createTextVNode("确认");
-const _hoisted_3$3 = /* @__PURE__ */ createTextVNode("关闭");
-const _hoisted_4$3 = {
+const _hoisted_2$5 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_5$2 = /* @__PURE__ */ createTextVNode("关闭");
-const __default__$h = defineComponent({
-  name: "MEditorCodeDraftEditor"
-});
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  ...__default__$h,
+  ...{
+    name: "MEditorCodeDraftEditor"
+  },
+  __name: "CodeDraftEditor",
   props: {
-    id: null,
-    content: null,
+    id: {},
+    content: {},
     editable: { type: Boolean, default: true },
     autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: null,
-    language: null
+    codeOptions: {},
+    language: {}
   },
   emits: ["close", "saveAndClose"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const services = inject("services");
     const codeContent = ref("");
@@ -3846,7 +4117,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         codeEditor.value.focus();
       }
     };
-    expose({
+    __expose({
       saveAndClose,
       close
     });
@@ -3860,10 +4131,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           class: "m-editor-container",
           "init-values": `${codeContent.value}`,
           onSave: saveCodeDraft,
-          language: __props.language,
-          options: unref(codeOptions)
+          language: _ctx.language,
+          options: codeOptions.value
         }, null, 8, ["init-values", "language", "options"]),
-        __props.editable ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        _ctx.editable ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3880,7 +4151,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: saveAndClose
           }, {
             default: withCtx(() => [
-              _hoisted_2$6
+              createTextVNode("确认")
             ]),
             _: 1
           }),
@@ -3889,11 +4160,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_3$3
+              createTextVNode("关闭")
             ]),
             _: 1
           })
-        ])) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
+        ])) : (openBlock(), createElementBlock("div", _hoisted_2$5, [
           createVNode(unref(TMagicButton), {
             type: "primary",
             class: "button",
@@ -3909,7 +4180,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             onClick: close
           }, {
             default: withCtx(() => [
-              _hoisted_5$2
+              createTextVNode("关闭")
             ]),
             _: 1
           })
@@ -3919,25 +4190,25 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "code-name-wrapper" };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
+const _hoisted_1$9 = { class: "code-name-wrapper" };
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
 const _hoisted_3$2 = { class: "code-name-wrapper" };
 const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-const __default__$g = defineComponent({
-  name: "MEditorFunctionEditor"
-});
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  ...__default__$g,
+  ...{
+    name: "MEditorFunctionEditor"
+  },
+  __name: "FunctionEditor",
   props: {
-    id: null,
-    name: null,
-    content: null,
+    id: {},
+    name: {},
+    content: {},
     editable: { type: Boolean, default: true },
     autoSaveDraft: { type: Boolean, default: true },
-    codeOptions: null,
-    paramsColConfig: null
+    codeOptions: {},
+    paramsColConfig: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const defaultParamColConfig = {
       type: "row",
@@ -4038,20 +4309,20 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       services?.codeBlockService.setCodeEditorShowStatus(false);
     };
     const codeDraftEditor = ref();
-    expose({
+    __expose({
       codeDraftEditor
     });
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
         header: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
-            _hoisted_2$5,
+          createElementVNode("div", _hoisted_1$9, [
+            _hoisted_2$4,
             createVNode(unref(TMagicInput), {
               class: "code-name-input",
               modelValue: codeName.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => codeName.value = $event),
-              disabled: !__props.editable
+              disabled: !_ctx.editable
             }, null, 8, ["modelValue", "disabled"])
           ]),
           createElementVNode("div", _hoisted_3$2, [
@@ -4071,11 +4342,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$j, {
             ref_key: "codeDraftEditor",
             ref: codeDraftEditor,
-            id: __props.id,
+            id: _ctx.id,
             content: codeContent.value,
-            editable: __props.editable,
-            autoSaveDraft: __props.autoSaveDraft,
-            codeOptions: __props.codeOptions,
+            editable: _ctx.editable,
+            autoSaveDraft: _ctx.autoSaveDraft,
+            codeOptions: _ctx.codeOptions,
             language: "javascript",
             onSaveAndClose: saveAndClose,
             onClose: close
@@ -4087,17 +4358,17 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "m-editor-code-block-editor-panel"
 };
-const __default__$f = defineComponent({
-  name: "MEditorCodeBlockEditor"
-});
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$f,
+  ...{
+    name: "MEditorCodeBlockEditor"
+  },
+  __name: "CodeBlockEditor",
   props: {
-    paramsColConfig: null
+    paramsColConfig: {}
   },
   setup(__props) {
     const services = inject("services");
@@ -4144,7 +4415,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         "append-to-body": true,
         "show-close": false,
         "close-on-click-modal": true,
-        size: unref(size),
+        size: size.value,
         "before-close": handleClose
       }, {
         default: withCtx(() => [
@@ -4155,17 +4426,17 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             class: "code-editor-layout"
           }, {
             center: withCtx(() => [
-              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
+              !unref(isEmpty)(codeConfig.value) ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+                renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                 codeConfig.value ? (openBlock(), createBlock(_sfc_main$i, {
                   key: 0,
                   ref_key: "functionEditor",
                   ref: functionEditor,
-                  id: unref(id),
+                  id: id.value,
                   name: codeConfig.value.name,
                   content: codeConfig.value.content,
-                  paramsColConfig: __props.paramsColConfig,
-                  editable: !!unref(editable),
+                  paramsColConfig: _ctx.paramsColConfig,
+                  editable: !!editable.value,
                   autoSaveDraft: true,
                   codeOptions: unref(codeOptions)
                 }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : createCommentVNode("", true)
@@ -4180,22 +4451,21 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$8 = { class: "search-wrapper" };
-const _hoisted_2$4 = /* @__PURE__ */ createTextVNode("新增");
-const _hoisted_3$1 = ["id"];
-const _hoisted_4$1 = { class: "list-item" };
-const _hoisted_5$1 = {
+const _hoisted_1$7 = { class: "search-wrapper" };
+const _hoisted_2$3 = ["id"];
+const _hoisted_3$1 = { class: "list-item" };
+const _hoisted_4$1 = {
   key: 2,
   class: "right-tool"
 };
-const __default__$e = defineComponent({
-  name: "MEditorCodeBlockList"
-});
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
-  ...__default__$e,
+  ...{
+    name: "MEditorCodeBlockList"
+  },
+  __name: "CodeBlockList",
   props: {
-    customError: null,
-    paramsColConfig: null
+    customError: { type: Function },
+    paramsColConfig: {}
   },
   setup(__props) {
     const props = __props;
@@ -4284,9 +4554,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$8, [
+            createElementVNode("div", _hoisted_1$7, [
               createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-              unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
+              editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
                 type: "primary",
@@ -4294,7 +4564,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 onClick: createCodeBlock
               }, {
                 default: withCtx(() => [
-                  _hoisted_2$4
+                  createTextVNode("新增")
                 ]),
                 _: 1
               })) : createCommentVNode("", true)
@@ -4306,9 +4576,9 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             class: "magic-editor-layer-tree",
             "node-key": "id",
             "empty-text": "暂无代码块",
-            "default-expanded-keys": unref(expandedKeys),
+            "default-expanded-keys": expandedKeys.value,
             "expand-on-click-node": false,
-            data: unref(codeList),
+            data: codeList.value,
             props: treeProps,
             "highlight-current": true,
             "filter-node-method": filterNode,
@@ -4319,41 +4589,41 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 id: data.id,
                 class: "list-container"
               }, [
-                createElementVNode("div", _hoisted_4$1, [
-                  data.type === "code" ? (openBlock(), createBlock(CodeIcon, {
+                createElementVNode("div", _hoisted_3$1, [
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$k, {
                     key: 0,
                     class: "codeIcon"
                   })) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(AppManageIcon, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$l, {
                     key: 1,
                     class: "compIcon"
                   })) : createCommentVNode("", true),
                   createElementVNode("span", {
                     class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                   }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_4$1, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
-                      content: unref(editable) ? "编辑" : "查看",
+                      content: editable.value ? "编辑" : "查看",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
-                          icon: unref(editable) ? unref(Edit) : unref(View),
+                        createVNode(_sfc_main$B, {
+                          icon: editable.value ? unref(Edit) : unref(View),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
                         }, null, 8, ["icon", "onClick"])
                       ]),
                       _: 2
                     }, 1032, ["content"]),
-                    unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
+                    editable.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
                       key: 0,
                       effect: "dark",
                       content: "删除",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$B, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4367,13 +4637,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     })
                   ])) : createCommentVNode("", true)
                 ])
-              ], 8, _hoisted_3$1)
+              ], 8, _hoisted_2$3)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "data"]),
-          unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$h, {
+          isShowCodeBlockEditor.value ? (openBlock(), createBlock(_sfc_main$h, {
             key: 0,
-            paramsColConfig: __props.paramsColConfig
+            paramsColConfig: _ctx.paramsColConfig
           }, {
             "code-block-edit-panel-header": withCtx(({ id }) => [
               renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
@@ -4387,16 +4657,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = /* @__PURE__ */ createTextVNode("确定");
-const _hoisted_2$3 = /* @__PURE__ */ createTextVNode("关闭");
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorDataSourceConfigPanel"
+  },
   __name: "DataSourceConfigPanel",
   props: {
-    title: null,
-    values: null
+    title: {},
+    values: {}
   },
   emits: ["submit"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const type = ref("base");
     const services = inject("services");
@@ -4427,7 +4698,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const hide = () => {
       visible.value = false;
     };
-    expose({
+    __expose({
       show() {
         visible.value = true;
       },
@@ -4437,12 +4708,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicDrawer), {
         modelValue: visible.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
-        title: __props.title,
+        title: _ctx.title,
         "close-on-press-escape": true,
         "append-to-body": true,
         "show-close": true,
         "close-on-click-modal": true,
-        size: unref(size)
+        size: size.value
       }, {
         footer: withCtx(() => [
           createElementVNode("div", null, [
@@ -4451,13 +4722,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               onClick: submitHandler
             }, {
               default: withCtx(() => [
-                _hoisted_1$7
+                createTextVNode("确定")
               ]),
               _: 1
             }),
             createVNode(unref(TMagicButton), { onClick: hide }, {
               default: withCtx(() => [
-                _hoisted_2$3
+                createTextVNode("关闭")
               ]),
               _: 1
             })
@@ -4467,7 +4738,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           createVNode(unref(MForm), {
             ref_key: "form",
             ref: form,
-            config: unref(dataSourceConfig),
+            config: dataSourceConfig.value,
             "init-values": initValues.value,
             onChange: changeHandler
           }, null, 8, ["config", "init-values"])
@@ -4479,18 +4750,17 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$6 = { class: "search-wrapper" };
-const _hoisted_2$2 = /* @__PURE__ */ createTextVNode("新增");
-const _hoisted_3 = ["id"];
-const _hoisted_4 = { class: "list-item" };
-const _hoisted_5 = {
+const _hoisted_2$2 = ["id"];
+const _hoisted_3 = { class: "list-item" };
+const _hoisted_4 = {
   key: 2,
   class: "right-tool"
 };
-const __default__$d = defineComponent({
-  name: "MEditorDataSourceListPanel"
-});
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+  ...{
+    name: "MEditorDataSourceListPanel"
+  },
+  __name: "DataSourceListPanel",
   setup(__props) {
     const services = inject("services", {});
     const { dataSourceService, depService } = inject("services") || {};
@@ -4556,7 +4826,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               onClick: addHandler
             }, {
               default: withCtx(() => [
-                _hoisted_2$2
+                createTextVNode("新增")
               ]),
               _: 1
             })
@@ -4569,7 +4839,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             "empty-text": "暂无代码块",
             "default-expand-all": "",
             "expand-on-click-node": false,
-            data: unref(list),
+            data: list.value,
             "highlight-current": true
           }, {
             default: withCtx(({ data }) => [
@@ -4577,13 +4847,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 id: data.id,
                 class: "list-container"
               }, [
-                createElementVNode("div", _hoisted_4, [
-                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$A, {
+                createElementVNode("div", _hoisted_3, [
+                  data.type === "code" ? (openBlock(), createBlock(_sfc_main$B, {
                     key: 0,
                     class: "codeIcon",
                     icon: unref(Coin)
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
-                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$A, {
+                  data.type === "node" ? (openBlock(), createBlock(_sfc_main$B, {
                     key: 1,
                     class: "compIcon",
                     icon: unref(Aim)
@@ -4591,14 +4861,14 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   createElementVNode("span", {
                     class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                   }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_4, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
                       content: "编辑",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$B, {
                           class: "edit-icon",
                           icon: unref(Edit),
                           onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4612,7 +4882,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$A, {
+                        createVNode(_sfc_main$B, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4626,7 +4896,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     })
                   ])) : createCommentVNode("", true)
                 ])
-              ], 8, _hoisted_3)
+              ], 8, _hoisted_2$2)
             ]),
             _: 3
           }, 8, ["data"]),
@@ -4645,11 +4915,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$5 = ["onClick", "onDragstart"];
-const __default__$c = defineComponent({
-  name: "MEditorComponentListPanel"
-});
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+  ...{
+    name: "MEditorComponentListPanel"
+  },
+  __name: "ComponentListPanel",
   setup(__props) {
     const searchText = ref("");
     const filterTextChangeHandler = (v) => {
@@ -4722,18 +4992,18 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "component-list-panel-header"),
           createVNode(unref(TMagicCollapse), {
             class: "ui-component-panel",
-            "model-value": unref(collapseValue)
+            "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
               createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
                     key: index,
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$A, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$B, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -4748,7 +5018,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$A, {
+                            createVNode(_sfc_main$B, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4779,17 +5049,17 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$b = defineComponent({
-  name: "MEditorContentMenu"
-});
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+  ...{
+    name: "MEditorContentMenu"
+  },
+  __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
     isSubMenu: { type: Boolean, default: false }
   },
   emits: ["hide", "show"],
-  setup(__props, { expose, emit }) {
+  setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const menu = ref();
     const subMenu = ref();
@@ -4856,13 +5126,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         return;
       globalThis.removeEventListener("mousedown", hideHandler, true);
     });
-    expose({
+    __expose({
       hide,
       show
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+      return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -4870,7 +5140,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(menuStyle.value)
       }, [
         createElementVNode("div", null, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
             return openBlock(), createBlock(_sfc_main$p, {
               "event-type": "mouseup",
               data: item,
@@ -4897,15 +5167,15 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$a = defineComponent({
-  name: "MEditorLayerMenu"
-});
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+  ...{
+    name: "MEditorLayerMenu"
+  },
+  __name: "LayerMenu",
   props: {
-    layerContentMenu: null
+    layerContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const menu = ref();
@@ -4987,12 +5257,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const show = (e) => {
       menu.value?.show(e);
     };
-    expose({
+    __expose({
       show
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": unref(menuData),
+        "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
         style: { "overflow": "initial" }
@@ -5002,16 +5272,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$4 = ["id", "onMouseenter"];
-const __default__$9 = defineComponent({
-  name: "MEditorLayerPanel"
-});
+const throttleTime = 150;
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+  ...{
+    name: "MEditorLayerPanel"
+  },
+  __name: "LayerPanel",
   props: {
-    layerContentMenu: null
+    layerContentMenu: {}
   },
   setup(__props) {
-    const throttleTime = 150;
     const services = inject("services");
     const editorService = services?.editorService;
     const tree = ref();
@@ -5205,7 +5475,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
           createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-          unref(values).length ? (openBlock(), createBlock(unref(TMagicTree), {
+          values.value.length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
             ref_key: "tree",
@@ -5216,14 +5486,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             "default-expanded-keys": expandedKeys.value,
             "default-checked-keys": checkedKeys.value,
             "current-node-key": currentNodeKey.value,
-            data: unref(values),
+            data: values.value,
             "expand-on-click-node": false,
-            "highlight-current": !unref(isMultiSelect),
+            "highlight-current": !isMultiSelect.value,
             "check-on-click-node": true,
             props: treeProps,
             "filter-node-method": filterNode,
             "allow-drop": allowDrop,
-            "show-checkbox": unref(isMultiSelect),
+            "show-checkbox": isMultiSelect.value,
             onNodeClick: clickHandler,
             onNodeContextmenu: contextmenu,
             onNodeDragEnd: handleDragEnd,
@@ -5253,7 +5523,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$b, {
               ref_key: "menu",
               ref: menu,
-              "layer-content-menu": __props.layerContentMenu
+              "layer-content-menu": _ctx.layerContentMenu
             }, null, 8, ["layer-content-menu"])
           ]))
         ]),
@@ -5267,19 +5537,19 @@ const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const __default__$8 = defineComponent({
-  name: "MEditorSidebar"
-});
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+  ...{
+    name: "MEditorSidebar"
+  },
+  __name: "Sidebar",
   props: {
     data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block", "data-source"] }) },
-    layerContentMenu: null
+    layerContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
-    const tabPaneComponent = getConfig$1("components").tabPane;
-    const tabsComponent = getConfig$1("components").tabs;
+    const tabPaneComponent = getConfig$1("components")?.tabPane;
+    const tabsComponent = getConfig$1("components")?.tabs;
     const activeTabName = ref(props.data?.status);
     const getItemConfig = (data) => {
       const map = {
@@ -5328,26 +5598,26 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         activeTabName.value = status || "0";
       }
     );
-    expose({
+    __expose({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return __props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent).component), mergeProps({
+      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabsComponent)?.component || "el-tabs"), mergeProps({
         key: 0,
         modelValue: activeTabName.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
         class: "m-editor-sidebar tmagic-design-tabs"
-      }, unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
+      }, unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sideBarItems), (config, index) => {
-            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent).component), mergeProps(unref(tabPaneComponent).props({ name: config.text }), {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps(unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
               key: config.$key || index
             }), {
               label: withCtx(() => [
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$A, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$B, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -5360,7 +5630,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     name: "component-list-panel-header",
                     fn: withCtx(() => [
                       config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "0"
                   } : void 0,
                   config.$key === "component-list" || config.slots?.componentListItem ? {
                     name: "component-list-item",
@@ -5372,19 +5643,22 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         key: 1,
                         component
                       }, null, 8, ["component"])) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "1"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerPanelHeader ? {
                     name: "layer-panel-header",
                     fn: withCtx(() => [
                       config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "2"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
                     name: "code-block-panel-header",
                     fn: withCtx(() => [
                       config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "3"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                     name: "code-block-panel-tool",
@@ -5394,7 +5668,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         id,
                         data
                       }) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "4"
                   } : void 0,
                   config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
                     name: "code-block-edit-panel-header",
@@ -5403,7 +5678,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         key: 0,
                         id
                       }) : config.slots?.codeBlockEditPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "5"
                   } : void 0,
                   config.$key === "layer" || config.slots?.layerNodeContent ? {
                     name: "layer-node-content",
@@ -5417,7 +5693,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                         data: nodeData,
                         node
                       }, null, 8, ["data", "node"])) : createCommentVNode("", true)
-                    ])
+                    ]),
+                    key: "6"
                   } : void 0
                 ]), 1040)) : createCommentVNode("", true)
               ]),
@@ -5436,11 +5713,11 @@ const _hoisted_1$2 = {
   class: "m-editor-breadcrumb"
 };
 const _hoisted_2$1 = { key: 0 };
-const __default__$7 = defineComponent({
-  name: "MEditorBreadcrumb"
-});
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+  ...{
+    name: "MEditorBreadcrumb"
+  },
+  __name: "Breadcrumb",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5453,14 +5730,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       editorService?.get("stage")?.select(node2.id);
     };
     return (_ctx, _cache) => {
-      return unref(nodes).length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(path), (item, index) => {
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: item.id
           }, [
             createVNode(unref(TMagicButton), {
               text: "",
-              disabled: item.id === unref(node)?.id,
+              disabled: item.id === node.value?.id,
               onClick: ($event) => select(item)
             }, {
               default: withCtx(() => [
@@ -5468,7 +5745,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
               ]),
               _: 2
             }, 1032, ["disabled", "onClick"]),
-            index < unref(path).length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
           ], 64);
         }), 128))
       ])) : createCommentVNode("", true);
@@ -5480,11 +5757,11 @@ const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
 };
-const __default__$6 = defineComponent({
-  name: "MEditorPageBarScrollContainer"
-});
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+  ...{
+    name: "MEditorPageBarScrollContainer"
+  },
+  __name: "PageBarScrollContainer",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5562,22 +5839,22 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "pageBar",
         ref: pageBar
       }, [
-        unref(showAddPageButton) ? (openBlock(), createElementBlock("div", {
+        showAddPageButton.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           id: "m-editor-page-bar-add-icon",
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$A, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$B, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$A, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$B, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
-        unref(pageLength) ? (openBlock(), createElementBlock("div", {
+        pageLength.value ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
@@ -5591,7 +5868,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$A, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$B, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -5600,11 +5877,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 
 const _hoisted_1 = ["onClick"];
 const _hoisted_2 = { class: "m-editor-page-bar-title" };
-const __default__$5 = defineComponent({
-  name: "MEditorPageBar"
-});
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+  ...{
+    name: "MEditorPageBar"
+  },
+  __name: "PageBar",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
@@ -5626,9 +5903,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$7, null, {
         default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(root) && unref(root).items || [], (item) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(root.value && root.value.items || [], (item) => {
             return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["m-editor-page-bar-item", { active: unref(page)?.id === item.id }]),
+              class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
               key: item.key,
               onClick: ($event) => switchPage(item)
             }, [
@@ -5821,16 +6098,16 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const __default__$4 = defineComponent({
-  name: "MEditorScrollBar"
-});
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+  ...{
+    name: "MEditorScrollBar"
+  },
+  __name: "ScrollBar",
   props: {
-    size: null,
-    scrollSize: null,
+    size: {},
+    scrollSize: {},
     isHorizontal: { type: Boolean },
-    pos: null
+    pos: {}
   },
   emits: ["scroll"],
   setup(__props, { emit }) {
@@ -5895,13 +6172,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         ref_key: "bar",
         ref: bar,
-        class: normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+        class: normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
       }, [
         createElementVNode("div", {
           ref_key: "thumb",
           ref: thumb,
           class: "m-editor-scroll-bar-thumb",
-          style: normalizeStyle(unref(thumbStyle))
+          style: normalizeStyle(thumbStyle.value)
         }, null, 4)
       ], 2);
     };
@@ -5910,11 +6187,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-const __default__$3 = defineComponent({
-  name: "MEditorScrollViewer"
-});
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+  ...{
+    name: "MEditorScrollViewer"
+  },
+  __name: "ScrollViewer",
   props: {
     width: { default: 0 },
     height: { default: 0 },
@@ -5926,7 +6203,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       height: 0
     }) }
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const container = ref();
     const el = ref();
@@ -5980,7 +6257,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         left: hOffset.value
       });
     };
-    expose({
+    __expose({
       container
     });
     return (_ctx, _cache) => {
@@ -5992,23 +6269,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           ref_key: "el",
           ref: el,
-          style: normalizeStyle(unref(style))
+          style: normalizeStyle(style.value)
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(_sfc_main$5, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$5, {
           key: 0,
           "scroll-size": scrollHeight.value,
-          size: __props.wrapHeight,
+          size: _ctx.wrapHeight,
           pos: vOffset.value,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
-        scrollWidth.value > __props.wrapWidth ? (openBlock(), createBlock(_sfc_main$5, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$5, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
           pos: hOffset.value,
-          size: __props.wrapWidth,
+          size: _ctx.wrapWidth,
           onScroll: hScrollHandler
         }, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true)
       ], 512);
@@ -6016,16 +6293,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$2 = defineComponent({
-  name: "MEditorViewerMenu"
-});
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+  ...{
+    name: "MEditorViewerMenu"
+  },
+  __name: "ViewerMenu",
   props: {
     isMultiSelect: { type: Boolean, default: false },
-    stageContentMenu: null
+    stageContentMenu: {}
   },
-  setup(__props, { expose }) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const services = inject("services");
     const editorService = services?.editorService;
@@ -6160,10 +6437,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       const data = await storageService.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== "undefined" && !!data;
     };
-    expose({ show });
+    __expose({ show });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$c, {
-        "menu-data": unref(menuData),
+        "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
       }, null, 8, ["menu-data"]);
@@ -6171,13 +6448,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__$1 = defineComponent({
-  name: "MEditorStage"
-});
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+  ...{
+    name: "MEditorStage"
+  },
+  __name: "Stage",
   props: {
-    stageContentMenu: null
+    stageContentMenu: {}
   },
   setup(__props) {
     let stage = null;
@@ -6302,11 +6579,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
-        width: unref(stageRect)?.width,
-        height: unref(stageRect)?.height,
-        "wrap-width": unref(stageContainerRect)?.width,
-        "wrap-height": unref(stageContainerRect)?.height,
-        zoom: unref(zoom),
+        width: stageRect.value?.width,
+        height: stageRect.value?.height,
+        "wrap-width": stageContainerRect.value?.width,
+        "wrap-height": stageContainerRect.value?.height,
+        zoom: zoom.value,
         "correction-scroll-size": {
           width: 60,
           height: 50
@@ -6317,7 +6594,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             class: "m-editor-stage-container",
             ref_key: "stageContainer",
             ref: stageContainer,
-            style: normalizeStyle(`transform: scale(${unref(zoom)});`),
+            style: normalizeStyle(`transform: scale(${zoom.value});`),
             onContextmenu: contextmenuHandler,
             onDrop: dropHandler,
             onDragover: dragoverHandler
@@ -6326,8 +6603,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             createVNode(_sfc_main$3, {
               ref_key: "menu",
               ref: menu,
-              "is-multi-select": unref(isMultiSelect),
-              "stage-content-menu": __props.stageContentMenu
+              "is-multi-select": isMultiSelect.value,
+              "stage-content-menu": _ctx.stageContentMenu
             }, null, 8, ["is-multi-select", "stage-content-menu"])
           ]))
         ]),
@@ -6337,13 +6614,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const __default__ = defineComponent({
-  name: "MEditorWorkspace"
-});
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+  ...{
+    name: "MEditorWorkspace"
+  },
+  __name: "Workspace",
   props: {
-    stageContentMenu: null
+    stageContentMenu: {}
   },
   setup(__props) {
     const services = inject("services");
@@ -6455,9 +6732,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }, [
         createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          unref(page) ? (openBlock(), createBlock(_sfc_main$2, {
+          page.value ? (openBlock(), createBlock(_sfc_main$2, {
             key: 0,
-            "stage-content-menu": __props.stageContentMenu
+            "stage-content-menu": _ctx.stageContentMenu
           }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
@@ -7560,7 +7837,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
 };
 
 const _sfc_main = defineComponent({
-  name: "m-editor",
+  name: "MEditor",
   components: {
     TMagicNavMenu: _sfc_main$o,
     Sidebar: _sfc_main$9,
@@ -7607,6 +7884,14 @@ const _sfc_main = defineComponent({
   }
 });
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TMagicNavMenu = resolveComponent("TMagicNavMenu");
   const _component_Sidebar = resolveComponent("Sidebar");
@@ -7707,16 +7992,17 @@ const index = {
     setConfig(option);
     app.component(Editor.name, Editor);
     app.component("m-fields-ui-select", _sfc_main$v);
-    app.component("m-fields-code-link", _sfc_main$C);
-    app.component("m-fields-vs-code", _sfc_main$D);
+    app.component("m-fields-code-link", _sfc_main$D);
+    app.component("m-fields-vs-code", _sfc_main$E);
     app.component("magic-code-editor", _sfc_main$u);
-    app.component("m-fields-code-select", _sfc_main$B);
-    app.component("m-fields-code-select-col", _sfc_main$z);
+    app.component("m-fields-code-select", _sfc_main$C);
+    app.component("m-fields-code-select-col", _sfc_main$A);
     app.component("m-fields-event-select", _sfc_main$x);
-    app.component("m-fields-data-source-fields", _sfc_main$y);
+    app.component("m-fields-data-source-fields", _sfc_main$z);
     app.component("m-fields-key-value", _sfc_main$w);
+    app.component("m-fields-data-source-input", _sfc_main$y);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$B as CodeSelect, _sfc_main$z as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$y as DataSourceFields, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$A as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$g as CodeBlockList, CodeDeleteErrorType, _sfc_main$C as CodeSelect, _sfc_main$A as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$z as DataSourceFields, _sfc_main$y as DataSourceInput, _sfc_main$x as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$B as Icon, _sfc_main$w as KeyValue, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$s as LayoutContainer, _sfc_main$n as PropsPanel, _sfc_main$u as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$p as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, editorService, error, eventsService, fillConfig$1 as fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map