Chore: 更新框架到 React Router 7

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

app/app.css

@@ -0,0 +1,66 @@
+@import "tailwindcss";
+
+@theme {
+  --font-mi: MiSans, ui-sans-serif, system-ui, sans-serif;
+
+  --animate-spinner-bar: spinner-bar 6s linear infinite;
+  --animate-fade-in: fade-in 0.3s both;
+  --animate-fade-out: fade-out 0.3s both;
+  --animate-fade-in-left: fade-in-left 0.3s backwards;
+  --animate-fade-off-right: fade-off-right 0.3s forwards;
+
+  @keyframes spinner-bar {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 100%;
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-in-left {
+    0% {
+      opacity: 0;
+      transform: translateX(1.5rem);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes fade-off-right {
+    0% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    100% {
+      opacity: 0;
+      transform: translateX(1.5rem);
+    }
+  }
+}
+
+@media screen and (max-width: 639px) {
+  :root {
+    font-size: 14px;
+  }
+}

app/components/biz/gallery/image-box/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useRef, useImperativeHandle, forwardRef, Ref } from 'react';
+import React, { useState, useRef, useImperativeHandle, forwardRef, type Ref } from "react";
 import { createPortal } from 'react-dom';
 import { clsn } from '~/utils';
 

app/components/common/article/article.module.css

@@ -1,3 +1,5 @@
+@reference "tailwindcss";
+
 .article {
   line-height: 1.7;
 
@@ -36,7 +38,8 @@
       height: 4px;
       display: block;
       border-radius: 4px;
-      background-color: rgb(244 114 182 / var(--tw-text-opacity));
+
+      @apply bg-pink-400;
     }
   }
 
@@ -50,7 +53,7 @@
   }
 
   a {
-    color:rgb(244 114 182 / var(--tw-bg-opacity));
+    @apply text-pink-400;
   }
 
   img {
@@ -77,7 +80,7 @@
     font-size: smaller;
     padding: .15rem .5rem;
     border-radius: .75rem;
-    background-color: rgb(165 243 252);
+    @apply bg-cyan-200;
   }
 
   ul {
@@ -86,7 +89,7 @@
     margin-left: 1.25rem;
 
     ::marker {
-      color: rgb(244 114 182 / var(--tw-bg-opacity));
+      @apply text-pink-400;
     }
   }
 }

app/components/common/article/index.tsx

@@ -1,5 +1,5 @@
 import { clsn } from "~/utils";
-import styles from "./article.module.less";
+import styles from "./article.module.css";
 
 interface ArticleProps {
   className?: string;

app/components/layout/header.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 
 const navItems = [
   { name: "首页", to: "/" },

app/components/layout/spinner.tsx

@@ -1,4 +1,4 @@
-import { useNavigation } from "@remix-run/react";
+import { useNavigation } from "react-router";
 
 export default function SpinnerBar() {
   const navigation = useNavigation();

app/components/ui/icons.tsx

@@ -1,4 +1,4 @@
-import { SVGProps } from "react";
+import type { SVGProps } from "react";
 
 type IconProps = SVGProps<SVGSVGElement>;
 

app/components/ui/pagination.tsx

@@ -55,16 +55,16 @@ function Pagination({ current = 3, total, size, onClick }: PaginationProps) {
         }
 
         return (
-          <span
+          <button
             key={index}
             className={clsn(
-              "inline-block w-10 h-10 leading-[2] md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
+              "inline-block w-10 h-10 leading-loose md:w-14 md:h-14 md:leading-[3] cursor-pointer text-center mr-2 last:mr-0 rounded-xl border-4 border-transparent hover:bg-pink-400 hover:border-b-transparent hover:text-white transition-colors",
               current === item ? "bg-cyan-200 border-b-cyan-300 text-white font-bold" : "bg-white border-b-cyan-200"
             )}
             onClick={() => onClick(item)}
           >
             {item}
-          </span>
+          </button>
         );
       })}
     </div>

app/index.css

@@ -1,9 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@media screen and (max-width: 639px) {
-  :root {
-    font-size: 14px;
-  }
-}

app/root.tsx

@@ -1,82 +1,90 @@
-import type { LinksFunction } from "@remix-run/node";
 import {
+  isRouteErrorResponse,
   Links,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
-  isRouteErrorResponse,
+  useNavigate,
   useRouteError,
-} from "@remix-run/react";
-import Header from "./components/layout/header";
-import Spinner from "./components/common/spinner";
-import Footer from "./components/layout/footer";
+} from "react-router";
+
+import type { Route } from "./+types/root";
 import { siteTitle } from "~/utils";
 
-import "./index.css";
+import "./app.css";
 
-export function ErrorBoundary() {
-  const error = useRouteError();
-  const isRouteError = isRouteErrorResponse(error);
-
-  const [statusCode, message] = (() => {
-    if (isRouteError) {
-      return [error.status, error.statusText];
-    }
-
-    if (error instanceof Error) {
-      return [500, error.message];
-    }
-
-    return [500, "未知异常"];
-  })();
-
-  return (
-    <html lang="zh-cmn-hans">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>{siteTitle(statusCode)}</title>
-        <Meta />
-        <Links />
-      </head>
-      <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
-        <Header />
-        <main className="px-2 py-24 max-w-3xl mx-auto">
-          <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-4">
-            {statusCode}
-          </h1>
-          <p className="text-center opacity-60">{message}</p>
-        </main>
-        <Footer />
-        <Scripts />
-      </body>
-    </html>
-  );
-}
-
-export const links: LinksFunction = () => [
+export const links: Route.LinksFunction = () => [
   { rel: "icon", href: "/icon.png" },
-  { rel: "stylesheet", href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap" },
+  {
+    rel: "stylesheet",
+    href: "https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap",
+  },
 ];
 
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
+  const error = useRouteError();
+
   return (
     <html lang="zh-cmn-hans">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {isRouteErrorResponse(error) && error.status === 404 && <title>{siteTitle(error.status)}</title>}
         <Meta />
         <Links />
       </head>
       <body className="font-mi pt-16 bg-orange-50 text-neutral-600">
-        <Spinner />
-        <Header />
-        <Outlet />
-        <Footer />
+        {children}
         <ScrollRestoration />
         <Scripts />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  const navigate = useNavigate();
+
+  let message = "啊哦";
+  let details = "发生了未知的异常";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 404) {
+      message = "404";
+      details = "页面不存在";
+    } else {
+      details = error.statusText || details;
+    }
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="px-2 py-24 max-w-3xl mx-auto">
+      <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-2">
+        {message}
+      </h1>
+      <p className="text-center opacity-60 mb-8">{details}</p>
+      <p className="text-center">
+        <button
+          className="inline-block py-3 px-5 bg-pink-400 text-white rounded-xl cursor-pointer"
+          onClick={() => navigate("/")}
+        >
+          返回首页
+        </button>
+      </p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

app/routes.ts

@@ -0,0 +1,16 @@
+import {
+  type RouteConfig,
+  index,
+  layout,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  layout("routes/app-layout.tsx", [
+    index("routes/index.tsx"),
+    route("note", "routes/note.tsx"),
+    route("note/:year/:id", "routes/note-detail.tsx"),
+    route("gallery/*", "routes/gallery.tsx"),
+    route("*", "routes/page.tsx"),
+  ]),
+] satisfies RouteConfig;

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>
+  );
+}