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

internal/repo/comment.go

@@ -190,7 +190,7 @@ func (cr *CommentRepo) ListComments(currentUserID uint, targetID uint, targetTyp
 	query := GetDB().Model(&model.Comment{}).Preload("User")
 
 	if currentUserID > 0 {
-		query = query.Where("is_private = ? OR (is_private = ? AND (user_id = ? OR user_id = ?))", false, true, currentUserID, masterID)
+		query = query.Where("(is_private = ? OR (is_private = ? AND (user_id = ? OR user_id = ?)))", false, true, currentUserID, masterID)
 	} else {
 		query = query.Where("is_private = ?", false)
 	}

web/package.json

@@ -12,6 +12,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.5",
     "axios": "^1.11.0",

web/pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@radix-ui/react-navigation-menu':
         specifier: ^1.2.13
         version: 1.2.13(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
         specifier: ^1.2.3
         version: 1.2.3(@types/react@19.1.8)(react@19.1.0)
@@ -595,6 +598,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -3185,6 +3201,15 @@ snapshots:
       '@types/react': 19.1.8
       '@types/react-dom': 19.1.6(@types/react@19.1.8)
 
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.8))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.8
+      '@types/react-dom': 19.1.6(@types/react@19.1.8)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.8)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.8)(react@19.1.0)

web/src/api/comment.ts

@@ -23,18 +23,35 @@ export async function deleteComment(id: number): Promise<void> {
   await axiosClient.delete(`/comment/c/${id}`)
 }
 
-export async function listComments(
+export interface ListCommentsParams {
-  targetType: 'post' | 'page',
+  targetType: 'post' | 'page'
-  targetId: number,
+  targetId: number
-  pagination: PaginationParams = { orderBy: OrderBy.CreatedAt, desc: false, page: 1, size: 10 },
+  depth?: number
-  depth: number = 1
+  orderBy?: OrderBy
-): Promise<BaseResponse<Comment[]>> {
+  desc?: boolean
+  page?: number
+  size?: number
+}
+
+export async function listComments(params: ListCommentsParams): Promise<BaseResponse<Comment[]>> {
+  const {
+    targetType,
+    targetId,
+    depth = 0,
+    orderBy = OrderBy.CreatedAt,
+    desc = true,
+    page = 1,
+    size = 10,
+  } = params
   const res = await axiosClient.get<BaseResponse<Comment[]>>(`/comment/list`, {
     params: {
       targetType,
       targetId,
-      ...pagination,
+      depth,
-      depth
+      orderBy,
+      desc,
+      page,
+      size
     }
   })
   return res.data

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">
+        <div className="flex">
-            <CardHeader>
+            <div>
-                <CardTitle className="text-lg font-semibold text-slate-800 dark:text-slate-100">
+                {getGravatarByUser(comment.user)}
-                    {comment.user.nickname}
+            </div>
-                </CardTitle>
+            <div className="flex-1 pl-2">
-            </CardHeader>
+                <div className="font-bold">{comment.user.nickname}</div>
-            <p className="text-sm text-slate-600 dark:text-slate-400">{comment.content}</p>
+                <p className="text-xs text-slate-600 dark:text-slate-400">{comment.content}</p>
-            <div className="mt-2 text-xs text-slate-500 dark:text-slate-400">
+                <div className="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                {new Date(comment.updatedAt).toLocaleString()}
+                    {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 }