fix: 调整睡眠阶段图表的宽度和边距，优化标签显示逻辑

app/sleep-detail.tsx

@@ -305,10 +305,10 @@ export default function SleepDetailScreen() {
         </View>
 
         {/* 睡眠阶段图表 */}
-        <SleepStageChart
+        {/* <SleepStageChart
           sleepData={displayData}
           onInfoPress={() => setSleepStagesModal({ visible: true })}
-        />
+        /> */}
 
         {/* 苹果健康风格的睡眠阶段时间轴图表 */}
         <SleepStageTimeline
@@ -387,7 +387,7 @@ export default function SleepDetailScreen() {
         </View>
 
         {/* Raw Sleep Samples List - 显示所有原始睡眠数据 */}
-        {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 1 && (
+        {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 100 && (
           <View style={[styles.rawSamplesContainer, { backgroundColor: colorTokens.background }]}>
             <View style={styles.rawSamplesHeader}>
               <Text style={[styles.rawSamplesTitle, { color: colorTokens.text }]}>

components/sleep/SleepStageTimeline.tsx

@@ -24,7 +24,9 @@ export const SleepStageTimeline = ({
   const colorTokens = Colors[theme];
 
   // 图表尺寸参数
-  const chartWidth = 320;
+  const containerWidth = 320;
+  const chartPadding = 25; // 左右边距，为时间标签预留空间
+  const chartWidth = containerWidth - chartPadding * 2;
   const chartHeight = 80;
   const timelineHeight = 32;
   const timelineY = 24;
@@ -53,7 +55,7 @@ export const SleepStageTimeline = ({
       const startOffset = sampleStart.diff(startTime, 'minute');
       const duration = sampleEnd.diff(sampleStart, 'minute');
       
-      const x = Math.max(0, (startOffset / totalMinutes) * chartWidth);
+      const x = Math.max(0, (startOffset / totalMinutes) * chartWidth) + chartPadding;
       const width = Math.max(2, (duration / totalMinutes) * chartWidth);
       
       return {
@@ -71,7 +73,7 @@ export const SleepStageTimeline = ({
     // 总是显示起始时间
     labels.push({
       time: startTime.format('HH:mm'),
-      x: 0
+      x: chartPadding
     });
 
     // 根据睡眠总时长动态调整时间间隔
@@ -92,11 +94,11 @@ export const SleepStageTimeline = ({
     
     while (currentTime.add(timeStepMinutes * stepCount, 'minute').isBefore(endTime)) {
       const stepTime = currentTime.add(timeStepMinutes * stepCount, 'minute');
-      const x = (stepTime.diff(startTime, 'minute') / totalMinutes) * chartWidth;
+      const x = (stepTime.diff(startTime, 'minute') / totalMinutes) * chartWidth + chartPadding;
       
       // 检查与前一个标签的间距
       const lastLabel = labels[labels.length - 1];
-      if (x - lastLabel.x >= minLabelSpacing && x <= chartWidth - 30) {
+      if (x - lastLabel.x >= minLabelSpacing && x <= containerWidth - chartPadding) {
         labels.push({
           time: stepTime.format('HH:mm'),
           x: x
@@ -107,7 +109,7 @@ export const SleepStageTimeline = ({
     }
 
     // 总是显示结束时间，但要确保与前一个标签有足够间距
-    const endX = chartWidth - 25;
+    const endX = containerWidth - chartPadding;
     const lastLabel = labels[labels.length - 1];
     if (endX - lastLabel.x >= minLabelSpacing) {
       labels.push({
@@ -176,7 +178,7 @@ export const SleepStageTimeline = ({
 
       {/* SVG 图表 */}
       <View style={styles.chartContainer}>
-        <Svg width={chartWidth} height={chartHeight}>
+        <Svg width={containerWidth} height={chartHeight}>
           {/* 绘制睡眠阶段条形图 */}
           {timelineData.map((segment, index) => (
             <Rect
@@ -195,7 +197,7 @@ export const SleepStageTimeline = ({
             <React.Fragment key={index}>
               {/* 刻度线 */}
               <Rect
-                x={label.x}
+                x={label.x - 0.5}
                 y={timelineY + timelineHeight}
                 width={1}
                 height={6}