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',
+  },
 });

components/model/HistoryModal.tsx

@@ -0,0 +1,170 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import dayjs from 'dayjs';
+
+import { AiConversationListItem } from '@/services/aiCoach';
+
+interface HistoryModalProps {
+  visible: boolean;
+  onClose: () => void;
+  historyLoading: boolean;
+  historyItems: AiConversationListItem[];
+  historyPage: number;
+  onRefreshHistory: (page: number) => void;
+  onSelectConversation: (id: string) => void;
+  onDeleteConversation: (id: string) => void;
+}
+
+export const HistoryModal: React.FC<HistoryModalProps> = ({
+  visible,
+  onClose,
+  historyLoading,
+  historyItems,
+  historyPage,
+  onRefreshHistory,
+  onSelectConversation,
+  onDeleteConversation,
+}) => {
+  return (
+    <Modal transparent visible={visible} animationType="fade" onRequestClose={onClose}>
+      <TouchableOpacity activeOpacity={1} style={styles.modalBackdrop} onPress={onClose}>
+        <View style={[styles.modalSheet, { backgroundColor: '#FFFFFF' }]}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalTitle}>历史会话</Text>
+            <TouchableOpacity 
+              accessibilityRole="button" 
+              onPress={() => onRefreshHistory(historyPage)} 
+              style={styles.modalRefreshBtn}
+            >
+              <Ionicons name="refresh" size={16} color="#192126" />
+            </TouchableOpacity>
+          </View>
+          {historyLoading ? (
+            <View style={{ paddingVertical: 20, alignItems: 'center' }}>
+              <ActivityIndicator />
+              <Text style={{ marginTop: 8, color: '#687076' }}>加载中...</Text>
+            </View>
+          ) : (
+            <ScrollView style={{ maxHeight: 360 }}>
+              {historyItems.length === 0 ? (
+                <Text style={{ padding: 16, color: '#687076' }}>暂无会话</Text>
+              ) : (
+                historyItems.map((it) => (
+                  <View key={it.conversationId} style={styles.historyRow}>
+                    <TouchableOpacity
+                      style={{ flex: 1 }}
+                      onPress={() => onSelectConversation(it.conversationId)}
+                    >
+                      <Text style={styles.historyTitle} numberOfLines={1}>{it.title || '未命名会话'}</Text>
+                      <Text style={styles.historyMeta}>
+                        {dayjs(it.lastMessageAt || it.createdAt).format('YYYY/MM/DD HH:mm')}
+                      </Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity 
+                      accessibilityRole="button" 
+                      onPress={() => onDeleteConversation(it.conversationId)} 
+                      style={styles.historyDeleteBtn}
+                    >
+                      <Ionicons name="trash-outline" size={16} color="#FF4444" />
+                    </TouchableOpacity>
+                  </View>
+                ))
+              )}
+            </ScrollView>
+          )}
+          <View style={styles.modalFooter}>
+            <TouchableOpacity 
+              accessibilityRole="button" 
+              onPress={onClose} 
+              style={styles.modalCloseBtn}
+            >
+              <Text style={{ color: '#192126', fontWeight: '600' }}>关闭</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalBackdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+    padding: 16,
+    justifyContent: 'flex-end',
+  },
+  modalSheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 12,
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 4,
+    paddingBottom: 8,
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '800',
+    color: '#192126',
+  },
+  modalRefreshBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.06)'
+  },
+  historyRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+  },
+  historyTitle: {
+    fontSize: 15,
+    color: '#192126',
+    fontWeight: '600',
+  },
+  historyMeta: {
+    marginTop: 2,
+    fontSize: 12,
+    color: '#687076',
+  },
+  historyDeleteBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(255,68,68,0.08)'
+  },
+  modalFooter: {
+    paddingTop: 8,
+    alignItems: 'flex-end',
+  },
+  modalCloseBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: 'rgba(0,0,0,0.06)'
+  },
+});
+
+export default HistoryModal;