feat: add other user's profile

src/components/book_comment.jsx

@@ -7,6 +7,7 @@ import { likeComment, replyComment, unlikeComment } from "../service/comment";
 import { handleBaseApiResponse } from "../utils/message";
 import useMessage from "antd/es/message/useMessage";
 import { AVATAR_FILES_PREFIX } from "../service/user";
+import { Link } from "react-router-dom";
 
 export default function BookComment({ comment, isReplying, onReply, onMutate }) {
     const content = comment.content;
@@ -60,7 +61,9 @@ export default function BookComment({ comment, isReplying, onReply, onMutate })
         {contextHolder}
         <List.Item key={comment.id}>
             <List.Item.Meta
-                avatar={comment.avatar ? <Avatar src={AVATAR_FILES_PREFIX + comment.avatar} /> : <UsernameAvatar username={comment.username} />}
+                avatar={<Link to={`/profile/${comment.userId}`}>
+                    {comment.avatar ? <Avatar src={AVATAR_FILES_PREFIX + comment.avatar} /> : <UsernameAvatar username={comment.username} />}
+                </Link>}
                 title={<div style={{ color: "grey" }}>{comment.username}</div>}
                 description={contentComponent}
             />

src/components/other_user_profile.jsx

@@ -0,0 +1,26 @@
+import { Avatar, Card, Divider, Space } from "antd";
+import { AVATAR_FILES_PREFIX, getOtherUser } from "../service/user";
+import { useEffect, useState } from "react";
+
+export default function OtherUserProfile({ userId }) {
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        getOtherUser(userId).then(setUser);
+    }, [userId]);
+
+    return <Card style={{ width: "50%", margin: "20px auto 0" }}>
+        <Space direction="vertical" style={{ textAlign: "center", width: "100%" }} size={2}>
+            <Avatar
+                src={user?.avatar ? (AVATAR_FILES_PREFIX + user.avatar) : "/default_avatar.jpeg"}
+                style={{ width: "100px", height: "100px" }}
+            />
+            <span style={{ fontSize: 20 }}>{user?.nickname}</span>
+            <span style={{ fontSize: 14, color: "grey" }}>{user?.introduction ? user.introduction : "这个人很懒，什么也没留下"}</span>
+        </Space>
+        <Divider />
+        <Space direction="vertical">
+            <span style={{ fontSize: 16, color: "#222222" }}>用户名：{user?.username}</span>
+        </Space>
+    </Card >
+}

src/components/router.jsx

@@ -7,6 +7,7 @@ import OrderPage from "../page/order";
 import RankPage from "../page/rank";
 import ApiPage from "../page/api";
 import ProfilePage from "../page/profile";
+import OtherUserProfilePage from "../page/other_profile";
 
 export default function AppRouter() {
     return <BrowserRouter>
@@ -18,6 +19,7 @@ export default function AppRouter() {
             <Route path="/order" element={<OrderPage />} />
             <Route path="/rank" element={<RankPage />} />
             <Route path="/profile" element={<ProfilePage />} />
+            <Route path="/profile/:id" element={<OtherUserProfilePage />} />
             <Route path="/api-docs" element={<ApiPage />} />
             <Route path="/*" element={<HomePage />} />
         </Routes>

src/components/user_profile.jsx

@@ -90,7 +90,7 @@ export default function UserProfile() {
                     offset={[-5, 85]} // Adjust the position of the button
                 >
                     <Avatar
-                        src={user?.avatar ? AVATAR_FILES_PREFIX + user.avatar : "default_avatar.jpeg"}
+                        src={user?.avatar ? AVATAR_FILES_PREFIX + user.avatar : "/default_avatar.jpeg"}
                         style={{ width: "100px", height: "100px" }}
                     />
                 </Badge>

src/page/other_profile.jsx

@@ -0,0 +1,11 @@
+import { useParams } from "react-router-dom";
+import { PrivateLayout } from "../components/layout";
+import OtherUserProfile from "../components/other_user_profile";
+
+export default function OtherUserProfilePage() {
+    const { id } = useParams();
+
+    return <PrivateLayout>
+        <OtherUserProfile userId={id} />
+    </PrivateLayout>
+}

src/service/user.js

@@ -14,6 +14,17 @@ export async function getMe() {
     return me;
 }
 
+export async function getOtherUser(userId) {
+    const url = `${PREFIX}/user/${userId}`;
+    let user = null;
+    try {
+        user = await getJson(url);
+    } catch (e) {
+        console.log(e);
+    }
+    return user;
+}
+
 export async function changePassword(request) {
     const url = `${PREFIX}/user/me/password`;
     let res;