From 1eaf3903d447d024c26eb6ad55adc8eca6b1ab84 Mon Sep 17 00:00:00 2001
From: freefire <aarbbs@88.com>
Date: Sat, 12 Sep 2026 04:30:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=A7=E9=87=8F?=
 =?UTF-8?q?=E7=A4=BE=E5=8C=BA=E5=8A=9F=E8=83=BD=E4=B8=8E=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E7=AB=99=E7=82=B9?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增事件总线式toast通知系统
- 新增头像、阅读进度、404/500错误页等基础组件
- 重构页脚、布局、分页、点赞按钮等现有组件
- 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能
- 优化登录注册页面样式与交互
- 修复路径类型文件引用，更新站点元信息与字体配置
---
 frontend/app/board/[id]/page.tsx          | 151 ++++---
 frontend/app/compose/page.tsx             |  88 ++--
 frontend/app/error.tsx                    |  45 ++
 frontend/app/globals.css                  | 488 ++++++++++++++++++++--
 frontend/app/layout.tsx                   |  29 +-
 frontend/app/login/page.tsx               |  53 ++-
 frontend/app/not-found.tsx                |  32 ++
 frontend/app/notifications/page.tsx       | 108 +++--
 frontend/app/page.tsx                     | 255 +++++++----
 frontend/app/post/[id]/edit/page.tsx      |  63 +--
 frontend/app/post/[id]/page.tsx           | 114 +++--
 frontend/app/register/page.tsx            |  59 ++-
 frontend/app/settings/page.tsx            |  67 +--
 frontend/app/u/[id]/UserProfileClient.tsx | 178 ++++----
 frontend/app/u/[id]/page.tsx              | 120 +++---
 frontend/components/Avatar.tsx            |  35 ++
 frontend/components/CommentSection.tsx    | 147 ++++---
 frontend/components/FeaturePost.tsx       |  95 +++++
 frontend/components/Footer.tsx            |  32 +-
 frontend/components/Header.tsx            | 316 ++++++++++----
 frontend/components/Icons.tsx             |  84 ++++
 frontend/components/LikeButton.tsx        |  47 ++-
 frontend/components/NotificationBell.tsx  | 119 +++---
 frontend/components/Pagination.tsx        |  36 +-
 frontend/components/PinnedPosts.tsx       |  91 ++++
 frontend/components/PostActions.tsx       |  68 ++-
 frontend/components/PostRow.tsx           |  91 ++++
 frontend/components/ReadingProgress.tsx   |  37 ++
 frontend/components/Toaster.tsx           |  66 +++
 frontend/lib/toast.ts                     |  17 +
 frontend/next-env.d.ts                    |   4 +-
 31 files changed, 2395 insertions(+), 740 deletions(-)
 create mode 100644 frontend/app/error.tsx
 create mode 100644 frontend/app/not-found.tsx
 create mode 100644 frontend/components/Avatar.tsx
 create mode 100644 frontend/components/FeaturePost.tsx
 create mode 100644 frontend/components/Icons.tsx
 create mode 100644 frontend/components/PinnedPosts.tsx
 create mode 100644 frontend/components/PostRow.tsx
 create mode 100644 frontend/components/ReadingProgress.tsx
 create mode 100644 frontend/components/Toaster.tsx
 create mode 100644 frontend/lib/toast.ts

diff --git a/frontend/app/board/[id]/page.tsx b/frontend/app/board/[id]/page.tsx
index 7d7f385..16e4005 100644
--- a/frontend/app/board/[id]/page.tsx
+++ b/frontend/app/board/[id]/page.tsx
@@ -1,9 +1,11 @@
 import Link from "next/link";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { cookies } from "next/headers";
+import { PenSquare, MessagesSquare, ChevronRight } from "lucide-react";
 import { fetchPosts, fetchBoards } from "@/lib/api";
 import Pagination from "@/components/Pagination";
-import LikeButton from "@/components/LikeButton";
+import PostRow from "@/components/PostRow";
+import PinnedPosts from "@/components/PinnedPosts";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -15,7 +17,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   const { boards } = await fetchBoards();
   const board = boards.find((b) => b.id === Number(id));
   return {
-    title: board ? `${board.name} - 姜十三论坛` : "板块 - 姜十三论坛",
+    title: board ? `${board.name} · 姜十三论坛` : "板块 · 姜十三论坛",
     description: board?.description || "板块帖子列表",
   };
 }
@@ -29,62 +31,111 @@ export default async function BoardPage({ params, searchParams }: PageProps) {
     fetchPosts(page, 20, Number(id), "latest", "", cookie),
     fetchBoards(),
   ]);
-  const board = boardsData.boards.find((b) => b.id === Number(id));
+  const boardIndex = boardsData.boards.findIndex((b) => b.id === Number(id));
+  const board = boardIndex >= 0 ? boardsData.boards[boardIndex] : null;
+
+  // 第一页：置顶帖独立成区，列表只保留非置顶
+  const pinned = page === 1 ? postsData.posts.filter((p) => p.pinned > 0) : [];
+  const rows = page === 1 ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
 
   return (
     <div>
-      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
-        <Link href="/" className="hover:underline">首页</Link>
-        <span className="mx-2">/</span>
-        <span>{board?.name || "板块"}</span>
+      {/* 面包屑 */}
+      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>{board?.name || "未知板块"}</span>
       </nav>
 
-      <h1 className="text-2xl font-bold mb-2">{board?.name}</h1>
-      <p className="mb-6" style={{ color: "var(--text-secondary)" }}>{board?.description}</p>
-
-      <div className="space-y-3">
-        {postsData.posts.map((post) => (
-          <div
-            key={post.id}
-            className="p-4 rounded-lg border hover:shadow-md transition-shadow"
-            style={{ borderColor: "var(--border)", background: "var(--bg)" }}
-          >
-            <div className="flex items-center gap-2 mb-1">
-              {post.pinned > 0 && (
-                <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
+      <div className="panel p-6 sm:p-7 mb-6 relative overflow-hidden">
+        <span
+          aria-hidden
+          className="absolute -top-16 -right-12 w-48 h-48 rounded-full"
+          style={{ background: "var(--accent-soft)" }}
+        />
+        <div className="relative flex items-end justify-between gap-4 flex-wrap">
+          <div className="flex items-center gap-4">
+            <span
+              className={`av-${Math.max(0, boardIndex) % 8} w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center text-2xl font-extrabold shrink-0`}
+            >
+              {board?.name.slice(0, 1) || "?"}
+            </span>
+            <div>
+              <h1 className="text-2xl sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+                {board?.name || "未知板块"}
+              </h1>
+              {board?.description && (
+                <p className="mt-1 text-sm" style={{ color: "var(--ink-2)" }}>
+                  {board.description}
+                </p>
               )}
-              {post.recommended && (
-                <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
-              )}
-            </div>
-            <Link href={`/post/${post.id}`}>
-              <h2 className="font-semibold mb-1 hover:underline">{post.title}</h2>
-            </Link>
-            <div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
-              <div className="flex items-center gap-4">
-                <Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
-                  {post.user.nickname}
-                </Link>
-                <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
-                <span>💬 {post.comment_count}</span>
-                <span>👁 {post.view_count}</span>
-              </div>
-              <LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
+              <p className="meta mt-1.5">{postsData.total} 篇讨论</p>
             </div>
           </div>
-        ))}
-        {postsData.posts.length === 0 && (
-          <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
-            该板块暂无帖子
-          </p>
-        )}
+          <Link href="/compose" className="btn btn-primary">
+            <PenSquare size={15} /> 在此板块发帖
+          </Link>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
+        <div>
+          <PinnedPosts posts={pinned} showBoard={false} />
+          {rows.length > 0 ? (
+            <div className="panel overflow-hidden">
+              <div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
+                <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>全部讨论</span>
+                <span className="meta text-xs">第 {page} 页</span>
+              </div>
+              {rows.map((post) => (
+                <PostRow key={post.id} post={post} />
+              ))}
+            </div>
+          ) : (
+            pinned.length === 0 && (
+              <div className="panel text-center py-20 px-6">
+                <span
+                  className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
+                  style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+                >
+                  <MessagesSquare size={26} />
+                </span>
+                <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>该板块还没有帖子</p>
+                <p className="meta mt-1.5">来发第一篇，抢占沙发</p>
+                <Link href="/compose" className="btn btn-primary mt-6">
+                  <PenSquare size={15} /> 写新帖
+                </Link>
+              </div>
+            )
+          )}
+          <Pagination total={postsData.total} page={page} size={20} basePath={`/board/${id}`} />
+        </div>
+
+        <aside>
+          <div className="panel p-5">
+            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>其他板块</p>
+            <div className="space-y-1">
+              {boardsData.boards
+                .map((b, i) => ({ b, i }))
+                .filter(({ b }) => b.id !== Number(id))
+                .map(({ b, i }) => (
+                  <Link
+                    key={b.id}
+                    href={`/board/${b.id}`}
+                    className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
+                  >
+                    <span className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}>
+                      {b.name.slice(0, 1)}
+                    </span>
+                    <span className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors" style={{ color: "var(--ink)" }}>
+                      {b.name}
+                    </span>
+                  </Link>
+                ))}
+            </div>
+          </div>
+        </aside>
       </div>
-      <Pagination
-        total={postsData.total}
-        page={page}
-        size={20}
-        basePath={`/board/${id}`}
-      />
     </div>
   );
 }
