feat(health): 重构营养卡片数据获取逻辑,支持基础代谢与运动消耗分离

- 新增 fetchCompleteNutritionCardData 异步 action,统一拉取营养、健康与基础代谢数据
- NutritionRadarCard 改用 Redux 数据源,移除 props 透传,自动根据日期刷新
- BasalMetabolismCard 新增详情弹窗,展示 BMR 计算公式、正常区间及提升策略
- StepsCard 与 StepsCardOptimized 引入 InteractionManager 与动画懒加载,减少 UI 阻塞
- HealthKitManager 新增饮水读写接口,支持将饮水记录同步至 HealthKit
- 移除 statistics 页面冗余 mock 与 nutrition/health 重复请求,缓存时间统一为 5 分钟
This commit is contained in:
richarjiang
2025-09-23 10:01:50 +08:00
parent d082c66b72
commit e6dfd4d59a
11 changed files with 1115 additions and 203 deletions

View File

@@ -16,11 +16,9 @@ import { useAuthGuard } from '@/hooks/useAuthGuard';
import { BackgroundTaskManager } from '@/services/backgroundTaskManager'; import { BackgroundTaskManager } from '@/services/backgroundTaskManager';
import { selectHealthDataByDate, setHealthData } from '@/store/healthSlice'; import { selectHealthDataByDate, setHealthData } from '@/store/healthSlice';
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice'; import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
import { fetchDailyNutritionData, selectNutritionSummaryByDate } from '@/store/nutritionSlice';
import { fetchTodayWaterStats } from '@/store/waterSlice'; import { fetchTodayWaterStats } from '@/store/waterSlice';
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date'; import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
import { fetchHealthDataForDate, testHRVDataFetch } from '@/utils/health'; import { fetchHealthDataForDate, testHRVDataFetch } from '@/utils/health';
import { getTestHealthData } from '@/utils/mockHealthData';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { LinearGradient } from 'expo-linear-gradient'; import { LinearGradient } from 'expo-linear-gradient';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
@@ -37,13 +35,10 @@ import {
import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { useSafeAreaInsets } from 'react-native-safe-area-context';
// 浮动动画组件 // 浮动动画组件
const FloatingCard = ({ children, delay = 0, style }: { const FloatingCard = ({ children, style }: {
children: React.ReactNode; children: React.ReactNode;
delay?: number;
style?: any; style?: any;
}) => { }) => {
return ( return (
<View <View
style={[ style={[
@@ -60,11 +55,6 @@ const FloatingCard = ({ children, delay = 0, style }: {
export default function ExploreScreen() { export default function ExploreScreen() {
const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000; const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000;
const userProfile = useAppSelector((s) => s.user.profile);
// 开发调试设置为true来使用mock数据
// 在真机测试时可以暂时设置为true来验证组件显示逻辑
const useMockData = false; // 改为true来启用mock数据调试
const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard(); const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
@@ -83,22 +73,11 @@ export default function ExploreScreen() {
return dayjs(currentSelectedDate).format('YYYY-MM-DD'); return dayjs(currentSelectedDate).format('YYYY-MM-DD');
}, [currentSelectedDate]); }, [currentSelectedDate]);
// 从 Redux 获取指定日期的健康数据
const healthData = useAppSelector(selectHealthDataByDate(currentSelectedDateString));
// 解构健康数据支持mock数据
const mockData = useMockData ? getTestHealthData('mock') : null;
const activeCalories = useMockData ? (mockData?.activeEnergyBurned ?? null) : (healthData?.activeEnergyBurned ?? null);
// 用于触发动画重置的 token当日期或数据变化时更新 // 用于触发动画重置的 token当日期或数据变化时更新
const [animToken, setAnimToken] = useState(0); const [animToken, setAnimToken] = useState(0);
// 从 Redux 获取营养数据
const nutritionSummary = useAppSelector(selectNutritionSummaryByDate(currentSelectedDateString));
// 心情相关状态 // 心情相关状态
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@@ -110,7 +89,6 @@ export default function ExploreScreen() {
// 请求状态管理,防止重复请求 // 请求状态管理,防止重复请求
const loadingRef = useRef({ const loadingRef = useRef({
health: false, health: false,
nutrition: false,
mood: false mood: false
}); });
@@ -119,14 +97,14 @@ export default function ExploreScreen() {
const getDateKey = (d: Date) => `${dayjs(d).year()}-${dayjs(d).month() + 1}-${dayjs(d).date()}`; const getDateKey = (d: Date) => `${dayjs(d).year()}-${dayjs(d).month() + 1}-${dayjs(d).date()}`;
// 检查数据是否需要刷新(2分钟内不重复拉取,对营养数据更严格 // 检查数据是否需要刷新(5分钟内不重复拉取)
const shouldRefreshData = (dateKey: string, dataType: string) => { const shouldRefreshData = (dateKey: string, dataType: string) => {
const cacheKey = `${dateKey}-${dataType}`; const cacheKey = `${dateKey}-${dataType}`;
const lastUpdate = dataTimestampRef.current[cacheKey]; const lastUpdate = dataTimestampRef.current[cacheKey];
const now = Date.now(); const now = Date.now();
// 营养数据使用更短的缓存时间,其他数据使用5分钟 // 使用5分钟缓存时间
const cacheTime = dataType === 'nutrition' ? 2 * 60 * 1000 : 5 * 60 * 1000; const cacheTime = 5 * 60 * 1000;
return !lastUpdate || (now - lastUpdate) > cacheTime; return !lastUpdate || (now - lastUpdate) > cacheTime;
}; };
@@ -257,45 +235,6 @@ export default function ExploreScreen() {
}; };
// 加载营养数据 // 加载营养数据
const loadNutritionData = async (targetDate?: Date, forceRefresh = false) => {
if (!isLoggedIn) return;
// 确定要查询的日期
let derivedDate: Date;
if (targetDate) {
derivedDate = targetDate;
} else {
derivedDate = currentSelectedDate;
}
const requestKey = getDateKey(derivedDate);
// 检查是否正在加载或不需要刷新
if (loadingRef.current.nutrition) {
console.log('营养数据正在加载中,跳过重复请求');
return;
}
if (!forceRefresh && !shouldRefreshData(requestKey, 'nutrition')) {
console.log('营养数据缓存未过期,跳过请求');
return;
}
try {
loadingRef.current.nutrition = true;
console.log('加载营养数据...', derivedDate);
await dispatch(fetchDailyNutritionData(derivedDate));
console.log('营养数据加载完成');
// 更新缓存时间戳
updateDataTimestamp(requestKey, 'nutrition');
} catch (error) {
console.error('营养数据加载失败:', error);
} finally {
loadingRef.current.nutrition = false;
}
};
// 实际执行数据加载的方法 // 实际执行数据加载的方法
const executeLoadAllData = React.useCallback((targetDate?: Date, forceRefresh = false) => { const executeLoadAllData = React.useCallback((targetDate?: Date, forceRefresh = false) => {
@@ -304,7 +243,6 @@ export default function ExploreScreen() {
console.log('执行数据加载,日期:', dateToUse, '强制刷新:', forceRefresh); console.log('执行数据加载,日期:', dateToUse, '强制刷新:', forceRefresh);
loadHealthData(dateToUse, forceRefresh); loadHealthData(dateToUse, forceRefresh);
if (isLoggedIn) { if (isLoggedIn) {
loadNutritionData(dateToUse, forceRefresh);
loadMoodData(dateToUse, forceRefresh); loadMoodData(dateToUse, forceRefresh);
// 加载喝水数据(只加载今日数据用于后台检查) // 加载喝水数据(只加载今日数据用于后台检查)
const isToday = dayjs(dateToUse).isSame(dayjs(), 'day'); const isToday = dayjs(dateToUse).isSame(dayjs(), 'day');
@@ -456,10 +394,7 @@ export default function ExploreScreen() {
{/* 营养摄入雷达图卡片 */} {/* 营养摄入雷达图卡片 */}
<NutritionRadarCard <NutritionRadarCard
nutritionSummary={nutritionSummary} selectedDate={currentSelectedDate}
burnedCalories={activeCalories || 0}
basalMetabolism={0}
activeCalories={activeCalories || 0}
resetToken={animToken} resetToken={animToken}
/> />
@@ -470,7 +405,7 @@ export default function ExploreScreen() {
{/* 左列 */} {/* 左列 */}
<View style={styles.masonryColumn}> <View style={styles.masonryColumn}>
{/* 心情卡片 */} {/* 心情卡片 */}
<FloatingCard style={styles.masonryCard} delay={1500}> <FloatingCard style={styles.masonryCard}>
<MoodCard <MoodCard
moodCheckin={currentMoodCheckin} moodCheckin={currentMoodCheckin}
onPress={() => pushIfAuthedElseLogin('/mood/calendar')} onPress={() => pushIfAuthedElseLogin('/mood/calendar')}
@@ -488,7 +423,7 @@ export default function ExploreScreen() {
<FloatingCard style={styles.masonryCard} delay={0}> <FloatingCard style={styles.masonryCard}>
<StressMeter <StressMeter
curDate={currentSelectedDate} curDate={currentSelectedDate}
/> />
@@ -512,14 +447,14 @@ export default function ExploreScreen() {
{/* 右列 */} {/* 右列 */}
<View style={styles.masonryColumn}> <View style={styles.masonryColumn}>
<FloatingCard style={styles.masonryCard} delay={250}> <FloatingCard style={styles.masonryCard}>
<FitnessRingsCard <FitnessRingsCard
selectedDate={currentSelectedDate} selectedDate={currentSelectedDate}
resetToken={animToken} resetToken={animToken}
/> />
</FloatingCard> </FloatingCard>
{/* 饮水记录卡片 */} {/* 饮水记录卡片 */}
<FloatingCard style={styles.masonryCard} delay={500}> <FloatingCard style={styles.masonryCard}>
<WaterIntakeCard <WaterIntakeCard
selectedDate={currentSelectedDateString} selectedDate={currentSelectedDateString}
style={styles.waterCardOverride} style={styles.waterCardOverride}
@@ -528,7 +463,7 @@ export default function ExploreScreen() {
{/* 基础代谢卡片 */} {/* 基础代谢卡片 */}
<FloatingCard style={styles.masonryCard} delay={1250}> <FloatingCard style={styles.masonryCard}>
<BasalMetabolismCard <BasalMetabolismCard
selectedDate={currentSelectedDate} selectedDate={currentSelectedDate}
style={styles.basalMetabolismCardOverride} style={styles.basalMetabolismCardOverride}
@@ -536,7 +471,7 @@ export default function ExploreScreen() {
</FloatingCard> </FloatingCard>
{/* 血氧饱和度卡片 */} {/* 血氧饱和度卡片 */}
<FloatingCard style={styles.masonryCard} delay={1750}> <FloatingCard style={styles.masonryCard}>
<OxygenSaturationCard <OxygenSaturationCard
style={styles.basalMetabolismCardOverride} style={styles.basalMetabolismCardOverride}
/> />

View File

@@ -19,6 +19,7 @@ import {
selectNutritionSummaryByDate selectNutritionSummaryByDate
} from '@/store/nutritionSlice'; } from '@/store/nutritionSlice';
import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date'; import { getMonthDaysZh, getMonthTitleZh, getTodayIndexInMonth } from '@/utils/date';
import { fetchBasalEnergyBurned } from '@/utils/health';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect } from '@react-navigation/native'; import { useFocusEffect } from '@react-navigation/native';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -73,6 +74,9 @@ export default function NutritionRecordsScreen() {
const [hasMoreData, setHasMoreData] = useState(true); const [hasMoreData, setHasMoreData] = useState(true);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// 基础代谢数据状态
const [basalMetabolism, setBasalMetabolism] = useState<number>(1482);
// 食物添加弹窗状态 // 食物添加弹窗状态
const [showFoodOverlay, setShowFoodOverlay] = useState(false); const [showFoodOverlay, setShowFoodOverlay] = useState(false);
@@ -118,6 +122,7 @@ export default function NutritionRecordsScreen() {
// 当选中日期或视图模式变化时重新加载数据 // 当选中日期或视图模式变化时重新加载数据
useEffect(() => { useEffect(() => {
fetchBasalMetabolismData();
if (viewMode === 'daily') { if (viewMode === 'daily') {
dispatch(fetchDailyNutritionData(currentSelectedDate)); dispatch(fetchDailyNutritionData(currentSelectedDate));
} else { } else {
@@ -150,6 +155,22 @@ export default function NutritionRecordsScreen() {
} }
}, [viewMode, currentSelectedDateString, dispatch]); }, [viewMode, currentSelectedDateString, dispatch]);
// 获取基础代谢数据
const fetchBasalMetabolismData = useCallback(async () => {
try {
const options = {
startDate: dayjs(currentSelectedDate).startOf('day').toDate().toISOString(),
endDate: dayjs(currentSelectedDate).endOf('day').toDate().toISOString()
};
const basalEnergy = await fetchBasalEnergyBurned(options);
setBasalMetabolism(basalEnergy || 1482);
} catch (error) {
console.error('获取基础代谢数据失败:', error);
setBasalMetabolism(1482); // 失败时使用默认值
}
}, [currentSelectedDate]);
const onRefresh = useCallback(async () => { const onRefresh = useCallback(async () => {
try { try {
setRefreshing(true); setRefreshing(true);
@@ -409,7 +430,7 @@ export default function NutritionRecordsScreen() {
{/* Calorie Ring Chart */} {/* Calorie Ring Chart */}
<CalorieRingChart <CalorieRingChart
metabolism={healthData?.basalEnergyBurned || 1482} metabolism={basalMetabolism}
exercise={healthData?.activeEnergyBurned || 0} exercise={healthData?.activeEnergyBurned || 0}
consumed={nutritionSummary?.totalCalories || 0} consumed={nutritionSummary?.totalCalories || 0}
protein={nutritionSummary?.totalProtein || 0} protein={nutritionSummary?.totalProtein || 0}

View File

@@ -1,7 +1,12 @@
import { fetchHealthDataForDate } from '@/utils/health'; import { ROUTES } from '@/constants/Routes';
import { useAppSelector } from '@/hooks/redux';
import { selectUserAge, selectUserProfile } from '@/store/userSlice';
import { fetchBasalEnergyBurned } from '@/utils/health';
import dayjs from 'dayjs';
import { Image } from 'expo-image'; import { Image } from 'expo-image';
import { router } from 'expo-router';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native'; import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
interface BasalMetabolismCardProps { interface BasalMetabolismCardProps {
selectedDate?: Date; selectedDate?: Date;
@@ -11,6 +16,45 @@ interface BasalMetabolismCardProps {
export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCardProps) { export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCardProps) {
const [basalMetabolism, setBasalMetabolism] = useState<number | null>(null); const [basalMetabolism, setBasalMetabolism] = useState<number | null>(null);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
// 获取用户基本信息
const userProfile = useAppSelector(selectUserProfile);
const userAge = useAppSelector(selectUserAge);
// 计算基础代谢率范围
const calculateBMRRange = () => {
const { gender, weight, height } = userProfile;
// 检查是否有足够的信息来计算BMR
if (!gender || !weight || !height || !userAge) {
return null;
}
// 将体重和身高转换为数字
const weightNum = parseFloat(weight);
const heightNum = parseFloat(height);
if (isNaN(weightNum) || isNaN(heightNum) || weightNum <= 0 || heightNum <= 0 || userAge <= 0) {
return null;
}
// 使用Mifflin-St Jeor公式计算BMR
let bmr: number;
if (gender === 'male') {
bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge + 5;
} else {
bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge - 161;
}
// 计算正常范围±15%
const minBMR = Math.round(bmr * 0.85);
const maxBMR = Math.round(bmr * 1.15);
return { min: minBMR, max: maxBMR, base: Math.round(bmr) };
};
const bmrRange = calculateBMRRange();
// 获取基础代谢数据 // 获取基础代谢数据
useEffect(() => { useEffect(() => {
@@ -19,8 +63,12 @@ export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCard
try { try {
setLoading(true); setLoading(true);
const data = await fetchHealthDataForDate(selectedDate); const options = {
setBasalMetabolism(data?.basalEnergyBurned || null); startDate: dayjs(selectedDate).startOf('day').toDate().toISOString(),
endDate: dayjs(selectedDate).endOf('day').toDate().toISOString()
};
const basalEnergy = await fetchBasalEnergyBurned(options);
setBasalMetabolism(basalEnergy || null);
} catch (error) { } catch (error) {
console.error('BasalMetabolismCard: 获取基础代谢数据失败:', error); console.error('BasalMetabolismCard: 获取基础代谢数据失败:', error);
setBasalMetabolism(null); setBasalMetabolism(null);
@@ -52,30 +100,115 @@ export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCard
const status = getMetabolismStatus(); const status = getMetabolismStatus();
return ( return (
<View style={[styles.container, style]}> <>
<TouchableOpacity
{/* 头部区域 */} style={[styles.container, style]}
<View style={styles.header}> onPress={() => setModalVisible(true)}
<View style={styles.leftSection}> activeOpacity={0.8}
<Image >
source={require('@/assets/images/icons/icon-fire.png')} {/* 头部区域 */}
style={styles.titleIcon} <View style={styles.header}>
/> <View style={styles.leftSection}>
<Text style={styles.title}></Text> <Image
source={require('@/assets/images/icons/icon-fire.png')}
style={styles.titleIcon}
/>
<Text style={styles.title}></Text>
</View>
<View style={[styles.statusBadge, { backgroundColor: status.color + '20' }]}>
<Text style={[styles.statusText, { color: status.color }]}>{status.text}</Text>
</View>
</View> </View>
<View style={[styles.statusBadge, { backgroundColor: status.color + '20' }]}>
<Text style={[styles.statusText, { color: status.color }]}>{status.text}</Text>
</View>
</View>
{/* 数值显示区域 */} {/* 数值显示区域 */}
<View style={styles.valueSection}> <View style={styles.valueSection}>
<Text style={styles.value}> <Text style={styles.value}>
{loading ? '加载中...' : (basalMetabolism != null && basalMetabolism > 0 ? Math.round(basalMetabolism).toString() : '--')} {loading ? '加载中...' : (basalMetabolism != null && basalMetabolism > 0 ? Math.round(basalMetabolism).toString() : '--')}
</Text> </Text>
<Text style={styles.unit}>/</Text> <Text style={styles.unit}>/</Text>
</View> </View>
</View> </TouchableOpacity>
{/* 基础代谢详情弹窗 */}
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={() => setModalVisible(false)}
>
<View style={styles.modalOverlay}>
<View style={styles.modalContent}>
{/* 关闭按钮 */}
<TouchableOpacity
style={styles.closeButton}
onPress={() => setModalVisible(false)}
>
<Text style={styles.closeButtonText}>×</Text>
</TouchableOpacity>
{/* 标题 */}
<Text style={styles.modalTitle}></Text>
{/* 基础代谢定义 */}
<Text style={styles.modalDescription}>
BMR
</Text>
{/* 为什么重要 */}
<Text style={styles.sectionTitle}></Text>
<Text style={styles.sectionContent}>
60-75%
</Text>
{/* 正常范围 */}
<Text style={styles.sectionTitle}></Text>
<Text style={styles.formulaText}>
- BMR = 10 × (kg) + 6.25 × (cm) - 5 × + 5
</Text>
<Text style={styles.formulaText}>
- BMR = 10 × (kg) + 6.25 × (cm) - 5 × - 161
</Text>
{bmrRange ? (
<>
<Text style={styles.rangeText}>{bmrRange.min}-{bmrRange.max}/</Text>
<Text style={styles.rangeNote}>
(15%)
</Text>
<Text style={styles.userInfoText}>
{userProfile.gender === 'male' ? '男性' : '女性'}{userAge}{userProfile.height}cm{userProfile.weight}kg
</Text>
</>
) : (
<>
<Text style={styles.rangeText}></Text>
<TouchableOpacity
style={styles.completeInfoButton}
onPress={() => {
setModalVisible(false);
router.push(ROUTES.PROFILE_EDIT);
}}
>
<Text style={styles.completeInfoButtonText}></Text>
</TouchableOpacity>
</>
)}
{/* 提高代谢率的策略 */}
<Text style={styles.sectionTitle}></Text>
<Text style={styles.strategyText}></Text>
<View style={styles.strategyList}>
<Text style={styles.strategyItem}>1. (2-3)</Text>
<Text style={styles.strategyItem}>2. (HIIT)</Text>
<Text style={styles.strategyItem}>3. (1.6-2.2g)</Text>
<Text style={styles.strategyItem}>4. (7-9/)</Text>
<Text style={styles.strategyItem}>5. (BMR的80%)</Text>
</View>
</View>
</View>
</Modal>
</>
); );
} }
@@ -168,4 +301,128 @@ const styles = StyleSheet.create({
color: '#64748B', color: '#64748B',
marginLeft: 6, marginLeft: 6,
}, },
// Modal styles
modalOverlay: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
justifyContent: 'flex-end',
},
modalContent: {
backgroundColor: '#FFFFFF',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 24,
maxHeight: '90%',
width: '100%',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: -5,
},
shadowOpacity: 0.25,
shadowRadius: 20,
elevation: 10,
},
closeButton: {
position: 'absolute',
top: 16,
right: 16,
width: 32,
height: 32,
borderRadius: 16,
backgroundColor: '#F1F5F9',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1,
},
closeButtonText: {
fontSize: 20,
color: '#64748B',
fontWeight: '600',
},
modalTitle: {
fontSize: 24,
fontWeight: '700',
color: '#0F172A',
marginBottom: 16,
textAlign: 'center',
},
modalDescription: {
fontSize: 15,
color: '#475569',
lineHeight: 22,
marginBottom: 24,
},
sectionTitle: {
fontSize: 18,
fontWeight: '700',
color: '#0F172A',
marginBottom: 12,
marginTop: 8,
},
sectionContent: {
fontSize: 15,
color: '#475569',
lineHeight: 22,
marginBottom: 20,
},
formulaText: {
fontSize: 14,
color: '#64748B',
fontFamily: 'monospace',
marginBottom: 4,
paddingLeft: 8,
},
rangeText: {
fontSize: 16,
fontWeight: '600',
color: '#059669',
marginTop: 12,
marginBottom: 4,
textAlign: 'center',
},
rangeNote: {
fontSize: 12,
color: '#9CA3AF',
textAlign: 'center',
marginBottom: 20,
},
userInfoText: {
fontSize: 13,
color: '#6B7280',
textAlign: 'center',
marginTop: 8,
marginBottom: 16,
fontStyle: 'italic',
},
strategyText: {
fontSize: 15,
color: '#475569',
marginBottom: 12,
},
strategyList: {
marginBottom: 20,
},
strategyItem: {
fontSize: 14,
color: '#64748B',
lineHeight: 20,
marginBottom: 8,
paddingLeft: 8,
},
completeInfoButton: {
backgroundColor: '#7a5af8',
borderRadius: 12,
paddingVertical: 12,
paddingHorizontal: 24,
marginTop: 16,
alignItems: 'center',
alignSelf: 'center',
},
completeInfoButtonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '600',
},
}); });

View File

@@ -1,7 +1,8 @@
import { AnimatedNumber } from '@/components/AnimatedNumber'; import { AnimatedNumber } from '@/components/AnimatedNumber';
import { ROUTES } from '@/constants/Routes'; import { ROUTES } from '@/constants/Routes';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useAuthGuard } from '@/hooks/useAuthGuard'; import { useAuthGuard } from '@/hooks/useAuthGuard';
import { NutritionSummary } from '@/services/dietRecords'; import { fetchCompleteNutritionCardData, selectNutritionCardDataByDate } from '@/store/nutritionSlice';
import { triggerLightHaptic } from '@/utils/haptics'; import { triggerLightHaptic } from '@/utils/haptics';
import { calculateRemainingCalories } from '@/utils/nutrition'; import { calculateRemainingCalories } from '@/utils/nutrition';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -14,14 +15,8 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
export type NutritionRadarCardProps = { export type NutritionRadarCardProps = {
nutritionSummary: NutritionSummary | null; selectedDate?: Date;
/** 基础代谢消耗的卡路里 */ style?: object;
burnedCalories?: number;
/** 基础代谢率 */
basalMetabolism?: number;
/** 运动消耗卡路里 */
activeCalories?: number;
/** 动画重置令牌 */ /** 动画重置令牌 */
resetToken?: number; resetToken?: number;
}; };
@@ -93,15 +88,40 @@ const SimpleRingProgress = ({
}; };
export function NutritionRadarCard({ export function NutritionRadarCard({
nutritionSummary, selectedDate,
burnedCalories = 1618, style,
basalMetabolism,
activeCalories,
resetToken, resetToken,
}: NutritionRadarCardProps) { }: NutritionRadarCardProps) {
const [currentMealType] = useState<'breakfast' | 'lunch' | 'dinner' | 'snack'>('breakfast'); const [currentMealType] = useState<'breakfast' | 'lunch' | 'dinner' | 'snack'>('breakfast');
const [loading, setLoading] = useState(false);
const { pushIfAuthedElseLogin } = useAuthGuard() const { pushIfAuthedElseLogin } = useAuthGuard();
const dispatch = useAppDispatch();
const dateKey = useMemo(() => {
return selectedDate ? dayjs(selectedDate).format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD');
}, [selectedDate]);
const cardData = useAppSelector(selectNutritionCardDataByDate(dateKey));
const { nutritionSummary, healthData, basalMetabolism } = cardData;
// 获取营养和健康数据
useEffect(() => {
const loadNutritionCardData = async () => {
const targetDate = selectedDate || new Date();
try {
setLoading(true);
await dispatch(fetchCompleteNutritionCardData(targetDate)).unwrap();
} catch (error) {
console.error('NutritionRadarCard: 获取营养卡片数据失败:', error);
} finally {
setLoading(false);
}
};
loadNutritionCardData();
}, [selectedDate, dispatch]);
const nutritionStats = useMemo(() => { const nutritionStats = useMemo(() => {
return [ return [
@@ -117,9 +137,9 @@ export function NutritionRadarCard({
// 计算还能吃的卡路里 // 计算还能吃的卡路里
const consumedCalories = nutritionSummary?.totalCalories || 0; const consumedCalories = nutritionSummary?.totalCalories || 0;
// 使用分离的代谢和运动数据如果没有提供则从burnedCalories推算 // 使用从HealthKit获取的数据如果没有则使用默认值
const effectiveBasalMetabolism = basalMetabolism ?? (burnedCalories * 0.7); // 假设70%是基础代谢 const effectiveBasalMetabolism = basalMetabolism || 0; // 基础代谢默认值
const effectiveActiveCalories = activeCalories ?? (burnedCalories * 0.3); // 假设30%是运动消耗 const effectiveActiveCalories = healthData?.activeCalories || 0; // 运动消耗卡路里
const remainingCalories = calculateRemainingCalories({ const remainingCalories = calculateRemainingCalories({
basalMetabolism: effectiveBasalMetabolism, basalMetabolism: effectiveBasalMetabolism,
@@ -134,7 +154,7 @@ export function NutritionRadarCard({
return ( return (
<TouchableOpacity style={styles.card} onPress={handleNavigateToRecords} activeOpacity={0.8}> <TouchableOpacity style={[styles.card, style]} onPress={handleNavigateToRecords} activeOpacity={0.8}>
<View style={styles.cardHeader}> <View style={styles.cardHeader}>
<View style={styles.titleContainer}> <View style={styles.titleContainer}>
<Image <Image
@@ -143,14 +163,16 @@ export function NutritionRadarCard({
/> />
<Text style={styles.cardTitle}></Text> <Text style={styles.cardTitle}></Text>
</View> </View>
<Text style={styles.cardSubtitle}>: {dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}</Text> <Text style={styles.cardSubtitle}>
{loading ? '加载中...' : `更新: ${dayjs(nutritionSummary?.updatedAt).format('MM-DD HH:mm')}`}
</Text>
</View> </View>
<View style={styles.contentContainer}> <View style={styles.contentContainer}>
<View style={styles.radarContainer}> <View style={styles.radarContainer}>
<SimpleRingProgress <SimpleRingProgress
remainingCalories={remainingCalories} remainingCalories={loading ? 0 : remainingCalories}
totalAvailable={effectiveBasalMetabolism + effectiveActiveCalories} totalAvailable={loading ? 0 : effectiveBasalMetabolism + effectiveActiveCalories}
/> />
</View> </View>
@@ -173,10 +195,10 @@ export function NutritionRadarCard({
<Text style={styles.calorieSubtitle}></Text> <Text style={styles.calorieSubtitle}></Text>
<View style={styles.remainingCaloriesContainer}> <View style={styles.remainingCaloriesContainer}>
<AnimatedNumber <AnimatedNumber
value={remainingCalories} value={loading ? 0 : remainingCalories}
resetToken={resetToken} resetToken={resetToken}
style={styles.mainValue} style={styles.mainValue}
format={(v) => Math.round(v).toString()} format={(v) => loading ? '--' : Math.round(v).toString()}
/> />
<Text style={styles.calorieUnit}></Text> <Text style={styles.calorieUnit}></Text>
</View> </View>
@@ -185,30 +207,30 @@ export function NutritionRadarCard({
<Text style={styles.calculationLabel}></Text> <Text style={styles.calculationLabel}></Text>
</View> </View>
<AnimatedNumber <AnimatedNumber
value={effectiveBasalMetabolism} value={loading ? 0 : effectiveBasalMetabolism}
resetToken={resetToken} resetToken={resetToken}
style={styles.calculationValue} style={styles.calculationValue}
format={(v) => Math.round(v).toString()} format={(v) => loading ? '--' : Math.round(v).toString()}
/> />
<Text style={styles.calculationText}> + </Text> <Text style={styles.calculationText}> + </Text>
<View style={styles.calculationItem}> <View style={styles.calculationItem}>
<Text style={styles.calculationLabel}></Text> <Text style={styles.calculationLabel}></Text>
</View> </View>
<AnimatedNumber <AnimatedNumber
value={effectiveActiveCalories} value={loading ? 0 : effectiveActiveCalories}
resetToken={resetToken} resetToken={resetToken}
style={styles.calculationValue} style={styles.calculationValue}
format={(v) => Math.round(v).toString()} format={(v) => loading ? '--' : Math.round(v).toString()}
/> />
<Text style={styles.calculationText}> - </Text> <Text style={styles.calculationText}> - </Text>
<View style={styles.calculationItem}> <View style={styles.calculationItem}>
<Text style={styles.calculationLabel}></Text> <Text style={styles.calculationLabel}></Text>
</View> </View>
<AnimatedNumber <AnimatedNumber
value={consumedCalories} value={loading ? 0 : consumedCalories}
resetToken={resetToken} resetToken={resetToken}
style={styles.calculationValue} style={styles.calculationValue}
format={(v) => Math.round(v).toString()} format={(v) => loading ? '--' : Math.round(v).toString()}
/> />
</View> </View>

View File

@@ -1,11 +1,12 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { import {
Animated, Animated,
StyleSheet, StyleSheet,
Text, Text,
TouchableOpacity, TouchableOpacity,
View, View,
ViewStyle ViewStyle,
InteractionManager
} from 'react-native'; } from 'react-native';
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health'; import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
@@ -33,21 +34,28 @@ const StepsCard: React.FC<StepsCardProps> = ({
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([]) const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
const getStepData = async (date: Date) => { const getStepData = useCallback(async (date: Date) => {
try { try {
logger.info('获取步数数据...'); logger.info('获取步数数据...');
const [steps, hourly] = await Promise.all([
fetchStepCount(date),
fetchHourlyStepSamples(date)
])
setStepCount(steps) // 先获取步数立即更新UI
setHourSteps(hourly) const steps = await fetchStepCount(date);
setStepCount(steps);
// 使用 InteractionManager 在空闲时获取更复杂的小时数据
InteractionManager.runAfterInteractions(async () => {
try {
const hourly = await fetchHourlyStepSamples(date);
setHourSteps(hourly);
} catch (error) {
logger.error('获取小时步数数据失败:', error);
}
});
} catch (error) { } catch (error) {
logger.error('获取步数数据失败:', error); logger.error('获取步数数据失败:', error);
} }
} }, []);
useEffect(() => { useEffect(() => {
if (curDate) { if (curDate) {
@@ -55,55 +63,60 @@ const StepsCard: React.FC<StepsCardProps> = ({
} }
}, [curDate]); }, [curDate]);
// 为每个柱体创建独立的动画 // 优化:减少动画值数量,只为有数据的小时创建动画
const animatedValues = useRef( const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
Array.from({ length: 24 }, () => new Animated.Value(0))
).current;
// 计算柱状图数据 // 优化:简化柱状图数据计算,减少计算量
const chartData = useMemo(() => { const chartData = useMemo(() => {
if (!hourlySteps || hourlySteps.length === 0) { if (!hourlySteps || hourlySteps.length === 0) {
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 })); return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
} }
// 找到最大步数用于计算高度比例 // 优化:只计算有数据的小时的最大步数
const maxSteps = Math.max(...hourlySteps.map(data => data.steps), 1); const activeSteps = hourlySteps.filter(data => data.steps > 0);
const maxHeight = 20; // 柱状图最大高度(缩小一半) if (activeSteps.length === 0) {
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
}
const maxSteps = Math.max(...activeSteps.map(data => data.steps));
const maxHeight = 20;
return hourlySteps.map(data => ({ return hourlySteps.map(data => ({
...data, ...data,
height: maxSteps > 0 ? (data.steps / maxSteps) * maxHeight : 0 height: data.steps > 0 ? (data.steps / maxSteps) * maxHeight : 0
})); }));
}, [hourlySteps]); }, [hourlySteps]);
// 获取当前小时 // 获取当前小时
const currentHour = new Date().getHours(); const currentHour = new Date().getHours();
// 触发柱体动画 // 优化延迟执行动画减少UI阻塞
useEffect(() => { useEffect(() => {
// 检查是否有实际数据(不只是空数组)
const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0); const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
if (hasData) { if (hasData) {
// 重置所有动画值 // 使用 InteractionManager 确保动画不会阻塞用户交互
animatedValues.forEach(animValue => animValue.setValue(0)); InteractionManager.runAfterInteractions(() => {
// 只为有数据的小时创建和执行动画
// 使用 setTimeout 确保在下一个事件循环中执行动画,保证组件已完全渲染
const timeoutId = setTimeout(() => {
// 同时启动所有柱体的弹性动画,有步数的柱体才执行动画
chartData.forEach((data, index) => { chartData.forEach((data, index) => {
if (data.steps > 0) { if (data.steps > 0) {
Animated.spring(animatedValues[index], { // 懒创建动画值
if (!animatedValues.has(index)) {
animatedValues.set(index, new Animated.Value(0));
}
const animValue = animatedValues.get(index)!;
animValue.setValue(0);
// 使用更高性能的timing动画替代spring
Animated.timing(animValue, {
toValue: 1, toValue: 1,
tension: 150, duration: 300,
friction: 8,
useNativeDriver: false, useNativeDriver: false,
}).start(); }).start();
} }
}); });
}, 50); // 添加小延迟确保渲染完成 });
return () => clearTimeout(timeoutId);
} }
}, [chartData, animatedValues]); }, [chartData, animatedValues]);
@@ -127,17 +140,22 @@ const StepsCard: React.FC<StepsCardProps> = ({
const isActive = data.steps > 0; const isActive = data.steps > 0;
const isCurrent = index <= currentHour; const isCurrent = index <= currentHour;
// 动画变换缩放从0到实际高度 // 优化:只为有数据的柱体创建动画插值
const animatedScale = animatedValues[index].interpolate({ const animValue = animatedValues.get(index);
inputRange: [0, 1], let animatedScale: Animated.AnimatedInterpolation<number> | undefined;
outputRange: [0, 1], let animatedOpacity: Animated.AnimatedInterpolation<number> | undefined;
});
// 动画变换透明度从0到1 if (animValue && isActive) {
const animatedOpacity = animatedValues[index].interpolate({ animatedScale = animValue.interpolate({
inputRange: [0, 1], inputRange: [0, 1],
outputRange: [0, 1], outputRange: [0, 1],
}); });
animatedOpacity = animValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
});
}
return ( return (
<View key={`bar-container-${index}`} style={styles.barContainer}> <View key={`bar-container-${index}`} style={styles.barContainer}>
@@ -160,8 +178,8 @@ const StepsCard: React.FC<StepsCardProps> = ({
{ {
height: data.height, height: data.height,
backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB', backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
transform: [{ scaleY: animatedScale }], transform: animatedScale ? [{ scaleY: animatedScale }] : undefined,
opacity: animatedOpacity, opacity: animatedOpacity || 1,
} }
]} ]}
/> />

View File

@@ -0,0 +1,323 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
Animated,
StyleSheet,
Text,
TouchableOpacity,
View,
ViewStyle,
InteractionManager
} from 'react-native';
import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
import { logger } from '@/utils/logger';
import dayjs from 'dayjs';
import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import { AnimatedNumber } from './AnimatedNumber';
interface StepsCardProps {
curDate: Date
stepGoal: number;
style?: ViewStyle;
}
const StepsCardOptimized: React.FC<StepsCardProps> = ({
curDate,
style,
}) => {
const router = useRouter();
const [stepCount, setStepCount] = useState(0)
const [hourlySteps, setHourSteps] = useState<HourlyStepData[]>([])
const [isLoading, setIsLoading] = useState(false)
// 优化使用debounce减少频繁的数据获取
const debounceTimer = useRef<NodeJS.Timeout | null>(null);
const getStepData = useCallback(async (date: Date) => {
try {
setIsLoading(true);
logger.info('获取步数数据...');
// 先获取步数立即更新UI
const steps = await fetchStepCount(date);
setStepCount(steps);
// 清除之前的定时器
if (debounceTimer.current) {
clearTimeout(debounceTimer.current);
}
// 使用 InteractionManager 在空闲时获取更复杂的小时数据
InteractionManager.runAfterInteractions(async () => {
try {
const hourly = await fetchHourlyStepSamples(date);
setHourSteps(hourly);
} catch (error) {
logger.error('获取小时步数数据失败:', error);
} finally {
setIsLoading(false);
}
});
} catch (error) {
logger.error('获取步数数据失败:', error);
setIsLoading(false);
}
}, []);
useEffect(() => {
if (curDate) {
getStepData(curDate);
}
}, [curDate, getStepData]);
// 优化:减少动画值数量,只为有数据的小时创建动画
const animatedValues = useRef<Map<number, Animated.Value>>(new Map()).current;
// 优化:简化柱状图数据计算,减少计算量
const chartData = useMemo(() => {
if (!hourlySteps || hourlySteps.length === 0) {
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
}
// 优化:只计算有数据的小时的最大步数
const activeSteps = hourlySteps.filter(data => data.steps > 0);
if (activeSteps.length === 0) {
return Array.from({ length: 24 }, (_, i) => ({ hour: i, steps: 0, height: 0 }));
}
const maxSteps = Math.max(...activeSteps.map(data => data.steps));
const maxHeight = 20;
return hourlySteps.map(data => ({
...data,
height: data.steps > 0 ? (data.steps / maxSteps) * maxHeight : 0
}));
}, [hourlySteps]);
// 获取当前小时
const currentHour = new Date().getHours();
// 优化延迟执行动画减少UI阻塞
useEffect(() => {
const hasData = chartData && chartData.length > 0 && chartData.some(data => data.steps > 0);
if (hasData && !isLoading) {
// 使用 InteractionManager 确保动画不会阻塞用户交互
InteractionManager.runAfterInteractions(() => {
// 只为有数据的小时创建和执行动画
const animations = chartData
.map((data, index) => {
if (data.steps > 0) {
// 懒创建动画值
if (!animatedValues.has(index)) {
animatedValues.set(index, new Animated.Value(0));
}
const animValue = animatedValues.get(index)!;
animValue.setValue(0);
// 使用更高性能的timing动画替代spring
return Animated.timing(animValue, {
toValue: 1,
duration: 200, // 减少动画时长
useNativeDriver: false,
});
}
return null;
})
.filter(Boolean) as Animated.CompositeAnimation[];
// 批量执行动画,提高性能
if (animations.length > 0) {
Animated.stagger(50, animations).start();
}
});
}
}, [chartData, animatedValues, isLoading]);
// 优化使用React.memo包装复杂的渲染组件
const ChartBars = useMemo(() => {
return chartData.map((data, index) => {
// 判断是否是当前小时或者有活动的小时
const isActive = data.steps > 0;
const isCurrent = index <= currentHour;
// 优化:只为有数据的柱体创建动画插值
const animValue = animatedValues.get(index);
let animatedScale: Animated.AnimatedInterpolation<number> | undefined;
let animatedOpacity: Animated.AnimatedInterpolation<number> | undefined;
if (animValue && isActive) {
animatedScale = animValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
});
animatedOpacity = animValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
});
}
return (
<View key={`bar-container-${index}`} style={styles.barContainer}>
{/* 背景柱体 - 始终显示,使用相似色系的淡色 */}
<View
style={[
styles.chartBar,
{
height: 20, // 背景柱体占满整个高度
backgroundColor: isCurrent ? '#FFF4E6' : '#FFF8F0', // 更淡的相似色系
}
]}
/>
{/* 数据柱体 - 只有当有数据时才显示并执行动画 */}
{isActive && (
<Animated.View
style={[
styles.chartBar,
{
height: data.height,
backgroundColor: isCurrent ? '#FFC365' : '#FFEBCB',
transform: animatedScale ? [{ scaleY: animatedScale }] : undefined,
opacity: animatedOpacity || 1,
}
]}
/>
)}
</View>
);
});
}, [chartData, currentHour, animatedValues]);
const CardContent = () => (
<>
{/* 标题和步数显示 */}
<View style={styles.header}>
<Image
source={require('@/assets/images/icons/icon-step.png')}
style={styles.titleIcon}
/>
<Text style={styles.title}></Text>
{isLoading && <Text style={styles.loadingText}>...</Text>}
</View>
{/* 柱状图 */}
<View style={styles.chartContainer}>
<View style={styles.chartWrapper}>
<View style={styles.chartArea}>
{ChartBars}
</View>
</View>
</View>
{/* 步数和目标显示 */}
<View style={styles.statsContainer}>
<AnimatedNumber
value={stepCount || 0}
style={styles.stepCount}
format={(v) => stepCount !== null ? `${Math.round(v)}` : '——'}
resetToken={stepCount}
/>
</View>
</>
);
return (
<TouchableOpacity
style={[styles.container, style]}
onPress={() => {
// 传递当前日期参数到详情页
const dateParam = dayjs(curDate).format('YYYY-MM-DD');
router.push(`/steps/detail?date=${dateParam}`);
}}
activeOpacity={0.8}
>
<CardContent />
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
borderRadius: 20,
padding: 16,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.08,
shadowRadius: 20,
elevation: 8,
},
header: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
titleIcon: {
width: 16,
height: 16,
marginRight: 6,
resizeMode: 'contain',
},
title: {
fontSize: 14,
color: '#192126',
fontWeight: '600'
},
loadingText: {
fontSize: 10,
color: '#666',
marginLeft: 8,
},
chartContainer: {
flex: 1,
justifyContent: 'center',
marginTop: 6
},
chartWrapper: {
width: '100%',
alignItems: 'center',
},
chartArea: {
flexDirection: 'row',
alignItems: 'flex-end',
height: 20,
width: '100%',
maxWidth: 240,
justifyContent: 'space-between',
paddingHorizontal: 4,
},
barContainer: {
width: 4,
height: 20,
alignItems: 'center',
justifyContent: 'flex-end',
position: 'relative',
},
chartBar: {
width: 4,
borderRadius: 1,
position: 'absolute',
bottom: 0,
},
statsContainer: {
alignItems: 'flex-start',
marginTop: 6
},
stepCount: {
fontSize: 18,
fontWeight: '600',
color: '#192126',
},
});
export default StepsCardOptimized;

View File

@@ -139,7 +139,7 @@ const WaterIntakeCard: React.FC<WaterIntakeCardProps> = ({
// 使用用户配置的快速添加饮水量 // 使用用户配置的快速添加饮水量
const waterAmount = quickWaterAmount; const waterAmount = quickWaterAmount;
// 如果有选中日期,则为该日期添加记录;否则为今天添加记录 // 如果有选中日期,则为该日期添加记录;否则为今天添加记录
const recordedAt = selectedDate ? dayjs(selectedDate).toISOString() : dayjs().toISOString(); const recordedAt = dayjs().toISOString()
await addWaterRecord(waterAmount, recordedAt); await addWaterRecord(waterAmount, recordedAt);
}; };

View File

@@ -68,4 +68,13 @@ RCT_EXTERN_METHOD(getHourlyStandHours:(NSDictionary *)options
resolver:(RCTPromiseResolveBlock)resolver resolver:(RCTPromiseResolveBlock)resolver
rejecter:(RCTPromiseRejectBlock)rejecter) rejecter:(RCTPromiseRejectBlock)rejecter)
// Water Intake Methods
RCT_EXTERN_METHOD(saveWaterIntakeToHealthKit:(NSDictionary *)options
resolver:(RCTPromiseResolveBlock)resolver
rejecter:(RCTPromiseRejectBlock)rejecter)
RCT_EXTERN_METHOD(getWaterIntakeFromHealthKit:(NSDictionary *)options
resolver:(RCTPromiseResolveBlock)resolver
rejecter:(RCTPromiseRejectBlock)rejecter)
@end @end

View File

@@ -36,18 +36,20 @@ class HealthKitManager: NSObject, RCTBridgeModule {
static let appleStandTime = HKObjectType.categoryType(forIdentifier: .appleStandHour)! static let appleStandTime = HKObjectType.categoryType(forIdentifier: .appleStandHour)!
static let oxygenSaturation = HKObjectType.quantityType(forIdentifier: .oxygenSaturation)! static let oxygenSaturation = HKObjectType.quantityType(forIdentifier: .oxygenSaturation)!
static let activitySummary = HKObjectType.activitySummaryType() static let activitySummary = HKObjectType.activitySummaryType()
static let dietaryWater = HKObjectType.quantityType(forIdentifier: .dietaryWater)!
static var all: Set<HKObjectType> { static var all: Set<HKObjectType> {
return [sleep, stepCount, heartRate, heartRateVariability, activeEnergyBurned, basalEnergyBurned, appleExerciseTime, appleStandTime, oxygenSaturation, activitySummary] return [sleep, stepCount, heartRate, heartRateVariability, activeEnergyBurned, basalEnergyBurned, appleExerciseTime, appleStandTime, oxygenSaturation, activitySummary, dietaryWater]
} }
} }
/// For writing (if needed) /// For writing (if needed)
private struct WriteTypes { private struct WriteTypes {
static let bodyMass = HKObjectType.quantityType(forIdentifier: .bodyMass)! static let bodyMass = HKObjectType.quantityType(forIdentifier: .bodyMass)!
static let dietaryWater = HKObjectType.quantityType(forIdentifier: .dietaryWater)!
static var all: Set<HKSampleType> { static var all: Set<HKSampleType> {
return [bodyMass] return [bodyMass, dietaryWater]
} }
} }
@@ -1333,4 +1335,150 @@ class HealthKitManager: NSObject, RCTBridgeModule {
healthStore.execute(query) healthStore.execute(query)
} }
// MARK: - Water Intake Methods
@objc
func saveWaterIntakeToHealthKit(
_ options: NSDictionary,
resolver: @escaping RCTPromiseResolveBlock,
rejecter: @escaping RCTPromiseRejectBlock
) {
guard HKHealthStore.isHealthDataAvailable() else {
rejecter("HEALTHKIT_NOT_AVAILABLE", "HealthKit is not available on this device", nil)
return
}
// Parse parameters
guard let amount = options["amount"] as? Double else {
rejecter("INVALID_PARAMETERS", "Amount is required", nil)
return
}
let recordedAt: Date
if let recordedAtString = options["recordedAt"] as? String,
let date = parseDate(from: recordedAtString) {
recordedAt = date
} else {
recordedAt = Date()
}
let waterType = WriteTypes.dietaryWater
// Create quantity sample
let quantity = HKQuantity(unit: HKUnit.literUnit(with: .milli), doubleValue: amount)
let sample = HKQuantitySample(
type: waterType,
quantity: quantity,
start: recordedAt,
end: recordedAt,
metadata: nil
)
// Save to HealthKit
healthStore.save(sample) { [weak self] (success, error) in
DispatchQueue.main.async {
if let error = error {
rejecter("SAVE_ERROR", "Failed to save water intake: \(error.localizedDescription)", error)
return
}
if success {
let result: [String: Any] = [
"success": true,
"amount": amount,
"recordedAt": self?.dateToISOString(recordedAt) ?? ""
]
resolver(result)
} else {
rejecter("SAVE_FAILED", "Failed to save water intake", nil)
}
}
}
}
@objc
func getWaterIntakeFromHealthKit(
_ options: NSDictionary,
resolver: @escaping RCTPromiseResolveBlock,
rejecter: @escaping RCTPromiseRejectBlock
) {
guard HKHealthStore.isHealthDataAvailable() else {
rejecter("HEALTHKIT_NOT_AVAILABLE", "HealthKit is not available on this device", nil)
return
}
let waterType = HKObjectType.quantityType(forIdentifier: .dietaryWater)!
// Parse date range
let startDate: Date
if let startString = options["startDate"] as? String, let d = parseDate(from: startString) {
startDate = d
} else {
startDate = Calendar.current.startOfDay(for: Date())
}
let endDate: Date
if let endString = options["endDate"] as? String, let d = parseDate(from: endString) {
endDate = d
} else {
endDate = Date()
}
let limit = options["limit"] as? Int ?? HKObjectQueryNoLimit
let predicate = HKQuery.predicateForSamples(withStart: startDate, end: endDate, options: .strictStartDate)
let sortDescriptor = NSSortDescriptor(key: HKSampleSortIdentifierEndDate, ascending: false)
let query = HKSampleQuery(sampleType: waterType,
predicate: predicate,
limit: limit,
sortDescriptors: [sortDescriptor]) { [weak self] (query, samples, error) in
DispatchQueue.main.async {
if let error = error {
rejecter("QUERY_ERROR", "Failed to query water intake: \(error.localizedDescription)", error)
return
}
guard let waterSamples = samples as? [HKQuantitySample] else {
resolver([
"data": [],
"totalAmount": 0,
"count": 0,
"startDate": self?.dateToISOString(startDate) ?? "",
"endDate": self?.dateToISOString(endDate) ?? ""
])
return
}
let waterData = waterSamples.map { sample in
[
"id": sample.uuid.uuidString,
"startDate": self?.dateToISOString(sample.startDate) ?? "",
"endDate": self?.dateToISOString(sample.endDate) ?? "",
"value": sample.quantity.doubleValue(for: HKUnit.literUnit(with: .milli)),
"source": [
"name": sample.sourceRevision.source.name,
"bundleIdentifier": sample.sourceRevision.source.bundleIdentifier
],
"metadata": sample.metadata ?? [:]
] as [String : Any]
}
let totalAmount = waterSamples.reduce(0.0) { total, sample in
return total + sample.quantity.doubleValue(for: HKUnit.literUnit(with: .milli))
}
let result: [String: Any] = [
"data": waterData,
"totalAmount": totalAmount,
"count": waterData.count,
"startDate": self?.dateToISOString(startDate) ?? "",
"endDate": self?.dateToISOString(endDate) ?? ""
]
resolver(result)
}
}
healthStore.execute(query)
}
} // end class } // end class

View File

@@ -1,4 +1,5 @@
import { calculateNutritionSummary, deleteDietRecord, DietRecord, getDietRecords, NutritionSummary } from '@/services/dietRecords'; import { calculateNutritionSummary, deleteDietRecord, DietRecord, getDietRecords, NutritionSummary } from '@/services/dietRecords';
import { fetchBasalEnergyBurned, fetchHealthDataForDate, TodayHealthData } from '@/utils/health';
import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit'; import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
@@ -10,10 +11,18 @@ export interface NutritionState {
// 按日期存储的营养摘要 // 按日期存储的营养摘要
summaryByDate: Record<string, NutritionSummary>; summaryByDate: Record<string, NutritionSummary>;
// 按日期存储的健康数据(基础代谢、运动消耗等)
healthDataByDate: Record<string, TodayHealthData>;
// 按日期存储的基础代谢数据
basalMetabolismByDate: Record<string, number>;
// 加载状态 // 加载状态
loading: { loading: {
records: boolean; records: boolean;
delete: boolean; delete: boolean;
healthData: boolean;
basalMetabolism: boolean;
}; };
// 错误信息 // 错误信息
@@ -35,9 +44,13 @@ export interface NutritionState {
const initialState: NutritionState = { const initialState: NutritionState = {
recordsByDate: {}, recordsByDate: {},
summaryByDate: {}, summaryByDate: {},
healthDataByDate: {},
basalMetabolismByDate: {},
loading: { loading: {
records: false, records: false,
delete: false, delete: false,
healthData: false,
basalMetabolism: false,
}, },
error: null, error: null,
pagination: { pagination: {
@@ -126,6 +139,74 @@ export const fetchDailyNutritionData = createAsyncThunk(
} }
); );
// 异步操作:获取指定日期的健康数据
export const fetchDailyHealthData = createAsyncThunk(
'nutrition/fetchHealthData',
async (date: Date, { rejectWithValue }) => {
try {
const dateString = dayjs(date).format('YYYY-MM-DD');
const healthData = await fetchHealthDataForDate(date);
return {
dateKey: dateString,
healthData,
};
} catch (error: any) {
return rejectWithValue(error.message || '获取健康数据失败');
}
}
);
// 异步操作:获取指定日期的基础代谢数据
export const fetchDailyBasalMetabolism = createAsyncThunk(
'nutrition/fetchBasalMetabolism',
async (date: Date, { rejectWithValue }) => {
try {
const dateString = dayjs(date).format('YYYY-MM-DD');
const startDate = dayjs(date).startOf('day').toISOString();
const endDate = dayjs(date).endOf('day').toISOString();
const basalMetabolism = await fetchBasalEnergyBurned({
startDate,
endDate,
});
return {
dateKey: dateString,
basalMetabolism,
};
} catch (error: any) {
return rejectWithValue(error.message || '获取基础代谢数据失败');
}
}
);
// 异步操作:获取指定日期的完整营养卡片数据(营养数据 + 健康数据)
export const fetchCompleteNutritionCardData = createAsyncThunk(
'nutrition/fetchCompleteCardData',
async (date: Date, { rejectWithValue, dispatch }) => {
try {
const dateString = dayjs(date).format('YYYY-MM-DD');
// 并行获取营养数据和健康数据
const [nutritionResult, healthResult, basalResult] = await Promise.allSettled([
dispatch(fetchDailyNutritionData(date)).unwrap(),
dispatch(fetchDailyHealthData(date)).unwrap(),
dispatch(fetchDailyBasalMetabolism(date)).unwrap(),
]);
return {
dateKey: dateString,
nutritionSuccess: nutritionResult.status === 'fulfilled',
healthSuccess: healthResult.status === 'fulfilled',
basalSuccess: basalResult.status === 'fulfilled',
};
} catch (error: any) {
return rejectWithValue(error.message || '获取完整营养卡片数据失败');
}
}
);
const nutritionSlice = createSlice({ const nutritionSlice = createSlice({
name: 'nutrition', name: 'nutrition',
initialState, initialState,
@@ -140,12 +221,16 @@ const nutritionSlice = createSlice({
const dateKey = action.payload; const dateKey = action.payload;
delete state.recordsByDate[dateKey]; delete state.recordsByDate[dateKey];
delete state.summaryByDate[dateKey]; delete state.summaryByDate[dateKey];
delete state.healthDataByDate[dateKey];
delete state.basalMetabolismByDate[dateKey];
}, },
// 清除所有数据 // 清除所有数据
clearAllData: (state) => { clearAllData: (state) => {
state.recordsByDate = {}; state.recordsByDate = {};
state.summaryByDate = {}; state.summaryByDate = {};
state.healthDataByDate = {};
state.basalMetabolismByDate = {};
state.error = null; state.error = null;
state.lastUpdateTime = null; state.lastUpdateTime = null;
state.pagination = initialState.pagination; state.pagination = initialState.pagination;
@@ -258,6 +343,61 @@ const nutritionSlice = createSlice({
state.loading.records = false; state.loading.records = false;
state.error = action.payload as string; state.error = action.payload as string;
}); });
// fetchDailyHealthData
builder
.addCase(fetchDailyHealthData.pending, (state) => {
state.loading.healthData = true;
state.error = null;
})
.addCase(fetchDailyHealthData.fulfilled, (state, action) => {
state.loading.healthData = false;
const { dateKey, healthData } = action.payload;
state.healthDataByDate[dateKey] = healthData;
state.lastUpdateTime = new Date().toISOString();
})
.addCase(fetchDailyHealthData.rejected, (state, action) => {
state.loading.healthData = false;
state.error = action.payload as string;
});
// fetchDailyBasalMetabolism
builder
.addCase(fetchDailyBasalMetabolism.pending, (state) => {
state.loading.basalMetabolism = true;
state.error = null;
})
.addCase(fetchDailyBasalMetabolism.fulfilled, (state, action) => {
state.loading.basalMetabolism = false;
const { dateKey, basalMetabolism } = action.payload;
state.basalMetabolismByDate[dateKey] = basalMetabolism;
state.lastUpdateTime = new Date().toISOString();
})
.addCase(fetchDailyBasalMetabolism.rejected, (state, action) => {
state.loading.basalMetabolism = false;
state.error = action.payload as string;
});
// fetchCompleteNutritionCardData
builder
.addCase(fetchCompleteNutritionCardData.pending, (state) => {
state.loading.records = true;
state.loading.healthData = true;
state.loading.basalMetabolism = true;
state.error = null;
})
.addCase(fetchCompleteNutritionCardData.fulfilled, (state, action) => {
state.loading.records = false;
state.loading.healthData = false;
state.loading.basalMetabolism = false;
state.lastUpdateTime = new Date().toISOString();
})
.addCase(fetchCompleteNutritionCardData.rejected, (state, action) => {
state.loading.records = false;
state.loading.healthData = false;
state.loading.basalMetabolism = false;
state.error = action.payload as string;
});
}, },
}); });
@@ -276,6 +416,12 @@ export const selectNutritionRecordsByDate = (dateKey: string) => (state: { nutri
export const selectNutritionSummaryByDate = (dateKey: string) => (state: { nutrition: NutritionState }) => export const selectNutritionSummaryByDate = (dateKey: string) => (state: { nutrition: NutritionState }) =>
state.nutrition.summaryByDate[dateKey] || null; state.nutrition.summaryByDate[dateKey] || null;
export const selectHealthDataByDate = (dateKey: string) => (state: { nutrition: NutritionState }) =>
state.nutrition.healthDataByDate[dateKey] || null;
export const selectBasalMetabolismByDate = (dateKey: string) => (state: { nutrition: NutritionState }) =>
state.nutrition.basalMetabolismByDate[dateKey] || 0;
export const selectNutritionLoading = (state: { nutrition: NutritionState }) => export const selectNutritionLoading = (state: { nutrition: NutritionState }) =>
state.nutrition.loading; state.nutrition.loading;
@@ -285,4 +431,13 @@ export const selectNutritionError = (state: { nutrition: NutritionState }) =>
export const selectNutritionPagination = (state: { nutrition: NutritionState }) => export const selectNutritionPagination = (state: { nutrition: NutritionState }) =>
state.nutrition.pagination; state.nutrition.pagination;
// 复合选择器:获取指定日期的完整营养卡片数据
export const selectNutritionCardDataByDate = (dateKey: string) => (state: { nutrition: NutritionState }) => ({
nutritionSummary: state.nutrition.summaryByDate[dateKey] || null,
healthData: state.nutrition.healthDataByDate[dateKey] || null,
basalMetabolism: state.nutrition.basalMetabolismByDate[dateKey] || 0,
loading: state.nutrition.loading,
error: state.nutrition.error,
});
export default nutritionSlice.reducer; export default nutritionSlice.reducer;

View File

@@ -309,7 +309,7 @@ export async function fetchStepCount(date: Date): Promise<number> {
} }
// 使用样本数据获取每小时步数 // 使用样本数据获取每小时步数 - 优化版本,减少计算复杂度
export async function fetchHourlyStepSamples(date: Date): Promise<HourlyStepData[]> { export async function fetchHourlyStepSamples(date: Date): Promise<HourlyStepData[]> {
try { try {
const options = createDateRange(date); const options = createDateRange(date);
@@ -318,22 +318,25 @@ export async function fetchHourlyStepSamples(date: Date): Promise<HourlyStepData
if (result && result.data && Array.isArray(result.data)) { if (result && result.data && Array.isArray(result.data)) {
logSuccess('每小时步数样本', result); logSuccess('每小时步数样本', result);
// 初始化24小时数据 // 优化:使用更高效的数据结构
const hourlyData: HourlyStepData[] = Array.from({ length: 24 }, (_, i) => ({ const hourlyMap = new Map<number, number>();
hour: i,
steps: 0
}));
// 将每小时的步数样本数据映射到对应的小时 // 优化:批量处理数据,减少重复验证
result.data.forEach((sample: any) => { result.data.forEach((sample: any) => {
if (sample && sample.hour !== undefined && sample.value !== undefined) { if (sample?.hour >= 0 && sample?.hour < 24 && sample?.value !== undefined) {
const hour = sample.hour; hourlyMap.set(sample.hour, Math.round(sample.value));
if (hour >= 0 && hour < 24) {
hourlyData[hour].steps = Math.round(sample.value);
}
} }
}); });
// 生成最终数组
const hourlyData: HourlyStepData[] = [];
for (let i = 0; i < 24; i++) {
hourlyData.push({
hour: i,
steps: hourlyMap.get(i) || 0
});
}
return hourlyData; return hourlyData;
} else { } else {
logWarning('每小时步数', '为空或格式错误'); logWarning('每小时步数', '为空或格式错误');
@@ -467,7 +470,7 @@ async function fetchActiveEnergyBurned(options: HealthDataOptions): Promise<numb
} }
} }
async function fetchBasalEnergyBurned(options: HealthDataOptions): Promise<number> { export async function fetchBasalEnergyBurned(options: HealthDataOptions): Promise<number> {
try { try {
const result = await HealthKitManager.getBasalEnergyBurned(options); const result = await HealthKitManager.getBasalEnergyBurned(options);
@@ -765,24 +768,45 @@ export async function testOxygenSaturationData(_date: Date = dayjs().toDate()):
} }
} }
// 添加饮水记录到 HealthKit (暂未实现) // 添加饮水记录到 HealthKit
export async function saveWaterIntakeToHealthKit(_amount: number, _recordedAt?: string): Promise<boolean> { export async function saveWaterIntakeToHealthKit(amount: number, recordedAt?: string): Promise<boolean> {
try { try {
// Note: Water intake saving would need to be implemented in native module console.log('开始保存饮水记录到HealthKit...', { amount, recordedAt });
console.log('饮水记录保存到HealthKit暂未实现');
return true; // Return true for now to not break existing functionality const options = {
amount: amount,
recordedAt: recordedAt || new Date().toISOString()
};
const result = await HealthKitManager.saveWaterIntakeToHealthKit(options);
if (result && result.success) {
console.log('饮水记录保存成功:', result);
return true;
} else {
console.error('饮水记录保存失败:', result);
return false;
}
} catch (error) { } catch (error) {
console.error('添加饮水记录到 HealthKit 失败:', error); console.error('添加饮水记录到 HealthKit 失败:', error);
return false; return false;
} }
} }
// 获取 HealthKit 中的饮水记录 (暂未实现) // 获取 HealthKit 中的饮水记录
export async function getWaterIntakeFromHealthKit(_options: HealthDataOptions): Promise<any[]> { export async function getWaterIntakeFromHealthKit(options: HealthDataOptions): Promise<any[]> {
try { try {
// Note: Water intake fetching would need to be implemented in native module console.log('开始从HealthKit获取饮水记录...', options);
console.log('从HealthKit获取饮水记录暂未实现');
return []; const result = await HealthKitManager.getWaterIntakeFromHealthKit(options);
if (result && result.data && Array.isArray(result.data)) {
console.log('成功获取饮水记录:', result);
return result.data;
} else {
console.log('饮水记录为空或格式错误:', result);
return [];
}
} catch (error) { } catch (error) {
console.error('获取 HealthKit 饮水记录失败:', error); console.error('获取 HealthKit 饮水记录失败:', error);
return []; return [];