@tmagic/editor 1.7.12 → 1.7.13-beta.0

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -63,6 +63,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		canSelect: { type: Function },
 		isContainer: { type: Function },
 		customContentMenu: { type: Function },
+		layerNodeIsExpandable: { type: Function },
 		beforeDblclick: { type: Function },
 		extendFormState: { type: Function },
 		pageBarSortOptions: {},
@@ -146,7 +147,8 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					"layer-content-menu": __props.layerContentMenu,
 					"custom-content-menu": __props.customContentMenu,
 					indent: __props.treeIndent,
-					"next-level-indent-increment": __props.treeNextLevelIndentIncrement
+					"next-level-indent-increment": __props.treeNextLevelIndentIncrement,
+					"layer-node-is-expandable": __props.layerNodeIsExpandable
 				}, {
 					"layer-panel-header": withCtx(() => [renderSlot(_ctx.$slots, "layer-panel-header")]),
 					"layer-node-content": withCtx(({ data }) => [renderSlot(_ctx.$slots, "layer-node-content", { data })]),
@@ -169,13 +171,15 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					"layer-content-menu",
 					"custom-content-menu",
 					"indent",
-					"next-level-indent-increment"
+					"next-level-indent-increment",
+					"layer-node-is-expandable"
 				])])]),
 				workspace: withCtx(() => [renderSlot(_ctx.$slots, "workspace", { editorService: unref(editor_default) }, () => [createVNode(Workspace_default, {
 					"disabled-stage-overlay": __props.disabledStageOverlay,
 					"stage-content-menu": __props.stageContentMenu,
 					"custom-content-menu": __props.customContentMenu
 				}, {
+					"stage-top": withCtx(() => [renderSlot(_ctx.$slots, "stage-top")]),
 					stage: withCtx(() => [renderSlot(_ctx.$slots, "stage")]),
 					"workspace-content": withCtx(() => [renderSlot(_ctx.$slots, "workspace-content", { editorService: unref(editor_default) })]),
 					_: 3

package/dist/es/components/ScrollViewer.vue_vue_type_script_setup_true_lang.js

@@ -71,7 +71,7 @@ var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				createElementVNode("div", {
 					ref: "target",
 					style: normalizeStyle(style.value)
-				}, [renderSlot(_ctx.$slots, "default")], 4),
+				}, [renderSlot(_ctx.$slots, "before"), renderSlot(_ctx.$slots, "default")], 4),
 				renderSlot(_ctx.$slots, "content"),
 				scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(ScrollBar_default, {
 					key: 0,

package/dist/es/components/Tree.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		nodeStatusMap: {},
 		indent: { default: 0 },
 		nextLevelIndentIncrement: {},
-		emptyText: { default: "暂无数据" }
+		emptyText: { default: "暂无数据" },
+		isExpandable: {}
 	},
 	emits: [
 		"node-dragover",
@@ -40,7 +41,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					data: item,
 					indent: __props.indent,
 					"next-level-indent-increment": __props.nextLevelIndentIncrement,
-					"node-status-map": __props.nodeStatusMap
+					"node-status-map": __props.nodeStatusMap,
+					"is-expandable": __props.isExpandable
 				}, {
 					"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 					"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -50,7 +52,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 					"data",
 					"indent",
 					"next-level-indent-increment",
-					"node-status-map"
+					"node-status-map",
+					"is-expandable"
 				]);
 			}), 128)) : (openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("p", null, toDisplayString(__props.emptyText), 1)]))], 32);
 		};

package/dist/es/components/TreeNode.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { updateStatus } from "../utils/tree.js";
+import { defaultIsExpandable, updateStatus } from "../utils/tree.js";
 import Icon_default from "./Icon.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, resolveComponent, toDisplayString, unref, vShow, withCtx, withDirectives } from "vue";
 import { ArrowDown, ArrowRight } from "@element-plus/icons-vue";
@@ -25,7 +25,11 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		parentsId: { default: () => [] },
 		nodeStatusMap: {},
 		indent: { default: 0 },
-		nextLevelIndentIncrement: { default: 11 }
+		nextLevelIndentIncrement: { default: 11 },
+		isExpandable: {
+			type: Function,
+			default: defaultIsExpandable
+		}
 	},
 	emits: [
 		"node-dragstart",
@@ -48,7 +52,6 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const selected = computed(() => nodeStatus.value.selected);
 		const visible = computed(() => nodeStatus.value.visible);
 		const draggable = computed(() => nodeStatus.value.draggable);
-		const hasChildren = computed(() => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible));
 		const handleDragStart = (event) => {
 			treeEmit?.("node-dragstart", event, props.data);
 		};
