perf: 优化

2025-08-29 11:22:07 +08:00
parent f38f495008
commit 93db9e2928
2 changed files with 202 additions and 233 deletions
--- a/app/nutrition/records.tsx
+++ b/app/nutrition/records.tsx
@@ -216,9 +216,6 @@ export default function NutritionRecordsScreen() {
  const renderRecord = ({ item, index }: { item: DietRecord; index: number }) => (
    <NutritionRecordCard
      record={item}
-      showTimeline={true}
-      isFirst={index === 0}
-      isLast={index === records.length - 1}
      onDelete={() => handleDeleteRecord(item.id)}
    />
  );
--- a/components/NutritionRecordCard.tsx
+++ b/components/NutritionRecordCard.tsx
@@ -3,17 +3,15 @@ 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 React, { useMemo, useRef, useState } from 'react';
+import { Alert, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Swipeable } from 'react-native-gesture-handler';
 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 = {
@@ -33,20 +31,17 @@ const MEAL_TYPE_ICONS = {
 } as const;

 const MEAL_TYPE_COLORS = {
-  breakfast: '#FFB366',
-  lunch: '#4ECDC4',
-  dinner: '#5D5FEF',
-  snack: '#FF6B6B',
+  breakfast: '#FF6B35',
+  lunch: '#4CAF50',
+  dinner: '#2196F3',
+  snack: '#FF7A85',
  other: '#9AA3AE',
 } as const;

 export function NutritionRecordCard({
  record,
  onPress,
-  onDelete,
-  showTimeline = false,
-  isFirst = false,
-  isLast = false
+  onDelete
 }: NutritionRecordCardProps) {
  const surfaceColor = useThemeColor({}, 'surface');
  const textColor = useThemeColor({}, 'text');
@@ -57,32 +52,29 @@ export function NutritionRecordCard({
  const [showPopover, setShowPopover] = useState(false);
  const popoverRef = useRef<any>(null);

+  // 左滑删除相关
+  const swipeableRef = useRef<Swipeable>(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'
+        icon: '🥩',
+        color: '#FF6B6B'
      },
      {
        label: '脂肪',
        value: record.fatGrams ? `${record.fatGrams.toFixed(1)}g` : '-',
-        icon: 'water-outline' as const,
-        color: '#FFA07A'
+        icon: '🥑',
+        color: '#FFB366'
+      },
+      {
+        label: '碳水',
+        value: record.carbohydrateGrams ? `${record.carbohydrateGrams.toFixed(1)}g` : '-',
+        icon: '🍞',
+        color: '#4ECDC4'
      },
    ];
  }, [record]);
@@ -91,111 +83,123 @@ export function NutritionRecordCard({
  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>
-      )}
+  // 处理删除操作
+  const handleDelete = () => {
+    Alert.alert(
+      '确认删除',
+      `确定要删除这条营养记录吗？此操作无法撤销。`,
+      [
+        {
+          text: '取消',
+          style: 'cancel',
+        },
+        {
+          text: '删除',
+          style: 'destructive',
+          onPress: () => {
+            onDelete?.();
+            swipeableRef.current?.close();
+          },
+        },
+      ]
+    );
+  };

-      {/* 卡片内容 */}
-      <View
+  // 渲染删除按钮
+  const renderRightActions = () => {
+    return (
+      <TouchableOpacity
+        style={styles.deleteButton}
+        onPress={handleDelete}
+        activeOpacity={0.8}
+      >
+        <Ionicons name="trash" size={20} color="#FFFFFF" />
+        <Text style={styles.deleteButtonText}>删除</Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Swipeable
+        ref={swipeableRef}
+        renderRightActions={renderRightActions}
+        rightThreshold={40}
+        overshootRight={false}
+      >
+        <TouchableOpacity
          style={[
            styles.card,
-          { backgroundColor: surfaceColor },
-          showTimeline && styles.cardWithTimeline
+            { backgroundColor: surfaceColor }
          ]}
+          onPress={onPress}
+          activeOpacity={0.7}
        >
-        {/* 主要内容区域 */}
+          {/* 主要内容区域 - 水平布局 */}
          <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} />
+                <Ionicons name="restaurant" size={24} color={textSecondaryColor} />
              )}
            </View>

+            {/* 中间：食物信息 */}
+            <View style={styles.foodInfoContainer}>
+              {/* 食物名称 */}
              <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>

-            {/* 营养信息 - 紧凑标签布局 */}
+              {/* 时间 */}
+              <ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
+                {record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '--:--'}
+              </ThemedText>
+
+              {/* 营养信息 - 水平排列 */}
              <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}>
