Chore: 更新框架到 React Router 7

修复迁移到 Tailwind 4 之后的样式差异
修复 404 页面的异常并调整样式
优化分页器组件的无障碍化，Span 标签替换成 Button

app/routes/$.tsx

@@ -1,39 +0,0 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import Article from "~/components/common/article";
-import { siteTitle } from "~/utils";
-
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-  return [
-    { title: data ? siteTitle(data.data.title) : "404" },
-    { name: "description", content: data?.data.desc },
-  ];
-}
-
-export async function loader({ params }: LoaderFunctionArgs) {
-  const slug = params["*"];
-
-  const page = await fetch(`https://paul.ren/api/page/get?slug=${slug}&html`).then((res) => res.json()) as API.Response<API.Page.IPageData>;
-
-  if (page.status === "Failed") {
-    throw json("Not Found", { status: 404, statusText: page.msg });
-  }
-
-  return page;
-}
-
-export default function DynamicPage() {
-  const page = useLoaderData<typeof loader>();
-
-  return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="mb-12">
-        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
-        <p className="text-center opacity-60">{page.data.desc}</p>
-      </section>
-      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
-        <Article html={page.data.content} />
-      </section>
-    </main>
-  );
-}

app/routes/_index/styles.module.less

@@ -1,7 +0,0 @@
-.avatar {
-  width: 160px;
-  position: relative;
-  --path: path('M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z');
-  --webkit-clip-path: var(--path);
-  clip-path: var(--path);
-}

app/routes/app-layout.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from "react-router";
+
+import Footer from "~/components/layout/footer";
+import Header from "~/components/layout/header";
+import Spinner from "~/components/layout/spinner";
+
+export default function AppLayout() {
+  return (
+    <>
+      <Spinner />
+      <Header />
+      <Outlet />
+      <Footer />
+    </>
+  );
+}

app/routes/gallery.tsx

@@ -1,20 +1,26 @@
-import { NavLink, useLoaderData, useNavigate } from "@remix-run/react";
-import { json, LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
-import Pagination from "~/components/common/pagination";
-import { clsn, siteTitle } from "~/utils";
-import { StarFill } from "~/components/common/icons";
+import { NavLink, useNavigate } from "react-router";
+
 import LightBox, { useLightBox } from "~/components/biz/gallery/image-box";
+import { StarFill } from "~/components/ui/icons";
+import Pagination from "~/components/ui/pagination";
+import { clsn, siteTitle } from "~/utils";
 
-import styles from "./styles.module.less";
+import type { Route } from "./+types/gallery";
+import styles from "./gallery.module.css";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export function meta({ loaderData }: Route.MetaArgs) {
   return [
-    { title: siteTitle(data?.currentCategory?.name || "相册") },
-    { name: "description", content: data?.currentCategory?.description || "奇趣保罗的照片与收藏" },
+    { title: siteTitle(loaderData?.currentCategory?.name || "相册") },
+    {
+      name: "description",
+      content:
+        loaderData?.currentCategory?.description ||
+        "奇趣保罗的照片与收藏",
+    },
   ];
-};
+}
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
   const url = new URL(request.url);
   const page = url.searchParams.get("page") || "1";
 
@@ -28,7 +34,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     cateIndex = category.data.findIndex((item) => item.slug === params["*"]);
 
     if (cateIndex === -1) {
-      throw json("Not Found", { status: 404 });
+      throw new Response("Not Found", { status: 404 });
     }
 
     searchParams.append("cate", String(category.data[cateIndex].id));
@@ -40,9 +46,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   return { media, category, currentCategory, page };
 }
 
