perf: 优化

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)}
     />
   );

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 React, { useMemo, useRef, useState } from 'react';
-import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+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',
+  breakfast: '#FF6B35',
-  lunch: '#4ECDC4',
+  lunch: '#4CAF50',
-  dinner: '#5D5FEF',
+  dinner: '#2196F3',
-  snack: '#FF6B6B',
+  snack: '#FF7A85',
   other: '#9AA3AE',
 } as const;
 
 export function NutritionRecordCard({
   record,
   onPress,
-  onDelete,
+  onDelete
-  showTimeline = false,
-  isFirst = false,
-  isLast = false
 }: 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: '热量',
+        label: '蛋白质',
-        value: record.estimatedCalories ? `${Math.round(record.estimatedCalories)} 千卡` : '-',
+        value: record.proteinGrams ? `${record.proteinGrams.toFixed(1)}g` : '-',
-        icon: 'flame-outline' as const,
+        icon: '🥩',
         color: '#FF6B6B'
       },
       {
-        label: '蛋白质',
+        label: '脂肪',
-        value: record.proteinGrams ? `${record.proteinGrams.toFixed(1)} g` : '-',
+        value: record.fatGrams ? `${record.fatGrams.toFixed(1)}g` : '-',
-        icon: 'fitness-outline' as const,
+        icon: '🥑',
-        color: '#4ECDC4'
+        color: '#FFB366'
       },
       {
         label: '碳水',
-        value: record.carbohydrateGrams ? `${record.carbohydrateGrams.toFixed(1)} g` : '-',
+        value: record.carbohydrateGrams ? `${record.carbohydrateGrams.toFixed(1)}g` : '-',
-        icon: 'leaf-outline' as const,
+        icon: '🍞',
-        color: '#45B7D1'
+        color: '#4ECDC4'
-      },
-      {
-        label: '脂肪',
-        value: record.fatGrams ? `${record.fatGrams.toFixed(1)} g` : '-',
-        icon: 'water-outline' as const,
-        color: '#FFA07A'
       },
     ];
   }, [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}>
+  const handleDelete = () => {
-      {/* 时间轴 */}
+    Alert.alert(
-      {showTimeline && (
+      '确认删除',
-        <View style={styles.timelineColumn}>
+      `确定要删除这条营养记录吗？此操作无法撤销。`,
-          <View style={styles.timeContainer}>
+      [
-            <ThemedText style={[styles.timeText, { color: textSecondaryColor }]}>
+        {
-              {record.createdAt ? dayjs(record.createdAt).format('HH:mm') : '--:--'}
+          text: '取消',
-            </ThemedText>
+          style: 'cancel',
-          </View>
+        },
-          <View style={styles.timelineNode}>
+        {
-            <View style={[styles.timelineDot, { backgroundColor: mealTypeColor }]}>
+          text: '删除',
-              <Ionicons name={mealTypeIcon as any} size={10} color="#FFFFFF" />
+          style: 'destructive',
-            </View>
+          onPress: () => {
-            {!isLast && (
+            onDelete?.();
-              <View style={[styles.timelineLine, { backgroundColor: textSecondaryColor }]} />
+            swipeableRef.current?.close();
-            )}
+          },
-          </View>
+        },
-        </View>
+      ]
-      )}
+    );
+  };
 
-      {/* 卡片内容 */}
+  // 渲染删除按钮
-      <View
+  const renderRightActions = () => {
-        style={[
+    return (
-          styles.card,
+      <TouchableOpacity
-          { backgroundColor: surfaceColor },
+        style={styles.deleteButton}
-          showTimeline && styles.cardWithTimeline
+        onPress={handleDelete}
-        ]}
+        activeOpacity={0.8}
       >
-        {/* 主要内容区域 */}
+        <Ionicons name="trash" size={20} color="#FFFFFF" />
-        <View style={styles.mainContent}>
+        <Text style={styles.deleteButtonText}>删除</Text>
-          <View style={styles.foodInfoContainer}>
+      </TouchableOpacity>
-            <View style={styles.headerRow}>
+    );
-              <View style={styles.mealTypeContainer}>
+  };
 
-                {!showTimeline && (
+  return (
-                  <ThemedText style={[styles.mealTime, { color: textSecondaryColor }]}>
+    <View style={styles.container}>
-                    {record.mealTime ? dayjs(record.mealTime).format('HH:mm') : '时间未设置'}
+      <Swipeable
-                  </ThemedText>
+        ref={swipeableRef}
-                )}
+        renderRightActions={renderRightActions}
-              </View>
+        rightThreshold={40}
-              <TouchableOpacity
+        overshootRight={false}
-                ref={popoverRef}
+      >
-                style={styles.moreButton}
+        <TouchableOpacity
-                onPress={() => {
+          style={[
-                  setShowPopover(true)
+            styles.card,
-                  console.log('showPopover', showPopover)
+            { backgroundColor: surfaceColor }
-                }}
+          ]}
-              >
+          onPress={onPress}
-                <Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
+          activeOpacity={0.7}
-              </TouchableOpacity>
+        >
+          {/* 主要内容区域 - 水平布局 */}
+          <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={24} color={textSecondaryColor} />
+              )}
             </View>
 
