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

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

@@ -0,0 +1,105 @@
+import { describePageGroup, describePageStep, formatHistoryFullTime, formatHistoryTime, groupTimestamp } from "./composables.js";
+import GroupRow_default from "./GroupRow.js";
+import InitialRow_default from "./InitialRow.js";
+import { TMagicScrollbar } from "@tmagic/design";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "vue";
+//#region packages/editor/src/layouts/history-list/PageTab.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-ul" };
+var PageTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorHistoryListPageTab",
+	__name: "PageTab",
+	props: {
+		list: {},
+		expanded: {}
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"goto-initial",
+		"diff-step",
+		"revert-step"
+	],
+	setup(__props) {
+		const props = __props;
+		/**
+		* 当前 step 是否可查看差异：
+		* - 仅 update 操作；
+		* - 单节点更新（updatedItems.length === 1），且 oldNode / newNode 都存在。
+		* 多节点更新难以选定单一对比目标，统一不展示差异入口。
+		*/
+		const isPageStepDiffable = (step) => {
+			if (step.opType !== "update") return false;
+			const items = step.updatedItems ?? [];
+			if (items.length !== 1) return false;
+			return Boolean(items[0]?.oldNode && items[0]?.newNode);
+		};
+		/**
+		* 是否处于"初始状态"——即对应页面历史栈 cursor===0：
+		* 当 list 中所有 group 的 applied 都为 false 时即为该状态。
+		* 没有任何 group 的情况由外层"暂无操作记录"分支兜底，本计算可以不考虑。
+		*/
+		const isInitial = computed(() => props.list.length > 0 && props.list.every((g) => !g.applied));
+		return (_ctx, _cache) => {
+			return !__props.list.length ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createBlock(unref(TMagicScrollbar), {
+				key: 1,
+				"max-height": "360px"
+			}, {
+				default: withCtx(() => [createElementVNode("ul", _hoisted_2, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (group) => {
+						return openBlock(), createBlock(GroupRow_default, {
+							key: `pg-${group.steps[0]?.index}`,
+							"group-key": `pg-${group.steps[0]?.index}`,
+							applied: group.applied,
+							merged: group.steps.length > 1,
+							"op-type": group.opType,
+							desc: unref(describePageGroup)(group),
+							time: unref(formatHistoryTime)(unref(groupTimestamp)(group)),
+							"time-title": unref(formatHistoryFullTime)(unref(groupTimestamp)(group)),
+							"step-count": group.steps.length,
+							"sub-steps": group.steps.map((s) => ({
+								index: s.index,
+								applied: s.applied,
+								isCurrent: s.isCurrent,
+								desc: unref(describePageStep)(s.step),
+								diffable: isPageStepDiffable(s.step),
+								revertable: s.applied,
+								time: unref(formatHistoryTime)(s.step.timestamp),
+								timeTitle: unref(formatHistoryFullTime)(s.step.timestamp)
+							})),
+							"is-current": group.isCurrent,
+							expanded: !!__props.expanded[`pg-${group.steps[0]?.index}`],
+							onToggle: _cache[0] || (_cache[0] = (key) => _ctx.$emit("toggle", key)),
+							onGoto: _cache[1] || (_cache[1] = (index) => _ctx.$emit("goto", index)),
+							onDiffStep: _cache[2] || (_cache[2] = (index) => _ctx.$emit("diff-step", index)),
+							onRevertStep: _cache[3] || (_cache[3] = (index) => _ctx.$emit("revert-step", index))
+						}, null, 8, [
+							"group-key",
+							"applied",
+							"merged",
+							"op-type",
+							"desc",
+							"time",
+							"time-title",
+							"step-count",
+							"sub-steps",
+							"is-current",
+							"expanded"
+						]);
+					}), 128)),
+					createCommentVNode("\n        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），\n        作为\"未修改\"零点。当所有 group 都未 applied 时它即为当前位置。\n      "),
+					createVNode(InitialRow_default, {
+						"is-current": isInitial.value,
+						onGotoInitial: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("goto-initial"))
+					}, null, 8, ["is-current"])
+				])]),
+				_: 1
+			}));
+		};
+	}
+});
+//#endregion
+export { PageTab_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,172 @@
+import { useServices } from "../../hooks/use-services.js";
+import { datetimeFormatter } from "@tmagic/form";
+import { computed, reactive } from "vue";
+//#region packages/editor/src/layouts/history-list/composables.ts
+/**
+* 历史记录面板共享逻辑：
+* - 暴露三类历史的聚合数据（页面 / 数据源 / 代码块）；
+* - 提供折叠状态管理；
+* - 提供操作描述文案生成器。
+*
+* 所有数据基于 historyService 的 reactive state 派生，自动跟随历史变化刷新。
+*/
+var useHistoryList = () => {
+	const { historyService } = useServices();
+	/**
+	* 折叠状态：key 形如 `pg-${组内首步 index}` / `ds-${id}-${组内首步 index}` / `cb-${id}-${组内首步 index}`。
+	* 用组内首步的稳定 index（而非展示位置）作为 key，确保历史数据更新后已展开的分组状态保持不变。
+	*/
+	const expanded = reactive({});
+	const toggleGroup = (key) => {
+		expanded[key] = !expanded[key];
+	};
+	const pageGroups = computed(() => historyService.getPageHistoryGroups());
+	const dataSourceGroups = computed(() => historyService.getDataSourceHistoryGroups());
+	const codeBlockGroups = computed(() => historyService.getCodeBlockHistoryGroups());
+	/** 页面 tab 倒序展示（最新一组在最上面）。 */
+	const pageGroupsDisplay = computed(() => pageGroups.value.slice().reverse());
+	/**
+	* 把按时间正序的 group 列表，再按 id 聚拢成 bucket（同 id 的所有分组放一起）。
+	* 每个 bucket 内部仍然按时间倒序展示（最近的操作最先看到）。
+	*/
+	const groupByTarget = (groups) => {
+		const map = /* @__PURE__ */ new Map();
+		groups.forEach((g) => {
+			const list = map.get(g.id) ?? [];
+			list.push(g);
+			map.set(g.id, list);
+		});
+		return Array.from(map.entries()).map(([id, gs]) => ({
+			id,
+			groups: gs.slice().reverse()
+		}));
+	};
+	return {
+		expanded,
+		toggleGroup,
+		pageGroups,
+		dataSourceGroups,
+		codeBlockGroups,
+		pageGroupsDisplay,
+		dataSourceGroupsByTarget: computed(() => groupByTarget(dataSourceGroups.value)),
+		codeBlockGroupsByTarget: computed(() => groupByTarget(codeBlockGroups.value))
+	};
+};
+/**
+* 历史面板的时间展示：
+* - 当天的记录只显示 `HH:mm:ss`；
+* - 跨天的记录显示 `MM-DD HH:mm:ss`。
+* 无时间戳（旧数据 / 未写入）时返回空串，UI 据此不渲染时间。
+*/
+var formatHistoryTime = (timestamp) => {
+	if (!timestamp) return "";
+	return `${datetimeFormatter(new Date(timestamp), "", "YYYY-MM-DD") === datetimeFormatter(/* @__PURE__ */ new Date(), "", "YYYY-MM-DD") ? datetimeFormatter(new Date(timestamp), "", "HH:mm:ss") : datetimeFormatter(new Date(timestamp), "", "MM-DD HH:mm:ss")}`;
+};
+/** 完整时间（含年份与秒），用于 title 悬浮提示。无时间戳时返回空串。 */
+var formatHistoryFullTime = (timestamp) => timestamp ? `${datetimeFormatter(new Date(timestamp), "", "YYYY-MM-DD HH:mm:ss")}` : "";
+/** 取一组历史步骤里最后一步（最近一次）的时间戳，用于组头部展示。 */
+var groupTimestamp = (group) => group.steps[group.steps.length - 1]?.step.timestamp;
+var opLabel = (op) => {
+	switch (op) {
+		case "add": return "新增";
+		case "remove": return "删除";
+		default: return "修改";
+	}
+};
+var nameOf = (node) => node?.name || node?.type || `${node?.id ?? ""}`;
+/**
+* 默认描述里展示「名称 (id: xxx)」，便于区分同名实体。
+* - 当未传入 id，或 label 本身就是 id 字符串（即没有 name/type/title 可用）时，仅展示 label，避免出现「123 (id: 123)」。
+*/
+var labelWithId = (label, id) => {
+	const labelStr = label === void 0 || label === null ? "" : `${label}`;
+	if (id === void 0 || id === null || id === "") return labelStr;
+	if (labelStr === "" || labelStr === `${id}`) return `${id}`;
+	return `${labelStr} (id: ${id})`;
+};
+/** 从一组可选 historyDescription 中取最后一条非空值；都为空时返回 undefined。 */
+var pickLastDescription = (descs) => {
+	for (let i = descs.length - 1; i >= 0; i--) if (descs[i]) return descs[i];
+};
+var describePageStep = (step) => {
+	if (step.historyDescription) return step.historyDescription;
+	const { opType } = step;
+	if (opType === "add") {
+		const count = step.nodes?.length ?? 0;
+		const node = step.nodes?.[0];
+		return `新增 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ""}`;
+	}
+	if (opType === "remove") {
+		const count = step.removedItems?.length ?? 0;
+		const node = step.removedItems?.[0]?.node;
+		return `删除 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ""}`;
+	}
+	const updated = step.updatedItems ?? [];
+	if (!updated.length) return "修改节点";
+	if (updated.length === 1) {
+		const { newNode, changeRecords } = updated[0];
+		const propPath = changeRecords?.[0]?.propPath;
+		return `修改 ${labelWithId(nameOf(newNode), newNode?.id)}${propPath ? ` · ${propPath}` : ""}`;
+	}
+	return `修改 ${updated.length} 个节点`;
+};
+/**
+* 合并组的展示文案：
+* - 若组内任一步显式提供了 historyDescription：取最后一条非空 historyDescription（最近一次的描述更准确）；
+* - 单步组：复用 describePageStep；
+* - 多步组（连续修改同一节点）：展示节点名 + 涉及的前几个 propPath。
+*/
+var describePageGroup = (group) => {
+	const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+	if (lastDesc) return lastDesc;
+	if (group.steps.length === 1) return describePageStep(group.steps[0].step);
+	const paths = /* @__PURE__ */ new Set();
+	group.steps.forEach((s) => {
+		s.step.updatedItems?.[0]?.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+	});
+	const pathList = Array.from(paths).slice(0, 3).join(", ");
+	const target = labelWithId(group.targetName ?? (group.targetId !== void 0 ? `${group.targetId}` : "节点"), group.targetId);
+	return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? "…" : ""}` : `修改 ${target}`;
+};
+var describeDataSourceStep = (step) => {
+	if (step.historyDescription) return step.historyDescription;
+	if (step.oldSchema === null && step.newSchema) return `创建 ${labelWithId(step.newSchema.title, step.newSchema.id ?? step.id)}`;
+	if (step.newSchema === null && step.oldSchema) return `删除 ${labelWithId(step.oldSchema.title, step.oldSchema.id ?? step.id)}`;
+	const propPath = step.changeRecords?.[0]?.propPath;
+	const title = labelWithId(step.newSchema?.title || step.oldSchema?.title, step.id);
+	return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
+};
+var describeDataSourceGroup = (group) => {
+	const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+	if (lastDesc) return lastDesc;
+	if (group.steps.length === 1) return describeDataSourceStep(group.steps[0].step);
+	const paths = /* @__PURE__ */ new Set();
+	group.steps.forEach((s) => {
+		s.step.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+	});
+	const pathList = Array.from(paths).slice(0, 3).join(", ");
+	const target = labelWithId(group.steps[group.steps.length - 1].step.newSchema?.title || group.steps[0].step.oldSchema?.title, group.id);
+	return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? "…" : ""}` : `修改 ${target}`;
+};
+var describeCodeBlockStep = (step) => {
+	if (step.historyDescription) return step.historyDescription;
+	if (step.oldContent === null && step.newContent) return `创建 ${labelWithId(step.newContent.name, step.newContent.id ?? step.id)}`;
+	if (step.newContent === null && step.oldContent) return `删除 ${labelWithId(step.oldContent.name, step.oldContent.id ?? step.id)}`;
+	const propPath = step.changeRecords?.[0]?.propPath;
+	const title = labelWithId(step.newContent?.name || step.oldContent?.name, step.id);
+	return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
+};
+var describeCodeBlockGroup = (group) => {
+	const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+	if (lastDesc) return lastDesc;
+	if (group.steps.length === 1) return describeCodeBlockStep(group.steps[0].step);
+	const paths = /* @__PURE__ */ new Set();
+	group.steps.forEach((s) => {
+		s.step.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+	});
+	const pathList = Array.from(paths).slice(0, 3).join(", ");
+	const target = labelWithId(group.steps[group.steps.length - 1].step.newContent?.name || group.steps[0].step.oldContent?.name, group.id);
+	return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? "…" : ""}` : `修改 ${target}`;
+};
+//#endregion
+export { describeCodeBlockGroup, describeCodeBlockStep, describeDataSourceGroup, describeDataSourceStep, describePageGroup, describePageStep, formatHistoryFullTime, formatHistoryTime, groupTimestamp, opLabel, useHistoryList };

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -4,7 +4,7 @@ import { computed, onBeforeUnmount, ref, watch } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/use-node-status.ts
 var createPageNodeStatus = (page, initialLayerNodeStatus) => {
 	const map = /* @__PURE__ */ new Map();
-	map.set(page.id, {
+	map.set(page.id, initialLayerNodeStatus?.get(page.id) || {
 		visible: true,
 		expand: true,
 		selected: true,

package/dist/es/services/BaseService.js

@@ -1,49 +1,39 @@
-import { compose } from "../utils/compose.js";
 import { EventEmitter } from "events";
 //#region packages/editor/src/services/BaseService.ts
 var methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 var isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
-var doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-	try {
-		let beforeArgs = args;
-		for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-			beforeArgs = beforeMethod(...beforeArgs) || [];
-			if (isError(beforeArgs)) throw beforeArgs;
-			if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
-		}
-		let returnValue = fn(beforeArgs, sourceMethod.bind(scope));
-		for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-			returnValue = afterMethod(returnValue, ...beforeArgs);
-			if (isError(returnValue)) throw returnValue;
-		}
-		return returnValue;
-	} catch (error) {
-		throw error;
+var doAction = (args, scope, sourceMethod, beforeMethodName, afterMethodName) => {
+	let beforeArgs = args;
+	for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+		beforeArgs = beforeMethod(...beforeArgs) || [];
+		if (isError(beforeArgs)) throw beforeArgs;
+		if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
+	}
+	let returnValue = sourceMethod.apply(scope, beforeArgs);
+	for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+		returnValue = afterMethod(returnValue, ...beforeArgs);
+		if (isError(returnValue)) throw returnValue;
 	}
+	return returnValue;
 };
-var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) => {
-	try {
-		let beforeArgs = args;
-		for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-			beforeArgs = await beforeMethod(...beforeArgs) || [];
-			if (isError(beforeArgs)) throw beforeArgs;
-			if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
-		}
-		let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-		for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-			returnValue = await afterMethod(returnValue, ...beforeArgs);
-			if (isError(returnValue)) throw returnValue;
-		}
-		return returnValue;
-	} catch (error) {
-		throw error;
+var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMethodName) => {
+	let beforeArgs = args;
+	for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+		beforeArgs = await beforeMethod(...beforeArgs) || [];
+		if (isError(beforeArgs)) throw beforeArgs;
+		if (!Array.isArray(beforeArgs)) beforeArgs = [beforeArgs];
 	}
+	let returnValue = await sourceMethod.apply(scope, beforeArgs);
+	for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+		returnValue = await afterMethod(returnValue, ...beforeArgs);
+		if (isError(returnValue)) throw returnValue;
+	}
+	return returnValue;
 };
 /**
-* 提供两种方式对Class进行扩展
-* 方法1：
+* 对Class进行扩展
 * 给Class中的每个方法都添加before after两个钩子
-* 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+* 给Class添加一个usePlugin方法，usePlugin方法可以传入一个包含before或者after方法的对象
 *
 * 例如：
 *   Class EditorService extends BaseService {
@@ -68,27 +58,9 @@ var doAsyncAction = async (args, scope, sourceMethod, beforeMethodName, afterMet
 *
 * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
 * 如需终止后续方法调用可以return new Error();
-*
-* 方法2：
-* 给Class中的每个方法都添加中间件
-* 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
-*
-* 例如：
-*   Class EditorService extends BaseService {
-*     constructor() {
-*       super([ { name: 'add', isAsync: true },]);
-*     }
-*     add(value) { return result; }
-*   };
-*
-*  const editorService = new EditorService();
-*  editorService.use({
-*    add(value, next) { console.log(value); next() },
-*  });
 */
-var BaseService_default = class extends EventEmitter {
+var BaseService = class extends EventEmitter {
 	pluginOptionsList = {};
-	middleware = {};
 	taskList = [];
 	doingTask = false;
 	constructor(methods = [], serialMethods = []) {
@@ -100,14 +72,12 @@ var BaseService_default = class extends EventEmitter {
 			const afterMethodName = methodName("after", propertyName);
 			this.pluginOptionsList[beforeMethodName] = [];
 			this.pluginOptionsList[afterMethodName] = [];
-			this.middleware[propertyName] = [];
-			const fn = compose(this.middleware[propertyName], isAsync);
 			Object.defineProperty(scope, propertyName, { value: isAsync ? async (...args) => {
-				if (!serialMethods.includes(propertyName)) return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+				if (!serialMethods.includes(propertyName)) return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
 				const promise = new Promise((resolve, reject) => {
 					this.taskList.push(async () => {
 						try {
-							resolve(await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn));
+							resolve(await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName));
 						} catch (e) {
 							reject(e);
 						}
@@ -115,15 +85,9 @@ var BaseService_default = class extends EventEmitter {
 				});
 				if (!this.doingTask) this.doTask();
 				return promise;
-			} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn) });
+			} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName) });
 		});
 	}
-	/**
-	* @deprecated 请使用usePlugin代替
-	*/
-	use(options) {
-		for (const [methodName, method] of Object.entries(options)) if (typeof method === "function") this.middleware[methodName].push(method);
-	}
 	usePlugin(options) {
 		for (const [methodName, method] of Object.entries(options)) if (typeof method === "function" && !this.pluginOptionsList[methodName].includes(method)) this.pluginOptionsList[methodName].push(method);
 	}
@@ -132,7 +96,6 @@ var BaseService_default = class extends EventEmitter {
 	}
 	removeAllPlugins() {
 		for (const key of Object.keys(this.pluginOptionsList)) this.pluginOptionsList[key] = [];
-		for (const key of Object.keys(this.middleware)) this.middleware[key] = [];
 	}
 	async doTask() {
 		this.doingTask = true;
@@ -145,4 +108,4 @@ var BaseService_default = class extends EventEmitter {
 	}
 };
 //#endregion
-export { BaseService_default as default };
+export { BaseService as default };