@tmagic/editor 1.2.0-beta.7 → 1.2.0-beta.9

package/dist/tmagic-editor.umd.js

@@ -30,7 +30,7 @@
   const Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   const KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
 
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "Code",
     props: {
       model: null,
@@ -60,7 +60,7 @@
     }
   });
 
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeLink",
     props: {
       config: null,
@@ -171,15 +171,15 @@
     return CodeSelectOp2;
   })(CodeSelectOp || {});
 
-  const _hoisted_1$d = { class: "tool-bar" };
-  const _hoisted_2$5 = /* @__PURE__ */ vue.createElementVNode("path", {
+  const _hoisted_1$e = { class: "tool-bar" };
+  const _hoisted_2$6 = /* @__PURE__ */ vue.createElementVNode("path", {
     fill: "currentColor",
     d: "m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
   }, null, -1);
   const _hoisted_3$3 = [
-    _hoisted_2$5
+    _hoisted_2$6
   ];
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeSelect",
     props: {
       config: null,
@@ -192,6 +192,7 @@
     setup(__props, { emit }) {
       const props = __props;
       const services = vue.inject("services");
+      const form = vue.inject("mForm");
       const selectConfig = vue.computed(() => {
         const defaultConfig = {
           multiple: true,
@@ -214,11 +215,12 @@
       });
       const fieldKey = vue.ref("");
       const multiple = vue.ref(true);
-      const combineIds = vue.ref([]);
-      let lastTagSnapshot = lodashEs.cloneDeep(props.model[props.name]) || [];
+      const lastTagSnapshot = vue.ref([]);
       vue.watchEffect(async () => {
+        if (!props.model[props.name])
+          return;
         const combineNames = await Promise.all(
-          combineIds.value.map(async (id) => {
+          props.model[props.name].map(async (id) => {
             const { name = "" } = await services?.codeBlockService.getCodeContentById(id) || {};
             return name;
           })
@@ -229,7 +231,6 @@
         let codeIds = value;
         if (typeof value === "string") {
           multiple.value = false;
-          lastTagSnapshot = [lastTagSnapshot];
           codeIds = value ? [value] : [];
         }
         await setCombineRelation(codeIds);
@@ -240,25 +241,20 @@
         let opFlag = CodeSelectOp.CHANGE;
         let diffValues = codeIds;
         if (multiple.value) {
-          opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-          diffValues = lodashEs.xor(codeIds, lastTagSnapshot);
+          lastTagSnapshot.value = form?.initValues[props.name] || [];
+          opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+          diffValues = lodashEs.xor(codeIds, lastTagSnapshot.value);
         }
         await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
-        lastTagSnapshot = codeIds;
-        await setCombineIds(codeIds);
-      };
-      const setCombineIds = async (codeIds) => {
-        combineIds.value = codeIds;
-        await services?.codeBlockService.setCombineIds(codeIds);
       };
       const viewHandler = async () => {
         if (props.model[props.name].length === 0) {
           design.tMagicMessage.error("\u8BF7\u5148\u7ED1\u5B9A\u4EE3\u7801\u5757");
           return;
         }
-        await setCombineIds(props.model[props.name]);
+        await services?.codeBlockService.setCombineIds(props.model[props.name]);
         await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-        services?.codeBlockService.setCodeEditorContent(true, combineIds.value[0]);
+        services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
       };
       return (_ctx, _cache) => {
         const _component_m_fields_select = vue.resolveComponent("m-fields-select");
@@ -278,7 +274,7 @@
               }, null, 8, ["config", "model", "prop", "name", "size"])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_1$d, [
+              vue.createElementVNode("div", _hoisted_1$e, [
                 vue.createVNode(vue.unref(design.TMagicTooltip), {
                   class: "tool-item",
                   effect: "dark",
@@ -306,8 +302,8 @@
     }
   });
 
-  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "UISelect",
     props: {
       config: null,
@@ -370,7 +366,7 @@
             style: { "padding": "0" }
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1$c
+              _hoisted_1$d
             ]),
             _: 1
           }, 8, ["icon"])
@@ -418,7 +414,7 @@
 
   const UISelect_vue_vue_type_style_index_0_lang = '';
 
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeEditor",
     props: {
       initValues: null,
@@ -548,8 +544,8 @@
   };
   const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-  const _hoisted_1$b = ["src"];
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$c = ["src"];
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "Icon",
     props: {
       icon: null
@@ -569,7 +565,7 @@
           class: "magic-editor-icon"
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$b)
+            vue.createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
           ]),
           _: 1
         })) : typeof __props.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
@@ -2430,6 +2426,11 @@
     stage.on("sort", (ev) => {
       editorService.sort(ev.src, ev.dist);
     });
+    stage.on("select-parent", () => {
+      const parent = editorService.get("parent");
+      editorService.select(parent);
+      editorService.get("stage").select(parent.id);
+    });
     stage.on("changeGuides", (e) => {
       uiService.set("showGuides", true);
       if (!root.value || !page.value)
@@ -2446,10 +2447,10 @@
     return stage;
   };
 
-  const _hoisted_1$a = { class: "m-editor-empty-panel" };
-  const _hoisted_2$4 = { class: "m-editor-empty-content" };
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
+  const _hoisted_2$5 = { class: "m-editor-empty-content" };
   const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     __name: "AddPageBox",
     setup(__props) {
       const services = vue.inject("services");
@@ -2463,14 +2464,14 @@
         });
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-          vue.createElementVNode("div", _hoisted_2$4, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+          vue.createElementVNode("div", _hoisted_2$5, [
             vue.createElementVNode("div", {
               class: "m-editor-empty-button",
               onClick: clickHandler
             }, [
               vue.createElementVNode("div", null, [
-                vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+                vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
               ]),
               _hoisted_3$2
             ])
@@ -2480,7 +2481,7 @@
     }
   });
 
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "Resizer",
     emits: ["change"],
     setup(__props, { emit }) {
@@ -2513,7 +2514,7 @@
     }
   });
 
