📌 模块概述

添加菜谱页面是家庭菜谱应用中最核心的编辑界面之一，负责录入菜谱的名称、图标、描述、分类、菜系、烹饪时间、人数、难度、食材、步骤和标签等完整信息。它直接决定了后续所有列表、搜索、分类和统计的基础数据质量。在 Cordova&OpenHarmony 混合架构下，这个页面的表单和交互完全由 Web 层负责，而数据存储则通过 IndexedDB 实现本地持久化。某些场景下，我们还可以通过 ArkTS 插件配合原生文件系统或多媒体能力，例如从相册选择菜谱封面图标等。

🔗 添加流程

1. 用户在添加菜谱页面填写各项信息，包括名称、分类、食材和步骤；
2. 点击「保存菜谱」按钮后，saveRecipe() 从表单控件中读取所有字段；
3. JavaScript 构造菜谱对象，补全默认图标、默认难度等缺省值；
4. 通过 db.addRecipe(recipe) 写入 IndexedDB，对应的列表页面和统计页面下次渲染时会读取到新记录；
5. 如需在原生侧生成缩略图、记录创建时间等，可以在保存完成后通过 Cordova 插件通知 ArkTS 层。

🔧 添加菜谱表单结构（HTML 片段）

<div class="card">
  <div class="card-content">
    <div class="form-group">
      <label class="form-label">菜谱名称 *</label>
      <input id="recipe-name" class="form-control" placeholder="输入菜谱名称">
    </div>
    <div class="form-group">
      <label class="form-label">菜谱图标</label>
      <input id="recipe-icon" class="form-control" placeholder="输入 emoji，如 🍕">
    </div>
  </div>
</div>

这段 HTML 展示了添加菜谱页面中最基本的两个输入项：名称和图标。名称字段通常是必填项，而图标可以留空并在保存时设置默认值。通过一致的 form-group 和 form-label 样式，可以在 ArkWeb 中获得清晰的表单布局，适配 PC 或大屏设备。

🔧 保存菜谱逻辑（JavaScript 片段）

async function saveRecipe() {
  const name = document.getElementById('recipe-name').value;
  const icon = document.getElementById('recipe-icon').value || '🍽️';
  const description = document.getElementById('recipe-description').value;
  const category = document.getElementById('recipe-category').value;

  if (!name) {
    showToast('请输入菜谱名称', 'warning');
    return;
  }

  const recipe = {
    name,
    icon,
    description,
    category
  };

  await db.addRecipe(recipe);
  showToast('菜谱已保存', 'success');
  navigateTo('all-recipes');
}

这段简化代码展示了保存菜谱的基本模式：从表单拿到用户输入，进行必要的校验和缺省值处理，然后交给 db.addRecipe 持久化。保存成功后通过 showToast 给出反馈，并跳转到全部菜谱页面。真实项目中还会写入烹饪时间、人数、难度、食材、步骤和标签等字段，但整体思路类似。

🔌 在鸿蒙原生层记录创建事件（ArkTS 片段）

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

@plugin
export default class RecipeAuditPlugin {
  async onRecipeCreated(name: string): Promise<void> {
    // 示例：记录菜谱创建的审计日志，或触发本地通知
    console.info('recipe created: ' + name);
  }
}

ArkTS 侧的 RecipeAuditPlugin 提供了 onRecipeCreated 方法，用来在每次新菜谱创建后记录相关事件。可以将信息写入本地日志，或者根据需要触发一次原生通知，提醒用户「新菜谱已添加」。由于只接受菜谱名称作为参数，实现起来非常轻量。

async function saveRecipeWithNative() {
  const name = document.getElementById('recipe-name').value;
  if (!name) return;

  // 省略构造 recipe 对象和 db.addRecipe 的部分

  if (window.cordova) {
    cordova.exec(null, null, 'RecipeAuditPlugin', 'onRecipeCreated', [name]);
  }
}

在 Web 层，我们可以在保存逻辑完成后调用 saveRecipeWithNative 中的 Cordova 部分，把新菜谱的名称发送给 ArkTS 插件。这样既不会改变原有数据流，又为原生层记录审计信息提供了机会。

📝 小结

添加菜谱页面是家庭菜谱应用的数据入口，它决定了后续所有功能的基础数据质量。依托 Cordova&OpenHarmony 混合架构，我们在 Web 层构建了完整的表单和保存逻辑，同时通过 ArkTS 插件在需要时记录创建事件或触发原生通知，实现了「Web 负责编辑体验、原生负责系统级补充」的合理分工。

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