987 lines
28 KiB
TypeScript
987 lines
28 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 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 { selectHealthDataByDate, setHealthData } from '@/store/healthSlice';
|
||
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
|
||
import { fetchDailyNutritionData, selectNutritionSummaryByDate } from '@/store/nutritionSlice';
|
||
import { fetchTodayWaterStats } from '@/store/waterSlice';
|
||
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
|
||
import { ensureHealthPermissions, fetchHealthDataForDate, testHRVDataFetch } from '@/utils/health';
|
||
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';
|
||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
AppState,
|
||
Image,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
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));
|
||
|
||
|
||
// 解构健康数据（支持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 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 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, 500), // 500ms 防抖延迟
|
||
[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]);
|
||
|
||
|
||
// 日期点击时，加载对应日期数据
|
||
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={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
|
||
style={styles.gradientBackground}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 0, y: 1 }}
|
||
/>
|
||
|
||
{/* 装饰性圆圈 */}
|
||
<View style={styles.decorativeCircle1} />
|
||
<View style={styles.decorativeCircle2} />
|
||
|
||
<ScrollView
|
||
style={styles.scrollView}
|
||
contentContainerStyle={{
|
||
paddingTop: insets.top,
|
||
paddingBottom: bottomPadding,
|
||
paddingHorizontal: 20
|
||
}}
|
||
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}>Out Live</Text>
|
||
</View>
|
||
|
||
{/* 开发环境调试按钮 */}
|
||
{__DEV__ && (
|
||
<View style={styles.debugButtonsContainer}>
|
||
<TouchableOpacity
|
||
style={styles.debugButton}
|
||
onPress={async () => {
|
||
console.log('🔧 手动触发后台任务测试...');
|
||
// await backgroundTaskManager.triggerTaskForTesting();
|
||
}}
|
||
>
|
||
<Text style={styles.debugButtonText}>🔧</Text>
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity
|
||
style={[styles.debugButton, styles.hrvTestButton]}
|
||
onPress={async () => {
|
||
console.log('🫀 测试HRV数据获取...');
|
||
await testHRVDataFetch();
|
||
}}
|
||
>
|
||
<Text style={styles.debugButtonText}>🫀</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
|
||
|
||
|
||
{/* 日期选择器 */}
|
||
<DateSelector
|
||
selectedIndex={selectedIndex}
|
||
onDateSelect={onSelectDate}
|
||
showMonthTitle={false}
|
||
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');
|
||
}}
|
||
/>
|
||
|
||
<WeightHistoryCard />
|
||
|
||
{/* 真正瀑布流布局 */}
|
||
<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={0}>
|
||
<StressMeter
|
||
value={hrvValue}
|
||
updateTime={hrvUpdateTime}
|
||
hrvValue={hrvValue}
|
||
/>
|
||
</FloatingCard>
|
||
|
||
{/* 心率卡片 */}
|
||
{/* <FloatingCard style={styles.masonryCard} delay={2000}>
|
||
<HeartRateCard
|
||
resetToken={animToken}
|
||
style={styles.basalMetabolismCardOverride}
|
||
heartRate={heartRate}
|
||
/>
|
||
</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>
|
||
</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} delay={500}>
|
||
<WaterIntakeCard
|
||
selectedDate={currentSelectedDateString}
|
||
style={styles.waterCardOverride}
|
||
/>
|
||
</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>
|
||
</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,
|
||
},
|
||
|
||
scrollView: {
|
||
flex: 1,
|
||
},
|
||
headerContainer: {
|
||
marginBottom: 10,
|
||
},
|
||
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',
|
||
},
|
||
debugButtonsContainer: {
|
||
flexDirection: 'row',
|
||
gap: 8,
|
||
},
|
||
debugButton: {
|
||
width: 32,
|
||
height: 32,
|
||
borderRadius: 16,
|
||
backgroundColor: '#FF6B6B',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
hrvTestButton: {
|
||
backgroundColor: '#8B5CF6',
|
||
},
|
||
debugButtonText: {
|
||
fontSize: 12,
|
||
},
|
||
|
||
|
||
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: 16,
|
||
marginTop: 6,
|
||
},
|
||
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',
|
||
marginTop: 6
|
||
},
|
||
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,
|
||
},
|
||
|
||
|
||
});
|