Feat: 新增评论组件，细化通知组件样式，引入环境变量，替换图标组件

app/routes/gallery.tsx

@@ -9,6 +9,8 @@ import { getImageThumbUrl } from "~/utils/media";
 import type { Route } from "./+types/gallery";
 import styles from "./gallery.module.css";
 
+const { APP_APIURL } = import.meta.env;
+
 export function meta({ loaderData }: Route.MetaArgs) {
   return [
     { title: siteTitle(loaderData?.currentCategory?.name || "相册") },
@@ -28,7 +30,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
   const searchParams = new URLSearchParams();
   searchParams.append("page", page);
 
-  const category = await fetch(`https://paul.ren/api/gallery`).then((res) => res.json()) as unknown as API.PageResponse<API.Gallery.ICateData[]>;
+  const category = await fetch(`${APP_APIURL}/api/gallery`).then((res) => res.json()) as unknown as API.PageResponse<API.Gallery.ICateData[]>;
   let cateIndex = -1;
 
   if (params["*"]) {
@@ -41,7 +43,7 @@ export async function loader({ request, params }: Route.LoaderArgs) {
     searchParams.append("cate", String(category.data[cateIndex].id));
   }
 
-  const media = await fetch(`https://paul.ren/api/media/?${searchParams.toString()}`).then((res) => res.json()) as unknown as API.PageResponse<API.Media.IMediaData[]>;
+  const media = await fetch(`${APP_APIURL}/api/media/?${searchParams.toString()}`).then((res) => res.json()) as unknown as API.PageResponse<API.Media.IMediaData[]>;
   const currentCategory = cateIndex > -1 ? category.data[cateIndex]: undefined;
 
   return { media, category, currentCategory, page };

app/routes/index.tsx

@@ -17,6 +17,8 @@ import type { Route } from "./+types/index";
 
 import styles from "./index.module.css";
 
+const { APP_APIURL } = import.meta.env;
+
 const year = new Date().getFullYear();
 
 export function meta({}: Route.MetaArgs) {
@@ -27,7 +29,7 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export async function loader() {
-  const data = (await fetch("https://paul.ren/api/sync").then((res) =>
+  const data = (await fetch(`${APP_APIURL}/api/sync`).then((res) =>
     res.json()
   )) as unknown as API.Response<API.Sync.ISyncData>;
 

app/routes/note-detail.tsx

@@ -1,11 +1,18 @@
 import { useState } from "react";
+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 { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
+import { useHydrated } from "~/hooks/use-hydrated";
 import { siteTitle } from "~/utils";
+import { getImageThumbUrl } from "~/utils/media";
 
 import type { Route } from "./+types/note-detail";
 
+const { APP_APIURL } = import.meta.env;
+
 export function meta({ loaderData }: Route.MetaArgs) {
   return [
     { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
@@ -19,7 +26,7 @@ export async function loader({ params }: Route.LoaderArgs) {
   }
 
   const note = (await fetch(
-    `https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`
+    `${APP_APIURL}/api/note/get?id=${params.id}&year=${params.year}`,
   ).then((res) => res.json())) as API.Response<API.Note.INoteData>;
 
   if (note.status === "Failed") {
@@ -31,9 +38,22 @@ export async function loader({ params }: Route.LoaderArgs) {
 
 export default function NoteDetail({ loaderData }: Route.ComponentProps) {
   const note = loaderData;
+  const params = useParams();
+  const hydrated = useHydrated();
+  const { ref: mediaLightBoxRef, open: onShowMediaLightBox } = useLightBox();
 
   const [likes, setLikes] = useState(note.data.likes);
 
+  const mediaList = note.data.media?.length
+    ? note.data.media.map((item) => ({
+        ...item,
+        thumb_url: item.thumb_url || getImageThumbUrl(item.url),
+      }))
+    : [];
+
+  const hasMedia = mediaList.length > 0;
+  const commentRef = `note-${params.year}-${params.id}`;
+
   const onLike = () => {
     setLikes((prevLike) => prevLike + 1);
   };
@@ -65,8 +85,38 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
       </section>
       <section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-16">
         <Article html={note.data.content_html} />
+        {hasMedia && (
+          <div className="mt-8 flex flex-col gap-4">
+            {mediaList.map((media, index) => {
+              const isVideo = media.type === "mp4" || media.url.includes("mp4");
+
+              if (isVideo) {
+                return (
+                  <video
+                    key={media.id || media.url}
+                    src={media.url}
+                    controls
+                    className="w-full rounded-xl cursor-pointer"
+                    onClick={() => onShowMediaLightBox(index)}
+                  />
+                );
+              }
+
+              return (
+                <img
+                  key={media.id || media.url}
+                  src={getImageThumbUrl(media.url)}
+                  alt={media.title}
+                  loading="lazy"
+                  className="w-full rounded-xl cursor-pointer hover:opacity-90 transition-opacity"
+                  onClick={() => onShowMediaLightBox(index)}
+                />
+              );
+            })}
+          </div>
+        )}
       </section>
-      <section className="flex gap-16 items-center justify-center text-base md:text-lg">
+      <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" />
           {likes}
@@ -80,6 +130,10 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
           打赏
         </button>
       </section>
+
+      <Comments refs={commentRef} />
+
+      {hydrated && <LightBox ref={mediaLightBoxRef} list={mediaList} />}
     </main>
   );
 }

app/routes/note.tsx

@@ -8,6 +8,8 @@ import { getFirstImage, years } from "~/utils/note";
 
 import type { Route } from "./+types/note";
 
+const { APP_APIURL } = import.meta.env;
+
 export function meta({}: Route.MetaArgs) {
   return [
     { title: siteTitle("日记") },
@@ -20,7 +22,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const year = url.searchParams.get("year") || new Date().getFullYear();
   const page = url.searchParams.get("page") || 1;
 
-  const note = await fetch(`https://paul.ren/api/note/?page=${page}&year=${year}`).then((res) => res.json()) as API.PageResponse<API.Note.INoteData[]>;
+  const note = await fetch(`${APP_APIURL}/api/note/?page=${page}&year=${year}`).then((res) => res.json()) as API.PageResponse<API.Note.INoteData[]>;
 
   return { note, page, year };
 }

app/routes/page.tsx

@@ -3,6 +3,8 @@ import { siteTitle } from "~/utils";
 
 import type { Route } from "./+types/page";
 
+const { APP_APIURL } = import.meta.env;
+
 export function meta({ loaderData }: Route.MetaArgs) {
   return [
     { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
@@ -14,7 +16,7 @@ export async function loader({ params }: Route.LoaderArgs) {
   const slug = params["*"];
 
   const page = (await fetch(
-    `https://paul.ren/api/page/get?slug=${slug}&html`,
+    `${APP_APIURL}/api/page/get?slug=${slug}&html`,
   ).then((res) => res.json())) as API.Response<API.Page.IPageData>;
 
   if (page.status === "Failed") {