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

35
components/NutritionRadarCard.tsx
View File

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

39
components/NutritionRecordCard.tsx
View File

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

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

@@ -1,8 +1,9 @@
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 React, { useEffect, useMemo, useState } from 'react';
import {
ActivityIndicator,
Alert,
Dimensions,
Keyboard,
@@ -16,6 +17,9 @@ import {
TouchableOpacity,
View
} from 'react-native';
import { useAppSelector } from '@/hooks/redux';
import { useCosUpload } from '@/hooks/useCosUpload';
import { Colors } from '@/constants/Colors';
export interface CreateCustomFoodModalProps {
visible: boolean;
@@ -25,7 +29,6 @@ export interface CreateCustomFoodModalProps {
export interface CustomFoodData {
name: string;
unit: string;
defaultAmount: number;
caloriesUnit: string;
calories: number;
@@ -41,7 +44,6 @@ export function CreateCustomFoodModal({
onSave
}: CreateCustomFoodModalProps) {
const [foodName, setFoodName] = useState('');
const [foodUnit, setFoodUnit] = useState('');
const [defaultAmount, setDefaultAmount] = useState('100');
const [caloriesUnit, setCaloriesUnit] = useState('千卡');
const [calories, setCalories] = useState('100');
@@ -51,6 +53,20 @@ export function CreateCustomFoodModal({
const [carbohydrate, setCarbohydrate] = 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(() => {
const keyboardDidShowListener = Keyboard.addListener(
@@ -76,7 +92,6 @@ export function CreateCustomFoodModal({
useEffect(() => {
if (visible) {
setFoodName('');
setFoodUnit('');
setDefaultAmount('100');
setCaloriesUnit('千卡');
setCalories('100');
@@ -92,21 +107,41 @@ export function CreateCustomFoodModal({
// 选择图片
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);
try {
const resp = await ImagePicker.requestMediaLibraryPermissionsAsync();
const libGranted = resp.status === 'granted' || (resp as any).accessPrivileges === 'limited';
if (!libGranted) {
Alert.alert('权限不足', '需要相册权限以选择照片');
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
quality: 0.9,
aspect: [1, 1],
mediaTypes: ['images'],
base64: false,
});
if (!result.canceled) {
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('提示', '请输入食物名称');
return;
}
if (!foodUnit.trim()) {
Alert.alert('提示', '请输入食物单位');
return;
}
if (!calories.trim() || parseFloat(calories) <= 0) {
Alert.alert('提示', '请输入有效的热量值');
return;
@@ -130,7 +162,6 @@ export function CreateCustomFoodModal({
const foodData: CustomFoodData = {
name: foodName.trim(),
unit: foodUnit.trim(),
defaultAmount: parseFloat(defaultAmount) || 100,
caloriesUnit,
calories: parseFloat(calories) || 0,
@@ -182,14 +213,14 @@ export function CreateCustomFoodModal({
<TouchableOpacity
style={[
styles.saveButton,
(!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonDisabled
(!foodName.trim() || !calories.trim()) && styles.saveButtonDisabled
]}
onPress={handleSave}
disabled={!foodName.trim() || !foodUnit.trim() || !calories.trim()}
disabled={!foodName.trim() || !calories.trim()}
>
<Text style={[
styles.saveButtonText,
(!foodName.trim() || !foodUnit.trim() || !calories.trim()) && styles.saveButtonTextDisabled
(!foodName.trim() || !calories.trim()) && styles.saveButtonTextDisabled
]}>保存</Text>
</TouchableOpacity>
</View>
@@ -211,7 +242,7 @@ export function CreateCustomFoodModal({
{foodName || '食物名称'}
</Text>
<Text style={styles.previewCalories}>
{actualCalories}{caloriesUnit}/{defaultAmount}{foodUnit}
{actualCalories}{caloriesUnit}/{defaultAmount}g
</Text>
</View>
</View>
@@ -226,26 +257,18 @@ export function CreateCustomFoodModal({
</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 style={styles.inputRowContainer}>
<Text style={styles.inputRowLabel}>食物名称</Text>
<View style={styles.inputRowContent}>
<View style={styles.numberInputContainer}>
<TextInput
style={styles.modernNumberInput}
value={foodName}
onChangeText={setFoodName}
placeholder="例如，汉堡"
placeholderTextColor="#A0A0A0"
/>
</View>
</View>
</View>
@@ -262,17 +285,11 @@ export function CreateCustomFoodModal({
placeholder="100"
placeholderTextColor="#A0A0A0"
/>
<Text style={styles.unitText}>{foodUnit || '单位'}</Text>
<Text style={styles.unitText}>g</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>
@@ -301,7 +318,11 @@ export function CreateCustomFoodModal({
<View style={styles.inputRowContainer}>
<Text style={styles.inputRowLabel}>照片</Text>
<View style={styles.inputRowContent}>
<TouchableOpacity style={styles.modernImageSelector} onPress={handleSelectImage}>
<TouchableOpacity
style={styles.modernImageSelector}
onPress={handleSelectImage}
disabled={uploading}
>
{imageUrl ? (
<Image style={styles.selectedImage} source={{ uri: imageUrl }} />
) : (
@@ -310,6 +331,11 @@ export function CreateCustomFoodModal({
<Text style={styles.imagePlaceholderText}>添加照片</Text>
</View>
)}
{uploading && (
<View style={styles.imageLoadingOverlay}>
<ActivityIndicator size="large" color="#FFFFFF" />
</View>
)}
</TouchableOpacity>
</View>
</View>
@@ -369,13 +395,6 @@ export function CreateCustomFoodModal({
</View>
</View>
</View>
{/* 底部提示 */}
<View style={styles.disclaimer}>
<Text style={styles.disclaimerText}>
*为了避免历史饮食数据混乱，自定义食物创建后不支持修改。
</Text>
</View>
</ScrollView>
</View>
</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({
overlay: {
@@ -410,8 +429,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
paddingHorizontal: 16,
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
},
backButton: {
padding: 4,
@@ -434,15 +451,14 @@ const styles = StyleSheet.create({
},
saveButtonText: {
fontSize: 16,
color: '#4CAF50',
color: Colors.light.primary,
fontWeight: '500',
},
saveButtonTextDisabled: {
color: '#999',
color: Colors.light.textMuted,
},
previewSection: {
paddingHorizontal: 16,
paddingTop: 20,
paddingBottom: 16,
},
previewCard: {
@@ -489,15 +505,16 @@ const styles = StyleSheet.create({
sectionHeader: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 16,
marginBottom: 4,
},
sectionTitle: {
fontSize: 18,
fontWeight: '600',
fontSize: 14,
color: '#333',
marginLeft: 8
},
requiredIndicator: {
fontSize: 18,
fontSize: 16,
color: '#FF4444',
marginLeft: 4,
},
@@ -515,16 +532,15 @@ const styles = StyleSheet.create({
inputLabel: {
fontSize: 14,
color: '#666',
marginBottom: 8,
fontWeight: '500',
},
modernTextInput: {
borderWidth: 1.5,
borderColor: '#E8E8E8',
flex: 1,
borderRadius: 12,
paddingHorizontal: 16,
paddingVertical: 14,
paddingHorizontal: 12,
paddingVertical: 8,
fontSize: 16,
marginLeft: 20,
color: '#333',
backgroundColor: '#FFFFFF',
shadowColor: '#000',
@@ -536,9 +552,8 @@ const styles = StyleSheet.create({
numberInputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderWidth: 1.5,
borderColor: '#E8E8E8',
borderRadius: 12,
backgroundColor: '#FFFFFF',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
@@ -548,8 +563,8 @@ const styles = StyleSheet.create({
},
modernNumberInput: {
flex: 1,
paddingHorizontal: 16,
paddingVertical: 14,
paddingHorizontal: 12,
paddingVertical: 8,
fontSize: 16,
color: '#333',
textAlign: 'right',
@@ -578,8 +593,8 @@ const styles = StyleSheet.create({
elevation: 1,
},
selectButtonText: {
fontSize: 16,
color: '#333',
fontSize: 14,
color: 'gray',
fontWeight: '500',
},
modernImageSelector: {
@@ -695,6 +710,7 @@ const styles = StyleSheet.create({
// 新增行布局样式
inputRowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 20,
},
@@ -708,4 +724,15 @@ const styles = StyleSheet.create({
inputRowContent: {
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 React, { useEffect, useState } from 'react';
import {
Alert,
Dimensions,
Keyboard,
KeyboardAvoidingView,
@@ -14,6 +15,7 @@ import {
View,
} from 'react-native';
// 导入统一的食物类型定义
import { Colors } from '@/constants/Colors';
import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
import type { FoodItem } from '@/types/food';
import { Image } from 'expo-image';
@@ -38,8 +40,10 @@ const QUICK_SELECT_OPTIONS = [
export interface FoodDetailModalProps {
visible: boolean;
food: FoodItem | null;
category?: { id: string; isSystem?: boolean } | null;
onClose: () => void;
onSave: (food: FoodItem, amount: number, unit: string) => void;
onDelete?: (foodId: string) => void;
}
// 获取营养数据，优先使用FoodItem中的数据
@@ -78,8 +82,10 @@ const getNutritionInfo = (food: FoodItem): NutritionInfo => {
export function FoodDetailModal({
visible,
food,
category,
onClose,
onSave
onSave,
onDelete
}: FoodDetailModalProps) {
const [amount, setAmount] = useState('100');
const [isFavorite, setIsFavorite] = useState(false);
@@ -189,9 +195,9 @@ export function FoodDetailModal({
<TouchableOpacity onPress={onClose} style={styles.closeButton}>
<Ionicons name="close" size={24} color="#666" />
</TouchableOpacity>
<TouchableOpacity style={styles.correctButton}>
{/* <TouchableOpacity style={styles.correctButton}>
<Text style={styles.correctButtonText}>我要纠错</Text>
</TouchableOpacity>
</TouchableOpacity> */}
</View>
{/* 食物信息 */}
@@ -203,16 +209,44 @@ export function FoodDetailModal({
/>
<Text style={styles.foodName}>{food.name}</Text>
</View>
<TouchableOpacity
onPress={() => setIsFavorite(!isFavorite)}
style={styles.favoriteButton}
>
<Ionicons
name={isFavorite ? "star" : "star-outline"}
size={24}
color={isFavorite ? "#FFD700" : "#CCC"}
/>
</TouchableOpacity>
<View style={styles.actionButtons}>
{/* <TouchableOpacity
onPress={() => setIsFavorite(!isFavorite)}
style={styles.favoriteButton}
>
<Ionicons
name={isFavorite ? "star" : "star-outline"}
size={18}
color={isFavorite ? "#FFD700" : "#CCC"}
/>
</TouchableOpacity> */}
{/* 删除按钮 - 仅对自定义食物显示 */}
{category && category.id === 'custom' && onDelete && (
<TouchableOpacity
onPress={() => {
Alert.alert(
'删除食物',
'确定要删除这个自定义食物吗？',
[
{ text: '取消', style: 'cancel' },
{
text: '删除',
style: 'destructive',
onPress: () => onDelete(food.id)
}
]
);
}}
style={styles.deleteButton}
>
<Ionicons
name="trash-outline"
size={18}
color="#FF6B6B"
/>
</TouchableOpacity>
)}
</View>
</View>
{/* 营养信息 */}
@@ -367,13 +401,20 @@ const styles = StyleSheet.create({
color: '#333',
marginRight: 8,
},
actionButtons: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
favoriteButton: {
padding: 8,
},
deleteButton: {
padding: 8,
},
nutritionContainer: {
flexDirection: 'row',
paddingHorizontal: screenWidth > 400 ? 24 : 16,
paddingVertical: 16,
justifyContent: 'space-between',
},
nutritionItem: {
@@ -392,28 +433,29 @@ const styles = StyleSheet.create({
},
amountContainer: {
alignItems: 'center',
paddingVertical: 16,
},
inputWithUnit: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#E8F5E8',
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 16,
},
amountInput: {
fontSize: 24,
fontWeight: '600',
color: '#4CAF50',
color: Colors.light.text,
textAlign: 'center',
minWidth: 80,
backgroundColor: 'transparent',
borderBottomWidth: 1,
borderBottomColor: 'gray',
},
unitLabel: {
fontSize: 18,
fontWeight: '500',
color: '#4CAF50',
color: Colors.light.text,
marginLeft: 8,
},
quickSelectContainer: {
@@ -432,7 +474,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
quickSelectOptionActive: {
backgroundColor: '#4CAF50',
backgroundColor: Colors.light.primary,
},
quickSelectText: {
fontSize: 14,
@@ -443,7 +485,7 @@ const styles = StyleSheet.create({
color: '#FFFFFF',
},
saveButton: {
backgroundColor: '#4CAF50',
backgroundColor: Colors.light.primary,
marginHorizontal: screenWidth > 400 ? 24 : 16,
marginBottom: 16,
paddingVertical: 14,