+                  <View key={stat.label} style={styles.nutritionItem}>
+                    <ThemedText style={styles.nutritionIcon}>{stat.icon}</ThemedText>
+                    <ThemedText style={[styles.nutritionValue, { color: textColor }]}>
                      {stat.value}
                    </ThemedText>
                  </View>
                ))}
              </View>
+            </View>

-            {/* 备注信息 */}
-            {record.notes && (
-              <View style={styles.notesSection}>
-                <ThemedText style={[styles.notesText, { color: textSecondaryColor }]}>
-                  {record.notes}
+            {/* 右侧：热量和餐次标签 */}
+            <View style={styles.rightSection}>
+              {/* 热量显示 */}
+              <View style={styles.caloriesContainer}>
+                <View style={styles.caloriesDot} />
+                <ThemedText style={[styles.caloriesText]}>
+                  {record.estimatedCalories ? `${Math.round(record.estimatedCalories)} kcal` : '- kcal'}
                </ThemedText>
              </View>
-            )}
-          </View>
+
+              {/* 餐次标签 */}
+              <View style={[styles.mealTypeBadge, { backgroundColor: mealTypeColor }]}>
+                <ThemedText style={[styles.mealTypeText, { color: '#FFFFFF' }]}>
+                  {mealTypeLabel}
+                </ThemedText>
+              </View>
+
+              {/* 更多操作按钮 */}
+              <TouchableOpacity
+                ref={popoverRef}
+                style={styles.moreButton}
+                onPress={() => setShowPopover(true)}
+              >
+                <Ionicons name="ellipsis-horizontal" size={16} color={textSecondaryColor} />
+              </TouchableOpacity>
            </View>
          </View>
+        </TouchableOpacity>
+      </Swipeable>

      {/* Popover for more options */}
      <Popover
@@ -225,71 +229,38 @@ export function NutritionRecordCard({
 }

 const styles = StyleSheet.create({
-  timelineContainer: {
-    flexDirection: 'row',
+  container: {
    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,
+    height: 80,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 12,
+    marginHorizontal: 4,
    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 6,
    elevation: 2,
  },
-  cardWithTimeline: {
-    marginLeft: 6,
-  },
  mainContent: {
+    flex: 1,
    flexDirection: 'row',
+    alignItems: 'center',
  },
  foodImageContainer: {
-    width: 28,
-    height: 28,
-    borderRadius: 16,
-    marginRight: 8,
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    marginRight: 12,
    overflow: 'hidden',
  },
  foodImage: {
    width: '100%',
    height: '100%',
+    borderRadius: 8,
  },
  foodImagePlaceholder: {
    backgroundColor: '#F8F9FA',
@@ -298,83 +269,70 @@ const styles = StyleSheet.create({
  },
  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',
+    justifyContent: 'flex-start',
+
  },
  foodName: {
-    fontSize: 18,
-    fontWeight: '700',
-    lineHeight: 24,
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#333333',
    marginBottom: 2,
  },
-  portionInfo: {
+  mealTime: {
    fontSize: 12,
-    fontWeight: '500',
+    fontWeight: '400',
+    color: '#999999',
  },
  nutritionContainer: {
    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 20,
  },
-  nutritionTag: {
+  nutritionItem: {
    flexDirection: 'row',
    alignItems: 'center',
-    backgroundColor: 'rgba(248, 249, 250, 0.8)',
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    marginBottom: 4,
-    width: '48%',
-    overflow: 'hidden',
+    gap: 2,
  },
-  nutritionText: {
-    fontSize: 9,
-    fontWeight: '500',
-    marginLeft: 4,
-    marginRight: 2,
-    flexShrink: 0,
+  nutritionIcon: {
+    fontSize: 12,
  },
  nutritionValue: {
+    fontSize: 11,
+    fontWeight: '500',
+    color: '#666666',
+  },
+  rightSection: {
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    height: 48,
+  },
+  caloriesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  caloriesDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: '#333333',
+    marginRight: 6,
+  },
+  caloriesText: {
+    fontSize: 12,
+    color: '#473c3cff',
+  },
+  mealTypeBadge: {
+    paddingHorizontal: 8,
+    borderRadius: 10,
+    marginBottom: 4,
+  },
+  mealTypeText: {
    fontSize: 10,
-    fontWeight: '700',
-    flexShrink: 1,
-    textAlign: 'right',
-    flex: 1,
+    fontWeight: '500',
+  },
+  moreButton: {
+    padding: 2,
  },
  notesSection: {
    marginTop: 8,
@@ -414,4 +372,18 @@ const styles = StyleSheet.create({
    fontSize: 16,
    fontWeight: '500',
  },
+  deleteButton: {
+    backgroundColor: '#EF4444',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 80,
+    borderRadius: 12,
+    marginLeft: 8,
+  },
+  deleteButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '600',
+    marginTop: 4,
+  },
 });