feat: 添加评论功能的客户端信息显示选项，更新相关接口和组件

web/src/api/comment.ts

@@ -12,13 +12,15 @@ export async function createComment(
     targetId,
     content,
     replyId = null,
-    isPrivate = false
+    isPrivate = false,
+    showClientInfo = true,
   }: {
     targetType: TargetType
     targetId: number
     content: string
     replyId: number | null
     isPrivate: boolean
+    showClientInfo: boolean
   }
 ): Promise<BaseResponse<{ id: number }>> {
   const res = await axiosClient.post<BaseResponse<{ id: number }>>('/comment/c', {
@@ -26,7 +28,8 @@ export async function createComment(
     targetId,
     content,
     replyId,
-    isPrivate
+    isPrivate,
+    showClientInfo,
   })
   return res.data
 }

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

@@ -3,7 +3,7 @@ import { User } from "@/models/user";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { toast } from "sonner";
-import GravatarAvatar, { getGravatarByUser } from "@/components/common/gravatar";
+import GravatarAvatar from "@/components/common/gravatar";
 import { CircleUser } from "lucide-react";
 import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox"
@@ -20,7 +20,7 @@ export function CommentInput(
     isUpdate = false
   }: {
     user: User | null,
-    onCommentSubmitted: ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => void,
+    onCommentSubmitted: ({ commentContent, isPrivate, showClientInfo }: { commentContent: string, isPrivate: boolean, showClientInfo: boolean }) => void,
     initContent?: string,
     initIsPrivate?: boolean,
     placeholder?: string,
@@ -33,6 +33,7 @@ export function CommentInput(
   const clickToUserProfile = useToUserProfile();
 
   const [isPrivate, setIsPrivate] = useState(initIsPrivate);
+  const [showClientInfo, setShowClientInfo] = useState(true);
   const [commentContent, setCommentContent] = useState(initContent);
 
   const handleCommentSubmit = async () => {
@@ -54,7 +55,7 @@ export function CommentInput(
       toast.warning(t("comment_unchanged"));
       return;
     }
-    onCommentSubmitted({ commentContent, isPrivate });
+    onCommentSubmitted({ commentContent, isPrivate, showClientInfo });
     setCommentContent("");
   };
 
@@ -62,7 +63,7 @@ export function CommentInput(
     <div className="fade-in-up">
       <div className="flex py-4 fade-in">
         <div onClick={user ? () => clickToUserProfile(user.username) : clickToLogin} className="cursor-pointer flex-shrink-0 w-10 h-10 fade-in">
-          {user && <GravatarAvatar className="w-full h-full" url={user.avatarUrl} email={user.email} size={100}/>}
+          {user && <GravatarAvatar className="w-full h-full" url={user.avatarUrl} email={user.email} size={100} />}
           {!user && <CircleUser className="w-full h-full fade-in" />}
         </div>
         <div className="flex-1 pl-2 fade-in-up">
@@ -75,6 +76,13 @@ export function CommentInput(
         </div>
       </div>
       <div className="flex justify-end fade-in-up space-x-4 items-center">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            checked={showClientInfo}
+            onCheckedChange={checked => setShowClientInfo(checked === true)}
+          />
+          <Label onClick={() => setShowClientInfo(prev => !prev)}>{t("show_client_info")}</Label>
+        </div>
         <div className="flex items-center space-x-2">
           <Checkbox
             checked={isPrivate}

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

@@ -123,13 +123,14 @@ export function CommentItem(
     });
   }
 
-  const onReply = ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => {
+  const onReply = ({ commentContent, isPrivate, showClientInfo }: { commentContent: string, isPrivate: boolean, showClientInfo: boolean }) => {
     createComment({
       targetType: comment.targetType,
       targetId: comment.targetId,
       content: commentContent,
       replyId: comment.id,
       isPrivate,
+      showClientInfo
     }).then(() => {
       toast.success(t("comment_success"));
       reloadReplies();

web/src/components/comment/index.tsx

@@ -61,18 +61,18 @@ export function CommentSection(
     });
   }, [])
 
-  const onCommentSubmitted = ({ commentContent, isPrivate }: { commentContent: string, isPrivate: boolean }) => {
+  const onCommentSubmitted = ({ commentContent, isPrivate, showClientInfo }: { commentContent: string, isPrivate: boolean, showClientInfo: boolean }) => {
     createComment({
       targetType,
       targetId,
       content: commentContent,
       replyId: null,
       isPrivate,
+      showClientInfo
     }).then(res => {
       toast.success(t("comment_success"));
       setTotalCommentCount(c => c + 1);
       getComment({ id: res.data.id }).then(response => {
-        console.log("New comment fetched:", response.data);
         setComments(prevComments => [response.data, ...prevComments]);
       });
       setActiveInput(null);

web/src/locales/zh-CN.json

@@ -47,6 +47,7 @@
     "private": "私密评论",
     "private_placeholder": "悄悄地说一句...",
     "reply": "回复",
+    "show_client_info": "展示客户端信息",
     "submit": "提交",
     "unlike": "取消点赞",
     "unlike_success": "已取消点赞",