-  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "Layout",
     props: {
       left: null,
@@ -2592,7 +2593,7 @@
             }, [
               vue.renderSlot(_ctx.$slots, "left")
             ], 6),
-            vue.createVNode(_sfc_main$l, { onChange: changeLeft })
+            vue.createVNode(_sfc_main$m, { onChange: changeLeft })
           ], 64)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -2601,7 +2602,7 @@
             vue.renderSlot(_ctx.$slots, "center")
           ], 6),
           typeof props.right !== "undefined" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            vue.createVNode(_sfc_main$l, { onChange: changeRight }),
+            vue.createVNode(_sfc_main$m, { onChange: changeRight }),
             vue.createElementVNode("div", {
               class: vue.normalizeClass(["m-editor-layout-right", __props.rightClass]),
               style: vue.normalizeStyle(`width: ${__props.right}px`)
@@ -2614,8 +2615,8 @@
     }
   });
 
-  const _hoisted_1$9 = { class: "m-editor" };
-  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$a = { class: "m-editor" };
+  const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "Framework",
     props: {
       codeOptions: { default: () => ({}) }
@@ -2682,7 +2683,7 @@
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
           vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
           vue.unref(showSrc) ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
             key: 0,
@@ -2690,7 +2691,7 @@
             "init-values": vue.unref(root),
             options: __props.codeOptions,
             onSave: saveCode
-          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$k, {
+          }, null, 8, ["init-values", "options"])) : (vue.openBlock(), vue.createBlock(_sfc_main$l, {
             key: 1,
             class: "m-editor-content",
             "left-class": "m-editor-framework-left",
@@ -2709,7 +2710,7 @@
             ]),
             center: vue.withCtx(() => [
               vue.unref(pageLength) > 0 ? vue.renderSlot(_ctx.$slots, "workspace", { key: 0 }) : vue.renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-                vue.createVNode(_sfc_main$m)
+                vue.createVNode(_sfc_main$n)
               ])
             ]),
             _: 2
@@ -2731,12 +2732,12 @@
     }
   });
 
