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',
|
||||
},
|
||||
|
||||
@@ -73,7 +73,8 @@ function Bootstrapper({ children }: { children: React.ReactNode }) {
|
||||
if (userDataLoaded && profile?.name) {
|
||||
try {
|
||||
await notificationService.initialize();
|
||||
|
||||
// 后台任务
|
||||
await backgroundTaskManager.initialize()
|
||||
// 注册午餐提醒（12:00）
|
||||
await NutritionNotificationHelpers.scheduleDailyLunchReminder(profile.name);
|
||||
console.log('午餐提醒已注册');
|
||||
@@ -86,8 +87,7 @@ function Bootstrapper({ children }: { children: React.ReactNode }) {
|
||||
await MoodNotificationHelpers.scheduleDailyMoodReminder(profile.name);
|
||||
console.log('心情提醒已注册');
|
||||
|
||||
// 注册喝水提醒后台任务
|
||||
await backgroundTaskManager.registerWaterReminderTask();
|
||||
|
||||
console.log('喝水提醒后台任务已注册');
|
||||
} catch (error) {
|
||||
console.error('注册提醒失败:', error);
|
||||
|
||||
569
app/sleep-detail.tsx
Normal file
569
app/sleep-detail.tsx
Normal file
@@ -0,0 +1,569 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
ScrollView,
|
||||
TouchableOpacity,
|
||||
Dimensions,
|
||||
ActivityIndicator,
|
||||
} from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { router } from 'expo-router';
|
||||
import dayjs from 'dayjs';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import Svg, { Circle } from 'react-native-svg';
|
||||
|
||||
import {
|
||||
fetchSleepDetailForDate,
|
||||
SleepDetailData,
|
||||
SleepStage,
|
||||
getSleepStageDisplayName,
|
||||
getSleepStageColor,
|
||||
formatSleepTime,
|
||||
formatTime
|
||||
} from '@/services/sleepService';
|
||||
import { ensureHealthPermissions } from '@/utils/health';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
// 圆形进度条组件
|
||||
const CircularProgress = ({
|
||||
size,
|
||||
strokeWidth,
|
||||
progress,
|
||||
color,
|
||||
backgroundColor = '#E5E7EB'
|
||||
}: {
|
||||
size: number;
|
||||
strokeWidth: number;
|
||||
progress: number; // 0-100
|
||||
color: string;
|
||||
backgroundColor?: string;
|
||||
}) => {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
const strokeDasharray = circumference;
|
||||
const strokeDashoffset = circumference - (progress / 100) * circumference;
|
||||
|
||||
return (
|
||||
<Svg width={size} height={size} style={{ transform: [{ rotateZ: '-90deg' }] }}>
|
||||
{/* 背景圆环 */}
|
||||
<Circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={backgroundColor}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
/>
|
||||
{/* 进度圆环 */}
|
||||
<Circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={radius}
|
||||
stroke={color}
|
||||
strokeWidth={strokeWidth}
|
||||
fill="none"
|
||||
strokeDasharray={strokeDasharray}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
|
||||
// 睡眠阶段图表组件
|
||||
const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
|
||||
const chartWidth = width - 80;
|
||||
const maxHeight = 120;
|
||||
|
||||
// 生成24小时的睡眠阶段数据（模拟数据，实际应根据真实样本计算）
|
||||
const hourlyData = Array.from({ length: 24 }, (_, hour) => {
|
||||
// 如果没有数据，显示空状态
|
||||
if (sleepData.totalSleepTime === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 根据时间判断可能的睡眠状态
|
||||
if (hour >= 0 && hour <= 6) {
|
||||
// 凌晨0-6点，主要睡眠时间
|
||||
if (hour <= 2) return SleepStage.Core;
|
||||
if (hour <= 4) return SleepStage.Deep;
|
||||
return SleepStage.REM;
|
||||
} else if (hour >= 22) {
|
||||
// 晚上10点后开始入睡
|
||||
return SleepStage.Core;
|
||||
}
|
||||
return null; // 清醒时间
|
||||
});
|
||||
|
||||
return (
|
||||
<View style={styles.chartContainer}>
|
||||
<View style={styles.chartHeader}>
|
||||
<View style={styles.chartTimeLabel}>
|
||||
<Text style={styles.chartTimeText}>🛏️ {sleepData.totalSleepTime > 0 ? formatTime(sleepData.bedtime) : '--:--'}</Text>
|
||||
</View>
|
||||
<View style={styles.chartHeartRate}>
|
||||
<Text style={styles.chartHeartRateText}>❤️ 平均心率: {sleepData.averageHeartRate || '--'} BPM</Text>
|
||||
</View>
|
||||
<View style={styles.chartTimeLabel}>
|
||||
<Text style={styles.chartTimeText}>☀️ {sleepData.totalSleepTime > 0 ? formatTime(sleepData.wakeupTime) : '--:--'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.chartBars}>
|
||||
{hourlyData.map((stage, index) => {
|
||||
const barHeight = stage ? Math.random() * 0.6 + 0.4 : 0.1; // 随机高度模拟真实数据
|
||||
const color = stage ? getSleepStageColor(stage) : '#E5E7EB';
|
||||
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.chartBar,
|
||||
{
|
||||
height: barHeight * maxHeight,
|
||||
backgroundColor: color,
|
||||
width: chartWidth / 24 - 2,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default function SleepDetailScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const [sleepData, setSleepData] = useState<SleepDetailData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedDate] = useState(dayjs().toDate());
|
||||
|
||||
useEffect(() => {
|
||||
loadSleepData();
|
||||
}, [selectedDate]);
|
||||
|
||||
const loadSleepData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// 确保有健康权限
|
||||
const hasPermission = await ensureHealthPermissions();
|
||||
if (!hasPermission) {
|
||||
console.warn('没有健康数据权限');
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取睡眠详情数据
|
||||
const data = await fetchSleepDetailForDate(selectedDate);
|
||||
setSleepData(data);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载睡眠数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={[styles.container, styles.loadingContainer]}>
|
||||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||||
<Text style={styles.loadingText}>加载睡眠数据中...</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
// 如果没有数据，使用默认数据结构
|
||||
const displayData: SleepDetailData = sleepData || {
|
||||
sleepScore: 0,
|
||||
totalSleepTime: 0,
|
||||
sleepQualityPercentage: 0,
|
||||
bedtime: new Date().toISOString(),
|
||||
wakeupTime: new Date().toISOString(),
|
||||
timeInBed: 0,
|
||||
sleepStages: [],
|
||||
averageHeartRate: null,
|
||||
sleepHeartRateData: [],
|
||||
sleepEfficiency: 0,
|
||||
qualityDescription: '暂无睡眠数据',
|
||||
recommendation: '请确保在真实iOS设备上运行并授权访问健康数据，或等待有睡眠数据后再查看。'
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* 背景渐变 */}
|
||||
<LinearGradient
|
||||
colors={['#f0f4ff', '#e6f2ff', '#ffffff']}
|
||||
style={styles.gradientBackground}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 0, y: 1 }}
|
||||
/>
|
||||
|
||||
{/* 顶部导航 */}
|
||||
<View style={[styles.header, { paddingTop: insets.top }]}>
|
||||
<TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
|
||||
<Text style={styles.backButtonText}>‹</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.headerTitle}>今天, {dayjs(selectedDate).format('M月DD日')}</Text>
|
||||
<TouchableOpacity style={styles.navButton}>
|
||||
<Text style={styles.navButtonText}>›</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* 睡眠得分圆形显示 */}
|
||||
<View style={styles.scoreContainer}>
|
||||
<View style={styles.circularProgressContainer}>
|
||||
<CircularProgress
|
||||
size={200}
|
||||
strokeWidth={12}
|
||||
progress={displayData.sleepScore}
|
||||
color="#8B5CF6"
|
||||
backgroundColor="#E0E7FF"
|
||||
/>
|
||||
<View style={styles.scoreTextContainer}>
|
||||
<Text style={styles.scoreNumber}>{displayData.sleepScore}</Text>
|
||||
<Text style={styles.scoreLabel}>睡眠得分</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 睡眠质量描述 */}
|
||||
<Text style={styles.qualityDescription}>{displayData.qualityDescription}</Text>
|
||||
|
||||
{/* 建议文本 */}
|
||||
<Text style={styles.recommendationText}>{displayData.recommendation}</Text>
|
||||
|
||||
{/* 睡眠统计卡片 */}
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statIcon}>🌙</Text>
|
||||
<Text style={styles.statLabel}>睡眠时间</Text>
|
||||
<Text style={styles.statValue}>{displayData.totalSleepTime > 0 ? formatSleepTime(displayData.totalSleepTime) : '--'}</Text>
|
||||
<Text style={styles.statQuality}>
|
||||
{displayData.totalSleepTime > 0 ? '良好' : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.statCard}>
|
||||
<Text style={styles.statIcon}>💎</Text>
|
||||
<Text style={styles.statLabel}>睡眠质量</Text>
|
||||
<Text style={styles.statValue}>{displayData.sleepQualityPercentage > 0 ? `${displayData.sleepQualityPercentage}%` : '--'}</Text>
|
||||
<Text style={styles.statQuality}>
|
||||
{displayData.sleepQualityPercentage > 0 ? '优秀' : '--'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 睡眠阶段图表 */}
|
||||
<SleepStageChart sleepData={displayData} />
|
||||
|
||||
{/* 睡眠阶段统计 */}
|
||||
<View style={styles.stagesContainer}>
|
||||
{displayData.sleepStages.length > 0 ? displayData.sleepStages.map((stage, index) => (
|
||||
<View key={index} style={styles.stageRow}>
|
||||
<View style={styles.stageInfo}>
|
||||
<View style={[styles.stageColorDot, { backgroundColor: getSleepStageColor(stage.stage) }]} />
|
||||
<Text style={styles.stageName}>{getSleepStageDisplayName(stage.stage)}</Text>
|
||||
</View>
|
||||
<View style={styles.stageStats}>
|
||||
<Text style={styles.stagePercentage}>{stage.percentage}%</Text>
|
||||
<Text style={styles.stageDuration}>{formatSleepTime(stage.duration)}</Text>
|
||||
<Text style={[
|
||||
styles.stageQuality,
|
||||
{ color: stage.quality === 'excellent' ? '#10B981' :
|
||||
stage.quality === 'good' ? '#059669' :
|
||||
stage.quality === 'fair' ? '#F59E0B' : '#EF4444' }
|
||||
]}>
|
||||
{stage.quality === 'excellent' ? '优秀' :
|
||||
stage.quality === 'good' ? '良好' :
|
||||
stage.quality === 'fair' ? '一般' : '偏低'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)) : (
|
||||
<View style={styles.noDataContainer}>
|
||||
<Text style={styles.noDataText}>暂无睡眠阶段数据</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F8FAFC',
|
||||
},
|
||||
gradientBackground: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 16,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
backButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
backButtonText: {
|
||||
fontSize: 24,
|
||||
fontWeight: '300',
|
||||
color: '#374151',
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#111827',
|
||||
},
|
||||
navButton: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
navButtonText: {
|
||||
fontSize: 24,
|
||||
fontWeight: '300',
|
||||
color: '#9CA3AF',
|
||||
},
|
||||
scrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollContent: {
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 40,
|
||||
},
|
||||
scoreContainer: {
|
||||
alignItems: 'center',
|
||||
marginVertical: 20,
|
||||
},
|
||||
circularProgressContainer: {
|
||||
position: 'relative',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scoreTextContainer: {
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scoreNumber: {
|
||||
fontSize: 48,
|
||||
fontWeight: '800',
|
||||
color: '#1F2937',
|
||||
lineHeight: 48,
|
||||
},
|
||||
scoreLabel: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
marginTop: 4,
|
||||
},
|
||||
qualityDescription: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#1F2937',
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
lineHeight: 24,
|
||||
},
|
||||
recommendationText: {
|
||||
fontSize: 14,
|
||||
color: '#6B7280',
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
marginBottom: 32,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
statsContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 16,
|
||||
marginBottom: 32,
|
||||
},
|
||||
statCard: {
|
||||
flex: 1,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
alignItems: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
statIcon: {
|
||||
fontSize: 24,
|
||||
marginBottom: 8,
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
marginBottom: 4,
|
||||
},
|
||||
statValue: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#1F2937',
|
||||
marginBottom: 4,
|
||||
},
|
||||
statQuality: {
|
||||
fontSize: 12,
|
||||
color: '#10B981',
|
||||
fontWeight: '500',
|
||||
},
|
||||
chartContainer: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
marginBottom: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
chartHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
chartTimeLabel: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
chartTimeText: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
fontWeight: '500',
|
||||
},
|
||||
chartHeartRate: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
chartHeartRateText: {
|
||||
fontSize: 12,
|
||||
color: '#EF4444',
|
||||
fontWeight: '600',
|
||||
},
|
||||
chartBars: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
height: 120,
|
||||
gap: 2,
|
||||
},
|
||||
chartBar: {
|
||||
borderRadius: 2,
|
||||
minHeight: 8,
|
||||
},
|
||||
stagesContainer: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 2 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 8,
|
||||
elevation: 3,
|
||||
},
|
||||
stageRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#F3F4F6',
|
||||
},
|
||||
stageInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
stageColorDot: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
marginRight: 12,
|
||||
},
|
||||
stageName: {
|
||||
fontSize: 14,
|
||||
color: '#374151',
|
||||
fontWeight: '500',
|
||||
},
|
||||
stageStats: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
stagePercentage: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#1F2937',
|
||||
},
|
||||
stageDuration: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
marginTop: 2,
|
||||
},
|
||||
stageQuality: {
|
||||
fontSize: 11,
|
||||
fontWeight: '600',
|
||||
marginTop: 2,
|
||||
},
|
||||
loadingContainer: {
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
loadingText: {
|
||||
fontSize: 16,
|
||||
color: '#6B7280',
|
||||
marginTop: 16,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 16,
|
||||
color: '#6B7280',
|
||||
marginBottom: 16,
|
||||
},
|
||||
retryButton: {
|
||||
backgroundColor: Colors.light.primary,
|
||||
borderRadius: 8,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
retryButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
noDataContainer: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 24,
|
||||
},
|
||||
noDataText: {
|
||||
fontSize: 14,
|
||||
color: '#9CA3AF',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user