@tmagic/editor 1.3.0-alpha.1 → 1.3.0-alpha.3

package/dist/tmagic-editor.umd.cjs

@@ -23,16 +23,16 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const __default__$w = vue.defineComponent({
-    name: "MEditorCode"
-  });
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$w,
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCode"
+    },
+    __name: "Code",
     props: {
-      model: null,
-      name: null,
-      config: null,
-      prop: null
+      model: {},
+      name: {},
+      config: {},
+      prop: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -46,26 +46,26 @@
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
         return vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
-          style: vue.normalizeStyle(`height: ${vue.unref(height)}`),
-          "init-values": __props.model[__props.name],
-          language: vue.unref(language),
-          options: __props.config.options,
+          style: vue.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 = vue.defineComponent({
-    name: "MEditorCodeLink"
-  });
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$v,
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeLink"
+    },
+    __name: "CodeLink",
     props: {
-      config: null,
-      model: null,
-      name: null,
-      prop: null
+      config: {},
+      model: {},
+      name: {},
+      prop: {}
     },
     emits: ["change"],
     setup(__props, { emit }) {
@@ -120,7 +120,7 @@
       return (_ctx, _cache) => {
         const _component_m_fields_link = vue.resolveComponent("m-fields-link");
         return vue.openBlock(), vue.createBlock(_component_m_fields_link, {
-          config: vue.unref(formConfig),
+          config: formConfig.value,
           model: modelValue,
           name: "form",
           onChange: changeHandler
@@ -129,17 +129,17 @@
     }
   });
 
-  const __default__$u = vue.defineComponent({
-    name: "MEditorCodeSelect"
-  });
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$u,
+  const _sfc_main$C = /* @__PURE__ */ vue.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 }) {
@@ -175,13 +175,13 @@
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["m-fields-code-select", __props.config.className])
+          class: vue.normalizeClass(["m-fields-code-select", _ctx.config.className])
         }, [
           vue.createVNode(vue.unref(design.TMagicCard), null, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_m_form_container, {
-                config: vue.unref(codeConfig),
-                model: __props.model[__props.name],
+                config: codeConfig.value,
+                model: _ctx.model[_ctx.name],
                 onChange: changeHandler
               }, null, 8, ["config", "model"])
             ]),
@@ -192,18 +192,18 @@
     }
   });
 
-  const _hoisted_1$n = ["src"];
-  const __default__$t = vue.defineComponent({
-    name: "MEditorIcon"
-  });
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$t,
+  const _hoisted_1$m = ["src"];
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorIcon"
+    },
+    __name: "Icon",
     props: {
-      icon: null
+      icon: {}
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 0,
           class: "magic-editor-icon"
         }, {
@@ -211,23 +211,23 @@
             vue.createVNode(vue.unref(iconsVue.Edit))
           ]),
           _: 1
-        })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 1,
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$n)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$m)
           ]),
           _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+        })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
           key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.icon])
+          class: vue.normalizeClass(["magic-editor-icon", _ctx.icon])
         }, null, 2)) : (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 3,
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(__props.icon))))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.toRaw(_ctx.icon))))
           ]),
           _: 1
         }));
@@ -235,19 +235,19 @@
     }
   });
 
-  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 = vue.defineComponent({
-    name: "MEditorCodeSelectCol"
-  });
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$s,
+  const _sfc_main$A = /* @__PURE__ */ vue.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 }) {
@@ -329,23 +329,23 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
           vue.createElementVNode("div", _hoisted_2$e, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
-              model: __props.model,
+              model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            vue.createVNode(_sfc_main$A, {
+            vue.createVNode(_sfc_main$B, {
               class: "icon",
-              icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+              icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCode
             }, null, 8, ["icon"])
           ]),
           vue.createVNode(_component_m_form_container, {
             config: codeParamsConfig.value,
-            model: __props.model,
+            model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["config", "model"])
         ]);
@@ -353,17 +353,19 @@
     }
   });
 
-  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__ */ vue.createTextVNode("添加");
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.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 }) {
@@ -459,7 +461,7 @@
             {
               validator: ({ value, callback }, { model, parent }) => {
                 const index = parent.findIndex((item) => item.name === value);
-                if (model.index === -1 && index > -1 || model.index > -1 && index !== model.index) {
+                if (model.index === -1 && index > -1 || model.index > -1 && index > -1 && index !== model.index) {
                   return callback(`属性key（${value}）已存在`);
                 }
                 callback();
@@ -499,21 +501,21 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
           vue.createVNode(vue.unref(table.MagicTable), {
-            data: __props.model[__props.name],
+            data: _ctx.model[_ctx.name],
             columns: filedColumns
           }, null, 8, ["data"]),
           vue.createElementVNode("div", _hoisted_2$d, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
-              disabled: __props.disabled,
+              disabled: _ctx.disabled,
               plain: "",
               onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$8
+                vue.createTextVNode("添加")
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -524,7 +526,7 @@
             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"])
         ]);
@@ -532,23 +534,287 @@
     }
   });
 
