feat: 在计时过程添加重置功能

有时候打开一题后,没有立即开始做题,可能刚好被别的事情耽搁了
当回来做题时,如果要重新开始计时,只能刷新页面
这个功能可以在不用刷新页面的情况下,然计时器从头开始计时

src/content/pages/problems/Clock.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 import { LeetCodeApi, SuccessCheckReturnType } from './leetcode-api'
 import {
@@ -11,7 +11,7 @@ import {
 import { findElement } from '../../utils'
 import { useTimer } from './useTimer'
 import { logger } from '../../../utils'
-import { useEvent } from '../hooks'
+import { useEvent, useHover } from '../hooks'
 
 const log = logger.child({ prefix: 'Clock' })
 
@@ -30,16 +30,33 @@ const Content = styled.div`
   padding: 6px 15px;
 `
 
-const Button = styled.button<{ primary?: boolean }>`
+const Button = styled.button<{
+  primary?: boolean
+  width: number
+  center: boolean
+}>`
   background: transparent;
-  border-radius: 0 3px 3px 0;
-  border: 1px solid palevioletred;
+
   color: palevioletred;
-  margin-right: 15px;
-  padding: 6px 15px;
-  width: 100px;
   text-align: center;
   cursor: pointer;
+  width: ${props => props.width}px;
+  ${({ center }) =>
+    center
+      ? css`
+          border: 1px solid palevioletred;
+          border-right: 0;
+          border-radius: 0;
+          margin-right: 0;
+          padding: 0;
+          line-height: 16px;
+        `
+      : css`
+          border: 1px solid palevioletred;
+          border-radius: 0 3px 3px 0;
+          margin-right: 15px;
+          padding: 6px 15px;
+        `}
 `
 
 const Clock: FC = () => {
@@ -51,6 +68,8 @@ const Clock: FC = () => {
 
   const { time, isDone, done, restart } = useTimer()
 
+  const [hoverRef, hover] = useHover<HTMLDivElement>()
+
   const handleHidden = () => {
     setHidden(hidden => !hidden)
   }
@@ -267,16 +286,29 @@ const Clock: FC = () => {
         </Content>
       )}
       {!isDone ? (
-        <Button
-          onClick={handleHidden}
-          style={
-            hidden ? { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 } : {}
-          }
-        >
-          {hidden ? '显示计时' : '隐藏'}
-        </Button>
+        <div ref={hoverRef}>
+          {hover && (
+            <Button onClick={restart} center={true} width={20}>
+              重置
+            </Button>
+          )}
+          <Button
+            onClick={handleHidden}
+            center={false}
+            width={hover ? 80 : 100}
+            style={
+              hidden
+                ? { borderTopLeftRadius: 3, borderBottomLeftRadius: 3 }
+                : {}
+            }
+          >
+            {hidden ? '显示计时' : '隐藏'}
+          </Button>
+        </div>
       ) : (
-        <Button onClick={restart}>重新开始</Button>
+        <Button onClick={restart} center={false} width={100}>
+          重新开始
+        </Button>
       )}
     </Container>
   )

src/content/pages/problems/useTimer.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { logger } from '../../../utils'
 
 const log = logger.child({ prefix: 'useTimer' })
@@ -25,15 +25,15 @@ type UseTimeReturn = {
  * @returns 返回当前累计的时间 `time`;是否已结束 `isDone`;结束当前计时函数 `done`;重新开始函数 `restart`
  */
 const useTimer = (): UseTimeReturn => {
-  const [start, setStart] = useState(new Date())
+  const start = useRef(new Date())
   const [isDone, setIsDone] = useState(false)
   const [time, setTime] = useState(formatTime(0))
 
   useEffect(() => {
     let timer: ReturnType<typeof setInterval>
     if (!isDone) {
       timer = setInterval(async () => {
-        setTime(formatTime(new Date().valueOf() - start.valueOf()))
+        setTime(formatTime(new Date().valueOf() - start.current.valueOf()))
       }, 1000)
     }
 
@@ -47,7 +47,7 @@ const useTimer = (): UseTimeReturn => {
   const restart = () => {
     log.debug('重新开始计时')
     setIsDone(false)
-    setStart(new Date())
+    start.current = new Date()
     setTime(formatTime(0))
   }