-            {/* 食物名称和分量 */}
+            {/* 中间：食物信息 */}
-            <View style={styles.foodNameSection}>
+            <View style={styles.foodInfoContainer}>
-              {/* 左侧：食物图片 */}
+              {/* 食物名称 */}
-              <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} />
-                )}
-              </View>
-
               <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 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.nutritionItem}>
+                    <ThemedText style={styles.nutritionIcon}>{stat.icon}</ThemedText>
+                    <ThemedText style={[styles.nutritionValue, { color: textColor }]}>
+                      {stat.value}
+                    </ThemedText>
+                  </View>
+                ))}
+              </View>
+            </View>
+
+            {/* 右侧：热量和餐次标签 */}
+            <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 style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
+
-                <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
+              {/* 餐次标签 */}
+              <View style={[styles.mealTypeBadge, { backgroundColor: mealTypeColor }]}>
+                <ThemedText style={[styles.mealTypeText, { color: '#FFFFFF' }]}>
                   {mealTypeLabel}
                 </ThemedText>
               </View>
-            </View>
 
-            {/* 营养信息 - 紧凑标签布局 */}
+              {/* 更多操作按钮 */}
-            <View style={styles.nutritionContainer}>
+              <TouchableOpacity
-              {nutritionStats.map((stat, index) => (
+                ref={popoverRef}
-                <View key={stat.label} style={styles.nutritionTag}>
+                style={styles.moreButton}
-                  <Ionicons name={stat.icon} size={10} color={stat.color} />
+                onPress={() => setShowPopover(true)}
-                  <ThemedText style={[styles.nutritionText, { color: textSecondaryColor }]} numberOfLines={1}>
+              >
-                    {stat.label}
+                <Ionicons name="ellipsis-horizontal" size={16} color={textSecondaryColor} />
-                  </ThemedText>
+              </TouchableOpacity>
-                  <ThemedText style={[styles.nutritionValue, { color: textColor }]} numberOfLines={1}>
-                    {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>
+      </Swipeable>
 
       {/* Popover for more options */}
       <Popover
@@ -225,71 +229,38 @@ export function NutritionRecordCard({
 }
 
 const styles = StyleSheet.create({
-  timelineContainer: {
+  container: {
-    flexDirection: 'row',
     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,
+    height: 80,
-    padding: 16,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    padding: 12,
+    marginHorizontal: 4,
     shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
+    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.06,
+    shadowOpacity: 0.05,
-    shadowRadius: 8,
+    shadowRadius: 6,
     elevation: 2,
   },
-  cardWithTimeline: {
-    marginLeft: 6,
-  },
   mainContent: {
+    flex: 1,
     flexDirection: 'row',
+    alignItems: 'center',
   },
   foodImageContainer: {
-    width: 28,
+    width: 32,
-    height: 28,
+    height: 32,
-    borderRadius: 16,
+    borderRadius: 8,
-    marginRight: 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,
-  },
+    justifyContent: 'flex-start',
-  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',
   },
   foodName: {
-    fontSize: 18,
+    fontSize: 15,
-    fontWeight: '700',
+    fontWeight: '600',
-    lineHeight: 24,
+    color: '#333333',
     marginBottom: 2,
   },
-  portionInfo: {
+  mealTime: {
     fontSize: 12,
-    fontWeight: '500',
+    fontWeight: '400',
+    color: '#999999',
   },
   nutritionContainer: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    alignItems: 'center',
-    justifyContent: 'space-between',
+    gap: 20,
   },
-  nutritionTag: {
+  nutritionItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: 'rgba(248, 249, 250, 0.8)',
+    gap: 2,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    marginBottom: 4,
-    width: '48%',
-    overflow: 'hidden',
   },
-  nutritionText: {
+  nutritionIcon: {
-    fontSize: 9,
+    fontSize: 12,
-    fontWeight: '500',
-    marginLeft: 4,
-    marginRight: 2,
-    flexShrink: 0,
   },
   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',
+    fontWeight: '500',
-    flexShrink: 1,
+  },
-    textAlign: 'right',
+  moreButton: {
-    flex: 1,
+    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,
+  },
 });