@tmagic/editor 1.8.0-beta.13 → 1.8.0-beta.15

package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js

@@ -6,13 +6,8 @@ import SplitView_default from "../components/SplitView.js";
 import PageBar_default from "./page-bar/PageBar.js";
 import AddPageBox_default from "./AddPageBox.js";
 import CodeEditor_default from "./CodeEditor.js";
-import { computed, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, inject, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { computed, createCommentVNode, createElementBlock, createSlots, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, renderSlot, unref, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
 //#region packages/editor/src/layouts/Framework.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	class: "m-editor",
-	ref: "content",
-	style: { "min-width": "900px" }
-};
 var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorFramework",
 	__name: "Framework",
@@ -20,7 +15,8 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		disabledPageFragment: { type: Boolean },
 		pageBarSortOptions: {},
 		pageFilterFunction: { type: Function },
-		hideSidebar: { type: Boolean }
+		hideSidebar: { type: Boolean },
+		theme: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -42,7 +38,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		watch(() => uiService.get("hideSlideBar"), (hideSlideBar) => {
 			uiService.set("columnWidth", {
 				...columnWidth.value,
-				left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310
+				left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345
 			});
 		});
 		const columnWidthChange = (columnW) => {
@@ -75,7 +71,15 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			}
 		};
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", {
+				ref: "content",
+				class: normalizeClass([
+					"m-editor",
+					__props.theme ? `m-editor--${__props.theme}` : "",
+					__props.theme ? `m-theme--${__props.theme}` : ""
+				]),
+				style: { "min-width": "900px" }
+			}, [
 				renderSlot(_ctx.$slots, "header"),
 				renderSlot(_ctx.$slots, "nav"),
 				renderSlot(_ctx.$slots, "content-before"),
@@ -134,7 +138,7 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				]), [[vShow, !showSrc.value]]),
 				renderSlot(_ctx.$slots, "content-after"),
 				renderSlot(_ctx.$slots, "footer")
-			], 512);
+			], 2);
 		};
 	}
 });

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

@@ -42,18 +42,27 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			tabPosition: "right",
 			items: styleTabConfig.items
 		}];
+		let initSeq = 0;
+		let mounted = true;
 		const init = async () => {
+			initSeq += 1;
+			const seq = initSeq;
 			if (!node.value) {
+				if (seq !== initSeq || !mounted) return;
 				curFormConfig.value = [];
 				return;
 			}
 			const type = node.value.type || (node.value.items ? "container" : "text");
-			curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
+			const config = await propsService.getPropsConfig(type, { node: node.value });
+			if (seq !== initSeq || !mounted) return;
+			if (!node.value) return;
+			curFormConfig.value = config;
 			values.value = node.value;
 		};
 		watchEffect(init);
 		propsService.on("props-configs-change", init);
 		onBeforeUnmount(() => {
+			mounted = false;
 			propsService.off("props-configs-change", init);
 		});
 		const submit = async (v, eventData, error, source = "props") => {
@@ -63,14 +72,14 @@ var PropsPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					...v,
 					style: {}
 				};
-				if (v.style) {
+				if (v.style) if (eventData) {
 					Object.entries(v.style).forEach(([key, value]) => {
 						if (value !== "" && newValue.style) newValue.style[key] = value;
 					});
-					eventData?.changeRecords?.forEach((record) => {
+					eventData.changeRecords?.forEach((record) => {
 						if (record.propPath?.startsWith("style") && record.value === "") setValueByKeyPath(record.propPath, record.value, newValue);
 					});
-				}
+				} else newValue.style = { ...v.style };
 				const historySource = eventData ? "props" : "code";
 				editorService.update(newValue, {
 					changeRecords: eventData?.changeRecords,

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

@@ -9,7 +9,7 @@ import DataSourceListPanel_default from "./data-source/DataSourceListPanel.js";
 import LayerPanel_default from "./layer/LayerPanel.js";
 import ComponentListPanel_default from "./ComponentListPanel.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
-import { Close, Coin, EditPen, Goods, List } from "@element-plus/icons-vue";
+import { Box, Close, Coin, EditPen, Finished } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -82,7 +82,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				[SideItemKey.COMPONENT_LIST]: {
 					$key: SideItemKey.COMPONENT_LIST,
 					type: "component",
-					icon: Goods,
+					icon: Box,
 					text: "组件",
 					component: ComponentListPanel_default,
 					slots: {}
@@ -90,7 +90,7 @@ var Sidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 				layer: {
 					$key: SideItemKey.LAYER,
 					type: "component",
-					icon: List,
+					icon: Finished,
 					text: "已选组件",
 					props: {
 						layerContentMenu: props.layerContentMenu,

package/dist/es/plugin.js

@@ -28,7 +28,8 @@ import designPlugin from "@tmagic/design";
 var defaultInstallOpt = {
 	parseDSL: (dsl) => eval(dsl),
 	customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
+	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options),
+	flat: false
 };
 var plugin_default = { install: (app, opt) => {
 	const option = Object.assign(defaultInstallOpt, opt || {});

package/dist/es/services/editor.js

@@ -347,7 +347,14 @@ var Editor = class extends BaseService {
 			data: newNodes.map((node) => ({
 				node,
 				page: this.getPageOfNode(node.id)
-			}))
+			})),
+			historySource,
+			doNotPushHistory
+		});
+		const addedPages = newNodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (addedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: []
 		});
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
@@ -448,7 +455,14 @@ var Editor = class extends BaseService {
 		this.emit("remove", nodes);
 		this.emit("change", {
 			type: "remove",
-			data: changeItems
+			data: changeItems,
+			historySource,
+			doNotPushHistory
+		});
+		const removedPages = nodes.filter((node) => isPage(node) || isPageFragment(node));
+		if (removedPages.length) history_default.notifyPageStructureChange({
+			add: [],
+			remove: removedPages
 		});
 	}
 	async doUpdate(config, { changeRecords = [], historySource } = {}) {
@@ -541,7 +555,9 @@ var Editor = class extends BaseService {
 			data: updateData.map((node) => ({
 				node,
 				page: this.getPageOfNode(node.newNode.id)
-			}))
+			})),
+			historySource,
+			doNotPushHistory
 		});
 		return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
 	}
