diff --git a/src/components/RecordForm.tsx b/src/components/RecordForm.tsx index 8e3df74..824521f 100644 --- a/src/components/RecordForm.tsx +++ b/src/components/RecordForm.tsx @@ -18,26 +18,32 @@ import TimerIcon from '@mui/icons-material/Timer'; export const RecordForm = () => { // 记录状态:是否正在记录中 const [isRecording, setIsRecording] = useState(false); + // 是否暂停中 + const [isPaused, setIsPaused] = useState(false); // 开始时间 const [startTime, setStartTime] = useState(null); // 已经过的时间(秒) const [elapsedTime, setElapsedTime] = useState(0); + // 暂停时累计的时间(毫秒) + const [accumulatedTime, setAccumulatedTime] = useState(0); + // 上次暂停的时间 + const [lastPauseTime, setLastPauseTime] = useState(null); // 备注信息 const [notes, setNotes] = useState(''); // 计时器效果:每秒更新已经过的时间 useEffect(() => { let intervalId: number; - if (isRecording && startTime) { + if (isRecording && startTime && !isPaused) { intervalId = window.setInterval(() => { const now = new Date(); - const elapsed = Math.floor((now.getTime() - startTime.getTime()) / 1000); + const elapsed = Math.floor((now.getTime() - startTime.getTime() - accumulatedTime) / 1000); setElapsedTime(elapsed); }, 1000); } // 清理定时器 return () => clearInterval(intervalId); - }, [isRecording, startTime]); + }, [isRecording, startTime, isPaused, accumulatedTime]); /** * 处理开始/停止按钮点击 @@ -49,12 +55,17 @@ export const RecordForm = () => { // 开始记录 setStartTime(new Date()); setIsRecording(true); + setIsPaused(false); + setAccumulatedTime(0); + setLastPauseTime(null); } else { // 停止记录 setIsRecording(false); + setIsPaused(false); if (startTime) { const endTime = new Date(); - const durationInMinutes = (endTime.getTime() - startTime.getTime()) / (1000 * 60); + const totalPausedTime = accumulatedTime + (lastPauseTime ? endTime.getTime() - lastPauseTime.getTime() : 0); + const durationInMinutes = (endTime.getTime() - startTime.getTime() - totalPausedTime) / (1000 * 60); // 创建记录对象 const record = { @@ -68,6 +79,8 @@ export const RecordForm = () => { StorageService.saveRecord(record); setStartTime(null); setElapsedTime(0); + setAccumulatedTime(0); + setLastPauseTime(null); setNotes(''); // 触发自定义事件通知数据更新 @@ -77,6 +90,27 @@ export const RecordForm = () => { } }; + /** + * 处理暂停/继续按钮点击 + */ + const handlePause = () => { + if (!isRecording) return; + + if (!isPaused) { + // 暂停计时 + setIsPaused(true); + setLastPauseTime(new Date()); + } else { + // 继续计时 + setIsPaused(false); + if (lastPauseTime) { + const now = new Date(); + setAccumulatedTime(prev => prev + (now.getTime() - lastPauseTime.getTime())); + setLastPauseTime(null); + } + } + }; + /** * 格式化时间显示 * @param seconds 秒数 @@ -166,16 +200,30 @@ export const RecordForm = () => { {isRecording ? formatTime(elapsedTime) : '准备开始'} - + + + {isRecording && ( + + )} + { const recordDate = new Date(record.startTime); if (recordDate >= startDate) { const daysSince = Math.floor((now.getTime() - recordDate.getTime()) / (1000 * 60 * 60 * 24)); - const weekIndex = Math.floor(daysSince / 7); - let dayIndex = recordDate.getDay() - 1; - if (dayIndex === -1) dayIndex = 6; // 将周日从0改为6 - if (weekIndex < WEEKS_TO_SHOW) { + const weekIndex = WEEKS_TO_SHOW - 1 - Math.floor(daysSince / 7); + let dayIndex = recordDate.getDay(); + if (dayIndex === 0) dayIndex = 6; // 将周日从0改为6 + else dayIndex -= 1; // 其他日期减1,使周一为0 + if (weekIndex >= 0 && weekIndex < WEEKS_TO_SHOW) { contributionData[weekIndex][dayIndex]++; } }