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

@@ -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}
/>
);
};