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

package/dist/tmagic-editor.umd.cjs

@@ -23,10 +23,10 @@
 
   const monaco__namespace = /*#__PURE__*/_interopNamespaceDefault(monaco);
 
-  const _hoisted_1$t = {
+  const _hoisted_1$w = {
     class: /* @__PURE__ */ vue.normalizeClass(`magic-code-editor`)
   };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeEditor"
     },
@@ -173,7 +173,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
             disabled: !fullScreen.value
@@ -201,7 +201,7 @@
     }
   });
 
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCode"
     },
@@ -225,7 +225,7 @@
         emit("change", v);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$M, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$Q, {
           height: _ctx.config.height,
           "init-values": _ctx.model[_ctx.name],
           language: _ctx.config.language,
@@ -245,7 +245,7 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeLink"
     },
@@ -324,7 +324,7 @@
     }
   });
 
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelect"
     },
@@ -396,11 +396,11 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockEditor"
     },
@@ -408,7 +408,8 @@
     props: {
       content: {},
       disabled: { type: Boolean },
-      isDataSource: { type: Boolean }
+      isDataSource: { type: Boolean },
+      dataSourceType: {}
     },
     emits: ["submit"],
     setup(__props, { expose: __expose, emit }) {
@@ -468,7 +469,8 @@
       const functionConfig = vue.computed(() => [
         {
           text: "名称",
-          name: "name"
+          name: "name",
+          rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
         },
         {
           text: "描述",
@@ -478,10 +480,17 @@
           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
         },
         {
@@ -610,7 +619,7 @@
             fullscreen: ""
           }, {
             footer: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_4$4, [
+              vue.createElementVNode("span", _hoisted_4$6, [
                 vue.createVNode(vue.unref(design.TMagicButton), {
                   size: "small",
                   onClick: _cache[1] || (_cache[1] = ($event) => difVisible.value = false)
@@ -633,8 +642,8 @@
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$s, [
-                vue.createElementVNode("div", _hoisted_2$k, [
+              vue.createElementVNode("div", _hoisted_1$v, [
+                vue.createElementVNode("div", _hoisted_2$n, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "info"
@@ -645,7 +654,7 @@
                     _: 1
                   })
                 ]),
-                vue.createElementVNode("div", _hoisted_3$8, [
+                vue.createElementVNode("div", _hoisted_3$a, [
                   vue.createVNode(vue.unref(design.TMagicTag), {
                     size: "small",
                     type: "success"
@@ -657,7 +666,7 @@
                   })
                 ])
               ]),
-              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
+              difVisible.value ? (vue.openBlock(), vue.createBlock(_sfc_main$Q, {
                 key: 0,
                 ref_key: "magicVsEditor",
                 ref: magicVsEditor,
@@ -711,6 +720,15 @@
       type: "switch",
       defaultValue: true
     },
+    {
+      name: "responseOptions",
+      items: [
+        {
+          name: "dataPath",
+          text: "数据路径"
+        }
+      ]
+    },
     {
       type: "fieldset",
       name: "options",
@@ -1263,21 +1281,28 @@
                 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)
                   }
                 ]
               }
@@ -2757,7 +2782,7 @@
     return newNode;
   };
 
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeParams"
     },
@@ -2806,8 +2831,8 @@
     }
   });
 
-  const _hoisted_1$r = ["src"];
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$u = ["src"];
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorIcon"
     },
@@ -2830,7 +2855,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$r)
+            vue.createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$u)
           ]),
           _: 1
         })) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -2907,9 +2932,9 @@
     };
   };
 
-  const _hoisted_1$q = { class: "m-fields-code-select-col" };
-  const _hoisted_2$j = { class: "code-select-container" };
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$t = { class: "m-fields-code-select-col" };
+  const _hoisted_2$m = { class: "code-select-container" };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeSelectCol"
     },
@@ -2983,22 +3008,22 @@
       const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
-          vue.createElementVNode("div", _hoisted_2$j, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$t, [
+          vue.createElementVNode("div", _hoisted_2$m, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: selectConfig,
               model: _ctx.model,
               onChange: onParamsChangeHandler
             }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editCode)(_ctx.model[_ctx.name]))
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3006,7 +3031,7 @@
             "params-config": paramsConfig.value,
             onChange: onParamsChangeHandler
           }, null, 8, ["model", "size", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3019,9 +3044,9 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceFields"
     },
@@ -3156,7 +3181,18 @@
         },
         {
           name: "defaultValue",
-          text: "默认值"
+          text: "默认值",
+          type: (mForm, { model }) => {
+            if (model.type === "number")
+              return "number";
+            if (model.type === "boolean")
+              return "select";
+            return "string";
+          },
+          options: [
+            { text: "true", value: true },
+            { text: "false", value: false }
+          ]
         },
         {
           name: "enable",
@@ -3172,12 +3208,12 @@
         }
       ];
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$s, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: fieldColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$i, [
+          vue.createElementVNode("div", _hoisted_2$l, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3208,7 +3244,7 @@
     }
   });
 
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     __name: "DataSourceFieldSelect",
     props: {
       config: {},
@@ -3255,10 +3291,10 @@
     }
   });
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceInput"
     },
@@ -3447,12 +3483,12 @@
           }
         ), {
           suffix: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Coin) }, null, 8, ["icon"])
           ]),
           default: vue.withCtx(({ item }) => [
-            vue.createElementVNode("div", _hoisted_1$o, [
+            vue.createElementVNode("div", _hoisted_1$r, [
               vue.createElementVNode("div", null, vue.toDisplayString(item.text), 1),
-              vue.createElementVNode("span", _hoisted_2$h, vue.toDisplayString(item.value), 1)
+              vue.createElementVNode("span", _hoisted_2$k, vue.toDisplayString(item.value), 1)
             ])
           ]),
           _: 1
@@ -3464,7 +3500,7 @@
           vue.createElementVNode("div", {
             class: vue.normalizeClass(`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused.value ? " is-focus" : ""}`)
           }, [
-            vue.createElementVNode("div", _hoisted_3$7, [
+            vue.createElementVNode("div", _hoisted_3$9, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayState.value, (item, index) => {
                 return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                   item.type === "text" ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -3482,7 +3518,7 @@
                   }, 1032, ["size"])) : vue.createCommentVNode("", true)
                 ], 64);
               }), 256)),
-              vue.createVNode(_sfc_main$G, {
+              vue.createVNode(_sfc_main$K, {
                 class: "tmagic-data-source-input-icon",
                 icon: vue.unref(iconsVue.Coin)
               }, null, 8, ["icon"])
@@ -3565,9 +3601,9 @@
     };
   };
 
-  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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethods"
     },
