feat: 新增大量社区功能与基础组件，优化站点整体体验

- 新增事件总线式toast通知系统
- 新增头像、阅读进度、404/500错误页等基础组件
- 重构页脚、布局、分页、点赞按钮等现有组件
- 新增用户个人页、通知中心、帖子编辑/发布/置顶/推荐管理功能
- 优化登录注册页面样式与交互
- 修复路径类型文件引用，更新站点元信息与字体配置

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

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>

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

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

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

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

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

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>

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>

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

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

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

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

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