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

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,
},
});