@@ -714,7 +730,9 @@ var Editor = class extends BaseService {
 				node,
 				page: this.getPageOfNode(node.id)
 			}],
-			offset
+			offset,
+			historySource,
+			doNotPushHistory
 		});
 	}
 	/**
@@ -852,7 +870,9 @@ var Editor = class extends BaseService {
 				page: this.getPageOfNode(node.id)
 			})),
 			targetIndex,
-			targetParent
+			targetParent,
+			historySource,
+			doNotPushHistory
 		});
 	}
 	/**
@@ -1228,24 +1248,35 @@ var Editor = class extends BaseService {
 		const prevMap = new Map(prevPages.map((p) => [`${p.id}`, p]));
 		const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
 		const indexInItems = (root, id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
+		const addedPages = [];
+		const removedPages = [];
 		nextPages.forEach((nextPage) => {
 			const prevPage = prevMap.get(`${nextPage.id}`);
-			if (!prevPage) this.pushPageDiffStep("add", nextPage, {
-				newSchema: cloneDeep$1(toRaw(nextPage)),
-				parentId: nextRoot.id,
-				index: indexInItems(nextRoot, nextPage.id)
-			}, source);
-			else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
+			if (!prevPage) {
+				this.pushPageDiffStep("add", nextPage, {
+					newSchema: cloneDeep$1(toRaw(nextPage)),
+					parentId: nextRoot.id,
+					index: indexInItems(nextRoot, nextPage.id)
+				}, source);
+				addedPages.push(nextPage);
+			} else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) this.pushPageDiffStep("update", nextPage, {
 				oldSchema: cloneDeep$1(toRaw(prevPage)),
 				newSchema: cloneDeep$1(toRaw(nextPage))
 			}, source);
 		});
 		prevPages.forEach((prevPage) => {
-			if (!nextMap.has(`${prevPage.id}`)) this.pushPageDiffStep("remove", prevPage, {
-				oldSchema: cloneDeep$1(toRaw(prevPage)),
-				parentId: preRoot.id,
-				index: indexInItems(preRoot, prevPage.id)
-			}, source);
+			if (!nextMap.has(`${prevPage.id}`)) {
+				this.pushPageDiffStep("remove", prevPage, {
+					oldSchema: cloneDeep$1(toRaw(prevPage)),
+					parentId: preRoot.id,
+					index: indexInItems(preRoot, prevPage.id)
+				}, source);
+				removedPages.push(prevPage);
+			}
+		});
+		if (addedPages.length || removedPages.length) history_default.notifyPageStructureChange({
+			add: addedPages,
+			remove: removedPages
 		});
 	}
 	/**
@@ -1301,10 +1332,12 @@ var Editor = class extends BaseService {
 	/**
 	* 应用历史操作（撤销 / 重做）
 	*
-	* 所有 DSL 修改都走 `editor.add / remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
-	* `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底。
+	* 删除 / 更新类修改走 `editor.remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
+	* `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底；
+	* 「重新插回节点」（撤销 remove / 重做 add）需按 step 记录的 parentId / index 精确还原，
+	* 不走 this.add，由手工 splice + stage.add 完成后补发等价的 add / change 事件（见 emitHistoryInsertEvents）。
 	*
-	* 注意：这些公开方法会发出 add / remove / update 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
+	* 注意：这些路径都会发出 add / remove / update / change 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
 	* 请监听 `history-change` 事件配合判断。
 	*
 	* @param step 操作记录
@@ -1318,7 +1351,8 @@ var Editor = class extends BaseService {
 		const commonOpts = {
 			doNotSelect: true,
 			doNotSwitchPage: true,
-			doNotPushHistory: true
+			doNotPushHistory: true,
+			historySource: step.source
 		};
 		switch (step.opType) {
 			case "add": {
@@ -1330,12 +1364,15 @@ var Editor = class extends BaseService {
 				}
 				else {
 					const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+					const addedNodes = [];
 					for (const { newSchema, parentId, index } of sorted) {
 						if (!newSchema || parentId === void 0) continue;
 						const parent = this.getNodeById(parentId, false);
 						if (parent?.items) {
-							if (typeof index === "number" && index >= 0 && index < parent.items.length) parent.items.splice(index, 0, cloneDeep$1(newSchema));
-							else parent.items.push(cloneDeep$1(newSchema));
+							const addedNode = cloneDeep$1(newSchema);
+							if (typeof index === "number" && index >= 0 && index < parent.items.length) parent.items.splice(index, 0, addedNode);
+							else parent.items.push(addedNode);
+							addedNodes.push(addedNode);
 							await stage?.add({
 								config: cloneDeep$1(newSchema),
 								parent: cloneDeep$1(parent),
@@ -1344,6 +1381,7 @@ var Editor = class extends BaseService {
 							});
 						}
 					}
+					this.emitHistoryInsertEvents(addedNodes, step.source);
 				}
 				break;
 			}
@@ -1351,11 +1389,14 @@ var Editor = class extends BaseService {
 				const items = step.diff ?? [];
 				if (reverse) {
 					const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+					const addedNodes = [];
 					for (const { oldSchema, parentId, index } of sorted) {
 						if (!oldSchema || parentId === void 0) continue;
 						const parent = this.getNodeById(parentId, false);
 						if (parent?.items) {
-							parent.items.splice(index ?? parent.items.length, 0, cloneDeep$1(oldSchema));
+							const addedNode = cloneDeep$1(oldSchema);
+							parent.items.splice(index ?? parent.items.length, 0, addedNode);
+							addedNodes.push(addedNode);
 							await stage?.add({
 								config: cloneDeep$1(oldSchema),
 								parent: cloneDeep$1(parent),
@@ -1364,6 +1405,7 @@ var Editor = class extends BaseService {
 							});
 						}
 					}
+					this.emitHistoryInsertEvents(addedNodes, step.source);
 				} else for (const { oldSchema } of items) {
 					if (!oldSchema) continue;
 					const existing = this.getNodeById(oldSchema.id, false);
@@ -1390,7 +1432,10 @@ var Editor = class extends BaseService {
 					}
 					return cloneDeep$1(reverse ? oldNode : newNode);
 				});
-				if (configs.length) await this.update(configs, { doNotPushHistory: true });
+				if (configs.length) await this.update(configs, {
+					doNotPushHistory: true,
+					historySource: step.source
+				});
 				break;
 			}
 		}
@@ -1414,6 +1459,23 @@ var Editor = class extends BaseService {
 	selectedConfigExceptionHandler(config) {
 		return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
 	}
+	/**
+	* 撤销 remove / 重做 add 通过手工 splice 按 step 记录的 parentId / index 精确还原节点（不走 this.add，原因见调用处注释），
+	* 这里补齐与 this.add 等价的 add / change 事件，保证撤销/重做路径的事件行为与正向操作一致。
+	*/
+	emitHistoryInsertEvents(nodes, source) {
+		if (!nodes.length) return;
+		this.emit("add", nodes);
+		this.emit("change", {
+			type: "add",
+			data: nodes.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.id)
+			})),
+			historySource: source,
+			doNotPushHistory: true
+		});
+	}
 };
 var editor_default = new Editor();
 //#endregion

