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

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

@@ -0,0 +1,83 @@
+import { formatHistoryFullTime, formatHistoryTime } from "./composables.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, toDisplayString, withModifiers } from "vue";
+//#region packages/editor/src/layouts/history-list/InitialRow.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["title"];
+var _hoisted_2 = { class: "m-editor-history-list-item-desc" };
+var _hoisted_3 = {
+	key: 0,
+	class: "m-editor-history-list-item-saved",
+	title: "该记录为最近一次保存的状态"
+};
+var _hoisted_4 = {
+	key: 1,
+	class: "m-editor-history-list-item-actions"
+};
+var _hoisted_5 = ["title"];
+var InitialRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorHistoryListInitialRow",
+	__name: "InitialRow",
+	props: {
+		isCurrent: { type: Boolean },
+		gotoEnabled: {
+			type: Boolean,
+			default: true
+		},
+		marker: { default: void 0 }
+	},
+	emits: ["goto-initial"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* 「初始状态」记录行：渲染于历史列表底部，作为整个栈的"零点"。
+		* - 点击该行会把对应栈撤销到 cursor === 0（即没有任何已应用步骤），等同于回到所有修改之前。
+		* - 当对应栈本身已处于 cursor === 0 时（isCurrent=true），用户已在初始状态，点击不再触发动作。
+		* - 当上层传入 `marker`（设置 root 时为该页生成的「未修改的初始状态」标记）时，
+		*   用标记的文案与时间渲染本行；标记不进入撤销/重做栈，仅作为该页基线展示。
+		*
+		* 该行不是真实 step，仅作为 UI 入口；上层负责把"点击"翻译为 `service.goto*(0)`。
+		*/
+		const props = __props;
+		const desc = computed(() => props.marker?.historyDescription || "未修改的初始状态");
+		/** 基线（初始状态）是否为最近一次保存点：仅页面栈的 `initial` 基线 step 会被 markSaved 标记。 */
+		const saved = computed(() => Boolean(props.marker?.saved));
+		const time = computed(() => formatHistoryTime(props.marker?.timestamp));
+		const timeTitle = computed(() => formatHistoryFullTime(props.marker?.timestamp));
+		const rowTitle = computed(() => {
+			const base = props.marker?.historyDescription || "未修改的初始状态";
+			return props.isCurrent ? `当前已回到${base}` : `点击回到${base}`;
+		});
+		const emit = __emit;
+		const onClick = () => {
+			if (props.isCurrent) return;
+			emit("goto-initial");
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				class: normalizeClass(["m-editor-history-list-item m-editor-history-list-initial", {
+					"is-current": __props.isCurrent,
+					"is-clickable": !__props.isCurrent
+				}]),
+				title: rowTitle.value
+			}, [
+				_cache[0] || (_cache[0] = createElementVNode("span", {
+					class: "m-editor-history-list-item-index",
+					title: "历史步骤编号 #0（未修改的初始状态）"
+				}, "#0", -1)),
+				_cache[1] || (_cache[1] = createElementVNode("span", { class: "m-editor-history-list-item-op op-initial" }, "初始", -1)),
+				createElementVNode("span", _hoisted_2, toDisplayString(desc.value), 1),
+				saved.value ? (openBlock(), createElementBlock("span", _hoisted_3, "已保存")) : createCommentVNode("v-if", true),
+				__props.gotoEnabled && !__props.isCurrent ? (openBlock(), createElementBlock("span", _hoisted_4, [createElementVNode("span", {
+					class: "m-editor-history-list-item-goto",
+					title: "回到该记录",
+					onClick: withModifiers(onClick, ["stop"])
+				}, "回到")])) : createCommentVNode("v-if", true),
+				time.value ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: "m-editor-history-list-item-time",
+					title: timeTitle.value
+				}, toDisplayString(time.value), 9, _hoisted_5)) : createCommentVNode("v-if", true)
+			], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { InitialRow_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,5 @@
+import PageTab_vue_vue_type_script_setup_true_lang_default from "./PageTab.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/history-list/PageTab.vue
+var PageTab_default = PageTab_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { PageTab_default as default };

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

@@ -0,0 +1,95 @@
+import { describePageGroup, describePageStep, isHistoryGroupExpanded, isPageStepRevertable, toRowGroup } 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 = {
+	key: 0,
+	class: "m-editor-history-list-toolbar"
+};
+var _hoisted_3 = { 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: {},
+		marker: {}
+	},
+	emits: [
+		"toggle",
+		"goto",
+		"goto-initial",
+		"diff-step",
+		"revert-step",
+		"select",
+		"clear"
+	],
+	setup(__props) {
+		const props = __props;
+		/**
+		* 当前 step 是否可查看差异：
+		* - 仅 update 操作；
+		* - 单节点更新（diff.length === 1），且 oldSchema / newSchema 都存在。
+		* 多节点更新难以选定单一对比目标，统一不展示差异入口。
+		*/
+		const isPageStepDiffable = (step) => {
+			if (step.opType !== "update") return false;
+			const items = step.diff ?? [];
+			if (items.length !== 1) return false;
+			return Boolean(items[0]?.oldSchema && items[0]?.newSchema);
+		};
+		/** 页面历史的描述 / 可操作性判定集合，注入给统一的 `toRowGroup`。 */
+		const descriptor = {
+			describeGroup: describePageGroup,
+			describeStep: describePageStep,
+			isStepDiffable: isPageStepDiffable,
+			isStepRevertable: isPageStepRevertable
+		};
+		const rowKey = (group) => `pg-${group.steps[0]?.index}`;
+		const toRow = (group) => toRowGroup(group, rowKey(group), descriptor);
+		/**
+		* 是否处于"初始状态"——即对应页面历史栈 cursor===0：
+		* 当 list 中所有 group 的 applied 都为 false 时即为该状态（空列表 `every` 返回 true，
+		* 即仅有 marker、无任何操作记录时也视为处于初始状态）。
+		*/
+		const isInitial = computed(() => props.list.every((g) => !g.applied));
+		return (_ctx, _cache) => {
+			return !__props.list.length && !__props.marker ? (openBlock(), createElementBlock("div", _hoisted_1, "暂无操作记录")) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [__props.list.length ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", {
+				class: "m-editor-history-list-clear",
+				title: "清空当前页面的历史记录",
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
+			}, "清空")])) : createCommentVNode("v-if", true), createVNode(unref(TMagicScrollbar), { "max-height": "360px" }, {
+				default: withCtx(() => [createElementVNode("ul", _hoisted_3, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (group) => {
+						return openBlock(), createBlock(GroupRow_default, {
+							key: rowKey(group),
+							group: toRow(group),
+							expanded: unref(isHistoryGroupExpanded)(__props.expanded, rowKey(group)),
+							"select-enabled": true,
+							onToggle: _cache[1] || (_cache[1] = (key) => _ctx.$emit("toggle", key)),
+							onGoto: _cache[2] || (_cache[2] = (index) => _ctx.$emit("goto", index)),
+							onDiffStep: _cache[3] || (_cache[3] = (index) => _ctx.$emit("diff-step", index)),
+							onRevertStep: _cache[4] || (_cache[4] = (index) => _ctx.$emit("revert-step", index)),
+							onSelect: _cache[5] || (_cache[5] = (index) => _ctx.$emit("select", index))
+						}, null, 8, ["group", "expanded"]);
+					}), 128)),
+					createCommentVNode("\n        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），\n        作为\"未修改\"零点。当所有 group 都未 applied 时它即为当前位置。\n        设置 root 时生成的「未修改的初始状态」标记（marker）会作为该行的文案与时间来源。\n      "),
+					createVNode(InitialRow_default, {
+						"is-current": isInitial.value,
+						marker: __props.marker,
+						onGotoInitial: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("goto-initial"))
+					}, null, 8, ["is-current", "marker"])
+				])]),
+				_: 1
+			})], 64));
+		};
+	}
+});
+//#endregion
+export { PageTab_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,184 @@
+import { datetimeFormatter } from "@tmagic/form";
+import { tMagicMessageBox } from "@tmagic/design";
+//#region packages/editor/src/layouts/history-list/composables.ts
+/** 合并组默认展开；仅当 expanded[key] === false 时为收起。 */
+var isHistoryGroupExpanded = (expanded, key) => expanded[key] !== false;
+/**
+* 历史面板的时间展示：
+* - 当天的记录只显示 `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 "修改";
+	}
+};
+/** 内置操作途径的中文文案；自定义来源直接回显原值，未知 / 缺省返回空串（UI 据此不渲染）。 */
+var HISTORY_SOURCE_LABELS = {
+	stage: "画布",
+	tree: "树面板",
+	"component-panel": "组件面板",
+	props: "配置面板",
+	code: "源码",
+	"root-code": "DSL源码",
+	"stage-contextmenu": "画布菜单",
+	"tree-contextmenu": "树菜单",
+	toolbar: "工具栏",
+	shortcut: "快捷键",
+	rollback: "回滚",
+	api: "接口",
+	ai: "AI",
+	initial: "初始值",
+	sync: "同步",
+	unknown: "未知"
+};
+/** 操作途径文案：用于历史面板展示「画布 / 树面板 / 配置面板…」标签。 */
+var sourceLabel = (source = "unknown") => {
+	return HISTORY_SOURCE_LABELS[source] ?? `${source}`;
+};
+/** 取一组历史步骤里最后一步（最近一次）的操作途径，用于组头部展示。 */
+var groupSource = (group) => group.steps[group.steps.length - 1]?.step.source;
+/** 取一组历史步骤里最后一步（最近一次）的操作人，用于组头部展示。 */
+var groupOperator = (group) => group.steps[group.steps.length - 1]?.step.operator;
+/**
+* 把一个历史分组（页面 / bucket）派生为 GroupRow 直接消费的视图模型 {@link HistoryRowGroup}。
+* 统一了原先 PageTab / Bucket 各自内联的 sub-steps 映射逻辑：描述、可差异、可回滚、时间、途径
+* 全部在此一次性算好，组件层只负责渲染。
+*/
+var toRowGroup = (group, key, descriptor) => {
+	const { describeGroup, describeStep, isStepDiffable, isStepRevertable } = descriptor;
+	const timestamp = groupTimestamp(group);
+	const lastStep = group.steps[group.steps.length - 1]?.step;
+	return {
+		key,
+		applied: group.applied,
+		isCurrent: Boolean(group.isCurrent),
+		opType: group.opType,
+		desc: describeGroup ? describeGroup(group) : describeStep(lastStep),
+		source: groupSource(group),
+		operator: groupOperator(group),
+		time: formatHistoryTime(timestamp),
+		timeTitle: formatHistoryFullTime(timestamp),
+		subSteps: group.steps.map((s) => ({
+			index: s.index,
+			applied: s.applied,
+			isCurrent: Boolean(s.isCurrent),
+			saved: s.step.saved,
+			desc: describeStep(s.step),
+			diffable: isStepDiffable ? isStepDiffable(s.step) : false,
+			revertable: s.applied && (isStepRevertable ? isStepRevertable(s.step) : true),
+			source: s.step.source,
+			operator: s.step.operator,
+			time: formatHistoryTime(s.step.timestamp),
+			timeTitle: formatHistoryFullTime(s.step.timestamp)
+		}))
+	};
+};
+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];
+};
+/**
+* 页面 / 数据源 / 代码块三类历史共用的单步描述核心。
+* 各类型只在「取展示名」与「实体单位名」上有差异，通过参数注入，文案模板完全一致：
+* - 新增 / 删除：单实体展示「label」，多实体（仅页面可能出现）退化为「N 个X」；
+* - 修改：展示「label · propPath」，无 diff 时兜底「X」，多实体退化为「N 个X」。
+* 操作类型（新增 / 删除 / 修改）已由列表行的 op 徽标单独展示，故描述文案不再重复动词。
+* 展示 id 统一取 schema.id；调用方显式传入的 historyDescription 永远优先。
+*/
+var describeStep = (step, getLabel, unit) => {
+	if (step.historyDescription) return step.historyDescription;
+	const items = step.diff ?? [];
+	const label = (schema) => labelWithId(getLabel(schema), schema?.id);
+	if (step.opType === "add") {
+		const node = items[0]?.newSchema;
+		return items.length === 1 && node ? label(node) : `${items.length} 个${unit}`;
+	}
+	if (step.opType === "remove") {
+		const node = items[0]?.oldSchema;
+		return items.length === 1 && node ? label(node) : `${items.length} 个${unit}`;
+	}
+	if (!items.length) return unit;
+	if (items.length === 1) {
+		const { newSchema, oldSchema, changeRecords } = items[0];
+		const propPath = changeRecords?.map((changeRecord) => changeRecord.propPath).join(",");
+		const target = label(newSchema ?? oldSchema);
+		return propPath ? `${target} · ${propPath}` : target;
+	}
+	return `${items.length} 个${unit}`;
+};
+var describePageStep = (step) => describeStep(step, (node) => nameOf(node), "节点");
+/**
+* 合并组的展示文案：
+* - 若组内任一步显式提供了 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);
+	return labelWithId(group.targetName ?? (group.targetId !== void 0 ? `${group.targetId}` : "节点"), group.targetId);
+};
+/**
+* 页面 step 是否支持「回滚」（类 git revert）：
+* - 新增 / 删除：不依赖 changeRecords，反向应用即删除 / 加回，始终可回滚；
+* - 更新：必须每个被更新节点都带有 changeRecords，才支持按 propPath 局部反向 patch。
+*   缺失 changeRecords 的更新只能整节点替换，会冲掉该节点后续的无关变更，因此不支持回滚。
+*/
+var isPageStepRevertable = (step) => {
+	if (step.opType !== "update") return true;
+	const items = step.diff ?? [];
+	if (!items.length) return false;
+	return items.every((item) => Boolean(item.changeRecords?.length));
+};
+/**
+* 单 diff 项历史（数据源 / 代码块）是否支持「回滚」：
+* - 新增（无 oldSchema）/ 删除（无 newSchema）：不依赖 changeRecords，始终可回滚；
+* - 更新（前后内容都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+*/
+var isSingleDiffStepRevertable = (step) => {
+	const item = step.diff?.[0];
+	if (!item?.oldSchema || !item?.newSchema) return true;
+	return Boolean(item.changeRecords?.length);
+};
+/**
+* 通用二次确认弹窗：清空历史 / 无法差异对比的回滚等会改变状态的操作，先弹出确认框，
+* 用户点击「确定」返回 true，取消（confirm reject）时返回 false 并静默忽略。
+*/
+var confirmHistoryAction = async (message) => {
+	try {
+		await tMagicMessageBox.confirm(message, "提示", {
+			confirmButtonText: "确定",
+			cancelButtonText: "取消",
+			type: "warning"
+		});
+		return true;
+	} catch {
+		return false;
+	}
+};
+//#endregion
+export { confirmHistoryAction, describePageGroup, describePageStep, describeStep, formatHistoryFullTime, formatHistoryTime, isHistoryGroupExpanded, isPageStepRevertable, isSingleDiffStepRevertable, opLabel, sourceLabel, toRowGroup };

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

