From 1048e6fca6031ee5f631a8b7d6d4e09add86331e Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 29 Sep 2022 11:10:31 +0800
Subject: [PATCH] perf: optimize the display of numbers

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../contents/attachments/AttachmentList.vue    | 18 +++++++++++++-----
 .../components/AttachmentPoliciesModal.vue     |  2 +-
 .../comments/components/CommentListItem.vue    | 11 ++++++-----
 .../comments/components/ReplyListItem.vue      |  9 ++++++---
 src/modules/contents/pages/SinglePageList.vue  | 14 +++++++++-----
 src/modules/contents/posts/PostList.vue        | 12 +++++++-----
 .../categories/components/CategoryListItem.vue | 10 +++++++---
 src/modules/contents/posts/tags/TagList.vue    | 10 +++++++---
 .../widgets/RecentPublishedWidget.vue          |  2 +-
 src/modules/system/plugins/PluginDetail.vue    |  4 +++-
 .../plugins/components/PluginListItem.vue      | 11 +++++++----
 src/modules/system/roles/RoleList.vue          | 10 +++++++---
 src/modules/system/users/UserDetail.vue        |  4 +++-
 src/modules/system/users/UserList.vue          | 10 +++++++---
 14 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/src/modules/contents/attachments/AttachmentList.vue b/src/modules/contents/attachments/AttachmentList.vue
index 5f197f53..ee86f827 100644
--- a/src/modules/contents/attachments/AttachmentList.vue
+++ b/src/modules/contents/attachments/AttachmentList.vue
@@ -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
diff --git a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
index f75a4657..4ac5d8b3 100644
--- a/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
@@ -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">
diff --git a/src/modules/contents/comments/components/CommentListItem.vue b/src/modules/contents/comments/components/CommentListItem.vue
index d1eb18fd..b402a952 100644
--- a/src/modules/contents/comments/components/CommentListItem.vue
+++ b/src/modules/contents/comments/components/CommentListItem.vue
@@ -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>
diff --git a/src/modules/contents/comments/components/ReplyListItem.vue b/src/modules/contents/comments/components/ReplyListItem.vue
index 8bf950c9..7c9899fa 100644
--- a/src/modules/contents/comments/components/ReplyListItem.vue
+++ b/src/modules/contents/comments/components/ReplyListItem.vue
@@ -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>
diff --git a/src/modules/contents/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 00c21d7d..f01d5a5b 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -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
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index ecd091f6..42c6e9a9 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -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
diff --git a/src/modules/contents/posts/categories/components/CategoryListItem.vue b/src/modules/contents/posts/categories/components/CategoryListItem.vue
index 2c24c52e..807dc858 100644
--- a/src/modules/contents/posts/categories/components/CategoryListItem.vue
+++ b/src/modules/contents/posts/categories/components/CategoryListItem.vue
@@ -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
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index 261b8f9d..0d0c5209 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -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
diff --git a/src/modules/dashboard/widgets/RecentPublishedWidget.vue b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
index 02fb1a80..f8beb7e0 100644
--- a/src/modules/dashboard/widgets/RecentPublishedWidget.vue
+++ b/src/modules/dashboard/widgets/RecentPublishedWidget.vue
@@ -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>
diff --git a/src/modules/system/plugins/PluginDetail.vue b/src/modules/system/plugins/PluginDetail.vue
index ea489b14..6846281f 100644
--- a/src/modules/system/plugins/PluginDetail.vue
+++ b/src/modules/system/plugins/PluginDetail.vue
@@ -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>
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index 8ae513b9..d917f51d 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -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
diff --git a/src/modules/system/roles/RoleList.vue b/src/modules/system/roles/RoleList.vue
index 2c1da8d0..d732ef90 100644
--- a/src/modules/system/roles/RoleList.vue
+++ b/src/modules/system/roles/RoleList.vue
@@ -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
diff --git a/src/modules/system/users/UserDetail.vue b/src/modules/system/users/UserDetail.vue
index 7511b115..0410e496 100644
--- a/src/modules/system/users/UserDetail.vue
+++ b/src/modules/system/users/UserDetail.vue
@@ -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>
diff --git a/src/modules/system/users/UserList.vue b/src/modules/system/users/UserList.vue
index c3e1f13e..27821b27 100644
--- a/src/modules/system/users/UserList.vue
+++ b/src/modules/system/users/UserList.vue
@@ -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