✨ feat: 添加评论功能，包括评论输入、评论列表和评论项组件，支持层级深度和私密评论

web/src/components/comment/comment-input.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { Textarea } from "@/components/ui/textarea"
+import Gravatar from "@/components/common/gravatar"
+
+export function CommentInput() {
+    return (
+        <div>
+            <div className="flex py-4">
+                {/* Avatar */}
+                <div>
+                    <Gravatar email="snowykami@outlook.com" className="w-10 h-10 rounded-full" />
+                </div>
+                {/* Input Area */}
+                <div className="flex-1 pl-2">
+                    <Textarea placeholder="写下你的评论..." className="w-full p-2 border border-gray-300 rounded-md" />
+                </div>
+            </div>
+            <div className="flex justify-end">
+                <button className="px-2 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
+                    提交
+                </button>
+            </div>
+        </div>
+    );
+}

web/src/components/comment/comment-item.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { Comment } from "@/models/comment";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import {useState, useEffect} from "react";
+
+export function CommentItem(comment: Comment){
+    return (
+        <div className="bg-white dark:bg-slate-800 shadow-sm rounded-lg p-4 mb-4">
+            <CardHeader>
+                <CardTitle className="text-lg font-semibold text-slate-800 dark:text-slate-100">
+                    {comment.user.nickname}
+                </CardTitle>
+            </CardHeader>
+            <p className="text-sm text-slate-600 dark:text-slate-400">{comment.content}</p>
+            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                {new Date(comment.updatedAt).toLocaleString()}
+            </div>
+        </div>
+    );
+}
+
+function ReplyItem({ reply }: { reply: Comment }) {
+    return (
+        <div className="bg-gray-50 dark:bg-slate-700 shadow-sm rounded-lg p-4 mb-2 ml-4">
+            <CardHeader>
+                <CardTitle className="text-sm font-semibold text-slate-800 dark:text-slate-100">
+                    {reply.user.nickname}
+                </CardTitle>
+            </CardHeader>
+            <p className="text-xs text-slate-600 dark:text-slate-400">{reply.content}</p>
+            <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                {new Date(reply.updatedAt).toLocaleString()}
+            </div>
+        </div>
+    );
+}

web/src/components/comment/index.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { Comment } from "@/models/comment";
+import { CommentInput } from "@/components/comment/comment-input";
+import { useEffect, useState } from "react";
+import { listComments } from "@/api/comment";
+import { OrderBy } from "@/models/common";
+
+interface CommentAreaProps {
+  targetType: 'post' | 'page';
+  targetId: number;
+}
+
+export default function CommentSection(props: CommentAreaProps) {
+  const { targetType, targetId } = props;
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [newComment, setNewComment] = useState<string>("");
+
+  useEffect(() => {
+    listComments({ page: 1, size: 10, orderBy: OrderBy.CreatedAt, desc: true }, 1)
+      .then(response => {
+        setComments(response.data);
+      })
+      .catch(err => {
+        setError("加载评论失败，请稍后再试。");
+        console.error("Error loading comments:", err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [targetType, targetId]);
+
+  return (
+    <div>
+      <h2>评论区</h2>
+      <CommentInput />
+    </div>
+  );
+}