feat: 添加睡眠详情页面，集成睡眠数据获取功能，优化健康数据权限管理，更新相关组件以支持睡眠统计和展示
This commit is contained in:
richarjiang
@@ -4,6 +4,7 @@ import { FitnessRingsCard } from '@/components/FitnessRingsCard';
|
||||
import { MoodCard } from '@/components/MoodCard';
|
||||
import { NutritionRadarCard } from '@/components/NutritionRadarCard';
|
||||
import OxygenSaturationCard from '@/components/statistic/OxygenSaturationCard';
|
||||
import SleepCard from '@/components/statistic/SleepCard';
|
||||
import StepsCard from '@/components/StepsCard';
|
||||
import { StressMeter } from '@/components/StressMeter';
|
||||
import WaterIntakeCard from '@/components/WaterIntakeCard';
|
||||
@@ -12,6 +13,7 @@ import { Colors } from '@/constants/Colors';
|
||||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||||
import { backgroundTaskManager } from '@/services/backgroundTaskManager';
|
||||
import { selectHealthDataByDate, setHealthData } from '@/store/healthSlice';
|
||||
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
|
||||
import { fetchDailyNutritionData, selectNutritionSummaryByDate } from '@/store/nutritionSlice';
|
||||
@@ -21,7 +23,6 @@ import { ensureHealthPermissions, fetchHealthDataForDate, testHRVDataFetch } fro
|
||||
import { getTestHealthData } from '@/utils/mockHealthData';
|
||||
import { calculateNutritionGoals } from '@/utils/nutrition';
|
||||
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { debounce } from 'lodash';
|
||||
@@ -64,7 +65,8 @@ export default function ExploreScreen() {
|
||||
const userProfile = useAppSelector((s) => s.user.profile);
|
||||
|
||||
// 开发调试：设置为true来使用mock数据
|
||||
const useMockData = __DEV__; // 改为true来启用mock数据调试
|
||||
// 在真机测试时，可以暂时设置为true来验证组件显示逻辑
|
||||
const useMockData = __DEV__ || false; // 改为true来启用mock数据调试
|
||||
|
||||
const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
|
||||
|
||||
@@ -97,9 +99,18 @@ export default function ExploreScreen() {
|
||||
const activeCalories = useMockData ? (mockData?.activeEnergyBurned ?? null) : (healthData?.activeEnergyBurned ?? null);
|
||||
const basalMetabolism: number | null = useMockData ? (mockData?.basalEnergyBurned ?? null) : (healthData?.basalEnergyBurned ?? null);
|
||||
const sleepDuration = useMockData ? (mockData?.sleepDuration ?? null) : (healthData?.sleepDuration ?? null);
|
||||
const hrvValue = useMockData ? (mockData?.hrv ?? 0) : (healthData?.hrv ?? 0);
|
||||
const hrvValue = useMockData ? (mockData?.hrv ?? null) : (healthData?.hrv ?? null);
|
||||
const oxygenSaturation = useMockData ? (mockData?.oxygenSaturation ?? null) : (healthData?.oxygenSaturation ?? null);
|
||||
|
||||
// 调试HRV数据
|
||||
console.log('=== HRV数据调试 ===');
|
||||
console.log('useMockData:', useMockData);
|
||||
console.log('mockData?.hrv:', mockData?.hrv);
|
||||
console.log('healthData?.hrv:', healthData?.hrv);
|
||||
console.log('final hrvValue:', hrvValue);
|
||||
console.log('healthData:', healthData);
|
||||
console.log('==================');
|
||||
|
||||
const fitnessRingsData = useMockData ? {
|
||||
activeCalories: mockData?.activeCalories ?? 0,
|
||||
activeCaloriesGoal: mockData?.activeCaloriesGoal ?? 350,
|
||||
@@ -269,6 +280,8 @@ export default function ExploreScreen() {
|
||||
const data = await fetchHealthDataForDate(derivedDate);
|
||||
|
||||
console.log('设置UI状态:', data);
|
||||
console.log('HRV数据详细信息:', data.hrv, typeof data.hrv);
|
||||
|
||||
// 仅当该请求仍是最新时，才应用结果
|
||||
if (latestRequestKeyRef.current === requestKey) {
|
||||
const dateString = dayjs(derivedDate).format('YYYY-MM-DD');
|
||||
@@ -276,7 +289,22 @@ export default function ExploreScreen() {
|
||||
// 使用 Redux 存储健康数据
|
||||
dispatch(setHealthData({
|
||||
date: dateString,
|
||||
data: data
|
||||
data: {
|
||||
steps: data.steps,
|
||||
activeCalories: data.activeEnergyBurned,
|
||||
basalEnergyBurned: data.basalEnergyBurned,
|
||||
sleepDuration: data.sleepDuration,
|
||||
hrv: data.hrv,
|
||||
oxygenSaturation: data.oxygenSaturation,
|
||||
heartRate: data.heartRate,
|
||||
activeEnergyBurned: data.activeEnergyBurned,
|
||||
activeCaloriesGoal: data.activeCaloriesGoal,
|
||||
exerciseMinutes: data.exerciseMinutes,
|
||||
exerciseMinutesGoal: data.exerciseMinutesGoal,
|
||||
standHours: data.standHours,
|
||||
standHoursGoal: data.standHoursGoal,
|
||||
hourlySteps: data.hourlySteps,
|
||||
}
|
||||
}));
|
||||
|
||||
// 更新HRV数据时间
|
||||
@@ -374,26 +402,33 @@ export default function ExploreScreen() {
|
||||
}, [executeLoadAllData, debouncedLoadAllData]);
|
||||
|
||||
// 页面聚焦时的数据加载逻辑
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
// 页面聚焦时加载数据，使用缓存机制避免频繁请求
|
||||
console.log('页面聚焦，检查是否需要刷新数据...');
|
||||
loadAllData(currentSelectedDate);
|
||||
}, [loadAllData, currentSelectedDate])
|
||||
);
|
||||
// useFocusEffect(
|
||||
// React.useCallback(() => {
|
||||
// // 页面聚焦时加载数据，使用缓存机制避免频繁请求
|
||||
// console.log('页面聚焦，检查是否需要刷新数据...');
|
||||
// loadAllData(currentSelectedDate);
|
||||
// }, [loadAllData, currentSelectedDate])
|
||||
// );
|
||||
|
||||
// AppState 监听：应用从后台返回前台时的处理
|
||||
useEffect(() => {
|
||||
let appStateChangeTimeout: number;
|
||||
|
||||
const handleAppStateChange = (nextAppState: string) => {
|
||||
if (nextAppState === 'active') {
|
||||
// 延迟执行，避免与 useFocusEffect 重复触发
|
||||
appStateChangeTimeout = setTimeout(() => {
|
||||
console.log('应用从后台返回前台，强制刷新统计数据...');
|
||||
// 从后台返回时强制刷新数据
|
||||
loadAllData(currentSelectedDate, true);
|
||||
}, 500);
|
||||
// 判断当前选中的日期是否是最新的（今天）
|
||||
const todayIndex = getTodayIndexInMonth();
|
||||
const isTodaySelected = selectedIndex === todayIndex;
|
||||
|
||||
if (!isTodaySelected) {
|
||||
// 如果当前不是选中今天，则切换到今天（这个更新会触发数据加载）
|
||||
console.log('应用回到前台，切换到今天并加载数据');
|
||||
setSelectedIndex(todayIndex);
|
||||
// 注意：这里不直接调用loadAllData，因为setSelectedIndex会触发useEffect重新计算currentSelectedDate
|
||||
// 然后onSelectDate会被调用，从而触发数据加载
|
||||
} else {
|
||||
// 如果已经是今天，则直接调用加载数据的方法
|
||||
console.log('应用回到前台，当前已是今天，直接加载数据');
|
||||
loadAllData(currentSelectedDate);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -401,11 +436,8 @@ export default function ExploreScreen() {
|
||||
|
||||
return () => {
|
||||
subscription?.remove();
|
||||
if (appStateChangeTimeout) {
|
||||
clearTimeout(appStateChangeTimeout);
|
||||
}
|
||||
};
|
||||
}, [loadAllData, currentSelectedDate]);
|
||||
}, [loadAllData, currentSelectedDate, selectedIndex]);
|
||||
|
||||
|
||||
// 日期点击时，加载对应日期数据
|
||||
@@ -463,7 +495,7 @@ export default function ExploreScreen() {
|
||||
style={styles.debugButton}
|
||||
onPress={async () => {
|
||||
console.log('🔧 手动触发后台任务测试...');
|
||||
// await backgroundTaskManager.triggerTaskForTesting();
|
||||
await backgroundTaskManager.triggerTaskForTesting();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.debugButtonText}>🔧</Text>
|
||||
@@ -555,16 +587,10 @@ export default function ExploreScreen() {
|
||||
</FloatingCard> */}
|
||||
|
||||
<FloatingCard style={styles.masonryCard}>
|
||||
<View style={styles.cardHeaderRow}>
|
||||
<Text style={styles.cardTitle}>睡眠</Text>
|
||||
</View>
|
||||
{sleepDuration != null ? (
|
||||
<Text style={styles.sleepValue}>
|
||||
{Math.floor(sleepDuration / 60)}小时{Math.floor(sleepDuration % 60)}分钟
|
||||
</Text>
|
||||
) : (
|
||||
<Text style={styles.sleepValue}>——</Text>
|
||||
)}
|
||||
<SleepCard
|
||||
sleepDuration={sleepDuration}
|
||||
onPress={() => pushIfAuthedElseLogin('/sleep-detail')}
|
||||
/>
|
||||
</FloatingCard>
|
||||
</View>
|
||||
|
||||
@@ -960,12 +986,6 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'space-between',
|
||||
marginTop: 8,
|
||||
},
|
||||
sleepValue: {
|
||||
fontSize: 16,
|
||||
color: '#1E40AF',
|
||||
fontWeight: '700',
|
||||
marginTop: 8,
|
||||
},
|
||||
weightCard: {
|
||||
backgroundColor: '#F0F9FF',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user