@tmagic/editor 1.3.0-beta.0 → 1.3.0-beta.2

package/dist/tmagic-editor.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, onBeforeUnmount, toHandlers, provide } from 'vue';
-import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
+import { defineComponent, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, createTextVNode, createCommentVNode, toRaw, resolveDynamicComponent, nextTick, mergeProps, toDisplayString, renderList, watchEffect, withModifiers, renderSlot, createSlots, normalizeProps, markRaw, getCurrentInstance, withDirectives, vShow, createStaticVNode, Transition, onBeforeUnmount, toHandlers, provide } from 'vue';
+import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, Aim, CopyDocument, DocumentCopy, Files, Hide, Goods, List, EditPen, Top, Bottom, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, map, has, difference, union, pick, keys } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
@@ -8,16 +8,16 @@ import { HookType, NodeType, ActionType } from '@tmagic/schema';
 import { MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 import Gesto from 'gesto';
-import { guid, isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName, isObject as isObject$1, getNodes } from '@tmagic/utils';
-import StageCore, { GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
+import { guid, isPop, getNodePath, isNumber, isPage, toLine, removeClassNameByClassName, getNodes, isObject as isObject$1 } from '@tmagic/utils';
+import StageCore, { GuidesType, StageDragStatus, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import KeyController from 'keycon';
 
-const _hoisted_1$t = {
+const _hoisted_1$w = {
   class: /* @__PURE__ */ normalizeClass(`magic-code-editor`)
 };
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeEditor"
   },
@@ -164,7 +164,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
         (openBlock(), createBlock(Teleport, {
           to: "body",
           disabled: !fullScreen.value
@@ -192,7 +192,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCode"
   },
@@ -216,7 +216,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
       emit("change", v);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$M, {
+      return openBlock(), createBlock(_sfc_main$Q, {
         height: _ctx.config.height,
         "init-values": _ctx.model[_ctx.name],
         language: _ctx.config.language,
@@ -236,7 +236,7 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeLink"
   },
@@ -315,7 +315,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelect"
   },
@@ -387,11 +387,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$s = { style: { "display": "flex", "margin-bottom": "10px" } };
-const _hoisted_2$k = { style: { "flex": "1" } };
-const _hoisted_3$8 = { style: { "flex": "1" } };
-const _hoisted_4$4 = { class: "dialog-footer" };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _hoisted_1$v = { style: { "display": "flex", "margin-bottom": "10px" } };
+const _hoisted_2$n = { style: { "flex": "1" } };
+const _hoisted_3$a = { style: { "flex": "1" } };
+const _hoisted_4$6 = { class: "dialog-footer" };
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockEditor"
   },
@@ -399,7 +399,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   props: {
     content: {},
     disabled: { type: Boolean },
-    isDataSource: { type: Boolean }
+    isDataSource: { type: Boolean },
+    dataSourceType: {}
   },
   emits: ["submit"],
   setup(__props, { expose: __expose, emit }) {
@@ -459,7 +460,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     const functionConfig = computed(() => [
       {
         text: "名称",
-        name: "name"
+        name: "name",
+        rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
       },
       {
         text: "描述",
@@ -469,10 +471,17 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         text: "执行时机",
         name: "timing",
         type: "select",
-        options: [
-          { text: "初始化前", value: "beforeInit" },
-          { text: "初始化后", value: "afterInit" }
-        ],
+        options: () => {
+          const options = [
+            { text: "初始化前", value: "beforeInit" },
+            { text: "初始化后", value: "afterInit" }
+          ];
+          if (props.dataSourceType !== "base") {
+            options.push({ text: "请求前", value: "beforeRequest" });
+            options.push({ text: "请求后", value: "afterRequest" });
+          }
+          return options;
+        },
         display: () => props.isDataSource
       },
       {
@@ -601,7 +610,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           fullscreen: ""
         }, {
           footer: withCtx(() => [
-            createElementVNode("span", _hoisted_4$4, [
+            createElementVNode("span", _hoisted_4$6, [
               createVNode(unref(TMagicButton), {
                 size: "small",
                 onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -624,8 +633,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$s, [
-              createElementVNode("div", _hoisted_2$k, [
+            createElementVNode("div", _hoisted_1$v, [
+              createElementVNode("div", _hoisted_2$n, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "info"
@@ -636,7 +645,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                   _: 1
                 })
               ]),
-              createElementVNode("div", _hoisted_3$8, [
+              createElementVNode("div", _hoisted_3$a, [
                 createVNode(unref(TMagicTag), {
                   size: "small",
                   type: "success"
@@ -648,7 +657,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
                 })
               ])
             ]),
-            difVisible.value ? (openBlock(), createBlock(_sfc_main$M, {
+            difVisible.value ? (openBlock(), createBlock(_sfc_main$Q, {
               key: 0,
               ref_key: "magicVsEditor",
               ref: magicVsEditor,
@@ -702,6 +711,15 @@ const HttpFormConfig = [
     type: "switch",
     defaultValue: true
   },
+  {
+    name: "responseOptions",
+    items: [
+      {
+        name: "dataPath",
+        text: "数据路径"
+      }
+    ]
+  },
   {
     type: "fieldset",
     name: "options",
@@ -768,6 +786,18 @@ const fillConfig$1 = (config) => [
         defaultValue: () => []
       }
     ]
+  },
+  {
+    type: "panel",
+    title: "事件配置",
+    display: false,
+    items: [
+      {
+        name: "events",
+        src: "datasource",
+        type: "event-select"
+      }
+    ]
   }
 ];
 const getFormConfig = (type, configs) => {
@@ -948,7 +978,8 @@ class DataSource extends BaseService {
     dataSources: [],
     editable: true,
     configs: {},
-    values: {}
+    values: {},
+    events: {}
   });
   set(name, value) {
     this.state[name] = value;
@@ -968,6 +999,12 @@ class DataSource extends BaseService {
   setFormValue(type, value) {
     this.get("values")[type] = value;
   }
+  getFormEvent(type = "base") {
+    return this.get("events")[type] || [];
+  }
+  setFormEvent(type, value = []) {
+    this.get("events")[type] = value;
+  }
   add(config) {
     const newConfig = {
       ...config,
@@ -1184,6 +1221,7 @@ const eventTabConfig = {
   items: [
     {
       name: "events",
+      src: "component",
       type: "event-select"
     }
   ]
@@ -1254,21 +1292,28 @@ const displayTabConfig = {
               items: [
                 {
                   name: "value",
-                  display: (vm, { model }) => !["between", "not_between", "is", "not"].includes(model.op)
-                },
-                {
-                  name: "value",
-                  type: "select",
+                  type: (mForm, { model }) => {
+                    const [id, field] = model.field;
+                    const ds = dataSourceService.getDataSourceById(id);
+                    const type = ds?.fields.find((f) => f.name === field)?.type;
+                    if (type === "number") {
+                      return "number";
+                    }
+                    if (type === "boolean") {
+                      return "select";
+                    }
+                    return "text";
+                  },
                   options: [
                     { text: "true", value: true },
                     { text: "false", value: false }
                   ],
-                  display: (vm, { model }) => ["is", "not"].includes(model.op)
+                  display: (vm, { model }) => !["between", "not_between"].includes(model.op)
                 },
                 {
                   name: "range",
                   type: "number-range",
-                  display: (vm, { model }) => ["between", "not_between"].includes(model.op) && !["is", "not"].includes(model.op)
+                  display: (vm, { model }) => ["between", "not_between"].includes(model.op)
                 }
               ]
             }
@@ -2748,7 +2793,7 @@ const getDefaultConfig = async (addNode, parentNode) => {
   return newNode;
 };
 
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeParams"
   },
@@ -2797,8 +2842,8 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$r = ["src"];
-const _sfc_main$G = /* @__PURE__ */ defineComponent({
+const _hoisted_1$u = ["src"];
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
   },
@@ -2821,7 +2866,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -2898,9 +2943,9 @@ const useCodeBlockEdit = (codeBlockService) => {
   };
 };
 
-const _hoisted_1$q = { class: "m-fields-code-select-col" };
-const _hoisted_2$j = { class: "code-select-container" };
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const _hoisted_1$t = { class: "m-fields-code-select-col" };
+const _hoisted_2$m = { class: "code-select-container" };
+const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeSelectCol"
   },
@@ -2974,22 +3019,22 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$q, [
-        createElementVNode("div", _hoisted_2$j, [
+      return openBlock(), createElementBlock("div", _hoisted_1$t, [
+        createElementVNode("div", _hoisted_2$m, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: selectConfig,
             model: _ctx.model,
             onChange: onParamsChangeHandler
           }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$G, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: _cache[0] || (_cache[0] = ($event) => unref(editCode)(_ctx.model[_ctx.name]))
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$H, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -2997,7 +3042,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onParamsChangeHandler
         }, null, 8, ["model", "size", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$I, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3010,9 +3055,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = { class: "m-editor-data-source-fields" };
-const _hoisted_2$i = { class: "m-editor-data-source-fields-footer" };
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _hoisted_1$s = { class: "m-editor-data-source-fields" };
+const _hoisted_2$l = { class: "m-editor-data-source-fields-footer" };
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceFields"
   },
@@ -3147,7 +3192,18 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       },
       {
         name: "defaultValue",
-        text: "默认值"
+        text: "默认值",
+        type: (mForm, { model }) => {
+          if (model.type === "number")
+            return "number";
+          if (model.type === "boolean")
+            return "select";
+          return "text";
+        },
+        options: [
+          { text: "true", value: true },
+          { text: "false", value: false }
+        ]
       },
       {
         name: "enable",
@@ -3163,12 +3219,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+      return openBlock(), createElementBlock("div", _hoisted_1$s, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: fieldColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$i, [
+        createElementVNode("div", _hoisted_2$l, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3199,7 +3255,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "DataSourceFieldSelect",
   props: {
     config: {},
@@ -3246,10 +3302,10 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
-const _hoisted_2$h = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
-const _hoisted_3$7 = { class: "el-input__inner" };
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$r = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_2$k = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
+const _hoisted_3$9 = { class: "el-input__inner" };
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceInput"
   },
@@ -3438,12 +3494,12 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         }
       ), {
         suffix: withCtx(() => [
-          createVNode(_sfc_main$G, { icon: unref(Coin) }, null, 8, ["icon"])
+          createVNode(_sfc_main$K, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$o, [
+          createElementVNode("div", _hoisted_1$r, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
-            createElementVNode("span", _hoisted_2$h, toDisplayString(item.value), 1)
+            createElementVNode("span", _hoisted_2$k, toDisplayString(item.value), 1)
           ])
         ]),
         _: 1
@@ -3455,7 +3511,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
         }, [
-          createElementVNode("div", _hoisted_3$7, [
+          createElementVNode("div", _hoisted_3$9, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayState.value, (item, index) => {
               return openBlock(), createElementBlock(Fragment, null, [
                 item.type === "text" ? (openBlock(), createElementBlock("span", {
@@ -3473,7 +3529,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 }, 1032, ["size"])) : createCommentVNode("", true)
               ], 64);
             }), 256)),
-            createVNode(_sfc_main$G, {
+            createVNode(_sfc_main$K, {
               class: "tmagic-data-source-input-icon",
               icon: unref(Coin)
             }, null, 8, ["icon"])
@@ -3556,9 +3612,9 @@ const useDataSourceMethod = () => {
   };
 };
 
-const _hoisted_1$n = { class: "m-editor-data-source-methods" };
-const _hoisted_2$g = { class: "m-editor-data-source-methods-footer" };
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$q = { class: "m-editor-data-source-methods" };
+const _hoisted_2$j = { class: "m-editor-data-source-methods-footer" };
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethods"
   },
@@ -3627,12 +3683,12 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       emit("change", props.model[props.name]);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$q, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: methodColumns
         }, null, 8, ["data"]),
-        createElementVNode("div", _hoisted_2$g, [
+        createElementVNode("div", _hoisted_2$j, [
           createVNode(unref(TMagicButton), {
             size: "small",
             type: "primary",
@@ -3646,23 +3702,24 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             _: 1
           }, 8, ["disabled"])
         ]),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$I, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 0,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
           disabled: _ctx.disabled,
           content: unref(codeConfig),
           "is-data-source": true,
+          "data-source-type": _ctx.model.type,
           onSubmit: submitCodeHandler
-        }, null, 8, ["disabled", "content"])) : createCommentVNode("", true)
+        }, null, 8, ["disabled", "content", "data-source-type"])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const _hoisted_1$m = { class: "m-fields-data-source-method-select" };
-const _hoisted_2$f = { class: "data-source-method-select-container" };
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _hoisted_1$p = { class: "m-fields-data-source-method-select" };
+const _hoisted_2$i = { class: "data-source-method-select-container" };
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceMethodSelect"
   },
@@ -3740,22 +3797,22 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$m, [
-        createElementVNode("div", _hoisted_2$f, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
+        createElementVNode("div", _hoisted_2$i, [
           createVNode(_component_m_form_container, {
             class: "select",
             config: cascaderConfig,
             model: _ctx.model,
             onChange: onChangeHandler
           }, null, 8, ["model"]),
-          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$G, {
+          _ctx.model[_ctx.name] ? (openBlock(), createBlock(_sfc_main$K, {
             key: 0,
             class: "icon",
             icon: !_ctx.disabled ? unref(Edit) : unref(View),
             onClick: editCodeHandler
           }, null, 8, ["icon"])) : createCommentVNode("", true)
         ]),
-        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$H, {
+        paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$L, {
           key: 0,
           name: "params",
           model: _ctx.model,
@@ -3764,7 +3821,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
           "params-config": paramsConfig.value,
           onChange: onChangeHandler
         }, null, 8, ["model", "size", "disabled", "params-config"])) : createCommentVNode("", true),
-        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$I, {
+        unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
           key: 1,
           ref_key: "codeBlockEditor",
           ref: codeBlockEditor,
@@ -3777,7 +3834,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceSelect"
   },
@@ -3832,12 +3889,12 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-fields-event-select" };
-const _hoisted_2$e = {
+const _hoisted_1$o = { class: "m-fields-event-select" };
+const _hoisted_2$h = {
   key: 1,
   class: "fullWidth"
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorEventSelect"
   },
@@ -3863,10 +3920,20 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         text: "事件",
         type: "select",
         labelWidth: "40px",
-        options: (mForm, { formValue }) => services?.eventsService.getEvent(formValue.type).map((option) => ({
-          text: option.label,
-          value: option.value
-        }))
+        options: (mForm, { formValue }) => {
+          let events = [];
+          if (!services)
+            return events;
+          if (props.config.src === "component") {
+            events = services.eventsService.getEvent(formValue.type);
+          } else if (props.config.src === "datasource") {
+            events = services.dataSourceService.getFormEvent(formValue.type);
+          }
+          return events.map((option) => ({
+            text: option.label,
+            value: option.value
+          }));
+        }
       };
       return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
     });
@@ -4027,7 +4094,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -4037,7 +4104,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
           model: _ctx.model,
           config: tableConfig.value,
           onChange: onChangeHandler
-        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$e, [
+        }, null, 8, ["size", "disabled", "model", "config"])) : (openBlock(), createElementBlock("div", _hoisted_2$h, [
           createVNode(unref(TMagicButton), {
             class: "create-button",
             type: "primary",
@@ -4086,9 +4153,9 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-key-value" };
-const _hoisted_2$d = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_1$n = { class: "m-fields-key-value" };
+const _hoisted_2$g = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorKeyValue"
   },
@@ -4133,7 +4200,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$n, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -4147,7 +4214,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               size: _ctx.size,
               onChange: keyChangeHandler
             }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-            _hoisted_2$d,
+            _hoisted_2$g,
             createVNode(unref(TMagicInput), {
               placeholder: "value",
               modelValue: records.value[index][1],
@@ -4186,12 +4253,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$j = {
+const _hoisted_1$m = {
   key: 1,
   class: "m-fields-ui-select",
   style: { "display": "flex" }
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
   },
@@ -4280,7 +4347,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon", "disabled", "size"])
-      ])) : (openBlock(), createElementBlock("div", _hoisted_1$j, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$m, [
         val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(TMagicTooltip), {
             content: "清除",
@@ -4349,7 +4416,35 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const useGetSo = (target, emit) => {
+  let getso;
+  const isDraging = ref(false);
+  onMounted(() => {
+    if (!target.value)
+      return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true
+    }).on("drag", (e) => {
+      if (!target.value)
+        return;
+      emit("change", e);
+    }).on("dragStart", () => {
+      isDraging.value = true;
+    }).on("dragEnd", () => {
+      isDraging.value = false;
+    });
+  });
+  onUnmounted(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+  return {
+    isDraging
+  };
+};
+
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorResizer"
   },
@@ -4357,33 +4452,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   emits: ["change"],
   setup(__props, { emit }) {
     const target = ref();
-    const isDraging = ref(false);
-    let getso;
-    onMounted(() => {
-      if (!target.value)
-        return;
-      getso = new Gesto(target.value, {
-        container: window,
-        pinchOutside: true
-      }).on("drag", (e) => {
-        if (!target.value)
-          return;
-        emit("change", e.deltaX);
-      }).on("dragStart", () => {
-        isDraging.value = true;
-      }).on("dragEnd", () => {
-        isDraging.value = false;
-      });
-    });
-    onUnmounted(() => {
-      getso?.unset();
-      isDraging.value = false;
-    });
+    const { isDraging } = useGetSo(target, emit);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("span", {
         ref_key: "target",
         ref: target,
-        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
+        class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": unref(isDraging) }])
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -4391,7 +4465,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayout"
   },
@@ -4458,7 +4532,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
       resizerObserver.disconnect();
     });
     const center = ref(0);
-    const changeLeft = (deltaX) => {
+    const changeLeft = ({ deltaX }) => {
       if (typeof props.left === "undefined")
         return;
       let left = Math.max(props.left + deltaX, props.minLeft) || 0;
@@ -4474,7 +4548,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         right: columnWidth.right
       });
     };
-    const changeRight = (deltaX) => {
+    const changeRight = ({ deltaX }) => {
       if (typeof props.right === "undefined")
         return;
       let right = Math.max(props.right - deltaX, props.minRight) || 0;
@@ -4503,7 +4577,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$v, { onChange: changeLeft })
+          createVNode(_sfc_main$z, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -4512,7 +4586,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         hasRight.value && _ctx.$slots.right ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$v, { onChange: changeRight }),
+          createVNode(_sfc_main$z, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
             style: normalizeStyle(`width: ${_ctx.right}px`)
@@ -4525,10 +4599,10 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$i = { class: "m-editor-empty-panel" };
-const _hoisted_2$c = { class: "m-editor-empty-content" };
-const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _hoisted_1$l = { class: "m-editor-empty-panel" };
+const _hoisted_2$f = { class: "m-editor-empty-content" };
+const _hoisted_3$8 = /* @__PURE__ */ createElementVNode("p", null, "新增页面", -1);
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAddPageBox"
   },
@@ -4548,16 +4622,16 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$i, [
-        createElementVNode("div", _hoisted_2$c, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+        createElementVNode("div", _hoisted_2$f, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$G, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
-            _hoisted_3$6
+            _hoisted_3$8
           ])
         ])
       ]);
@@ -4569,7 +4643,7 @@ const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFramework"
   },
@@ -4646,13 +4720,13 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "nav"),
         renderSlot(_ctx.$slots, "content-before"),
         showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-          createVNode(_sfc_main$M, {
+          createVNode(_sfc_main$Q, {
             class: "m-editor-content",
             "init-values": root.value,
             options: unref(codeOptions),
             onSave: saveCode
           }, null, 8, ["init-values", "options"])
-        ]) : (openBlock(), createBlock(_sfc_main$u, {
+        ]) : (openBlock(), createBlock(_sfc_main$y, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -4671,7 +4745,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             pageLength.value > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$t)
+              createVNode(_sfc_main$x)
             ])
           ]),
           _: 2
@@ -4696,12 +4770,12 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$h = {
+const _hoisted_1$k = {
   key: 1,
   class: "menu-item-text"
 };
-const _hoisted_2$b = { class: "el-dropdown-link menubar-menu-button" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _hoisted_2$e = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorToolButton"
   },
@@ -4780,7 +4854,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         _ctx.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: _ctx.data.direction || "vertical"
-        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$h, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$k, toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           _ctx.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -4794,7 +4868,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
                 disabled: disabled.value
               }, {
                 default: withCtx(() => [
-                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$G, {
+                  _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
                     key: 0,
                     icon: _ctx.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -4808,17 +4882,18 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             key: 1,
             size: "small",
             text: "",
-            disabled: disabled.value
+            disabled: disabled.value,
+            title: _ctx.data.text
           }, {
             default: withCtx(() => [
-              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$G, {
+              _ctx.data.icon ? (openBlock(), createBlock(_sfc_main$K, {
                 key: 0,
                 icon: _ctx.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
               createElementVNode("span", null, toDisplayString(_ctx.data.text), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]))
+          }, 8, ["disabled", "title"]))
         ], 64)) : _ctx.data.type === "dropdown" ? (openBlock(), createBlock(unref(TMagicDropdown), {
           key: 3,
           trigger: "click",
@@ -4844,7 +4919,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$b, [
+            createElementVNode("span", _hoisted_2$e, [
               createTextVNode(toDisplayString(_ctx.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -4861,7 +4936,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorNavMenu"
   },
@@ -5023,7 +5098,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(buttons.value[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$r, {
+              return openBlock(), createBlock(_sfc_main$v, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -5035,8 +5110,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$g = { class: "m-editor-props-panel" };
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$j = { class: "m-editor-props-panel" };
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorPropsPanel"
   },
@@ -5089,7 +5164,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
     __expose({ configForm, submit });
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$j, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(unref(MForm), {
           ref_key: "configForm",
@@ -5109,7 +5184,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSearchInput"
   },
@@ -5144,8 +5219,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
-const _hoisted_2$a = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
+const _hoisted_2$d = /* @__PURE__ */ createElementVNode("g", {
   fill: "#7C878E",
   "fill-rule": "evenodd"
 }, [
@@ -5155,50 +5230,50 @@ const _hoisted_2$a = /* @__PURE__ */ createElementVNode("g", {
   }),
   /* @__PURE__ */ createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
 ], -1);
-const _hoisted_3$5 = [
-  _hoisted_2$a
+const _hoisted_3$7 = [
+  _hoisted_2$d
 ];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorAppManageIcon"
   },
   __name: "AppManageIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$f, _hoisted_3$5);
+      return openBlock(), createElementBlock("svg", _hoisted_1$i, _hoisted_3$7);
     };
   }
 });
 
-const _hoisted_1$e = {
+const _hoisted_1$h = {
   viewBox: "0 0 32 32",
   version: "1.1",
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink"
 };
-const _hoisted_2$9 = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-const _hoisted_4$3 = [
-  _hoisted_2$9
+const _hoisted_2$c = /* @__PURE__ */ createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+const _hoisted_4$5 = [
+  _hoisted_2$c
 ];
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeIcon"
   },
   __name: "CodeIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$e, _hoisted_4$3);
+      return openBlock(), createElementBlock("svg", _hoisted_1$h, _hoisted_4$5);
     };
   }
 });
 
-const _hoisted_1$d = ["id"];
-const _hoisted_2$8 = { class: "list-item" };
-const _hoisted_3$4 = {
+const _hoisted_1$g = ["id"];
+const _hoisted_2$b = { class: "list-item" };
+const _hoisted_3$6 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockList"
   },
@@ -5299,26 +5374,26 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$8, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$m, {
+            createElementVNode("div", _hoisted_2$b, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$q, {
                 key: 0,
                 class: "codeIcon"
               })) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$n, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$r, {
                 key: 1,
                 class: "compIcon"
               })) : createCommentVNode("", true),
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
               }, toDisplayString(data.name) + " (" + toDisplayString(data.id) + ")", 3),
-              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+              data.type === "code" ? (openBlock(), createElementBlock("div", _hoisted_3$6, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$G, {
+                    createVNode(_sfc_main$K, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5333,7 +5408,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$G, {
+                    createVNode(_sfc_main$K, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5347,7 +5422,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$d)
+          ], 8, _hoisted_1$g)
         ]),
         _: 3
       }, 8, ["default-expanded-keys", "data"]);
@@ -5355,8 +5430,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = { class: "search-wrapper" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "search-wrapper" };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorCodeBlockListPanel"
   },
@@ -5376,8 +5451,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            createElementVNode("div", _hoisted_1$c, [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            createElementVNode("div", _hoisted_1$f, [
+              createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
               editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
                 key: 0,
                 class: "create-code-button",
@@ -5393,7 +5468,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "code-block-panel-search")
             ])
           ]),
-          createVNode(_sfc_main$l, {
+          createVNode(_sfc_main$p, {
             ref_key: "codeBlockList",
             ref: codeBlockList,
             "custom-error": _ctx.customError,
@@ -5408,7 +5483,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           }, 8, ["custom-error", "onEdit", "onRemove"]),
-          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$I, {
+          unref(codeConfig) ? (openBlock(), createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -5423,7 +5498,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceConfigPanel"
   },
@@ -5477,13 +5552,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$b = ["id"];
-const _hoisted_2$7 = { class: "list-item" };
-const _hoisted_3$3 = {
+const _hoisted_1$e = ["id"];
+const _hoisted_2$a = { class: "list-item" };
+const _hoisted_3$5 = {
   key: 2,
   class: "right-tool"
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceList"
   },
@@ -5578,13 +5653,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             id: data.id,
             class: "list-container"
           }, [
-            createElementVNode("div", _hoisted_2$7, [
-              data.type === "code" ? (openBlock(), createBlock(_sfc_main$G, {
+            createElementVNode("div", _hoisted_2$a, [
+              data.type === "code" ? (openBlock(), createBlock(_sfc_main$K, {
                 key: 0,
                 class: "codeIcon",
                 icon: unref(Coin)
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              data.type === "node" ? (openBlock(), createBlock(_sfc_main$G, {
+              data.type === "node" ? (openBlock(), createBlock(_sfc_main$K, {
                 key: 1,
                 class: "compIcon",
                 icon: unref(Aim)
@@ -5592,14 +5667,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               createElementVNode("span", {
                 class: normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
               }, toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
+              data.type === "ds" ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
                 createVNode(unref(TMagicTooltip), {
                   effect: "dark",
                   content: editable.value ? "编辑" : "查看",
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$G, {
+                    createVNode(_sfc_main$K, {
                       icon: editable.value ? unref(Edit) : unref(View),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5614,7 +5689,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                   placement: "bottom"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$G, {
+                    createVNode(_sfc_main$K, {
                       icon: unref(Close),
                       class: "edit-icon",
                       onClick: withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5628,7 +5703,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 })
               ])) : createCommentVNode("", true)
             ])
-          ], 8, _hoisted_1$b)
+          ], 8, _hoisted_1$e)
         ]),
         _: 3
       }, 8, ["data"]);
@@ -5636,9 +5711,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$a = { class: "search-wrapper" };
-const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = { class: "search-wrapper" };
+const _hoisted_2$9 = { class: "data-source-list-panel-add-menu" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorDataSourceListPanel"
   },
@@ -5698,8 +5773,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$a, [
-            createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          createElementVNode("div", _hoisted_1$d, [
+            createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
             editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
               key: 0,
               placement: "right"
@@ -5716,9 +5791,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 })
               ]),
               default: withCtx(() => [
-                createElementVNode("div", _hoisted_2$6, [
+                createElementVNode("div", _hoisted_2$9, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(datasourceTypeList.value, (item, index) => {
-                    return openBlock(), createBlock(_sfc_main$r, {
+                    return openBlock(), createBlock(_sfc_main$v, {
                       data: {
                         type: "button",
                         text: item.text,
@@ -5734,11 +5809,11 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               _: 1
             })) : createCommentVNode("", true)
           ]),
-          createVNode(_sfc_main$i, {
+          createVNode(_sfc_main$m, {
             onEdit: editHandler,
             onRemove: removeHandler
           }),
-          createVNode(_sfc_main$j, {
+          createVNode(_sfc_main$n, {
             ref_key: "editDialog",
             ref: editDialog,
             disabled: !editable.value,
@@ -5753,9 +5828,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = ["onClick", "onDragstart"];
-const _hoisted_2$5 = ["title"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["onClick", "onDragstart"];
+const _hoisted_2$8 = ["title"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorComponentListPanel"
   },
@@ -5834,7 +5909,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
             "model-value": collapseValue.value
           }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
               (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
                 return openBlock(), createElementBlock(Fragment, null, [
                   group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
@@ -5842,7 +5917,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$G, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$K, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -5857,15 +5932,15 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$G, {
+                            createVNode(_sfc_main$K, {
                               title: item.text,
                               icon: item.icon
                             }, null, 8, ["title", "icon"]),
                             createElementVNode("span", {
                               title: item.text
-                            }, toDisplayString(item.text), 9, _hoisted_2$5)
+                            }, toDisplayString(item.text), 9, _hoisted_2$8)
                           ])
-                        ], 40, _hoisted_1$9);
+                        ], 40, _hoisted_1$c);
                       }), 128))
                     ]),
                     _: 2
@@ -5882,16 +5957,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorContentMenu"
   },
   __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
-    isSubMenu: { type: Boolean, default: false }
+    isSubMenu: { type: Boolean, default: false },
+    active: {},
+    autoHide: { type: Boolean, default: true }
   },
-  emits: ["hide", "show"],
+  emits: ["hide", "show", "mouseenter"],
   setup(__props, { expose: __expose, emit }) {
     const props = __props;
     const menu = ref();
@@ -5899,10 +5976,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const subMenu = ref();
     const visible = ref(false);
     const subMenuData = ref([]);
-    const menuStyle = ref({
-      left: "0",
-      top: "0"
+    const menuPosition = ref({
+      left: 0,
+      top: 0
     });
+    const menuStyle = computed(() => ({
+      top: `${menuPosition.value.top}px`,
+      left: `${menuPosition.value.left}px`
+    }));
     const contains = (el) => menu.value?.contains(el) || subMenu.value?.contains(el);
     const hide = () => {
       if (!visible.value)
@@ -5911,7 +5992,14 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       subMenu.value?.hide();
       emit("hide");
     };
-    const hideHandler = (e) => {
+    const clickHandler = () => {
+      if (!props.autoHide)
+        return;
+      hide();
+    };
+    const outsideClickhideHandler = (e) => {
+      if (!props.autoHide)
+        return;
       const target = e.target;
       if (!visible.value || !target) {
         return;
@@ -5921,19 +6009,25 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       }
       hide();
     };
+    const setPosition = (e) => {
+      const menuHeight = menu.value?.clientHeight || 0;
+      let top = e.clientY;
+      if (menuHeight + e.clientY > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight;
+      }
+      menuPosition.value = {
+        top,
+        left: e.clientX
+      };
+    };
     const show = (e) => {
       setTimeout(() => {
         visible.value = true;
+        if (!e) {
+          return;
+        }
         nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX}px`
-          };
+          setPosition(e);
           emit("show");
         });
       }, 300);
@@ -5958,64 +6052,77 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }
       }, 0);
     };
+    const mouseenterHandler = () => {
+      emit("mouseenter");
+    };
     onMounted(() => {
       if (props.isSubMenu)
         return;
-      globalThis.addEventListener("mousedown", hideHandler, true);
+      globalThis.addEventListener("mousedown", outsideClickhideHandler, true);
     });
     onUnmounted(() => {
       if (props.isSubMenu)
         return;
-      globalThis.removeEventListener("mousedown", hideHandler, true);
+      globalThis.removeEventListener("mousedown", outsideClickhideHandler, true);
     });
     __expose({
       menu,
+      menuPosition,
       hide,
       show,
-      contains
+      contains,
+      setPosition
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "magic-editor-content-menu",
-        ref_key: "menu",
-        ref: menu,
-        style: normalizeStyle(menuStyle.value)
-      }, [
-        createElementVNode("div", null, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$r, {
-              "event-type": "mouseup",
-              ref_for: true,
-              ref_key: "buttons",
-              ref: buttons,
-              data: item,
-              key: index,
-              onMouseup: hide,
-              onMouseenter: ($event) => showSubMenu(item, index)
-            }, null, 8, ["data", "onMouseenter"]);
-          }), 128))
+      return openBlock(), createBlock(Transition, { name: "fade" }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            class: "magic-editor-content-menu",
+            ref_key: "menu",
+            ref: menu,
+            style: normalizeStyle(menuStyle.value),
+            onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler())
+          }, [
+            renderSlot(_ctx.$slots, "title"),
+            createElementVNode("div", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuData, (item, index) => {
+                return openBlock(), createBlock(_sfc_main$v, {
+                  "event-type": "mouseup",
+                  ref_for: true,
+                  ref_key: "buttons",
+                  ref: buttons,
+                  class: normalizeClass({ active: _ctx.active && item.id === _ctx.active }),
+                  data: item,
+                  key: index,
+                  onMouseup: clickHandler,
+                  onMouseenter: ($event) => showSubMenu(item, index)
+                }, null, 8, ["class", "data", "onMouseenter"]);
+              }), 128))
+            ]),
+            (openBlock(), createBlock(Teleport, { to: "body" }, [
+              subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
+                key: 0,
+                class: "sub-menu",
+                ref_key: "subMenu",
+                ref: subMenu,
+                active: _ctx.active,
+                "menu-data": subMenuData.value,
+                "is-sub-menu": true,
+                onHide: hide
+              }, null, 8, ["active", "menu-data"])) : createCommentVNode("", true)
+            ]))
+          ], 36), [
+            [vShow, visible.value]
+          ])
         ]),
-        (openBlock(), createBlock(Teleport, { to: "body" }, [
-          subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
-            key: 0,
-            class: "sub-menu",
-            ref_key: "subMenu",
-            ref: subMenu,
-            "menu-data": subMenuData.value,
-            "is-sub-menu": true,
-            onHide: hide
-          }, null, 8, ["menu-data"])) : createCommentVNode("", true)
-        ]))
-      ], 4)), [
-        [vShow, visible.value]
-      ]) : createCommentVNode("", true);
+        _: 3
+      });
     };
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$b = {
   width: "1em",
   height: "1em",
   viewBox: "0 0 16 16",
@@ -6023,26 +6130,26 @@ const _hoisted_1$8 = {
   fill: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$7 = /* @__PURE__ */ createElementVNode("path", {
   "fill-rule": "evenodd",
   d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
 }, null, -1);
-const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("path", {
   "fill-rule": "evenodd",
   d: "M11 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5z"
 }, null, -1);
-const _hoisted_4$2 = [
-  _hoisted_2$4,
-  _hoisted_3$2
+const _hoisted_4$4 = [
+  _hoisted_2$7,
+  _hoisted_3$4
 ];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorFolderMinusIcon"
   },
   __name: "FolderMinusIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
+      return openBlock(), createElementBlock("svg", _hoisted_1$b, _hoisted_4$4);
     };
   }
 });
@@ -6122,7 +6229,7 @@ const useMoveToMenu = (services) => {
   };
 };
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerMenu"
   },
@@ -6185,7 +6292,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       {
         type: "button",
         text: "全部折叠",
-        icon: _sfc_main$e,
+        icon: _sfc_main$i,
         display: () => isPage(node.value),
         handler: () => {
           emit("collapse-all");
@@ -6211,7 +6318,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$f, {
+      return openBlock(), createBlock(_sfc_main$j, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu,
@@ -6221,8 +6328,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "layer-node-tool" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "layer-node-tool" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "LayerNode",
   props: {
     data: {}
@@ -6243,7 +6350,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       const _component_el_icon = resolveComponent("el-icon");
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", null, toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-        createElementVNode("div", _hoisted_1$7, [
+        createElementVNode("div", _hoisted_1$a, [
           _ctx.data.type !== "page" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             _ctx.data.visible === false ? (openBlock(), createBlock(_component_el_icon, {
               key: 0,
@@ -6272,9 +6379,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$6 = ["id", "onMouseenter"];
+const _hoisted_1$9 = ["id", "onMouseenter"];
 const throttleTime = 150;
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorLayerPanel"
   },
@@ -6522,7 +6629,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "layer-panel-header"),
-          createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+          createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
           values.value.length ? (openBlock(), createBlock(unref(TMagicTree), {
             key: 0,
             class: "magic-editor-layer-tree",
@@ -6562,14 +6669,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   node,
                   data
                 }, () => [
-                  createVNode(_sfc_main$c, { data }, null, 8, ["data"])
+                  createVNode(_sfc_main$g, { data }, null, 8, ["data"])
                 ])
-              ], 40, _hoisted_1$6)
+              ], 40, _hoisted_1$9)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "default-checked-keys", "current-node-key", "data", "highlight-current", "show-checkbox"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$d, {
+            createVNode(_sfc_main$h, {
               ref_key: "menu",
               ref: menu,
               "layer-content-menu": _ctx.layerContentMenu,
@@ -6583,17 +6690,17 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "m-editor-sidebar"
 };
-const _hoisted_2$3 = { class: "m-editor-sidebar-header" };
-const _hoisted_3$1 = ["onClick"];
-const _hoisted_4$1 = {
+const _hoisted_2$6 = { class: "m-editor-sidebar-header" };
+const _hoisted_3$3 = ["onClick"];
+const _hoisted_4$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorSidebar"
   },
@@ -6612,7 +6719,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Goods,
           text: "组件",
-          component: _sfc_main$g,
+          component: _sfc_main$k,
           slots: {}
         },
         layer: {
@@ -6623,7 +6730,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           props: {
             layerContentMenu: props.layerContentMenu
           },
-          component: _sfc_main$b,
+          component: _sfc_main$f,
           slots: {}
         },
         "code-block": {
@@ -6631,7 +6738,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: EditPen,
           text: "代码编辑",
-          component: _sfc_main$k,
+          component: _sfc_main$o,
           slots: {}
         },
         "data-source": {
@@ -6639,7 +6746,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           type: "component",
           icon: Coin,
           text: "数据源",
-          component: _sfc_main$h,
+          component: _sfc_main$l,
           slots: {}
         }
       };
@@ -6656,20 +6763,20 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       activeTabName
     });
     return (_ctx, _cache) => {
-      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
-        createElementVNode("div", _hoisted_2$3, [
+      return _ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$6, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
             return openBlock(), createElementBlock("div", {
               class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
               key: config.$key ?? index,
               onClick: ($event) => activeTabName.value = config.text || `${index}`
             }, [
-              config.icon ? (openBlock(), createBlock(_sfc_main$G, {
+              config.icon ? (openBlock(), createBlock(_sfc_main$K, {
                 key: 0,
                 icon: config.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
-              config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
-            ], 10, _hoisted_3$1);
+              config.text ? (openBlock(), createElementBlock("div", _hoisted_4$3, toDisplayString(config.text), 1)) : createCommentVNode("", true)
+            ], 10, _hoisted_3$3);
           }), 128))
         ]),
         (openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
@@ -6748,268 +6855,6 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = {
-  key: 0,
-  class: "m-editor-breadcrumb"
-};
-const _hoisted_2$2 = { key: 0 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorBreadcrumb"
-  },
-  __name: "Breadcrumb",
-  setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const node = computed(() => editorService?.get("node"));
-    const nodes = computed(() => editorService?.get("nodes") || []);
-    const root = computed(() => editorService?.get("root"));
-    const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
-    const select = async (node2) => {
-      await editorService?.select(node2);
-      editorService?.get("stage")?.select(node2.id);
-    };
-    return (_ctx, _cache) => {
-      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
-          return openBlock(), createElementBlock(Fragment, {
-            key: item.id
-          }, [
-            createVNode(unref(TMagicButton), {
-              text: "",
-              disabled: item.id === node.value?.id,
-              onClick: ($event) => select(item)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(item.name), 1)
-              ]),
-              _: 2
-            }, 1032, ["disabled", "onClick"]),
-            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$2, "/")) : createCommentVNode("", true)
-          ], 64);
-        }), 128))
-      ])) : createCommentVNode("", true);
-    };
-  }
-});
-
-const _hoisted_1$3 = {
-  key: 1,
-  style: { "width": "21px" }
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorPageBarScrollContainer"
-  },
-  __name: "PageBarScrollContainer",
-  setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const uiService = services?.uiService;
-    const itemsContainer = ref();
-    const canScroll = ref(false);
-    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const itemsContainerWidth = ref(0);
-    const setCanScroll = () => {
-      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
-      nextTick(() => {
-        if (itemsContainer.value) {
-          canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
-        }
-      });
-    };
-    const resizeObserver = new ResizeObserver(() => {
-      setCanScroll();
-    });
-    const pageBar = ref();
-    onMounted(() => {
-      pageBar.value && resizeObserver.observe(pageBar.value);
-    });
-    onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
-    let translateLeft = 0;
-    const scroll = (type) => {
-      if (!itemsContainer.value)
-        return;
-      const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
-      if (type === "left") {
-        translateLeft += 100;
-        if (translateLeft > 0) {
-          translateLeft = 0;
-        }
-      } else if (type === "right") {
-        translateLeft -= 100;
-        if (-translateLeft > maxScrollLeft) {
-          translateLeft = -maxScrollLeft;
-        }
-      } else if (type === "start") {
-        translateLeft = 0;
-      } else if (type === "end") {
-        translateLeft = -maxScrollLeft;
-      }
-      itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
-    };
-    const pageLength = computed(() => editorService?.get("pageLength"));
-    watch(pageLength, (length = 0, preLength = 0) => {
-      setTimeout(() => {
-        setCanScroll();
-        if (length < preLength) {
-          scroll("start");
-        } else {
-          scroll("end");
-        }
-      });
-    });
-    const addPage = () => {
-      if (!editorService)
-        return;
-      const root = toRaw(editorService.get("root"));
-      if (!root)
-        throw new Error("root 不能为空");
-      const pageConfig = {
-        type: NodeType.PAGE,
-        name: generatePageNameByApp(root)
-      };
-      editorService.add(pageConfig);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: "m-editor-page-bar",
-        ref_key: "pageBar",
-        ref: pageBar
-      }, [
-        showAddPageButton.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          id: "m-editor-page-bar-add-icon",
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: addPage
-        }, [
-          createVNode(_sfc_main$G, { icon: unref(Plus) }, null, 8, ["icon"])
-        ])) : (openBlock(), createElementBlock("div", _hoisted_1$3)),
-        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$G, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true),
-        pageLength.value ? (openBlock(), createElementBlock("div", {
-          key: 3,
-          class: "m-editor-page-bar-items",
-          ref_key: "itemsContainer",
-          ref: itemsContainer,
-          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 4)) : createCommentVNode("", true),
-        canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 4,
-          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
-        }, [
-          createVNode(_sfc_main$G, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
-        ])) : createCommentVNode("", true)
-      ], 512);
-    };
-  }
-});
-
-const _hoisted_1$2 = ["onClick"];
-const _hoisted_2$1 = { class: "m-editor-page-bar-title" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MEditorPageBar"
-  },
-  __name: "PageBar",
-  setup(__props) {
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const root = computed(() => editorService?.get("root"));
-    const page = computed(() => editorService?.get("page"));
-    const switchPage = (page2) => {
-      editorService?.select(page2);
-    };
-    const copy = (node) => {
-      node && editorService?.copy(node);
-      editorService?.paste({
-        left: 0,
-        top: 0
-      });
-    };
-    const remove = (node) => {
-      editorService?.remove(node);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$8, null, {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(root.value && root.value.items || [], (item) => {
-            return openBlock(), createElementBlock("div", {
-              class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
-              key: item.key,
-              onClick: ($event) => switchPage(item)
-            }, [
-              createElementVNode("div", _hoisted_2$1, [
-                renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                  createVNode(unref(TMagicTooltip), {
-                    effect: "dark",
-                    placement: "top-start",
-                    content: item.name
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("span", null, toDisplayString(item.name || item.id), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["content"])
-                ])
-              ]),
-              createVNode(unref(TMagicPopover), {
-                "popper-class": "page-bar-popover",
-                placement: "top",
-                width: 160,
-                trigger: "hover"
-              }, {
-                reference: withCtx(() => [
-                  createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
-                    default: withCtx(() => [
-                      createVNode(unref(CaretBottom))
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createElementVNode("div", null, [
-                    renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$r, {
-                        data: {
-                          type: "button",
-                          text: "复制",
-                          icon: unref(DocumentCopy),
-                          handler: () => copy(item)
-                        }
-                      }, null, 8, ["data"]),
-                      createVNode(_sfc_main$r, {
-                        data: {
-                          type: "button",
-                          text: "删除",
-                          icon: unref(Delete),
-                          handler: () => remove(item)
-                        }
-                      }, null, 8, ["data"])
-                    ])
-                  ])
-                ]),
-                _: 2
-              }, 1024)
-            ], 10, _hoisted_1$2);
-          }), 128))
-        ]),
-        _: 3
-      });
-    };
-  }
-});
-
 class ScrollViewer extends EventEmitter {
   container;
   target;
@@ -7138,7 +6983,7 @@ class ScrollViewer extends EventEmitter {
   };
 }
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollBar"
   },
@@ -7227,7 +7072,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 
 const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorScrollViewer"
   },
@@ -7313,14 +7158,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4),
-        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$6, {
+        scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$d, {
           key: 0,
           "scroll-size": scrollHeight.value,
           size: _ctx.wrapHeight,
           pos: vOffset.value,
           onScroll: vScrollHandler
         }, null, 8, ["scroll-size", "size", "pos"])) : createCommentVNode("", true),
-        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$6, {
+        scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$d, {
           key: 1,
           "is-horizontal": true,
           "scroll-size": scrollWidth.value,
@@ -7498,83 +7343,378 @@ const useStage = (stageOptions) => {
   return stage;
 };
 
-const _hoisted_1$1 = {
+const _hoisted_1$7 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "icon icon-tabler icon-tabler-pin",
+  width: "24",
+  height: "24",
   viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
   fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
 };
-const _hoisted_2 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M2 4H21V6H2V4Z",
-  fill: "black",
-  "fill-opacity": "0.9"
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M5 11H18V13H5V11Z",
-  fill: "black",
-  "fill-opacity": "0.9"
+const _hoisted_3$2 = /* @__PURE__ */ createElementVNode("path", { d: "M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" }, null, -1);
+const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("line", {
+  x1: "9",
+  y1: "15",
+  x2: "4.5",
+  y2: "19.5"
 }, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
-  "fill-rule": "evenodd",
-  "clip-rule": "evenodd",
-  d: "M2 18H21V20H2V18Z",
-  fill: "black",
-  "fill-opacity": "0.9"
+const _hoisted_5$2 = /* @__PURE__ */ createElementVNode("line", {
+  x1: "14.5",
+  y1: "4",
+  x2: "20",
+  y2: "9.5"
 }, null, -1);
-const _hoisted_5 = [
-  _hoisted_2,
-  _hoisted_3,
-  _hoisted_4
+const _hoisted_6$1 = [
+  _hoisted_2$5,
+  _hoisted_3$2,
+  _hoisted_4$2,
+  _hoisted_5$2
 ];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorCenterIcon"
+    name: "MEditorPinIcon"
   },
-  __name: "CenterIcon",
+  __name: "PinIcon",
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", _hoisted_1$1, _hoisted_5);
+      return openBlock(), createElementBlock("svg", _hoisted_1$7, _hoisted_6$1);
     };
   }
 });
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  class: "icon icon-tabler icon-tabler-pinned",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  "stroke-width": "2",
+  stroke: "currentColor",
+  fill: "none",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+};
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("path", {
+  stroke: "none",
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}, null, -1);
+const _hoisted_3$1 = /* @__PURE__ */ createElementVNode("path", { d: "M9 4v6l-2 4v2h10v-2l-2 -4v-6" }, null, -1);
+const _hoisted_4$1 = /* @__PURE__ */ createElementVNode("line", {
+  x1: "12",
+  y1: "16",
+  x2: "12",
+  y2: "21"
+}, null, -1);
+const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("line", {
+  x1: "8",
+  y1: "4",
+  x2: "16",
+  y2: "4"
+}, null, -1);
+const _hoisted_6 = [
+  _hoisted_2$4,
+  _hoisted_3$1,
+  _hoisted_4$1,
+  _hoisted_5$1
+];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
-    name: "MEditorViewerMenu"
+    name: "MEditorPinnedIcon"
   },
-  __name: "ViewerMenu",
+  __name: "PinnedIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$6, _hoisted_6);
+    };
+  }
+});
+
+const _hoisted_1$5 = /* @__PURE__ */ createElementVNode("span", null, "可选组件", -1);
+const _hoisted_2$3 = { style: { "margin-right": "10px" } };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorNodeListMenuTitle"
+  },
+  __name: "NodeListMenuTitle",
   props: {
-    isMultiSelect: { type: Boolean, default: false },
-    stageContentMenu: {}
+    pinned: { type: Boolean }
   },
-  setup(__props, { expose: __expose }) {
+  emits: ["close", "update:pinned", "change"],
+  setup(__props, { emit }) {
     const props = __props;
-    const services = inject("services");
-    const editorService = services?.editorService;
-    const menu = ref();
-    const canPaste = ref(false);
-    const canCenter = ref(false);
-    const node = computed(() => editorService?.get("node"));
-    const nodes = computed(() => editorService?.get("nodes"));
-    const parent = computed(() => editorService?.get("parent"));
-    const menuData = computed(() => [
-      {
-        type: "button",
-        text: "水平居中",
-        icon: markRaw(_sfc_main$4),
-        display: () => canCenter.value,
-        handler: () => {
-          if (!nodes.value)
-            return;
-          editorService?.alignCenter(nodes.value);
-        }
-      },
-      useCopyMenu(),
-      usePasteMenu(menu),
-      {
+    const pinHandler = () => {
+      emit("update:pinned", !props.pinned);
+    };
+    const closeHandler = () => {
+      emit("close");
+    };
+    const target = ref();
+    useGetSo(target, emit);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: { "text-align": "center", "padding": "5px 0", "font-size": "14px", "cursor": "move", "display": "flex", "justify-content": "space-between", "align-items": "center" },
+        ref_key: "target",
+        ref: target
+      }, [
+        createVNode(unref(TMagicTooltip), {
+          placement: "top",
+          content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$K, {
+              style: { "margin-left": "10px", "cursor": "pointer" },
+              icon: _ctx.pinned ? _sfc_main$a : _sfc_main$b,
+              onClick: pinHandler
+            }, null, 8, ["icon"])
+          ]),
+          _: 1
+        }, 8, ["content"]),
+        _hoisted_1$5,
+        createElementVNode("div", _hoisted_2$3, [
+          createVNode(unref(TMagicButton), {
+            text: "",
+            size: "small",
+            onClick: closeHandler
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$K, { icon: unref(Close) }, null, 8, ["icon"])
+            ]),
+            _: 1
+          })
+        ])
+      ], 512);
+    };
+  }
+});
+
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "NodeListMenu",
+  props: {
+    isMultiSelect: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const menu = ref();
+    const nodeList = ref([]);
+    const pinned = ref(false);
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const componentListService = services?.componentListService;
+    const stage = computed(() => editorService?.get("stage"));
+    const page = computed(() => editorService?.get("page"));
+    const node = computed(() => editorService?.get("node"));
+    let timeout = null;
+    const cancel = () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+      }
+      if (pinned.value) {
+        return;
+      }
+      nodeList.value = [];
+      menu.value?.hide();
+    };
+    const clearTimeoutLazy = () => {
+      globalThis.setTimeout(() => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+        }
+      }, 300);
+    };
+    const unWatch = watch(
+      stage,
+      (stage2) => {
+        if (!stage2)
+          return;
+        stage2.on("drag-start", () => {
+          cancel();
+        });
+        stage2.on("mousemove", (event) => {
+          cancel();
+          if (props.isMultiSelect || stage2.getDragStatus() !== StageDragStatus.END) {
+            return;
+          }
+          timeout = globalThis.setTimeout(() => {
+            const els = stage2?.renderer.getElementsFromPoint(event);
+            const nodes = getNodes(
+              els.map((el) => el.id),
+              page.value?.items
+            );
+            if (pinned.value && nodes.length === 0) {
+              return;
+            }
+            nodeList.value = nodes;
+            if (nodeList.value.length > 1) {
+              menu.value?.show(pinned.value ? void 0 : event);
+            }
+          }, 1500);
+        });
+        stage2.on("mouseleave", () => {
+          clearTimeoutLazy();
+        });
+        unWatch();
+      },
+      {
+        immediate: true
+      }
+    );
+    const componentMap = computed(() => {
+      const map = {};
+      componentListService?.getList().forEach((group) => {
+        group.items.forEach((item) => {
+          map[item.type] = item;
+        });
+      });
+      return map;
+    });
+    const menuData = computed(
+      () => nodeList.value.map((node2) => {
+        let text = node2.name;
+        let icon;
+        if (node2.type) {
+          const item = componentMap.value[node2.type];
+          text += ` (${item?.text})`;
+          icon = item?.icon;
+        }
+        return {
+          type: "button",
+          text,
+          id: node2.id,
+          icon,
+          handler: async () => {
+            await editorService?.select(node2);
+            stage.value?.select(node2.id);
+          }
+        };
+      })
+    );
+    const mouseenterHandler = () => {
+      clearTimeoutLazy();
+    };
+    const dragMenuHandler = ({ deltaY, deltaX }) => {
+      if (!menu.value)
+        return;
+      const { menuPosition } = menu.value;
+      menu.value?.setPosition({
+        clientY: menuPosition.top + deltaY,
+        clientX: menuPosition.left + deltaX
+      });
+    };
+    const closeHandler = () => {
+      menu.value?.hide();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$j, {
+        ref_key: "menu",
+        ref: menu,
+        class: "magic-editor-node-list-menu",
+        style: { "max-width": "280px" },
+        "menu-data": menuData.value,
+        active: node.value?.id,
+        "auto-hide": !pinned.value,
+        onMouseenter: _cache[1] || (_cache[1] = ($event) => mouseenterHandler())
+      }, {
+        title: withCtx(() => [
+          createVNode(_sfc_main$9, {
+            pinned: pinned.value,
+            "onUpdate:pinned": _cache[0] || (_cache[0] = ($event) => pinned.value = $event),
+            onChange: dragMenuHandler,
+            onClose: closeHandler
+          }, null, 8, ["pinned"])
+        ]),
+        _: 1
+      }, 8, ["menu-data", "active", "auto-hide"]);
+    };
+  }
+});
+
+const _hoisted_1$4 = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M2 4H21V6H2V4Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M5 11H18V13H5V11Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("path", {
+  "fill-rule": "evenodd",
+  "clip-rule": "evenodd",
+  d: "M2 18H21V20H2V18Z",
+  fill: "black",
+  "fill-opacity": "0.9"
+}, null, -1);
+const _hoisted_5 = [
+  _hoisted_2$2,
+  _hoisted_3,
+  _hoisted_4
+];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorCenterIcon"
+  },
+  __name: "CenterIcon",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_5);
+    };
+  }
+});
+
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorViewerMenu"
+  },
+  __name: "ViewerMenu",
+  props: {
+    isMultiSelect: { type: Boolean, default: false },
+    stageContentMenu: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const menu = ref();
+    const canPaste = ref(false);
+    const canCenter = ref(false);
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes"));
+    const parent = computed(() => editorService?.get("parent"));
+    const menuData = computed(() => [
+      {
+        type: "button",
+        text: "水平居中",
+        icon: markRaw(_sfc_main$7),
+        display: () => canCenter.value,
+        handler: () => {
+          if (!nodes.value)
+            return;
+          editorService?.alignCenter(nodes.value);
+        }
+      },
+      useCopyMenu(),
+      usePasteMenu(menu),
+      {
         type: "divider",
         direction: "horizontal",
         display: () => {
@@ -7660,7 +7800,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     __expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$f, {
+      return openBlock(), createBlock(_sfc_main$j, {
         "menu-data": menuData.value,
         ref_key: "menu",
         ref: menu
@@ -7669,7 +7809,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorStage"
   },
@@ -7809,7 +7949,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, {
+      return openBlock(), createBlock(_sfc_main$c, {
         class: "m-editor-stage",
         ref_key: "stageWrap",
         ref: stageWrap,
@@ -7836,12 +7976,16 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             onDragover: dragoverHandler
           }, null, 36),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$6, {
               ref_key: "menu",
               ref: menu,
               "is-multi-select": isMultiSelect.value,
               "stage-content-menu": _ctx.stageContentMenu
-            }, null, 8, ["is-multi-select", "stage-content-menu"])
+            }, null, 8, ["is-multi-select", "stage-content-menu"]),
+            createVNode(_sfc_main$8, {
+              ref: "nodeList",
+              "is-multi-select": isMultiSelect.value
+            }, null, 8, ["is-multi-select"])
           ]))
         ]),
         _: 1
@@ -7850,6 +7994,268 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$3 = {
+  key: 0,
+  class: "m-editor-breadcrumb"
+};
+const _hoisted_2$1 = { key: 0 };
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorBreadcrumb"
+  },
+  __name: "Breadcrumb",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
+    const root = computed(() => editorService?.get("root"));
+    const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+    const select = async (node2) => {
+      await editorService?.select(node2);
+      editorService?.get("stage")?.select(node2.id);
+    };
+    return (_ctx, _cache) => {
+      return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            createVNode(unref(TMagicButton), {
+              text: "",
+              disabled: item.id === node.value?.id,
+              onClick: ($event) => select(item)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["disabled", "onClick"]),
+            index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
+const _hoisted_1$2 = {
+  key: 1,
+  style: { "width": "21px" }
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBarScrollContainer"
+  },
+  __name: "PageBarScrollContainer",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const uiService = services?.uiService;
+    const itemsContainer = ref();
+    const canScroll = ref(false);
+    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
+    const itemsContainerWidth = ref(0);
+    const setCanScroll = () => {
+      itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+      nextTick(() => {
+        if (itemsContainer.value) {
+          canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+        }
+      });
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      setCanScroll();
+    });
+    const pageBar = ref();
+    onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+    let translateLeft = 0;
+    const scroll = (type) => {
+      if (!itemsContainer.value)
+        return;
+      const maxScrollLeft = itemsContainer.value.scrollWidth - itemsContainerWidth.value;
+      if (type === "left") {
+        translateLeft += 100;
+        if (translateLeft > 0) {
+          translateLeft = 0;
+        }
+      } else if (type === "right") {
+        translateLeft -= 100;
+        if (-translateLeft > maxScrollLeft) {
+          translateLeft = -maxScrollLeft;
+        }
+      } else if (type === "start") {
+        translateLeft = 0;
+      } else if (type === "end") {
+        translateLeft = -maxScrollLeft;
+      }
+      itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
+    };
+    const pageLength = computed(() => editorService?.get("pageLength"));
+    watch(pageLength, (length = 0, preLength = 0) => {
+      setTimeout(() => {
+        setCanScroll();
+        if (length < preLength) {
+          scroll("start");
+        } else {
+          scroll("end");
+        }
+      });
+    });
+    const addPage = () => {
+      if (!editorService)
+        return;
+      const root = toRaw(editorService.get("root"));
+      if (!root)
+        throw new Error("root 不能为空");
+      const pageConfig = {
+        type: NodeType.PAGE,
+        name: generatePageNameByApp(root)
+      };
+      editorService.add(pageConfig);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "m-editor-page-bar",
+        ref_key: "pageBar",
+        ref: pageBar
+      }, [
+        showAddPageButton.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: "m-editor-page-bar-add-icon",
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: addPage
+        }, [
+          createVNode(_sfc_main$K, { icon: unref(Plus) }, null, 8, ["icon"])
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$2)),
+        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$K, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true),
+        pageLength.value ? (openBlock(), createElementBlock("div", {
+          key: 3,
+          class: "m-editor-page-bar-items",
+          ref_key: "itemsContainer",
+          ref: itemsContainer,
+          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 4)) : createCommentVNode("", true),
+        canScroll.value ? (openBlock(), createElementBlock("div", {
+          key: 4,
+          class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+          onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+        }, [
+          createVNode(_sfc_main$K, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+        ])) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+
+const _hoisted_1$1 = ["onClick"];
+const _hoisted_2 = { class: "m-editor-page-bar-title" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "MEditorPageBar"
+  },
+  __name: "PageBar",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const root = computed(() => editorService?.get("root"));
+    const page = computed(() => editorService?.get("page"));
+    const switchPage = (page2) => {
+      editorService?.select(page2);
+    };
+    const copy = (node) => {
+      node && editorService?.copy(node);
+      editorService?.paste({
+        left: 0,
+        top: 0
+      });
+    };
+    const remove = (node) => {
+      editorService?.remove(node);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$3, null, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(root.value && root.value.items || [], (item) => {
+            return openBlock(), createElementBlock("div", {
+              class: normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+              key: item.key,
+              onClick: ($event) => switchPage(item)
+            }, [
+              createElementVNode("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                  createVNode(unref(TMagicTooltip), {
+                    effect: "dark",
+                    placement: "top-start",
+                    content: item.name
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", null, toDisplayString(item.name || item.id), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["content"])
+                ])
+              ]),
+              createVNode(unref(TMagicPopover), {
+                "popper-class": "page-bar-popover",
+                placement: "top",
+                width: 160,
+                trigger: "hover"
+              }, {
+                reference: withCtx(() => [
+                  createVNode(unref(TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(CaretBottom))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createElementVNode("div", null, [
+                    renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                      createVNode(_sfc_main$v, {
+                        data: {
+                          type: "button",
+                          text: "复制",
+                          icon: unref(DocumentCopy),
+                          handler: () => copy(item)
+                        }
+                      }, null, 8, ["data"]),
+                      createVNode(_sfc_main$v, {
+                        data: {
+                          type: "button",
+                          text: "删除",
+                          icon: unref(Delete),
+                          handler: () => remove(item)
+                        }
+                      }, null, 8, ["data"])
+                    ])
+                  ])
+                ]),
+                _: 2
+              }, 1024)
+            ], 10, _hoisted_1$1);
+          }), 128))
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+
 const _hoisted_1 = { class: "m-editor-workspace" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
@@ -7864,15 +8270,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const page = computed(() => services?.editorService.get("page"));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$9),
+        createVNode(_sfc_main$4),
         renderSlot(_ctx.$slots, "stage", {}, () => [
-          page.value ? (openBlock(), createBlock(_sfc_main$2, {
+          page.value ? (openBlock(), createBlock(_sfc_main$5, {
             key: 0,
             "stage-content-menu": _ctx.stageContentMenu
           }, null, 8, ["stage-content-menu"])) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "workspace-content"),
-        createVNode(_sfc_main$7, null, {
+        createVNode(_sfc_main$2, null, {
           "page-bar-title": withCtx(({ page: page2 }) => [
             renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
           ]),
@@ -9120,11 +9526,11 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
 const _sfc_main = defineComponent({
   name: "MEditor",
   components: {
-    TMagicNavMenu: _sfc_main$q,
-    Sidebar: _sfc_main$a,
+    TMagicNavMenu: _sfc_main$u,
+    Sidebar: _sfc_main$e,
     Workspace: _sfc_main$1,
-    PropsPanel: _sfc_main$p,
-    Framework: _sfc_main$s
+    PropsPanel: _sfc_main$t,
+    Framework: _sfc_main$w
   },
   props: editorProps,
   emits: ["props-panel-mounted", "update:modelValue"],
@@ -9289,22 +9695,22 @@ const index = {
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
     app.component(Editor.name, Editor);
-    app.component("m-fields-ui-select", _sfc_main$w);
-    app.component("m-fields-code-link", _sfc_main$K);
-    app.component("m-fields-vs-code", _sfc_main$L);
-    app.component("magic-code-editor", _sfc_main$M);
-    app.component("m-fields-code-select", _sfc_main$J);
-    app.component("m-fields-code-select-col", _sfc_main$F);
-    app.component("m-fields-event-select", _sfc_main$y);
-    app.component("m-fields-data-source-fields", _sfc_main$E);
-    app.component("m-fields-key-value", _sfc_main$x);
-    app.component("m-fields-data-source-input", _sfc_main$C);
-    app.component("m-fields-data-source-select", _sfc_main$z);
-    app.component("m-fields-data-source-methods", _sfc_main$B);
-    app.component("m-fields-data-source-method-select", _sfc_main$A);
-    app.component("m-fields-data-source-field-select", _sfc_main$D);
+    app.component("m-fields-ui-select", _sfc_main$A);
+    app.component("m-fields-code-link", _sfc_main$O);
+    app.component("m-fields-vs-code", _sfc_main$P);
+    app.component("magic-code-editor", _sfc_main$Q);
+    app.component("m-fields-code-select", _sfc_main$N);
+    app.component("m-fields-code-select-col", _sfc_main$J);
+    app.component("m-fields-event-select", _sfc_main$C);
+    app.component("m-fields-data-source-fields", _sfc_main$I);
+    app.component("m-fields-key-value", _sfc_main$B);
+    app.component("m-fields-data-source-input", _sfc_main$G);
+    app.component("m-fields-data-source-select", _sfc_main$D);
+    app.component("m-fields-data-source-methods", _sfc_main$F);
+    app.component("m-fields-data-source-method-select", _sfc_main$E);
+    app.component("m-fields-data-source-field-select", _sfc_main$H);
   }
 };
 
-export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$I as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$J as CodeSelect, _sfc_main$F as CodeSelectCol, ColumnLayout, _sfc_main$g as ComponentListPanel, _sfc_main$f as ContentMenu, _sfc_main$D as DataSourceFieldSelect, _sfc_main$E as DataSourceFields, _sfc_main$C as DataSourceInput, _sfc_main$A as DataSourceMethodSelect, _sfc_main$B as DataSourceMethods, _sfc_main$z as DataSourceSelect, DepTargetType, _sfc_main$y as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$G as Icon, KeyBindingCommand, _sfc_main$x as KeyValue, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$u as LayoutContainer, _sfc_main$p as PropsPanel, _sfc_main$v as Resizer, _sfc_main$u as SplitView, _sfc_main$M as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$r as ToolButton, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$M as CodeBlockEditor, _sfc_main$p as CodeBlockList, _sfc_main$o as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$N as CodeSelect, _sfc_main$J as CodeSelectCol, ColumnLayout, _sfc_main$k as ComponentListPanel, _sfc_main$j as ContentMenu, _sfc_main$H as DataSourceFieldSelect, _sfc_main$I as DataSourceFields, _sfc_main$G as DataSourceInput, _sfc_main$E as DataSourceMethodSelect, _sfc_main$F as DataSourceMethods, _sfc_main$D as DataSourceSelect, DepTargetType, _sfc_main$C as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$K as Icon, KeyBindingCommand, _sfc_main$B as KeyValue, Keys, LayerOffset, _sfc_main$f as LayerPanel, Layout, _sfc_main$y as LayoutContainer, _sfc_main$t as PropsPanel, _sfc_main$z as Resizer, _sfc_main$y as SplitView, _sfc_main$Q as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$v as ToolButton, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setConfig, setLayout, storageService, styleTabConfig, uiService, useCodeBlockEdit, useDataSourceMethod, useStage, warn };
 //# sourceMappingURL=tmagic-editor.js.map