@tmagic/editor 1.2.13 → 1.2.15

package/dist/tmagic-editor.umd.cjs

@@ -1,13 +1,10 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('@tmagic/form'), require('@tmagic/schema'), require('@tmagic/design'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('@tmagic/stage'), require('events'), require('keycon'), require('@tmagic/core')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', '@tmagic/form', '@tmagic/schema', '@tmagic/design', 'monaco-editor', 'gesto', '@tmagic/utils', '@tmagic/stage', 'events', 'keycon', '@tmagic/core'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.form, global.schema, global.design, global.monaco, global.Gesto, global.utils, global.StageCore, global.events, global.KeyController, global.core));
-})(this, (function (exports, vue, serialize, iconsVue, lodashEs, form, schema, design, monaco, Gesto, utils, StageCore, events, KeyController, core) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('lodash-es'), require('@tmagic/design'), require('@tmagic/schema'), require('@element-plus/icons-vue'), require('@tmagic/form'), require('monaco-editor'), require('gesto'), require('@tmagic/utils'), require('keycon'), require('@tmagic/stage'), require('events'), require('@tmagic/core')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'lodash-es', '@tmagic/design', '@tmagic/schema', '@element-plus/icons-vue', '@tmagic/form', 'monaco-editor', 'gesto', '@tmagic/utils', 'keycon', '@tmagic/stage', 'events', '@tmagic/core'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.lodashEs, global.design, global.schema, global.iconsVue, global.form, global.monaco, global.Gesto, global.utils, global.KeyController, global.StageCore, global.events, global.core));
+})(this, (function (exports, vue, serialize, lodashEs, design, schema, iconsVue, form, monaco, Gesto, utils, KeyController, StageCore, events, core) { 'use strict';
 
-  const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
-
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
     if (e) {
       for (const k in e) {
@@ -24,16 +21,12 @@
     return Object.freeze(n);
   }
 
-  const serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
-  const monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
-  const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
-  const StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
-  const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
+  const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
   const __default__$v = vue.defineComponent({
     name: "MEditorCode"
   });
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...__default__$v,
     props: {
       model: null,
@@ -66,7 +59,7 @@
   const __default__$u = vue.defineComponent({
     name: "MEditorCodeLink"
   });
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...__default__$u,
     props: {
       config: null,
@@ -104,7 +97,7 @@
         () => props.model[props.name],
         (value) => {
           modelValue.form = {
-            [props.name]: serialize__default.default(value, {
+            [props.name]: serialize(value, {
               space: 2,
               unsafe: true
             }).replace(/"(\w+)":\s/g, "$1: ")
@@ -136,58 +129,13 @@
     }
   });
 
-  const _hoisted_1$h = ["src"];
   const __default__$t = vue.defineComponent({
-    name: "MEditorIcon"
-  });
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$t,
-    props: {
-      icon: null
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
-          key: 0,
-          class: "magic-editor-icon"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(vue.unref(iconsVue.Edit))
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" && __props.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$h)
-          ]),
-          _: 1
-        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
-          key: 2,
-          class: vue.normalizeClass(["magic-editor-icon", __props.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))))
-          ]),
-          _: 1
-        }));
-      };
-    }
-  });
-
-  const __default__$s = vue.defineComponent({
     name: "MEditorCodeSelect"
   });
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
-    ...__default__$s,
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$t,
     props: {
-      config: { default: () => ({
-        editable: true
-      }) },
+      config: null,
       model: null,
       prop: null,
       name: null,
@@ -196,55 +144,16 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const props = __props;
-      const services = vue.inject("services");
-      const mForm = vue.inject("mForm");
-      const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDsl());
-      const tableConfig = vue.computed(() => {
-        const defaultConfig = {
-          dropSort: false,
-          enableFullscreen: false,
-          border: true,
-          operateColWidth: 60,
-          items: [
-            {
-              type: "select",
-              label: "\u4EE3\u7801\u5757",
-              name: "codeId",
-              width: "200px",
-              options: () => {
-                if (codeDsl.value) {
-                  return lodashEs.map(codeDsl.value, (value, key) => ({
-                    text: `${value.name}\uFF08${key}\uFF09`,
-                    label: `${value.name}\uFF08${key}\uFF09`,
-                    value: key
-                  }));
-                }
-                return [];
-              },
-              onChange: (formState, codeId, { model }) => {
-                model.params = {};
-              }
-            },
-            {
-              name: "params",
-              label: "\u53C2\u6570",
-              defaultValue: {},
-              itemsFunction: (row) => {
-                const paramsConfig = getParamsConfig(row.codeId);
-                if (!row.params || lodashEs.isEmpty(row.params)) {
-                  form.createValues(mForm, paramsConfig, {}, row.params);
-                }
-                return paramsConfig;
-              }
-            }
-          ]
-        };
-        return {
-          ...defaultConfig,
-          ...props.config.tableConfig
-        };
-      });
-      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
+      const codeConfig = vue.computed(() => ({
+        type: "group-list",
+        name: "hookData",
+        enableToggleMode: false,
+        items: [
+          {
+            type: "code-select-col"
+          }
+        ]
+      }));
       vue.watch(
         () => props.model[props.name],
         (value) => {
@@ -262,56 +171,75 @@
       const changeHandler = async () => {
         emit("change", props.model[props.name]);
       };
-      const getParamsConfig = (codeId) => {
-        if (!codeDsl.value)
-          return [];
-        const paramStatements = codeDsl.value[codeId]?.params;
-        if (lodashEs.isEmpty(paramStatements))
-          return [];
-        return paramStatements.map((paramState) => ({
-          labelWidth: "100px",
-          text: paramState.name,
-          inline: true,
-          ...paramState
-        }));
-      };
-      const editCode = (codeId) => {
-        services?.codeBlockService.setCodeEditorContent(true, codeId);
-      };
       return (_ctx, _cache) => {
-        const _component_m_form_table = vue.resolveComponent("m-form-table");
+        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])
         }, [
-          vue.createVNode(_component_m_form_table, {
-            config: vue.unref(tableConfig),
-            model: __props.model[__props.name],
-            name: "hookData",
-            enableToggleMode: false,
-            prop: __props.prop,
-            size: __props.size,
-            onChange: changeHandler
-          }, {
-            operateCol: vue.withCtx(({ scope }) => [
-              scope.row.codeId && __props.config.editable ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
-                key: 0,
-                icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
-                class: "edit-icon",
-                onClick: ($event) => editCode(scope.row.codeId)
-              }, null, 8, ["icon", "onClick"])) : vue.createCommentVNode("", true)
+          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],
+                onChange: changeHandler
+              }, null, 8, ["config", "model"])
             ]),
             _: 1
-          }, 8, ["config", "model", "prop", "size"])
+          })
         ], 2);
       };
     }
   });
 
