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

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

app/(tabs)/coach.tsx

@@ -34,8 +34,8 @@ import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiC
 import { api, getAuthToken, postTextStream } from '@/services/api';
 import { selectLatestMoodRecordByDate } from '@/store/moodSlice';
 import { generateWelcomeMessage, hasRecordedMoodToday } from '@/utils/welcomeMessage';
-import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
+import { HistoryModal } from '../../components/model/HistoryModal';
 import { ActionSheet } from '../../components/ui/ActionSheet';
 
 type Role = 'user' | 'assistant';
@@ -2099,52 +2099,16 @@ export default function CoachScreen() {
         </TouchableOpacity>
       )}
 
-      <Modal transparent visible={historyVisible} animationType="fade" onRequestClose={() => setHistoryVisible(false)}>
+      <HistoryModal
-        <TouchableOpacity activeOpacity={1} style={styles.modalBackdrop} onPress={() => setHistoryVisible(false)}>
+        visible={historyVisible}
-          <View style={[styles.modalSheet, { backgroundColor: '#FFFFFF' }]}>
+        onClose={() => setHistoryVisible(false)}
-            <View style={styles.modalHeader}>
+        historyLoading={historyLoading}
-              <Text style={styles.modalTitle}>历史会话</Text>
+        historyItems={historyItems}
-              <TouchableOpacity accessibilityRole="button" onPress={() => refreshHistory(historyPage)} style={styles.modalRefreshBtn}>
+        historyPage={historyPage}
-                <Ionicons name="refresh" size={16} color="#192126" />
+        onRefreshHistory={refreshHistory}
-              </TouchableOpacity>
+        onSelectConversation={handleSelectConversation}
-            </View>
+        onDeleteConversation={confirmDeleteConversation}
-            {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={() => handleSelectConversation(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={() => confirmDeleteConversation(it.conversationId)} style={styles.historyDeleteBtn}>
-                        <Ionicons name="trash-outline" size={16} color="#FF4444" />
-                      </TouchableOpacity>
-                    </View>
-                  ))
-                )}
-              </ScrollView>
-            )}
-            <View style={styles.modalFooter}>
-              <TouchableOpacity accessibilityRole="button" onPress={() => setHistoryVisible(false)} style={styles.modalCloseBtn}>
-                <Text style={{ color: '#192126', fontWeight: '600' }}>关闭</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </TouchableOpacity>
-      </Modal>
       <Modal transparent visible={!!previewImageUri} animationType="fade" onRequestClose={() => setPreviewImageUri(null)}>
         <TouchableOpacity activeOpacity={1} style={styles.previewBackdrop} onPress={() => setPreviewImageUri(null)}>
           <View style={styles.previewBox}>
