freefire
a8f6ce4e4f
1. 修正类型文件导入路径到.dev目录 2. 为API请求添加cookie传递支持，实现SSR用户登录态识别 3. 重构LikeButton组件，新增compact变体适配列表页展示 4. 调整首页和板块页的帖子列表布局，添加点赞按钮 5. 拆分帖子列表点击区域，优化交互体验
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Heart } from "lucide-react";
|
|
import { apiToggleLike } from "@/lib/api";
|
|
|
|
interface LikeButtonProps {
|
|
postId: string;
|
|
liked: boolean;
|
|
likeCount: number;
|
|
variant?: "default" | "compact";
|
|
}
|
|
|
|
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);
|
|
|
|
const handleClick = async () => {
|
|
if (loading) return;
|
|
setLoading(true);
|
|
try {
|
|
const res = await apiToggleLike(postId);
|
|
if (res.error === "未登录") {
|
|
window.location.href = "/login";
|
|
return;
|
|
}
|
|
if (typeof res.liked === "boolean") {
|
|
setLiked(res.liked);
|
|
setCount(res.like_count ?? count);
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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}
|
|
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={iconSize} fill={liked ? "currentColor" : "none"} />
|
|
<span>{count}</span>
|
|
</button>
|
|
);
|
|
}
|