Chore: 更新框架到 React Router 7

修复迁移到 Tailwind 4 之后的样式差异修复 404 页面的异常并调整样式优化分页器组件的无障碍化，Span 标签替换成 Button
2026-05-20 16:07:04 +08:00
parent 0a9ae15732
commit 13a09d6995
34 changed files with 2076 additions and 6941 deletions
@@ -0,0 +1,109 @@
+import { Link } from "react-router";
+
+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 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) =>
+    res.json()
+  )) as unknown as API.Response<API.Sync.ISyncData>;
+
+  return { data };
+}
+
+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-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>
+            <img className={styles.avatar} src="/avatar.webp" alt="奇趣保罗" />
+          </div>
+          <h1 className="text-5xl mb-4">奇趣保罗</h1>
+          <p className="opacity-60 mb-10">一只正在学习前后端技术的萌新</p>
+          <p className="flex justify-center gap-3">
+            <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+              <QQ className="w-6" />
+            </a>
+            <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
+              <GitHub className="w-6" />
+            </a>
+            <a href="https://music.163.com/#/user/home?id=7041859" target="_blank" rel="noreferrer" title="网易云">
+              <CloudMusic className="w-6" />
+            </a>
+            <a href="https://x.com/Dreamer__Paul" target="_blank" rel="noreferrer" title="X">
+              <TwitterX className="w-6" />
+            </a>
+            <a href="https://space.bilibili.com/124512959" target="_blank" rel="noreferrer" title="哔哩哔哩">
+              <BiliBili className="w-6" />
+            </a>
+            <a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
+              <Steam className="w-6" />
+            </a>
+          </p>
+        </div>
+        <ArrowDown className="absolute left-0 right-0 bottom-20 mx-auto w-10 h-10 opacity-60 animate-bounce" />
+      </section>
+
+      <section className="mb-16">
+        <h2 className="text-3xl mb-4">近期博文</h2>
+        <div className="bg-white rounded-xl p-5">
+          {data.data.blog.map((item) => (
+            <p key={item.link} className="flex mb-3 last:mb-0">
+              <a className="flex-1" href={item.link} target="_blank" rel="noreferrer">{item.title}</a>
+              <span className="font-mono opacity-50">{item.date}</span>
+            </p>
+          ))}
+          </div>
+      </section>
+
+      <section className="mb-16">
+        <h2 className="text-3xl mb-4">近期日记</h2>
+        <div className="bg-white rounded-xl p-5">
+          {data.data.note.map((item) => (
+            <p key={item.id} className="flex mb-3 last:mb-0">
+              <Link className="flex-1" to={`/note/${year}/${item.id}`}>{item.title}</Link>
+              <span className="font-mono opacity-50">{item.date}</span>
+            </p>
+          ))}
+          </div>
+      </section>
+
+      <section>
+        <h2 className="text-3xl mb-4">近期捕获</h2>
+        <div className="bg-white rounded-xl p-5 grid grid-cols-2 gap-5">
+          {data.data.media.map((item) => (
+            <div key={item.id}>
+              <img className="mb-3 rounded-xl" src={item.thumb_url} alt={item.title} />
+              <h3 className="text-lg mb-1">{item.title}</h3>
+              <p className="text-xs opacity-50">{item.take_time.substring(0, 10)}</p>
+            </div>
+          ))}
+          </div>
+      </section>
+    </main>
+  );
+}