feat: 新增帖子最后回复展示、文章目录与三栏布局,优化点赞按钮与导航栏
这是一次包含多个功能升级的提交: 1. 后端新增批量查询帖子最后回复的逻辑,在前端帖子列表项中展示最后回复信息 2. 重构点赞按钮,新增文章样式变体并统一样式逻辑 3. 重写工作台导航栏,精简默认展示的菜单选项 4. 新增文章目录组件,为帖子详情页添加文章目录导航 5. 重构帖子详情页,实现三栏响应式布局,新增板块卡片、作者信息栏与同板块热议推荐 6. 重构帖子列表行组件,优化排版与信息展示逻辑 7. 重构帖子管理操作组件,使用下拉菜单整合所有管理功能 8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
@@ -10,7 +10,7 @@ interface LikeButtonProps {
|
||||
postId: string;
|
||||
liked: boolean;
|
||||
likeCount: number;
|
||||
variant?: "default" | "compact";
|
||||
variant?: "default" | "compact" | "article";
|
||||
}
|
||||
|
||||
export default function LikeButton({
|
||||
@@ -60,10 +60,13 @@ export default function LikeButton({
|
||||
}
|
||||
};
|
||||
|
||||
const compact =
|
||||
const sizeCls =
|
||||
variant === "compact"
|
||||
? "px-2.5 py-1.5 gap-1 text-[12.5px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
: variant === "article"
|
||||
? "px-7 py-3 gap-2 text-[15px] min-w-[148px]"
|
||||
: "px-4 py-2 gap-1.5 text-sm";
|
||||
const iconSize = variant === "compact" ? 13 : variant === "article" ? 18 : 15;
|
||||
|
||||
return (
|
||||
<button
|
||||
@@ -71,17 +74,13 @@ export default function LikeButton({
|
||||
disabled={loading}
|
||||
title={liked ? "取消点赞" : "点赞"}
|
||||
aria-pressed={liked}
|
||||
className={`inline-flex items-center font-semibold tabular-nums rounded-full border transition-colors duration-150 hover:border-[var(--accent)] disabled:opacity-50 ${compact}`}
|
||||
style={{
|
||||
borderColor: liked ? "var(--accent)" : "var(--line-2)",
|
||||
color: liked ? "var(--accent)" : "var(--ink-2)",
|
||||
background: liked ? "var(--accent-soft)" : "var(--panel)",
|
||||
}}
|
||||
className={`j13-like inline-flex items-center justify-center font-semibold tabular-nums rounded-full border disabled:opacity-50 ${liked ? "is-liked" : ""} ${sizeCls}`}
|
||||
>
|
||||
<span key={String(liked)} className={liked ? "j13-heart-pop inline-flex" : "inline-flex"}>
|
||||
<IconHeart size={variant === "compact" ? 13 : 15} filled={liked} />
|
||||
<IconHeart size={iconSize} filled={liked} />
|
||||
</span>
|
||||
<span>{count}</span>
|
||||
{variant === "article" && <span>{liked ? "已赞" : "点赞"}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user