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

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

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>

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