feat: 增加滑动参与感 - 进度条、实时气泡、热度标签

- 卡片上方显示滑动进度条和计数 (3/15)
- 轮询检测到当前卡片新增 like 时弹出"有人也想去这家!"气泡
- 卡片图片角落显示"🔥N 人想去"热度标签
- 后端 GET /api/room/[id] 新增 likeCounts 字段
This commit is contained in:
2026-02-24 17:36:04 +08:00
parent a72f7ed884
commit fb49e21eb2
7 changed files with 94 additions and 11 deletions
+16 -7
View File
@@ -1,18 +1,19 @@
"use client";
import { useCallback } from "react";
import { Star, MapPin, Clock, ExternalLink } from "lucide-react";
import { Star, MapPin, Clock, ExternalLink, Flame } from "lucide-react";
import { Restaurant } from "@/types";
interface RestaurantCardProps {
restaurant: Restaurant;
likeCount?: number;
}
function stopAll(e: React.SyntheticEvent) {
e.stopPropagation();
}
export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
export default function RestaurantCard({ restaurant, likeCount = 0 }: RestaurantCardProps) {
const openLink = useCallback(
(url: string) => (e: React.MouseEvent | React.TouchEvent) => {
e.stopPropagation();
@@ -37,11 +38,19 @@ export default function RestaurantCard({ restaurant }: RestaurantCardProps) {
/>
<div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
{restaurant.category && (
<span className="absolute bottom-3 left-4 rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
{restaurant.category}
</span>
)}
<div className="absolute bottom-3 left-4 flex items-center gap-1.5">
{restaurant.category && (
<span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
{restaurant.category}
</span>
)}
{likeCount > 0 && (
<span className="flex items-center gap-0.5 rounded-full bg-rose-500/90 px-2 py-0.5 text-xs font-semibold text-white shadow-sm backdrop-blur-sm">
<Flame size={11} />
{likeCount}
</span>
)}
</div>
</div>
<div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">