feat: 更新营养雷达图组件,优化营养分析卡片
- 在营养分析卡片中引入更新日期和图标,提升信息展示 - 修改营养维度标签,简化文本内容 - 更新雷达图组件,支持自定义尺寸和标签显示 - 增加尺寸配置,优化图表显示效果 - 更新饮食记录服务,添加更新时间字段以支持新功能
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user