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

- error.tsx: 路由级错误边界，提供重试和返回首页操作 - global-error.tsx: 根布局级兜底，纯内联样式避免依赖加载 - RestaurantImage: 可复用图片组件，加载失败显示餐具占位图标 - 替换 RestaurantCard、MatchResult、profile 中所有餐厅图片
2026-02-26 15:22:29 +08:00
parent e86f643c26
commit 4ce6ea469c
6 changed files with 162 additions and 12 deletions
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[GlobalError]", error);
+  }, [error]);
+
+  return (
+    <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>
+          <h1 style={{ marginTop: "1.5rem", fontSize: "1.25rem", fontWeight: 700 }}>应用崩溃了</h1>
+          <p style={{ marginTop: "0.5rem", fontSize: "0.875rem", color: "#a3a3a3", textAlign: "center" }}>
+            发生了严重错误，请尝试刷新页面
+          </p>
+          <button
+            onClick={reset}
+            style={{
+              marginTop: "2rem",
+              padding: "0.625rem 1.5rem",
+              fontSize: "0.875rem",
+              fontWeight: 600,
+              color: "#fff",
+              background: "#e11d48",
+              border: "none",
+              borderRadius: "0.75rem",
+              cursor: "pointer",
+            }}
+          >
+            刷新重试
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}