snowykami/neo-blog
1
0
Fork 0
mirror of https://github.com/snowykami/neo-blog.git synced 2025-09-26 19:16:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
远野千束
2025-09-10 11:45:17 +08:00
parent ff1d8b7928
commit 1d74723e44
1 changed files with 90 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/components/comment/comment-item.tsx
View File

@ -149,12 +149,13 @@ export function CommentItem(
} }
return ( return (
<div>
<div className="flex"> <div className="flex">
<div className="fade-in"> <div onClick={() => clickToUserProfile(comment.user.username)} className="cursor-pointer fade-in">
{getGravatarByUser(comment.user)} {getGravatarByUser(comment.user)}
</div> </div>
<div className="flex-1 pl-2 fade-in-up"> <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"> <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" /> 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} onCommentSubmitted={onCommentEdit}
isUpdate={true} isUpdate={true}
/>} />}
</div>
</div >
{showReplies && replies.length > 0 && ( {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) => ( {replies.map((reply) => (
<CommentItem <CommentItem
key={reply.id} key={reply.id}
@ -247,8 +251,6 @@ export function CommentItem(
/> />
))} ))}
</div> </div>
)} )}</div>
</div>
</div >
) )
} }