@tmagic/editor 1.7.11 → 1.7.13-beta.0

package/dist/tmagic-editor.umd.cjs

@@ -4805,8 +4805,8 @@
 		* @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[(0, _tmagic_utils.toLine)(type)] || await this.fillConfig([]));
 		}
 		setPropsValues(values) {
@@ -6103,7 +6103,7 @@
 			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值");
@@ -6130,10 +6130,12 @@
 			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 ((0, _tmagic_utils.isPage)(newConfig) || (0, _tmagic_utils.isPageFragment)(newConfig)) this.set("page", newConfig);
 			this.addModifiedNodeId(newConfig.id);
 			return {
@@ -6877,6 +6879,8 @@
 			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
 	//#region packages/editor/src/hooks/use-filter.ts
 	var useFilter = (nodeData, nodeStatusMap, filterNodeMethod) => {
@@ -7100,7 +7104,7 @@
 	]);
 	//#endregion
 	//#region packages/editor/src/utils/data-source/index.ts
-	var dataSourceFormConfig = (0, _tmagic_form.defineFormItem)({
+	var dataSourceFormConfig = {
 		type: "tab",
 		items: [
 			{
@@ -7162,7 +7166,7 @@
 				}]
 			}
 		]
-	});
+	};
 	var fillConfig$1 = (config) => [
 		...base_default(),
 		...config,
@@ -9018,7 +9022,7 @@
 					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;
 			};
 			(0, vue.watchEffect)(init);
@@ -9858,7 +9862,11 @@
 			parentsId: { default: () => [] },
 			nodeStatusMap: {},
 			indent: { default: 0 },
-			nextLevelIndentIncrement: { default: 11 }
+			nextLevelIndentIncrement: { default: 11 },
+			isExpandable: {
+				type: Function,
+				default: defaultIsExpandable
+			}
 		},
 		emits: [
 			"node-dragstart",
@@ -9881,7 +9889,6 @@
 			const selected = (0, vue.computed)(() => nodeStatus.value.selected);
 			const visible = (0, vue.computed)(() => nodeStatus.value.visible);
 			const draggable = (0, vue.computed)(() => nodeStatus.value.draggable);
-			const hasChildren = (0, vue.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);
 			};
@@ -9925,20 +9932,21 @@
 					onMouseenter: mouseenterHandler
 				}, [(0, vue.createVNode)(Icon_default, {
 					class: "expand-icon",
-					style: (0, vue.normalizeStyle)(hasChildren.value ? "" : "color: transparent; cursor: default"),
+					style: (0, vue.normalizeStyle)(__props.isExpandable(__props.data, __props.nodeStatusMap) ? "" : "color: transparent; cursor: default"),
 					icon: expanded.value ? (0, vue.unref)(_element_plus_icons_vue.ArrowDown) : (0, vue.unref)(_element_plus_icons_vue.ArrowRight),
 					onClick: expandHandler
 				}, null, 8, ["style", "icon"]), (0, vue.createElementVNode)("div", {
 					class: "tree-node-content",
 					onClick: nodeClickHandler
-				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])])], 38), hasChildren.value && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
+				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])])], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.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": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 						"tree-node-label": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -9949,7 +9957,8 @@
 						"parent",
 						"parentsId",
 						"node-status-map",
-						"indent"
+						"indent",
+						"is-expandable"
 					]);
 				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 40, _hoisted_1$49)), [[vue.vShow, visible.value]]);
 			};
@@ -9972,7 +9981,8 @@
 			nodeStatusMap: {},
 			indent: { default: 0 },
 			nextLevelIndentIncrement: {},
-			emptyText: { default: "暂无数据" }
+			emptyText: { default: "暂无数据" },
+			isExpandable: {}
 		},
 		emits: [
 			"node-dragover",
@@ -9999,7 +10009,8 @@
 						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": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: nodeData })]),
 						"tree-node-label": (0, vue.withCtx)(({ data: nodeData }) => [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: nodeData })]),
@@ -10009,7 +10020,8 @@
 						"data",
 						"indent",
 						"next-level-indent-increment",
