refactor(frontend): 完善SSR鉴权与点赞组件样式优化

1. 修正类型文件导入路径到.dev目录
2. 为API请求添加cookie传递支持,实现SSR用户登录态识别
3. 重构LikeButton组件,新增compact变体适配列表页展示
4. 调整首页和板块页的帖子列表布局,添加点赞按钮
5. 拆分帖子列表点击区域,优化交互体验
This commit is contained in:
2026-09-12 01:35:37 +08:00
parent 0c2b0d2d6a
commit a8f6ce4e4f
6 changed files with 76 additions and 40 deletions

View File

@@ -8,9 +8,10 @@ interface LikeButtonProps {
postId: string;
liked: boolean;
likeCount: number;
variant?: "default" | "compact";
}
export default function LikeButton({ postId, liked: initialLiked, likeCount: initialCount }: LikeButtonProps) {
export default function LikeButton({ postId, liked: initialLiked, likeCount: initialCount, variant = "default" }: LikeButtonProps) {
const [liked, setLiked] = useState(initialLiked);
const [count, setCount] = useState(initialCount);
const [loading, setLoading] = useState(false);
@@ -33,17 +34,21 @@ export default function LikeButton({ postId, liked: initialLiked, likeCount: ini
}
};
const sizing = variant === "compact" ? "px-2 py-1 gap-1" : "px-3 py-1.5 gap-1.5";
const iconSize = variant === "compact" ? 14 : 16;
return (
<button
onClick={handleClick}
disabled={loading}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium transition-all disabled:opacity-50 ${
title={liked ? "取消点赞" : "点赞"}
className={`flex items-center ${sizing} rounded-full text-sm font-medium transition-all disabled:opacity-50 ${
liked
? "text-red-500 bg-red-50 dark:bg-red-900/20"
: "text-gray-500 hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800"
}`}
>
<Heart size={16} fill={liked ? "currentColor" : "none"} />
<Heart size={iconSize} fill={liked ? "currentColor" : "none"} />
<span>{count}</span>
</button>
);