perf: optimize the display of numbers

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/628/head
Ryan Wang 2022-09-29 11:10:31 +08:00
parent 24794df827
commit 1048e6fca6
14 changed files with 84 additions and 43 deletions

View File

@ -655,11 +655,19 @@ onMounted(() => {
/>
</template>
</VEntityField>
<VEntityField
:description="
formatDatetime(attachment.metadata.creationTimestamp)
"
/>
<VEntityField>
<template #description>
<span
class="truncate text-xs tabular-nums text-gray-500"
>
{{
formatDatetime(
attachment.metadata.creationTimestamp
)
}}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -189,7 +189,7 @@ watch(
<div
class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
>
<time class="text-sm text-gray-500">
<time class="text-sm tabular-nums text-gray-500">
{{ formatDatetime(policy.metadata.creationTimestamp) }}
</time>
<span class="cursor-pointer">

View File

@ -328,11 +328,12 @@ const subjectRefResult = computed(() => {
<VStatusDot v-tooltip="``" state="warning" animate />
</template>
</VEntityField>
<VEntityField
:description="
formatDatetime(comment?.comment?.metadata.creationTimestamp)
"
>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(comment?.comment?.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>

View File

@ -161,9 +161,12 @@ const isHoveredReply = computed(() => {
<VStatusDot v-tooltip="``" state="warning" animate />
</template>
</VEntityField>
<VEntityField
:description="formatDatetime(reply?.reply.metadata.creationTimestamp)"
>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(reply?.reply?.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>

View File

@ -600,11 +600,15 @@ function handleSortItemChange(sortItem?: SortItem) {
/>
</template>
</VEntityField>
<VEntityField
:description="
formatDatetime(singlePage.page.metadata.creationTimestamp)
"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{
formatDatetime(singlePage.page.metadata.creationTimestamp)
}}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -892,11 +892,13 @@ function handleContributorChange(user?: User) {
<VStatusDot v-tooltip="``" state="warning" animate />
</template>
</VEntityField>
<VEntityField
:description="
formatDatetime(post.post.metadata.creationTimestamp)
"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(post.post.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -78,9 +78,13 @@ function onDelete(category: CategoryTree) {
<VEntityField
:description="`${category.status?.postCount || 0} 篇文章`"
/>
<VEntityField
:description="formatDatetime(category.metadata.creationTimestamp)"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(category.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -194,9 +194,13 @@ onMounted(async () => {
<VEntityField
:description="`${tag.status?.postCount || 0} 篇文章`"
/>
<VEntityField
:description="formatDatetime(tag.metadata.creationTimestamp)"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(tag.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -50,7 +50,7 @@ onMounted(handleFetchPosts);
</div>
<div>
<time class="text-sm text-gray-500">
<time class="text-sm tabular-nums text-gray-500">
{{ formatDatetime(post.post.spec.publishTime) }}
</time>
</div>

View File

@ -213,7 +213,9 @@ watchEffect(() => {
class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4 sm:px-6"
>
<dt class="text-sm font-medium text-gray-900">最近一次启动</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<dd
class="mt-1 text-sm tabular-nums text-gray-900 sm:col-span-2 sm:mt-0"
>
{{ formatDatetime(plugin?.status?.lastStartTime) }}
</dd>
</div>

View File

@ -79,10 +79,13 @@ const { isStarted, changeStatus, uninstall } = usePluginLifeCycle(plugin);
</template>
</VEntityField>
<VEntityField :description="plugin?.spec.version" />
<VEntityField
v-if="plugin?.metadata.creationTimestamp"
:description="formatDatetime(plugin?.metadata.creationTimestamp)"
/>
<VEntityField v-if="plugin?.metadata.creationTimestamp">
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(plugin?.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
<VEntityField>
<template #description>
<div

View File

@ -264,9 +264,13 @@ const handleDelete = async (role: Role) => {
<VTag> 系统保留</VTag>
</template>
</VEntityField>
<VEntityField
:description="formatDatetime(role.metadata.creationTimestamp)"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(role.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton

View File

@ -73,7 +73,9 @@ const router = useRouter();
class="bg-white py-5 px-2 hover:bg-gray-50 sm:grid sm:grid-cols-6 sm:gap-4"
>
<dt class="text-sm font-medium text-gray-900">注册时间</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-3 sm:mt-0">
<dd
class="mt-1 text-sm tabular-nums text-gray-900 sm:col-span-3 sm:mt-0"
>
{{ formatDatetime(user?.metadata?.creationTimestamp) }}
</dd>
</div>

View File

@ -430,9 +430,13 @@ onMounted(() => {
<VStatusDot v-tooltip="``" state="warning" animate />
</template>
</VEntityField>
<VEntityField
:description="formatDatetime(user.metadata.creationTimestamp)"
/>
<VEntityField>
<template #description>
<span class="truncate text-xs tabular-nums text-gray-500">
{{ formatDatetime(user.metadata.creationTimestamp) }}
</span>
</template>
</VEntityField>
</template>
<template #dropdownItems>
<VButton