perf: ttl change to dynamic display

This commit is contained in:
Lykin 2024-01-24 14:53:04 +08:00
parent 124d221b9f
commit 7cbdc83884
1 changed files with 44 additions and 7 deletions

View File

@ -10,7 +10,7 @@ import { useI18n } from 'vue-i18n'
import IconButton from '@/components/common/IconButton.vue' import IconButton from '@/components/common/IconButton.vue'
import Copy from '@/components/icons/Copy.vue' import Copy from '@/components/icons/Copy.vue'
import { ClipboardSetText } from 'wailsjs/runtime/runtime.js' import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
import { computed, onUnmounted, reactive, watch } from 'vue' import { computed, onMounted, onUnmounted, reactive, watch } from 'vue'
import { NIcon, useThemeVars } from 'naive-ui' import { NIcon, useThemeVars } from 'naive-ui'
import { timeout } from '@/utils/promise.js' import { timeout } from '@/utils/promise.js'
import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue' import AutoRefreshForm from '@/components/common/AutoRefreshForm.vue'
@ -45,6 +45,12 @@ const autoRefresh = reactive({
interval: 2, interval: 2,
}) })
const ttl = reactive({
value: 0,
expire: 0,
intervalID: 0,
})
const themeVars = useThemeVars() const themeVars = useThemeVars()
const dialogStore = useDialog() const dialogStore = useDialog()
const i18n = useI18n() const i18n = useI18n()
@ -54,15 +60,15 @@ const binaryKey = computed(() => {
}) })
const ttlString = computed(() => { const ttlString = computed(() => {
if (props.ttl > 0) { if (ttl.value > 0) {
const dur = dayjs.duration(props.ttl, 'seconds') const dur = dayjs.duration(ttl.value, 'seconds')
const days = dur.days() const days = dur.days()
if (days > 0) { if (days > 0) {
return days + i18n.t('common.unit_day') + ' ' + dur.format('HH:mm:ss') return days + i18n.t('common.unit_day') + ' ' + dur.format('HH:mm:ss')
} else { } else {
return dur.format('HH:mm:ss') return dur.format('HH:mm:ss')
} }
} else if (props.ttl < 0) { } else if (ttl.value < 0) {
return i18n.t('interface.forever') return i18n.t('interface.forever')
} else { } else {
return '00:00:00' return '00:00:00'
@ -89,15 +95,46 @@ const stopAutoRefresh = () => {
autoRefresh.on = false autoRefresh.on = false
} }
const syncTTL = (seconds) => {
ttl.value = seconds
if (seconds >= 0) {
ttl.expire = Math.floor(Date.now() / 1000 + seconds)
} else {
ttl.expire = 0
}
}
watch( watch(
() => props.keyPath, () => props.keyPath,
() => { () => {
stopAutoRefresh() stopAutoRefresh()
autoRefresh.interval = props.interval
}, },
) )
onUnmounted(() => stopAutoRefresh()) watch(
() => props.ttl,
(seconds) => syncTTL(seconds),
)
onMounted(() => {
syncTTL(props.ttl)
ttl.intervalID = setInterval(() => {
if (ttl.expire > 0) {
const nowSeconds = Math.floor(Date.now() / 1000)
ttl.value = Math.max(0, ttl.expire - nowSeconds)
} else {
ttl.value = -1
}
}, 1000)
})
onUnmounted(() => {
stopAutoRefresh()
if (ttl.intervalID > 0) {
clearInterval(ttl.intervalID)
ttl.intervalID = 0
}
})
const onToggleRefresh = (on) => { const onToggleRefresh = (on) => {
if (on) { if (on) {
@ -168,7 +205,7 @@ const onTTL = () => {
<template #icon> <template #icon>
<n-icon :component="Timer" size="18" /> <n-icon :component="Timer" size="18" />
</template> </template>
{{ ttlString }} <span style="font-variant-numeric: tabular-nums">{{ ttlString }}</span>
</n-button> </n-button>
</template> </template>
TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }} TTL{{ `${ttl > 0 ? ': ' + ttl + $t('common.second') : ''}` }}