feat: 更新营养雷达图组件,优化营养分析卡片

- 在营养分析卡片中引入更新日期和图标,提升信息展示
- 修改营养维度标签,简化文本内容
- 更新雷达图组件,支持自定义尺寸和标签显示
- 增加尺寸配置,优化图表显示效果
- 更新饮食记录服务,添加更新时间字段以支持新功能
This commit is contained in:
richarjiang
2025-08-19 11:03:18 +08:00
parent 9aa0a692a8
commit df2afeb5a1
3 changed files with 110 additions and 22 deletions

View File

@@ -1,4 +1,6 @@
import { NutritionSummary } from '@/services/dietRecords';
import Feather from '@expo/vector-icons/Feather';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RadarCategory, RadarChart } from './RadarChart';
@@ -14,8 +16,8 @@ const NUTRITION_DIMENSIONS: RadarCategory[] = [
{ key: 'protein', label: '蛋白质' },
{ key: 'carbohydrate', label: '碳水' },
{ key: 'fat', label: '脂肪' },
{ key: 'fiber', label: '膳食纤维' },
{ key: 'sodium', label: '钠含量' },
{ key: 'fiber', label: '纤维' },
{ key: 'sodium', label: '钠' },
];
export function NutritionRadarCard({ nutritionSummary, isLoading = false }: NutritionRadarCardProps) {
@@ -48,14 +50,21 @@ export function NutritionRadarCard({ nutritionSummary, isLoading = false }: Nutr
{ label: '蛋白质', value: nutritionSummary ? `${nutritionSummary.totalProtein.toFixed(1)} g` : '0.0 g', color: '#4ECDC4' },
{ label: '碳水', value: nutritionSummary ? `${nutritionSummary.totalCarbohydrate.toFixed(1)} g` : '0.0 g', color: '#45B7D1' },
{ label: '脂肪', value: nutritionSummary ? `${nutritionSummary.totalFat.toFixed(1)} g` : '0.0 g', color: '#FFA07A' },
{ label: '膳食纤维', value: nutritionSummary ? `${nutritionSummary.totalFiber.toFixed(1)} g` : '0.0 g', color: '#98D8C8' },
{ label: '纤维', value: nutritionSummary ? `${nutritionSummary.totalFiber.toFixed(1)} g` : '0.0 g', color: '#98D8C8' },
{ label: '钠', value: nutritionSummary ? `${Math.round(nutritionSummary.totalSodium)} mg` : '0 mg', color: '#F7DC6F' },
];
}, [nutritionSummary]);
return (
<View style={styles.card}>
<Text style={styles.cardTitle}></Text>
<View style={styles.cardHeader}>
<Text style={styles.cardTitle}></Text>
<View style={styles.cardRightContainer}>
<Text style={styles.cardSubtitle}>: {dayjs(nutritionSummary?.updatedAt).format('YYYY-MM-DD HH:mm')}</Text>
<Feather name="more-vertical" size={16} color="#9AA3AE" />
</View>
</View>
{isLoading ? (
<View style={styles.loadingContainer}>
@@ -67,7 +76,7 @@ export function NutritionRadarCard({ nutritionSummary, isLoading = false }: Nutr
<RadarChart
categories={NUTRITION_DIMENSIONS}
values={radarValues}
size={100}
size="small"
maxValue={5}
/>
</View>
@@ -102,11 +111,26 @@ const styles = StyleSheet.create({
shadowRadius: 3.84,
elevation: 5,
},
cardHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 16,
},
cardTitle: {
fontSize: 18,
fontWeight: '800',
color: '#192126',
marginBottom: 16,
},
cardRightContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
cardSubtitle: {
fontSize: 12,
color: '#9AA3AE',
fontWeight: '600',
},
contentContainer: {
flexDirection: 'row',
@@ -114,19 +138,20 @@ const styles = StyleSheet.create({
},
radarContainer: {
alignItems: 'center',
marginRight: 20,
marginRight: 6,
},
statsContainer: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginLeft: 4
},
statItem: {
flexDirection: 'row',
alignItems: 'center',
width: '48%',
marginBottom: 8,
marginBottom: 16,
},
statDot: {
width: 8,