-  const _hoisted_1$8 = {
+  const _hoisted_1$9 = {
     key: 1,
     class: "menu-item-text"
   };
-  const _hoisted_2$3 = { class: "el-dropdown-link menubar-menu-button" };
-  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
+  const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
     __name: "ToolButton",
     props: {
       data: { default: () => ({
@@ -2812,7 +2813,7 @@
           __props.data.type === "divider" ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicDivider), {
             key: 0,
             direction: __props.data.direction || "vertical"
-          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+          }, null, 8, ["direction"])) : __props.data.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, vue.toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
             __props.data.tooltip ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicTooltip), {
               key: 0,
               effect: "dark",
@@ -2826,7 +2827,7 @@
                   disabled: vue.unref(disabled)
                 }, {
                   default: vue.withCtx(() => [
-                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                    __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
                       key: 0,
                       icon: __props.data.icon
                     }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2843,7 +2844,7 @@
               disabled: vue.unref(disabled)
             }, {
               default: vue.withCtx(() => [
-                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+                __props.data.icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
                   key: 0,
                   icon: __props.data.icon
                 }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
@@ -2876,7 +2877,7 @@
               })) : vue.createCommentVNode("", true)
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("span", _hoisted_2$3, [
+              vue.createElementVNode("span", _hoisted_2$4, [
                 vue.createTextVNode(vue.toDisplayString(__props.data.text), 1),
                 vue.createVNode(vue.unref(design.TMagicIcon), { class: "el-icon--right" }, {
                   default: vue.withCtx(() => [
@@ -2893,7 +2894,7 @@
     }
   });
 
-  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     __name: "NavMenu",
     props: {
       data: { default: () => ({}) },
@@ -3049,7 +3050,7 @@
               style: vue.normalizeStyle(`width: ${vue.unref(columnWidth)?.[key]}px`)
             }, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(buttons)[key], (item, index) => {
-                return vue.openBlock(), vue.createBlock(_sfc_main$i, {
+                return vue.openBlock(), vue.createBlock(_sfc_main$j, {
                   data: item,
                   key: index
                 }, null, 8, ["data"]);
@@ -3061,8 +3062,8 @@
     }
   });
 
-  const _hoisted_1$7 = { class: "m-editor-props-panel" };
-  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$8 = { class: "m-editor-props-panel" };
+  const _sfc_main$h = /* @__PURE__ */ vue.defineComponent({
     __name: "PropsPanel",
     emits: ["mounted"],
     setup(__props, { expose, emit }) {
@@ -3106,7 +3107,7 @@
       expose({ submit });
       return (_ctx, _cache) => {
         const _component_m_form = vue.resolveComponent("m-form");
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
           vue.renderSlot(_ctx.$slots, "props-panel-header"),
           vue.createVNode(_component_m_form, {
             ref_key: "configForm",
@@ -3123,8 +3124,8 @@
     }
   });
 
-  const _hoisted_1$6 = ["id"];
-  const _hoisted_2$2 = { class: "list-item" };
+  const _hoisted_1$7 = ["id"];
+  const _hoisted_2$3 = { class: "list-item" };
   const _hoisted_3$1 = { class: "code-name" };
   const _hoisted_4$1 = { class: "code-name-wrapper" };
   const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
@@ -3140,7 +3141,7 @@
     class: "m-editor-content-bottom"
   };
   const _hoisted_11 = /* @__PURE__ */ vue.createTextVNode("\u5173\u95ED");
-  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeBlockEditor",
     setup(__props) {
       const services = vue.inject("services");
@@ -3212,7 +3213,7 @@
           "append-to-body": true
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_sfc_main$k, {
+            vue.createVNode(_sfc_main$l, {
               left: left.value,
               "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
               "min-left": 45,
@@ -3241,7 +3242,7 @@
                     ]),
                     default: vue.withCtx(() => [
                       vue.createElementVNode("div", _hoisted_6$1, [
-                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
+                        codeConfig.value ? (vue.openBlock(), vue.createBlock(_sfc_main$p, {
                           key: 0,
                           ref_key: "codeEditor",
                           ref: codeEditor,
@@ -3314,10 +3315,10 @@
                         id: data.id,
                         class: "list-container"
                       }, [
-                        vue.createElementVNode("div", _hoisted_2$2, [
+                        vue.createElementVNode("div", _hoisted_2$3, [
                           vue.createElementVNode("div", _hoisted_3$1, vue.toDisplayString(data.name) + "\uFF08" + vue.toDisplayString(data.id) + "\uFF09", 1)
                         ])
-                      ], 8, _hoisted_1$6)
+                      ], 8, _hoisted_1$7)
                     ]),
                     _: 1
                   }, 8, ["data", "current-node-key"])) : vue.createCommentVNode("", true)
@@ -3331,8 +3332,8 @@
     }
   });
 
-  const _hoisted_1$5 = { class: "m-editor-code-block-list" };
-  const _hoisted_2$1 = { class: "code-header-wrapper" };
+  const _hoisted_1$6 = { class: "m-editor-code-block-list" };
+  const _hoisted_2$2 = { class: "code-header-wrapper" };
   const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode("\u65B0\u589E");
   const _hoisted_4 = ["id"];
   const _hoisted_5 = { class: "list-item" };
@@ -3353,7 +3354,7 @@
       d: "M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"
     })
   ], -1);
-  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "CodeBlockList",
     props: {
       customError: null
@@ -3481,9 +3482,9 @@
         stage?.select(compId);
       };
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
           vue.renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-            vue.createElementVNode("div", _hoisted_2$1, [
+            vue.createElementVNode("div", _hoisted_2$2, [
               vue.createVNode(vue.unref(design.TMagicInput), {
                 class: vue.normalizeClass([vue.unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
                 size: "small",
@@ -3532,7 +3533,7 @@
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$n, {
+                        vue.createVNode(_sfc_main$o, {
                           icon: vue.unref(editable) ? vue.unref(iconsVue.Edit) : vue.unref(iconsVue.View),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3547,7 +3548,7 @@
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$n, {
+                        vue.createVNode(_sfc_main$o, {
                           icon: vue.unref(iconsVue.Link),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3562,7 +3563,7 @@
                       placement: "bottom"
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$n, {
+                        vue.createVNode(_sfc_main$o, {
                           icon: vue.unref(iconsVue.Close),
                           class: "edit-icon",
                           onClick: vue.withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3597,7 +3598,7 @@
             ]),
             _: 3
           }, 8, ["data"])) : vue.createCommentVNode("", true),
-          vue.createVNode(_sfc_main$f, null, {
+          vue.createVNode(_sfc_main$g, null, {
             "code-block-edit-panel-header": vue.withCtx(({ id }) => [
               vue.renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
             ]),
@@ -3608,8 +3609,8 @@
     }
   });
 
-  const _hoisted_1$4 = ["onClick", "onDragstart"];
-  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$5 = ["onClick", "onDragstart"];
+  const _sfc_main$e = /* @__PURE__ */ vue.defineComponent({
     __name: "ComponentListPanel",
     setup(__props) {
       const searchText = vue.ref("");
@@ -3699,7 +3700,7 @@
                       name: `${index}`
                     }, {
                       title: vue.withCtx(() => [
-                        vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
+                        vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Grid) }, null, 8, ["icon"]),
                         vue.createTextVNode(vue.toDisplayString(group.title), 1)
                       ]),
                       default: vue.withCtx(() => [
@@ -3714,7 +3715,7 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$n, {
+                              vue.createVNode(_sfc_main$o, {
                                 icon: item.icon
                               }, null, 8, ["icon"]),
                               vue.createVNode(vue.unref(design.TMagicTooltip), {
@@ -3728,7 +3729,7 @@
                                 _: 2
                               }, 1032, ["content"])
                             ])
-                          ], 40, _hoisted_1$4);
+                          ], 40, _hoisted_1$5);
                         }), 128))
                       ]),
                       _: 2
@@ -3745,7 +3746,7 @@
     }
   });
 
-  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$d = /* @__PURE__ */ vue.defineComponent({
     __name: "ContentMenu",
     props: {
       menuData: { default: () => [] },
@@ -3825,7 +3826,7 @@
       });
       return (_ctx, _cache) => {
         const _component_content_menu = vue.resolveComponent("content-menu", true);
-        return __props.menuData.length && visible.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        return __props.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "magic-editor-content-menu",
           ref_key: "menu",
@@ -3834,7 +3835,7 @@
         }, [
           vue.createElementVNode("div", null, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.menuData, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$i, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$j, {
                 "event-type": "mouseup",
                 data: item,
                 key: index,
@@ -3853,12 +3854,14 @@
               onHide: hide
             }, null, 8, ["menu-data"])
           ]))
-        ], 4)) : vue.createCommentVNode("", true);
+        ], 4)), [
+          [vue.vShow, visible.value]
+        ]) : vue.createCommentVNode("", true);
       };
     }
   });
 
