fbe0c92f0f
- 新增 i18n 翻译资源，覆盖睡眠、饮水、体重、锻炼、用药 AI 识别、步数、健身圆环、基础代谢及设置等核心模块 - 重构相关页面及组件（如 SleepDetail, WaterDetail, WorkoutHistory 等）使用 `useI18n` 钩子替换硬编码文本 - 升级 `utils/date` 工具库与 `DateSelector` 组件，支持基于语言环境的日期格式化与显示 - 完善登录页、注销流程及权限申请弹窗的双语提示信息 - 优化部分页面的 UI 细节与字体样式以适配多语言显示
504 lines
14 KiB
TypeScript
504 lines
14 KiB
TypeScript
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
import { useWaterDataByDate } from '@/hooks/useWaterData';
|
|
import { getQuickWaterAmount } from '@/utils/userPreferences';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
|
|
import { Image } from 'expo-image';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
Alert,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import { Swipeable } from 'react-native-gesture-handler';
|
|
|
|
import { HeaderBar } from '@/components/ui/HeaderBar';
|
|
import { useI18n } from '@/hooks/useI18n';
|
|
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
|
import dayjs from 'dayjs';
|
|
|
|
interface WaterDetailProps {
|
|
selectedDate?: string;
|
|
}
|
|
|
|
const WaterDetail: React.FC<WaterDetailProps> = () => {
|
|
const { t } = useI18n();
|
|
const safeAreaTop = useSafeAreaTop()
|
|
|
|
const { selectedDate } = useLocalSearchParams<{ selectedDate?: string }>();
|
|
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
|
const colorTokens = Colors[theme];
|
|
|
|
const [dailyGoal, setDailyGoal] = useState<string>('2000');
|
|
const [quickAddAmount, setQuickAddAmount] = useState<string>('250');
|
|
|
|
// 使用新的 hook 来处理指定日期的饮水数据
|
|
const { waterRecords, dailyWaterGoal, updateWaterGoal, removeWaterRecord } = useWaterDataByDate(selectedDate);
|
|
|
|
// 处理设置按钮点击 - 跳转到设置页面
|
|
const handleSettingsPress = () => {
|
|
router.push('/water/settings');
|
|
};
|
|
|
|
// 删除饮水记录
|
|
const handleDeleteRecord = async (recordId: string) => {
|
|
await removeWaterRecord(recordId);
|
|
};
|
|
|
|
// 加载用户偏好设置和当前饮水目标
|
|
useEffect(() => {
|
|
const loadUserPreferences = async () => {
|
|
try {
|
|
const amount = await getQuickWaterAmount();
|
|
setQuickAddAmount(amount.toString());
|
|
|
|
// 设置当前的饮水目标
|
|
if (dailyWaterGoal) {
|
|
setDailyGoal(dailyWaterGoal.toString());
|
|
}
|
|
} catch (error) {
|
|
console.error(t('waterDetail.loadingUserPreferences'), error);
|
|
}
|
|
};
|
|
|
|
loadUserPreferences();
|
|
}, [dailyWaterGoal]);
|
|
|
|
const totalAmount = waterRecords?.reduce((sum, record) => sum + record.amount, 0) || 0;
|
|
const currentGoal = dailyWaterGoal || 2000;
|
|
const progress = Math.min(100, (totalAmount / currentGoal) * 100);
|
|
|
|
// 新增：饮水记录卡片组件
|
|
const WaterRecordCard = ({ record, onDelete }: { record: any; onDelete: () => void }) => {
|
|
const swipeableRef = React.useRef<Swipeable>(null);
|
|
|
|
// 处理删除操作
|
|
const handleDelete = () => {
|
|
Alert.alert(
|
|
t('waterDetail.deleteConfirm.title'),
|
|
t('waterDetail.deleteConfirm.message'),
|
|
[
|
|
{
|
|
text: t('waterDetail.deleteConfirm.cancel'),
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: t('waterDetail.deleteConfirm.confirm'),
|
|
style: 'destructive',
|
|
onPress: () => {
|
|
onDelete();
|
|
swipeableRef.current?.close();
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
// 渲染右侧删除按钮
|
|
const renderRightActions = () => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.deleteSwipeButton}
|
|
onPress={handleDelete}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Ionicons name="trash" size={20} color="#FFFFFF" />
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.recordCardContainer}>
|
|
<Swipeable
|
|
ref={swipeableRef}
|
|
renderRightActions={renderRightActions}
|
|
rightThreshold={40}
|
|
overshootRight={false}
|
|
>
|
|
<View style={styles.recordCard}>
|
|
<View style={styles.recordMainContent}>
|
|
<View style={styles.recordIconContainer}>
|
|
<Image
|
|
source={require('@/assets/images/icons/IconGlass.png')}
|
|
style={styles.recordIcon}
|
|
/>
|
|
</View>
|
|
<View style={styles.recordInfo}>
|
|
<Text style={styles.recordLabel}>{t('waterDetail.water')}</Text>
|
|
<View style={styles.recordTimeContainer}>
|
|
<Ionicons name="time-outline" size={14} color="#6f7ba7" />
|
|
<Text style={styles.recordTimeText}>
|
|
{dayjs(record.recordedAt || record.createdAt).format('HH:mm')}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.recordAmountContainer}>
|
|
<Text style={styles.recordAmount}>{record.amount}ml</Text>
|
|
</View>
|
|
</View>
|
|
{record.note && (
|
|
<Text style={styles.recordNote}>{record.note}</Text>
|
|
)}
|
|
</View>
|
|
</Swipeable>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 背景 */}
|
|
<LinearGradient
|
|
colors={['#f3f4fb', '#f3f4fb']}
|
|
style={StyleSheet.absoluteFillObject}
|
|
/>
|
|
{/* 顶部装饰性渐变 - 模仿挑战页面的柔和背景感 */}
|
|
<LinearGradient
|
|
colors={['rgba(229, 252, 254, 0.8)', 'rgba(243, 244, 251, 0)']}
|
|
style={styles.topGradient}
|
|
start={{ x: 0.5, y: 0 }}
|
|
end={{ x: 0.5, y: 1 }}
|
|
/>
|
|
|
|
<HeaderBar
|
|
title={t('waterDetail.title')}
|
|
onBack={() => router.back()}
|
|
right={
|
|
isLiquidGlassAvailable() ? (
|
|
<TouchableOpacity
|
|
onPress={handleSettingsPress}
|
|
activeOpacity={0.7}
|
|
style={styles.settingsButtonWrapper}
|
|
>
|
|
<GlassView
|
|
style={styles.settingsButtonGlass}
|
|
glassEffectStyle="regular"
|
|
tintColor="rgba(255, 255, 255, 0.4)"
|
|
isInteractive={true}
|
|
>
|
|
<Ionicons name="settings-outline" size={22} color="#1c1f3a" />
|
|
</GlassView>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<TouchableOpacity
|
|
style={styles.settingsButtonFallback}
|
|
onPress={handleSettingsPress}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Ionicons name="settings-outline" size={22} color="#1c1f3a" />
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
/>
|
|
|
|
<KeyboardAvoidingView
|
|
style={styles.keyboardAvoidingView}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={[styles.scrollContent, {
|
|
paddingTop: safeAreaTop
|
|
}]}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<View style={styles.headerBlock}>
|
|
<Text style={styles.pageTitle}>
|
|
{selectedDate ? dayjs(selectedDate).format('MM月DD日') : t('waterDetail.today')}
|
|
</Text>
|
|
<Text style={styles.pageSubtitle}>{t('waterDetail.waterRecord')}</Text>
|
|
</View>
|
|
|
|
{/* 进度卡片 */}
|
|
<View style={styles.progressCard}>
|
|
<View style={styles.progressInfo}>
|
|
<View>
|
|
<Text style={styles.progressLabel}>{t('waterDetail.total')}</Text>
|
|
<Text style={styles.progressValue}>{totalAmount}<Text style={styles.progressUnit}>ml</Text></Text>
|
|
</View>
|
|
<View style={{ alignItems: 'flex-end' }}>
|
|
<Text style={styles.progressLabel}>{t('waterDetail.goal')}</Text>
|
|
<Text style={styles.progressGoalValue}>{currentGoal}<Text style={styles.progressUnit}>ml</Text></Text>
|
|
</View>
|
|
</View>
|
|
<View style={styles.progressBarBg}>
|
|
<LinearGradient
|
|
colors={['#4F5BD5', '#6B6CFF']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
style={[styles.progressBarFill, { width: `${progress}%` }]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 记录列表 */}
|
|
<View style={styles.section}>
|
|
{waterRecords && waterRecords.length > 0 ? (
|
|
<View style={styles.recordsList}>
|
|
{waterRecords.map((record) => (
|
|
<WaterRecordCard
|
|
key={record.id}
|
|
record={record}
|
|
onDelete={() => handleDeleteRecord(record.id)}
|
|
/>
|
|
))}
|
|
</View>
|
|
) : (
|
|
<View style={styles.noRecordsContainer}>
|
|
<Image
|
|
source={require('@/assets/images/icons/IconGlass.png')}
|
|
style={{ width: 60, height: 60, opacity: 0.5, marginBottom: 16 }}
|
|
/>
|
|
<Text style={styles.noRecordsText}>{t('waterDetail.noRecords')}</Text>
|
|
<Text style={styles.noRecordsSubText}>{t('waterDetail.noRecordsSubtitle')}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f3f4fb',
|
|
},
|
|
topGradient: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
height: 300,
|
|
},
|
|
keyboardAvoidingView: {
|
|
flex: 1,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
paddingBottom: 40,
|
|
},
|
|
headerBlock: {
|
|
paddingHorizontal: 24,
|
|
marginTop: 10,
|
|
marginBottom: 24,
|
|
},
|
|
pageTitle: {
|
|
fontSize: 28,
|
|
fontWeight: '800',
|
|
color: '#1c1f3a',
|
|
fontFamily: 'AliBold',
|
|
marginBottom: 4,
|
|
},
|
|
pageSubtitle: {
|
|
fontSize: 16,
|
|
color: '#6f7ba7',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
|
|
// 进度卡片
|
|
progressCard: {
|
|
marginHorizontal: 24,
|
|
marginBottom: 32,
|
|
padding: 24,
|
|
borderRadius: 28,
|
|
backgroundColor: '#ffffff',
|
|
shadowColor: 'rgba(30, 41, 59, 0.1)',
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.18,
|
|
shadowRadius: 20,
|
|
elevation: 8,
|
|
},
|
|
progressInfo: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-end',
|
|
marginBottom: 16,
|
|
},
|
|
progressLabel: {
|
|
fontSize: 14,
|
|
color: '#6f7ba7',
|
|
marginBottom: 6,
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
progressValue: {
|
|
fontSize: 32,
|
|
fontWeight: '800',
|
|
color: '#4F5BD5',
|
|
fontFamily: 'AliBold',
|
|
lineHeight: 32,
|
|
},
|
|
progressGoalValue: {
|
|
fontSize: 24,
|
|
fontWeight: '700',
|
|
color: '#1c1f3a',
|
|
fontFamily: 'AliBold',
|
|
lineHeight: 32,
|
|
},
|
|
progressUnit: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#6f7ba7',
|
|
marginLeft: 2,
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
progressBarBg: {
|
|
height: 12,
|
|
backgroundColor: '#F0F2F5',
|
|
borderRadius: 6,
|
|
overflow: 'hidden',
|
|
},
|
|
progressBarFill: {
|
|
height: '100%',
|
|
borderRadius: 6,
|
|
},
|
|
|
|
section: {
|
|
paddingHorizontal: 24,
|
|
},
|
|
|
|
// 记录列表样式
|
|
recordsList: {
|
|
gap: 16,
|
|
},
|
|
recordCardContainer: {
|
|
shadowColor: 'rgba(30, 41, 59, 0.08)',
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.12,
|
|
shadowRadius: 12,
|
|
elevation: 4,
|
|
marginBottom: 2,
|
|
},
|
|
recordCard: {
|
|
borderRadius: 24,
|
|
padding: 18,
|
|
backgroundColor: '#ffffff',
|
|
},
|
|
recordMainContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
},
|
|
recordIconContainer: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 16,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#f5f6ff',
|
|
},
|
|
recordIcon: {
|
|
width: 24,
|
|
height: 24,
|
|
},
|
|
recordInfo: {
|
|
flex: 1,
|
|
marginLeft: 16,
|
|
},
|
|
recordLabel: {
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
color: '#1c1f3a',
|
|
marginBottom: 4,
|
|
fontFamily: 'AliBold',
|
|
},
|
|
recordTimeContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
},
|
|
recordTimeText: {
|
|
fontSize: 13,
|
|
color: '#6f7ba7',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
recordAmountContainer: {
|
|
alignItems: 'flex-end',
|
|
},
|
|
recordAmount: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
color: '#4F5BD5',
|
|
fontFamily: 'AliBold',
|
|
},
|
|
recordNote: {
|
|
marginTop: 14,
|
|
padding: 12,
|
|
backgroundColor: '#F8F9FC',
|
|
borderRadius: 12,
|
|
fontSize: 13,
|
|
lineHeight: 18,
|
|
color: '#5f6a97',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
deleteSwipeButton: {
|
|
backgroundColor: '#FF6B6B',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: 70,
|
|
height: '100%',
|
|
borderRadius: 24,
|
|
marginLeft: 12,
|
|
},
|
|
|
|
noRecordsContainer: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 60,
|
|
backgroundColor: '#ffffff',
|
|
borderRadius: 28,
|
|
shadowColor: 'rgba(30, 41, 59, 0.06)',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 12,
|
|
},
|
|
noRecordsText: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
color: '#1c1f3a',
|
|
marginBottom: 8,
|
|
fontFamily: 'AliBold',
|
|
},
|
|
noRecordsSubText: {
|
|
fontSize: 14,
|
|
color: '#9ba3c7',
|
|
fontFamily: 'AliRegular',
|
|
},
|
|
|
|
// Settings Button
|
|
settingsButtonWrapper: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 20,
|
|
overflow: 'hidden',
|
|
},
|
|
settingsButtonGlass: {
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
settingsButtonFallback: {
|
|
width: 40,
|
|
height: 40,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 20,
|
|
backgroundColor: '#ffffff',
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(0,0,0,0.05)',
|
|
},
|
|
});
|
|
|
|
export default WaterDetail;
|