📌 模块概述

批量编辑页面提供了对多个菜谱同时进行修改的能力，例如一次性改变一组菜谱的分类、菜系或难度，或者批量删除某些不再需要的菜谱。对于已经积累了大量菜谱的家庭来说，这个功能可以极大地减少维护成本。页面包含一个操作选择器和一个菜谱多选列表，操作执行逻辑在 Web 层完成；如果希望对「批量删除」做更强的安全保护，则可以通过 ArkTS 插件配合系统级确认对话框。

🔗 批量操作流程

1. 用户在批量编辑页面勾选若干菜谱；
2. 在操作下拉框中选择「修改分类」「修改菜系」「修改难度」或「删除」等；
3. 在输入框中填写新值（对于删除操作则可以为空）；
4. 点击执行按钮，executeBulkAction() 根据选择的操作类型依次更新或删除对应菜谱；
5. 对于危险操作（如删除），可以在执行前通过 ArkTS 插件再次确认。

🔧 批量操作表单（HTML 片段）

<div class="card">
  <div class="card-content">
    <div class="form-group">
      <label class="form-label">操作类型</label>
      <select id="bulk-action" class="form-control">
        <option value="">选择操作</option>
        <option value="category">修改分类</option>
        <option value="delete">删除</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-label">新值</label>
      <input id="bulk-value" class="form-control" placeholder="输入新分类名称">
    </div>
  </div>
</div>

这段 HTML 展示了批量编辑页面顶部的操作区域：通过 bulk-action 控制操作类型，通过 bulk-value 填写新的字段值。对于删除类操作，可以在逻辑上忽略新值字段。

🔧 批量执行逻辑（JavaScript 片段）

async function executeBulkAction() {
  const action = document.getElementById('bulk-action').value;
  const value = document.getElementById('bulk-value').value;
  const selected = Array.from(document.querySelectorAll('.recipe-checkbox:checked'))
    .map(cb => parseInt(cb.dataset.id));

  if (!action || selected.length === 0) {
    showToast('请选择操作和菜谱', 'warning');
    return;
  }

  for (const id of selected) {
    const recipe = await db.getRecipe(id);
    if (!recipe) continue;
    if (action === 'category') recipe.category = value;
    if (action === 'delete') await db.deleteRecipe(id);
    if (action !== 'delete') await db.updateRecipe(recipe);
  }

  showToast('操作已完成', 'success');
  renderBulkEdit();
}

这段代码展示了批量编辑的核心：先收集被勾选菜谱的 id 列表，再根据操作类型对每一条记录进行更新或删除。逻辑完全运行在 Web 层，依赖 db.getRecipe、db.updateRecipe 和 db.deleteRecipe 三个基础方法。

🔌 使用鸿蒙原生确认批量删除（ArkTS 片段）

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

@plugin
export default class BulkDeletePlugin {
  async confirmBulkDelete(count: number): Promise<boolean> {
    // 示例：可使用系统级对话框再次确认
    console.info('confirm bulk delete: ' + count);
    return true;
  }
}

ArkTS 侧的 BulkDeletePlugin 提供了 confirmBulkDelete 方法，通过参数 count 告知需要删除的记录数量。真实实现中可以唤起系统级对话框，提示「即将删除 X 个菜谱，是否继续？」。

async function executeBulkDeleteWithNative(selectedIds) {
  if (!window.cordova) {
    await deleteIds(selectedIds);
    return;
  }

  cordova.exec(async (ok) => {
    if (!ok) return;
    await deleteIds(selectedIds);
  }, null, 'BulkDeletePlugin', 'confirmBulkDelete', [selectedIds.length]);
}

在 Web 层，我们可以将删除逻辑抽象为 deleteIds 函数，再通过 executeBulkDeleteWithNative 在鸿蒙设备上添加额外确认步骤。这样既不影响普通浏览器中的行为，又能在实际设备上提供更安全的体验。

📝 小结

批量编辑页面为家庭菜谱的长期维护提供了高效工具，用户可以一次性修改或删除多条记录。得益于 Cordova&OpenHarmony 混合架构，我们在 Web 层实现了所有批量逻辑，并通过 ArkTS 插件在关键操作（如批量删除）前增加系统级确认，达到「高效操作与安全防护兼顾」的目标。

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