@tmagic/editor 1.8.0-manmanyu.11 → 1.8.0-manmanyu.12

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

@@ -1,4 +1,3 @@
-import { useServices } from "../hooks/use-services.js";
 import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
@@ -23,11 +22,10 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		baseFormState: {},
 		selfDiffFieldTypes: {},
 		loadConfig: {},
-		services: { default: () => useServices() }
+		services: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
-		const { propsService, dataSourceService, codeBlockService, editorService } = props.services;
 		provide("services", props.services);
 		const config = ref([]);
 		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
@@ -107,16 +105,17 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
 		*/
 		const defaultLoadConfig = async () => {
+			if (!props.services) return [];
 			switch (props.category) {
 				case "node":
 					if (!props.type) return [];
-					return removeStyleDisplayConfig(await propsService.getPropsConfig(props.type, { node: props.value }));
-				case "data-source": return dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
+					return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
+				case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
 					...item,
 					active: "fields"
 				} : item);
 				case "code-block": return getCodeBlockFormConfig({
-					paramColConfig: codeBlockService.getParamsColConfig(),
+					paramColConfig: props.services.codeBlockService.getParamsColConfig(),
 					isDataSource: () => Boolean(props.dataSourceType),
 					dataSourceType: () => props.dataSourceType,
 					codeOptions,
@@ -155,10 +154,9 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		* - services：整个 useServices() 返回的服务集合；
 		* - stage：当前 editorService.get('stage') 的最新值。
 		*/
-		const stage = computed(() => editorService.get("stage"));
 		watchEffect(() => {
-			if (formRef.value) {
-				formRef.value.formState.stage = stage.value;
+			if (formRef.value && props.services) {
+				formRef.value.formState.stage = props.services.editorService.get("stage");
 				formRef.value.formState.services = props.services;
 			}
 		});

package/dist/es/layouts/history-list/BucketTab.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,15 @@
 import Bucket_default from "./Bucket.js";
 import { TMagicScrollbar } from "@tmagic/design";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/history-list/BucketTab.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-history-list-empty"
 };
-var _hoisted_2 = { class: "m-editor-history-list-toolbar" };
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-history-list-toolbar"
+};
 var _hoisted_3 = ["title"];
 var BucketTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListBucketTab",
@@ -26,11 +29,11 @@ var BucketTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	],
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("div", _hoisted_2, [createElementVNode("span", {
+			return !__props.buckets.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.config.showClear !== false ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", {
 				class: "m-editor-history-list-clear",
 				title: `清空${__props.config.title}的历史记录`,
 				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
-			}, "清空", 8, _hoisted_3)]), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
+			}, "清空", 8, _hoisted_3)])) : createCommentVNode("v-if", true), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.buckets, (bucket) => {
 					return openBlock(), createBlock(Bucket_default, {
 						key: `${__props.config.prefix}-${bucket.id}`,

package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,3 @@
-import { useServices } from "../../hooks/use-services.js";
 import CodeEditor_default from "../CodeEditor.js";
 import CompareForm_default from "../../components/CompareForm.js";
 import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from "@tmagic/design";
@@ -25,7 +24,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	name: "MEditorHistoryDiffDialog",
 	__name: "HistoryDiffDialog",
 	props: {
-		services: { default: () => useServices() },
+		services: {},
 		extendState: {},
 		loadConfig: {},
 		width: { default: "900px" },
@@ -66,6 +65,13 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		};
 		const dialogTitle = computed(() => props.onConfirm ? "确认回滚" : "查看修改差异");
 		const hasCurrent = computed(() => payload.value?.currentValue !== void 0 && payload.value?.currentValue !== null);
+		/** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
+		const hasValue = computed(() => payload.value?.value !== void 0 && payload.value?.value !== null);
+		/**
+		* 计算 open 时的初始对比模式：
+		* 没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；否则默认「与修改前对比」。
+		*/
+		const resolveInitialMode = () => !hasValue.value && hasCurrent.value ? "current" : "before";
 		/** 左侧（旧/参照）值 */
 		const leftValue = computed(() => {
 			if (!payload.value) return {};
@@ -108,7 +114,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		});
 		const open = (p) => {
 			payload.value = p;
-			mode.value = "before";
+			mode.value = resolveInitialMode();
 			viewMode.value = "form";
 			visible.value = true;
 		};
@@ -200,10 +206,13 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						size: "small",
 						class: "m-editor-history-diff-dialog-mode"
 					}, {
-						default: withCtx(() => [createVNode(unref(TMagicRadioButton), { value: "before" }, {
+						default: withCtx(() => [createVNode(unref(TMagicRadioButton), {
+							value: "before",
+							disabled: !hasValue.value
+						}, {
 							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("与修改前对比", -1)])]),
 							_: 1
-						}), createVNode(unref(TMagicRadioButton), {
+						}, 8, ["disabled"]), createVNode(unref(TMagicRadioButton), {
 							value: "current",
 							disabled: !hasCurrent.value
 						}, {

package/dist/es/layouts/history-list/HistoryListPanel.vue_vue_type_script_setup_true_lang.js

@@ -150,12 +150,12 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		/**
 		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
 		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
-		* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
+		* 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
 		*/
-		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, {
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert({
 			extendState: extendFormState,
 			getPropsPanelFormState
-		});
+		}, services);
 		/**
 		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
 		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。

package/dist/es/layouts/history-list/useHistoryRevert.js

@@ -118,13 +118,12 @@ var viewHistoryDiffDialog = async (payload, options) => {
 * ```ts
 * import { useHistoryRevert } from '@tmagic/editor';
 *
-* const { onPageRevert, onPageDiff } = useHistoryRevert(editorRef.value); // editorRef.value 即 Editor 暴露的 services
+* const { onPageRevert, onPageDiff } = useHistoryRevert({}, editorRef.value); // editorRef.value 即 Editor 暴露的 services
 * await onPageRevert(index); // 弹出差异 / 二次确认弹窗后回滚
 * onPageDiff(index); // 弹出只读差异弹窗查看前后值差异
 * ```
 */
-var useHistoryRevert = (services, options = {}) => {
-	const { editorService, dataSourceService, codeBlockService, historyService } = services;
+var useHistoryRevert = (options = {}, services) => {
 	const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
 	const { extendState, getPropsPanelFormState } = options;
 	/** 目标数据已被删除、无法回滚时的统一提示。 */
@@ -153,22 +152,22 @@ var useHistoryRevert = (services, options = {}) => {
 	};
 	const buildPageDiffPayload = (index) => buildDiffPayload({
 		category: "node",
-		groups: () => historyService.getHistoryGroups("page", editorService.get("page")?.id),
-		getCurrent: (id) => editorService.getNodeById(id),
+		groups: () => services?.historyService.getHistoryGroups("page", services?.editorService.get("page")?.id) ?? [],
+		getCurrent: (id) => services?.editorService.getNodeById(id),
 		resolveType: (n, o) => n.type || o.type || "",
 		resolveLabel: (n, o) => n.name || o.name || n.type || o.type || ""
 	}, index);
 	const buildDataSourceDiffPayload = (id, index) => buildDiffPayload({
 		category: "data-source",
-		groups: () => historyService.getHistoryGroups("dataSource"),
-		getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`),
+		groups: () => services?.historyService.getHistoryGroups("dataSource") ?? [],
+		getCurrent: (id) => services?.dataSourceService.getDataSourceById(`${id}`),
 		resolveType: (n, o) => n.type || o.type || "base",
 		resolveLabel: (n, o, id) => n.title || o.title || `${id}`
 	}, index, id);
 	const buildCodeBlockDiffPayload = (id, index) => buildDiffPayload({
 		category: "code-block",
-		groups: () => historyService.getHistoryGroups("codeBlock"),
-		getCurrent: (id) => codeBlockService.getCodeContentById(id),
+		groups: () => services?.historyService.getHistoryGroups("codeBlock") ?? [],
+		getCurrent: (id) => services?.codeBlockService.getCodeContentById(id),
 		resolveLabel: (n, o, id) => n.name || o.name || `${id}`
 	}, index, id);
 	/**
@@ -178,45 +177,45 @@ var useHistoryRevert = (services, options = {}) => {
 	* add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
 	*/
 	const isPageRevertTargetMissing = (index) => {
-		const step = historyService.getStepList("page", editorService.get("page")?.id)[index]?.step;
+		const step = services?.historyService.getStepList("page", services?.editorService.get("page")?.id)[index]?.step;
 		if (!step) return false;
 		if (step.opType === "update") return (step.diff ?? []).some((item) => {
 			const id = item.newSchema?.id ?? item.oldSchema?.id;
-			return id !== void 0 && !editorService.getNodeById(id, false);
+			return id !== void 0 && !services?.editorService.getNodeById(id, false);
 		});
-		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !editorService.getNodeById(item.parentId, false));
+		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !services?.editorService.getNodeById(item.parentId, false));
 		return false;
 	};
 	/** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
 	const isDataSourceRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("dataSource", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !dataSourceService.getDataSourceById(`${id}`));
+		const step = services?.historyService.getStepList("dataSource", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.dataSourceService.getDataSourceById(`${id}`));
 	};
 	/** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
 	const isCodeBlockRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("codeBlock", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !codeBlockService.getCodeContentById(id));
+		const step = services?.historyService.getStepList("codeBlock", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.codeBlockService.getCodeContentById(id));
 	};
 	const onPageRevert = (index) => {
 		if (isPageRevertTargetMissing(index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildPageDiffPayload(index), { compareFormState: getPropsPanelFormState?.() }).then((result) => result ? editorService.revertPageStep(index) : null);
+		return runRevert(buildPageDiffPayload(index), { compareFormState: getPropsPanelFormState?.() }).then((result) => result ? services?.editorService.revertPageStep(index) : null);
 	};
 	const onDataSourceRevert = (id, index) => {
 		if (isDataSourceRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? dataSourceService.revert(id, index) : null);
+		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? services?.dataSourceService.revert(id, index) : null);
 	};
 	const onCodeBlockRevert = (id, index) => {
 		if (isCodeBlockRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? codeBlockService.revert(id, index) : null);
+		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? services?.codeBlockService.revert(id, index) : null);
 	};
 	/**
 	* 「查看差异」：可差异对比的步骤（单实体 update）动态挂载只读 HistoryDiffDialog 展示前后值差异，

package/dist/es/services/codeBlock.js

@@ -56,6 +56,7 @@ var CodeBlock = class extends BaseService {
 	async setCodeDsl(codeDsl) {
 		this.state.codeDsl = codeDsl;
 		this.emit("code-dsl-change", this.state.codeDsl);
+		this.emit("change", this.state.codeDsl);
 	}
 	/**
 	* 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
@@ -132,6 +133,7 @@ var CodeBlock = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("codeBlock", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("addOrUpdate", id, codeDsl[id]);
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 根据代码块id数组获取代码dsl
@@ -229,6 +231,7 @@ var CodeBlock = class extends BaseService {
 			}
 			this.emit("remove", id);
 		});
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的写入方法行为完全一致，

package/dist/es/services/dataSource.js

@@ -102,6 +102,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, newConfig.id) : null)?.uuid ?? null;
 		}
 		this.emit("add", newConfig);
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -132,6 +133,7 @@ var DataSource = class extends BaseService {
 			oldConfig,
 			changeRecords
 		});
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -156,6 +158,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("remove", id);
+		this.emit("change", this.get("dataSources"));
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的 add / update / remove 行为完全一致，

package/dist/es/services/editor.js

@@ -335,6 +335,13 @@ var Editor = class extends BaseService {
 			} else this.selectionBeforeOp = null;
 		}
 		this.emit("add", newNodes);
+		this.emit("change", {
+			type: "add",
+			data: newNodes.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.id)
+			}))
+		});
 		return Array.isArray(addNode) ? newNodes : newNodes[0];
 	}
 	async doRemove(node, { doNotSelect = false, doNotSwitchPage = false } = {}) {
@@ -398,6 +405,10 @@ var Editor = class extends BaseService {
 	async remove(nodeOrNodeList, { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription, historySource } = {}) {
 		this.captureSelectionBeforeOp();
 		const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+		const changeItems = nodes.map((node) => ({
+			node,
+			page: this.getPageOfNode(node.id)
+		}));
 		const removedItems = [];
 		let pageForOp = null;
 		if (!(isPage(nodes[0]) || isPageFragment(nodes[0]))) for (const n of nodes) {
@@ -427,6 +438,10 @@ var Editor = class extends BaseService {
 		});
 		else this.selectionBeforeOp = null;
 		this.emit("remove", nodes);
+		this.emit("change", {
+			type: "remove",
+			data: changeItems
+		});
 	}
 	async doUpdate(config, { changeRecords = [], historySource } = {}) {
 		if (!this.get("root")) throw new Error("root为空");
@@ -512,6 +527,13 @@ var Editor = class extends BaseService {
 			} else this.selectionBeforeOp = null;
 		}
 		this.emit("update", updateData);
+		this.emit("change", {
+			type: "update",
+			data: updateData.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.newNode.id)
+			}))
+		});
 		return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
 	}
 	/**
@@ -677,6 +699,14 @@ var Editor = class extends BaseService {
 			});
 		} else this.selectionBeforeOp = null;
 		this.emit("move-layer", offset);
+		this.emit("change", {
+			type: "move-layer",
+			data: [{
+				node,
+				page: this.getPageOfNode(node.id)
+			}],
+			offset
+		});
 	}
 	/**
 	* 移动一个或多个节点到指定容器中。
@@ -806,6 +836,15 @@ var Editor = class extends BaseService {
 			configs,
 			targetParent
 		});
+		this.emit("change", {
+			type: "drag-to",
+			data: configs.map((node) => ({
+				node,
+				page: this.getPageOfNode(node.id)
+			})),
+			targetIndex,
+			targetParent
+		});
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的普通操作（add / remove / update ...）行为完全一致，
@@ -1064,6 +1103,19 @@ var Editor = class extends BaseService {
 	addModifiedNodeId(id) {
 		this.get("modifiedNodeIds").set(id, id);
 	}
+	/**
+	* 获取指定节点所属的页面 / 页面片：
+	* - 普通节点返回其所在的 page；
+	* - 节点本身就是 page / pageFragment 时返回它自己；
+	* - 找不到时返回 null。
+	* 供 `change` 事件携带「变更节点对应的 page」（而非编辑器当前选中页）。
+	*/
+	getPageOfNode(id) {
+		const { node, page } = this.getNodeInfo(id, false);
+		if (page) return page;
+		if (node && (isPage(node) || isPageFragment(node))) return node;
+		return null;
+	}
 	captureSelectionBeforeOp() {
 		if (this.selectionBeforeOp) return;
 		this.selectionBeforeOp = this.get("nodes").map((n) => n.id);