hand-acid-web/src/hooks/useServerTime.ts

import { getTime, setTime } from 'apis/system'
import { formatDateTime } from 'libs/utils'
import { onMounted, onUnmounted, ref } from 'vue'

export function useServerTime() {
  const serverTime = ref<number | undefined>() // 初始服务器时间戳
  const clientFetchTime = ref<number | null>(null) // 获取服务器时间时的客户端时间戳
  const currentTime = ref<string>('0001-00-00 00:00:00')
  const editVisible = ref(false)

  let interval: number | null = null

  onMounted(async () => {
    try {
      await getDateTime()
    }

    catch (error) {
      // currentTime.value = formatDateTime(undefined, new Date())
      console.error('获取服务器时间失败')
    }
  })

  const openDialog = () => {
    editVisible.value = true
  }

  const closeDialog = () => {
    editVisible.value = false
  }

  const getDateTime = async () => {
    serverTime.value = (await getTime())?.epochMilli
    clientFetchTime.value = Date.now()
    let num = 0
    if (interval)
      clearInterval(interval)
    interval = window.setInterval(async () => {
      if (num > 60) {
        serverTime.value = (await getTime())?.epochMilli
        clientFetchTime.value = Date.now()
        num = 0
      }
      if (serverTime.value && clientFetchTime.value) {
        const elapsed = Date.now() - clientFetchTime.value
        const currentServerTime = serverTime.value + elapsed
        currentTime.value = formatDateTime(undefined, new Date(currentServerTime))
        num++
      }
    }, 1000)
  }

  const setDateTime = async (time: number) => {
    await setTime({ epochMilli: time })
    await getDateTime()
  }

  onUnmounted(() => {
    if (interval)
      clearInterval(interval)
  })

  return { currentTime, serverTime, editVisible, setDateTime, openDialog, closeDialog }
}