feat: 集成错误处理与网络状态管理
- 在 Providers 组件中引入 ErrorProvider 以处理全局错误状态 - 更新 PlayerAppShell 组件的注释,说明网络状态横幅的用途 - 在 lotteryHttp 中添加对 500、502、503 错误的处理,更新全局错误状态 - 导出 useNetworkStatus 和 useIsOffline 钩子以支持网络状态管理
This commit is contained in:
86
src/app/not-found.tsx
Normal file
86
src/app/not-found.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { FileQuestion, Home } from "lucide-react";
|
||||
|
||||
import { ERROR_COLORS } from "@/stores/error-store";
|
||||
|
||||
/**
|
||||
* 全局 404 页面
|
||||
* 当访问不存在的路由时显示
|
||||
* 消息:"页面不存在"
|
||||
* 包含 "返回首页" 按钮
|
||||
* 使用中性颜色 #d9d9d9 作为背景/插图
|
||||
*/
|
||||
export default function NotFoundPage(): React.ReactElement {
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-screen flex-col items-center justify-center p-4"
|
||||
style={{ backgroundColor: ERROR_COLORS.neutral }}
|
||||
>
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
{/* 404 数字 */}
|
||||
<div
|
||||
className="mb-6 text-8xl font-bold tracking-tighter"
|
||||
style={{ color: ERROR_COLORS.neutral }}
|
||||
>
|
||||
404
|
||||
</div>
|
||||
|
||||
{/* 图标 */}
|
||||
<div
|
||||
className="mb-6 flex size-20 items-center justify-center rounded-full"
|
||||
style={{ backgroundColor: `${ERROR_COLORS.neutral}40` }}
|
||||
>
|
||||
<FileQuestion
|
||||
className="size-10"
|
||||
style={{ color: "#666" }}
|
||||
aria-hidden
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 标题 */}
|
||||
<h1 className="mb-3 text-2xl font-bold text-gray-800">
|
||||
页面不存在
|
||||
</h1>
|
||||
|
||||
{/* 描述 */}
|
||||
<p className="mb-8 text-base text-gray-500">
|
||||
抱歉,您访问的页面可能已被删除、移动或从未存在过。
|
||||
</p>
|
||||
|
||||
{/* 返回首页按钮 */}
|
||||
<Link
|
||||
href="/hall"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-lg px-8 py-3 text-base font-medium text-white"
|
||||
style={{ backgroundColor: "#333" }}
|
||||
>
|
||||
<Home className="size-5" />
|
||||
返回首页
|
||||
</Link>
|
||||
|
||||
{/* 帮助链接 */}
|
||||
<div className="mt-8 flex gap-4 text-sm text-gray-400">
|
||||
<Link href="/hall" className="hover:text-gray-600 hover:underline">
|
||||
投注大厅
|
||||
</Link>
|
||||
<span>|</span>
|
||||
<Link href="/results" className="hover:text-gray-600 hover:underline">
|
||||
开奖结果
|
||||
</Link>
|
||||
<span>|</span>
|
||||
<Link href="/wallet" className="hover:text-gray-600 hover:underline">
|
||||
我的钱包
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 品牌信息 */}
|
||||
<p className="mt-8 text-sm text-gray-500">
|
||||
Lottery © {new Date().getFullYear()}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user