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

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

📌 概述

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

🔗 笔记系统的完整流程

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

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

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

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

🔧 笔记管理器实现

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

// 笔记管理器的关键方法
class NoteManager {
    constructor() {
        this.notes = [];
    }

    async init() {
        await this.loadNotes();
    }

    async createNote(taskId, content) {
        if (!content?.trim()) throw new Error('笔记内容不能为空');
        
        const id = await db.addNote({
            taskId,
            content,
            createdAt: new Date().toISOString()
        });
        await this.loadNotes();
        return id;
    }

    async updateNote(id, content) {
        await db.updateNote(id, { content, updatedAt: new Date().toISOString() });
        await this.loadNotes();
    }

    async deleteNote(id) {
        await db.deleteNote(id);
        await this.loadNotes();
    }

    getNotesByTask(taskId) {
        return this.notes.filter(n => n.taskId === taskId);
    }

    getNote(id) {
        return this.notes.find(n => n.id === id);
    }

    async addAttachment(noteId, file) {
        const reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onload = async () => {
                try {
                    const attachmentId = await db.addAttachment({
                        noteId,
                        fileName: file.name,
                        fileType: file.type,
                        fileData: reader.result,
                        uploadedAt: new Date().toISOString()
                    });
                    resolve(attachmentId);
                } catch (error) {
                    reject(error);
                }
            };
            reader.readAsArrayBuffer(file);
        });
    }

    async deleteAttachment(attachmentId) {
        await db.deleteAttachment(attachmentId);
    }
}

const noteManager = new NoteManager();

代码解释：

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';

export class NoteSyncPlugin extends CordovaPlugin {
    // 监听 Web 层的笔记创建事件
    async onNoteCreated(callbackContext: CallbackContext, args: string[]): Promise<void> {
        try {
            const noteData = JSON.parse(args[0]);
            console.log('[NoteSyncPlugin] 笔记已创建:', noteData.id);
            
            // 原生层可以根据笔记创建事件更新自己的数据
            const result = PluginResult.createByString(MessageStatus.OK, '笔记已同步');
            callbackContext.sendPluginResult(result);
        } catch (error) {
            const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
            callbackContext.sendPluginResult(result);
        }
    }

    // 监听 Web 层的笔记更新事件
    async onNoteUpdated(callbackContext: CallbackContext, args: string[]): Promise<void> {
        try {
            const noteData = JSON.parse(args[0]);
            console.log('[NoteSyncPlugin] 笔记已更新:', noteData.id);
            
            const result = PluginResult.createByString(MessageStatus.OK, '笔记更新已同步');
            callbackContext.sendPluginResult(result);
        } catch (error) {
            const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
            callbackContext.sendPluginResult(result);
        }
    }

    // 监听 Web 层的附件上传事件
    async onAttachmentUploaded(callbackContext: CallbackContext, args: string[]): Promise<void> {
        try {
            const attachmentData = JSON.parse(args[0]);
            console.log('[NoteSyncPlugin] 附件已上传:', attachmentData.fileName);
            
            const result = PluginResult.createByString(MessageStatus.OK, '附件已同步');
            callbackContext.sendPluginResult(result);
        } catch (error) {
            const result = PluginResult.createByString(MessageStatus.ERROR, (error as Error).message);
            callbackContext.sendPluginResult(result);
        }
    }
}

原生代码解释：

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

Web 层通知原生笔记事件

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

// JavaScript 代码 - 通知原生笔记事件
function notifyNoteCreated(noteData) {
    cordova.exec(
        function() { console.log('原生层已收到笔记创建通知'); },
        function(error) { console.error('通知失败:', error); },
        'NoteSyncPlugin',
        'onNoteCreated',
        [JSON.stringify(noteData)]
    );
}

function notifyNoteUpdated(noteData) {
    cordova.exec(
        function() { console.log('原生层已收到笔记更新通知'); },
        function(error) { console.error('通知失败:', error); },
        'NoteSyncPlugin',
        'onNoteUpdated',
        [JSON.stringify(noteData)]
    );
}

function notifyAttachmentUploaded(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 层的数据一致。

📝 总结

笔记系统是应用的重要功能，通过灵活的笔记和附件管理，用户可以为任务记录详细的信息。通过与原生层的集成，可以实现笔记数据的完整同步，使用户在不同层级都能访问和管理笔记。