📌 模块概述

分享菜谱页面让用户可以将家庭菜谱中的某一道菜以链接、文本或二维码形式分享给其他人。虽然本项目整体是本地单机应用，但仍可以通过导出 JSON 片段、生成分享文本或复制内部链接等方式实现「轻量分享」。在 Cordova&OpenHarmony 环境下，我们还可以通过 ArkTS 插件调用系统分享面板，将菜谱内容直接分享到消息应用或社交软件。

🔗 分享流程

1. 用户在分享页面看到所有菜谱的简化列表；
2. 为每条菜谱提供「生成分享链接」或「复制分享内容」按钮；
3. 点击按钮后，Web 层根据菜谱数据生成一段包含名称、食材、步骤摘要的文本或伪链接；
4. 用户可以在 Web 层复制内容，也可以在支持的设备上调用原生分享面板，由 ArkTS 接手分享逻辑；
5. 某些场景下，还可以将菜谱以 JSON 格式导出，方便导入到另一台设备上运行的同款应用中。

🔧 分享列表结构（HTML 片段）

<div class="card">
  <div class="card-header">
    <div>
      <h3 class="card-title">宫保鸡丁</h3>
    </div>
    <button class="btn btn-sm btn-primary" onclick="generateShareText(1)">生成分享内容</button>
  </div>
</div>

这个 HTML 片段展示了分享页面中一条菜谱记录的形态：只显示菜谱名称，并提供一个按钮用于生成分享内容。通过 generateShareText(id) 函数可以获取完整菜谱数据并拼出用于分享的文本。

🔧 生成分享内容逻辑（JavaScript 片段）

async function generateShareText(id) {
  const recipe = await db.getRecipe(id);
  if (!recipe) return;

  const text = `【${recipe.name}】\n分类：${recipe.category || ''}\n食材：${(recipe.ingredients || []).join('、')}\n步骤：${(recipe.steps || []).join(' / ')}`;

  await navigator.clipboard.writeText(text);
  showToast('分享内容已复制到剪贴板', 'success');
}

这段代码展示了如何在 Web 层根据菜谱对象生成一段适合复制到聊天软件中的分享文本。内容包括名称、分类、食材列表和步骤摘要。通过 navigator.clipboard 将文本写入剪贴板，用户就可以在任何地方粘贴使用。这个逻辑在浏览器和 ArkWeb 中都可以正常工作。

🔌 调用鸿蒙系统分享面板（ArkTS 片段）

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

@plugin
export default class SharePlugin {
  async shareText(text: string): Promise<void> {
    // 示例：调用系统分享面板，将 text 作为分享内容
    console.info('share text: ' + text);
  }
}

ArkTS 侧的 SharePlugin 提供 shareText 方法，负责接收分享内容并调用鸿蒙的系统分享能力（如 @ohos.share 相关接口）。这里用打印日志代替真实实现，只强调参数与接口形态。

async function shareRecipeNative(id) {
  const recipe = await db.getRecipe(id);
  if (!recipe || !window.cordova) return;

  const text = `【${recipe.name}】 ${recipe.description || ''}`;
  cordova.exec(null, null, 'SharePlugin', 'shareText', [text]);
}

在 Web 层，我们封装 shareRecipeNative 函数，当用户点击「通过系统分享」按钮时，先从数据库读取菜谱数据，构造简洁的文本，然后通过 cordova.exec 调用 ArkTS 插件。这样在鸿蒙设备上可以打开系统分享面板，而在浏览器中则不会尝试调用原生能力。

📝 小结

分享菜谱页面为家庭菜谱应用提供了对外输出能力，用户可以通过复制文本或调用鸿蒙系统分享面板，把家中常做的菜发送给亲友。利用 Cordova&OpenHarmony 混合架构，我们在 Web 层实现了分享内容生成与复制逻辑，并通过 ArkTS 插件集成系统级分享能力，实现了本地应用与外部世界的连接。