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

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

@@ -1,4 +1,5 @@
 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
 /**
@@ -11,7 +12,10 @@ import { computed, reactive } from "vue";
 */
 var useHistoryList = () => {
 	const { historyService } = useServices();
-	/** 折叠状态：key 形如 `pg-${groupIdx}` / `ds-${id}-${groupIdx}` / `cb-${id}-${groupIdx}`。 */
+	/**
+	* 折叠状态：key 形如 `pg-${组内首步 index}` / `ds-${id}-${组内首步 index}` / `cb-${id}-${组内首步 index}`。
+	* 用组内首步的稳定 index（而非展示位置）作为 key，确保历史数据更新后已展开的分组状态保持不变。
+	*/
 	const expanded = reactive({});
 	const toggleGroup = (key) => {
 		expanded[key] = !expanded[key];
@@ -48,6 +52,20 @@ var useHistoryList = () => {
 		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 "新增";
@@ -151,4 +169,4 @@ var describeCodeBlockGroup = (group) => {
 	return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? "…" : ""}` : `修改 ${target}`;
 };
 //#endregion
-export { describeCodeBlockGroup, describeCodeBlockStep, describeDataSourceGroup, describeDataSourceStep, describePageGroup, describePageStep, opLabel, useHistoryList };
+export { describeCodeBlockGroup, describeCodeBlockStep, describeDataSourceGroup, describeDataSourceStep, describePageGroup, describePageStep, formatHistoryFullTime, formatHistoryTime, groupTimestamp, opLabel, useHistoryList };

package/dist/es/services/history.js

@@ -214,6 +214,7 @@ var history_default = new class History extends BaseService {
 	push(state, pageId) {
 		const undoRedo = this.getUndoRedo(pageId);
 		if (!undoRedo) return null;
+		if (state.timestamp === void 0) state.timestamp = Date.now();
 		undoRedo.pushElement(state);
 		if (pageId === void 0 || `${pageId}` === `${this.state.pageId}`) this.emit("change", state);
 		return state;
@@ -234,7 +235,8 @@ var history_default = new class History extends BaseService {
 			oldContent: payload.oldContent ? cloneDeep(payload.oldContent) : null,
 			newContent: payload.newContent ? cloneDeep(payload.newContent) : null,
 			changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
-			historyDescription: payload.historyDescription
+			historyDescription: payload.historyDescription,
+			timestamp: Date.now()
 		};
 		this.getCodeBlockUndoRedo(codeBlockId).pushElement(step);
 		this.emit("code-block-history-change", codeBlockId, step);
@@ -251,7 +253,8 @@ var history_default = new class History extends BaseService {
 			oldSchema: payload.oldSchema ? cloneDeep(payload.oldSchema) : null,
 			newSchema: payload.newSchema ? cloneDeep(payload.newSchema) : null,
 			changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : void 0,
-			historyDescription: payload.historyDescription
+			historyDescription: payload.historyDescription,
+			timestamp: Date.now()
 		};
 		this.getDataSourceUndoRedo(dataSourceId).pushElement(step);
 		this.emit("data-source-history-change", dataSourceId, step);

package/dist/es/style.css

@@ -678,17 +678,17 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged {
   margin: 4px 0;
   padding: 4px 8px 6px;
-  background-color: rgba(144, 105, 219, 0.06);
-  border: 1px solid rgba(144, 105, 219, 0.18);
-  border-left: 3px solid #9069db;
+  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(144, 105, 219, 0.1);
+  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: #5b3fa5;
+  color: #1d39c4;
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone {
   background-color: rgba(192, 196, 204, 0.08);
@@ -711,7 +711,7 @@ fieldset.m-fieldset .m-form-tip {
   margin: 6px 0 0 6px;
   padding: 0;
   list-style: none;
-  border-left: 1px dashed rgba(144, 105, 219, 0.45);
+  border-left: 1px dashed rgba(47, 84, 235, 0.45);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li {
   display: flex;
@@ -727,7 +727,7 @@ fieldset.m-fieldset .m-form-tip {
   cursor: pointer;
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable:hover {
-  background-color: rgba(144, 105, 219, 0.1);
+  background-color: rgba(47, 84, 235, 0.1);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-undone {
   color: #c0c4cc;
@@ -756,6 +756,14 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   white-space: nowrap;
 }
+.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;
@@ -772,7 +780,7 @@ fieldset.m-fieldset .m-form-tip {
   background-color: #f56c6c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-update {
-  background-color: #409eff;
+  background-color: #e6a23c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-initial {
   background-color: #909399;
@@ -803,7 +811,7 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 10px;
   line-height: 16px;
   color: #fff;
-  background-color: #9069db;
+  background-color: #2f54eb;
   font-weight: 500;
   letter-spacing: 0.2px;
 }
@@ -821,19 +829,33 @@ fieldset.m-fieldset .m-form-tip {
 .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: #606266;
+  background-color: rgba(96, 98, 102, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-goto:hover {
+  background-color: rgba(96, 98, 102, 0.18);
+}
 .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: #e6a23c;
-  background-color: rgba(230, 162, 60, 0.12);
+  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(230, 162, 60, 0.25);
+  background-color: rgba(245, 108, 108, 0.25);
 }
 .m-editor-history-list-popover .m-editor-history-list-substep-desc {
   flex: 1 1 auto;
@@ -878,6 +900,16 @@ fieldset.m-fieldset .m-form-tip {
   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;

package/dist/style.css

@@ -678,17 +678,17 @@ fieldset.m-fieldset .m-form-tip {
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged {
   margin: 4px 0;
   padding: 4px 8px 6px;
-  background-color: rgba(144, 105, 219, 0.06);
-  border: 1px solid rgba(144, 105, 219, 0.18);
-  border-left: 3px solid #9069db;
+  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(144, 105, 219, 0.1);
+  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: #5b3fa5;
+  color: #1d39c4;
 }
 .m-editor-history-list-popover .m-editor-history-list-group.is-merged.is-undone {
   background-color: rgba(192, 196, 204, 0.08);
@@ -711,7 +711,7 @@ fieldset.m-fieldset .m-form-tip {
   margin: 6px 0 0 6px;
   padding: 0;
   list-style: none;
-  border-left: 1px dashed rgba(144, 105, 219, 0.45);
+  border-left: 1px dashed rgba(47, 84, 235, 0.45);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li {
   display: flex;
@@ -727,7 +727,7 @@ fieldset.m-fieldset .m-form-tip {
   cursor: pointer;
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-clickable:hover {
-  background-color: rgba(144, 105, 219, 0.1);
+  background-color: rgba(47, 84, 235, 0.1);
 }
 .m-editor-history-list-popover .m-editor-history-list-substeps li.is-undone {
   color: #c0c4cc;
@@ -756,6 +756,14 @@ fieldset.m-fieldset .m-form-tip {
   font-weight: 400;
   white-space: nowrap;
 }
+.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;
@@ -772,7 +780,7 @@ fieldset.m-fieldset .m-form-tip {
   background-color: #f56c6c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-update {
-  background-color: #409eff;
+  background-color: #e6a23c;
 }
 .m-editor-history-list-popover .m-editor-history-list-item-op.op-initial {
   background-color: #909399;
@@ -803,7 +811,7 @@ fieldset.m-fieldset .m-form-tip {
   font-size: 10px;
   line-height: 16px;
   color: #fff;
-  background-color: #9069db;
+  background-color: #2f54eb;
   font-weight: 500;
   letter-spacing: 0.2px;
 }
@@ -821,19 +829,33 @@ fieldset.m-fieldset .m-form-tip {
 .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: #606266;
+  background-color: rgba(96, 98, 102, 0.1);
+  cursor: pointer;
+  user-select: none;
+}
+.m-editor-history-list-popover .m-editor-history-list-item-goto:hover {
+  background-color: rgba(96, 98, 102, 0.18);
+}
 .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: #e6a23c;
-  background-color: rgba(230, 162, 60, 0.12);
+  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(230, 162, 60, 0.25);
+  background-color: rgba(245, 108, 108, 0.25);
 }
 .m-editor-history-list-popover .m-editor-history-list-substep-desc {
   flex: 1 1 auto;
@@ -878,6 +900,16 @@ fieldset.m-fieldset .m-form-tip {
   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;