feat: 优化内容
This commit is contained in:
richarjiang
@@ -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',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 5,
|
||||
backgroundColor: '#FFFFFF',
|
||||
// iOS 阴影效果
|
||||
shadowColor: '#000000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
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)',
|
||||
|
||||
711
components/model/food/CreateCustomFoodModal.tsx
Normal file
711
components/model/food/CreateCustomFoodModal.tsx
Normal file
@@ -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,
|
||||
},
|
||||
});
|
||||
@@ -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; // 碳水化合物(克)
|
||||
}
|
||||
|
||||
// 单位选项
|
||||
const UNIT_OPTIONS = [
|
||||
{ id: 'gram', name: '克', ratio: 1 },
|
||||
{ id: 'small', name: '小份', ratio: 0.8 },
|
||||
{ id: 'medium', name: '中份', ratio: 1.2 },
|
||||
{ id: 'large', name: '大份', ratio: 1.5 },
|
||||
// 快捷选择选项（基于100克的倍数）
|
||||
const QUICK_SELECT_OPTIONS = [
|
||||
{ id: 'small', name: '小份', amount: 80 }, // 80克
|
||||
{ id: 'medium', name: '中份', amount: 120 }, // 120克
|
||||
{ id: 'large', name: '大份', amount: 150 }, // 150克
|
||||
];
|
||||
|
||||
// 食物详情弹窗属性
|
||||
@@ -41,9 +42,24 @@ export interface FoodDetailModalProps {
|
||||
onSave: (food: FoodItem, amount: number, unit: string) => void;
|
||||
}
|
||||
|
||||
// 模拟营养数据
|
||||
const getNutritionInfo = (foodId: string): NutritionInfo => {
|
||||
const nutritionData: Record<string, NutritionInfo> = {
|
||||
// 获取营养数据，优先使用FoodItem中的数据
|
||||
const getNutritionInfo = (food: FoodItem): 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 actualProtein = ((nutrition.protein * finalAmount) / 100).toFixed(1);
|
||||
const actualFat = ((nutrition.fat * finalAmount) / 100).toFixed(1);
|
||||
const actualCarbs = ((nutrition.carbs * finalAmount) / 100).toFixed(1);
|
||||
// 计算实际营养值（基于输入的克数）
|
||||
const actualCalories = Math.round((food.calories * amountNum) / 100);
|
||||
const actualProtein = ((nutrition.protein * amountNum) / 100).toFixed(1);
|
||||
const actualFat = ((nutrition.fat * amountNum) / 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
|
||||
style={styles.amountInput}
|
||||
value={amount}
|
||||
onChangeText={setAmount}
|
||||
keyboardType="numeric"
|
||||
selectTextOnFocus
|
||||
/>
|
||||
<View style={styles.inputWithUnit}>
|
||||
<TextInput
|
||||
style={styles.amountInput}
|
||||
value={amount}
|
||||
onChangeText={setAmount}
|
||||
keyboardType="numeric"
|
||||
selectTextOnFocus
|
||||
/>
|
||||
<Text style={styles.unitLabel}>克</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 单位选择 */}
|
||||
<View style={styles.unitContainer}>
|
||||
{UNIT_OPTIONS.map((unit) => (
|
||||
{/* 快捷选择 */}
|
||||
<View style={styles.quickSelectContainer}>
|
||||
{QUICK_SELECT_OPTIONS.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={unit.id}
|
||||
key={option.id}
|
||||
style={[
|
||||
styles.unitOption,
|
||||
selectedUnit.id === unit.id && styles.unitOptionActive
|
||||
styles.quickSelectOption,
|
||||
amount === option.amount.toString() && styles.quickSelectOptionActive
|
||||
]}
|
||||
onPress={() => setSelectedUnit(unit)}
|
||||
onPress={() => handleQuickSelect(option.amount)}
|
||||
>
|
||||
<Text style={[
|
||||
styles.unitText,
|
||||
selectedUnit.id === unit.id && styles.unitTextActive
|
||||
styles.quickSelectText,
|
||||
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: {
|
||||
|
||||
Reference in New Issue
Block a user