package/dist/es/services/history.js

@@ -244,6 +244,22 @@ var History = class extends BaseService {
 		});
 	}
 	/**
+	* 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+	*
+	* 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+	* 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+	* 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+	*
+	* 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+	* 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+	*
+	* @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+	*/
+	notifyPageStructureChange(change) {
+		if (!change.add.length && !change.remove.length) return;
+		this.emit("page-structure-change", change);
+	}
+	/**
 	* 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
 	*
 	* - 每个 UndoRedo 栈连同其游标、容量一并保存，恢复后可继续 undo/redo；

package/dist/es/services/ui.js

@@ -19,11 +19,11 @@ var state = shallowReactive({
 		height: 817
 	},
 	columnWidth: {
-		left: storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310,
+		left: 0,
 		center: 0,
-		right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
+		right: 0
 	},
-	minLeftColumnWidth: 200,
+	minLeftColumnWidth: 345,
 	minCenterColumnWidth: 400,
 	minRightColumnWidth: 300,
 	showGuides: true,
@@ -48,6 +48,8 @@ var state = shallowReactive({
 		top: 0
 	}
 });
+state.columnWidth.left = Math.max(storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345, state.minLeftColumnWidth);
+state.columnWidth.right = Math.max(storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480, state.minRightColumnWidth);
 var canUsePluginMethods = {
 	async: ["zoom", "calcZoom"],
 	sync: []