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

package/dist/es/utils/undo-redo.js

@@ -1,6 +1,32 @@
 import { cloneDeep } from "lodash-es";
 //#region packages/editor/src/utils/undo-redo.ts
-var UndoRedo = class {
+var UndoRedo = class UndoRedo {
+	/**
+	* 由 {@link UndoRedo.serialize} 产出的快照重建一个 UndoRedo 实例。
+	* 游标会被夹紧到 [0, length] 区间，避免脏数据导致越界。
+	*
+	* @param options.isSavedStep 可选谓词：若提供，则把游标定位到「最近一条满足该谓词的记录」之后
+	*   （即恢复到最近一个已保存点）；找不到匹配记录时退回快照中的原游标。
+	*/
+	static fromSerialized(data, options = {}) {
+		const undoRedo = new UndoRedo(data.listMaxSize);
+		const list = Array.isArray(data.elementList) ? data.elementList.map((item) => cloneDeep(item)) : [];
+		let cursor = Number.isFinite(data.listCursor) ? data.listCursor : list.length;
+		const overflow = list.length - undoRedo.listMaxSize;
+		if (overflow > 0) {
+			list.splice(0, overflow);
+			cursor -= overflow;
+		}
+		if (options.isSavedStep) {
+			for (let i = list.length - 1; i >= 0; i--) if (options.isSavedStep(list[i])) {
+				cursor = i + 1;
+				break;
+			}
+		}
+		undoRedo.elementList = list;
+		undoRedo.listCursor = Math.max(0, Math.min(cursor, list.length));
+		return undoRedo;
+	}
 	elementList;
 	listCursor;
 	listMaxSize;
@@ -10,6 +36,17 @@ var UndoRedo = class {
 		this.listCursor = 0;
 		this.listMaxSize = listMaxSize > minListMaxSize ? listMaxSize : minListMaxSize;
 	}
+	/**
+	* 导出当前栈的可序列化快照（深克隆，避免外部改动污染内部状态）。
+	* 配合 {@link UndoRedo.fromSerialized} 可在持久化后完整还原撤销/重做栈。
+	*/
+	serialize() {
+		return {
+			elementList: this.elementList.map((item) => cloneDeep(item)),
+			listCursor: this.listCursor,
+			listMaxSize: this.listMaxSize
+		};
+	}
 	pushElement(element) {
 		this.elementList.splice(this.listCursor, this.elementList.length - this.listCursor, cloneDeep(element));
 		this.listCursor += 1;
@@ -41,6 +78,48 @@ var UndoRedo = class {
 		if (this.listCursor < 1) return null;
 		return cloneDeep(this.elementList[this.listCursor - 1]);
 	}
+	/**
+	* 用 `element` 替换当前游标所在元素（cursor - 1），并丢弃其后的重做尾部（与 {@link pushElement} 的丢尾一致），
+	* 游标位置保持不变（元素数量不增）。cursor 为 0（无已应用元素）时不做任何操作并返回 false。
+	* 用于「连续同类记录合并」等就地替换最新一条的场景。
+	*/
+	replaceCurrentElement(element) {
+		if (this.listCursor < 1) return false;
+		this.elementList.splice(this.listCursor - 1, this.elementList.length - (this.listCursor - 1), cloneDeep(element));
+		return true;
+	}
+	/**
+	* 对当前游标所在元素（cursor - 1）做就地更新；cursor 为 0（全部已撤销）时不做任何操作。
+	* 用于给「当前步骤」打标记（如标记为已保存）等元数据写入场景。
+	*/
+	updateCurrentElement(updater) {
+		if (this.listCursor < 1) return;
+		updater(this.elementList[this.listCursor - 1]);
+	}
+	/** 对栈内全部元素做就地更新。用于批量清理元数据（如清空所有元素的已保存标记）。 */
+	updateElements(updater) {
+		this.elementList.forEach(updater);
+	}
+	/**
+	* 返回栈内全部元素的浅克隆数组（按时间顺序，索引 0 为最早一步）。
+	* 仅用于历史面板等只读展示场景，不应直接修改返回值。
+	*/
+	getElementList() {
+		return this.elementList.slice();
+	}
+	/**
+	* 当前游标位置：表示已应用的步骤数量。
+	* - cursor === 0 表示全部已撤销
+	* - cursor === length 表示已重做到末尾
+	* 历史面板用于区分"已应用 / 已撤销"两段。
+	*/
+	getCursor() {
+		return this.listCursor;
+	}
+	/** 栈内总步数。 */
+	getLength() {
+		return this.elementList.length;
+	}
 };
 //#endregion
 export { UndoRedo };

package/dist/style.css

@@ -126,7 +126,10 @@
 .m-form-container.has-tip .tmagic-design-form-item {
   flex: 1;
 }
-.m-form-container .tmagic-design-form-item.show-diff {
+.m-form-container .tmagic-design-form-item.show-after-diff {
+  background: rgb(225, 243, 216);
+}
+.m-form-container .tmagic-design-form-item.show-before-diff {
   background: #f7dadd;
 }
 
@@ -578,6 +581,451 @@ fieldset.m-fieldset .m-form-tip {
   background-color: transparent;
 }
 
+.m-editor-history-list-popover {
+  padding: 0 !important;
+}
+.m-editor-history-list-popover .m-editor-history-list {
+  position: relative;
+  padding: 4px 8px 8px;
+}
+.m-editor-history-list-popover .m-editor-history-list-close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  margin: 0;
+  color: #909399;
+}
+.m-editor-history-list-popover .m-editor-history-list-close:hover {
+  color: #409eff;
+}
+.m-editor-history-list-popover .m-editor-history-list-tabs .el-tabs__header,
+.m-editor-history-list-popover .m-editor-history-list-tabs .t-tabs__header {
+  margin-bottom: 4px;
+}
+.m-editor-history-list-popover .m-editor-history-list-empty {
+  padding: 24px 0;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+}
+.m-editor-history-list-popover .m-editor-history-list-ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 4px 4px;
+}
+.m-editor-history-list-popover .m-editor-history-list-clear {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #f56c6c;
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-clear:hover {
+  background-color: rgba(245, 108, 108, 0.12);
+}
+.m-editor-history-list-popover .m-editor-history-list-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #303133;
+  cursor: default;
+}
+.m-editor-history-list-popover .m-editor-history-list-item:not(.m-editor-history-list-group.is-merged):hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.m-editor-history-list-popover .m-editor-history-list-item.is-undone {
+  color: #c0c4cc;
+}
+.m-editor-history-list-popover .m-editor-history-list-item.is-undone .m-editor-history-list-item-op {
+  opacity: 0.5;
+}
+.m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) {
+  background-color: rgba(64, 158, 255, 0.1);
+  box-shadow: inset 2px 0 0 #409eff;
+}
+.m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged):hover {
+  background-color: rgba(64, 158, 255, 0.16);
+}
+.m-editor-history-list-popover .m-editor-history-list-item.is-current:not(.m-editor-history-list-group.is-merged) .m-editor-history-list-item-desc {
+  font-weight: 600;
+  color: #409eff;
+}
+.m-editor-history-list-popover .m-editor-history-list-group {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+}
+.m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: default;
+}
+.m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-head.is-clickable {
+  cursor: pointer;
+}
+.m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-toggle {
+  flex: 0 0 auto;
+  width: 16px;
+  text-align: center;
+  color: #909399;
+  font-size: 12px;
+  user-select: none;
+  transition: transform 0.15s ease;
+  pointer-events: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-group .m-editor-history-list-group-toggle.is-expanded {
+  transform: rotate(180deg);
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged {
+  margin: 4px 0;
+  padding: 4px 8px 6px;
+  background-color: rgba(47, 84, 235, 0.06);
+  border: 1px solid rgba(47, 84, 235, 0.18);
+  border-left: 3px solid #2f54eb;
+  border-radius: 4px;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged:hover {
+  background-color: rgba(47, 84, 235, 0.1);
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged .m-editor-history-list-group-head {
+  font-weight: 600;
+  color: #1d39c4;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone {
+  background-color: rgba(192, 196, 204, 0.08);
+  border-color: rgba(192, 196, 204, 0.4);
+  border-left-color: #c0c4cc;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone .m-editor-history-list-group-head {
+  color: #c0c4cc;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current {
+  background-color: rgba(64, 158, 255, 0.08);
+  border-color: rgba(64, 158, 255, 0.3);
+  border-left-color: #409eff;
+  box-shadow: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-current .m-editor-history-list-group-head {
+  color: #409eff;
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps {
+  margin: 6px 0 0 6px;
+  padding: 0;
+  list-style: none;
+  border-left: 1px dashed rgba(47, 84, 235, 0.45);
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  font-size: 11px;
+  color: #606266;
+  cursor: default;
+  border-radius: 3px;
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable {
+  cursor: pointer;
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable:hover {
+  background-color: rgba(47, 84, 235, 0.1);
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps li.is-undone {
+  color: #c0c4cc;
+}
+.m-editor-history-list-popover .m-editor-history-list-substeps li.is-current {
+  color: #409eff;
+  font-weight: 600;
+  background-color: rgba(64, 158, 255, 0.08);
+  border-radius: 3px;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-current {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  background-color: #409eff;
+  font-weight: 500;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-index {
+  flex: 0 0 auto;
+  min-width: 30px;
+  text-align: right;
+  color: #909399;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.m-editor-history-list-popover .m-editor-history-list-group.is-merged > .m-editor-history-list-group-head > .m-editor-history-list-item-index {
+  min-width: 0;
+  text-align: left;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-time {
+  flex: 0 0 auto;
+  color: #a8abb2;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-op {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 11px;
+  line-height: 18px;
+  color: #fff;
+  background-color: #909399;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-op.op-add {
+  background-color: #67c23a;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-op.op-remove {
+  background-color: #f56c6c;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-op.op-update {
+  background-color: #e6a23c;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-op.op-initial {
+  background-color: #909399;
+}
+.m-editor-history-list-popover .m-editor-history-list-initial {
+  cursor: default;
+  color: #606266;
+  border-top: 1px dashed #dcdfe6;
+  margin-top: 4px;
+  padding-top: 8px;
+}
+.m-editor-history-list-popover .m-editor-history-list-initial.is-clickable {
+  cursor: pointer;
+}
+.m-editor-history-list-popover .m-editor-history-list-initial .m-editor-history-list-item-desc {
+  font-style: italic;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-desc {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-source {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: #909399;
+  background-color: #f4f4f5;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-operator {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border: 1px solid #c6e2ff;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 14px;
+  color: #409eff;
+  background-color: #ecf5ff;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-saved {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  background-color: #67c23a;
+  white-space: nowrap;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-merge {
+  flex: 0 0 auto;
+  padding: 0 8px;
+  border-radius: 8px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #fff;
+  background-color: #2f54eb;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-actions {
+  display: none;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+}
+.m-editor-history-list-popover .m-editor-history-list-group-head:hover > .m-editor-history-list-item-actions,
+.m-editor-history-list-popover .m-editor-history-list-substeps > li:hover > .m-editor-history-list-item-actions,
+.m-editor-history-list-popover .m-editor-history-list-initial:hover > .m-editor-history-list-item-actions {
+  display: flex;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-diff {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #409eff;
+  background-color: rgba(64, 158, 255, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-diff:hover {
+  background-color: rgba(64, 158, 255, 0.2);
+}
+.m-editor-history-list-popover .m-editor-history-list-item-goto {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #529b2e;
+  background-color: rgba(103, 194, 58, 0.12);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-goto:hover {
+  background-color: rgba(103, 194, 58, 0.24);
+}
+.m-editor-history-list-popover .m-editor-history-list-item-revert {
+  flex: 0 0 auto;
+  padding: 0 6px;
+  border-radius: 2px;
+  font-size: 10px;
+  line-height: 16px;
+  color: #f56c6c;
+  background-color: rgba(245, 108, 108, 0.12);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-revert:hover {
+  background-color: rgba(245, 108, 108, 0.25);
+}
+.m-editor-history-list-popover .m-editor-history-list-substep-desc {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-history-list-popover .m-editor-history-list-bucket {
+  margin-bottom: 8px;
+}
+.m-editor-history-list-popover .m-editor-history-list-bucket:last-child {
+  margin-bottom: 0;
+}
+.m-editor-history-list-popover .m-editor-history-list-bucket-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+.m-editor-history-list-popover .m-editor-history-list-bucket-title code {
+  flex: 1 1 auto;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  color: #409eff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-history-list-popover .m-editor-history-list-bucket-count {
+  flex: 0 0 auto;
+  color: #909399;
+  font-weight: 400;
+  font-size: 11px;
+}
+
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-body {
+  display: flex;
+  flex-direction: column;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-notice {
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background-color: #fdf6ec;
+  border: 1px solid #faecd8;
+  border-radius: 4px;
+  color: #e6a23c;
+  font-size: 13px;
+  line-height: 1.5;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  gap: 12px;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-controls {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-view,
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-mode {
+  flex: 0 0 auto;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-target {
+  flex: 1 1 auto;
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-legend {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-arrow {
+  color: #909399;
+  font-size: 12px;
+}
+.m-editor-history-diff-dialog .m-editor-history-diff-dialog-tip {
+  margin-left: 8px;
+  color: #e6a23c;
+  font-size: 12px;
+}
+
 .m-editor {
   display: flex;
   flex-direction: column;
@@ -1006,9 +1454,6 @@ fieldset.m-fieldset .m-form-tip {
   transition: all 0.2s ease 0s;
   padding: 5px 14px;
 }
-.page-bar-popover .menu-item .tmagic-design-button {
-  color: #313a40;
-}
 .page-bar-popover .menu-item:hover {
   background-color: #f3f5f9;
 }
@@ -1074,7 +1519,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   right: 15px;
   bottom: 15px;
-  z-index: 30;
+  z-index: 32;
   opacity: 0.5;
 }
 .m-editor-props-panel .m-editor-props-panel-src-icon:hover {
@@ -1084,7 +1529,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   right: 15px;
   bottom: 60px;
-  z-index: 30;
+  z-index: 31;
   opacity: 0.5;
 }
 .m-editor-props-panel .m-editor-props-panel-style-icon:hover {
@@ -1094,7 +1539,7 @@ fieldset.m-fieldset .m-form-tip {
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 10;
+  z-index: 31;
 }
 .m-editor-props-panel .m-editor-resizer {
   position: absolute;
@@ -1660,9 +2105,12 @@ fieldset.m-fieldset .m-form-tip {
 .border-box-container .border-icon-container .border-icon + .border-icon {
   margin-left: 8px;
 }
+.border-box-container .border-icon-container .border-icon.configured {
+  border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+}
 .border-box-container .border-icon-container .border-icon.active {
   border-width: 1px;
-  border-color: var(--el-color-primary);
+  border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
 }
 .border-box-container .border-icon-container .border-icon.border-icon-top {
   border-top-width: 2px;