5e3203f1ce
- 在 CoachScreen 中引入 HistoryModal 组件，优化历史会话展示 - 更新 NutritionRecordCard 组件，使用 Popover 替代 ActionSheet，提升操作体验 - 在 NutritionRecordsScreen 中引入 DateSelector 组件，简化日期选择逻辑 - 更新 package.json 和 package-lock.json，新增 react-native-popover-view 依赖 - 移除不再使用的历史会话模态框代码，提升代码整洁性
418 lines
11 KiB
TypeScript
418 lines
11 KiB
TypeScript
import { ThemedText } from '@/components/ThemedText';
|
|
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
import { DietRecord } from '@/services/dietRecords';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import dayjs from 'dayjs';
|
|
import React, { useMemo, useState, useRef } from 'react';
|
|
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
|
|
import Popover from 'react-native-popover-view';
|
|
|
|
export type NutritionRecordCardProps = {
|
|
record: DietRecord;
|
|
onPress?: () => void;
|
|
onDelete?: () => void;
|
|
showTimeline?: boolean;
|
|
isFirst?: boolean;
|
|
isLast?: boolean;
|
|
};
|
|
|
|
const MEAL_TYPE_LABELS = {
|
|
breakfast: '早餐',
|
|
lunch: '午餐',
|
|
dinner: '晚餐',
|
|
snack: '加餐',
|
|
other: '其他',
|
|
} as const;
|
|
|
|
const MEAL_TYPE_ICONS = {
|
|
breakfast: 'sunny-outline',
|
|
lunch: 'partly-sunny-outline',
|
|
dinner: 'moon-outline',
|
|
snack: 'cafe-outline',
|
|
other: 'restaurant-outline',
|
|
} as const;
|
|
|
|
const MEAL_TYPE_COLORS = {
|
|
breakfast: '#FFB366',
|
|
lunch: '#4ECDC4',
|
|
dinner: '#5D5FEF',
|
|
snack: '#FF6B6B',
|
|
other: '#9AA3AE',
|
|
} as const;
|
|
|
|
export function NutritionRecordCard({
|
|
record,
|
|
onPress,
|
|
onDelete,
|
|
showTimeline = false,
|
|
isFirst = false,
|
|
isLast = false
|
|
}: NutritionRecordCardProps) {
|
|
const surfaceColor = useThemeColor({}, 'surface');
|
|
const textColor = useThemeColor({}, 'text');
|
|
const textSecondaryColor = useThemeColor({}, 'textSecondary');
|
|
const primaryColor = useThemeColor({}, 'primary');
|
|
|
|
// Popover 状态管理
|
|
const [showPopover, setShowPopover] = useState(false);
|
|
const popoverRef = useRef<any>(null);
|
|
|
|
// 营养数据统计
|
|
const nutritionStats = useMemo(() => {
|
|
return [
|
|
{
|
|
label: '热量',
|
|
value: record.estimatedCalories ? `${Math.round(record.estimatedCalories)} 千卡` : '-',
|
|
icon: 'flame-outline' as const,
|
|
color: '#FF6B6B'
|
|
},
|
|
{
|
|
label: '蛋白质',
|
|
value: record.proteinGrams ? `${record.proteinGrams.toFixed(1)} g` : '-',
|
|
icon: 'fitness-outline' as const,
|
|
color: '#4ECDC4'
|
|
},
|
|
{
|
|
label: '碳水',
|
|
value: record.carbohydrateGrams ? `${record.carbohydrateGrams.toFixed(1)} g` : '-',
|
|
icon: 'leaf-outline' as const,
|
|
color: '#45B7D1'
|
|
},
|
|
{
|
|
label: '脂肪',
|
|
value: record.fatGrams ? `${record.fatGrams.toFixed(1)} g` : '-',
|
|
icon: 'water-outline' as const,
|
|
color: '#FFA07A'
|
|
},
|
|
];
|
|
}, [record]);
|
|
|
|
const mealTypeColor = MEAL_TYPE_COLORS[record.mealType];
|
|
const mealTypeIcon = MEAL_TYPE_ICONS[record.mealType];
|
|
const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType];
|
|
|
|
return (
|
|
<View style={styles.timelineContainer}>
|
|
{/* 时间轴 */}
|
|
{showTimeline && (
|
|
<View style={styles.timelineColumn}>
|
|
<View style={styles.timeContainer}>
|
|
<ThemedText style={[styles.timeText, { color: textSecondaryColor }]}>
|
|
{record.createdAt ? dayjs(record.createdAt).format('HH:mm') : '--:--'}
|
|
</ThemedText>
|
|
</View>
|
|
<View style={styles.timelineNode}>
|
|
<View style={[styles.timelineDot, { backgroundColor: mealTypeColor }]}>
|
|
<Ionicons name={mealTypeIcon as any} size={10} color="#FFFFFF" />
|
|
</View>
|
|
{!isLast && (
|
|
<View style={[styles.timelineLine, { backgroundColor: textSecondaryColor }]} />
|
|
)}
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
{/* 卡片内容 */}
|
|
<View
|
|
style={[
|
|
styles.card,
|
|
{ backgroundColor: surfaceColor },
|
|
showTimeline && styles.cardWithTimeline
|
|
]}
|
|
>
|
|
{/* 主要内容区域 */}
|
|
<View style={styles.mainContent}>
|
|
<View style={styles.foodInfoContainer}>
|
|
<View style={styles.headerRow}>
|
|
<View style={styles.mealTypeContainer}>
|
|
|
|
{!showTimeline && (
|
|
<ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
|
|
{record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '时间未设置'}
|
|
</ThemedText>
|
|
)}
|
|
</View>
|
|
<TouchableOpacity
|
|
ref={popoverRef}
|
|
style={styles.moreButton}
|
|
onPress={() => {
|
|
setShowPopover(true)
|
|
console.log('showPopover', showPopover)
|
|
}}
|
|
>
|
|
<Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* 食物名称和分量 */}
|
|
<View style={styles.foodNameSection}>
|
|
{/* 左侧：食物图片 */}
|
|
<View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
|
|
{record.imageUrl ? (
|
|
<Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
|
|
) : (
|
|
<Ionicons name="restaurant" size={12} color={textSecondaryColor} />
|
|
)}
|
|
</View>
|
|
|
|
<ThemedText style={[styles.foodName, { color: textColor }]}>
|
|
{record.foodName}
|
|
</ThemedText>
|
|
{(record.weightGrams || record.portionDescription) && (
|
|
<ThemedText style={[styles.portionInfo, { color: textSecondaryColor }]}>
|
|
{record.portionDescription || `${record.weightGrams}g`}
|
|
</ThemedText>
|
|
)}
|
|
<View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
|
|
<ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
|
|
{mealTypeLabel}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 营养信息 - 紧凑标签布局 */}
|
|
<View style={styles.nutritionContainer}>
|
|
{nutritionStats.map((stat, index) => (
|
|
<View key={stat.label} style={styles.nutritionTag}>
|
|
<Ionicons name={stat.icon} size={10} color={stat.color} />
|
|
<ThemedText style={[styles.nutritionText, { color: textSecondaryColor }]} numberOfLines={1}>
|
|
{stat.label}
|
|
</ThemedText>
|
|
<ThemedText style={[styles.nutritionValue, { color: textColor }]} numberOfLines={1}>
|
|
{stat.value}
|
|
</ThemedText>
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* 备注信息 */}
|
|
{record.notes && (
|
|
<View style={styles.notesSection}>
|
|
<ThemedText style={[styles.notesText, { color: textSecondaryColor }]}>
|
|
{record.notes}
|
|
</ThemedText>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 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>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
timelineContainer: {
|
|
flexDirection: 'row',
|
|
marginBottom: 12,
|
|
},
|
|
timelineColumn: {
|
|
width: 52,
|
|
alignItems: 'center',
|
|
paddingTop: 6,
|
|
},
|
|
timeContainer: {
|
|
marginBottom: 6,
|
|
},
|
|
timeText: {
|
|
fontSize: 11,
|
|
fontWeight: '600',
|
|
textAlign: 'center',
|
|
},
|
|
timelineNode: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
timelineDot: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: 10,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 3,
|
|
elevation: 1,
|
|
},
|
|
timelineLine: {
|
|
width: 1.5,
|
|
flex: 1,
|
|
marginTop: 6,
|
|
opacity: 0.25,
|
|
},
|
|
card: {
|
|
flex: 1,
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
},
|
|
cardWithTimeline: {
|
|
marginLeft: 6,
|
|
},
|
|
mainContent: {
|
|
flexDirection: 'row',
|
|
},
|
|
foodImageContainer: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 16,
|
|
marginRight: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
foodImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
foodImagePlaceholder: {
|
|
backgroundColor: '#F8F9FA',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
foodInfoContainer: {
|
|
flex: 1,
|
|
},
|
|
headerRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
marginBottom: 8,
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
zIndex: 1,
|
|
},
|
|
mealTypeContainer: {
|
|
flex: 1,
|
|
},
|
|
mealTypeBadge: {
|
|
paddingHorizontal: 4,
|
|
borderRadius: 8,
|
|
marginLeft: 4,
|
|
},
|
|
mealTypeText: {
|
|
fontSize: 8,
|
|
fontWeight: '600',
|
|
},
|
|
mealTime: {
|
|
fontSize: 11,
|
|
fontWeight: '500',
|
|
},
|
|
moreButton: {
|
|
padding: 4,
|
|
marginLeft: 8,
|
|
zIndex: 1,
|
|
},
|
|
foodNameSection: {
|
|
marginBottom: 12,
|
|
flexDirection: 'row',
|
|
gap: 4,
|
|
alignItems: 'center',
|
|
},
|
|
foodName: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
lineHeight: 24,
|
|
marginBottom: 2,
|
|
},
|
|
portionInfo: {
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
nutritionContainer: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
nutritionTag: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(248, 249, 250, 0.8)',
|
|
borderRadius: 8,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
marginBottom: 4,
|
|
width: '48%',
|
|
overflow: 'hidden',
|
|
},
|
|
nutritionText: {
|
|
fontSize: 9,
|
|
fontWeight: '500',
|
|
marginLeft: 4,
|
|
marginRight: 2,
|
|
flexShrink: 0,
|
|
},
|
|
nutritionValue: {
|
|
fontSize: 10,
|
|
fontWeight: '700',
|
|
flexShrink: 1,
|
|
textAlign: 'right',
|
|
flex: 1,
|
|
},
|
|
notesSection: {
|
|
marginTop: 8,
|
|
paddingTop: 12,
|
|
borderTopWidth: 1,
|
|
borderTopColor: 'rgba(0,0,0,0.06)',
|
|
},
|
|
notesText: {
|
|
fontSize: 13,
|
|
fontWeight: '500',
|
|
lineHeight: 18,
|
|
fontStyle: 'italic',
|
|
},
|
|
popoverContainer: {
|
|
borderRadius: 12,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 8,
|
|
elevation: 5,
|
|
},
|
|
popoverBackground: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
},
|
|
popoverContent: {
|
|
minWidth: 140,
|
|
paddingVertical: 8,
|
|
},
|
|
popoverItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
gap: 12,
|
|
},
|
|
popoverText: {
|
|
fontSize: 16,
|
|
fontWeight: '500',
|
|
},
|
|
});
|