@tmagic/editor 1.2.13 → 1.2.14

package/dist/tmagic-editor.js

@@ -1,22 +1,22 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, withCtx, createVNode, createElementVNode, createElementBlock, normalizeClass, resolveDynamicComponent, toRaw, inject, createCommentVNode, ref, Fragment, renderList, createTextVNode, withModifiers, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, provide, withDirectives, Teleport, vShow, nextTick, toHandlers } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, createElementBlock, normalizeClass, createVNode, withCtx, createElementVNode, resolveDynamicComponent, toRaw, inject, ref, Fragment, renderList, createTextVNode, withModifiers, createCommentVNode, toDisplayString, onMounted, onUnmounted, renderSlot, createSlots, normalizeProps, mergeProps, markRaw, getCurrentInstance, watchEffect, createStaticVNode, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
 import { isEmpty, map, has, throttle, cloneDeep, mergeWith, isObject, uniq, forIn, difference, union, pick, keys } from 'lodash-es';
-import { createValues, MForm } from '@tmagic/form';
+import { TMagicCard, TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicInput, tMagicMessageBox, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import { HookType, ActionType, NodeType } from '@tmagic/schema';
-import { TMagicIcon, TMagicButton, TMagicTooltip, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, tMagicMessage, TMagicInput, tMagicMessageBox, TMagicCard, TMagicDrawer, TMagicTree, TMagicCollapse, TMagicCollapseItem, getConfig as getConfig$1, TMagicTabs, TMagicPopover } from '@tmagic/design';
+import { Edit, View, Delete, Close, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Files, CopyDocument, Coin, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Top, Bottom } from '@element-plus/icons-vue';
+import { createValues, MForm } from '@tmagic/form';
 import * as monaco from 'monaco-editor';
 import Gesto from 'gesto';
 import { isPop, getNodePath, isNumber, isPage, toLine, datetimeFormatter, removeClassNameByClassName } from '@tmagic/utils';
+import KeyController from 'keycon';
 import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
-import KeyController from 'keycon';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 
 const __default__$v = defineComponent({
   name: "MEditorCode"
 });
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...__default__$v,
   props: {
     model: null,
@@ -49,7 +49,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
 const __default__$u = defineComponent({
   name: "MEditorCodeLink"
 });
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...__default__$u,
   props: {
     config: null,
@@ -119,58 +119,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = ["src"];
 const __default__$t = defineComponent({
-  name: "MEditorIcon"
-});
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
-  ...__default__$t,
-  props: {
-    icon: null
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 0,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(Edit))
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 1,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$h)
-        ]),
-        _: 1
-      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
-        key: 2,
-        class: normalizeClass(["magic-editor-icon", __props.icon])
-      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
-        key: 3,
-        class: "magic-editor-icon"
-      }, {
-        default: withCtx(() => [
-          (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
-        ]),
-        _: 1
-      }));
-    };
-  }
-});
-
-const __default__$s = defineComponent({
   name: "MEditorCodeSelect"
 });
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$s,
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  ...__default__$t,
   props: {
-    config: { default: () => ({
-      editable: true
-    }) },
+    config: null,
     model: null,
     prop: null,
     name: null,
@@ -179,55 +134,16 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const props = __props;
-    const services = inject("services");
-    const mForm = inject("mForm");
-    const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-    const tableConfig = 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 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 || isEmpty(row.params)) {
-                createValues(mForm, paramsConfig, {}, row.params);
-              }
-              return paramsConfig;
-            }
-          }
-        ]
-      };
-      return {
-        ...defaultConfig,
-        ...props.config.tableConfig
-      };
-    });
-    const editable = computed(() => services?.codeBlockService.getEditStatus());
+    const codeConfig = computed(() => ({
+      type: "group-list",
+      name: "hookData",
+      enableToggleMode: false,
+      items: [
+        {
+          type: "code-select-col"
+        }
+      ]
+    }));
     watch(
       () => props.model[props.name],
       (value) => {
@@ -245,56 +161,75 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const changeHandler = async () => {
       emit("change", props.model[props.name]);
     };
-    const getParamsConfig = (codeId) => {
-      if (!codeDsl.value)
-        return [];
-      const paramStatements = codeDsl.value[codeId]?.params;
-      if (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 = resolveComponent("m-form-table");
+      const _component_m_form_container = resolveComponent("m-form-container");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-fields-code-select", __props.config.className])
       }, [
-        createVNode(_component_m_form_table, {
-          config: unref(tableConfig),
-          model: __props.model[__props.name],
-          name: "hookData",
-          enableToggleMode: false,
-          prop: __props.prop,
-          size: __props.size,
-          onChange: changeHandler
-        }, {
-          operateCol: withCtx(({ scope }) => [
-            scope.row.codeId && __props.config.editable ? (openBlock(), createBlock(_sfc_main$v, {
-              key: 0,
-              icon: unref(editable) ? unref(Edit) : unref(View),
-              class: "edit-icon",
-              onClick: ($event) => editCode(scope.row.codeId)
-            }, null, 8, ["icon", "onClick"])) : createCommentVNode("", true)
+        createVNode(unref(TMagicCard), null, {
+          default: withCtx(() => [
+            createVNode(_component_m_form_container, {
+              config: 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 = defineComponent({
+  name: "MEditorIcon"
+});
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$s,
+  props: {
+    icon: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(Edit))
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$j)
+        ]),
+        _: 1
+      })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
+        key: 2,
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
+        default: withCtx(() => [
+          (openBlock(), createBlock(resolveDynamicComponent(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 = defineComponent({
   name: "MEditorCodeSelectCol"
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...__default__$r,
   props: {
     config: null,
@@ -309,24 +244,25 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const mForm = inject("mForm");
     const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+    const editable = computed(() => services?.codeBlockService.getEditStatus());
     const codeParamsConfig = 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 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
           }));
         }
@@ -357,7 +293,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       codeParamsConfig.value = {
         type: "fieldset",
         items: paramsConfig,
-        legend: "\u53C2\u6570",
+        legend: "参数",
         labelWidth: "70px",
         name: "params",
         display: !isEmpty(paramsConfig)
@@ -377,14 +313,25 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         immediate: true
       }
     );
+    const editCode = () => {
+      services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
+    };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
-        createVNode(_component_m_form_container, {
-          config: selectConfig,
-          model: __props.model,
-          onChange: onParamsChangeHandler
-        }, null, 8, ["model"]),
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        createElementVNode("div", _hoisted_2$a, [
+          createVNode(_component_m_form_container, {
+            class: "select",
+            config: selectConfig,
+            model: __props.model,
+            onChange: onParamsChangeHandler
+          }, null, 8, ["model"]),
+          createVNode(_sfc_main$w, {
+            class: "icon",
+            icon: unref(editable) ? unref(Edit) : unref(View),
+            onClick: editCode
+          }, null, 8, ["icon"])
+        ]),
         createVNode(_component_m_form_container, {
           config: codeParamsConfig.value,
           model: __props.model,
@@ -395,16 +342,16 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createTextVNode("\u6DFB\u52A0\u4E8B\u4EF6");
+const _hoisted_3$5 = /* @__PURE__ */ createTextVNode("添加事件");
 const __default__$q = defineComponent({
   name: "MEditorEventSelect"
 });
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...__default__$q,
   props: {
     config: null,
@@ -420,7 +367,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const eventNameConfig = computed(() => {
       const defaultEventNameConfig = {
         name: "name",
-        text: "\u4E8B\u4EF6",
+        text: "事件",
         type: "select",
         labelWidth: "40px",
         options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
@@ -433,19 +380,19 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const actionTypeConfig = computed(() => {
       const defaultActionTypeConfig = {
         name: "actionType",
-        text: "\u8054\u52A8\u7C7B\u578B",
+        text: "联动类型",
         labelWidth: "70px",
         type: "select",
         defaultValue: ActionType.COMP,
         options: () => [
           {
-            text: "\u7EC4\u4EF6",
-            label: "\u7EC4\u4EF6",
+            text: "组件",
+            label: "组件",
             value: ActionType.COMP
           },
           {
-            text: "\u4EE3\u7801",
-            label: "\u4EE3\u7801",
+            text: "代码",
+            label: "代码",
             value: ActionType.CODE
           }
         ]
@@ -455,7 +402,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const targetCompConfig = computed(() => {
       const defaultTargetCompConfig = {
         name: "to",
-        text: "\u8054\u52A8\u7EC4\u4EF6",
+        text: "联动组件",
         labelWidth: "70px",
         type: "ui-select",
         display: (mForm, { model }) => model.actionType === ActionType.COMP
@@ -465,7 +412,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     const compActionConfig = computed(() => {
       const defaultCompActionConfig = {
         name: "method",
-        text: "\u52A8\u4F5C",
+        text: "动作",
         labelWidth: "70px",
         type: "select",
         display: (mForm, { model }) => model.actionType === ActionType.COMP,
@@ -494,7 +441,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       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,
@@ -503,12 +450,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         },
         {
           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);
@@ -558,17 +505,19 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
       emit("change", props.model);
     };
     return (_ctx, _cache) => {
+      const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$f, [
-        unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_container, {
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+        unref(isOldVersion) ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
           size: props.size,
           model: __props.model,
+          name: "events",
           config: unref(tableConfig),
           onChange: onChangeHandler
-        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
+        }, null, 8, ["size", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$9, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -576,7 +525,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
             onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
           }, {
             default: withCtx(() => [
-              _hoisted_3$4
+              _hoisted_3$5
             ]),
             _: 1
           }),
@@ -610,11 +559,11 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$e = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _hoisted_1$g = /* @__PURE__ */ createTextVNode("取消");
 const __default__$p = defineComponent({
   name: "MEditorUISelect"
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...__default__$p,
   props: {
     config: null,
@@ -677,7 +626,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$e
+            _hoisted_1$g
           ]),
           _: 1
         }, 8, ["icon"])
@@ -689,7 +638,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
       }, [
         unref(val) ? (openBlock(), createBlock(unref(TMagicTooltip), {
           key: 0,
-          content: "\u6E05\u9664"
+          content: "清除"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
@@ -703,7 +652,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
           _: 1
         })) : createCommentVNode("", true),
         createVNode(unref(TMagicTooltip), {
-          content: unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"
+          content: unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
@@ -711,7 +660,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
               style: { "padding": "0", "margin": "0" }
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(unref(val) ? unref(toName) + "_" + unref(val) : "\u70B9\u51FB\u6B64\u5904\u9009\u62E9"), 1)
+                createTextVNode(toDisplayString(unref(val) ? unref(toName) + "_" + unref(val) : "点击此处选择"), 1)
               ]),
               _: 1
             })
@@ -728,7 +677,7 @@ const UISelect_vue_vue_type_style_index_0_lang = '';
 const __default__$o = defineComponent({
   name: "MEditorCodeEditor"
 });
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...__default__$o,
   props: {
     initValues: null,
@@ -861,7 +810,7 @@ const getConfig = (key) => $TMAGIC_EDITOR[key];
 const __default__$n = defineComponent({
   name: "MEditorResizer"
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...__default__$n,
   emits: ["change"],
   setup(__props, { emit }) {
@@ -897,7 +846,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 const __default__$m = defineComponent({
   name: "MEditorLayout"
 });
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...__default__$m,
   props: {
     left: null,
@@ -1006,7 +955,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$p, { onChange: changeLeft })
+          createVNode(_sfc_main$r, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -1015,7 +964,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         unref(hasRight) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$p, { onChange: changeRight }),
+          createVNode(_sfc_main$r, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
             style: normalizeStyle(`width: ${__props.right}px`)
@@ -1033,14 +982,16 @@ const fillConfig = (config = []) => [
     type: "tab",
     items: [
       {
-        title: "\u5C5E\u6027",
+        title: "属性",
         labelWidth: "80px",
         items: [
+          // 组件类型，必须要有
           {
             text: "type",
             name: "type",
             type: "hidden"
           },
+          // 组件id，必须要有
           {
             name: "id",
             type: "display",
@@ -1048,13 +999,13 @@ const fillConfig = (config = []) => [
           },
           {
             name: "name",
-            text: "\u7EC4\u4EF6\u540D\u79F0"
+            text: "组件名称"
           },
           ...config
         ]
       },
       {
-        title: "\u6837\u5F0F",
+        title: "样式",
         labelWidth: "80px",
         items: [
           {
@@ -1062,7 +1013,7 @@ const fillConfig = (config = []) => [
             items: [
               {
                 type: "fieldset",
-                legend: "\u4F4D\u7F6E",
+                legend: "位置",
                 items: [
                   {
                     name: "position",
@@ -1070,7 +1021,7 @@ const fillConfig = (config = []) => [
                     activeValue: "fixed",
                     inactiveValue: "absolute",
                     defaultValue: "absolute",
-                    text: "\u56FA\u5B9A\u5B9A\u4F4D"
+                    text: "固定定位"
                   },
                   {
                     name: "left",
@@ -1094,34 +1045,34 @@ const fillConfig = (config = []) => [
               },
               {
                 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: [
@@ -1134,42 +1085,42 @@ const fillConfig = (config = []) => [
                   },
                   {
                     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: "缩放"
                   }
                 ]
               }
@@ -1178,7 +1129,7 @@ const fillConfig = (config = []) => [
         ]
       },
       {
-        title: "\u4E8B\u4EF6",
+        title: "事件",
         items: [
           {
             name: "events",
@@ -1187,7 +1138,7 @@ const fillConfig = (config = []) => [
         ]
       },
       {
-        title: "\u9AD8\u7EA7",
+        title: "高级",
         lazy: true,
         items: [
           {
@@ -1446,6 +1397,7 @@ class UndoRedo {
   canUndo() {
     return this.listCursor > 1;
   }
+  // 返回undo后的当前元素
   undo() {
     if (!this.canUndo()) {
       return null;
@@ -1456,6 +1408,7 @@ class UndoRedo {
   canRedo() {
     return this.elementList.length > this.listCursor;
   }
+  // 返回redo后的当前元素
   redo() {
     if (!this.canRedo()) {
       return null;
@@ -1473,17 +1426,17 @@ class UndoRedo {
 
 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)
@@ -1688,16 +1641,32 @@ class WebStorage extends BaseService {
   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(
@@ -1718,14 +1687,23 @@ class WebStorage extends BaseService {
         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;
@@ -1787,9 +1765,19 @@ class Props extends BaseService {
   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");
@@ -1801,9 +1789,19 @@ class Props extends BaseService {
       this.setPropsValue(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");
@@ -1833,6 +1831,11 @@ class Props extends BaseService {
   async createId(type) {
     return `${type}_${this.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)) {
@@ -1842,6 +1845,11 @@ class Props extends BaseService {
     }
     return config;
   }
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
   async getDefaultPropsValue(type) {
     return ["page", "container"].includes(type) ? {
       type,
@@ -1864,6 +1872,11 @@ class Props extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+  /**
+   * 生成指定位数的GUID，无【-】格式
+   * @param digit 位数，默认值8
+   * @returns
+   */
   guid(digit = 8) {
     return "x".repeat(digit).replace(/[xy]/g, (c) => {
       const r = Math.random() * 16 | 0;
@@ -1946,7 +1959,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-class Editor$1 extends BaseService {
+let Editor$1 = class Editor extends BaseService {
   state = reactive({
     root: null,
     page: null,
@@ -1983,9 +1996,15 @@ class Editor$1 extends BaseService {
         "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;
@@ -1994,7 +2013,7 @@ class Editor$1 extends BaseService {
     }
     if (name === "root") {
       if (Array.isArray(value)) {
-        throw new Error("root \u4E0D\u80FD\u4E3A\u6570\u7EC4");
+        throw new Error("root 不能为数组");
       }
       if (value && isObject(value) && !(value instanceof StageCore) && !(value instanceof Map)) {
         this.state.pageLength = value.items?.length || 0;
@@ -2004,9 +2023,20 @@ class Editor$1 extends BaseService {
       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) {
@@ -2037,14 +2067,29 @@ class Editor$1 extends BaseService {
     });
     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;
@@ -2056,6 +2101,11 @@ class Editor$1 extends BaseService {
     }
     return Layout.ABSOLUTE;
   }
+  /**
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @param config 指定节点配置或者ID
+   * @returns 当前选中的节点配置
+   */
   async select(config) {
     const { node, page, parent } = this.selectedConfigExceptionHandler(config);
     this.set("nodes", node ? [node] : []);
@@ -2097,15 +2147,20 @@ class Editor$1 extends BaseService {
     const root = toRaw(this.get("root"));
     const page = 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");
@@ -2113,6 +2168,11 @@ class Editor$1 extends BaseService {
       return;
     this.set("highlightNode", node);
   }
+  /**
+   * 多选
+   * @param ids 指定节点ID
+   * @returns 加入多选的节点配置
+   */
   multiSelect(ids) {
     const nodes = [];
     const idsUnique = uniq(ids);
@@ -2127,13 +2187,13 @@ class Editor$1 extends BaseService {
   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 === NodeType.ROOT || curNode?.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
-      throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
+      throw new Error("app下不能添加组件");
     }
     if (parent.id !== curNode.id && node.type !== NodeType.PAGE) {
       const index = parent.items.indexOf(curNode);
@@ -2157,13 +2217,19 @@ class Editor$1 extends BaseService {
     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({ ...toRaw(await propsService.getPropsValue(type, config)) });
     } else {
       addNodes.push(...addNode);
@@ -2176,7 +2242,7 @@ class Editor$1 extends BaseService {
         }
         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);
       })
     );
@@ -2201,13 +2267,13 @@ class Editor$1 extends BaseService {
   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: cloneDeep(root) });
@@ -2232,6 +2298,10 @@ class Editor$1 extends BaseService {
     }
     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)));
@@ -2243,12 +2313,12 @@ class Editor$1 extends BaseService {
   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 = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
     newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
@@ -2260,18 +2330,18 @@ class Editor$1 extends BaseService {
       }
     });
     if (!newConfig.type)
-      throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
+      throw new Error("配置缺少type值");
     if (newConfig.type === 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) {
@@ -2293,6 +2363,11 @@ class Editor$1 extends BaseService {
     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)));
@@ -2300,16 +2375,22 @@ class Editor$1 extends BaseService {
     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 = cloneDeep(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;
@@ -2325,11 +2406,21 @@ class Editor$1 extends BaseService {
     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))
@@ -2352,7 +2443,7 @@ class Editor$1 extends BaseService {
   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 = cloneDeep(toRaw(config));
     const layout = await this.getLayout(parent, node);
     if (layout === Layout.RELATIVE) {
@@ -2373,6 +2464,11 @@ class Editor$1 extends BaseService {
     }
     return node;
   }
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
   async alignCenter(config) {
     const nodes = Array.isArray(config) ? config : [config];
     const stage = this.get("stage");
@@ -2385,16 +2481,20 @@ class Editor$1 extends BaseService {
     }
     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);
@@ -2416,6 +2516,11 @@ class Editor$1 extends BaseService {
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
+  /**
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
+   */
   async moveToContainer(config, targetId) {
     const root = cloneDeep(this.get("root"));
     const { node, parent } = this.getNodeInfo(config.id, false);
@@ -2444,11 +2549,19 @@ class Editor$1 extends BaseService {
       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);
@@ -2544,13 +2657,13 @@ class Editor$1 extends BaseService {
       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,
@@ -2558,7 +2671,7 @@ class Editor$1 extends BaseService {
       page
     };
   }
-}
+};
 const editorService = new Editor$1();
 
 const state = reactive({
@@ -2709,7 +2822,7 @@ const useStage = (stageOptions) => {
   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);
   });
@@ -2729,13 +2842,13 @@ const useStage = (stageOptions) => {
   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__ */ 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__ */ createElementVNode("p", null, "新增页面", -1);
 const __default__$l = defineComponent({
   name: "MEditorAddPageBox"
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...__default__$l,
   setup(__props) {
     const services = inject("services");
@@ -2745,23 +2858,23 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         return;
       const root = toRaw(editorService.get("root"));
       if (!root)
-        throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
+        throw new Error("root 不能为空");
       editorService.add({
         type: NodeType.PAGE,
         name: generatePageNameByApp(root)
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$8, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$v, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$w, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$3
+            _hoisted_3$4
           ])
         ])
       ]);
@@ -2769,11 +2882,11 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "m-editor" };
+const _hoisted_1$e = { class: "m-editor" };
 const __default__$k = defineComponent({
   name: "MEditorFramework"
 });
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...__default__$k,
   props: {
     codeOptions: { default: () => ({}) }
@@ -2843,7 +2956,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2851,7 +2964,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$o, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$q, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2861,8 +2974,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           "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
         }, createSlots({
           left: withCtx(() => [
@@ -2870,7 +2983,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$n)
+              createVNode(_sfc_main$p)
             ])
           ]),
           _: 2
@@ -2892,15 +3005,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-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 = defineComponent({
   name: "MEditorToolButton"
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...__default__$j,
   props: {
     data: { default: () => ({
@@ -2976,7 +3089,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$b, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$d, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -2990,7 +3103,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$v, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$w, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3007,7 +3120,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$v, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$w, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -3040,7 +3153,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$5, [
+            createElementVNode("span", _hoisted_2$7, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -3060,7 +3173,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
 const __default__$i = defineComponent({
   name: "MEditorNavMenu"
 });
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...__default__$i,
   props: {
     data: { default: () => ({}) },
@@ -3103,7 +3216,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "delete",
             icon: markRaw(Delete),
-            tooltip: `\u522A\u9664(Delete)`,
+            tooltip: `刪除(Delete)`,
             disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
             handler: () => {
               const node = services?.editorService.get("node");
@@ -3116,7 +3229,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "undo",
             icon: markRaw(Back),
-            tooltip: `\u540E\u9000(${ctrl}+z)`,
+            tooltip: `后退(${ctrl}+z)`,
             disabled: () => !services?.historyService.state.canUndo,
             handler: () => services?.editorService.undo()
           });
@@ -3126,7 +3239,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "redo",
             icon: markRaw(Right),
-            tooltip: `\u524D\u8FDB(${ctrl}+Shift+z)`,
+            tooltip: `前进(${ctrl}+Shift+z)`,
             disabled: () => !services?.historyService.state.canRedo,
             handler: () => services?.editorService.redo()
           });
@@ -3136,7 +3249,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "zoom-in",
             icon: markRaw(ZoomIn),
-            tooltip: `\u653E\u5927(${ctrl}+=)`,
+            tooltip: `放大(${ctrl}+=)`,
             handler: () => uiService?.zoom(0.1)
           });
           break;
@@ -3145,7 +3258,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "zoom-out",
             icon: markRaw(ZoomOut),
-            tooltip: `\u7E2E\u5C0F(${ctrl}+-)`,
+            tooltip: `縮小(${ctrl}+-)`,
             handler: () => uiService?.zoom(-0.1)
           });
           break;
@@ -3154,7 +3267,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "scale-to-original",
             icon: markRaw(ScaleToOriginal),
-            tooltip: `\u7F29\u653E\u5230\u5B9E\u9645\u5927\u5C0F(${ctrl}+1)`,
+            tooltip: `缩放到实际大小(${ctrl}+1)`,
             handler: () => uiService?.set("zoom", 1)
           });
           break;
@@ -3163,7 +3276,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "scale-to-fit",
             icon: markRaw(FullScreen),
-            tooltip: `\u7F29\u653E\u4EE5\u9002\u5E94(${ctrl}+0)`,
+            tooltip: `缩放以适应(${ctrl}+0)`,
             handler: async () => uiService?.set("zoom", await uiService.calcZoom())
           });
           break;
@@ -3172,7 +3285,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "rule",
             icon: markRaw(Memo),
-            tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
+            tooltip: showRule.value ? "隐藏标尺" : "显示标尺",
             handler: () => uiService?.set("showRule", !showRule.value)
           });
           break;
@@ -3181,7 +3294,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             type: "button",
             className: "guides",
             icon: markRaw(Grid),
-            tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
+            tooltip: showGuides.value ? "隐藏参考线" : "显示参考线",
             handler: () => uiService?.set("showGuides", !showGuides.value)
           });
           break;
@@ -3219,7 +3332,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$l, {
+              return openBlock(), createBlock(_sfc_main$n, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3231,11 +3344,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "m-editor-props-panel" };
+const _hoisted_1$c = { class: "m-editor-props-panel" };
 const __default__$h = defineComponent({
   name: "MEditorPropsPanel"
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...__default__$h,
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
@@ -3281,7 +3394,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     expose({ submit });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -3298,7 +3411,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "SearchInput",
   emits: ["search"],
   setup(__props, { emit }) {
@@ -3312,7 +3425,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         "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": unref(Search),
         onInput: filterTextChangeHandler
@@ -3321,17 +3434,71 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+
+const _sfc_main$j = {};
+
+const _hoisted_1$b = {
+  width: "16px",
+  height: "16px",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$6 = /*#__PURE__*/createElementVNode("g", {
+  fill: "#7C878E",
+  "fill-rule": "evenodd"
+}, [
+  /*#__PURE__*/createElementVNode("path", {
+    d: "M15.3,5.5 L8,0 L0.7,5.5 L8,11 L15.3,5.5 Z M8,2.5 L12,5.5 L8,8.5 L4,5.5 L8,2.5 Z",
+    "fill-rule": "nonzero"
+  }),
+  /*#__PURE__*/createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
+], -1);
+const _hoisted_3$3 = [
+  _hoisted_2$6
+];
+
+function _sfc_render$2(_ctx, _cache) {
+  return (openBlock(), 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 = {
+  width: "32px",
+  height: "32px",
+  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__*/createStaticVNode("<title>gsd-icon-line-Universal-code</title><desc>Created with Sketch.</desc><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>", 4);
+const _hoisted_6 = [
+  _hoisted_2$5
+];
+
+function _sfc_render$1(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$a, _hoisted_6))
+}
+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__ */ createTextVNode("\u786E\u8BA4");
-const _hoisted_3$2 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_2$4 = /* @__PURE__ */ createTextVNode("确认");
+const _hoisted_3$2 = /* @__PURE__ */ createTextVNode("关闭");
 const _hoisted_4$2 = {
   key: 1,
   class: "m-editor-content-bottom"
 };
-const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
+const _hoisted_5$1 = /* @__PURE__ */ createTextVNode("关闭");
 const __default__$g = defineComponent({
   name: "MEditorCodeDraftEditor"
 });
@@ -3346,7 +3513,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     language: null
   },
   emits: ["close", "saveAndClose"],
-  setup(__props, { emit }) {
+  setup(__props, { expose, emit }) {
     const props = __props;
     const services = inject("services");
     const codeContent = ref("");
@@ -3376,7 +3543,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         return;
       }
       services?.codeBlockService.setCodeDraft(props.id, codeValue);
-      tMagicMessage.success(`\u4EE3\u7801\u8349\u7A3F\u4FDD\u5B58\u6210\u529F ${datetimeFormatter(new Date())}`);
+      tMagicMessage.success(`代码草稿成功保存到本地 ${datetimeFormatter( new Date())}`);
     };
     const saveAndClose = () => {
       if (!codeEditor.value || !props.editable)
@@ -3387,19 +3554,20 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const close = async () => {
       const codeDraft = services?.codeBlockService.getCodeDraft(props.id);
       if (codeDraft) {
-        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 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");
       }
@@ -3410,11 +3578,15 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
         codeEditor.value.focus();
       }
     };
+    expose({
+      saveAndClose,
+      close
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["m-editor-wrapper", isFullScreen.value ? "fullScreen" : "normal"])
       }, [
-        createVNode(_sfc_main$q, {
+        createVNode(_sfc_main$s, {
           ref_key: "codeEditor",
           ref: codeEditor,
           class: "m-editor-container",
@@ -3430,7 +3602,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: toggleFullScreen
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              createTextVNode(toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
             ]),
             _: 1
           }),
@@ -3461,7 +3633,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             onClick: toggleFullScreen
           }, {
             default: withCtx(() => [
-              createTextVNode(toDisplayString(isFullScreen.value ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"), 1)
+              createTextVNode(toDisplayString(isFullScreen.value ? "退出全屏" : "全屏"), 1)
             ]),
             _: 1
           }),
@@ -3482,9 +3654,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$8 = { class: "code-name-wrapper" };
-const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "代码块名称", -1);
 const _hoisted_3$1 = { class: "code-name-wrapper" };
-const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "\u53C2\u6570", -1);
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("div", { class: "code-name-label" }, "参数", -1);
 const __default__$f = defineComponent({
   name: "MEditorFunctionEditor"
 });
@@ -3499,27 +3671,26 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     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"
             }
           ]
@@ -3537,13 +3708,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       items: [
         {
           type: "text",
-          label: "\u53C2\u6570\u540D",
+          label: "参数名",
           name: "name",
           width: 200
         },
         {
           type: "text",
-          label: "\u53C2\u6570\u6CE8\u91CA",
+          label: "参数注释",
           name: "tip",
           width: 200
         },
@@ -3554,11 +3725,6 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const codeName = ref("");
     const codeContent = ref("");
     const evalRes = ref(true);
-    provide("mForm", {
-      $emit: emit,
-      setField: () => {
-      }
-    });
     const tableModel = ref();
     watchEffect(() => {
       codeName.value = props.name;
@@ -3592,7 +3758,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           content: codeValue2,
           params: tableModel.value?.params || []
         });
-        tMagicMessage.success("\u4EE3\u7801\u4FDD\u5B58\u6210\u529F");
+        tMagicMessage.success("代码成功保存到本地");
         services?.codeBlockService.removeCodeDraft(props.id);
       }
     };
@@ -3605,6 +3771,10 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     const close = () => {
       services?.codeBlockService.setCodeEditorShowStatus(false);
     };
+    const codeDraftEditor = ref();
+    expose({
+      codeDraftEditor
+    });
     return (_ctx, _cache) => {
       const _component_m_form_table = resolveComponent("m-form-table");
       return openBlock(), createBlock(unref(TMagicCard), { shadow: "never" }, {
@@ -3633,6 +3803,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         ]),
         default: withCtx(() => [
           createVNode(_sfc_main$h, {
+            ref_key: "codeDraftEditor",
+            ref: codeDraftEditor,
             id: __props.id,
             content: codeContent.value,
             editable: __props.editable,
@@ -3693,19 +3865,24 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       });
       currentTitle.value = state.codeList[0]?.name || "";
     });
+    const functionEditor = ref();
+    const handleClose = async () => {
+      await functionEditor.value?.codeDraftEditor?.close();
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(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: unref(size)
+        "close-on-click-modal": true,
+        size: unref(size),
+        "before-close": handleClose
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$o, {
+          createVNode(_sfc_main$q, {
             left: left.value,
             "onUpdate:left": _cache[0] || (_cache[0] = ($event) => left.value = $event),
             "min-left": 45,
@@ -3716,6 +3893,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id: unref(id) }),
                 codeConfig.value ? (openBlock(), createBlock(_sfc_main$g, {
                   key: 0,
+                  ref_key: "functionEditor",
+                  ref: functionEditor,
                   id: unref(id),
                   name: codeConfig.value.name,
                   content: codeConfig.value.content,
@@ -3736,12 +3915,11 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 });
 
 const _hoisted_1$6 = { class: "code-header-wrapper" };
-const _hoisted_2$2 = /* @__PURE__ */ createTextVNode("\u65B0\u589E");
+const _hoisted_2$2 = /* @__PURE__ */ 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 = defineComponent({
@@ -3757,28 +3935,32 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const props = __props;
     const { codeBlockService, depService, editorService } = inject("services") || {};
     const codeList = 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 = computed(() => codeList.value.map((item) => item.id));
     const editable = computed(() => codeBlockService?.getEditStatus());
     const isShowCodeBlockEditor = computed(() => codeBlockService?.getCodeEditorShowStatus() || false);
     const createCodeBlock = async () => {
       if (!codeBlockService) {
-        tMagicMessage.error("\u65B0\u589E\u4EE3\u7801\u5757\u5931\u8D25");
+        tMagicMessage.error("新增代码块失败");
         return;
       }
       const codeConfig = {
-        name: "\u4EE3\u7801\u5757",
+        name: "代码块",
         content: `({app, params}) => {
   // place your code here
 }`,
@@ -3801,7 +3983,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         if (typeof props.customError === "function") {
           props.customError(key, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
         } else {
-          tMagicMessage.error("\u4EE3\u7801\u5757\u5220\u9664\u5931\u8D25");
+          tMagicMessage.error("代码块删除失败");
         }
       }
     };
@@ -3832,7 +4014,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
             createElementVNode("div", _hoisted_1$6, [
-              createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
               unref(editable) ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -3852,8 +4034,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             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": unref(expandedKeys),
             "expand-on-click-node": false,
             data: unref(codeList),
             "highlight-current": true,
@@ -3866,15 +4048,25 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 class: "list-container"
               }, [
                 createElementVNode("div", _hoisted_4, [
-                  createElementVNode("span", _hoisted_5, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1),
-                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                  data.type === "code" ? (openBlock(), createBlock(CodeIcon, {
+                    key: 0,
+                    class: "codeIcon"
+                  })) : createCommentVNode("", true),
+                  data.type === "node" ? (openBlock(), createBlock(AppManageIcon, {
+                    key: 1,
+                    class: "compIcon"
+                  })) : createCommentVNode("", true),
+                  createElementVNode("span", {
+                    class: normalizeClass(["code-name", { code: data.type === "code", hook: data.type === "key" }])
+                  }, toDisplayString(data.name) + "（" + toDisplayString(data.id) + "）", 3),
+                  data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_5, [
                     createVNode(unref(TMagicTooltip), {
                       effect: "dark",
-                      content: unref(editable) ? "\u7F16\u8F91" : "\u67E5\u770B",
+                      content: unref(editable) ? "编辑" : "查看",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$v, {
+                        createVNode(_sfc_main$w, {
                           icon: unref(editable) ? unref(Edit) : unref(View),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3885,11 +4077,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     unref(editable) ? (openBlock(), createBlock(unref(TMagicTooltip), {
                       key: 0,
                       effect: "dark",
-                      content: "\u5220\u9664",
+                      content: "删除",
                       placement: "bottom"
                     }, {
                       default: withCtx(() => [
-                        createVNode(_sfc_main$v, {
+                        createVNode(_sfc_main$w, {
                           icon: unref(Close),
                           class: "edit-icon",
                           onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3906,7 +4098,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ], 8, _hoisted_3)
             ]),
             _: 3
-          }, 8, ["data"]),
+          }, 8, ["default-expanded-keys", "data"]),
           unref(isShowCodeBlockEditor) ? (openBlock(), createBlock(_sfc_main$f, {
             key: 0,
             paramsColConfig: __props.paramsColConfig
@@ -4004,7 +4196,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             "model-value": unref(collapseValue)
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -4012,7 +4204,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$v, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$w, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -4027,7 +4219,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$v, {
+                            createVNode(_sfc_main$w, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -4150,7 +4342,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$l, {
+            return openBlock(), createBlock(_sfc_main$n, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -4208,7 +4400,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       if (node.value?.type === "tabs") {
         return [
           {
-            text: "\u6807\u7B7E\u9875",
+            text: "标签页",
             type: "button",
             icon: Files,
             handler: () => {
@@ -4238,14 +4430,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     const menuData = computed(() => [
       {
         type: "button",
-        text: "\u65B0\u589E",
+        text: "新增",
         icon: markRaw(Plus),
         display: () => node.value?.items,
         items: getSubMenuData.value
       },
       {
         type: "button",
-        text: "\u590D\u5236",
+        text: "复制",
         icon: markRaw(CopyDocument),
         display: () => !isRoot.value,
         handler: () => {
@@ -4254,7 +4446,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u5220\u9664",
+        text: "删除",
         icon: markRaw(Delete),
         display: () => !isRoot.value && !isPage.value,
         handler: () => {
@@ -4318,7 +4510,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     const highlightNode = 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);
@@ -4329,7 +4521,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     const highlight = (data) => {
       if (!data?.id) {
-        throw new Error("\u6CA1\u6709id");
+        throw new Error("没有id");
       }
       editorService?.highlight(data);
       editorService?.get("stage")?.highlight(data.id);
@@ -4342,7 +4534,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         return false;
       if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
         return false;
-      if (!data || !data.type)
+      if (!data?.type)
         return false;
       if (["prev", "next"].includes(type))
         return true;
@@ -4481,14 +4673,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$i, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$k, { onSearch: filterTextChangeHandler }),
           unref(values).length ? (openBlock(), createBlock(unref(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,
@@ -4550,7 +4742,7 @@ const __default__$8 = defineComponent({
 const _sfc_main$9 = /* @__PURE__ */ 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 }) {
@@ -4563,7 +4755,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           $key: "component-list",
           type: "component",
           icon: Coin,
-          text: "\u7EC4\u4EF6",
+          text: "组件",
           component: _sfc_main$d,
           slots: {}
         },
@@ -4571,7 +4763,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           $key: "layer",
           type: "component",
           icon: Files,
-          text: "\u5DF2\u9009\u7EC4\u4EF6",
+          text: "已选组件",
           props: {
             layerContentMenu: props.layerContentMenu
           },
@@ -4582,7 +4774,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           $key: "code-block",
           type: "component",
           icon: EditPen,
-          text: "\u4EE3\u7801\u7F16\u8F91",
+          text: "代码编辑",
           component: _sfc_main$e,
           slots: {}
         }
@@ -4618,7 +4810,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 (openBlock(), createElementBlock("div", {
                   key: config.text
                 }, [
-                  config.icon ? (openBlock(), createBlock(_sfc_main$v, {
+                  config.icon ? (openBlock(), createBlock(_sfc_main$w, {
                     key: 0,
                     icon: config.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4820,7 +5012,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         return;
       const root = toRaw(editorService.get("root"));
       if (!root)
-        throw new Error("root \u4E0D\u80FD\u4E3A\u7A7A");
+        throw new Error("root 不能为空");
       const pageConfig = {
         type: NodeType.PAGE,
         name: generatePageNameByApp(root)
@@ -4839,14 +5031,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$v, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$w, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$v, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$w, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4862,7 +5054,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$v, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$w, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -4934,18 +5126,18 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$l, {
+                      createVNode(_sfc_main$n, {
                         data: {
                           type: "button",
-                          text: "\u590D\u5236",
+                          text: "复制",
                           icon: unref(DocumentCopy),
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$l, {
+                      createVNode(_sfc_main$n, {
                         data: {
                           type: "button",
-                          text: "\u5220\u9664",
+                          text: "删除",
                           icon: unref(Delete),
                           handler: () => remove(item)
                         }
@@ -5310,7 +5502,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const menuData = computed(() => [
       {
         type: "button",
-        text: "\u6C34\u5E73\u5C45\u4E2D",
+        text: "水平居中",
         display: () => canCenter.value,
         handler: () => {
           if (!nodes.value)
@@ -5320,7 +5512,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u590D\u5236",
+        text: "复制",
         icon: markRaw(CopyDocument),
         handler: () => {
           nodes.value && editorService?.copy(nodes.value);
@@ -5329,7 +5521,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u7C98\u8D34",
+        text: "粘贴",
         icon: markRaw(DocumentCopy),
         display: () => canPaste.value,
         handler: () => {
@@ -5353,7 +5545,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u4E0A\u79FB\u4E00\u5C42",
+        text: "上移一层",
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
@@ -5362,7 +5554,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u4E0B\u79FB\u4E00\u5C42",
+        text: "下移一层",
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
@@ -5371,7 +5563,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u7F6E\u9876",
+        text: "置顶",
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService?.moveLayer(LayerOffset.TOP);
@@ -5379,7 +5571,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u7F6E\u5E95",
+        text: "置底",
         display: () => !isPage(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService?.moveLayer(LayerOffset.BOTTOM);
@@ -5392,7 +5584,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u5220\u9664",
+        text: "删除",
         icon: Delete,
         display: () => !isPage(node.value),
         handler: () => {
@@ -5405,7 +5597,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       },
       {
         type: "button",
-        text: "\u6E05\u7A7A\u53C2\u8003\u7EBF",
+        text: "清空参考线",
         handler: () => {
           editorService?.get("stage")?.clearGuides();
         }
@@ -5765,14 +5957,30 @@ class CodeBlock extends BaseService {
       "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;
@@ -5781,10 +5989,16 @@ class CodeBlock extends BaseService {
       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) {
@@ -5797,60 +6011,133 @@ class CodeBlock extends BaseService {
     };
     this.emit("addOrUpdate", id, codeDsl[id]);
   }
+  /**
+   * 根据代码块id数组获取代码dsl
+   * @param {string[]} ids 代码块id数组
+   * @returns {CodeBlockDSL}
+   */
   getCodeDslByIds(ids) {
     const codeDsl2 = this.getCodeDsl();
     return 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)
@@ -5860,6 +6147,10 @@ class CodeBlock extends BaseService {
       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();
@@ -5891,6 +6182,9 @@ class ComponentList extends BaseService {
   constructor() {
     super([]);
   }
+  /**
+   * @param componentGroupList 组件列表配置
+   */
   setList(componentGroupList) {
     this.state.list = componentGroupList;
   }
@@ -5909,10 +6203,27 @@ class ComponentList extends BaseService {
 const componentListService = new ComponentList();
 
 class Target extends EventEmitter {
+  /**
+   * 如何识别目标
+   */
   isTarget;
+  /**
+   * 目标id，不可重复
+   * 例如目标是代码块，则为代码块id
+   */
   id;
+  /**
+   * 目标名称，用于显示在依赖列表中
+   */
   name;
+  /**
+   * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
+   */
   type = "default";
+  /**
+   * 依赖详情
+   * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
+   */
   deps = reactive({});
   constructor(options) {
     super();
@@ -5923,6 +6234,11 @@ class Target extends EventEmitter {
       this.type = options.type;
     }
   }
+  /**
+   * 更新依赖
+   * @param node 节点配置
+   * @param key 哪个key配置了这个目标的id
+   */
   updateDep(node, key) {
     const dep = this.deps[node.id] || {
       name: node.name,
@@ -5937,6 +6253,12 @@ class Target extends EventEmitter {
     }
     this.emit("change");
   }
+  /**
+   * 删除依赖
+   * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖
+   * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key
+   * @returns void
+   */
   removeDep(node, key) {
     if (!node) {
       Object.keys(this.deps).forEach((depKey) => {
@@ -5959,6 +6281,12 @@ class Target extends EventEmitter {
     }
     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));
@@ -5969,15 +6297,29 @@ class Target extends EventEmitter {
 }
 class Watcher extends EventEmitter {
   targets = 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) {
@@ -5986,6 +6328,11 @@ class Watcher extends EventEmitter {
       }
     }
   }
+  /**
+   * 判断是否存在指定id的target
+   * @param id target id
+   * @returns boolean
+   */
   hasTarget(id) {
     const allTargets = Object.values(this.targets);
     for (const targets of allTargets) {
@@ -5995,6 +6342,10 @@ class Watcher extends EventEmitter {
     }
     return false;
   }
+  /**
+   * 删除指定id的target
+   * @param id target id
+   */
   removeTarget(id) {
     const allTargets = Object.values(this.targets);
     for (const targets of allTargets) {
@@ -6005,6 +6356,11 @@ class Watcher extends EventEmitter {
     }
     this.emit("remove-target");
   }
+  /**
+   * 删除指定分类的所有target
+   * @param type 分类
+   * @returns void
+   */
   removeTargets(type = "default") {
     const targets = this.targets[type];
     if (!targets)
@@ -6015,11 +6371,19 @@ class Watcher extends EventEmitter {
     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) => {
@@ -6030,6 +6394,10 @@ class Watcher extends EventEmitter {
       });
     });
   }
+  /**
+   * 清除依赖
+   * @param nodes 需要清除依赖的节点
+   */
   clear(nodes) {
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
@@ -6129,50 +6497,64 @@ class Events extends BaseService {
 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]
   },
@@ -6376,11 +6758,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, depSe
 const _sfc_main = 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"],
@@ -6420,14 +6802,6 @@ const _sfc_main = defineComponent({
   }
 });
 
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_TMagicNavMenu = resolveComponent("TMagicNavMenu");
   const _component_Sidebar = resolveComponent("Sidebar");
@@ -6518,22 +6892,24 @@ const Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]])
 
 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);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$u as CodeSelect, _sfc_main$t as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$s as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$v as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$o as LayoutContainer, _sfc_main$j as PropsPanel, _sfc_main$q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$l as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, depService, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, _sfc_main$x as CodeSelect, _sfc_main$v as CodeSelectCol, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, _sfc_main$u as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$w as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$q as LayoutContainer, _sfc_main$l as PropsPanel, _sfc_main$s as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$n as ToolButton, V_GUIDE_LINE_STORAGE_KEY, beforePaste, change2Fixed, codeBlockService, debug, index as default, depService, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map