feat: 更新应用名称及图标，新增HRV数据管理，优化营养记录展示
This commit is contained in:
richarjiang
@@ -1,7 +1,6 @@
|
||||
import { RadarChart } from '@/components/RadarChart';
|
||||
import { ThemedText } from '@/components/ThemedText';
|
||||
import { useThemeColor } from '@/hooks/useThemeColor';
|
||||
import { DietRecord, calculateNutritionSummary, convertToRadarData } from '@/services/dietRecords';
|
||||
import { DietRecord } from '@/services/dietRecords';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import dayjs from 'dayjs';
|
||||
import React, { useMemo } from 'react';
|
||||
@@ -10,17 +9,11 @@ import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
|
||||
export type NutritionRecordCardProps = {
|
||||
record: DietRecord;
|
||||
onPress?: () => void;
|
||||
showTimeline?: boolean;
|
||||
isFirst?: boolean;
|
||||
isLast?: boolean;
|
||||
};
|
||||
|
||||
const NUTRITION_DIMENSIONS = [
|
||||
{ key: 'calories', label: '热量' },
|
||||
{ key: 'protein', label: '蛋白质' },
|
||||
{ key: 'carbohydrate', label: '碳水' },
|
||||
{ key: 'fat', label: '脂肪' },
|
||||
{ key: 'fiber', label: '纤维' },
|
||||
{ key: 'sodium', label: '钠' },
|
||||
];
|
||||
|
||||
const MEAL_TYPE_LABELS = {
|
||||
breakfast: '早餐',
|
||||
lunch: '午餐',
|
||||
@@ -45,55 +38,45 @@ const MEAL_TYPE_COLORS = {
|
||||
other: '#9AA3AE',
|
||||
} as const;
|
||||
|
||||
export function NutritionRecordCard({ record, onPress }: NutritionRecordCardProps) {
|
||||
export function NutritionRecordCard({
|
||||
record,
|
||||
onPress,
|
||||
showTimeline = false,
|
||||
isFirst = false,
|
||||
isLast = false
|
||||
}: NutritionRecordCardProps) {
|
||||
const surfaceColor = useThemeColor({}, 'surface');
|
||||
const textColor = useThemeColor({}, 'text');
|
||||
const textSecondaryColor = useThemeColor({}, 'textSecondary');
|
||||
const primaryColor = useThemeColor({}, 'primary');
|
||||
|
||||
// 计算单条记录的营养摘要
|
||||
const nutritionSummary = useMemo(() => {
|
||||
return calculateNutritionSummary([record]);
|
||||
}, [record]);
|
||||
|
||||
// 计算雷达图数据
|
||||
const radarValues = useMemo(() => {
|
||||
return convertToRadarData(nutritionSummary);
|
||||
}, [nutritionSummary]);
|
||||
|
||||
// 营养维度数据
|
||||
// 营养数据统计
|
||||
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'
|
||||
},
|
||||
{
|
||||
label: '纤维',
|
||||
value: record.fiberGrams ? `${record.fiberGrams.toFixed(1)} g` : '-',
|
||||
color: '#98D8C8'
|
||||
},
|
||||
{
|
||||
label: '钠',
|
||||
value: record.sodiumMg ? `${Math.round(record.sodiumMg)} mg` : '-',
|
||||
color: '#F7DC6F'
|
||||
},
|
||||
];
|
||||
}, [record]);
|
||||
|
||||
@@ -102,170 +85,173 @@ export function NutritionRecordCard({ record, onPress }: NutritionRecordCardProp
|
||||
const mealTypeLabel = MEAL_TYPE_LABELS[record.mealType];
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.card, { backgroundColor: surfaceColor }]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{/* 卡片头部 */}
|
||||
<View style={styles.cardHeader}>
|
||||
<View style={styles.mealInfo}>
|
||||
<View style={[styles.mealTypeIndicator, { backgroundColor: mealTypeColor }]}>
|
||||
<Ionicons name={mealTypeIcon as any} size={16} color="#FFFFFF" />
|
||||
</View>
|
||||
<View style={styles.mealDetails}>
|
||||
<ThemedText style={[styles.mealType, { color: textColor }]}>
|
||||
{mealTypeLabel}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
|
||||
{record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '时间未设置'}
|
||||
<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>
|
||||
|
||||
<TouchableOpacity style={styles.moreButton}>
|
||||
<Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 食物信息 */}
|
||||
<View style={styles.foodSection}>
|
||||
<View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
|
||||
{record.imageUrl ? (
|
||||
<Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
|
||||
) : (
|
||||
<Ionicons name="restaurant" size={24} color={textSecondaryColor} />
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.foodInfo}>
|
||||
<ThemedText style={[styles.foodName, { color: textColor }]}>
|
||||
{record.foodName}
|
||||
</ThemedText>
|
||||
{record.foodDescription && (
|
||||
<ThemedText style={[styles.foodDescription, { color: textSecondaryColor }]}>
|
||||
{record.foodDescription}
|
||||
</ThemedText>
|
||||
)}
|
||||
{(record.weightGrams || record.portionDescription) && (
|
||||
<ThemedText style={[styles.portionInfo, { color: textSecondaryColor }]}>
|
||||
{record.weightGrams ? `${record.weightGrams}g` : ''}
|
||||
{record.weightGrams && record.portionDescription ? ' • ' : ''}
|
||||
{record.portionDescription || ''}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 营养分析区域 */}
|
||||
<View style={styles.nutritionSection}>
|
||||
<View style={styles.radarContainer}>
|
||||
<RadarChart
|
||||
categories={NUTRITION_DIMENSIONS}
|
||||
values={radarValues}
|
||||
size="small"
|
||||
maxValue={5}
|
||||
showLabels={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.statsContainer}>
|
||||
{nutritionStats.slice(0, 4).map((stat) => (
|
||||
<View key={stat.label} style={styles.statItem}>
|
||||
<View style={[styles.statDot, { backgroundColor: stat.color }]} />
|
||||
<ThemedText style={[styles.statLabel, { color: textSecondaryColor }]}>
|
||||
{stat.label}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.statValue, { color: textColor }]}>
|
||||
{stat.value}
|
||||
</ThemedText>
|
||||
<View style={styles.timelineNode}>
|
||||
<View style={[styles.timelineDot, { backgroundColor: mealTypeColor }]}>
|
||||
<Ionicons name={mealTypeIcon as any} size={12} color="#FFFFFF" />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 额外的营养信息 */}
|
||||
<View style={styles.additionalStats}>
|
||||
{nutritionStats.slice(4).map((stat) => (
|
||||
<View key={stat.label} style={styles.additionalStatItem}>
|
||||
<View style={[styles.statDot, { backgroundColor: stat.color }]} />
|
||||
<ThemedText style={[styles.statLabel, { color: textSecondaryColor }]}>
|
||||
{stat.label}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.statValue, { color: textColor }]}>
|
||||
{stat.value}
|
||||
</ThemedText>
|
||||
{!isLast && (
|
||||
<View style={[styles.timelineLine, { backgroundColor: textSecondaryColor }]} />
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 备注信息 */}
|
||||
{record.notes && (
|
||||
<View style={styles.notesSection}>
|
||||
<ThemedText style={[styles.notesLabel, { color: textSecondaryColor }]}>
|
||||
备注
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.notesText, { color: textColor }]}>
|
||||
{record.notes}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* 卡片内容 */}
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.card,
|
||||
{ backgroundColor: surfaceColor },
|
||||
showTimeline && styles.cardWithTimeline
|
||||
]}
|
||||
onPress={onPress}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
{/* 主要内容区域 */}
|
||||
<View style={styles.mainContent}>
|
||||
{/* 左侧：食物图片 */}
|
||||
<View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
|
||||
{record.imageUrl ? (
|
||||
<Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
|
||||
) : (
|
||||
<Ionicons name="restaurant" size={32} color={textSecondaryColor} />
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 右侧：食物信息 */}
|
||||
<View style={styles.foodInfoContainer}>
|
||||
{/* 餐次和操作按钮 */}
|
||||
<View style={styles.headerRow}>
|
||||
<View style={styles.mealTypeContainer}>
|
||||
<View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
|
||||
<ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
|
||||
{mealTypeLabel}
|
||||
</ThemedText>
|
||||
</View>
|
||||
{!showTimeline && (
|
||||
<ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
|
||||
{record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '时间未设置'}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
<TouchableOpacity style={styles.moreButton}>
|
||||
<Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* 食物名称和分量 */}
|
||||
<View style={styles.foodNameSection}>
|
||||
<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>
|
||||
|
||||
{/* 营养信息网格 */}
|
||||
<View style={styles.nutritionGrid}>
|
||||
{nutritionStats.map((stat) => (
|
||||
<View key={stat.label} style={styles.nutritionItem}>
|
||||
<View style={styles.nutritionItemHeader}>
|
||||
<Ionicons name={stat.icon} size={14} color={stat.color} />
|
||||
<ThemedText style={[styles.nutritionLabel, { color: textSecondaryColor }]}>
|
||||
{stat.label}
|
||||
</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={[styles.nutritionValue, { color: textColor }]}>
|
||||
{stat.value}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 备注信息 */}
|
||||
{record.notes && (
|
||||
<View style={styles.notesSection}>
|
||||
<ThemedText style={[styles.notesText, { color: textSecondaryColor }]}>
|
||||
{record.notes}
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
borderRadius: 22,
|
||||
padding: 20,
|
||||
timelineContainer: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 12,
|
||||
},
|
||||
timelineColumn: {
|
||||
width: 64,
|
||||
alignItems: 'center',
|
||||
paddingTop: 8,
|
||||
},
|
||||
timeContainer: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
timeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
},
|
||||
timelineNode: {
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
timelineDot: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.08,
|
||||
shadowRadius: 6,
|
||||
elevation: 3,
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
cardHeader: {
|
||||
timelineLine: {
|
||||
width: 2,
|
||||
flex: 1,
|
||||
marginTop: 8,
|
||||
opacity: 0.3,
|
||||
},
|
||||
card: {
|
||||
flex: 1,
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.06,
|
||||
shadowRadius: 8,
|
||||
elevation: 2,
|
||||
},
|
||||
cardWithTimeline: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
mainContent: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
mealInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
mealTypeIndicator: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginRight: 12,
|
||||
},
|
||||
mealDetails: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
mealType: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
mealTime: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
marginTop: 2,
|
||||
},
|
||||
moreButton: {
|
||||
padding: 4,
|
||||
},
|
||||
foodSection: {
|
||||
flexDirection: 'row',
|
||||
marginBottom: 20,
|
||||
},
|
||||
foodImageContainer: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 12,
|
||||
marginRight: 12,
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 16,
|
||||
marginRight: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
foodImage: {
|
||||
@@ -273,86 +259,88 @@ const styles = StyleSheet.create({
|
||||
height: '100%',
|
||||
},
|
||||
foodImagePlaceholder: {
|
||||
backgroundColor: '#F5F5F5',
|
||||
backgroundColor: '#F8F9FA',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
foodInfo: {
|
||||
foodInfoContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: 8,
|
||||
},
|
||||
mealTypeContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
mealTypeBadge: {
|
||||
alignSelf: 'flex-start',
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
marginBottom: 4,
|
||||
},
|
||||
mealTypeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
mealTime: {
|
||||
fontSize: 11,
|
||||
fontWeight: '500',
|
||||
},
|
||||
moreButton: {
|
||||
padding: 4,
|
||||
marginLeft: 8,
|
||||
},
|
||||
foodNameSection: {
|
||||
marginBottom: 12,
|
||||
},
|
||||
foodName: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
marginBottom: 4,
|
||||
},
|
||||
foodDescription: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
lineHeight: 20,
|
||||
marginBottom: 4,
|
||||
lineHeight: 24,
|
||||
marginBottom: 2,
|
||||
},
|
||||
portionInfo: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
},
|
||||
nutritionSection: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
radarContainer: {
|
||||
marginRight: 16,
|
||||
},
|
||||
statsContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
statItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12,
|
||||
},
|
||||
statDot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginRight: 8,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
flex: 1,
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
additionalStats: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 12,
|
||||
},
|
||||
additionalStatItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
notesSection: {
|
||||
marginTop: 12,
|
||||
paddingTop: 16,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: 'rgba(0,0,0,0.08)',
|
||||
},
|
||||
notesLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
marginBottom: 6,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
notesText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
lineHeight: 20,
|
||||
},
|
||||
nutritionGrid: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
marginBottom: 8,
|
||||
},
|
||||
nutritionItem: {
|
||||
width: '50%',
|
||||
marginBottom: 8,
|
||||
paddingRight: 8,
|
||||
},
|
||||
nutritionItemHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 2,
|
||||
},
|
||||
nutritionLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
marginLeft: 4,
|
||||
},
|
||||
nutritionValue: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
},
|
||||
notesSection: {
|
||||
marginTop: 8,
|
||||
paddingTop: 12,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: 'rgba(0,0,0,0.06)',
|
||||
},
|
||||
notesText: {
|
||||
fontSize: 13,
|
||||
fontWeight: '500',
|
||||
lineHeight: 18,
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user