@@ -2495,74 +2459,6 @@ const styles = StyleSheet.create({
     shadowRadius: 4,
     elevation: 2,
   },
-  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)'
-  },
   previewBackdrop: {
     flex: 1,
     backgroundColor: 'rgba(0,0,0,0.85)',

app/nutrition/records.tsx

@@ -1,6 +1,7 @@
 import { NutritionRecordCard } from '@/components/NutritionRecordCard';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
+import { DateSelector } from '@/components/DateSelector';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { DietRecord, deleteDietRecord, getDietRecords } from '@/services/dietRecords';
 import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
@@ -190,73 +191,12 @@ export default function NutritionRecordsScreen() {
     if (viewMode !== 'daily') return null;
 
     return (
-      <View style={styles.daysContainer}>
+      <DateSelector
-        <ScrollView
+        selectedIndex={selectedIndex}
-          ref={daysScrollRef}
+        onDateSelect={(index, date) => setSelectedIndex(index)}
-          horizontal
+        showMonthTitle={false}
-          showsHorizontalScrollIndicator={false}
+        disableFutureDates={true}
-          contentContainerStyle={styles.daysScrollContainer}
+      />
-          onLayout={(e) => setScrollWidth(e.nativeEvent.layout.width)}
-        >
-          {days.map((day, index) => {
-            const isSelected = index === selectedIndex;
-            const isToday = day.isToday;
-            const isDisabled = day.date?.isAfter(dayjs(), 'day') ?? false;
-
-            return (
-              <TouchableOpacity
-                key={index}
-                style={[
-                  styles.dayPill,
-                  {
-                    backgroundColor: isSelected
-                      ? colorTokens.primary
-                      : colorTokens.surface,
-                    borderColor: isToday && !isSelected
-                      ? colorTokens.primary
-                      : 'transparent',
-                    borderWidth: isToday && !isSelected ? 1 : 0,
-                    opacity: isDisabled ? 0.4 : 1,
-                  },
-                ]}
-                onPress={() => {
-                  if (!isDisabled) {
-                    setSelectedIndex(index);
-                  }
-                }}
-                disabled={isDisabled}
-              >
-                <Text
-                  style={[
-                    styles.dayNumber,
-                    {
-                      color: isSelected
-                        ? colorTokens.onPrimary
-                        : colorTokens.text,
-                      fontWeight: isSelected || isToday ? '700' : '600',
-                    },
-                  ]}
-                >
-                  {day.date?.date() ?? ''}
-                </Text>
-                <Text
-                  style={[
-                    styles.dayLabel,
-                    {
-                      color: isSelected
-                        ? colorTokens.onPrimary
-                        : colorTokens.textSecondary,
-                      fontWeight: isSelected ? '600' : '500',
-                    },
-                  ]}
-                >
-                  {day.dayAbbr}
-                </Text>
-              </TouchableOpacity>
-            );
-          })}
-        </ScrollView>
-      </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 状态管理
+  // Popover 状态管理
-  const [showActionSheet, setShowActionSheet] = useState(false);
+  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]}>
+              <View style={[styles.foodImageContainer, !record.imageUrl && styles.foodImagePlaceholder]}>
-            {record.imageUrl ? (
+                {record.imageUrl ? (
-              <Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
+                  <Image source={{ uri: record.imageUrl }} style={styles.foodImage} />
-            ) : (
+                ) : (
-              <Ionicons name="restaurant" size={12} color={textSecondaryColor} />
+                  <Ionicons name="restaurant" size={12} color={textSecondaryColor} />
-            )}
+                )}
-          </View>
+              </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` }]}>
+              <View style={[styles.mealTypeBadge, { backgroundColor: `${mealTypeColor}15` }]}>
-                  <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
+                <ThemedText style={[styles.mealTypeText, { color: mealTypeColor }]}>
-                    {mealTypeLabel}
+                  {mealTypeLabel}
-                  </ThemedText>
+                </ThemedText>
-                </View>
+              </View>
             </View>
 
             {/* 营养信息 - 紧凑标签布局 */}
@@ -193,26 +195,31 @@ export function NutritionRecordCard({
             )}
           </View>
         </View>
-      </TouchableOpacity>
+      </View>
 
-      {/* ActionSheet for more options */}
+      {/* Popover for more options */}
-      <ActionSheet
+      <Popover
-        visible={showActionSheet}
+        from={popoverRef}
-        onClose={() => setShowActionSheet(false)}
+        isVisible={showPopover}
-        title="选择操作"
+        onRequestClose={() => setShowPopover(false)}
-        options={[
+        popoverStyle={styles.popoverContainer}
-          {
+        backgroundStyle={styles.popoverBackground}
-            id: 'delete',
+      >
-            title: '删除记录',
+        <View style={styles.popoverContent}>
-            subtitle: '删除后无法恢复',
+          <TouchableOpacity
-            icon: 'trash-outline',
+            style={styles.popoverItem}
-            destructive: true,
+            onPress={() => {
-            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;

package-lock.json

@@ -49,6 +49,7 @@
         "react-native-image-viewing": "^0.2.2",
         "react-native-markdown-display": "^7.0.2",
         "react-native-modal-datetime-picker": "^18.0.0",
+        "react-native-popover-view": "^6.1.0",
         "react-native-purchases": "^9.2.2",
         "react-native-reanimated": "~3.17.4",
         "react-native-render-html": "^6.3.4",
@@ -6114,6 +6115,17 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/deprecated-react-native-prop-types": {
+      "version": "2.3.0",
+      "resolved": "https://mirrors.tencent.com/npm/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz",
+      "integrity": "sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-native/normalize-color": "*",
+        "invariant": "*",
+        "prop-types": "*"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -11620,6 +11632,16 @@
         "react-native": ">=0.65.0"
       }
     },
+    "node_modules/react-native-popover-view": {
+      "version": "6.1.0",
+      "resolved": "https://mirrors.tencent.com/npm/react-native-popover-view/-/react-native-popover-view-6.1.0.tgz",
+      "integrity": "sha512-j1CB+yPwTKlBvIJBNb1AwiHyF/r+W5+AJIbHk79GRa+0z6PVtW4C7NWJWPqUVkCMOcJtewl6Pr6f2dc/87cVyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "deprecated-react-native-prop-types": "^2.3.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "node_modules/react-native-purchases": {
       "version": "9.2.2",
       "resolved": "https://mirrors.tencent.com/npm/react-native-purchases/-/react-native-purchases-9.2.2.tgz",

package.json

@@ -53,6 +53,7 @@
     "react-native-image-viewing": "^0.2.2",
     "react-native-markdown-display": "^7.0.2",
     "react-native-modal-datetime-picker": "^18.0.0",
+    "react-native-popover-view": "^6.1.0",
     "react-native-purchases": "^9.2.2",
     "react-native-reanimated": "~3.17.4",
     "react-native-render-html": "^6.3.4",