From d84b8314e4cef15d58abcabd955f4f1ebec11256 Mon Sep 17 00:00:00 2001
From: nyne <me@nyne.dev>
Date: Wed, 9 Jul 2025 18:04:48 +0800
Subject: [PATCH] Improve users page.

---
 frontend/src/i18n.ts             |  5 ++
 frontend/src/pages/user_page.tsx | 80 ++++++++++++++++++++++----------
 2 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 1087279..a3badcf 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -233,6 +233,7 @@ export const i18nData = {
       "Click to view more": "Click to view more",
       "Comment Details": "Comment Details",
       "Posted a comment": "Posted a comment",
+      "Resources": "Resources",
     },
   },
   "zh-CN": {
@@ -458,6 +459,8 @@ export const i18nData = {
       "Click to view more": "点击查看更多",
       "Comment Details": "评论详情",
       "Posted a comment": "发布了一个评论",
+
+      "Resources": "资源",
     },
   },
   "zh-TW": {
@@ -683,6 +686,8 @@ export const i18nData = {
       "Click to view more": "點擊查看更多",
       "Comment Details": "評論詳情",
       "Posted a comment": "發布了評論",
+
+      "Resources": "資源",
     },
   },
 };
diff --git a/frontend/src/pages/user_page.tsx b/frontend/src/pages/user_page.tsx
index 48bae74..aaf5e71 100644
--- a/frontend/src/pages/user_page.tsx
+++ b/frontend/src/pages/user_page.tsx
@@ -1,4 +1,4 @@
-import { useParams } from "react-router";
+import { useParams, useLocation, useNavigate } from "react-router";
 import { CommentWithResource, User } from "../network/models";
 import { network } from "../network/network";
 import showToast from "../components/toast";
@@ -7,16 +7,39 @@ import ResourcesView from "../components/resources_view";
 import Loading from "../components/loading";
 import Pagination from "../components/pagination";
 import { CommentTile } from "../components/comment_tile.tsx";
+import Badge from "../components/badge.tsx";
+import { MdOutlineArchive, MdOutlineComment, MdOutlinePhotoAlbum, MdPhotoAlbum } from "react-icons/md";
+import { useTranslation } from "react-i18next";
 
 export default function UserPage() {
   const [user, setUser] = useState<User | null>(null);
 
   const { username: rawUsername } = useParams();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   // 解码用户名，确保特殊字符被还原
   const username = rawUsername ? decodeURIComponent(rawUsername) : "";
 
-  const [page, setPage] = useState(0);
+  // 从 hash 中获取当前页面，默认为 resources
+  const getPageFromHash = () => {
+    const hash = location.hash.slice(1); // 移除 # 号
+    if (hash === "comments") return 1;
+    return 0; // 默认为 resources
+  };
+
+  const [page, setPage] = useState(getPageFromHash());
+
+  // 监听 hash 变化
+  useEffect(() => {
+    setPage(getPageFromHash());
+  }, [location.hash]);
+
+  // 更新 hash 的函数
+  const updateHash = (newPage: number) => {
+    const hash = newPage === 1 ? "#comments" : "#resources";
+    navigate(location.pathname + hash, { replace: true });
+  };
 
   useEffect(() => {
     network.getUserInfo(username || "").then((res) => {
@@ -46,18 +69,18 @@ export default function UserPage() {
   return (
     <div>
       <UserCard user={user!} />
-      <div role="tablist" className="border-b border-base-300 mx-2 flex">
+      <div role="tablist" className="border-b border-base-300 mx-2 flex tabs tabs-border">
         <div
           role="tab"
-          className={`text-sm py-2 px-4 cursor-pointer border-b-2 border-base-100 ${page === 0 ? "border-primary text-primary" : "text-base-content/80"} transition-all`}
-          onClick={() => setPage(0)}
+          className={`tab ${page === 0 ? "tab-active" : ""} `}
+          onClick={() => updateHash(0)}
         >
           Resources
         </div>
         <div
           role="tab"
-          className={`text-sm py-2 px-4 cursor-pointer border-b-2 border-base-100 ${page === 1 ? "border-primary text-primary" : "text-base-content/80"}`}
-          onClick={() => setPage(1)}
+          className={`tab ${page === 1 ? "tab-active" : ""}`}
+          onClick={() => updateHash(1)}
         >
           Comments
         </div>
@@ -72,8 +95,28 @@ export default function UserPage() {
 }
 
 function UserCard({ user }: { user: User }) {
+  const { t } = useTranslation();
+
+  const statistics = <p className="mt-2">
+          <Badge className="badge-soft badge-primary badge-lg m-1">
+            <MdOutlinePhotoAlbum size={18} />
+            <span className="ml-1 text-sm">{t("Resources")} {user.resources_count}</span>
+          </Badge>
+          <Badge className="badge-soft badge-secondary badge-lg m-1">
+            <MdOutlineArchive size={18} />
+            <span className="ml-1 text-sm">{t('Files')} {user.files_count}</span>
+          </Badge>
+          <Badge className="badge-soft badge-accent badge-lg m-1">
+            <MdOutlineComment size={18} />
+            <span className="ml-1 text-sm">{t("Comments")} {user.comments_count}</span>
+          </Badge>
+        </p>
+
+  const haveBio = user.bio.trim() !== "";
+
   return (
-    <div className={"flex m-4 items-center"}>
+    <>
+      <div className={"flex m-4 items-center"}>
       <div className={"avatar py-2"}>
         <div className="w-24 rounded-full ring-2 ring-offset-2 ring-primary ring-offset-base-100">
           <img alt={"avatar"} src={network.getUserAvatar(user)} />
@@ -83,25 +126,14 @@ function UserCard({ user }: { user: User }) {
       <div>
         <h1 className="text-2xl font-bold">{user.username}</h1>
         <div className="h-4"></div>
-        {user.bio.trim() !== "" ? (
+        {haveBio ? (
           <p className="text-sm text-base-content/80">{user.bio.trim()}</p>
-        ) : (
-          <p>
-            <span className="text-sm font-bold mr-1">
-              {" "}
-              {user.resources_count}
-            </span>
-            <span className="text-sm">Resources</span>
-            <span className="mx-2"></span>
-            <span className="text-sm font-bold mr-1">
-              {" "}
-              {user.comments_count}
-            </span>
-            <span className="text-base-content text-sm">Comments</span>
-          </p>
-        )}
+        ): statistics}
       </div>
+      
     </div>
+    { haveBio && <div className="mb-2 mx-2">{statistics}</div>}
+    </>
   );
 }