569 lines
15 KiB
TypeScript
569 lines
15 KiB
TypeScript
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',
|
||
},
|
||
}); |