From c6e89c0b86a98945a443fc221341a1526d2723ad Mon Sep 17 00:00:00 2001
From: Snowykami <snowykami@outlook.com>
Date: Wed, 10 Sep 2025 12:34:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AF=84=E8=AE=BA?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E6=A0=BC=E5=BC=8F=E5=8C=96=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E8=AF=84=E8=AE=BA=E9=A1=B9=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=EF=BC=8C=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/comment/comment-input.tsx |  3 +-
 web/src/components/comment/comment-item.tsx  | 33 +++++++++++--
 web/src/i18n/request.ts                      |  2 +-
 web/src/locales/zh-CN.json                   |  7 ++-
 web/src/utils/common/datetime.ts             | 52 ++++++++++++++++++++
 5 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 web/src/utils/common/datetime.ts

diff --git a/web/src/components/comment/comment-input.tsx b/web/src/components/comment/comment-input.tsx
index 894d644..b0c669c 100644
--- a/web/src/components/comment/comment-input.tsx
+++ b/web/src/components/comment/comment-input.tsx
@@ -2,7 +2,6 @@ import { useToLogin, useToUserProfile } from "@/hooks/use-route";
 import { User } from "@/models/user";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import NeedLogin from "@/components/common/need-login";
 import { toast } from "sonner";
 import { getGravatarByUser } from "@/components/common/gravatar";
 import { CircleUser } from "lucide-react";
