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

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

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