一、功能背景与需求分析

在低代码可视化开发场景中，用户通过拖拽组件构建页面布局时，常因误操作或需求变更需要撤销/重做楼层调整。该功能需满足以下核心需求：

1. 原子性操作：支持单步或多步连续操作的精准回退
2. 状态一致性：确保撤销后组件属性、关联数据完整恢复
3. 性能优化：处理复杂页面时保持操作流畅性
4. 扩展性设计：兼容新增组件类型和交互逻辑

典型场景示例：

// 伪代码：用户操作序列记录
const operationHistory = [
  { type: 'ADD_FLOOR', payload: { id: 'floor1', components: [...] } },
  { type: 'MOVE_FLOOR', payload: { from: 0, to: 2 } },
  { type: 'DELETE_COMPONENT', payload: { floorId: 'floor1', compId: 'btn1' } }
]

二、核心架构设计

1. 状态管理方案

采用分层状态树结构：

RootState
├── floors (Map<floorId, FloorState>)
│   ├── components (Map<compId, ComponentState>)
│   └── layout (GridConfig)
└── undoStack (Command[])

关键实现点：

• 使用不可变数据结构（如Immutable.js）确保状态变更可追踪
• 每个楼层状态包含完整组件树和布局配置
• 操作记录包含时间戳和版本标识

2. 命令模式实现

interface Command {
  execute(): void;
  undo(): void;
  getSnapshot(): any;
}
class MoveFloorCommand implements Command {
  constructor(
    private floorId: string,
    private oldIndex: number,
    private newIndex: number
  ) {}
  execute() {
    // 更新楼层顺序逻辑
  }
  undo() {
    // 恢复原始顺序
  }
}

优势分析：

• 解耦操作执行与状态管理
• 支持命令组合（MacroCommand）
• 便于扩展新操作类型

三、关键技术实现

1. 撤销重做栈管理

class HistoryManager {
  constructor(maxDepth = 50) {
    this.undoStack = [];
    this.redoStack = [];
    this.maxDepth = maxDepth;
  }
  executeCommand(command) {
    command.execute();
    this.undoStack.push(command);
    this.redoStack = []; // 清空重做栈
    if (this.undoStack.length > this.maxDepth) {
      this.undoStack.shift();
    }
  }
  undo() {
    if (this.undoStack.length === 0) return;
    const command = this.undoStack.pop();
    command.undo();
    this.redoStack.push(command);
  }
}

2. 状态快照策略

采用差异快照技术：

def generate_snapshot(prev_state, current_state):
    diff = {}
    # 比较楼层顺序变化
    if prev_state['floorsOrder'] != current_state['floorsOrder']:
        diff['floorsOrder'] = current_state['floorsOrder']
    # 比较组件属性变更
    for comp_id in current_state['components']:
        if not deep_equal(
            prev_state['components'][comp_id],
            current_state['components'][comp_id]
        ):
            diff['components'][comp_id] = current_state['components'][comp_id]
    return diff if diff else None

3. 数据持久化方案

-- 操作日志表设计
CREATE TABLE operation_logs (
  id VARCHAR(36) PRIMARY KEY,
  session_id VARCHAR(36) NOT NULL,
  operation_type VARCHAR(50) NOT NULL,
  snapshot TEXT, -- JSON格式状态快照
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  is_undo BOOLEAN DEFAULT FALSE
);

四、性能优化实践

1. 批量操作处理：

   • 合并连续移动操作（100ms内相同类型的操作）
   • 使用Web Worker处理复杂状态计算

2. 内存管理：

   // 使用WeakMap存储组件引用
   const componentRefs = new WeakMap();
   // 定期清理未使用的状态
   function gcUnusedStates(activeFloorIds) {
     Object.keys(stateCache).forEach(id => {
       if (!activeFloorIds.includes(id)) {
         delete stateCache[id];
       }
     });
   }

3. 差异渲染优化：

   • 实现shouldComponentUpdate深度比较
   • 使用React.memo优化组件渲染

五、最佳实践建议

1. 操作粒度控制：

   • 基础操作：组件增删/属性修改（细粒度）
   • 组合操作：布局调整（中粒度）
   • 页面模板切换（粗粒度）

2. 异常处理机制：

   try {
     historyManager.executeCommand(new DeleteFloorCommand(floorId));
   } catch (error) {
     // 回滚到操作前状态
     const lastState = getLastValidState();
     restoreState(lastState);
     throw new OperationError('Floor deletion failed', { cause: error });
   }

3. 测试策略：

   • 单元测试：每个Command类的execute/undo方法
   • 集成测试：操作序列的正确性验证
   • 压力测试：1000+操作步骤的撤销重做性能

六、扩展性设计

1. 插件化架构：

   interface UndoRedoPlugin {
     beforeExecute?(command: Command): void;
     afterExecute?(command: Command): void;
     canUndo?(command: Command): boolean;
   }

2. 多版本兼容：

   • 状态快照包含schema版本号
   • 实现版本迁移函数（migrateStateV1ToV2）

3. 协同编辑支持：

   • 操作冲突检测（基于OT算法）
   • 实时同步撤销重做栈

该功能实现通过严谨的架构设计和性能优化，在保持操作流畅性的同时，确保了复杂页面状态的可逆性。实际开发中建议结合具体业务场景，在操作粒度、快照策略和持久化方案上进行针对性调整，以达到最佳的用户体验和系统性能平衡。