# 食物库弹窗组件

## 功能概述

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

## 主要特性

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

## 使用方式

### 1. 在营养卡片中使用

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

### 2. 组件集成

```tsx
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
```tsx
interface FoodItem {
  id: string;
  name: string;
  emoji: string;
  calories: number;
  unit: string; // 如 "100克"
}
```

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

## 食物分类

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

## 已实现的功能

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

## 待扩展功能

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

## 技术实现

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