feat: 增强食物库功能，支持自定义食物的创建与删除，优化用户体验

components/model/food/FoodDetailModal.tsx

@@ -1,6 +1,7 @@
 import { Ionicons } from '@expo/vector-icons';
 import React, { useEffect, useState } from 'react';
 import {
+  Alert,
   Dimensions,
   Keyboard,
   KeyboardAvoidingView,
@@ -14,6 +15,7 @@ import {
   View,
 } from 'react-native';
 // 导入统一的食物类型定义
+import { Colors } from '@/constants/Colors';
 import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import type { FoodItem } from '@/types/food';
 import { Image } from 'expo-image';
@@ -38,8 +40,10 @@ const QUICK_SELECT_OPTIONS = [
 export interface FoodDetailModalProps {
   visible: boolean;
   food: FoodItem | null;
+  category?: { id: string; isSystem?: boolean } | null;
   onClose: () => void;
   onSave: (food: FoodItem, amount: number, unit: string) => void;
+  onDelete?: (foodId: string) => void;
 }
 
 // 获取营养数据，优先使用FoodItem中的数据
@@ -78,8 +82,10 @@ const getNutritionInfo = (food: FoodItem): NutritionInfo => {
 export function FoodDetailModal({
   visible,
   food,
+  category,
   onClose,
-  onSave
+  onSave,
+  onDelete
 }: FoodDetailModalProps) {
   const [amount, setAmount] = useState('100');
   const [isFavorite, setIsFavorite] = useState(false);
@@ -189,9 +195,9 @@ export function FoodDetailModal({
                 <TouchableOpacity onPress={onClose} style={styles.closeButton}>
                   <Ionicons name="close" size={24} color="#666" />
                 </TouchableOpacity>
-                <TouchableOpacity style={styles.correctButton}>
+                {/* <TouchableOpacity style={styles.correctButton}>
                   <Text style={styles.correctButtonText}>我要纠错</Text>
-                </TouchableOpacity>
+                </TouchableOpacity> */}
               </View>
 
               {/* 食物信息 */}
@@ -203,16 +209,44 @@ export function FoodDetailModal({
                   />
                   <Text style={styles.foodName}>{food.name}</Text>
                 </View>
-                <TouchableOpacity
-                  onPress={() => setIsFavorite(!isFavorite)}
-                  style={styles.favoriteButton}
-                >
-                  <Ionicons
-                    name={isFavorite ? "star" : "star-outline"}
-                    size={24}
-                    color={isFavorite ? "#FFD700" : "#CCC"}
-                  />
-                </TouchableOpacity>
+                <View style={styles.actionButtons}>
+                  {/* <TouchableOpacity
+                    onPress={() => setIsFavorite(!isFavorite)}
+                    style={styles.favoriteButton}
+                  >
+                    <Ionicons
+                      name={isFavorite ? "star" : "star-outline"}
+                      size={18}
+                      color={isFavorite ? "#FFD700" : "#CCC"}
+                    />
+                  </TouchableOpacity> */}
+                  {/* 删除按钮 - 仅对自定义食物显示 */}
+                  {category && category.id === 'custom' && onDelete && (
+                    <TouchableOpacity
+                      onPress={() => {
+                        Alert.alert(
+                          '删除食物',
+                          '确定要删除这个自定义食物吗？',
+                          [
+                            { text: '取消', style: 'cancel' },
+                            {
+                              text: '删除',
+                              style: 'destructive',
+                              onPress: () => onDelete(food.id)
+                            }
+                          ]
+                        );
+                      }}
+                      style={styles.deleteButton}
+                    >
+                      <Ionicons
+                        name="trash-outline"
+                        size={18}
+                        color="#FF6B6B"
+                      />
+                    </TouchableOpacity>
+                  )}
+                </View>
               </View>
 
               {/* 营养信息 */}
@@ -367,13 +401,20 @@ const styles = StyleSheet.create({
     color: '#333',
     marginRight: 8,
   },
+  actionButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
   favoriteButton: {
     padding: 8,
   },
+  deleteButton: {
+    padding: 8,
+  },
   nutritionContainer: {
     flexDirection: 'row',
     paddingHorizontal: screenWidth > 400 ? 24 : 16,
-    paddingVertical: 16,
     justifyContent: 'space-between',
   },
   nutritionItem: {
@@ -392,28 +433,29 @@ const styles = StyleSheet.create({
   },
   amountContainer: {
     alignItems: 'center',
-    paddingVertical: 16,
   },
   inputWithUnit: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#E8F5E8',
     borderRadius: 12,
     paddingHorizontal: 20,
     paddingVertical: 16,
+
   },
   amountInput: {
     fontSize: 24,
     fontWeight: '600',
-    color: '#4CAF50',
+    color: Colors.light.text,
     textAlign: 'center',
     minWidth: 80,
     backgroundColor: 'transparent',
+    borderBottomWidth: 1,
+    borderBottomColor: 'gray',
   },
   unitLabel: {
     fontSize: 18,
     fontWeight: '500',
-    color: '#4CAF50',
+    color: Colors.light.text,
     marginLeft: 8,
   },
   quickSelectContainer: {
@@ -432,7 +474,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   quickSelectOptionActive: {
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.primary,
   },
   quickSelectText: {
     fontSize: 14,
@@ -443,7 +485,7 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
   },
   saveButton: {
-    backgroundColor: '#4CAF50',
+    backgroundColor: Colors.light.primary,
     marginHorizontal: screenWidth > 400 ? 24 : 16,
     marginBottom: 16,
     paddingVertical: 14,