diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 0fcf85ac0df8259538e118b31506d1508e56f271..73f9718aacd67a3ca6755f3cfba0f8d3fbbd7bc6 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1490,6 +1490,7 @@ _ago: weeksAgo: "{n}週間å‰" monthsAgo: "{n}ヶ月å‰" yearsAgo: "{n}å¹´å‰" + invalid: "ã‚ã‚Šã¾ã›ã‚“" _time: second: "秒" diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue index 66c0bd513553b7ae8e500e7b136c20f3f519fcc5..3fa8bb9adc30dd00c8b329b0f8f3c2c927491a8a 100644 --- a/packages/frontend/src/components/global/MkTime.vue +++ b/packages/frontend/src/components/global/MkTime.vue @@ -1,6 +1,7 @@ <template> <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 === 'detail'">{{ absolute }} ({{ relative }})</template> </time> @@ -12,18 +13,24 @@ import { i18n } from '@/i18n'; import { dateTimeFormat } from '@/scripts/intl-const'; const props = withDefaults(defineProps<{ - time: Date | string; + time: Date | string | number | null; mode?: 'relative' | 'absolute' | 'detail'; }>(), { mode: 'relative', }); -const _time = typeof props.time === 'string' ? new Date(props.time) : props.time; -const absolute = dateTimeFormat.format(_time); +const _time = props.time == null ? NaN : + 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()); -const relative = $computed(() => { - const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/; +let now = $ref((new Date()).getTime()); +const relative = $computed<string>(() => { + if (props.mode === 'absolute') return ''; // absoluteã§ã¯relativeを使ã‚ãªã„ã®ã§è¨ˆç®—ã—ãªã„ + if (invalid) return i18n.ts._ago.invalid; + + const ago = (now - _time) / 1000/*ms*/; return ( ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) : ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) : @@ -39,8 +46,8 @@ const relative = $computed(() => { let tickId: number; function tick() { - now = new Date(); - const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/; + now = (new Date()).getTime(); + const ago = (now - _time) / 1000/*ms*/; const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000; tickId = window.setTimeout(tick, next);