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

package/dist/tmagic-editor.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, normalizeClass, resolveDynamicComponent, toRaw, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, Teleport, nextTick, toHandlers, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, unref, reactive, watch, inject, ref, watchEffect, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, createCommentVNode, createTextVNode, toDisplayString, onMounted, onUnmounted, normalizeClass, resolveDynamicComponent, toRaw, renderSlot, Fragment, createSlots, renderList, normalizeProps, mergeProps, markRaw, getCurrentInstance, isRef, withDirectives, Teleport, vShow, nextTick, toHandlers, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { cloneDeep, map, xor, throttle, pick, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
+import { map, xor, throttle, pick, cloneDeep, isEmpty, forIn, omit, keys, mergeWith, uniq } from 'lodash-es';
 import { TMagicCard, TMagicTooltip, tMagicMessage, TMagicButton, TMagicIcon, TMagicScrollbar, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicDialog, TMagicInput, TMagicTree, TMagicCollapse, TMagicCollapseItem, TMagicTabPane, TMagicTabs, TMagicPopover } from '@tmagic/design';
 import { Delete, Close, Edit, Plus, ArrowDown, Grid, Memo, FullScreen, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, View, Link, Search, Files, DocumentCopy, EditPen, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import * as monaco from 'monaco-editor';
@@ -12,7 +12,7 @@ import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
 import KeyController from 'keycon';
 
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "Code",
   props: {
     model: null,
@@ -42,7 +42,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "CodeLink",
   props: {
     config: null,
@@ -153,15 +153,15 @@ var CodeSelectOp = /* @__PURE__ */ ((CodeSelectOp2) => {
   return CodeSelectOp2;
 })(CodeSelectOp || {});
 
-const _hoisted_1$d = { class: "tool-bar" };
-const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_1$e = { class: "tool-bar" };
+const _hoisted_2$6 = /* @__PURE__ */ 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__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "CodeSelect",
   props: {
     config: null,
@@ -174,6 +174,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const services = inject("services");
+    const form = inject("mForm");
     const selectConfig = computed(() => {
       const defaultConfig = {
         multiple: true,
@@ -196,11 +197,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     });
     const fieldKey = ref("");
     const multiple = ref(true);
-    const combineIds = ref([]);
-    let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
+    const lastTagSnapshot = ref([]);
     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;
         })
@@ -211,7 +213,6 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       let codeIds = value;
       if (typeof value === "string") {
         multiple.value = false;
-        lastTagSnapshot = [lastTagSnapshot];
         codeIds = value ? [value] : [];
       }
       await setCombineRelation(codeIds);
@@ -222,25 +223,20 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       let opFlag = CodeSelectOp.CHANGE;
       let diffValues = codeIds;
       if (multiple.value) {
-        opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-        diffValues = xor(codeIds, lastTagSnapshot);
+        lastTagSnapshot.value = form?.initValues[props.name] || [];
+        opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+        diffValues = 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) {
         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 = resolveComponent("m-fields-select");
@@ -260,7 +256,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             }, null, 8, ["config", "model", "prop", "name", "size"])
           ]),
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_1$d, [
+            createElementVNode("div", _hoisted_1$e, [
               createVNode(unref(TMagicTooltip), {
                 class: "tool-item",
                 effect: "dark",
@@ -288,8 +284,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
     config: null,
@@ -352,7 +348,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$c
+            _hoisted_1$d
           ]),
           _: 1
         }, 8, ["icon"])
@@ -400,7 +396,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
 
 const UISelect_vue_vue_type_style_index_0_lang = '';
 
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "CodeEditor",
   props: {
     initValues: null,
@@ -530,8 +526,8 @@ const setConfig = (option) => {
 };
 const getConfig = (key) => $TMAGIC_EDITOR[key];
 
-const _hoisted_1$b = ["src"];
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _hoisted_1$c = ["src"];
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
     icon: null
@@ -551,7 +547,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$b)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$c)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -2412,6 +2408,11 @@ const useStage = (stageOptions) => {
   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)
@@ -2428,10 +2429,10 @@ const useStage = (stageOptions) => {
   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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "AddPageBox",
   setup(__props) {
     const services = inject("services");
@@ -2445,14 +2446,14 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$5, [
           createElementVNode("div", {
             class: "m-editor-empty-button",
             onClick: clickHandler
           }, [
             createElementVNode("div", null, [
-              createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
+              createVNode(_sfc_main$o, { icon: unref(Plus) }, null, 8, ["icon"])
             ]),
             _hoisted_3$2
           ])
@@ -2462,7 +2463,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "Resizer",
   emits: ["change"],
   setup(__props, { emit }) {
@@ -2495,7 +2496,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "Layout",
   props: {
     left: null,
@@ -2574,7 +2575,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           }, [
             renderSlot(_ctx.$slots, "left")
           ], 6),
-          createVNode(_sfc_main$l, { onChange: changeLeft })
+          createVNode(_sfc_main$m, { onChange: changeLeft })
         ], 64)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["m-editor-layout-center", __props.centerClass]),
@@ -2583,7 +2584,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "center")
         ], 6),
         typeof props.right !== "undefined" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createVNode(_sfc_main$l, { onChange: changeRight }),
