From 3fa6532d9b3c55abe6fce07368c2d60af5f6e4b4 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 9 Jun 2025 23:02:34 +0800
Subject: [PATCH] refactor: convert post publish dates to human-readable format
 (#7526)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

<img width="1202" alt="image" src="https://github.com/user-attachments/assets/cac050d2-b984-4b48-afe0-e18db220ec19" />

#### Does this PR introduce a user-facing change?

```release-note
将 Console 端文章列表的发布时间改为语义化时间
```
---
 .../contents/pages/DeletedSinglePageList.vue  | 13 ++-
 .../pages/components/SinglePageListItem.vue   | 13 ++-
 .../contents/posts/DeletedPostList.vue        | 13 ++-
 .../posts/components/PostListItem.vue         |  1 +
 .../entity-fields/PublishTimeField.vue        |  9 +-
 .../presets/posts/RecentPublishedWidget.vue   | 76 ++--------------
 .../presets/posts/components/PostListItem.vue | 91 +++++++++++++++++++
 ui/src/locales/en.yaml                        |  1 -
 ui/src/locales/zh-CN.yaml                     |  1 -
 ui/src/locales/zh-TW.yaml                     |  1 -
 .../posts/components/PostListItem.vue         |  9 +-
 11 files changed, 130 insertions(+), 98 deletions(-)
 create mode 100644 ui/console-src/modules/dashboard/widgets/presets/posts/components/PostListItem.vue

diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index 2c62e865e..85ce24d89 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import PostContributorList from "@/components/user/PostContributorList.vue";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
 import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
@@ -356,12 +356,11 @@ watch(
                   />
                 </template>
               </VEntityField>
-              <VEntityField>
-                <template #description>
-                  <span class="truncate text-xs tabular-nums text-gray-500">
-                    {{ formatDatetime(singlePage.page.spec.publishTime) }}
-                  </span>
-                </template>
+              <VEntityField
+                v-if="singlePage.page.spec.publishTime"
+                v-tooltip="formatDatetime(singlePage.page.spec.publishTime)"
+                :description="relativeTimeTo(singlePage.page.spec.publishTime)"
+              >
               </VEntityField>
             </template>
             <template
diff --git a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
index c6e5bf450..9390ea20f 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageListItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import PostContributorList from "@/components/user/PostContributorList.vue";
 import { singlePageLabels } from "@/constants/labels";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
 import { coreApiClient } from "@halo-dev/api-client";
@@ -224,12 +224,11 @@ const handleDelete = async () => {
           />
         </template>
       </VEntityField>
-      <VEntityField>
-        <template #description>
-          <span class="truncate text-xs tabular-nums text-gray-500">
-            {{ formatDatetime(singlePage.page.spec.publishTime) }}
-          </span>
-        </template>
+      <VEntityField
+        v-if="singlePage.page.spec.publishTime"
+        v-tooltip="formatDatetime(singlePage.page.spec.publishTime)"
+        :description="relativeTimeTo(singlePage.page.spec.publishTime)"
+      >
       </VEntityField>
     </template>
     <template
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index d2b31c15b..16fe12509 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import PostContributorList from "@/components/user/PostContributorList.vue";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import type { ListedPost, Post } from "@halo-dev/api-client";
 import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
@@ -390,12 +390,11 @@ watch(
                   />
                 </template>
               </VEntityField>
-              <VEntityField>
-                <template #description>
-                  <span class="truncate text-xs tabular-nums text-gray-500">
-                    {{ formatDatetime(post.post.spec.publishTime) }}
-                  </span>
-                </template>
+              <VEntityField
+                v-if="post.post.spec.publishTime"
+                v-tooltip="formatDatetime(post.post.spec.publishTime)"
+                :description="relativeTimeTo(post.post.spec.publishTime)"
+              >
               </VEntityField>
             </template>
             <template
diff --git a/ui/console-src/modules/contents/posts/components/PostListItem.vue b/ui/console-src/modules/contents/posts/components/PostListItem.vue
index 01796f848..234b0a0f7 100644
--- a/ui/console-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/console-src/modules/contents/posts/components/PostListItem.vue
@@ -205,6 +205,7 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<ListedPost>(
       priority: 50,
       position: "end",
       component: markRaw(PublishTimeField),
+      hidden: !props.post.post.spec.publishTime,
       props: {
         post: props.post,
       },
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/PublishTimeField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/PublishTimeField.vue
index 74a13edb7..d13fbae5a 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/PublishTimeField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/PublishTimeField.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { postLabels } from "@/constants/labels";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import type { ListedPost } from "@halo-dev/api-client";
 import { IconTimerLine, VEntityField } from "@halo-dev/components";
 
@@ -16,8 +16,11 @@ withDefaults(
   <VEntityField>
     <template #description>
       <div class="inline-flex items-center space-x-2">
-        <span class="entity-field-description">
-          {{ formatDatetime(post.post.spec.publishTime) }}
+        <span
+          v-tooltip="formatDatetime(post.post.spec.publishTime)"
+          class="entity-field-description"
+        >
+          {{ relativeTimeTo(post.post.spec.publishTime) }}
         </span>
         <IconTimerLine
           v-if="
diff --git a/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue b/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
index 4598192df..50599764b 100644
--- a/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
+++ b/ui/console-src/modules/dashboard/widgets/presets/posts/RecentPublishedWidget.vue
@@ -1,28 +1,18 @@
 <script lang="ts" setup>
 import { postLabels } from "@/constants/labels";
-import { formatDatetime } from "@/utils/date";
 import WidgetCard from "@console/modules/dashboard/components/WidgetCard.vue";
 import type { ListedPost } from "@halo-dev/api-client";
 import { consoleApiClient } from "@halo-dev/api-client";
-import {
-  IconExternalLinkLine,
-  VEntity,
-  VEntityContainer,
-  VEntityField,
-  VSpace,
-} from "@halo-dev/components";
+import { VEntityContainer } from "@halo-dev/components";
 import { useQuery } from "@tanstack/vue-query";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
+import PostListItem from "./components/PostListItem.vue";
 
 const { data } = useQuery<ListedPost[]>({
   queryKey: ["widget-recent-posts"],
   queryFn: async () => {
     const { data } = await consoleApiClient.content.post.listPosts({
-      labelSelector: [
-        `${postLabels.DELETED}=false`,
-        `${postLabels.PUBLISHED}=true`,
-      ],
-      sort: ["spec.publishTime,desc"],
+      labelSelector: [`${postLabels.DELETED}=false`],
       page: 1,
       size: 10,
     });
@@ -42,61 +32,11 @@ const { data } = useQuery<ListedPost[]>({
       defer
     >
       <VEntityContainer>
-        <VEntity v-for="post in data" :key="post.post.metadata.name">
-          <template #start>
-            <VEntityField
-              :title="post.post.spec.title"
-              :route="{
-                name: 'PostEditor',
-                query: { name: post.post.metadata.name },
-              }"
-            >
-              <template #description>
-                <VSpace>
-                  <span class="text-xs text-gray-500">
-                    {{
-                      $t(
-                        "core.dashboard.widgets.presets.recent_published.visits",
-                        { visits: post.stats.visit || 0 }
-                      )
-                    }}
-                  </span>
-                  <span class="text-xs text-gray-500">
-                    {{
-                      $t(
-                        "core.dashboard.widgets.presets.recent_published.comments",
-                        { comments: post.stats.totalComment || 0 }
-                      )
-                    }}
-                  </span>
-                  <span class="truncate text-xs tabular-nums text-gray-500">
-                    {{
-                      $t(
-                        "core.dashboard.widgets.presets.recent_published.publishTime",
-                        {
-                          publishTime: formatDatetime(
-                            post.post.spec.publishTime
-                          ),
-                        }
-                      )
-                    }}
-                  </span>
-                </VSpace>
-              </template>
-              <template #extra>
-                <a
-                  v-if="post.post.status?.permalink"
-                  target="_blank"
-                  :href="post.post.status?.permalink"
-                  :title="post.post.status?.permalink"
-                  class="hidden text-gray-600 transition-all hover:text-gray-900 group-hover:inline-block"
-                >
-                  <IconExternalLinkLine class="h-3.5 w-3.5" />
-                </a>
-              </template>
-            </VEntityField>
-          </template>
-        </VEntity>
+        <PostListItem
+          v-for="post in data"
+          :key="post.post.metadata.name"
+          :post="post"
+        />
       </VEntityContainer>
     </OverlayScrollbarsComponent>
   </WidgetCard>
diff --git a/ui/console-src/modules/dashboard/widgets/presets/posts/components/PostListItem.vue b/ui/console-src/modules/dashboard/widgets/presets/posts/components/PostListItem.vue
new file mode 100644
index 000000000..94d2bd3f2
--- /dev/null
+++ b/ui/console-src/modules/dashboard/widgets/presets/posts/components/PostListItem.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { postLabels } from "@/constants/labels";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
+import type { ListedPost } from "@halo-dev/api-client";
+import {
+  IconExternalLinkLine,
+  VEntity,
+  VEntityField,
+  VSpace,
+  VTag,
+} from "@halo-dev/components";
+import { computed } from "vue";
+
+const props = defineProps<{
+  post: ListedPost;
+}>();
+
+const isPublished = computed(() => {
+  return props.post.post.metadata.labels?.[postLabels.PUBLISHED] === "true";
+});
+
+const previewUrl = computed(() => {
+  const { status, metadata } = props.post.post;
+  if (isPublished.value) {
+    return status?.permalink;
+  }
+  return `/preview/posts/${metadata.name}`;
+});
+
+const datetime = computed(() => {
+  return (
+    props.post.post.spec.publishTime ||
+    props.post.post.metadata.creationTimestamp
+  );
+});
+</script>
+
+<template>
+  <VEntity>
+    <template #start>
+      <VEntityField
+        :title="post.post.spec.title"
+        :route="{
+          name: 'PostEditor',
+          query: { name: post.post.metadata.name },
+        }"
+      >
+        <template v-if="isPublished" #description>
+          <VSpace>
+            <span class="text-xs text-gray-500">
+              {{
+                $t("core.dashboard.widgets.presets.recent_published.visits", {
+                  visits: post.stats.visit || 0,
+                })
+              }}
+            </span>
+            <span class="text-xs text-gray-500">
+              {{
+                $t("core.dashboard.widgets.presets.recent_published.comments", {
+                  comments: post.stats.totalComment || 0,
+                })
+              }}
+            </span>
+          </VSpace>
+        </template>
+        <template #extra>
+          <VSpace>
+            <VTag v-if="!isPublished">
+              {{ $t("core.post.filters.status.items.draft") }}
+            </VTag>
+            <a
+              v-if="previewUrl"
+              target="_blank"
+              :href="previewUrl"
+              :title="previewUrl"
+              class="hidden text-gray-600 transition-all hover:text-gray-900 group-hover:inline-block"
+            >
+              <IconExternalLinkLine class="h-3.5 w-3.5" />
+            </a>
+          </VSpace>
+        </template>
+      </VEntityField>
+    </template>
+    <template #end>
+      <VEntityField
+        v-tooltip="formatDatetime(datetime)"
+        :description="relativeTimeTo(datetime)"
+      ></VEntityField>
+    </template>
+  </VEntity>
+</template>
diff --git a/ui/src/locales/en.yaml b/ui/src/locales/en.yaml
index f9517825b..cb2ae898e 100644
--- a/ui/src/locales/en.yaml
+++ b/ui/src/locales/en.yaml
@@ -66,7 +66,6 @@ core:
           title: Recent Posts
           visits: "{visits} Visits"
           comments: "{comments} Comments"
-          publishTime: Publish Time {publishTime}
         notification:
           title: Notifications
           empty:
diff --git a/ui/src/locales/zh-CN.yaml b/ui/src/locales/zh-CN.yaml
index 6ddc2a192..6f8c5bc6e 100644
--- a/ui/src/locales/zh-CN.yaml
+++ b/ui/src/locales/zh-CN.yaml
@@ -64,7 +64,6 @@ core:
           title: 最近文章
           visits: 访问量 {visits}
           comments: 评论 {comments}
-          publishTime: 发布日期 {publishTime}
         notification:
           title: 通知
           empty:
diff --git a/ui/src/locales/zh-TW.yaml b/ui/src/locales/zh-TW.yaml
index be3312ff8..1f8d9c768 100644
--- a/ui/src/locales/zh-TW.yaml
+++ b/ui/src/locales/zh-TW.yaml
@@ -64,7 +64,6 @@ core:
           title: 最近文章
           visits: 訪問量 {visits}
           comments: 留言 {comments}
-          publishTime: 發佈日期 {publishTime}
         notification:
           title: 通知
           empty:
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index 88b074f64..95b5ad781 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -3,7 +3,7 @@ import StatusDotField from "@/components/entity-fields/StatusDotField.vue";
 import HasPermission from "@/components/permission/HasPermission.vue";
 import PostContributorList from "@/components/user/PostContributorList.vue";
 import { postLabels } from "@/constants/labels";
-import { formatDatetime } from "@/utils/date";
+import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import PostTag from "@console/modules/contents/posts/tags/components/PostTag.vue";
 import type { ListedPost } from "@halo-dev/api-client";
 import { ucApiClient } from "@halo-dev/api-client";
@@ -238,8 +238,11 @@ function handleDelete() {
       <VEntityField v-if="post.post.spec.publishTime">
         <template #description>
           <div class="inline-flex items-center space-x-2">
-            <span class="entity-field-description">
-              {{ formatDatetime(post.post.spec.publishTime) }}
+            <span
+              v-tooltip="formatDatetime(post.post.spec.publishTime)"
+              class="entity-field-description"
+            >
+              {{ relativeTimeTo(post.post.spec.publishTime) }}
             </span>
             <IconTimerLine
               v-if="