@@ -92,20 +95,21 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				onMouseenter: mouseenterHandler
 			}, [createVNode(Icon_default, {
 				class: "expand-icon",
-				style: normalizeStyle(hasChildren.value ? "" : "color: transparent; cursor: default"),
+				style: normalizeStyle(__props.isExpandable(__props.data, __props.nodeStatusMap) ? "" : "color: transparent; cursor: default"),
 				icon: expanded.value ? unref(ArrowDown) : unref(ArrowRight),
 				onClick: expandHandler
 			}, null, 8, ["style", "icon"]), createElementVNode("div", {
 				class: "tree-node-content",
 				onClick: nodeClickHandler
-			}, [renderSlot(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [createTextVNode(toDisplayString(`${__props.data.name} (${__props.data.id})`), 1)])]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "tree-node-tool", { data: __props.data })])])])], 38), hasChildren.value && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item) => {
+			}, [renderSlot(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [createTextVNode(toDisplayString(`${__props.data.name} (${__props.data.id})`), 1)])]), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "tree-node-tool", { data: __props.data })])])])], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? (openBlock(), createElementBlock("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.items, (item) => {
 				return openBlock(), createBlock(_component_TreeNode, {
 					key: item.id,
 					data: item,
 					parent: __props.data,
 					parentsId: [...__props.parentsId, __props.data.id],
 					"node-status-map": __props.nodeStatusMap,
-					indent: __props.indent + __props.nextLevelIndentIncrement
+					indent: __props.indent + __props.nextLevelIndentIncrement,
+					"is-expandable": __props.isExpandable
 				}, {
 					"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 					"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -116,7 +120,8 @@ var TreeNode_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					"parent",
 					"parentsId",
 					"node-status-map",
-					"indent"
+					"indent",
+					"is-expandable"
 				]);
 			}), 128))])) : createCommentVNode("v-if", true)], 40, _hoisted_1)), [[vShow, visible.value]]);
 		};

package/dist/es/index.js

@@ -16,7 +16,7 @@ import { useServices } from "./hooks/use-services.js";
 import { useFloatBox } from "./hooks/use-float-box.js";
 import { useWindowRect } from "./hooks/use-window-rect.js";
 import { useEditorContentHeight } from "./hooks/use-editor-content-height.js";
-import { updateStatus } from "./utils/tree.js";
+import { defaultIsExpandable, updateStatus } from "./utils/tree.js";
 import { useFilter } from "./hooks/use-filter.js";
 import { useGetSo } from "./hooks/use-getso.js";
 import { useNextFloatBoxPosition } from "./hooks/use-next-float-box-position.js";
@@ -76,4 +76,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, designPlugin, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, info, isIncludeDataSource, monaco_editor_default as loadMonaco, log, moveItemsInContainer, numberOptions, props_default as propsService, resolveSelectedNode, serializeConfig, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };

package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js

@@ -46,7 +46,7 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				return;
 			}
 			const type = node.value.type || (node.value.items ? "container" : "text");
-			curFormConfig.value = await propsService.getPropsConfig(type);
+			curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
 			values.value = node.value;
 		};
 		watchEffect(init);

package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -47,7 +47,8 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		layerContentMenu: {},
 		indent: {},
 		nextLevelIndentIncrement: {},
-		customContentMenu: {}
+		customContentMenu: {},
+		layerNodeIsExpandable: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
@@ -86,7 +87,8 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 						layerContentMenu: props.layerContentMenu,
 						customContentMenu: props.customContentMenu,
 						indent: props.indent,
-						nextLevelIndentIncrement: props.nextLevelIndentIncrement
+						nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+						isExpandable: props.layerNodeIsExpandable
 					},
 					component: LayerPanel_default,
 					slots: {}

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -18,7 +18,8 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		layerContentMenu: {},
 		indent: {},
 		nextLevelIndentIncrement: {},
