From 3f87876a3c210a268132db2739bd578bbb28b6b3 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 3 Dec 2024 14:20:17 +0800
Subject: [PATCH] fix: service block page

---
 src/App.tsx                           |  2 ++
 src/components/CycleTransferStats.tsx | 22 +++++++++++-------
 src/components/ServiceTracker.tsx     |  2 +-
 src/pages/ErrorPage.tsx               | 32 +++++++++++++++++++++++++++
 4 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/ErrorPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2b3744b..ea1ed0b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import Footer from "./components/Footer";
 import Server from "./pages/Server";
 import ServerDetail from "./pages/ServerDetail";
 import NotFound from "./pages/NotFound";
+import ErrorPage from "./pages/ErrorPage";
 
 const App: React.FC = () => {
   return (
@@ -15,6 +16,7 @@ const App: React.FC = () => {
           <Routes>
             <Route path="/" element={<Server />} />
             <Route path="/server/:id" element={<ServerDetail />} />
+            <Route path="/error" element={<ErrorPage />} />
             <Route path="*" element={<NotFound />} />
           </Routes>
           <Footer />
diff --git a/src/components/CycleTransferStats.tsx b/src/components/CycleTransferStats.tsx
index 856d2d0..c70f3e5 100644
--- a/src/components/CycleTransferStats.tsx
+++ b/src/components/CycleTransferStats.tsx
@@ -14,14 +14,20 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
   return (
     <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
       {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
-        const serverStats = Object.entries(cycleData.server_name).map(
-          ([serverId, serverName]) => ({
-            serverId,
-            serverName,
-            transfer: cycleData.transfer[serverId] || 0,
-            nextUpdate: cycleData.next_update[serverId],
-          }),
-        );
+        const serverStats = cycleData.server_name 
+          ? Object.entries(cycleData.server_name).map(
+              ([serverId, serverName]) => ({
+                serverId,
+                serverName,
+                transfer: cycleData.transfer?.[serverId] || 0,
+                nextUpdate: cycleData.next_update?.[serverId],
+              })
+            )
+          : [];
+
+          if (serverStats.length === 0) {
+            return null;
+          }
 
         return (
           <CycleTransferStatsClient
diff --git a/src/components/ServiceTracker.tsx b/src/components/ServiceTracker.tsx
index 26f65a2..3dbc446 100644
--- a/src/components/ServiceTracker.tsx
+++ b/src/components/ServiceTracker.tsx
@@ -57,7 +57,7 @@ export const ServiceTracker: React.FC = () => {
           />
         </div>
       )}
-      {serviceData.data.services && (
+      {serviceData.data.services && Object.keys(serviceData.data.services).length > 0 && (
         <section className="grid grid-cols-1 md:grid-cols-2 mt-4 gap-2 md:gap-4">
           {Object.entries(serviceData.data.services).map(([name, data]) => {
             const { days, uptime, avgDelay } = processServiceData(data);
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
new file mode 100644
index 0000000..346d65e
--- /dev/null
+++ b/src/pages/ErrorPage.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+interface ErrorPageProps {
+  code?: string | number;
+  message?: string;
+}
+
+export default function ErrorPage({ code = "500", message }: ErrorPageProps) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="flex flex-col items-center gap-2">
+        <h1 className="text-4xl font-semibold">{code}</h1>
+        <p className="text-xl text-muted-foreground">
+          {message || t("error.somethingWentWrong")}
+        </p>
+        <div className="flex gap-2">
+          <Button onClick={() => window.location.reload()} variant="outline">
+            {t("error.tryAgain")}
+          </Button>
+          <Button onClick={() => navigate("/")} className="mt-2">
+            {t("error.backToHome")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}