From 03977c4b4d86ecb3f760126c9b57edce0a56675c Mon Sep 17 00:00:00 2001 From: hamster1963 <1410514192@qq.com> Date: Sat, 20 Jun 2026 00:06:50 +0800 Subject: [PATCH] refactor: update websocket context to use structured data and lazy load components - Changed websocket context to use `lastData` instead of `lastMessage` for better type safety and clarity. - Updated components to handle the new websocket data structure, including `DashCommand`, `Header`, `ServerDetail`, and various chart components. - Introduced lazy loading for `NotFound`, `ServerDetail`, and `NetworkChart` components to improve performance. - Added skeleton loading states for `ServerDetail` to enhance user experience during data fetching. - Updated tests to reflect changes in websocket data handling and component structure. --- src/App.tsx | 48 +++++++++++++++++-- src/components/DashCommand.tsx | 7 +-- src/components/Header.tsx | 8 +--- src/components/ServerDetailChart.tsx | 43 +++++++---------- src/components/ServerDetailSummary.tsx | 9 ++-- src/context/websocket-context.ts | 7 +-- src/context/websocket-provider.tsx | 32 ++++++++----- src/hooks/use-chart-history.ts | 5 +- src/main.tsx | 15 +++++- src/pages/Server.tsx | 10 ++-- src/pages/ServerDetail.tsx | 25 +++++----- src/test/components/dash-command.test.tsx | 31 ++++++------ src/test/components/header.test.tsx | 12 +++-- .../components/server-detail-chart.test.tsx | 18 ++++--- .../server-detail-components.test.tsx | 23 +++++---- src/test/context/providers.test.tsx | 39 +++++++++++++-- src/test/hooks/hooks.test.tsx | 6 +-- src/test/pages/Server.test.tsx | 26 +++++----- src/test/pages/pages.test.tsx | 7 ++- src/types/nezha-api.ts | 1 + 20 files changed, 225 insertions(+), 147 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 02b2a74..4205103 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ import { useQuery } from "@tanstack/react-query"; import type React from "react"; -import { useEffect, useState } from "react"; +import { lazy, Suspense, useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Route, BrowserRouter as Router, Routes } from "react-router-dom"; @@ -8,15 +8,39 @@ import { DashCommand } from "./components/DashCommand"; import ErrorBoundary from "./components/ErrorBoundary"; import Footer from "./components/Footer"; import Header, { RefreshToast } from "./components/Header"; +import { Skeleton } from "./components/ui/skeleton"; import { useBackground } from "./hooks/use-background"; import { useTheme } from "./hooks/use-theme"; import { InjectContext } from "./lib/inject"; import { fetchSetting } from "./lib/nezha-api"; import { cn } from "./lib/utils"; import ErrorPage from "./pages/ErrorPage"; -import NotFound from "./pages/NotFound"; import Server from "./pages/Server"; -import ServerDetail from "./pages/ServerDetail"; + +const NotFound = lazy(() => import("./pages/NotFound")); +const ServerDetail = lazy(() => import("./pages/ServerDetail")); + +function ServerDetailRouteFallback() { + return ( +
+
+
+ + +
+ +
+
+ + + + + + +
+
+ ); +} // Route checker component const RouteChecker: React.FC = () => { @@ -110,9 +134,23 @@ const MainApp: React.FC = () => { } /> - } /> + }> + + + } + /> } /> - } /> + + + + } + />