Yaak批量操作撤销历史：多步回退的操作记录管理
项目地址: https://gitcode.com/GitHub_Trending/ya/yaak 在API开发与测试过程中，频繁的请求发送、参数调整和响应处理往往会产生大量操作记录。Yaak作为直观的桌面API客户端，不仅支持REST、GraphQL、WebSockets等多种协议，还提供了完善的操作历史管理功能。本文将详细介绍如何通过Yaak的批量操作撤销功能，高效管理多步操作记录，提升工作流的容错性和可追溯性。
操作历史管理核心模块
Yaak的操作历史管理功能主要通过以下模块实现：
1. 历史记录存储与删除
操作历史数据存储在工作区上下文（Workspace Context）中，支持按协议类型分类管理。核心删除功能由src-web/hooks/useDeleteSendHistory.tsx实现，该钩子提供了批量清除HTTP、gRPC和WebSocket历史记录的能力：
// 历史记录删除逻辑
await invokeCmd('cmd_delete_send_history', { workspaceId });
调用此命令后，系统会清除指定工作区的所有发送历史，并通过状态管理库（Jotai）更新UI显示。
2. 编辑器操作历史
对于请求参数编辑等细粒度操作，Yaak集成了CodeMirror编辑器的历史管理功能。在src-web/components/core/Editor/extensions.ts中配置了历史记录扩展：
import { history, historyKeymap } from '@codemirror/commands';
// 编辑器扩展配置
export const createEditorExtensions = () => [
history(), // 启用历史记录
keymap.of([...historyKeymap, ...completionKeymap]), // 绑定Ctrl+Z/Ctrl+Y快捷键
];
此配置为所有代码编辑器提供了基础的撤销/重做能力，支持单步操作回退。
多步回退的实现逻辑
Yaak采用分层历史管理架构，将操作记录分为以下三个层级：
1. 协议层历史
- HTTP请求历史：存储在src-web/hooks/useDeleteSendHistory.tsx管理的httpResponsesAtom状态中
- gRPC连接历史：通过grpcConnectionsAtom状态跟踪
- WebSocket连接历史：通过websocketConnectionsAtom状态跟踪
这些历史记录以数组形式组织，支持批量删除但暂不支持单步撤销，需通过"Clear Send History"对话框执行：
// 历史记录类型统计
const labels = [
httpResponses.length > 0 ? pluralizeCount('Http Response', httpResponses.length) : null,
grpcConnections.length > 0 ? pluralizeCount('Grpc Connection', grpcConnections.length) : null,
websocketConnections.length > 0 ? pluralizeCount('WebSocket Connection', websocketConnections.length) : null,
].filter(Boolean);
2. 编辑器操作历史
CodeMirror的history扩展维护了独立的操作栈，支持文本编辑的精细撤销。其核心原理是通过维护两个栈（undo stack和redo stack）记录文档变更，每次编辑操作都会被压入undo栈：
// CodeMirror历史记录工作原理示意
class History {
undoStack: Transaction[];
redoStack: Transaction[];
undo() {
const transaction = this.undoStack.pop();
this.redoStack.push(transaction);
return transaction;
}
redo() {
const transaction = this.redoStack.pop();
this.undoStack.push(transaction);
return transaction;
}
}
实际操作指南
清除全部发送历史
-
在工作区菜单中选择"Delete Send History"
-
确认对话框将显示待删除的历史记录类型：
// 确认对话框内容生成 description: <>Delete {labels.join(' and ')}?</> -
点击确认后执行批量删除
编辑器单步撤销/重做
使用键盘快捷键操作当前编辑区域的历史记录：
- 撤销：
Ctrl+Z（Windows/Linux）或Cmd+Z（Mac） - 重做：
Ctrl+Y（Windows/Linux）或Cmd+Shift+Z（Mac）
功能扩展建议
基于现有架构，可通过以下方式增强多步回退能力：
- 实现操作栈持久化：将历史记录存储到src-web/lib/keyValueStore.ts，支持跨会话恢复
- 添加操作历史面板：开发独立的历史记录浏览组件，类似src-web/components/RecentHttpResponsesDropdown.tsx的扩展版本
- 支持选择性撤销：在历史记录列表中允许单独回退特定操作
总结
Yaak通过分层设计实现了操作历史的管理，结合命令系统和状态管理库，提供了基础的批量删除和编辑器撤销功能。虽然目前暂未实现完整的多步回退栈，但现有架构已为功能扩展奠定了基础。用户可通过清除历史记录命令和编辑器快捷键，有效管理API测试过程中的操作记录。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