-						"node-status-map"
+						"node-status-map",
+						"is-expandable"
 					]);
 				}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$48, [(0, vue.createElementVNode)("p", null, (0, vue.toDisplayString)(__props.emptyText), 1)]))], 32);
 			};
@@ -11444,7 +11456,8 @@
 			layerContentMenu: {},
 			indent: {},
 			nextLevelIndentIncrement: {},
-			customContentMenu: { type: Function }
+			customContentMenu: { type: Function },
+			isExpandable: { type: Function }
 		},
 		setup(__props) {
 			const services = useServices();
@@ -11484,6 +11497,7 @@
 							"node-status-map": (0, vue.unref)(nodeStatusMap),
 							indent: __props.indent,
 							"next-level-indent-increment": __props.nextLevelIndentIncrement,
+							"is-expandable": __props.isExpandable,
 							onNodeDragover: (0, vue.unref)(handleDragOver),
 							onNodeDragstart: (0, vue.unref)(handleDragStart),
 							onNodeDragleave: (0, vue.unref)(handleDragLeave),
@@ -11501,6 +11515,7 @@
 							"node-status-map",
 							"indent",
 							"next-level-indent-increment",
+							"is-expandable",
 							"onNodeDragover",
 							"onNodeDragstart",
 							"onNodeDragleave",
@@ -11676,7 +11691,8 @@
 			layerContentMenu: {},
 			indent: {},
 			nextLevelIndentIncrement: {},
-			customContentMenu: {}
+			customContentMenu: {},
+			layerNodeIsExpandable: {}
 		},
 		setup(__props, { expose: __expose }) {
 			const props = __props;
@@ -11715,7 +11731,8 @@
 							layerContentMenu: props.layerContentMenu,
 							customContentMenu: props.customContentMenu,
 							indent: props.indent,
-							nextLevelIndentIncrement: props.nextLevelIndentIncrement
+							nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+							isExpandable: props.layerNodeIsExpandable
 						},
 						component: LayerPanel_default,
 						slots: {}
@@ -12084,7 +12101,7 @@
 					(0, vue.createElementVNode)("div", {
 						ref: "target",
 						style: (0, vue.normalizeStyle)(style.value)
-					}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 4),
+					}, [(0, vue.renderSlot)(_ctx.$slots, "before"), (0, vue.renderSlot)(_ctx.$slots, "default")], 4),
 					(0, vue.renderSlot)(_ctx.$slots, "content"),
 					scrollHeight.value > __props.wrapHeight ? ((0, vue.openBlock)(), (0, vue.createBlock)(ScrollBar_default, {
 						key: 0,
@@ -12673,6 +12690,7 @@
 					},
 					onClick: _cache[0] || (_cache[0] = ($event) => stageWrapRef.value?.container?.focus())
 				}, {
+					before: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
 					content: (0, vue.withCtx)(() => [!__props.disabledStageOverlay ? ((0, vue.openBlock)(), (0, vue.createBlock)(StageOverlay_default, { key: 0 })) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, { to: "body" }, [(0, vue.createVNode)(ViewerMenu_default, {
 						ref: "menu",
 						"is-multi-select": isMultiSelect.value,
@@ -12691,7 +12709,7 @@
 						onDrop: dropHandler,
 						onDragover: dragoverHandler
 					}, null, 36), (0, vue.createVNode)(NodeListMenu_default)]),
-					_: 1
+					_: 3
 				}, 8, [
 					"width",
 					"height",
@@ -12709,9 +12727,13 @@
 	//#region packages/editor/src/layouts/workspace/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
 	var _hoisted_1$39 = {
 		key: 0,
-		class: "m-editor-breadcrumb"
+		class: "m-editor-breadcrumb-ellipsis"
 	};
-	var _hoisted_2$12 = { key: 0 };
+	var _hoisted_2$12 = {
+		key: 2,
+		class: "m-editor-breadcrumb-separator"
+	};
+	var COLLAPSE_RATIO = .8;
 	var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "MEditorBreadcrumb",
 		__name: "Breadcrumb",
@@ -12721,21 +12743,92 @@
 			const nodes = (0, vue.computed)(() => editorService.get("nodes"));
 			const root = (0, vue.computed)(() => editorService.get("root"));
 			const path = (0, vue.computed)(() => (0, _tmagic_utils.getNodePath)(node.value?.id || "", root.value?.items || []));
+			const containerRef = (0, vue.ref)(null);
+			const collapsed = (0, vue.ref)(false);
+			const displayPath = (0, vue.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 (0, vue.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);
+			};
+			(0, vue.onMounted)(() => {
+				observe();
+				measureOverflow();
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				resizeObserver?.disconnect();
+				resizeObserver = null;
+			});
+			(0, vue.watch)(() => nodes.value.length, async () => {
+				await (0, vue.nextTick)();
+				observe();
+				measureOverflow();
+			});
+			(0, vue.watch)(path, async () => {
+				await (0, vue.nextTick)();
+				measureOverflow();
+			});
 			const select = async (node) => {
 				await editorService.select(node);
 				editorService.get("stage")?.select(node.id);
 			};
 			return (_ctx, _cache) => {
-				return nodes.value.length === 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$39, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(path.value, (item, index) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.id }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
-						link: "",
-						disabled: item.id === node.value?.id,
-						onClick: ($event) => select(item)
+				return nodes.value.length === 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					ref_key: "containerRef",
+					ref: containerRef,
+					class: "m-editor-breadcrumb"
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(displayPath.value, (item, index) => {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.isEllipsis ? `ellipsis-${index}` : item.id }, [item.isEllipsis ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$39, "...")) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+						key: 1,
+						content: item.name,
+						placement: "top",
+						"show-after": 500
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.name), 1)]),
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+							class: "m-editor-breadcrumb-item",
+							link: "",
+							disabled: item.id === node.value?.id,
+							onClick: ($event) => select(item)
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.name), 1)]),
+							_: 2
+						}, 1032, ["disabled", "onClick"])]),
 						_: 2
