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

📌 概述

筛选器管理功能允许用户保存和管理自定义的搜索筛选条件。用户可以创建多个筛选器，快速应用预定义的搜索条件。筛选器管理提供了快速访问常用搜索的便利。在 Cordova 与 OpenHarmony 的混合开发框架中，筛选器管理需要实现筛选器的保存、加载和应用功能。

🔗 完整流程

第一步：筛选器数据模型设计

筛选器需要保存用户的搜索条件，包括目的地、日期范围、花费范围、标签等。筛选器需要有名称和描述，便于用户识别。筛选器还需要记录创建时间和最后使用时间。

第二步：筛选器列表展示与操作

筛选器管理页面需要展示所有保存的筛选器。用户可以查看筛选器的详细信息，也可以进行编辑、删除、应用等操作。筛选器可以按名称、最后使用时间等进行排序。

第三步：原生层筛选器缓存与快速应用

OpenHarmony 原生层可以缓存常用的筛选器，提高应用速度。原生层还可以实现筛选器的快速应用，减少计算时间。

🔧 Web 代码实现

筛选器管理页面 HTML 结构

<div id="filters-page" class="page">
    <div class="page-header">
        <h1>筛选器管理</h1>
        <button class="btn btn-primary" onclick="openFilterModal()">
            ➕ 新建筛选器
        </button>
    </div>
    
    <div class="filters-container">
        <div class="filters-list" id="filtersList">
            <!-- 筛选器列表动态加载 -->
        </div>
    </div>
</div>

HTML 结构包含筛选器列表和新建筛选器按钮。

加载筛选器列表函数

async function loadFilters() {
    try {
        // 从数据库查询所有筛选器
        const filters = await db.getAllFilters();
        
        // 按最后使用时间排序
        filters.sort((a, b) => {
            const timeA = a.lastUsedAt ? new Date(a.lastUsedAt).getTime() : 0;
            const timeB = b.lastUsedAt ? new Date(b.lastUsedAt).getTime() : 0;
            return timeB - timeA;
        });
        
        // 渲染筛选器列表
        renderFiltersList(filters);
    } catch (error) {
        console.error('Error loading filters:', error);
        showToast('加载筛选器失败');
    }
}

这个函数从数据库查询所有筛选器，按最后使用时间排序。loadFilters 函数是筛选器管理的核心加载函数。函数首先从数据库获取所有保存的筛选器。然后按照最后使用时间进行降序排序，使得最近使用的筛选器显示在最前面，方便用户快速访问常用的筛选器。如果筛选器没有使用过，则使用时间为 0，这样的筛选器会显示在列表的最后。最后调用 renderFiltersList 函数将排序后的筛选器列表渲染到页面上。这种设计提高了用户的工作效率，用户可以快速找到常用的筛选器。

筛选器列表渲染函数

function renderFiltersList(filters) {
    const container = document.getElementById('filtersList');
    container.innerHTML = '';
    
    filters.forEach(filter => {
        const filterElement = document.createElement('div');
        filterElement.className = 'filter-item';
        filterElement.id = `filter-${filter.id}`;
        filterElement.innerHTML = `
            <div class="filter-header">
                <h3>${filter.name}</h3>
                <span class="filter-count">${filter.usageCount || 0}次使用</span>
            </div>
            <div class="filter-body">
                <p class="filter-description">${filter.description || '暂无描述'}</p>
                <div class="filter-criteria">
                    ${filter.destination ? `<span>📍 ${filter.destination}</span>` : ''}
                    ${filter.minExpense ? `<span>💰 ¥${filter.minExpense}-${filter.maxExpense}</span>` : ''}
                </div>
            </div>
            <div class="filter-footer">
                <button class="btn-small" onclick="applyFilter(${filter.id})">
                    应用
                </button>
                <button class="btn-small" onclick="editFilter(${filter.id})">
                    编辑
                </button>
                <button class="btn-small btn-danger" onclick="deleteFilter(${filter.id})">
                    删除
                </button>
            </div>
        `;
        container.appendChild(filterElement);
    });
}

筛选器列表渲染函数为每个筛选器创建一个 DOM 元素。

保存筛选器函数

