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

package/dist/es/services/events.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { toLine } from "@tmagic/utils";
 import { reactive } from "vue";
 import { cloneDeep } from "lodash-es";
@@ -14,7 +14,7 @@ var canUsePluginMethods = {
 };
 var eventMap = reactive({});
 var methodMap = reactive({});
-var Events = class extends BaseService_default {
+var Events = class extends BaseService {
 	constructor() {
 		super([...canUsePluginMethods.async.map((methodName) => ({
 			name: methodName,

package/dist/es/services/history.js

@@ -1,59 +1,196 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
+import { getEditorConfig } from "../utils/config.js";
 import { UndoRedo } from "../utils/undo-redo.js";
+import { deserializeStacks, getOrCreateStack, markStackSaved, mergeSteps, serializeStacks, undoFloor } from "../utils/history.js";
+import { idbGet, idbSet } from "../utils/indexed-db.js";
+import editor_default from "./editor.js";
+import { guid } from "@tmagic/utils";
 import { reactive } from "vue";
 //#region packages/editor/src/services/history.ts
-var History = class extends BaseService_default {
+var canUsePluginMethods = { sync: [
+	"push",
+	"undo",
+	"redo"
+] };
+/** 各内置历史类型的默认展示名称（用于历史面板 tab / 分组标题等）。扩展类型可通过 registerStepType / setStepName 登记。 */
+var DEFAULT_STEP_NAMES = {
+	page: "页面",
+	codeBlock: "代码块",
+	dataSource: "数据源"
+};
+/** 各历史类型对应的分组 `kind`（展示用）：page→page，codeBlock→code-block，dataSource→data-source。扩展类型缺省回退到 stepType 本身。 */
+var STEP_TYPE_KIND = {
+	page: "page",
+	codeBlock: "code-block",
+	dataSource: "data-source"
+};
+/** 历史记录持久化快照的默认存储位置与结构版本。 */
+var DEFAULT_DB_NAME = "tmagic-editor";
+var DEFAULT_STORE_NAME = "history";
+var DEFAULT_KEY = "default";
+var PERSIST_VERSION = 3;
+var History = class extends BaseService {
 	state = reactive({
-		pageSteps: {},
-		pageId: void 0,
-		canRedo: false,
-		canUndo: false
+		steps: {
+			page: {},
+			codeBlock: {},
+			dataSource: {}
+		},
+		stepNames: { ...DEFAULT_STEP_NAMES }
 	});
 	constructor() {
-		super([]);
-		this.on("change", this.setCanUndoRedo);
+		super([...canUsePluginMethods.sync.map((methodName) => ({
+			name: methodName,
+			isAsync: false
+		}))]);
 	}
-	reset() {
-		this.state.pageSteps = {};
-		this.resetPage();
+	/**
+	* 注册一个扩展历史类型，使其可与内置 `page` / `codeBlock` / `dataSource` 一样走统一的
+	* {@link push} / {@link undo} / {@link redo}（按 id 分栈、独立 undo/redo）。
+	*
+	* @param stepType 自定义历史类型标识（勿与内置类型重名）
+	* @param options.event push/undo/redo 后派发的事件名，缺省为 `${stepType}-history-change`
+	* @param options.name 历史面板中的展示名称（tab / 分组标题等），缺省回退到 stepType 本身
+	*/
+	registerStepType(stepType, options = {}) {
+		this.getStepBucket(stepType);
+		if (options.name !== void 0) this.state.stepNames[stepType] = options.name;
 	}
-	resetPage() {
-		this.state.pageId = void 0;
-		this.state.canRedo = false;
-		this.state.canUndo = false;
+	/**
+	* 读取指定历史类型的展示名称（用于历史面板 tab / 分组标题等）。
+	* 未登记名称时回退到 stepType 本身。
+	*/
+	getStepName(stepType) {
+		return this.state.stepNames[stepType] ?? `${stepType}`;
 	}
-	changePage(page) {
-		if (!page) return;
-		this.state.pageId = page.id;
-		if (!this.state.pageSteps[this.state.pageId]) this.state.pageSteps[this.state.pageId] = new UndoRedo();
-		this.setCanUndoRedo();
-		this.emit("page-change", this.state.pageSteps[this.state.pageId]);
+	/**
+	* 设置指定历史类型的展示名称（用于历史面板 tab / 分组标题等）。
+	* 内置 `page` / `codeBlock` / `dataSource` 也可在此覆盖默认中文名。
+	*/
+	setStepName(stepType, name) {
+		this.state.stepNames[stepType] = name;
+	}
+	reset() {
+		this.clearAllSteps();
 	}
 	resetState() {
-		this.state.pageId = void 0;
-		this.state.pageSteps = {};
-		this.state.canRedo = false;
-		this.state.canUndo = false;
+		this.clearAllSteps();
 	}
-	push(state) {
-		const undoRedo = this.getUndoRedo();
-		if (!undoRedo) return null;
-		undoRedo.pushElement(state);
-		this.emit("change", state);
-		return state;
+	/**
+	* 为指定历史栈（默认 `page`，也适用于 codeBlock / dataSource / 扩展类型）种入一条「初始基线」记录。
+	*
+	* 该记录是一条 `opType: 'initial'` 的 step，作为对应栈 **index 0 的固定底线**：
+	* - 它是一条真实入栈的 step（随栈一起持久化），但被钉为撤销/回滚的下限——cursor 永不低于它，
+	*   因此不会被 undo / goto / revert 触达（详见 {@link undo} / {@link undoFloor}）；
+	* - 历史面板把它过滤出分组列表（见 {@link getHistoryGroups}），改由底部「初始」行展示。
+	*
+	* 仅当目标栈为空时种入（保证 initial 一定位于 index 0）；已存在 initial 底线时不重复种入。
+	*
+	* @param stepType 历史类型
+	* @param id       目标栈 id（page 为 pageId，其余类型为对应资源 id）
+	* @param options  基线展示信息（名称 / 描述 / 来源）
+	*/
+	setMarker(stepType, id, options = {}) {
+		if (!this.isValidStackId(id)) return null;
+		const existing = this.getMarker(stepType, id);
+		if (existing) return existing;
+		const stack = getOrCreateStack(this.getStepBucket(stepType), id);
+		if (stack.getLength() > 0) return null;
+		const marker = {
+			uuid: guid(),
+			opType: "initial",
+			diff: [],
+			data: {
+				name: options.name || "",
+				id
+			},
+			extra: {
+				...options.extra || {},
+				...stepType === "page" ? {
+					selectedBefore: [],
+					selectedAfter: [],
+					modifiedNodeIds: /* @__PURE__ */ new Map()
+				} : {}
+			},
+			historyDescription: options.description || "未修改的初始状态",
+			timestamp: Date.now(),
+			...options.source ? { source: options.source } : {}
+		};
+		stack.pushElement(marker);
+		this.emit("marker-change", {
+			id,
+			marker,
+			stepType
+		});
+		return marker;
 	}
-	undo() {
-		const undoRedo = this.getUndoRedo();
+	/**
+	* 读取指定历史栈的初始基线 step（栈 index 0 且 `opType: 'initial'`）；
+	* 不存在或 id 缺省时返回 undefined。
+	*/
+	getMarker(stepType, id) {
+		if (!this.isValidStackId(id)) return void 0;
+		const first = this.state.steps[stepType]?.[id]?.getElementList()[0];
+		return first?.opType === "initial" ? first : void 0;
+	}
+	push(stepType, step, id) {
+		if (!this.isValidStackId(id)) return null;
+		this.fillStepMeta(step);
+		getOrCreateStack(this.getStepBucket(stepType), id).pushElement(step);
+		this.emit("change", step, stepType, id);
+		return step;
+	}
+	undo(stepType, id) {
+		if (!this.isValidStackId(id)) return null;
+		const undoRedo = this.state.steps[stepType]?.[id];
 		if (!undoRedo) return null;
-		const state = undoRedo.undo();
-		this.emit("change", state);
-		return state;
+		if (undoRedo.getCursor() <= undoFloor(undoRedo)) return null;
+		const step = undoRedo.undo();
+		if (step) this.emit("change", step, stepType, id);
+		return step;
 	}
-	redo() {
-		const undoRedo = this.getUndoRedo();
+	redo(stepType, id) {
+		if (!this.isValidStackId(id)) return null;
+		const undoRedo = this.state.steps[stepType]?.[id];
 		if (!undoRedo) return null;
-		const state = undoRedo.redo();
-		this.emit("change", state);
+		const step = undoRedo.redo();
+		if (step) this.emit("change", step, stepType, id);
+		return step;
+	}
+	/**
+	* 是否可对指定历史栈撤销（cursor 高于 initial 基线底线）。
+	* @param stepType 历史类型
+	* @param id       目标栈 id；缺省 / 无效时返回 false
+	*/
+	canUndo(stepType, id) {
+		if (!this.isValidStackId(id)) return false;
+		const undoRedo = this.state.steps[stepType]?.[id];
+		return undoRedo ? undoRedo.getCursor() > undoFloor(undoRedo) : false;
+	}
+	/**
+	* 是否可对指定历史栈重做。
+	* @param stepType 历史类型
+	* @param id       目标栈 id；缺省 / 无效时返回 false
+	*/
+	canRedo(stepType, id) {
+		if (!this.isValidStackId(id)) return false;
+		return this.state.steps[stepType]?.[id]?.canRedo() ?? false;
+	}
+	/** 读取指定页面历史栈当前游标所在的 step（cursor - 1）；无则返回 null。 */
+	getCurrentPageStep(pageId) {
+		if (!this.isValidStackId(pageId)) return null;
+		return this.state.steps.page[pageId]?.getCurrentElement() ?? null;
+	}
+	/**
+	* 用 `state` 替换指定页面栈当前游标所在的 step（并丢弃其后的重做尾部），游标不变。
+	* 用于「连续 set root 记录合并」等就地替换最新一条的场景；替换成功后派发 `change`。
+	*/
+	replaceCurrentStep(stepType, state, id) {
+		if (!this.isValidStackId(id)) return null;
+		const undoRedo = getOrCreateStack(this.getStepBucket(stepType), id);
+		this.fillStepMeta(state);
+		if (!undoRedo.replaceCurrentElement(state)) return null;
+		this.emit("change", state, stepType, id);
 		return state;
 	}
 	destroy() {
@@ -61,14 +198,220 @@ var History = class extends BaseService_default {
 		this.removeAllListeners();
 		this.removeAllPlugins();
 	}
-	getUndoRedo() {
-		if (!this.state.pageId) return null;
-		return this.state.pageSteps[this.state.pageId];
+	/**
+	* 清空历史记录栈。统一入口，所有类型（page / codeBlock / dataSource / 扩展）行为一致：
+	* - 传入 `id`：仅清空 `stepType` 下该 id 对应的栈；
+	* - 缺省 `id`：清空 `stepType` 下的全部栈。
+	*
+	* 仅删除撤销/重做记录，不会改动 DSL / 代码块 / 数据源本身。清空时会**保留各栈原有的
+	* initial 基线**（文案 / 来源），无基线时清空成空栈。清空后派发 `clear`（签名 `(id, stepType)`）。
+	*
+	* @param stepType 历史类型
+	* @param id       目标栈 id；缺省表示清空该类型下全部栈
+	*/
+	clear(stepType, id) {
+		const bucket = this.state.steps[stepType];
+		if (!bucket) return;
+		if (this.isValidStackId(id)) this.clearStack(stepType, id);
+		else if (id === void 0) Object.keys(bucket).forEach((stackId) => this.clearStack(stepType, stackId));
+		else return;
+		this.emit("clear", {
+			id,
+			stepType
+		});
+	}
+	/**
+	* 标记历史记录为「已保存」（把对应栈当前游标所在的记录标为 `saved`）。统一入口：
+	* - 缺省 `id`：标记**全部类型、全部栈**（整份 DSL 落库场景），派发 `mark-saved` 且 `kind: 'all'`；
+	* - 传入 `id`：仅标记 `stepType` 下该 id 对应的栈，派发 `mark-saved` 且 `kind` 为 `stepType`。
+	*
+	* 同一栈内任意时刻最多只有一条记录为 `saved`；从 IndexedDB 恢复时游标会被定位到最近一条已保存记录之后。
+	*
+	* @param stepType 历史类型
+	* @param id       目标栈 id；缺省表示标记全部类型 / 全部栈
+	*/
+	markSaved(stepType, id) {
+		if (id === void 0) {
+			Object.values(this.state.steps).forEach((bucket) => Object.values(bucket).forEach(markStackSaved));
+			this.emit("mark-saved", { kind: "all" });
+			return;
+		}
+		if (!this.isValidStackId(id)) return;
+		markStackSaved(this.state.steps[stepType]?.[id]);
+		this.emit("mark-saved", {
+			kind: stepType,
+			id
+		});
+	}
+	/**
+	* 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
+	*
+	* - 每个 UndoRedo 栈连同其游标、容量一并保存，恢复后可继续 undo/redo；
+	* - `key` 用于区分不同活动页 / 项目（同一 store 下可保存多份快照），缺省为 `default`；
+	* - 返回写入成功的快照对象，便于调用方记录 savedAt 等信息；
+	* - 不支持 IndexedDB 的环境（如 SSR）会 reject。
+	*/
+	async saveToIndexedDB(options = {}) {
+		const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
+		const steps = {
+			page: {},
+			codeBlock: {},
+			dataSource: {}
+		};
+		Object.entries(this.state.steps).forEach(([stepType, bucket]) => {
+			steps[stepType] = serializeStacks(bucket);
+		});
+		const snapshot = {
+			version: PERSIST_VERSION,
+			steps,
+			savedAt: Date.now()
+		};
+		await idbSet(this.resolveDbName(dbName, appId), storeName, key, snapshot);
+		this.emit("save-to-indexed-db", snapshot);
+		return snapshot;
+	}
+	/**
+	* 从本地 IndexedDB 读取此前保存的历史快照并重建全部撤销/重做栈。
+	*
+	* - 读取到的每个栈都会经 {@link UndoRedo.fromSerialized} 还原（含游标），随后可直接 undo/redo；
+	* - 会整体覆盖当前内存中的历史状态（活动页由 editorService 维护，不在此恢复）；
+	* - 找不到对应记录时返回 null，且不改动当前状态；
+	* - 不支持 IndexedDB 的环境（如 SSR）会 reject。
+	*/
+	async restoreFromIndexedDB(options = {}) {
+		const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
+		const snapshot = await idbGet(this.resolveDbName(dbName, appId), storeName, key);
+		if (!snapshot) return null;
+		const parseDSL = getEditorConfig("parseDSL");
+		const steps = {
+			page: {},
+			codeBlock: {},
+			dataSource: {}
+		};
+		Object.entries(snapshot.steps).forEach(([stepType, bucket]) => {
+			steps[stepType] = deserializeStacks(bucket, parseDSL);
+		});
+		this.state.steps = steps;
+		this.emit("restore-from-indexed-db", snapshot);
+		return snapshot;
+	}
+	getStepList(stepType, id) {
+		if (!this.isValidStackId(id)) return [];
+		const undoRedo = this.state.steps[stepType]?.[id];
+		if (!undoRedo) return [];
+		const list = undoRedo.getElementList();
+		const cursor = undoRedo.getCursor();
+		return list.map((step, index) => ({
+			step,
+			index,
+			applied: index < cursor
+		}));
+	}
+	getHistoryGroups(stepType, id) {
+		const bucket = this.state.steps[stepType];
+		if (!bucket) return [];
+		const kind = STEP_TYPE_KIND[stepType] ?? stepType;
+		const collect = (stackId) => {
+			const undoRedo = bucket[stackId];
+			if (!undoRedo) return [];
+			const list = undoRedo.getElementList();
+			if (!list.length) return [];
+			return mergeSteps(kind, stackId, list, undoRedo.getCursor()).filter((group) => group.opType !== "initial");
+		};
+		if (this.isValidStackId(id)) return collect(id);
+		return Object.keys(bucket).flatMap((stackId) => collect(stackId));
+	}
+	/**
+	* 读取指定历史栈的当前游标（已应用步骤数量）。统一入口，替代旧的
+	* `getPageCursor` / `getCodeBlockCursor` / `getDataSourceCursor`。
+	* - `id` 缺省或非法、或对应栈不存在时返回 0；
+	* - `stepType` 支持 `page` / `codeBlock` / `dataSource` / 扩展类型。
+	*/
+	getCursor(stepType, id) {
+		if (!this.isValidStackId(id)) return 0;
+		return this.state.steps[stepType]?.[id]?.getCursor() ?? 0;
+	}
+	/**
+	* 按历史记录 uuid 在指定历史类型的栈中查找其所属 id 与索引，统一入口，替代旧的
+	* `getPageStepIndexByUuid` / `findCodeBlockStepLocationByUuid` / `findDataSourceStepLocationByUuid`。
+	*
+	* - 传入 `id`：仅在该 id 对应的单个栈中查找（如页面历史按活动页查看，传入 pageId）；
+	* - 缺省 `id`：遍历该类型下全部栈查找（代码块 / 数据源等按全部资源分桶的场景）。
+	*
+	* 找不到时返回 null。供「按 uuid 回滚」等需要把 uuid 映射回 (id, index) 的场景使用。
+	*
+	* @param stepType 历史类型
+	* @param uuid     目标历史记录的 uuid
+	* @param id       目标栈 id；缺省表示遍历该类型下全部栈
+	*/
+	findStepLocationByUuid(stepType, uuid, id) {
+		if (!uuid) return null;
+		const bucket = this.state.steps[stepType];
+		if (!bucket) return null;
+		if (this.isValidStackId(id)) {
+			const index = this.getStepList(stepType, id).findIndex((entry) => entry.step.uuid === uuid);
+			return index >= 0 ? {
+				id,
+				index
+			} : null;
+		}
+		for (const stackId of Object.keys(bucket)) {
+			const index = this.getStepList(stepType, stackId).findIndex((entry) => entry.step.uuid === uuid);
+			if (index >= 0) return {
+				id: stackId,
+				index
+			};
+		}
+		return null;
+	}
+	usePlugin(options) {
+		super.usePlugin(options);
+	}
+	emit(eventName, ...args) {
+		return super.emit(eventName, ...args);
+	}
+	/**
+	* 取出指定历史类型的栈桶（`Record<id, UndoRedo>`）；不存在时按需创建空桶，
+	* 从而支持通过 {@link registerStepType} 或首次 push 动态扩展历史类型。
+	*/
+	getStepBucket(stepType) {
+		if (!this.state.steps[stepType]) this.state.steps[stepType] = {};
+		return this.state.steps[stepType];
+	}
+	/**
+	* 清空单个历史栈并按需重建其 initial 基线（保留原基线的文案 / 来源）。
+	*/
+	clearStack(stepType, id) {
+		const marker = this.getMarker(stepType, id);
+		this.getStepBucket(stepType)[id] = new UndoRedo();
+		if (marker) this.setMarker(stepType, id, {
+			name: marker.data?.name,
+			description: marker.historyDescription,
+			source: marker.source
+		});
+	}
+	/** 入栈前补全 step 的 uuid / timestamp（调用方未指定时）。 */
+	fillStepMeta(step) {
+		if (step.uuid === void 0) step.uuid = guid();
+		if (step.timestamp === void 0) step.timestamp = Date.now();
+	}
+	/** 校验「按 id 分栈」类型（codeBlock / dataSource / 扩展）的 id 是否有效。 */
+	isValidStackId(id) {
+		return id !== void 0 && id !== null && `${id}` !== "";
+	}
+	/** 清空全部历史栈内容（保留已注册的类型键，使扩展类型在 reset 后仍可用）。 */
+	clearAllSteps() {
+		Object.keys(this.state.steps).forEach((stepType) => {
+			this.state.steps[stepType] = {};
+		});
 	}
-	setCanUndoRedo() {
-		const undoRedo = this.getUndoRedo();
-		this.state.canRedo = undoRedo?.canRedo() || false;
-		this.state.canUndo = undoRedo?.canUndo() || false;
+	/**
+	* 把基础 dbName 与当前 DSL（root app）的 id 拼成最终库名，实现不同应用历史隔离。
+	* 取不到 app id（如尚未加载 DSL）时退回基础 dbName。
+	*/
+	resolveDbName(dbName, appId) {
+		const resolvedAppId = appId ?? editor_default.get("root")?.id;
+		return resolvedAppId ? `${dbName}-${resolvedAppId}` : dbName;
 	}
 };
 var history_default = new History();

package/dist/es/services/keybinding.js

@@ -1,11 +1,11 @@
 import { KeyBindingCommand } from "../type.js";
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import editor_default from "./editor.js";
 import ui_default from "./ui.js";
 import { isPage, isPageFragment } from "@tmagic/utils";
 import KeyController from "keycon";
 //#region packages/editor/src/services/keybinding.ts
-var Keybinding = class extends BaseService_default {
+var Keybinding = class extends BaseService {
 	ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? "meta" : "ctrl";
 	controllers = /* @__PURE__ */ new Map();
 	bindingList = [];
@@ -13,7 +13,7 @@ var Keybinding = class extends BaseService_default {
 		[KeyBindingCommand.DELETE_NODE]: () => {
 			const nodes = editor_default.get("nodes");
 			if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
-			editor_default.remove(nodes);
+			editor_default.remove(nodes, { historySource: "shortcut" });
 		},
 		[KeyBindingCommand.COPY_NODE]: () => {
 			const nodes = editor_default.get("nodes");
@@ -23,13 +23,13 @@ var Keybinding = class extends BaseService_default {
 			const nodes = editor_default.get("nodes");
 			if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
 			editor_default.copy(nodes);
-			editor_default.remove(nodes);
+			editor_default.remove(nodes, { historySource: "shortcut" });
 		},
 		[KeyBindingCommand.PASTE_NODE]: () => {
 			editor_default.get("nodes") && editor_default.paste({
 				offsetX: 10,
 				offsetY: 10
-			});
+			}, void 0, { historySource: "shortcut" });
 		},
 		[KeyBindingCommand.UNDO]: () => {
 			editor_default.undo();

package/dist/es/services/props.js

@@ -1,10 +1,10 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { fillConfig } from "../utils/props.js";
 import editor_default from "./editor.js";
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";
 import { reactive } from "vue";
-import { cloneDeep, mergeWith } from "lodash-es";
+import { cloneDeep as cloneDeep$1, mergeWith } from "lodash-es";
 //#region packages/editor/src/services/props.ts
 var canUsePluginMethods = {
 	async: [
@@ -17,7 +17,7 @@ var canUsePluginMethods = {
 	],
 	sync: ["createId", "setNewItemId"]
 };
-var Props = class extends BaseService_default {
+var Props = class extends BaseService {
 	state = reactive({
 		propsConfigMap: {},
 		propsValueMap: {},
@@ -57,9 +57,9 @@ var Props = class extends BaseService_default {
 	getPropsConfigs() {
 		return this.state.propsConfigMap;
 	}
-	async fillConfig(config, labelWidth) {
+	async fillConfig(config, labelWidth = "80px") {
 		return fillConfig(config, {
-			labelWidth: typeof labelWidth !== "function" ? labelWidth : "80px",
+			labelWidth,
 			disabledDataSource: this.getDisabledDataSource(),
 			disabledCodeBlock: this.getDisabledCodeBlock()
 		});
@@ -77,7 +77,7 @@ var Props = class extends BaseService_default {
 	*/
 	async getPropsConfig(type, data) {
 		if (type === "area") return await this.getPropsConfig("button", data);
-		return cloneDeep(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
+		return cloneDeep$1(this.state.propsConfigMap[toLine(type)] || await this.fillConfig([]));
 	}
 	hasPropsConfig(type) {
 		return !!this.state.propsConfigMap[toLine(type)];
@@ -116,14 +116,14 @@ var Props = class extends BaseService_default {
 		}
 		const id = this.createId(type);
 		const defaultPropsValue = this.getDefaultPropsValue(type);
-		const data = this.setNewItemId(cloneDeep({
+		const data = this.setNewItemId(cloneDeep$1({
 			type,
 			...defaultValue
 		}));
 		return {
 			id,
 			...defaultPropsValue,
-			...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data)
+			...mergeWith({}, cloneDeep$1(this.state.propsValueMap[type] || {}), data)
 		};
 	}
 	hasPropsValue(type) {

package/dist/es/services/stageOverlay.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import editor_default from "./editor.js";
 import { useStage } from "../hooks/use-stage.js";
 import { getIdFromEl } from "@tmagic/utils";
@@ -13,7 +13,7 @@ var canUsePluginMethods = {
 		"createStage"
 	]
 };
-var StageOverlay = class extends BaseService_default {
+var StageOverlay = class extends BaseService {
 	state = shallowReactive({
 		wrapDiv: document.createElement("div"),
 		sourceEl: null,

package/dist/es/services/storage.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
 import serialize from "serialize-javascript";
 //#region packages/editor/src/services/storage.ts
@@ -24,7 +24,7 @@ var canUsePluginMethods = {
 /**
 * 数据存储服务
 */
-var WebStorage = class extends BaseService_default {
+var WebStorage = class extends BaseService {
 	storage = globalThis.localStorage;
 	namespace = "tmagic";
 	constructor() {

package/dist/es/services/ui.js

@@ -1,4 +1,4 @@
-import BaseService_default from "./BaseService.js";
+import BaseService from "./BaseService.js";
 import storage_default, { Protocol } from "./storage.js";
 import editor_default from "./editor.js";
 import "../utils/const.js";
@@ -31,6 +31,7 @@ var state = shallowReactive({
 	showPageListButton: true,
 	hideSlideBar: false,
 	sideBarItems: [],
+	sideBarActiveTabName: "",
 	navMenuRect: {
 		left: 0,
 		top: 0,
@@ -48,7 +49,7 @@ var canUsePluginMethods = {
 	async: ["zoom", "calcZoom"],
 	sync: []
 };
-var Ui = class extends BaseService_default {
+var Ui = class extends BaseService {
 	constructor() {
 		super(canUsePluginMethods.async.map((methodName) => ({
 			name: methodName,
@@ -63,7 +64,9 @@ var Ui = class extends BaseService_default {
 		}
 		if (name === "showGuides") mask?.showGuides(value);
 		if (name === "showRule") mask?.showRule(value);
+		const preValue = state[name];
 		state[name] = value;
+		if (preValue !== value) this.emit("state-change", name, value, preValue);
 	}
 	get(name) {
 		return state[name];