1073 lines
32 KiB
TypeScript
1073 lines
32 KiB
TypeScript
import { BasalMetabolismCard } from '@/components/BasalMetabolismCard';
|
||
import { DateSelector } from '@/components/DateSelector';
|
||
import { FitnessRingsCard } from '@/components/FitnessRingsCard';
|
||
import { MoodCard } from '@/components/MoodCard';
|
||
import { NutritionRadarCard } from '@/components/NutritionRadarCard';
|
||
import HeartRateCard from '@/components/statistic/HeartRateCard';
|
||
import OxygenSaturationCard from '@/components/statistic/OxygenSaturationCard';
|
||
import StepsCard from '@/components/StepsCard';
|
||
import { StressMeter } from '@/components/StressMeter';
|
||
import WaterIntakeCard from '@/components/WaterIntakeCard';
|
||
import { WeightHistoryCard } from '@/components/weight/WeightHistoryCard';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { getTabBarBottomPadding } from '@/constants/TabBar';
|
||
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
|
||
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||
import { useBackgroundTasks } from '@/hooks/useBackgroundTasks';
|
||
import { notificationService } from '@/services/notifications';
|
||
import { selectHealthDataByDate, setHealthData } from '@/store/healthSlice';
|
||
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
|
||
import { fetchDailyNutritionData, selectNutritionSummaryByDate } from '@/store/nutritionSlice';
|
||
import { fetchTodayWaterStats, selectTodayStats } from '@/store/waterSlice';
|
||
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
|
||
import { ensureHealthPermissions, fetchHealthDataForDate, fetchRecentHRV } from '@/utils/health';
|
||
import { getTestHealthData } from '@/utils/mockHealthData';
|
||
import { WaterNotificationHelpers } from '@/utils/notificationHelpers';
|
||
import { calculateNutritionGoals } from '@/utils/nutrition';
|
||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||
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';
|
||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
AppState,
|
||
Image,
|
||
SafeAreaView,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
View
|
||
} from 'react-native';
|
||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||
|
||
// 浮动动画组件
|
||
const FloatingCard = ({ children, delay = 0, style }: {
|
||
children: React.ReactNode;
|
||
delay?: number;
|
||
style?: any;
|
||
}) => {
|
||
|
||
|
||
return (
|
||
<View
|
||
style={[
|
||
style,
|
||
{
|
||
marginBottom: 8,
|
||
},
|
||
]}
|
||
>
|
||
{children}
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default function ExploreScreen() {
|
||
const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000;
|
||
const userProfile = useAppSelector((s) => s.user.profile);
|
||
|
||
// 开发调试：设置为true来使用mock数据
|
||
const useMockData = __DEV__; // 改为true来启用mock数据调试
|
||
|
||
const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
|
||
|
||
// 使用 dayjs：当月日期与默认选中"今天"
|
||
const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
|
||
const tabBarHeight = useBottomTabBarHeight();
|
||
const insets = useSafeAreaInsets();
|
||
const bottomPadding = useMemo(() => {
|
||
return getTabBarBottomPadding(tabBarHeight) + (insets?.bottom ?? 0);
|
||
}, [tabBarHeight, insets?.bottom]);
|
||
|
||
// 获取当前选中日期 - 使用 useMemo 缓存避免重复计算
|
||
const currentSelectedDate = useMemo(() => {
|
||
const days = getMonthDaysZh();
|
||
return days[selectedIndex]?.date?.toDate() ?? new Date();
|
||
}, [selectedIndex]);
|
||
|
||
const currentSelectedDateString = useMemo(() => {
|
||
return dayjs(currentSelectedDate).format('YYYY-MM-DD');
|
||
}, [currentSelectedDate]);
|
||
|
||
// 从 Redux 获取指定日期的健康数据
|
||
const healthData = useAppSelector(selectHealthDataByDate(currentSelectedDateString));
|
||
|
||
// 获取今日喝水统计数据
|
||
const todayWaterStats = useAppSelector(selectTodayStats);
|
||
|
||
// 解构健康数据（支持mock数据）
|
||
const mockData = useMockData ? getTestHealthData('mock') : null;
|
||
const stepCount: number | null = useMockData ? (mockData?.steps ?? null) : (healthData?.steps ?? null);
|
||
const hourlySteps = useMockData ? (mockData?.hourlySteps ?? []) : (healthData?.hourlySteps ?? []);
|
||
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 oxygenSaturation = useMockData ? (mockData?.oxygenSaturation ?? null) : (healthData?.oxygenSaturation ?? null);
|
||
const heartRate = useMockData ? (mockData?.heartRate ?? null) : (healthData?.heartRate ?? null);
|
||
const fitnessRingsData = useMockData ? {
|
||
activeCalories: mockData?.activeCalories ?? 0,
|
||
activeCaloriesGoal: mockData?.activeCaloriesGoal ?? 350,
|
||
exerciseMinutes: mockData?.exerciseMinutes ?? 0,
|
||
exerciseMinutesGoal: mockData?.exerciseMinutesGoal ?? 30,
|
||
standHours: mockData?.standHours ?? 0,
|
||
standHoursGoal: mockData?.standHoursGoal ?? 12,
|
||
} : (healthData ? {
|
||
activeCalories: healthData.activeEnergyBurned,
|
||
activeCaloriesGoal: healthData.activeCaloriesGoal,
|
||
exerciseMinutes: healthData.exerciseMinutes,
|
||
exerciseMinutesGoal: healthData.exerciseMinutesGoal,
|
||
standHours: healthData.standHours,
|
||
standHoursGoal: healthData.standHoursGoal,
|
||
} : {
|
||
activeCalories: 0,
|
||
activeCaloriesGoal: 350,
|
||
exerciseMinutes: 0,
|
||
exerciseMinutesGoal: 30,
|
||
standHours: 0,
|
||
standHoursGoal: 12,
|
||
});
|
||
|
||
// HRV更新时间
|
||
const [hrvUpdateTime, setHrvUpdateTime] = useState<Date>(new Date());
|
||
|
||
// 用于触发动画重置的 token（当日期或数据变化时更新）
|
||
const [animToken, setAnimToken] = useState(0);
|
||
|
||
// 从 Redux 获取营养数据
|
||
const nutritionSummary = useAppSelector(selectNutritionSummaryByDate(currentSelectedDateString));
|
||
|
||
// 计算用户的营养目标
|
||
const nutritionGoals = useMemo(() => {
|
||
return calculateNutritionGoals({
|
||
weight: userProfile.weight,
|
||
height: userProfile.height,
|
||
birthDate: userProfile?.birthDate ? new Date(userProfile?.birthDate) : undefined,
|
||
gender: userProfile?.gender || undefined,
|
||
});
|
||
}, [userProfile]);
|
||
|
||
const { registerTask } = useBackgroundTasks();
|
||
// 心情相关状态
|
||
const dispatch = useAppDispatch();
|
||
const [isMoodLoading, setIsMoodLoading] = useState(false);
|
||
|
||
// 记录最近一次请求的"日期键"，避免旧请求覆盖新结果
|
||
const latestRequestKeyRef = useRef<string | null>(null);
|
||
|
||
// 请求状态管理，防止重复请求
|
||
const loadingRef = useRef({
|
||
health: false,
|
||
nutrition: false,
|
||
mood: false
|
||
});
|
||
|
||
// 数据缓存时间戳，避免短时间内重复拉取
|
||
const dataTimestampRef = useRef<{ [key: string]: number }>({});
|
||
|
||
const getDateKey = (d: Date) => `${dayjs(d).year()}-${dayjs(d).month() + 1}-${dayjs(d).date()}`;
|
||
|
||
// 检查数据是否需要刷新（2分钟内不重复拉取，对营养数据更严格）
|
||
const shouldRefreshData = (dateKey: string, dataType: string) => {
|
||
const cacheKey = `${dateKey}-${dataType}`;
|
||
const lastUpdate = dataTimestampRef.current[cacheKey];
|
||
const now = Date.now();
|
||
|
||
// 营养数据使用更短的缓存时间，其他数据使用5分钟
|
||
const cacheTime = dataType === 'nutrition' ? 2 * 60 * 1000 : 5 * 60 * 1000;
|
||
|
||
return !lastUpdate || (now - lastUpdate) > cacheTime;
|
||
};
|
||
|
||
// 更新数据时间戳
|
||
const updateDataTimestamp = (dateKey: string, dataType: string) => {
|
||
const cacheKey = `${dateKey}-${dataType}`;
|
||
dataTimestampRef.current[cacheKey] = Date.now();
|
||
};
|
||
|
||
|
||
// 从 Redux 获取当前日期的心情记录
|
||
const currentMoodCheckin = useAppSelector(selectLatestMoodRecordByDate(
|
||
currentSelectedDateString
|
||
));
|
||
|
||
// 加载心情数据
|
||
const loadMoodData = 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.mood) {
|
||
console.log('心情数据正在加载中，跳过重复请求');
|
||
return;
|
||
}
|
||
|
||
if (!forceRefresh && !shouldRefreshData(requestKey, 'mood')) {
|
||
console.log('心情数据缓存未过期，跳过请求');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
loadingRef.current.mood = true;
|
||
setIsMoodLoading(true);
|
||
|
||
const dateString = dayjs(derivedDate).format('YYYY-MM-DD');
|
||
await dispatch(fetchDailyMoodCheckins(dateString));
|
||
|
||
// 更新缓存时间戳
|
||
updateDataTimestamp(requestKey, 'mood');
|
||
|
||
} catch (error) {
|
||
console.error('加载心情数据失败:', error);
|
||
} finally {
|
||
loadingRef.current.mood = false;
|
||
setIsMoodLoading(false);
|
||
}
|
||
};
|
||
|
||
|
||
|
||
const loadHealthData = async (targetDate?: Date, forceRefresh = false) => {
|
||
// 确定要查询的日期
|
||
let derivedDate: Date;
|
||
if (targetDate) {
|
||
derivedDate = targetDate;
|
||
} else {
|
||
derivedDate = currentSelectedDate;
|
||
}
|
||
|
||
const requestKey = getDateKey(derivedDate);
|
||
|
||
// 检查是否正在加载或不需要刷新
|
||
if (loadingRef.current.health) {
|
||
console.log('健康数据正在加载中，跳过重复请求');
|
||
return;
|
||
}
|
||
|
||
if (!forceRefresh && !shouldRefreshData(requestKey, 'health')) {
|
||
console.log('健康数据缓存未过期，跳过请求');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
loadingRef.current.health = true;
|
||
console.log('=== 开始HealthKit初始化流程 ===');
|
||
|
||
const ok = await ensureHealthPermissions();
|
||
if (!ok) {
|
||
const errorMsg = '无法获取健康权限，请确保在真实iOS设备上运行并授权应用访问健康数据';
|
||
console.warn(errorMsg);
|
||
return;
|
||
}
|
||
|
||
latestRequestKeyRef.current = requestKey;
|
||
|
||
console.log('权限获取成功，开始获取健康数据...', derivedDate);
|
||
const data = await fetchHealthDataForDate(derivedDate);
|
||
|
||
console.log('设置UI状态:', data);
|
||
// 仅当该请求仍是最新时，才应用结果
|
||
if (latestRequestKeyRef.current === requestKey) {
|
||
const dateString = dayjs(derivedDate).format('YYYY-MM-DD');
|
||
|
||
// 使用 Redux 存储健康数据
|
||
dispatch(setHealthData({
|
||
date: dateString,
|
||
data: data
|
||
}));
|
||
|
||
// 更新HRV数据时间
|
||
setHrvUpdateTime(new Date());
|
||
setAnimToken((t) => t + 1);
|
||
|
||
// 更新缓存时间戳
|
||
updateDataTimestamp(requestKey, 'health');
|
||
} else {
|
||
console.log('忽略过期健康数据请求结果，key=', requestKey, '最新key=', latestRequestKeyRef.current);
|
||
}
|
||
console.log('=== HealthKit数据获取完成 ===');
|
||
|
||
} catch (error) {
|
||
console.error('HealthKit流程出现异常:', error);
|
||
} finally {
|
||
loadingRef.current.health = false;
|
||
}
|
||
};
|
||
|
||
// 加载营养数据
|
||
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 dateToUse = targetDate || currentSelectedDate;
|
||
if (dateToUse) {
|
||
console.log('执行数据加载，日期:', dateToUse, '强制刷新:', forceRefresh);
|
||
loadHealthData(dateToUse, forceRefresh);
|
||
if (isLoggedIn) {
|
||
loadNutritionData(dateToUse, forceRefresh);
|
||
loadMoodData(dateToUse, forceRefresh);
|
||
// 加载喝水数据（只加载今日数据用于后台检查）
|
||
const isToday = dayjs(dateToUse).isSame(dayjs(), 'day');
|
||
if (isToday) {
|
||
dispatch(fetchTodayWaterStats());
|
||
}
|
||
}
|
||
}
|
||
}, [isLoggedIn, dispatch]);
|
||
|
||
// 使用 lodash debounce 防抖的加载所有数据方法
|
||
const debouncedLoadAllData = React.useMemo(
|
||
() => debounce(executeLoadAllData, 300), // 300ms 防抖延迟
|
||
[executeLoadAllData]
|
||
);
|
||
|
||
// 对外暴露的 loadAllData 方法
|
||
const loadAllData = React.useCallback((targetDate?: Date, forceRefresh = false) => {
|
||
if (forceRefresh) {
|
||
// 如果是强制刷新，立即执行，不使用防抖
|
||
executeLoadAllData(targetDate, forceRefresh);
|
||
} else {
|
||
// 普通调用使用防抖
|
||
debouncedLoadAllData(targetDate, forceRefresh);
|
||
}
|
||
}, [executeLoadAllData, debouncedLoadAllData]);
|
||
|
||
// 页面聚焦时的数据加载逻辑
|
||
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 subscription = AppState.addEventListener('change', handleAppStateChange);
|
||
|
||
return () => {
|
||
subscription?.remove();
|
||
if (appStateChangeTimeout) {
|
||
clearTimeout(appStateChangeTimeout);
|
||
}
|
||
};
|
||
}, [loadAllData, currentSelectedDate]);
|
||
|
||
useEffect(() => {
|
||
// 注册后台任务 - 只处理健康数据和压力检查
|
||
registerTask({
|
||
id: 'health-data-task',
|
||
name: 'health-data-task',
|
||
handler: async () => {
|
||
try {
|
||
console.log('后台任务：更新健康数据和检查压力水平...');
|
||
// 后台任务只更新健康数据，强制刷新以获取最新数据
|
||
await loadHealthData(undefined, true);
|
||
|
||
// 执行压力检查
|
||
await checkStressLevelAndNotify();
|
||
|
||
// 执行喝水目标检查
|
||
await checkWaterGoalAndNotify();
|
||
} catch (error) {
|
||
console.error('健康数据任务执行失败:', error);
|
||
}
|
||
},
|
||
});
|
||
}, []);
|
||
|
||
// 检查压力水平并发送通知
|
||
const checkStressLevelAndNotify = React.useCallback(async () => {
|
||
try {
|
||
console.log('开始检查压力水平...');
|
||
|
||
// 确保有健康权限
|
||
const hasPermission = await ensureHealthPermissions();
|
||
if (!hasPermission) {
|
||
console.log('没有健康权限，跳过压力检查');
|
||
return;
|
||
}
|
||
|
||
// 获取最近2小时内的实时HRV数据
|
||
const recentHRV = await fetchRecentHRV(2);
|
||
console.log('获取到的最近2小时HRV值:', recentHRV);
|
||
|
||
if (recentHRV === null || recentHRV === undefined) {
|
||
console.log('没有最近的HRV数据，跳过压力检查');
|
||
return;
|
||
}
|
||
|
||
// 判断压力水平（HRV值低于60表示压力过大）
|
||
if (recentHRV < 60) {
|
||
console.log(`检测到压力过大，HRV值: ${recentHRV}，准备发送鼓励通知`);
|
||
|
||
// 检查是否在过去2小时内已经发送过压力提醒，避免重复打扰
|
||
const lastNotificationKey = '@last_stress_notification';
|
||
const lastNotificationTime = await AsyncStorage.getItem(lastNotificationKey);
|
||
const now = new Date().getTime();
|
||
const twoHoursAgo = now - (2 * 60 * 60 * 1000); // 2小时前
|
||
|
||
if (lastNotificationTime && parseInt(lastNotificationTime) > twoHoursAgo) {
|
||
console.log('2小时内已发送过压力提醒，跳过本次通知');
|
||
return;
|
||
}
|
||
|
||
// 随机选择一条鼓励性消息
|
||
const encouragingMessages = [
|
||
'放松一下吧 🌸\n检测到您的压力指数较高，不妨暂停一下，做几个深呼吸，或者来一段轻松的普拉提练习。您的健康最重要！',
|
||
'该休息一下了 🧘♀️\n您的身体在提醒您需要放松。试试冥想、散步或听听舒缓的音乐，让心情平静下来。',
|
||
'压力山大？我们来帮您 💆♀️\n高压力对健康不利，建议您做一些放松运动，比如瑜伽或普拉提，释放身心压力。',
|
||
'关爱自己，从现在开始 💝\n检测到您可能承受较大压力，记得给自己一些时间，做喜欢的事情，保持身心健康。',
|
||
'深呼吸，一切都会好的 🌈\n压力只是暂时的，试试腹式呼吸或简单的伸展运动，让身体和心灵都得到放松。'
|
||
];
|
||
|
||
const randomMessage = encouragingMessages[Math.floor(Math.random() * encouragingMessages.length)];
|
||
const [title, body] = randomMessage.split('\n');
|
||
|
||
// 发送鼓励性推送通知
|
||
await notificationService.sendImmediateNotification({
|
||
title: title,
|
||
body: body,
|
||
data: {
|
||
type: 'stress_alert',
|
||
hrvValue: recentHRV,
|
||
timestamp: new Date().toISOString(),
|
||
url: '/mood/calendar' // 点击通知跳转到心情页面
|
||
},
|
||
sound: true,
|
||
priority: 'high'
|
||
});
|
||
|
||
// 记录通知发送时间
|
||
await AsyncStorage.setItem(lastNotificationKey, now.toString());
|
||
|
||
console.log('压力提醒通知已发送');
|
||
} else {
|
||
console.log(`压力水平正常，HRV值: ${recentHRV}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('检查压力水平失败:', error);
|
||
}
|
||
}, []);
|
||
|
||
// 检查喝水目标并发送通知
|
||
const checkWaterGoalAndNotify = React.useCallback(async () => {
|
||
try {
|
||
console.log('开始检查喝水目标完成情况...');
|
||
|
||
// 获取最新的喝水统计数据
|
||
if (!todayWaterStats || !todayWaterStats.dailyGoal || todayWaterStats.dailyGoal <= 0) {
|
||
console.log('没有设置喝水目标或目标无效，跳过喝水检查');
|
||
return;
|
||
}
|
||
|
||
// 获取用户名
|
||
const userName = userProfile?.name || '朋友';
|
||
const currentHour = new Date().getHours();
|
||
|
||
// 构造今日统计数据
|
||
const waterStatsForCheck = {
|
||
totalAmount: todayWaterStats.totalAmount || 0,
|
||
dailyGoal: todayWaterStats.dailyGoal,
|
||
completionRate: todayWaterStats.completionRate || 0
|
||
};
|
||
|
||
// 调用喝水通知检查函数
|
||
const notificationSent = await WaterNotificationHelpers.checkWaterGoalAndNotify(
|
||
userName,
|
||
waterStatsForCheck,
|
||
currentHour
|
||
);
|
||
|
||
if (notificationSent) {
|
||
console.log('喝水提醒通知已发送');
|
||
} else {
|
||
console.log('无需发送喝水提醒通知');
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('检查喝水目标失败:', error);
|
||
}
|
||
}, [todayWaterStats, userProfile]);
|
||
|
||
// 日期点击时，加载对应日期数据
|
||
const onSelectDate = React.useCallback((index: number, date: Date) => {
|
||
setSelectedIndex(index);
|
||
console.log('日期切换，加载数据...', date);
|
||
// 日期切换时不强制刷新，依赖缓存机制减少不必要的请求
|
||
// loadAllData 内部已经实现了防抖，无需额外防抖处理
|
||
loadAllData(date, false);
|
||
}, [loadAllData]);
|
||
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
{/* 背景渐变 */}
|
||
<LinearGradient
|
||
colors={['#b9e4f5ff', '#b3f6f8ff', '#e6e5e8ff', '#F3F4F6']}
|
||
style={styles.gradientBackground}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 0, y: 1 }}
|
||
/>
|
||
|
||
{/* 装饰性圆圈 */}
|
||
<View style={styles.decorativeCircle1} />
|
||
<View style={styles.decorativeCircle2} />
|
||
|
||
<SafeAreaView style={styles.safeArea}>
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
contentContainerStyle={{ paddingBottom: bottomPadding }}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* 顶部信息栏 */}
|
||
<View style={styles.headerContainer}>
|
||
<View style={styles.headerContent}>
|
||
{/* 左边logo */}
|
||
<Image
|
||
source={require('@/assets/images/Sealife.jpeg')}
|
||
style={styles.logoImage}
|
||
resizeMode="cover"
|
||
/>
|
||
|
||
{/* 右边文字区域 */}
|
||
<View style={styles.headerTextContainer}>
|
||
<Text style={styles.headerTitle}>海豹健康</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<WeightHistoryCard />
|
||
|
||
{/* 日期选择器 */}
|
||
<DateSelector
|
||
selectedIndex={selectedIndex}
|
||
onDateSelect={onSelectDate}
|
||
showMonthTitle={true}
|
||
disableFutureDates={true}
|
||
/>
|
||
|
||
{/* 营养摄入雷达图卡片 */}
|
||
<NutritionRadarCard
|
||
nutritionSummary={nutritionSummary}
|
||
nutritionGoals={nutritionGoals}
|
||
burnedCalories={(basalMetabolism || 0) + (activeCalories || 0)}
|
||
basalMetabolism={basalMetabolism || 0}
|
||
activeCalories={activeCalories || 0}
|
||
resetToken={animToken}
|
||
onMealPress={(mealType: 'breakfast' | 'lunch' | 'dinner' | 'snack') => {
|
||
console.log('选择餐次:', mealType);
|
||
// 这里可以导航到营养记录页面
|
||
pushIfAuthedElseLogin('/nutrition/records');
|
||
}}
|
||
/>
|
||
|
||
{/* 真正瀑布流布局 */}
|
||
<View style={styles.masonryContainer}>
|
||
{/* 左列 */}
|
||
<View style={styles.masonryColumn}>
|
||
{/* 心情卡片 */}
|
||
<FloatingCard style={styles.masonryCard} delay={1500}>
|
||
<MoodCard
|
||
moodCheckin={currentMoodCheckin}
|
||
onPress={() => pushIfAuthedElseLogin('/mood/calendar')}
|
||
isLoading={isMoodLoading}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
<FloatingCard style={styles.masonryCard}>
|
||
<StepsCard
|
||
stepCount={stepCount}
|
||
stepGoal={stepGoal}
|
||
hourlySteps={hourlySteps}
|
||
style={styles.stepsCardOverride}
|
||
onPress={() => pushIfAuthedElseLogin('/steps/detail')}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
{/* 饮水记录卡片 */}
|
||
<FloatingCard style={styles.masonryCard} delay={500}>
|
||
<WaterIntakeCard
|
||
selectedDate={currentSelectedDateString}
|
||
style={styles.waterCardOverride}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
<FloatingCard style={styles.masonryCard} delay={0}>
|
||
<StressMeter
|
||
value={hrvValue}
|
||
updateTime={hrvUpdateTime}
|
||
hrvValue={hrvValue}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
{/* 心率卡片 */}
|
||
<FloatingCard style={styles.masonryCard} delay={2000}>
|
||
<HeartRateCard
|
||
resetToken={animToken}
|
||
style={styles.basalMetabolismCardOverride}
|
||
heartRate={heartRate}
|
||
/>
|
||
</FloatingCard>
|
||
</View>
|
||
|
||
{/* 右列 */}
|
||
<View style={styles.masonryColumn}>
|
||
<FloatingCard style={styles.masonryCard} delay={250}>
|
||
<FitnessRingsCard
|
||
activeCalories={fitnessRingsData.activeCalories}
|
||
activeCaloriesGoal={fitnessRingsData.activeCaloriesGoal}
|
||
exerciseMinutes={fitnessRingsData.exerciseMinutes}
|
||
exerciseMinutesGoal={fitnessRingsData.exerciseMinutesGoal}
|
||
standHours={fitnessRingsData.standHours}
|
||
standHoursGoal={fitnessRingsData.standHoursGoal}
|
||
resetToken={animToken}
|
||
/>
|
||
</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>
|
||
)}
|
||
</FloatingCard>
|
||
|
||
{/* 基础代谢卡片 */}
|
||
<FloatingCard style={styles.masonryCard} delay={1250}>
|
||
<BasalMetabolismCard
|
||
value={basalMetabolism}
|
||
resetToken={animToken}
|
||
style={styles.basalMetabolismCardOverride}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
{/* 血氧饱和度卡片 */}
|
||
<FloatingCard style={styles.masonryCard} delay={1750}>
|
||
<OxygenSaturationCard
|
||
resetToken={animToken}
|
||
style={styles.basalMetabolismCardOverride}
|
||
oxygenSaturation={oxygenSaturation}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const primary = Colors.light.primary;
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
},
|
||
gradientBackground: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
},
|
||
decorativeCircle1: {
|
||
position: 'absolute',
|
||
top: 40,
|
||
right: 20,
|
||
width: 60,
|
||
height: 60,
|
||
borderRadius: 30,
|
||
backgroundColor: '#0EA5E9',
|
||
opacity: 0.1,
|
||
},
|
||
decorativeCircle2: {
|
||
position: 'absolute',
|
||
bottom: -15,
|
||
left: -15,
|
||
width: 40,
|
||
height: 40,
|
||
borderRadius: 20,
|
||
backgroundColor: '#0EA5E9',
|
||
opacity: 0.05,
|
||
},
|
||
safeArea: {
|
||
flex: 1,
|
||
},
|
||
scrollView: {
|
||
flex: 1,
|
||
paddingHorizontal: 20,
|
||
},
|
||
headerContainer: {
|
||
marginBottom: 20,
|
||
},
|
||
headerContent: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
},
|
||
logoImage: {
|
||
width: 36,
|
||
height: 36,
|
||
borderRadius: 20,
|
||
},
|
||
headerTextContainer: {
|
||
flex: 1,
|
||
marginLeft: 12,
|
||
},
|
||
headerTitle: {
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
color: '#192126',
|
||
},
|
||
|
||
|
||
sectionTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
marginTop: 24,
|
||
marginBottom: 14,
|
||
},
|
||
metricsRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 16,
|
||
},
|
||
card: {
|
||
backgroundColor: '#0F1418',
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
marginBottom: 16,
|
||
},
|
||
metricsLeft: {
|
||
flex: 1,
|
||
backgroundColor: '#EEE9FF',
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
marginRight: 12,
|
||
},
|
||
metricsRight: {
|
||
width: 160,
|
||
gap: 12,
|
||
},
|
||
metricsRightCard: {
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 22,
|
||
padding: 16,
|
||
},
|
||
caloriesValue: {
|
||
color: '#192126',
|
||
fontSize: 18,
|
||
lineHeight: 18,
|
||
fontWeight: '600',
|
||
textAlignVertical: 'bottom'
|
||
},
|
||
caloriesUnit: {
|
||
color: '#515558ff',
|
||
fontSize: 12,
|
||
marginLeft: 4,
|
||
lineHeight: 18,
|
||
},
|
||
trainingContent: {
|
||
marginTop: 8,
|
||
width: 120,
|
||
height: 120,
|
||
borderRadius: 60,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
alignSelf: 'center',
|
||
},
|
||
trainingRingTrack: {
|
||
position: 'absolute',
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 60,
|
||
borderWidth: 12,
|
||
borderColor: '#E2D9FD',
|
||
},
|
||
trainingRingProgress: {
|
||
position: 'absolute',
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 60,
|
||
borderWidth: 12,
|
||
borderColor: 'transparent',
|
||
borderTopColor: '#8B74F3',
|
||
borderRightColor: '#8B74F3',
|
||
transform: [{ rotateZ: '45deg' }],
|
||
},
|
||
trainingPercent: {
|
||
fontSize: 18,
|
||
fontWeight: '800',
|
||
color: '#8B74F3',
|
||
},
|
||
cyclingHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
cyclingIconBadge: {
|
||
width: 30,
|
||
height: 30,
|
||
borderRadius: 6,
|
||
backgroundColor: primary,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 8,
|
||
},
|
||
cyclingTitle: {
|
||
color: '#FFFFFF',
|
||
fontSize: 20,
|
||
fontWeight: '800',
|
||
},
|
||
mapArea: {
|
||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||
borderRadius: 14,
|
||
height: 180,
|
||
padding: 8,
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
overflow: 'hidden',
|
||
},
|
||
mapTile: {
|
||
width: '25%',
|
||
height: '25%',
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255,255,255,0.12)',
|
||
},
|
||
routeLine: {
|
||
position: 'absolute',
|
||
height: 6,
|
||
backgroundColor: primary,
|
||
borderRadius: 3,
|
||
},
|
||
cardHeaderRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
iconSquare: {
|
||
width: 24,
|
||
height: 24,
|
||
borderRadius: 8,
|
||
backgroundColor: '#FFFFFF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 10,
|
||
},
|
||
cardTitle: {
|
||
fontSize: 14,
|
||
color: '#192126',
|
||
},
|
||
heartCard: {
|
||
backgroundColor: '#FFE5E5',
|
||
},
|
||
waveContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'flex-end',
|
||
height: 70,
|
||
gap: 6,
|
||
marginBottom: 8,
|
||
},
|
||
waveBar: {
|
||
width: 6,
|
||
borderRadius: 3,
|
||
backgroundColor: '#E54D4D',
|
||
},
|
||
heartValue: {
|
||
alignSelf: 'flex-end',
|
||
color: '#5B5B5B',
|
||
fontWeight: '600',
|
||
},
|
||
stepsValue: {
|
||
fontSize: 14,
|
||
color: '#7A6A42',
|
||
fontWeight: '700',
|
||
marginBottom: 8,
|
||
},
|
||
errorContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#FFE5E5',
|
||
borderRadius: 12,
|
||
padding: 12,
|
||
marginBottom: 16,
|
||
},
|
||
errorText: {
|
||
fontSize: 14,
|
||
color: '#E54D4D',
|
||
fontWeight: '600',
|
||
marginLeft: 8,
|
||
flex: 1,
|
||
},
|
||
retryButton: {
|
||
padding: 4,
|
||
marginLeft: 8,
|
||
},
|
||
viewMoreContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginBottom: 16,
|
||
},
|
||
viewMoreText: {
|
||
fontSize: 14,
|
||
color: '#192126',
|
||
},
|
||
viewMoreIcon: {
|
||
fontSize: 16,
|
||
color: '#192126',
|
||
marginLeft: 4,
|
||
},
|
||
stressCardRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'flex-start',
|
||
marginBottom: 16,
|
||
},
|
||
healthCardsRow: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 16,
|
||
},
|
||
masonryContainer: {
|
||
marginBottom: 16,
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
marginTop: 16,
|
||
},
|
||
masonryColumn: {
|
||
flex: 1,
|
||
},
|
||
masonryCard: {
|
||
width: '100%',
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 16,
|
||
padding: 16,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 4,
|
||
},
|
||
shadowOpacity: 0.12,
|
||
shadowRadius: 12,
|
||
elevation: 6,
|
||
minHeight: 100,
|
||
justifyContent: 'center',
|
||
},
|
||
basalMetabolismCardOverride: {
|
||
margin: -16, // 抵消 masonryCard 的 padding
|
||
borderRadius: 16,
|
||
},
|
||
stepsCardOverride: {
|
||
margin: -16, // 抵消 masonryCard 的 padding
|
||
borderRadius: 16,
|
||
height: '100%', // 填充整个masonryCard
|
||
},
|
||
waterCardOverride: {
|
||
margin: -16, // 抵消 masonryCard 的 padding
|
||
borderRadius: 16,
|
||
height: '100%', // 填充整个masonryCard
|
||
},
|
||
compactStepsCard: {
|
||
minHeight: 100,
|
||
},
|
||
stepsContent: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginTop: 8,
|
||
},
|
||
sleepValue: {
|
||
fontSize: 16,
|
||
color: '#1E40AF',
|
||
fontWeight: '700',
|
||
marginTop: 8,
|
||
},
|
||
weightCard: {
|
||
backgroundColor: '#F0F9FF',
|
||
},
|
||
weightValue: {
|
||
fontSize: 22,
|
||
color: '#0369A1',
|
||
fontWeight: '800',
|
||
marginTop: 8,
|
||
},
|
||
addWeightButton: {
|
||
position: 'absolute',
|
||
right: 0,
|
||
top: 0,
|
||
padding: 4,
|
||
},
|
||
|
||
});
|