feat:

components/model/food/README.md

@@ -0,0 +1,109 @@
+# 食物库弹窗组件
+
+## 功能概述
+
+食物库弹窗组件 (`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 图标库
+- 完全响应式设计，适配不同屏幕尺寸