-		customContentMenu: { type: Function }
+		customContentMenu: { type: Function },
+		isExpandable: { type: Function }
 	},
 	setup(__props) {
 		const services = useServices();
@@ -58,6 +59,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						"node-status-map": unref(nodeStatusMap),
 						indent: __props.indent,
 						"next-level-indent-increment": __props.nextLevelIndentIncrement,
+						"is-expandable": __props.isExpandable,
 						onNodeDragover: unref(handleDragOver),
 						onNodeDragstart: unref(handleDragStart),
 						onNodeDragleave: unref(handleDragLeave),
@@ -75,6 +77,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 						"node-status-map",
 						"indent",
 						"next-level-indent-increment",
+						"is-expandable",
 						"onNodeDragover",
 						"onNodeDragstart",
 						"onNodeDragleave",

package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,17 @@
 import { useServices } from "../../hooks/use-services.js";
-import { TMagicButton } from "@tmagic/design";
+import { TMagicButton, TMagicTooltip } from "@tmagic/design";
 import { getNodePath } from "@tmagic/utils";
-import { Fragment, computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
-	class: "m-editor-breadcrumb"
+	class: "m-editor-breadcrumb-ellipsis"
 };
-var _hoisted_2 = { key: 0 };
+var _hoisted_2 = {
+	key: 2,
+	class: "m-editor-breadcrumb-separator"
+};
+var COLLAPSE_RATIO = .8;
 var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MEditorBreadcrumb",
 	__name: "Breadcrumb",
@@ -17,21 +21,92 @@ var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const nodes = computed(() => editorService.get("nodes"));
 		const root = computed(() => editorService.get("root"));
 		const path = computed(() => getNodePath(node.value?.id || "", root.value?.items || []));
+		const containerRef = ref(null);
+		const collapsed = ref(false);
+		const displayPath = computed(() => {
+			const list = path.value;
+			if (!collapsed.value || list.length <= 3) return list;
+			return [
+				list[0],
+				{
+					isEllipsis: true,
+					id: "__ellipsis__",
+					name: "..."
+				},
+				list[list.length - 2],
+				list[list.length - 1]
+			];
+		});
+		const measureOverflow = async () => {
+			if (collapsed.value) {
+				collapsed.value = false;
+				await nextTick();
+			}
+			const el = containerRef.value;
+			const parent = el?.parentElement;
+			if (!el || !parent) return;
+			const contentWidth = el.scrollWidth;
+			const parentWidth = parent.clientWidth;
+			if (parentWidth <= 0) return;
+			collapsed.value = contentWidth > parentWidth * COLLAPSE_RATIO;
+		};
+		let resizeObserver = null;
+		const observe = () => {
+			resizeObserver?.disconnect();
+			const el = containerRef.value;
+			if (!el || typeof ResizeObserver === "undefined") return;
+			resizeObserver = new ResizeObserver(() => {
+				measureOverflow();
+			});
+			resizeObserver.observe(el);
+			if (el.parentElement) resizeObserver.observe(el.parentElement);
+		};
+		onMounted(() => {
+			observe();
+			measureOverflow();
+		});
+		onBeforeUnmount(() => {
+			resizeObserver?.disconnect();
+			resizeObserver = null;
+		});
+		watch(() => nodes.value.length, async () => {
+			await nextTick();
+			observe();
+			measureOverflow();
+		});
+		watch(path, async () => {
+			await nextTick();
+			measureOverflow();
+		});
 		const select = async (node) => {
 			await editorService.select(node);
 			editorService.get("stage")?.select(node.id);
 		};
 		return (_ctx, _cache) => {
-			return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(path.value, (item, index) => {
-				return openBlock(), createElementBlock(Fragment, { key: item.id }, [createVNode(unref(TMagicButton), {
-					link: "",
-					disabled: item.id === node.value?.id,
-					onClick: ($event) => select(item)
+			return nodes.value.length === 1 ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "m-editor-breadcrumb"
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(displayPath.value, (item, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: item.isEllipsis ? `ellipsis-${index}` : item.id }, [item.isEllipsis ? (openBlock(), createElementBlock("span", _hoisted_1, "...")) : (openBlock(), createBlock(unref(TMagicTooltip), {
+					key: 1,
+					content: item.name,
+					placement: "top",
+					"show-after": 500
 				}, {
-					default: withCtx(() => [createTextVNode(toDisplayString(item.name), 1)]),
+					default: withCtx(() => [createVNode(unref(TMagicButton), {
+						class: "m-editor-breadcrumb-item",
+						link: "",
+						disabled: item.id === node.value?.id,
+						onClick: ($event) => select(item)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(item.name), 1)]),
+						_: 2
+					}, 1032, ["disabled", "onClick"])]),
 					_: 2
-				}, 1032, ["disabled", "onClick"]), index < path.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, "/")) : createCommentVNode("v-if", true)], 64);
-			}), 128))])) : createCommentVNode("v-if", true);
+				}, 1032, ["content"])), index < displayPath.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_2, "/")) : createCommentVNode("v-if", true)], 64);
+			}), 128))], 512)) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useServices } from "../../hooks/use-services.js";
 import Stage_default from "./viewer/Stage.js";
 import Breadcrumb_default from "./Breadcrumb.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-workspace" };
 var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -28,7 +28,10 @@ var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					"disabled-stage-overlay": __props.disabledStageOverlay,
 					"stage-content-menu": __props.stageContentMenu,
 					"custom-content-menu": __props.customContentMenu