+          createVNode(_sfc_main$m, { onChange: changeRight }),
           createElementVNode("div", {
             class: normalizeClass(["m-editor-layout-right", __props.rightClass]),
             style: normalizeStyle(`width: ${__props.right}px`)
@@ -2596,8 +2597,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-editor" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$a = { class: "m-editor" };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "Framework",
   props: {
     codeOptions: { default: () => ({}) }
@@ -2664,7 +2665,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_magic_code_editor = resolveComponent("magic-code-editor");
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
         unref(showSrc) ? (openBlock(), createBlock(_component_magic_code_editor, {
           key: 0,
@@ -2672,7 +2673,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           "init-values": unref(root),
           options: __props.codeOptions,
           onSave: saveCode
-        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$k, {
+        }, null, 8, ["init-values", "options"])) : (openBlock(), createBlock(_sfc_main$l, {
           key: 1,
           class: "m-editor-content",
           "left-class": "m-editor-framework-left",
@@ -2691,7 +2692,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           ]),
           center: withCtx(() => [
             unref(pageLength) > 0 ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              createVNode(_sfc_main$m)
+              createVNode(_sfc_main$n)
             ])
           ]),
           _: 2
@@ -2713,12 +2714,12 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ defineComponent({
+const _hoisted_2$4 = { class: "el-dropdown-link menubar-menu-button" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "ToolButton",
   props: {
     data: { default: () => ({
@@ -2794,7 +2795,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(unref(TMagicDivider), {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$8, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$9, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(unref(TMagicTooltip), {
             key: 0,
             effect: "dark",
@@ -2808,7 +2809,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                 disabled: unref(disabled)
               }, {
                 default: withCtx(() => [
-                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
+                  __props.data.icon ? (openBlock(), createBlock(_sfc_main$o, {
                     key: 0,
                     icon: __props.data.icon
                   }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2825,7 +2826,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             disabled: unref(disabled)
           }, {
             default: withCtx(() => [
-              __props.data.icon ? (openBlock(), createBlock(_sfc_main$n, {
+              __props.data.icon ? (openBlock(), createBlock(_sfc_main$o, {
                 key: 0,
                 icon: __props.data.icon
               }, null, 8, ["icon"])) : createCommentVNode("", true),
@@ -2858,7 +2859,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             })) : createCommentVNode("", true)
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$3, [
+            createElementVNode("span", _hoisted_2$4, [
               createTextVNode(toDisplayString(__props.data.text), 1),
               createVNode(unref(TMagicIcon), { class: "el-icon--right" }, {
                 default: withCtx(() => [
@@ -2875,7 +2876,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "NavMenu",
   props: {
     data: { default: () => ({}) },
@@ -3031,7 +3032,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             style: normalizeStyle(`width: ${unref(columnWidth)?.[key]}px`)
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(buttons)[key], (item, index) => {
-              return openBlock(), createBlock(_sfc_main$i, {
+              return openBlock(), createBlock(_sfc_main$j, {
                 data: item,
                 key: index
               }, null, 8, ["data"]);
@@ -3043,8 +3044,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "m-editor-props-panel" };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$8 = { class: "m-editor-props-panel" };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "PropsPanel",
   emits: ["mounted"],
   setup(__props, { expose, emit }) {
@@ -3088,7 +3089,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     expose({ submit });
     return (_ctx, _cache) => {
       const _component_m_form = resolveComponent("m-form");
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(_component_m_form, {
           ref_key: "configForm",
@@ -3105,8 +3106,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createElementVNode("div", { class: "code-name-label" }, "\u4EE3\u7801\u5757\u540D\u79F0", -1);
@@ -3122,7 +3123,7 @@ const _hoisted_10 = {
   class: "m-editor-content-bottom"
 };
 const _hoisted_11 = /* @__PURE__ */ createTextVNode("\u5173\u95ED");
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "CodeBlockEditor",
   setup(__props) {
     const services = inject("services");
@@ -3194,7 +3195,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         "append-to-body": true
       }, {
         default: withCtx(() => [
-          createVNode(_sfc_main$k, {
+          createVNode(_sfc_main$l, {
             left: left.value,
             "onUpdate:left": _cache[1] || (_cache[1] = ($event) => left.value = $event),
             "min-left": 45,
@@ -3223,7 +3224,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                   ]),
                   default: withCtx(() => [
                     createElementVNode("div", _hoisted_6$1, [
-                      codeConfig.value ? (openBlock(), createBlock(_sfc_main$o, {
+                      codeConfig.value ? (openBlock(), createBlock(_sfc_main$p, {
                         key: 0,
                         ref_key: "codeEditor",
                         ref: codeEditor,
@@ -3296,10 +3297,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                       id: data.id,
                       class: "list-container"
                     }, [
-                      createElementVNode("div", _hoisted_2$2, [
+                      createElementVNode("div", _hoisted_2$3, [
                         createElementVNode("div", _hoisted_3$1, toDisplayString(data.name) + "\uFF08" + toDisplayString(data.id) + "\uFF09", 1)
                       ])
-                    ], 8, _hoisted_1$6)
+                    ], 8, _hoisted_1$7)
                   ]),
                   _: 1
                 }, 8, ["data", "current-node-key"])) : createCommentVNode("", true)
@@ -3313,8 +3314,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-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__ */ createTextVNode("\u65B0\u589E");
 const _hoisted_4 = ["id"];
 const _hoisted_5 = { class: "list-item" };
@@ -3335,7 +3336,7 @@ const _hoisted_9 = /* @__PURE__ */ createElementVNode("svg", {
     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__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "CodeBlockList",
   props: {
     customError: null
@@ -3463,9 +3464,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       stage?.select(compId);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
-          createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_2$2, [
             createVNode(unref(TMagicInput), {
               class: normalizeClass([unref(editable) ? "code-filter-input" : "code-filter-input-no-btn"]),
               size: "small",
@@ -3514,7 +3515,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$n, {
+                      createVNode(_sfc_main$o, {
                         icon: unref(editable) ? unref(Edit) : unref(View),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => editCode(`${data.id}`), ["stop"])
@@ -3529,7 +3530,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$n, {
+                      createVNode(_sfc_main$o, {
                         icon: unref(Link),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => toggleCombineRelation(data), ["stop"])
@@ -3544,7 +3545,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     placement: "bottom"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$n, {
+                      createVNode(_sfc_main$o, {
                         icon: unref(Close),
                         class: "edit-icon",
                         onClick: withModifiers(($event) => deleteCode(`${data.id}`), ["stop"])
@@ -3579,7 +3580,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["data"])) : createCommentVNode("", true),
-        createVNode(_sfc_main$f, null, {
+        createVNode(_sfc_main$g, null, {
           "code-block-edit-panel-header": withCtx(({ id }) => [
             renderSlot(_ctx.$slots, "code-block-edit-panel-header", { id })
           ]),
@@ -3590,8 +3591,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = ["onClick", "onDragstart"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["onClick", "onDragstart"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "ComponentListPanel",
   setup(__props) {
     const searchText = ref("");
@@ -3681,7 +3682,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                     name: `${index}`
                   }, {
                     title: withCtx(() => [
-                      createVNode(_sfc_main$n, { icon: unref(Grid) }, null, 8, ["icon"]),
+                      createVNode(_sfc_main$o, { icon: unref(Grid) }, null, 8, ["icon"]),
                       createTextVNode(toDisplayString(group.title), 1)
                     ]),
                     default: withCtx(() => [
@@ -3696,7 +3697,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                           onDrag: dragHandler
                         }, [
                           renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                            createVNode(_sfc_main$n, {
+                            createVNode(_sfc_main$o, {
                               icon: item.icon
                             }, null, 8, ["icon"]),
                             createVNode(unref(TMagicTooltip), {
@@ -3710,7 +3711,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                               _: 2
                             }, 1032, ["content"])
                           ])
-                        ], 40, _hoisted_1$4);
+                        ], 40, _hoisted_1$5);
                       }), 128))
                     ]),
                     _: 2
@@ -3727,7 +3728,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "ContentMenu",
   props: {
     menuData: { default: () => [] },
@@ -3807,7 +3808,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_content_menu = resolveComponent("content-menu", true);
-      return __props.menuData.length && visible.value ? (openBlock(), createElementBlock("div", {
+      return __props.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu",
         ref_key: "menu",
@@ -3816,7 +3817,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("div", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$i, {
+            return openBlock(), createBlock(_sfc_main$j, {
               "event-type": "mouseup",
               data: item,
               key: index,
@@ -3835,12 +3836,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             onHide: hide
           }, null, 8, ["menu-data"])
         ]))
-      ], 4)) : createCommentVNode("", true);
+      ], 4)), [
+        [vShow, visible.value]
+      ]) : createCommentVNode("", true);
     };
   }
 });
 
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "LayerMenu",
   setup(__props, { expose }) {
     const services = inject("services");
@@ -3928,7 +3931,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       show
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$d, {
         "menu-data": unref(menuData),
         ref_key: "menu",
         ref: menu,
@@ -3938,8 +3941,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = ["id", "onMouseenter"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["id", "onMouseenter"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "LayerPanel",
   setup(__props) {
     const throttleTime = 150;
@@ -4222,12 +4225,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                 }, () => [
                   createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
                 ])
-              ], 42, _hoisted_1$3)
+              ], 42, _hoisted_1$4)
             ]),
             _: 3
           }, 8, ["default-expanded-keys", "data", "show-checkbox"])) : createCommentVNode("", true),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
-            createVNode(_sfc_main$b, {
+            createVNode(_sfc_main$c, {
               ref_key: "menu",
               ref: menu
             }, null, 512)
@@ -4239,11 +4242,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TabPane",
   props: {
     data: null
@@ -4260,7 +4263,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             type: "component",
             icon: Coin,
             text: "\u7EC4\u4EF6",
-            component: _sfc_main$d,
+            component: _sfc_main$e,
             slots: {}
           };
         case "layer":
@@ -4268,7 +4271,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             type: "component",
             icon: Files,
             text: "\u5DF2\u9009\u7EC4\u4EF6",
-            component: _sfc_main$a,
+            component: _sfc_main$b,
             slots: {}
           };
         case "code-block":
@@ -4276,7 +4279,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             type: "component",
             icon: EditPen,
             text: "\u4EE3\u7801\u7F16\u8F91",
-            component: _sfc_main$e,
+            component: _sfc_main$f,
             slots: {}
           };
         default:
@@ -4292,11 +4295,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           (openBlock(), createElementBlock("div", {
             key: unref(config).text
           }, [
-            unref(config).icon ? (openBlock(), createBlock(_sfc_main$n, {
+            unref(config).icon ? (openBlock(), createBlock(_sfc_main$o, {
               key: 0,
               icon: unref(config).icon
             }, null, 8, ["icon"])) : createCommentVNode("", true),
-            unref(config).text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(unref(config).text), 1)) : createCommentVNode("", true)
+            unref(config).text ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(unref(config).text), 1)) : createCommentVNode("", true)
           ]))
         ]),
         default: withCtx(() => [
@@ -4372,7 +4375,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "Sidebar",
   props: {
     data: { default: () => ({ type: "tabs", status: "\u7EC4\u4EF6", items: ["component-list", "layer", "code-block"] }) }
@@ -4400,7 +4403,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$9, {
+            return openBlock(), createBlock(_sfc_main$a, {
               key: index,
               data: item
             }, createSlots({ _: 2 }, [
@@ -4461,6 +4464,48 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$2 = {
+  key: 0,
+  class: "m-editor-breadcrumb"
+};
+const _hoisted_2$1 = { key: 0 };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "Breadcrumb",
+  setup(__props) {
+    const services = inject("services");
+    const editorService = services?.editorService;
+    const node = computed(() => editorService?.get("node"));
+    const nodes = computed(() => editorService?.get("nodes") || []);
+    const root = computed(() => editorService?.get("root"));
+    const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+    const select = async (node2) => {
+      await editorService?.select(node2);
+      editorService?.get("stage")?.select(node2.id);
+    };
+    return (_ctx, _cache) => {
+      return unref(nodes).length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(path), (item, index) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: item.id
+          }, [
+            createVNode(unref(TMagicButton), {
+              text: "",
+              disabled: item.id === unref(node)?.id,
+              onClick: ($event) => select(item)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["disabled", "onClick"]),
+            index < unref(path).length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2$1, "/")) : createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+
 const _hoisted_1$1 = {
   key: 1,
   style: { "width": "21px" }
@@ -4547,14 +4592,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_sfc_main$n, { icon: unref(Plus) }, null, 8, ["icon"])
+          createVNode(_sfc_main$o, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_sfc_main$n, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$o, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
         unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
@@ -4570,7 +4615,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_sfc_main$n, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
+          createVNode(_sfc_main$o, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -4639,7 +4684,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createElementVNode("div", null, [
                     renderSlot(_ctx.$slots, "page-bar-popover", { page: item }, () => [
-                      createVNode(_sfc_main$i, {
+                      createVNode(_sfc_main$j, {
                         data: {
                           type: "button",
                           text: "\u590D\u5236",
@@ -4647,7 +4692,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                           handler: () => copy(item)
                         }
                       }, null, 8, ["data"]),
-                      createVNode(_sfc_main$i, {
+                      createVNode(_sfc_main$j, {
                         data: {
                           type: "button",
                           text: "\u5220\u9664",
@@ -5113,7 +5158,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
     expose({ show });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$d, {
         "menu-data": menuData,
         ref_key: "menu",
         ref: menu
@@ -5378,6 +5423,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ref_key: "workspace",
         ref: workspace
       }, [
+        createVNode(_sfc_main$8),
         renderSlot(_ctx.$slots, "stage", {}, () => [
           (openBlock(), createBlock(_sfc_main$2, {
             key: unref(page)?.id
@@ -5421,11 +5467,11 @@ const componentListService = new ComponentList();
 const _sfc_main = 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: {
@@ -5721,13 +5767,13 @@ const index = {
     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);
   }
 };
 
-export { COPY_STORAGE_KEY, _sfc_main$e as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$q as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$n as Icon, Keys, LayerOffset, _sfc_main$a as LayerPanel, Layout, _sfc_main$g as PropsPanel, _sfc_main$o as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$i as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { COPY_STORAGE_KEY, _sfc_main$f as CodeBlockList, CodeDeleteErrorType, CodeEditorMode, _sfc_main$r as CodeSelect, CodeSelectOp, ColumnLayout, _sfc_main$e as ComponentListPanel, _sfc_main$d as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$o as Icon, Keys, LayerOffset, _sfc_main$b as LayerPanel, Layout, _sfc_main$h as PropsPanel, _sfc_main$p as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$j as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, codeBlockService, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map