feat: 添加全局 Error Boundary 和餐厅图片加载失败 fallback

- error.tsx: 路由级错误边界,提供重试和返回首页操作
- global-error.tsx: 根布局级兜底,纯内联样式避免依赖加载
- RestaurantImage: 可复用图片组件,加载失败显示餐具占位图标
- 替换 RestaurantCard、MatchResult、profile 中所有餐厅图片
This commit is contained in:
2026-02-26 15:22:29 +08:00
parent e86f643c26
commit 4ce6ea469c
6 changed files with 162 additions and 12 deletions
+3 -4
View File
@@ -4,6 +4,7 @@ import { useCallback, useState, useEffect } from "react";
import { Star, MapPin, Clock, ExternalLink, Flame, Bookmark, ChevronLeft, ChevronRight } from "lucide-react";
import { Restaurant } from "@/types";
import { getUserId, isRegistered } from "@/lib/userId";
import RestaurantImage from "@/components/RestaurantImage";
interface RestaurantCardProps {
restaurant: Restaurant;
@@ -57,16 +58,15 @@ function ImageGallery({ images, name }: { images: string[]; name: string }) {
return (
<div className="relative h-full w-full" onClick={handleTap} onPointerDown={stopAll}>
<img
<RestaurantImage
src={images[idx]}
alt={name}
className="absolute inset-0 h-full w-full object-cover"
draggable={false}
referrerPolicy="no-referrer"
/>
{fadingOut !== null && (
<img
<RestaurantImage
key={fadingOut}
src={images[fadingOut]}
alt=""
@@ -74,7 +74,6 @@ function ImageGallery({ images, name }: { images: string[]; name: string }) {
style={{ animation: "img-fade-out 280ms ease-out forwards" }}
onAnimationEnd={() => setFadingOut(null)}
draggable={false}
referrerPolicy="no-referrer"
/>
)}