feat: Update Podfile.lock to include NitroModules and ReactNativeHealthkit dependencies

fix: Adjust objectVersion in project.pbxproj and improve WaterWidget folder exception handling refactor: Remove sleepService.ts as part of code cleanup chore: Comment out HealthKit initialization in health.ts and clean up fetchSleepDuration function
2025-09-09 19:27:19 +08:00
parent 6daf9500fc
commit a7f5379d5a
5 changed files with 583 additions and 604 deletions
--- a/app/sleep-detail.tsx
+++ b/app/sleep-detail.tsx
@@ -1,8 +1,14 @@
 import { Ionicons } from '@expo/vector-icons';
+import {
+  AuthorizationRequestStatus,
+  queryCategorySamplesWithAnchor,
+  queryQuantitySamplesWithAnchor,
+  useHealthkitAuthorization
+} from '@kingstinct/react-native-healthkit';
 import dayjs from 'dayjs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
  ActivityIndicator,
  Animated,
@@ -18,17 +24,431 @@ import {
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import {
-  fetchSleepDetailForDate,
-  formatSleepTime,
-  formatTime,
-  getSleepStageColor,
-  SleepDetailData,
-  SleepStage
-} from '@/services/sleepService';
-import { ensureHealthPermissions } from '@/utils/health';


+// 睡眠阶段枚举
+enum SleepStage {
+  InBed = 'INBED',
+  Asleep = 'ASLEEP',
+  Awake = 'AWAKE',
+  Core = 'CORE',
+  Deep = 'DEEP',
+  REM = 'REM'
+}
+
+// 睡眠质量评级
+enum SleepQuality {
+  Poor = 'poor',
+  Fair = 'fair',
+  Good = 'good',
+  Excellent = 'excellent'
+}
+
+// 睡眠样本数据类型
+type SleepSample = {
+  startDate: string;
+  endDate: string;
+  value: SleepStage;
+  sourceName?: string;
+  sourceId?: string;
+};
+
+// 睡眠阶段统计
+type SleepStageStats = {
+  stage: SleepStage;
+  duration: number;
+  percentage: number;
+  quality: SleepQuality;
+};
+
+// 心率数据类型
+type HeartRateData = {
+  timestamp: string;
+  value: number;
+};
+
+// 睡眠详情数据类型
+type SleepDetailData = {
+  sleepScore: number;
+  totalSleepTime: number;
+  sleepQualityPercentage: number;
+  bedtime: string;
+  wakeupTime: string;
+  timeInBed: number;
+  sleepStages: SleepStageStats[];
+  rawSleepSamples: SleepSample[];
+  averageHeartRate: number | null;
+  sleepHeartRateData: HeartRateData[];
+  sleepEfficiency: number;
+  qualityDescription: string;
+  recommendation: string;
+};
+
+// 工具函数
+const formatSleepTime = (minutes: number): string => {
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (hours > 0 && mins > 0) {
+    return `${hours}h ${mins}m`;
+  } else if (hours > 0) {
+    return `${hours}h`;
+  } else {
+    return `${mins}m`;
+  }
+};
+
+const formatTime = (dateString: string): string => {
+  return dayjs(dateString).format('HH:mm');
+};
+
+const getSleepStageColor = (stage: SleepStage): string => {
+  switch (stage) {
+    case SleepStage.Deep:
+      return '#3B82F6';
+    case SleepStage.Core:
+      return '#8B5CF6';
+    case SleepStage.REM:
+    case SleepStage.Asleep:
+      return '#EC4899';
+    case SleepStage.Awake:
+      return '#F59E0B';
+    case SleepStage.InBed:
+      return '#6B7280';
+    default:
+      return '#9CA3AF';
+  }
+};
+
+// 创建睡眠日期范围
+const createSleepDateRange = (date: Date): { startDate: Date; endDate: Date } => {
+  return {
+    startDate: dayjs(date).subtract(1, 'day').hour(18).minute(0).second(0).millisecond(0).toDate(),
+    endDate: dayjs(date).hour(12).minute(0).second(0).millisecond(0).toDate()
+  };
+};
+
+// 获取睡眠样本数据
+const fetchSleepSamples = async (date: Date): Promise<SleepSample[]> => {
+  try {
+    const options = createSleepDateRange(date);
+
+    // 使用 queryCategorySamplesWithAnchor 查询睡眠分析数据
+    const { samples } = await queryCategorySamplesWithAnchor('HKCategoryTypeIdentifierSleepAnalysis', {
+      limit: 0,
+      filter: {
+        startDate: options.startDate,
+        endDate: options.endDate,
+        strictStartDate: true,
+        strictEndDate: true
+      }
+    });
+
+    if (!samples || !Array.isArray(samples)) {
+      console.warn('睡眠样本数据为空');
+      return [];
+    }
+
+    // 过滤指定日期范围内的样本
+    const startTime = new Date(options.startDate).getTime();
+    const endTime = new Date(options.endDate).getTime();
+
+    const filteredSamples = samples.filter(sample => {
+      const sampleStart = new Date(sample.startDate).getTime();
+      const sampleEnd = new Date(sample.endDate).getTime();
+      return (sampleStart >= startTime && sampleStart < endTime) ||
+        (sampleStart < endTime && sampleEnd > startTime);
+    });
+
+    console.log(`过滤前样本数量: ${samples.length}, 过滤后样本数量: ${filteredSamples.length}`);
+
+    // 转换数据格式
+    const sleepSamples: SleepSample[] = filteredSamples.map(sample => {
+      let mappedValue: SleepStage;
+
+      // HealthKit 睡眠分析值映射
+      switch (sample.value) {
+        case 0:
+          mappedValue = SleepStage.InBed;
+          break;
+        case 1:
+          mappedValue = SleepStage.Asleep;
+          break;
+        case 2:
+          mappedValue = SleepStage.Awake;
+          break;
+        case 3:
+          mappedValue = SleepStage.Core;
+          break;
+        case 4:
+          mappedValue = SleepStage.Deep;
+          break;
+        case 5:
+          mappedValue = SleepStage.REM;
+          break;
+        default:
+          mappedValue = SleepStage.Asleep;
+      }
+
+      return {
+        startDate: sample.startDate,
+        endDate: sample.endDate,
+        value: mappedValue,
+        sourceName: sample.sourceName,
+        sourceId: sample.uuid
+      };
+    });
+
+    console.log('获取到睡眠样本:', sleepSamples.length);
+    return sleepSamples;
+
+  } catch (error) {
+    console.error('获取睡眠样本失败:', error);
+    return [];
+  }
+};
+
+// 获取睡眠期间心率数据
+const fetchSleepHeartRateData = async (bedtime: string, wakeupTime: string): Promise<HeartRateData[]> => {
+  try {
+    const { samples } = await queryQuantitySamplesWithAnchor('HKQuantityTypeIdentifierHeartRate', {
+      limit: 0
+    });
+
+    if (!samples || !Array.isArray(samples)) {
+      return [];
+    }
+
+    const bedtimeMs = new Date(bedtime).getTime();
+    const wakeupTimeMs = new Date(wakeupTime).getTime();
+
+    const sleepHeartRateData: HeartRateData[] = samples
+      .filter(sample => {
+        const sampleTime = new Date(sample.startDate).getTime();
+        return sampleTime >= bedtimeMs && sampleTime <= wakeupTimeMs;
+      })
+      .map(sample => ({
+        timestamp: sample.startDate,
+        value: Math.round(sample.quantity)
+      }))
+      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+
+    console.log('获取到睡眠心率数据:', sleepHeartRateData.length, '个样本');
+    return sleepHeartRateData;
+
+  } catch (error) {
+    console.error('获取睡眠心率数据失败:', error);
+    return [];
+  }
+};
+
+// 计算睡眠阶段统计
+const calculateSleepStageStats = (samples: SleepSample[]): SleepStageStats[] => {
+  const stageMap = new Map<SleepStage, number>();
+
+  samples.forEach(sample => {
+    const startTime = dayjs(sample.startDate);
+    const endTime = dayjs(sample.endDate);
+    const duration = endTime.diff(startTime, 'minute');
+
+    const currentDuration = stageMap.get(sample.value) || 0;
+    stageMap.set(sample.value, currentDuration + duration);
+  });
+
+  const actualSleepTime = Array.from(stageMap.entries())
+    .reduce((total, [, duration]) => total + duration, 0);
+
+  const stats: SleepStageStats[] = [];
+
+  stageMap.forEach((duration, stage) => {
+    if (stage === SleepStage.InBed) return;
+
+    const percentage = actualSleepTime > 0 ? (duration / actualSleepTime) * 100 : 0;
+    let quality: SleepQuality;
+
+    switch (stage) {
+      case SleepStage.Deep:
+        quality = percentage >= 15 ? SleepQuality.Excellent :
+          percentage >= 10 ? SleepQuality.Good :
+            percentage >= 5 ? SleepQuality.Fair : SleepQuality.Poor;
+        break;
+      case SleepStage.REM:
+        quality = percentage >= 20 ? SleepQuality.Excellent :
+          percentage >= 15 ? SleepQuality.Good :
+            percentage >= 10 ? SleepQuality.Fair : SleepQuality.Poor;
+        break;
+      case SleepStage.Core:
+        quality = percentage >= 45 ? SleepQuality.Excellent :
+          percentage >= 35 ? SleepQuality.Good :
+            percentage >= 25 ? SleepQuality.Fair : SleepQuality.Poor;
+        break;
+      case SleepStage.Awake:
+        quality = percentage <= 5 ? SleepQuality.Excellent :
+          percentage <= 10 ? SleepQuality.Good :
+            percentage <= 15 ? SleepQuality.Fair : SleepQuality.Poor;
+        break;
+      default:
+        quality = SleepQuality.Fair;
+    }
+
+    stats.push({
+      stage,
+      duration,
+      percentage: Math.round(percentage),
+      quality
+    });
+  });
+
+  return stats.sort((a, b) => b.duration - a.duration);
+};
+
+// 计算睡眠得分
+const calculateSleepScore = (sleepStages: SleepStageStats[], sleepEfficiency: number, totalSleepTime: number): number => {
+  let score = 0;
+
+  const idealSleepHours = 8 * 60;
+  const sleepDurationScore = Math.min(30, (totalSleepTime / idealSleepHours) * 30);
+  score += sleepDurationScore;
+
+  const efficiencyScore = (sleepEfficiency / 100) * 25;
+  score += efficiencyScore;
+
+  const deepSleepStage = sleepStages.find(stage => stage.stage === SleepStage.Deep);
+  const deepSleepScore = deepSleepStage ? Math.min(25, (deepSleepStage.percentage / 20) * 25) : 0;
+  score += deepSleepScore;
+
+  const remSleepStage = sleepStages.find(stage => stage.stage === SleepStage.REM);
+  const remSleepScore = remSleepStage ? Math.min(20, (remSleepStage.percentage / 25) * 20) : 0;
+  score += remSleepScore;
+
+  return Math.round(Math.min(100, score));
+};
+
+// 获取睡眠质量描述和建议
+const getSleepQualityInfo = (sleepScore: number): { description: string; recommendation: string } => {
+  if (sleepScore >= 85) {
+    return {
+      description: '你身心愉悦并且精力充沛',
+      recommendation: '恭喜你获得优质的睡眠！如果你感到精力充沛，可以考虑中等强度的运动，以维持健康的生活方式，并进一步减轻压力，以获得最佳睡眠。'
+    };
+  } else if (sleepScore >= 70) {
+    return {
+      description: '睡眠质量良好，精神状态不错',
+      recommendation: '你的睡眠质量还不错，但还有改善空间。建议保持规律的睡眠时间，睡前避免使用电子设备，营造安静舒适的睡眠环境。'
+    };
+  } else if (sleepScore >= 50) {
+    return {
+      description: '睡眠质量一般，可能影响日间表现',
+      recommendation: '你的睡眠需要改善。建议制定固定的睡前例行程序，限制咖啡因摄入，确保卧室温度适宜，考虑进行轻度运动来改善睡眠质量。'
+    };
+  } else {
+    return {
+      description: '睡眠质量较差，建议重视睡眠健康',
+      recommendation: '你的睡眠质量需要严重关注。建议咨询医生或睡眠专家，检查是否有睡眠障碍，同时改善睡眠环境和习惯，避免睡前刺激性活动。'
+    };
+  }
+};
+
+// 主函数：获取完整的睡眠详情数据
+const fetchSleepDetailData = async (date: Date): Promise<SleepDetailData | null> => {
+  try {
+    console.log('开始获取睡眠详情数据...', date);
+
+    const sleepSamples = await fetchSleepSamples(date);
+
+    if (sleepSamples.length === 0) {
+      console.warn('没有找到睡眠数据');
+      return null;
+    }
+
+    let bedtime: string;
+    let wakeupTime: string;
+
+    if (sleepSamples.length > 0) {
+      const sortedSamples = sleepSamples.sort((a, b) =>
+        new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+      );
+
+      bedtime = sortedSamples[0].startDate;
+      wakeupTime = sortedSamples[sortedSamples.length - 1].endDate;
+
+      console.log('计算入睡和起床时间:');
+      console.log('- 入睡时间:', dayjs(bedtime).format('YYYY-MM-DD HH:mm:ss'));
+      console.log('- 起床时间:', dayjs(wakeupTime).format('YYYY-MM-DD HH:mm:ss'));
+    } else {
+      console.warn('没有找到睡眠样本数据');
+      return null;
+    }
+
+    // 计算在床时间
+    let timeInBed: number;
+    const inBedSamples = sleepSamples.filter(sample => sample.value === SleepStage.InBed);
+
+    if (inBedSamples.length > 0) {
+      const sortedInBedSamples = inBedSamples.sort((a, b) =>
+        new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+      );
+
+      const inBedStart = sortedInBedSamples[0].startDate;
+      const inBedEnd = sortedInBedSamples[sortedInBedSamples.length - 1].endDate;
+      timeInBed = dayjs(inBedEnd).diff(dayjs(inBedStart), 'minute');
+
+      console.log('在床时间计算:');
+      console.log('- 上床时间:', dayjs(inBedStart).format('YYYY-MM-DD HH:mm:ss'));
+      console.log('- 离床时间:', dayjs(inBedEnd).format('YYYY-MM-DD HH:mm:ss'));
+      console.log('- 在床时长:', timeInBed, '分钟');
+    } else {
+      timeInBed = dayjs(wakeupTime).diff(dayjs(bedtime), 'minute');
+      console.log('没有INBED数据，使用睡眠时间作为在床时间:', timeInBed, '分钟');
+    }
+
+    // 计算睡眠阶段统计
+    const sleepStages = calculateSleepStageStats(sleepSamples);
+    const totalSleepTime = sleepStages.reduce((total, stage) => total + stage.duration, 0);
+    const sleepEfficiency = timeInBed > 0 ? Math.round((totalSleepTime / timeInBed) * 100) : 0;
+
+    // 获取睡眠期间心率数据
+    const sleepHeartRateData = await fetchSleepHeartRateData(bedtime, wakeupTime);
+    const averageHeartRate = sleepHeartRateData.length > 0 ?
+      Math.round(sleepHeartRateData.reduce((sum, data) => sum + data.value, 0) / sleepHeartRateData.length) :
+      null;
+
+    // 计算睡眠得分
+    const sleepScore = calculateSleepScore(sleepStages, sleepEfficiency, totalSleepTime);
+    const qualityInfo = getSleepQualityInfo(sleepScore);
+
+    console.log('=== 睡眠数据处理结果 ===');
+    console.log('时间范围:', dayjs(bedtime).format('HH:mm'), '-', dayjs(wakeupTime).format('HH:mm'));
+    console.log('在床时间:', timeInBed, '分钟');
+    console.log('总睡眠时间:', totalSleepTime, '分钟');
+    console.log('睡眠效率:', sleepEfficiency, '%');
+    console.log('睡眠得分:', sleepScore);
+    console.log('========================');
+
+    const sleepDetailData: SleepDetailData = {
+      sleepScore,
+      totalSleepTime,
+      sleepQualityPercentage: sleepScore,
+      bedtime,
+      wakeupTime,
+      timeInBed,
+      sleepStages,
+      rawSleepSamples: sleepSamples,
+      averageHeartRate,
+      sleepHeartRateData,
+      sleepEfficiency,
+      qualityDescription: qualityInfo.description,
+      recommendation: qualityInfo.recommendation
+    };
+
+    console.log('睡眠详情数据获取完成，睡眠得分:', sleepScore);
+    return sleepDetailData;
+
+  } catch (error) {
+    console.error('获取睡眠详情数据失败:', error);
+    return null;
+  }
+};
+
 // 简化的睡眠阶段图表组件
 const SleepStageChart = ({
  sleepData,
@@ -43,12 +463,12 @@ const SleepStageChart = ({
  // 使用真实的睡眠阶段数据，如果没有则使用默认数据
  const stages = sleepData.sleepStages.length > 0
    ? sleepData.sleepStages
-        .filter(stage => stage.percentage > 0) // 只显示有数据的阶段
-        .map(stage => ({
-          stage: stage.stage,
-          percentage: stage.percentage,
-          duration: stage.duration
-        }))
+      .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 },
@@ -59,7 +479,7 @@ const SleepStageChart = ({
  return (
    <View style={styles.simplifiedChartContainer}>
      <View style={styles.chartTitleContainer}>
-        <Text style={styles.chartTitle}>睡眠阶段分析</Text>
+        <Text style={styles.chartTitle}>阶段分析</Text>
        <TouchableOpacity
          style={styles.chartInfoButton}
          onPress={onInfoPress}
@@ -75,7 +495,7 @@ const SleepStageChart = ({
            入睡时间
          </Text>
          <Text style={[styles.sleepTimeValue, { color: colorTokens.text }]}>
-            {sleepData.bedtime ? formatTime(sleepData.bedtime) : '23:15'}
+            {sleepData.bedtime ? formatTime(sleepData.bedtime) : '--:--'}
          </Text>
        </View>
        <View style={styles.sleepTimeLabel}>
@@ -83,7 +503,7 @@ const SleepStageChart = ({
            起床时间
          </Text>
          <Text style={[styles.sleepTimeValue, { color: colorTokens.text }]}>
-            {sleepData.wakeupTime ? formatTime(sleepData.wakeupTime) : '06:52'}
+            {sleepData.wakeupTime ? formatTime(sleepData.wakeupTime) : '--:--'}
          </Text>
        </View>
      </View>
@@ -92,6 +512,8 @@ const SleepStageChart = ({
      <View style={styles.simplifiedChartBar}>
        {stages.map((stageData, index) => {
          const color = getSleepStageColor(stageData.stage);
+          // 确保最小宽度，避免清醒阶段等小比例的阶段完全不可见
+          const flexValue = Math.max(stageData.percentage || 1, 3);
          return (
            <View
              key={index}
@@ -99,7 +521,7 @@ const SleepStageChart = ({
                styles.stageSegment,
                {
                  backgroundColor: color,
-                  flex: stageData.percentage || 1,
+                  flex: flexValue,
                }
              ]}
            />
@@ -118,8 +540,6 @@ const SleepStageChart = ({
            <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>
@@ -495,23 +915,31 @@ export default function SleepDetailScreen() {
    visible: false
  });

-  useEffect(() => {
-    loadSleepData();
-  }, [selectedDate]);
+  // 使用 HealthKit 权限 hook
+  const [authorizationStatus, requestAuthorization] = useHealthkitAuthorization([
+    'HKCategoryTypeIdentifierSleepAnalysis',
+    'HKQuantityTypeIdentifierHeartRate'
+  ]);

-  const loadSleepData = async () => {
+  const loadSleepData = useCallback(async () => {
    try {
      setLoading(true);

-      // 确保有健康权限
-      const hasPermission = await ensureHealthPermissions();
-      if (!hasPermission) {
-        console.warn('没有健康数据权限');
-        return;
+      // 如果需要请求权限，先请求权限
+      if (authorizationStatus === AuthorizationRequestStatus.shouldRequest) {
+        console.log('请求 HealthKit 权限..., 当前状态:', authorizationStatus);
+        try {
+          await requestAuthorization();
+          // 请求权限后，等待状态更新
+          return;
+        } catch (permissionError) {
+          console.error('权限请求失败:', permissionError);
+        }
      }

-      // 获取睡眠详情数据
-      const data = await fetchSleepDetailForDate(selectedDate);
+      // 如果权限不需要或已经处理，尝试获取数据
+      console.log('尝试获取睡眠数据，权限状态:', authorizationStatus);
+      const data = await fetchSleepDetailData(selectedDate);
      setSleepData(data);

    } catch (error) {
@@ -519,7 +947,11 @@ export default function SleepDetailScreen() {
    } finally {
      setLoading(false);
    }
-  };
+  }, [selectedDate, authorizationStatus, requestAuthorization]);
+
+  useEffect(() => {
+    loadSleepData();
+  }, [loadSleepData]);

  if (loading) {
    return (
@@ -535,8 +967,8 @@ export default function SleepDetailScreen() {
    sleepScore: 0,
    totalSleepTime: 0,
    sleepQualityPercentage: 0,
-    bedtime: new Date().toISOString(),
-    wakeupTime: new Date().toISOString(),
+    bedtime: '',
+    wakeupTime: '',
    timeInBed: 0,
    sleepStages: [],
    rawSleepSamples: [], // 添加空的原始睡眠样本数据
@@ -586,26 +1018,6 @@ 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 }]}>
@@ -738,7 +1150,7 @@ export default function SleepDetailScreen() {
        </View>

        {/* Raw Sleep Samples List - 显示所有原始睡眠数据 */}
-        {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 0 && (
+        {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 1 && (
          <View style={[styles.rawSamplesContainer, { backgroundColor: colorTokens.background }]}>
            <View style={styles.rawSamplesHeader}>
              <Text style={[styles.rawSamplesTitle, { color: colorTokens.text }]}>
@@ -748,14 +1160,14 @@ export default function SleepDetailScreen() {
                查看数据间隔和可能的gap
              </Text>
            </View>
-            
+
            <ScrollView style={styles.rawSamplesScrollView} nestedScrollEnabled={true}>
              {sleepData.rawSleepSamples.map((sample, index) => {
                // 计算与前一个样本的时间间隔
                const prevSample = index > 0 ? sleepData.rawSleepSamples[index - 1] : null;
                let gapMinutes = 0;
                let hasGap = false;
-                
+
                if (prevSample) {
                  const prevEndTime = new Date(prevSample.endDate).getTime();
                  const currentStartTime = new Date(sample.startDate).getTime();
@@ -766,14 +1178,14 @@ export default function SleepDetailScreen() {
                const startTime = formatTime(sample.startDate);
                const endTime = formatTime(sample.endDate);
                const duration = Math.round((new Date(sample.endDate).getTime() - new Date(sample.startDate).getTime()) / (1000 * 60));
-                
+
                // 获取睡眠阶段中文名称
                const getStageName = (value: string) => {
                  switch (value) {
                    case 'HKCategoryValueSleepAnalysisInBed': return '在床上';
                    case 'HKCategoryValueSleepAnalysisAwake': return '清醒';
                    case 'HKCategoryValueSleepAnalysisAsleepCore': return '核心睡眠';
-                    case 'HKCategoryValueSleepAnalysisAsleepDeep': return '深度睡眠'; 
+                    case 'HKCategoryValueSleepAnalysisAsleepDeep': return '深度睡眠';
                    case 'HKCategoryValueSleepAnalysisAsleepREM': return 'REM睡眠';
                    case 'HKCategoryValueSleepAnalysisAsleepUnspecified': return '未指定睡眠';
                    default: return value;
@@ -804,16 +1216,16 @@ export default function SleepDetailScreen() {
                        </Text>
                      </View>
                    )}
-                    
+
                    {/* 睡眠样本条目 */}
                    <View style={[styles.rawSampleItem, { borderColor: colorTokens.border }]}>
                      <View style={styles.sampleHeader}>
                        <View style={styles.sampleLeft}>
-                          <View 
+                          <View
                            style={[
-                              styles.stageDot, 
+                              styles.stageDot,
                              { backgroundColor: getStageColor(sample.value) }
-                            ]} 
+                            ]}
                          />
                          <Text style={[styles.sampleStage, { color: colorTokens.text }]}>
                            {getStageName(sample.value)}
@@ -823,7 +1235,7 @@ export default function SleepDetailScreen() {
                          {duration}分钟
                        </Text>
                      </View>
-                      
+
                      <View style={styles.sampleTimeRange}>
                        <Text style={[styles.sampleTime, { color: colorTokens.textSecondary }]}>
                          {startTime} - {endTime}
@@ -1302,7 +1714,7 @@ const styles = StyleSheet.create({
  },
  legendRow: {
    flexDirection: 'row',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
  },
  legendItem: {
    flexDirection: 'row',