@@ -0,0 +1,56 @@
+import { useServices } from "../../hooks/use-services.js";
+import { computed, reactive } from "vue";
+//#region packages/editor/src/layouts/history-list/useHistoryList.ts
+/**
+* 历史记录面板共享逻辑：
+* - 暴露三类历史的聚合数据（页面 / 数据源 / 代码块）；
+* - 提供折叠状态管理；
+* - 提供操作描述文案生成器。
+*
+* 所有数据基于 historyService 的 reactive state 派生，自动跟随历史变化刷新。
+*/
+var useHistoryList = () => {
+	const { editorService, historyService } = useServices();
+	/**
+	* 折叠状态：key 形如 `pg-${组内首步 index}` / `ds-${id}-${组内首步 index}` / `cb-${id}-${组内首步 index}`。
+	* 用组内首步的稳定 index（而非展示位置）作为 key，确保历史数据更新后已展开的分组状态保持不变。
+	* 合并组默认展开；仅当值为 `false` 时表示收起。
+	*/
+	const expanded = reactive({});
+	const toggleGroup = (key) => {
+		expanded[key] = expanded[key] === false;
+	};
+	const pageGroups = computed(() => historyService.getHistoryGroups("page", editorService.get("page")?.id));
+	const dataSourceGroups = computed(() => historyService.getHistoryGroups("dataSource"));
+	const codeBlockGroups = computed(() => historyService.getHistoryGroups("codeBlock"));
+	/** 页面 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))
+	};
+};
+//#endregion
+export { useHistoryList };