mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-25 23:45:13 +00:00
fix/refaftor(client): MkTime.vueの変更 (#10061)
* fix(client): MkTime.timeにstringでもDateでない値が入った場合、?を表示 * fix(client): MkTimeを改良 * numberを許容 * falsyな値もとる * 不明 * ありません * fix
This commit is contained in:
parent
d1d3b48e51
commit
5c989ed18f
2 changed files with 17 additions and 9 deletions
|
@ -1490,6 +1490,7 @@ _ago:
|
||||||
weeksAgo: "{n}週間前"
|
weeksAgo: "{n}週間前"
|
||||||
monthsAgo: "{n}ヶ月前"
|
monthsAgo: "{n}ヶ月前"
|
||||||
yearsAgo: "{n}年前"
|
yearsAgo: "{n}年前"
|
||||||
|
invalid: "ありません"
|
||||||
|
|
||||||
_time:
|
_time:
|
||||||
second: "秒"
|
second: "秒"
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<time :title="absolute">
|
<time :title="absolute">
|
||||||
<template v-if="mode === 'relative'">{{ relative }}</template>
|
<template v-if="invalid">{{ i18n.ts._ago.invalid }}</template>
|
||||||
|
<template v-else-if="mode === 'relative'">{{ relative }}</template>
|
||||||
<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
|
<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
|
||||||
<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
|
<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
|
||||||
</time>
|
</time>
|
||||||
|
@ -12,18 +13,24 @@ import { i18n } from '@/i18n';
|
||||||
import { dateTimeFormat } from '@/scripts/intl-const';
|
import { dateTimeFormat } from '@/scripts/intl-const';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
time: Date | string;
|
time: Date | string | number | null;
|
||||||
mode?: 'relative' | 'absolute' | 'detail';
|
mode?: 'relative' | 'absolute' | 'detail';
|
||||||
}>(), {
|
}>(), {
|
||||||
mode: 'relative',
|
mode: 'relative',
|
||||||
});
|
});
|
||||||
|
|
||||||
const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
|
const _time = props.time == null ? NaN :
|
||||||
const absolute = dateTimeFormat.format(_time);
|
typeof props.time === 'number' ? props.time :
|
||||||
|
(props.time instanceof Date ? props.time : new Date(props.time)).getTime();
|
||||||
|
const invalid = Number.isNaN(_time);
|
||||||
|
const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
|
||||||
|
|
||||||
let now = $shallowRef(new Date());
|
let now = $ref((new Date()).getTime());
|
||||||
const relative = $computed(() => {
|
const relative = $computed<string>(() => {
|
||||||
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
|
if (props.mode === 'absolute') return ''; // absoluteではrelativeを使わないので計算しない
|
||||||
|
if (invalid) return i18n.ts._ago.invalid;
|
||||||
|
|
||||||
|
const ago = (now - _time) / 1000/*ms*/;
|
||||||
return (
|
return (
|
||||||
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
|
ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
|
||||||
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
|
ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
|
||||||
|
@ -39,8 +46,8 @@ const relative = $computed(() => {
|
||||||
let tickId: number;
|
let tickId: number;
|
||||||
|
|
||||||
function tick() {
|
function tick() {
|
||||||
now = new Date();
|
now = (new Date()).getTime();
|
||||||
const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
|
const ago = (now - _time) / 1000/*ms*/;
|
||||||
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
|
const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
|
||||||
|
|
||||||
tickId = window.setTimeout(tick, next);
|
tickId = window.setTimeout(tick, next);
|
||||||
|
|
Loading…
Reference in a new issue