1100 lines
32 KiB
TypeScript
1100 lines
32 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
||
import dayjs from 'dayjs';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import { router } from 'expo-router';
|
||
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
ActivityIndicator,
|
||
Animated,
|
||
Dimensions,
|
||
Modal,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View
|
||
} from 'react-native';
|
||
import Svg, { Circle } from 'react-native-svg';
|
||
|
||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||
import {
|
||
fetchSleepDetailForDate,
|
||
formatSleepTime,
|
||
formatTime,
|
||
getSleepStageColor,
|
||
getSleepStageDisplayName,
|
||
convertSleepSamplesToIntervals,
|
||
SleepDetailData,
|
||
SleepStage
|
||
} from '@/services/sleepService';
|
||
import { ensureHealthPermissions } from '@/utils/health';
|
||
|
||
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 chartHeight = 120;
|
||
const coreBaselineHeight = chartHeight * 0.6; // 核心睡眠作为基准线
|
||
const blockHeight = 20; // 每个睡眠阶段块的固定高度
|
||
|
||
// 使用真实的 HealthKit 睡眠数据
|
||
const generateRealSleepData = () => {
|
||
// 如果没有睡眠数据，返回空数组
|
||
if (sleepData.totalSleepTime === 0 || !sleepData.rawSleepSamples || sleepData.rawSleepSamples.length === 0) {
|
||
console.log('没有可用的睡眠数据用于图表显示');
|
||
return [];
|
||
}
|
||
|
||
console.log('使用真实 HealthKit 睡眠数据生成图表，样本数量:', sleepData.rawSleepSamples.length);
|
||
|
||
// 使用新的转换函数，将睡眠样本转换为15分钟间隔数据
|
||
const intervalData = convertSleepSamplesToIntervals(
|
||
sleepData.rawSleepSamples,
|
||
sleepData.bedtime,
|
||
sleepData.wakeupTime
|
||
);
|
||
|
||
if (intervalData.length === 0) {
|
||
console.log('无法生成睡眠阶段间隔数据 - 可能只有基本的InBed/Asleep数据');
|
||
|
||
// 如果没有详细的睡眠阶段数据，生成基本的模拟数据作为回退
|
||
return generateFallbackSleepData();
|
||
}
|
||
|
||
return intervalData;
|
||
};
|
||
|
||
// 回退方案：当没有详细睡眠阶段数据时使用
|
||
const generateFallbackSleepData = () => {
|
||
console.log('使用回退睡眠数据 - 用户可能没有Apple Watch或详细睡眠追踪');
|
||
|
||
const data: { time: string; stage: SleepStage }[] = [];
|
||
const bedtime = new Date(sleepData.bedtime);
|
||
const wakeupTime = new Date(sleepData.wakeupTime);
|
||
let currentTime = new Date(bedtime);
|
||
|
||
// 基于典型睡眠模式生成合理的睡眠阶段分布
|
||
while (currentTime < wakeupTime) {
|
||
const timeStr = `${String(currentTime.getHours()).padStart(2, '0')}:${String(currentTime.getMinutes()).padStart(2, '0')}`;
|
||
const sleepDuration = wakeupTime.getTime() - bedtime.getTime();
|
||
const currentProgress = (currentTime.getTime() - bedtime.getTime()) / sleepDuration;
|
||
|
||
let stage: SleepStage;
|
||
if (currentProgress < 0.15 || currentProgress > 0.85) {
|
||
stage = Math.random() < 0.6 ? SleepStage.Core : SleepStage.Awake;
|
||
} else if (currentProgress < 0.4) {
|
||
stage = Math.random() < 0.7 ? SleepStage.Deep : SleepStage.Core;
|
||
} else if (currentProgress < 0.7) {
|
||
const rand = Math.random();
|
||
stage = rand < 0.6 ? SleepStage.Core : (rand < 0.9 ? SleepStage.REM : SleepStage.Awake);
|
||
} else {
|
||
const rand = Math.random();
|
||
stage = rand < 0.5 ? SleepStage.REM : (rand < 0.9 ? SleepStage.Core : SleepStage.Awake);
|
||
}
|
||
|
||
data.push({ time: timeStr, stage });
|
||
currentTime.setMinutes(currentTime.getMinutes() + 15);
|
||
}
|
||
|
||
return data;
|
||
};
|
||
|
||
const sleepDataPoints = generateRealSleepData();
|
||
|
||
// 获取睡眠阶段在Y轴上的位置
|
||
const getStageYPosition = (stage: SleepStage) => {
|
||
switch (stage) {
|
||
case SleepStage.Awake:
|
||
return coreBaselineHeight - blockHeight * 2; // 最上方
|
||
case SleepStage.REM:
|
||
return coreBaselineHeight - blockHeight; // 上方
|
||
case SleepStage.Core:
|
||
return coreBaselineHeight; // 基准线
|
||
case SleepStage.Deep:
|
||
return coreBaselineHeight + blockHeight; // 下方
|
||
default:
|
||
return coreBaselineHeight;
|
||
}
|
||
};
|
||
|
||
// 获取时间标签
|
||
const getTimeLabels = () => {
|
||
if (sleepData.totalSleepTime === 0) {
|
||
return { startTime: '--:--', endTime: '--:--' };
|
||
}
|
||
|
||
return {
|
||
startTime: formatTime(sleepData.bedtime),
|
||
endTime: formatTime(sleepData.wakeupTime)
|
||
};
|
||
};
|
||
|
||
const { startTime, endTime } = getTimeLabels();
|
||
|
||
return (
|
||
<View style={styles.chartContainer}>
|
||
<View style={styles.chartHeader}>
|
||
<View style={styles.chartTimeLabel}>
|
||
<Text style={styles.chartTimeText}>🛏️ {startTime}</Text>
|
||
</View>
|
||
<View style={styles.chartHeartRate}>
|
||
<Text style={styles.chartHeartRateText}>❤️ 平均心率: {sleepData.averageHeartRate || '--'} BPM</Text>
|
||
</View>
|
||
<View style={styles.chartTimeLabel}>
|
||
<Text style={styles.chartTimeText}>☀️ {endTime}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 分层睡眠阶段图表 */}
|
||
<View style={[styles.layeredChartContainer, { height: chartHeight }]}>
|
||
{sleepDataPoints.map((dataPoint, index) => {
|
||
const blockWidth = chartWidth / sleepDataPoints.length - 1;
|
||
const yPosition = getStageYPosition(dataPoint.stage);
|
||
const color = getSleepStageColor(dataPoint.stage);
|
||
|
||
return (
|
||
<View
|
||
key={index}
|
||
style={[
|
||
styles.sleepBlock,
|
||
{
|
||
width: blockWidth,
|
||
height: blockHeight,
|
||
backgroundColor: color,
|
||
position: 'absolute',
|
||
left: index * (blockWidth),
|
||
top: yPosition,
|
||
}
|
||
]}
|
||
/>
|
||
);
|
||
})}
|
||
</View>
|
||
|
||
{/* 时间刻度 */}
|
||
<View style={styles.chartTimeScale}>
|
||
<Text style={styles.chartTimeScaleText}>{startTime}</Text>
|
||
<Text style={styles.chartTimeScaleText}>{endTime}</Text>
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// Sleep Grade Component 睡眠等级组件
|
||
const SleepGradeCard = ({
|
||
icon,
|
||
grade,
|
||
range,
|
||
isActive = false
|
||
}: {
|
||
icon: string;
|
||
grade: string;
|
||
range: string;
|
||
isActive?: boolean;
|
||
}) => {
|
||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||
const colorTokens = Colors[theme];
|
||
|
||
const getGradeColor = (grade: string) => {
|
||
switch (grade) {
|
||
case '低': case '较差': return { bg: '#FECACA', text: '#DC2626' };
|
||
case '正常': case '一般': return { bg: '#D1FAE5', text: '#065F46' };
|
||
case '良好': return { bg: '#D1FAE5', text: '#065F46' };
|
||
case '优秀': return { bg: '#FEF3C7', text: '#92400E' };
|
||
default: return { bg: colorTokens.pageBackgroundEmphasis, text: colorTokens.textSecondary };
|
||
}
|
||
};
|
||
|
||
const colors = getGradeColor(grade);
|
||
|
||
return (
|
||
<View style={[
|
||
styles.gradeCard,
|
||
{
|
||
backgroundColor: isActive ? colors.bg : colorTokens.pageBackgroundEmphasis,
|
||
borderColor: isActive ? colors.text : 'transparent',
|
||
}
|
||
]}>
|
||
<View style={styles.gradeCardLeft}>
|
||
<Ionicons name={icon as any} size={16} color={colors.text} />
|
||
<Text style={[
|
||
styles.gradeText,
|
||
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
||
]}>
|
||
{grade}
|
||
</Text>
|
||
</View>
|
||
<Text style={[
|
||
styles.gradeRange,
|
||
{ color: isActive ? colors.text : colorTokens.textSecondary }
|
||
]}>
|
||
{range}
|
||
</Text>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
// Info Modal 组件
|
||
const InfoModal = ({
|
||
visible,
|
||
onClose,
|
||
title,
|
||
type,
|
||
sleepData
|
||
}: {
|
||
visible: boolean;
|
||
onClose: () => void;
|
||
title: string;
|
||
type: 'sleep-time' | 'sleep-quality';
|
||
sleepData: SleepDetailData;
|
||
}) => {
|
||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||
const colorTokens = Colors[theme];
|
||
const slideAnim = useState(new Animated.Value(0))[0];
|
||
|
||
React.useEffect(() => {
|
||
if (visible) {
|
||
// 重置动画值确保每次打开都有动画
|
||
slideAnim.setValue(0);
|
||
Animated.spring(slideAnim, {
|
||
toValue: 1,
|
||
useNativeDriver: true,
|
||
tension: 100,
|
||
friction: 8,
|
||
}).start();
|
||
} else {
|
||
Animated.spring(slideAnim, {
|
||
toValue: 0,
|
||
useNativeDriver: true,
|
||
tension: 100,
|
||
friction: 8,
|
||
}).start();
|
||
}
|
||
}, [visible]);
|
||
|
||
const translateY = slideAnim.interpolate({
|
||
inputRange: [0, 1],
|
||
outputRange: [300, 0],
|
||
});
|
||
|
||
const opacity = slideAnim.interpolate({
|
||
inputRange: [0, 1],
|
||
outputRange: [0, 1],
|
||
});
|
||
|
||
// 根据实际睡眠时间计算等级
|
||
const getSleepTimeGrade = (totalSleepMinutes: number) => {
|
||
const hours = totalSleepMinutes / 60;
|
||
if (hours < 6) return 0; // 低
|
||
if ((hours >= 6 && hours < 7) || hours > 9) return 1; // 正常
|
||
if (hours >= 7 && hours < 8) return 2; // 良好
|
||
if (hours >= 8 && hours <= 9) return 3; // 优秀
|
||
return 1; // 默认正常
|
||
};
|
||
|
||
// 根据实际睡眠质量百分比计算等级
|
||
const getSleepQualityGrade = (qualityPercentage: number) => {
|
||
if (qualityPercentage < 55) return 0; // 较差
|
||
if (qualityPercentage < 70) return 1; // 一般
|
||
if (qualityPercentage < 85) return 2; // 良好
|
||
return 3; // 优秀
|
||
};
|
||
|
||
const currentSleepTimeGrade = getSleepTimeGrade(sleepData.totalSleepTime || 443); // 默认7h23m
|
||
const currentSleepQualityGrade = getSleepQualityGrade(sleepData.sleepQualityPercentage || 94); // 默认94%
|
||
|
||
const sleepTimeGrades = [
|
||
{ icon: 'alert-circle-outline', grade: '低', range: '< 6h', isActive: currentSleepTimeGrade === 0 },
|
||
{ icon: 'checkmark-circle-outline', grade: '正常', range: '6h - 7h or > 9h', isActive: currentSleepTimeGrade === 1 },
|
||
{ icon: 'checkmark-circle', grade: '良好', range: '7h - 8h', isActive: currentSleepTimeGrade === 2 },
|
||
{ icon: 'star', grade: '优秀', range: '8h - 9h', isActive: currentSleepTimeGrade === 3 },
|
||
];
|
||
|
||
const sleepQualityGrades = [
|
||
{ icon: 'alert-circle-outline', grade: '较差', range: '< 55%', isActive: currentSleepQualityGrade === 0 },
|
||
{ icon: 'checkmark-circle-outline', grade: '一般', range: '55% - 69%', isActive: currentSleepQualityGrade === 1 },
|
||
{ icon: 'checkmark-circle', grade: '良好', range: '70% - 84%', isActive: currentSleepQualityGrade === 2 },
|
||
{ icon: 'star', grade: '优秀', range: '85% - 100%', isActive: currentSleepQualityGrade === 3 },
|
||
];
|
||
|
||
const currentGrades = type === 'sleep-time' ? sleepTimeGrades : sleepQualityGrades;
|
||
|
||
const getDescription = () => {
|
||
if (type === 'sleep-time') {
|
||
return '睡眠最重要 - 它占据了你睡眠得分的一半以上。长时间的睡眠可以减少睡眠债务，但是规律的睡眠时间对于高质量的休息至关重要。';
|
||
} else {
|
||
return '睡眠质量综合评估您的睡眠效率、深度睡眠时长、REM睡眠比例等多个指标。高质量的睡眠不仅仅取决于时长，还包括睡眠的连续性和各睡眠阶段的平衡。';
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Modal
|
||
transparent
|
||
visible={visible}
|
||
animationType="none"
|
||
onRequestClose={onClose}
|
||
>
|
||
<TouchableOpacity
|
||
style={styles.modalOverlay}
|
||
activeOpacity={1}
|
||
onPress={onClose}
|
||
>
|
||
<Animated.View style={[
|
||
styles.infoModalContent,
|
||
{
|
||
backgroundColor: colorTokens.background,
|
||
transform: [{ translateY }],
|
||
opacity,
|
||
}
|
||
]}>
|
||
<View style={styles.modalHandle} />
|
||
<View style={styles.infoModalHeader}>
|
||
<Text style={[styles.infoModalTitle, { color: colorTokens.text }]}>
|
||
{title}
|
||
</Text>
|
||
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
||
<Ionicons name="close" size={20} color={colorTokens.textSecondary} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
{/* 等级卡片区域 */}
|
||
<View style={styles.gradesContainer}>
|
||
{currentGrades.map((grade, index) => (
|
||
<SleepGradeCard
|
||
key={index}
|
||
icon={grade.icon}
|
||
grade={grade.grade}
|
||
range={grade.range}
|
||
isActive={grade.isActive}
|
||
/>
|
||
))}
|
||
</View>
|
||
|
||
<Text style={[styles.infoModalText, { color: colorTokens.textSecondary }]}>
|
||
{getDescription()}
|
||
</Text>
|
||
</Animated.View>
|
||
</TouchableOpacity>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default function SleepDetailScreen() {
|
||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||
const colorTokens = Colors[theme];
|
||
const [sleepData, setSleepData] = useState<SleepDetailData | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [selectedDate] = useState(dayjs().toDate());
|
||
|
||
const [infoModal, setInfoModal] = useState<{ visible: boolean; title: string; type: 'sleep-time' | 'sleep-quality' | null }>({
|
||
visible: false,
|
||
title: '',
|
||
type: null
|
||
});
|
||
|
||
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: [],
|
||
rawSleepSamples: [], // 添加空的原始睡眠样本数据
|
||
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 }}
|
||
/>
|
||
|
||
{/* 顶部导航 */}
|
||
<HeaderBar
|
||
title={`今天, ${dayjs(selectedDate).format('M月DD日')}`}
|
||
onBack={() => router.back()}
|
||
withSafeTop={true}
|
||
transparent={true}
|
||
/>
|
||
|
||
<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.newStatCard, { backgroundColor: colorTokens.background }]}>
|
||
<View style={styles.statCardHeader}>
|
||
<View style={styles.statCardLeftGroup}>
|
||
<View style={styles.statCardIcon}>
|
||
<Ionicons name="moon-outline" size={18} color="#6B7280" />
|
||
</View>
|
||
<Text style={[styles.statLabel, { color: colorTokens.textSecondary }]}>睡眠时间</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={styles.infoButton}
|
||
onPress={() => setInfoModal({
|
||
visible: true,
|
||
title: '睡眠时间',
|
||
type: 'sleep-time'
|
||
})}
|
||
>
|
||
<Ionicons name="information-circle-outline" size={18} color={colorTokens.textMuted} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<Text style={[styles.newStatValue, { color: colorTokens.text }]}>
|
||
{displayData.totalSleepTime > 0 ? formatSleepTime(displayData.totalSleepTime) : '7h 23m'}
|
||
</Text>
|
||
<View style={[styles.qualityBadge, styles.goodQualityBadge]}>
|
||
<Text style={[styles.qualityBadgeText, styles.goodQualityText]}>✓ 良好</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={[styles.newStatCard, { backgroundColor: colorTokens.background }]}>
|
||
<View style={styles.statCardHeader}>
|
||
<View style={styles.statCardLeftGroup}>
|
||
<View style={styles.statCardIcon}>
|
||
<Ionicons name="star-outline" size={18} color="#6B7280" />
|
||
</View>
|
||
<Text style={[styles.statLabel, { color: colorTokens.textSecondary }]}>睡眠质量</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={styles.infoButton}
|
||
onPress={() => setInfoModal({
|
||
visible: true,
|
||
title: '睡眠质量',
|
||
type: 'sleep-quality'
|
||
})}
|
||
>
|
||
<Ionicons name="information-circle-outline" size={16} color={colorTokens.textMuted} />
|
||
</TouchableOpacity>
|
||
</View>
|
||
<Text style={[styles.newStatValue, { color: colorTokens.text }]}>
|
||
{displayData.sleepQualityPercentage > 0 ? `${displayData.sleepQualityPercentage}%` : '94%'}
|
||
</Text>
|
||
<View style={[styles.qualityBadge, styles.excellentQualityBadge]}>
|
||
<Text style={[styles.qualityBadgeText, styles.excellentQualityText]}>★ 优秀</Text>
|
||
</View>
|
||
</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.stageRow}>
|
||
<View style={styles.stageInfo}>
|
||
<View style={[styles.stageColorDot, { backgroundColor: getSleepStageColor(SleepStage.Deep) }]} />
|
||
<Text style={styles.stageName}>{getSleepStageDisplayName(SleepStage.Deep)}</Text>
|
||
</View>
|
||
<View style={styles.stageStats}>
|
||
<Text style={styles.stagePercentage}>28%</Text>
|
||
<Text style={styles.stageDuration}>2h 04m</Text>
|
||
<Text style={[styles.stageQuality, { color: '#10B981' }]}>良好</Text>
|
||
</View>
|
||
</View>
|
||
{/* REM睡眠 */}
|
||
<View style={styles.stageRow}>
|
||
<View style={styles.stageInfo}>
|
||
<View style={[styles.stageColorDot, { backgroundColor: getSleepStageColor(SleepStage.REM) }]} />
|
||
<Text style={styles.stageName}>{getSleepStageDisplayName(SleepStage.REM)}</Text>
|
||
</View>
|
||
<View style={styles.stageStats}>
|
||
<Text style={styles.stagePercentage}>22%</Text>
|
||
<Text style={styles.stageDuration}>1h 37m</Text>
|
||
<Text style={[styles.stageQuality, { color: '#10B981' }]}>优秀</Text>
|
||
</View>
|
||
</View>
|
||
{/* 核心睡眠 */}
|
||
<View style={styles.stageRow}>
|
||
<View style={styles.stageInfo}>
|
||
<View style={[styles.stageColorDot, { backgroundColor: getSleepStageColor(SleepStage.Core) }]} />
|
||
<Text style={styles.stageName}>{getSleepStageDisplayName(SleepStage.Core)}</Text>
|
||
</View>
|
||
<View style={styles.stageStats}>
|
||
<Text style={styles.stagePercentage}>38%</Text>
|
||
<Text style={styles.stageDuration}>2h 48m</Text>
|
||
<Text style={[styles.stageQuality, { color: '#059669' }]}>良好</Text>
|
||
</View>
|
||
</View>
|
||
{/* 清醒时间 */}
|
||
<View style={styles.stageRow}>
|
||
<View style={styles.stageInfo}>
|
||
<View style={[styles.stageColorDot, { backgroundColor: getSleepStageColor(SleepStage.Awake) }]} />
|
||
<Text style={styles.stageName}>{getSleepStageDisplayName(SleepStage.Awake)}</Text>
|
||
</View>
|
||
<View style={styles.stageStats}>
|
||
<Text style={styles.stagePercentage}>12%</Text>
|
||
<Text style={styles.stageDuration}>54m</Text>
|
||
<Text style={[styles.stageQuality, { color: '#F59E0B' }]}>正常</Text>
|
||
</View>
|
||
</View>
|
||
</>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
|
||
{infoModal.type && (
|
||
<InfoModal
|
||
visible={infoModal.visible}
|
||
onClose={() => setInfoModal({ ...infoModal, visible: false })}
|
||
title={infoModal.title}
|
||
type={infoModal.type}
|
||
sleepData={displayData}
|
||
/>
|
||
)}
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#F8FAFC',
|
||
},
|
||
gradientBackground: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
},
|
||
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: 12,
|
||
marginBottom: 32,
|
||
paddingHorizontal: 4,
|
||
},
|
||
newStatCard: {
|
||
flex: 1,
|
||
borderRadius: 20,
|
||
padding: 16,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 4 },
|
||
shadowOpacity: 0.08,
|
||
shadowRadius: 12,
|
||
elevation: 4,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(0, 0, 0, 0.06)',
|
||
},
|
||
statCardHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
statCardLeftGroup: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
},
|
||
statCardIcon: {
|
||
width: 20,
|
||
height: 20,
|
||
borderRadius: 4,
|
||
backgroundColor: 'rgba(120, 120, 128, 0.08)',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
alignSelf: 'center',
|
||
},
|
||
infoButton: {
|
||
padding: 4,
|
||
alignSelf: 'center',
|
||
},
|
||
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: 18,
|
||
},
|
||
statLabel: {
|
||
fontSize: 12,
|
||
fontWeight: '500',
|
||
letterSpacing: 0.2,
|
||
alignSelf: 'center',
|
||
},
|
||
newStatValue: {
|
||
fontSize: 20,
|
||
fontWeight: '600',
|
||
marginBottom: 12,
|
||
letterSpacing: -0.5,
|
||
},
|
||
qualityBadge: {
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 8,
|
||
alignSelf: 'flex-start',
|
||
},
|
||
goodQualityBadge: {
|
||
backgroundColor: '#D1FAE5',
|
||
},
|
||
excellentQualityBadge: {
|
||
backgroundColor: '#FEF3C7',
|
||
},
|
||
qualityBadgeText: {
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
letterSpacing: 0.1,
|
||
},
|
||
goodQualityText: {
|
||
color: '#065F46',
|
||
},
|
||
excellentQualityText: {
|
||
color: '#92400E',
|
||
},
|
||
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,
|
||
},
|
||
chartTimeScale: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 4,
|
||
marginTop: 8,
|
||
},
|
||
chartTimeScaleText: {
|
||
fontSize: 10,
|
||
color: '#9CA3AF',
|
||
textAlign: 'center',
|
||
},
|
||
layeredChartContainer: {
|
||
position: 'relative',
|
||
marginVertical: 16,
|
||
},
|
||
sleepBlock: {
|
||
borderRadius: 2,
|
||
borderWidth: 0.5,
|
||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||
},
|
||
baselineLine: {
|
||
height: 1,
|
||
backgroundColor: '#E5E7EB',
|
||
position: 'absolute',
|
||
},
|
||
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',
|
||
},
|
||
// Info Modal 样式
|
||
modalOverlay: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
justifyContent: 'flex-end',
|
||
},
|
||
infoModalContent: {
|
||
borderTopLeftRadius: 24,
|
||
borderTopRightRadius: 24,
|
||
paddingTop: 12,
|
||
paddingHorizontal: 20,
|
||
paddingBottom: 34,
|
||
minHeight: 200,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: -4 },
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 16,
|
||
elevation: 8,
|
||
},
|
||
modalHandle: {
|
||
width: 36,
|
||
height: 4,
|
||
backgroundColor: '#D1D5DB',
|
||
borderRadius: 2,
|
||
alignSelf: 'center',
|
||
marginBottom: 20,
|
||
},
|
||
infoModalHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 16,
|
||
},
|
||
infoModalTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '700',
|
||
letterSpacing: -0.3,
|
||
},
|
||
infoModalCloseButton: {
|
||
padding: 4,
|
||
},
|
||
infoModalText: {
|
||
fontSize: 15,
|
||
lineHeight: 22,
|
||
letterSpacing: -0.1,
|
||
},
|
||
// Grade Cards 样式
|
||
gradesContainer: {
|
||
marginBottom: 20,
|
||
gap: 8,
|
||
},
|
||
gradeCard: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
borderRadius: 12,
|
||
borderWidth: 1,
|
||
},
|
||
gradeCardLeft: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
gap: 8,
|
||
},
|
||
gradeText: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
letterSpacing: -0.2,
|
||
},
|
||
gradeRange: {
|
||
fontSize: 16,
|
||
fontWeight: '700',
|
||
letterSpacing: -0.3,
|
||
},
|
||
mockDataToggle: {
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 6,
|
||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||
borderRadius: 16,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||
},
|
||
mockDataToggleText: {
|
||
fontSize: 12,
|
||
fontWeight: '600',
|
||
},
|
||
}); |