食物库弹窗组件

功能概述

食物库弹窗组件 (FoodLibraryModal) 是一个完整的食物选择界面，用户可以通过分类浏览和搜索来选择食物。

主要特性

✅ 完全按照设计图还原的UI界面
✅ 左侧分类导航，右侧食物列表
✅ 搜索功能
✅ 食物信息显示（名称、卡路里、单位）
✅ 餐次选择（早餐、午餐、晚餐、加餐）
✅ 自定义和收藏功能预留

使用方式

1. 在营养卡片中使用

在 statistics.tsx 页面的营养摄入分析卡片右上角，点击绿色的加号按钮即可打开食物库弹窗。

2. 组件集成

import { FoodLibraryModal, FoodItem } from '@/components/model/food/FoodLibraryModal';

// 在组件中使用
const [showFoodLibrary, setShowFoodLibrary] = useState(false);

const handleSelectFood = (food: FoodItem) => {
  console.log('选择了食物:', food);
  // 处理食物选择逻辑
};

<FoodLibraryModal
  visible={showFoodLibrary}
  onClose={() => setShowFoodLibrary(false)}
  onSelectFood={handleSelectFood}
  mealType="breakfast"
/>

组件结构

components/
  model/
    food/
      ├── FoodLibraryModal.tsx  # 主要弹窗组件
      └── index.ts              # 导出文件

数据结构

FoodItem

interface FoodItem {
  id: string;
  name: string;
  emoji: string;
  calories: number;
  unit: string; // 如 "100克"
}

FoodCategory

interface FoodCategory {
  id: string;
  name: string;
  foods: FoodItem[];
}

食物分类

常见
自定义
收藏
水果蔬菜
肉蛋奶
豆类坚果
零食饮料
主食
菜肴

已实现的功能

分类浏览 - 左侧导航可切换不同食物分类
搜索功能 - 顶部搜索框支持食物名称搜索
食物选择 - 点击右侧加号按钮选择食物
餐次指示 - 底部显示当前餐次（早餐、午餐、晚餐、加餐）
UI动画 - 模态弹窗的滑入滑出动画

待扩展功能

自定义食物 - 用户可以添加自定义食物
收藏功能 - 用户可以收藏常用食物
营养详情 - 显示更详细的营养成分信息
数据持久化 - 将选择的食物保存到营养记录中
餐次切换 - 底部餐次选择器的交互功能

技术实现

使用 React Native Modal 实现全屏弹窗
使用 ScrollView 实现分类和食物列表的滚动
使用 TouchableOpacity 实现交互反馈
使用 Ionicons 图标库
完全响应式设计，适配不同屏幕尺寸