6cdd2fdf9c
- 添加推送通知管理器和设备令牌管理 - 实现推送通知权限请求和令牌注册 - 新增推送通知设置页面 - 集成推送通知初始化到应用启动流程 - 添加推送通知API服务和本地存储管理 - 更新个人页面添加推送通知设置入口
913 lines
26 KiB
TypeScript
913 lines
26 KiB
TypeScript
import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal';
|
|
import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
|
|
import { HeaderBar } from '@/components/ui/HeaderBar';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
|
|
import { useAppDispatch } from '@/hooks/redux';
|
|
import { useFoodLibrary, useFoodSearch } from '@/hooks/useFoodLibrary';
|
|
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
|
import { addDietRecord, type CreateDietRecordDto } from '@/services/dietRecords';
|
|
import { foodLibraryApi, type CreateCustomFoodDto } from '@/services/foodLibraryApi';
|
|
import { fetchDailyNutritionData } from '@/store/nutritionSlice';
|
|
import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { Image } from 'expo-image';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Modal,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
// 餐次映射保持不变
|
|
|
|
// 餐次映射
|
|
const MEAL_TYPE_MAP = {
|
|
breakfast: '早餐',
|
|
lunch: '午餐',
|
|
dinner: '晚餐',
|
|
snack: '加餐'
|
|
};
|
|
|
|
export default function FoodLibraryScreen() {
|
|
const safeAreaTop = useSafeAreaTop()
|
|
const router = useRouter();
|
|
const params = useLocalSearchParams<{ mealType?: string }>();
|
|
const mealType = (params.mealType as MealType) || 'breakfast';
|
|
|
|
// Redux hooks
|
|
const dispatch = useAppDispatch();
|
|
const { categories, loading, error, clearErrors, loadFoodLibrary } = useFoodLibrary();
|
|
const { searchResults, searchLoading, search, clearResults } = useFoodSearch();
|
|
|
|
// 本地状态
|
|
const [selectedCategoryId, setSelectedCategoryId] = useState('common');
|
|
const [searchText, setSearchText] = useState('');
|
|
const [selectedFood, setSelectedFood] = useState<FoodItem | null>(null);
|
|
const [showFoodDetail, setShowFoodDetail] = useState(false);
|
|
const [selectedFoodItems, setSelectedFoodItems] = useState<SelectedFoodItem[]>([]);
|
|
const [showMealSelector, setShowMealSelector] = useState(false);
|
|
const [currentMealType, setCurrentMealType] = useState<MealType>(mealType);
|
|
const [isRecording, setIsRecording] = useState(false);
|
|
const [showCreateCustomFood, setShowCreateCustomFood] = useState(false);
|
|
|
|
// 获取当前选中的分类
|
|
const selectedCategory = categories.find(cat => cat.id === selectedCategoryId);
|
|
|
|
|
|
// 过滤食物列表 - 优先显示搜索结果
|
|
const filteredFoods = useMemo(() => {
|
|
if (searchText.trim() && searchResults.length > 0) {
|
|
return searchResults;
|
|
}
|
|
|
|
if (selectedCategory) {
|
|
return selectedCategory.foods
|
|
}
|
|
|
|
return [];
|
|
}, [searchText, searchResults, selectedCategory]);
|
|
|
|
|
|
// 处理搜索
|
|
useEffect(() => {
|
|
const timeoutId = setTimeout(() => {
|
|
if (searchText.trim()) {
|
|
search(searchText);
|
|
} else {
|
|
clearResults();
|
|
}
|
|
}, 300); // 防抖
|
|
|
|
return () => clearTimeout(timeoutId);
|
|
}, [searchText, search, clearResults]);
|
|
|
|
// 处理食物选择 - 显示详情弹窗
|
|
const handleSelectFood = (food: FoodItem) => {
|
|
console.log('选择食物:', food);
|
|
setSelectedFood(food);
|
|
setShowFoodDetail(true);
|
|
console.log('设置弹窗状态:', {
|
|
showFoodDetail: true,
|
|
selectedFood: food,
|
|
foodName: food.name,
|
|
foodId: food.id
|
|
});
|
|
};
|
|
|
|
// 处理食物保存
|
|
const handleSaveFood = (food: FoodItem, amount: number, unit: string) => {
|
|
// 计算实际热量
|
|
const actualCalories = Math.round((food.calories * amount) / 100);
|
|
|
|
// 创建新的选择项目
|
|
const newSelectedItem: SelectedFoodItem = {
|
|
id: `${food.id}_${Date.now()}`, // 使用时间戳确保唯一性
|
|
food,
|
|
amount,
|
|
unit,
|
|
calories: actualCalories
|
|
};
|
|
|
|
// 添加到已选择列表
|
|
setSelectedFoodItems(prev => [...prev, newSelectedItem]);
|
|
|
|
console.log('保存食物:', food, amount, unit, '热量:', actualCalories);
|
|
setShowFoodDetail(false);
|
|
};
|
|
|
|
// 移除已选择的食物
|
|
const handleRemoveSelectedFood = (itemId: string) => {
|
|
setSelectedFoodItems(prev => prev.filter(item => item.id !== itemId));
|
|
};
|
|
|
|
// 计算总热量
|
|
const totalCalories = selectedFoodItems.reduce((sum, item) => sum + item.calories, 0);
|
|
|
|
// 关闭详情弹窗
|
|
const handleCloseFoodDetail = () => {
|
|
setShowFoodDetail(false);
|
|
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 () => {
|
|
if (selectedFoodItems.length === 0) return;
|
|
|
|
setIsRecording(true);
|
|
|
|
try {
|
|
// 逐个记录选中的食物
|
|
for (const item of selectedFoodItems) {
|
|
const dietRecordData: CreateDietRecordDto = {
|
|
mealType: currentMealType,
|
|
foodName: item.food.name,
|
|
foodDescription: item.food.description,
|
|
portionDescription: `${item.amount}${item.unit}`,
|
|
estimatedCalories: item.calories,
|
|
proteinGrams: item.food.protein ? Number(((item.food.protein * item.amount) / 100).toFixed(2)) : undefined,
|
|
carbohydrateGrams: item.food.carbohydrate ? Number(((item.food.carbohydrate * item.amount) / 100).toFixed(2)) : undefined,
|
|
fatGrams: item.food.fat ? Number(((item.food.fat * item.amount) / 100).toFixed(2)) : undefined,
|
|
fiberGrams: item.food.fiber ? Number(((item.food.fiber * item.amount) / 100).toFixed(2)) : undefined,
|
|
sugarGrams: item.food.sugar ? Number(((item.food.sugar * item.amount) / 100).toFixed(2)) : undefined,
|
|
sodiumMg: item.food.sodium ? Number(((item.food.sodium * item.amount) / 100).toFixed(2)) : undefined,
|
|
additionalNutrition: item.food.additionalNutrition,
|
|
source: 'manual',
|
|
mealTime: new Date().toISOString(),
|
|
imageUrl: item.food.imageUrl,
|
|
};
|
|
|
|
await addDietRecord(dietRecordData);
|
|
}
|
|
|
|
// 记录成功后，刷新当天的营养数据
|
|
const today = new Date();
|
|
await dispatch(fetchDailyNutritionData(today));
|
|
|
|
// 清空选择列表并返回
|
|
setSelectedFoodItems([]);
|
|
router.back();
|
|
} catch (error) {
|
|
console.error('记录饮食失败:', error);
|
|
// 这里可以显示错误提示
|
|
} finally {
|
|
setIsRecording(false);
|
|
}
|
|
};
|
|
|
|
// 处理餐次选择
|
|
const handleMealTypeSelect = (selectedMealType: MealType) => {
|
|
setCurrentMealType(selectedMealType);
|
|
setShowMealSelector(false);
|
|
};
|
|
|
|
// 处理创建自定义食物
|
|
const handleCreateCustomFood = () => {
|
|
setShowCreateCustomFood(true);
|
|
};
|
|
|
|
// 处理保存自定义食物
|
|
const handleSaveCustomFood = async (customFoodData: CustomFoodData) => {
|
|
try {
|
|
// 转换数据格式以匹配API要求
|
|
const createData: CreateCustomFoodDto = {
|
|
name: customFoodData.name,
|
|
caloriesPer100g: customFoodData.calories,
|
|
proteinPer100g: customFoodData.protein,
|
|
carbohydratePer100g: customFoodData.carbohydrate,
|
|
fatPer100g: customFoodData.fat,
|
|
imageUrl: customFoodData.imageUrl,
|
|
};
|
|
|
|
// 调用API创建自定义食物
|
|
const createdFood = await foodLibraryApi.createCustomFood(createData);
|
|
|
|
// 需要拉取一遍最新的食物列表
|
|
await loadFoodLibrary();
|
|
|
|
// 创建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('创建失败', '创建自定义食物时发生错误，请稍后重试');
|
|
}
|
|
};
|
|
|
|
// 关闭自定义食物弹窗
|
|
const handleCloseCreateCustomFood = () => {
|
|
setShowCreateCustomFood(false);
|
|
};
|
|
|
|
// 餐次选择选项
|
|
const mealOptions = [
|
|
{ key: 'breakfast' as const, label: '早餐', color: '#FF6B35' },
|
|
{ key: 'lunch' as const, label: '午餐', color: '#4CAF50' },
|
|
{ key: 'dinner' as const, label: '晚餐', color: '#2196F3' },
|
|
{ key: 'snack' as const, label: '加餐', color: '#FF9800' },
|
|
];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 头部 */}
|
|
<HeaderBar
|
|
title="食物库"
|
|
onBack={() => router.back()}
|
|
variant="elevated"
|
|
right={
|
|
<TouchableOpacity style={styles.customButton} onPress={handleCreateCustomFood}>
|
|
<Text style={styles.customButtonText}>自定义</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
/>
|
|
|
|
<View style={{
|
|
paddingTop: safeAreaTop
|
|
}} />
|
|
|
|
{/* 搜索框 */}
|
|
<View style={styles.searchContainer}>
|
|
<Ionicons name="search" size={20} color="#999" style={styles.searchIcon} />
|
|
<TextInput
|
|
style={styles.searchInput}
|
|
placeholder="搜索食物"
|
|
value={searchText}
|
|
onChangeText={setSearchText}
|
|
placeholderTextColor="#999"
|
|
/>
|
|
</View>
|
|
|
|
{/* 主要内容区域 - 卡片样式 */}
|
|
<View style={styles.mainContentCard}>
|
|
{loading && categories.length === 0 ? (
|
|
<View style={styles.loadingContainer}>
|
|
<ActivityIndicator size="large" color="#4CAF50" />
|
|
<Text style={styles.loadingText}>加载食物库中...</Text>
|
|
</View>
|
|
) : error ? (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
<TouchableOpacity
|
|
style={styles.retryButton}
|
|
onPress={() => {
|
|
clearErrors();
|
|
// 这里可以重新加载数据
|
|
}}
|
|
>
|
|
<Text style={styles.retryButtonText}>重试</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
) : (
|
|
<View style={styles.mainContent}>
|
|
{/* 左侧分类导航 */}
|
|
<View style={styles.categoryContainer}>
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
{categories.map((category) => (
|
|
<TouchableOpacity
|
|
key={category.id}
|
|
style={[
|
|
styles.categoryItem,
|
|
selectedCategoryId === category.id && styles.categoryItemActive
|
|
]}
|
|
onPress={() => {
|
|
setSelectedCategoryId(category.id);
|
|
// 切换分类时清除搜索
|
|
if (searchText) {
|
|
setSearchText('');
|
|
clearResults();
|
|
}
|
|
}}
|
|
>
|
|
<Text style={[
|
|
styles.categoryText,
|
|
selectedCategoryId === category.id && styles.categoryTextActive
|
|
]}>
|
|
{category.name}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
|
|
{/* 右侧食物列表 */}
|
|
<View style={styles.foodContainer}>
|
|
{searchLoading ? (
|
|
<View style={styles.searchLoadingContainer}>
|
|
<ActivityIndicator size="small" color="#4CAF50" />
|
|
<Text style={styles.searchLoadingText}>搜索中...</Text>
|
|
</View>
|
|
) : (
|
|
<ScrollView showsVerticalScrollIndicator={false}>
|
|
{filteredFoods.map((food) => (
|
|
<View key={food.id} style={styles.foodItem}>
|
|
<View style={styles.foodInfo}>
|
|
<Image
|
|
style={styles.foodImage}
|
|
source={{ uri: food.imageUrl || DEFAULT_IMAGE_FOOD }}
|
|
cachePolicy={'memory-disk'}
|
|
/>
|
|
<View style={styles.foodDetails}>
|
|
<Text style={styles.foodName}>{food.name}</Text>
|
|
<Text style={styles.foodCalories}>
|
|
{food.calories}千卡/{food.unit}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.addButton}
|
|
onPress={() => handleSelectFood(food)}
|
|
>
|
|
<Ionicons name="add" size={20} color="#666" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
))}
|
|
|
|
{filteredFoods.length === 0 && !searchLoading && (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>
|
|
{searchText ? '未找到相关食物' : '暂无食物数据'}
|
|
</Text>
|
|
{searchText && (
|
|
<Text style={styles.emptySubText}>
|
|
尝试使用其他关键词搜索
|
|
</Text>
|
|
)}
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
)}
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* 已选择食物列表 */}
|
|
{selectedFoodItems.length > 0 && (
|
|
<View style={styles.selectedFoodsContainer}>
|
|
<View style={styles.selectedFoodsHeader}>
|
|
<Text style={styles.selectedFoodsTitle}>已选择食物 ({selectedFoodItems.length})</Text>
|
|
<Text style={styles.totalCalories}>总热量: {totalCalories}千卡</Text>
|
|
</View>
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
style={styles.selectedFoodsList}
|
|
contentContainerStyle={styles.selectedFoodsContent}
|
|
>
|
|
{selectedFoodItems.map((item) => (
|
|
<View key={item.id} style={styles.selectedFoodItem}>
|
|
<TouchableOpacity
|
|
style={styles.removeButton}
|
|
onPress={() => handleRemoveSelectedFood(item.id)}
|
|
>
|
|
<Ionicons name="close-circle" size={16} color="#FF4444" />
|
|
</TouchableOpacity>
|
|
|
|
{item.food.imageUrl ? <Image
|
|
style={styles.selectedFoodImage}
|
|
source={{ uri: item.food.imageUrl }}
|
|
/> : <Text style={styles.selectedFoodEmoji}>{item.food.emoji}</Text>}
|
|
<Text style={styles.selectedFoodName} numberOfLines={1}>{item.food.name}</Text>
|
|
<Text style={styles.selectedFoodAmount}>{item.amount}{item.unit}</Text>
|
|
<Text style={styles.selectedFoodCalories}>{item.calories}千卡</Text>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
</View>
|
|
)}
|
|
|
|
{/* 底部餐次选择和记录按钮 */}
|
|
<View style={styles.bottomContainer}>
|
|
<TouchableOpacity
|
|
style={styles.mealSelector}
|
|
onPress={() => setShowMealSelector(true)}
|
|
>
|
|
<View style={[
|
|
styles.mealIndicator,
|
|
{ backgroundColor: mealOptions.find(option => option.key === currentMealType)?.color || '#FF6B35' }
|
|
]} />
|
|
<Text style={styles.mealText}>{MEAL_TYPE_MAP[currentMealType]}</Text>
|
|
<Ionicons name="chevron-down" size={16} color="#333" />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.recordButton,
|
|
(selectedFoodItems.length === 0 || isRecording) && styles.recordButtonDisabled
|
|
]}
|
|
disabled={selectedFoodItems.length === 0 || isRecording}
|
|
onPress={handleRecordDiet}
|
|
>
|
|
{isRecording ? (
|
|
<ActivityIndicator size="small" color="#FFF" />
|
|
) : (
|
|
<Text style={[
|
|
styles.recordButtonText,
|
|
selectedFoodItems.length === 0 && styles.recordButtonTextDisabled
|
|
]}>记录</Text>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* 餐次选择弹窗 */}
|
|
<Modal
|
|
visible={showMealSelector}
|
|
transparent={true}
|
|
animationType="fade"
|
|
onRequestClose={() => setShowMealSelector(false)}
|
|
>
|
|
<View style={styles.mealSelectorOverlay}>
|
|
<TouchableOpacity
|
|
style={styles.mealSelectorBackdrop}
|
|
onPress={() => setShowMealSelector(false)}
|
|
/>
|
|
<View style={styles.mealSelectorModal}>
|
|
<View style={styles.mealSelectorHeader}>
|
|
<Text style={styles.mealSelectorTitle}>选择餐次</Text>
|
|
<TouchableOpacity onPress={() => setShowMealSelector(false)}>
|
|
<Ionicons name="close" size={24} color="#666" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.mealOptionsContainer}>
|
|
{mealOptions.map((option) => (
|
|
<TouchableOpacity
|
|
key={option.key}
|
|
style={[
|
|
styles.mealOption,
|
|
currentMealType === option.key && styles.mealOptionActive
|
|
]}
|
|
onPress={() => handleMealTypeSelect(option.key)}
|
|
>
|
|
<View style={[styles.mealOptionIndicator, { backgroundColor: option.color }]} />
|
|
<Text style={[
|
|
styles.mealOptionText,
|
|
currentMealType === option.key && styles.mealOptionTextActive
|
|
]}>
|
|
{option.label}
|
|
</Text>
|
|
{currentMealType === option.key && (
|
|
<Ionicons name="checkmark" size={20} color="#4CAF50" />
|
|
)}
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
|
|
{/* 食物详情弹窗 */}
|
|
<FoodDetailModal
|
|
visible={showFoodDetail}
|
|
food={selectedFood}
|
|
category={selectedCategory}
|
|
onClose={handleCloseFoodDetail}
|
|
onSave={handleSaveFood}
|
|
onDelete={handleDeleteFood}
|
|
/>
|
|
|
|
{/* 创建自定义食物弹窗 */}
|
|
<CreateCustomFoodModal
|
|
visible={showCreateCustomFood}
|
|
onClose={handleCloseCreateCustomFood}
|
|
onSave={handleSaveCustomFood}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Colors.light.pageBackgroundEmphasis,
|
|
},
|
|
customButton: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
},
|
|
customButtonText: {
|
|
fontSize: 16,
|
|
color: Colors.light.textSecondary,
|
|
fontWeight: '500',
|
|
},
|
|
searchContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#FFF',
|
|
marginHorizontal: 16,
|
|
marginVertical: 12,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 10,
|
|
borderRadius: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
elevation: 2,
|
|
},
|
|
searchIcon: {
|
|
marginRight: 8,
|
|
},
|
|
searchInput: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
color: '#333',
|
|
},
|
|
mainContentCard: {
|
|
flex: 1,
|
|
marginHorizontal: 16,
|
|
marginBottom: 16,
|
|
backgroundColor: '#FFFFFF',
|
|
borderRadius: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
overflow: 'hidden',
|
|
},
|
|
mainContent: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
},
|
|
categoryContainer: {
|
|
width: 100,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
categoryItem: {
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 12,
|
|
alignItems: 'center',
|
|
},
|
|
categoryItemActive: {
|
|
backgroundColor: '#F0F9FF'
|
|
},
|
|
categoryText: {
|
|
fontSize: 14,
|
|
color: '#666',
|
|
textAlign: 'center',
|
|
},
|
|
categoryTextActive: {
|
|
color: Colors.light.text,
|
|
fontWeight: '500',
|
|
},
|
|
foodContainer: {
|
|
flex: 1,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
foodItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
},
|
|
foodInfo: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
foodImage: {
|
|
width: 32,
|
|
height: 32,
|
|
},
|
|
foodEmoji: {
|
|
fontSize: 32,
|
|
marginRight: 12,
|
|
},
|
|
foodDetails: {
|
|
flex: 1,
|
|
marginLeft: 12
|
|
},
|
|
foodName: {
|
|
fontSize: 16,
|
|
color: '#333',
|
|
fontWeight: '500',
|
|
marginBottom: 2,
|
|
|
|
},
|
|
foodCalories: {
|
|
fontSize: 14,
|
|
color: '#999',
|
|
},
|
|
addButton: {
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
backgroundColor: '#F5F5F5',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 40,
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
color: '#999',
|
|
},
|
|
emptySubText: {
|
|
fontSize: 14,
|
|
color: '#CCC',
|
|
marginTop: 8,
|
|
textAlign: 'center',
|
|
},
|
|
// 加载状态样式
|
|
loadingContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 60,
|
|
},
|
|
loadingText: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
marginTop: 12,
|
|
},
|
|
// 错误状态样式
|
|
errorContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 60,
|
|
paddingHorizontal: 20,
|
|
},
|
|
errorText: {
|
|
fontSize: 16,
|
|
color: '#FF4444',
|
|
textAlign: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
retryButton: {
|
|
backgroundColor: '#4CAF50',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 10,
|
|
borderRadius: 20,
|
|
},
|
|
retryButtonText: {
|
|
fontSize: 14,
|
|
color: '#FFF',
|
|
fontWeight: '500',
|
|
},
|
|
// 搜索加载状态样式
|
|
searchLoadingContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 20,
|
|
},
|
|
searchLoadingText: {
|
|
fontSize: 14,
|
|
color: '#666',
|
|
marginLeft: 8,
|
|
},
|
|
bottomContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
backgroundColor: '#FFF',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#E5E5E5',
|
|
},
|
|
mealSelector: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
backgroundColor: '#F8F9FA',
|
|
borderRadius: 20,
|
|
},
|
|
mealIndicator: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
backgroundColor: '#FF6B35',
|
|
marginRight: 8,
|
|
},
|
|
mealText: {
|
|
fontSize: 14,
|
|
color: '#333',
|
|
marginRight: 4,
|
|
},
|
|
recordButton: {
|
|
backgroundColor: Colors.light.primary,
|
|
paddingHorizontal: 24,
|
|
paddingVertical: 10,
|
|
borderRadius: 20,
|
|
},
|
|
recordButtonText: {
|
|
fontSize: 16,
|
|
color: '#FFF',
|
|
fontWeight: '500',
|
|
},
|
|
recordButtonDisabled: {
|
|
backgroundColor: '#CCC',
|
|
},
|
|
recordButtonTextDisabled: {
|
|
color: '#999',
|
|
},
|
|
// 已选择食物列表样式
|
|
selectedFoodsContainer: {
|
|
backgroundColor: '#FFF',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#E5E5E5',
|
|
paddingVertical: 12,
|
|
maxHeight: 140, // 限制最大高度
|
|
},
|
|
selectedFoodsHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
marginBottom: 8,
|
|
},
|
|
selectedFoodsTitle: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
},
|
|
totalCalories: {
|
|
fontSize: 14,
|
|
color: Colors.light.text,
|
|
fontWeight: '500',
|
|
},
|
|
selectedFoodsList: {
|
|
paddingHorizontal: 16,
|
|
},
|
|
selectedFoodsContent: {
|
|
paddingRight: 16,
|
|
},
|
|
selectedFoodItem: {
|
|
backgroundColor: '#F8F9FA',
|
|
borderRadius: 12,
|
|
padding: 8,
|
|
marginRight: 8,
|
|
minWidth: 80,
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
},
|
|
removeButton: {
|
|
position: 'absolute',
|
|
top: 4,
|
|
right: 4,
|
|
backgroundColor: '#FFF',
|
|
borderRadius: 8,
|
|
zIndex: 1,
|
|
},
|
|
selectedFoodImage: {
|
|
width: 20,
|
|
height: 20,
|
|
marginBottom: 4,
|
|
},
|
|
selectedFoodEmoji: {
|
|
fontSize: 20,
|
|
marginBottom: 4,
|
|
},
|
|
selectedFoodName: {
|
|
fontSize: 12,
|
|
color: '#333',
|
|
fontWeight: '500',
|
|
textAlign: 'center',
|
|
marginBottom: 2,
|
|
maxWidth: 64,
|
|
},
|
|
selectedFoodAmount: {
|
|
fontSize: 11,
|
|
color: '#666',
|
|
marginBottom: 2,
|
|
},
|
|
selectedFoodCalories: {
|
|
fontSize: 11,
|
|
color: '#4CAF50',
|
|
fontWeight: '500',
|
|
},
|
|
// 餐次选择弹窗样式
|
|
mealSelectorOverlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
mealSelectorBackdrop: {
|
|
flex: 1,
|
|
},
|
|
mealSelectorModal: {
|
|
backgroundColor: '#FFF',
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
paddingBottom: 34, // 为底部安全区域留出空间
|
|
},
|
|
mealSelectorHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#E5E5E5',
|
|
},
|
|
mealSelectorTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '600',
|
|
color: '#333',
|
|
},
|
|
mealOptionsContainer: {
|
|
paddingHorizontal: 20,
|
|
paddingVertical: 16,
|
|
},
|
|
mealOption: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 16,
|
|
paddingHorizontal: 16,
|
|
borderRadius: 12,
|
|
marginBottom: 8,
|
|
backgroundColor: '#F8F9FA',
|
|
},
|
|
mealOptionActive: {
|
|
backgroundColor: '#E8F5E8',
|
|
borderWidth: 1,
|
|
borderColor: '#4CAF50',
|
|
},
|
|
mealOptionIndicator: {
|
|
width: 12,
|
|
height: 12,
|
|
borderRadius: 6,
|
|
marginRight: 12,
|
|
},
|
|
mealOptionText: {
|
|
flex: 1,
|
|
fontSize: 16,
|
|
color: '#333',
|
|
fontWeight: '500',
|
|
},
|
|
mealOptionTextActive: {
|
|
color: '#4CAF50',
|
|
},
|
|
}); |