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

- 在 CoachScreen 中引入 HistoryModal 组件,优化历史会话展示
- 更新 NutritionRecordCard 组件,使用 Popover 替代 ActionSheet,提升操作体验
- 在 NutritionRecordsScreen 中引入 DateSelector 组件,简化日期选择逻辑
- 更新 package.json 和 package-lock.json,新增 react-native-popover-view 依赖
- 移除不再使用的历史会话模态框代码,提升代码整洁性
This commit is contained in:
richarjiang
2025-08-27 08:49:56 +08:00
parent 533b40a12d
commit 5e3203f1ce
6 changed files with 288 additions and 224 deletions

View File

@@ -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;