笔记与附件管理-平芜编程栈

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

本文对应模块：Web 层的笔记与附件管理系统实现，包括笔记的创建编辑、附件上传管理、笔记查询统计，以及与原生层的笔记同步机制。

📌 概述

笔记系统是任务管理应用的重要功能，允许用户为任务添加详细的备注和说明。笔记系统包括笔记的创建、编辑、删除、查询和附件管理等功能。NoteManager 类是笔记管理的核心，负责管理所有笔记和附件。通过笔记系统，用户可以为任务记录详细的信息，便于后续查看和回顾。

🔗 笔记系统的完整流程

笔记系统分为三层：Web 层的 NoteManager（笔记管理器）负责业务逻辑和笔记操作，DatabaseModule（数据库模块）负责数据的持久化和查询，IndexedDB 是底层的本地数据库。当用户为任务创建笔记时，NoteManager 接收任务 ID 和笔记内容，调用 DatabaseModule 的 addNote 方法将笔记保存到 IndexedDB。当用户编辑笔记时，NoteManager 调用 updateNote 方法更新笔记内容。当用户删除笔记时，NoteManager 调用 deleteNote 方法删除笔记。当用户查询笔记时，NoteManager 调用查询方法从 IndexedDB 获取数据。

笔记系统与标签系统的主要区别在于，标签是对任务的分类标记，而笔记是对任务的详细说明。一个任务可以有多个笔记，每个笔记可以包含长文本内容和附件。笔记系统还支持附件管理，用户可以为笔记添加图片、文件等附件。附件存储在浏览器的本地存储中，可以通过 Blob 和 File API 进行处理。

笔记系统的实现需要考虑以下几个方面：首先是笔记的创建和编辑，需要支持富文本编辑或简单的文本编辑。其次是笔记的查询，需要支持按任务查询笔记。第三是附件的管理，需要支持附件的上传、下载和删除。第四是笔记的同步，需要通过 Cordova 插件将笔记变化通知给原生层。最后是笔记的性能优化，当笔记数量很多时，需要考虑分页加载和缓存策略。

笔记系统在实际应用中非常重要。用户可能需要为某个任务记录多个笔记，例如任务的背景信息、执行步骤、相关链接等。通过笔记系统，用户可以将所有相关信息集中在一个地方，便于查看和管理。附件功能使得用户可以为笔记添加图片、文件等多媒体内容，进一步增强了笔记的表达能力。

🔧 笔记管理器实现

笔记管理器的核心实现包括笔记的增删查改、按任务查询、附件管理等功能。笔记创建时需要验证内容不能为空，并记录创建时间。笔记编辑时需要更新内容和修改时间。笔记删除时需要同时删除关联的附件。笔记查询时支持按任务 ID 查询。

// 笔记管理器的关键方法classNoteManager{constructor(){this.notes=[];}asyncinit(){awaitthis.loadNotes();}asynccreateNote(taskId,content){if(!content?.trim())thrownewError('笔记内容不能为空');constid=awaitdb.addNote({taskId,content,createdAt:newDate().toISOString()});awaitthis.loadNotes();returnid;}asyncupdateNote(id,content){awaitdb.updateNote(id,{content,updatedAt:newDate().toISOString()});awaitthis.loadNotes();}asyncdeleteNote(id){awaitdb.deleteNote(id);awaitthis.loadNotes();}getNotesByTask(taskId){returnthis.notes.filter(n=>n.taskId===taskId);}getNote(id){returnthis.notes.find(n=>n.id===id);}asyncaddAttachment(noteId,file){constreader=newFileReader();returnnewPromise((resolve,reject)=>{reader.onload=async()=>{try{constattachmentId=awaitdb.addAttachment({noteId,fileName:file.name,fileType:file.type,fileData:reader.result,uploadedAt:newDate().toISOString()});resolve(attachmentId);}catch(error){reject(error);}};reader.readAsArrayBuffer(file);});}asyncdeleteAttachment(attachmentId){awaitdb.deleteAttachment(attachmentId);}}constnoteManager=newNoteManager();

代码解释：

