lux
/
firefish
mirror of https://firefish.dev/firefish/firefish.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: use reactive MkTime

This commit is contained in:
Lhcfl 2024-05-08 03:00:07 +08:00
parent 5382dc5da8
commit f5074f35cc
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/client/src/components/global/MkTime.vue
View File

@ -10,7 +10,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from "vue"; import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import { i18n } from "@/i18n"; import { i18n } from "@/i18n";
import { dateTimeFormat } from "@/scripts/intl-const"; import { dateTimeFormat } from "@/scripts/intl-const";
@ -25,7 +25,7 @@ const props = withDefaults(
}, },
); );
const _time = const _time = computed(() =>
props.time == null props.time == null
? Number.NaN ? Number.NaN
: typeof props.time === "number" : typeof props.time === "number"
@ -33,16 +33,19 @@ const _time =
: (props.time instanceof Date : (props.time instanceof Date
? props.time ? props.time
: new Date(props.time) : new Date(props.time)
).getTime(); ).getTime(),
const invalid = Number.isNaN(_time); );
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid; const invalid = computed(() => Number.isNaN(_time.value));
const absolute = computed(() =>
!invalid.value ? dateTimeFormat.format(_time.value) : i18n.ts._ago.invalid,
);
const now = ref(props.origin?.getTime() ?? Date.now()); const now = ref(props.origin?.getTime() ?? Date.now());
const relative = computed<string>(() => { const relative = computed<string>(() => {
if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
if (invalid) return i18n.ts._ago.invalid; if (invalid.value) return i18n.ts._ago.invalid;
const ago = (now.value - _time) / 1000; /* ms */ const ago = (now.value - _time.value) / 1000; /* ms */
return ago >= 31536000 return ago >= 31536000
? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() }) ? i18n.t("_ago.yearsAgo", { n: Math.floor(ago / 31536000).toString() })
: ago >= 2592000 : ago >= 2592000
@ -74,15 +77,25 @@ const relative = computed<string>(() => {
: i18n.ts._ago.future; : i18n.ts._ago.future;
}); });
let tickId: number; let tickId: number | undefined;
function tick() { function tick() {
if (
invalid.value ||
props.origin ||
(props.mode !== "relative" && props.mode !== "detail")
) {
if (tickId) window.clearInterval(tickId);
tickId = undefined;
return;
}
const _now = Date.now(); const _now = Date.now();
const agoPrev = (now.value - _time) / 1000; /* ms */ // 現状のinterval const agoPrev = (now.value - _time.value) / 1000; /* ms */ // 現状のinterval
now.value = _now; now.value = _now;
const ago = (now.value - _time) / 1000; /* ms */ // 次のinterval const ago = (now.value - _time.value) / 1000; /* ms */ // 次のinterval
const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000; const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000;
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000; const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
@ -94,16 +107,13 @@ function tick() {
} }
} }
if ( watch(() => props.time, tick);
!invalid &&
!props.origin && onMounted(() => {
(props.mode === "relative" || props.mode === "detail") tick();
) { });
onMounted(() => {
tick(); onUnmounted(() => {
}); if (tickId) window.clearInterval(tickId);
onUnmounted(() => { });
if (tickId) window.clearInterval(tickId);
});
}
</script> </script>