-export default function Gallery() {
+export default function Gallery({ loaderData }: Route.ComponentProps) {
   const navigate = useNavigate();
-  const { media, category, page } = useLoaderData<typeof loader>();
+  const { media, category, page } = loaderData;
 
   // const lightBoxInst = useRef();
   const { ref: lightBoxInst, open } = useLightBox();

app/routes/index.module.css

@@ -0,0 +1,7 @@
+.avatar {
+  width: 160px;
+  position: relative;
+  --path: path("M0 88V0h160v88h-8c0 39.738-32.262 72-72 72S8 127.738 8 88H0z");
+  -webkit-clip-path: var(--path);
+  clip-path: var(--path);
+}

app/routes/index.tsx

@@ -1,18 +1,27 @@
-import { Link, useLoaderData } from "@remix-run/react";
-import { type MetaFunction } from "@remix-run/node";
-import { siteTitle } from "~/utils";
-import { ArrowDown, BiliBili, CloudMusic, GitHub, QQ, Steam, TwitterX } from "~/components/common/icons";
+import { Link } from "react-router";
 
-import styles from "./styles.module.less";
+import {
+  ArrowDown,
+  BiliBili,
+  CloudMusic,
+  GitHub,
+  QQ,
+  Steam,
+  TwitterX,
+} from "~/components/ui/icons";
+import { siteTitle } from "~/utils";
+
+import type { Route } from "./+types/index";
+import styles from "./index.module.css";
 
 const year = new Date().getFullYear();
 
-export const meta: MetaFunction = () => {
+export function meta({}: Route.MetaArgs) {
   return [
     { title: siteTitle() },
     { name: "description", content: "一只正在学习前后端技术的萌新" },
   ];
-};
+}
 
 export async function loader() {
   const data = (await fetch("https://paul.ren/api/sync").then((res) =>
@@ -22,12 +31,12 @@ export async function loader() {
   return { data };
 }
 
-export default function Index() {
-  const { data } = useLoaderData<typeof loader>();
+export default function Index({ loaderData }: Route.ComponentProps) {
+  const { data } = loaderData;
 
   return (
     <main className="px-2 py-24 max-w-3xl mx-auto">
-      <section className="-mt-40 relative flex flex-col h-screen min-h-[40rem] max-w-3xl mx-auto">
+      <section className="-mt-40 relative flex flex-col h-screen min-h-160 max-w-3xl mx-auto">
         <div className="my-auto px-4 py-10 bg-white rounded-xl text-center">
           <div className="mx-auto w-40 mb-10 relative select-none">
             <div className="top-4 left-2 w-36 h-36 rounded-full absolute bg-pink-100"></div>

app/routes/note-detail.tsx

@@ -1,39 +1,42 @@
-import { LoaderFunctionArgs, MetaFunction, json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
+
 import Article from "~/components/common/article";
-import { CupFill, ShareFill, ThumbUpFill } from "~/components/common/icons";
+import { CupFill, ShareFill, ThumbUpFill } from "~/components/ui/icons";
 import { siteTitle } from "~/utils";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+import type { Route } from "./+types/note-detail";
+
+export function meta({ loaderData }: Route.MetaArgs) {
   return [
-    { title: data ? siteTitle(data.data.title) : "404" },
-    { name: "description", content: data?.data.except },
+    { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
+    { name: "description", content: loaderData?.data.except },
   ];
 }
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
   if (Number.isNaN(Number(params.year)) || Number.isNaN(Number(params.id))) {
-    throw json("Not Found", { status: 404, statusText: "链接格式错误" });
+    throw new Response("Not Found", { status: 404 });
   }
 
-  const note = await fetch(`https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`).then((res) => res.json()) as API.Response<API.Note.INoteData>;
+  const note = (await fetch(
+    `https://paul.ren/api/note/get?id=${params.id}&year=${params.year}`
+  ).then((res) => res.json())) as API.Response<API.Note.INoteData>;
 
   if (note.status === "Failed") {
-    throw json("Not Found", { status: 404, statusText: note.msg });
+    throw new Response("Not Found", { status: 404 });
   }
 
   return note;
 }
 
-export default function Detail() {
-  const note = useLoaderData<typeof loader>();
+export default function NoteDetail({ loaderData }: Route.ComponentProps) {
+  const note = loaderData;
 
   const [likes, setLikes] = useState(note.data.likes);
 
   const onLike = () => {
     setLikes((prevLike) => prevLike + 1);
-  }
+  };
 
   const onShare = () => {
     const shareData = {
@@ -44,16 +47,18 @@ export default function Detail() {
 
     if ("share" in navigator) {
       navigator.share(shareData);
-    }
-    else {
+    } else {
       alert("当前操作系统尚未实现此 API");
     }
-  }
+  };
 
   return (
     <main className="px-2 py-24 max-w-3xl mx-auto">
       <section className="mb-12">
-        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4" style={{ viewTransitionName: `note-title-${note.data.id}` }}>
+        <h1
+          className="text-center text-5xl/tight md:text-7xl/tight mb-4"
+          style={{ viewTransitionName: `note-title-${note.data.id}` }}
+        >
           {note.data.title}
         </h1>
         <p className="text-center opacity-60">{note.data.date}</p>

app/routes/note.tsx

@@ -1,19 +1,21 @@
-import { ChangeEvent } from "react";
-import { Link, useLoaderData, useNavigate, useSearchParams } from "@remix-run/react";
-import { LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
-import Pagination from "~/components/common/pagination";
+import { type ChangeEvent } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router";
+
+import { StarFill, ThumbUpFill } from "~/components/ui/icons";
+import Pagination from "~/components/ui/pagination";
 import { clsn, siteTitle } from "~/utils";
 import { getFirstImage, years } from "~/utils/note";
-import { StarFill, ThumbUpFill } from "~/components/common/icons";
 
-export const meta: MetaFunction = () => {
+import type { Route } from "./+types/note";
+
+export function meta({}: Route.MetaArgs) {
   return [
     { title: siteTitle("日记") },
     { name: "description", content: "奇趣保罗的日常笔记" },
   ];
-};
+}
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
   const url = new URL(request.url);
   const year = url.searchParams.get("year") || new Date().getFullYear();
   const page = url.searchParams.get("page") || 1;
@@ -23,10 +25,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
   return { note, page, year };
 }
 
-export default function Note() {
+export default function Note({ loaderData }: Route.ComponentProps) {
   const navigate = useNavigate();
   const [params, setParams] = useSearchParams();
-  const { note, page, year } = useLoaderData<typeof loader>();
+  const { note, page, year } = loaderData;
 
   const onChangeYear = (ev: ChangeEvent<HTMLSelectElement>) => {
     navigate({
@@ -90,7 +92,7 @@ export default function Note() {
       </section>
       <section className="flex gap-4 flex-col-reverse justify-between md:flex-row items-center">
         <select
-          className="cursor-pointer px-5 py-3 rounded-xl border-4 border-transparent border-b-cyan-200"
+          className="cursor-pointer px-5 py-3 rounded-xl bg-white border-4 border-transparent border-b-cyan-200"
           value={year}
           onChange={onChangeYear}
         >

app/routes/page.tsx

@@ -0,0 +1,41 @@
+import Article from "~/components/common/article";
+import { siteTitle } from "~/utils";
+
+import type { Route } from "./+types/page";
+
+export function meta({ loaderData }: Route.MetaArgs) {
+  return [
+    { title: loaderData ? siteTitle(loaderData.data.title) : "404" },
+    { name: "description", content: loaderData?.data.desc },
+  ];
+}
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slug = params["*"];
+
+  const page = (await fetch(
+    `https://paul.ren/api/page/get?slug=${slug}&html`,
+  ).then((res) => res.json())) as API.Response<API.Page.IPageData>;
+
+  if (page.status === "Failed") {
+    throw new Response("Not Found", { status: 404 });
+  }
+
+  return page;
+}
+
+export default function DynamicPage({ loaderData }: Route.ComponentProps) {
+  const page = loaderData;
+
+  return (
+    <main className="px-2 py-24 max-w-3xl mx-auto">
+      <section className="mb-12">
+        <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">{page.data.title}</h1>
+        <p className="text-center opacity-60">{page.data.desc}</p>
+      </section>
+      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200">
+        <Article html={page.data.content} />
+      </section>
+    </main>
+  );
+}