wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 09:31:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: lint

Browse Source
This commit is contained in:
hamster1963 2024-11-23 19:34:14 +08:00
parent 3275ea9211
commit 2e06f22a86
4 changed files with 51 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/main.tsx
View File

@ -7,17 +7,16 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
const queryClient = new QueryClient(); const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render( ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode> <React.StrictMode>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme"> <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<App /> <App />
<Toaster richColors position="top-right" /> <Toaster richColors position="top-right" />
<ReactQueryDevtools /> <ReactQueryDevtools />
</QueryClientProvider> </QueryClientProvider>
</ThemeProvider> </ThemeProvider>
</React.StrictMode>, </React.StrictMode>,
); );

58
src/pages/Server.tsx
View File

@ -1,11 +1,11 @@
import useWebSocket from 'react-use-websocket'; import useWebSocket from "react-use-websocket";
import { NezhaAPIResponse } from "@/types/nezha-api"; import { NezhaAPIResponse } from "@/types/nezha-api";
import ServerCard from '@/components/ServerCard'; import ServerCard from "@/components/ServerCard";
import { formatNezhaInfo } from '@/lib/utils'; import { formatNezhaInfo } from "@/lib/utils";
import ServerOverview from '@/components/ServerOverview'; import ServerOverview from "@/components/ServerOverview";
export default function Servers() { export default function Servers() {
const { lastMessage, readyState } = useWebSocket('/api/v1/ws/server', { const { lastMessage, readyState } = useWebSocket("/api/v1/ws/server", {
shouldReconnect: () => true, // 自动重连 shouldReconnect: () => true, // 自动重连
reconnectInterval: 3000, // 重连间隔 reconnectInterval: 3000, // 重连间隔
}); });
@ -16,29 +16,49 @@ export default function Servers() {
} }
// 解析消息 // 解析消息
const nezhaWsData = lastMessage ? JSON.parse(lastMessage.data) as NezhaAPIResponse : null; const nezhaWsData = lastMessage
? (JSON.parse(lastMessage.data) as NezhaAPIResponse)
: null;
if (!nezhaWsData) { if (!nezhaWsData) {
return <div className='flex flex-col items-center justify-center '><p className='font-semibold text-sm'>等待数据...</p></div>; return (
<div className="flex flex-col items-center justify-center ">
<p className="font-semibold text-sm">等待数据...</p>
</div>
);
} }
// 计算服务器总数和在线数量 // 计算服务器总数和在线数量
const totalServers = nezhaWsData.servers.length; const totalServers = nezhaWsData.servers.length;
const onlineServers = nezhaWsData.servers.filter(server => formatNezhaInfo(server).online).length; const onlineServers = nezhaWsData.servers.filter(
const offlineServers = nezhaWsData.servers.filter(server => !formatNezhaInfo(server).online).length; (server) => formatNezhaInfo(server).online,
const up = nezhaWsData.servers.reduce((total, server) => total + server.state.net_out_transfer, 0); ).length;
const down = nezhaWsData.servers.reduce((total, server) => total + server.state.net_in_transfer, 0); const offlineServers = nezhaWsData.servers.filter(
(server) => !formatNezhaInfo(server).online,
).length;
const up = nezhaWsData.servers.reduce(
(total, server) => total + server.state.net_out_transfer,
0,
);
const down = nezhaWsData.servers.reduce(
(total, server) => total + server.state.net_in_transfer,
0,
);
return ( return (
<div className="mx-auto w-full max-w-5xl px-0"> <div className="mx-auto w-full max-w-5xl px-0">
<ServerOverview total={totalServers} online={onlineServers} offline={offlineServers} up={up} down={down} /> <ServerOverview
<section total={totalServers}
className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6" online={onlineServers}
> offline={offlineServers}
up={up}
down={down}
/>
<section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
{nezhaWsData.servers.map((serverInfo) => ( {nezhaWsData.servers.map((serverInfo) => (
<ServerCard key={serverInfo.id} serverInfo={serverInfo} /> <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
))} ))}
</section> </section>
</div> </div>
); );
} }

1
src/types/nezha-api.ts
View File

@ -3,7 +3,6 @@ export interface NezhaAPIResponse {
servers: NezhaAPI[]; servers: NezhaAPI[];
} }
export interface NezhaAPI { export interface NezhaAPI {
id: number; id: number;
name: string; name: string;

14
vite.config.ts
View File

@ -12,11 +12,11 @@ export default defineConfig({
}, },
server: { server: {
proxy: { proxy: {
'/api/v1/ws/server': { "/api/v1/ws/server": {
target: 'ws://localhost:8080', target: "ws://localhost:8080",
changeOrigin: true, changeOrigin: true,
ws: true, ws: true,
}, },
} },
} },
}); });