Feat: 增加日记点赞功能

app/components/shared/comment/index.tsx

@@ -163,7 +163,7 @@ export default function Comments({ className, refs }: CommentsProps) {
   };
 
   return (
-    <div ref={wrapperRef} className={clsn("bg-white rounded-xl border-b-4 border-b-cyan-200 p-5 md:p-8", className)} id="comments">
+    <div ref={wrapperRef} className={clsn("bg-white rounded-xl border-b-4 border-b-cyan-200 p-5 md:p-12", className)} id="comments">
       <h3 className="text-pink-400 text-2xl font-bold mb-6">
         评论
       </h3>

app/routes/note-detail.tsx

@@ -4,12 +4,14 @@ import { useParams } from "react-router";
 import Article from "~/components/common/article";
 import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
 import Comments from "~/components/shared/comment";
+import { add } from "~/components/ui/notice/utils";
 import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
 import { useHydrated } from "~/hooks/use-hydrated";
-import { siteTitle } from "~/utils";
+import { clsn, siteTitle } from "~/utils";
 import { getImageThumbUrl } from "~/utils/media";
 
 import type { Route } from "./+types/note-detail";
+import { RiLoader5Fill } from "@remixicon/react";
 
 const { APP_APIURL } = import.meta.env;
 
@@ -43,6 +45,8 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
   const { ref: mediaLightBoxRef, open: onShowMediaLightBox } = useLightBox();
 
   const [likes, setLikes] = useState(note.data.likes);
+  const [liked, setLiked] = useState(false);
+  const [liking, setLiking] = useState(false);
 
   const mediaList = note.data.media?.length
     ? note.data.media.map((item) => ({
@@ -54,8 +58,55 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
   const hasMedia = mediaList.length > 0;
   const commentRef = `note-${params.year}-${params.id}`;
 
-  const onLike = () => {
+  const onLike = async () => {
+    if (liking) {
+      return;
+    }
+
+    setLiking(true);
     setLikes((prevLike) => prevLike + 1);
+
+    const formData = new FormData();
+    formData.append("id", String(params.id));
+    formData.append("year", String(params.year));
+
+    try {
+      const res = (await fetch(`${APP_APIURL}/api/note/like`, {
+        method: "POST",
+        body: formData,
+      }).then((r) => r.json())) as API.Response<unknown>;
+
+      if (res.status === "Success") {
+        add({
+          title: "点赞成功",
+          type: "success",
+          content: res.msg,
+        });
+
+        setLiked(true);
+      }
+      else {
+        add({
+          title: "点赞失败",
+          type: "error",
+          content: res.msg,
+        });
+
+        setLikes((prevLike) => prevLike - 1);
+      }
+    }
+    catch {
+      add({
+        title: "点赞失败",
+        type: "error",
+        content: "网络异常",
+      });
+
+      setLikes((prevLike) => prevLike - 1);
+    }
+    finally {
+      setLiking(false);
+    }
   };
 
   const onShare = () => {
@@ -117,8 +168,16 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
         )}
       </section>
       <section className="flex gap-16 items-center justify-center text-base md:text-lg mb-16">
-        <button onClick={onLike}>
-          <ThumbUpFill className="inline-block h-8 w-8 mr-2" />
+        <button
+          onClick={onLike}
+          disabled={liking}
+          className={clsn("transition-colors cursor-pointer disabled:opacity-60", liked && "text-pink-400")}
+        >
+          {liking ? (
+            <RiLoader5Fill className="animate-spin inline-block size-8 mr-2" />
+          ) : (
+            <ThumbUpFill className={clsn("inline-block size-8 mr-2 transition-colors", liked && "text-pink-400")} />
+          )}
           {likes}
         </button>
         <button onClick={onShare}>