richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增饮水记录功能，支持快速添加饮水量和用户偏好设置

Browse Source
This commit is contained in:
richarjiang
2025-09-02 17:12:38 +08:00
parent 85a3c742df
commit ac748dc339
5 changed files with 612 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

637
components/AddWaterModal.tsx
View File

@@ -1,8 +1,13 @@
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useWaterDataByDate } from '@/hooks/useWaterData';
import { getQuickWaterAmount, setQuickWaterAmount } from '@/utils/userPreferences';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import React, { useState } from 'react';
import { Image } from 'expo-image';
import React, { useEffect, useState } from 'react';
import {
Alert,
KeyboardAvoidingView,
Modal,
Platform,
@@ -13,6 +18,7 @@ import {
TouchableOpacity,
View,
} from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';
interface AddWaterModalProps {
visible: boolean;
@@ -20,34 +26,22 @@ interface AddWaterModalProps {
selectedDate?: string; // 新增：选中的日期，格式为 YYYY-MM-DD
}
interface TabButtonProps {
title: string;
isActive: boolean;
onPress: () => void;
}
const TabButton: React.FC<TabButtonProps> = ({ title, isActive, onPress }) => (
<TouchableOpacity
style={[styles.tabButton, isActive && styles.activeTabButton]}
onPress={onPress}
>
<Text style={[styles.tabButtonText, isActive && styles.activeTabButtonText]}>
{title}
</Text>
</TouchableOpacity>
);
const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selectedDate }) => {
const [activeTab, setActiveTab] = useState<'add' | 'goal'>('add');
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
const colorTokens = Colors[theme];
const [activeTab, setActiveTab] = useState<'manage' | 'records'>('manage');
const [waterAmount, setWaterAmount] = useState<string>('250');
const [note, setNote] = useState<string>('');
const [dailyGoal, setDailyGoal] = useState<string>('2000');
const [quickAddAmount, setQuickAddAmount] = useState<string>('250'); // 快速添加默认值
// 使用新的 hook 来处理指定日期的饮水数据
const { addWaterRecord, updateWaterGoal } = useWaterDataByDate(selectedDate);
const { waterRecords, dailyWaterGoal, addWaterRecord, updateWaterGoal, removeWaterRecord } = useWaterDataByDate(selectedDate);
const quickAmounts = [100, 150, 200, 250, 300, 350, 400, 500];
const goalPresets = [1500, 2000, 2500, 3000, 3500, 4000];
const quickAddPresets = [100, 150, 200, 250, 300, 350, 400, 500]; // 快速添加默认值选项
const handleAddWater = async () => {
const amount = parseInt(waterAmount);
@@ -75,79 +69,122 @@ const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selecte
}
};
const renderAddRecordTab = () => (
<View style={styles.tabContent}>
<Text style={styles.sectionTitle}>饮水量 (ml)</Text>
<TextInput
style={styles.input}
value={waterAmount}
onChangeText={setWaterAmount}
keyboardType="numeric"
placeholder="请输入饮水量"
placeholderTextColor="#999"
/>
// 处理保存所有设置（饮水目标 + 快速添加默认值）
const handleSaveSettings = async () => {
const goal = parseInt(dailyGoal);
const amount = parseInt(quickAddAmount);
let hasError = false;
// 验证饮水目标
if (goal < 500 || goal > 10000) {
Alert.alert('输入错误', '每日饮水目标应在500ml到10000ml之间');
return;
}
// 验证快速添加默认值
if (amount < 50 || amount > 1000) {
Alert.alert('输入错误', '快速添加默认值应在50ml到1000ml之间');
return;
}
try {
// 保存饮水目标
const goalSuccess = await updateWaterGoal(goal);
if (!goalSuccess) {
hasError = true;
}
// 保存快速添加默认值
await setQuickWaterAmount(amount);
if (!hasError) {
onClose();
}
} catch (error) {
Alert.alert('设置失败', '无法保存设置，请重试');
}
};
<Text style={styles.sectionTitle}>快速选择</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.quickAmountsContainer}
// 删除饮水记录
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('加载用户偏好设置失败:', error);
}
};
if (visible) {
loadUserPreferences();
}
}, [visible, dailyWaterGoal]);
// 渲染Tab切换器 - 参照营养记录页面的实现
const renderTabToggle = () => (
<View style={[styles.tabContainer, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
<TouchableOpacity
style={[
styles.tabButton,
activeTab === 'manage' && { backgroundColor: colorTokens.primary }
]}
onPress={() => setActiveTab('manage')}
>
<View style={styles.quickAmountsWrapper}>
{quickAmounts.map((amount) => (
<TouchableOpacity
key={amount}
style={[
styles.quickAmountButton,
parseInt(waterAmount) === amount && styles.quickAmountButtonActive
]}
onPress={() => setWaterAmount(amount.toString())}
>
<Text style={[
styles.quickAmountText,
parseInt(waterAmount) === amount && styles.quickAmountTextActive
]}>
{amount}ml
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>
<Text style={styles.sectionTitle}>备注 (可选)</Text>
<TextInput
style={[styles.input, styles.remarkInput]}
value={note}
onChangeText={setNote}
placeholder="添加备注..."
placeholderTextColor="#999"
multiline
/>
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
<Text style={styles.cancelButtonText}>取消</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.confirmButton]} onPress={handleAddWater}>
<Text style={styles.confirmButtonText}>添加记录</Text>
</TouchableOpacity>
</View>
<Text style={[
styles.tabButtonText,
{ color: activeTab === 'manage' ? colorTokens.onPrimary : colorTokens.textSecondary }
]}>
饮水配置
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.tabButton,
activeTab === 'records' && { backgroundColor: colorTokens.primary }
]}
onPress={() => setActiveTab('records')}
>
<Text style={[
styles.tabButtonText,
{ color: activeTab === 'records' ? colorTokens.onPrimary : colorTokens.textSecondary }
]}>
饮水记录
</Text>
</TouchableOpacity>
</View>
);
const renderGoalTab = () => (
// 合并后的管理Tab，包含添加记录和设置目标
const renderManageTab = () => (
<View style={styles.tabContent}>
<Text style={styles.sectionTitle}>每日饮水目标 (ml)</Text>
{/* 设置目标部分 */}
<Text style={[styles.sectionTitle, { color: colorTokens.text }]}>每日饮水目标 (ml)</Text>
<TextInput
style={styles.input}
style={[styles.input, {
borderColor: colorTokens.border,
backgroundColor: colorTokens.pageBackgroundEmphasis,
color: colorTokens.text
}]}
value={dailyGoal}
onChangeText={setDailyGoal}
keyboardType="numeric"
placeholder="请输入每日饮水目标"
placeholderTextColor="#999"
placeholderTextColor={colorTokens.textSecondary}
/>
<Text style={styles.sectionTitle}>推荐目标</Text>
<Text style={[styles.sectionTitle, { color: colorTokens.text }]}>推荐目标</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
@@ -159,13 +196,20 @@ const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selecte
key={goal}
style={[
styles.quickAmountButton,
parseInt(dailyGoal) === goal && styles.quickAmountButtonActive
{
borderColor: colorTokens.border,
backgroundColor: colorTokens.pageBackgroundEmphasis
},
parseInt(dailyGoal) === goal && {
backgroundColor: colorTokens.primary,
borderColor: colorTokens.primary
}
]}
onPress={() => setDailyGoal(goal.toString())}
>
<Text style={[
styles.quickAmountText,
parseInt(dailyGoal) === goal && styles.quickAmountTextActive
{ color: parseInt(dailyGoal) === goal ? colorTokens.onPrimary : colorTokens.textSecondary }
]}>
{goal}ml
</Text>
@@ -174,20 +218,195 @@ const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selecte
</View>
</ScrollView>
{/* 快速添加默认值设置部分 */}
<Text style={[styles.sectionTitle, { color: colorTokens.text, marginTop: 20 }]}>快速添加默认值 (ml)</Text>
<Text style={[styles.sectionSubtitle, { color: colorTokens.textSecondary, marginBottom: 12 }]}>
设置点击右上角"+"按钮时添加的默认饮水量
</Text>
<TextInput
style={[styles.input, {
borderColor: colorTokens.border,
backgroundColor: colorTokens.pageBackgroundEmphasis,
color: colorTokens.text
}]}
value={quickAddAmount}
onChangeText={setQuickAddAmount}
keyboardType="numeric"
placeholder="请输入快速添加默认值"
placeholderTextColor={colorTokens.textSecondary}
/>
<Text style={[styles.sectionTitle, { color: colorTokens.text }]}>推荐设置</Text>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={styles.quickAmountsContainer}
>
<View style={styles.quickAmountsWrapper}>
{quickAddPresets.map((amount) => (
<TouchableOpacity
key={amount}
style={[
styles.quickAmountButton,
{
borderColor: colorTokens.border,
backgroundColor: colorTokens.pageBackgroundEmphasis
},
parseInt(quickAddAmount) === amount && {
backgroundColor: colorTokens.primary,
borderColor: colorTokens.primary
}
]}
onPress={() => setQuickAddAmount(amount.toString())}
>
<Text style={[
styles.quickAmountText,
{ color: parseInt(quickAddAmount) === amount ? colorTokens.onPrimary : colorTokens.textSecondary }
]}>
{amount}ml
</Text>
</TouchableOpacity>
))}
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
<Text style={styles.cancelButtonText}>取消</Text>
<TouchableOpacity
style={[styles.button, styles.cancelButton, {
backgroundColor: colorTokens.pageBackgroundEmphasis,
}]}
onPress={onClose}
>
<Text style={[styles.cancelButtonText, { color: colorTokens.textSecondary }]}>取消</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.confirmButton]} onPress={handleUpdateGoal}>
<Text style={styles.confirmButtonText}>更新目标</Text>
<TouchableOpacity
style={[styles.button, styles.confirmButton, { backgroundColor: colorTokens.primary }]}
onPress={handleSaveSettings}
>
<Text style={[styles.confirmButtonText, { color: colorTokens.onPrimary }]}>保存设置</Text>
</TouchableOpacity>
</View>
</View>
);
// 新增：饮水记录卡片组件
const WaterRecordCard = ({ record, onDelete }: { record: any; onDelete: () => void }) => {
const swipeableRef = React.useRef<Swipeable>(null);
// 处理删除操作
const handleDelete = () => {
Alert.alert(
'确认删除',
'确定要删除这条饮水记录吗？此操作无法撤销。',
[
{
text: '取消',
style: 'cancel',
},
{
text: '删除',
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" />
<Text style={styles.deleteSwipeButtonText}>删除</Text>
</TouchableOpacity>
);
};
return (
<View style={styles.recordCardContainer}>
<Swipeable
ref={swipeableRef}
renderRightActions={renderRightActions}
rightThreshold={40}
overshootRight={false}
>
<View style={[styles.recordCard, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
<View style={styles.recordMainContent}>
<View style={[styles.recordIconContainer, { backgroundColor: colorTokens.background }]}>
<Image
source={require('@/assets/images/icons/IconGlass.png')}
style={styles.recordIcon}
/>
</View>
<View style={styles.recordInfo}>
<Text style={[styles.recordLabel, { color: colorTokens.text }]}>水</Text>
<View style={styles.recordTimeContainer}>
<Ionicons name="time-outline" size={14} color={colorTokens.textSecondary} />
<Text style={[styles.recordTimeText, { color: colorTokens.textSecondary }]}>
{dayjs(record.recordedAt || record.createdAt).format('HH:mm')}
</Text>
</View>
</View>
<View style={styles.recordAmountContainer}>
<Text style={[styles.recordAmount, { color: colorTokens.text }]}>{record.amount}ml</Text>
</View>
</View>
{record.note && (
<Text style={[styles.recordNote, { color: colorTokens.textSecondary }]}>{record.note}</Text>
)}
</View>
</Swipeable>
</View>
);
};
// 新增：饮水记录Tab内容
const renderRecordsTab = () => (
<View style={styles.tabContent}>
<Text style={[styles.sectionTitle, { color: colorTokens.text }]}>
{selectedDate ? dayjs(selectedDate).format('MM月DD日') : '今日'}饮水记录
</Text>
{waterRecords && waterRecords.length > 0 ? (
<View style={styles.recordsList}>
{waterRecords.map((record) => (
<WaterRecordCard
key={record.id}
record={record}
onDelete={() => handleDeleteRecord(record.id)}
/>
))}
{/* 总计显示 */}
<View style={[styles.recordsSummary, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
<Text style={[styles.summaryText, { color: colorTokens.text }]}>
总计：{waterRecords.reduce((sum, record) => sum + record.amount, 0)}ml
</Text>
<Text style={[styles.summaryGoal, { color: colorTokens.textSecondary }]}>
目标：{dailyWaterGoal}ml
</Text>
</View>
</View>
) : (
<View style={styles.noRecordsContainer}>
<Ionicons name="water-outline" size={48} color={colorTokens.textSecondary} />
<Text style={[styles.noRecordsText, { color: colorTokens.textSecondary }]}>暂无饮水记录</Text>
<Text style={[styles.noRecordsSubText, { color: colorTokens.textSecondary }]}>点击"添加记录"开始记录饮水量</Text>
</View>
)}
</View>
);
return (
<Modal
animationType="slide"
animationType="fade"
transparent={true}
visible={visible}
onRequestClose={onClose}
@@ -196,29 +415,18 @@ const AddWaterModal: React.FC<AddWaterModalProps> = ({ visible, onClose, selecte
style={styles.centeredView}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<View style={styles.modalView}>
<View style={[styles.modalView, { backgroundColor: colorTokens.background }]}>
<View style={styles.header}>
<Text style={styles.modalTitle}>配置饮水</Text>
<Text style={[styles.modalTitle, { color: colorTokens.text }]}>配置饮水</Text>
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
<Ionicons name="close" size={24} color="#666" />
<Ionicons name="close" size={18} color={colorTokens.textSecondary} />
</TouchableOpacity>
</View>
<View style={styles.tabContainer}>
<TabButton
title="添加记录"
isActive={activeTab === 'add'}
onPress={() => setActiveTab('add')}
/>
<TabButton
title="设置目标"
isActive={activeTab === 'goal'}
onPress={() => setActiveTab('goal')}
/>
</View>
{renderTabToggle()}
<ScrollView style={styles.contentScrollView}>
{activeTab === 'add' ? renderAddRecordTab() : renderGoalTab()}
{activeTab === 'manage' ? renderManageTab() : renderRecordsTab()}
</ScrollView>
</View>
</KeyboardAvoidingView>
@@ -235,19 +443,20 @@ const styles = StyleSheet.create({
},
modalView: {
width: '90%',
maxWidth: 350,
maxHeight: '80%',
backgroundColor: 'white',
borderRadius: 20,
padding: 20,
shadowColor: '#000',
maxWidth: 400,
height: 650, // 固定高度
borderRadius: 24,
paddingTop: 24,
paddingHorizontal: 20,
paddingBottom: 20,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 2,
height: 8,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
shadowOpacity: 0.12,
shadowRadius: 20,
elevation: 8,
},
header: {
flexDirection: 'row',
@@ -256,59 +465,55 @@ const styles = StyleSheet.create({
marginBottom: 20,
},
modalTitle: {
fontSize: 20,
fontWeight: 'bold',
color: '#333',
fontSize: 16,
fontWeight: '600',
letterSpacing: -0.5,
},
closeButton: {
padding: 5,
},
tabContainer: {
flexDirection: 'row',
marginBottom: 20,
borderRadius: 10,
backgroundColor: '#f5f5f5',
padding: 4,
borderRadius: 20,
padding: 2,
marginBottom: 24,
},
tabButton: {
flex: 1,
paddingVertical: 10,
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 18,
minWidth: 80,
alignItems: 'center',
borderRadius: 8,
},
activeTabButton: {
backgroundColor: '#007AFF',
flex: 1,
},
tabButtonText: {
fontSize: 14,
color: '#666',
fontWeight: '500',
},
activeTabButtonText: {
color: 'white',
fontWeight: '600',
},
contentScrollView: {
maxHeight: 400,
flex: 1,
},
tabContent: {
paddingVertical: 10,
},
sectionTitle: {
fontSize: 16,
fontWeight: '600',
color: '#333',
marginBottom: 10,
fontSize: 14,
fontWeight: '500',
marginBottom: 12,
letterSpacing: -0.3,
},
sectionSubtitle: {
fontSize: 14,
fontWeight: '400',
lineHeight: 18,
},
input: {
borderWidth: 1,
borderColor: '#e0e0e0',
borderRadius: 10,
paddingHorizontal: 15,
paddingVertical: 12,
borderRadius: 12,
paddingHorizontal: 16,
paddingVertical: 14,
fontSize: 16,
color: '#333',
marginBottom: 15,
fontWeight: '500',
marginBottom: 16,
},
remarkInput: {
height: 80,
@@ -324,27 +529,20 @@ const styles = StyleSheet.create({
},
quickAmountButton: {
paddingHorizontal: 20,
paddingVertical: 10,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1,
borderColor: '#e0e0e0',
backgroundColor: '#f9f9f9',
minWidth: 60,
minWidth: 70,
alignItems: 'center',
},
quickAmountButtonActive: {
backgroundColor: '#007AFF',
borderColor: '#007AFF',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.05,
shadowRadius: 2,
elevation: 1,
},
quickAmountText: {
fontSize: 14,
color: '#666',
fontSize: 15,
fontWeight: '500',
},
quickAmountTextActive: {
color: 'white',
fontWeight: '600',
},
buttonContainer: {
flexDirection: 'row',
gap: 10,
@@ -352,25 +550,134 @@ const styles = StyleSheet.create({
},
button: {
flex: 1,
paddingVertical: 12,
borderRadius: 10,
paddingVertical: 14,
borderRadius: 12,
alignItems: 'center',
},
cancelButton: {
backgroundColor: '#f5f5f5',
},
confirmButton: {
backgroundColor: '#007AFF',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 3,
},
cancelButtonText: {
fontSize: 16,
color: '#666',
fontWeight: '500',
fontWeight: '600',
},
confirmButtonText: {
fontSize: 16,
color: 'white',
fontWeight: '700',
},
// 饮水记录相关样式
recordsList: {
gap: 12,
},
recordCardContainer: {
// iOS 阴影效果
shadowColor: '#000000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.08,
shadowRadius: 4,
// Android 阴影效果
elevation: 2,
},
recordCard: {
borderRadius: 12,
padding: 10,
},
recordMainContent: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
recordIconContainer: {
width: 40,
height: 40,
borderRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
recordIcon: {
width: 20,
height: 20,
},
recordInfo: {
flex: 1,
marginLeft: 12,
},
recordLabel: {
fontSize: 16,
fontWeight: '600',
marginBottom: 8,
},
recordTimeContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 4,
},
recordAmountContainer: {
alignItems: 'flex-end',
},
recordAmount: {
fontSize: 14,
fontWeight: '500',
},
deleteSwipeButton: {
backgroundColor: '#EF4444',
justifyContent: 'center',
alignItems: 'center',
width: 80,
borderRadius: 12,
marginLeft: 8,
},
deleteSwipeButtonText: {
color: '#FFFFFF',
fontSize: 12,
fontWeight: '600',
marginTop: 4,
},
recordTimeText: {
fontSize: 12,
fontWeight: '400',
},
recordNote: {
marginTop: 8,
fontSize: 14,
fontStyle: 'italic',
lineHeight: 20,
},
recordsSummary: {
marginTop: 20,
padding: 16,
borderRadius: 12,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
summaryText: {
fontSize: 12,
fontWeight: '500',
},
summaryGoal: {
fontSize: 12,
fontWeight: '500',
},
noRecordsContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
gap: 12,
},
noRecordsText: {
fontSize: 16,
fontWeight: '600',
},
noRecordsSubText: {
fontSize: 14,
textAlign: 'center',
},
});

36
components/AnimatedNumber.tsx
View File

@@ -18,15 +18,26 @@ export function AnimatedNumber({
resetToken,
}: AnimatedNumberProps) {
const opacity = useRef(new Animated.Value(1)).current;
const [display, setDisplay] = useState<string>('0');
const [currentValue, setCurrentValue] = useState(0);
const [display, setDisplay] = useState<string>(() =>
format ? format(value) : `${Math.round(value)}`
);
const [currentValue, setCurrentValue] = useState(value);
const [lastResetToken, setLastResetToken] = useState(resetToken);
const [isAnimating, setIsAnimating] = useState(false);
useEffect(() => {
// 如果值没有变化，不执行动画
if (value === currentValue && resetToken === undefined) {
// 检查是否需要触发动画
const valueChanged = value !== currentValue;
const resetTokenChanged = resetToken !== lastResetToken;
// 如果值没有变化且resetToken也没有变化，或者正在动画中，则不执行新动画
if ((!valueChanged && !resetTokenChanged) || isAnimating) {
return;
}
// 标记开始动画
setIsAnimating(true);
// 停止当前动画
opacity.stopAnimation(() => {
// 创建优雅的透明度变化动画
@@ -48,22 +59,17 @@ export function AnimatedNumber({
fadeOut.start(() => {
// 更新当前值和显示
setCurrentValue(value);
setLastResetToken(resetToken);
setDisplay(format ? format(value) : `${Math.round(value)}`);
// 然后淡入新数字
fadeIn.start();
fadeIn.start(() => {
// 动画完成，标记结束
setIsAnimating(false);
});
});
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [value, resetToken]);
// 初始化显示值
useEffect(() => {
if (currentValue !== value) {
setCurrentValue(value);
setDisplay(format ? format(value) : `${Math.round(value)}`);
}
}, [value, format, currentValue]);
}, [value, resetToken, currentValue, lastResetToken, isAnimating, durationMs, format]);
return (
<Animated.Text

77
components/WaterIntakeCard.tsx
View File

@@ -1,4 +1,5 @@
import { useWaterDataByDate } from '@/hooks/useWaterData';
import { getQuickWaterAmount } from '@/utils/userPreferences';
import dayjs from 'dayjs';
import React, { useEffect, useMemo, useState } from 'react';
import {
@@ -10,6 +11,7 @@ import {
ViewStyle
} from 'react-native';
import AddWaterModal from './AddWaterModal';
import { AnimatedNumber } from './AnimatedNumber';
interface WaterIntakeCardProps {
style?: ViewStyle;
@@ -22,6 +24,7 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
}) => {
const { waterStats, dailyWaterGoal, waterRecords, addWaterRecord } = useWaterDataByDate(selectedDate);
const [isModalVisible, setIsModalVisible] = useState(false);
const [quickWaterAmount, setQuickWaterAmount] = useState(150); // 默认值，将从用户偏好中加载
// 计算当前饮水量和目标
const currentIntake = waterStats?.totalAmount || 0;
@@ -64,9 +67,23 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
}));
}, [waterRecords]);
// 获取当前小时 - 只有当选中的是今天时才显示当前小时
// 判断是否是今天
const isToday = selectedDate === dayjs().format('YYYY-MM-DD') || !selectedDate;
const currentHour = isToday ? new Date().getHours() : -1; // 如果不是今天，设为-1表示没有当前小时
// 加载用户偏好的快速添加饮水默认值
useEffect(() => {
const loadQuickWaterAmount = async () => {
try {
const amount = await getQuickWaterAmount();
setQuickWaterAmount(amount);
} catch (error) {
console.error('加载快速添加饮水默认值失败:', error);
// 保持默认值 250ml
}
};
loadQuickWaterAmount();
}, []);
// 触发柱体动画
useEffect(() => {
@@ -96,8 +113,8 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
// 处理添加喝水 - 右上角按钮直接添加
const handleQuickAddWater = async () => {
// 默认添加250ml水
const waterAmount = 250;
// 使用用户配置的快速添加饮水量
const waterAmount = quickWaterAmount;
// 如果有选中日期，则为该日期添加记录；否则为今天添加记录
const recordedAt = selectedDate ? dayjs(selectedDate).toISOString() : dayjs().toISOString();
await addWaterRecord(waterAmount, recordedAt);
@@ -109,8 +126,16 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
};
// 处理关闭弹窗
const handleCloseModal = () => {
const handleCloseModal = async () => {
setIsModalVisible(false);
// 弹窗关闭后重新加载快速添加默认值，以防用户修改了设置
try {
const amount = await getQuickWaterAmount();
setQuickWaterAmount(amount);
} catch (error) {
console.error('刷新快速添加默认值失败:', error);
}
};
return (
@@ -123,9 +148,11 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
{/* 标题和加号按钮 */}
<View style={styles.header}>
<Text style={styles.title}>喝水</Text>
<TouchableOpacity style={styles.addButton} onPress={handleQuickAddWater}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
{isToday && (
<TouchableOpacity style={styles.addButton} onPress={handleQuickAddWater}>
<Text style={styles.addButtonText}>+</Text>
</TouchableOpacity>
)}
</View>
{/* 柱状图 */}
@@ -133,9 +160,8 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
<View style={styles.chartWrapper}>
<View style={styles.chartArea}>
{chartData.map((data, index) => {
// 判断是否是当前小时或者有活动的小时
// 判断是否有活动的小时
const isActive = data.amount > 0;
const isCurrent = isToday && index <= currentHour;
// 动画变换：高度从0到目标高度
const animatedHeight = animatedValues[index].interpolate({
@@ -184,22 +210,21 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
{/* 饮水量显示 */}
<View style={styles.statsContainer}>
<Text style={styles.currentIntake}>
{currentIntake !== null ? `${currentIntake}ml` : '——'}
</Text>
{currentIntake !== null ? (
<AnimatedNumber
value={currentIntake}
style={styles.currentIntake}
format={(value) => `${Math.round(value)}ml`}
resetToken={selectedDate}
/>
) : (
<Text style={styles.currentIntake}>——</Text>
)}
<Text style={styles.targetIntake}>
/ {targetIntake}ml
</Text>
</View>
{/* 完成率显示 */}
{waterStats && (
<View style={styles.completionContainer}>
<Text style={styles.completionText}>
{Math.round(waterStats.completionRate)}%
</Text>
</View>
)}
</TouchableOpacity>
{/* 配置饮水弹窗 */}
@@ -233,6 +258,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 4,
minHeight: 22,
},
title: {
fontSize: 14,
@@ -298,15 +324,6 @@ const styles = StyleSheet.create({
color: '#6B7280',
marginLeft: 4,
},
completionContainer: {
alignItems: 'flex-start',
marginTop: 2,
},
completionText: {
fontSize: 12,
color: '#10B981',
fontWeight: '500',
},
});
export default WaterIntakeCard;