简介本资源是一套面向C桌面应用开发者的撤销/重做Undo/Redo功能完整实现方案适用于文本编辑器、富文本处理工具等需状态回溯能力的中高级项目。压缩包共61个文件含28个.cpp源文件如UndoManager.cpp、RETypingAction.cpp、REDropAction.cpp等承载核心操作封装与状态管理逻辑、31个.h头文件定义Action基类、视图接口、文本范围与样式结构等另含1个说明文档和1个资源脚本整体仅70KB轻量但结构严谨。目前已有155人学习下载适合希望深入理解命令模式、栈式历史管理、细粒度操作建模打字、替换、拖放、插入对象等的开发者。代码采用模块化设计支持RichEdit与BetterEdit双视图体系涵盖多步菜单交互MultipleUndoRedoMenu.cpp与变更日志记录Change Log.txt可直接集成或作为教学范例剖析撤销系统架构与事件协同机制。1. Undo Manager 是什么一个被低估的“操作后悔药”不是 UI 组件而是状态变更的底层契约你写了个表单编辑器用户改了 5 行数据、删了 2 个字段、又拖拽重排了顺序——然后猛按 CtrlZ结果只撤回了最后一次拖拽前面的修改全丢了或者更糟撤回后界面没刷新但内部状态已回滚下一次提交直接把脏数据发了出去。这不是前端框架的锅是 Undo Manager 没立住契约。Undo Manager 不是某个 React 库里的 Hook也不是 Vue 的插件它是一套对状态变更行为建模、封装、可追溯、可原子回滚的通用机制。它的核心价值不在“能撤销”而在“知道谁在什么时候以什么方式改了什么并且能精准还原到那个瞬间”。它适用于任何需要操作历史、多级回退、协同编辑、调试回放或状态快照的场景——从代码编辑器、图形设计工具到工业 HMI 系统、低代码平台的逻辑编排画布。如果你正在手写history.push()或靠useState 数组堆栈硬扛撤销逻辑那说明你还没真正接入 Undo Manager 的抽象层它不关心 UI 怎么渲染只负责把“变更”变成可序列化、可比较、可执行的 Operation 对象。下面我们就从零搭起这个“后悔药”的骨架不依赖任何框架封装直击底层实现逻辑。2. 从零实现一个最小可用 Undo Manager用 Operation 建模变更用 Stack 管理历史Undo Manager 的本质是把“用户的一次操作”翻译成一段可逆的、带元信息的状态变更指令。它不能只存旧值和新值太粗暴也不能只存函数引用不可序列化、难调试。我们采用经典的Operation 模式每个操作是一个对象包含execute()正向执行、undo()反向回滚、redo()重做三个方法以及timestamp、label、source等元数据。所有 Operation 实例由一个双栈undoStack redoStack统一调度。2.1 定义 Operation 接口与基础实现类我们先定义 Operation 的 TypeScript 接口再给出一个通用基类BaseOperation它提供默认的redo()实现即再次调用execute()并强制子类实现execute()和undo()// types.ts export interface Operation { execute(): void; undo(): void; redo(): void; timestamp: number; label: string; source?: string; // 标识操作来源如 keyboard | mouse | api } // base-operation.ts export abstract class BaseOperation implements Operation { timestamp Date.now(); abstract execute(): void; abstract undo(): void; redo(): void { this.execute(); // 默认重做 再执行一次 } }提示redo()默认复用execute()是常见做法但某些场景如异步操作需重载。此处保持简洁后续会说明如何扩展。2.2 构建 UndoManager 核心类双栈调度与边界控制UndoManager类不持有任何业务状态只管理 Operation 实例的生命周期。它维护两个数组栈undoStack待撤销的操作和redoStack已撤销、待重做的操作。关键约束有三最大历史深度限制避免内存爆炸合并连续操作如连打 10 个字符应合并为一个“输入文本”操作而非 10 个禁止空操作入栈execute()后若状态未变不记录。// undo-manager.ts export class UndoManager { private undoStack: Operation[] []; private redoStack: Operation[] []; private maxHistory 200; constructor(options: { maxHistory?: number } {}) { this.maxHistory options.maxHistory ?? 200; } // 执行操作先运行再入 undoStack清空 redoStack execute(op: Operation): void { op.execute(); this.undoStack.push(op); this.redoStack []; // 一旦新操作发生重做历史失效 this.trimStacks(); } // 撤销弹出 undoStack 顶部执行 undo()推入 redoStack undo(): void { if (this.undoStack.length 0) return; const op this.undoStack.pop()!; op.undo(); this.redoStack.push(op); } // 重做弹出 redoStack 顶部执行 redo()推入 undoStack redo(): void { if (this.redoStack.length 0) return; const op this.redoStack.pop()!; op.redo(); this.undoStack.push(op); } // 合并最近操作用于连续输入等场景 mergeLast(operation: Operation): void { if (this.undoStack.length 0) return; const last this.undoStack[this.undoStack.length - 1]; // 此处需业务判断是否可合并例如同 label、同 source、时间间隔 300ms if ( last.label operation.label last.source operation.source Date.now() - last.timestamp 300 ) { // 调用业务自定义的 merge 方法需 Operation 子类实现 if (typeof (last as any).merge function) { (last as any).merge(operation); } } } // 清理栈保持长度不超过 maxHistory private trimStacks(): void { if (this.undoStack.length this.maxHistory) { this.undoStack this.undoStack.slice(-this.maxHistory); } if (this.redoStack.length this.maxHistory) { this.redoStack this.redoStack.slice(-this.maxHistory); } } // 获取当前可撤销/重做数量供 UI 显示按钮状态 get canUndo(): boolean { return this.undoStack.length 0; } get canRedo(): boolean { return this.redoStack.length 0; } get historySize(): number { return this.undoStack.length; } }这段代码实现了 Undo Manager 的骨架。注意mergeLast()并未强制要求所有 Operation 都实现merge()而是用typeof安全检查——这是为了保持基类轻量把合并逻辑下沉到具体业务 Operation 中。trimStacks()在每次execute()后调用确保内存可控canUndo/canRedo是典型的 UI 友好属性方便绑定按钮禁用状态。2.3 实战为表单字段创建 TextChangeOperation现在我们写一个真实可用的 Operation 子类TextChangeOperation用于处理输入框内容变更。它需记录字段名、旧值、新值并支持合并连续输入时将多次setValue(a) → setValue(ab) → setValue(abc)合并为一次setValue(abc)。// operations/text-change-operation.ts import { BaseOperation } from ../base-operation; export interface TextChangePayload { field: string; oldValue: string; newValue: string; } export class TextChangeOperation extends BaseOperation { constructor( public payload: TextChangePayload, public label 修改文本, public source keyboard ) { super(); } execute(): void { // 注意execute 不直接改 DOM而是调用业务 setter // 这里假设有一个全局 store 或 context 提供 updateField 方法 updateField(this.payload.field, this.payload.newValue); } undo(): void { updateField(this.payload.field, this.payload.oldValue); } // 合并逻辑仅当同字段、且新值以旧值开头时扩展 newValue merge(other: TextChangeOperation): void { if (this.payload.field ! other.payload.field) return; if (other.payload.newValue.startsWith(this.payload.newValue)) { this.payload.newValue other.payload.newValue; this.timestamp other.timestamp; // 更新时间戳为最新 } } } // 模拟业务 setter实际项目中应注入 function updateField(field: string, value: string): void { // 例如document.getElementById(field)?.value value; // 或 dispatch({ type: UPDATE_FIELD, payload: { field, value } }); }逻辑说明TextChangeOperation的execute()和undo()都调用同一个updateField()但传入不同值。这保证了正向/反向行为完全对称。merge()方法判断other.newValue是否以当前newValue开头——这是连续输入的典型特征a → ab → abc满足则更新newValue和timestamp实现视觉上的“一次输入”效果。参数说明field是字段唯一标识如user_nameoldValue/newValue是字符串快照label和source用于 UI 展示和审计。3. 与 React 深度集成用自定义 Hook 封装状态联动避免 useEffect 嵌套陷阱Undo Manager 本身是框架无关的但落地时必须与 UI 框架的状态更新机制对齐。在 React 中常见错误是在useEffect里监听输入事件并execute()但execute()触发的updateField()又导致组件重渲染进而再次触发useEffect形成无限循环。正确解法是分离“操作捕获”与“状态更新”用 ref 缓存当前值用useCallback固化操作创建逻辑让 UndoManager 成为纯命令总线。3.1 创建 useUndoableState Hook接管 useState 并注入 Undo 能力我们不替换useState而是在其之上叠加一层“可撤销状态”。该 Hook 返回[value, setValue, undo, redo, canUndo, canRedo]其中setValue是增强版自动记录 Operation。// hooks/use-undoable-state.ts import { useState, useRef, useCallback } from react; import { UndoManager } from ../undo-manager; import { TextChangeOperation } from ../operations/text-change-operation; export function useUndoableStateT( initialValue: T, options: { manager?: UndoManager; maxHistory?: number } {} ) { const [value, setValue] useStateT(initialValue); const currentValueRef useRefT(initialValue); const manager options.manager || new UndoManager({ maxHistory: options.maxHistory }); // 增强版 setValue生成 Operation 并执行 const undoableSetValue useCallback( (newValue: T | ((prev: T) T), source: string user) { const resolvedValue typeof newValue function ? (newValue as (prev: T) T)(currentValueRef.current) : newValue; // 仅当值真正改变时才记录操作防抖 避免空操作 if (Object.is(resolvedValue, currentValueRef.current)) return; const payload { field: root, // 单值场景用 root 标识 oldValue: currentValueRef.current as unknown as string, newValue: resolvedValue as unknown as string, }; const op new TextChangeOperation(payload, 设置值, source); manager.execute(op); // 同步更新本地 ref 和 state currentValueRef.current resolvedValue; setValue(resolvedValue); }, [manager] ); // 撤销/重做方法直接代理给 manager const undo useCallback(() manager.undo(), [manager]); const redo useCallback(() manager.redo(), [manager]); return [ value, undoableSetValue, undo, redo, manager.canUndo, manager.canRedo, ] as const; }参数说明initialValue是初始状态options.manager允许复用外部 UndoManager 实例如跨多个表单项共享历史source参数用于区分操作来源键盘输入、API 回填、程序初始化等便于后续审计或条件过滤。关键点在于currentValueRef它始终保存最新值undoableSetValue比较的是 ref 值而非 state 值避免因setState异步性导致的误判。Object.is()用于严格相等判断支持 NaN、Object 等。3.2 在组件中使用一个可撤销的搜索框现在我们写一个真实组件展示如何用useUndoableState构建带撤销能力的输入框// components/SearchInput.tsx import React, { KeyboardEvent } from react; import { useUndoableState } from ../hooks/use-undoable-state; export function SearchInput() { const [query, setQuery, undo, redo, canUndo, canRedo] useUndoableStatestring(); const handleKeyDown (e: KeyboardEventHTMLInputElement) { if (e.key Enter) { // 模拟搜索提交 console.log(Search:, query); // 提交后可选择清空 redoStack防止用户误重做搜索 // manager.redoStack []; } }; return ( div classNamesearch-container input typetext value{query} onChange{(e) setQuery(e.target.value, keyboard)} onKeyDown{handleKeyDown} placeholder输入搜索关键词... / div classNamecontrols button onClick{undo} disabled{!canUndo} 撤销 (CtrlZ) /button button onClick{redo} disabled{!canRedo} 重做 (CtrlY) /button span classNamehistory-count 历史: {canUndo ? ● : ○} {canRedo ? ● : ○} /span /div /div ); }逻辑说明onChange事件中调用setQuery(value, keyboard)自动触发TextChangeOperation创建与执行onKeyDown捕获 Enter 提交此时query是最新值可安全用于 API 调用。按钮disabled属性直连canUndo/canRedoUI 状态与 Manager 内部栈完全同步。这里没有useEffect没有竞态所有状态流转都由setQuery这一个入口驱动。3.3 处理复杂状态用 ObjectChangeOperation 管理嵌套对象单值够用但表单常是对象结构如{ name: , email: }。我们扩展一个ObjectChangeOperation它记录整个对象的深拷贝快照并支持按路径更新// operations/object-change-operation.ts import { BaseOperation } from ../base-operation; import { deepClone, setByPath, getByPath } from ../utils; export interface ObjectChangePayload { path: string; // 如 user.profile.name oldValue: unknown; newValue: unknown; snapshotBefore: Recordstring, unknown; snapshotAfter: Recordstring, unknown; } export class ObjectChangeOperation extends BaseOperation { constructor( public payload: ObjectChangePayload, public label 修改对象字段, public source user ) { super(); } execute(): void { // 更新全局状态树假设存在 updateStateTree 函数 updateStateTree(this.payload.path, this.payload.newValue); } undo(): void { // 恢复整个快照更安全避免路径更新遗漏 restoreStateTree(this.payload.snapshotBefore); } merge(other: ObjectChangeOperation): void { // 同路径、时间相近则更新 newValue 和快照 if ( this.payload.path other.payload.path Date.now() - this.timestamp 300 ) { this.payload.newValue other.payload.newValue; this.payload.snapshotAfter other.payload.snapshotAfter; this.timestamp other.timestamp; } } } // 辅助函数简化版 function updateStateTree(path: string, value: unknown): void { // 实际项目中对接 Zustand / Redux / Jotai 等 } function restoreStateTree(snapshot: Recordstring, unknown): void { // 用 snapshot 替换整个状态树 }使用提示ObjectChangeOperation通过snapshotBefore/After记录完整状态比单字段更新更鲁棒尤其当字段间有联动计算时。path支持点号分隔user.address.citysetByPath和getByPath是标准工具函数。合并逻辑同样基于路径和时间窗口确保同一字段的连续修改被聚合。4. 避坑指南Undo Manager 实战中 4 个高频翻车点与血泪修复方案Undo Manager 看似简单但落地时极易因状态耦合、时机错位、边界遗漏而集体翻车。以下是某跨平台低代码平台在灰度阶段踩过的 4 个真实坑每条都附带可立即复用的修复代码。4.1 现象撤销后 UI 未更新但内部状态已回滚 → “界面黑匣子”原因undo()执行了op.undo()但该方法只修改了业务状态如 Redux store未触发 React 组件重新渲染。常见于op.undo()直接修改了ref.current或全局变量却忘了通知 UI。解决所有undo()和execute()方法内必须显式触发状态更新。不要依赖“状态变了 UI 自动更新”的幻觉。修复方案是在undo()中调用setValue()或setState就像execute()一样// ❌ 错误只改 ref不触发渲染 undo(): void { this.payload.fieldRef.current this.payload.oldValue; // UI 不知道 } // ✅ 正确调用状态 setter保证 UI 同步 undo(): void { // 假设我们有注入的 setter this.setter(this.payload.field, this.payload.oldValue); }血泪经验在BaseOperation基类中预留setter属性构造时传入强制子类使用统一更新通道。避免任何 Operation 直接操作 DOM 或 ref。4.2 现象连续快速输入如粘贴长文本导致撤销粒度太细一次 CtrlZ 只删一个字符原因TextChangeOperation的合并阈值300ms在粘贴场景下失效——粘贴是单次事件但内部触发了多次input事件每次input都生成独立 Operation且时间戳相同无法合并。解决增加“批量操作标记”。在粘贴开始前用manager.beginBatch(paste)标记批次结束时manager.endBatch()期间所有 Operation 自动合并为一个// undo-manager.ts 新增方法 beginBatch(label: string): void { this.batchLabel label; this.batchStartTimestamp Date.now(); } endBatch(): void { if (!this.batchLabel) return; // 将 batch 期间所有操作合并为一个 CompositeOperation const batchOps this.undoStack.splice(-this.batchOpCount); if (batchOps.length 0) { const composite new CompositeOperation(batchOps, this.batchLabel); this.undoStack.push(composite); } this.batchLabel undefined; this.batchOpCount 0; }然后在输入框onPaste事件中调用input onPaste{() { manager.beginBatch(paste); setTimeout(() manager.endBatch(), 0); // 微任务等待 input 事件完成 }} /提示setTimeout(..., 0)确保endBatch()在所有input事件处理完毕后执行捕获全部操作。4.3 现象异步操作如 API 保存后撤销状态回滚但服务器数据未回退 → “数据不一致”原因execute()中调用了saveToServer()但undo()只回滚本地状态未调用revertOnServer()。Undo Manager 默认不处理副作用需业务显式声明。解决扩展 Operation 接口增加asyncUndo()方法并在UndoManager.undo()中优先调用它export interface AsyncOperation extends Operation { asyncUndo?(): Promisevoid; // 可选仅异步操作需实现 } // 在 UndoManager.undo() 中 async undo(): Promisevoid { if (this.undoStack.length 0) return; const op this.undoStack.pop()!; if (asyncUndo in op typeof op.asyncUndo function) { await op.asyncUndo(); // 等待服务端回滚 } op.undo(); // 再回滚本地 this.redoStack.push(op); }对应地创建ApiSaveOperationclass ApiSaveOperation extends BaseOperation { constructor(public apiCall: () Promisevoid) { super(); } asyncUndo(): Promisevoid { // 调用反向 API如 DELETE /drafts/{id} await fetch(/api/drafts/${this.id}, { method: DELETE }); } execute(): void { this.apiCall(); // 保存 } undo(): void { // 本地回滚如恢复草稿缓存 } }4.4 现象页面刷新后 Undo 历史丢失用户抱怨“刚做的修改全没了”原因UndoManager 实例是内存对象刷新即销毁。需持久化历史栈到localStorage或 IndexedDB。解决在UndoManager构造时加载历史并在每次execute()后自动保存。为防序列化失败只存 Operation 的可序列化部分label,payload,timestamp重建时动态实例化constructor(options: { maxHistory?: number; storageKey?: string; // 如 my-app-undo-history } {}) { super(options); this.storageKey options.storageKey; if (this.storageKey) { this.loadFromStorage(); } } private loadFromStorage(): void { try { const saved localStorage.getItem(this.storageKey); if (saved) { const data JSON.parse(saved); // 重建 Operation 实例需注册 Operation 类型映射 this.undoStack data.undo.map((item: any) this.deserializeOperation(item) ); this.redoStack data.redo.map((item: any) this.deserializeOperation(item) ); } } catch (e) { console.warn(Failed to load undo history, e); } } private saveToStorage(): void { if (!this.storageKey) return; try { const data { undo: this.undoStack.map(op this.serializeOperation(op)), redo: this.redoStack.map(op this.serializeOperation(op)), }; localStorage.setItem(this.storageKey, JSON.stringify(data)); } catch (e) { console.warn(Failed to save undo history, e); } } // 在 execute() 末尾调用 this.saveToStorage();注意serializeOperation需根据 Operation 类型返回纯对象deserializeOperation根据type字段 new 对应类。这是典型的“序列化-反序列化”模式务必测试边缘 case如函数、undefined、Date。5. 进阶技巧用 Operation 快照做状态调试回放把 Undo Manager 变成黑盒分析仪Undo Manager 的最大隐藏价值不是让用户按 CtrlZ而是让你在生产环境回放任意一次用户操作流精准定位 UI Bug。我们把每个 Operation 的execute()和undo()执行前后自动采集状态快照snapshot构建一条可追溯的“状态时间线”。这不需要额外埋点只需在UndoManager.execute()中插入快照逻辑。5.1 在 Operation 执行前后自动采集状态快照我们扩展UndoManager增加captureSnapshot()方法它接受一个stateGetter函数返回当前业务状态并在execute()前后各调用一次// undo-manager.ts export class UndoManager { // ... 其他属性 private snapshots: Array{ timestamp: number; before: unknown; after: unknown; operationLabel: string; } []; constructor(options: { maxHistory?: number; stateGetter?: () unknown; // 业务状态获取函数 } {}) { this.stateGetter options.stateGetter; } execute(op: Operation): void { // 执行前快照 const before this.stateGetter?.() ?? null; op.execute(); // 执行后快照 const after this.stateGetter?.() ?? null; this.snapshots.push({ timestamp: Date.now(), before, after, operationLabel: op.label, }); // 入栈... this.undoStack.push(op); this.redoStack []; this.trimStacks(); } // 获取指定索引的操作及快照用于调试面板 getSnapshotAt(index: number): { op: Operation; snapshot: NonNullabletypeof this.snapshots[number] } | undefined { if (index 0 || index this.snapshots.length) return; return { op: this.undoStack[index], snapshot: this.snapshots[index], }; } }关键点stateGetter是业务方传入的函数例如() store.getState()或() ({ form: formData, errors: validationErrors })。它必须是纯函数无副作用。快照存储为轻量对象before/after是执行前后的状态副本可用于 diff 分析。5.2 构建简易调试面板可视化状态变化链我们写一个 React 组件列出所有历史操作并允许点击任一操作将应用状态“跳转”到该时刻类似 Chrome DevTools 的 replay// components/DebugReplayPanel.tsx import React, { useState, useEffect } from react; import { UndoManager } from ../undo-manager; interface SnapshotItem { timestamp: number; before: unknown; after: unknown; operationLabel: string; } export function DebugReplayPanel({ manager }: { manager: UndoManager }) { const [snapshots, setSnapshots] useStateSnapshotItem[]([]); const [activeIndex, setActiveIndex] useStatenumber | null(null); // 订阅快照更新假设 manager 提供 onSnapshot 事件 useEffect(() { const unsubscribe manager.onSnapshot((snapshot) { setSnapshots(prev [...prev, snapshot]); }); return unsubscribe; }, [manager]); const jumpTo (index: number) { if (index 0 || index snapshots.length) return; const target snapshots[index]; // 这里调用业务 restoreState(target.before) 方法 restoreState(target.before); setActiveIndex(index); }; return ( div classNamedebug-panel h3状态回放面板/h3 div classNametimeline {snapshots.map((snap, i) ( div key{i} className{step ${activeIndex i ? active : }} onClick{() jumpTo(i)} span classNamelabel{snap.operationLabel}/span span classNametime{new Date(snap.timestamp).toLocaleTimeString()}/span div classNamediff {/* 可接入 react-diff-view 显示 before/after 差异 */} {JSON.stringify(snap.before).length 50 ? ${JSON.stringify(snap.before).slice(0, 50)}... : JSON.stringify(snap.before)} → {JSON.stringify(snap.after).length 50 ? ${JSON.stringify(snap.after).slice(0, 50)}... : JSON.stringify(snap.after)} /div /div ))} /div /div ); } function restoreState(state: unknown): void { // 实际项目中调用 store.replaceState(state) 或类似方法 }效果当用户报告“我在第 3 步点击按钮后页面空白”你打开调试面板找到第 3 步点击jumpTo(3)UI 瞬间回到那个时刻你就能看到空白页面并 inspect 元素、查 console。这比看日志快 10 倍。5.3 生产环境安全开关快照功能默认关闭按需启用快照采集有性能开销深拷贝、内存占用绝不能在生产环境默认开启。我们在UndoManager中添加enableSnapshot()方法并用环境变量控制// undo-manager.ts class UndoManager { private isSnapshotEnabled false; enableSnapshot(stateGetter: () unknown): void { // 仅在开发环境或特定 feature flag 下启用 if (process.env.NODE_ENV development || window.DEBUG_UNDO) { this.stateGetter stateGetter; this.isSnapshotEnabled true; } } execute(op: Operation): void { if (this.isSnapshotEnabled this.stateGetter) { // 执行快照逻辑 } // ... 其余逻辑 } }然后在应用入口// main.tsx const manager new UndoManager(); if (process.env.NODE_ENV development) { manager.enableSnapshot(() store.getState()); }最后一句我在线上系统跑了两年 Undo Manager最大的教训是——永远不要相信“操作很简单不用管历史”的想法。哪怕只是一个开关按钮的 toggle一旦用户需要“刚才我关掉的那个现在想打开回来”你就得有一套完整的、可验证的、带快照的 Undo 机制。它不是锦上添花而是交互健壮性的底线。希望帮到你。本文还有配套的精品资源点击获取