变美好菜谱 - 应用流程与设计说明

本文档说明应用的整体架构、业务流程、交互设计与数据流。

一、应用概述

变美好菜谱（Make Every Meal Better）是一款极简风格的 AI 菜谱应用，支持菜谱模式与食材模式，文字、语音、拍照三种输入方式，多国语言，以及拍照识别食材、分享到微信/朋友圈等功能。

二、主业务流程

flowchart TD A[打开 App] --> B[首页] B --> C{选择输入方式} C -->|文字/语音| D[输入食材/菜名] C -->|拍照识别| E[拍照/选图] E --> F[AI 识别食材] F --> D D --> G{选择模式} G -->|菜谱模式| H[点击生成菜谱] G -->|食材模式| I1[点击推荐菜肴] I1 --> J1[选择推荐菜] J1 --> H H --> K[AI 生成菜谱] K --> L[菜谱详情页] L --> M{用户操作} M -->|编辑| N[修改菜谱] M -->|分享| O[分享到微信/朋友圈] M -->|打卡| P[标记计划/完成/跳过] M -->|返回| B N --> L

三、菜谱生成流程

flowchart TD A[用户提交输入] --> B{输入是否为空} B -->|是| C[提示输入] B -->|否| D[调用 RecipeService] D --> E{DeepSeek 可用?} E -->|是| F[调用 DeepSeek API] E -->|否| G{豆包已配置?} G -->|是| H[调用豆包 API] G -->|否| I[返回示例菜谱] F --> J{调用成功?} J -->|是| K[解析菜谱 JSON] J -->|否| H H --> L{调用成功?} L -->|是| K L -->|否| I K --> M[保存到历史] M --> N[跳转菜谱详情页] I --> N

四、拍照识别食材流程

flowchart TD A[用户点击拍照] --> B{选择图片来源} B -->|拍照| C[调用相机] B -->|相册| D[选择相册图片] B -->|文件| E[选择本地文件] C --> F[获取图片] D --> F E --> F F --> G[调用图片识别服务] G --> H{识别引擎} H -->|豆包| I[火山方舟视觉 API] H -->|DeepSeek| J[DeepSeek 视觉 API] I --> K[返回食材文本] J --> K K --> L[填入输入框] L --> M[用户可点击生成菜谱]

五、分享流程

flowchart TD A[菜谱详情页] --> B[点击分享] B --> C[弹出分享面板] C --> D{选择分享方式} D -->|分享到微信| E{微信 SDK 已配置?} D -->|分享到朋友圈| E D -->|生成海报| F[截图生成图片] D -->|复制菜谱| G[复制到剪贴板] D -->|更多分享| H[系统分享面板] E -->|是| I[fluwx 直连微信] E -->|否| H F --> H I --> J[打开微信] H --> K[用户选择目标 App]

六、页面导航结构

flowchart LR subgraph 底部导航 A[首页] --- B[历史] --- C[我的] end A --> D[菜谱详情] B --> D D --> E[编辑弹窗] D --> F[分享面板] C --> G[偏好设置] C --> H[清空历史]

七、核心功能模块

模块	功能说明
首页	菜谱/食材模式切换；大输入框输入食材/菜名（支持文字、语音）；拍照/相册/文件选择图片进行 AI 食材识别；生成菜谱或推荐菜肴；最近生成记录快捷入口
历史	按日期分组的菜谱列表；搜索；打卡状态筛选（计划中/已完成/已跳过）；点击进入详情
菜谱详情	菜名、营养评级、材料、步骤、环形进度条；编辑、删除、点赞、评论、分享
我的	语言切换（中/英/日/韩/西/法/德）；菜系偏好、忌口设置；拍照识别引擎切换（豆包/DeepSeek）；清空历史；关于说明

八、应用整体架构

┌─────────────────────────────────────────────────────────────────┐
│                        变美好菜谱 App                             │
├─────────────────────────────────────────────────────────────────┤
│  首页(Home)     │   历史(History)    │    我的(Profile)           │
│  输入/拍照      │   菜谱列表/搜索    │   偏好设置/拍照识别切换     │
└────────┬────────┴────────┬──────────┴────────────┬──────────────┘
         │                 │                        │
         ▼                 ▼                        ▼
┌────────────────┐ ┌──────────────┐ ┌─────────────────────────────┐
│ 菜谱生成服务    │ │ 本地存储     │ │ 图片识别服务                 │
│ DeepSeek/豆包   │ │ 历史记录     │ │ 豆包/DeepSeek 视觉模型       │
└────────────────┘ └──────────────┘ └─────────────────────────────┘

九、导出为图片（用于审核上传）

如需将流程图导出为图片上传至审核平台：

截图：对上方各流程图区域进行截图保存为 PNG
Mermaid Live：将流程图代码复制到 mermaid.live 可导出高清 PNG/SVG

文档版本：1.0 | 更新日期：2025-03