diff --git a/app/sleep-detail.tsx b/app/sleep-detail.tsx index 7bd90d3..f35f4c6 100644 --- a/app/sleep-detail.tsx +++ b/app/sleep-detail.tsx @@ -305,10 +305,10 @@ export default function SleepDetailScreen() { {/* 睡眠阶段图表 */} - setSleepStagesModal({ visible: true })} - /> + /> */} {/* 苹果健康风格的睡眠阶段时间轴图表 */} {/* Raw Sleep Samples List - 显示所有原始睡眠数据 */} - {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 1 && ( + {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 100 && ( diff --git a/components/sleep/SleepStageTimeline.tsx b/components/sleep/SleepStageTimeline.tsx index 372151d..113e7cc 100644 --- a/components/sleep/SleepStageTimeline.tsx +++ b/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 图表 */} - + {/* 绘制睡眠阶段条形图 */} {timelineData.map((segment, index) => ( {/* 刻度线 */}