-  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerMenu",
     setup(__props, { expose }) {
       const services = vue.inject("services");
@@ -3946,7 +3949,7 @@
         show
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
           "menu-data": vue.unref(menuData),
           ref_key: "menu",
           ref: menu,
@@ -3956,8 +3959,8 @@
     }
   });
 
-  const _hoisted_1$3 = ["id", "onMouseenter"];
-  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$4 = ["id", "onMouseenter"];
+  const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
     __name: "LayerPanel",
     setup(__props) {
       const throttleTime = 150;
@@ -4240,12 +4243,12 @@
                   }, () => [
                     vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
                   ])
-                ], 42, _hoisted_1$3)
+                ], 42, _hoisted_1$4)
               ]),
               _: 3
             }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : vue.createCommentVNode("", true),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
-              vue.createVNode(_sfc_main$b, {
+              vue.createVNode(_sfc_main$c, {
                 ref_key: "menu",
                 ref: menu
               }, null, 512)
@@ -4257,11 +4260,11 @@
     }
   });
 
-  const _hoisted_1$2 = {
+  const _hoisted_1$3 = {
     key: 1,
     class: "magic-editor-tab-panel-title"
   };
-  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
     __name: "TabPane",
     props: {
       data: null
@@ -4278,7 +4281,7 @@
               type: "component",
               icon: iconsVue.Coin,
               text: "\u7EC4\u4EF6",
-              component: _sfc_main$d,
+              component: _sfc_main$e,
               slots: {}
             };
           case "layer":
@@ -4286,7 +4289,7 @@
               type: "component",
               icon: iconsVue.Files,
               text: "\u5DF2\u9009\u7EC4\u4EF6",
-              component: _sfc_main$a,
+              component: _sfc_main$b,
               slots: {}
             };
           case "code-block":
