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)}>
-        <TouchableOpacity activeOpacity={1} style={styles.modalBackdrop} onPress={() => setHistoryVisible(false)}>
-          <View style={[styles.modalSheet, { backgroundColor: '#FFFFFF' }]}>
-            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle}>历史会话</Text>
-              <TouchableOpacity accessibilityRole="button" onPress={() => refreshHistory(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={() => 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>
+      <HistoryModal
+        visible={historyVisible}
+        onClose={() => setHistoryVisible(false)}
+        historyLoading={historyLoading}
+        historyItems={historyItems}
+        historyPage={historyPage}
+        onRefreshHistory={refreshHistory}
+        onSelectConversation={handleSelectConversation}
+        onDeleteConversation={confirmDeleteConversation}
+      />
       <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}>
-        <ScrollView
-          ref={daysScrollRef}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          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>
+      <DateSelector
+        selectedIndex={selectedIndex}
+        onDateSelect={(index, date) => setSelectedIndex(index)}
+        showMonthTitle={false}
+        disableFutureDates={true}
+      />
     );
   };