-				}, null, 8, [
+				}, {
+					"stage-top": withCtx(() => [renderSlot(_ctx.$slots, "stage-top")]),
+					_: 3
+				}, 8, [
 					"stage-options",
 					"disabled-stage-overlay",
 					"stage-content-menu",

package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,7 @@ import StageOverlay_default from "./StageOverlay.js";
 import ViewerMenu_default from "./ViewerMenu.js";
 import { getOffset } from "@tmagic/stage";
 import { calcValueByFontsize, getIdFromEl } from "@tmagic/utils";
-import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/Stage.vue?vue&type=script&setup=true&lang.ts
 var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	name: "MEditorStage",
@@ -236,6 +236,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				},
 				onClick: _cache[0] || (_cache[0] = ($event) => stageWrapRef.value?.container?.focus())
 			}, {
+				before: withCtx(() => [renderSlot(_ctx.$slots, "stage-top")]),
 				content: withCtx(() => [!__props.disabledStageOverlay ? (openBlock(), createBlock(StageOverlay_default, { key: 0 })) : createCommentVNode("v-if", true), (openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(ViewerMenu_default, {
 					ref: "menu",
 					"is-multi-select": isMultiSelect.value,
@@ -254,7 +255,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					onDrop: dropHandler,
 					onDragover: dragoverHandler
 				}, null, 36), createVNode(NodeListMenu_default)]),
-				_: 1
+				_: 3
 			}, 8, [
 				"width",
 				"height",

package/dist/es/services/editor.js

@@ -334,7 +334,7 @@ var Editor = class extends BaseService_default {
 		if (removedItems.length > 0 && pageForOp) this.pushOpHistory("remove", { removedItems }, pageForOp);
 		this.emit("remove", nodes);
 	}
-	async doUpdate(config, { changeRecords = [] } = {}) {
+	async doUpdate(config, { changeRecords = [], selectedAfterUpdate = true } = {}) {
 		const root = this.get("root");
 		if (!root) throw new Error("root为空");
 		if (!config?.id) throw new Error("没有配置或者配置缺少id值");
@@ -361,10 +361,12 @@ var Editor = class extends BaseService_default {
 		const layout = await this.getLayout(node);
 		if (Array.isArray(newConfig.items) && newLayout !== layout) newConfig = setChildrenLayout(newConfig, newLayout);
 		parentNodeItems[index] = newConfig;
-		const nodes = this.get("nodes");
-		const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
-		nodes.splice(targetIndex, 1, newConfig);
-		this.set("nodes", [...nodes]);
+		if (selectedAfterUpdate) {
+			const nodes = this.get("nodes");
+			const targetIndex = nodes.findIndex((nodeItem) => `${nodeItem.id}` === `${newConfig.id}`);
+			nodes.splice(targetIndex, 1, newConfig);
+			this.set("nodes", [...nodes]);
+		}
 		if (isPage(newConfig) || isPageFragment(newConfig)) this.set("page", newConfig);
 		this.addModifiedNodeId(newConfig.id);
 		return {

package/dist/es/services/props.js

@@ -72,8 +72,8 @@ var Props = class extends BaseService_default {
 	* @param type 组件类型
 	* @returns 组件属性表单配置
 	*/
-	async getPropsConfig(type) {
-		if (type === "area") return await this.getPropsConfig("button");
+	async getPropsConfig(type, data) {
+		if (type === "area") return await this.getPropsConfig("button", data);
 		return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
 	}
 	setPropsValues(values) {

package/dist/es/style.css

@@ -1325,6 +1325,26 @@ fieldset.m-fieldset .m-form-tip {
   left: 5px;
   top: 5px;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-item {
+  max-width: 100px;
+  min-width: 0;
+  overflow: hidden;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-item > span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-separator,
+.m-editor-breadcrumb .m-editor-breadcrumb-ellipsis {
+  margin: 0 4px;
+  flex-shrink: 0;
 }
 
 .data-source-list-panel .list-container .list-item .codeIcon {

package/dist/es/utils/tree.js

@@ -7,5 +7,7 @@ var updateStatus = (nodeStatusMap, id, status) => {
 		if (nodeStatus[key] !== void 0 && status[key] !== void 0) nodeStatus[key] = Boolean(status[key]);
 	});
 };
+/** 默认的组件树节点是否可展开的判断函数：当节点的子项中至少存在一个可见节点时认为可展开 */
+var defaultIsExpandable = (data, nodeStatusMap) => Array.isArray(data.items) && data.items.some((item) => nodeStatusMap.get(item.id)?.visible);
 //#endregion
-export { updateStatus };
+export { defaultIsExpandable, updateStatus };

package/dist/style.css

@@ -1325,6 +1325,26 @@ fieldset.m-fieldset .m-form-tip {
   left: 5px;
   top: 5px;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-item {
+  max-width: 100px;
+  min-width: 0;
+  overflow: hidden;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-item > span {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-breadcrumb .m-editor-breadcrumb-separator,
+.m-editor-breadcrumb .m-editor-breadcrumb-ellipsis {
+  margin: 0 4px;
+  flex-shrink: 0;
 }
 
 .data-source-list-panel .list-container .list-item .codeIcon {