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

package/src/services/editor.ts

@@ -36,6 +36,7 @@ import type {
   DslOpOptions,
   EditorEvents,
   EditorNodeInfo,
+  HistoryOpSource,
   HistoryOpType,
   PastePosition,
   StepValue,
@@ -406,7 +407,13 @@ class Editor extends BaseService {
   public async add(
     addNode: AddMNode | MNode[],
     parent?: MContainer | null,
-    { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription }: DslOpOptions = {},
+    {
+      doNotSelect = false,
+      doNotSwitchPage = false,
+      doNotPushHistory = false,
+      historyDescription,
+      historySource,
+    }: DslOpOptions = {},
   ): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
@@ -466,9 +473,8 @@ class Editor extends BaseService {
     if (!(isPage(newNodes[0]) || isPageFragment(newNodes[0]))) {
       const pageForOp = this.getNodeInfo(newNodes[0].id, false).page;
       if (!doNotPushHistory) {
-        this.pushOpHistory(
-          'add',
-          {
+        this.pushOpHistory('add', {
+          extra: {
             nodes: newNodes.map((n) => cloneDeep(toRaw(n))),
             parentId: (this.getParentById(newNodes[0].id, false) ?? this.get('root'))!.id,
             indexMap: Object.fromEntries(
@@ -478,9 +484,10 @@ class Editor extends BaseService {
               }),
             ),
           },
-          { name: pageForOp?.name || '', id: pageForOp!.id },
+          pageData: { name: pageForOp?.name || '', id: pageForOp!.id },
           historyDescription,
-        );
+          source: historySource,
+        });
       } else {
         this.selectionBeforeOp = null;
       }
@@ -577,7 +584,13 @@ class Editor extends BaseService {
    */
   public async remove(
     nodeOrNodeList: MNode | MNode[],
-    { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false, historyDescription }: DslOpOptions = {},
+    {
+      doNotSelect = false,
+      doNotSwitchPage = false,
+      doNotPushHistory = false,
+      historyDescription,
+      historySource,
+    }: DslOpOptions = {},
   ): Promise<void> {
     this.captureSelectionBeforeOp();
 
@@ -606,7 +619,12 @@ class Editor extends BaseService {
 
     if (removedItems.length > 0 && pageForOp) {
       if (!doNotPushHistory) {
-        this.pushOpHistory('remove', { removedItems }, pageForOp, historyDescription);
+        this.pushOpHistory('remove', {
+          extra: { removedItems },
+          pageData: pageForOp,
+          historyDescription,
+          source: historySource,
+        });
       } else {
         this.selectionBeforeOp = null;
       }
@@ -704,11 +722,12 @@ class Editor extends BaseService {
       changeRecordList?: ChangeRecord[][];
       doNotPushHistory?: boolean;
       historyDescription?: string;
+      historySource?: HistoryOpSource;
     } = {},
   ): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
-    const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription } = data;
+    const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource } = data;
 
     const nodes = Array.isArray(config) ? config : [config];
 
@@ -726,9 +745,8 @@ class Editor extends BaseService {
       if (curNodes.length) {
         if (!doNotPushHistory) {
           const pageForOp = this.getNodeInfo(nodes[0].id, false).page;
-          this.pushOpHistory(
-            'update',
-            {
+          this.pushOpHistory('update', {
+            extra: {
               updatedItems: updateData.map((d) => ({
                 oldNode: cloneDeep(d.oldNode),
                 newNode: cloneDeep(toRaw(d.newNode)),
@@ -737,9 +755,10 @@ class Editor extends BaseService {
                 changeRecords: d.changeRecords?.length ? cloneDeep(d.changeRecords) : undefined,
               })),
             },
-            { name: pageForOp?.name || '', id: pageForOp!.id },
+            pageData: { name: pageForOp?.name || '', id: pageForOp!.id },
             historyDescription,
-          );
+            source: historySource,
+          });
         } else {
           this.selectionBeforeOp = null;
         }
@@ -763,7 +782,7 @@ class Editor extends BaseService {
   public async sort(
     id1: Id,
     id2: Id,
-    { doNotSelect = false, doNotPushHistory = false }: DslOpOptions = {},
+    { doNotSelect = false, doNotPushHistory = false, historySource }: DslOpOptions = {},
   ): Promise<void> {
     this.captureSelectionBeforeOp();
 
@@ -783,7 +802,7 @@ class Editor extends BaseService {
 
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
 
-    await this.update(parent, { doNotPushHistory });
+    await this.update(parent, { doNotPushHistory, historySource });
     if (!doNotSelect) {
       await this.select(node);
     }
@@ -836,7 +855,13 @@ class Editor extends BaseService {
   public async paste(
     position: PastePosition = {},
     collectorOptions?: TargetOptions,
-    { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false }: DslOpOptions = {},
+    {
+      doNotSelect = false,
+      doNotSwitchPage = false,
+      doNotPushHistory = false,
+      historyDescription,
+      historySource,
+    }: DslOpOptions = {},
   ): Promise<MNode | MNode[] | void> {
     const config: MNode[] = storageService.getItem(COPY_STORAGE_KEY);
     if (!Array.isArray(config)) return;
@@ -857,7 +882,13 @@ class Editor extends BaseService {
       propsService.replaceRelateId(config, pasteConfigs, collectorOptions);
     }
 
-    return this.add(pasteConfigs, parent, { doNotSelect, doNotSwitchPage, doNotPushHistory });
+    return this.add(pasteConfigs, parent, {
+      doNotSelect,
+      doNotSwitchPage,
+      doNotPushHistory,
+      historyDescription,
+      historySource,
+    });
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
@@ -893,14 +924,14 @@ class Editor extends BaseService {
    */
   public async alignCenter(
     config: MNode | MNode[],
-    { doNotSelect = false, doNotPushHistory = false }: DslOpOptions = {},
+    { doNotSelect = false, doNotPushHistory = false, historyDescription, historySource }: DslOpOptions = {},
   ): Promise<MNode | MNode[]> {
     const nodes = Array.isArray(config) ? config : [config];
     const stage = this.get('stage');
 
     const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
 
-    const newNode = await this.update(newNodes, { doNotPushHistory });
+    const newNode = await this.update(newNodes, { doNotPushHistory, historyDescription, historySource });
 
     if (!doNotSelect) {
       if (newNodes.length > 1) {
@@ -919,7 +950,10 @@ class Editor extends BaseService {
    * @param options 可选配置
    * @param options.doNotPushHistory 是否不写入历史记录（默认 false）
    */
-  public async moveLayer(offset: number | LayerOffset, { doNotPushHistory = false }: DslOpOptions = {}): Promise<void> {
+  public async moveLayer(
+    offset: number | LayerOffset,
+    { doNotPushHistory = false, historyDescription, historySource }: DslOpOptions = {},
+  ): Promise<void> {
     this.captureSelectionBeforeOp();
 
     const root = this.get('root');
@@ -960,10 +994,15 @@ class Editor extends BaseService {
       const pageForOp = this.getNodeInfo(node.id, false).page;
       this.pushOpHistory(
         'update',
+
         {
-          updatedItems: [{ oldNode: oldParent, newNode: cloneDeep(toRaw(parent)) }],
+          extra: {
+            updatedItems: [{ oldNode: oldParent, newNode: cloneDeep(toRaw(parent)) }],
+          },
+          pageData: { name: pageForOp?.name || '', id: pageForOp!.id },
+          historyDescription,
+          source: historySource,
         },
-        { name: pageForOp?.name || '', id: pageForOp!.id },
       );
     } else {
       this.selectionBeforeOp = null;
@@ -989,7 +1028,13 @@ class Editor extends BaseService {
   public async moveToContainer(
     config: MNode | MNode[],
     targetId: Id,
-    { doNotSelect = false, doNotSwitchPage = false, doNotPushHistory = false }: DslOpOptions = {},
+    {
+      doNotSelect = false,
+      doNotSwitchPage = false,
+      doNotPushHistory = false,
+      historyDescription,
+      historySource,
+    }: DslOpOptions = {},
   ): Promise<MNode | MNode[]> {
     const isBatch = Array.isArray(config);
     const configs = (isBatch ? config : [config]).filter((item) => !(isPage(item) || isPageFragment(item)));
@@ -1052,7 +1097,12 @@ class Editor extends BaseService {
         newNode: cloneDeep(toRaw(this.getNodeById(id, false))) as MNode,
       }));
       const historyPage = moves[0].pageForOp ?? { name: '', id: target.id };
-      this.pushOpHistory('update', { updatedItems }, historyPage);
+      this.pushOpHistory('update', {
+        extra: { updatedItems },
+        pageData: historyPage,
+        historyDescription,
+        source: historySource,
+      });
     } else {
       this.selectionBeforeOp = null;
     }
@@ -1064,7 +1114,7 @@ class Editor extends BaseService {
     config: MNode | MNode[],
     targetParent: MContainer,
     targetIndex: number,
-    { doNotPushHistory = false }: DslOpOptions = {},
+    { doNotPushHistory = false, historyDescription, historySource }: DslOpOptions = {},
   ) {
     this.captureSelectionBeforeOp();
 
@@ -1127,7 +1177,12 @@ class Editor extends BaseService {
     }
     if (!doNotPushHistory) {
       const pageForOp = this.getNodeInfo(configs[0].id, false).page;
-      this.pushOpHistory('update', { updatedItems }, { name: pageForOp?.name || '', id: pageForOp!.id });
+      this.pushOpHistory('update', {
+        extra: { updatedItems },
+        pageData: { name: pageForOp?.name || '', id: pageForOp!.id },
+        historyDescription,
+        source: historySource,
+      });
     } else {
       this.selectionBeforeOp = null;
     }
@@ -1184,6 +1239,12 @@ class Editor extends BaseService {
     const root = this.get('root');
     if (!root) return null;
 
+    // 更新类步骤必须带 changeRecords 才支持回滚：缺失时只能整节点替换，会冲掉后续无关变更，故不支持。
+    if (step.opType === 'update') {
+      const items = step.updatedItems ?? [];
+      if (!items.length || !items.every((item) => item.changeRecords?.length)) return null;
+    }
+
     // 反向应用产生的新 step 由内部 pushOpHistory 触发 history `change` 事件，监听一次以拿到引用。
     let revertedStep: StepValue | null = null;
     const captureRevert = (s: StepValue) => {
@@ -1193,7 +1254,7 @@ class Editor extends BaseService {
 
     const historyDescription = `回滚 #${index + 1}: ${describeStepForRevert(step)}`;
     // revert 走 public add/remove/update，让操作以一条普通新 step 入栈；不要切换选区与页面，避免打断用户。
-    const opts = { doNotSelect: true, doNotSwitchPage: true, historyDescription } as const;
+    const opts = { doNotSelect: true, doNotSwitchPage: true, historyDescription, historySource: 'rollback' } as const;
 
     try {
       switch (step.opType) {
@@ -1241,7 +1302,7 @@ class Editor extends BaseService {
             return cloneDeep(oldNode);
           });
           if (configs.length) {
-            await this.update(configs, { historyDescription });
+            await this.update(configs, { historyDescription, historySource: 'rollback' });
           }
           break;
         }
@@ -1285,14 +1346,21 @@ class Editor extends BaseService {
     return cursor;
   }
 
-  public async move(left: number, top: number, { doNotPushHistory = false }: DslOpOptions = {}) {
+  public async move(
+    left: number,
+    top: number,
+    { doNotPushHistory = false, historyDescription, historySource }: DslOpOptions = {},
+  ) {
     const node = toRaw(this.get('node'));
     if (!node || isPage(node)) return;
 
     const newStyle = calcMoveStyle(node.style || {}, left, top);
     if (!newStyle) return;
 
-    await this.update({ id: node.id, type: node.type, style: newStyle }, { doNotPushHistory });
+    await this.update(
+      { id: node.id, type: node.type, style: newStyle },
+      { doNotPushHistory, historyDescription, historySource },
+    );
   }
 
   public resetState() {
@@ -1350,9 +1418,17 @@ class Editor extends BaseService {
 
   private pushOpHistory(
     opType: HistoryOpType,
-    extra: Partial<StepValue>,
-    pageData: { name: string; id: Id },
-    historyDescription?: string,
+    {
+      extra,
+      pageData,
+      historyDescription,
+      source,
+    }: {
+      extra: Partial<StepValue>;
+      pageData: { name: string; id: Id };
+      historyDescription?: string;
+      source?: HistoryOpSource;
+    },
   ) {
     const step: StepValue = {
       data: pageData,
@@ -1363,6 +1439,7 @@ class Editor extends BaseService {
       ...extra,
     };
     if (historyDescription) step.historyDescription = historyDescription;
+    if (source) step.source = source;
     // 显式按 step.data.id 入栈：跨页操作（如 moveToContainer 从源页搬到目标页）
     // 必须落到正确的页面栈，否则会把记录错误地推到当前活动页 / 操作发起页。
     historyService.push(step, pageData.id);

package/src/services/history.ts

@@ -27,6 +27,7 @@ import type {
   CodeBlockStepValue,
   DataSourceHistoryGroup,
   DataSourceStepValue,
+  HistoryOpSource,
   HistoryState,
   PageHistoryGroup,
   PageHistoryStepEntry,
@@ -254,6 +255,7 @@ class History extends BaseService {
   public push(state: StepValue, pageId?: Id): StepValue | null {
     const undoRedo = this.getUndoRedo(pageId);
     if (!undoRedo) return null;
+    if (state.timestamp === undefined) state.timestamp = Date.now();
     undoRedo.pushElement(state);
     // 仅当推入的是当前活动页时才需要刷新 canUndo/canRedo —— 其它页栈对当前 UI 状态没影响。
     if (pageId === undefined || `${pageId}` === `${this.state.pageId}`) {
@@ -279,6 +281,8 @@ class History extends BaseService {
       changeRecords?: ChangeRecord[];
       /** 可选的人类可读描述（如「修改按钮颜色」），仅用于历史面板展示。 */
       historyDescription?: string;
+      /** 可选的操作途径（配置面板 / 菜单 / 接口等），仅用于历史面板展示与埋点。 */
+      source?: HistoryOpSource;
     },
   ): CodeBlockStepValue | null {
     if (!codeBlockId) return null;
@@ -289,6 +293,8 @@ class History extends BaseService {
       newContent: payload.newContent ? cloneDeep(payload.newContent) : null,
       changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : undefined,
       historyDescription: payload.historyDescription,
+      source: payload.source,
+      timestamp: Date.now(),
     };
 
     this.getCodeBlockUndoRedo(codeBlockId).pushElement(step);
@@ -308,6 +314,8 @@ class History extends BaseService {
       changeRecords?: ChangeRecord[];
       /** 可选的人类可读描述，仅用于历史面板展示。 */
       historyDescription?: string;
+      /** 可选的操作途径（配置面板 / 菜单 / 接口等），仅用于历史面板展示与埋点。 */
+      source?: HistoryOpSource;
     },
   ): DataSourceStepValue | null {
     if (!dataSourceId) return null;
@@ -318,6 +326,8 @@ class History extends BaseService {
       newSchema: payload.newSchema ? cloneDeep(payload.newSchema) : null,
       changeRecords: payload.changeRecords?.length ? cloneDeep(payload.changeRecords) : undefined,
       historyDescription: payload.historyDescription,
+      source: payload.source,
+      timestamp: Date.now(),
     };
 
     this.getDataSourceUndoRedo(dataSourceId).pushElement(step);

package/src/services/keybinding.ts

@@ -20,7 +20,7 @@ class Keybinding extends BaseService {
       const nodes = editorService.get('nodes');
 
       if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
-      editorService.remove(nodes);
+      editorService.remove(nodes, { historySource: 'shortcut' });
     },
     [KeyBindingCommand.COPY_NODE]: () => {
       const nodes = editorService.get('nodes');
@@ -31,11 +31,11 @@ class Keybinding extends BaseService {
 
       if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.copy(nodes);
-      editorService.remove(nodes);
+      editorService.remove(nodes, { historySource: 'shortcut' });
     },
     [KeyBindingCommand.PASTE_NODE]: () => {
       const nodes = editorService.get('nodes');
-      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+      nodes && editorService.paste({ offsetX: 10, offsetY: 10 }, undefined, { historySource: 'shortcut' });
     },
     [KeyBindingCommand.UNDO]: () => {
       editorService.undo();

package/src/theme/history-list-panel.scss

@@ -13,7 +13,7 @@
     position: absolute;
     top: 4px;
     right: 4px;
-    z-index: 1;
+    z-index: 2;
     display: flex;
     align-items: center;
     height: 40px;
@@ -125,19 +125,19 @@
     &.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;
 
       // 卡片本体已经有背景色，hover 状态以更深的同色提示交互
       &:hover {
-        background-color: rgba(144, 105, 219, 0.1);
+        background-color: rgba(47, 84, 235, 0.1);
       }
 
       .m-editor-history-list-group-head {
         font-weight: 600;
-        color: #5b3fa5;
+        color: #1d39c4;
       }
 
       // 已撤销态：整张卡片去色
@@ -169,7 +169,7 @@
     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);
 
     li {
       display: flex;
@@ -185,7 +185,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: rgba(144, 105, 219, 0.1);
+          background-color: rgba(47, 84, 235, 0.1);
         }
       }
 
@@ -222,6 +222,16 @@
     white-space: nowrap;
   }
 
+  // 操作时间：弱化展示，紧贴在描述之后、各操作按钮之前。
+  .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-item-op {
     flex: 0 0 auto;
     padding: 0 6px;
@@ -240,7 +250,7 @@
     }
 
     &.op-update {
-      background-color: #409eff;
+      background-color: #e6a23c;
     }
 
     &.op-initial {
@@ -271,6 +281,20 @@
     white-space: nowrap;
   }
 
+  // 「操作途径」徽标：浅灰描边胶囊，弱化展示来源（画布 / 图层 / 配置面板…），不抢占描述焦点。
+  .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; // 防止被合并组头部的粗体继承
+  }
+
   // 「合并 N 步」徽标：紫色实心胶囊，与合并组卡片色系一致，醒目区分单步条目。
   .m-editor-history-list-item-merge {
     flex: 0 0 auto;
@@ -279,7 +303,7 @@
     font-size: 10px;
     line-height: 16px;
     color: #fff;
-    background-color: #9069db;
+    background-color: #2f54eb;
     font-weight: 500;
     letter-spacing: 0.2px;
   }
@@ -300,21 +324,39 @@
     }
   }
 
+  // 「跳转」按钮：将历史游标移动到该 step，替代原先点击整行跳转的交互。
+  // 使用与组卡片一致的紫色色系，与「查看差异」「回滚」区分开。
+  .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;
+
+    &:hover {
+      background-color: rgba(96, 98, 102, 0.18);
+    }
+  }
+
   // 「回滚」按钮：类 git revert，把目标 step 反向应用一次作为新提交。
-  // 使用与「查看差异」不同的色调（橙黄），用来区分"可逆操作"与"只读对比"。
+  // 使用红色色调，强调其为"破坏性/可逆操作"，与「查看差异」「跳转」区分开。
   .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;
 
     &:hover {
-      background-color: rgba(230, 162, 60, 0.25);
+      background-color: rgba(245, 108, 108, 0.25);
     }
   }
 
@@ -369,6 +411,17 @@
     flex-direction: column;
   }
 
+  .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-header {
     display: flex;
     align-items: center;

package/src/theme/props-panel.scss

@@ -58,7 +58,7 @@
     position: absolute;
     right: 15px;
     bottom: 15px;
-    z-index: 30;
+    z-index: 32;
     opacity: 0.5;
 
     &:hover {
@@ -70,7 +70,7 @@
     position: absolute;
     right: 15px;
     bottom: 60px;
-    z-index: 30;
+    z-index: 31;
     opacity: 0.5;
 
     &:hover {
@@ -82,7 +82,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 10;
+    z-index: 31;
   }
 
   .m-editor-resizer {