mirror of
https://github.com/Buriburizaem0n/nezha-dash-v1.git
synced 2026-09-21 10:40:14 +00:00
feat: implement command context and provider for command handling; add search button component; enhance network chart with packet loss calculation and display; update translations for new features
This commit is contained in:
+48
-36
@@ -1,7 +1,7 @@
|
||||
import { useQuery } from "@tanstack/react-query"
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
|
||||
import { Route, BrowserRouter as Router, Routes, useLocation } from "react-router-dom"
|
||||
|
||||
import { DashCommand } from "./components/DashCommand"
|
||||
import ErrorBoundary from "./components/ErrorBoundary"
|
||||
@@ -17,7 +17,12 @@ import NotFound from "./pages/NotFound"
|
||||
import Server from "./pages/Server"
|
||||
import ServerDetail from "./pages/ServerDetail"
|
||||
|
||||
const App: React.FC = () => {
|
||||
// Route checker component
|
||||
const RouteChecker: React.FC = () => {
|
||||
return <MainApp />
|
||||
}
|
||||
|
||||
const MainApp: React.FC = () => {
|
||||
const { data: settingData, error } = useQuery({
|
||||
queryKey: ["setting"],
|
||||
queryFn: () => fetchSetting(),
|
||||
@@ -66,42 +71,49 @@ const App: React.FC = () => {
|
||||
const customMobileBackgroundImage = window.CustomMobileBackgroundImage !== "" ? window.CustomMobileBackgroundImage : undefined
|
||||
|
||||
return (
|
||||
<Router basename={import.meta.env.BASE_URL}>
|
||||
<ErrorBoundary>
|
||||
{/* 固定定位的背景层 */}
|
||||
{customBackgroundImage && (
|
||||
<div
|
||||
className={cn("fixed inset-0 z-0 bg-cover min-h-lvh bg-no-repeat bg-center dark:brightness-75", {
|
||||
"hidden sm:block": customMobileBackgroundImage,
|
||||
})}
|
||||
style={{ backgroundImage: `url(${customBackgroundImage})` }}
|
||||
/>
|
||||
)}
|
||||
{customMobileBackgroundImage && (
|
||||
<div
|
||||
className={cn("fixed inset-0 z-0 bg-cover min-h-lvh bg-no-repeat bg-center sm:hidden dark:brightness-75")}
|
||||
style={{ backgroundImage: `url(${customMobileBackgroundImage})` }}
|
||||
/>
|
||||
)}
|
||||
<ErrorBoundary>
|
||||
{/* 固定定位的背景层 */}
|
||||
{customBackgroundImage && (
|
||||
<div
|
||||
className={cn("flex min-h-screen w-full flex-col", {
|
||||
"bg-background": !customBackgroundImage,
|
||||
className={cn("fixed inset-0 z-0 bg-cover min-h-lvh bg-no-repeat bg-center dark:brightness-75", {
|
||||
"hidden sm:block": customMobileBackgroundImage,
|
||||
})}
|
||||
>
|
||||
<main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
|
||||
<RefreshToast />
|
||||
<Header />
|
||||
<DashCommand />
|
||||
<Routes>
|
||||
<Route path="/" element={<Server />} />
|
||||
<Route path="/server/:id" element={<ServerDetail />} />
|
||||
<Route path="/error" element={<ErrorPage />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
style={{ backgroundImage: `url(${customBackgroundImage})` }}
|
||||
/>
|
||||
)}
|
||||
{customMobileBackgroundImage && (
|
||||
<div
|
||||
className={cn("fixed inset-0 z-0 bg-cover min-h-lvh bg-no-repeat bg-center sm:hidden dark:brightness-75")}
|
||||
style={{ backgroundImage: `url(${customMobileBackgroundImage})` }}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={cn("flex min-h-screen w-full flex-col", {
|
||||
"bg-background": !customBackgroundImage,
|
||||
})}
|
||||
>
|
||||
<main className="flex z-20 min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 p-4 md:p-10 md:pt-8">
|
||||
<RefreshToast />
|
||||
<Header />
|
||||
<DashCommand />
|
||||
<Routes>
|
||||
<Route path="/" element={<Server />} />
|
||||
<Route path="/server/:id" element={<ServerDetail />} />
|
||||
<Route path="/error" element={<ErrorPage />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
)
|
||||
}
|
||||
|
||||
// Main App wrapper with router
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<Router basename={import.meta.env.BASE_URL}>
|
||||
<RouteChecker />
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user