feat: 优化睡眠数据
This commit is contained in:
richarjiang
@@ -6,15 +6,14 @@ import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Animated,
|
||||
Dimensions,
|
||||
Modal,
|
||||
Pressable,
|
||||
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';
|
||||
@@ -24,195 +23,83 @@ import {
|
||||
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'
|
||||
// 简化的睡眠阶段图表组件
|
||||
const SleepStageChart = ({
|
||||
sleepData,
|
||||
onInfoPress
|
||||
}: {
|
||||
size: number;
|
||||
strokeWidth: number;
|
||||
progress: number; // 0-100
|
||||
color: string;
|
||||
backgroundColor?: string;
|
||||
sleepData: SleepDetailData;
|
||||
onInfoPress: () => void;
|
||||
}) => {
|
||||
const radius = (size - strokeWidth) / 2;
|
||||
const circumference = radius * 2 * Math.PI;
|
||||
const strokeDasharray = circumference;
|
||||
const strokeDashoffset = circumference - (progress / 100) * circumference;
|
||||
const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
|
||||
const colorTokens = Colors[theme];
|
||||
|
||||
// 使用真实的睡眠阶段数据，如果没有则使用默认数据
|
||||
const stages = sleepData.sleepStages.length > 0
|
||||
? sleepData.sleepStages
|
||||
.filter(stage => stage.percentage > 0) // 只显示有数据的阶段
|
||||
.map(stage => ({
|
||||
stage: stage.stage,
|
||||
percentage: stage.percentage,
|
||||
duration: stage.duration
|
||||
}))
|
||||
: [
|
||||
{ stage: SleepStage.Awake, percentage: 1, duration: 3 },
|
||||
{ stage: SleepStage.REM, percentage: 20, duration: 89 },
|
||||
{ stage: SleepStage.Core, percentage: 67, duration: 295 },
|
||||
{ stage: SleepStage.Deep, percentage: 12, duration: 51 }
|
||||
];
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
<View style={styles.simplifiedChartContainer}>
|
||||
<View style={styles.chartTitleContainer}>
|
||||
<Text style={styles.chartTitle}>睡眠阶段分析</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.chartInfoButton}
|
||||
onPress={onInfoPress}
|
||||
>
|
||||
<Ionicons name="help-circle-outline" size={20} color="#6B7280" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
// 睡眠阶段图表组件
|
||||
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 style={styles.sleepTimeLabels}>
|
||||
<View style={styles.sleepTimeLabel}>
|
||||
<Text style={[styles.sleepTimeText, { color: colorTokens.textSecondary }]}>
|
||||
入睡时间
|
||||
</Text>
|
||||
<Text style={[styles.sleepTimeValue, { color: colorTokens.text }]}>
|
||||
{sleepData.bedtime ? formatTime(sleepData.bedtime) : '23:15'}
|
||||
</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 style={styles.sleepTimeLabel}>
|
||||
<Text style={[styles.sleepTimeText, { color: colorTokens.textSecondary }]}>
|
||||
起床时间
|
||||
</Text>
|
||||
<Text style={[styles.sleepTimeValue, { color: colorTokens.text }]}>
|
||||
{sleepData.wakeupTime ? formatTime(sleepData.wakeupTime) : '06:52'}
|
||||
</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);
|
||||
|
||||
{/* 简化的睡眠阶段条 */}
|
||||
<View style={styles.simplifiedChartBar}>
|
||||
{stages.map((stageData, index) => {
|
||||
const color = getSleepStageColor(stageData.stage);
|
||||
return (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.sleepBlock,
|
||||
styles.stageSegment,
|
||||
{
|
||||
width: blockWidth,
|
||||
height: blockHeight,
|
||||
backgroundColor: color,
|
||||
position: 'absolute',
|
||||
left: index * (blockWidth),
|
||||
top: yPosition,
|
||||
flex: stageData.percentage || 1,
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -220,10 +107,28 @@ const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* 时间刻度 */}
|
||||
<View style={styles.chartTimeScale}>
|
||||
<Text style={styles.chartTimeScaleText}>{startTime}</Text>
|
||||
<Text style={styles.chartTimeScaleText}>{endTime}</Text>
|
||||
{/* 图例 */}
|
||||
<View style={styles.chartLegend}>
|
||||
<View style={styles.legendRow}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Awake) }]} />
|
||||
<Text style={styles.legendText}>清醒时间</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.REM) }]} />
|
||||
<Text style={styles.legendText}>快速眼动</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.legendRow}>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Core) }]} />
|
||||
<Text style={styles.legendText}>核心睡眠</Text>
|
||||
</View>
|
||||
<View style={styles.legendItem}>
|
||||
<View style={[styles.legendDot, { backgroundColor: getSleepStageColor(SleepStage.Deep) }]} />
|
||||
<Text style={styles.legendText}>深度睡眠</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@@ -283,6 +188,151 @@ const SleepGradeCard = ({
|
||||
);
|
||||
};
|
||||
|
||||
// Sleep Stages Info Modal 组件
|
||||
const SleepStagesInfoModal = ({
|
||||
visible,
|
||||
onClose
|
||||
}: {
|
||||
visible: boolean;
|
||||
onClose: () => void;
|
||||
}) => {
|
||||
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],
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal
|
||||
transparent
|
||||
visible={visible}
|
||||
animationType="none"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
<View style={styles.modalOverlay}>
|
||||
<Pressable
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
onPress={onClose}
|
||||
/>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.sleepStagesModalContent,
|
||||
{
|
||||
backgroundColor: colorTokens.background,
|
||||
transform: [{ translateY }],
|
||||
opacity,
|
||||
}
|
||||
]}
|
||||
>
|
||||
<View style={styles.sleepStagesModalInner}>
|
||||
<View style={styles.modalHandle} />
|
||||
|
||||
<View style={styles.sleepStagesModalHeader}>
|
||||
<Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
|
||||
了解你的睡眠阶段
|
||||
</Text>
|
||||
<TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
|
||||
<Ionicons name="close" size={24} color={colorTokens.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView
|
||||
style={styles.sleepStagesScrollView}
|
||||
contentContainerStyle={styles.sleepStagesScrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
bounces={true}
|
||||
scrollEnabled={true}
|
||||
>
|
||||
<Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
|
||||
人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠，其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受，你或许能深入了解自己的睡眠。
|
||||
</Text>
|
||||
|
||||
{/* 清醒时间 */}
|
||||
<View style={styles.sleepStageInfoCard}>
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
一次睡眠期间，你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡，并不记得曾在夜间醒来。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 快速动眼睡眠 */}
|
||||
<View style={styles.sleepStageInfoCard}>
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段，你的肌肉最为放松，眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 核心睡眠 */}
|
||||
<View style={styles.sleepStageInfoCard}>
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
这一阶段有时也称为浅睡期，与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 深度睡眠 */}
|
||||
<View style={styles.sleepStageInfoCard}>
|
||||
<View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
|
||||
<View style={styles.sleepStageInfoTitleContainer}>
|
||||
<View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
|
||||
<Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
|
||||
因为脑电波的特征，这一阶段也称为慢波睡眠。在此阶段，身体组织得到修复，并释放重要荷尔蒙。它通常出现在睡眠的前半段，且持续时间较长。深度睡眠期间，身体非常放松，因此相较于其他阶段，你可能更难在此阶段醒来。
|
||||
</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// Info Modal 组件
|
||||
const InfoModal = ({
|
||||
visible,
|
||||
@@ -441,6 +491,10 @@ export default function SleepDetailScreen() {
|
||||
type: null
|
||||
});
|
||||
|
||||
const [sleepStagesModal, setSleepStagesModal] = useState({
|
||||
visible: false
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadSleepData();
|
||||
}, [selectedDate]);
|
||||
@@ -511,6 +565,8 @@ export default function SleepDetailScreen() {
|
||||
transparent={true}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<ScrollView
|
||||
style={styles.scrollView}
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
@@ -518,18 +574,9 @@ export default function SleepDetailScreen() {
|
||||
>
|
||||
{/* 睡眠得分圆形显示 */}
|
||||
<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 style={styles.scoreTextContainer}>
|
||||
<Text style={styles.scoreNumber}>{displayData.sleepScore}</Text>
|
||||
<Text style={styles.scoreLabel}>睡眠得分</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -539,6 +586,26 @@ export default function SleepDetailScreen() {
|
||||
{/* 建议文本 */}
|
||||
<Text style={styles.recommendationText}>{displayData.recommendation}</Text>
|
||||
|
||||
{/* 调试信息 - 仅在开发模式下显示 */}
|
||||
{__DEV__ && sleepData && sleepData.rawSleepSamples.length > 0 && (
|
||||
<View style={[styles.debugContainer, { backgroundColor: colorTokens.pageBackgroundEmphasis }]}>
|
||||
<Text style={[styles.debugTitle, { color: colorTokens.text }]}>
|
||||
调试信息 ({sleepData.rawSleepSamples.length} 个睡眠样本)
|
||||
</Text>
|
||||
<Text style={[styles.debugText, { color: colorTokens.textSecondary }]}>
|
||||
原始睡眠样本类型: {[...new Set(sleepData.rawSleepSamples.map(s => s.value))].join(', ')}
|
||||
</Text>
|
||||
<Text style={[styles.debugText, { color: colorTokens.textSecondary }]}>
|
||||
时间范围: {sleepData.rawSleepSamples.length > 0 ?
|
||||
`${formatTime(sleepData.rawSleepSamples[0].startDate)} - ${formatTime(sleepData.rawSleepSamples[sleepData.rawSleepSamples.length - 1].endDate)}` :
|
||||
'无数据'}
|
||||
</Text>
|
||||
<Text style={[styles.debugText, { color: colorTokens.textSecondary }]}>
|
||||
在床时长: {displayData.timeInBed > 0 ? formatSleepTime(displayData.timeInBed) : '未知'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 睡眠统计卡片 */}
|
||||
<View style={styles.statsContainer}>
|
||||
<View style={[styles.newStatCard, { backgroundColor: colorTokens.background }]}>
|
||||
@@ -597,86 +664,77 @@ export default function SleepDetailScreen() {
|
||||
</View>
|
||||
|
||||
{/* 睡眠阶段图表 */}
|
||||
<SleepStageChart sleepData={displayData} />
|
||||
<SleepStageChart
|
||||
sleepData={displayData}
|
||||
onInfoPress={() => setSleepStagesModal({ visible: true })}
|
||||
/>
|
||||
|
||||
{/* 睡眠阶段统计 */}
|
||||
<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' ? '一般' : '偏低'}
|
||||
{/* 睡眠阶段统计 - 2x2网格布局 */}
|
||||
<View style={styles.stagesGridContainer}>
|
||||
{/* 使用真实数据或默认数据，确保包含所有4个阶段 */}
|
||||
{(() => {
|
||||
let stagesToDisplay;
|
||||
if (displayData.sleepStages.length > 0) {
|
||||
// 使用真实数据，确保所有阶段都存在
|
||||
const existingStages = new Map(displayData.sleepStages.map(s => [s.stage, s]));
|
||||
stagesToDisplay = [
|
||||
existingStages.get(SleepStage.Awake) || { stage: SleepStage.Awake, duration: 0, percentage: 0, quality: 'good' as any },
|
||||
existingStages.get(SleepStage.REM) || { stage: SleepStage.REM, duration: 0, percentage: 0, quality: 'good' as any },
|
||||
existingStages.get(SleepStage.Core) || { stage: SleepStage.Core, duration: 0, percentage: 0, quality: 'good' as any },
|
||||
existingStages.get(SleepStage.Deep) || { stage: SleepStage.Deep, duration: 0, percentage: 0, quality: 'good' as any }
|
||||
];
|
||||
} else {
|
||||
// 使用默认数据
|
||||
stagesToDisplay = [
|
||||
{ stage: SleepStage.Awake, duration: 3, percentage: 1, quality: 'good' as any },
|
||||
{ stage: SleepStage.REM, duration: 89, percentage: 20, quality: 'good' as any },
|
||||
{ stage: SleepStage.Core, duration: 295, percentage: 67, quality: 'good' as any },
|
||||
{ stage: SleepStage.Deep, duration: 51, percentage: 12, quality: 'poor' as any }
|
||||
];
|
||||
}
|
||||
return stagesToDisplay;
|
||||
})().map((stageData, index) => {
|
||||
const getStageName = (stage: SleepStage) => {
|
||||
switch (stage) {
|
||||
case SleepStage.Awake: return '清醒时间';
|
||||
case SleepStage.REM: return '快速眼动';
|
||||
case SleepStage.Core: return '核心睡眠';
|
||||
case SleepStage.Deep: return '深度睡眠';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const getQualityDisplay = (quality: any) => {
|
||||
switch (quality) {
|
||||
case 'excellent': return { text: '★ 优秀', color: '#10B981', bgColor: '#D1FAE5', progressColor: '#10B981', progressWidth: '100%' };
|
||||
case 'good': return { text: '✓ 良好', color: '#065F46', bgColor: '#D1FAE5', progressColor: '#10B981', progressWidth: '85%' };
|
||||
case 'fair': return { text: '○ 一般', color: '#92400E', bgColor: '#FEF3C7', progressColor: '#F59E0B', progressWidth: '65%' };
|
||||
case 'poor': return { text: '⚠ 低', color: '#DC2626', bgColor: '#FECACA', progressColor: '#F59E0B', progressWidth: '45%' };
|
||||
default: return { text: '✓ 正常', color: '#065F46', bgColor: '#D1FAE5', progressColor: '#10B981', progressWidth: '75%' };
|
||||
}
|
||||
};
|
||||
|
||||
const qualityInfo = getQualityDisplay(stageData.quality);
|
||||
|
||||
return (
|
||||
<View key={index} style={[styles.stageCard, { backgroundColor: colorTokens.background }]}>
|
||||
<Text style={[styles.stageCardTitle, { color: getSleepStageColor(stageData.stage) }]}>
|
||||
{getStageName(stageData.stage)}
|
||||
</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>
|
||||
<Text style={[styles.stageCardValue, { color: colorTokens.text }]}>
|
||||
{formatSleepTime(stageData.duration)}
|
||||
</Text>
|
||||
<Text style={[styles.stageCardPercentage, { color: colorTokens.textSecondary }]}>
|
||||
占总体睡眠的 {stageData.percentage}%
|
||||
</Text>
|
||||
<View style={[styles.stageCardQuality, { backgroundColor: qualityInfo.bgColor }]}>
|
||||
<Text style={[styles.stageCardQualityText, { color: qualityInfo.color }]}>
|
||||
{qualityInfo.text}
|
||||
</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>
|
||||
|
||||
@@ -689,6 +747,11 @@ export default function SleepDetailScreen() {
|
||||
sleepData={displayData}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SleepStagesInfoModal
|
||||
visible={sleepStagesModal.visible}
|
||||
onClose={() => setSleepStagesModal({ visible: false })}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -714,7 +777,6 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
scoreContainer: {
|
||||
alignItems: 'center',
|
||||
marginVertical: 20,
|
||||
},
|
||||
circularProgressContainer: {
|
||||
position: 'relative',
|
||||
@@ -722,7 +784,6 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
},
|
||||
scoreTextContainer: {
|
||||
position: 'absolute',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
@@ -1097,4 +1158,234 @@ const styles = StyleSheet.create({
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
// 简化睡眠阶段图表样式
|
||||
simplifiedChartContainer: {
|
||||
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,
|
||||
},
|
||||
chartTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
chartTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#1F2937',
|
||||
},
|
||||
chartInfoButton: {
|
||||
padding: 4,
|
||||
},
|
||||
simplifiedChartBar: {
|
||||
flexDirection: 'row',
|
||||
height: 24,
|
||||
borderRadius: 12,
|
||||
overflow: 'hidden',
|
||||
marginBottom: 16,
|
||||
},
|
||||
stageSegment: {
|
||||
height: '100%',
|
||||
},
|
||||
chartLegend: {
|
||||
gap: 8,
|
||||
},
|
||||
legendRow: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
legendItem: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
legendDot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
marginRight: 6,
|
||||
},
|
||||
legendText: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
fontWeight: '500',
|
||||
},
|
||||
// 睡眠阶段卡片网格样式
|
||||
stagesGridContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
gap: 12,
|
||||
paddingHorizontal: 4,
|
||||
},
|
||||
stageCard: {
|
||||
width: '48%',
|
||||
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)',
|
||||
},
|
||||
stageCardTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
marginBottom: 8,
|
||||
},
|
||||
stageCardValue: {
|
||||
fontSize: 24,
|
||||
fontWeight: '700',
|
||||
lineHeight: 28,
|
||||
marginBottom: 4,
|
||||
},
|
||||
stageCardPercentage: {
|
||||
fontSize: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
stageCardQuality: {
|
||||
paddingHorizontal: 8,
|
||||
paddingVertical: 4,
|
||||
borderRadius: 8,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
normalQuality: {
|
||||
backgroundColor: '#D1FAE5',
|
||||
},
|
||||
lowQuality: {
|
||||
backgroundColor: '#FECACA',
|
||||
},
|
||||
stageCardQualityText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
},
|
||||
normalQualityText: {
|
||||
color: '#065F46',
|
||||
},
|
||||
lowQualityText: {
|
||||
color: '#DC2626',
|
||||
},
|
||||
stageCardProgress: {
|
||||
height: 6,
|
||||
backgroundColor: '#E5E7EB',
|
||||
borderRadius: 3,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
stageCardProgressBar: {
|
||||
height: '100%',
|
||||
borderRadius: 3,
|
||||
},
|
||||
// Sleep Stages Modal 样式
|
||||
sleepStagesModalContent: {
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
height: '80%',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.1,
|
||||
shadowRadius: 16,
|
||||
elevation: 8,
|
||||
},
|
||||
sleepStagesModalInner: {
|
||||
flex: 1,
|
||||
paddingTop: 12,
|
||||
paddingHorizontal: 20,
|
||||
paddingBottom: 34,
|
||||
},
|
||||
sleepStagesModalHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
sleepStagesModalTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
letterSpacing: -0.4,
|
||||
},
|
||||
sleepStagesScrollView: {
|
||||
flex: 1,
|
||||
},
|
||||
sleepStagesScrollContent: {
|
||||
paddingBottom: 40,
|
||||
},
|
||||
sleepStagesDescription: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
letterSpacing: -0.1,
|
||||
marginBottom: 24,
|
||||
},
|
||||
sleepStageInfoCard: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
sleepStageInfoHeader: {
|
||||
paddingBottom: 12,
|
||||
marginBottom: 12,
|
||||
},
|
||||
sleepStageInfoTitleContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
},
|
||||
sleepStageDot: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderRadius: 6,
|
||||
},
|
||||
sleepStageInfoTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
letterSpacing: -0.2,
|
||||
},
|
||||
sleepStageInfoContent: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
letterSpacing: -0.1,
|
||||
},
|
||||
// 睡眠时间标签样式
|
||||
sleepTimeLabels: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 16,
|
||||
},
|
||||
sleepTimeLabel: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
sleepTimeText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
marginBottom: 4,
|
||||
},
|
||||
sleepTimeValue: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
letterSpacing: -0.2,
|
||||
},
|
||||
// 调试信息样式
|
||||
debugContainer: {
|
||||
marginHorizontal: 20,
|
||||
marginBottom: 20,
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
debugTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
marginBottom: 8,
|
||||
},
|
||||
debugText: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
marginBottom: 4,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user