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

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

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>