refactor: display of comment datetime

packages/comment-widget/package.json

@@ -35,7 +35,9 @@
     "@halo-dev/components": "^1.5.0",
     "@vueuse/components": "8.9.4",
     "@vueuse/core": "8.9.4",
+    "dayjs": "^1.11.8",
     "emoji-mart-vue-fast": "^12.0.1",
+    "javascript-time-ago": "^2.5.9",
     "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {

packages/comment-widget/src/components/CommentItem.vue

@@ -12,7 +12,7 @@ import Form from "./Form.vue";
 import type { CommentVo, ReplyVo } from "@halo-dev/api-client";
 import { computed, provide, ref, watch, inject, type Ref } from "vue";
 import { apiClient } from "@/utils/api-client";
-import { useTimeAgo } from "@vueuse/core";
+import { formatDatetime, timeAgo } from "@/utils/date";
 import MdiCardsHeart from "~icons/mdi/cards-heart";
 import MdiCardsHeartOutline from "~icons/mdi/cards-heart-outline";
 import MdiCommentQuoteOutline from "~icons/mdi/comment-quote-outline";
@@ -40,10 +40,6 @@ const hoveredReply = ref<ReplyVo>();
 
 provide<Ref<ReplyVo | undefined>>("hoveredReply", hoveredReply);
 
-const timeAgo = useTimeAgo(
-  new Date(props.comment?.spec.creationTime || new Date())
-);
-
 const isAuthor = computed(() => {
   if (!props.comment) {
     return false;
@@ -154,12 +150,12 @@ const handleUpvote = async () => {
                 {{ comment?.owner.displayName }}
               </span>
             </div>
-            <a
-              :href="`#comment-${comment?.metadata.name}`"
-              class="cursor-pointer text-xs text-gray-500 hover:text-blue-600 hover:underline dark:text-slate-400 dark:hover:text-slate-300"
+            <span
+              class="text-xs text-gray-500 dark:text-slate-400"
+              :title="formatDatetime(comment?.spec.creationTime)"
             >
-              {{ timeAgo }}
-            </a>
+              {{ timeAgo(comment?.spec.creationTime) }}
+            </span>
             <VTag
               v-if="isAuthor"
               rounded

packages/comment-widget/src/components/ReplyItem.vue

@@ -3,7 +3,7 @@ import { VTag, VAvatar } from "@halo-dev/components";
 import Form from "./Form.vue";
 import type { CommentVo, ReplyVo } from "@halo-dev/api-client";
 import { computed, inject, ref, type Ref } from "vue";
-import { useTimeAgo } from "@vueuse/core";
+import { formatDatetime, timeAgo } from "@/utils/date";
 import MdiReply from "~icons/mdi/reply";
 import { apiClient } from "@/utils/api-client";
 import MdiCardsHeart from "~icons/mdi/cards-heart";
@@ -21,10 +21,6 @@ const emit = defineEmits<{
 
 const showForm = ref(false);
 
-const timeAgo = useTimeAgo(
-  new Date(props.reply.spec.creationTime || new Date())
-);
-
 const website = computed(() => {
   if (!props.reply) {
     return "";
@@ -117,12 +113,12 @@ const handleUpvote = async () => {
                 {{ reply?.owner.displayName }}
               </span>
             </div>
-            <a
-              :href="`#reply-${reply.metadata.name}`"
-              class="cursor-pointer text-xs text-gray-500 hover:text-blue-600 hover:underline dark:text-slate-400 dark:hover:text-slate-300"
+            <span
+              class="text-xs text-gray-500 dark:text-slate-400"
+              :title="formatDatetime(reply.spec.creationTime)"
             >
-              {{ timeAgo }}
-            </a>
+              {{ timeAgo(reply.spec.creationTime) }}
+            </span>
             <VTag
               v-if="false"
               rounded

packages/comment-widget/src/utils/date.ts

@@ -0,0 +1,34 @@
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import timezone from "dayjs/plugin/timezone";
+import TimeAgo from "javascript-time-ago";
+import zh from "javascript-time-ago/locale/zh";
+
+dayjs.extend(timezone);
+
+dayjs.locale("zh-cn");
+
+TimeAgo.addDefaultLocale(zh);
+
+export function formatDatetime(date: string | Date | undefined | null): string {
+  if (!date) {
+    return "";
+  }
+  return dayjs(date).format("YYYY-MM-DD HH:mm");
+}
+
+export function timeAgo(date: string | Date | undefined | null): string {
+  if (!date) {
+    return "";
+  }
+
+  const currentDate = new Date();
+
+  if (currentDate.getFullYear() - new Date(date).getFullYear() > 0) {
+    return formatDatetime(new Date(date));
+  }
+
+  const timeAgo = new TimeAgo("zh");
+
+  return timeAgo.format(new Date(date));
+}