heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix/refaftor(client): MkTime.vueの変更 (#10061)

Browse source 
* fix(client): MkTime.timeにstringでもDateでない値が入った場合、？を表示

* fix(client): MkTimeを改良

* numberを許容

* falsyな値もとる

* 不明

* ありません

* fix
This commit is contained in:
tamaina 2023-02-24 16:21:49 +09:00 committed by GitHub
parent d1d3b48e51
commit 5c989ed18f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/ja-JP.yml
View file

@ -1490,6 +1490,7 @@ _ago:
weeksAgo: "{n}週間前" weeksAgo: "{n}週間前"
monthsAgo: "{n}ヶ月前" monthsAgo: "{n}ヶ月前"
yearsAgo: "{n}年前" yearsAgo: "{n}年前"
invalid: "ありません"
_time: _time:
second: "秒" second: "秒"

25
packages/frontend/src/components/global/MkTime.vue
View file

@ -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);