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

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

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

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} />