-  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__ */ vue.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 } = vue.inject("services") || {};
+      const autocomplete = vue.ref();
+      const isFocused = vue.ref(false);
+      const state = vue.ref("");
+      const displayState = vue.ref([]);
+      const input = vue.computed(() => autocomplete.value?.inputRef?.input);
+      const dataSources = vue.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)
+          });
+        }
+      };
+      vue.watch(
+        () => props.model[props.name],
+        (value = "") => {
+          state.value = value;
+          setDisplayState();
+        },
+        { immediate: true }
+      );
+      const mouseupHandler = async () => {
+        isFocused.value = true;
+        await vue.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 vue.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 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(design.getConfig)("components")?.autocomplete.component || "el-autocomplete"), vue.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)
+          },
+          vue.unref(design.getConfig)("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: vue.withCtx(() => [
+            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+          ]),
+          default: vue.withCtx(({ item }) => [
+            vue.createElementVNode("div", _hoisted_1$j, [
+              vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
+              vue.createElementVNode("span", _hoisted_2$c, vue.toDisplayString(item.value), 1)
+            ])
+          ]),
+          _: 1
+        }, 16, ["modelValue"])) : (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(`el-input el-input--${_ctx.size}`),
+          onMouseup: mouseupHandler
+        }, [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(`el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
+          }, [
+            vue.createElementVNode("div", _hoisted_3$5, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+                  item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: index,
+                    style: { "margin-right": "2px" }
+                  }, vue.toDisplayString(item.value), 1)) : vue.createCommentVNode("", true),
+                  item.type === "var" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTag), {
+                    key: index,
+                    size: _ctx.size
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(item.value), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["size"])) : vue.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__ */ vue.createTextVNode("添加事件");
-  const __default__$r = vue.defineComponent({
-    name: "MEditorEventSelect"
-  });
   const _sfc_main$x = /* @__PURE__ */ vue.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 }) {
@@ -699,16 +965,16 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
-          vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
             size: props.size,
-            model: __props.model,
+            model: _ctx.model,
             name: "events",
-            config: vue.unref(tableConfig),
+            config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$c, [
+          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$b, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -716,21 +982,21 @@
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$7
+                vue.createTextVNode("添加事件")
               ]),
               _: 1
             }),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.model[__props.name], (cardItem, index) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.model[_ctx.name], (cardItem, index) => {
               return vue.openBlock(), vue.createBlock(_component_m_form_panel, {
                 key: index,
-                config: vue.unref(actionsConfig),
+                config: actionsConfig.value,
                 model: cardItem,
                 onChange: onChangeHandler
               }, {
                 header: vue.withCtx(() => [
                   vue.createVNode(_component_m_form_container, {
                     class: "fullWidth",
-                    config: vue.unref(eventNameConfig),
+                    config: eventNameConfig.value,
                     model: cardItem,
                     onChange: onChangeHandler
                   }, null, 8, ["config", "model"]),
@@ -750,19 +1016,21 @@
     }
   });
 
-  const _hoisted_1$j = { class: "m-fields-key-value" };
-  const _hoisted_2$b = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _hoisted_3$6 = /* @__PURE__ */ vue.createTextVNode("添加");
+  const _hoisted_1$h = { class: "m-fields-key-value" };
+  const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
   const _sfc_main$w = /* @__PURE__ */ vue.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 }) {
@@ -793,7 +1061,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -803,23 +1071,23 @@
                 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,
               vue.createVNode(vue.unref(design.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"]),
               vue.createVNode(vue.unref(design.TMagicButton), {
                 class: "m-fileds-key-value-delete",
                 type: "danger",
-                size: __props.size,
+                size: _ctx.size,
                 circle: "",
                 plain: "",
                 icon: vue.unref(iconsVue.Delete),
@@ -829,13 +1097,13 @@
           }), 128)),
           vue.createVNode(vue.unref(design.TMagicButton), {
             type: "primary",
-            size: __props.size,
+            size: _ctx.size,
             plain: "",
             icon: vue.unref(iconsVue.Plus),
             onClick: addHandler
           }, {
             default: vue.withCtx(() => [
-              _hoisted_3$6
+              vue.createTextVNode("添加")
             ]),
             _: 1
           }, 8, ["size", "icon"])
@@ -844,17 +1112,16 @@
     }
   });
 
-  const _hoisted_1$i = /* @__PURE__ */ vue.createTextVNode("取消");
-  const __default__$q = vue.defineComponent({
-    name: "MEditorUISelect"
-  });
   const _sfc_main$v = /* @__PURE__ */ vue.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 }) {
@@ -911,7 +1178,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$i
+              vue.createTextVNode("取消")
             ]),
             _: 1
           }, 8, ["icon"])
@@ -921,7 +1188,7 @@
           onClick: startSelect,
           style: { "display": "flex" }
         }, [
-          vue.unref(val) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+          val.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
             key: 0,
             content: "清除"
           }, {
@@ -937,7 +1204,7 @@
             _: 1
           })) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"
+            content: val.value ? toName.value + "_" + val.value : "点击此处选择"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
@@ -945,7 +1212,7 @@
                 style: { "padding": "0", "margin": "0" }
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"), 1)
+                  vue.createTextVNode(vue.toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
                 ]),
                 _: 1
               })
@@ -959,15 +1226,15 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$p = vue.defineComponent({
-    name: "MEditorCodeEditor"
-  });
   const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$p,
+    ...{
+      name: "MEditorCodeEditor"
+    },
+    __name: "CodeEditor",
     props: {
-      initValues: null,
-      modifiedValues: null,
-      type: null,
+      initValues: {},
+      modifiedValues: {},
+      type: {},
       language: { default: "javascript" },
       options: { default: () => ({
         tabSize: 2
@@ -975,7 +1242,7 @@
       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 = "";
@@ -1066,7 +1333,7 @@
       vue.onUnmounted(() => {
         resizeObserver.disconnect();
       });
-      expose({
+      __expose({
         getEditor() {
           return vsEditor || vsDiffEditor;
         },
@@ -1092,11 +1359,11 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const __default__$o = vue.defineComponent({
-    name: "MEditorResizer"
-  });
   const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$o,
+    ...{
+      name: "MEditorResizer"
+    },
+    __name: "Resizer",
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
@@ -1128,20 +1395,20 @@
     }
   });
 
-  const __default__$n = vue.defineComponent({
-    name: "MEditorLayout"
-  });
   const _sfc_main$s = /* @__PURE__ */ vue.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 }) {
@@ -1233,26 +1500,26 @@
           ref: el,
           class: "m-editor-layout"
         }, [
-          vue.unref(hasLeft) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          hasLeft.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-left", __props.leftClass]),
-              style: vue.normalizeStyle(`width: ${__props.left}px`)
+              class: vue.normalizeClass(["m-editor-layout-left", _ctx.leftClass]),
+              style: vue.normalizeStyle(`width: ${_ctx.left}px`)
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
             vue.createVNode(_sfc_main$t, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
+            class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
             style: vue.normalizeStyle(`width: ${center.value}px`)
           }, [
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
-          vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+          hasRight.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.createVNode(_sfc_main$t, { onChange: changeRight }),
             vue.createElementVNode("div", {
-              class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
-              style: vue.normalizeStyle(`width: ${__props.right}px`)
+              class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
+              style: vue.normalizeStyle(`width: ${_ctx.right}px`)
             }, [
               vue.renderSlot(_ctx.$slots, "right")
             ], 6)
@@ -3116,14 +3383,14 @@
     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__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const __default__$m = vue.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__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$m,
+    ...{
+      name: "MEditorAddPageBox"
+    },
+    __name: "AddPageBox",
     setup(__props) {
       const services = vue.inject("services");
       const clickHandler = () => {
@@ -3139,16 +3406,16 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
-          vue.createElementVNode("div", _hoisted_2$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+          vue.createElementVNode("div", _hoisted_2$9, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$5
+              _hoisted_3$4
             ])
           ])
         ]);
@@ -3156,25 +3423,25 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor" };
-  const __default__$l = vue.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__ */ vue.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 } = vue.inject("services") || {};
       const root = vue.computed(() => editorService?.get("root"));
       const nodes = vue.computed(() => editorService?.get("nodes") || []);
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.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 = vue.ref({
@@ -3230,13 +3497,13 @@
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
-          vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
+          showSrc.value ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
             class: "m-editor-content",
-            "init-values": vue.unref(root),
-            options: __props.codeOptions,
+            "init-values": root.value,
+            options: _ctx.codeOptions,
             onSave: saveCode
           }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$s, {
             key: 1,
@@ -3256,13 +3523,13 @@
               vue.renderSlot(_ctx.$slots, "sidebar")
             ]),
             center: vue.withCtx(() => [
-              vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
+              pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
                 vue.createVNode(_sfc_main$r)
               ])
             ]),
             _: 2
           }, [
-            vue.unref(pageLength) > 0 && vue.unref(nodes).length === 1 ? {
+            pageLength.value > 0 && nodes.value.length === 1 ? {
               name: "right",
               fn: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicScrollbar), null, {
@@ -3271,7 +3538,8 @@
                   ]),
                   _: 3
                 })
-              ])
+              ]),
+              key: "0"
             } : void 0
           ]), 1032, ["left", "right"]))
         ]);
@@ -3279,16 +3547,16 @@
     }
   });
 
-  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 = vue.defineComponent({
-    name: "MEditorToolButton"
-  });
+  const _hoisted_2$8 = { class: "el-dropdown-link menubar-menu-button" };
   const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$k,
+    ...{
+      name: "MEditorToolButton"
+    },
+    __name: "ToolButton",
     props: {
       data: { default: () => ({
         type: "text",
@@ -3353,35 +3621,35 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.unref(display) ? (vue.openBlock(), vue.createElementBlock("div", {
+        return display.value ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
-          class: vue.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: vue.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" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
+          _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
-            direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-            __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+            direction: _ctx.data.direction || "vertical"
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+            _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
               placement: "bottom-start",
-              content: __props.data.tooltip
+              content: _ctx.data.tooltip
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   text: "",
-                  disabled: vue.unref(disabled)
+                  disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                       key: 0,
-                      icon: __props.data.icon
+                      icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
+                    vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
                   ]),
                   _: 1
                 }, 8, ["disabled"])
@@ -3391,30 +3659,30 @@
               key: 1,
               size: "small",
               text: "",
-              disabled: vue.unref(disabled)
+              disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                   key: 0,
-                  icon: __props.data.icon
+                  icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                vue.createElementVNode("span", null, vue.toDisplayString(__props.data.text), 1)
+                vue.createElementVNode("span", null, vue.toDisplayString(_ctx.data.text), 1)
               ]),
               _: 1
             }, 8, ["disabled"]))
-          ], 64)) : __props.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
+          ], 64)) : _ctx.data.type === "dropdown" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdown), {
             key: 3,
             trigger: "click",
-            disabled: vue.unref(disabled),
+            disabled: disabled.value,
             onCommand: dropdownHandler
           }, {
             dropdown: vue.withCtx(() => [
-              __props.data.items && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
+              _ctx.data.items && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownMenu), { key: 0 }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (subItem, index) => {
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data.items, (subItem, index) => {
                     return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDropdownItem), {
                       key: index,
-                      command: { data: __props.data, subItem }
+                      command: { data: _ctx.data, subItem }
                     }, {
                       default: vue.withCtx(() => [
                         vue.createTextVNode(vue.toDisplayString(subItem.text), 1)
@@ -3427,8 +3695,8 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$9, [
-                vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
+              vue.createElementVNode("span", _hoisted_2$8, [
+                vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(vue.unref(iconsVue.ArrowDown))
@@ -3438,17 +3706,17 @@
               ])
             ]),
             _: 1
-          }, 8, ["disabled"])) : __props.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, __props.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
+          }, 8, ["disabled"])) : _ctx.data.type === "component" ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.data.component), vue.normalizeProps(vue.mergeProps({ key: 4 }, _ctx.data.props || {})), null, 16)) : vue.createCommentVNode("", true)
         ], 34)) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const __default__$j = vue.defineComponent({
-    name: "MEditorNavMenu"
-  });
   const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$j,
+    ...{
+      name: "MEditorNavMenu"
+    },
+    __name: "NavMenu",
     props: {
       data: { default: () => ({}) },
       height: { default: 35 }
@@ -3597,15 +3865,15 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-nav-menu",
-          style: vue.normalizeStyle({ height: `${__props.height}px` })
+          style: vue.normalizeStyle({ height: `${_ctx.height}px` })
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(keys), (key) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: vue.normalizeClass(`menu-${key}`),
               key,
-              style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
+              style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
                 return vue.openBlock(), vue.createBlock(_sfc_main$p, {
                   data: item,
                   key: index
@@ -3618,14 +3886,14 @@
     }
   });
 
-  const _hoisted_1$e = { class: "m-editor-props-panel" };
-  const __default__$i = vue.defineComponent({
-    name: "MEditorPropsPanel"
-  });
+  const _hoisted_1$d = { class: "m-editor-props-panel" };
   const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$i,
+    ...{
+      name: "MEditorPropsPanel"
+    },
+    __name: "PropsPanel",
     emits: ["mounted"],
-    setup(__props, { expose, emit }) {
+    setup(__props, { expose: __expose, emit }) {
       const internalInstance = vue.getCurrentInstance();
       const values = vue.ref({});
       const configForm = vue.ref();
@@ -3666,16 +3934,16 @@
           design.tMagicMessage.error(e.message);
         }
       };
-      expose({ submit });
+      __expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
             ref: configForm,
-            class: vue.normalizeClass(`m-editor-props-panel ${vue.unref(propsPanelSize)}`),
-            "popper-class": `m-editor-props-panel-popper ${vue.unref(propsPanelSize)}`,
-            size: vue.unref(propsPanelSize),
+            class: vue.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
@@ -3686,6 +3954,9 @@
   });
 
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorSearchInput"
+    },
     __name: "SearchInput",
     emits: ["search"],
     setup(__props, { emit }) {
@@ -3717,80 +3988,77 @@
     }
   });
 
-  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__*/vue.createElementVNode("g", {
+  const _hoisted_1$c = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$7 = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
-    /*#__PURE__*/vue.createElementVNode("path", {
+    /* @__PURE__ */ vue.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__*/vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
+    /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorAppManageIcon"
+    },
+    __name: "AppManageIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, _hoisted_3$3);
+      };
+    }
+  });
 
-  function _sfc_render$2(_ctx, _cache) {
-    return (vue.openBlock(), vue.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__*/vue.createStaticVNode("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2);
-  const _hoisted_4$4 = [
-    _hoisted_2$7
+  const _hoisted_2$6 = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$3 = [
+    _hoisted_2$6
   ];
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorCodeIcon"
+    },
+    __name: "CodeIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$3);
+      };
+    }
+  });
 
-  function _sfc_render$1(_ctx, _cache) {
-    return (vue.openBlock(), vue.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__ */ vue.createTextVNode("确认");
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const _hoisted_4$3 = {
+  const _hoisted_2$5 = {
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_5$2 = /* @__PURE__ */ vue.createTextVNode("关闭");
-  const __default__$h = vue.defineComponent({
-    name: "MEditorCodeDraftEditor"
-  });
   const _sfc_main$j = /* @__PURE__ */ vue.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 = vue.inject("services");
       const codeContent = vue.ref("");
@@ -3855,7 +4123,7 @@
           codeEditor.value.focus();
         }
       };
-      expose({
+      __expose({
         saveAndClose,
         close
       });
@@ -3869,10 +4137,10 @@
             class: "m-editor-container",
             "init-values": `${codeContent.value}`,
             onSave: saveCodeDraft,
-            language: __props.language,
-            options: vue.unref(codeOptions)
+            language: _ctx.language,
+            options: codeOptions.value
           }, null, 8, ["init-values", "language", "options"]),
-          __props.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          _ctx.editable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3889,7 +4157,7 @@
               onClick: saveAndClose
             }, {
               default: vue.withCtx(() => [
-                _hoisted_2$6
+                vue.createTextVNode("确认")
               ]),
               _: 1
             }),
@@ -3898,11 +4166,11 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$3
+                vue.createTextVNode("关闭")
               ]),
               _: 1
             })
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$5, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               type: "primary",
               class: "button",
@@ -3918,7 +4186,7 @@
               onClick: close
             }, {
               default: vue.withCtx(() => [
-                _hoisted_5$2
+                vue.createTextVNode("关闭")
               ]),
               _: 1
             })
@@ -3928,25 +4196,25 @@
     }
   });
 
-  const _hoisted_1$a = { class: "code-name-wrapper" };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
+  const _hoisted_1$9 = { class: "code-name-wrapper" };
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
   const _hoisted_3$2 = { class: "code-name-wrapper" };
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
-  const __default__$g = vue.defineComponent({
-    name: "MEditorFunctionEditor"
-  });
   const _sfc_main$i = /* @__PURE__ */ vue.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",
@@ -4047,20 +4315,20 @@
         services?.codeBlockService.setCodeEditorShowStatus(false);
       };
       const codeDraftEditor = vue.ref();
-      expose({
+      __expose({
         codeDraftEditor
       });
       return (_ctx, _cache) => {
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCard), { shadow: "never" }, {
           header: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
-              _hoisted_2$5,
+            vue.createElementVNode("div", _hoisted_1$9, [
+              _hoisted_2$4,
               vue.createVNode(vue.unref(design.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"])
             ]),
             vue.createElementVNode("div", _hoisted_3$2, [
@@ -4080,11 +4348,11 @@
             vue.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
@@ -4096,17 +4364,17 @@
     }
   });
 
-  const _hoisted_1$9 = {
+  const _hoisted_1$8 = {
     key: 0,
     class: "m-editor-code-block-editor-panel"
   };
-  const __default__$f = vue.defineComponent({
-    name: "MEditorCodeBlockEditor"
-  });
   const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$f,
+    ...{
+      name: "MEditorCodeBlockEditor"
+    },
+    __name: "CodeBlockEditor",
     props: {
-      paramsColConfig: null
+      paramsColConfig: {}
     },
     setup(__props) {
       const services = vue.inject("services");
@@ -4153,7 +4421,7 @@
           "append-to-body": true,
           "show-close": false,
           "close-on-click-modal": true,
-          size: vue.unref(size),
+          size: size.value,
           "before-close": handleClose
         }, {
           default: vue.withCtx(() => [
@@ -4164,17 +4432,17 @@
               class: "code-editor-layout"
             }, {
               center: vue.withCtx(() => [
-                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
+                !vue.unref(lodashEs.isEmpty)(codeConfig.value) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+                  vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: id.value }),
                   codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$i, {
                     key: 0,
                     ref_key: "functionEditor",
                     ref: functionEditor,
-                    id: vue.unref(id),
+                    id: id.value,
                     name: codeConfig.value.name,
                     content: codeConfig.value.content,
-                    paramsColConfig: __props.paramsColConfig,
-                    editable: !!vue.unref(editable),
+                    paramsColConfig: _ctx.paramsColConfig,
+                    editable: !!editable.value,
                     autoSaveDraft: true,
                     codeOptions: vue.unref(codeOptions)
                   }, null, 8, ["id", "name", "content", "paramsColConfig", "editable", "codeOptions"])) : vue.createCommentVNode("", true)
@@ -4189,22 +4457,21 @@
     }
   });
 
-  const _hoisted_1$8 = { class: "search-wrapper" };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.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 = vue.defineComponent({
-    name: "MEditorCodeBlockList"
-  });
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$e,
+    ...{
+      name: "MEditorCodeBlockList"
+    },
+    __name: "CodeBlockList",
     props: {
-      customError: null,
-      paramsColConfig: null
+      customError: { type: Function },
+      paramsColConfig: {}
     },
     setup(__props) {
       const props = __props;
@@ -4293,9 +4560,9 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$8, [
+              vue.createElementVNode("div", _hoisted_1$7, [
                 vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-                vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
+                editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
                   type: "primary",
@@ -4303,7 +4570,7 @@
                   onClick: createCodeBlock
                 }, {
                   default: vue.withCtx(() => [
-                    _hoisted_2$4
+                    vue.createTextVNode("新增")
                   ]),
                   _: 1
                 })) : vue.createCommentVNode("", true)
@@ -4315,9 +4582,9 @@
               class: "magic-editor-layer-tree",
               "node-key": "id",
               "empty-text": "暂无代码块",
-              "default-expanded-keys": vue.unref(expandedKeys),
+              "default-expanded-keys": expandedKeys.value,
               "expand-on-click-node": false,
-              data: vue.unref(codeList),
+              data: codeList.value,
               props: treeProps,
               "highlight-current": true,
               "filter-node-method": filterNode,
@@ -4328,41 +4595,41 @@
                   id: data.id,
                   class: "list-container"
                 }, [
-                  vue.createElementVNode("div", _hoisted_4$1, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(CodeIcon, {
+                  vue.createElementVNode("div", _hoisted_3$1, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$k, {
                       key: 0,
                       class: "codeIcon"
                     })) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(AppManageIcon, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$l, {
                       key: 1,
                       class: "compIcon"
                     })) : vue.createCommentVNode("", true),
                     vue.createElementVNode("span", {
                       class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                     }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
-                        content: vue.unref(editable) ? "编辑" : "查看",
+                        content: editable.value ? "编辑" : "查看",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
-                            icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
+                          vue.createVNode(_sfc_main$B, {
+                            icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
                           }, null, 8, ["icon", "onClick"])
                         ]),
                         _: 2
                       }, 1032, ["content"]),
-                      vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
+                      editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                         key: 0,
                         effect: "dark",
                         content: "删除",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$B, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -4376,13 +4643,13 @@
                       })
                     ])) : vue.createCommentVNode("", true)
                   ])
-                ], 8, _hoisted_3$1)
+                ], 8, _hoisted_2$3)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "data"]),
-            vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
+            isShowCodeBlockEditor.value ? (vue.openBlock(), vue.createBlock(_sfc_main$h, {
               key: 0,
-              paramsColConfig: __props.paramsColConfig
+              paramsColConfig: _ctx.paramsColConfig
             }, {
               "code-block-edit-panel-header": vue.withCtx(({ id }) => [
                 vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
@@ -4396,16 +4663,17 @@
     }
   });
 
-  const _hoisted_1$7 = /* @__PURE__ */ vue.createTextVNode("确定");
-  const _hoisted_2$3 = /* @__PURE__ */ vue.createTextVNode("关闭");
   const _sfc_main$f = /* @__PURE__ */ vue.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 = vue.ref("base");
       const services = vue.inject("services");
@@ -4436,7 +4704,7 @@
       const hide = () => {
         visible.value = false;
       };
-      expose({
+      __expose({
         show() {
           visible.value = true;
         },
@@ -4446,12 +4714,12 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.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: vue.unref(size)
+          size: size.value
         }, {
           footer: vue.withCtx(() => [
             vue.createElementVNode("div", null, [
@@ -4460,13 +4728,13 @@
                 onClick: submitHandler
               }, {
                 default: vue.withCtx(() => [
-                  _hoisted_1$7
+                  vue.createTextVNode("确定")
                 ]),
                 _: 1
               }),
               vue.createVNode(vue.unref(design.TMagicButton), { onClick: hide }, {
                 default: vue.withCtx(() => [
-                  _hoisted_2$3
+                  vue.createTextVNode("关闭")
                 ]),
                 _: 1
               })
@@ -4476,7 +4744,7 @@
             vue.createVNode(vue.unref(form.MForm), {
               ref_key: "form",
               ref: form$1,
-              config: vue.unref(dataSourceConfig),
+              config: dataSourceConfig.value,
               "init-values": initValues.value,
               onChange: changeHandler
             }, null, 8, ["config", "init-values"])
@@ -4488,18 +4756,17 @@
   });
 
   const _hoisted_1$6 = { class: "search-wrapper" };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.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 = vue.defineComponent({
-    name: "MEditorDataSourceListPanel"
-  });
   const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$d,
+    ...{
+      name: "MEditorDataSourceListPanel"
+    },
+    __name: "DataSourceListPanel",
     setup(__props) {
       const services = vue.inject("services", {});
       const { dataSourceService, depService } = vue.inject("services") || {};
@@ -4565,7 +4832,7 @@
                 onClick: addHandler
               }, {
                 default: vue.withCtx(() => [
-                  _hoisted_2$2
+                  vue.createTextVNode("新增")
                 ]),
                 _: 1
               })
@@ -4578,7 +4845,7 @@
               "empty-text": "暂无代码块",
               "default-expand-all": "",
               "expand-on-click-node": false,
-              data: vue.unref(list),
+              data: list.value,
               "highlight-current": true
             }, {
               default: vue.withCtx(({ data }) => [
@@ -4586,13 +4853,13 @@
                   id: data.id,
                   class: "list-container"
                 }, [
-                  vue.createElementVNode("div", _hoisted_4, [
-                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                  vue.createElementVNode("div", _hoisted_3, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                       key: 0,
                       class: "codeIcon",
                       icon: vue.unref(iconsVue.Coin)
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                       key: 1,
                       class: "compIcon",
                       icon: vue.unref(iconsVue.Aim)
@@ -4600,14 +4867,14 @@
                     vue.createElementVNode("span", {
                       class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                     }, vue.toDisplayString(data.name) + "（" + vue.toDisplayString(data.id) + "）", 3),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
                         content: "编辑",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$B, {
                             class: "edit-icon",
                             icon: vue.unref(iconsVue.Edit),
                             onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -4621,7 +4888,7 @@
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$A, {
+                          vue.createVNode(_sfc_main$B, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -4635,7 +4902,7 @@
                       })
                     ])) : vue.createCommentVNode("", true)
                   ])
-                ], 8, _hoisted_3)
+                ], 8, _hoisted_2$2)
               ]),
               _: 3
             }, 8, ["data"]),
@@ -4654,11 +4921,11 @@
   });
 
   const _hoisted_1$5 = ["onClick", "onDragstart"];
-  const __default__$c = vue.defineComponent({
-    name: "MEditorComponentListPanel"
-  });
   const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$c,
+    ...{
+      name: "MEditorComponentListPanel"
+    },
+    __name: "ComponentListPanel",
     setup(__props) {
       const searchText = vue.ref("");
       const filterTextChangeHandler = (v) => {
@@ -4731,18 +4998,18 @@
             vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
             vue.createVNode(vue.unref(design.TMagicCollapse), {
               class: "ui-component-panel",
-              "model-value": vue.unref(collapseValue)
+              "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
                       key: index,
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -4757,7 +5024,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$A, {
+                              vue.createVNode(_sfc_main$B, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4788,17 +5055,17 @@
     }
   });
 
-  const __default__$b = vue.defineComponent({
-    name: "MEditorContentMenu"
-  });
   const _sfc_main$c = /* @__PURE__ */ vue.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 = vue.ref();
       const subMenu = vue.ref();
@@ -4865,13 +5132,13 @@
           return;
         globalThis.removeEventListener("mousedown", hideHandler, true);
       });
-      expose({
+      __expose({
         hide,
         show
       });
       return (_ctx, _cache) => {
         const _component_content_menu = vue.resolveComponent("content-menu", true);
-        return __props.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+        return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "magic-editor-content-menu",
           ref_key: "menu",
@@ -4879,7 +5146,7 @@
           style: vue.normalizeStyle(menuStyle.value)
         }, [
           vue.createElementVNode("div", null, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$p, {
                 "event-type": "mouseup",
                 data: item,
@@ -4906,15 +5173,15 @@
     }
   });
 
-  const __default__$a = vue.defineComponent({
-    name: "MEditorLayerMenu"
-  });
   const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$a,
+    ...{
+      name: "MEditorLayerMenu"
+    },
+    __name: "LayerMenu",
     props: {
-      layerContentMenu: null
+      layerContentMenu: {}
     },
-    setup(__props, { expose }) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const services = vue.inject("services");
       const menu = vue.ref();
@@ -4996,12 +5263,12 @@
       const show = (e) => {
         menu.value?.show(e);
       };
-      expose({
+      __expose({
         show
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$c, {
-          "menu-data": vue.unref(menuData),
+          "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
           style: { "overflow": "initial" }
@@ -5011,16 +5278,16 @@
   });
 
   const _hoisted_1$4 = ["id", "onMouseenter"];
-  const __default__$9 = vue.defineComponent({
-    name: "MEditorLayerPanel"
-  });
+  const throttleTime = 150;
   const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$9,
+    ...{
+      name: "MEditorLayerPanel"
+    },
+    __name: "LayerPanel",
     props: {
-      layerContentMenu: null
+      layerContentMenu: {}
     },
     setup(__props) {
-      const throttleTime = 150;
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const tree = vue.ref();
@@ -5214,7 +5481,7 @@
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
             vue.createVNode(_sfc_main$m, { onSearch: filterTextChangeHandler }),
-            vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
+            values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
               ref_key: "tree",
@@ -5225,14 +5492,14 @@
               "default-expanded-keys": expandedKeys.value,
               "default-checked-keys": checkedKeys.value,
               "current-node-key": currentNodeKey.value,
-              data: vue.unref(values),
+              data: values.value,
               "expand-on-click-node": false,
-              "highlight-current": !vue.unref(isMultiSelect),
+              "highlight-current": !isMultiSelect.value,
               "check-on-click-node": true,
               props: treeProps,
               "filter-node-method": filterNode,
               "allow-drop": allowDrop,
-              "show-checkbox": vue.unref(isMultiSelect),
+              "show-checkbox": isMultiSelect.value,
               onNodeClick: clickHandler,
               onNodeContextmenu: contextmenu,
               onNodeDragEnd: handleDragEnd,
@@ -5262,7 +5529,7 @@
               vue.createVNode(_sfc_main$b, {
                 ref_key: "menu",
                 ref: menu,
-                "layer-content-menu": __props.layerContentMenu
+                "layer-content-menu": _ctx.layerContentMenu
               }, null, 8, ["layer-content-menu"])
             ]))
           ]),
@@ -5276,19 +5543,19 @@
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const __default__$8 = vue.defineComponent({
-    name: "MEditorSidebar"
-  });
   const _sfc_main$9 = /* @__PURE__ */ vue.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 = design.getConfig("components").tabPane;
-      const tabsComponent = design.getConfig("components").tabs;
+      const tabPaneComponent = design.getConfig("components")?.tabPane;
+      const tabsComponent = design.getConfig("components")?.tabs;
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -5337,26 +5604,26 @@
           activeTabName.value = status || "0";
         }
       );
-      expose({
+      __expose({
         activeTabName
       });
       return (_ctx, _cache) => {
-        return __props.data.type === "tabs" && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent).component), vue.mergeProps({
+        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent)?.component || "el-tabs"), vue.mergeProps({
           key: 0,
           modelValue: activeTabName.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
           class: "m-editor-sidebar tmagic-design-tabs"
-        }, vue.unref(tabsComponent).props({ type: "card", tabPosition: "left" })), {
+        }, vue.unref(tabsComponent)?.props({ type: "card", tabPosition: "left" }) || {}), {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(sideBarItems), (config, index) => {
-              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent).component), vue.mergeProps(vue.unref(tabPaneComponent).props({ name: config.text }), {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent)?.component || "el-tab-pane"), vue.mergeProps(vue.unref(tabPaneComponent)?.props({ name: config.text, lazy: config.lazy }) || {}, {
                 key: config.$key || index
               }), {
                 label: vue.withCtx(() => [
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$A, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$B, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -5369,7 +5636,8 @@
                       name: "component-list-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "0"
                     } : void 0,
                     config.$key === "component-list" || config.slots?.componentListItem ? {
                       name: "component-list-item",
@@ -5381,19 +5649,22 @@
                           key: 1,
                           component
                         }, null, 8, ["component"])) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "1"
                     } : void 0,
                     config.$key === "layer" || config.slots?.layerPanelHeader ? {
                       name: "layer-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "2"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
                       name: "code-block-panel-header",
                       fn: vue.withCtx(() => [
                         config.$key === "code-block" ? vue.renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "3"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
                       name: "code-block-panel-tool",
@@ -5403,7 +5674,8 @@
                           id,
                           data
                         }) : config.slots?.codeBlockPanelTool ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "4"
                     } : void 0,
                     config.$key === "code-block" || config.slots?.codeBlockEditPanelHeader ? {
                       name: "code-block-edit-panel-header",
@@ -5412,7 +5684,8 @@
                           key: 0,
                           id
                         }) : config.slots?.codeBlockEditPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(config.slots.codeBlockEditPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "5"
                     } : void 0,
                     config.$key === "layer" || config.slots?.layerNodeContent ? {
                       name: "layer-node-content",
@@ -5426,7 +5699,8 @@
                           data: nodeData,
                           node
                         }, null, 8, ["data", "node"])) : vue.createCommentVNode("", true)
-                      ])
+                      ]),
+                      key: "6"
                     } : void 0
                   ]), 1040)) : vue.createCommentVNode("", true)
                 ]),
@@ -5445,11 +5719,11 @@
     class: "m-editor-breadcrumb"
   };
   const _hoisted_2$1 = { key: 0 };
-  const __default__$7 = vue.defineComponent({
-    name: "MEditorBreadcrumb"
-  });
   const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$7,
+    ...{
+      name: "MEditorBreadcrumb"
+    },
+    __name: "Breadcrumb",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5462,14 +5736,14 @@
         editorService?.get("stage")?.select(node2.id);
       };
       return (_ctx, _cache) => {
-        return vue.unref(nodes).length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(path), (item, index) => {
+        return nodes.value.length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.id
             }, [
               vue.createVNode(vue.unref(design.TMagicButton), {
                 text: "",
-                disabled: item.id === vue.unref(node)?.id,
+                disabled: item.id === node.value?.id,
                 onClick: ($event) => select(item)
               }, {
                 default: vue.withCtx(() => [
@@ -5477,7 +5751,7 @@
                 ]),
                 _: 2
               }, 1032, ["disabled", "onClick"]),
-              index < vue.unref(path).length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
             ], 64);
           }), 128))
         ])) : vue.createCommentVNode("", true);
@@ -5489,11 +5763,11 @@
     key: 1,
     style: { "width": "21px" }
   };
-  const __default__$6 = vue.defineComponent({
-    name: "MEditorPageBarScrollContainer"
-  });
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$6,
+    ...{
+      name: "MEditorPageBarScrollContainer"
+    },
+    __name: "PageBarScrollContainer",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5571,22 +5845,22 @@
           ref_key: "pageBar",
           ref: pageBar
         }, [
-          vue.unref(showAddPageButton) ? (vue.openBlock(), vue.createElementBlock("div", {
+          showAddPageButton.value ? (vue.openBlock(), vue.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
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
-          vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
+          pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
@@ -5600,7 +5874,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$A, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$B, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -5609,11 +5883,11 @@
 
   const _hoisted_1 = ["onClick"];
   const _hoisted_2 = { class: "m-editor-page-bar-title" };
-  const __default__$5 = vue.defineComponent({
-    name: "MEditorPageBar"
-  });
   const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$5,
+    ...{
+      name: "MEditorPageBar"
+    },
+    __name: "PageBar",
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
@@ -5635,9 +5909,9 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$7, null, {
           default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(root) && vue.unref(root).items || [], (item) => {
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(root.value && root.value.items || [], (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["m-editor-page-bar-item", { active: vue.unref(page)?.id === item.id }]),
+                class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
                 key: item.key,
                 onClick: ($event) => switchPage(item)
               }, [
@@ -5830,16 +6104,16 @@
     };
   }
 
-  const __default__$4 = vue.defineComponent({
-    name: "MEditorScrollBar"
-  });
   const _sfc_main$5 = /* @__PURE__ */ vue.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 }) {
@@ -5904,13 +6178,13 @@
         return vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "bar",
           ref: bar,
-          class: vue.normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
+          class: vue.normalizeClass(["m-editor-scroll-bar", _ctx.isHorizontal ? "horizontal" : "vertical"])
         }, [
           vue.createElementVNode("div", {
             ref_key: "thumb",
             ref: thumb,
             class: "m-editor-scroll-bar-thumb",
-            style: vue.normalizeStyle(vue.unref(thumbStyle))
+            style: vue.normalizeStyle(thumbStyle.value)
           }, null, 4)
         ], 2);
       };
@@ -5919,11 +6193,11 @@
 
   const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-  const __default__$3 = vue.defineComponent({
-    name: "MEditorScrollViewer"
-  });
   const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$3,
+    ...{
+      name: "MEditorScrollViewer"
+    },
+    __name: "ScrollViewer",
     props: {
       width: { default: 0 },
       height: { default: 0 },
@@ -5935,7 +6209,7 @@
         height: 0
       }) }
     },
-    setup(__props, { expose }) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const container = vue.ref();
       const el = vue.ref();
@@ -5989,7 +6263,7 @@
           left: hOffset.value
         });
       };
-      expose({
+      __expose({
         container
       });
       return (_ctx, _cache) => {
@@ -6001,23 +6275,23 @@
           vue.createElementVNode("div", {
             ref_key: "el",
             ref: el,
-            style: vue.normalizeStyle(vue.unref(style))
+            style: vue.normalizeStyle(style.value)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > __props.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > __props.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
         ], 512);
@@ -6025,16 +6299,16 @@
     }
   });
 
-  const __default__$2 = vue.defineComponent({
-    name: "MEditorViewerMenu"
-  });
   const _sfc_main$3 = /* @__PURE__ */ vue.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 = vue.inject("services");
       const editorService = services?.editorService;
@@ -6169,10 +6443,10 @@
         const data = await storageService.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
       };
-      expose({ show });
+      __expose({ show });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(_sfc_main$c, {
-          "menu-data": vue.unref(menuData),
+          "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
         }, null, 8, ["menu-data"]);
@@ -6180,13 +6454,13 @@
     }
   });
 
-  const __default__$1 = vue.defineComponent({
-    name: "MEditorStage"
-  });
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$1,
+    ...{
+      name: "MEditorStage"
+    },
+    __name: "Stage",
     props: {
-      stageContentMenu: null
+      stageContentMenu: {}
     },
     setup(__props) {
       let stage = null;
@@ -6311,11 +6585,11 @@
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
-          width: vue.unref(stageRect)?.width,
-          height: vue.unref(stageRect)?.height,
-          "wrap-width": vue.unref(stageContainerRect)?.width,
-          "wrap-height": vue.unref(stageContainerRect)?.height,
-          zoom: vue.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
@@ -6326,7 +6600,7 @@
               class: "m-editor-stage-container",
               ref_key: "stageContainer",
               ref: stageContainer,
-              style: vue.normalizeStyle(`transform: scale(${vue.unref(zoom)});`),
+              style: vue.normalizeStyle(`transform: scale(${zoom.value});`),
               onContextmenu: contextmenuHandler,
               onDrop: dropHandler,
               onDragover: dragoverHandler
@@ -6335,8 +6609,8 @@
               vue.createVNode(_sfc_main$3, {
                 ref_key: "menu",
                 ref: menu,
-                "is-multi-select": vue.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"])
             ]))
           ]),
@@ -6346,13 +6620,13 @@
     }
   });
 
-  const __default__ = vue.defineComponent({
-    name: "MEditorWorkspace"
-  });
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
-    ...__default__,
+    ...{
+      name: "MEditorWorkspace"
+    },
+    __name: "Workspace",
     props: {
-      stageContentMenu: null
+      stageContentMenu: {}
     },
     setup(__props) {
       const services = vue.inject("services");
@@ -6464,9 +6738,9 @@
         }, [
           vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            vue.unref(page) ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
               key: 0,
-              "stage-content-menu": __props.stageContentMenu
+              "stage-content-menu": _ctx.stageContentMenu
             }, null, 8, ["stage-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content"),
@@ -7098,6 +7372,7 @@
           });
         });
       });
+      this.emit("collected", nodes, deep);
     }
     /**
      * 清除依赖
@@ -7126,6 +7401,7 @@
           const fullKey = prop ? `${prop}.${key}` : key;
           if (target.isTarget(key, value)) {
             target.updateDep(node, fullKey);
+            this.emit("update-dep", node, fullKey);
           } else if (!keyIsItems && Array.isArray(value)) {
             value.forEach((item, index) => {
               collectTarget(item, `${fullKey}.${index}`);
@@ -7400,6 +7676,42 @@
     });
   };
   const initServiceEvents = (props, emit, { editorService, codeBlockService, dataSourceService, depService }) => {
+    const getApp = () => {
+      const stage = editorService.get("stage");
+      return stage?.renderer.runtime?.getApp?.();
+    };
+    const updateDataSoucreSchema = () => {
+      const root = editorService.get("root");
+      if (root?.dataSources) {
+        getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+      }
+    };
+    const upateNodeWhenDataSourceChange = (nodes) => {
+      const root = editorService.get("root");
+      const stage = editorService.get("stage");
+      if (!root || !stage)
+        return;
+      const app = getApp();
+      if (!app)
+        return;
+      if (app.dsl) {
+        app.dsl.dataSourceDeps = root.dataSourceDeps;
+        app.dsl.dataSources = root.dataSources;
+      }
+      updateDataSoucreSchema();
+      nodes.forEach((node) => {
+        const deps = Object.values(root.dataSourceDeps || {});
+        deps.forEach((dep) => {
+          if (dep[node.id]) {
+            stage.update({
+              config: lodashEs.cloneDeep(node),
+              parentId: editorService.getParentById(node.id)?.id,
+              root: lodashEs.cloneDeep(root)
+            });
+          }
+        });
+      });
+    };
     const targetAddHandler = (target) => {
       if (target.type !== "data-source")
         return;
@@ -7417,8 +7729,16 @@
         return;
       delete root.dataSourceDeps[id];
     };
+    const depUpdateHandler = (node) => {
+      upateNodeWhenDataSourceChange([node]);
+    };
+    const collectedHandler = (nodes) => {
+      upateNodeWhenDataSourceChange(nodes);
+    };
     depService.on("add-target", targetAddHandler);
     depService.on("remove-target", targetRemoveHandler);
+    depService.on("dep-update", depUpdateHandler);
+    depService.on("collected", collectedHandler);
     const rootChangeHandler = async (value, preValue) => {
       const nodeId = editorService.get("node")?.id || props.defaultSelected;
       let node;
@@ -7486,14 +7806,20 @@
     codeBlockService.on("remove", codeBlockRemoveHandler);
     const dataSourceAddHandler = (config) => {
       depService.addTarget(createDataSourceTarget(config.id, config));
+      getApp()?.dataSourceManager?.addDataSource(config);
     };
     const dataSourceUpdateHandler = (config) => {
       if (config.title) {
         depService.getTarget(config.id).name = config.title;
       }
+      const root = editorService.get("root");
+      const targets = depService.getTargets("data-source");
+      const nodes = utils.getNodes(Object.keys(targets[config.id].deps), root?.items);
+      upateNodeWhenDataSourceChange(nodes);
     };
     const dataSourceRemoveHandler = (id) => {
       depService.removeTarget(id);
+      getApp()?.dataSourceManager?.removeDataSource(id);
     };
     dataSourceService.on("add", dataSourceAddHandler);
     dataSourceService.on("update", dataSourceUpdateHandler);
@@ -7501,6 +7827,8 @@
     vue.onUnmounted(() => {
       depService.off("add-target", targetAddHandler);
       depService.off("remove-target", targetRemoveHandler);
+      depService.off("dep-update", depUpdateHandler);
+      depService.off("collected", collectedHandler);
       editorService.off("history-change", historyChangeHandler);
       editorService.off("root-change", rootChangeHandler);
       editorService.off("add", nodeAddHandler);
@@ -7515,7 +7843,7 @@
   };
 
   const _sfc_main = vue.defineComponent({
-    name: "m-editor",
+    name: "MEditor",
     components: {
       TMagicNavMenu: _sfc_main$o,
       Sidebar: _sfc_main$9,
@@ -7562,6 +7890,14 @@
     }
   });
 
+  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 = vue.resolveComponent("TMagicNavMenu");
     const _component_Sidebar = vue.resolveComponent("Sidebar");
@@ -7662,14 +7998,15 @@
       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);
     }
   };
 
@@ -7677,16 +8014,17 @@
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockList = _sfc_main$g;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$B;
-  exports.CodeSelectCol = _sfc_main$z;
+  exports.CodeSelect = _sfc_main$C;
+  exports.CodeSelectCol = _sfc_main$A;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
-  exports.DataSourceFields = _sfc_main$y;
+  exports.DataSourceFields = _sfc_main$z;
+  exports.DataSourceInput = _sfc_main$y;
   exports.EventSelect = _sfc_main$x;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$A;
+  exports.Icon = _sfc_main$B;
   exports.KeyValue = _sfc_main$w;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;