食谱卡片生成器

浏览器内编辑「名称、配料、步骤」，生成固定 3:4 的食谱卡片，支持系统截图或下载 1080 × 1440 PNG。

技术方案依据：docs/recipe-composer/research.md 与 docs/recipe-composer/plan.md。

命令

npm install        # 安装依赖
npm run dev        # 开发服务器
npm run build      # 生产构建（tsc + vite build）
npm run preview    # 预览生产构建
npm test           # 单元/组件测试（vitest）

浏览器验收

npm run build
npm run preview &          # 启动生产预览（默认 4173 端口）
node scripts/e2e.mjs http://localhost:4173 chromium   # Chrome 验收
node scripts/e2e.mjs http://localhost:4173 firefox    # Firefox 验收
node scripts/visual.mjs http://localhost:4173         # 生成视觉验收素材到 /tmp/recipe-visual

e2e 覆盖：卡片布局恒为 1080 × 1440、预览保持 3:4、超限内容阻止导出、devicePixelRatio 为 1 和 2 时下载均为 1080 × 1440、无横向滚动。

数据模型

type RecipeDraft = {
  title: string;
  ingredients: string[]; // 最多 9 条，每条 30 字
  steps: string[];       // 最多 5 条，每条 60 字
  coverImage?: { name: string; url: string }; // 仅本地上传的 Blob URL
};

• 表单输入实时更新唯一的 RecipeDraft；预览与导出共用同一个无编辑控件的 .recipe-card 节点。
• 内容上限对应卡片固定分区（标题 2 行、配料单行、步骤 2 行）；超限时编辑区显示警告、导出被阻止，卡片以省略号截断防止越界。
• 封面仅接受本地图片（JPEG/PNG/WebP/GIF，≤10MB），替换时回收旧 Blob URL。
• 字体为应用自带的 Smiley Sans woff2，导出前等待 document.fonts.ready。
• PNG 导出使用 html-to-image，固定 canvasWidth: 1080、canvasHeight: 1440、pixelRatio: 1；失败时提示改用系统截图。