@@ -4294,7 +4297,7 @@
               type: "component",
               icon: iconsVue.EditPen,
               text: "\u4EE3\u7801\u7F16\u8F91",
-              component: _sfc_main$e,
+              component: _sfc_main$f,
               slots: {}
             };
           default:
@@ -4310,11 +4313,11 @@
             (vue.openBlock(), vue.createElementBlock("div", {
               key: vue.unref(config).text
             }, [
-              vue.unref(config).icon ? (vue.openBlock(), vue.createBlock(_sfc_main$n, {
+              vue.unref(config).icon ? (vue.openBlock(), vue.createBlock(_sfc_main$o, {
                 key: 0,
                 icon: vue.unref(config).icon
               }, null, 8, ["icon"])) : vue.createCommentVNode("", true),
-              vue.unref(config).text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(vue.unref(config).text), 1)) : vue.createCommentVNode("", true)
+              vue.unref(config).text ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(vue.unref(config).text), 1)) : vue.createCommentVNode("", true)
             ]))
           ]),
           default: vue.withCtx(() => [
@@ -4390,7 +4393,7 @@
     }
   });
 
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "Sidebar",
     props: {
       data: { default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] }) }
@@ -4418,7 +4421,7 @@
         }, {
           default: vue.withCtx(() => [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data.items, (item, index) => {
-              return vue.openBlock(), vue.createBlock(_sfc_main$9, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$a, {
                 key: index,
                 data: item
               }, vue.createSlots({ _: 2 }, [
@@ -4479,6 +4482,48 @@
     }
   });
 
+  const _hoisted_1$2 = {
+    key: 0,
+    class: "m-editor-breadcrumb"
+  };
+  const _hoisted_2$1 = { key: 0 };
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+    __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 vue.unref(nodes).length === 1 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(path), (item, index) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+              key: item.id
+            }, [
+              vue.createVNode(vue.unref(design.TMagicButton), {
+                text: "",
+                disabled: item.id === vue.unref(node)?.id,
+                onClick: ($event) => select(item)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["disabled", "onClick"]),
+              index < vue.unref(path).length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, "/")) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])) : vue.createCommentVNode("", true);
+      };
+    }
+  });
+
   const _hoisted_1$1 = {
     key: 1,
     style: { "width": "21px" }
@@ -4565,14 +4610,14 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
           vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
@@ -4588,7 +4633,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_sfc_main$n, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
+            vue.createVNode(_sfc_main$o, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -4657,7 +4702,7 @@
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
                       vue.renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                        vue.createVNode(_sfc_main$i, {
+                        vue.createVNode(_sfc_main$j, {
                           data: {
                             type: "button",
                             text: "\u590D\u5236",
@@ -4665,7 +4710,7 @@
                             handler: () => copy(item)
                           }
                         }, null, 8, ["data"]),
-                        vue.createVNode(_sfc_main$i, {
+                        vue.createVNode(_sfc_main$j, {
                           data: {
                             type: "button",
                             text: "\u5220\u9664",
@@ -5131,7 +5176,7 @@
       };
       expose({ show });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(_sfc_main$c, {
+        return vue.openBlock(), vue.createBlock(_sfc_main$d, {
           "menu-data": menuData,
           ref_key: "menu",
           ref: menu
@@ -5396,6 +5441,7 @@
           ref_key: "workspace",
           ref: workspace
         }, [
+          vue.createVNode(_sfc_main$8),
           vue.renderSlot(_ctx.$slots, "stage", {}, () => [
             (vue.openBlock(), vue.createBlock(_sfc_main$2, {
               key: vue.unref(page)?.id
@@ -5439,11 +5485,11 @@
   const _sfc_main = vue.defineComponent({
     name: "m-editor",
     components: {
-      NavMenu: _sfc_main$h,
-      Sidebar: _sfc_main$8,
+      NavMenu: _sfc_main$i,
+      Sidebar: _sfc_main$9,
       Workspace: _sfc_main$1,
-      PropsPanel: _sfc_main$g,
-      Framework: _sfc_main$j
+      PropsPanel: _sfc_main$h,
+      Framework: _sfc_main$k
     },
     props: {
       modelValue: {
@@ -5739,34 +5785,34 @@
       app.config.globalProperties.$TMAGIC_EDITOR = option;
       setConfig(option);
       app.component(Editor.name, Editor);
-      app.component("m-fields-ui-select", _sfc_main$p);
-      app.component("m-fields-code-link", _sfc_main$r);
-      app.component("m-fields-vs-code", _sfc_main$s);
-      app.component("magic-code-editor", _sfc_main$o);
-      app.component("m-fields-code-select", _sfc_main$q);
+      app.component("m-fields-ui-select", _sfc_main$q);
+      app.component("m-fields-code-link", _sfc_main$s);
+      app.component("m-fields-vs-code", _sfc_main$t);
+      app.component("magic-code-editor", _sfc_main$p);
+      app.component("m-fields-code-select", _sfc_main$r);
     }
   };
 
   exports.COPY_STORAGE_KEY = COPY_STORAGE_KEY;
-  exports.CodeBlockList = _sfc_main$e;
+  exports.CodeBlockList = _sfc_main$f;
   exports.CodeDeleteErrorType = CodeDeleteErrorType;
   exports.CodeEditorMode = CodeEditorMode;
-  exports.CodeSelect = _sfc_main$q;
+  exports.CodeSelect = _sfc_main$r;
   exports.CodeSelectOp = CodeSelectOp;
   exports.ColumnLayout = ColumnLayout;
-  exports.ComponentListPanel = _sfc_main$d;
-  exports.ContentMenu = _sfc_main$c;
+  exports.ComponentListPanel = _sfc_main$e;
+  exports.ContentMenu = _sfc_main$d;
   exports.Fixed2Other = Fixed2Other;
   exports.H_GUIDE_LINE_STORAGE_KEY = H_GUIDE_LINE_STORAGE_KEY;
-  exports.Icon = _sfc_main$n;
+  exports.Icon = _sfc_main$o;
   exports.Keys = Keys;
   exports.LayerOffset = LayerOffset;
-  exports.LayerPanel = _sfc_main$a;
+  exports.LayerPanel = _sfc_main$b;
   exports.Layout = Layout;
-  exports.PropsPanel = _sfc_main$g;
-  exports.TMagicCodeEditor = _sfc_main$o;
+  exports.PropsPanel = _sfc_main$h;
+  exports.TMagicCodeEditor = _sfc_main$p;
   exports.TMagicEditor = Editor;
-  exports.ToolButton = _sfc_main$i;
+  exports.ToolButton = _sfc_main$j;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.change2Fixed = change2Fixed;
   exports.codeBlockService = codeBlockService;