@@ -3636,12 +3672,12 @@
         emit("change", props.model[props.name]);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$q, [
           vue.createVNode(vue.unref(table.MagicTable), {
             data: _ctx.model[_ctx.name],
             columns: methodColumns
           }, null, 8, ["data"]),
-          vue.createElementVNode("div", _hoisted_2$g, [
+          vue.createElementVNode("div", _hoisted_2$j, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               size: "small",
               type: "primary",
@@ -3655,23 +3691,24 @@
               _: 1
             }, 8, ["disabled"])
           ]),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 0,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
             disabled: _ctx.disabled,
             content: vue.unref(codeConfig),
             "is-data-source": true,
+            "data-source-type": _ctx.model.type,
             onSubmit: submitCodeHandler
-          }, null, 8, ["disabled", "content"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["disabled", "content", "data-source-type"])) : vue.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__ */ vue.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__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceMethodSelect"
     },
@@ -3749,22 +3786,22 @@
       };
       return (_ctx, _cache) => {
         const _component_m_form_container = vue.resolveComponent("m-form-container");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
-          vue.createElementVNode("div", _hoisted_2$f, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$p, [
+          vue.createElementVNode("div", _hoisted_2$i, [
             vue.createVNode(_component_m_form_container, {
               class: "select",
               config: cascaderConfig,
               model: _ctx.model,
               onChange: onChangeHandler
             }, null, 8, ["model"]),
-            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+            _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
               key: 0,
               class: "icon",
               icon: !_ctx.disabled ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
               onClick: editCodeHandler
             }, null, 8, ["icon"])) : vue.createCommentVNode("", true)
           ]),
-          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$H, {
+          paramsConfig.value.length ? (vue.openBlock(), vue.createBlock(_sfc_main$L, {
             key: 0,
             name: "params",
             model: _ctx.model,
@@ -3773,7 +3810,7 @@
             "params-config": paramsConfig.value,
             onChange: onChangeHandler
           }, null, 8, ["model", "size", "disabled", "params-config"])) : vue.createCommentVNode("", true),
-          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
+          vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
             key: 1,
             ref_key: "codeBlockEditor",
             ref: codeBlockEditor,
@@ -3786,7 +3823,7 @@
     }
   });
 
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceSelect"
     },
@@ -3841,12 +3878,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorEventSelect"
     },
@@ -4036,7 +4073,7 @@
         const _component_m_form_table = vue.resolveComponent("m-form-table");
         const _component_m_form_container = vue.resolveComponent("m-form-container");
         const _component_m_form_panel = vue.resolveComponent("m-form-panel");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$o, [
           isOldVersion.value ? (vue.openBlock(), vue.createBlock(_component_m_form_table, {
             key: 0,
             ref: "eventForm",
@@ -4046,7 +4083,7 @@
             model: _ctx.model,
             config: tableConfig.value,
             onChange: onChangeHandler
-          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
+          }, null, 8, ["size", "disabled", "model", "config"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$h, [
             vue.createVNode(vue.unref(design.TMagicButton), {
               class: "create-button",
               type: "primary",
@@ -4095,9 +4132,9 @@
     }
   });
 
-  const _hoisted_1$k = { class: "m-fields-key-value" };
-  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$n = { class: "m-fields-key-value" };
+  const _hoisted_2$g = /* @__PURE__ */ vue.createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorKeyValue"
     },
@@ -4142,7 +4179,7 @@
         records.value.splice(index, 1);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$n, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(records.value, (item, index) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               class: "m-fields-key-value-item",
@@ -4156,7 +4193,7 @@
                 size: _ctx.size,
                 onChange: keyChangeHandler
               }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "size"]),
-              _hoisted_2$d,
+              _hoisted_2$g,
               vue.createVNode(vue.unref(design.TMagicInput), {
                 placeholder: "value",
                 modelValue: records.value[index][1],
@@ -4195,12 +4232,12 @@
     }
   });
 
-  const _hoisted_1$j = {
+  const _hoisted_1$m = {
     key: 1,
     class: "m-fields-ui-select",
     style: { "display": "flex" }
   };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorUISelect"
     },
@@ -4289,7 +4326,7 @@
             ]),
             _: 1
           }, 8, ["icon", "disabled", "size"])
-        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
+        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$m, [
           val.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createVNode(vue.unref(design.TMagicTooltip), {
               content: "清除",
@@ -4358,7 +4395,35 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const useGetSo = (target, emit) => {
+    let getso;
+    const isDraging = vue.ref(false);
+    vue.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;
+      });
+    });
+    vue.onUnmounted(() => {
+      getso?.unset();
+      isDraging.value = false;
+    });
+    return {
+      isDraging
+    };
+  };
+
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorResizer"
     },
@@ -4366,33 +4431,12 @@
     emits: ["change"],
     setup(__props, { emit }) {
       const target = vue.ref();
-      const isDraging = vue.ref(false);
-      let getso;
-      vue.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;
-        });
-      });
-      vue.onUnmounted(() => {
-        getso?.unset();
-        isDraging.value = false;
-      });
+      const { isDraging } = useGetSo(target, emit);
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("span", {
           ref_key: "target",
           ref: target,
-          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": isDraging.value }])
+          class: vue.normalizeClass(["m-editor-resizer", { "m-editor-resizer-draging": vue.unref(isDraging) }])
         }, [
           vue.renderSlot(_ctx.$slots, "default")
         ], 2);
@@ -4400,7 +4444,7 @@
     }
   });
 
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayout"
     },
@@ -4467,7 +4511,7 @@
         resizerObserver.disconnect();
       });
       const center = vue.ref(0);
-      const changeLeft = (deltaX) => {
+      const changeLeft = ({ deltaX }) => {
         if (typeof props.left === "undefined")
           return;
         let left = Math.max(props.left + deltaX, props.minLeft) || 0;
@@ -4483,7 +4527,7 @@
           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;
@@ -4512,7 +4556,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$v, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$z, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", _ctx.centerClass]),
@@ -4521,7 +4565,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           hasRight.value && _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$v, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$z, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", _ctx.rightClass]),
               style: vue.normalizeStyle(`width: ${_ctx.right}px`)
@@ -4534,10 +4578,10 @@
     }
   });
 
-  const _hoisted_1$i = { class: "m-editor-empty-panel" };
-  const _hoisted_2$c = { class: "m-editor-empty-content" };
-  const _hoisted_3$6 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$l = { class: "m-editor-empty-panel" };
+  const _hoisted_2$f = { class: "m-editor-empty-content" };
+  const _hoisted_3$8 = /* @__PURE__ */ vue.createElementVNode("p", null, "新增页面", -1);
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAddPageBox"
     },
@@ -4557,16 +4601,16 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [
-          vue.createElementVNode("div", _hoisted_2$c, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$l, [
+          vue.createElementVNode("div", _hoisted_2$f, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
-              _hoisted_3$6
+              _hoisted_3$8
             ])
           ])
         ]);
