✨ feat: 更新评论功能，重构评论列表接口，添加分隔符组件，优化用户头像显示

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

@@ -1,14 +1,28 @@
 "use client";
 import { Textarea } from "@/components/ui/textarea"
-import Gravatar from "@/components/common/gravatar"
+import { getGravatarByUser } from "@/components/common/gravatar"
+
+import { useState, useEffect } from "react";
+import type { User } from "@/models/user";
+import { getLoginUser } from "@/api/user";
 
 export function CommentInput() {
+    const [user, setUser] = useState<User | null>(null); // 假设 User 是你的用户模型
+    useEffect(()=>{
+        getLoginUser()
+            .then(response => {
+                setUser(response.data);
+            })
+            .catch(error => {
+                console.error("获取用户信息失败:", error);
+            });
+    }, []);
     return (
         <div>
             <div className="flex py-4">
                 {/* Avatar */}
                 <div>
-                    <Gravatar email="snowykami@outlook.com" className="w-10 h-10 rounded-full" />
+                    {user && getGravatarByUser(user)}
                 </div>
                 {/* Input Area */}
                 <div className="flex-1 pl-2">

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

@@ -2,19 +2,24 @@
 
 import type { Comment } from "@/models/comment";
 import { CardHeader, CardTitle } from "@/components/ui/card";
-import {useState, useEffect} from "react";
+import { getGravatarByUser } from "@/components/common/gravatar";
+import { useState, useEffect } from "react";
+import { get } from "http";
 
-export function CommentItem(comment: Comment){
+export function CommentItem(comment: Comment) {
+    const [replies, setReplies] = useState<Comment[]>([]);
+    const [loadingReplies, setLoadingReplies] = useState(false);
     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 className="flex">
+            <div>
+                {getGravatarByUser(comment.user)}
+            </div>
+            <div className="flex-1 pl-2">
+                <div className="font-bold">{comment.user.nickname}</div>
+                <p className="text-xs text-slate-600 dark:text-slate-400">{comment.content}</p>
+                <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                    {new Date(comment.updatedAt).toLocaleString()}
+                </div>
             </div>
         </div>
     );

web/src/components/comment/index.tsx

@@ -5,6 +5,8 @@ import { CommentInput } from "@/components/comment/comment-input";
 import { useEffect, useState } from "react";
 import { listComments } from "@/api/comment";
 import { OrderBy } from "@/models/common";
+import { CommentItem } from "./comment-item";
+import { Separator } from "../ui/separator";
 
 interface CommentAreaProps {
   targetType: 'post' | 'page';
@@ -19,7 +21,15 @@ export default function CommentSection(props: CommentAreaProps) {
   const [newComment, setNewComment] = useState<string>("");
 
   useEffect(() => {
-    listComments({ page: 1, size: 10, orderBy: OrderBy.CreatedAt, desc: true }, 1)
+    listComments({
+      targetType,
+      targetId,
+      depth: 0,
+      orderBy: OrderBy.CreatedAt,
+      desc: true,
+      page: 1,
+      size: 10
+    })
       .then(response => {
         setComments(response.data);
       })
@@ -34,8 +44,19 @@ export default function CommentSection(props: CommentAreaProps) {
 
   return (
     <div>
-      <h2>评论区</h2>
+      <Separator className="my-16" />
+      <div className="font-bold text-2xl">评论</div>
       <CommentInput />
+      {loading && <p>加载中...</p>}
+      {error && <p className="text-red-500">{error}</p>}
+      <div className="mt-4">
+        {comments.map(comment => (
+          <div key={comment.id}>
+            <Separator className="my-2" />
+            <CommentItem {...comment} />
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

web/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }