feat: 新增帖子最后回复展示、文章目录与三栏布局,优化点赞按钮与导航栏

这是一次包含多个功能升级的提交:
1. 后端新增批量查询帖子最后回复的逻辑,在前端帖子列表项中展示最后回复信息
2. 重构点赞按钮,新增文章样式变体并统一样式逻辑
3. 重写工作台导航栏,精简默认展示的菜单选项
4. 新增文章目录组件,为帖子详情页添加文章目录导航
5. 重构帖子详情页,实现三栏响应式布局,新增板块卡片、作者信息栏与同板块热议推荐
6. 重构帖子列表行组件,优化排版与信息展示逻辑
7. 重构帖子管理操作组件,使用下拉菜单整合所有管理功能
8. 新增全局通用的滚动容器与点赞按钮样式
This commit is contained in:
2026-09-13 04:06:56 +08:00
parent bee06fa962
commit 52124f2682
10 changed files with 926 additions and 226 deletions

View File

@@ -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>
);
}