@@ -4578,7 +4622,7 @@
   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__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFramework"
     },
@@ -4655,13 +4699,13 @@
           vue.renderSlot(_ctx.$slots, "nav"),
           vue.renderSlot(_ctx.$slots, "content-before"),
           showSrc.value ? vue.renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [
-            vue.createVNode(_sfc_main$M, {
+            vue.createVNode(_sfc_main$Q, {
               class: "m-editor-content",
               "init-values": root.value,
               options: vue.unref(codeOptions),
               onSave: saveCode
             }, null, 8, ["init-values", "options"])
-          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$u, {
+          ]) : (vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -4680,7 +4724,7 @@
             ]),
             center: vue.withCtx(() => [
               pageLength.value > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$t)
+                vue.createVNode(_sfc_main$x)
               ])
             ]),
             _: 2
@@ -4705,12 +4749,12 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _hoisted_2$e = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorToolButton"
     },
@@ -4789,7 +4833,7 @@
           _ctx.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: _ctx.data.direction || "vertical"
-          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : _ctx.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$k, vue.toDisplayString(_ctx.data.text), 1)) : _ctx.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             _ctx.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -4803,7 +4847,7 @@
                   disabled: disabled.value
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+                    _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                       key: 0,
                       icon: _ctx.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4820,7 +4864,7 @@
               disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
-                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+                _ctx.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 0,
                   icon: _ctx.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -4853,7 +4897,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$b, [
+              vue.createElementVNode("span", _hoisted_2$e, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -4870,7 +4914,7 @@
     }
   });
 
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorNavMenu"
     },
