richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新睡眠详情页面，集成真实睡眠数据生成逻辑，优化睡眠阶段图表展示，添加睡眠样本数据处理功能，提升用户体验

Browse Source
This commit is contained in:
richarjiang
2025-09-08 19:26:02 +08:00
parent bf3304eb06
commit 1de4b9fe4c
3 changed files with 270 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

233
app/sleep-detail.tsx
View File

@@ -25,6 +25,7 @@ import {
formatTime,
getSleepStageColor,
getSleepStageDisplayName,
convertSleepSamplesToIntervals,
SleepDetailData,
SleepStage
} from '@/services/sleepService';
@@ -81,65 +82,149 @@ const CircularProgress = ({
// 睡眠阶段图表组件
const SleepStageChart = ({ sleepData }: { sleepData: SleepDetailData }) => {
const chartWidth = width - 80;
const maxHeight = 120;
const chartHeight = 120;
const coreBaselineHeight = chartHeight * 0.6; // 核心睡眠作为基准线
const blockHeight = 20; // 每个睡眠阶段块的固定高度
// 生成24小时的睡眠阶段数据（模拟数据，实际应根据真实样本计算）
const hourlyData = Array.from({ length: 24 }, (_, hour) => {
// 如果没有数据，显示空状态
// 使用真实的 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 null;
return { startTime: '--:--', endTime: '--:--' };
}
// 根据时间判断可能的睡眠状态，包括清醒时间段
if (hour >= 0 && hour <= 6) {
// 凌晨0-6点，主要睡眠时间，包含一些清醒时段
if (hour <= 1) return SleepStage.Core;
if (hour === 2) return SleepStage.Awake; // 添加清醒时间段
if (hour <= 4) return SleepStage.Deep;
if (hour === 5) return SleepStage.Awake; // 添加清醒时间段
return SleepStage.REM;
} else if (hour >= 22) {
// 晚上10点后开始入睡
if (hour === 23) return SleepStage.Awake; // 入睡前的清醒时间
return SleepStage.Core;
}
return null; // 白天清醒时间
});
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}>🛏️ {sleepData.totalSleepTime > 0 ? formatTime(sleepData.bedtime) : '--:--'}</Text>
<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}>☀️ {sleepData.totalSleepTime > 0 ? formatTime(sleepData.wakeupTime) : '--:--'}</Text>
<Text style={styles.chartTimeText}>☀️ {endTime}</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';
{/* 分层睡眠阶段图表 */}
<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.chartBar,
styles.sleepBlock,
{
height: barHeight * maxHeight,
width: blockWidth,
height: blockHeight,
backgroundColor: color,
width: chartWidth / 24 - 2,
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>
);
};
@@ -161,8 +246,8 @@ const SleepGradeCard = ({
const getGradeColor = (grade: string) => {
switch (grade) {
case '低': return { bg: '#FECACA', text: '#DC2626' };
case '正常': return { bg: '#D1FAE5', text: '#065F46' };
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 };
@@ -180,7 +265,7 @@ const SleepGradeCard = ({
}
]}>
<View style={styles.gradeCardLeft}>
<Text style={[styles.gradeIcon, { color: colors.text }]}>{icon}</Text>
<Ionicons name={icon as any} size={16} color={colors.text} />
<Text style={[
styles.gradeText,
{ color: isActive ? colors.text : colorTokens.textSecondary }
@@ -203,12 +288,14 @@ const InfoModal = ({
visible,
onClose,
title,
type
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];
@@ -244,18 +331,39 @@ const InfoModal = ({
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: '⚠️', grade: '低', range: '< 6h', isActive: false },
{ icon: '✅', grade: '正常', range: '6h - 7h or > 9h', isActive: false },
{ icon: '✅', grade: '良好', range: '7h - 8h', isActive: true },
{ icon: '⭐', grade: '优秀', range: '8h - 9h', isActive: false },
{ 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: '⚠️', grade: '较差', range: '< 55%', isActive: false },
{ icon: '✅', grade: '一般', range: '55% - 69%', isActive: false },
{ icon: '✅', grade: '良好', range: '70% - 84%', isActive: false },
{ icon: '⭐', grade: '优秀', range: '85% - 100%', isActive: true },
{ 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;
@@ -326,6 +434,7 @@ export default function SleepDetailScreen() {
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: '',
@@ -376,6 +485,7 @@ export default function SleepDetailScreen() {
wakeupTime: new Date().toISOString(),
timeInBed: 0,
sleepStages: [],
rawSleepSamples: [], // 添加空的原始睡眠样本数据
averageHeartRate: null,
sleepHeartRateData: [],
sleepEfficiency: 0,
@@ -576,6 +686,7 @@ export default function SleepDetailScreen() {
onClose={() => setInfoModal({ ...infoModal, visible: false })}
title={infoModal.title}
type={infoModal.type}
sleepData={displayData}
/>
)}
</View>
@@ -788,6 +899,31 @@ const styles = StyleSheet.create({
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,
@@ -939,9 +1075,6 @@ const styles = StyleSheet.create({
alignItems: 'center',
gap: 8,
},
gradeIcon: {
fontSize: 16,
},
gradeText: {
fontSize: 16,
fontWeight: '600',
@@ -952,4 +1085,16 @@ const styles = StyleSheet.create({
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',
},
});

8
services/backgroundTaskManager.ts
View File

@@ -163,10 +163,10 @@ async function executeBackgroundTasks(): Promise<void> {
}
// 执行喝水提醒检查任务
executeWaterReminderTask();
await executeWaterReminderTask();
// 执行站立提醒检查任务
executeStandReminderTask();
await executeStandReminderTask();
console.log('后台任务执行完成');
} catch (error) {
@@ -200,7 +200,9 @@ export class BackgroundTaskManager {
try {
// 注册后台任务
const status = await BackgroundTask.registerTaskAsync(BACKGROUND_TASK_IDENTIFIER);
const status = await BackgroundTask.registerTaskAsync(BACKGROUND_TASK_IDENTIFIER, {
minimumInterval: 15,
});
console.log('[BackgroundTask] 配置状态:', status);

77
services/sleepService.ts
View File

@@ -57,6 +57,9 @@ export type SleepDetailData = {
// 睡眠阶段统计
sleepStages: SleepStageStats[];
// 原始睡眠样本数据（用于图表显示）
rawSleepSamples: SleepSample[];
// 心率数据
averageHeartRate: number | null; // 平均心率
sleepHeartRateData: HeartRateData[]; // 睡眠期间心率数据
@@ -96,7 +99,19 @@ async function fetchSleepSamples(date: Date): Promise<SleepSample[]> {
return;
}
// 添加详细日志，了解实际获取到的数据类型
console.log('获取到睡眠样本:', results.length);
console.log('睡眠样本详情:', results.map(r => ({
value: r.value,
start: r.startDate?.substring(11, 16),
end: r.endDate?.substring(11, 16),
duration: `${Math.round((new Date(r.endDate).getTime() - new Date(r.startDate).getTime()) / 60000)}min`
})));
// 检查可用的睡眠阶段类型
const uniqueValues = [...new Set(results.map(r => r.value))];
console.log('可用的睡眠阶段类型:', uniqueValues);
resolve(results as unknown as SleepSample[]);
});
});
@@ -274,7 +289,6 @@ export function getSleepStageColor(stage: SleepStage): string {
case SleepStage.Core:
return '#3B82F6'; // 蓝色
case SleepStage.REM:
return '#8B5CF6'; // 紫色
case SleepStage.Asleep:
return '#06B6D4'; // 青色
case SleepStage.Awake:
@@ -340,6 +354,7 @@ export async function fetchSleepDetailForDate(date: Date): Promise<SleepDetailDa
wakeupTime,
timeInBed,
sleepStages,
rawSleepSamples: sleepSamples, // 保存原始睡眠样本数据
averageHeartRate,
sleepHeartRateData,
sleepEfficiency,
@@ -374,3 +389,63 @@ export function formatSleepTime(minutes: number): string {
export function formatTime(dateString: string): string {
return dayjs(dateString).format('HH:mm');
}
// 将睡眠样本数据转换为15分钟间隔的睡眠阶段数据
export function convertSleepSamplesToIntervals(sleepSamples: SleepSample[], bedtime: string, wakeupTime: string): { time: string; stage: SleepStage }[] {
const data: { time: string; stage: SleepStage }[] = [];
if (sleepSamples.length === 0) {
console.log('没有睡眠样本数据可用于图表显示');
return [];
}
// 过滤掉InBed阶段，只保留实际睡眠阶段
const sleepOnlySamples = sleepSamples.filter(sample =>
sample.value !== SleepStage.InBed
);
if (sleepOnlySamples.length === 0) {
console.log('只有InBed数据，没有详细睡眠阶段数据');
return [];
}
console.log('处理睡眠阶段数据 - 样本数量:', sleepOnlySamples.length);
console.log('时间范围:', formatTime(bedtime), '-', formatTime(wakeupTime));
const startTime = dayjs(bedtime);
const endTime = dayjs(wakeupTime);
let currentTime = startTime.clone();
// 创建一个映射，用于快速查找每个时间点的睡眠阶段
while (currentTime.isBefore(endTime)) {
const currentTimestamp = currentTime.toDate().getTime();
// 找到当前时间点对应的睡眠阶段
let currentStage = SleepStage.Awake; // 默认为清醒
for (const sample of sleepOnlySamples) {
const sampleStart = new Date(sample.startDate).getTime();
const sampleEnd = new Date(sample.endDate).getTime();
// 如果当前时间在这个样本的时间范围内
if (currentTimestamp >= sampleStart && currentTimestamp < sampleEnd) {
currentStage = sample.value;
break;
}
}
const timeStr = currentTime.format('HH:mm');
data.push({ time: timeStr, stage: currentStage });
// 移动到下一个15分钟间隔
currentTime = currentTime.add(15, 'minute');
}
console.log('生成的睡眠阶段间隔数据点数量:', data.length);
console.log('阶段分布:', data.reduce((acc, curr) => {
acc[curr.stage] = (acc[curr.stage] || 0) + 1;
return acc;
}, {} as Record<string, number>));
return data;
}