diff --git a/src/content/pages/problems/Clock.tsx b/src/content/pages/problems/Clock.tsx index 4c38567..21a42c0 100644 --- a/src/content/pages/problems/Clock.tsx +++ b/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() + const handleHidden = () => { setHidden(hidden => !hidden) } @@ -267,16 +286,29 @@ const Clock: FC = () => { )} {!isDone ? ( - +
+ {hover && ( + + )} + +
) : ( - + )} ) diff --git a/src/content/pages/problems/useTimer.ts b/src/content/pages/problems/useTimer.ts index 2033ae0..1d40d6c 100644 --- a/src/content/pages/problems/useTimer.ts +++ b/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,7 +25,7 @@ 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)) @@ -33,7 +33,7 @@ const useTimer = (): UseTimeReturn => { let timer: ReturnType 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)) }