@@ -60,7 +59,7 @@ export function CommentInput(
   return (
     <div className="fade-in-up">
       <div className="flex py-4 fade-in">
-        <div onClick={user ? () => clickToUserProfile(user.username) : clickToLogin} className="flex-shrink-0 w-10 h-10 fade-in">
+        <div onClick={user ? () => clickToUserProfile(user.username) : clickToLogin} className="cursor-pointer flex-shrink-0 w-10 h-10 fade-in">
           {user ? getGravatarByUser(user) : null}
           {!user && <CircleUser className="w-full h-full fade-in" />}
         </div>
diff --git a/web/src/components/comment/comment-item.tsx b/web/src/components/comment/comment-item.tsx
index c94019f..9daf81d 100644
--- a/web/src/components/comment/comment-item.tsx
+++ b/web/src/components/comment/comment-item.tsx
@@ -1,6 +1,6 @@
 import { useToLogin, useToUserProfile } from "@/hooks/use-route";
 import { User } from "@/models/user";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import { useState } from "react";
 import { toast } from "sonner";
 import { getGravatarByUser } from "@/components/common/gravatar";
@@ -13,6 +13,7 @@ import { CommentInput } from "./comment-input";
 import { createComment, deleteComment, listComments, updateComment } from "@/api/comment";
 import { OrderBy } from "@/models/common";
 import config from "@/config";
+import { formatDateTime } from "@/utils/common/datetime";
 
 
 export function CommentItem(
@@ -32,8 +33,10 @@ export function CommentItem(
     setActiveInputId: (input: { id: number; type: 'reply' | 'edit' } | null) => void,
   }
 ) {
-  const t = useTranslations("Comment")
-  const commonT = useTranslations('Common')
+  const locale = useLocale();
+  console.log("locale", locale);
+  const t = useTranslations("Comment");
+  const commonT = useTranslations("Common");
   const clickToUserProfile = useToUserProfile();
   const clickToLogin = useToLogin();
   const { confirming, onClick, onBlur } = useDoubleConfirm();
@@ -157,7 +160,27 @@ export function CommentItem(
           {getGravatarByUser(comment.user)}
         </div>
         <div className="flex-1 pl-2 fade-in-up">
-          <div onClick={() => clickToUserProfile(comment.user.username)} className="font-bold text-base text-slate-800 dark:text-slate-100 cursor-pointer fade-in-up">{comment.user.nickname}</div>
+          <div className="flex gap-2 md:gap-4 items-center">
+            <div onClick={() => clickToUserProfile(comment.user.username)} className="font-bold text-base text-slate-800 dark:text-slate-100 cursor-pointer fade-in-up">
+              {comment.user.nickname}
+            </div>
+            <span className="text-xs">{formatDateTime({
+              dateTimeString: comment.createdAt,
+              locale,
+              convertShortAgo: true,
+              unitI18n: { secondsAgo: commonT("secondsAgo"), minutesAgo: commonT("minutesAgo"), hoursAgo: commonT("hoursAgo"), daysAgo: commonT("daysAgo") }
+            })}</span>
+            {comment.createdAt !== comment.updatedAt &&
+              <span className="text-xs">{t("edit_at", {
+                time: formatDateTime({
+                  dateTimeString: comment.updatedAt,
+                  locale,
+                  convertShortAgo: true,
+                  unitI18n: { secondsAgo: commonT("secondsAgo"), minutesAgo: commonT("minutesAgo"), hoursAgo: commonT("hoursAgo"), daysAgo: commonT("daysAgo") }
+                })
+              })}</span>}
+          </div>
+
           <p className="text-lg text-slate-600 dark:text-slate-400 fade-in">
             {
               isPrivate && <Lock className="inline w-4 h-4 mr-1 mb-1 text-slate-500 dark:text-slate-400" />
@@ -169,7 +192,7 @@ export function CommentItem(
             {comment.content}
           </p>
           <div className="mt-1 text-xs text-slate-500 dark:text-slate-400 flex items-center gap-4 fade-in">
-            <span>{new Date(comment.updatedAt).toLocaleString()}</span>
+
             {/* 点赞按钮 */}
             <button
               title={t(liked ? "unlike" : "like")}
diff --git a/web/src/i18n/request.ts b/web/src/i18n/request.ts
index dcf4df6..005750e 100644
--- a/web/src/i18n/request.ts
+++ b/web/src/i18n/request.ts
@@ -16,7 +16,7 @@ export default getRequestConfig(async () => {
     })
   ).then((msgs) => msgs.reduce((acc, msg) => deepmerge(acc, msg), {}));
   return {
-    locale: locales[0],
+    locale: locales[locales.length - 1] || 'en',
     messages
   };
 });
diff --git a/web/src/locales/zh-CN.json b/web/src/locales/zh-CN.json
index b71c3c7..e7f2685 100644
--- a/web/src/locales/zh-CN.json
+++ b/web/src/locales/zh-CN.json
@@ -14,6 +14,7 @@
     "delete_failed": "删除评论失败",
     "delete_success": "评论已经删除",
     "edit": "编辑",
+    "edit_at": "编辑于{time}",
     "edit_failed": "编辑评论失败",
     "edit_success": "评论已更新",
     "expand_replies": "展开 {count} 条",
@@ -31,7 +32,11 @@
     "update": "更新"
   },
   "Common":{
-    "login": "登录"
+    "login": "登录",
+    "daysAgo": "天前",
+    "hoursAgo": "小时前",
+    "minutesAgo": "分钟前",
+    "secondsAgo": "秒前"
   },
   "Login": {
     "welcome": "欢迎回来",
diff --git a/web/src/utils/common/datetime.ts b/web/src/utils/common/datetime.ts
new file mode 100644
index 0000000..87c8a26
--- /dev/null
+++ b/web/src/utils/common/datetime.ts
@@ -0,0 +1,52 @@
+function getAgoString(diff: number, unitI18n: { secondsAgo: string; minutesAgo: string; hoursAgo: string; daysAgo: string; }): string {
+  let value: number, unit: string;
+  if (diff < 60 * 1000) {
+    value = Math.floor(diff / 1000);
+    unit = unitI18n.secondsAgo;
+    return `${value}${unit}`;
+  } else if (diff < 60 * 60 * 1000) {
+    value = Math.floor(diff / (60 * 1000));
+    unit = unitI18n.minutesAgo;
+    return `${value}${unit}`;
+  } else if (diff < 24 * 60 * 60 * 1000) {
+    value = Math.floor(diff / (60 * 60 * 1000));
+    unit = unitI18n.hoursAgo;
+    return `${value}${unit}`;
+  } else {
+    value = Math.floor(diff / (24 * 60 * 60 * 1000));
+    unit = unitI18n.daysAgo;
+    return `${value}${unit}`;
+  }
+}
+
+export function formatDateTime({
+  dateTimeString,
+  locale,
+  convertShortAgo,
+  convertShortAgoDuration = 3 * 24 * 60 * 60 * 1000,
+  unitI18n = { secondsAgo: "s ago", minutesAgo: "m ago", hoursAgo: "h ago", daysAgo: "d ago" }
+}: {
+  dateTimeString: string;
+  locale: string;
+  convertShortAgo?: boolean;
+  convertShortAgoDuration?: number;
+  unitI18n?: { secondsAgo: string; minutesAgo: string; hoursAgo: string; daysAgo: string; };
+}): string {
+  const date = new Date(dateTimeString);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+
+  if (convertShortAgo && diff >= 0 && diff < convertShortAgoDuration) {
+    return getAgoString(diff, unitI18n);
+  }
+
+  return date.toLocaleString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
\ No newline at end of file