feat: 优化内容

app/food-library.tsx

@@ -1,7 +1,10 @@
+import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal';
 import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
+import { HeaderBar } from '@/components/ui/HeaderBar';
+import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import { useFoodLibrary, useFoodSearch } from '@/hooks/useFoodLibrary';
-import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
 import { addDietRecord, type CreateDietRecordDto } from '@/services/dietRecords';
+import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
 import { Ionicons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
 import { useLocalSearchParams, useRouter } from 'expo-router';
@@ -9,9 +12,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
   Modal,
-  SafeAreaView,
   ScrollView,
-  StatusBar,
   StyleSheet,
   Text,
   TextInput,
@@ -47,6 +48,7 @@ export default function FoodLibraryScreen() {
   const [showMealSelector, setShowMealSelector] = useState(false);
   const [currentMealType, setCurrentMealType] = useState<MealType>(mealType);
   const [isRecording, setIsRecording] = useState(false);
+  const [showCreateCustomFood, setShowCreateCustomFood] = useState(false);
 
   // 获取当前选中的分类
   const selectedCategory = categories.find(cat => cat.id === selectedCategoryId);
@@ -59,8 +61,6 @@ export default function FoodLibraryScreen() {
     }
 
     if (selectedCategory) {
-      console.log('selectedCategory', selectedCategory);
-
       return selectedCategory.foods
     }
 
@@ -176,6 +176,45 @@ export default function FoodLibraryScreen() {
     setShowMealSelector(false);
   };
 
+  // 处理创建自定义食物
+  const handleCreateCustomFood = () => {
+    setShowCreateCustomFood(true);
+  };
+
+  // 处理保存自定义食物
+  const handleSaveCustomFood = (customFoodData: CustomFoodData) => {
+    // 创建一个临时的FoodItem对象
+    const customFoodItem: FoodItem = {
+      id: `custom_${Date.now()}`,
+      name: customFoodData.name,
+      calories: customFoodData.calories,
+      unit: customFoodData.unit,
+      description: `自定义食物 - ${customFoodData.name}`,
+      imageUrl: customFoodData.imageUrl,
+      protein: customFoodData.protein,
+      fat: customFoodData.fat,
+      carbohydrate: customFoodData.carbohydrate,
+    };
+
+    // 直接添加到选择列表中
+    const newSelectedItem: SelectedFoodItem = {
+      id: `custom_${Date.now()}`,
+      food: customFoodItem,
+      amount: customFoodData.defaultAmount,
+      unit: customFoodData.unit,
+      calories: Math.round((customFoodData.calories * customFoodData.defaultAmount) / 100)
+    };
+
+    setSelectedFoodItems(prev => [...prev, newSelectedItem]);
+
+    console.log('保存自定义食物:', customFoodData);
+  };
+
+  // 关闭自定义食物弹窗
+  const handleCloseCreateCustomFood = () => {
+    setShowCreateCustomFood(false);
+  };
+
   // 餐次选择选项
   const mealOptions = [
     { key: 'breakfast' as const, label: '早餐', color: '#FF6B35' },
@@ -185,19 +224,19 @@ export default function FoodLibraryScreen() {
   ];
 
   return (
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
-      <StatusBar barStyle="dark-content" backgroundColor="#F8F9FA" />
-
       {/* 头部 */}
-      <View style={styles.header}>
+      <HeaderBar
-        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
+        title="食物库"
-          <Ionicons name="chevron-back" size={24} color="#333" />
+        onBack={() => router.back()}
-        </TouchableOpacity>
+        transparent={false}
-        <Text style={styles.headerTitle}>食物库</Text>
+        variant="elevated"
-        <TouchableOpacity style={styles.customButton}>
+        right={
-          <Text style={styles.customButtonText}>自定义</Text>
+          <TouchableOpacity style={styles.customButton} onPress={handleCreateCustomFood}>
-        </TouchableOpacity>
+            <Text style={styles.customButtonText}>自定义</Text>
-      </View>
+          </TouchableOpacity>
+        }
+      />
 
       {/* 搜索框 */}
       <View style={styles.searchContainer}>
@@ -275,11 +314,11 @@ export default function FoodLibraryScreen() {
                   {filteredFoods.map((food) => (
                     <View key={food.id} style={styles.foodItem}>
                       <View style={styles.foodInfo}>
-                        {food.imageUrl ? <Image
+                        <Image
                           style={styles.foodImage}
-                          source={{ uri: food.imageUrl }}
+                          source={{ uri: food.imageUrl || DEFAULT_IMAGE_FOOD }}
                           cachePolicy={'memory-disk'}
-                        /> : <Text style={styles.foodEmoji}>{food.emoji || '🍽️'}</Text>}
+                        />
                         <View style={styles.foodDetails}>
                           <Text style={styles.foodName}>{food.name}</Text>
                           <Text style={styles.foodCalories}>
@@ -436,7 +475,14 @@ export default function FoodLibraryScreen() {
         onClose={handleCloseFoodDetail}
         onSave={handleSaveFood}
       />
-    </SafeAreaView>
+
+      {/* 创建自定义食物弹窗 */}
+      <CreateCustomFoodModal
+        visible={showCreateCustomFood}
+        onClose={handleCloseCreateCustomFood}
+        onSave={handleSaveCustomFood}
+      />
+    </View>
   );
 }
 
@@ -445,24 +491,6 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#F8F9FA',
   },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    backgroundColor: '#F8F9FA',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E5E5',
-  },
-  backButton: {
-    padding: 4,
-  },
-  headerTitle: {
-    fontSize: 18,
-    fontWeight: '600',
-    color: '#333',
-  },
   customButton: {
     paddingHorizontal: 8,
     paddingVertical: 4,

components/NutritionRecordCard.tsx

@@ -231,6 +231,13 @@ export function NutritionRecordCard({
 const styles = StyleSheet.create({
   container: {
     marginBottom: 12,
+    // iOS 阴影效果 - 更自然的阴影
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.08,
+    shadowRadius: 4,
+    // Android 阴影效果
+    elevation: 2,
   },
   card: {
     flex: 1,
@@ -238,12 +245,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#FFFFFF',
     borderRadius: 12,
     padding: 12,
-    marginHorizontal: 4,
+
-    shadowColor: '#000',
+
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 6,
-    elevation: 2,
   },
   mainContent: {
     flex: 1,
@@ -348,11 +351,17 @@ const styles = StyleSheet.create({
   },
   popoverContainer: {
     borderRadius: 12,
-    shadowColor: '#000',
+    backgroundColor: '#FFFFFF',
-    shadowOffset: { width: 0, height: 2 },
+    // iOS 阴影效果
-    shadowOpacity: 0.1,
+    shadowColor: '#000000',
-    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 4 },
-    elevation: 5,
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    // Android 阴影效果
+    elevation: 8,
+    // 添加边框
+    borderWidth: 0.5,
+    borderColor: 'rgba(0, 0, 0, 0.08)',
   },
   popoverBackground: {
     backgroundColor: 'rgba(0, 0, 0, 0.3)',

components/model/food/CreateCustomFoodModal.tsx

@@ -0,0 +1,711 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import * as ImagePicker from 'expo-image-picker';
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Dimensions,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View
+} from 'react-native';
+
+export interface CreateCustomFoodModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onSave: (foodData: CustomFoodData) => void;
+}
+
+export interface CustomFoodData {
+  name: string;
+  unit: string;
+  defaultAmount: number;
+  caloriesUnit: string;
+  calories: number;
+  imageUrl?: string;
+  protein?: number;
+  fat?: number;
+  carbohydrate?: number;
+}
+
+export function CreateCustomFoodModal({
+  visible,
+  onClose,
+  onSave
+}: CreateCustomFoodModalProps) {
+  const [foodName, setFoodName] = useState('');
+  const [foodUnit, setFoodUnit] = useState('');
+  const [defaultAmount, setDefaultAmount] = useState('100');
+  const [caloriesUnit, setCaloriesUnit] = useState('千卡');
+  const [calories, setCalories] = useState('100');
+  const [imageUrl, setImageUrl] = useState<string>('');
+  const [protein, setProtein] = useState('0');
+  const [fat, setFat] = useState('0');
+  const [carbohydrate, setCarbohydrate] = useState('0');
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  // 键盘监听
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
+      (e) => {
+        setKeyboardHeight(e.endCoordinates.height);
+      }
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
+      () => {
+        setKeyboardHeight(0);
+      }
+    );
+
+    return () => {
+      keyboardDidShowListener?.remove();
+      keyboardDidHideListener?.remove();
+    };
+  }, []);
+
+  // 重置表单
+  useEffect(() => {
+    if (visible) {
+      setFoodName('');
+      setFoodUnit('');
+      setDefaultAmount('100');
+      setCaloriesUnit('千卡');
+      setCalories('100');
+      setImageUrl('');
+      setProtein('0');
+      setFat('0');
+      setCarbohydrate('0');
+    }
+  }, [visible]);
+
+  // 选择热量单位
+
+
+  // 选择图片
+  const handleSelectImage = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== 'granted') {
+      Alert.alert('需要相册权限', '请在设置中开启相册权限');
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 1,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setImageUrl(result.assets[0].uri);
+    }
+  };
+
+  // 计算实际热量预览
+  const actualCalories = Math.round((parseFloat(calories) || 0) * (parseFloat(defaultAmount) || 0) / 100);
+
+  // 保存自定义食物
+  const handleSave = () => {
+    if (!foodName.trim()) {
+      Alert.alert('提示', '请输入食物名称');
+      return;
+    }
+    if (!foodUnit.trim()) {
+      Alert.alert('提示', '请输入食物单位');
+      return;
+    }
+    if (!calories.trim() || parseFloat(calories) <= 0) {
+      Alert.alert('提示', '请输入有效的热量值');
+      return;
+    }
+
+    const foodData: CustomFoodData = {
+      name: foodName.trim(),
+      unit: foodUnit.trim(),
+      defaultAmount: parseFloat(defaultAmount) || 100,
+      caloriesUnit,
+      calories: parseFloat(calories) || 0,
+      imageUrl: imageUrl || undefined,
+      protein: parseFloat(protein) || undefined,
+      fat: parseFloat(fat) || undefined,
+      carbohydrate: parseFloat(carbohydrate) || undefined,
+    };
+
+    onSave(foodData);
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent={true}
+      onRequestClose={onClose}
+      presentationStyle="overFullScreen"
+    >
+      <View style={styles.overlay}>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          style={styles.keyboardAvoidingView}
+        >
+          <View style={[
+            styles.modalContainer,
+            keyboardHeight > 0 && {
+              height: screenHeight - keyboardHeight,
+              maxHeight: screenHeight - keyboardHeight,
+            }
+          ]}>
+            <ScrollView
+              style={styles.scrollView}
+              showsVerticalScrollIndicator={false}
+              keyboardShouldPersistTaps="handled"
+              contentContainerStyle={{
+                flexGrow: 1,
+                paddingBottom: keyboardHeight > 0 ? 20 : 0
+              }}
+            >
+              {/* 头部 */}
+              <View style={styles.header}>
+                <TouchableOpacity onPress={onClose} style={styles.backButton}>
+                  <Ionicons name="chevron-back" size={24} color="#333" />
+                </TouchableOpacity>
+                <Text style={styles.headerTitle}>创建自定义食物</Text>
+                <TouchableOpacity
+                  style={[
+                    styles.saveButton,
+                    (!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonDisabled
+                  ]}
+                  onPress={handleSave}
+                  disabled={!foodName.trim() || !foodUnit.trim() || !calories.trim()}
+                >
+                  <Text style={[
+                    styles.saveButtonText,
+                    (!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonTextDisabled
+                  ]}>保存</Text>
+                </TouchableOpacity>
+              </View>
+
+              {/* 效果预览区域 */}
+              <View style={styles.previewSection}>
+                <Text style={styles.sectionTitle}>效果预览</Text>
+                <View style={styles.previewCard}>
+                  <View style={styles.previewContent}>
+                    {imageUrl ? (
+                      <Image style={styles.previewImage} source={{ uri: imageUrl }} />
+                    ) : (
+                      <View style={styles.previewImagePlaceholder}>
+                        <Ionicons name="restaurant" size={20} color="#999" />
+                      </View>
+                    )}
+                    <View style={styles.previewInfo}>
+                      <Text style={styles.previewName}>
+                        {foodName || '食物名称'}
+                      </Text>
+                      <Text style={styles.previewCalories}>
+                        {actualCalories}{caloriesUnit}/{defaultAmount}{foodUnit}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+
+              {/* 基本信息 */}
+              <View style={styles.section}>
+                <View style={styles.sectionHeader}>
+                  <Text style={styles.sectionTitle}>基本信息</Text>
+                  <Text style={styles.requiredIndicator}>*</Text>
+                </View>
+                <View style={styles.sectionCard}>
+                  {/* 食物名称和单位 */}
+                  <View style={styles.inputRowGroup}>
+                    <View style={styles.inputRowItem}>
+                      <Text style={styles.inputLabel}>食物名称</Text>
+                      <TextInput
+                        style={styles.modernTextInput}
+                        value={foodName}
+                        onChangeText={setFoodName}
+                        placeholder="例如，汉堡"
+                        placeholderTextColor="#A0A0A0"
+                      />
+                    </View>
+                    <View style={styles.inputRowItem}>
+                      <Text style={styles.inputLabel}>食物单位</Text>
+                      <TextInput
+                        style={styles.modernTextInput}
+                        value={foodUnit}
+                        onChangeText={setFoodUnit}
+                        placeholder="例如，克"
+                        placeholderTextColor="#A0A0A0"
+                      />
+                    </View>
+                  </View>
+
+                  {/* 默认数量 */}
+                  <View style={styles.inputRowContainer}>
+                    <Text style={styles.inputRowLabel}>默认数量</Text>
+                    <View style={styles.inputRowContent}>
+                      <View style={styles.numberInputContainer}>
+                        <TextInput
+                          style={styles.modernNumberInput}
+                          value={defaultAmount}
+                          onChangeText={setDefaultAmount}
+                          keyboardType="numeric"
+                          placeholder="100"
+                          placeholderTextColor="#A0A0A0"
+                        />
+                        <Text style={styles.unitText}>{foodUnit || '单位'}</Text>
+                      </View>
+                    </View>
+                  </View>
+
+                  {/* 热量单位 */}
+                  <View style={styles.inputRowContainer}>
+                    <Text style={styles.inputRowLabel}>热量单位</Text>
+                    <Text style={styles.selectButtonText}>千卡</Text>
+                  </View>
+
+                  {/* 食物热量 */}
+                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
+                    <Text style={styles.inputRowLabel}>食物热量</Text>
+                    <View style={styles.inputRowContent}>
+                      <View style={styles.numberInputContainer}>
+                        <TextInput
+                          style={styles.modernNumberInput}
+                          value={calories}
+                          onChangeText={setCalories}
+                          keyboardType="numeric"
+                          placeholder="100"
+                          placeholderTextColor="#A0A0A0"
+                        />
+                        <Text style={styles.unitText}>千卡</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+
+              {/* 可选信息 */}
+              <View style={styles.section}>
+                <Text style={styles.sectionTitle}>可选信息</Text>
+                <View style={styles.sectionCard}>
+                  {/* 照片 */}
+                  <View style={styles.inputRowContainer}>
+                    <Text style={styles.inputRowLabel}>照片</Text>
+                    <View style={styles.inputRowContent}>
+                      <TouchableOpacity style={styles.modernImageSelector} onPress={handleSelectImage}>
+                        {imageUrl ? (
+                          <Image style={styles.selectedImage} source={{ uri: imageUrl }} />
+                        ) : (
+                          <View style={styles.modernImagePlaceholder}>
+                            <Ionicons name="camera" size={28} color="#A0A0A0" />
+                            <Text style={styles.imagePlaceholderText}>添加照片</Text>
+                          </View>
+                        )}
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+
+                  {/* 蛋白质 */}
+                  <View style={styles.inputRowContainer}>
+                    <Text style={styles.inputRowLabel}>蛋白质</Text>
+                    <View style={styles.inputRowContent}>
+                      <View style={styles.numberInputContainer}>
+                        <TextInput
+                          style={styles.modernNumberInput}
+                          value={protein}
+                          onChangeText={setProtein}
+                          keyboardType="numeric"
+                          placeholder="0"
+                          placeholderTextColor="#A0A0A0"
+                        />
+                        <Text style={styles.unitText}>克</Text>
+                      </View>
+                    </View>
+                  </View>
+
+                  {/* 脂肪 */}
+                  <View style={styles.inputRowContainer}>
+                    <Text style={styles.inputRowLabel}>脂肪</Text>
+                    <View style={styles.inputRowContent}>
+                      <View style={styles.numberInputContainer}>
+                        <TextInput
+                          style={styles.modernNumberInput}
+                          value={fat}
+                          onChangeText={setFat}
+                          keyboardType="numeric"
+                          placeholder="0"
+                          placeholderTextColor="#A0A0A0"
+                        />
+                        <Text style={styles.unitText}>克</Text>
+                      </View>
+                    </View>
+                  </View>
+
+                  {/* 碳水化合物 */}
+                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
+                    <Text style={styles.inputRowLabel}>碳水化合物</Text>
+                    <View style={styles.inputRowContent}>
+                      <View style={styles.numberInputContainer}>
+                        <TextInput
+                          style={styles.modernNumberInput}
+                          value={carbohydrate}
+                          onChangeText={setCarbohydrate}
+                          keyboardType="numeric"
+                          placeholder="0"
+                          placeholderTextColor="#A0A0A0"
+                        />
+                        <Text style={styles.unitText}>克</Text>
+                      </View>
+                    </View>
+                  </View>
+                </View>
+              </View>
+
+              {/* 底部提示 */}
+              <View style={styles.disclaimer}>
+                <Text style={styles.disclaimerText}>
+                  *为了避免历史饮食数据混乱，自定义食物创建后不支持修改。
+                </Text>
+              </View>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  keyboardAvoidingView: {
+    flex: 1,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+    marginTop: 50,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E5E5',
+  },
+  backButton: {
+    padding: 4,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+    flex: 1,
+    textAlign: 'center',
+    marginHorizontal: 20,
+  },
+  saveButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  saveButtonDisabled: {
+    opacity: 0.5,
+  },
+  saveButtonText: {
+    fontSize: 16,
+    color: '#4CAF50',
+    fontWeight: '500',
+  },
+  saveButtonTextDisabled: {
+    color: '#999',
+  },
+  previewSection: {
+    paddingHorizontal: 16,
+    paddingTop: 20,
+    paddingBottom: 16,
+  },
+  previewCard: {
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 8,
+  },
+  previewContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  previewImage: {
+    width: 32,
+    height: 32,
+    borderRadius: 4,
+  },
+  previewImagePlaceholder: {
+    width: 32,
+    height: 32,
+    borderRadius: 4,
+    backgroundColor: '#E5E5E5',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  previewInfo: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  previewName: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+    marginBottom: 2,
+  },
+  previewCalories: {
+    fontSize: 14,
+    color: '#666',
+  },
+  section: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#333',
+  },
+  requiredIndicator: {
+    fontSize: 18,
+    color: '#FF4444',
+    marginLeft: 4,
+  },
+  inputGroup: {
+    marginBottom: 20,
+  },
+  inputRowGroup: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 20,
+  },
+  inputRowItem: {
+    flex: 1,
+  },
+  inputLabel: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 8,
+    fontWeight: '500',
+  },
+  modernTextInput: {
+    borderWidth: 1.5,
+    borderColor: '#E8E8E8',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+    color: '#333',
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  numberInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1.5,
+    borderColor: '#E8E8E8',
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  modernNumberInput: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    fontSize: 16,
+    color: '#333',
+    textAlign: 'right',
+  },
+  unitText: {
+    fontSize: 14,
+    color: '#666',
+    paddingRight: 16,
+    minWidth: 40,
+    textAlign: 'center',
+  },
+  modernSelectButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1.5,
+    borderColor: '#E8E8E8',
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  selectButtonText: {
+    fontSize: 16,
+    color: '#333',
+    fontWeight: '500',
+  },
+  modernImageSelector: {
+    alignSelf: 'flex-end',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  selectedImage: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+  },
+  modernImagePlaceholder: {
+    width: 80,
+    height: 80,
+    borderRadius: 16,
+    backgroundColor: '#F8F8F8',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: '#E8E8E8',
+    borderStyle: 'dashed',
+  },
+  imagePlaceholderText: {
+    fontSize: 12,
+    color: '#A0A0A0',
+    marginTop: 4,
+    fontWeight: '500',
+  },
+  nutritionRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 20,
+  },
+  nutritionItem: {
+    flex: 1,
+  },
+  // 保留旧样式以防兼容性问题
+  textInput: {
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 16,
+    color: '#333',
+    backgroundColor: '#FFFFFF',
+  },
+  numberInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 16,
+    color: '#333',
+    backgroundColor: '#FFFFFF',
+    textAlign: 'right',
+  },
+  inputWithUnit: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  inputUnit: {
+    fontSize: 16,
+    color: '#666',
+    minWidth: 30,
+  },
+  selectButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF',
+  },
+  imageSelector: {
+    alignSelf: 'flex-end',
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  imagePlaceholder: {
+    width: 60,
+    height: 60,
+    borderRadius: 12,
+    backgroundColor: '#F0F0F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E5E5E5',
+  },
+  disclaimer: {
+    paddingHorizontal: 16,
+    paddingVertical: 20,
+    paddingBottom: 40,
+  },
+  disclaimerText: {
+    fontSize: 12,
+    color: '#999',
+    lineHeight: 18,
+  },
+  sectionCard: {
+    backgroundColor: '#F8F9FA',
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 8,
+  },
+  // 新增行布局样式
+  inputRowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  inputRowLabel: {
+    fontSize: 14,
+    color: '#666',
+    fontWeight: '500',
+    width: 80,
+    marginRight: 12,
+  },
+  inputRowContent: {
+    flex: 1,
+  },
+});

components/model/food/FoodDetailModal.tsx

@@ -14,7 +14,9 @@ import {
   View,
 } from 'react-native';
 // 导入统一的食物类型定义
+import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import type { FoodItem } from '@/types/food';
+import { Image } from 'expo-image';
 
 // 导入统一的食物类型定义
 
@@ -25,12 +27,11 @@ interface NutritionInfo {
   carbs: number;      // 碳水化合物(克)
 }
 
-// 单位选项
+// 快捷选择选项（基于100克的倍数）
-const UNIT_OPTIONS = [
+const QUICK_SELECT_OPTIONS = [
-  { id: 'gram', name: '克', ratio: 1 },
+  { id: 'small', name: '小份', amount: 80 },   // 80克
-  { id: 'small', name: '小份', ratio: 0.8 },
+  { id: 'medium', name: '中份', amount: 120 }, // 120克
-  { id: 'medium', name: '中份', ratio: 1.2 },
+  { id: 'large', name: '大份', amount: 150 },  // 150克
-  { id: 'large', name: '大份', ratio: 1.5 },
 ];
 
 // 食物详情弹窗属性
@@ -41,9 +42,24 @@ export interface FoodDetailModalProps {
   onSave: (food: FoodItem, amount: number, unit: string) => void;
 }
 
-// 模拟营养数据
+// 获取营养数据，优先使用FoodItem中的数据
-const getNutritionInfo = (foodId: string): NutritionInfo => {
+const getNutritionInfo = (food: FoodItem): NutritionInfo => {
-  const nutritionData: Record<string, NutritionInfo> = {
+  // 检查是否有任何营养数据
+  const hasNutritionData = food.protein !== undefined ||
+    food.fat !== undefined ||
+    food.carbohydrate !== undefined;
+
+  if (hasNutritionData) {
+    // 优先使用FoodItem中的营养数据
+    return {
+      protein: food.protein || 0,
+      fat: food.fat || 0,
+      carbs: food.carbohydrate || 0,
+    };
+  }
+
+  // 如果FoodItem中没有营养数据，使用模拟数据作为后备
+  const fallbackNutritionData: Record<string, NutritionInfo> = {
     '5': { protein: 0.8, fat: 0.6, carbs: 14.5 }, // 猕猴桃
     '1': { protein: 0.2, fat: 0.0, carbs: 0.1 },  // 咖啡
     '2': { protein: 12.8, fat: 11.1, carbs: 0.7 }, // 荷包蛋
@@ -56,7 +72,7 @@ const getNutritionInfo = (foodId: string): NutritionInfo => {
     '10': { protein: 4.0, fat: 1.2, carbs: 22.8 }, // 玉米
   };
 
-  return nutritionData[foodId] || { protein: 0, fat: 0, carbs: 0 };
+  return fallbackNutritionData[food.id] || { protein: 0, fat: 0, carbs: 0 };
 };
 
 export function FoodDetailModal({
@@ -66,7 +82,6 @@ export function FoodDetailModal({
   onSave
 }: FoodDetailModalProps) {
   const [amount, setAmount] = useState('100');
-  const [selectedUnit, setSelectedUnit] = useState(UNIT_OPTIONS[0]);
   const [isFavorite, setIsFavorite] = useState(false);
   const [keyboardHeight, setKeyboardHeight] = useState(0);
 
@@ -98,7 +113,6 @@ export function FoodDetailModal({
     if (visible && food) {
       console.log('FoodDetailModal: 接收到食物数据:', food);
       setAmount('100');
-      setSelectedUnit(UNIT_OPTIONS[0]);
       setIsFavorite(false);
     }
   }, [visible, food]);
@@ -116,19 +130,22 @@ export function FoodDetailModal({
     return null;
   }
 
-  const nutrition = getNutritionInfo(food.id);
+  const nutrition = getNutritionInfo(food);
   const amountNum = parseFloat(amount) || 0;
-  const unitRatio = selectedUnit.ratio;
-  const finalAmount = amountNum * unitRatio;
 
-  // 计算实际营养值
+  // 计算实际营养值（基于输入的克数）
-  const actualCalories = Math.round((food.calories * finalAmount) / 100);
+  const actualCalories = Math.round((food.calories * amountNum) / 100);
-  const actualProtein = ((nutrition.protein * finalAmount) / 100).toFixed(1);
+  const actualProtein = ((nutrition.protein * amountNum) / 100).toFixed(1);
-  const actualFat = ((nutrition.fat * finalAmount) / 100).toFixed(1);
+  const actualFat = ((nutrition.fat * amountNum) / 100).toFixed(1);
-  const actualCarbs = ((nutrition.carbs * finalAmount) / 100).toFixed(1);
+  const actualCarbs = ((nutrition.carbs * amountNum) / 100).toFixed(1);
+
+  // 快捷选择处理函数
+  const handleQuickSelect = (selectedAmount: number) => {
+    setAmount(selectedAmount.toString());
+  };
 
   const handleSave = () => {
-    onSave(food, finalAmount, selectedUnit.name);
+    onSave(food, amountNum, '克');
     onClose();
   };
 
@@ -180,7 +197,10 @@ export function FoodDetailModal({
               {/* 食物信息 */}
               <View style={styles.foodHeader}>
                 <View style={styles.foodInfo}>
-                  <Text style={styles.foodEmoji}>{food.emoji || '🍽️'}</Text>
+                  <Image
+                    style={styles.foodImage}
+                    source={{ uri: food.imageUrl || DEFAULT_IMAGE_FOOD }}
+                  />
                   <Text style={styles.foodName}>{food.name}</Text>
                 </View>
                 <TouchableOpacity
@@ -217,31 +237,34 @@ export function FoodDetailModal({
 
               {/* 数量输入 */}
               <View style={styles.amountContainer}>
-                <TextInput
+                <View style={styles.inputWithUnit}>
-                  style={styles.amountInput}
+                  <TextInput
-                  value={amount}
+                    style={styles.amountInput}
-                  onChangeText={setAmount}
+                    value={amount}
-                  keyboardType="numeric"
+                    onChangeText={setAmount}
-                  selectTextOnFocus
+                    keyboardType="numeric"
-                />
+                    selectTextOnFocus
+                  />
+                  <Text style={styles.unitLabel}>克</Text>
+                </View>
               </View>
 
-              {/* 单位选择 */}
+              {/* 快捷选择 */}
-              <View style={styles.unitContainer}>
+              <View style={styles.quickSelectContainer}>
-                {UNIT_OPTIONS.map((unit) => (
+                {QUICK_SELECT_OPTIONS.map((option) => (
                   <TouchableOpacity
-                    key={unit.id}
+                    key={option.id}
                     style={[
-                      styles.unitOption,
+                      styles.quickSelectOption,
-                      selectedUnit.id === unit.id && styles.unitOptionActive
+                      amount === option.amount.toString() && styles.quickSelectOptionActive
                     ]}
-                    onPress={() => setSelectedUnit(unit)}
+                    onPress={() => handleQuickSelect(option.amount)}
                   >
                     <Text style={[
-                      styles.unitText,
+                      styles.quickSelectText,
-                      selectedUnit.id === unit.id && styles.unitTextActive
+                      amount === option.amount.toString() && styles.quickSelectTextActive
                     ]}>
-                      {unit.name}
+                      {option.name}
                     </Text>
                   </TouchableOpacity>
                 ))}
@@ -329,6 +352,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flex: 1,
   },
+  foodImage: {
+    width: 40,
+    height: 40,
+    marginRight: 12,
+  },
   foodEmoji: {
     fontSize: 40,
     marginRight: 12,
@@ -366,25 +394,36 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 16,
   },
-  amountInput: {
+  inputWithUnit: {
+    flexDirection: 'row',
+    alignItems: 'center',
     backgroundColor: '#E8F5E8',
     borderRadius: 12,
-    paddingHorizontal: 24,
+    paddingHorizontal: 20,
     paddingVertical: 16,
+  },
+  amountInput: {
     fontSize: 24,
     fontWeight: '600',
     color: '#4CAF50',
     textAlign: 'center',
-    minWidth: 120,
+    minWidth: 80,
+    backgroundColor: 'transparent',
   },
-  unitContainer: {
+  unitLabel: {
+    fontSize: 18,
+    fontWeight: '500',
+    color: '#4CAF50',
+    marginLeft: 8,
+  },
+  quickSelectContainer: {
     flexDirection: 'row',
     justifyContent: 'center',
     paddingHorizontal: screenWidth > 400 ? 24 : 16,
     paddingBottom: 20,
     gap: screenWidth > 400 ? 16 : 12, // 根据屏幕宽度调整间距
   },
-  unitOption: {
+  quickSelectOption: {
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 20,
@@ -392,15 +431,15 @@ const styles = StyleSheet.create({
     minWidth: 60,
     alignItems: 'center',
   },
-  unitOptionActive: {
+  quickSelectOptionActive: {
     backgroundColor: '#4CAF50',
   },
-  unitText: {
+  quickSelectText: {
     fontSize: 14,
     color: '#666',
     fontWeight: '500',
   },
-  unitTextActive: {
+  quickSelectTextActive: {
     color: '#FFFFFF',
   },
   saveButton: {

constants/Image.ts

@@ -0,0 +1 @@
+export const DEFAULT_IMAGE_FOOD = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/icons/food/icon-food-default.png'