perf: optimize the display of numbers

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/contents/attachments/AttachmentList.vue

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

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">

src/modules/contents/comments/components/CommentListItem.vue

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

src/modules/contents/comments/components/ReplyListItem.vue

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

src/modules/contents/pages/SinglePageList.vue

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

src/modules/contents/posts/PostList.vue

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

src/modules/contents/posts/categories/components/CategoryListItem.vue

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

src/modules/contents/posts/tags/TagList.vue

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

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>

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>

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
+      <VEntityField v-if="plugin?.metadata.creationTimestamp">
-        v-if="plugin?.metadata.creationTimestamp"
+        <template #description>
-        :description="formatDatetime(plugin?.metadata.creationTimestamp)"
+          <span class="truncate text-xs tabular-nums text-gray-500">
-      />
+            {{ formatDatetime(plugin?.metadata.creationTimestamp) }}
+          </span>
+        </template>
+      </VEntityField>
       <VEntityField>
         <template #description>
           <div

src/modules/system/roles/RoleList.vue

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

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>

src/modules/system/users/UserList.vue

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