kurihada/no-whatever
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 接入全站图片资源 + 修复卡片滑动与房间轮询问题

Browse Source 
图片资源接入：
- OG/Twitter 社交分享元数据 (og-image.png)
- 错误页插画替换图标 (error-robot.png)
- EmptyState 组件支持 image prop，空状态页面接入插画
- 餐厅图片 fallback 改用 restaurant-fallback.png
- 极速救场/周末契约页面添加 hero 装饰图
- 分享卡片添加背景图层 (share-bg-*.png)，通过 base64 预加载
- 更新 App 图标 (apple-touch-icon, icon-192/512)

Bug 修复：
- SwipeDeck: swipe action 从 "nope" 改为 "pass"，匹配 API 预期
- SwipeDeck: 用 ref 读取 currentIndex 避免竞态重置（本地滑动后
  被服务端旧 swipeCounts 立即清零）
- SwipeDeck: 卡片 key 加入 isTop 标识，强制 remount 解决
  framer-motion drag 手势在 isTop 切换时不重新初始化的问题
- SwipeableCard: initial 统一为背景位置，确保晋升为顶部卡片时
  有一致的放大动画
- useRoomPolling: roomId 为空时跳过 SWR 和 EventSource
- room page: joinRoom 前 guard roomId，消除退房时 404
- layout: 添加 metadataBase 消除 Next.js OG 图片警告
This commit is contained in:
kurihada
2026-02-27 16:08:38 +08:00
parent 4073be9066
commit 76349f0dcf
30 changed files with 167 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/achievements/page.tsx
+2
View File
@@ -193,6 +193,7 @@ export default function AchievementsPage() {
) : decisions.length === 0 ? (
<EmptyState
icon={ClipboardList}
image="/empty-no-record.png"
title="还没有决策记录"
subtitle="使用极速救场后会在这里记录"
color="amber"
@@ -254,6 +255,7 @@ export default function AchievementsPage() {
) : contracts.length === 0 ? (
<EmptyState
icon={BarChart3}
image="/empty-no-room.png"
title="还没有契约记录"
subtitle="完成或过期的契约会在这里显示"
color="purple"
src/app/blindbox/page.tsx
+10 -1
View File
@@ -167,11 +167,20 @@ export default function BlindboxLobbyPage() {
</div>
</motion.div>
<motion.img
src="/blindbox-hero.png"
alt="周末契约"
className="mt-3 h-28 w-auto"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.05 }}
/>
<motion.p
className="mt-2 max-w-xs text-center text-xs leading-relaxed text-muted"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.05 }}
transition={{ duration: 0.5, delay: 0.08 }}
>
平日蓄水，周末开奖。把所有"想做但一直没做"的事，交给命运来决定。
</motion.p>
src/app/error.tsx
+6 -7
View File
@@ -2,7 +2,7 @@
import { useEffect } from "react";
import { motion } from "framer-motion";
import { AlertTriangle, RotateCcw, Home } from "lucide-react";
import { RotateCcw, Home } from "lucide-react";
import Button from "@/components/Button";
export default function Error({
@@ -23,14 +23,13 @@ export default function Error({
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
>
<motion.div
className="relative flex h-20 w-20 items-center justify-center"
<motion.img
src="/error-robot.png"
alt="错误"
className="h-28 w-28"
animate={{ y: [0, -4, 0] }}
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
>
<div className="absolute inset-0 rounded-2xl bg-rose-500/15 blur-lg" />
<AlertTriangle size={36} className="relative text-rose-400/80" strokeWidth={1.5} />
</motion.div>
/>
<h1 className="mt-6 text-xl font-bold text-heading">出了点问题</h1>
<p className="mt-2 max-w-xs text-sm text-muted">
src/app/global-error.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export default function GlobalError({
<html lang="zh-CN">
<body style={{ margin: 0, fontFamily: "system-ui, sans-serif", background: "#0a0a0a", color: "#e5e5e5" }}>
<div style={{ display: "flex", minHeight: "100dvh", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "1.5rem" }}>
<div style={{ fontSize: "3rem" }}>⚠️</div>
<img src="/error-robot.png" alt="错误" style={{ width: 120, height: 120 }} />
<h1 style={{ marginTop: "1.5rem", fontSize: "1.25rem", fontWeight: 700 }}>应用崩溃了</h1>
<p style={{ marginTop: "0.5rem", fontSize: "0.875rem", color: "#a3a3a3", textAlign: "center" }}>
发生了严重错误，请尝试刷新页面
src/app/layout.tsx
+12
View File
@@ -12,9 +12,21 @@ const geistSans = Geist({
});
export const metadata: Metadata = {
metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || "https://nowhatever.app"),
title: "NoWhatever — 别说随便",
description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
referrer: "no-referrer",
openGraph: {
title: "NoWhatever — 别说随便",
description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
images: [{ url: "/og-image.png", width: 1200, height: 630 }],
},
twitter: {
card: "summary_large_image",
title: "NoWhatever — 别说随便",
description: "像 Tinder 一样滑卡片，和朋友一起决定去哪吃！",
images: ["/og-image.png"],
},
};
export const viewport: Viewport = {
src/app/panic/page.tsx
+10 -1
View File
@@ -214,11 +214,20 @@ export default function PanicPage() {
</div>
</motion.div>
<motion.img
src="/panic-hero.png"
alt="极速救场"
className="mt-3 h-28 w-auto"
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.05 }}
/>
<motion.p
className="mt-2 max-w-xs text-center text-xs leading-relaxed text-muted"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.05 }}
transition={{ duration: 0.5, delay: 0.08 }}
>
{sceneConfig.subtitle}
</motion.p>
src/app/room/[id]/page.tsx
+1
View File
@@ -31,6 +31,7 @@ export default function RoomPage() {
} = useRoomPolling(roomId);
useEffect(() => {
if (!roomId) return;
const id = getUserId();
setUserId(id);
src/components/BlindboxPlanShareCard.tsx
+18
View File
@@ -10,9 +10,11 @@ export interface PlanShareData {
export default function BlindboxPlanShareCard({
data,
cardRef,
bgDataUrl,
}: {
data: PlanShareData;
cardRef: React.RefObject<HTMLDivElement | null>;
bgDataUrl?: string | null;
}) {
const { days, roomName } = data;
const shareUrl =
@@ -38,6 +40,22 @@ export default function BlindboxPlanShareCard({
overflow: "hidden",
}}
>
{/* Background image */}
{bgDataUrl && (
<img
src={bgDataUrl}
alt=""
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
objectFit: "cover",
opacity: 0.12,
}}
/>
)}
{/* Decorative glows */}
<div
style={{
src/components/BlindboxShareCard.tsx
+18
View File
@@ -11,9 +11,11 @@ export interface BlindboxShareData {
export default function BlindboxShareCard({
data,
cardRef,
bgDataUrl,
}: {
data: BlindboxShareData;
cardRef: React.RefObject<HTMLDivElement | null>;
bgDataUrl?: string | null;
}) {
const { idea, submitter, drawer, roomName } = data;
const shareUrl =
@@ -39,6 +41,22 @@ export default function BlindboxShareCard({
overflow: "hidden",
}}
>
{/* Background image */}
{bgDataUrl && (
<img
src={bgDataUrl}
alt=""
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
objectFit: "cover",
opacity: 0.12,
}}
/>
)}
{/* Decorative glows */}
<div
style={{
src/components/EmptyState.tsx
+20 -8
View File
@@ -5,6 +5,7 @@ import type { LucideIcon } from "lucide-react";
interface EmptyStateProps {
icon: LucideIcon;
image?: string;
title: string;
subtitle?: string;
ctaLabel?: string;
@@ -14,6 +15,7 @@ interface EmptyStateProps {
export default function EmptyState({
icon: Icon,
image,
title,
subtitle,
ctaLabel,
@@ -30,14 +32,24 @@ export default function EmptyState({
return (
<div className="flex flex-col items-center py-6">
<motion.div
className="relative flex h-14 w-14 items-center justify-center"
animate={{ y: [0, -3, 0] }}
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
>
<div className={`absolute inset-0 rounded-xl ${c.glow} blur-md`} />
<Icon size={24} className={`relative ${c.icon}`} strokeWidth={1.5} />
</motion.div>
{image ? (
<motion.img
src={image}
alt={title}
className="h-20 w-20"
animate={{ y: [0, -3, 0] }}
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
/>
) : (
<motion.div
className="relative flex h-14 w-14 items-center justify-center"
animate={{ y: [0, -3, 0] }}
transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
>
<div className={`absolute inset-0 rounded-xl ${c.glow} blur-md`} />
<Icon size={24} className={`relative ${c.icon}`} strokeWidth={1.5} />
</motion.div>
)}
<p className="mt-3 text-sm font-semibold text-secondary">{title}</p>
{subtitle && (
src/components/ProfileFavoritesCard.tsx
+1
View File
@@ -71,6 +71,7 @@ export default function ProfileFavoritesCard({
) : favorites.length === 0 ? (
<EmptyState
icon={Heart}
image="/empty-no-record.png"
title="还没有收藏的餐厅"
subtitle="在匹配结果中收藏喜欢的店"
ctaLabel="去创建第一个房间"
src/components/ProfileHistoryCard.tsx
+1
View File
@@ -70,6 +70,7 @@ export default function ProfileHistoryCard({
) : history.length === 0 ? (
<EmptyState
icon={ClipboardList}
image="/empty-no-record.png"
title="还没有决策记录"
subtitle="创建房间开始一起选餐厅"
ctaLabel="去创建第一个房间"
src/components/RestaurantImage.tsx
+6 -2
View File
@@ -1,7 +1,6 @@
"use client";
import { useState, useCallback } from "react";
import { UtensilsCrossed } from "lucide-react";
interface RestaurantImageProps {
src: string;
@@ -30,7 +29,12 @@ export default function RestaurantImage({
className={`flex items-center justify-center bg-elevated ${className}`}
style={style}
>
<UtensilsCrossed className="h-1/3 w-1/3 max-h-8 max-w-8 text-muted/40" strokeWidth={1.5} />
<img
src="/restaurant-fallback.png"
alt={alt}
className="h-1/2 w-1/2 max-h-20 max-w-20 object-contain opacity-60"
draggable={false}
/>
</div>
);
}
src/components/RestaurantShareCard.tsx
+18
View File
@@ -16,10 +16,12 @@ export default function RestaurantShareCard({
data,
cardRef,
imageDataUrl,
bgDataUrl,
}: {
data: RestaurantShareData;
cardRef: React.RefObject<HTMLDivElement | null>;
imageDataUrl: string | null;
bgDataUrl?: string | null;
}) {
const { restaurant, matchType, matchLikes, userCount, scene } = data;
const isUnanimous = matchType === "unanimous";
@@ -53,6 +55,22 @@ export default function RestaurantShareCard({
overflow: "hidden",
}}
>
{/* Background image */}
{bgDataUrl && (
<img
src={bgDataUrl}
alt=""
style={{
position: "absolute",
inset: 0,
width: "100%",
height: "100%",
objectFit: "cover",
opacity: 0.12,
}}
/>
)}
{/* Decorative glows */}
<div
style={{
src/components/ShareCardModal.tsx
+30 -8
View File
@@ -41,20 +41,41 @@ export default function ShareCardModal({
const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
const [imageLoading, setImageLoading] = useState(false);
const [bgDataUrl, setBgDataUrl] = useState<string | null>(null);
const imageSrc = data.type === "restaurant" ? data.restaurant.images?.[0] : undefined;
const bgSrc =
data.type === "restaurant"
? "/share-bg-panic.png"
: data.type === "blindbox" || data.type === "plan"
? "/share-bg-blindbox.png"
: undefined;
useEffect(() => {
if (!open) {
setImageDataUrl(null);
setBgDataUrl(null);
return;
}
if (!imageSrc) return;
setImageLoading(true);
loadImageAsDataUrl(imageSrc)
.then(setImageDataUrl)
.finally(() => setImageLoading(false));
}, [open, imageSrc]);
const promises: Promise<void>[] = [];
if (imageSrc) {
promises.push(
loadImageAsDataUrl(imageSrc).then(setImageDataUrl),
);
}
if (bgSrc) {
promises.push(
loadImageAsDataUrl(bgSrc).then(setBgDataUrl),
);
}
if (promises.length > 0) {
setImageLoading(true);
Promise.all(promises).finally(() => setImageLoading(false));
}
}, [open, imageSrc, bgSrc]);
const handleGenerate = useCallback(async (): Promise<string | null> => {
if (!cardRef.current) return null;
@@ -153,11 +174,12 @@ export default function ShareCardModal({
data={data}
cardRef={cardRef}
imageDataUrl={imageDataUrl}
bgDataUrl={bgDataUrl}
/>
) : data.type === "plan" ? (
<BlindboxPlanShareCard data={data} cardRef={cardRef} />
<BlindboxPlanShareCard data={data} cardRef={cardRef} bgDataUrl={bgDataUrl} />
) : (
<BlindboxShareCard data={data} cardRef={cardRef} />
<BlindboxShareCard data={data} cardRef={cardRef} bgDataUrl={bgDataUrl} />
)}
</div>
src/components/SwipeDeck.tsx
+9 -5
View File
@@ -216,7 +216,7 @@ export default function SwipeDeck({
[],
);
const sendSwipe = async (restaurantId: string, action: "like" | "nope") => {
const sendSwipe = async (restaurantId: string, action: "like" | "pass") => {
try {
const res = await fetch(`/api/room/${roomId}/swipe`, {
method: "POST",
@@ -240,7 +240,7 @@ export default function SwipeDeck({
swipingRef.current = false;
if (guideVisible) setGuideVisible(false);
const action = direction === "right" ? "like" : "nope";
const action = direction === "right" ? "like" : "pass";
sendSwipe(current.id, action);
setSwipeHistory((h) => [...h, current.id]);
@@ -291,12 +291,16 @@ export default function SwipeDeck({
prevLikeCounts.current = {};
}, []);
const currentIndexRef = useRef(currentIndex);
currentIndexRef.current = currentIndex;
useEffect(() => {
const serverIndex = swipeCounts[userId] ?? 0;
if (serverIndex === 0 && currentIndex > 0 && !resetting) {
if (serverIndex === 0 && currentIndexRef.current > 0 && !resetting) {
clearLocalState();
}
}, [swipeCounts, userId, currentIndex, resetting, clearLocalState]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [swipeCounts, userId, resetting, clearLocalState]);
const handleReset = useCallback(async () => {
setResetting(true);
@@ -354,7 +358,7 @@ export default function SwipeDeck({
const isTop = index === currentIndex;
return (
<SwipeableCard
key={restaurant.id}
key={`${restaurant.id}-${isTop ? "top" : "bg"}`}
restaurant={restaurant}
isTop={isTop}
onSwipe={handleSwipe}
src/components/SwipeableCard.tsx
+1 -1
View File
@@ -107,7 +107,7 @@ export default function SwipeableCard({
dragElastic={0.9}
onDragEnd={handleDragEnd}
whileDrag={{ cursor: "grabbing" }}
initial={isTop ? { scale: 1 } : { scale: 0.95, y: 16 }}
initial={{ scale: 0.95, y: 16 }}
animate={isTop ? { scale: 1, y: 0 } : { scale: 0.95, y: 16 }}
transition={{ type: "spring", stiffness: 300, damping: 25 }}
>
src/hooks/useRoomPolling.ts
+3 -2
View File
@@ -13,9 +13,9 @@ async function fetcher(url: string) {
return r.json();
}
export function useRoomPolling(roomId: string) {
export function useRoomPolling(roomId: string | undefined) {
const { data, error, isLoading, mutate } = useSWR<RoomStatus>(
`/api/room/${roomId}`,
roomId ? `/api/room/${roomId}` : null,
fetcher,
{
revalidateOnFocus: true,
@@ -27,6 +27,7 @@ export function useRoomPolling(roomId: string) {
const notFound = error?.message === "NOT_FOUND";
useEffect(() => {
if (!roomId) return;
const es = new EventSource(`/api/room/${roomId}/events`);
es.onmessage = (e) => {