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

- 在营养分析卡片中引入更新日期和图标，提升信息展示 - 修改营养维度标签，简化文本内容 - 更新雷达图组件，支持自定义尺寸和标签显示 - 增加尺寸配置，优化图表显示效果 - 更新饮食记录服务，添加更新时间字段以支持新功能
2025-08-19 11:03:18 +08:00
parent 9aa0a692a8
commit df2afeb5a1
3 changed files with 110 additions and 22 deletions
--- a/components/NutritionRadarCard.tsx
+++ b/components/NutritionRadarCard.tsx
@@ -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,
--- a/components/RadarChart.tsx
+++ b/components/RadarChart.tsx
@@ -4,25 +4,75 @@ import Svg, * as SvgLib from 'react-native-svg';

 export type RadarCategory = { key: string; label: string };

+export type RadarChartSize = 'small' | 'medium' | 'large' | number;
+
 export type RadarChartProps = {
  categories: RadarCategory[];
  values: number[]; // 与 categories 一一对应
  maxValue?: number; // 默认 5
-  size?: number; // 组件宽高，默认 260
+  size?: RadarChartSize; // 组件宽高，默认 medium
  levels?: number; // 网格层数，默认 5
  showGrid?: boolean;
+  showLabels?: boolean; // 是否显示指标文字
 };

-export function RadarChart({ categories, values, maxValue = 5, size = 260, levels = 5, showGrid = true }: RadarChartProps) {
-  const radius = size * 0.38;
-  const cx = size / 2;
-  const cy = size / 2;
+// 预设尺寸配置
+const SIZE_CONFIG = {
+  small: { size: 116, fontSize: 8, labelOffset: -4, radiusRatio: 0.35 },
+  medium: { size: 200, fontSize: 11, labelOffset: 15, radiusRatio: 0.38 },
+  large: { size: 280, fontSize: 13, labelOffset: 18, radiusRatio: 0.4 },
+};
+
+export function RadarChart({
+  categories,
+  values,
+  maxValue = 5,
+  size = 'medium',
+  levels = 5,
+  showGrid = true,
+  showLabels = true
+}: RadarChartProps) {
+  // 解析尺寸配置
+  const config = useMemo(() => {
+    if (typeof size === 'number') {
+      // 自定义尺寸
+      const baseSize = Math.max(80, Math.min(400, size));
+      let fontSize = 11;
+      let labelOffset = 15;
+      let radiusRatio = 0.38;
+
+      // 根据尺寸自适应调整
+      if (baseSize < 140) {
+        fontSize = 9;
+        labelOffset = 12;
+        radiusRatio = 0.35;
+      } else if (baseSize > 240) {
+        fontSize = 13;
+        labelOffset = 18;
+        radiusRatio = 0.4;
+      }
+
+      return { size: baseSize, fontSize, labelOffset, radiusRatio };
+    }
+
+    // 预设尺寸
+    return SIZE_CONFIG[size] || SIZE_CONFIG.medium;
+  }, [size]);
+
+  const { size: actualSize, fontSize, labelOffset, radiusRatio } = config;
+  const radius = actualSize * radiusRatio;
+  const cx = actualSize / 2;
+  const cy = actualSize / 2;
  const count = categories.length;

  const points = useMemo(() => {
    return categories.map((_, i) => {
      const angle = (Math.PI * 2 * i) / count - Math.PI / 2; // 顶部起点
-      return { angle, x: (v: number) => cx + Math.cos(angle) * v, y: (v: number) => cy + Math.sin(angle) * v };
+      return {
+        angle,
+        x: (v: number) => cx + Math.cos(angle) * v,
+        y: (v: number) => cy + Math.sin(angle) * v
+      };
    });
  }, [categories, count, cx, cy]);

@@ -44,9 +94,12 @@ export function RadarChart({ categories, values, maxValue = 5, size = 260, level
    return polys;
  }, [levels, radius, points]);

+  // 检查是否有足够的空间显示文字
+  const hasEnoughSpace = actualSize >= 100;
+
  return (
-    <View style={{ width: size, height: size }}>
-      <Svg width={size} height={size}>
+    <View style={{ width: actualSize, height: actualSize }}>
+      <Svg width={actualSize} height={actualSize}>
        <SvgLib.Defs>
          <SvgLib.LinearGradient id="radarFill" x1="0" y1="0" x2="1" y2="1">
            <SvgLib.Stop offset="0%" stopColor="#BBF246" stopOpacity={0.32} />
@@ -79,14 +132,22 @@ export function RadarChart({ categories, values, maxValue = 5, size = 260, level
          </SvgLib.G>
        )}

-        {categories.map((c, i) => {
-          const r = radius + 18;
+        {showLabels && hasEnoughSpace && categories.map((c, i) => {
+          const r = radius + labelOffset;
          const x = points[i].x(r);
          const y = points[i].y(r);
          const anchor = Math.cos(points[i].angle) > 0.2 ? 'start' : Math.cos(points[i].angle) < -0.2 ? 'end' : 'middle';
          const dy = Math.sin(points[i].angle) > 0.6 ? 10 : Math.sin(points[i].angle) < -0.6 ? -4 : 4;
+
          return (
-            <SvgLib.Text key={`label-${c.key}`} x={x} y={y + dy} fontSize={11} fill="#192126" textAnchor={anchor}>
+            <SvgLib.Text
+              key={`label-${c.key}`}
+              x={x}
+              y={y + dy}
+              fontSize={fontSize}
+              fill="#192126"
+              textAnchor={anchor}
+            >
              {c.label}
            </SvgLib.Text>
          );
@@ -99,6 +160,4 @@ export function RadarChart({ categories, values, maxValue = 5, size = 260, level
  );
 }

-const styles = StyleSheet.create({});
-
-
+const styles = StyleSheet.create({});
--- a/services/dietRecords.ts
+++ b/services/dietRecords.ts
@@ -34,6 +34,7 @@ export type NutritionSummary = {
  totalFiber: number;
  totalSugar: number;
  totalSodium: number;
+  updatedAt: string;
 };

 export async function getDietRecords({
@@ -67,6 +68,7 @@ export function calculateNutritionSummary(records: DietRecord[]): NutritionSumma
      totalFiber: 0,
      totalSugar: 0,
      totalSodium: 0,
+      updatedAt: '',
    };
  }

@@ -79,6 +81,7 @@ export function calculateNutritionSummary(records: DietRecord[]): NutritionSumma
      totalFiber: summary.totalFiber + (record.fiberGrams || 0),
      totalSugar: summary.totalSugar + (record.sugarGrams || 0),
      totalSodium: summary.totalSodium + (record.sodiumMg || 0),
+      updatedAt: record.updatedAt,
    }),
    {
      totalCalories: 0,
@@ -88,6 +91,7 @@ export function calculateNutritionSummary(records: DietRecord[]): NutritionSumma
      totalFiber: 0,
      totalSugar: 0,
      totalSodium: 0,
+      updatedAt: '',
    }
  );
 }