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

📌 概述

标签管理模块用于管理日记的标签系统。这个模块提供了创建、编辑和删除标签的功能，支持标签的快速搜索和批量管理。通过Cordova框架，我们能够在Web层实现灵活的标签管理界面，同时利用OpenHarmony的数据库能力实现高效的标签查询。

标签管理模块采用了云标签设计，显示使用频率最高的标签。用户可以快速添加常用标签，提高日记编辑的效率。

🔗 完整流程

标签创建流程：用户在日记编辑时可以快速创建新标签。输入标签名称后，应用会自动保存标签到数据库。同时，应用会更新标签的使用频率统计。

标签管理流程：用户可以在标签管理页面查看所有标签及其使用情况。可以编辑标签名称或删除不需要的标签。删除标签时，应用会自动从所有日记中移除该标签。

标签搜索流程：用户可以通过关键词搜索标签。应用会实时显示匹配的标签列表，方便用户快速找到需要的标签。

🔧 Web代码实现

// 加载所有标签
async function loadTags() {
    try {
        const tags = await db.getAllTags();
        return tags.sort((a, b) => b.usageCount - a.usageCount);
    } catch (error) {
        console.error('加载标签失败:', error);
        return [];
    }
}

// 添加标签
async function addTag(tagName) {
    try {
        const existingTag = await db.getTagByName(tagName);
        
        if (existingTag) {
            // 增加使用频率
            await db.updateTag(existingTag.id, {
                usageCount: (existingTag.usageCount || 0) + 1
            });
        } else {
            // 创建新标签
            await db.addTag({
                name: tagName,
                usageCount: 1,
                createdAt: new Date()
            });
        }
        
        return true;
    } catch (error) {
        console.error('添加标签失败:', error);
        return false;
    }
}

// 搜索标签
async function searchTags(keyword) {
    try {
        const allTags = await loadTags();
        return allTags.filter(tag => 
            tag.name.toLowerCase().includes(keyword.toLowerCase())
        );
    } catch (error) {
        console.error('搜索标签失败:', error);
        return [];
    }
}

这些函数处理标签的加载、添加和搜索。addTag函数支持自动增加使用频率。

// 渲染标签管理页面
async function renderTagManage() {
    const tags = await loadTags();
    
    const html = `
        <div class="tag-container">
            <div class="tag-header">
                <h1>标签管理</h1>
                <div class="tag-controls">
                    <input type="text" id="tag-search" placeholder="搜索标签..." class="search-box">
                    <button class="btn-primary" onclick="showAddTagModal()">添加标签</button>
                </div>
            </div>
            
            <div class="tag-cloud">
                <h2>热门标签</h2>
                <div class="tags">
                    ${tags.slice(0, 20).map(tag => `
                        <span class="tag-item" style="font-size: ${calculateTagSize(tag.usageCount)}px">
                            ${tag.name}
                            <span class="tag-count">(${tag.usageCount})</span>
                        </span>
                    `).join('')}
                </div>
            </div>
            
            <div class="tag-list">
                <h2>所有标签</h2>
                <table class="tag-table">
                    <thead>
                        <tr>
                            <th>标签名称</th>
                            <th>使用次数</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${tags.map(tag => `
                            <tr>
                                <td>${tag.name}</td>
                                <td>${tag.usageCount}</td>
                                <td>${formatDate(tag.createdAt)}</td>
                                <td>
                                    <button class="btn-small" onclick="editTag(${tag.id})">编辑</button>
                                    <button class="btn-small btn-danger" onclick="deleteTag(${tag.id})">删除</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        </div>
    `;
    
    document.getElementById('page-container').innerHTML = html;
    attachTagListeners();
}

// 计算标签大小
function calculateTagSize(usageCount) {
    const minSize = 12;
    const maxSize = 24;
    const maxUsage = Math.max(...tags.map(t => t.usageCount));
    return minSize + (usageCount / maxUsage) * (maxSize - minSize);
}

// 删除标签
async function deleteTag(tagId) {
    const confirmed = confirm('确定要删除这个标签吗？');
    if (!confirmed) return;
    
    try {
        await db.deleteTag(tagId);
        showSuccess('标签已删除');
        renderTagManage();
    } catch (error) {
        showError('删除标签失败: ' + error.message);
    }
}

这个渲染函数生成了标签管理界面，包括热门标签云和完整的标签列表。

🔌 原生代码实现

// TagPlugin.ets - 标签管理原生插件
import { fileIo } from '@kit.BasicServicesKit';

@Entry
@Component
struct TagPlugin {
    // 导出标签列表
    exportTags(tags: string, callback: (path: string) => void): void {
        try {
            const data = JSON.parse(tags);
            const exportPath = `/data/exports/tags_${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('[TagPlugin] 导出失败:', error);
            callback('');
        }
    }
    
    // 批量删除标签
    batchDeleteTags(tagIds: string, callback: (success: boolean) => void): void {
        try {
            const ids = JSON.parse(tagIds);
            // 批量删除逻辑
            callback(true);
        } catch (error) {
            console.error('[TagPlugin] 批量删除失败:', error);
            callback(false);
        }
    }
    
    build() {
        Column() {
            Web({ src: 'resource://rawfile/www/index.html', controller: new WebviewController() })
        }
    }
}

这个原生插件提供了标签的导出和批量删除功能。

Web-Native通信代码

// 导出标签
function exportNativeTags(tags) {
    return new Promise((resolve, reject) => {
        cordova.exec(
            (path) => {
                if (path) {
                    showSuccess(`标签已导出到: ${path}`);
                    resolve(path);
                } else {
                    reject(new Error('导出失败'));
                }
            },
            (error) => {
                console.error('导出失败:', error);
                reject(error);
            },
            'TagPlugin',
            'exportTags',
            [JSON.stringify(tags)]
        );
    });
}

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

📝 总结

标签管理模块展示了Cordova与OpenHarmony在标签系统管理方面的应用。在Web层，我们实现了灵活的标签管理界面和云标签展示。在原生层，我们提供了标签的导出和批量操作功能。

通过云标签设计，用户可以直观地看到最常用的标签。通过使用频率统计，应用可以帮助用户更好地组织日记。通过Web-Native通信，我们能够充分利用OpenHarmony的文件系统能力，为用户提供完整的标签管理体验。

在实际开发中，建议实现标签的自动补全，提供标签的合并功能，并支持标签的批量编辑。