✨ feat: 优化评论项组件的布局和交互，增强用户体验

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

@@ -149,12 +149,13 @@ export function CommentItem(
   }
 
   return (
+    <div>
       <div className="flex">
-      <div className="fade-in">
+        <div onClick={() => clickToUserProfile(comment.user.username)} className="cursor-pointer fade-in">
           {getGravatarByUser(comment.user)}
         </div>
         <div className="flex-1 pl-2 fade-in-up">
-        <div className="font-bold text-base text-slate-800 dark:text-slate-100 fade-in-up">{comment.user.nickname}</div>
+          <div onClick={() => clickToUserProfile(comment.user.username)} className="font-bold text-base text-slate-800 dark:text-slate-100 cursor-pointer fade-in-up">{comment.user.nickname}</div>
           <p className="text-lg text-slate-600 dark:text-slate-400 fade-in">
             {
               isPrivate && <Lock className="inline w-4 h-4 mr-1 mb-1 text-slate-500 dark:text-slate-400" />
@@ -235,8 +236,11 @@ export function CommentItem(
             onCommentSubmitted={onCommentEdit}
             isUpdate={true}
           />}
+
+        </div>
+      </div >
       {showReplies && replies.length > 0 && (
-          <div className="mt-4 pl-4 border-l border-slate-300 dark:border-slate-600 space-y-4">
+        <div className="mt-4 pl-4 md:pl-8 border-l border-slate-300 dark:border-slate-600 space-y-4">
           {replies.map((reply) => (
             <CommentItem
               key={reply.id}
@@ -247,8 +251,6 @@ export function CommentItem(
             />
           ))}
         </div>
-        )}
-      </div>
-    </div >
+      )}</div>
   )
 }