diff --git a/frontend/app/compose/page.tsx b/frontend/app/compose/page.tsx
index f160c2d..bd8c7ab 100644
--- a/frontend/app/compose/page.tsx
+++ b/frontend/app/compose/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight, PenSquare } from "lucide-react";
 import { apiCreatePost, apiMe, fetchBoards, type Board } from "@/lib/api";
 
 export default function ComposePage() {
@@ -15,7 +17,6 @@ export default function ComposePage() {
   const [error, setError] = useState("");
 
   useEffect(() => {
-    // 通过 /api/me 检查登录态（HttpOnly cookie 自动携带）
     apiMe()
       .then((res) => {
         if (!res.user) {
@@ -54,68 +55,93 @@ export default function ComposePage() {
 
   return (
     <div className="max-w-3xl mx-auto">
-      <h1 className="text-2xl font-bold mb-6">发布新帖</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
-        )}
+      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>发布新帖</span>
+      </nav>
+
+      <div className="mb-7 flex items-center gap-3.5">
+        <span
+          className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0"
+          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+        >
+          <PenSquare size={22} />
+        </span>
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>板块</label>
+          <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight leading-tight" style={{ color: "var(--ink)" }}>
+            发布新帖
+          </h1>
+          <p className="meta mt-0.5">清晰的标题和内容，更容易获得回应</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
+        {error && <div className="alert-error">{error}</div>}
+
+        <div>
+          <label className="field-label">选择板块</label>
           <select
             value={boardId}
             onChange={(e) => setBoardId(Number(e.target.value))}
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
           >
             {boards.map((b) => (
-              <option key={b.id} value={b.id}>{b.name}</option>
+              <option key={b.id} value={b.id}>
+                {b.name}
+              </option>
             ))}
           </select>
         </div>
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标题</label>
+          <label className="field-label">标题</label>
           <input
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             required
             maxLength={256}
-            placeholder="帖子标题"
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            placeholder="一句话说清楚你要讨论什么"
+            className="field"
           />
         </div>
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标签（逗号分隔，可选）</label>
+          <label className="field-label">标签（逗号分隔，可选）</label>
           <input
             type="text"
             value={tags}
             onChange={(e) => setTags(e.target.value)}
-            placeholder="例如：技术,Go"
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            placeholder="Go, PostgreSQL, 架构"
+            className="field"
           />
         </div>
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>内容（支持 Markdown）</label>
+          <label className="field-label">正文（支持 Markdown）</label>
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
             required
-            rows={12}
-            placeholder="帖子内容，支持 Markdown 格式..."
-            className="w-full px-3 py-2 rounded-lg border resize-y font-mono"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            rows={14}
+            placeholder="# 开头写结论&#10;&#10;支持 Markdown 语法..."
+            className="field"
           />
         </div>
-        <button
-          type="submit"
-          disabled={loading || !title.trim() || !content.trim()}
-          className="px-6 py-2 rounded-lg text-white disabled:opacity-50"
-          style={{ background: "var(--primary)" }}
-        >
-          {loading ? "发布中..." : "发布帖子"}
-        </button>
+
+        <div className="flex gap-3 pt-2">
+          <button
+            type="submit"
+            disabled={loading || !title.trim() || !content.trim()}
+            className="btn btn-primary"
+          >
+            {loading ? "发布中..." : "发布帖子"}
+          </button>
+          <Link href="/" className="btn btn-line">
+            取消
+          </Link>
+        </div>
       </form>
     </div>
   );
diff --git a/frontend/app/error.tsx b/frontend/app/error.tsx
new file mode 100644
index 0000000..4516c4d
--- /dev/null
+++ b/frontend/app/error.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { CloudOff, RotateCcw } from "lucide-react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="max-w-md mx-auto text-center py-20 sm:py-28">
+      <span
+        className="inline-flex w-16 h-16 rounded-full items-center justify-center mb-6"
+        style={{ background: "var(--clay-soft)", color: "var(--clay)" }}
+      >
+        <CloudOff size={30} />
+      </span>
+      <p className="text-[15px] font-extrabold tracking-wide mb-1" style={{ color: "var(--clay)" }}>
+        500
+      </p>
+      <h1 className="text-2xl font-extrabold mb-2" style={{ color: "var(--ink)" }}>
+        页面出了点问题
+      </h1>
+      <p className="text-sm mb-8" style={{ color: "var(--ink-2)" }}>
+        可以重试，或先回首页看看其他内容
+      </p>
+      <div className="flex items-center justify-center gap-3">
+        <button onClick={reset} className="btn btn-primary">
+          <RotateCcw size={15} /> 重试
+        </button>
+        <Link href="/" className="btn btn-line">
+          返回首页
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 1530179..015f513 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,40 +1,472 @@
 @import "tailwindcss";
 
+/* ============================================================
+   姜十三论坛 · WARM CORNER 设计系统
+   暖白纸面 / 圆润卡片 / 柔和投影 / 青绿主色 / 陶土辅色
+   ============================================================ */
+
 :root {
-  --bg: #ffffff;
-  --bg-secondary: #f8fafc;
-  --text: #1e293b;
-  --text-secondary: #64748b;
-  --border: #e2e8f0;
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
+  /* 浅色（默认） */
+  --bg: #f6f2ea;
+  --panel: #ffffff;
+  --panel-2: #faf6ef;
+  --tint: #f1ebe0;
+  --ink: #2c2620;
+  --ink-2: #6b6257;
+  --ink-3: #7c7365;
+  --line: #ece4d8;
+  --line-2: #ddd2c1;
+
+  --accent: #0e6f66;
+  --accent-hi: #0b5c54;
+  --accent-soft: rgba(14, 111, 102, 0.1);
+  --accent-on: #fdfbf6; /* 暖白，与暖纸底色协调，而非冷纯白 */
+
+  --clay: #b85c42;
+  --clay-soft: rgba(200, 105, 77, 0.12);
+  --gold: #9a6b1f;
+  --gold-soft: rgba(176, 124, 30, 0.13);
+
+  --danger: #d23b32;
+  --danger-soft: rgba(210, 59, 50, 0.09);
+  --ok: #2f8f4e;
+  --ok-soft: rgba(47, 143, 78, 0.1);
+
+  --shadow-sm: 0 1px 2px rgba(87, 66, 36, 0.05);
+  --shadow: 0 2px 8px rgba(87, 66, 36, 0.05), 0 10px 28px rgba(87, 66, 36, 0.05);
+  --shadow-lg: 0 6px 16px rgba(87, 66, 36, 0.07), 0 20px 48px rgba(87, 66, 36, 0.1);
+
+  --font-display: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, "PingFang SC",
+    "Microsoft YaHei", system-ui, sans-serif;
+  --font-sans: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, "PingFang SC",
+    "Microsoft YaHei", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Noto Sans SC", ui-monospace, "Cascadia Code",
+    Consolas, monospace;
+
+  --r: 18px;
+  --r-sm: 12px;
+
+  color-scheme: light;
 }
 
 .dark {
-  --bg: #0f172a;
-  --bg-secondary: #1e293b;
-  --text: #e2e8f0;
-  --text-secondary: #94a3b8;
-  --border: #334155;
-  --primary: #60a5fa;
-  --primary-hover: #3b82f6;
+  --bg: #181510;
+  --panel: #221e18;
+  --panel-2: #2a251e;
+  --tint: #312b22;
+  --ink: #f3ede2;
+  --ink-2: #c3b9a9;
+  --ink-3: #9d9383;
+  --line: rgba(243, 237, 226, 0.09);
+  --line-2: rgba(243, 237, 226, 0.17);
+
+  --accent: #2dd4bf;
+  --accent-hi: #5eead4;
+  --accent-soft: rgba(45, 212, 191, 0.15);
+  --accent-on: #0c2420;
+
+  --clay: #e89070;
+  --clay-soft: rgba(232, 144, 112, 0.16);
+  --gold: #d8ae5e;
+  --gold-soft: rgba(216, 174, 94, 0.16);
+
+  --danger: #f26b5e;
+  --danger-soft: rgba(242, 107, 94, 0.15);
+  --ok: #6fcf8e;
+  --ok-soft: rgba(111, 207, 142, 0.15);
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.22);
+  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.35), 0 24px 56px rgba(0, 0, 0, 0.3);
+
+  color-scheme: dark;
+}
+
+* {
+  border-color: var(--line);
+}
+
+html {
+  scrollbar-color: var(--line-2) transparent;
 }
 
 body {
   background-color: var(--bg);
-  color: var(--text);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
-/* Markdown 内容样式 */
-.prose-content h1 { font-size: 1.875rem; font-weight: 700; margin: 1rem 0; }
-.prose-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0; }
-.prose-content h3 { font-size: 1.25rem; font-weight: 600; margin: 0.75rem 0; }
-.prose-content p { margin: 0.75rem 0; line-height: 1.7; }
-.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
-.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
-.prose-content code { background: var(--bg-secondary); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; }
-.prose-content pre { background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; }
-.prose-content pre code { background: none; padding: 0; }
-.prose-content blockquote { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--text-secondary); margin: 1rem 0; }
-.prose-content a { color: var(--primary); text-decoration: underline; }
-.prose-content img { max-width: 100%; border-radius: 0.5rem; }
+::selection {
+  background: var(--accent);
+  color: var(--accent-on);
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--line-2);
+  border-radius: 99px;
+  border: 3px solid var(--bg);
+}
+
+/* 链接重置放入 base 层：避免未分层规则击败 components 层的 .btn-primary 等类
+   （Tailwind v4 中未分层样式优先级高于任何 @layer） */
+@layer base {
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  letter-spacing: -0.015em;
+}
+
+:focus-visible {
+  outline: 2.5px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+@layer components {
+  /* ----- 小标签（旧名 .kicker 保留兼容） ----- */
+  .kicker {
+    font-family: var(--font-sans);
+    font-size: 12.5px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--ink-3);
+  }
+
+  /* ----- 卡片 ----- */
+  .panel {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: var(--r);
+    box-shadow: var(--shadow-sm);
+  }
+  .hover-lift {
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+  }
+  .hover-lift:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow);
+    border-color: var(--line-2);
+  }
+
+  /* ----- 按钮（胶囊） ----- */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    padding: 10px 20px;
+    border-radius: 999px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s,
+      transform 0.12s ease, box-shadow 0.15s;
+    white-space: nowrap;
+  }
+  .btn:active { transform: scale(0.97); }
+  .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  .btn-primary {
+    background: var(--accent);
+    color: var(--accent-on);
+    box-shadow: 0 1px 2px rgba(87, 66, 36, 0.12), 0 2px 8px rgba(14, 111, 102, 0.16);
+  }
+  .btn-primary:hover:not(:disabled) {
+    background: var(--accent-hi);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 6px rgba(87, 66, 36, 0.1), 0 8px 20px rgba(14, 111, 102, 0.24);
+  }
+  .btn-primary:active:not(:disabled) {
+    transform: translateY(0);
+  }
+
+  .btn-line {
+    background: var(--panel);
+    border-color: var(--line-2);
+    color: var(--ink);
+  }
+  .btn-line:hover:not(:disabled) {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+
+  .btn-danger {
+    background: var(--danger-soft);
+    color: var(--danger);
+  }
+  .btn-danger:hover:not(:disabled) {
+    background: var(--danger);
+    color: #fff;
+  }
+
+  .btn-sm { padding: 7px 14px; font-size: 13px; }
+
+  /* ----- 表单 ----- */
+  .field-label {
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--ink-2);
+    margin-bottom: 8px;
+  }
+  .field {
+    width: 100%;
+    padding: 12px 15px;
+    background: var(--bg);
+    border: 1px solid var(--line-2);
+    border-radius: var(--r-sm);
+    color: var(--ink);
+    font-size: 15px;
+    font-family: var(--font-sans);
+    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+  }
+  .field::placeholder { color: var(--ink-3); opacity: 0.8; }
+  .field:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3.5px var(--accent-soft);
+    background: var(--panel);
+  }
+  textarea.field {
+    font-family: var(--font-sans);
+    font-size: 15px;
+    line-height: 1.75;
+    resize: vertical;
+  }
+
+  /* ----- 标签 / 徽标 ----- */
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12.5px;
+    font-weight: 500;
+    padding: 4px 12px;
+    background: var(--tint);
+    color: var(--ink-2);
+    border-radius: 999px;
+    white-space: nowrap;
+    transition: background 0.15s, color 0.15s;
+  }
+  a.chip:hover {
+    background: var(--accent-soft);
+    color: var(--accent);
+  }
+  .badge-pin {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 4px 11px;
+    background: var(--clay-soft);
+    color: var(--clay);
+    border-radius: 999px;
+    white-space: nowrap;
+  }
+  .badge-rec {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 4px 11px;
+    background: var(--gold-soft);
+    color: var(--gold);
+    border-radius: 999px;
+    white-space: nowrap;
+  }
+
+  /* ----- 分页 ----- */
+  .pager-btn {
+    background: var(--panel);
+    border-color: var(--line);
+    color: var(--ink-2);
+  }
+  .pager-btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    transform: translateY(-1px);
+  }
+  .pager-btn.is-current,
+  .pager-btn.is-current:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--accent-on);
+    font-weight: 700;
+  }
+
+  /* ----- 辅助 ----- */
+  .meta {
+    font-family: var(--font-sans);
+    font-size: 12.5px;
+    color: var(--ink-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .link-accent { color: var(--accent); }
+  .link-accent:hover { color: var(--accent-hi); }
+
+  .alert-error {
+    padding: 12px 15px;
+    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
+    background: var(--danger-soft);
+    color: var(--danger);
+    border-radius: var(--r-sm);
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .alert-ok {
+    padding: 12px 15px;
+    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
+    background: var(--ok-soft);
+    color: var(--ok);
+    border-radius: var(--r-sm);
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+/* ============================================================
+   Markdown 正文
+   ============================================================ */
+.prose-content { font-size: 16.5px; line-height: 1.85; color: var(--ink); }
+.prose-content h1 { font-size: 1.75rem; font-weight: 800; margin: 1.6rem 0 0.8rem; }
+.prose-content h2 {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin: 1.9rem 0 0.7rem;
+  padding-bottom: 0.45rem;
+  border-bottom: 1px solid var(--line);
+}
+.prose-content h3 { font-size: 1.18rem; font-weight: 700; margin: 1.5rem 0 0.6rem; }
+.prose-content p { margin: 0.9rem 0; }
+.prose-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.9rem 0; }
+.prose-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.9rem 0; }
+.prose-content li { margin: 0.35rem 0; }
+.prose-content code {
+  font-family: var(--font-mono);
+  background: var(--tint);
+  padding: 0.12rem 0.45rem;
+  border-radius: 6px;
+  font-size: 0.86em;
+}
+.prose-content pre {
+  background: var(--panel-2) !important;
+  border: 1px solid var(--line);
+  padding: 1.05rem 1.15rem;
+  border-radius: var(--r-sm);
+  overflow-x: auto;
+  margin: 1.15rem 0;
+}
+.prose-content pre code { background: none; padding: 0; border-radius: 0; }
+.prose-content blockquote {
+  border-left: 3px solid var(--accent);
+  background: var(--accent-soft);
+  border-radius: 0 var(--r-sm) var(--r-sm) 0;
+  padding: 0.7rem 1.1rem;
+  color: var(--ink-2);
+  margin: 1.2rem 0;
+}
+.prose-content a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  font-weight: 500;
+}
+.prose-content img {
+  max-width: 100%;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--line);
+}
+.prose-content hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }
+.prose-content strong { font-weight: 700; }
+
+@media (prefers-reduced-motion: reduce) {
+  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+
+/* 头像配色（浅/暗各自保证可读） */
+.av-0 { background: rgba(15, 118, 110, 0.12); color: #0f766e; }
+.av-1 { background: rgba(200, 105, 77, 0.14); color: #b85c42; }
+.av-2 { background: rgba(176, 124, 30, 0.15); color: #9a6b1f; }
+.av-3 { background: rgba(91, 111, 181, 0.14); color: #4c61ab; }
+.av-4 { background: rgba(122, 92, 168, 0.14); color: #6f50a0; }
+.av-5 { background: rgba(79, 138, 95, 0.15); color: #477e55; }
+.av-6 { background: rgba(192, 106, 139, 0.14); color: #b1557a; }
+.av-7 { background: rgba(63, 134, 147, 0.14); color: #357985; }
+.dark .av-0 { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
+.dark .av-1 { background: rgba(232, 144, 112, 0.18); color: #f0a484; }
+.dark .av-2 { background: rgba(216, 174, 94, 0.18); color: #e3bf74; }
+.dark .av-3 { background: rgba(130, 150, 224, 0.18); color: #a7b8f0; }
+.dark .av-4 { background: rgba(178, 150, 224, 0.18); color: #c3abe8; }
+.dark .av-5 { background: rgba(129, 201, 148, 0.18); color: #99ddac; }
+.dark .av-6 { background: rgba(235, 148, 180, 0.18); color: #f0a5c2; }
+.dark .av-7 { background: rgba(102, 190, 206, 0.18); color: #84d4e0; }
+
+/* ============================================================
+   微交互
+   ============================================================ */
+@keyframes j13-toast-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.j13-toast-in { animation: j13-toast-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
+
+@keyframes j13-heart-pop {
+  0% { transform: scale(1); }
+  45% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+.j13-heart-pop { animation: j13-heart-pop 0.26s ease-out; }
+
+@keyframes j13-fade-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.j13-fade-up { animation: j13-fade-up 0.3s ease-out both; }
+
+/* 跳到主内容 */
+.skip-link {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  z-index: 10001;
+  padding: 10px 18px;
+  font-size: 13.5px;
+  font-weight: 600;
+  background: var(--accent);
+  color: var(--accent-on);
+  border-radius: 999px;
+  transform: translateY(-200%);
+  transition: transform 0.18s ease;
+}
+.skip-link:focus-visible {
+  transform: translateY(0);
+  outline: none;
+}
+
+/* 阅读进度条 */
+.reading-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  z-index: 60;
+  background: var(--accent);
+  transform-origin: 0 50%;
+  pointer-events: none;
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index c75d5ed..97bcd17 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -3,12 +3,16 @@ import { cookies } from "next/headers";
 import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
+import Toaster from "@/components/Toaster";
 
 export const metadata: Metadata = {
-  title: "姜十三论坛",
+  title: {
+    default: "姜十三论坛 · J13 FORUM",
+    template: "%s · 姜十三论坛",
+  },
   description: "姜十三论坛 - 技术分享与讨论社区",
   openGraph: {
-    title: "姜十三论坛",
+    title: "姜十三论坛 · J13 FORUM",
     description: "姜十三论坛 - 技术分享与讨论社区",
     type: "website",
   },
@@ -20,16 +24,33 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const cookieStore = await cookies();
-  const theme = cookieStore.get("j13-theme")?.value || "light";
+  // 浅色优先的设计系统，仅在显式选择暗色时挂 .dark
+  const theme = cookieStore.get("j13-theme")?.value === "dark" ? "dark" : "light";
 
   return (
     <html lang="zh-CN" className={theme === "dark" ? "dark" : ""}>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap"
+          rel="stylesheet"
+        />
+      </head>
       <body className="min-h-screen flex flex-col">
+        <a href="#main" className="skip-link">
+          跳到主要内容
+        </a>
         <Header />
-        <main className="flex-1 max-w-5xl mx-auto w-full px-4 py-6">
+        <main
+          id="main"
+          tabIndex={-1}
+          className="flex-1 w-full max-w-6xl mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
+        >
           {children}
         </main>
         <Footer />
+        <Toaster />
       </body>
     </html>
   );
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index dbb14c2..92d6474 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import Link from "next/link";
+import { MessagesSquare } from "lucide-react";
 import { apiLogin } from "@/lib/api";
 
 export default function LoginPage() {
@@ -32,45 +33,57 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="max-w-md mx-auto mt-12">
-      <h1 className="text-2xl font-bold mb-6 text-center">登录</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
-        )}
+    <div className="max-w-md mx-auto pt-8 sm:pt-14">
+      <div className="mb-7 text-center">
+        <span
+          className="inline-flex w-14 h-14 rounded-2xl items-center justify-center mb-4"
+          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+        >
+          <MessagesSquare size={26} />
+        </span>
+        <h1 className="text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+          欢迎回来
+        </h1>
+        <p className="text-sm mt-2" style={{ color: "var(--ink-2)" }}>
+          登录后发帖、评论与点赞
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="panel p-6 sm:p-7 space-y-4">
+        {error && <div className="alert-error">{error}</div>}
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>用户名</label>
+          <label className="field-label">用户名</label>
           <input
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
             required
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            autoFocus
+            className="field"
+            placeholder="testuser"
           />
         </div>
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>密码</label>
+          <label className="field-label">密码</label>
           <input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
+            placeholder="••••••"
           />
         </div>
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full py-2 rounded-lg text-white disabled:opacity-50"
-          style={{ background: "var(--primary)" }}
-        >
+        <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center mt-2">
           {loading ? "登录中..." : "登录"}
         </button>
       </form>
-      <p className="text-center mt-4 text-sm" style={{ color: "var(--text-secondary)" }}>
-        还没有账号？<Link href="/register" className="hover:underline" style={{ color: "var(--primary)" }}>立即注册</Link>
+
+      <p className="meta text-center mt-5">
+        还没有账号？
+        <Link href="/register" className="ml-1 font-semibold" style={{ color: "var(--accent)" }}>
+          立即注册
+        </Link>
       </p>
     </div>
   );
diff --git a/frontend/app/not-found.tsx b/frontend/app/not-found.tsx
new file mode 100644
index 0000000..f6fc4df
--- /dev/null
+++ b/frontend/app/not-found.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { Compass, Home } from "lucide-react";
+
+export default function NotFound() {
+  return (
+    <div className="max-w-md mx-auto text-center py-20 sm:py-28">
+      <span
+        className="inline-flex w-16 h-16 rounded-full items-center justify-center mb-6"
+        style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+      >
+        <Compass size={30} />
+      </span>
+      <p className="text-[15px] font-extrabold tracking-wide mb-1" style={{ color: "var(--accent)" }}>
+        404
+      </p>
+      <h1 className="text-2xl font-extrabold mb-2" style={{ color: "var(--ink)" }}>
+        这一页走丢了
+      </h1>
+      <p className="text-sm mb-8" style={{ color: "var(--ink-2)" }}>
+        链接可能已失效，或帖子已被作者删除
+      </p>
+      <div className="flex items-center justify-center gap-3">
+        <Link href="/" className="btn btn-primary">
+          <Home size={15} /> 返回首页
+        </Link>
+        <Link href="/board/1" className="btn btn-line">
+          逛逛板块
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/notifications/page.tsx b/frontend/app/notifications/page.tsx
index e772327..0e348dc 100644
--- a/frontend/app/notifications/page.tsx
+++ b/frontend/app/notifications/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Heart, MessageCircle, CheckCheck } from "lucide-react";
+import { Heart, MessageCircle, CheckCheck, Bell, ChevronRight } from "lucide-react";
 import {
   apiFetchNotifications,
   apiMarkRead,
@@ -60,68 +60,84 @@ export default function NotificationsPage() {
 
   return (
     <div className="max-w-2xl mx-auto">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-2xl font-bold" style={{ color: "var(--text)" }}>通知中心</h1>
+      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>通知中心</span>
+      </nav>
+
+      <div className="flex items-end justify-between mb-6 gap-4">
+        <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+          通知中心
+        </h1>
         {hasUnread && (
-          <button
-            onClick={handleMarkAll}
-            className="flex items-center gap-1 text-sm hover:opacity-80"
-            style={{ color: "var(--primary)" }}
-          >
-            <CheckCheck size={16} /> 全部标记已读
+          <button onClick={handleMarkAll} className="btn btn-line btn-sm">
+            <CheckCheck size={14} /> 全部已读
           </button>
         )}
       </div>
 
       {loading ? (
-        <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>加载中...</p>
+        <div className="panel text-center py-16">
+          <p className="meta">正在加载通知…</p>
+        </div>
       ) : notifications.length === 0 ? (
-        <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>暂无通知</p>
+        <div className="panel text-center py-20 px-6">
+          <span
+            className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
+            style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+          >
+            <Bell size={26} />
+          </span>
+          <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>还没有通知</p>
+          <p className="meta mt-1.5">当有人评论或点赞你的帖子时，会在这里提醒你</p>
+        </div>
       ) : (
-        <div className="space-y-2">
-          {notifications.map((n) => (
+        <div className="panel overflow-hidden p-0">
+          {notifications.map((n, i) => (
             <button
               key={n.id}
               onClick={() => handleClick(n)}
-              className="w-full text-left p-4 rounded-lg border hover:shadow-sm transition-shadow"
+              className="w-full text-left px-4 sm:px-5 py-4 flex items-start gap-3.5 transition-colors hover:bg-[var(--panel-2)]"
               style={{
-                borderColor: "var(--border)",
-                background: n.is_read ? "var(--bg)" : "var(--bg-secondary)",
+                borderTop: i === 0 ? "none" : "1px solid var(--line)",
+                background: n.is_read ? "transparent" : "var(--panel-2)",
               }}
             >
-              <div className="flex items-start gap-3">
-                <span style={{ color: n.type === "like" ? "#ef4444" : "var(--primary)" }}>
-                  {n.type === "like" ? <Heart size={18} /> : <MessageCircle size={18} />}
-                </span>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm" style={{ color: "var(--text)" }}>
-                    <Link
-                      href={`/u/${n.actor.id}`}
-                      onClick={(e) => e.stopPropagation()}
-                      className="font-medium hover:underline"
-                    >
-                      {n.actor.nickname}
-                    </Link>{" "}
-                    <span style={{ color: "var(--text-secondary)" }}>
-                      {n.type === "comment" ? "评论了你的帖子" : "点赞了你的帖子"}
-                    </span>
+              <span
+                className="w-10 h-10 shrink-0 rounded-full flex items-center justify-center"
+                style={{
+                  color: n.type === "like" ? "var(--clay)" : "var(--accent)",
+                  background:
+                    n.type === "like" ? "var(--clay-soft)" : "var(--accent-soft)",
+                }}
+              >
+                {n.type === "like" ? <Heart size={16} /> : <MessageCircle size={16} />}
+              </span>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
+                  <Link
+                    href={`/u/${n.actor.id}`}
+                    onClick={(e) => e.stopPropagation()}
+                    className="font-semibold hover:text-[var(--accent)] transition-colors"
+                  >
+                    {n.actor.nickname}
+                  </Link>{" "}
+                  <span className="meta">{n.type === "comment" ? "评论了你的帖子" : "点赞了你的帖子"}</span>
+                </p>
+                <p className="text-sm mt-1 truncate" style={{ color: "var(--ink-2)" }}>
+                  《{n.post.title}》
+                </p>
+                {n.content && (
+                  <p className="text-[13px] mt-1.5 line-clamp-2" style={{ color: "var(--ink-3)" }}>
+                    {n.content}
                   </p>
-                  <p className="text-sm mt-1 font-medium truncate" style={{ color: "var(--text)" }}>
-                    《{n.post.title}》
-                  </p>
-                  {n.content && (
-                    <p className="text-sm mt-1 line-clamp-2" style={{ color: "var(--text-secondary)" }}>
-                      {n.content}
-                    </p>
-                  )}
-                  <p className="text-xs mt-2" style={{ color: "var(--text-secondary)" }}>
-                    {formatTime(n.created_at)}
-                  </p>
-                </div>
-                {!n.is_read && (
-                  <span className="w-2.5 h-2.5 rounded-full shrink-0 mt-1.5" style={{ background: "var(--primary)" }} />
                 )}
+                <p className="meta text-xs mt-2">{formatTime(n.created_at)}</p>
               </div>
+              {!n.is_read && (
+                <span className="w-2.5 h-2.5 shrink-0 mt-2 rounded-full" style={{ background: "var(--clay)" }} />
+              )}
             </button>
           ))}
         </div>
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index d35df34..89e7bc9 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -1,18 +1,16 @@
 import Link from "next/link";
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { cookies } from "next/headers";
+import { PenSquare, SearchX, MessagesSquare, Check, ArrowRight } from "lucide-react";
 import { fetchPosts, fetchBoards } from "@/lib/api";
 import Pagination from "@/components/Pagination";
-import LikeButton from "@/components/LikeButton";
+import PostRow from "@/components/PostRow";
+import FeaturePost from "@/components/FeaturePost";
+import PinnedPosts from "@/components/PinnedPosts";
 
 export const metadata: Metadata = {
-  title: "姜十三论坛 - 技术分享与讨论社区",
+  title: "姜十三论坛 · 技术讨论社区",
   description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
-  openGraph: {
-    title: "姜十三论坛 - 技术分享与讨论社区",
-    description: "姜十三论坛，分享技术、讨论问题、交流心得的社区",
-    type: "website",
-  },
 };
 
 interface HomePageProps {
@@ -29,84 +27,179 @@ export default async function HomePage({ searchParams }: HomePageProps) {
     fetchBoards(),
   ]);
 
+  // 第一页且非搜索时拆分为三段：管理员置顶 → 今日精选（首条非置顶）→ 普通列表
+  const split = page === 1 && !keyword;
+  const pinned = split ? postsData.posts.filter((p) => p.pinned > 0) : [];
+  const normal = split ? postsData.posts.filter((p) => p.pinned <= 0) : postsData.posts;
+  const feature = split && normal.length > 0 ? normal[0] : null;
+  const rows = feature ? normal.slice(1) : normal;
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-      {/* 主内容：帖子列表 */}
-      <div className="md:col-span-3">
-        <h1 className="text-2xl font-bold mb-4">
-          {keyword ? `搜索结果："${keyword}"` : "最新帖子"}
-        </h1>
-        <div className="space-y-3">
-          {postsData.posts.map((post) => (
-            <div
-              key={post.id}
-              className="p-4 rounded-lg border hover:shadow-md transition-shadow"
-              style={{ borderColor: "var(--border)", background: "var(--bg)" }}
-            >
-              <div className="flex items-center gap-2 mb-2">
-                <span
-                  className="text-xs px-2 py-0.5 rounded"
-                  style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
-                >
-                  {post.board.name}
-                </span>
-                {post.pinned > 0 && (
-                  <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
-                )}
-                {post.recommended && (
-                  <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
-                )}
-              </div>
-              <Link href={`/post/${post.id}`}>
-                <h2 className="font-semibold mb-1 hover:underline" style={{ color: "var(--text)" }}>
-                  {post.title}
-                </h2>
-              </Link>
-              <div className="flex items-center justify-between gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
-                <div className="flex items-center gap-4">
-                  <Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
-                    {post.user.nickname}
-                  </Link>
-                  <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
-                  <span>💬 {post.comment_count}</span>
-                  <span>👁 {post.view_count}</span>
-                </div>
-                <LikeButton postId={String(post.id)} liked={post.liked} likeCount={post.like_count} variant="compact" />
-              </div>
-            </div>
-          ))}
-          {postsData.posts.length === 0 && (
-            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
-              {keyword ? "没有找到相关帖子" : "暂无帖子，来发第一篇吧！"}
-            </p>
-          )}
+    <div>
+      {/* 页头 */}
+      <div className="flex items-end justify-between gap-4 mb-6">
+        <div>
+          <h1 className="text-[26px] sm:text-[32px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+            {keyword ? (
+              <>
+                搜索“<span style={{ color: "var(--accent)" }}>{keyword}</span>”
+              </>
+            ) : (
+              "最新讨论"
+            )}
+          </h1>
+          <p className="meta mt-2">
+            {keyword
+              ? `共找到 ${postsData.total} 篇相关帖子`
+              : `共 ${postsData.total} 篇帖子 · ${boardsData.boards.length} 个板块，欢迎加入讨论`}
+          </p>
         </div>
-        <Pagination
-          total={postsData.total}
-          page={page}
-          size={20}
-          basePath="/"
-          query={keyword ? { q: keyword } : {}}
-        />
+        <Link href="/compose" className="btn btn-primary hidden sm:inline-flex">
+          <PenSquare size={16} /> 写新帖
+        </Link>
       </div>
 
-      {/* 侧边栏：板块列表 */}
-      <aside className="md:col-span-1">
-        <h2 className="text-lg font-bold mb-3">板块</h2>
-        <div className="space-y-2">
-          {boardsData.boards.map((board) => (
-            <Link
-              key={board.id}
-              href={`/board/${board.id}`}
-              className="block p-3 rounded-lg border hover:shadow-sm transition-shadow"
-              style={{ borderColor: "var(--border)", background: "var(--bg-secondary)" }}
-            >
-              <div className="font-medium" style={{ color: "var(--text)" }}>{board.name}</div>
-              <div className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>{board.description}</div>
-            </Link>
-          ))}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_290px] gap-6">
+        {/* 主列 */}
+        <div>
+          <PinnedPosts posts={pinned} />
+          {feature && (
+            <div className="mb-6">
+              <FeaturePost post={feature} />
+            </div>
+          )}
+
+          <div className="panel overflow-hidden">
+            {rows.length > 0 ? (
+              <>
+                <div className="px-4 sm:px-5 py-3.5 flex items-center justify-between" style={{ borderBottom: "1px solid var(--line)" }}>
+                  <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
+                    {keyword ? "搜索结果" : "全部讨论"}
+                  </span>
+                  <span className="meta text-xs">共 {postsData.total} 篇</span>
+                </div>
+                {rows.map((post) => (
+                  <PostRow key={post.id} post={post} boardHref />
+                ))}
+              </>
+            ) : (
+              <div className="text-center py-20 px-6">
+                <span
+                  className="inline-flex w-14 h-14 rounded-full items-center justify-center mb-4"
+                  style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+                >
+                  {keyword ? <SearchX size={26} /> : <MessagesSquare size={26} />}
+                </span>
+                <p className="font-bold text-lg" style={{ color: "var(--ink)" }}>
+                  {keyword ? "没有找到相关帖子" : "还没有帖子"}
+                </p>
+                <p className="meta mt-1.5">
+                  {keyword ? `换个关键词试试，或者发起“${keyword}”相关的话题` : "成为第一个发起讨论的人吧"}
+                </p>
+                {keyword ? (
+                  <div className="flex items-center justify-center gap-3 mt-6">
+                    <Link href="/" className="btn btn-line">
+                      清除搜索
+                    </Link>
+                    <Link href="/compose" className="btn btn-primary">
+                      <PenSquare size={15} /> 发起这个话题
+                    </Link>
+                  </div>
+                ) : (
+                  <Link href="/compose" className="btn btn-primary mt-6">
+                    <PenSquare size={15} /> 写新帖
+                  </Link>
+                )}
+              </div>
+            )}
+          </div>
+
+          <Pagination
+            total={postsData.total}
+            page={page}
+            size={20}
+            basePath="/"
+            query={keyword ? { q: keyword } : undefined}
+          />
         </div>
-      </aside>
+
+        {/* 侧栏 */}
+        <aside className="space-y-5">
+          {/* 发帖引导 */}
+          {!keyword && (
+            <div
+              className="p-5"
+              style={{
+                background: "var(--accent-soft)",
+                borderRadius: "var(--r)",
+              }}
+            >
+              <p className="font-extrabold text-[16px] mb-1" style={{ color: "var(--ink)" }}>
+                有什么想聊的？
+              </p>
+              <p className="text-[13px] leading-relaxed mb-4" style={{ color: "var(--ink-2)" }}>
+                分享你的想法、问题或经验，社区里有人正在等你的回答。
+              </p>
+              <Link
+                href="/compose"
+                className="btn btn-primary w-full justify-center"
+              >
+                <PenSquare size={15} /> 发起讨论
+              </Link>
+            </div>
+          )}
+
+          <div className="panel p-5">
+            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>板块导航</p>
+            <div className="space-y-1">
+              {boardsData.boards.map((b, i) => (
+                <Link
+                  key={b.id}
+                  href={`/board/${b.id}`}
+                  className="group flex items-center gap-3 py-1.5 px-2 -mx-2 rounded-xl transition-colors hover:bg-[var(--panel-2)]"
+                >
+                  <span
+                    className={`av-${i % 8} w-8 h-8 rounded-xl flex items-center justify-center text-[13px] font-bold shrink-0`}
+                  >
+                    {b.name.slice(0, 1)}
+                  </span>
+                  <span
+                    className="text-sm font-medium flex-1 truncate group-hover:text-[var(--accent)] transition-colors"
+                    style={{ color: "var(--ink)" }}
+                  >
+                    {b.name}
+                  </span>
+                  <ArrowRight size={14} className="opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all" style={{ color: "var(--accent)" }} />
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          <div className="panel p-5">
+            <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>社区守则</p>
+            <ul className="space-y-3 text-[13.5px] leading-relaxed" style={{ color: "var(--ink-2)" }}>
+              <li className="flex gap-2.5">
+                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
+                  <Check size={12} strokeWidth={3} />
+                </span>
+                标题清晰，内容支持 Markdown
+              </li>
+              <li className="flex gap-2.5">
+                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
+                  <Check size={12} strokeWidth={3} />
+                </span>
+                友善讨论，就事论事
+              </li>
+              <li className="flex gap-2.5">
+                <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center mt-0.5" style={{ background: "var(--accent-soft)", color: "var(--accent)" }}>
+                  <Check size={12} strokeWidth={3} />
+                </span>
+                违规内容可向管理员举报
+              </li>
+            </ul>
+          </div>
+        </aside>
+      </div>
     </div>
   );
 }
diff --git a/frontend/app/post/[id]/edit/page.tsx b/frontend/app/post/[id]/edit/page.tsx
index fbe14d0..027446a 100644
--- a/frontend/app/post/[id]/edit/page.tsx
+++ b/frontend/app/post/[id]/edit/page.tsx
@@ -2,6 +2,8 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
 import { fetchPostDetail, apiMe, apiUpdatePost, type Post, type User } from "@/lib/api";
 
 interface EditPageProps {
@@ -19,13 +21,11 @@ export default function EditPostPage({ params }: EditPageProps) {
   const [error, setError] = useState("");
   const [checking, setChecking] = useState(true);
 
-  // params 是 Promise，需要解包
   const [id, setId] = useState("");
   useEffect(() => {
     params.then((p) => setId(p.id));
   }, [params]);
 
-  // 加载帖子 + 校验权限
   useEffect(() => {
     if (!id) return;
     Promise.all([fetchPostDetail(id), apiMe()])
@@ -36,7 +36,6 @@ export default function EditPostPage({ params }: EditPageProps) {
         setTags(postData.post.tags || "");
         const u = meData.user;
         setUser(u || null);
-        // 非作者且非管理员 → 跳转
         if (!u || (u.id !== postData.post.user.id && u.role !== "admin")) {
           router.push(`/post/${id}`);
         }
@@ -64,8 +63,8 @@ export default function EditPostPage({ params }: EditPageProps) {
 
   if (checking) {
     return (
-      <div className="max-w-3xl mx-auto mt-12 text-center" style={{ color: "var(--text-secondary)" }}>
-        加载中...
+      <div className="max-w-3xl mx-auto text-center py-20">
+        <p className="meta">正在加载帖子…</p>
       </div>
     );
   }
@@ -74,59 +73,71 @@ export default function EditPostPage({ params }: EditPageProps) {
 
   return (
     <div className="max-w-3xl mx-auto">
-      <h1 className="text-2xl font-bold mb-6">编辑帖子</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
-        )}
+      <nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <Link href={`/post/${post.id}`} className="hover:text-[var(--accent)] transition-colors truncate max-w-[12rem]">
+          帖子详情
+        </Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>编辑</span>
+      </nav>
+
+      <div className="mb-7">
+        <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+          编辑帖子
+        </h1>
+      </div>
+
+      <form onSubmit={handleSubmit} className="panel p-5 sm:p-7 space-y-5">
+        {error && <div className="alert-error">{error}</div>}
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标题</label>
+          <label className="field-label">标题</label>
           <input
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
             required
             maxLength={256}
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
           />
         </div>
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>标签（逗号分隔，可选）</label>
+          <label className="field-label">标签（逗号分隔，可选）</label>
           <input
             type="text"
             value={tags}
             onChange={(e) => setTags(e.target.value)}
-            placeholder="例如：技术,Go"
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            placeholder="Go, PostgreSQL, 架构"
+            className="field"
           />
         </div>
+
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>内容（支持 Markdown）</label>
+          <label className="field-label">正文（支持 Markdown）</label>
           <textarea
             value={content}
             onChange={(e) => setContent(e.target.value)}
             required
-            rows={12}
-            className="w-full px-3 py-2 rounded-lg border resize-y font-mono"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            rows={14}
+            className="field"
           />
         </div>
-        <div className="flex gap-3">
+
+        <div className="flex gap-3 pt-2">
           <button
             type="submit"
             disabled={loading || !title.trim() || !content.trim()}
-            className="px-6 py-2 rounded-lg text-white disabled:opacity-50"
-            style={{ background: "var(--primary)" }}
+            className="btn btn-primary"
           >
             {loading ? "保存中..." : "保存修改"}
           </button>
           <button
             type="button"
             onClick={() => router.push(`/post/${post.id}`)}
-            className="px-6 py-2 rounded-lg"
-            style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
+            className="btn btn-line"
           >
             取消
           </button>
diff --git a/frontend/app/post/[id]/page.tsx b/frontend/app/post/[id]/page.tsx
index 5034dc3..18c98cf 100644
--- a/frontend/app/post/[id]/page.tsx
+++ b/frontend/app/post/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import Link from "next/link";
 import { cookies } from "next/headers";
 import ReactMarkdown from "react-markdown";
@@ -6,6 +6,10 @@ import { fetchPostDetail, fetchComments } from "@/lib/api";
 import CommentSection from "@/components/CommentSection";
 import PostActions from "@/components/PostActions";
 import LikeButton from "@/components/LikeButton";
+import ReadingProgress from "@/components/ReadingProgress";
+import Avatar from "@/components/Avatar";
+import { IconComment, IconEye } from "@/components/Icons";
+import { ChevronRight } from "lucide-react";
 
 interface PageProps {
   params: Promise<{ id: string }>;
@@ -16,7 +20,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   try {
     const { post } = await fetchPostDetail(id);
     return {
-      title: `${post.title} - 姜十三论坛`,
+      title: post.title,
       description: post.content.slice(0, 160),
       openGraph: {
         title: post.title,
@@ -25,7 +29,7 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
       },
     };
   } catch {
-    return { title: "帖子不存在 - 姜十三论坛" };
+    return { title: "帖子不存在" };
   }
 }
 
@@ -42,10 +46,7 @@ export default async function PostDetailPage({ params }: PageProps) {
     articleBody: post.content,
     datePublished: post.created_at,
     dateModified: post.updated_at,
-    author: {
-      "@type": "Person",
-      name: post.user.nickname,
-    },
+    author: { "@type": "Person", name: post.user.nickname },
     commentCount: post.comment_count,
     interactionStatistic: {
       "@type": "InteractionCounter",
@@ -56,42 +57,79 @@ export default async function PostDetailPage({ params }: PageProps) {
 
   return (
     <article className="max-w-3xl mx-auto">
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-      />
+      <ReadingProgress />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
 
-      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
-        <Link href="/" className="hover:underline">首页</Link>
-        <span className="mx-2">/</span>
-        <Link href={`/board/${post.board.id}`} className="hover:underline">{post.board.name}</Link>
+      <nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <Link href={`/board/${post.board.id}`} className="hover:text-[var(--accent)] transition-colors">
+          {post.board.name}
+        </Link>
       </nav>
 
-      <div className="flex items-center gap-2 mb-3">
-        {post.pinned > 0 && (
-          <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
-        )}
-        {post.recommended && (
-          <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
-        )}
-      </div>
-      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
+      <div className="panel p-6 sm:p-9">
+        <header className="mb-7">
+          <div className="flex items-center gap-2 mb-4 flex-wrap">
+            {post.pinned > 0 && <span className="badge-pin">置顶</span>}
+            {post.recommended && <span className="badge-rec">推荐</span>}
+            <Link href={`/board/${post.board.id}`} className="chip">
+              {post.board.name}
+            </Link>
+          </div>
+          <h1 className="text-[26px] sm:text-[34px] font-extrabold leading-tight tracking-tight mb-6" style={{ color: "var(--ink)" }}>
+            {post.title}
+          </h1>
 
-      <div className="flex items-center justify-between gap-4 mb-6 pb-4 border-b" style={{ borderColor: "var(--border)" }}>
-        <div className="flex items-center gap-4" style={{ color: "var(--text-secondary)" }}>
-          <Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
-            {post.user.nickname}
-          </Link>
-          <span>{new Date(post.created_at).toLocaleString("zh-CN")}</span>
-          <span>👁 {post.view_count}</span>
-          <span>💬 {post.comment_count}</span>
-          <LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
+          <div
+            className="flex items-center justify-between gap-4 flex-wrap pb-5"
+            style={{ borderBottom: "1px solid var(--line)" }}
+          >
+            <div className="flex items-center gap-4 flex-wrap">
+              <Link
+                href={`/u/${post.user.id}`}
+                className="flex items-center gap-2.5 group"
+              >
+                <Avatar name={post.user.nickname || post.user.username} size={40} />
+                <span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors" style={{ color: "var(--ink)" }}>
+                  {post.user.nickname}
+                </span>
+              </Link>
+              <span className="meta">{new Date(post.created_at).toLocaleString("zh-CN")}</span>
+              <span className="inline-flex items-center gap-1.5 meta">
+                <IconEye size={14} /> {post.view_count}
+              </span>
+              <span className="inline-flex items-center gap-1.5 meta">
+                <IconComment size={14} /> {post.comment_count}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
+              <PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
+            </div>
+          </div>
+        </header>
+
+        {post.tags && (
+          <div className="flex flex-wrap gap-2 mb-7">
+            {[
+              ...new Set(
+                post.tags
+                  .split(",")
+                  .map((t) => t.trim())
+                  .filter(Boolean)
+              ),
+            ].map((t, i) => (
+              <span key={`${t}-${i}`} className="chip">
+                # {t}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="prose-content">
+          <ReactMarkdown>{post.content}</ReactMarkdown>
         </div>
-        <PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
-      </div>
-
-      <div className="prose-content mb-8" style={{ color: "var(--text)" }}>
-        <ReactMarkdown>{post.content}</ReactMarkdown>
       </div>
 
       <CommentSection postId={id} comments={comments} />
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
index c8f8796..d05b138 100644
--- a/frontend/app/register/page.tsx
+++ b/frontend/app/register/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { UserPlus } from "lucide-react";
 import { apiRegister } from "@/lib/api";
 
 export default function RegisterPage() {
@@ -30,14 +31,26 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="max-w-md mx-auto mt-12">
-      <h1 className="text-2xl font-bold mb-6 text-center">注册</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        {error && (
-          <div className="p-3 rounded-lg bg-red-50 text-red-600 text-sm">{error}</div>
-        )}
+    <div className="max-w-md mx-auto pt-8 sm:pt-14">
+      <div className="mb-7 text-center">
+        <span
+          className="inline-flex w-14 h-14 rounded-2xl items-center justify-center mb-4"
+          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
+        >
+          <UserPlus size={26} />
+        </span>
+        <h1 className="text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+          创建账号
+        </h1>
+        <p className="text-sm mt-2" style={{ color: "var(--ink-2)" }}>
+          加入姜十三，开始你的第一帖
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="panel p-6 sm:p-7 space-y-4">
+        {error && <div className="alert-error">{error}</div>}
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>用户名</label>
+          <label className="field-label">用户名</label>
           <input
             type="text"
             value={username}
@@ -45,43 +58,43 @@ export default function RegisterPage() {
             required
             minLength={3}
             maxLength={32}
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            autoFocus
+            className="field"
+            placeholder="3–32 位"
           />
         </div>
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>邮箱（可选）</label>
+          <label className="field-label">邮箱（可选）</label>
           <input
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
+            placeholder="you@example.com"
           />
         </div>
         <div>
-          <label className="block text-sm mb-1" style={{ color: "var(--text-secondary)" }}>密码</label>
+          <label className="field-label">密码</label>
           <input
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             required
             minLength={6}
-            className="w-full px-3 py-2 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
+            placeholder="至少 6 位"
           />
         </div>
-        <button
-          type="submit"
-          disabled={loading}
-          className="w-full py-2 rounded-lg text-white disabled:opacity-50"
-          style={{ background: "var(--primary)" }}
-        >
+        <button type="submit" disabled={loading} className="btn btn-primary w-full justify-center mt-2">
           {loading ? "注册中..." : "注册"}
         </button>
       </form>
-      <p className="text-center mt-4 text-sm" style={{ color: "var(--text-secondary)" }}>
-        已有账号？<Link href="/login" className="hover:underline" style={{ color: "var(--primary)" }}>去登录</Link>
+
+      <p className="meta text-center mt-5">
+        已有账号？
+        <Link href="/login" className="ml-1 font-semibold" style={{ color: "var(--accent)" }}>
+          去登录
+        </Link>
       </p>
     </div>
   );
diff --git a/frontend/app/settings/page.tsx b/frontend/app/settings/page.tsx
index 0b16716..55f102e 100644
--- a/frontend/app/settings/page.tsx
+++ b/frontend/app/settings/page.tsx
@@ -3,7 +3,9 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { ChevronRight } from "lucide-react";
 import { apiChangePassword, apiMe, type User } from "@/lib/api";
+import Avatar from "@/components/Avatar";
 
 export default function SettingsPage() {
   const router = useRouter();
@@ -57,79 +59,78 @@ export default function SettingsPage() {
   };
 
   if (!user) {
-    return <p style={{ color: "var(--text-secondary)" }}>加载中...</p>;
+    return (
+      <div className="max-w-md mx-auto text-center py-20">
+        <p className="meta">正在加载…</p>
+      </div>
+    );
   }
 
   return (
     <div className="max-w-md mx-auto">
-      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
-        <Link href="/" className="hover:underline">首页</Link>
-        <span className="mx-2">/</span>
-        <span>账号设置</span>
+      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>账号设置</span>
       </nav>
 
-      <h1 className="text-2xl font-bold mb-6">账号设置</h1>
-
-      <div className="p-4 rounded-lg mb-6" style={{ background: "var(--bg-secondary)" }}>
-        <div className="text-sm" style={{ color: "var(--text-secondary)" }}>当前账号</div>
-        <div className="font-medium mt-1" style={{ color: "var(--text)" }}>{user.nickname}（{user.username}）</div>
+      <div className="mb-7">
+        <h1 className="text-[26px] sm:text-[30px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+          账号设置
+        </h1>
       </div>
 
-      <h2 className="text-lg font-semibold mb-4">修改密码</h2>
-
-      {success && (
-        <div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--success-bg, #dcfce7)", color: "#166534" }}>
-          密码修改成功，正在跳转登录页...
+      <div className="panel p-5 mb-7 flex items-center gap-4">
+        <Avatar name={user.nickname || user.username} size={46} />
+        <div className="min-w-0">
+          <div className="font-bold truncate" style={{ color: "var(--ink)" }}>
+            {user.nickname}
+          </div>
+          <div className="meta">@{user.username} · {user.role === "admin" ? "管理员" : "普通用户"}</div>
         </div>
-      )}
+      </div>
 
-      {error && (
-        <div className="p-3 rounded-lg mb-4 text-sm" style={{ background: "var(--error-bg, #fee2e2)", color: "#991b1b" }}>
-          {error}
-        </div>
-      )}
+      <p className="font-bold text-[15px] mb-3.5" style={{ color: "var(--ink)" }}>修改密码</p>
 
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <form onSubmit={handleSubmit} className="panel p-5 sm:p-6 space-y-4">
+        {success && <div className="alert-ok">密码修改成功，正在跳转登录页...</div>}
+        {error && <div className="alert-error">{error}</div>}
         <div>
-          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>当前密码</label>
+          <label className="field-label">当前密码</label>
           <input
             type="password"
             value={oldPassword}
             onChange={(e) => setOldPassword(e.target.value)}
             required
-            className="w-full p-3 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
           />
         </div>
         <div>
-          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>新密码</label>
+          <label className="field-label">新密码（至少 6 位）</label>
           <input
             type="password"
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
             required
             minLength={6}
-            className="w-full p-3 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
           />
         </div>
         <div>
-          <label className="block text-sm font-medium mb-1" style={{ color: "var(--text)" }}>确认新密码</label>
+          <label className="field-label">确认新密码</label>
           <input
             type="password"
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
             required
             minLength={6}
-            className="w-full p-3 rounded-lg border"
-            style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
+            className="field"
           />
         </div>
         <button
           type="submit"
           disabled={submitting || success}
-          className="w-full py-3 rounded-lg text-white font-medium disabled:opacity-50"
-          style={{ background: "var(--primary)" }}
+          className="btn btn-primary w-full justify-center mt-2"
         >
           {submitting ? "提交中..." : "修改密码"}
         </button>
diff --git a/frontend/app/u/[id]/UserProfileClient.tsx b/frontend/app/u/[id]/UserProfileClient.tsx
index 759ad43..d5ea92d 100644
--- a/frontend/app/u/[id]/UserProfileClient.tsx
+++ b/frontend/app/u/[id]/UserProfileClient.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import { FileText, MessageCircle } from "lucide-react";
 import { fetchUserComments, type UserProfile, type UserCommentsResponse } from "@/lib/api";
 import Pagination from "@/components/Pagination";
+import { IconComment, IconEye, IconHeart } from "@/components/Icons";
 
 interface UserProfileClientProps {
   userId: string;
@@ -38,65 +40,85 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
     }
   };
 
-  const tabBtn = (t: Tab, label: string) => (
-    <button
-      onClick={() => handleTabChange(t)}
-      className="px-4 py-2 rounded-lg text-sm font-medium transition-colors"
-      style={
-        tab === t
-          ? { background: "var(--primary)", color: "white" }
-          : { background: "var(--bg-secondary)", color: "var(--text-secondary)" }
-      }
-    >
-      {label}
-    </button>
-  );
+  const tabBtn = (t: Tab, label: string, count: number, icon: React.ReactNode) => {
+    const active = tab === t;
+    return (
+      <button
+        onClick={() => handleTabChange(t)}
+        className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2 rounded-full text-sm font-semibold transition-all"
+        style={{
+          background: active ? "var(--panel)" : "transparent",
+          color: active ? "var(--accent)" : "var(--ink-3)",
+          boxShadow: active ? "var(--shadow-sm)" : "none",
+        }}
+      >
+        {icon}
+        {label}
+        <span
+          className="text-[11px] font-bold px-1.5 py-px rounded-full"
+          style={{
+            background: active ? "var(--accent-soft)" : "var(--tint)",
+            color: active ? "var(--accent)" : "var(--ink-3)",
+          }}
+        >
+          {count}
+        </span>
+      </button>
+    );
+  };
 
   return (
     <div>
-      <div className="flex gap-2 mb-5">
-        {tabBtn("posts", `发帖 (${initialPosts.stats.post_count})`)}
-        {tabBtn("comments", `评论 (${initialPosts.stats.comment_count})`)}
+      <div
+        className="inline-flex w-full sm:w-auto items-center gap-1 mb-6 p-1 rounded-full"
+        style={{ background: "var(--panel-2)" }}
+      >
+        {tabBtn("posts", "发帖", initialPosts.stats.post_count, <FileText size={15} />)}
+        {tabBtn("comments", "评论", initialPosts.stats.comment_count, <MessageCircle size={15} />)}
       </div>
 
       {tab === "posts" ? (
-        <div className="space-y-3">
-          {initialPosts.posts.map((post) => (
-            <Link
-              key={post.id}
-              href={`/post/${post.id}`}
-              className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
-              style={{ borderColor: "var(--border)", background: "var(--bg)" }}
-            >
-              <div className="flex items-center gap-2 mb-2">
-                <span
-                  className="text-xs px-2 py-0.5 rounded"
-                  style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
+        <div>
+          {initialPosts.posts.length > 0 ? (
+            <div className="panel overflow-hidden p-0">
+              {initialPosts.posts.map((post, i) => (
+                <Link
+                  key={post.id}
+                  href={`/post/${post.id}`}
+                  className="block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--panel-2)]"
+                  style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
                 >
-                  {post.board.name}
-                </span>
-                {post.pinned > 0 && (
-                  <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
-                )}
-                {post.recommended && (
-                  <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
-                )}
-              </div>
-              <h2 className="font-semibold mb-1 hover:underline" style={{ color: "var(--text)" }}>
-                {post.title}
-              </h2>
-              <div className="flex items-center gap-4 text-sm" style={{ color: "var(--text-secondary)" }}>
-                <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
-                <span>💬 {post.comment_count}</span>
-                <span>👁 {post.view_count}</span>
-                <span>❤️ {post.like_count}</span>
-              </div>
-            </Link>
-          ))}
-          {initialPosts.posts.length === 0 && (
-            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
-              暂无发帖
-            </p>
+                  <div className="flex items-center gap-2 mb-2 flex-wrap">
+                    <span className="chip">{post.board.name}</span>
+                    {post.pinned > 0 && <span className="badge-pin">置顶</span>}
+                    {post.recommended && <span className="badge-rec">推荐</span>}
+                  </div>
+                  <h2
+                    className="font-semibold mb-2 leading-snug group-hover:text-[var(--accent)]"
+                    style={{ color: "var(--ink)" }}
+                  >
+                    {post.title}
+                  </h2>
+                  <div className="flex items-center gap-4 meta text-[12px]">
+                    <span>{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
+                    <span className="inline-flex items-center gap-1">
+                      <IconComment size={12} /> {post.comment_count}
+                    </span>
+                    <span className="inline-flex items-center gap-1">
+                      <IconEye size={12} /> {post.view_count}
+                    </span>
+                    <span className="inline-flex items-center gap-1">
+                      <IconHeart size={12} /> {post.like_count}
+                    </span>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          ) : (
+            <div className="panel text-center py-16 px-6">
+              <FileText size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
+              <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无发帖</p>
+            </div>
           )}
           <Pagination
             total={initialPosts.posts_total}
@@ -106,27 +128,36 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
           />
         </div>
       ) : (
-        <div className="space-y-3">
+        <div>
           {commentLoading ? (
-            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>加载中...</p>
+            <div className="panel text-center py-16">
+              <p className="meta">正在加载评论…</p>
+            </div>
           ) : commentData && commentData.comments.length > 0 ? (
             <>
-              {commentData.comments.map((c) => (
-                <Link
-                  key={c.id}
-                  href={`/post/${c.post_id}`}
-                  className="block p-4 rounded-lg border hover:shadow-md transition-shadow"
-                  style={{ borderColor: "var(--border)", background: "var(--bg)" }}
-                >
-                  <div className="text-sm mb-2" style={{ color: "var(--text-secondary)" }}>
-                    评论于 <span className="hover:underline" style={{ color: "var(--primary)" }}>{c.post_title}</span>
-                  </div>
-                  <p className="line-clamp-2" style={{ color: "var(--text)" }}>{c.content}</p>
-                  <div className="text-xs mt-2" style={{ color: "var(--text-secondary)" }}>
-                    {new Date(c.created_at).toLocaleString("zh-CN")}
-                  </div>
-                </Link>
-              ))}
+              <div className="panel overflow-hidden p-0">
+                {commentData.comments.map((c, i) => (
+                  <Link
+                    key={c.id}
+                    href={`/post/${c.post_id}`}
+                    className="block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--panel-2)]"
+                    style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
+                  >
+                    <div className="meta text-xs mb-2">
+                      评论于《<span style={{ color: "var(--accent)" }}>{c.post_title}</span>》
+                    </div>
+                    <p
+                      className="text-[15px] leading-relaxed line-clamp-2"
+                      style={{ color: "var(--ink)" }}
+                    >
+                      {c.content}
+                    </p>
+                    <div className="meta text-xs mt-2">
+                      {new Date(c.created_at).toLocaleString("zh-CN")}
+                    </div>
+                  </Link>
+                ))}
+              </div>
               <Pagination
                 total={commentData.total}
                 page={commentPage}
@@ -137,9 +168,10 @@ export default function UserProfileClient({ userId, initialPosts, initialPage }:
               />
             </>
           ) : (
-            <p className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
-              暂无评论
-            </p>
+            <div className="panel text-center py-16 px-6">
+              <MessageCircle size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
+              <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无评论</p>
+            </div>
           )}
         </div>
       )}
diff --git a/frontend/app/u/[id]/page.tsx b/frontend/app/u/[id]/page.tsx
index 1bc0ef1..6cb45bf 100644
--- a/frontend/app/u/[id]/page.tsx
+++ b/frontend/app/u/[id]/page.tsx
@@ -1,8 +1,9 @@
 import Link from "next/link";
 import { Metadata } from "next";
+import { ChevronRight, FileText, MessageCircle } from "lucide-react";
 import { fetchUserProfile, type UserProfile } from "@/lib/api";
-import Pagination from "@/components/Pagination";
 import UserProfileClient from "./UserProfileClient";
+import Avatar from "@/components/Avatar";
 
 interface UserPageProps {
   params: Promise<{ id: string }>;
@@ -11,10 +12,15 @@ interface UserPageProps {
 
 export async function generateMetadata({ params }: UserPageProps): Promise<Metadata> {
   const { id } = await params;
-  return {
-    title: `用户资料 - 姜十三论坛`,
-    description: `查看用户 ${id} 的资料、发帖与评论`,
-  };
+  try {
+    const data = await fetchUserProfile(id, 1);
+    return {
+      title: data.user.nickname || data.user.username,
+      description: `查看 ${data.user.nickname} 的资料、发帖与评论`,
+    };
+  } catch {
+    return { title: "用户不存在" };
+  }
 }
 
 export default async function UserPage({ params, searchParams }: UserPageProps) {
@@ -27,9 +33,12 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
     data = await fetchUserProfile(id, page);
   } catch {
     return (
-      <div className="text-center py-16" style={{ color: "var(--text-secondary)" }}>
-        <p className="text-lg">用户不存在</p>
-        <Link href="/" className="mt-4 inline-block hover:underline" style={{ color: "var(--primary)" }}>
+      <div className="max-w-md mx-auto text-center py-24">
+        <p className="text-lg font-extrabold mb-1.5" style={{ color: "var(--ink)" }}>
+          用户不存在
+        </p>
+        <p className="meta mb-5">该用户可能已注销或链接有误</p>
+        <Link href="/" className="btn btn-line btn-sm">
           返回首页
         </Link>
       </div>
@@ -37,54 +46,65 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   }
 
   const u = data.user;
-  const roleLabel = u.role === "admin" ? "管理员" : "用户";
+  const stats = [
+    { label: "发帖", value: data.stats.post_count, icon: <FileText size={15} /> },
+    { label: "评论", value: data.stats.comment_count, icon: <MessageCircle size={15} /> },
+  ];
 
   return (
     <div className="max-w-4xl mx-auto">
+      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
+        <Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
+        <ChevronRight size={13} />
+        <span style={{ color: "var(--accent)" }}>{u.nickname || u.username}</span>
+      </nav>
+
       {/* 用户信息卡片 */}
-      <div
-        className="rounded-xl border p-6 mb-6 flex items-start gap-5"
-        style={{ borderColor: "var(--border)", background: "var(--bg)" }}
-      >
-        <div
-          className="w-20 h-20 rounded-full flex items-center justify-center text-2xl font-bold shrink-0"
-          style={{ background: "var(--bg-secondary)", color: "var(--primary)" }}
-        >
-          {u.avatar ? (
-            <img src={u.avatar} alt={u.nickname} className="w-full h-full rounded-full object-cover" />
-          ) : (
-            (u.nickname || u.username).charAt(0).toUpperCase()
-          )}
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <h1 className="text-2xl font-bold" style={{ color: "var(--text)" }}>
-              {u.nickname || u.username}
-            </h1>
-            {u.role === "admin" && (
-              <span
-                className="text-xs px-2 py-0.5 rounded font-medium"
-                style={{ background: "var(--primary)", color: "white" }}
-              >
-                {roleLabel}
-              </span>
-            )}
-          </div>
-          <p className="text-sm mt-1" style={{ color: "var(--text-secondary)" }}>
-            @{u.username} · 加入于 {new Date(u.created_at).toLocaleDateString("zh-CN")}
-          </p>
-          <div className="flex gap-6 mt-3 text-sm">
-            <span style={{ color: "var(--text)" }}>
-              <strong>{data.stats.post_count}</strong>{" "}
-              <span style={{ color: "var(--text-secondary)" }}>帖子</span>
-            </span>
-            <span style={{ color: "var(--text)" }}>
-              <strong>{data.stats.comment_count}</strong>{" "}
-              <span style={{ color: "var(--text-secondary)" }}>评论</span>
-            </span>
+      <section className="panel relative overflow-hidden p-6 sm:p-8 mb-6">
+        <span
+          aria-hidden
+          className="absolute -top-20 -right-16 w-60 h-60 rounded-full"
+          style={{ background: "var(--accent-soft)" }}
+        />
+        <div className="relative flex items-start gap-5 sm:gap-6">
+          <Avatar
+            name={u.nickname || u.username}
+            src={u.avatar || undefined}
+            size={80}
+            className="sm:!w-[88px] sm:!h-[88px]"
+          />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2.5 flex-wrap">
+              <h1 className="text-[24px] sm:text-[28px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
+                {u.nickname || u.username}
+              </h1>
+              {u.role === "admin" && (
+                <span
+                  className="text-[11.5px] font-bold px-2.5 py-1 rounded-full"
+                  style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
+                >
+                  管理员
+                </span>
+              )}
+            </div>
+            <p className="meta mt-1.5 text-[13px]">
+              @{u.username} · {new Date(u.created_at).toLocaleDateString("zh-CN")} 加入
+            </p>
+            <div className="flex gap-2.5 mt-4">
+              {stats.map((s) => (
+                <span
+                  key={s.label}
+                  className="inline-flex items-center gap-2 px-3.5 py-2 rounded-full text-[13px] font-semibold"
+                  style={{ background: "var(--panel-2)", color: "var(--ink-2)" }}
+                >
+                  <span style={{ color: "var(--accent)" }}>{s.icon}</span>
+                  {s.value} {s.label}
+                </span>
+              ))}
+            </div>
           </div>
         </div>
-      </div>
+      </section>
 
       {/* 发帖 / 评论 切换 */}
       <UserProfileClient userId={id} initialPosts={data} initialPage={page} />
diff --git a/frontend/components/Avatar.tsx b/frontend/components/Avatar.tsx
new file mode 100644
index 0000000..43ff243
--- /dev/null
+++ b/frontend/components/Avatar.tsx
@@ -0,0 +1,35 @@
+// 柔和多色头像：按用户名确定性取色，圆形软底，浅/暗主题在 globals.css 各自配色
+function hash(s: string) {
+  let h = 0;
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+  return h;
+}
+
+export default function Avatar({
+  name,
+  size = 36,
+  src,
+  className = "",
+}: {
+  name: string;
+  size?: number;
+  src?: string | null;
+  className?: string;
+}) {
+  const idx = hash(name || "?") % 8;
+  const initial = (name || "?").trim().charAt(0).toUpperCase();
+  return (
+    <span
+      className={`inline-flex items-center justify-center shrink-0 select-none font-bold rounded-full overflow-hidden av-${idx} ${className}`}
+      style={{ width: size, height: size, fontSize: size * 0.42 }}
+      aria-hidden="true"
+    >
+      {src ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={src} alt="" className="w-full h-full object-cover" />
+      ) : (
+        initial
+      )}
+    </span>
+  );
+}
diff --git a/frontend/components/CommentSection.tsx b/frontend/components/CommentSection.tsx
index 85b97a2..bb8df73 100644
--- a/frontend/components/CommentSection.tsx
+++ b/frontend/components/CommentSection.tsx
@@ -3,8 +3,10 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
-import { Trash2 } from "lucide-react";
+import { Trash2, MessagesSquare } from "lucide-react";
 import { apiCreateComment, apiDeleteComment, apiMe, type Comment, type User } from "@/lib/api";
+import { toast } from "@/lib/toast";
+import Avatar from "./Avatar";
 
 interface CommentSectionProps {
   postId: string;
@@ -27,7 +29,6 @@ export default function CommentSection({ postId, comments }: CommentSectionProps
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!content.trim()) return;
-
     setSubmitting(true);
     try {
       const res = await apiCreateComment(postId, content);
@@ -35,10 +36,12 @@ export default function CommentSection({ postId, comments }: CommentSectionProps
         setContent("");
         router.refresh();
       } else if (res.error === "未登录") {
-        router.push("/login");
+        router.push(`/login?redirect=${encodeURIComponent(`/post/${postId}`)}`);
       } else {
-        alert(res.error || "评论失败");
+        toast(res.error || "评论失败");
       }
+    } catch {
+      toast("网络错误，评论失败");
     } finally {
       setSubmitting(false);
     }
@@ -52,8 +55,10 @@ export default function CommentSection({ postId, comments }: CommentSectionProps
       if (res.message) {
         router.refresh();
       } else {
-        alert(res.error || "删除失败");
+        toast(res.error || "删除失败");
       }
+    } catch {
+      toast("网络错误，删除失败");
     } finally {
       setDeletingId(null);
     }
@@ -63,57 +68,103 @@ export default function CommentSection({ postId, comments }: CommentSectionProps
     user && (user.id === comment.user.id || user.role === "admin");
 
   return (
-    <section className="mt-8 pt-6 border-t" style={{ borderColor: "var(--border)" }}>
-      <h2 className="text-xl font-bold mb-4">评论 ({comments.length})</h2>
-
-      <form onSubmit={handleSubmit} className="mb-6">
-        <textarea
-          value={content}
-          onChange={(e) => setContent(e.target.value)}
-          placeholder="写下你的评论..."
-          className="w-full p-3 rounded-lg border resize-none h-24"
-          style={{ borderColor: "var(--border)", background: "var(--bg)", color: "var(--text)" }}
-        />
-        <button
-          type="submit"
-          disabled={submitting || !content.trim()}
-          className="mt-2 px-4 py-2 rounded-lg text-white disabled:opacity-50"
-          style={{ background: "var(--primary)" }}
+    <section className="panel p-6 sm:p-8 mt-6">
+      <div className="flex items-center gap-2.5 mb-6">
+        <h2 className="text-lg font-extrabold" style={{ color: "var(--ink)" }}>
+          评论
+        </h2>
+        <span
+          className="text-[12px] font-bold px-2 py-0.5 rounded-full"
+          style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
         >
-          {submitting ? "发送中..." : "发表评论"}
-        </button>
-      </form>
+          {comments.length}
+        </span>
+      </div>
 
-      <div className="space-y-4">
+      {user ? (
+        <form onSubmit={handleSubmit} className="mb-8">
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            onKeyDown={(e) => {
+              if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+                e.preventDefault();
+                e.currentTarget.form?.requestSubmit();
+              }
+            }}
+            placeholder="友善发言，说说你的看法..."
+            rows={3}
+            className="field"
+          />
+          <div className="flex items-center justify-between gap-3 mt-2.5">
+            <span className="meta text-[11.5px]">支持 Markdown · Ctrl + Enter 发送</span>
+            <button type="submit" disabled={submitting || !content.trim()} className="btn btn-primary">
+              {submitting ? "发送中..." : "发表评论"}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <div
+          className="mb-8 px-5 py-4 rounded-2xl flex items-center justify-between gap-4 flex-wrap"
+          style={{ background: "var(--panel-2)" }}
+        >
+          <span className="text-sm" style={{ color: "var(--ink-2)" }}>
+            登录后参与讨论
+          </span>
+          <Link href="/login" className="btn btn-line btn-sm">
+            去登录
+          </Link>
+        </div>
+      )}
+
+      <div>
         {comments.map((comment) => (
-          <div key={comment.id} className="p-4 rounded-lg" style={{ background: "var(--bg-secondary)" }}>
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <Link href={`/u/${comment.user.id}`} className="font-medium hover:underline" style={{ color: "var(--primary)" }}>
-                  {comment.user.nickname}
-                </Link>
-                <span className="text-sm" style={{ color: "var(--text-secondary)" }}>
-                  {new Date(comment.created_at).toLocaleString("zh-CN")}
-                </span>
+          <div
+            key={comment.id}
+            className="flex gap-3.5 py-5 border-t first:border-t-0"
+            style={{ borderColor: "var(--line)" }}
+          >
+            <Link href={`/u/${comment.user.id}`} className="shrink-0 mt-0.5" aria-label={comment.user.nickname}>
+              <Avatar name={comment.user.nickname || comment.user.username} size={38} />
+            </Link>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between gap-3 mb-1.5">
+                <div className="flex items-center gap-2.5 min-w-0 flex-wrap">
+                  <Link href={`/u/${comment.user.id}`} className="group">
+                    <span
+                      className="text-sm font-semibold truncate group-hover:text-[var(--accent)] transition-colors"
+                      style={{ color: "var(--ink)" }}
+                    >
+                      {comment.user.nickname}
+                    </span>
+                  </Link>
+                  <span className="meta text-xs">{new Date(comment.created_at).toLocaleString("zh-CN")}</span>
+                </div>
+                {canDelete(comment) && (
+                  <button
+                    onClick={() => handleDelete(comment.id)}
+                    disabled={deletingId === comment.id}
+                    className="meta hover:text-[var(--danger)] transition-colors disabled:opacity-50 p-1"
+                    aria-label="删除评论"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                )}
               </div>
-              {canDelete(comment) && (
-                <button
-                  onClick={() => handleDelete(comment.id)}
-                  disabled={deletingId === comment.id}
-                  className="flex items-center gap-1 text-sm text-red-600 hover:opacity-80 disabled:opacity-50"
-                >
-                  <Trash2 size={14} />
-                  {deletingId === comment.id ? "删除中" : "删除"}
-                </button>
-              )}
+              <p className="text-[15px] leading-relaxed" style={{ color: "var(--ink)" }}>
+                {comment.content}
+              </p>
             </div>
-            <p style={{ color: "var(--text)" }}>{comment.content}</p>
           </div>
         ))}
         {comments.length === 0 && (
-          <p className="text-center py-8" style={{ color: "var(--text-secondary)" }}>
-            暂无评论，来抢沙发吧！
-          </p>
+          <div className="text-center py-14">
+            <MessagesSquare size={28} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
+            <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>
+              暂无评论
+            </p>
+            <p className="meta text-[12.5px] mt-1">来说两句，抢占沙发</p>
+          </div>
         )}
       </div>
     </section>
diff --git a/frontend/components/FeaturePost.tsx b/frontend/components/FeaturePost.tsx
new file mode 100644
index 0000000..e3a4c70
--- /dev/null
+++ b/frontend/components/FeaturePost.tsx
@@ -0,0 +1,95 @@
+import Link from "next/link";
+import type { PostListItem } from "@/lib/api";
+import LikeButton from "./LikeButton";
+import Avatar from "./Avatar";
+import { IconComment, IconEye } from "./Icons";
+
+function formatTime(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString("zh-CN");
+}
+
+/**
+ * 首页精选主卡：取自非置顶帖中的最新一帖（置顶帖由 PinnedPosts 承载）
+ */
+export default function FeaturePost({ post }: { post: PostListItem }) {
+  return (
+    <article className="panel hover-lift group relative overflow-hidden">
+      {/* 柔和装饰块，非发光 */}
+      <span
+        aria-hidden
+        className="absolute -top-20 -right-16 w-56 h-56 rounded-full"
+        style={{ background: "var(--accent-soft)" }}
+      />
+      <div className="relative p-6 sm:p-8">
+        <div className="flex items-center gap-2 mb-4 flex-wrap">
+          <span
+            className="inline-flex items-center gap-1.5 text-[12.5px] font-bold"
+            style={{ color: "var(--accent)" }}
+          >
+            <span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--accent)" }} />
+            今日精选
+          </span>
+          {post.recommended && <span className="badge-rec">推荐</span>}
+          <Link href={`/board/${post.board.id}`} className="chip">
+            {post.board.name}
+          </Link>
+        </div>
+
+        <Link href={`/post/${post.id}`}>
+          <h2
+            className="font-extrabold text-2xl sm:text-[28px] leading-tight tracking-tight transition-colors group-hover:text-[var(--accent)]"
+            style={{ color: "var(--ink)" }}
+          >
+            {post.title}
+          </h2>
+        </Link>
+        {post.tags && (
+          <div className="flex flex-wrap gap-2 mt-4">
+            {[
+              ...new Set(
+                post.tags
+                  .split(",")
+                  .map((t) => t.trim())
+                  .filter(Boolean)
+              ),
+            ]
+              .slice(0, 4)
+              .map((t, i) => (
+                <span key={`${t}-${i}`} className="chip">
+                  # {t}
+                </span>
+              ))}
+          </div>
+        )}
+
+        <div className="flex items-center justify-between gap-4 mt-6 pt-5" style={{ borderTop: "1px solid var(--line)" }}>
+          <div className="flex items-center gap-4 min-w-0">
+            <Link href={`/u/${post.user.id}`} className="flex items-center gap-2.5 min-w-0 group/au">
+              <Avatar name={post.user.nickname || post.user.username} size={38} />
+              <span className="min-w-0">
+                <span
+                  className="block text-sm font-semibold truncate group-hover/au:text-[var(--accent)] transition-colors"
+                  style={{ color: "var(--ink)" }}
+                >
+                  {post.user.nickname}
+                </span>
+                <span className="meta block text-[11.5px]">{formatTime(post.created_at)}</span>
+              </span>
+            </Link>
+            <span className="hidden sm:inline-flex items-center gap-1.5 meta">
+              <IconComment size={14} /> {post.comment_count}
+            </span>
+            <span className="hidden sm:inline-flex items-center gap-1.5 meta">
+              <IconEye size={14} /> {post.view_count}
+            </span>
+          </div>
+          <LikeButton
+            postId={String(post.id)}
+            liked={post.liked}
+            likeCount={post.like_count}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/components/Footer.tsx b/frontend/components/Footer.tsx
index 4b31ba1..01b235a 100644
--- a/frontend/components/Footer.tsx
+++ b/frontend/components/Footer.tsx
@@ -1,7 +1,35 @@
+import Link from "next/link";
+
 export default function Footer() {
   return (
-    <footer className="border-t py-6 text-center text-sm" style={{ borderColor: "var(--border)", color: "var(--text-secondary)" }}>
-      <p>姜十三论坛 · Powered by Go 1.27 + Next.js 16</p>
+    <footer className="mt-14" style={{ borderTop: "1px solid var(--line)" }}>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+        <div className="flex items-center gap-2.5">
+          <span
+            className="w-7 h-7 rounded-lg flex items-center justify-center"
+            style={{ background: "var(--accent)", color: "var(--accent-on)" }}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+            </svg>
+          </span>
+          <span className="text-[13.5px] font-bold" style={{ color: "var(--ink)" }}>
+            姜十三社区
+          </span>
+        </div>
+        <nav className="flex items-center gap-5 text-[13px]" style={{ color: "var(--ink-2)" }}>
+          <Link href="/" className="hover:text-[var(--accent)] transition-colors">
+            首页
+          </Link>
+          <Link href="/board/1" className="hover:text-[var(--accent)] transition-colors">
+            板块
+          </Link>
+          <span className="meta">Go × Next.js</span>
+        </nav>
+        <span className="meta text-[12.5px]">
+          © 2026 姜十三
+        </span>
+      </div>
     </footer>
   );
 }
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index ae7a701..4e83767 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -1,38 +1,79 @@
 "use client";
 
 import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
-import { Menu, X, Sun, Moon, LogIn, UserPlus, LogOut, PenSquare, Search, Settings } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import { useState, useEffect, useRef } from "react";
+import {
+  Menu,
+  X,
+  Sun,
+  Moon,
+  LogIn,
+  UserPlus,
+  LogOut,
+  PenSquare,
+  Search,
+  Settings,
+  Bell,
+  Home,
+} from "lucide-react";
 import { apiMe, apiLogout, type User } from "@/lib/api";
 import NotificationBell from "./NotificationBell";
+import Avatar from "./Avatar";
 
 export default function Header() {
   const router = useRouter();
+  const pathname = usePathname();
   const [menuOpen, setMenuOpen] = useState(false);
   const [theme, setTheme] = useState<"light" | "dark">("light");
   const [user, setUser] = useState<User | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     const q = searchQuery.trim();
-    if (q) {
-      router.push(`/?q=${encodeURIComponent(q)}`);
-    }
+    router.push(q ? `/?q=${encodeURIComponent(q)}` : "/");
+    setMenuOpen(false);
+    searchInputRef.current?.blur();
   };
 
   useEffect(() => {
-    // 读取主题
-    const savedTheme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+    // cookie 为单一真相源，客户端导航后校正（预取载荷可能回滚类名）
+    const isDark = document.cookie.match(/(?:^|;\s*)j13-theme=dark/);
+    const savedTheme: "light" | "dark" = isDark ? "dark" : "light";
+    document.documentElement.classList.toggle("dark", savedTheme === "dark");
     setTheme(savedTheme);
-
-    // 从后端获取登录态（HttpOnly cookie 自动携带）
+    setSearchQuery(new URLSearchParams(window.location.search).get("q")?.trim() || "");
     apiMe()
       .then((res) => setUser(res.user || null))
       .catch(() => setUser(null));
+  }, [pathname]);
+
+  // "/" 快速聚焦搜索
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const el = e.target as HTMLElement;
+      const typing =
+        el.tagName === "INPUT" || el.tagName === "TEXTAREA" || el.tagName === "SELECT" || el.isContentEditable;
+      if (e.key === "/" && !typing && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        searchInputRef.current?.focus();
+        searchInputRef.current?.select();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
   }, []);
 
+  const onSearchKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      setSearchQuery("");
+      if (new URLSearchParams(window.location.search).get("q")) router.push("/");
+      e.currentTarget.blur();
+    }
+  };
+
   const toggleTheme = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
@@ -51,101 +92,232 @@ export default function Header() {
     router.refresh();
   };
 
+  const iconBtn =
+    "w-10 h-10 flex items-center justify-center rounded-full transition-colors";
+  const iconBtnStyle = {
+    border: "1px solid var(--line)",
+    background: "var(--panel)",
+    color: "var(--ink-2)",
+  } as const;
+
   return (
-    <header className="sticky top-0 z-50 border-b" style={{ borderColor: "var(--border)", background: "var(--bg)" }}>
-      <div className="max-w-5xl mx-auto px-4 h-14 flex items-center justify-between">
-        <Link href="/" className="font-bold text-lg" style={{ color: "var(--primary)" }}>
-          姜十三论坛
+    <header
+      className="sticky top-0 z-50 border-b"
+      style={{
+        borderColor: "var(--line)",
+        background: "color-mix(in srgb, var(--bg) 82%, transparent)",
+        backdropFilter: "blur(14px)",
+        WebkitBackdropFilter: "blur(14px)",
+      }}
+    >
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[68px] flex items-center justify-between gap-4">
+        {/* 品牌 */}
+        <Link href="/" className="flex items-center gap-2.5 shrink-0 group">
+          <span
+            className="w-9 h-9 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:rotate-[-6deg]"
+            style={{ background: "var(--accent)", color: "var(--accent-on)" }}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+            </svg>
+          </span>
+          <span className="leading-none">
+            <span className="block font-extrabold text-[17px] tracking-tight" style={{ color: "var(--ink)" }}>
+              姜十三
+            </span>
+            <span className="block text-[10.5px] font-semibold mt-0.5" style={{ color: "var(--ink-3)" }}>
+              J13 社区
+            </span>
+          </span>
         </Link>
 
-        {/* 桌面端导航 */}
-        <nav className="hidden md:flex items-center gap-4">
-          <form onSubmit={handleSearch} className="relative">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-secondary)" }} />
+        {/* 桌面端 */}
+        <nav className="hidden lg:flex items-center gap-1">
+          <NavPill href="/" active={pathname === "/"} icon={<Home size={14} />}>
+            首页
+          </NavPill>
+          <NavPill href="/board/1" active={pathname.startsWith("/board")}>
+            板块
+          </NavPill>
+          <form onSubmit={handleSearch} className="relative ml-2">
+            <Search
+              size={15}
+              className="absolute left-4 top-1/2 -translate-y-1/2"
+              style={{ color: "var(--ink-3)" }}
+            />
             <input
+              ref={searchInputRef}
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={onSearchKeyDown}
               placeholder="搜索帖子..."
-              className="pl-9 pr-3 py-1.5 rounded-lg text-sm w-44 focus:outline-none focus:w-56 transition-all"
-              style={{ background: "var(--bg-secondary)", color: "var(--text)", border: "1px solid var(--border)" }}
+              aria-label="搜索帖子"
+              className="w-48 focus:w-64 transition-[width] duration-200 pl-10 pr-10 py-2.5 text-sm rounded-full"
+              style={{
+                background: "var(--panel)",
+                color: "var(--ink)",
+                border: "1px solid var(--line)",
+              }}
             />
+            <kbd
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-[11px] w-5 h-5 flex items-center justify-center rounded-md pointer-events-none"
+              style={{ color: "var(--ink-3)", border: "1px solid var(--line-2)", background: "var(--bg)" }}
+            >
+              /
+            </kbd>
           </form>
-          <Link href="/" className="hover:opacity-80" style={{ color: "var(--text)" }}>首页</Link>
-          {user && (
-            <Link href="/compose" className="flex items-center gap-1 hover:opacity-80" style={{ color: "var(--text)" }}>
-              <PenSquare size={16} /> 发帖
-            </Link>
-          )}
-          <button onClick={toggleTheme} className="p-2 rounded-lg hover:opacity-80" style={{ color: "var(--text)" }}>
-            {theme === "dark" ? <Sun size={18} /> : <Moon size={18} />}
+        </nav>
+
+        <div className="hidden lg:flex items-center gap-2">
+          <button onClick={toggleTheme} className={iconBtn} style={iconBtnStyle} aria-label="切换主题">
+            {theme === "dark" ? <Sun size={17} /> : <Moon size={17} />}
           </button>
           {user && <NotificationBell />}
           {user ? (
-            <div className="flex items-center gap-3">
-              <span className="text-sm" style={{ color: "var(--text-secondary)" }}>{user.nickname}</span>
-              <Link href="/settings" className="flex items-center gap-1 text-sm hover:opacity-80" style={{ color: "var(--text-secondary)" }}>
-                <Settings size={14} /> 设置
+            <>
+              <Link href="/compose" className="btn btn-primary btn-sm ml-1">
+                <PenSquare size={14} /> 发帖
               </Link>
-              <button onClick={handleLogout} className="flex items-center gap-1 text-sm hover:opacity-80" style={{ color: "var(--text-secondary)" }}>
-                <LogOut size={14} /> 退出
+              <Link
+                href={`/u/${user.id}`}
+                className="flex items-center gap-2 rounded-full pl-1 pr-3 py-1 transition-colors"
+                style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
+              >
+                <Avatar name={user.nickname || user.username} size={28} />
+                <span className="text-[13px] font-semibold max-w-[90px] truncate" style={{ color: "var(--ink)" }}>
+                  {user.nickname}
+                </span>
+              </Link>
+              <button onClick={() => router.push("/settings")} className={iconBtn} style={iconBtnStyle} aria-label="设置">
+                <Settings size={16} />
               </button>
-            </div>
+              <button onClick={handleLogout} className={iconBtn} style={iconBtnStyle} aria-label="退出登录">
+                <LogOut size={16} />
+              </button>
+            </>
           ) : (
-            <div className="flex items-center gap-2">
-              <Link href="/login" className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm" style={{ background: "var(--bg-secondary)", color: "var(--text)" }}>
+            <>
+              <Link href="/login" className="btn btn-line btn-sm">
                 <LogIn size={14} /> 登录
               </Link>
-              <Link href="/register" className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm text-white" style={{ background: "var(--primary)" }}>
+              <Link href="/register" className="btn btn-primary btn-sm">
                 <UserPlus size={14} /> 注册
               </Link>
-            </div>
+            </>
           )}
-        </nav>
+        </div>
 
-        {/* 移动端菜单按钮 */}
-        <button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden p-2" style={{ color: "var(--text)" }}>
-          {menuOpen ? <X size={20} /> : <Menu size={20} />}
-        </button>
+        {/* 移动端按钮 */}
+        <div className="flex items-center gap-2 lg:hidden">
+          {user && <NotificationBell />}
+          <button
+            onClick={() => setMenuOpen(!menuOpen)}
+            className="w-10 h-10 flex items-center justify-center rounded-full"
+            style={{ border: "1px solid var(--line)", background: "var(--panel)", color: "var(--ink)" }}
+            aria-label="菜单"
+            aria-expanded={menuOpen}
+          >
+            {menuOpen ? <X size={19} /> : <Menu size={19} />}
+          </button>
+        </div>
       </div>
 
-      {/* 移动端下拉菜单 */}
+      {/* 移动端抽屉 */}
       {menuOpen && (
-        <div className="md:hidden border-t px-4 py-3 space-y-2" style={{ borderColor: "var(--border)", background: "var(--bg)" }}>
-          <form onSubmit={(e) => { handleSearch(e); setMenuOpen(false); }} className="relative">
-            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: "var(--text-secondary)" }} />
+        <div
+          className="lg:hidden border-t px-4 py-4"
+          style={{ borderColor: "var(--line)", background: "var(--bg)" }}
+        >
+          <form onSubmit={handleSearch} className="relative mb-3">
+            <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2" style={{ color: "var(--ink-3)" }} />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="搜索帖子..."
-              className="w-full pl-9 pr-3 py-2 rounded-lg text-sm"
-              style={{ background: "var(--bg-secondary)", color: "var(--text)", border: "1px solid var(--border)" }}
+              onKeyDown={onSearchKeyDown}
+              aria-label="搜索帖子"
+              placeholder="搜索帖子...（Esc 清除）"
+              className="w-full pl-10 pr-4 py-3 rounded-full text-sm"
+              style={{ background: "var(--panel)", color: "var(--ink)", border: "1px solid var(--line-2)" }}
             />
           </form>
-          <Link href="/" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>首页</Link>
-          {user && (
-            <Link href="/compose" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>发帖</Link>
-          )}
-          <button onClick={toggleTheme} className="block py-2 w-full text-left" style={{ color: "var(--text)" }}>
-            {theme === "dark" ? "切换亮色主题" : "切换暗色主题"}
-          </button>
-          {user ? (
-            <Link href="/notifications" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>通知中心</Link>
-          ) : null}
-          {user ? (
-            <>
-              <Link href="/settings" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>账号设置</Link>
-              <button onClick={handleLogout} className="block py-2 w-full text-left" style={{ color: "var(--text)" }}>退出登录</button>
-            </>
-          ) : (
-            <>
-              <Link href="/login" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>登录</Link>
-              <Link href="/register" onClick={() => setMenuOpen(false)} className="block py-2" style={{ color: "var(--text)" }}>注册</Link>
-            </>
-          )}
+          <div className="flex flex-col">
+            <MobileLink href="/" active={pathname === "/"}>首页</MobileLink>
+            <MobileLink href="/board/1" active={pathname.startsWith("/board")}>板块</MobileLink>
+            {user && <MobileLink href="/compose">发帖</MobileLink>}
+            {user && (
+              <MobileLink href="/notifications">
+                <span className="inline-flex items-center gap-2"><Bell size={15} /> 通知中心</span>
+              </MobileLink>
+            )}
+            {user && <MobileLink href="/settings">账号设置</MobileLink>}
+            {!user && <MobileLink href="/login">登录</MobileLink>}
+            {!user && <MobileLink href="/register">注册</MobileLink>}
+          </div>
+          <div className="pt-3 mt-2 border-t flex items-center justify-between" style={{ borderColor: "var(--line)" }}>
+            <button onClick={toggleTheme} className="btn btn-line btn-sm">
+              {theme === "dark" ? <Sun size={14} /> : <Moon size={14} />}
+              {theme === "dark" ? "浅色模式" : "深色模式"}
+            </button>
+            {user && (
+              <button onClick={handleLogout} className="btn btn-danger btn-sm">
+                <LogOut size={14} /> 退出
+              </button>
+            )}
+          </div>
         </div>
       )}
     </header>
   );
 }
+
+function NavPill({
+  href,
+  active,
+  icon,
+  children,
+}: {
+  href: string;
+  active?: boolean;
+  icon?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-[13.5px] font-semibold transition-colors"
+      style={
+        active
+          ? { background: "var(--accent-soft)", color: "var(--accent)" }
+          : { color: "var(--ink-2)" }
+      }
+    >
+      {icon}
+      {children}
+    </Link>
+  );
+}
+
+function MobileLink({
+  href,
+  active,
+  children,
+}: {
+  href: string;
+  active?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className="px-3 py-3 rounded-2xl text-[15px] font-semibold transition-colors"
+      style={{
+        color: active ? "var(--accent)" : "var(--ink)",
+        background: active ? "var(--accent-soft)" : "transparent",
+      }}
+    >
+      {children}
+    </Link>
+  );
+}
diff --git a/frontend/components/Icons.tsx b/frontend/components/Icons.tsx
new file mode 100644
index 0000000..ba5acba
--- /dev/null
+++ b/frontend/components/Icons.tsx
@@ -0,0 +1,84 @@
+// 统一的细线统计图标（避免 emoji 渲染不一致）
+interface IconProps {
+  size?: number;
+  filled?: boolean;
+  className?: string;
+}
+
+export function IconComment({ size = 14, className }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+    </svg>
+  );
+}
+
+export function IconEye({ size = 14, className }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function IconHeart({ size = 14, filled, className }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={filled ? "currentColor" : "none"}
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+    </svg>
+  );
+}
+
+export function StatItem({
+  icon,
+  value,
+  accent,
+}: {
+  icon: React.ReactNode;
+  value: number | string;
+  accent?: boolean;
+}) {
+  return (
+    <span
+      className="inline-flex items-center gap-1.5 meta"
+      style={accent ? { color: "var(--accent)" } : undefined}
+    >
+      {icon}
+      {value}
+    </span>
+  );
+}
diff --git a/frontend/components/LikeButton.tsx b/frontend/components/LikeButton.tsx
index 125fe85..fdfe37d 100644
--- a/frontend/components/LikeButton.tsx
+++ b/frontend/components/LikeButton.tsx
@@ -1,8 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { Heart } from "lucide-react";
+import { useRouter, usePathname } from "next/navigation";
+import { IconHeart } from "./Icons";
 import { apiToggleLike } from "@/lib/api";
+import { toast } from "@/lib/toast";
 
 interface LikeButtonProps {
   postId: string;
@@ -11,7 +13,14 @@ interface LikeButtonProps {
   variant?: "default" | "compact";
 }
 
-export default function LikeButton({ postId, liked: initialLiked, likeCount: initialCount, variant = "default" }: LikeButtonProps) {
+export default function LikeButton({
+  postId,
+  liked: initialLiked,
+  likeCount: initialCount,
+  variant = "default",
+}: LikeButtonProps) {
+  const router = useRouter();
+  const pathname = usePathname();
   const [liked, setLiked] = useState(initialLiked);
   const [count, setCount] = useState(initialCount);
   const [loading, setLoading] = useState(false);
@@ -19,36 +28,52 @@ export default function LikeButton({ postId, liked: initialLiked, likeCount: ini
   const handleClick = async () => {
     if (loading) return;
     setLoading(true);
+    // 乐观更新：先给反馈，失败再回滚
+    const wasLiked = liked;
+    setLiked(!wasLiked);
+    setCount((c) => c + (wasLiked ? -1 : 1));
     try {
       const res = await apiToggleLike(postId);
       if (res.error === "未登录") {
-        window.location.href = "/login";
+        router.push(`/login?redirect=${encodeURIComponent(pathname)}`);
         return;
       }
       if (typeof res.liked === "boolean") {
         setLiked(res.liked);
         setCount(res.like_count ?? count);
+      } else {
+        throw new Error(res.error || "FAIL");
       }
+    } catch {
+      setLiked(wasLiked);
+      setCount((c) => c + (wasLiked ? 1 : -1));
+      toast("操作失败，请稍后重试");
     } finally {
       setLoading(false);
     }
   };
 
-  const sizing = variant === "compact" ? "px-2 py-1 gap-1" : "px-3 py-1.5 gap-1.5";
-  const iconSize = variant === "compact" ? 14 : 16;
+  const compact =
+    variant === "compact"
+      ? "px-2.5 py-1.5 gap-1 text-[12.5px]"
+      : "px-4 py-2 gap-1.5 text-sm";
 
   return (
     <button
       onClick={handleClick}
       disabled={loading}
       title={liked ? "取消点赞" : "点赞"}
-      className={`flex items-center ${sizing} rounded-full text-sm font-medium transition-all disabled:opacity-50 ${
-        liked
-          ? "text-red-500 bg-red-50 dark:bg-red-900/20"
-          : "text-gray-500 hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
-      }`}
+      aria-pressed={liked}
+      className={`inline-flex items-center font-semibold tabular-nums rounded-full border transition-colors duration-150 hover:border-[var(--accent)] disabled:opacity-50 ${compact}`}
+      style={{
+        borderColor: liked ? "var(--accent)" : "var(--line-2)",
+        color: liked ? "var(--accent)" : "var(--ink-2)",
+        background: liked ? "var(--accent-soft)" : "var(--panel)",
+      }}
     >
-      <Heart size={iconSize} fill={liked ? "currentColor" : "none"} />
+      <span key={String(liked)} className={liked ? "j13-heart-pop inline-flex" : "inline-flex"}>
+        <IconHeart size={variant === "compact" ? 13 : 15} filled={liked} />
+      </span>
       <span>{count}</span>
     </button>
   );
diff --git a/frontend/components/NotificationBell.tsx b/frontend/components/NotificationBell.tsx
index ecfc01c..c47e6dc 100644
--- a/frontend/components/NotificationBell.tsx
+++ b/frontend/components/NotificationBell.tsx
@@ -100,15 +100,23 @@ export default function NotificationBell() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={handleToggle}
-        className="relative p-2 rounded-lg hover:opacity-80"
-        style={{ color: "var(--text)" }}
         aria-label="通知"
+        className="relative w-10 h-10 flex items-center justify-center rounded-full transition-colors"
+        style={{
+          color: open ? "var(--accent)" : "var(--ink-2)",
+          border: "1px solid " + (open ? "var(--accent)" : "var(--line)"),
+          background: open ? "var(--accent-soft)" : "var(--panel)",
+        }}
       >
-        <Bell size={18} />
+        <Bell size={17} />
         {unread > 0 && (
           <span
-            className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-xs text-white flex items-center justify-center font-bold"
-            style={{ background: "var(--primary)" }}
+            className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[10px] font-bold flex items-center justify-center rounded-full"
+            style={{
+              background: "var(--clay)",
+              color: "#fff",
+              border: "2px solid var(--bg)",
+            }}
           >
             {unread > 99 ? "99+" : unread}
           </span>
@@ -117,77 +125,94 @@ export default function NotificationBell() {
 
       {open && (
         <div
-          className="absolute right-0 mt-2 w-80 rounded-xl border shadow-xl overflow-hidden z-50"
-          style={{ borderColor: "var(--border)", background: "var(--bg)" }}
+          className="absolute right-0 mt-2.5 w-[340px] max-w-[calc(100vw-2rem)] overflow-hidden z-50 j13-toast-in"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            borderRadius: "var(--r)",
+            boxShadow: "var(--shadow-lg)",
+          }}
         >
           <div
-            className="flex items-center justify-between px-4 py-3 border-b"
-            style={{ borderColor: "var(--border)" }}
+            className="flex items-center justify-between px-5 py-3.5"
+            style={{ borderBottom: "1px solid var(--line)" }}
           >
-            <span className="font-semibold" style={{ color: "var(--text)" }}>通知</span>
+            <span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>通知</span>
             {unread > 0 && (
               <button
                 onClick={handleMarkAllRead}
-                className="flex items-center gap-1 text-xs hover:opacity-80"
-                style={{ color: "var(--primary)" }}
+                className="flex items-center gap-1 text-xs meta hover:text-[var(--accent)] transition-colors"
               >
-                <CheckCheck size={14} /> 全部已读
+                <CheckCheck size={13} /> 全部已读
               </button>
             )}
           </div>
 
-          <div className="max-h-96 overflow-y-auto">
+          <div className="max-h-[24rem] overflow-y-auto">
             {loading ? (
-              <p className="text-center py-8 text-sm" style={{ color: "var(--text-secondary)" }}>加载中...</p>
+              <p className="text-center py-10 meta">加载中...</p>
             ) : notifications.length === 0 ? (
-              <p className="text-center py-8 text-sm" style={{ color: "var(--text-secondary)" }}>暂无通知</p>
+              <div className="text-center py-12">
+                <Bell size={26} className="mx-auto mb-2.5" style={{ color: "var(--ink-3)" }} />
+                <p className="meta">还没有通知</p>
+              </div>
             ) : (
               notifications.map((n) => (
                 <button
                   key={n.id}
                   onClick={() => handleClickNotification(n)}
-                  className="w-full text-left px-4 py-3 border-b hover:opacity-90 transition-opacity"
+                  className="w-full text-left px-4 py-3.5 flex items-start gap-3 transition-colors"
                   style={{
-                    borderColor: "var(--border)",
-                    background: n.is_read ? "transparent" : "var(--bg-secondary)",
+                    borderBottom: "1px solid var(--line)",
+                    background: n.is_read ? "transparent" : "var(--panel-2)",
                   }}
                 >
-                  <div className="flex items-start gap-2">
-                    <span style={{ color: n.type === "like" ? "#ef4444" : "var(--primary)" }}>
-                      {n.type === "like" ? <Heart size={16} /> : <MessageCircle size={16} />}
-                    </span>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm" style={{ color: "var(--text)" }}>
-                        <span className="font-medium">{n.actor.nickname}</span>{" "}
-                        <span style={{ color: "var(--text-secondary)" }}>{actionText(n)}</span>
+                  <span
+                    className="w-9 h-9 shrink-0 rounded-full flex items-center justify-center"
+                    style={{
+                      color: n.type === "like" ? "var(--clay)" : "var(--accent)",
+                      background:
+                        n.type === "like" ? "var(--clay-soft)" : "var(--accent-soft)",
+                    }}
+                  >
+                    {n.type === "like" ? <Heart size={15} /> : <MessageCircle size={15} />}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm leading-snug" style={{ color: "var(--ink)" }}>
+                      <span className="font-medium">{n.actor.nickname}</span>{" "}
+                      <span className="meta">{actionText(n)}</span>
+                    </p>
+                    <p className="text-xs mt-1 truncate" style={{ color: "var(--ink-2)" }}>
+                      《{n.post.title}》
+                    </p>
+                    {n.content && (
+                      <p className="text-xs mt-1 line-clamp-1" style={{ color: "var(--ink-3)" }}>
+                        {n.content}
                       </p>
-                      <p className="text-xs mt-0.5 truncate" style={{ color: "var(--text-secondary)" }}>
-                        《{n.post.title}》
-                      </p>
-                      {n.content && (
-                        <p className="text-xs mt-1 line-clamp-1" style={{ color: "var(--text-secondary)" }}>
-                          {n.content}
-                        </p>
-                      )}
-                      <p className="text-xs mt-1" style={{ color: "var(--text-secondary)" }}>
-                        {formatTime(n.created_at)}
-                      </p>
-                    </div>
-                    {!n.is_read && (
-                      <span
-                        className="w-2 h-2 rounded-full shrink-0 mt-1.5"
-                        style={{ background: "var(--primary)" }}
-                      />
                     )}
+                    <p className="meta mt-1.5 text-xs">{formatTime(n.created_at)}</p>
                   </div>
+                  {!n.is_read && (
+                    <span
+                      className="w-2.5 h-2.5 shrink-0 mt-2 rounded-full"
+                      style={{ background: "var(--clay)" }}
+                    />
+                  )}
                 </button>
               ))
             )}
           </div>
 
-          <div className="px-4 py-2 border-t text-center" style={{ borderColor: "var(--border)" }}>
-            <Link href="/notifications" className="text-sm hover:underline" style={{ color: "var(--primary)" }}>
-              查看全部通知
+          <div
+            className="px-4 py-2.5 text-center"
+            style={{ borderTop: "1px solid var(--line)" }}
+          >
+            <Link
+              href="/notifications"
+              onClick={() => setOpen(false)}
+              className="meta text-xs hover:text-[var(--accent)] transition-colors"
+            >
+              查看全部通知 →
             </Link>
           </div>
         </div>
diff --git a/frontend/components/Pagination.tsx b/frontend/components/Pagination.tsx
index af87b47..a57f9f4 100644
--- a/frontend/components/Pagination.tsx
+++ b/frontend/components/Pagination.tsx
@@ -7,9 +7,9 @@ interface PaginationProps {
   total: number;
   page: number;
   size: number;
-  basePath: string; // e.g. "/" or "/board/1"
-  query?: Record<string, string>; // additional query params (e.g. q for search)
-  onChange?: (page: number) => void; // 客户端分页回调；提供时不渲染 Link 而是按钮
+  basePath: string;
+  query?: Record<string, string>;
+  onChange?: (page: number) => void;
 }
 
 export default function Pagination({ total, page, size, basePath, query = {}, onChange }: PaginationProps) {
@@ -29,7 +29,6 @@ export default function Pagination({ total, page, size, basePath, query = {}, on
     }
   };
 
-  // 生成页码按钮（最多显示 7 个，带省略号）
   const pages: (number | "...")[] = [];
   const add = (p: number | "...") => pages.push(p);
 
@@ -45,35 +44,33 @@ export default function Pagination({ total, page, size, basePath, query = {}, on
     add(totalPages);
   }
 
+  const cls =
+    "pager-btn min-w-[38px] h-9 px-1 flex items-center justify-center font-semibold text-[13px] rounded-full border transition-colors duration-150";
+
   return (
-    <nav className="flex items-center justify-center gap-1 mt-8">
+    <nav className="flex items-center justify-center gap-1.5 mt-10 flex-wrap" aria-label="分页">
       {page > 1 && (
         <Link
           href={buildHref(page - 1)}
           onClick={(e) => handleClick(page - 1, e)}
-          className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm hover:opacity-80"
-          style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
+          className={`${cls} px-3 gap-1`}
         >
-          <ChevronLeft size={16} /> 上一页
+          <ChevronLeft size={14} /> 上一页
         </Link>
       )}
 
       {pages.map((p, i) =>
         p === "..." ? (
-          <span key={`e${i}`} className="px-2" style={{ color: "var(--text-secondary)" }}>…</span>
+          <span key={`e${i}`} className="px-1 meta">
+            —
+          </span>
         ) : (
           <Link
             key={p}
             href={buildHref(p)}
             onClick={(e) => handleClick(p, e)}
-            className={`min-w-[36px] h-9 flex items-center justify-center rounded-lg text-sm ${
-              p === page ? "text-white" : "hover:opacity-80"
-            }`}
-            style={
-              p === page
-                ? { background: "var(--primary)" }
-                : { background: "var(--bg-secondary)", color: "var(--text)" }
-            }
+            aria-current={p === page ? "page" : undefined}
+            className={`${cls} ${p === page ? "is-current" : ""}`}
           >
             {p}
           </Link>
@@ -84,10 +81,9 @@ export default function Pagination({ total, page, size, basePath, query = {}, on
         <Link
           href={buildHref(page + 1)}
           onClick={(e) => handleClick(page + 1, e)}
-          className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-sm hover:opacity-80"
-          style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
+          className={`${cls} px-3 gap-1`}
         >
-          下一页 <ChevronRight size={16} />
+          下一页 <ChevronRight size={14} />
         </Link>
       )}
     </nav>
diff --git a/frontend/components/PinnedPosts.tsx b/frontend/components/PinnedPosts.tsx
new file mode 100644
index 0000000..a620730
--- /dev/null
+++ b/frontend/components/PinnedPosts.tsx
@@ -0,0 +1,91 @@
+import Link from "next/link";
+import { Pin } from "lucide-react";
+import type { PostListItem } from "@/lib/api";
+import Avatar from "./Avatar";
+import { IconComment, IconEye } from "./Icons";
+
+function formatTime(dateStr: string) {
+  const d = new Date(dateStr);
+  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
+    d.getDate()
+  ).padStart(2, "0")}`;
+}
+
+/**
+ * 管理员置顶区：独立于"今日精选"和普通列表。
+ * 陶土色语义（与 badge-pin 一致），紧凑排列，一眼识别为公告性质内容。
+ */
+export default function PinnedPosts({
+  posts,
+  showBoard = true,
+}: {
+  posts: PostListItem[];
+  showBoard?: boolean;
+}) {
+  if (posts.length === 0) return null;
+
+  return (
+    <section className="mb-6" aria-label="置顶讨论">
+      <div className="flex items-center gap-2 mb-2.5 px-1">
+        <span
+          className="w-6 h-6 rounded-full flex items-center justify-center"
+          style={{ background: "var(--clay-soft)", color: "var(--clay)" }}
+        >
+          <Pin size={12} fill="currentColor" strokeWidth={2.4} />
+        </span>
+        <h2 className="text-[13.5px] font-extrabold tracking-wide" style={{ color: "var(--clay)" }}>
+          置顶讨论
+        </h2>
+        <span className="meta text-xs">管理员置顶 · {posts.length}</span>
+      </div>
+
+      <div className="panel overflow-hidden">
+        {posts.map((p, i) => (
+          <Link
+            key={p.id}
+            href={`/post/${p.id}`}
+            className="group flex items-center gap-3 sm:gap-3.5 px-4 sm:px-5 py-3.5 transition-colors hover:bg-[var(--panel-2)]"
+            style={i > 0 ? { borderTop: "1px solid var(--line)" } : undefined}
+          >
+            <Avatar name={p.user.nickname || p.user.username} size={36} />
+            <div className="flex-1 min-w-0">
+              <h3
+                className="text-[14.5px] font-bold leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
+                style={{ color: "var(--ink)" }}
+              >
+                {p.title}
+              </h3>
+              <div className="meta flex items-center gap-2 mt-1 text-xs min-w-0">
+                <span className="truncate">{p.user.nickname}</span>
+                <span aria-hidden>·</span>
+                <span className="shrink-0">{formatTime(p.created_at)}</span>
+                {showBoard && (
+                  <>
+                    <span aria-hidden>·</span>
+                    <span className="truncate">{p.board.name}</span>
+                  </>
+                )}
+                {p.recommended && <span className="badge-rec !text-[10.5px] !px-1.5 !py-0 shrink-0">推荐</span>}
+              </div>
+            </div>
+            <div className="hidden sm:flex items-center gap-3 shrink-0 meta text-[12.5px]">
+              <span className="inline-flex items-center gap-1.5" aria-label={`${p.comment_count} 条评论`}>
+                <IconComment size={14} /> {p.comment_count}
+              </span>
+              <span className="inline-flex items-center gap-1.5" aria-label={`${p.view_count} 次浏览`}>
+                <IconEye size={14} /> {p.view_count}
+              </span>
+            </div>
+            <Pin
+              size={13}
+              className="shrink-0 hidden sm:block"
+              style={{ color: "var(--clay)" }}
+              fill="currentColor"
+              strokeWidth={2.2}
+            />
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/PostActions.tsx b/frontend/components/PostActions.tsx
index d3dec41..f64b072 100644
--- a/frontend/components/PostActions.tsx
+++ b/frontend/components/PostActions.tsx
@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { Pencil, Trash2, Pin, Star } from "lucide-react";
 import { apiMe, apiDeletePost, apiTogglePin, apiToggleRecommend, type User } from "@/lib/api";
+import { toast } from "@/lib/toast";
 
 interface PostActionsProps {
   postId: string;
@@ -19,7 +20,7 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
   const [deleting, setDeleting] = useState(false);
   const [isPinned, setIsPinned] = useState(pinned > 0);
   const [isRecommended, setIsRecommended] = useState(recommended);
-  const [acting, setActing] = useState("");
+  const [acting, setActing] = useState(false);
 
   useEffect(() => {
     apiMe()
@@ -27,7 +28,6 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
       .catch(() => setUser(null));
   }, []);
 
-  // 仅作者本人或管理员可编辑/删除；置顶/推荐仅管理员
   const canManage = user && (user.id === authorId || user.role === "admin");
   const isAdmin = user?.role === "admin";
   if (!canManage) return null;
@@ -39,78 +39,76 @@ export default function PostActions({ postId, authorId, pinned, recommended }: P
       const res = await apiDeletePost(postId);
       if (res.message) {
         router.push("/");
+        toast("帖子已删除", "ok");
       } else {
-        alert(res.error || "删除失败");
+        toast(res.error || "删除失败");
       }
+    } catch {
+      toast("网络错误，删除失败");
     } finally {
       setDeleting(false);
     }
   };
 
   const handlePin = async () => {
-    setActing("pin");
+    setActing(true);
     try {
       const res = await apiTogglePin(postId);
       setIsPinned(res.pinned > 0);
+      toast(res.pinned > 0 ? "已置顶" : "已取消置顶", "ok");
       router.refresh();
+    } catch {
+      toast("操作失败，请稍后重试");
     } finally {
-      setActing("");
+      setActing(false);
     }
   };
 
   const handleRecommend = async () => {
-    setActing("recommend");
+    setActing(true);
     try {
       const res = await apiToggleRecommend(postId);
       setIsRecommended(res.recommended);
+      toast(res.recommended ? "已设为推荐" : "已取消推荐", "ok");
       router.refresh();
+    } catch {
+      toast("操作失败，请稍后重试");
     } finally {
-      setActing("");
+      setActing(false);
     }
   };
 
   return (
-    <div className="flex items-center gap-2 flex-wrap justify-end">
+    <div className="flex items-center gap-1.5 flex-wrap">
       {isAdmin && (
         <>
           <button
             onClick={handlePin}
-            disabled={acting !== ""}
-            className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg hover:opacity-80 disabled:opacity-50"
-            style={{
-              background: isPinned ? "var(--primary)" : "var(--bg-secondary)",
-              color: isPinned ? "white" : "var(--text)",
-            }}
+            disabled={acting}
+            className="btn btn-line btn-sm"
+            style={isPinned ? { borderColor: "var(--accent)", color: "var(--accent)" } : undefined}
           >
-            <Pin size={14} /> {isPinned ? "取消置顶" : "置顶"}
+            <Pin size={13} /> {isPinned ? "取消置顶" : "置顶"}
           </button>
           <button
             onClick={handleRecommend}
-            disabled={acting !== ""}
-            className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg hover:opacity-80 disabled:opacity-50"
-            style={{
-              background: isRecommended ? "#e11d48" : "var(--bg-secondary)",
-              color: isRecommended ? "white" : "var(--text)",
-            }}
+            disabled={acting}
+            className="btn btn-line btn-sm"
+            style={
+              isRecommended
+                ? { borderColor: "var(--gold)", color: "var(--gold)", background: "var(--gold-soft)" }
+                : undefined
+            }
           >
-            <Star size={14} /> {isRecommended ? "取消推荐" : "推荐"}
+            <Star size={13} /> {isRecommended ? "取消推荐" : "推荐"}
           </button>
         </>
       )}
-      <Link
-        href={`/post/${postId}/edit`}
-        className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg hover:opacity-80"
-        style={{ background: "var(--bg-secondary)", color: "var(--text)" }}
-      >
-        <Pencil size={14} /> 编辑
+      <Link href={`/post/${postId}/edit`} className="btn btn-line btn-sm">
+        <Pencil size={13} /> 编辑
       </Link>
-      <button
-        onClick={handleDelete}
-        disabled={deleting}
-        className="flex items-center gap-1 text-sm px-3 py-1.5 rounded-lg text-red-600 hover:bg-red-50 disabled:opacity-50"
-        style={{ background: "var(--bg-secondary)" }}
-      >
-        <Trash2 size={14} /> {deleting ? "删除中..." : "删除"}
+      <button onClick={handleDelete} disabled={deleting} className="btn btn-danger btn-sm">
+        <Trash2 size={13} /> {deleting ? "删除中..." : "删除"}
       </button>
     </div>
   );
diff --git a/frontend/components/PostRow.tsx b/frontend/components/PostRow.tsx
new file mode 100644
index 0000000..6f0d52c
--- /dev/null
+++ b/frontend/components/PostRow.tsx
@@ -0,0 +1,91 @@
+import Link from "next/link";
+import type { PostListItem } from "@/lib/api";
+import LikeButton from "./LikeButton";
+import Avatar from "./Avatar";
+import { IconComment, IconEye } from "./Icons";
+
+function formatTime(dateStr: string) {
+  const d = new Date(dateStr);
+  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, "0")}.${String(
+    d.getDate()
+  ).padStart(2, "0")}`;
+}
+
+/**
+ * 帖子列表行：头像 + 标题 + 作者元信息 + 统计 + 点赞
+ * 用于首页/板块页，以细线串联，悬浮浅色反馈
+ */
+export default function PostRow({
+  post,
+  boardHref,
+}: {
+  post: PostListItem;
+  index?: number;
+  boardHref?: boolean;
+}) {
+  return (
+    <div
+      className="group flex items-center gap-3 sm:gap-4 px-4 sm:px-5 py-4 border-t transition-colors hover:bg-[var(--panel-2)]"
+      style={{ borderColor: "var(--line)" }}
+    >
+      <Link href={`/u/${post.user.id}`} className="shrink-0" aria-label={post.user.nickname}>
+        <Avatar name={post.user.nickname || post.user.username} size={42} />
+      </Link>
+
+      <div className="flex-1 min-w-0">
+        {(post.pinned > 0 || post.recommended) && (
+          <div className="flex items-center gap-1.5 mb-1.5 flex-wrap">
+            {post.pinned > 0 && <span className="badge-pin">置顶</span>}
+            {post.recommended && <span className="badge-rec">推荐</span>}
+          </div>
+        )}
+        <Link href={`/post/${post.id}`}>
+          <h3
+            className="font-semibold text-[15px] sm:text-[16px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
+            style={{ color: "var(--ink)" }}
+          >
+            {post.title}
+          </h3>
+        </Link>
+        <div className="meta flex items-center gap-2.5 mt-1.5 flex-wrap">
+          <Link
+            href={`/u/${post.user.id}`}
+            className="hover:text-[var(--accent)] transition-colors"
+          >
+            {post.user.nickname}
+          </Link>
+          {boardHref && (
+            <>
+              <span aria-hidden>·</span>
+              <Link
+                href={`/board/${post.board.id}`}
+                className="hover:text-[var(--accent)] transition-colors"
+              >
+                {post.board.name}
+              </Link>
+            </>
+          )}
+          <span aria-hidden>·</span>
+          <span>{formatTime(post.created_at)}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2.5 sm:gap-3.5 shrink-0">
+        <span className="hidden sm:inline-flex items-center gap-1.5 meta" aria-label={`${post.comment_count} 条评论`}>
+          <IconComment size={15} />
+          {post.comment_count}
+        </span>
+        <span className="hidden md:inline-flex items-center gap-1.5 meta" aria-label={`${post.view_count} 次浏览`}>
+          <IconEye size={15} />
+          {post.view_count}
+        </span>
+        <LikeButton
+          postId={String(post.id)}
+          liked={post.liked}
+          likeCount={post.like_count}
+          variant="compact"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/ReadingProgress.tsx b/frontend/components/ReadingProgress.tsx
new file mode 100644
index 0000000..ec29dc3
--- /dev/null
+++ b/frontend/components/ReadingProgress.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ReadingProgress() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let raf = 0;
+    const update = () => {
+      raf = 0;
+      const doc = document.documentElement;
+      const max = doc.scrollHeight - doc.clientHeight;
+      setProgress(max > 0 ? Math.min(1, doc.scrollTop / max) : 0);
+    };
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  if (progress <= 0) return null;
+  return (
+    <div
+      className="reading-progress"
+      style={{ transform: `scaleX(${progress})`, opacity: progress >= 1 ? 0 : 1 }}
+      aria-hidden="true"
+    />
+  );
+}
diff --git a/frontend/components/Toaster.tsx b/frontend/components/Toaster.tsx
new file mode 100644
index 0000000..ad3a671
--- /dev/null
+++ b/frontend/components/Toaster.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X, AlertCircle, CheckCircle2 } from "lucide-react";
+import type { ToastDetail } from "@/lib/toast";
+
+export default function Toaster() {
+  const [items, setItems] = useState<ToastDetail[]>([]);
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent<ToastDetail>).detail;
+      setItems((list) => [...list.slice(-2), detail]);
+      window.setTimeout(() => {
+        setItems((list) => list.filter((t) => t.id !== detail.id));
+      }, 3600);
+    };
+    window.addEventListener("j13-toast", handler);
+    return () => window.removeEventListener("j13-toast", handler);
+  }, []);
+
+  const dismiss = (id: number) => setItems((list) => list.filter((t) => t.id !== id));
+
+  return (
+    <div
+      className="fixed bottom-5 right-4 sm:right-6 z-[10000] flex flex-col gap-2 w-[calc(100vw-2rem)] sm:w-80"
+      aria-live="polite"
+      role="status"
+    >
+      {items.map((t) => (
+        <ToastCard key={t.id} toast={t} onClose={() => dismiss(t.id)} />
+      ))}
+    </div>
+  );
+}
+
+function ToastCard({ toast, onClose }: { toast: ToastDetail; onClose: () => void }) {
+  const color = toast.variant === "error" ? "var(--danger)" : "var(--ok)";
+  return (
+    <div
+      className="j13-toast-in flex items-start gap-3 px-4 py-3.5"
+      style={{
+        background: "var(--panel)",
+        border: "1px solid var(--line)",
+        borderLeft: `3px solid ${color}`,
+        borderRadius: "var(--r-sm)",
+        boxShadow: "var(--shadow-lg)",
+      }}
+      role="alert"
+    >
+      <span className="shrink-0 mt-0.5" style={{ color }}>
+        {toast.variant === "error" ? <AlertCircle size={16} /> : <CheckCircle2 size={16} />}
+      </span>
+      <p className="flex-1 text-[13.5px] leading-snug" style={{ color: "var(--ink)" }}>
+        {toast.message}
+      </p>
+      <button
+        onClick={onClose}
+        className="shrink-0 meta hover:text-[var(--ink)] transition-colors"
+        aria-label="关闭提示"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/lib/toast.ts b/frontend/lib/toast.ts
new file mode 100644
index 0000000..6b8267d
--- /dev/null
+++ b/frontend/lib/toast.ts
@@ -0,0 +1,17 @@
+// 零依赖的事件总线式 toast，避免在每个交互组件里包 Context
+export type ToastVariant = "error" | "ok";
+
+export interface ToastDetail {
+  id: number;
+  message: string;
+  variant: ToastVariant;
+}
+
+export function toast(message: string, variant: ToastVariant = "error") {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent<ToastDetail>("j13-toast", {
+      detail: { id: Date.now() + Math.random(), message, variant },
+    })
+  );
+}
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index a419cbe..ce4e94a 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
-import "./.next/dev/types/root-params.d.ts";
+import "./.next/types/routes.d.ts";
+import "./.next/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.