@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.3

package/dist/es/services/codeBlock.js

@@ -1,12 +1,14 @@
 import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
+import history_default from "./history.js";
 import { getEditorConfig } from "../utils/config.js";
 import storage_default, { Protocol } from "./storage.js";
 import { COPY_CODE_STORAGE_KEY } from "../utils/editor.js";
 import editor_default from "./editor.js";
+import { getValueByKeyPath, setValueByKeyPath } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";
 import { reactive } from "vue";
-import { cloneDeep, get, keys, pick } from "lodash-es";
+import { cloneDeep as cloneDeep$1, get, keys, pick } from "lodash-es";
 //#region packages/editor/src/services/codeBlock.ts
 var canUsePluginMethods = {
 	async: [
@@ -18,7 +20,18 @@ var canUsePluginMethods = {
 	],
 	sync: ["setCodeDslByIdSync"]
 };
-var CodeBlock = class extends BaseService_default {
+/**
+* 「回滚」生成的新 step 简短描述。仅 service 层使用。
+*/
+var describeRevertCodeBlockStep = (step) => {
+	const { oldContent, newContent, changeRecords, id } = step;
+	if (oldContent === null && newContent) return `撤回新增 ${newContent.name || newContent.id || id}`;
+	if (oldContent && newContent === null) return `还原已删除的 ${oldContent.name || oldContent.id || id}`;
+	const name = newContent?.name || oldContent?.name || `${id}`;
+	const propPath = changeRecords?.[0]?.propPath;
+	return propPath ? `还原 ${name} · ${propPath}` : `还原 ${name}`;
+};
+var CodeBlock = class extends BaseService {
 	state = reactive({
 		codeDsl: null,
 		editable: true,
@@ -68,10 +81,16 @@ var CodeBlock = class extends BaseService_default {
 	* 设置代码块ID和代码内容到源dsl
 	* @param {Id} id 代码块id
 	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
+	* @param options 可选配置
+	* @param options.changeRecords form 端 propPath/value 列表，用于历史记录的精细化撤销/重做
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
 	* @returns {void}
 	*/
-	async setCodeDslById(id, codeConfig) {
-		this.setCodeDslByIdSync(id, codeConfig, true);
+	async setCodeDslById(id, codeConfig, { changeRecords, doNotPushHistory = false } = {}) {
+		this.setCodeDslByIdSync(id, codeConfig, true, {
+			changeRecords,
+			doNotPushHistory
+		});
 	}
 	/**
 	* 为了兼容历史原因
@@ -79,21 +98,33 @@ var CodeBlock = class extends BaseService_default {
 	* @param {Id} id 代码块id
 	* @param {CodeBlockContent} codeConfig 代码块内容配置信息
 	* @param {boolean} force 是否强制写入，默认true
+	* @param options 可选配置
+	* @param options.changeRecords form 端 propPath/value 列表，用于历史记录的精细化撤销/重做
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
 	* @returns {void}
 	*/
-	setCodeDslByIdSync(id, codeConfig, force = true) {
+	setCodeDslByIdSync(id, codeConfig, force = true, { changeRecords, doNotPushHistory = false, historyDescription } = {}) {
 		const codeDsl = this.getCodeDsl();
 		if (!codeDsl) throw new Error("dsl中没有codeBlocks");
 		if (codeDsl[id] && !force) return;
-		const codeConfigProcessed = cloneDeep(codeConfig);
+		const codeConfigProcessed = cloneDeep$1(codeConfig);
 		if (codeConfigProcessed.content) {
 			const parseDSL = getEditorConfig("parseDSL");
 			if (typeof codeConfigProcessed.content === "string") codeConfigProcessed.content = parseDSL(codeConfigProcessed.content);
 		}
+		const oldContent = codeDsl[id] ? cloneDeep$1(codeDsl[id]) : null;
 		codeDsl[id] = {
 			...codeDsl[id] || {},
 			...codeConfigProcessed
 		};
+		const newContent = cloneDeep$1(codeDsl[id]);
+		if (!doNotPushHistory) history_default.pushCodeBlock(id, {
+			oldContent,
+			newContent,
+			changeRecords,
+			historyDescription
+		});
 		this.emit("addOrUpdate", id, codeDsl[id]);
 	}
 	/**
@@ -170,12 +201,20 @@ var CodeBlock = class extends BaseService_default {
 	/**
 	* 在dsl数据源中删除指定id的代码块
 	* @param {Id[]} codeIds 需要删除的代码块id数组
+	* @param options 可选配置
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
 	*/
-	async deleteCodeDslByIds(codeIds) {
+	async deleteCodeDslByIds(codeIds, { doNotPushHistory = false, historyDescription } = {}) {
 		const currentDsl = await this.getCodeDsl();
 		if (!currentDsl) return;
 		codeIds.forEach((id) => {
+			const oldContent = currentDsl[id] ? cloneDeep$1(currentDsl[id]) : null;
 			delete currentDsl[id];
+			if (oldContent && !doNotPushHistory) history_default.pushCodeBlock(id, {
+				oldContent,
+				newContent: null,
+				historyDescription
+			});
 			this.emit("remove", id);
 		});
 	}
@@ -186,6 +225,78 @@ var CodeBlock = class extends BaseService_default {
 		return this.state.paramsColConfig;
 	}
 	/**
+	* 撤销指定代码块的最近一次变更。
+	*
+	* 内部走 setCodeDslByIdSync / deleteCodeDslByIds，因此会自动触发 codeBlockService 的
+	* `addOrUpdate` / `remove` 事件，由 initService 中的 handler 重新维护 dep target
+	* （DepTargetType.CODE_BLOCK 的 add / remove）。所有写回都带 `doNotPushHistory: true`，
+	* 确保不会在历史栈里产生新的记录。
+	*
+	* @param id 代码块 id
+	* @returns 撤销的 step；栈不存在或已无可撤销时返回 null
+	*/
+	async undo(id) {
+		const step = history_default.undoCodeBlock(id);
+		if (!step) return null;
+		await this.applyHistoryStep(step, true);
+		return step;
+	}
+	/**
+	* 重做指定代码块的下一次变更。
+	* @param id 代码块 id
+	* @returns 重做的 step；栈不存在或已无可重做时返回 null
+	*/
+	async redo(id) {
+		const step = history_default.redoCodeBlock(id);
+		if (!step) return null;
+		await this.applyHistoryStep(step, false);
+		return step;
+	}
+	/** 是否可对指定代码块撤销。 */
+	canUndo(id) {
+		return history_default.canUndoCodeBlock(id);
+	}
+	/** 是否可对指定代码块重做。 */
+	canRedo(id) {
+		return history_default.canRedoCodeBlock(id);
+	}
+	/**
+	* 跳转指定代码块的历史栈到目标游标。语义同 editor.gotoPageStep。
+	*
+	* @param id          代码块 id
+	* @param targetCursor 目标游标位置（已应用步骤数量）
+	* @returns 实际移动到的最终游标位置
+	*/
+	async goto(id, targetCursor) {
+		let cursor = history_default.getCodeBlockCursor(id);
+		const target = Math.max(0, targetCursor);
+		while (cursor > target) {
+			if (!await this.undo(id)) break;
+			cursor -= 1;
+		}
+		while (cursor < target) {
+			if (!await this.redo(id)) break;
+			cursor += 1;
+		}
+		return cursor;
+	}
+	/**
+	* 「回滚」指定代码块历史步骤（类 git revert 语义）：
+	* - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+	* - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+	* - 仅对已应用的步骤生效。
+	*
+	* @param id    代码块 id
+	* @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+	* @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+	*/
+	async revert(id, index) {
+		const entry = history_default.getCodeBlockStepList(id)[index];
+		if (!entry?.applied) return null;
+		const description = `回滚 #${index + 1}: ${describeRevertCodeBlockStep(entry.step)}`;
+		return await this.applyRevertStep(entry.step, description);
+	}
+	/**
 	* 生成代码块唯一id
 	* @returns {Id} 代码块唯一id
 	*/
@@ -245,6 +356,92 @@ var CodeBlock = class extends BaseService_default {
 	usePlugin(options) {
 		super.usePlugin(options);
 	}
+	/**
+	* 反向应用一个 step 并以新 step 入栈。逻辑与 applyHistoryStep(reverse=true) 同构，
+	* 差异仅在于通过公开的 setCodeDslByIdSync / deleteCodeDslByIds 触发 push。
+	*/
+	async applyRevertStep(step, historyDescription) {
+		const { id, oldContent, newContent, changeRecords } = step;
+		if (oldContent === null && newContent) {
+			await this.deleteCodeDslByIds([id], { historyDescription });
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (oldContent && newContent === null) {
+			this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { historyDescription });
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (!oldContent || !newContent) return null;
+		if (changeRecords?.length) {
+			const current = this.getCodeContentById(id);
+			if (!current) return null;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, oldContent));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.setCodeDslByIdSync(id, fallbackToFullReplace ? cloneDeep$1(oldContent) : patched, true, {
+				changeRecords,
+				historyDescription
+			});
+			return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { historyDescription });
+		return history_default.getCodeBlockStepList(id).slice(-1)[0]?.step ?? null;
+	}
+	/**
+	* 把一条历史 step 应用到当前代码块服务上。
+	*
+	* 复用现有的 setCodeDslByIdSync / deleteCodeDslByIds，目的是借助它们发出的事件
+	* 触发 initService 中的 dep target 维护（CODE_BLOCK 的 add / remove）。
+	* 所有写回都带 `doNotPushHistory: true`，确保不会在历史栈里产生新的记录。
+	*
+	* - oldContent=null, newContent≠null：原始为新增 → undo 删除；redo 再次 setCodeDslByIdSync
+	* - oldContent≠null, newContent=null：原始为删除 → undo 还原写入；redo 再次删除
+	* - 两侧都有：原始为更新 → 按 changeRecords 局部 patch；缺省退化为整内容替换
+	*
+	* @param step 历史 step
+	* @param reverse true=撤销，false=重做
+	*/
+	async applyHistoryStep(step, reverse) {
+		const { id, oldContent, newContent, changeRecords } = step;
+		if (oldContent === null && newContent) {
+			if (reverse) await this.deleteCodeDslByIds([id], { doNotPushHistory: true });
+			else this.setCodeDslByIdSync(id, cloneDeep$1(newContent), true, { doNotPushHistory: true });
+			return;
+		}
+		if (oldContent && newContent === null) {
+			if (reverse) this.setCodeDslByIdSync(id, cloneDeep$1(oldContent), true, { doNotPushHistory: true });
+			else await this.deleteCodeDslByIds([id], { doNotPushHistory: true });
+			return;
+		}
+		if (!oldContent || !newContent) return;
+		const sourceForValues = reverse ? oldContent : newContent;
+		if (changeRecords?.length) {
+			const current = this.getCodeContentById(id);
+			if (!current) return;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, sourceForValues));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.setCodeDslByIdSync(id, fallbackToFullReplace ? cloneDeep$1(sourceForValues) : patched, true, {
+				changeRecords,
+				doNotPushHistory: true
+			});
+			return;
+		}
+		this.setCodeDslByIdSync(id, cloneDeep$1(sourceForValues), true, { doNotPushHistory: true });
+	}
 };
 var codeBlock_default = new CodeBlock();
 //#endregion

package/dist/es/services/componentList.js

@@ -1,7 +1,7 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { shallowReactive } from "vue";
 //#region packages/editor/src/services/componentList.ts
-var ComponentList = class extends BaseService_default {
+var ComponentList = class extends BaseService {
 	state = shallowReactive({ list: [] });
 	constructor() {
 		super([]);

package/dist/es/services/dataSource.js

@@ -1,12 +1,13 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
+import history_default from "./history.js";
 import storage_default, { Protocol } from "./storage.js";
 import { COPY_DS_STORAGE_KEY } from "../utils/editor.js";
 import editor_default from "./editor.js";
 import { getFormConfig, getFormValue } from "../utils/data-source/index.js";
-import { guid, toLine } from "@tmagic/utils";
+import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";
 import { reactive } from "vue";
-import { cloneDeep, get } from "lodash-es";
+import { cloneDeep as cloneDeep$1, get } from "lodash-es";
 //#region packages/editor/src/services/dataSource.ts
 var canUsePluginMethods = {
 	async: [],
@@ -25,7 +26,19 @@ var canUsePluginMethods = {
 		"createId"
 	]
 };
-var DataSource = class extends BaseService_default {
+/**
+* 「回滚」生成的新 step 简短描述。
+* 仅在 service 层使用，避免依赖 UI 层 composables。
+*/
+var describeRevertDataSourceStep = (step) => {
+	const { oldSchema, newSchema, changeRecords, id } = step;
+	if (oldSchema === null && newSchema) return `撤回新增 ${newSchema.title || newSchema.id || id}`;
+	if (oldSchema && newSchema === null) return `还原已删除的 ${oldSchema.title || oldSchema.id || id}`;
+	const title = newSchema?.title || oldSchema?.title || `${id}`;
+	const propPath = changeRecords?.[0]?.propPath;
+	return propPath ? `还原 ${title} · ${propPath}` : `还原 ${title}`;
+};
+var DataSource = class extends BaseService {
 	state = reactive({
 		datasourceTypeList: [],
 		dataSources: [],
@@ -71,33 +84,143 @@ var DataSource = class extends BaseService_default {
 	setFormMethod(type, value = []) {
 		this.get("methods")[toLine(type)] = value;
 	}
-	add(config) {
+	/**
+	* 新增数据源
+	* @param config 数据源配置
+	* @param options 可选配置
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+	*/
+	add(config, { doNotPushHistory = false, historyDescription } = {}) {
 		const newConfig = {
 			...config,
 			id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId()
 		};
 		this.get("dataSources").push(newConfig);
+		if (!doNotPushHistory) history_default.pushDataSource(newConfig.id, {
+			oldSchema: null,
+			newSchema: newConfig,
+			historyDescription
+		});
 		this.emit("add", newConfig);
 		return newConfig;
 	}
-	update(config, { changeRecords = [] } = {}) {
+	/**
+	* 更新数据源
+	* @param config 数据源配置
+	* @param data 额外数据
+	* @param data.changeRecords form 端变更记录
+	* @param data.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+	*/
+	update(config, { changeRecords = [], doNotPushHistory = false, historyDescription } = {}) {
 		const dataSources = this.get("dataSources");
 		const index = dataSources.findIndex((ds) => ds.id === config.id);
 		const oldConfig = dataSources[index];
-		const newConfig = cloneDeep(config);
+		const newConfig = cloneDeep$1(config);
 		dataSources[index] = newConfig;
+		if (!doNotPushHistory) history_default.pushDataSource(newConfig.id, {
+			oldSchema: oldConfig ? cloneDeep$1(oldConfig) : null,
+			newSchema: newConfig,
+			changeRecords,
+			historyDescription
+		});
 		this.emit("update", newConfig, {
 			oldConfig,
 			changeRecords
 		});
 		return newConfig;
 	}
-	remove(id) {
+	/**
+	* 删除数据源
+	* @param id 数据源 id
+	* @param options 可选配置
+	* @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+	* @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+	*/
+	remove(id, { doNotPushHistory = false, historyDescription } = {}) {
 		const dataSources = this.get("dataSources");
 		const index = dataSources.findIndex((ds) => ds.id === id);
+		const oldConfig = index !== -1 ? dataSources[index] : null;
 		dataSources.splice(index, 1);
+		if (oldConfig && !doNotPushHistory) history_default.pushDataSource(id, {
+			oldSchema: cloneDeep$1(oldConfig),
+			newSchema: null,
+			historyDescription
+		});
 		this.emit("remove", id);
 	}
+	/**
+	* 撤销指定数据源的最近一次变更。
+	*
+	* 内部走 add / update / remove，因此会自动触发 dataSourceService 的事件，
+	* 由 initService 中的对应 handler 重新收集 dep（DATA_SOURCE / DATA_SOURCE_COND / DATA_SOURCE_METHOD）。
+	* 所有写回都带 `doNotPushHistory: true`，避免在历史栈里产生新的记录。
+	*
+	* @param id 数据源 id
+	* @returns 撤销的 step；栈不存在或已无可撤销时返回 null
+	*/
+	undo(id) {
+		const step = history_default.undoDataSource(id);
+		if (!step) return null;
+		this.applyHistoryStep(step, true);
+		return step;
+	}
+	/**
+	* 重做指定数据源的下一次变更。
+	* @param id 数据源 id
+	* @returns 重做的 step；栈不存在或已无可重做时返回 null
+	*/
+	redo(id) {
+		const step = history_default.redoDataSource(id);
+		if (!step) return null;
+		this.applyHistoryStep(step, false);
+		return step;
+	}
+	/** 是否可对指定数据源撤销。 */
+	canUndo(id) {
+		return history_default.canUndoDataSource(id);
+	}
+	/** 是否可对指定数据源重做。 */
+	canRedo(id) {
+		return history_default.canRedoDataSource(id);
+	}
+	/**
+	* 跳转指定数据源的历史栈到目标游标。语义同 editor.gotoPageStep。
+	*
+	* @param id          数据源 id
+	* @param targetCursor 目标游标位置（已应用步骤数量）
+	* @returns 实际移动到的最终游标位置
+	*/
+	goto(id, targetCursor) {
+		let cursor = history_default.getDataSourceCursor(id);
+		const target = Math.max(0, targetCursor);
+		while (cursor > target) {
+			if (!this.undo(id)) break;
+			cursor -= 1;
+		}
+		while (cursor < target) {
+			if (!this.redo(id)) break;
+			cursor += 1;
+		}
+		return cursor;
+	}
+	/**
+	* 「回滚」指定数据源历史步骤（类 git revert 语义）：
+	* - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+	* - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+	* - 仅对已应用的步骤生效——未应用步骤本身就不存在于当前 schema 中，反向无意义。
+	*
+	* @param id    数据源 id
+	* @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+	* @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+	*/
+	revert(id, index) {
+		const entry = history_default.getDataSourceStepList(id)[index];
+		if (!entry?.applied) return null;
+		const description = `回滚 #${index + 1}: ${describeRevertDataSourceStep(entry.step)}`;
+		return this.applyRevertStep(entry.step, description);
+	}
 	createId() {
 		return `ds_${guid()}`;
 	}
@@ -151,6 +274,92 @@ var DataSource = class extends BaseService_default {
 			if (!this.getDataSourceById(item.id)) this.add(item);
 		});
 	}
+	/**
+	* 反向应用一个 step 并以新 step 入栈（不带 doNotPushHistory）。逻辑与 applyHistoryStep(reverse=true)
+	* 同构，差异仅在于走对应的公共 add / update / remove 而不是带 doNotPushHistory 的版本。
+	*/
+	applyRevertStep(step, historyDescription) {
+		const { id, oldSchema, newSchema, changeRecords } = step;
+		if (oldSchema === null && newSchema) {
+			this.remove(`${id}`, { historyDescription });
+			return history_default.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (oldSchema && newSchema === null) {
+			this.add(cloneDeep$1(oldSchema), { historyDescription });
+			return history_default.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		if (!oldSchema || !newSchema) return null;
+		if (changeRecords?.length) {
+			const current = this.getDataSourceById(`${id}`);
+			if (!current) return null;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, oldSchema));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.update(fallbackToFullReplace ? cloneDeep$1(oldSchema) : patched, {
+				changeRecords,
+				historyDescription
+			});
+			return history_default.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+		}
+		this.update(cloneDeep$1(oldSchema), { historyDescription });
+		return history_default.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+	}
+	/**
+	* 把一条历史 step 应用到当前数据源服务上。
+	*
+	* 复用现有的 add / update / remove，目的是借助它们发出的事件触发 initService 中
+	* 的依赖收集逻辑（DATA_SOURCE / DATA_SOURCE_COND / DATA_SOURCE_METHOD）。
+	* 所有写回都带 `doNotPushHistory: true`，确保不会在历史栈里产生新的记录。
+	*
+	* - oldSchema=null, newSchema≠null：原始为新增 → undo 删除；redo 再次 add
+	* - oldSchema≠null, newSchema=null：原始为删除 → undo 还原 add；redo 再次删除
+	* - 两侧都有：原始为更新 → 按 changeRecords 局部 patch；缺省退化为整 schema 替换
+	*
+	* @param step 历史 step
+	* @param reverse true=撤销，false=重做
+	*/
+	applyHistoryStep(step, reverse) {
+		const { id, oldSchema, newSchema, changeRecords } = step;
+		if (oldSchema === null && newSchema) {
+			if (reverse) this.remove(`${id}`, { doNotPushHistory: true });
+			else this.add(cloneDeep$1(newSchema), { doNotPushHistory: true });
+			return;
+		}
+		if (oldSchema && newSchema === null) {
+			if (reverse) this.add(cloneDeep$1(oldSchema), { doNotPushHistory: true });
+			else this.remove(`${id}`, { doNotPushHistory: true });
+			return;
+		}
+		if (!oldSchema || !newSchema) return;
+		const sourceForValues = reverse ? oldSchema : newSchema;
+		if (changeRecords?.length) {
+			const current = this.getDataSourceById(`${id}`);
+			if (!current) return;
+			const patched = cloneDeep$1(current);
+			let fallbackToFullReplace = false;
+			for (const record of changeRecords) {
+				if (!record.propPath) {
+					fallbackToFullReplace = true;
+					break;
+				}
+				const value = cloneDeep$1(getValueByKeyPath(record.propPath, sourceForValues));
+				setValueByKeyPath(record.propPath, value, patched);
+			}
+			this.update(fallbackToFullReplace ? cloneDeep$1(sourceForValues) : patched, {
+				changeRecords,
+				doNotPushHistory: true
+			});
+			return;
+		}
+		this.update(cloneDeep$1(sourceForValues), { doNotPushHistory: true });
+	}
 };
 var dataSource_default = new DataSource();
 //#endregion

package/dist/es/services/dep.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { IdleTask } from "../utils/dep/idle-task.js";
 import WorkerWrapper from "../utils/dep/worker.js";
 import { isPage } from "@tmagic/utils";
@@ -7,7 +7,7 @@ import { reactive, shallowReactive } from "vue";
 import { throttle } from "lodash-es";
 import serialize from "serialize-javascript";
 //#region packages/editor/src/services/dep.ts
-var Dep = class extends BaseService_default {
+var Dep = class extends BaseService {
 	state = shallowReactive({
 		collecting: false,
 		taskLength: 0
@@ -52,9 +52,12 @@ var Dep = class extends BaseService_default {
 	}
 	collect(nodes, depExtendedData = {}, deep = false, type) {
 		this.set("collecting", true);
-		this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-			this.collectNode(node, target, depExtendedData, deep);
-		});
+		const targets = this.watcher.getCollectableTargets(type);
+		if (targets.length) for (const node of nodes) {
+			if (isPage(node)) for (const target of targets) this.removePageDep(target, depExtendedData);
+			else this.watcher.removeTargetsDep(targets, node);
+			this.watcher.collectItems(node, targets, depExtendedData, deep);
+		}
 		this.set("collecting", false);
 		this.emit("collected", nodes, deep);
 		this.emit("ds-collected", nodes, deep);
@@ -103,7 +106,7 @@ var Dep = class extends BaseService_default {
 					target.deps = reactive(depsData[target.type][target.id]);
 					if (target.type === DepTargetType.DATA_SOURCE && dsl.dataSourceDeps) dsl.dataSourceDeps[target.id] = target.deps;
 					else if (target.type === DepTargetType.DATA_SOURCE_COND && dsl.dataSourceCondDeps) dsl.dataSourceCondDeps[target.id] = target.deps;
-					else if (target.type === DepTargetType.DATA_SOURCE_METHOD) dsl.dataSourceMethodDeps[target.id] = target.deps;
+					else if (target.type === DepTargetType.DATA_SOURCE_METHOD && dsl.dataSourceMethodDeps) dsl.dataSourceMethodDeps[target.id] = target.deps;
 				}
 			});
 			this.set("collecting", false);
@@ -114,9 +117,8 @@ var Dep = class extends BaseService_default {
 		});
 	}
 	collectNode(node, target, depExtendedData = {}, deep = false) {
-		if (isPage(node)) {
-			for (const [depKey, dep] of Object.entries(target.deps)) if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) delete target.deps[depKey];
-		} else this.watcher.removeTargetDep(target, node);
+		if (isPage(node)) this.removePageDep(target, depExtendedData);
+		else this.watcher.removeTargetDep(target, node);
 		this.watcher.collectItem(node, target, depExtendedData, deep);
 	}
 	clear(nodes) {
@@ -155,6 +157,16 @@ var Dep = class extends BaseService_default {
 	emit(eventName, ...args) {
 		return super.emit(eventName, ...args);
 	}
+	/**
+	* 删除指定 page 在该 target 下的旧依赖：
+	* 按 pageId 匹配，可清掉页面内已被删除节点的残留依赖
+	*/
+	removePageDep(target, depExtendedData = {}) {
+		for (const depKey of Object.keys(target.deps)) {
+			const dep = target.deps[depKey];
+			if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) delete target.deps[depKey];
+		}
+	}
 	enqueueTask(node, target, depExtendedData, deep) {
 		this.idleTask.enqueueTask(({ node, deep, target }) => {
 			this.collectNode(node, target, depExtendedData, deep);