feat: 添加历史会话模态框和更新组件

- 在 CoachScreen 中引入 HistoryModal 组件，优化历史会话展示
- 更新 NutritionRecordCard 组件，使用 Popover 替代 ActionSheet，提升操作体验
- 在 NutritionRecordsScreen 中引入 DateSelector 组件，简化日期选择逻辑
- 更新 package.json 和 package-lock.json，新增 react-native-popover-view 依赖
- 移除不再使用的历史会话模态框代码，提升代码整洁性

components/NutritionRecordCard.tsx

@@ -1,11 +1,11 @@
 import { ThemedText } from '@/components/ThemedText';
-import { ActionSheet } from '@/components/ui/ActionSheet';
 import { useThemeColor } from '@/hooks/useThemeColor';
 import { DietRecord } from '@/services/dietRecords';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef } from 'react';
 import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Popover from 'react-native-popover-view';
 
 export type NutritionRecordCardProps = {
   record: DietRecord;
@@ -53,8 +53,9 @@ export function NutritionRecordCard({
   const textSecondaryColor = useThemeColor({}, 'textSecondary');
   const primaryColor = useThemeColor({}, 'primary');
 
-  // ActionSheet 状态管理
-  const [showActionSheet, setShowActionSheet] = useState(false);
+  // Popover 状态管理
+  const [showPopover, setShowPopover] = useState(false);
+  const popoverRef = useRef<any>(null);
 
   // 营养数据统计
   const nutritionStats = useMemo(() => {
@@ -112,31 +113,32 @@ export function NutritionRecordCard({
       )}
 
       {/* 卡片内容 */}
-      <TouchableOpacity
+      <View
         style={[
           styles.card,
           { backgroundColor: surfaceColor },
           showTimeline && styles.cardWithTimeline
         ]}
-        onPress={onPress}
-        activeOpacity={0.8}
       >
         {/* 主要内容区域 */}
         <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 
+              <TouchableOpacity
+                ref={popoverRef}
                 style={styles.moreButton}
-                onPress={() => setShowActionSheet(true)}
+                onPress={() => {
+                  setShowPopover(true)
+                  console.log('showPopover', showPopover)
+                }}
               >
                 <Ionicons name="ellipsis-horizontal" size={20} color={textSecondaryColor} />
               </TouchableOpacity>
@@ -144,14 +146,14 @@ export function NutritionRecordCard({
 
             {/* 食物名称和分量 */}
             <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} />
-            )}
-          </View>
+              {/* 左侧：食物图片 */}
+              <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}
@@ -161,11 +163,11 @@ export function NutritionRecordCard({
                   {record.portionDescription || `${record.weightGrams}g`}
                 </ThemedText>
               )}
-                   <View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
-                  <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
-                    {mealTypeLabel}
-                  </ThemedText>
-                </View>
+              <View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
+                <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
+                  {mealTypeLabel}
+                </ThemedText>
+              </View>
             </View>
 
             {/* 营养信息 - 紧凑标签布局 */}
@@ -193,26 +195,31 @@ export function NutritionRecordCard({
             )}
           </View>
         </View>
-      </TouchableOpacity>
+      </View>
 
-      {/* ActionSheet for more options */}
-      <ActionSheet
-        visible={showActionSheet}
-        onClose={() => setShowActionSheet(false)}
-        title="选择操作"
-        options={[
-          {
-            id: 'delete',
-            title: '删除记录',
-            subtitle: '删除后无法恢复',
-            icon: 'trash-outline',
-            destructive: true,
-            onPress: () => {
+      {/* Popover for more options */}
+      <Popover
+        from={popoverRef}
+        isVisible={showPopover}
+        onRequestClose={() => setShowPopover(false)}
+        popoverStyle={styles.popoverContainer}
+        backgroundStyle={styles.popoverBackground}
+      >
+        <View style={styles.popoverContent}>
+          <TouchableOpacity
+            style={styles.popoverItem}
+            onPress={() => {
+              setShowPopover(false);
               onDelete?.();
-            }
-          }
-        ]}
-      />
+            }}
+          >
+            <Ionicons name="trash-outline" size={20} color="#FF3B30" />
+            <ThemedText style={[styles.popoverText, { color: '#FF3B30' }]}>
+              删除记录
+            </ThemedText>
+          </TouchableOpacity>
+        </View>
+      </Popover>
     </View>
   );
 }
@@ -300,6 +307,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     right: 0,
+    zIndex: 1,
   },
   mealTypeContainer: {
     flex: 1,
@@ -320,6 +328,7 @@ const styles = StyleSheet.create({
   moreButton: {
     padding: 4,
     marginLeft: 8,
+    zIndex: 1,
   },
   foodNameSection: {
     marginBottom: 12,
@@ -379,4 +388,30 @@ const styles = StyleSheet.create({
     lineHeight: 18,
     fontStyle: 'italic',
   },
+  popoverContainer: {
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5,
+  },
+  popoverBackground: {
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  popoverContent: {
+    minWidth: 140,
+    paddingVertical: 8,
+  },
+  popoverItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 12,
+  },
+  popoverText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
 });