Files

richarjiang 5013464a2c feat(nutrition): 添加营养成分表拍照分析功能

新增营养成分表拍照识别功能，用户可通过拍摄食物包装上的成分表自动解析营养信息：
- 创建成分表分析页面，支持拍照/选择图片和结果展示
- 集成新的营养成分分析API，支持图片上传和流式分析
- 在营养雷达卡片中添加成分表分析入口
- 更新应用版本至1.0.19

2025-10-16 12:16:08 +08:00

3.7 KiB

Raw Blame History

成分表分析功能实现计划

功能概述

实现一个通过拍照识别食物包装上营养成分表的功能，用户可以拍摄食物包装上的成分表，系统会自动识别并解析营养成分信息。

实现步骤

1. 添加路由配置

在 constants/Routes.ts 中添加成分表分析的路由：

// 营养相关路由
NUTRITION_RECORDS: '/nutrition/records',
FOOD_LIBRARY: '/food-library',
VOICE_RECORD: '/voice-record',
NUTRITION_LABEL_ANALYSIS: '/food/nutrition-label-analysis', // 新增

2. 创建成分表分析页面

创建 app/food/nutrition-label-analysis.tsx 页面组件，包含以下功能：

拍照/选择图片功能
图片预览
成分表识别结果展示
营养成分数据展示
保存到饮食记录功能

3. 修改NutritionRadarCard组件

在 components/NutritionRadarCard.tsx 的食物选项容器中添加成分表分析选项：

<TouchableOpacity
  style={styles.foodOptionItem}
  onPress={() => {
    triggerLightHaptic();
    pushIfAuthedElseLogin(`${ROUTES.NUTRITION_LABEL_ANALYSIS}?mealType=${currentMealType}`);
  }}
  activeOpacity={0.7}
>
  <View style={[styles.foodOptionIcon]}>
    <Image
      source={require('@/assets/images/icons/icon-analysis.png')} // 需要添加新图标
      style={styles.foodOptionImage}
    />
  </View>
  <Text style={styles.foodOptionText}>成分表分析</Text>
</TouchableOpacity>

4. 创建API服务

在 services/ 目录下创建 nutritionLabelAnalysis.ts 文件，包含以下API：

图片上传和识别功能
成分表数据解析功能

5. 添加图标资源

需要在 assets/images/icons/ 目录下添加成分表分析相关的图标，建议命名为 icon-analysis.png 或 icon-nutrition-label.png

6. 创建类型定义

在 types/ 目录下创建或更新食物相关的类型定义，添加成分表分析相关的数据结构

技术实现细节

页面结构

顶部导航栏：包含返回按钮和标题"成分表分析"
图片区域：显示拍摄的成分表图片，支持点击预览
识别结果区域：显示识别出的营养成分数据
操作区域：包含重新拍照和保存记录按钮

数据结构

export interface NutritionLabelData {
  energy: number; // 能量 (kJ/千卡)
  protein: number; // 蛋白质 (g)
  fat: number; // 脂肪 (g)
  carbohydrate: number; // 碳水化合物 (g)
  sodium: number; // 钠 (mg)
  fiber?: number; // 膳食纤维 (g)
  sugar?: number; // 糖 (g)
  servingSize?: string; // 每份量
}

export interface NutritionLabelAnalysisResult {
  id: string;
  imageUri: string;
  nutritionData: NutritionLabelData;
  confidence: number;
  analyzedAt: string;
}

API接口设计

// 上传图片并识别成分表
export async function analyzeNutritionLabel(imageUri: string): Promise<NutritionLabelAnalysisResult> {
  // 实现图片上传和识别逻辑
}

// 保存成分表分析结果到饮食记录
export async function saveNutritionLabelToDietRecord(
  analysisResult: NutritionLabelAnalysisResult,
  mealType: MealType
): Promise<DietRecord> {
  // 实现保存逻辑
}

UI设计考虑

Liquid Glass风格：使用毛玻璃效果和渐变背景
动画效果：添加识别过程中的加载动画和结果展示动画
交互反馈：使用触觉反馈和视觉反馈提升用户体验
错误处理：提供友好的错误提示和重试机制

测试计划

测试拍照功能
测试图片识别功能
测试数据保存功能
测试错误处理
测试与现有功能的集成

后续优化

支持多语言成分表识别
添加成分表历史记录
实现成分表数据对比功能
添加成分表数据分享功能

3.7 KiB Raw Blame History Unescape Escape