📌 模块概述

标签管理页面用于统一维护诸如「家常菜、快手菜、减脂、下饭菜」等语义标签。与分类、菜系不同，标签往往是多维度、可组合的，一个菜谱可以同时拥有多个标签。这个页面展示所有标签及其被使用的次数，并允许用户新增或删除标签。依托 Cordova&OpenHarmony 架构，标签元数据存储在 IndexedDB 中，Web 层负责所有展示与操作；如需做跨设备同步或统计分析，则可通过 ArkTS 插件把标签列表上报给原生侧。

🔗 标签数据更新流程

1. 在添加或编辑菜谱时，用户通过输入框录入以逗号分隔的标签列表；
2. 后台保存时，会把这些标签写入菜谱记录的 tags 字段，同时在标签表中补充缺失的条目；
3. 标签管理页面 renderTags() 读取标签表和菜谱表，统计每个标签被多少个菜谱使用；
4. 用户可在此页面新增常用标签或删除不再使用的标签；
5. 如启用云同步，可在标签新增或删除后，通过 Cordova 插件同步到 ArkTS 层或远端服务。

🔧 标签列表结构（HTML 片段）

<div class="list-item">
  <div class="list-item-icon">🏷️</div>
  <div class="list-item-content">
    <div class="list-item-title">家常菜</div>
    <div class="list-item-subtitle">用于 8 个菜谱</div>
  </div>
  <button class="btn btn-sm btn-outline">删除</button>
</div>

这段 HTML 使用了和食材库类似的 list-item 结构，只是图标和文本内容不同。通过统一的组件样式，可以显著降低 CSS 复杂度，同时保证在 ArkWeb 渲染时的视觉一致性。删除按钮通常会配合模态确认框一起使用，避免误删高频标签。

🔧 标签管理渲染逻辑（JavaScript 片段）

async function renderTags() {
  const tags = await db.getAllTags();
  const recipes = await db.getAllRecipes();

  const listHtml = tags.map(tag => {
    const count = recipes.filter(r => r.tags && r.tags.includes(tag.name)).length;
    return `
      <div class="list-item">
        <div class="list-item-icon">🏷️</div>
        <div class="list-item-content">
          <div class="list-item-title">${tag.name}</div>
          <div class="list-item-subtitle">用于 ${count} 个菜谱</div>
        </div>
      </div>
    `;
  }).join('');

  document.getElementById('page-container').innerHTML = listHtml;
}

这里的实现与食材库十分类似：读取标签表和菜谱表，在内存中统计每个标签的引用次数，并以列表形式渲染。由于标签数量通常不会太大，这种一次性载入与统计的方式在性能和复杂度之间取得了很好的平衡。开发者可以很容易在浏览器里 mock 出一些测试数据，验证渲染效果，再把相同逻辑部署到鸿蒙设备上运行。

🔧 新增标签逻辑（JavaScript 片段）

async function addTag() {
  const name = document.getElementById('tag-name').value;
  if (!name) {
    showToast('请输入标签名称', 'warning');
    return;
  }
  await db.addTag({ name });
  showToast('标签已添加', 'success');
  renderTags();
}

新增标签的逻辑很简单：从输入框获取名称，做非空校验后直接写入数据库，最后重新渲染页面。是否允许重名标签可以根据业务需要在 db.addTag 内部实现限制。整个过程完全运行在 Web 层，不依赖原生侧，因此在浏览器与 ArkWeb 中表现一致。

🔌 将标签变更同步到鸿蒙原生（ArkTS 片段）

// entry/src/main/ets/plugins/TagSyncPlugin.ets
import plugin from '@ohos.plugin';

@plugin
export default class TagSyncPlugin {
  async syncTags(tags: string[]): Promise<void> {
    // 示例：将标签列表写入分布式数据或用于统计
    console.info('sync tags: ' + JSON.stringify(tags));
  }
}

ArkTS 侧通过 TagSyncPlugin 对外暴露一个 syncTags 方法，用于接收最新的标签名称数组。原生层可以在这里做很多事情，例如写入分布式数据、用于推荐算法、或与其他鸿蒙应用共享标签体系。示例中只是简单记录日志，重点在于展示 Web–Native 通信的接口形态。

async function syncAllTagsToNative() {
  if (!window.cordova) return;
  const tags = await db.getAllTags();
  const names = tags.map(t => t.name);

  cordova.exec(null, null, 'TagSyncPlugin', 'syncTags', [names]);
}

对应的 Web 代码在需要时（例如打开标签管理页面后，或用户点击「同步」按钮时）调用 syncAllTagsToNative，通过 cordova.exec 将标签名称数组发给 ArkTS 插件。这样既不改变现有的标签管理体验，又给日后接入更复杂的原生服务提供了稳定接口。

📝 小结

标签管理页面为家庭菜谱提供了一套灵活的语义标记体系，使用户可以通过「快手、减脂、宴客」等标签快速筛选菜谱。凭借 Cordova&OpenHarmony 混合开发模式，我们在 Web 层完成了标签的增删查和统计展示，同时利用 ArkTS 插件在需要时同步标签元数据，为跨设备推荐与统计打通通道。这种设计既保证了前端开发效率，又为后续功能扩展预留了充足空间。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net