feat: 添加睡眠阶段时间轴组件，优化睡眠数据可视化

app/sleep-detail.tsx

@@ -22,6 +22,7 @@ import {
 
 import { InfoModal, type SleepDetailData } from '@/components/sleep/InfoModal';
 import { SleepStagesInfoModal } from '@/components/sleep/SleepStagesInfoModal';
+import { SleepStageTimeline } from '@/components/sleep/SleepStageTimeline';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -309,6 +310,14 @@ export default function SleepDetailScreen() {
           onInfoPress={() => setSleepStagesModal({ visible: true })}
         />
 
+        {/* 苹果健康风格的睡眠阶段时间轴图表 */}
+        <SleepStageTimeline
+          sleepSamples={displayData.rawSleepSamples}
+          bedtime={displayData.bedtime}
+          wakeupTime={displayData.wakeupTime}
+          onInfoPress={() => setSleepStagesModal({ visible: true })}
+        />
+
         {/* 睡眠阶段统计 - 2x2网格布局 */}
         <View style={styles.stagesGridContainer}>
           {/* 使用真实数据或默认数据，确保包含所有4个阶段 */}