NoteManager 类提供了一个完整的笔记管理接口。init() 方法在初始化时加载所有笔记。createNote() 方法创建新笔记，首先验证笔记内容不能为空，然后记录创建时间并保存到数据库。updateNote() 方法更新笔记内容，同时更新修改时间。deleteNote() 方法删除笔记。getNotesByTask() 方法获取指定任务的所有笔记，通过过滤笔记的任务 ID 实现。getNote() 方法获取指定 ID 的笔记。addAttachment() 方法为笔记添加附件，使用 FileReader API 读取文件内容，然后保存到数据库。deleteAttachment() 方法删除附件。这些方法提供了完整的笔记和附件管理功能。

🔌 原生层的笔记系统同步

HarmonyOS 原生层也需要与 Web 层的笔记系统进行集成。原生层可以通过 Cordova 插件来接收来自 Web 层的笔记变化事件。

// ArkTS 代码示例 - 笔记系统插件import{CordovaPlugin,CallbackContext}from'@magongshou/harmony-cordova/Index';import{PluginResult,MessageStatus}from'@magongshou/harmony-cordova/Index';exportclassNoteSyncPluginextendsCordovaPlugin{// 监听 Web 层的笔记创建事件asynconNoteCreated(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constnoteData=JSON.parse(args[0]);console.log('[NoteSyncPlugin] 笔记已创建:',noteData.id);// 原生层可以根据笔记创建事件更新自己的数据constresult=PluginResult.createByString(MessageStatus.OK,'笔记已同步');callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}// 监听 Web 层的笔记更新事件asynconNoteUpdated(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constnoteData=JSON.parse(args[0]);console.log('[NoteSyncPlugin] 笔记已更新:',noteData.id);constresult=PluginResult.createByString(MessageStatus.OK,'笔记更新已同步');callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}// 监听 Web 层的附件上传事件asynconAttachmentUploaded(callbackContext:CallbackContext,args:string[]):Promise<void>{try{constattachmentData=JSON.parse(args[0]);console.log('[NoteSyncPlugin] 附件已上传:',attachmentData.fileName);constresult=PluginResult.createByString(MessageStatus.OK,'附件已同步');callbackContext.sendPluginResult(result);}catch(error){constresult=PluginResult.createByString(MessageStatus.ERROR,(errorasError).message);callbackContext.sendPluginResult(result);}}}

原生代码解释：

NoteSyncPlugin 是一个 Cordova 插件，提供了原生层与 Web 层笔记系统的交互接口。onNoteCreated 方法监听 Web 层的笔记创建事件，接收笔记数据。原生层可以根据这个事件在原生层也创建对应的笔记。onNoteUpdated 方法监听 Web 层的笔记更新事件，接收更新后的笔记数据。原生层可以根据这个事件更新原生层的笔记。onAttachmentUploaded 方法监听 Web 层的附件上传事件，接收附件数据。原生层可以根据这个事件保存附件或执行其他操作。

Web 层通知原生笔记事件

Web 层可以调用原生插件来通知原生层笔记已创建、更新或附件已上传：

// JavaScript 代码 - 通知原生笔记事件functionnotifyNoteCreated(noteData){cordova.exec(function(){console.log('原生层已收到笔记创建通知');},function(error){console.error('通知失败:',error);},'NoteSyncPlugin','onNoteCreated',[JSON.stringify(noteData)]);}functionnotifyNoteUpdated(noteData){cordova.exec(function(){console.log('原生层已收到笔记更新通知');},function(error){console.error('通知失败:',error);},'NoteSyncPlugin','onNoteUpdated',[JSON.stringify(noteData)]);}functionnotifyAttachmentUploaded(attachmentData){cordova.exec(function(){console.log('原生层已收到附件上传通知');},function(error){console.error('通知失败:',error);},'NoteSyncPlugin','onAttachmentUploaded',[JSON.stringify(attachmentData)]);}

Web 层代码解释：

notifyNoteCreated 函数使用 cordova.exec() 调用原生插件的 onNoteCreated 方法，传递笔记数据。这样可以从 Web 层通知原生层笔记已创建。notifyNoteUpdated 函数调用原生插件的 onNoteUpdated 方法，传递更新后的笔记数据。这样可以从 Web 层通知原生层笔记已更新。notifyAttachmentUploaded 函数调用原生插件的 onAttachmentUploaded 方法，传递附件数据。这样可以从 Web 层通知原生层附件已上传。通过这些函数，Web 层可以将笔记和附件事件同步给原生层，使原生层能够保持与 Web 层的数据一致。