-					}, 1032, ["disabled", "onClick"]), index < path.value.length - 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$12, "/")) : (0, vue.createCommentVNode)("v-if", true)], 64);
-				}), 128))])) : (0, vue.createCommentVNode)("v-if", true);
+					}, 1032, ["content"])), index < displayPath.value.length - 1 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$12, "/")) : (0, vue.createCommentVNode)("v-if", true)], 64);
+				}), 128))], 512)) : (0, vue.createCommentVNode)("v-if", true);
 			};
 		}
 	});
@@ -12769,7 +12862,10 @@
 						"disabled-stage-overlay": __props.disabledStageOverlay,
 						"stage-content-menu": __props.stageContentMenu,
 						"custom-content-menu": __props.customContentMenu
-					}, null, 8, [
+					}, {
+						"stage-top": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
+						_: 3
+					}, 8, [
 						"stage-options",
 						"disabled-stage-overlay",
 						"stage-content-menu",
@@ -14229,6 +14325,7 @@
 			canSelect: { type: Function },
 			isContainer: { type: Function },
 			customContentMenu: { type: Function },
+			layerNodeIsExpandable: { type: Function },
 			beforeDblclick: { type: Function },
 			extendFormState: { type: Function },
 			pageBarSortOptions: {},
@@ -14312,7 +14409,8 @@
 						"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": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "layer-panel-header")]),
 						"layer-node-content": (0, vue.withCtx)(({ data }) => [(0, vue.renderSlot)(_ctx.$slots, "layer-node-content", { data })]),
@@ -14335,13 +14433,15 @@
 						"layer-content-menu",
 						"custom-content-menu",
 						"indent",
-						"next-level-indent-increment"
+						"next-level-indent-increment",
+						"layer-node-is-expandable"
 					])])]),
 					workspace: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "workspace", { editorService: (0, vue.unref)(editor_default) }, () => [(0, vue.createVNode)(Workspace_default, {
 						"disabled-stage-overlay": __props.disabledStageOverlay,
 						"stage-content-menu": __props.stageContentMenu,
 						"custom-content-menu": __props.customContentMenu
 					}, {
+						"stage-top": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage-top")]),
 						stage: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "stage")]),
 						"workspace-content": (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "workspace-content", { editorService: (0, vue.unref)(editor_default) })]),
 						_: 3