@@ -5032,7 +5076,7 @@
               style: vue.normalizeStyle(`width: ${columnWidth.value?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(buttons.value[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$v, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -5044,8 +5088,8 @@
     }
   });
 
-  const _hoisted_1$g = { class: "m-editor-props-panel" };
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$j = { class: "m-editor-props-panel" };
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorPropsPanel"
     },
@@ -5098,7 +5142,7 @@
       };
       __expose({ configForm, submit });
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$g, [
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(vue.unref(form.MForm), {
             ref_key: "configForm",
@@ -5118,7 +5162,7 @@
     }
   });
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSearchInput"
     },
@@ -5153,8 +5197,8 @@
     }
   });
 
-  const _hoisted_1$f = { xmlns: "http://www.w3.org/2000/svg" };
-  const _hoisted_2$a = /* @__PURE__ */ vue.createElementVNode("g", {
+  const _hoisted_1$i = { xmlns: "http://www.w3.org/2000/svg" };
+  const _hoisted_2$d = /* @__PURE__ */ vue.createElementVNode("g", {
     fill: "#7C878E",
     "fill-rule": "evenodd"
   }, [
@@ -5164,50 +5208,50 @@
     }),
     /* @__PURE__ */ vue.createElementVNode("path", { d: "M8 13.5L2.3 9.2 0.7 10.5 8 16 15.3 10.5 13.7 9.2z" })
   ], -1);
-  const _hoisted_3$5 = [
-    _hoisted_2$a
+  const _hoisted_3$7 = [
+    _hoisted_2$d
   ];
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorAppManageIcon"
     },
     __name: "AppManageIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$f, _hoisted_3$5);
+        return vue.openBlock(), vue.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__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
-  const _hoisted_4$3 = [
-    _hoisted_2$9
+  const _hoisted_2$c = /* @__PURE__ */ vue.createStaticVNode('<defs><rect id="path-1" x="0" y="0" width="32" height="32"></rect></defs><g id="组件规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="03图标" transform="translate(-561.000000, -2356.000000)"><g id="icon/line/Universal/code" transform="translate(561.000000, 2356.000000)"><g id="路径"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use><path d="M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z" id="形状" fill="#1D1F24" mask="url(#mask-2)"></path></g></g><g id="icon切图" transform="translate(226.000000, 1782.000000)"></g></g></g>', 2);
+  const _hoisted_4$5 = [
+    _hoisted_2$c
   ];
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeIcon"
     },
     __name: "CodeIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$e, _hoisted_4$3);
+        return vue.openBlock(), vue.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__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockList"
     },
@@ -5308,26 +5352,26 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$8, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$m, {
+              vue.createElementVNode("div", _hoisted_2$b, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$q, {
                   key: 0,
                   class: "codeIcon"
                 })) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$r, {
                   key: 1,
                   class: "compIcon"
                 })) : vue.createCommentVNode("", true),
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["name", { code: data.type === "code", hook: data.type === "key" }])
                 }, vue.toDisplayString(data.name) + " (" + vue.toDisplayString(data.id) + ")", 3),
-                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [
+                data.type === "code" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$G, {
+                      vue.createVNode(_sfc_main$K, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editCode(data.id), ["stop"])
@@ -5342,7 +5386,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$G, {
+                      vue.createVNode(_sfc_main$K, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -5356,7 +5400,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$d)
+            ], 8, _hoisted_1$g)
           ]),
           _: 3
         }, 8, ["default-expanded-keys", "data"]);
@@ -5364,8 +5408,8 @@
     }
   });
 
-  const _hoisted_1$c = { class: "search-wrapper" };
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$f = { class: "search-wrapper" };
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCodeBlockListPanel"
     },
@@ -5385,8 +5429,8 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-              vue.createElementVNode("div", _hoisted_1$c, [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+              vue.createElementVNode("div", _hoisted_1$f, [
+                vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
                 editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicButton), {
                   key: 0,
                   class: "create-code-button",
@@ -5402,7 +5446,7 @@
                 vue.renderSlot(_ctx.$slots, "code-block-panel-search")
               ])
             ]),
-            vue.createVNode(_sfc_main$l, {
+            vue.createVNode(_sfc_main$p, {
               ref_key: "codeBlockList",
               ref: codeBlockList,
               "custom-error": _ctx.customError,
@@ -5417,7 +5461,7 @@
               ]),
               _: 3
             }, 8, ["custom-error", "onEdit", "onRemove"]),
-            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$I, {
+            vue.unref(codeConfig) ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
               key: 0,
               ref_key: "codeBlockEditor",
               ref: codeBlockEditor,
@@ -5432,7 +5476,7 @@
     }
   });
 
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceConfigPanel"
     },
@@ -5486,13 +5530,13 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceList"
     },
@@ -5587,13 +5631,13 @@
               id: data.id,
               class: "list-container"
             }, [
-              vue.createElementVNode("div", _hoisted_2$7, [
-                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+              vue.createElementVNode("div", _hoisted_2$a, [
+                data.type === "code" ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 0,
                   class: "codeIcon",
                   icon: vue.unref(iconsVue.Coin)
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+                data.type === "node" ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 1,
                   class: "compIcon",
                   icon: vue.unref(iconsVue.Aim)
@@ -5601,14 +5645,14 @@
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(["name", { code: data.type === "ds", hook: data.type === "key" }])
                 }, vue.toDisplayString(data.type === "key" ? data.name : `${data.name}(${data.id})`), 3),
-                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [
+                data.type === "ds" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [
                   vue.createVNode(vue.unref(design.TMagicTooltip), {
                     effect: "dark",
                     content: editable.value ? "编辑" : "查看",
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$G, {
+                      vue.createVNode(_sfc_main$K, {
                         icon: editable.value ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => editHandler(`${data.id}`), ["stop"])
@@ -5623,7 +5667,7 @@
                     placement: "bottom"
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_sfc_main$G, {
+                      vue.createVNode(_sfc_main$K, {
                         icon: vue.unref(iconsVue.Close),
                         class: "edit-icon",
                         onClick: vue.withModifiers(($event) => removeHandler(`${data.id}`), ["stop"])
@@ -5637,7 +5681,7 @@
                   })
                 ])) : vue.createCommentVNode("", true)
               ])
-            ], 8, _hoisted_1$b)
+            ], 8, _hoisted_1$e)
           ]),
           _: 3
         }, 8, ["data"]);
@@ -5645,9 +5689,9 @@
     }
   });
 
-  const _hoisted_1$a = { class: "search-wrapper" };
-  const _hoisted_2$6 = { class: "data-source-list-panel-add-menu" };
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = { class: "search-wrapper" };
+  const _hoisted_2$9 = { class: "data-source-list-panel-add-menu" };
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorDataSourceListPanel"
     },
@@ -5707,8 +5751,8 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "data-source-list-panel m-editor-dep-list-panel" }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$a, [
-              vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            vue.createElementVNode("div", _hoisted_1$d, [
+              vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
               editable.value ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicPopover), {
                 key: 0,
                 placement: "right"
@@ -5725,9 +5769,9 @@
                   })
                 ]),
                 default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_2$6, [
+                  vue.createElementVNode("div", _hoisted_2$9, [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(datasourceTypeList.value, (item, index) => {
-                      return vue.openBlock(), vue.createBlock(_sfc_main$r, {
+                      return vue.openBlock(), vue.createBlock(_sfc_main$v, {
                         data: {
                           type: "button",
                           text: item.text,
@@ -5743,11 +5787,11 @@
                 _: 1
               })) : vue.createCommentVNode("", true)
             ]),
-            vue.createVNode(_sfc_main$i, {
+            vue.createVNode(_sfc_main$m, {
               onEdit: editHandler,
               onRemove: removeHandler
             }),
-            vue.createVNode(_sfc_main$j, {
+            vue.createVNode(_sfc_main$n, {
               ref_key: "editDialog",
               ref: editDialog,
               disabled: !editable.value,
@@ -5762,9 +5806,9 @@
     }
   });
 
-  const _hoisted_1$9 = ["onClick", "onDragstart"];
-  const _hoisted_2$5 = ["title"];
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = ["onClick", "onDragstart"];
+  const _hoisted_2$8 = ["title"];
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorComponentListPanel"
     },
@@ -5843,7 +5887,7 @@
               "model-value": collapseValue.value
             }, {
               default: vue.withCtx(() => [
-                vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+                vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(list.value, (group, index) => {
                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                     group.items && group.items.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicCollapseItem), {
@@ -5851,7 +5895,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -5866,15 +5910,15 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$G, {
+                              vue.createVNode(_sfc_main$K, {
                                 title: item.text,
                                 icon: item.icon
                               }, null, 8, ["title", "icon"]),
                               vue.createElementVNode("span", {
                                 title: item.text
-                              }, vue.toDisplayString(item.text), 9, _hoisted_2$5)
+                              }, vue.toDisplayString(item.text), 9, _hoisted_2$8)
                             ])
-                          ], 40, _hoisted_1$9);
+                          ], 40, _hoisted_1$c);
                         }), 128))
                       ]),
                       _: 2
@@ -5891,16 +5935,18 @@
     }
   });
 
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$j = /* @__PURE__ */ vue.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 = vue.ref();
@@ -5908,10 +5954,14 @@
       const subMenu = vue.ref();
       const visible = vue.ref(false);
       const subMenuData = vue.ref([]);
-      const menuStyle = vue.ref({
-        left: "0",
-        top: "0"
+      const menuPosition = vue.ref({
+        left: 0,
+        top: 0
       });
+      const menuStyle = vue.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)
@@ -5920,7 +5970,14 @@
         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;
@@ -5930,19 +5987,25 @@
         }
         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;
+          }
           vue.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);
@@ -5967,64 +6030,77 @@
           }
         }, 0);
       };
+      const mouseenterHandler = () => {
+        emit("mouseenter");
+      };
       vue.onMounted(() => {
         if (props.isSubMenu)
           return;
-        globalThis.addEventListener("mousedown", hideHandler, true);
+        globalThis.addEventListener("mousedown", outsideClickhideHandler, true);
       });
       vue.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 = vue.resolveComponent("content-menu", true);
-        return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: "magic-editor-content-menu",
-          ref_key: "menu",
-          ref: menu,
-          style: vue.normalizeStyle(menuStyle.value)
-        }, [
-          vue.createElementVNode("div", null, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
-              return vue.openBlock(), vue.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 vue.openBlock(), vue.createBlock(vue.Transition, { name: "fade" }, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createElementVNode("div", {
+              class: "magic-editor-content-menu",
+              ref_key: "menu",
+              ref: menu,
+              style: vue.normalizeStyle(menuStyle.value),
+              onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler())
+            }, [
+              vue.renderSlot(_ctx.$slots, "title"),
+              vue.createElementVNode("div", null, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menuData, (item, index) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$v, {
+                    "event-type": "mouseup",
+                    ref_for: true,
+                    ref_key: "buttons",
+                    ref: buttons,
+                    class: vue.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))
+              ]),
+              (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+                subMenuData.value.length ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
+              ]))
+            ], 36), [
+              [vue.vShow, visible.value]
+            ])
           ]),
-          (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-            subMenuData.value.length ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
-          ]))
-        ], 4)), [
-          [vue.vShow, visible.value]
-        ]) : vue.createCommentVNode("", true);
+          _: 3
+        });
       };
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$b = {
     width: "1em",
     height: "1em",
     viewBox: "0 0 16 16",
@@ -6032,26 +6108,26 @@
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_2$4 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_2$7 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("path", {
+  const _hoisted_3$4 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorFolderMinusIcon"
     },
     __name: "FolderMinusIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$8, _hoisted_4$2);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, _hoisted_4$4);
       };
     }
   });
@@ -6131,7 +6207,7 @@
     };
   };
 
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerMenu"
     },
@@ -6194,7 +6270,7 @@
         {
           type: "button",
           text: "全部折叠",
-          icon: _sfc_main$e,
+          icon: _sfc_main$i,
           display: () => utils.isPage(node.value),
           handler: () => {
             emit("collapse-all");
@@ -6220,7 +6296,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$f, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$j, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu,
@@ -6230,8 +6306,8 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "layer-node-tool" };
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "layer-node-tool" };
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerNode",
     props: {
       data: {}
@@ -6252,7 +6328,7 @@
         const _component_el_icon = vue.resolveComponent("el-icon");
         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
           vue.createElementVNode("div", null, vue.toDisplayString(`${_ctx.data.name} (${_ctx.data.id})`), 1),
-          vue.createElementVNode("div", _hoisted_1$7, [
+          vue.createElementVNode("div", _hoisted_1$a, [
             _ctx.data.type !== "page" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               _ctx.data.visible === false ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
                 key: 0,
@@ -6281,9 +6357,9 @@
     }
   });
 
-  const _hoisted_1$6 = ["id", "onMouseenter"];
+  const _hoisted_1$9 = ["id", "onMouseenter"];
   const throttleTime = 150;
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorLayerPanel"
     },
@@ -6531,7 +6607,7 @@
         return vue.openBlock(), vue.createBlock(vue.unref(design.TMagicScrollbar), { class: "magic-editor-layer-panel" }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, "layer-panel-header"),
-            vue.createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
+            vue.createVNode(_sfc_main$s, { onSearch: filterTextChangeHandler }),
             values.value.length ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTree), {
               key: 0,
               class: "magic-editor-layer-tree",
@@ -6571,14 +6647,14 @@
                     node,
                     data
                   }, () => [
-                    vue.createVNode(_sfc_main$c, { data }, null, 8, ["data"])
+                    vue.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"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$d, {
+              vue.createVNode(_sfc_main$h, {
                 ref_key: "menu",
                 ref: menu,
                 "layer-content-menu": _ctx.layerContentMenu,
@@ -6592,17 +6668,17 @@
     }
   });
 
-  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__ */ vue.defineComponent({
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorSidebar"
     },
@@ -6621,7 +6697,7 @@
             type: "component",
             icon: iconsVue.Goods,
             text: "组件",
-            component: _sfc_main$g,
+            component: _sfc_main$k,
             slots: {}
           },
           layer: {
@@ -6632,7 +6708,7 @@
             props: {
               layerContentMenu: props.layerContentMenu
             },
-            component: _sfc_main$b,
+            component: _sfc_main$f,
             slots: {}
           },
           "code-block": {
@@ -6640,7 +6716,7 @@
             type: "component",
             icon: iconsVue.EditPen,
             text: "代码编辑",
-            component: _sfc_main$k,
+            component: _sfc_main$o,
             slots: {}
           },
           "data-source": {
@@ -6648,7 +6724,7 @@
             type: "component",
             icon: iconsVue.Coin,
             text: "数据源",
-            component: _sfc_main$h,
+            component: _sfc_main$l,
             slots: {}
           }
         };
@@ -6665,20 +6741,20 @@
         activeTabName
       });
       return (_ctx, _cache) => {
-        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-          vue.createElementVNode("div", _hoisted_2$3, [
+        return _ctx.data.type === "tabs" && _ctx.data.items.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
+          vue.createElementVNode("div", _hoisted_2$6, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 class: vue.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 ? (vue.openBlock(), vue.createBlock(_sfc_main$G, {
+                config.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$K, {
                   key: 0,
                   icon: config.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-                config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
-              ], 10, _hoisted_3$1);
+                config.text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, vue.toDisplayString(config.text), 1)) : vue.createCommentVNode("", true)
+              ], 10, _hoisted_3$3);
             }), 128))
           ]),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(sideBarItems.value, (config, index) => {
@@ -6757,304 +6833,42 @@
     }
   });
 
-  const _hoisted_1$4 = {
-    key: 0,
-    class: "m-editor-breadcrumb"
-  };
-  const _hoisted_2$2 = { key: 0 };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorBreadcrumb"
-    },
-    __name: "Breadcrumb",
-    setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const node = vue.computed(() => editorService?.get("node"));
-      const nodes = vue.computed(() => editorService?.get("nodes") || []);
-      const root = vue.computed(() => editorService?.get("root"));
-      const path = vue.computed(() => utils.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
-            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-              key: item.id
-            }, [
-              vue.createVNode(vue.unref(design.TMagicButton), {
-                text: "",
-                disabled: item.id === node.value?.id,
-                onClick: ($event) => select(item)
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(item.name), 1)
-                ]),
-                _: 2
-              }, 1032, ["disabled", "onClick"]),
-              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, "/")) : vue.createCommentVNode("", true)
-            ], 64);
-          }), 128))
-        ])) : vue.createCommentVNode("", true);
-      };
-    }
-  });
-
-  const _hoisted_1$3 = {
-    key: 1,
-    style: { "width": "21px" }
-  };
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPageBarScrollContainer"
-    },
-    __name: "PageBarScrollContainer",
-    setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const uiService = services?.uiService;
-      const itemsContainer = vue.ref();
-      const canScroll = vue.ref(false);
-      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
-      const itemsContainerWidth = vue.ref(0);
-      const setCanScroll = () => {
-        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
-        vue.nextTick(() => {
-          if (itemsContainer.value) {
-            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
-          }
-        });
-      };
-      const resizeObserver = new ResizeObserver(() => {
-        setCanScroll();
-      });
-      const pageBar = vue.ref();
-      vue.onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
-      });
-      vue.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 = vue.computed(() => editorService?.get("pageLength"));
-      vue.watch(pageLength, (length = 0, preLength = 0) => {
-        setTimeout(() => {
-          setCanScroll();
-          if (length < preLength) {
-            scroll("start");
-          } else {
-            scroll("end");
-          }
-        });
-      });
-      const addPage = () => {
-        if (!editorService)
-          return;
-        const root = vue.toRaw(editorService.get("root"));
-        if (!root)
-          throw new Error("root 不能为空");
-        const pageConfig = {
-          type: schema.NodeType.PAGE,
-          name: generatePageNameByApp(root)
-        };
-        editorService.add(pageConfig);
-      };
-      return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: "m-editor-page-bar",
-          ref_key: "pageBar",
-          ref: pageBar
-        }, [
-          showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            id: "m-editor-page-bar-add-icon",
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: addPage
-          }, [
-            vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
-          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3)),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 2,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
-          }, [
-            vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true),
-          pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 3,
-            class: "m-editor-page-bar-items",
-            ref_key: "itemsContainer",
-            ref: itemsContainer,
-            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
-          }, [
-            vue.renderSlot(_ctx.$slots, "default")
-          ], 4)) : vue.createCommentVNode("", true),
-          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 4,
-            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
-            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
-          }, [
-            vue.createVNode(_sfc_main$G, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
-          ])) : vue.createCommentVNode("", true)
-        ], 512);
-      };
-    }
-  });
-
-  const _hoisted_1$2 = ["onClick"];
-  const _hoisted_2$1 = { class: "m-editor-page-bar-title" };
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
-    ...{
-      name: "MEditorPageBar"
-    },
-    __name: "PageBar",
-    setup(__props) {
-      const services = vue.inject("services");
-      const editorService = services?.editorService;
-      const root = vue.computed(() => editorService?.get("root"));
-      const page = vue.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 vue.openBlock(), vue.createBlock(_sfc_main$8, null, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(root.value && root.value.items || [], (item) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
-                key: item.key,
-                onClick: ($event) => switchPage(item)
-              }, [
-                vue.createElementVNode("div", _hoisted_2$1, [
-                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-                    vue.createVNode(vue.unref(design.TMagicTooltip), {
-                      effect: "dark",
-                      placement: "top-start",
-                      content: item.name
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.id), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["content"])
-                  ])
-                ]),
-                vue.createVNode(vue.unref(design.TMagicPopover), {
-                  "popper-class": "page-bar-popover",
-                  placement: "top",
-                  width: 160,
-                  trigger: "hover"
-                }, {
-                  reference: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
-                      default: vue.withCtx(() => [
-                        vue.createVNode(vue.unref(iconsVue.CaretBottom))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", null, [
-                      vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$r, {
-                          data: {
-                            type: "button",
-                            text: "复制",
-                            icon: vue.unref(iconsVue.DocumentCopy),
-                            handler: () => copy(item)
-                          }
-                        }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$r, {
-                          data: {
-                            type: "button",
-                            text: "删除",
-                            icon: vue.unref(iconsVue.Delete),
-                            handler: () => remove(item)
-                          }
-                        }, null, 8, ["data"])
-                      ])
-                    ])
-                  ]),
-                  _: 2
-                }, 1024)
-              ], 10, _hoisted_1$2);
-            }), 128))
-          ]),
-          _: 3
-        });
-      };
-    }
-  });
-
-  class ScrollViewer extends events.EventEmitter {
-    container;
-    target;
-    zoom = 1;
-    scrollLeft = 0;
-    scrollTop = 0;
-    scrollHeight = 0;
-    scrollWidth = 0;
-    width = 0;
-    height = 0;
-    translateXCorrectionValue = 0;
-    translateYCorrectionValue = 0;
-    correctionScrollSize = {
-      width: 0,
-      height: 0
-    };
-    resizeObserver = new ResizeObserver(() => {
-      this.setSize();
-      this.setScrollSize();
-    });
-    constructor(options) {
-      super();
-      this.container = options.container;
-      this.target = options.target;
-      this.zoom = options.zoom;
-      if (this.correctionScrollSize) {
-        this.correctionScrollSize = {
-          ...this.correctionScrollSize,
-          ...options.correctionScrollSize
-        };
-      }
-      this.container.addEventListener("wheel", this.wheelHandler, false);
-      this.setSize();
-      this.setScrollSize();
-      this.resizeObserver.observe(this.container);
-      this.resizeObserver.observe(this.target);
+  class ScrollViewer extends events.EventEmitter {
+    container;
+    target;
+    zoom = 1;
+    scrollLeft = 0;
+    scrollTop = 0;
+    scrollHeight = 0;
+    scrollWidth = 0;
+    width = 0;
+    height = 0;
+    translateXCorrectionValue = 0;
+    translateYCorrectionValue = 0;
+    correctionScrollSize = {
+      width: 0,
+      height: 0
+    };
+    resizeObserver = new ResizeObserver(() => {
+      this.setSize();
+      this.setScrollSize();
+    });
+    constructor(options) {
+      super();
+      this.container = options.container;
+      this.target = options.target;
+      this.zoom = options.zoom;
+      if (this.correctionScrollSize) {
+        this.correctionScrollSize = {
+          ...this.correctionScrollSize,
+          ...options.correctionScrollSize
+        };
+      }
+      this.container.addEventListener("wheel", this.wheelHandler, false);
+      this.setSize();
+      this.setScrollSize();
+      this.resizeObserver.observe(this.container);
+      this.resizeObserver.observe(this.target);
     }
     destroy() {
       this.resizeObserver.disconnect();
@@ -7147,7 +6961,7 @@
     };
   }
 
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollBar"
     },
@@ -7236,7 +7050,7 @@
 
   const ScrollBar_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorScrollViewer"
     },
@@ -7322,14 +7136,14 @@
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4),
-          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+          scrollHeight.value > _ctx.wrapHeight ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
             key: 0,
             "scroll-size": scrollHeight.value,
             size: _ctx.wrapHeight,
             pos: vOffset.value,
             onScroll: vScrollHandler
           }, null, 8, ["scroll-size", "size", "pos"])) : vue.createCommentVNode("", true),
-          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$6, {
+          scrollWidth.value > _ctx.wrapWidth ? (vue.openBlock(), vue.createBlock(_sfc_main$d, {
             key: 1,
             "is-horizontal": true,
             "scroll-size": scrollWidth.value,
@@ -7507,50 +7321,340 @@
     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__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2 4H21V6H2V4Z",
-    fill: "black",
-    "fill-opacity": "0.9"
+  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
   }, null, -1);
-  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M5 11H18V13H5V11Z",
-    fill: "black",
-    "fill-opacity": "0.9"
+  const _hoisted_3$2 = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("line", {
+    x1: "9",
+    y1: "15",
+    x2: "4.5",
+    y2: "19.5"
   }, null, -1);
-  const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    "fill-rule": "evenodd",
-    "clip-rule": "evenodd",
-    d: "M2 18H21V20H2V18Z",
-    fill: "black",
-    "fill-opacity": "0.9"
+  const _hoisted_5$2 = /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "14.5",
+    y1: "4",
+    x2: "20",
+    y2: "9.5"
+  }, null, -1);
+  const _hoisted_6$1 = [
+    _hoisted_2$5,
+    _hoisted_3$2,
+    _hoisted_4$2,
+    _hoisted_5$2
+  ];
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPinIcon"
+    },
+    __name: "PinIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, _hoisted_6$1);
+      };
+    }
+  });
+
+  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__ */ vue.createElementVNode("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }, null, -1);
+  const _hoisted_3$1 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M9 4v6l-2 4v2h10v-2l-2 -4v-6" }, null, -1);
+  const _hoisted_4$1 = /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "12",
+    y1: "16",
+    x2: "12",
+    y2: "21"
+  }, null, -1);
+  const _hoisted_5$1 = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPinnedIcon"
+    },
+    __name: "PinnedIcon",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$6, _hoisted_6);
+      };
+    }
+  });
+
+  const _hoisted_1$5 = /* @__PURE__ */ vue.createElementVNode("span", null, "可选组件", -1);
+  const _hoisted_2$3 = { style: { "margin-right": "10px" } };
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorNodeListMenuTitle"
+    },
+    __name: "NodeListMenuTitle",
+    props: {
+      pinned: { type: Boolean }
+    },
+    emits: ["close", "update:pinned", "change"],
+    setup(__props, { emit }) {
+      const props = __props;
+      const pinHandler = () => {
+        emit("update:pinned", !props.pinned);
+      };
+      const closeHandler = () => {
+        emit("close");
+      };
+      const target = vue.ref();
+      useGetSo(target, emit);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.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
+        }, [
+          vue.createVNode(vue.unref(design.TMagicTooltip), {
+            placement: "top",
+            content: _ctx.pinned ? "取消置于顶层自动隐藏" : "置于顶层不消失"
+          }, {
+            default: vue.withCtx(() => [
+              vue.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,
+          vue.createElementVNode("div", _hoisted_2$3, [
+            vue.createVNode(vue.unref(design.TMagicButton), {
+              text: "",
+              size: "small",
+              onClick: closeHandler
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Close) }, null, 8, ["icon"])
+              ]),
+              _: 1
+            })
+          ])
+        ], 512);
+      };
+    }
+  });
+
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    __name: "NodeListMenu",
+    props: {
+      isMultiSelect: { type: Boolean }
+    },
+    setup(__props) {
+      const props = __props;
+      const menu = vue.ref();
+      const nodeList = vue.ref([]);
+      const pinned = vue.ref(false);
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const componentListService = services?.componentListService;
+      const stage = vue.computed(() => editorService?.get("stage"));
+      const page = vue.computed(() => editorService?.get("page"));
+      const node = vue.computed(() => editorService?.get("node"));
+      let timeout = null;
+      const cancel = () => {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+        }
+        if (pinned.value) {
+          return;
+        }
+        nodeList.value = [];
+        menu.value?.hide();
+      };
+      const unWatch = vue.watch(
+        stage,
+        (stage2) => {
+          if (!stage2)
+            return;
+          stage2.on("drag-start", () => {
+            cancel();
+          });
+          stage2.on("mousemove", (event) => {
+            cancel();
+            if (props.isMultiSelect || stage2.getDragStatus() !== StageCore.StageDragStatus.END) {
+              return;
+            }
+            timeout = globalThis.setTimeout(() => {
+              const els = stage2?.renderer.getElementsFromPoint(event);
+              const nodes = utils.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", () => {
+            cancel();
+          });
+          unWatch();
+        },
+        {
+          immediate: true
+        }
+      );
+      const componentMap = vue.computed(() => {
+        const map = {};
+        componentListService?.getList().forEach((group) => {
+          group.items.forEach((item) => {
+            map[item.type] = item;
+          });
+        });
+        return map;
+      });
+      const menuData = vue.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 = () => {
+        globalThis.setTimeout(() => {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+          }
+        }, 300);
+      };
+      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 vue.openBlock(), vue.createBlock(_sfc_main$j, {
+          ref_key: "menu",
+          ref: menu,
+          "menu-data": menuData.value,
+          active: node.value?.id,
+          "auto-hide": !pinned.value,
+          onMouseenter: _cache[1] || (_cache[1] = ($event) => mouseenterHandler())
+        }, {
+          title: vue.withCtx(() => [
+            vue.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__ */ vue.createElementVNode("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2 4H21V6H2V4Z",
+    fill: "black",
+    "fill-opacity": "0.9"
+  }, null, -1);
+  const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5 11H18V13H5V11Z",
+    fill: "black",
+    "fill-opacity": "0.9"
+  }, null, -1);
+  const _hoisted_4 = /* @__PURE__ */ vue.createElementVNode("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2 18H21V20H2V18Z",
+    fill: "black",
+    "fill-opacity": "0.9"
   }, null, -1);
   const _hoisted_5 = [
-    _hoisted_2,
+    _hoisted_2$2,
     _hoisted_3,
     _hoisted_4
   ];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorCenterIcon"
     },
     __name: "CenterIcon",
     setup(__props) {
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$1, _hoisted_5);
+        return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, _hoisted_5);
       };
     }
   });
 
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorViewerMenu"
     },
@@ -7573,7 +7677,7 @@
         {
           type: "button",
           text: "水平居中",
-          icon: vue.markRaw(_sfc_main$4),
+          icon: vue.markRaw(_sfc_main$7),
           display: () => canCenter.value,
           handler: () => {
             if (!nodes.value)
@@ -7669,7 +7773,7 @@
       };
       __expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$f, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$j, {
           "menu-data": menuData.value,
           ref_key: "menu",
           ref: menu
@@ -7678,7 +7782,7 @@
     }
   });
 
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "MEditorStage"
     },
@@ -7818,7 +7922,7 @@
         }
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$5, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
           class: "m-editor-stage",
           ref_key: "stageWrap",
           ref: stageWrap,
@@ -7845,12 +7949,16 @@
               onDragover: dragoverHandler
             }, null, 36),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$3, {
+              vue.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"]),
+              vue.createVNode(_sfc_main$8, {
+                ref: "nodeList",
+                "is-multi-select": isMultiSelect.value
+              }, null, 8, ["is-multi-select"])
             ]))
           ]),
           _: 1
@@ -7859,6 +7967,268 @@
     }
   });
 
+  const _hoisted_1$3 = {
+    key: 0,
+    class: "m-editor-breadcrumb"
+  };
+  const _hoisted_2$1 = { key: 0 };
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorBreadcrumb"
+    },
+    __name: "Breadcrumb",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const node = vue.computed(() => editorService?.get("node"));
+      const nodes = vue.computed(() => editorService?.get("nodes") || []);
+      const root = vue.computed(() => editorService?.get("root"));
+      const path = vue.computed(() => utils.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 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(path.value, (item, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: item.id
+            }, [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                text: "",
+                disabled: item.id === node.value?.id,
+                onClick: ($event) => select(item)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["disabled", "onClick"]),
+              index < path.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
+  const _hoisted_1$2 = {
+    key: 1,
+    style: { "width": "21px" }
+  };
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBarScrollContainer"
+    },
+    __name: "PageBarScrollContainer",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const uiService = services?.uiService;
+      const itemsContainer = vue.ref();
+      const canScroll = vue.ref(false);
+      const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
+      const itemsContainerWidth = vue.ref(0);
+      const setCanScroll = () => {
+        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+        vue.nextTick(() => {
+          if (itemsContainer.value) {
+            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+          }
+        });
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        setCanScroll();
+      });
+      const pageBar = vue.ref();
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
+      });
+      vue.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 = vue.computed(() => editorService?.get("pageLength"));
+      vue.watch(pageLength, (length = 0, preLength = 0) => {
+        setTimeout(() => {
+          setCanScroll();
+          if (length < preLength) {
+            scroll("start");
+          } else {
+            scroll("end");
+          }
+        });
+      });
+      const addPage = () => {
+        if (!editorService)
+          return;
+        const root = vue.toRaw(editorService.get("root"));
+        if (!root)
+          throw new Error("root 不能为空");
+        const pageConfig = {
+          type: schema.NodeType.PAGE,
+          name: generatePageNameByApp(root)
+        };
+        editorService.add(pageConfig);
+      };
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "m-editor-page-bar",
+          ref_key: "pageBar",
+          ref: pageBar
+        }, [
+          showAddPageButton.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            id: "m-editor-page-bar-add-icon",
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: addPage
+          }, [
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+          ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2)),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 2,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
+          }, [
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true),
+          pageLength.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 3,
+            class: "m-editor-page-bar-items",
+            ref_key: "itemsContainer",
+            ref: itemsContainer,
+            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)) : vue.createCommentVNode("", true),
+          canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 4,
+            class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
+            onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
+          }, [
+            vue.createVNode(_sfc_main$K, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+          ])) : vue.createCommentVNode("", true)
+        ], 512);
+      };
+    }
+  });
+
+  const _hoisted_1$1 = ["onClick"];
+  const _hoisted_2 = { class: "m-editor-page-bar-title" };
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "MEditorPageBar"
+    },
+    __name: "PageBar",
+    setup(__props) {
+      const services = vue.inject("services");
+      const editorService = services?.editorService;
+      const root = vue.computed(() => editorService?.get("root"));
+      const page = vue.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 vue.openBlock(), vue.createBlock(_sfc_main$3, null, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(root.value && root.value.items || [], (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                class: vue.normalizeClass(["m-editor-page-bar-item", { active: page.value?.id === item.id }]),
+                key: item.key,
+                onClick: ($event) => switchPage(item)
+              }, [
+                vue.createElementVNode("div", _hoisted_2, [
+                  vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+                    vue.createVNode(vue.unref(design.TMagicTooltip), {
+                      effect: "dark",
+                      placement: "top-start",
+                      content: item.name
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("span", null, vue.toDisplayString(item.name || item.id), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["content"])
+                  ])
+                ]),
+                vue.createVNode(vue.unref(design.TMagicPopover), {
+                  "popper-class": "page-bar-popover",
+                  placement: "top",
+                  width: 160,
+                  trigger: "hover"
+                }, {
+                  reference: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(design.TMagicIcon), { class: "m-editor-page-bar-menu-icon" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.CaretBottom))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode("div", null, [
+                      vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
+                        vue.createVNode(_sfc_main$v, {
+                          data: {
+                            type: "button",
+                            text: "复制",
+                            icon: vue.unref(iconsVue.DocumentCopy),
+                            handler: () => copy(item)
+                          }
+                        }, null, 8, ["data"]),
+                        vue.createVNode(_sfc_main$v, {
+                          data: {
+                            type: "button",
+                            text: "删除",
+                            icon: vue.unref(iconsVue.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__ */ vue.defineComponent({
     ...{
@@ -7873,15 +8243,15 @@
       const page = vue.computed(() => services?.editorService.get("page"));
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-          vue.createVNode(_sfc_main$9),
+          vue.createVNode(_sfc_main$4),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
-            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            page.value ? (vue.openBlock(), vue.createBlock(_sfc_main$5, {
               key: 0,
               "stage-content-menu": _ctx.stageContentMenu
             }, null, 8, ["stage-content-menu"])) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "workspace-content"),
-          vue.createVNode(_sfc_main$7, null, {
+          vue.createVNode(_sfc_main$2, null, {
             "page-bar-title": vue.withCtx(({ page: page2 }) => [
               vue.renderSlot(_ctx.$slots, "page-bar-title", { page: page2 })
             ]),
@@ -9129,11 +9499,11 @@
   const _sfc_main = vue.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"],
@@ -9298,58 +9668,58 @@
       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);
     }
   };
 
   exports.CODE_DRAFT_STORAGE_KEY = CODE_DRAFT_STORAGE_KEY;
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockEditor = _sfc_main$I;
-  exports.CodeBlockList = _sfc_main$l;
-  exports.CodeBlockListPanel = _sfc_main$k;
+  exports.CodeBlockEditor = _sfc_main$M;
+  exports.CodeBlockList = _sfc_main$p;
+  exports.CodeBlockListPanel = _sfc_main$o;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
-  exports.CodeSelect = _sfc_main$J;
-  exports.CodeSelectCol = _sfc_main$F;
+  exports.CodeSelect = _sfc_main$N;
+  exports.CodeSelectCol = _sfc_main$J;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$g;
-  exports.ContentMenu = _sfc_main$f;
-  exports.DataSourceFieldSelect = _sfc_main$D;
-  exports.DataSourceFields = _sfc_main$E;
-  exports.DataSourceInput = _sfc_main$C;
-  exports.DataSourceMethodSelect = _sfc_main$A;
-  exports.DataSourceMethods = _sfc_main$B;
-  exports.DataSourceSelect = _sfc_main$z;
+  exports.ComponentListPanel = _sfc_main$k;
+  exports.ContentMenu = _sfc_main$j;
+  exports.DataSourceFieldSelect = _sfc_main$H;
+  exports.DataSourceFields = _sfc_main$I;
+  exports.DataSourceInput = _sfc_main$G;
+  exports.DataSourceMethodSelect = _sfc_main$E;
+  exports.DataSourceMethods = _sfc_main$F;
+  exports.DataSourceSelect = _sfc_main$D;
   exports.DepTargetType = DepTargetType;
-  exports.EventSelect = _sfc_main$y;
+  exports.EventSelect = _sfc_main$C;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$G;
+  exports.Icon = _sfc_main$K;
   exports.KeyBindingCommand = KeyBindingCommand;
-  exports.KeyValue = _sfc_main$x;
+  exports.KeyValue = _sfc_main$B;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$b;
+  exports.LayerPanel = _sfc_main$f;
   exports.Layout = Layout;
-  exports.LayoutContainer = _sfc_main$u;
-  exports.PropsPanel = _sfc_main$p;
-  exports.Resizer = _sfc_main$v;
-  exports.SplitView = _sfc_main$u;
-  exports.TMagicCodeEditor = _sfc_main$M;
+  exports.LayoutContainer = _sfc_main$y;
+  exports.PropsPanel = _sfc_main$t;
+  exports.Resizer = _sfc_main$z;
+  exports.SplitView = _sfc_main$y;
+  exports.TMagicCodeEditor = _sfc_main$Q;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$r;
+  exports.ToolButton = _sfc_main$v;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
   exports.beforePaste = beforePaste;