From 7d0ac45e8ae73e5f5fe9bba9e0c3a573323cc794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=87=E8=B6=A3=E4=BF=9D=E7=BD=97?=
 <dreamer_paul@126.com>
Date: Wed, 20 May 2026 19:01:12 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E6=9B=B4=E6=96=B0=20UI=20=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

页眉样式修改，增加社交媒体按钮
调整卡片内间距和整体宽度
修复手机版文章卡片插图展示异常
---
 app/components/layout/footer.tsx |  2 +-
 app/components/layout/header.tsx | 29 ++++++++++++++++++++++++-----
 app/components/ui/icons.tsx      |  4 ++++
 app/root.tsx                     |  2 +-
 app/routes/gallery.tsx           |  2 +-
 app/routes/index.tsx             |  4 ++++
 app/routes/note-detail.tsx       |  4 ++--
 app/routes/note.tsx              | 12 ++++++------
 app/routes/page.tsx              |  4 ++--
 9 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/app/components/layout/footer.tsx b/app/components/layout/footer.tsx
index dc24a0d..83374ef 100644
--- a/app/components/layout/footer.tsx
+++ b/app/components/layout/footer.tsx
@@ -3,7 +3,7 @@ const { APP_SITENAME, APP_FOOTER_EXTRA } = import.meta.env;
 function Footer() {
   return (
     <footer className="pb-12">
-      <div className="grid gap-2 sm:grid-cols-2 px-2 max-w-3xl mx-auto text-sm text-center sm:text-left opacity-60">
+      <div className="grid gap-2 sm:grid-cols-2 px-2 max-w-4xl mx-auto text-sm text-center sm:text-left opacity-60">
         <p>{`© ${new Date().getFullYear()} ${APP_SITENAME}`}</p>
         {APP_FOOTER_EXTRA && <p className="sm:text-right" dangerouslySetInnerHTML={{ __html: APP_FOOTER_EXTRA }} />}
       </div>
diff --git a/app/components/layout/header.tsx b/app/components/layout/header.tsx
index a1f63c7..a0ae0a0 100644
--- a/app/components/layout/header.tsx
+++ b/app/components/layout/header.tsx
@@ -1,4 +1,6 @@
 import { NavLink } from "react-router";
+import { Feed, GitHub, QQ } from "../ui/icons";
+import { clsn } from "~/utils";
 
 const navItems = [
   { name: "首页", to: "/" },
@@ -7,23 +9,40 @@ const navItems = [
   { name: "关于我", to: "/about" },
 ];
 
-const inheritCls = "inline-block py-2 px-5";
-const activeCls = "inline-block py-2 px-5 bg-orange-200 text-pink-400 rounded-xl";
+const inheritCls = "hover:text-pink-400";
+const activeCls = "bg-pink-300 text-white rounded-xl hover:border-pink-400 border-b-pink-400";
 
 function Header() {
   return (
-    <header className="fixed top-0 left-0 right-0 bg-pink-400 text-white z-10">
-      <nav className="py-3 px-2">
+    <header className="fixed top-0 left-0 right-0 bg-orange-50 z-10 flex justify-between items-center px-2 md:px-6 py-4">
+      <nav>
         {navItems.map((item) => (
           <NavLink
             key={item.name}
             to={item.to}
-            className={({ isActive }) => isActive ? activeCls : inheritCls}
+            className={({ isActive }) =>
+              clsn(
+                "inline-block font-semibold py-2 px-4",
+                "border-4 border-transparent transition-colors",
+                isActive ? activeCls : inheritCls
+              )
+            }
           >
             {item.name}
           </NavLink>
         ))}
       </nav>
+      <nav className="flex items-center gap-2 [&>a]:hover:text-pink-400 [&>a]:transition-colors">
+        <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+          <QQ className="w-5" />
+        </a>
+        <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
+          <GitHub className="w-5" />
+        </a>
+        <a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
+          <Feed className="w-5" />
+        </a>
+      </nav>
     </header>
   );
 }
diff --git a/app/components/ui/icons.tsx b/app/components/ui/icons.tsx
index 543c7e0..8814cf9 100644
--- a/app/components/ui/icons.tsx
+++ b/app/components/ui/icons.tsx
@@ -45,3 +45,7 @@ export const BiliBili = (props: IconProps) => (
 export const Steam = (props: IconProps) => (
   <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0052 2C6.75435 2 2.44852 6.05 2.04102 11.1975L7.40102 13.4125C7.85518 13.1033 8.40352 12.9208 8.99435 12.9208C9.04685 12.9208 9.09852 12.9242 9.15102 12.9258L11.5352 9.47417V9.425C11.5352 7.34583 13.2252 5.655 15.3052 5.655C17.3835 5.655 19.0752 7.3475 19.0752 9.4275C19.0752 11.5075 17.3835 13.1983 15.3052 13.1983H15.2177L11.821 15.6242C11.821 15.6675 11.8243 15.7117 11.8243 15.7567C11.8243 17.3192 10.5618 18.5867 8.99935 18.5867C7.63685 18.5867 6.48602 17.6092 6.22352 16.3142L2.38602 14.725C3.57435 18.9225 7.42768 22 12.0052 22C17.5277 22 22.0043 17.5225 22.0043 12C22.0043 6.4775 17.5268 2 12.0052 2ZM7.07852 16.6667C7.29685 17.1192 7.67352 17.4992 8.17352 17.7083C9.25435 18.1575 10.501 17.645 10.9502 16.5625C11.1693 16.0375 11.1702 15.4633 10.9543 14.9383C10.7385 14.4133 10.3293 14.0042 9.80685 13.7858C9.28685 13.5692 8.73185 13.5783 8.24185 13.7608L9.51102 14.2858C10.3077 14.6192 10.6852 15.5358 10.3518 16.3317C10.021 17.1292 9.10435 17.5067 8.30685 17.175L7.07852 16.6667ZM17.8185 9.4225C17.8185 8.0375 16.691 6.91 15.306 6.91C13.9185 6.91 12.7935 8.0375 12.7935 9.4225C12.7935 10.81 13.9185 11.935 15.306 11.935C16.6918 11.935 17.8185 10.81 17.8185 9.4225ZM15.3118 7.53C16.3527 7.53 17.2002 8.375 17.2002 9.41833C17.2002 10.4608 16.3527 11.3058 15.3118 11.3058C14.2677 11.3058 13.4243 10.4608 13.4243 9.41833C13.4243 8.375 14.2685 7.53 15.3118 7.53Z"></path></svg>
 );
+
+export const Feed = (props: IconProps) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3C12.9411 3 21 11.0589 21 21H18C18 12.7157 11.2843 6 3 6V3ZM3 10C9.07513 10 14 14.9249 14 21H11C11 16.5817 7.41828 13 3 13V10ZM3 17C5.20914 17 7 18.7909 7 21H3V17Z"></path></svg>
+);
diff --git a/app/root.tsx b/app/root.tsx
index 77f7215..740f9c5 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -67,7 +67,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <h1 className="text-center text-5xl/tight md:text-7xl/tight mb-2">
         {message}
       </h1>
diff --git a/app/routes/gallery.tsx b/app/routes/gallery.tsx
index c9521e5..7f3d8af 100644
--- a/app/routes/gallery.tsx
+++ b/app/routes/gallery.tsx
@@ -81,7 +81,7 @@ export default function Gallery({ loaderData }: Route.ComponentProps) {
             role="button"
             tabIndex={0}
             onKeyDown={() => {}}
-            className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group"
+            className="relative bg-white rounded-xl overflow-hidden border-4 border-transparent hover:border-pink-400 transition-colors border-b-4 border-b-cyan-200 group cursor-pointer"
             onClick={() => open(index)}
           >
             <img className={styles.image} src={item.thumb_url} alt={item.title} loading="lazy" />
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 7aa2eb7..966dec2 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -8,6 +8,7 @@ import {
   QQ,
   Steam,
   TwitterX,
+  Feed,
 } from "~/components/ui/icons";
 import { siteTitle } from "~/utils";
 
@@ -63,6 +64,9 @@ export default function Index({ loaderData }: Route.ComponentProps) {
             <a href="https://steamcommunity.com/id/dreamer-paul" target="_blank" rel="noreferrer" title="Steam">
               <Steam className="w-6" />
             </a>
+            <a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
+              <Feed 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" />
diff --git a/app/routes/note-detail.tsx b/app/routes/note-detail.tsx
index b828720..5954f80 100644
--- a/app/routes/note-detail.tsx
+++ b/app/routes/note-detail.tsx
@@ -53,7 +53,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
   };
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <section className="mb-12">
         <h1
           className="text-center text-5xl/tight md:text-7xl/tight mb-4"
@@ -63,7 +63,7 @@ export default function NoteDetail({ loaderData }: Route.ComponentProps) {
         </h1>
         <p className="text-center opacity-60">{note.data.date}</p>
       </section>
-      <section className="p-5 bg-white rounded-xl border-b-4 border-b-cyan-200 mb-8">
+      <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} />
       </section>
       <section className="flex gap-16 items-center justify-center text-base md:text-lg">
diff --git a/app/routes/note.tsx b/app/routes/note.tsx
index 024f45f..259155f 100644
--- a/app/routes/note.tsx
+++ b/app/routes/note.tsx
@@ -50,7 +50,7 @@ export default function Note({ loaderData }: Route.ComponentProps) {
   };
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl mx-auto">
       <section className="mb-12">
         <h1 className="text-center text-5xl/tight md:text-7xl/tight">日记</h1>
       </section>
@@ -67,13 +67,13 @@ export default function Note({ loaderData }: Route.ComponentProps) {
               viewTransition
             >
               {item.starred && (
-                <StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 -rotate-[23deg]" />
+                <StarFill className="absolute -top-5 -right-5 w-28 h-28 text-yellow-300 text-opacity-20 rotate-[-23deg]" />
               )}
-              <h2 className={clsn(cover && "md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
+              <h2 className={clsn(cover && "mt-48 sm:mt-0 md:mr-40", "text-pink-400 text-2xl font-bold mb-4")} style={{ viewTransitionName: `note-title-${item.id}` }}>
                 {item.title}
               </h2>
               <p className={clsn(cover && "sm:mr-40", "mb-8 relative")}>{item.except}</p>
-              <div className={clsn(cover && "mb-40 sm:mb-0 sm:mr-40", "flex items-end justify-between text-sm")}>
+              <div className={clsn(cover && "sm:mr-40", "flex items-end justify-between text-sm")}>
                 <p className="opacity-60">{item.date}</p>
                 <span className="flex items-center opacity-60">
                   <ThumbUpFill className="h-4 w-4 mr-1" />
@@ -82,8 +82,8 @@ export default function Note({ loaderData }: Route.ComponentProps) {
               </div>
               {cover && (
                 <div
-                  className="absolute h-40 sm:h-auto sm:w-40 left-0 sm:top-0 sm:left-[unset] right-0 bottom-0 transition-opacity bg-cover opacity-30 group-hover:opacity-80"
-                  style={{ backgroundImage: `url("${cover}")`, clipPath: "polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%)" }}
+                  className="absolute h-48 sm:h-auto sm:w-40 left-0 top-0 sm:left-[unset] right-0 sm:bottom-0 transition-opacity bg-cover opacity-80 sm:opacity-30 group-hover:opacity-80 sm:[clip-path:polygon(25%_0%,100%_0%,100%_100%,0%_100%)]"
+                  style={{ backgroundImage: `url("${cover}")` }}
                 />
               )}
             </Link>
diff --git a/app/routes/page.tsx b/app/routes/page.tsx
index 23dde35..e6e15f5 100644
--- a/app/routes/page.tsx
+++ b/app/routes/page.tsx
@@ -28,12 +28,12 @@ export default function DynamicPage({ loaderData }: Route.ComponentProps) {
   const page = loaderData;
 
   return (
-    <main className="px-2 py-24 max-w-3xl mx-auto">
+    <main className="px-2 py-24 max-w-4xl 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">
+      <section className="p-5 md:p-12 bg-white rounded-xl border-b-4 border-b-cyan-200">
         <Article html={page.data.content} />
       </section>
     </main>