📌 模块概述

全部菜谱页面负责以卡片列表的方式展示所有菜谱，并支持搜索、筛选和跳转到详情或编辑页面。从用户体验角度，它既是浏览入口，也是后续操作（查看、编辑、收藏）的起点。在 Cordova&OpenHarmony 架构下，这个页面同样主要由 Web 技术实现，通过 db.getAllRecipes() 从 IndexedDB 读取数据，再按时间排序后渲染卡片。必要时可以结合 ArkTS 提供的本地缓存或磁盘空间信息，提示用户是否需要清理数据或导出备份。

🔗 数据加载与排序流程

1. 进入页面：用户点击侧边栏中的「全部菜谱」，主应用 navigateTo('all-recipes')，内部会调用 renderAllRecipes()。
2. 拉取数据：renderAllRecipes() 异步调用 db.getAllRecipes()，拿到包含名称、分类、烹饪时间、用餐人数等字段的数组，然后按创建时间倒序排列，使最新的菜谱排在前面。
3. 渲染卡片：JS 拼接 HTML 字符串，生成每个菜谱的卡片，包括图标、基础信息和三个操作按钮（查看、编辑、收藏）。最后把生成的 HTML 写入页面内容区域。

🔧 Web 层卡片结构（HTML 片段）

<div class="recipe-card">
  <div class="recipe-card-image">🍲</div>
  <div class="recipe-card-body">
    <div class="recipe-card-title">麻婆豆腐</div>
    <div class="recipe-card-meta">
      <div class="recipe-card-meta-item">⏱️ 20 分钟</div>
      <div class="recipe-card-meta-item">👥 2 人份</div>
    </div>
    <div class="recipe-card-actions">
      <button class="recipe-card-action">👁️ 查看</button>
      <button class="recipe-card-action">✏️ 编辑</button>
    </div>
  </div>
</div>

这个 HTML 片段展示了单个菜谱卡片的基本结构：左侧是用 emoji 表示的菜谱图标，右侧是标题、元信息和操作按钮。recipe-card 系列样式在 CSS 中统一定义阴影、圆角和 hover 效果，使页面在 ArkWeb 内核和普通浏览器中都具有一致的视觉表现。通过这样的结构，可以轻松在 JS 中用模板字符串批量生成卡片，既避免重复写 HTML，又便于根据数据动态调整字段。

🔧 全部菜谱渲染逻辑（JavaScript 片段）

async function renderAllRecipes() {
  const recipes = await db.getAllRecipes();
  const sorted = recipes.sort((a, b) => b.createdAt - a.createdAt);

  const listHtml = sorted.map(recipe => `
    <div class="recipe-card">
      <div class="recipe-card-image">${recipe.icon || '🍽️'}</div>
      <div class="recipe-card-body">
        <div class="recipe-card-title">${recipe.name}</div>
      </div>
    </div>
  `).join('');

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

这段简化后的 renderAllRecipes 突出了几个核心要点。首先，使用 await db.getAllRecipes() 获取所有菜谱数据，说明页面在逻辑上完全依赖 Web 层的本地数据库封装，而不直接操作 IndexedDB 细节。其次，通过 sort 按时间排序保证用户最近添加的菜谱更靠前，符合常见使用习惯。最后用 map + join 生成 HTML 字符串，一次性写入 #page-container，减少多次 DOM 操作带来的性能开销。这种模式在 ArkWeb 中同样适用，可以充分利用 JavaScript 引擎的性能优化。

🔌 与鸿蒙原生的交互扩展（ArkTS 片段）

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

@plugin
export default class RecipeStoragePlugin {
  async getDatabaseSize(): Promise<number> {
    // 实际项目中可以统计 IndexedDB 或文件备份的大致大小
    const sizeInKB = 512; // 示例：512KB
    return sizeInKB;
  }
}

在 ArkTS 原生侧，我们可以通过一个简单的 RecipeStoragePlugin 对 Web 层暴露「数据体积」之类的系统信息。这里的示例方法 getDatabaseSize 返回一个数字，代表当前菜谱数据的近似大小。当用户在全部菜谱页面频繁滚动、数据量不断增大时，我们可以基于这个信息，在 Web 层给出备份或清理的提示。

function checkRecipeStorageUsage() {
  if (!window.cordova) return;
  cordova.exec(
    (size) => {
      if (size > 1024) {
        showToast('菜谱数据已超过 1MB，建议前往“备份恢复”导出备份', 'warning');
      }
    },
    null,
    'RecipeStoragePlugin',
    'getDatabaseSize',
    []
  );
}

配合上面的 ArkTS 插件，Web 层在渲染完全部菜谱列表后调用 checkRecipeStorageUsage()，通过 cordova.exec 询问原生侧当前数据大小。当返回值超过一定阈值时，就使用已有的 showToast 组件在界面右下角弹出提示。由于 ArkWeb 与 Cordova 桥接已经在应用启动时初始化，这里只需要关注插件名称和方法名称即可，逻辑相对简单清晰。

📝 小结

全部菜谱页面是家庭菜谱应用中访问频率最高的页面之一，它将 IndexedDB 中的所有菜谱以卡片形式集中展示，并提供查看、编辑和收藏等快捷操作。在 Cordova&OpenHarmony 的混合开发模式下，我们把数据拉取、排序和 UI 渲染全部放在 Web 层实现，保证功能在浏览器和鸿蒙设备上都能一致运行；同时通过 ArkTS 插件补充数据体积等系统信息，帮助用户在数据增多时及时做备份决策。这种「Web 负责 UI 与业务，ArkTS 负责系统能力与状态」的分工，是构建跨端应用时非常推荐的一种实践方式。

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