-  const _hoisted_1$g = { class: "m-fields-code-select-col" };
+  const _hoisted_1$j = ["src"];
+  const __default__$s = vue.defineComponent({
+    name: "MEditorIcon"
+  });
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+    ...__default__$s,
+    props: {
+      icon: null
+    },
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return !__props.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+          key: 0,
+          class: "magic-editor-icon"
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(iconsVue.Edit))
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" && __props.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$j)
+          ]),
+          _: 1
+        })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+          key: 2,
+          class: vue.normalizeClass(["magic-editor-icon", __props.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))))
+          ]),
+          _: 1
+        }));
+      };
+    }
+  });
+
+  const _hoisted_1$i = { class: "m-fields-code-select-col" };
+  const _hoisted_2$a = { class: "code-select-container" };
   const __default__$r = vue.defineComponent({
     name: "MEditorCodeSelectCol"
   });
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...__default__$r,
     props: {
       config: null,
@@ -326,24 +254,25 @@
       const services = vue.inject("services");
       const mForm = vue.inject("mForm");
       const codeDsl = vue.computed(() => services?.codeBlockService.getCodeDsl());
+      const editable = vue.computed(() => services?.codeBlockService.getEditStatus());
       const codeParamsConfig = vue.ref({
         type: "fieldset",
         items: [],
-        legend: "\u53C2\u6570",
+        legend: "参数",
         labelWidth: "70px",
         name: "params",
         display: false
       });
       const selectConfig = {
         type: "select",
-        text: "\u4EE3\u7801\u5757",
+        text: "代码块",
         name: "codeId",
         labelWidth: "70px",
         options: () => {
           if (codeDsl.value) {
             return lodashEs.map(codeDsl.value, (value, key) => ({
-              text: `${value.name}\uFF08${key}\uFF09`,
-              label: `${value.name}\uFF08${key}\uFF09`,
+              text: `${value.name}（${key}）`,
+              label: `${value.name}（${key}）`,
               value: key
             }));
           }
@@ -374,7 +303,7 @@
         codeParamsConfig.value = {
           type: "fieldset",
           items: paramsConfig,
-          legend: "\u53C2\u6570",
+          legend: "参数",
           labelWidth: "70px",
           name: "params",
           display: !lodashEs.isEmpty(paramsConfig)
@@ -394,14 +323,25 @@
           immediate: true
         }
       );
+      const editCode = () => {
+        services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
+      };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
-          vue.createVNode(_component_m_form_container, {
-            config: selectConfig,
-            model: __props.model,
-            onChange: onParamsChangeHandler
-          }, null, 8, ["model"]),
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
+          vue.createElementVNode("div", _hoisted_2$a, [
+            vue.createVNode(_component_m_form_container, {
+              class: "select",
+              config: selectConfig,
+              model: __props.model,
+              onChange: onParamsChangeHandler
+            }, null, 8, ["model"]),
+            vue.createVNode(_sfc_main$w, {
+              class: "icon",
+              icon: vue.unref(editable) ? 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,
@@ -412,16 +352,16 @@
     }
   });
 
-  const _hoisted_1$f = { class: "m-fields-event-select" };
-  const _hoisted_2$7 = {
+  const _hoisted_1$h = { class: "m-fields-event-select" };
+  const _hoisted_2$9 = {
     key: 1,
     class: "fullWidth"
   };
-  const _hoisted_3$4 = /* @__PURE__ */ vue.createTextVNode("\u6DFB\u52A0\u4E8B\u4EF6");
+  const _hoisted_3$5 = /* @__PURE__ */ vue.createTextVNode("添加事件");
   const __default__$q = vue.defineComponent({
     name: "MEditorEventSelect"
   });
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...__default__$q,
     props: {
       config: null,
@@ -437,7 +377,7 @@
       const eventNameConfig = vue.computed(() => {
         const defaultEventNameConfig = {
           name: "name",
-          text: "\u4E8B\u4EF6",
+          text: "事件",
           type: "select",
           labelWidth: "40px",
           options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
@@ -450,19 +390,19 @@
       const actionTypeConfig = vue.computed(() => {
         const defaultActionTypeConfig = {
           name: "actionType",
-          text: "\u8054\u52A8\u7C7B\u578B",
+          text: "联动类型",
           labelWidth: "70px",
           type: "select",
           defaultValue: schema.ActionType.COMP,
           options: () => [
             {
-              text: "\u7EC4\u4EF6",
-              label: "\u7EC4\u4EF6",
+              text: "组件",
+              label: "组件",
               value: schema.ActionType.COMP
             },
             {
-              text: "\u4EE3\u7801",
-              label: "\u4EE3\u7801",
+              text: "代码",
+              label: "代码",
               value: schema.ActionType.CODE
             }
           ]
@@ -472,7 +412,7 @@
       const targetCompConfig = vue.computed(() => {
         const defaultTargetCompConfig = {
           name: "to",
-          text: "\u8054\u52A8\u7EC4\u4EF6",
+          text: "联动组件",
           labelWidth: "70px",
           type: "ui-select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
@@ -482,7 +422,7 @@
       const compActionConfig = vue.computed(() => {
         const defaultCompActionConfig = {
           name: "method",
-          text: "\u52A8\u4F5C",
+          text: "动作",
           labelWidth: "70px",
           type: "select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
@@ -511,7 +451,7 @@
         items: [
           {
             name: "name",
-            label: "\u4E8B\u4EF6\u540D",
+            label: "事件名",
             type: eventNameConfig.value.type,
             options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
               text: option.label,
@@ -520,12 +460,12 @@
           },
           {
             name: "to",
-            label: "\u8054\u52A8\u7EC4\u4EF6",
+            label: "联动组件",
             type: "ui-select"
           },
           {
             name: "method",
-            label: "\u52A8\u4F5C",
+            label: "动作",
             type: compActionConfig.value.type,
             options: (mForm, { model }) => {
               const node = services?.editorService.getNodeById(model.to);
@@ -575,17 +515,19 @@
         emit("change", props.model);
       };
       return (_ctx, _cache) => {
+        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$f, [
-          vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_container, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+          vue.unref(isOldVersion) ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
             size: props.size,
             model: __props.model,
+            name: "events",
             config: vue.unref(tableConfig),
             onChange: onChangeHandler
-          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$7, [
+          }, null, 8, ["size", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -593,7 +535,7 @@
               onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
             }, {
               default: vue.withCtx(() => [
-                _hoisted_3$4
+                _hoisted_3$5
               ]),
               _: 1
             }),
@@ -627,11 +569,11 @@
     }
   });
 
-  const _hoisted_1$e = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _hoisted_1$g = /* @__PURE__ */ vue.createTextVNode("取消");
   const __default__$p = vue.defineComponent({
     name: "MEditorUISelect"
   });
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...__default__$p,
     props: {
       config: null,
@@ -694,7 +636,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$e
+              _hoisted_1$g
             ]),
             _: 1
           }, 8, ["icon"])
@@ -706,7 +648,7 @@
         }, [
           vue.unref(val) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
             key: 0,
-            content: "\u6E05\u9664"
+            content: "清除"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
@@ -720,7 +662,7 @@
             _: 1
           })) : vue.createCommentVNode("", true),
           vue.createVNode(vue.unref(design.TMagicTooltip), {
-            content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+            content: vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"
           }, {
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(design.TMagicButton), {
@@ -728,7 +670,7 @@
                 style: { "padding": "0", "margin": "0" }
               }, {
                 default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(val) ? vue.unref(toName) + "_" + vue.unref(val) : "点击此处选择"), 1)
                 ]),
                 _: 1
               })
@@ -745,7 +687,7 @@
   const __default__$o = vue.defineComponent({
     name: "MEditorCodeEditor"
   });
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...__default__$o,
     props: {
       initValues: null,
@@ -763,7 +705,7 @@
       const toString = (v, language) => {
         let value = "";
         if (typeof v !== "string") {
-          value = serialize__default.default(v, {
+          value = serialize(v, {
             space: 2,
             unsafe: true
           }).replace(/"(\w+)":\s/g, "$1: ");
@@ -878,7 +820,7 @@
   const __default__$n = vue.defineComponent({
     name: "MEditorResizer"
   });
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...__default__$n,
     emits: ["change"],
     setup(__props, { emit }) {
@@ -887,7 +829,7 @@
       vue.onMounted(() => {
         if (!target.value)
           return;
-        getso = new Gesto__default.default(target.value, {
+        getso = new Gesto(target.value, {
           container: window,
           pinchOutside: true
         }).on("drag", (e) => {
@@ -914,7 +856,7 @@
   const __default__$m = vue.defineComponent({
     name: "MEditorLayout"
   });
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...__default__$m,
     props: {
       left: null,
@@ -1023,7 +965,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$p, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$r, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -1032,7 +974,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           vue.unref(hasRight) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$p, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$r, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
               style: vue.normalizeStyle(`width: ${__props.right}px`)
@@ -1050,14 +992,16 @@
       type: "tab",
       items: [
         {
-          title: "\u5C5E\u6027",
+          title: "属性",
           labelWidth: "80px",
           items: [
+            // 组件类型，必须要有
             {
               text: "type",
               name: "type",
               type: "hidden"
             },
+            // 组件id，必须要有
             {
               name: "id",
               type: "display",
@@ -1065,13 +1009,13 @@
             },
             {
               name: "name",
-              text: "\u7EC4\u4EF6\u540D\u79F0"
+              text: "组件名称"
             },
             ...config
           ]
         },
         {
-          title: "\u6837\u5F0F",
+          title: "样式",
           labelWidth: "80px",
           items: [
             {
@@ -1079,7 +1023,7 @@
               items: [
                 {
                   type: "fieldset",
-                  legend: "\u4F4D\u7F6E",
+                  legend: "位置",
                   items: [
                     {
                       name: "position",
@@ -1087,7 +1031,7 @@
                       activeValue: "fixed",
                       inactiveValue: "absolute",
                       defaultValue: "absolute",
-                      text: "\u56FA\u5B9A\u5B9A\u4F4D"
+                      text: "固定定位"
                     },
                     {
                       name: "left",
@@ -1111,34 +1055,34 @@
                 },
                 {
                   type: "fieldset",
-                  legend: "\u76D2\u5B50",
+                  legend: "盒子",
                   items: [
                     {
                       name: "width",
-                      text: "\u5BBD\u5EA6"
+                      text: "宽度"
                     },
                     {
                       name: "height",
-                      text: "\u9AD8\u5EA6"
+                      text: "高度"
                     }
                   ]
                 },
                 {
                   type: "fieldset",
-                  legend: "\u80CC\u666F",
+                  legend: "背景",
                   items: [
                     {
                       name: "backgroundImage",
-                      text: "\u80CC\u666F\u56FE"
+                      text: "背景图"
                     },
                     {
                       name: "backgroundColor",
-                      text: "\u80CC\u666F\u989C\u8272",
+                      text: "背景颜色",
                       type: "colorPicker"
                     },
                     {
                       name: "backgroundRepeat",
-                      text: "\u80CC\u666F\u56FE\u91CD\u590D",
+                      text: "背景图重复",
                       type: "select",
                       defaultValue: "no-repeat",
                       options: [
@@ -1151,42 +1095,42 @@
                     },
                     {
                       name: "backgroundSize",
-                      text: "\u80CC\u666F\u56FE\u5927\u5C0F",
+                      text: "背景图大小",
                       defaultValue: "100% 100%"
                     }
                   ]
                 },
                 {
                   type: "fieldset",
-                  legend: "\u5B57\u4F53",
+                  legend: "字体",
                   items: [
                     {
                       name: "color",
-                      text: "\u989C\u8272",
+                      text: "颜色",
                       type: "colorPicker"
                     },
                     {
                       name: "fontSize",
-                      text: "\u5927\u5C0F"
+                      text: "大小"
                     },
                     {
                       name: "fontWeight",
-                      text: "\u7C97\u7EC6"
+                      text: "粗细"
                     }
                   ]
                 },
                 {
                   type: "fieldset",
-                  legend: "\u53D8\u5F62",
+                  legend: "变形",
                   name: "transform",
                   items: [
                     {
                       name: "rotate",
-                      text: "\u65CB\u8F6C\u89D2\u5EA6"
+                      text: "旋转角度"
                     },
                     {
                       name: "scale",
-                      text: "\u7F29\u653E"
+                      text: "缩放"
                     }
                   ]
                 }
@@ -1195,7 +1139,7 @@
           ]
         },
         {
-          title: "\u4E8B\u4EF6",
+          title: "事件",
           items: [
             {
               name: "events",
@@ -1204,7 +1148,7 @@
           ]
         },
         {
-          title: "\u9AD8\u7EA7",
+          title: "高级",
           lazy: true,
           items: [
             {
@@ -1437,7 +1381,7 @@
       left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document)
     };
   };
-  const serializeConfig = (config) => serialize__default.default(config, {
+  const serializeConfig = (config) => serialize(config, {
     space: 2,
     unsafe: true
   }).replace(/"(\w+)":\s/g, "$1: ");
@@ -1463,6 +1407,7 @@
     canUndo() {
       return this.listCursor > 1;
     }
+    // 返回undo后的当前元素
     undo() {
       if (!this.canUndo()) {
         return null;
@@ -1473,6 +1418,7 @@
     canRedo() {
       return this.elementList.length > this.listCursor;
     }
+    // 返回redo后的当前元素
     redo() {
       if (!this.canRedo()) {
         return null;
@@ -1490,17 +1436,17 @@
 
   const compose = (middleware) => {
     if (!Array.isArray(middleware))
-      throw new TypeError("Middleware \u5FC5\u987B\u662F\u4E00\u4E2A\u6570\u7EC4!");
+      throw new TypeError("Middleware 必须是一个数组!");
     for (const fn of middleware) {
       if (typeof fn !== "function")
-        throw new TypeError("Middleware \u5FC5\u987B\u7531\u51FD\u6570\u7EC4\u6210!");
+        throw new TypeError("Middleware 必须由函数组成!");
     }
     return (args, next) => {
       let index = -1;
       return dispatch(0);
       function dispatch(i) {
         if (i <= index)
-          return Promise.reject(new Error("next() \u88AB\u591A\u6B21\u8C03\u7528"));
+          return Promise.reject(new Error("next() 被多次调用"));
         index = i;
         let fn = middleware[i];
         if (i === middleware.length && next)
@@ -1705,16 +1651,32 @@
     constructor() {
       super(["getStorage", "getNamespace", "clear", "getItem", "removeItem", "setItem"]);
     }
+    /**
+     * 获取数据存储对象，可以通过
+     * const storageService = new StorageService();
+     * storageService.usePlugin({
+     *    // 替换存储对象为 sessionStorage
+     *    async afterGetStorage(): Promise<Storage> {
+     *      return window.sessionStorage;
+     *    },
+     * });
+     */
     async getStorage() {
       return this.storage;
     }
     async getNamespace() {
       return this.namespace;
     }
+    /**
+     * 清理，支持storageService.usePlugin
+     */
     async clear() {
       const storage2 = await this.getStorage();
       storage2.clear();
     }
+    /**
+     * 获取存储项，支持storageService.usePlugin
+     */
     async getItem(key, options = {}) {
       const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
       const { protocol = options.protocol, item } = this.getValueAndProtocol(
@@ -1735,14 +1697,23 @@
           return item;
       }
     }
+    /**
+     * 获取指定索引位置的key
+     */
     async key(index) {
       const storage2 = await this.getStorage();
       return storage2.key(index);
     }
+    /**
+     * 移除存储项，支持storageService.usePlugin
+     */
     async removeItem(key2, options2 = {}) {
       const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
       storage2.removeItem(`${options2.namespace || namespace2}:${key2}`);
     }
+    /**
+     * 设置存储项，支持storageService.usePlugin
+     */
     async setItem(key2, value, options2 = {}) {
       const [storage2, namespace2] = await Promise.all([this.getStorage(), this.getNamespace()]);
       let item2 = value;
@@ -1750,7 +1721,7 @@
       if (typeof value === "string" /* STRING */ || typeof value === "number" /* NUMBER */) {
         item2 = `${protocol2}${value}`;
       } else {
-        item2 = `${protocol2}${serialize__default.default(value)}`;
+        item2 = `${protocol2}${serialize(value)}`;
       }
       storage2.setItem(`${options2.namespace || namespace2}:${key2}`, item2);
     }
@@ -1804,9 +1775,19 @@
     async fillConfig(config) {
       return fillConfig(config);
     }
+    /**
+     * 为指定类型组件设置组件属性表单配置
+     * @param type 组件类型
+     * @param config 组件属性表单配置
+     */
     async setPropsConfig(type, config) {
       this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
     }
+    /**
+     * 获取指点类型的组件属性表单配置
+     * @param type 组件类型
+     * @returns 组件属性表单配置
+     */
     async getPropsConfig(type) {
       if (type === "area") {
         return await this.getPropsConfig("button");
@@ -1818,9 +1799,19 @@
         this.setPropsValue(utils.toLine(type), values[type]);
       });
     }
+    /**
+     * 为指点类型组件设置组件初始值
+     * @param type 组件类型
+     * @param value 组件初始值
+     */
     async setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
+    /**
+     * 获取指定类型的组件初始值
+     * @param type 组件类型
+     * @returns 组件初始值
+     */
     async getPropsValue(type, { inputEvent, ...defaultValue } = {}) {
       if (type === "area") {
         const value = await this.getPropsValue("button");
@@ -1848,8 +1839,13 @@
       };
     }
     async createId(type) {
-      return `${type}_${this.guid()}`;
+      return `${type}_${utils.guid()}`;
     }
+    /**
+     * 将组件与组件的子元素配置中的id都设置成一个新的ID
+     * @param {Object} config 组件配置
+     */
+    /* eslint no-param-reassign: ["error", { "props": false }] */
     async setNewItemId(config) {
       config.id = await this.createId(config.type || "component");
       if (config.items && Array.isArray(config.items)) {
@@ -1859,6 +1855,11 @@
       }
       return config;
     }
+    /**
+     * 获取默认属性配置
+     * @param type 组件类型
+     * @returns Object
+     */
     async getDefaultPropsValue(type) {
       return ["page", "container"].includes(type) ? {
         type,
@@ -1881,13 +1882,6 @@
       this.removeAllListeners();
       this.removeAllPlugins();
     }
-    guid(digit = 8) {
-      return "x".repeat(digit).replace(/[xy]/g, (c) => {
-        const r = Math.random() * 16 | 0;
-        const v = c === "x" ? r : r & 3 | 8;
-        return v.toString(16);
-      });
-    }
   }
   const propsService = new Props();
 
@@ -1963,7 +1957,7 @@
     return newNode;
   };
 
-  class Editor$1 extends BaseService {
+  let Editor$1 = class Editor extends BaseService {
     state = vue.reactive({
       root: null,
       page: null,
@@ -2000,9 +1994,15 @@
           "redo",
           "highlight"
         ],
+        // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
         ["select", "update", "moveLayer"]
       );
     }
+    /**
+     * 设置当前指点节点配置
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+     * @param value MNode
+     */
     set(name, value) {
       const preValue = this.state[name];
       this.state[name] = value;
@@ -2011,9 +2011,9 @@
       }
       if (name === "root") {
         if (Array.isArray(value)) {
-          throw new Error("root \u4E0D\u80FD\u4E3A\u6570\u7EC4");
+          throw new Error("root 不能为数组");
         }
-        if (value && lodashEs.isObject(value) && !(value instanceof StageCore__default.default) && !(value instanceof Map)) {
+        if (value && lodashEs.isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
           this.state.pageLength = value.items?.length || 0;
         } else {
           this.state.pageLength = 0;
@@ -2021,9 +2021,20 @@
         this.emit("root-change", value, preValue);
       }
     }
+    /**
+     * 获取当前指点节点配置
+     * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength'
+     * @returns MNode
+     */
     get(name) {
       return this.state[name];
     }
+    /**
+     * 根据id获取组件、组件的父组件以及组件所属的页面节点
+     * @param {number | string} id 组件id
+     * @param {boolean} raw 是否使用toRaw
+     * @returns {EditorNodeInfo}
+     */
     getNodeInfo(id, raw = true) {
       let root = this.get("root");
       if (raw) {
@@ -2054,14 +2065,29 @@
       });
       return info;
     }
+    /**
+     * 根据ID获取指点节点配置
+     * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
+     * @returns 组件节点配置
+     */
     getNodeById(id, raw = true) {
       const { node } = this.getNodeInfo(id, raw);
       return node;
     }
+    /**
+     * 根据ID获取指点节点的父节点配置
+     * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
+     * @returns 指点组件的父节点配置
+     */
     getParentById(id, raw = true) {
       const { parent } = this.getNodeInfo(id, raw);
       return parent;
     }
+    /**
+     * 只有容器拥有布局
+     */
     async getLayout(parent, node) {
       if (node && typeof node !== "function" && isFixed(node))
         return Layout.FIXED;
@@ -2073,6 +2099,11 @@
       }
       return Layout.ABSOLUTE;
     }
+    /**
+     * 选中指定节点（将指定节点设置成当前选中状态）
+     * @param config 指定节点配置或者ID
+     * @returns 当前选中的节点配置
+     */
     async select(config) {
       const { node, page, parent } = this.selectedConfigExceptionHandler(config);
       this.set("nodes", node ? [node] : []);
@@ -2114,15 +2145,20 @@
       const root = vue.toRaw(this.get("root"));
       const page = vue.toRaw(this.get("page"));
       if (!page)
-        throw new Error("page\u4E0D\u80FD\u4E3A\u7A7A");
+        throw new Error("page不能为空");
       if (!root)
-        throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
+        throw new Error("root不能为空");
       const index = getNodeIndex(page, root);
       const nextPage = root.items[index + 1] || root.items[0];
       await this.select(nextPage);
       this.get("stage")?.select(nextPage.id);
       return nextPage;
     }
+    /**
+     * 高亮指定节点
+     * @param config 指定节点配置或者ID
+     * @returns 当前高亮的节点配置
+     */
     highlight(config) {
       const { node } = this.selectedConfigExceptionHandler(config);
       const currentHighlightNode = this.get("highlightNode");
@@ -2130,6 +2166,11 @@
         return;
       this.set("highlightNode", node);
     }
+    /**
+     * 多选
+     * @param ids 指定节点ID
+     * @returns 加入多选的节点配置
+     */
     multiSelect(ids) {
       const nodes = [];
       const idsUnique = lodashEs.uniq(ids);
@@ -2144,13 +2185,13 @@
     async doAdd(node, parent) {
       const root = this.get("root");
       if (!root)
-        throw new Error("root\u4E3A\u7A7A");
+        throw new Error("root为空");
       const curNode = this.get("node");
       const stage = this.get("stage");
       if (!curNode)
-        throw new Error("\u5F53\u524D\u9009\u4E2D\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("当前选中节点为空");
       if ((parent.type === schema.NodeType.ROOT || curNode?.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
-        throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
+        throw new Error("app下不能添加组件");
       }
       if (parent.id !== curNode.id && node.type !== schema.NodeType.PAGE) {
         const index = parent.items.indexOf(curNode);
@@ -2174,13 +2215,19 @@
       this.addModifiedNodeId(node.id);
       return node;
     }
+    /**
+     * 向指点容器添加组件节点
+     * @param addConfig 将要添加的组件节点配置
+     * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+     * @returns 添加后的节点
+     */
     async add(addNode, parent) {
       const stage = this.get("stage");
       const addNodes = [];
       if (!Array.isArray(addNode)) {
         const { type, inputEvent, ...config } = addNode;
         if (!type)
-          throw new Error("\u7EC4\u4EF6\u7C7B\u578B\u4E0D\u80FD\u4E3A\u7A7A");
+          throw new Error("组件类型不能为空");
         addNodes.push({ ...vue.toRaw(await propsService.getPropsValue(type, config)) });
       } else {
         addNodes.push(...addNode);
@@ -2193,7 +2240,7 @@
           }
           const parentNode = parent && typeof parent !== "function" ? parent : getAddParent(node);
           if (!parentNode)
-            throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
+            throw new Error("未找到父元素");
           return this.doAdd(node, parentNode);
         })
       );
@@ -2218,13 +2265,13 @@
     async doRemove(node) {
       const root = this.get("root");
       if (!root)
-        throw new Error("root\u4E0D\u80FD\u4E3A\u7A7A");
+        throw new Error("root不能为空");
       const { parent, node: curNode } = this.getNodeInfo(node.id);
       if (!parent || !curNode)
-        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+        throw new Error("找不要删除的节点");
       const index = getNodeIndex(curNode, parent);
       if (typeof index !== "number" || index === -1)
-        throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
+        throw new Error("找不要删除的节点");
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
       stage?.remove({ id: node.id, parentId: parent.id, root: lodashEs.cloneDeep(root) });
@@ -2249,6 +2296,10 @@
       }
       this.addModifiedNodeId(parent.id);
     }
+    /**
+     * 删除组件
+     * @param {Object} node
+     */
     async remove(nodeOrNodeList) {
       const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
       await Promise.all(nodes.map((node) => this.doRemove(node)));
@@ -2260,12 +2311,12 @@
     async doUpdate(config) {
       const root = this.get("root");
       if (!root)
-        throw new Error("root\u4E3A\u7A7A");
+        throw new Error("root为空");
       if (!config?.id)
-        throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
+        throw new Error("没有配置或者配置缺少id值");
       const info = this.getNodeInfo(config.id, false);
       if (!info.node)
-        throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config.id}\u7684\u8282\u70B9`);
+        throw new Error(`获取不到id为${config.id}的节点`);
       const node = lodashEs.cloneDeep(vue.toRaw(info.node));
       let newConfig = await this.toggleFixedPosition(vue.toRaw(config), node, root);
       newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), newConfig, (objValue, srcValue) => {
@@ -2277,18 +2328,18 @@
         }
       });
       if (!newConfig.type)
-        throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
+        throw new Error("配置缺少type值");
       if (newConfig.type === schema.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
       const { parent } = info;
       if (!parent)
-        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7236\u7EA7\u8282\u70B9");
+        throw new Error("获取不到父级节点");
       const parentNodeItems = parent.items;
       const index = getNodeIndex(newConfig, parent);
       if (!parentNodeItems || typeof index === "undefined" || index === -1)
-        throw new Error("\u66F4\u65B0\u7684\u8282\u70B9\u672A\u627E\u5230");
+        throw new Error("更新的节点未找到");
       const newLayout = await this.getLayout(newConfig);
       const layout = await this.getLayout(node);
       if (newLayout !== layout) {
@@ -2310,6 +2361,11 @@
       this.addModifiedNodeId(newConfig.id);
       return newConfig;
     }
+    /**
+     * 更新节点
+     * @param config 新的节点配置，配置中需要有id信息
+     * @returns 更新后的节点配置
+     */
     async update(config) {
       const nodes = Array.isArray(config) ? config : [config];
       const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
@@ -2317,16 +2373,22 @@
       this.emit("update", newNodes);
       return Array.isArray(config) ? newNodes : newNodes[0];
     }
+    /**
+     * 将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
+     * @param id1 组件ID
+     * @param id2 组件ID
+     * @returns void
+     */
     async sort(id1, id2) {
       const root = this.get("root");
       if (!root)
-        throw new Error("root\u4E3A\u7A7A");
+        throw new Error("root为空");
       const node = this.get("node");
       if (!node)
-        throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("当前节点为空");
       const parent = lodashEs.cloneDeep(vue.toRaw(this.get("parent")));
       if (!parent)
-        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("父节点为空");
       const index2 = parent.items.findIndex((node2) => `${node2.id}` === `${id2}`);
       if (index2 < 0)
         return;
@@ -2342,11 +2404,21 @@
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
+    /**
+     * 将组将节点配置转化成string，然后存储到localStorage中
+     * @param config 组件节点配置
+     * @returns 组件节点配置
+     */
     async copy(config) {
       await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
         protocol: Protocol.OBJECT
       });
     }
+    /**
+     * 从localStorage中获取节点，然后添加到当前容器中
+     * @param position 粘贴的坐标
+     * @returns 添加后的组件节点配置
+     */
     async paste(position = {}) {
       const config = await storageService.getItem(COPY_STORAGE_KEY);
       if (!Array.isArray(config))
@@ -2369,7 +2441,7 @@
     async doAlignCenter(config) {
       const parent = this.getParentById(config.id);
       if (!parent)
-        throw new Error("\u627E\u4E0D\u5230\u7236\u8282\u70B9");
+        throw new Error("找不到父节点");
       const node = lodashEs.cloneDeep(vue.toRaw(config));
       const layout = await this.getLayout(parent, node);
       if (layout === Layout.RELATIVE) {
@@ -2390,6 +2462,11 @@
       }
       return node;
     }
+    /**
+     * 将指点节点设置居中
+     * @param config 组件节点配置
+     * @returns 当前组件节点配置
+     */
     async alignCenter(config) {
       const nodes = Array.isArray(config) ? config : [config];
       const stage = this.get("stage");
@@ -2402,16 +2479,20 @@
       }
       return newNode;
     }
+    /**
+     * 移动当前选中节点位置
+     * @param offset 偏移量
+     */
     async moveLayer(offset) {
       const root = this.get("root");
       if (!root)
-        throw new Error("root\u4E3A\u7A7A");
+        throw new Error("root为空");
       const parent = this.get("parent");
       if (!parent)
-        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("父节点为空");
       const node = this.get("node");
       if (!node)
-        throw new Error("\u5F53\u524D\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("当前节点为空");
       const brothers = parent.items || [];
       const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
       const layout = await this.getLayout(parent, node);
@@ -2433,6 +2514,11 @@
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
+    /**
+     * 移动到指定容器中
+     * @param config 需要移动的节点
+     * @param targetId 容器ID
+     */
     async moveToContainer(config, targetId) {
       const root = lodashEs.cloneDeep(this.get("root"));
       const { node, parent } = this.getNodeInfo(config.id, false);
@@ -2461,11 +2547,19 @@
         return newConfig;
       }
     }
+    /**
+     * 撤销当前操作
+     * @returns 上一次数据
+     */
     async undo() {
       const value = historyService.undo();
       await this.changeHistoryState(value);
       return value;
     }
+    /**
+     * 恢复到下一步
+     * @returns 下一步数据
+     */
     async redo() {
       const value = historyService.redo();
       await this.changeHistoryState(value);
@@ -2561,13 +2655,13 @@
         id = config.id;
       }
       if (!id) {
-        throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
+        throw new Error("没有ID，无法选中");
       }
       const { node, parent, page } = this.getNodeInfo(id);
       if (!node)
-        throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
+        throw new Error("获取不到组件信息");
       if (node.id === this.state.root?.id) {
-        throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
+        throw new Error("不能选根节点");
       }
       return {
         node,
@@ -2575,7 +2669,7 @@
         page
       };
     }
-  }
+  };
   const editorService = new Editor$1();
 
   const state = vue.reactive({
@@ -2668,7 +2762,7 @@
   const uiSelectMode = vue.computed(() => uiService.get("uiSelectMode"));
   const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
   const useStage = (stageOptions) => {
-    const stage = new StageCore__default.default({
+    const stage = new StageCore({
       render: stageOptions.render,
       runtimeUrl: stageOptions.runtimeUrl,
       zoom: zoom.value,
@@ -2726,7 +2820,7 @@
     stage.on("select-parent", () => {
       const parent = editorService.get("parent");
       if (!parent)
-        throw new Error("\u7236\u8282\u70B9\u4E3A\u7A7A");
+        throw new Error("父节点为空");
       editorService.select(parent);
       editorService.get("stage")?.select(parent.id);
     });
@@ -2746,13 +2840,13 @@
     return stage;
   };
 
-  const _hoisted_1$d = { class: "m-editor-empty-panel" };
-  const _hoisted_2$6 = { class: "m-editor-empty-content" };
-  const _hoisted_3$3 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
+  const _hoisted_1$f = { class: "m-editor-empty-panel" };
+  const _hoisted_2$8 = { class: "m-editor-empty-content" };
+  const _hoisted_3$4 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
   const __default__$l = vue.defineComponent({
     name: "MEditorAddPageBox"
   });
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...__default__$l,
     setup(__props) {
       const services = vue.inject("services");
@@ -2762,23 +2856,23 @@
           return;
         const root = vue.toRaw(editorService.get("root"));
         if (!root)
-          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
+          throw new Error("root 不能为空");
         editorService.add({
           type: schema.NodeType.PAGE,
           name: generatePageNameByApp(root)
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, [
-          vue.createElementVNode("div", _hoisted_2$6, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$f, [
+          vue.createElementVNode("div", _hoisted_2$8, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$v, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$3
+              _hoisted_3$4
             ])
           ])
         ]);
@@ -2786,11 +2880,11 @@
     }
   });
 
-  const _hoisted_1$c = { class: "m-editor" };
+  const _hoisted_1$e = { class: "m-editor" };
   const __default__$k = vue.defineComponent({
     name: "MEditorFramework"
   });
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...__default__$k,
     props: {
       codeOptions: { default: () => ({}) }
@@ -2860,7 +2954,7 @@
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
@@ -2868,7 +2962,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$q, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2878,8 +2972,8 @@
             "onUpdate:left": _cache[0] || (_cache[0] = ($event) => columnWidth.value.left = $event),
             right: columnWidth.value.right,
             "onUpdate:right": _cache[1] || (_cache[1] = ($event) => columnWidth.value.right = $event),
-            "min-left": 45,
-            "min-right": 1,
+            "min-left": 65,
+            "min-right": 20,
             onChange: columnWidthChange
           }, vue.createSlots({
             left: vue.withCtx(() => [
@@ -2887,7 +2981,7 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$n)
+                vue.createVNode(_sfc_main$p)
               ])
             ]),
             _: 2
@@ -2909,15 +3003,15 @@
     }
   });
 
-  const _hoisted_1$b = {
+  const _hoisted_1$d = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$5 = { class: "el-dropdown-link menubar-menu-button" };
+  const _hoisted_2$7 = { class: "el-dropdown-link menubar-menu-button" };
   const __default__$j = vue.defineComponent({
     name: "MEditorToolButton"
   });
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...__default__$j,
     props: {
       data: { default: () => ({
@@ -2993,7 +3087,7 @@
           __props.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$b, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, 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), {
               key: 0,
               effect: "dark",
@@ -3007,7 +3101,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3024,7 +3118,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -3057,7 +3151,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$5, [
+              vue.createElementVNode("span", _hoisted_2$7, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -3077,7 +3171,7 @@
   const __default__$i = vue.defineComponent({
     name: "MEditorNavMenu"
   });
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...__default__$i,
     props: {
       data: { default: () => ({}) },
@@ -3120,7 +3214,7 @@
               type: "button",
               className: "delete",
               icon: vue.markRaw(iconsVue.Delete),
-              tooltip: `\u522A\u9664(Delete)`,
+              tooltip: `刪除(Delete)`,
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => {
                 const node = services?.editorService.get("node");
@@ -3133,7 +3227,7 @@
               type: "button",
               className: "undo",
               icon: vue.markRaw(iconsVue.Back),
-              tooltip: `\u540E\u9000(${ctrl}+z)`,
+              tooltip: `后退(${ctrl}+z)`,
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
             });
@@ -3143,7 +3237,7 @@
               type: "button",
               className: "redo",
               icon: vue.markRaw(iconsVue.Right),
-              tooltip: `\u524D\u8FDB(${ctrl}+Shift+z)`,
+              tooltip: `前进(${ctrl}+Shift+z)`,
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
             });
@@ -3153,7 +3247,7 @@
               type: "button",
               className: "zoom-in",
               icon: vue.markRaw(iconsVue.ZoomIn),
-              tooltip: `\u653E\u5927(${ctrl}+=)`,
+              tooltip: `放大(${ctrl}+=)`,
               handler: () => uiService?.zoom(0.1)
             });
             break;
@@ -3162,7 +3256,7 @@
               type: "button",
               className: "zoom-out",
               icon: vue.markRaw(iconsVue.ZoomOut),
-              tooltip: `\u7E2E\u5C0F(${ctrl}+-)`,
+              tooltip: `縮小(${ctrl}+-)`,
               handler: () => uiService?.zoom(-0.1)
             });
             break;
@@ -3171,7 +3265,7 @@
               type: "button",
               className: "scale-to-original",
               icon: vue.markRaw(iconsVue.ScaleToOriginal),
-              tooltip: `\u7F29\u653E\u5230\u5B9E\u9645\u5927\u5C0F(${ctrl}+1)`,
+              tooltip: `缩放到实际大小(${ctrl}+1)`,
               handler: () => uiService?.set("zoom", 1)
             });
             break;
@@ -3180,7 +3274,7 @@
               type: "button",
               className: "scale-to-fit",
               icon: vue.markRaw(iconsVue.FullScreen),
-              tooltip: `\u7F29\u653E\u4EE5\u9002\u5E94(${ctrl}+0)`,
+              tooltip: `缩放以适应(${ctrl}+0)`,
               handler: async () => uiService?.set("zoom", await uiService.calcZoom())
             });
             break;
@@ -3189,7 +3283,7 @@
               type: "button",
               className: "rule",
               icon: vue.markRaw(iconsVue.Memo),
-              tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+              tooltip: showRule.value ? "隐藏标尺" : "显示标尺",
               handler: () => uiService?.set("showRule", !showRule.value)
             });
             break;
@@ -3198,7 +3292,7 @@
               type: "button",
               className: "guides",
               icon: vue.markRaw(iconsVue.Grid),
-              tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
+              tooltip: showGuides.value ? "隐藏参考线" : "显示参考线",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             });
             break;
@@ -3236,7 +3330,7 @@
               style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$n, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3248,11 +3342,11 @@
     }
   });
 
-  const _hoisted_1$a = { class: "m-editor-props-panel" };
+  const _hoisted_1$c = { class: "m-editor-props-panel" };
   const __default__$h = vue.defineComponent({
     name: "MEditorPropsPanel"
   });
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...__default__$h,
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
@@ -3298,7 +3392,7 @@
       };
       expose({ submit });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -3315,7 +3409,7 @@
     }
   });
 
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "SearchInput",
     emits: ["search"],
     setup(__props, { emit }) {
@@ -3329,26 +3423,83 @@
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
           class: "search-input",
           size: "small",
-          placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+          placeholder: "输入关键字进行过滤",
           clearable: "",
-          "prefix-icon": vue.unref(iconsVue.Search),
           onInput: filterTextChangeHandler
-        }, null, 8, ["modelValue", "prefix-icon"]);
+        }, {
+          prefix: vue.withCtx(() => [
+            vue.createVNode(vue.unref(design.TMagicIcon), null, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(iconsVue.Search))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["modelValue"]);
       };
     }
   });
 
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const _sfc_main$j = {};
+
+  const _hoisted_1$b = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$6 = /*#__PURE__*/vue.createElementVNode("g", {
+    fill: "#7C878E",
+    "fill-rule": "evenodd"
+  }, [
+    /*#__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" })
+  ], -1);
+  const _hoisted_3$3 = [
+    _hoisted_2$6
+  ];
+
+  function _sfc_render$2(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_3$3))
+  }
+  const AppManageIcon = /*#__PURE__*/_export_sfc(_sfc_main$j, [['render',_sfc_render$2]]);
+
+  const _sfc_main$i = {};
+
+  const _hoisted_1$a = {
+    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$5 = /*#__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$5
+  ];
+
+  function _sfc_render$1(_ctx, _cache) {
+    return (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$a, _hoisted_4$3))
+  }
+  const CodeIcon = /*#__PURE__*/_export_sfc(_sfc_main$i, [['render',_sfc_render$1]]);
+
   const _hoisted_1$9 = {
     key: 0,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("\u786E\u8BA4");
-  const _hoisted_3$2 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_2$4 = /* @__PURE__ */ vue.createTextVNode("确认");
+  const _hoisted_3$2 = /* @__PURE__ */ vue.createTextVNode("关闭");
   const _hoisted_4$2 = {
     key: 1,
     class: "m-editor-content-bottom"
   };
-  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
+  const _hoisted_5$1 = /* @__PURE__ */ vue.createTextVNode("关闭");
   const __default__$g = vue.defineComponent({
     name: "MEditorCodeDraftEditor"
   });
@@ -3363,7 +3514,7 @@
       language: null
     },
     emits: ["close", "saveAndClose"],
-    setup(__props, { emit }) {
+    setup(__props, { expose, emit }) {
       const props = __props;
       const services = vue.inject("services");
       const codeContent = vue.ref("");
@@ -3393,7 +3544,7 @@
           return;
         }
         services?.codeBlockService.setCodeDraft(props.id, codeValue);
-        design.tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${utils.datetimeFormatter(new Date())}`);
+        design.tMagicMessage.success(`代码草稿成功保存到本地 ${utils.datetimeFormatter( new Date())}`);
       };
       const saveAndClose = () => {
         if (!codeEditor.value || !props.editable)
@@ -3404,19 +3555,20 @@
       const close = async () => {
         const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
         if (codeDraft) {
-          design.tMagicMessageBox.confirm("\u60A8\u6709\u4EE3\u7801\u4FEE\u6539\u672A\u4FDD\u5B58\uFF0C\u662F\u5426\u4FDD\u5B58\u540E\u518D\u5173\u95ED\uFF1F", "\u63D0\u793A", {
-            confirmButtonText: "\u4FDD\u5B58\u5E76\u5173\u95ED",
-            cancelButtonText: "\u76F4\u63A5\u5173\u95ED",
-            type: "warning",
-            distinguishCancelAndClose: true
-          }).then(async () => {
+          try {
+            await design.tMagicMessageBox.confirm("您有代码修改未保存，是否保存后再关闭？", "提示", {
+              confirmButtonText: "保存并关闭",
+              cancelButtonText: "直接关闭",
+              type: "warning",
+              distinguishCancelAndClose: true
+            });
             saveAndClose();
-          }).catch((action) => {
+          } catch (action) {
             if (action === "cancel") {
               services?.codeBlockService.removeCodeDraft(props.id);
               emit("close");
             }
-          });
+          }
         } else {
           emit("close");
         }
@@ -3427,11 +3579,15 @@
           codeEditor.value.focus();
         }
       };
+      expose({
+        saveAndClose,
+        close
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
         }, [
-          vue.createVNode(_sfc_main$q, {
+          vue.createVNode(_sfc_main$s, {
             ref_key: "codeEditor",
             ref: codeEditor,
             class: "m-editor-container",
@@ -3447,7 +3603,7 @@
               onClick: toggleFullScreen
             }, {
               default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
               ]),
               _: 1
             }),
@@ -3478,7 +3634,7 @@
               onClick: toggleFullScreen
             }, {
               default: vue.withCtx(() => [
-                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+                vue.createTextVNode(vue.toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
               ]),
               _: 1
             }),
@@ -3499,9 +3655,9 @@
   });
 
   const _hoisted_1$8 = { class: "code-name-wrapper" };
-  const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+  const _hoisted_2$3 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
   const _hoisted_3$1 = { class: "code-name-wrapper" };
-  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570", -1);
+  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "参数", -1);
   const __default__$f = vue.defineComponent({
     name: "MEditorFunctionEditor"
   });
@@ -3516,27 +3672,26 @@
       codeOptions: null,
       paramsColConfig: null
     },
-    emits: ["change", "field-input"],
-    setup(__props, { emit }) {
+    setup(__props, { expose }) {
       const props = __props;
       const defaultParamColConfig = {
         type: "row",
-        label: "\u53C2\u6570\u7C7B\u578B",
+        label: "参数类型",
         items: [
           {
-            text: "\u53C2\u6570\u7C7B\u578B",
+            text: "参数类型",
             labelWidth: "70px",
             type: "select",
             name: "type",
             options: [
               {
-                text: "\u6570\u5B57",
-                label: "\u6570\u5B57",
+                text: "数字",
+                label: "数字",
                 value: "number"
               },
               {
-                text: "\u5B57\u7B26\u4E32",
-                label: "\u5B57\u7B26\u4E32",
+                text: "字符串",
+                label: "字符串",
                 value: "text"
               }
             ]
@@ -3554,13 +3709,13 @@
         items: [
           {
             type: "text",
-            label: "\u53C2\u6570\u540D",
+            label: "参数名",
             name: "name",
             width: 200
           },
           {
             type: "text",
-            label: "\u53C2\u6570\u6CE8\u91CA",
+            label: "参数注释",
             name: "tip",
             width: 200
           },
@@ -3571,11 +3726,6 @@
       const codeName = vue.ref("");
       const codeContent = vue.ref("");
       const evalRes = vue.ref(true);
-      vue.provide("mForm", {
-        $emit: emit,
-        setField: () => {
-        }
-      });
       const tableModel = vue.ref();
       vue.watchEffect(() => {
         codeName.value = props.name;
@@ -3609,7 +3759,7 @@
             content: codeValue2,
             params: tableModel.value?.params || []
           });
-          design.tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+          design.tMagicMessage.success("代码成功保存到本地");
           services?.codeBlockService.removeCodeDraft(props.id);
         }
       };
@@ -3622,6 +3772,10 @@
       const close = () => {
         services?.codeBlockService.setCodeEditorShowStatus(false);
       };
+      const codeDraftEditor = vue.ref();
+      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" }, {
@@ -3650,6 +3804,8 @@
           ]),
           default: vue.withCtx(() => [
             vue.createVNode(_sfc_main$h, {
+              ref_key: "codeDraftEditor",
+              ref: codeDraftEditor,
               id: __props.id,
               content: codeContent.value,
               editable: __props.editable,
@@ -3710,19 +3866,24 @@
         });
         currentTitle.value = state.codeList[0]?.name || "";
       });
+      const functionEditor = vue.ref();
+      const handleClose = async () => {
+        await functionEditor.value?.codeDraftEditor?.close();
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDrawer), {
           class: "code-editor-dialog",
           "model-value": true,
           title: currentTitle.value,
-          "close-on-press-escape": false,
+          "close-on-press-escape": true,
           "append-to-body": true,
           "show-close": false,
-          "close-on-click-modal": false,
-          size: vue.unref(size)
+          "close-on-click-modal": true,
+          size: vue.unref(size),
+          "before-close": handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$o, {
+            vue.createVNode(_sfc_main$q, {
               left: left.value,
               "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
               "min-left": 45,
@@ -3733,6 +3894,8 @@
                   vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: vue.unref(id) }),
                   codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$g, {
                     key: 0,
+                    ref_key: "functionEditor",
+                    ref: functionEditor,
                     id: vue.unref(id),
                     name: codeConfig.value.name,
                     content: codeConfig.value.content,
@@ -3752,13 +3915,12 @@
     }
   });
 
-  const _hoisted_1$6 = { class: "code-header-wrapper" };
-  const _hoisted_2$2 = /* @__PURE__ */ vue.createTextVNode("\u65B0\u589E");
+  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 = { class: "code-name" };
-  const _hoisted_6 = {
-    key: 0,
+  const _hoisted_5 = {
+    key: 2,
     class: "right-tool"
   };
   const __default__$d = vue.defineComponent({
@@ -3774,28 +3936,32 @@
       const props = __props;
       const { codeBlockService, depService, editorService } = vue.inject("services") || {};
       const codeList = vue.computed(
-        () => Object.values(depService?.targets["code-block"] || {}).map((target) => ({
-          id: target.id,
-          name: target.name,
-          type: "code",
-          codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-          children: Object.entries(target.deps).map(([id, dep]) => ({
+        () => Object.values(depService?.targets["code-block"] || {}).map((target) => {
+          const compNodes = Object.entries(target.deps).map(([id, dep]) => ({
             name: dep.name,
             type: "node",
             id,
             children: dep.keys.map((key) => ({ name: key, id: key, type: "key" }))
-          }))
-        }))
+          }));
+          return {
+            id: target.id,
+            name: target.name,
+            type: "code",
+            codeBlockContent: codeBlockService?.getCodeContentById(target.id),
+            children: compNodes
+          };
+        })
       );
+      const expandedKeys = vue.computed(() => codeList.value.map((item) => item.id));
       const editable = vue.computed(() => codeBlockService?.getEditStatus());
       const isShowCodeBlockEditor = vue.computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
       const createCodeBlock = async () => {
         if (!codeBlockService) {
-          design.tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+          design.tMagicMessage.error("新增代码块失败");
           return;
         }
         const codeConfig = {
-          name: "\u4EE3\u7801\u5757",
+          name: "代码块",
           content: `({app, params}) => {
   // place your code here
 }`,
@@ -3818,7 +3984,7 @@
           if (typeof props.customError === "function") {
             props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
           } else {
-            design.tMagicMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+            design.tMagicMessage.error("代码块删除失败");
           }
         }
       };
@@ -3845,11 +4011,11 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list" }, {
+        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$6, [
-                vue.createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
                 vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -3869,8 +4035,8 @@
               ref: tree,
               class: "magic-editor-layer-tree",
               "node-key": "id",
-              "empty-text": "\u6682\u65E0\u4EE3\u7801\u5757",
-              "default-expand-all": "",
+              "empty-text": "暂无代码块",
+              "default-expanded-keys": vue.unref(expandedKeys),
               "expand-on-click-node": false,
               data: vue.unref(codeList),
               "highlight-current": true,
@@ -3883,15 +4049,25 @@
                   class: "list-container"
                 }, [
                   vue.createElementVNode("div", _hoisted_4, [
-                    vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1),
-                    data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+                    data.type === "code" ? (vue.openBlock(), vue.createBlock(CodeIcon, {
+                      key: 0,
+                      class: "codeIcon"
+                    })) : vue.createCommentVNode("", true),
+                    data.type === "node" ? (vue.openBlock(), vue.createBlock(AppManageIcon, {
+                      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, [
                       vue.createVNode(vue.unref(design.TMagicTooltip), {
                         effect: "dark",
-                        content: vue.unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                        content: vue.unref(editable) ? "编辑" : "查看",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$v, {
+                          vue.createVNode(_sfc_main$w, {
                             icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3902,11 +4078,11 @@
                       vue.unref(editable) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
                         key: 0,
                         effect: "dark",
-                        content: "\u5220\u9664",
+                        content: "删除",
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          vue.createVNode(_sfc_main$v, {
+                          vue.createVNode(_sfc_main$w, {
                             icon: vue.unref(iconsVue.Close),
                             class: "edit-icon",
                             onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3923,7 +4099,7 @@
                 ], 8, _hoisted_3)
               ]),
               _: 3
-            }, 8, ["data"]),
+            }, 8, ["default-expanded-keys", "data"]),
             vue.unref(isShowCodeBlockEditor) ? (vue.openBlock(), vue.createBlock(_sfc_main$f, {
               key: 0,
               paramsColConfig: __props.paramsColConfig
@@ -3978,7 +4154,7 @@
           e.dataTransfer.effectAllowed = "move";
           e.dataTransfer.setData(
             "data",
-            serialize__default.default({
+            serialize({
               name: text,
               type,
               ...data
@@ -4021,7 +4197,7 @@
               "model-value": vue.unref(collapseValue)
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(list), (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -4029,7 +4205,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$v, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -4044,7 +4220,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$v, {
+                              vue.createVNode(_sfc_main$w, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -4167,7 +4343,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$l, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$n, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -4225,7 +4401,7 @@
         if (node.value?.type === "tabs") {
           return [
             {
-              text: "\u6807\u7B7E\u9875",
+              text: "标签页",
               type: "button",
               icon: iconsVue.Files,
               handler: () => {
@@ -4255,14 +4431,14 @@
       const menuData = vue.computed(() => [
         {
           type: "button",
-          text: "\u65B0\u589E",
+          text: "新增",
           icon: vue.markRaw(iconsVue.Plus),
           display: () => node.value?.items,
           items: getSubMenuData.value
         },
         {
           type: "button",
-          text: "\u590D\u5236",
+          text: "复制",
           icon: vue.markRaw(iconsVue.CopyDocument),
           display: () => !isRoot.value,
           handler: () => {
@@ -4271,7 +4447,7 @@
         },
         {
           type: "button",
-          text: "\u5220\u9664",
+          text: "删除",
           icon: vue.markRaw(iconsVue.Delete),
           display: () => !isRoot.value && !isPage.value,
           handler: () => {
@@ -4335,7 +4511,7 @@
       const highlightNode = vue.computed(() => editorService?.get("highlightNode"));
       const select = async (data) => {
         if (!data.id) {
-          throw new Error("\u6CA1\u6709id");
+          throw new Error("没有id");
         }
         await editorService?.select(data);
         editorService?.get("stage")?.select(data.id);
@@ -4346,7 +4522,7 @@
       };
       const highlight = (data) => {
         if (!data?.id) {
-          throw new Error("\u6CA1\u6709id");
+          throw new Error("没有id");
         }
         editorService?.highlight(data);
         editorService?.get("stage")?.highlight(data.id);
@@ -4359,7 +4535,7 @@
           return false;
         if (ingType === schema.NodeType.PAGE && data.type !== schema.NodeType.PAGE)
           return false;
-        if (!data || !data.type)
+        if (!data?.type)
           return false;
         if (["prev", "next"].includes(type))
           return true;
@@ -4444,7 +4620,7 @@
       let keycon;
       vue.onMounted(() => {
         editorService?.on("remove", editorServiceRemoveHandler);
-        keycon = new KeyController__default.default();
+        keycon = new KeyController();
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
         keycon.keydown((e) => {
@@ -4498,14 +4674,14 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+            vue.createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
             vue.unref(values).length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
               ref_key: "tree",
               ref: tree,
               "node-key": "id",
-              "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684",
+              "empty-text": "页面空荡荡的",
               draggable: "",
               "default-expanded-keys": expandedKeys.value,
               "default-checked-keys": checkedKeys.value,
@@ -4567,12 +4743,13 @@
   const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...__default__$8,
     props: {
-      data: { default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] }) },
+      data: { default: () => ({ type: "tabs", status: "组件", items: ["component-list", "layer", "code-block"] }) },
       layerContentMenu: null
     },
     setup(__props, { expose }) {
       const props = __props;
-      const uiComponent = design.getConfig("components").tabPane;
+      const tabPaneComponent = design.getConfig("components").tabPane;
+      const tabsComponent = design.getConfig("components").tabs;
       const activeTabName = vue.ref(props.data?.status);
       const getItemConfig = (data) => {
         const map = {
@@ -4580,7 +4757,7 @@
             $key: "component-list",
             type: "component",
             icon: iconsVue.Coin,
-            text: "\u7EC4\u4EF6",
+            text: "组件",
             component: _sfc_main$d,
             slots: {}
           },
@@ -4588,7 +4765,7 @@
             $key: "layer",
             type: "component",
             icon: iconsVue.Files,
-            text: "\u5DF2\u9009\u7EC4\u4EF6",
+            text: "已选组件",
             props: {
               layerContentMenu: props.layerContentMenu
             },
@@ -4599,7 +4776,7 @@
             $key: "code-block",
             type: "component",
             icon: iconsVue.EditPen,
-            text: "\u4EE3\u7801\u7F16\u8F91",
+            text: "代码编辑",
             component: _sfc_main$e,
             slots: {}
           }
@@ -4617,25 +4794,22 @@
         activeTabName
       });
       return (_ctx, _cache) => {
-        return __props.data.type === "tabs" && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTabs), {
+        return __props.data.type === "tabs" && __props.data.items.length ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabsComponent).component), vue.mergeProps({
           key: 0,
-          class: "m-editor-sidebar",
           modelValue: activeTabName.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTabName.value = $event),
-          type: "card",
-          "tab-position": "left"
-        }, {
+          class: "m-editor-sidebar tmagic-design-tabs"
+        }, 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(uiComponent).component), {
-                key: config.$key || index,
-                name: config.text
-              }, {
+              return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(tabPaneComponent).component), vue.mergeProps(vue.unref(tabPaneComponent).props({ name: config.text }), {
+                key: config.$key || index
+              }), {
                 label: vue.withCtx(() => [
                   (vue.openBlock(), vue.createElementBlock("div", {
                     key: config.text
                   }, [
-                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$w, {
                       key: 0,
                       icon: config.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4710,11 +4884,11 @@
                   ]), 1040)) : vue.createCommentVNode("", true)
                 ]),
                 _: 2
-              }, 1032, ["name"]);
+              }, 1040);
             }), 128))
           ]),
           _: 3
-        }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
+        }, 16, ["modelValue"])) : vue.createCommentVNode("", true);
       };
     }
   });
@@ -4837,7 +5011,7 @@
           return;
         const root = vue.toRaw(editorService.get("root"));
         if (!root)
-          throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
+          throw new Error("root 不能为空");
         const pageConfig = {
           type: schema.NodeType.PAGE,
           name: generatePageNameByApp(root)
@@ -4856,14 +5030,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$v, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$w, { 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$v, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4879,7 +5053,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$v, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$w, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -4951,18 +5125,18 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$l, {
+                        vue.createVNode(_sfc_main$n, {
                           data: {
                             type: "button",
-                            text: "\u590D\u5236",
+                            text: "复制",
                             icon: vue.unref(iconsVue.DocumentCopy),
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$l, {
+                        vue.createVNode(_sfc_main$n, {
                           data: {
                             type: "button",
-                            text: "\u5220\u9664",
+                            text: "删除",
                             icon: vue.unref(iconsVue.Delete),
                             handler: () => remove(item)
                           }
@@ -5136,7 +5310,7 @@
         if (!thumb.value)
           return;
         const thumbEl = thumb.value;
-        gesto = new Gesto__default.default(thumbEl, {
+        gesto = new Gesto(thumbEl, {
           container: window
         });
         gesto.on("dragStart", (e) => {
@@ -5327,7 +5501,7 @@
       const menuData = vue.computed(() => [
         {
           type: "button",
-          text: "\u6C34\u5E73\u5C45\u4E2D",
+          text: "水平居中",
           display: () => canCenter.value,
           handler: () => {
             if (!nodes.value)
@@ -5337,7 +5511,7 @@
         },
         {
           type: "button",
-          text: "\u590D\u5236",
+          text: "复制",
           icon: vue.markRaw(iconsVue.CopyDocument),
           handler: () => {
             nodes.value && editorService?.copy(nodes.value);
@@ -5346,7 +5520,7 @@
         },
         {
           type: "button",
-          text: "\u7C98\u8D34",
+          text: "粘贴",
           icon: vue.markRaw(iconsVue.DocumentCopy),
           display: () => canPaste.value,
           handler: () => {
@@ -5370,7 +5544,7 @@
         },
         {
           type: "button",
-          text: "\u4E0A\u79FB\u4E00\u5C42",
+          text: "上移一层",
           icon: vue.markRaw(iconsVue.Top),
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
@@ -5379,7 +5553,7 @@
         },
         {
           type: "button",
-          text: "\u4E0B\u79FB\u4E00\u5C42",
+          text: "下移一层",
           icon: vue.markRaw(iconsVue.Bottom),
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
@@ -5388,7 +5562,7 @@
         },
         {
           type: "button",
-          text: "\u7F6E\u9876",
+          text: "置顶",
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
             editorService?.moveLayer(LayerOffset.TOP);
@@ -5396,7 +5570,7 @@
         },
         {
           type: "button",
-          text: "\u7F6E\u5E95",
+          text: "置底",
           display: () => !utils.isPage(node.value) && !props.isMultiSelect,
           handler: () => {
             editorService?.moveLayer(LayerOffset.BOTTOM);
@@ -5409,7 +5583,7 @@
         },
         {
           type: "button",
-          text: "\u5220\u9664",
+          text: "删除",
           icon: iconsVue.Delete,
           display: () => !utils.isPage(node.value),
           handler: () => {
@@ -5422,7 +5596,7 @@
         },
         {
           type: "button",
-          text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+          text: "清空参考线",
           handler: () => {
             editorService?.get("stage")?.clearGuides();
           }
@@ -5648,7 +5822,7 @@
       vue.onMounted(() => {
         workspace.value?.addEventListener("mouseenter", mouseenterHandler);
         workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
-        keycon = new KeyController__default.default(workspace.value);
+        keycon = new KeyController(workspace.value);
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
         keycon.keyup("delete", (e) => {
@@ -5782,14 +5956,30 @@
         "deleteCodeDslByIds"
       ]);
     }
+    /**
+     * 设置活动的代码块dsl数据源
+     * @param {CodeBlockDSL} codeDsl 代码DSL
+     * @returns {void}
+     */
     async setCodeDsl(codeDsl2) {
       this.state.codeDsl = codeDsl2;
       info("[code-block]:code-dsl-change", this.state.codeDsl);
       this.emit("code-dsl-change", this.state.codeDsl);
     }
+    /**
+     * 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
+     * 方法要支持钩子添加扩展，会被重写为异步方法,因此这里显示写为异步以提醒调用者需以异步形式调用
+     * @param {boolean} forceRefresh 是否强制从活动dsl拉取刷新
+     * @returns {CodeBlockDSL | null}
+     */
     getCodeDsl() {
       return this.state.codeDsl;
     }
+    /**
+     * 根据代码块id获取代码块内容
+     * @param {Id} id 代码块id
+     * @returns {CodeBlockContent | null}
+     */
     getCodeContentById(id2) {
       if (!id2)
         return null;
@@ -5798,10 +5988,16 @@
         return null;
       return totalCodeDsl[id2] ?? null;
     }
+    /**
+     * 设置代码块ID和代码内容到源dsl
+     * @param {Id} id 代码块id
+     * @param {CodeBlockContent} codeConfig 代码块内容配置信息
+     * @returns {void}
+     */
     async setCodeDslById(id, codeConfig) {
       const codeDsl = this.getCodeDsl();
       if (!codeDsl) {
-        throw new Error("dsl\u4E2D\u6CA1\u6709codeBlocks");
+        throw new Error("dsl中没有codeBlocks");
       }
       const codeConfigProcessed = codeConfig;
       if (codeConfig.content) {
@@ -5814,60 +6010,133 @@
       };
       this.emit("addOrUpdate", id, codeDsl[id]);
     }
+    /**
+     * 根据代码块id数组获取代码dsl
+     * @param {string[]} ids 代码块id数组
+     * @returns {CodeBlockDSL}
+     */
     getCodeDslByIds(ids) {
       const codeDsl2 = this.getCodeDsl();
       return lodashEs.pick(codeDsl2, ids);
     }
+    /**
+     * 设置代码编辑面板展示状态
+     * @param {boolean} status 是否展示代码编辑面板
+     * @returns {void}
+     */
     async setCodeEditorShowStatus(status) {
       this.state.isShowCodeEditor = status;
     }
+    /**
+     * 获取代码编辑面板展示状态
+     * @returns {boolean} 是否展示代码编辑面板
+     */
     getCodeEditorShowStatus() {
       return this.state.isShowCodeEditor;
     }
+    /**
+     * 设置代码编辑面板展示状态及展示内容
+     * @param {boolean} status 是否展示代码编辑面板
+     * @param {Id} id 代码块id
+     * @returns {void}
+     */
     setCodeEditorContent(status, id2) {
       if (!id2)
         return;
       this.setId(id2);
       this.state.isShowCodeEditor = status;
     }
+    /**
+     * 获取当前选中的代码块内容
+     * @returns {CodeBlockContent | null}
+     */
     getCurrentDsl() {
       return this.getCodeContentById(this.state.id);
     }
+    /**
+     * 获取编辑状态
+     * @returns {boolean} 是否可编辑
+     */
     getEditStatus() {
       return this.state.editable;
     }
+    /**
+     * 设置编辑状态
+     * @param {boolean} status 是否可编辑
+     * @returns {void}
+     */
     async setEditStatus(status) {
       this.state.editable = status;
     }
+    /**
+     * 设置当前选中的代码块ID
+     * @param {Id} id 代码块id
+     * @returns {void}
+     */
     setId(id2) {
       if (!id2)
         return;
       this.state.id = id2;
     }
+    /**
+     * 获取当前选中的代码块ID
+     * @returns {Id} id 代码块id
+     */
     getId() {
       return this.state.id;
     }
+    /**
+     * 设置当前选中组件已关联绑定的代码块id数组
+     * @param {string[]} ids 代码块id数组
+     * @returns {void}
+     */
     async setCombineIds(ids) {
       this.state.combineIds = ids;
     }
+    /**
+     * 获取当前选中组件已关联绑定的代码块id数组
+     * @returns {string[]}
+     */
     getCombineIds() {
       return this.state.combineIds;
     }
+    /**
+     * 获取不可删除列表
+     * @returns {Id[]}
+     */
     getUndeletableList() {
       return this.state.undeletableList;
     }
+    /**
+     * 设置不可删除列表：为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除）
+     * @param {Id[]} codeIds 代码块id数组
+     * @returns {void}
+     */
     async setUndeleteableList(codeIds) {
       this.state.undeletableList = codeIds;
     }
+    /**
+     * 设置代码草稿
+     */
     setCodeDraft(codeId, content) {
       globalThis.localStorage.setItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`, content);
     }
+    /**
+     * 获取代码草稿
+     */
     getCodeDraft(codeId) {
       return globalThis.localStorage.getItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
     }
+    /**
+     * 删除代码草稿
+     */
     removeCodeDraft(codeId) {
       globalThis.localStorage.removeItem(`${CODE_DRAFT_STORAGE_KEY}_${codeId}`);
     }
+    /**
+     * 在dsl数据源中删除指定id的代码块
+     * @param {Id[]} codeIds 需要删除的代码块id数组
+     */
     async deleteCodeDslByIds(codeIds) {
       const currentDsl = await this.getCodeDsl();
       if (!currentDsl)
@@ -5877,6 +6146,10 @@
         this.emit("remove", id2);
       });
     }
+    /**
+     * 生成代码块唯一id
+     * @returns {Id} 代码块唯一id
+     */
     async getUniqueId() {
       const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
       const dsl = await this.getCodeDsl();
@@ -5908,6 +6181,9 @@
     constructor() {
       super([]);
     }
+    /**
+     * @param componentGroupList 组件列表配置
+     */
     setList(componentGroupList) {
       this.state.list = componentGroupList;
     }
@@ -5926,10 +6202,27 @@
   const componentListService = new ComponentList();
 
   class Target extends events.EventEmitter {
+    /**
+     * 如何识别目标
+     */
     isTarget;
+    /**
+     * 目标id，不可重复
+     * 例如目标是代码块，则为代码块id
+     */
     id;
+    /**
+     * 目标名称，用于显示在依赖列表中
+     */
     name;
+    /**
+     * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
+     */
     type = "default";
+    /**
+     * 依赖详情
+     * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
+     */
     deps = vue.reactive({});
     constructor(options) {
       super();
@@ -5940,6 +6233,11 @@
         this.type = options.type;
       }
     }
+    /**
+     * 更新依赖
+     * @param node 节点配置
+     * @param key 哪个key配置了这个目标的id
+     */
     updateDep(node, key) {
       const dep = this.deps[node.id] || {
         name: node.name,
@@ -5954,6 +6252,12 @@
       }
       this.emit("change");
     }
+    /**
+     * 删除依赖
+     * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖
+     * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key
+     * @returns void
+     */
     removeDep(node, key) {
       if (!node) {
         Object.keys(this.deps).forEach((depKey) => {
@@ -5976,6 +6280,12 @@
       }
       this.emit("change");
     }
+    /**
+     * 判断指定节点下的指定key是否存在在依赖列表中
+     * @param node 哪个节点
+     * @param key 哪个key
+     * @returns boolean
+     */
     hasDep(node, key) {
       const dep = this.deps[node.id];
       return Boolean(dep?.keys.find((d) => d === key));
@@ -5986,15 +6296,29 @@
   }
   class Watcher extends events.EventEmitter {
     targets = vue.reactive({});
+    /**
+     * 获取指定类型中的所有target
+     * @param type 分类
+     * @returns Target[]
+     */
     getTargets(type = "default") {
       return this.targets[type] || {};
     }
+    /**
+     * 添加新的目标
+     * @param target Target
+     */
     addTarget(target) {
       const targets = this.getTargets(target.type) || {};
       this.targets[target.type] = targets;
       targets[target.id] = target;
       this.emit("add-target", target);
     }
+    /**
+     * 获取指定id的target
+     * @param id target id
+     * @returns Target
+     */
     getTarget(id) {
       const allTargets = Object.values(this.targets);
       for (const targets of allTargets) {
@@ -6003,6 +6327,11 @@
         }
       }
     }
+    /**
+     * 判断是否存在指定id的target
+     * @param id target id
+     * @returns boolean
+     */
     hasTarget(id) {
       const allTargets = Object.values(this.targets);
       for (const targets of allTargets) {
@@ -6012,6 +6341,10 @@
       }
       return false;
     }
+    /**
+     * 删除指定id的target
+     * @param id target id
+     */
     removeTarget(id) {
       const allTargets = Object.values(this.targets);
       for (const targets of allTargets) {
@@ -6022,6 +6355,11 @@
       }
       this.emit("remove-target");
     }
+    /**
+     * 删除指定分类的所有target
+     * @param type 分类
+     * @returns void
+     */
     removeTargets(type = "default") {
       const targets = this.targets[type];
       if (!targets)
@@ -6032,11 +6370,19 @@
       delete this.targets[type];
       this.emit("remove-target");
     }
+    /**
+     * 删除所有target
+     */
     clearTargets() {
       Object.keys(this.targets).forEach((key) => {
         delete this.targets[key];
       });
     }
+    /**
+     * 收集依赖
+     * @param nodes 需要收集的节点
+     * @param deep 是否需要收集子节点
+     */
     collect(nodes, deep = false) {
       Object.values(this.targets).forEach((targets) => {
         Object.values(targets).forEach((target) => {
@@ -6047,6 +6393,10 @@
         });
       });
     }
+    /**
+     * 清除依赖
+     * @param nodes 需要清除依赖的节点
+     */
     clear(nodes) {
       Object.values(this.targets).forEach((targets) => {
         Object.values(targets).forEach((target) => {
@@ -6146,50 +6496,64 @@
   const eventsService = new Events();
 
   const editorProps = {
+    /** 页面初始值 */
     modelValue: {
       type: Object,
       default: () => ({}),
       require: true
     },
+    /** 左侧面板中的组件列表 */
     componentGroupList: {
       type: Array,
       default: () => []
     },
+    /** 左侧面板配置 */
     sidebar: {
       type: Object
     },
+    /** 顶部工具栏配置 */
     menu: {
       type: Object,
       default: () => ({ left: [], right: [] })
     },
+    /** 组件树右键菜单 */
     layerContentMenu: {
       type: Array,
       default: () => []
     },
+    /** 画布右键菜单 */
     stageContentMenu: {
       type: Array,
       default: () => []
     },
+    /** 中间工作区域中画布渲染的内容 */
     render: {
       type: Function
     },
+    /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: String,
+    /** 选中时是否自动滚动到可视区域 */
     autoScrollIntoView: Boolean,
+    /** 组件的属性配置表单的dsl */
     propsConfigs: {
       type: Object,
       default: () => ({})
     },
+    /** 添加组件时的默认值 */
     propsValues: {
       type: Object,
       default: () => ({})
     },
+    /** 组件联动事件选项列表 */
     eventMethodList: {
       type: Object,
       default: () => ({})
     },
+    /** 画布中组件选中框的移动范围 */
     moveableOptions: {
       type: [Object, Function]
     },
+    /** 编辑器初始化时默认选中的组件ID */
     defaultSelected: {
       type: [Number, String]
     },
@@ -6393,11 +6757,11 @@
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      TMagicNavMenu: _sfc_main$k,
+      TMagicNavMenu: _sfc_main$m,
       Sidebar: _sfc_main$9,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$j,
-      Framework: _sfc_main$m
+      PropsPanel: _sfc_main$l,
+      Framework: _sfc_main$o
     },
     props: editorProps,
     emits: ["props-panel-mounted", "update:modelValue"],
@@ -6437,14 +6801,6 @@
     }
   });
 
-  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");
@@ -6535,20 +6891,22 @@
 
   const index$1 = '';
 
-  const defaultInstallOpt = {};
+  const defaultInstallOpt = {
+    // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  };
   const index = {
     install: (app, opt) => {
       const option = Object.assign(defaultInstallOpt, opt || {});
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$r);
-      app.component("m-fields-code-link", _sfc_main$w);
-      app.component("m-fields-vs-code", _sfc_main$x);
-      app.component("magic-code-editor", _sfc_main$q);
-      app.component("m-fields-code-select", _sfc_main$u);
-      app.component("m-fields-code-select-col", _sfc_main$t);
-      app.component("m-fields-event-select", _sfc_main$s);
+      app.component("m-fields-ui-select", _sfc_main$t);
+      app.component("m-fields-code-link", _sfc_main$y);
+      app.component("m-fields-vs-code", _sfc_main$z);
+      app.component("magic-code-editor", _sfc_main$s);
+      app.component("m-fields-code-select", _sfc_main$x);
+      app.component("m-fields-code-select-col", _sfc_main$v);
+      app.component("m-fields-event-select", _sfc_main$u);
     }
   };
 
@@ -6556,24 +6914,24 @@
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
   exports.CodeBlockList = _sfc_main$e;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$u;
-  exports.CodeSelectCol = _sfc_main$t;
+  exports.CodeSelect = _sfc_main$x;
+  exports.CodeSelectCol = _sfc_main$v;
   exports.ColumnLayout = ColumnLayout;
   exports.ComponentListPanel = _sfc_main$d;
   exports.ContentMenu = _sfc_main$c;
-  exports.EventSelect = _sfc_main$s;
+  exports.EventSelect = _sfc_main$u;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$v;
+  exports.Icon = _sfc_main$w;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
   exports.LayerPanel = _sfc_main$a;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$o;
-  exports.PropsPanel = _sfc_main$j;
-  exports.TMagicCodeEditor = _sfc_main$q;
+  exports.LayoutContainer = _sfc_main$q;
+  exports.PropsPanel = _sfc_main$l;
+  exports.TMagicCodeEditor = _sfc_main$s;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$l;
+  exports.ToolButton = _sfc_main$n;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.beforePaste = beforePaste;
   exports.change2Fixed = change2Fixed;