async function saveFilter(filterData) {
    try {
        // 验证数据
        if (!filterData.name || filterData.name.trim() === '') {
            showToast('筛选器名称不能为空');
            return;
        }
        
        // 创建筛选器对象
        const filter = {
            id: filterData.id || Date.now(),
            name: filterData.name,
            description: filterData.description,
            destination: filterData.destination,
            startDate: filterData.startDate,
            endDate: filterData.endDate,
            minExpense: filterData.minExpense,
            maxExpense: filterData.maxExpense,
            tags: filterData.tags,
            createdAt: filterData.createdAt || new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            usageCount: filterData.usageCount || 0
        };
        
        // 保存到数据库
        if (filterData.id) {
            await db.updateFilter(filter);
            showToast('筛选器已更新');
        } else {
            await db.addFilter(filter);
            showToast('筛选器已创建');
        }
        
        // 关闭模态框
        closeModal();
        
        // 重新加载列表
        loadFilters();
        
        // 通知原生层
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Filter saved:', result),
                (error) => console.error('Save error:', error),
                'FilterPlugin',
                'onFilterSaved',
                [{ filterId: filter.id, timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error saving filter:', error);
        showToast('保存失败，请重试');
    }
}

保存筛选器函数创建或更新筛选器，然后保存到数据库。

应用筛选器函数

async function applyFilter(filterId) {
    try {
        // 获取筛选器数据
        const filter = await db.getFilter(filterId);
        
        if (filter) {
            // 更新使用次数
            filter.usageCount = (filter.usageCount || 0) + 1;
            filter.lastUsedAt = new Date().toISOString();
            await db.updateFilter(filter);
            
            // 应用筛选器条件
            const allTrips = await db.getAllTrips();
            const results = filterTrips(allTrips, {
                destination: filter.destination,
                startDate: filter.startDate,
                endDate: filter.endDate,
                minExpense: filter.minExpense,
                maxExpense: filter.maxExpense,
                tags: filter.tags
            });
            
            // 导航到搜索结果页面
            navigateTo('search-results', { results: results });
            
            showToast(`已应用筛选器: ${filter.name}`);
        }
    } catch (error) {
        console.error('Error applying filter:', error);
        showToast('应用筛选器失败');
    }
}

应用筛选器函数使用保存的筛选器条件进行搜索。

删除筛选器函数

async function deleteFilter(filterId) {
    if (!confirm('确定要删除这个筛选器吗？')) {
        return;
    }
    
    try {
        // 从数据库删除
        await db.deleteFilter(filterId);
        
        showToast('筛选器已删除');
        
        // 从列表移除
        const element = document.getElementById(`filter-${filterId}`);
        if (element) {
            element.remove();
        }
        
        // 通知原生层
        if (window.cordova) {
            cordova.exec(
                (result) => console.log('Filter deleted:', result),
                (error) => console.error('Delete error:', error),
                'FilterPlugin',
                'onFilterDeleted',
                [{ filterId: filterId, timestamp: Date.now() }]
            );
        }
    } catch (error) {
        console.error('Error deleting filter:', error);
        showToast('删除失败，请重试');
    }
}

删除筛选器函数从数据库中删除筛选器。

🔌 OpenHarmony 原生代码实现

筛选器缓存插件

// FilterPlugin.ets
import { BusinessError } from '@ohos.base';

export class FilterPlugin {
    private filterCache: Map<number, any> = new Map();
    
    // 处理筛选器保存事件
    onFilterSaved(args: any, callback: Function): void {
        try {
            const filterId = args[0].filterId;
            const timestamp = args[0].timestamp;
            
            // 清除缓存
            this.filterCache.clear();
            
            console.log(`[Filter] Saved: ${filterId} at ${timestamp}`);
            
            callback({ success: true, message: '筛选器已保存' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
    
    // 处理筛选器删除事件
    onFilterDeleted(args: any, callback: Function): void {
        try {
            const filterId = args[0].filterId;
            
            // 清除缓存
            this.filterCache.delete(filterId);
            
            console.log(`[Filter] Deleted: ${filterId}`);
            
            callback({ success: true, message: '筛选器已删除' });
        } catch (error) {
            callback({ success: false, error: error.message });
        }
    }
}

筛选器缓存插件在原生层管理筛选器缓存。

📝 总结

筛选器管理功能展示了如何在 Cordova 与 OpenHarmony 框架中实现一个筛选器保存和应用系统。Web 层负责 UI 渲染和筛选器操作，原生层负责缓存管理。通过筛选器管理，用户可以快速应用常用的搜索条件。