初始化

wwf

昨天 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useLatest } from 'ahooks'
import SimplePieChart from '@/app/components/base/simple-pie-chart'
import Tooltip from '@/app/components/base/tooltip'
 
export type CooldownTimerProps = {
  secondsRemaining?: number
  onFinish?: () => void
}
 
const CooldownTimer = ({ secondsRemaining, onFinish }: CooldownTimerProps) => {
  const { t } = useTranslation()
 
  const targetTime = useRef<number>(Date.now())
  const [currentTime, setCurrentTime] = useState(targetTime.current)
  const displayTime = useMemo(
    () => Math.ceil((targetTime.current - currentTime) / 1000),
    [currentTime],
  )
 
  const countdownTimeout = useRef<NodeJS.Timeout>()
  const clearCountdown = useCallback(() => {
    if (countdownTimeout.current) {
      clearTimeout(countdownTimeout.current)
      countdownTimeout.current = undefined
    }
  }, [])
 
  const onFinishRef = useLatest(onFinish)
 
  const countdown = useCallback(() => {
    clearCountdown()
    countdownTimeout.current = setTimeout(() => {
      const now = Date.now()
      if (now <= targetTime.current) {
        setCurrentTime(Date.now())
        countdown()
      }
      else {
        onFinishRef.current?.()
        clearCountdown()
      }
    }, 1000)
  }, [clearCountdown, onFinishRef])
 
  useEffect(() => {
    const now = Date.now()
    targetTime.current = now + (secondsRemaining ?? 0) * 1000
    setCurrentTime(now)
    countdown()
    return clearCountdown
  }, [clearCountdown, countdown, secondsRemaining])
 
  return displayTime
    ? (
      <Tooltip popupContent={t('common.modelProvider.apiKeyRateLimit', { seconds: displayTime })}>
        <SimplePieChart percentage={Math.round(displayTime / 60 * 100)} className='w-3 h-3' />
      </Tooltip>
    )
    : null
}
 
export default memo(CooldownTimer)