操作历史 - Cordova 与 OpenHarmony 混合开发实战-育师

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 模块概述

操作历史模块是MovieTracker应用中用于记录用户操作的功能。系统会记录用户的所有操作，如添加影片、编辑影片、删除影片等。用户可以查看操作历史，了解自己的操作记录，同时可以撤销或重做某些操作。

该模块的主要功能包括：记录操作、查看历史、撤销操作、重做操作、清空历史等。通过Cordova框架与OpenHarmony原生能力的结合，实现了完整的操作历史管理。

操作历史需要处理大量的操作记录，同时需要支持撤销和重做功能。

🔗 完整流程

第一步：操作记录

系统在用户执行操作时自动记录操作信息，包括操作类型、操作对象、操作时间等。记录过程需要异步进行，避免影响用户体验。

操作记录需要存储在数据库中，支持后续的查询和分析。

第二步：历史查看

用户可以查看所有的操作历史，按时间倒序排列。历史列表需要显示操作的类型、对象、时间等信息。

用户可以搜索和筛选历史记录，快速找到特定的操作。

第三步：撤销与重做

用户可以撤销最近的操作，系统会恢复到操作前的状态。同时支持重做操作，用户可以重新执行撤销的操作。

撤销和重做需要维护一个操作栈，记录所有的操作和状态变化。

🔧 Web代码实现

操作历史HTML结构

<divid="history-page"class="page"><divclass="page-header"><h2>操作历史</h2><divclass="history-actions"><buttonclass="btn btn-secondary"onclick="undoLastOperation()"id="undo-btn">↶ 撤销</button><buttonclass="btn btn-secondary"onclick="redoLastOperation()"id="redo-btn">↷ 重做</button><buttonclass="btn btn-danger"onclick="clearHistory()">🗑️ 清空历史</button></div></div><divclass="history-list"id="history-list"></div></div>

操作历史实现

letoperationHistory=[];lethistoryIndex=-1;asyncfunctionrecordOperation(type,object,details){constoperation={type:type,object:object,details:details,timestamp:Date.now(),id:Date.now()};// 移除重做栈中的操作operationHistory=operationHistory.slice(0,historyIndex+1);operationHistory.push(operation);historyIndex++;// 保存到数据库awaitdb.addHistory(operation);updateHistoryButtons();}asyncfunctionundoLastOperation(){if(historyIndex<0)return;constoperation=operationHistory[historyIndex];historyIndex--;// 执行撤销操作awaitperformUndo(operation);updateHistoryButtons();loadHistoryList();}asyncfunctionredoLastOperation(){if(historyIndex>=operationHistory.length-1)return;historyIndex++;constoperation=operationHistory[historyIndex];// 执行重做操作awaitperformRedo(operation);updateHistoryButtons();loadHistoryList();}asyncfunctionperformUndo(operation){// 根据操作类型执行撤销switch(operation.type){case'add':awaitdb.deleteMovie(operation.object);break;case'delete':awaitdb.addMovie(operation.details);break;case'update':awaitdb.updateMovie(operation.object,operation.details.oldData);break;}}asyncfunctionperformRedo(operation){// 根据操作类型执行重做switch(operation.type){case'add':awaitdb.addMovie(operation.details);break;case'delete':awaitdb.deleteMovie(operation.object);break;case'update':awaitdb.updateMovie(operation.object,operation.details.newData);break;}}functionupdateHistoryButtons(){document.getElementById('undo-btn').disabled=historyIndex<0;document.getElementById('redo-btn').disabled=historyIndex>=operationHistory.length-1;}asyncfunctionloadHistoryList(){try{consthistory=awaitdb.getHistory();renderHistoryList(history);}catch(error){console.error('加载历史失败:',error);}}functionrenderHistoryList(history){constcontainer=document.getElementById('history-list');container.innerHTML='';if(history.length===0){container.innerHTML='<p class="empty-message">暂无操作历史</p>';return;}history.reverse().forEach(op=>{constitem=document.createElement('div');item.className='history-item';constdate=newDate(op.timestamp).toLocaleString('zh-CN');consttypeText={'add':'添加','delete':'删除','update':'修改'}[op.type]||op.type;item.innerHTML=`<span class="operation-type">${typeText}</span> <span class="operation-object">${op.object}</span> <span class="operation-time">${date}</span>`;container.appendChild(item);});}asyncfunctionclearHistory(){if(confirm('确定要清空操作历史吗？')){try{awaitdb.clearHistory();operationHistory=[];historyIndex=-1;loadHistoryList();updateHistoryButtons();showSuccess('历史已清空');}catch(error){console.error('清空历史失败:',error);showError('清空历史失败');}}}

🔌 OpenHarmony原生代码

操作历史插件

// HistoryPlugin.etsimport{webview}from'@kit.ArkWeb';import{common}from'@kit.AbilityKit';exportclassHistoryPlugin{privatecontext:common.UIAbilityContext;constructor(context:common.UIAbilityContext){this.context=context;}publicregisterHistory(controller:webview.WebviewController):void{controller.registerJavaScriptProxy({object:newHistoryBridge(),name:'historyNative',methodList:['recordOperation','getOperationStats']});}}exportclassHistoryBridge{publicrecordOperation(operationJson:string):string{try{constoperation=JSON.parse(operationJson);returnJSON.stringify({success:true,operationId:operation.id,timestamp:operation.timestamp});}catch(error){returnJSON.stringify({success:false,error:error.message});}}publicgetOperationStats(historyJson:string):string{try{consthistory=JSON.parse(historyJson);conststats={totalCount:history.length,addCount:history.filter((h:any)=>h.type==='add').length,deleteCount:history.filter((h:any)=>h.type==='delete').length,updateCount:history.filter((h:any)=>h.type==='update').length};returnJSON.stringify(stats);}catch(error){returnJSON.stringify({error:error.message});}}}