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

📌 概述

筛选器模块用于保存和管理自定义的搜索筛选条件。这个模块允许用户创建多个筛选器，每个筛选器包含特定的搜索条件。用户可以快速应用筛选器来查看特定的日记集合。通过Cordova框架，我们能够在Web层实现灵活的筛选器管理界面，同时利用OpenHarmony的数据库能力高效执行筛选。

筛选器模块采用了预设筛选器和自定义筛选器相结合的设计。系统提供了一些常用的预设筛选器，用户也可以创建自己的筛选器。

🔗 完整流程

筛选器创建流程：用户在筛选器管理页面点击"创建筛选器"，打开筛选器编辑表单。用户设置筛选条件，包括宠物、日期范围、标签等。用户为筛选器命名并保存。

筛选器应用流程：用户在日记列表页面选择一个筛选器，应用会立即应用该筛选器的条件，只显示匹配的日记。

筛选器管理流程：用户可以编辑、删除或复制现有的筛选器。用户也可以设置某个筛选器为默认筛选器，每次打开应用时自动应用。

🔧 Web代码实现

// 加载所有筛选器
async function loadFilters() {
    try {
        const customFilters = await db.getCustomFilters();
        const presetFilters = getPresetFilters();
        return {
            preset: presetFilters,
            custom: customFilters
        };
    } catch (error) {
        console.error('加载筛选器失败:', error);
        return { preset: [], custom: [] };
    }
}

// 获取预设筛选器
function getPresetFilters() {
    return [
        {
            id: 'today',
            name: '今天',
            criteria: {
                startDate: new Date().toISOString().split('T')[0],
                endDate: new Date().toISOString().split('T')[0]
            }
        },
        {
            id: 'week',
            name: '本周',
            criteria: {
                startDate: getWeekStart().toISOString().split('T')[0]
            }
        },
        {
            id: 'month',
            name: '本月',
            criteria: {
                startDate: getMonthStart().toISOString().split('T')[0]
            }
        }
    ];
}

// 应用筛选器
async function applyFilter(filterId) {
    try {
        const filters = await loadFilters();
        let filter = filters.preset.find(f => f.id === filterId);
        
        if (!filter) {
            filter = filters.custom.find(f => f.id === filterId);
        }
        
        if (!filter) {
            showError('筛选器不存在');
            return;
        }
        
        // 应用筛选条件
        const results = await performAdvancedSearch(filter.criteria);
        displayFilteredResults(results, filter.name);
        
        // 保存当前应用的筛选器
        await db.setCurrentFilter(filterId);
    } catch (error) {
        showError('应用筛选器失败: ' + error.message);
    }
}

// 创建自定义筛选器
async function createCustomFilter(name, criteria) {
    try {
        await db.addCustomFilter({
            name: name,
            criteria: criteria,
            createdAt: new Date()
        });
        showSuccess('筛选器已创建');
        renderFilterManage();
    } catch (error) {
        showError('创建筛选器失败: ' + error.message);
    }
}

这些函数处理筛选器的加载、应用和创建。getPresetFilters函数返回系统预设的筛选器。

// 渲染筛选器管理页面
async function renderFilter() {
    const filters = await loadFilters();
    
    const html = `
        <div class="filter-container">
            <div class="filter-header">
                <h1>筛选器</h1>
                <button class="btn-primary" onclick="showCreateFilterModal()">创建筛选器</button>
            </div>
            
            <div class="preset-filters">
                <h2>预设筛选器</h2>
                <div class="filter-list">
                    ${filters.preset.map(filter => `
                        <button class="filter-item" onclick="applyFilter('${filter.id}')">
                            <span class="filter-name">${filter.name}</span>
                            <span class="filter-icon">→</span>
                        </button>
                    `).join('')}
                </div>
            </div>
            
            <div class="custom-filters">
                <h2>自定义筛选器</h2>
                <div class="filter-list">
                    ${filters.custom.length > 0 ? filters.custom.map(filter => `
                        <div class="filter-item">
                            <button class="filter-name" onclick="applyFilter(${filter.id})">
                                ${filter.name}
                            </button>
                            <div class="filter-actions">
                                <button class="btn-small" onclick="editFilter(${filter.id})">编辑</button>
                                <button class="btn-small btn-danger" onclick="deleteFilter(${filter.id})">删除</button>
                            </div>
                        </div>
                    `).join('') : '<p class="empty-state">还没有自定义筛选器</p>'}
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('page-container').innerHTML = html;
}

// 显示筛选结果
function displayFilteredResults(results, filterName) {
    const resultsHtml = `
        <div class="filter-results">
            <h2>筛选结果: ${filterName} (${results.length})</h2>
            ${results.length > 0 ? `
                <div class="results-list">
                    ${results.map(result => ` <div class="result-item" onclick="app.navigateTo('diary-edit', ${result.id})"> <h3>${result.title}</h3> <p>${result.content.substring(0, 100)}...</p> <span class="result-date">${formatDate(result.date)}</span> </div> `).join('')}
                </div>
            ` : '<p class="empty-state">没有匹配的日记</p>'}
        </div>
    `;
    
    document.getElementById('page-container').innerHTML += resultsHtml;
}

这个渲染函数生成了筛选器管理界面，包括预设筛选器和自定义筛选器。

🔌 原生代码实现

// FilterPlugin.ets - 筛选器原生插件
import { fileIo } from '@kit.BasicServicesKit';

@Entry
@Component
struct FilterPlugin {
    // 导出筛选器
    exportFilters(filters: string, callback: (path: string) => void): void {
        try {
            const data = JSON.parse(filters);
            const exportPath = `/data/exports/filters_${Date.now()}.json`;
            
            const file = fileIo.openSync(exportPath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE);
            fileIo.writeSync(file.fd, JSON.stringify(data, null, 2));
            fileIo.closeSync(file.fd);
            
            callback(exportPath);
        } catch (error) {
            console.error('[FilterPlugin] 导出失败:', error);
            callback('');
        }
    }
    
    build() {
        Column() {
            Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() })
        }
    }
}

这个原生插件提供了筛选器的导出功能。

Web-Native通信代码

// 导出筛选器
function exportNativeFilters(filters) {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (path) => {
                if (path) {
                    showSuccess(`筛选器已导出到: ${path}`);
                    resolve(path);
                } else {
                    reject(new Error('导出失败'));
                }
            },
            (error) => {
                console.error('导出失败:', error);
                reject(error);
            },
            'FilterPlugin',
            'exportFilters',
            [JSON.stringify(filters)]
        );
    });
}

这段代码展示了如何通过Cordova调用原生的导出功能。

📝 总结

筛选器模块展示了Cordova与OpenHarmony在数据过滤方面的应用。在Web层，我们实现了灵活的筛选器管理界面。在原生层，我们提供了筛选器的导出功能。

通过预设筛选器，用户可以快速查看常用的日记集合。通过自定义筛选器，用户可以创建符合自己需求的筛选条件。通过Web-Native通信，我们能够充分利用OpenHarmony的文件系统能力，为用户提供完整的筛选器管理体验。

在实际开发中，建议实现筛选器的共享功能，提供筛选器的预览，并支持筛选器的批量操作。