richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
richarjiang
2025-08-29 21:03:45 +08:00
parent e9b593a07e
commit 3fdd2acaf2
8 changed files with 301 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/(tabs)/statistics.tsx
View File

@@ -345,14 +345,16 @@ export default function ExploreScreen() {
<View style={styles.masonryContainer}> <View style={styles.masonryContainer}>
{/* 左列 */} {/* 左列 */}
<View style={styles.masonryColumn}> <View style={styles.masonryColumn}>
<FloatingCard style={styles.masonryCard} delay={0}> {/* 心情卡片 */}
<StressMeter <FloatingCard style={styles.masonryCard} delay={1500}>
value={hrvValue} <MoodCard
updateTime={hrvUpdateTime} moodCheckin={currentMoodCheckin}
hrvValue={hrvValue} onPress={() => pushIfAuthedElseLogin('/mood/calendar')}
isLoading={isMoodLoading}
/> />
</FloatingCard> </FloatingCard>
<FloatingCard style={styles.masonryCard} delay={500}> <FloatingCard style={styles.masonryCard} delay={500}>
<Text style={styles.cardTitle}>消耗卡路里</Text> <Text style={styles.cardTitle}>消耗卡路里</Text>
{activeCalories != null ? ( {activeCalories != null ? (
@@ -389,12 +391,11 @@ export default function ExploreScreen() {
showLabel={false} showLabel={false}
/> />
</FloatingCard> </FloatingCard>
{/* 心情卡片 */} <FloatingCard style={styles.masonryCard} delay={0}>
<FloatingCard style={styles.masonryCard} delay={1500}> <StressMeter
<MoodCard value={hrvValue}
moodCheckin={currentMoodCheckin} updateTime={hrvUpdateTime}
onPress={() => pushIfAuthedElseLogin('/mood/calendar')} hrvValue={hrvValue}
isLoading={isMoodLoading}
/> />
</FloatingCard> </FloatingCard>
</View> </View>

100
app/food-library.tsx
View File

@@ -1,9 +1,11 @@
import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal'; import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal';
import { FoodDetailModal } from '@/components/model/food/FoodDetailModal'; import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
import { HeaderBar } from '@/components/ui/HeaderBar'; import { HeaderBar } from '@/components/ui/HeaderBar';
import { Colors } from '@/constants/Colors';
import { DEFAULT_IMAGE_FOOD } from '@/constants/Image'; import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
import { useFoodLibrary, useFoodSearch } from '@/hooks/useFoodLibrary'; import { useFoodLibrary, useFoodSearch } from '@/hooks/useFoodLibrary';
import { addDietRecord, type CreateDietRecordDto } from '@/services/dietRecords'; import { addDietRecord, type CreateDietRecordDto } from '@/services/dietRecords';
import { foodLibraryApi, type CreateCustomFoodDto } from '@/services/foodLibraryApi';
import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food'; import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image'; import { Image } from 'expo-image';
@@ -11,6 +13,7 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { import {
ActivityIndicator, ActivityIndicator,
Alert,
Modal, Modal,
ScrollView, ScrollView,
StyleSheet, StyleSheet,
@@ -36,7 +39,7 @@ export default function FoodLibraryScreen() {
const mealType = (params.mealType as MealType) || 'breakfast'; const mealType = (params.mealType as MealType) || 'breakfast';
// Redux hooks // Redux hooks
const { categories, loading, error, clearErrors } = useFoodLibrary(); const { categories, loading, error, clearErrors, loadFoodLibrary } = useFoodLibrary();
const { searchResults, searchLoading, search, clearResults } = useFoodSearch(); const { searchResults, searchLoading, search, clearResults } = useFoodSearch();
// 本地状态 // 本地状态
@@ -129,6 +132,20 @@ export default function FoodLibraryScreen() {
setSelectedFood(null); setSelectedFood(null);
}; };
// 处理删除自定义食物
const handleDeleteFood = async (foodId: string) => {
try {
await foodLibraryApi.deleteCustomFood(Number(foodId));
// 删除成功后重新加载食物库数据
await loadFoodLibrary();
// 关闭弹窗
handleCloseFoodDetail();
} catch (error) {
console.error('删除食物失败:', error);
Alert.alert('删除失败', '删除食物时发生错误，请稍后重试');
}
};
// 处理饮食记录 // 处理饮食记录
const handleRecordDiet = async () => { const handleRecordDiet = async () => {
if (selectedFoodItems.length === 0) return; if (selectedFoodItems.length === 0) return;
@@ -182,32 +199,51 @@ export default function FoodLibraryScreen() {
}; };
// 处理保存自定义食物 // 处理保存自定义食物
const handleSaveCustomFood = (customFoodData: CustomFoodData) => { const handleSaveCustomFood = async (customFoodData: CustomFoodData) => {
// 创建一个临时的FoodItem对象 try {
const customFoodItem: FoodItem = { // 转换数据格式以匹配API要求
id: `custom_${Date.now()}`, const createData: CreateCustomFoodDto = {
name: customFoodData.name, name: customFoodData.name,
calories: customFoodData.calories, caloriesPer100g: customFoodData.calories,
unit: customFoodData.unit, proteinPer100g: customFoodData.protein,
description: `自定义食物 - ${customFoodData.name}`, carbohydratePer100g: customFoodData.carbohydrate,
imageUrl: customFoodData.imageUrl, fatPer100g: customFoodData.fat,
protein: customFoodData.protein, imageUrl: customFoodData.imageUrl,
fat: customFoodData.fat, };
carbohydrate: customFoodData.carbohydrate,
};
// 直接添加到选择列表中 // 调用API创建自定义食物
const newSelectedItem: SelectedFoodItem = { const createdFood = await foodLibraryApi.createCustomFood(createData);
id: `custom_${Date.now()}`,
food: customFoodItem,
amount: customFoodData.defaultAmount,
unit: customFoodData.unit,
calories: Math.round((customFoodData.calories * customFoodData.defaultAmount) / 100)
};
setSelectedFoodItems(prev => [...prev, newSelectedItem]); // 需要拉取一遍最新的食物列表
await loadFoodLibrary();
console.log('保存自定义食物:', customFoodData); // 创建FoodItem对象
const customFoodItem: FoodItem = {
id: createdFood.id.toString(),
name: createdFood.name,
calories: createdFood.caloriesPer100g || 0,
unit: 'g',
description: createdFood.description || `自定义食物 - ${createdFood.name}`,
imageUrl: createdFood.imageUrl,
protein: createdFood.proteinPer100g,
fat: createdFood.fatPer100g,
carbohydrate: createdFood.carbohydratePer100g,
};
// 添加到选择列表中
const newSelectedItem: SelectedFoodItem = {
id: createdFood.id.toString(),
food: customFoodItem,
amount: customFoodData.defaultAmount,
unit: 'g',
calories: Math.round((customFoodItem.calories * customFoodData.defaultAmount) / 100)
};
setSelectedFoodItems(prev => [...prev, newSelectedItem]);
} catch (error) {
console.error('创建自定义食物失败:', error);
Alert.alert('创建失败', '创建自定义食物时发生错误，请稍后重试');
}
}; };
// 关闭自定义食物弹窗 // 关闭自定义食物弹窗
@@ -472,8 +508,10 @@ export default function FoodLibraryScreen() {
<FoodDetailModal <FoodDetailModal
visible={showFoodDetail} visible={showFoodDetail}
food={selectedFood} food={selectedFood}
category={selectedCategory}
onClose={handleCloseFoodDetail} onClose={handleCloseFoodDetail}
onSave={handleSaveFood} onSave={handleSaveFood}
onDelete={handleDeleteFood}
/> />
{/* 创建自定义食物弹窗 */} {/* 创建自定义食物弹窗 */}
@@ -497,7 +535,7 @@ const styles = StyleSheet.create({
}, },
customButtonText: { customButtonText: {
fontSize: 16, fontSize: 16,
color: '#4CAF50', color: Colors.light.textSecondary,
fontWeight: '500', fontWeight: '500',
}, },
searchContainer: { searchContainer: {
@@ -546,8 +584,6 @@ const styles = StyleSheet.create({
categoryContainer: { categoryContainer: {
width: 100, width: 100,
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderRightWidth: 1,
borderRightColor: '#E5E5E5',
}, },
categoryItem: { categoryItem: {
paddingVertical: 16, paddingVertical: 16,
@@ -555,9 +591,7 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
categoryItemActive: { categoryItemActive: {
backgroundColor: '#F0F9FF', backgroundColor: '#F0F9FF'
borderRightWidth: 2,
borderRightColor: '#4CAF50',
}, },
categoryText: { categoryText: {
fontSize: 14, fontSize: 14,
@@ -565,7 +599,7 @@ const styles = StyleSheet.create({
textAlign: 'center', textAlign: 'center',
}, },
categoryTextActive: { categoryTextActive: {
color: '#4CAF50', color: Colors.light.text,
fontWeight: '500', fontWeight: '500',
}, },
foodContainer: { foodContainer: {
@@ -711,7 +745,7 @@ const styles = StyleSheet.create({
marginRight: 4, marginRight: 4,
}, },
recordButton: { recordButton: {
backgroundColor: '#4CAF50', backgroundColor: Colors.light.primary,
paddingHorizontal: 24, paddingHorizontal: 24,
paddingVertical: 10, paddingVertical: 10,
borderRadius: 20, borderRadius: 20,
@@ -749,7 +783,7 @@ const styles = StyleSheet.create({
}, },
totalCalories: { totalCalories: {
fontSize: 14, fontSize: 14,
color: '#4CAF50', color: Colors.light.text,
fontWeight: '500', fontWeight: '500',
}, },
selectedFoodsList: { selectedFoodsList: {

35
components/NutritionRadarCard.tsx
View File

@@ -85,30 +85,6 @@ export function NutritionRadarCard({
const consumedCalories = nutritionSummary?.totalCalories || 0; const consumedCalories = nutritionSummary?.totalCalories || 0;
const remainingCalories = burnedCalories - consumedCalories - calorieDeficit; const remainingCalories = burnedCalories - consumedCalories - calorieDeficit;
// 餐次数据
const meals = [
{
type: 'breakfast' as const,
name: '早餐',
emoji: '🥚',
},
{
type: 'lunch' as const,
name: '午餐',
emoji: '🍔',
},
{
type: 'dinner' as const,
name: '晚餐',
emoji: '🥣',
},
{
type: 'snack' as const,
name: '加餐',
emoji: '🍎',
},
];
const handleNavigateToRecords = () => { const handleNavigateToRecords = () => {
router.push(ROUTES.NUTRITION_RECORDS); router.push(ROUTES.NUTRITION_RECORDS);
}; };
@@ -124,7 +100,7 @@ export function NutritionRadarCard({
<View style={styles.cardRightContainer}> <View style={styles.cardRightContainer}>
<Text style={styles.cardSubtitle}>更新: {dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}</Text> <Text style={styles.cardSubtitle}>更新: {dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}</Text>
<TouchableOpacity style={styles.addButton} onPress={handleAddFood}> <TouchableOpacity style={styles.addButton} onPress={handleAddFood}>
<Ionicons name="add-circle" size={16} color="#FFFFFF" /> <Ionicons name="add" size={16} color="#FFFFFF" />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@@ -142,7 +118,6 @@ export function NutritionRadarCard({
<View style={styles.statsContainer}> <View style={styles.statsContainer}>
{nutritionStats.map((stat, index) => ( {nutritionStats.map((stat, index) => (
<View key={stat.label} style={styles.statItem}> <View key={stat.label} style={styles.statItem}>
<View style={[styles.statDot, { backgroundColor: stat.color }]} />
<Text style={styles.statLabel}>{stat.label}</Text> <Text style={styles.statLabel}>{stat.label}</Text>
<Text style={styles.statValue}>{stat.value}</Text> <Text style={styles.statValue}>{stat.value}</Text>
</View> </View>
@@ -267,7 +242,6 @@ const styles = StyleSheet.create({
}, },
// 卡路里相关样式 // 卡路里相关样式
calorieSection: { calorieSection: {
marginTop: 12,
}, },
calorieTitleContainer: { calorieTitleContainer: {
@@ -341,10 +315,11 @@ const styles = StyleSheet.create({
fontSize: 24, fontSize: 24,
}, },
addButton: { addButton: {
width: 16, width: 18,
height: 16, height: 18,
borderRadius: 8, borderRadius: 8,
backgroundColor: '#10B981', backgroundColor: '#9AA3AE',
marginLeft: 8,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
shadowColor: '#000', shadowColor: '#000',

39
components/NutritionRecordCard.tsx
View File

@@ -6,7 +6,6 @@ import dayjs from 'dayjs';
import React, { useMemo, useRef, useState } from 'react'; import React, { useMemo, useRef, useState } from 'react';
import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler'; import { Swipeable } from 'react-native-gesture-handler';
import Popover from 'react-native-popover-view';
export type NutritionRecordCardProps = { export type NutritionRecordCardProps = {
record: DietRecord; record: DietRecord;
@@ -46,7 +45,6 @@ export function NutritionRecordCard({
const surfaceColor = useThemeColor({}, 'surface'); const surfaceColor = useThemeColor({}, 'surface');
const textColor = useThemeColor({}, 'text'); const textColor = useThemeColor({}, 'text');
const textSecondaryColor = useThemeColor({}, 'textSecondary'); const textSecondaryColor = useThemeColor({}, 'textSecondary');
const primaryColor = useThemeColor({}, 'primary');
// Popover 状态管理 // Popover 状态管理
const [showPopover, setShowPopover] = useState(false); const [showPopover, setShowPopover] = useState(false);
@@ -80,7 +78,6 @@ export function NutritionRecordCard({
}, [record]); }, [record]);
const mealTypeColor = MEAL_TYPE_COLORS[record.mealType]; const mealTypeColor = MEAL_TYPE_COLORS[record.mealType];
const mealTypeIcon = MEAL_TYPE_ICONS[record.mealType];
const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType]; const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType];
// 处理删除操作 // 处理删除操作
@@ -182,8 +179,8 @@ export function NutritionRecordCard({
</View> </View>
{/* 餐次标签 */} {/* 餐次标签 */}
<View style={[styles.mealTypeBadge, { backgroundColor: mealTypeColor }]}> <View style={[styles.mealTypeBadge]}>
<ThemedText style={[styles.mealTypeText, { color: '#FFFFFF' }]}> <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
{mealTypeLabel} {mealTypeLabel}
</ThemedText> </ThemedText>
</View> </View>
@@ -201,29 +198,6 @@ export function NutritionRecordCard({
</TouchableOpacity> </TouchableOpacity>
</Swipeable> </Swipeable>
{/* Popover for more options */}
<Popover
from={popoverRef}
isVisible={showPopover}
onRequestClose={() => setShowPopover(false)}
popoverStyle={styles.popoverContainer}
backgroundStyle={styles.popoverBackground}
>
<View style={styles.popoverContent}>
<TouchableOpacity
style={styles.popoverItem}
onPress={() => {
setShowPopover(false);
onDelete?.();
}}
>
<Ionicons name="trash-outline" size={20} color="#FF3B30" />
<ThemedText style={[styles.popoverText, { color: '#FF3B30' }]}>
删除记录
</ThemedText>
</TouchableOpacity>
</View>
</Popover>
</View> </View>
); );
} }
@@ -245,8 +219,6 @@ const styles = StyleSheet.create({
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
borderRadius: 12, borderRadius: 12,
padding: 12, padding: 12,
}, },
mainContent: { mainContent: {
flex: 1, flex: 1,
@@ -276,13 +248,13 @@ const styles = StyleSheet.create({
}, },
foodName: { foodName: {
fontSize: 15, fontSize: 14,
fontWeight: '600', fontWeight: '600',
color: '#333333', color: '#333333',
marginBottom: 2, marginTop: 2,
}, },
mealTime: { mealTime: {
fontSize: 12, fontSize: 10,
fontWeight: '400', fontWeight: '400',
color: '#999999', color: '#999999',
}, },
@@ -324,6 +296,7 @@ const styles = StyleSheet.create({
caloriesText: { caloriesText: {
fontSize: 12, fontSize: 12,
color: '#473c3cff', color: '#473c3cff',
fontWeight: '500',
}, },
mealTypeBadge: { mealTypeBadge: {
paddingHorizontal: 8, paddingHorizontal: 8,

191
components/model/food/CreateCustomFoodModal.tsx
View File

@@ -1,8 +1,9 @@
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image'; import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker'; import * as ImagePicker from 'expo-image-picker';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { import {
ActivityIndicator,
Alert, Alert,
Dimensions, Dimensions,
Keyboard, Keyboard,
@@ -16,6 +17,9 @@ import {
TouchableOpacity, TouchableOpacity,
View View
} from 'react-native'; } from 'react-native';
import { useAppSelector } from '@/hooks/redux';
import { useCosUpload } from '@/hooks/useCosUpload';
import { Colors } from '@/constants/Colors';
export interface CreateCustomFoodModalProps { export interface CreateCustomFoodModalProps {
visible: boolean; visible: boolean;
@@ -25,7 +29,6 @@ export interface CreateCustomFoodModalProps {
export interface CustomFoodData { export interface CustomFoodData {
name: string; name: string;
unit: string;
defaultAmount: number; defaultAmount: number;
caloriesUnit: string; caloriesUnit: string;
calories: number; calories: number;
@@ -41,7 +44,6 @@ export function CreateCustomFoodModal({
onSave onSave
}: CreateCustomFoodModalProps) { }: CreateCustomFoodModalProps) {
const [foodName, setFoodName] = useState(''); const [foodName, setFoodName] = useState('');
const [foodUnit, setFoodUnit] = useState('');
const [defaultAmount, setDefaultAmount] = useState('100'); const [defaultAmount, setDefaultAmount] = useState('100');
const [caloriesUnit, setCaloriesUnit] = useState('千卡'); const [caloriesUnit, setCaloriesUnit] = useState('千卡');
const [calories, setCalories] = useState('100'); const [calories, setCalories] = useState('100');
@@ -51,6 +53,20 @@ export function CreateCustomFoodModal({
const [carbohydrate, setCarbohydrate] = useState('0'); const [carbohydrate, setCarbohydrate] = useState('0');
const [keyboardHeight, setKeyboardHeight] = useState(0); const [keyboardHeight, setKeyboardHeight] = useState(0);
// 获取用户ID和上传功能
const accountProfile = useAppSelector((s) => (s as any)?.user?.profile as any);
const userId: string | undefined = useMemo(() => {
return (
accountProfile?.userId ||
accountProfile?.id ||
accountProfile?._id ||
accountProfile?.uid ||
undefined
) as string | undefined;
}, [accountProfile]);
const { upload, uploading } = useCosUpload();
// 键盘监听 // 键盘监听
useEffect(() => { useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener( const keyboardDidShowListener = Keyboard.addListener(
@@ -76,7 +92,6 @@ export function CreateCustomFoodModal({
useEffect(() => { useEffect(() => {
if (visible) { if (visible) {
setFoodName(''); setFoodName('');
setFoodUnit('');
setDefaultAmount('100'); setDefaultAmount('100');
setCaloriesUnit('千卡'); setCaloriesUnit('千卡');
setCalories('100'); setCalories('100');
@@ -92,21 +107,41 @@ export function CreateCustomFoodModal({
// 选择图片 // 选择图片
const handleSelectImage = async () => { const handleSelectImage = async () => {
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); try {
if (status !== 'granted') { const resp = await ImagePicker.requestMediaLibraryPermissionsAsync();
Alert.alert('需要相册权限', '请在设置中开启相册权限'); const libGranted = resp.status === 'granted' || (resp as any).accessPrivileges === 'limited';
return; if (!libGranted) {
} Alert.alert('权限不足', '需要相册权限以选择照片');
return;
}
const result = await ImagePicker.launchImageLibraryAsync({ const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true,
allowsEditing: true, quality: 0.9,
aspect: [1, 1], aspect: [1, 1],
quality: 1, mediaTypes: ['images'],
}); base64: false,
});
if (!result.canceled && result.assets[0]) { if (!result.canceled) {
setImageUrl(result.assets[0].uri); const asset = result.assets?.[0];
if (!asset?.uri) return;
// 直接上传到 COS，成功后写入 URL
try {
const { url } = await upload(
{ uri: asset.uri, name: asset.fileName || 'food.jpg', type: asset.mimeType || 'image/jpeg' },
{ prefix: 'foods/', userId }
);
setImageUrl(url);
} catch (e) {
console.warn('上传照片失败', e);
Alert.alert('上传失败', '照片上传失败，请重试');
}
}
} catch (e) {
Alert.alert('发生错误', '选择照片失败，请重试');
} }
}; };
@@ -119,10 +154,7 @@ export function CreateCustomFoodModal({
Alert.alert('提示', '请输入食物名称'); Alert.alert('提示', '请输入食物名称');
return; return;
} }
if (!foodUnit.trim()) {
Alert.alert('提示', '请输入食物单位');
return;
}
if (!calories.trim() || parseFloat(calories) <= 0) { if (!calories.trim() || parseFloat(calories) <= 0) {
Alert.alert('提示', '请输入有效的热量值'); Alert.alert('提示', '请输入有效的热量值');
return; return;
@@ -130,7 +162,6 @@ export function CreateCustomFoodModal({
const foodData: CustomFoodData = { const foodData: CustomFoodData = {
name: foodName.trim(), name: foodName.trim(),
unit: foodUnit.trim(),
defaultAmount: parseFloat(defaultAmount) || 100, defaultAmount: parseFloat(defaultAmount) || 100,
caloriesUnit, caloriesUnit,
calories: parseFloat(calories) || 0, calories: parseFloat(calories) || 0,
@@ -182,14 +213,14 @@ export function CreateCustomFoodModal({
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.saveButton, styles.saveButton,
(!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonDisabled (!foodName.trim() || !calories.trim()) && styles.saveButtonDisabled
]} ]}
onPress={handleSave} onPress={handleSave}
disabled={!foodName.trim() || !foodUnit.trim() || !calories.trim()} disabled={!foodName.trim() || !calories.trim()}
> >
<Text style={[ <Text style={[
styles.saveButtonText, styles.saveButtonText,
(!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonTextDisabled (!foodName.trim() || !calories.trim()) && styles.saveButtonTextDisabled
]}>保存</Text> ]}>保存</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
@@ -211,7 +242,7 @@ export function CreateCustomFoodModal({
{foodName || '食物名称'} {foodName || '食物名称'}
</Text> </Text>
<Text style={styles.previewCalories}> <Text style={styles.previewCalories}>
{actualCalories}{caloriesUnit}/{defaultAmount}{foodUnit} {actualCalories}{caloriesUnit}/{defaultAmount}g
</Text> </Text>
</View> </View>
</View> </View>
@@ -226,26 +257,18 @@ export function CreateCustomFoodModal({
</View> </View>
<View style={styles.sectionCard}> <View style={styles.sectionCard}>
{/* 食物名称和单位 */} {/* 食物名称和单位 */}
<View style={styles.inputRowGroup}> <View style={styles.inputRowContainer}>
<View style={styles.inputRowItem}> <Text style={styles.inputRowLabel}>食物名称</Text>
<Text style={styles.inputLabel}>食物名称</Text> <View style={styles.inputRowContent}>
<TextInput <View style={styles.numberInputContainer}>
style={styles.modernTextInput} <TextInput
value={foodName} style={styles.modernNumberInput}
onChangeText={setFoodName} value={foodName}
placeholder="例如，汉堡" onChangeText={setFoodName}
placeholderTextColor="#A0A0A0" placeholder="例如，汉堡"
/> placeholderTextColor="#A0A0A0"
</View> />
<View style={styles.inputRowItem}> </View>
<Text style={styles.inputLabel}>食物单位</Text>
<TextInput
style={styles.modernTextInput}
value={foodUnit}
onChangeText={setFoodUnit}
placeholder="例如，克"
placeholderTextColor="#A0A0A0"
/>
</View> </View>
</View> </View>
@@ -262,17 +285,11 @@ export function CreateCustomFoodModal({
placeholder="100" placeholder="100"
placeholderTextColor="#A0A0A0" placeholderTextColor="#A0A0A0"
/> />
<Text style={styles.unitText}>{foodUnit || '单位'}</Text> <Text style={styles.unitText}>g</Text>
</View> </View>
</View> </View>
</View> </View>
{/* 热量单位 */}
<View style={styles.inputRowContainer}>
<Text style={styles.inputRowLabel}>热量单位</Text>
<Text style={styles.selectButtonText}>千卡</Text>
</View>
{/* 食物热量 */} {/* 食物热量 */}
<View style={[styles.inputRowContainer, { marginBottom: 0 }]}> <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
<Text style={styles.inputRowLabel}>食物热量</Text> <Text style={styles.inputRowLabel}>食物热量</Text>
@@ -301,7 +318,11 @@ export function CreateCustomFoodModal({
<View style={styles.inputRowContainer}> <View style={styles.inputRowContainer}>
<Text style={styles.inputRowLabel}>照片</Text> <Text style={styles.inputRowLabel}>照片</Text>
<View style={styles.inputRowContent}> <View style={styles.inputRowContent}>
<TouchableOpacity style={styles.modernImageSelector} onPress={handleSelectImage}> <TouchableOpacity
style={styles.modernImageSelector}
onPress={handleSelectImage}
disabled={uploading}
>
{imageUrl ? ( {imageUrl ? (
<Image style={styles.selectedImage} source={{ uri: imageUrl }} /> <Image style={styles.selectedImage} source={{ uri: imageUrl }} />
) : ( ) : (
@@ -310,6 +331,11 @@ export function CreateCustomFoodModal({
<Text style={styles.imagePlaceholderText}>添加照片</Text> <Text style={styles.imagePlaceholderText}>添加照片</Text>
</View> </View>
)} )}
{uploading && (
<View style={styles.imageLoadingOverlay}>
<ActivityIndicator size="large" color="#FFFFFF" />
</View>
)}
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
@@ -369,13 +395,6 @@ export function CreateCustomFoodModal({
</View> </View>
</View> </View>
</View> </View>
{/* 底部提示 */}
<View style={styles.disclaimer}>
<Text style={styles.disclaimerText}>
*为了避免历史饮食数据混乱，自定义食物创建后不支持修改。
</Text>
</View>
</ScrollView> </ScrollView>
</View> </View>
</KeyboardAvoidingView> </KeyboardAvoidingView>
@@ -384,7 +403,7 @@ export function CreateCustomFoodModal({
); );
} }
const { width: screenWidth, height: screenHeight } = Dimensions.get('window'); const { height: screenHeight } = Dimensions.get('window');
const styles = StyleSheet.create({ const styles = StyleSheet.create({
overlay: { overlay: {
@@ -410,8 +429,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 16, paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
}, },
backButton: { backButton: {
padding: 4, padding: 4,
@@ -434,15 +451,14 @@ const styles = StyleSheet.create({
}, },
saveButtonText: { saveButtonText: {
fontSize: 16, fontSize: 16,
color: '#4CAF50', color: Colors.light.primary,
fontWeight: '500', fontWeight: '500',
}, },
saveButtonTextDisabled: { saveButtonTextDisabled: {
color: '#999', color: Colors.light.textMuted,
}, },
previewSection: { previewSection: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: 16, paddingBottom: 16,
}, },
previewCard: { previewCard: {
@@ -489,15 +505,16 @@ const styles = StyleSheet.create({
sectionHeader: { sectionHeader: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
marginBottom: 16, marginBottom: 4,
}, },
sectionTitle: { sectionTitle: {
fontSize: 18, fontSize: 14,
fontWeight: '600',
color: '#333', color: '#333',
marginLeft: 8
}, },
requiredIndicator: { requiredIndicator: {
fontSize: 18, fontSize: 16,
color: '#FF4444', color: '#FF4444',
marginLeft: 4, marginLeft: 4,
}, },
@@ -515,16 +532,15 @@ const styles = StyleSheet.create({
inputLabel: { inputLabel: {
fontSize: 14, fontSize: 14,
color: '#666', color: '#666',
marginBottom: 8,
fontWeight: '500', fontWeight: '500',
}, },
modernTextInput: { modernTextInput: {
borderWidth: 1.5, flex: 1,
borderColor: '#E8E8E8',
borderRadius: 12, borderRadius: 12,
paddingHorizontal: 16, paddingHorizontal: 12,
paddingVertical: 14, paddingVertical: 8,
fontSize: 16, fontSize: 16,
marginLeft: 20,
color: '#333', color: '#333',
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
shadowColor: '#000', shadowColor: '#000',
@@ -536,9 +552,8 @@ const styles = StyleSheet.create({
numberInputContainer: { numberInputContainer: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
borderWidth: 1.5,
borderColor: '#E8E8E8',
borderRadius: 12, borderRadius: 12,
backgroundColor: '#FFFFFF', backgroundColor: '#FFFFFF',
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 1 }, shadowOffset: { width: 0, height: 1 },
@@ -548,8 +563,8 @@ const styles = StyleSheet.create({
}, },
modernNumberInput: { modernNumberInput: {
flex: 1, flex: 1,
paddingHorizontal: 16, paddingHorizontal: 12,
paddingVertical: 14, paddingVertical: 8,
fontSize: 16, fontSize: 16,
color: '#333', color: '#333',
textAlign: 'right', textAlign: 'right',
@@ -578,8 +593,8 @@ const styles = StyleSheet.create({
elevation: 1, elevation: 1,
}, },
selectButtonText: { selectButtonText: {
fontSize: 16, fontSize: 14,
color: '#333', color: 'gray',
fontWeight: '500', fontWeight: '500',
}, },
modernImageSelector: { modernImageSelector: {
@@ -695,6 +710,7 @@ const styles = StyleSheet.create({
// 新增行布局样式 // 新增行布局样式
inputRowContainer: { inputRowContainer: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginBottom: 20, marginBottom: 20,
}, },
@@ -708,4 +724,15 @@ const styles = StyleSheet.create({
inputRowContent: { inputRowContent: {
flex: 1, flex: 1,
}, },
imageLoadingOverlay: {
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,0.5)',
borderRadius: 16,
},
}); });

82
components/model/food/FoodDetailModal.tsx
View File

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

10
ios/digitalpilates.xcodeproj/project.pbxproj
View File

@@ -463,7 +463,10 @@
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\""; LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = YES; MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES; ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = "$(inherited) "; OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos; SDKROOT = iphoneos;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG"; SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -518,7 +521,10 @@
); );
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\""; LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = NO; MTL_ENABLE_DEBUG_INFO = NO;
OTHER_LDFLAGS = "$(inherited) "; OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native"; REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos; SDKROOT = iphoneos;
USE_HERMES = false; USE_HERMES = false;

30
services/foodLibraryApi.ts
View File

@@ -6,6 +6,20 @@ import type {
} from '@/types/food'; } from '@/types/food';
import { api } from './api'; import { api } from './api';
export interface CreateCustomFoodDto {
name: string;
description?: string;
caloriesPer100g?: number;
proteinPer100g?: number;
carbohydratePer100g?: number;
fatPer100g?: number;
fiberPer100g?: number;
sugarPer100g?: number;
sodiumPer100g?: number;
additionalNutrition?: Record<string, any>;
imageUrl?: string;
}
/** /**
* 食物库 API 服务 * 食物库 API 服务
*/ */
@@ -39,6 +53,20 @@ export class FoodLibraryApi {
const { id } = params; const { id } = params;
return api.get<FoodItemDto>(`${this.BASE_PATH}/${id}`); return api.get<FoodItemDto>(`${this.BASE_PATH}/${id}`);
} }
/**
* 创建自定义食物
*/
static async createCustomFood(data: CreateCustomFoodDto): Promise<FoodItemDto> {
return api.post<FoodItemDto>(`${this.BASE_PATH}/custom`, data);
}
/**
* 删除自定义食物
*/
static async deleteCustomFood(id: number): Promise<void> {
return api.delete(`${this.BASE_PATH}/custom/${id}`);
}
} }
// 导出便捷方法 // 导出便捷方法
@@ -46,4 +74,6 @@ export const foodLibraryApi = {
getFoodLibrary: () => FoodLibraryApi.getFoodLibrary(), getFoodLibrary: () => FoodLibraryApi.getFoodLibrary(),
searchFoods: (keyword: string) => FoodLibraryApi.searchFoods({ keyword }), searchFoods: (keyword: string) => FoodLibraryApi.searchFoods({ keyword }),
getFoodById: (id: number) => FoodLibraryApi.getFoodById({ id }), getFoodById: (id: number) => FoodLibraryApi.getFoodById({ id }),
createCustomFood: (data: CreateCustomFoodDto) => FoodLibraryApi.createCustomFood(data),
deleteCustomFood: (id: number) => FoodLibraryApi.deleteCustomFood(id),
}; };