@@ -18854,6 +18954,7 @@
 	exports.dataSourceService = dataSource_default;
 	exports.debug = debug;
 	exports.default = plugin_default;
+	exports.defaultIsExpandable = defaultIsExpandable;
 	exports.depService = dep_default;
 	Object.defineProperty(exports, "designPlugin", {
 		enumerable: true,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.11",
+  "version": "1.7.13-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.11",
-    "@tmagic/stage": "1.7.11",
-    "@tmagic/table": "1.7.11",
-    "@tmagic/form": "1.7.11",
-    "@tmagic/utils": "1.7.11"
+    "@tmagic/design": "1.7.13-beta.0",
+    "@tmagic/form": "1.7.13-beta.0",
+    "@tmagic/table": "1.7.13-beta.0",
+    "@tmagic/stage": "1.7.13-beta.0",
+    "@tmagic/utils": "1.7.13-beta.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.33",
-    "@tmagic/core": "1.7.11"
+    "@tmagic/core": "1.7.13-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -26,6 +26,7 @@
           :custom-content-menu="customContentMenu"
           :indent="treeIndent"
           :next-level-indent-increment="treeNextLevelIndentIncrement"
+          :layer-node-is-expandable="layerNodeIsExpandable"
         >
           <template #layer-panel-header>
             <slot name="layer-panel-header"></slot>
@@ -85,6 +86,7 @@
           :stage-content-menu="stageContentMenu"
           :custom-content-menu="customContentMenu"
         >
+          <template #stage-top><slot name="stage-top"></slot></template>
           <template #stage><slot name="stage"></slot></template>
           <template #workspace-content><slot name="workspace-content" :editorService="editorService"></slot></template>
         </Workspace>

package/src/components/ScrollViewer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="m-editor-scroll-viewer-container" ref="container">
     <div ref="target" :style="style">
+      <slot name="before"></slot>
       <slot></slot>
     </div>
 
@@ -29,7 +30,7 @@ import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from
 
 import { isNumber } from '@tmagic/utils';
 
-import type { ScrollViewerEvent } from '@editor/type';
+import type { ScrollViewerEvent, ScrollViewerSlots } from '@editor/type';
 import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
@@ -38,6 +39,8 @@ defineOptions({
   name: 'MEditorScrollViewer',
 });
 
+defineSlots<ScrollViewerSlots>();
+
 const props = withDefaults(
   defineProps<{
     width?: number | string;

package/src/components/Tree.vue

@@ -8,6 +8,7 @@
         :indent="indent"
         :next-level-indent-increment="nextLevelIndentIncrement"
         :node-status-map="nodeStatusMap"
+        :is-expandable="isExpandable"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -33,7 +34,7 @@ import { provide } from 'vue';
 
 import type { Id } from '@tmagic/core';
 
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
+import type { IsExpandableFunction, LayerNodeStatus, TreeNodeData } from '@editor/type';
 
 import TreeNode from './TreeNode.vue';
 
@@ -66,6 +67,8 @@ withDefaults(
     indent?: number;
     nextLevelIndentIncrement?: number;
     emptyText?: string;
+    /** 自定义判断节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    isExpandable?: IsExpandableFunction;
   }>(),
   {
     indent: 0,

package/src/components/TreeNode.vue

@@ -20,7 +20,7 @@
     >
       <MIcon
         class="expand-icon"
-        :style="hasChildren ? '' : 'color: transparent; cursor: default'"
+        :style="isExpandable(data, nodeStatusMap) ? '' : 'color: transparent; cursor: default'"
         :icon="expanded ? ArrowDown : ArrowRight"
         @click="expandHandler"
       ></MIcon>
@@ -37,7 +37,7 @@
       </div>
     </div>
 
-    <div v-if="hasChildren && expanded" class="m-editor-tree-node-children">
+    <div v-if="isExpandable(data, nodeStatusMap) && expanded" class="m-editor-tree-node-children">
       <TreeNode
         v-for="item in data.items"
         :key="item.id"
@@ -46,6 +46,7 @@
         :parentsId="[...parentsId, data.id]"
         :node-status-map="nodeStatusMap"
         :indent="indent + nextLevelIndentIncrement"
+        :is-expandable="isExpandable"
       >
         <template #tree-node-content="{ data: nodeData }">
           <slot name="tree-node-content" :data="nodeData"> </slot>
@@ -68,8 +69,8 @@ import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
 import type { Id } from '@tmagic/core';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { updateStatus } from '@editor/utils/tree';
+import type { IsExpandableFunction, LayerNodeStatus, TreeNodeData } from '@editor/type';
+import { defaultIsExpandable, updateStatus } from '@editor/utils/tree';
 
 defineSlots<{
   'tree-node-label'(_props: { data: TreeNodeData }): any;
@@ -100,11 +101,14 @@ const props = withDefaults(
     nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number;
     nextLevelIndentIncrement?: number;
+    /** 自定义判断节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    isExpandable?: IsExpandableFunction;
   }>(),
   {
     indent: 0,
     nextLevelIndentIncrement: 11,
     parentsId: () => [],
+    isExpandable: defaultIsExpandable,
   },
 );
 
@@ -123,10 +127,6 @@ 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: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);
 };

package/src/editorProps.ts

@@ -14,6 +14,7 @@ import type {
   ComponentGroup,
   CustomContentMenuFunction,
   DatasourceTypeOption,
+  IsExpandableFunction,
   MenuBarData,
   MenuButton,
   MenuComponent,
@@ -98,6 +99,8 @@ export interface EditorProps {
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   /** 用于自定义组件树与画布的右键菜单 */
   customContentMenu?: CustomContentMenuFunction;
+  /** 用于自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态） */
+  layerNodeIsExpandable?: IsExpandableFunction;
   /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;

package/src/layouts/props-panel/PropsPanel.vue

@@ -115,7 +115,7 @@ const init = async () => {
   }
 
   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;
 };
 

package/src/layouts/sidebar/Sidebar.vue

@@ -164,6 +164,7 @@ import { useServices } from '@editor/hooks/use-services';
 import {
   ColumnLayout,
   CustomContentMenuFunction,
+  type IsExpandableFunction,
   type MenuButton,
   type MenuComponent,
   type SideBarData,
@@ -191,6 +192,8 @@ const props = withDefaults(
     indent?: number;
     nextLevelIndentIncrement?: number;
     customContentMenu: CustomContentMenuFunction;
+    /** 自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+    layerNodeIsExpandable?: IsExpandableFunction;
   }>(),
   {
     data: () => ({
@@ -248,6 +251,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
         customContentMenu: props.customContentMenu,
         indent: props.indent,
         nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+        isExpandable: props.layerNodeIsExpandable,
       },
       component: LayerPanel,
       slots: {},

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -12,6 +12,7 @@
       :node-status-map="nodeStatusMap"
       :indent="indent"
       :next-level-indent-increment="nextLevelIndentIncrement"
+      :is-expandable="isExpandable"
       @node-dragover="handleDragOver"
       @node-dragstart="handleDragStart"
       @node-dragleave="handleDragLeave"
@@ -56,7 +57,14 @@ import SearchInput from '@editor/components/SearchInput.vue';
 import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useServices } from '@editor/hooks/use-services';
-import type { CustomContentMenuFunction, LayerPanelSlots, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type {
+  CustomContentMenuFunction,
+  IsExpandableFunction,
+  LayerPanelSlots,
+  MenuButton,
+  MenuComponent,
+  TreeNodeData,
+} from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
@@ -76,6 +84,8 @@ defineProps<{
   indent?: number;
   nextLevelIndentIncrement?: number;
   customContentMenu: CustomContentMenuFunction;
+  /** 自定义判断组件树节点是否可展开（即是否要展示为拥有子节点的形态）的函数 */
+  isExpandable?: IsExpandableFunction;
 }>();
 
 const services = useServices();