root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve server details page with type safety and dynamic tab rendering

Browse Source
This commit is contained in:
hamster1963 2025-02-06 00:10:43 +08:00
parent bf959fbb9a
commit 010cfce1c4
1 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/(main)/server/[id]/page.tsx
View File

@ -9,27 +9,45 @@ import { Separator } from "@/components/ui/separator"
import getEnv from "@/lib/env-entry" import getEnv from "@/lib/env-entry"
import { use, useState } from "react" import { use, useState } from "react"
export default function Page(props: { params: Promise<{ id: string }> }) { type PageProps = {
const params = use(props.params) params: Promise<{ id: string }>
const tabs = ["Detail", "Network"] }
const [currentTab, setCurrentTab] = useState(tabs[0])
type TabType = "Detail" | "Network"
export default function Page({ params }: PageProps) {
const { id } = use(params)
const serverId = Number(id)
const tabs: TabType[] = ["Detail", "Network"]
const [currentTab, setCurrentTab] = useState<TabType>(tabs[0])
const tabContent = {
Detail: <ServerDetailChartClient server_id={serverId} show={currentTab === "Detail"} />,
Network: (
<>
{getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={serverId} />}
<NetworkChartClient server_id={serverId} show={currentTab === "Network"} />
</>
),
}
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-2"> <main className="mx-auto grid w-full max-w-5xl gap-2">
<ServerDetailClient server_id={Number(params.id)} /> <ServerDetailClient server_id={serverId} />
<section className="flex items-center my-2 w-full">
<nav className="flex items-center my-2 w-full">
<Separator className="flex-1" /> <Separator className="flex-1" />
<div className="flex justify-center w-full max-w-[200px]"> <div className="flex justify-center w-full max-w-[200px]">
<TabSwitch tabs={tabs} currentTab={currentTab} setCurrentTab={setCurrentTab} /> <TabSwitch
tabs={tabs}
currentTab={currentTab}
setCurrentTab={(tab: string) => setCurrentTab(tab as TabType)}
/>
</div> </div>
<Separator className="flex-1" /> <Separator className="flex-1" />
</section> </nav>
<div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
<ServerDetailChartClient server_id={Number(params.id)} show={currentTab === tabs[0]} /> {tabContent[currentTab]}
</div> </main>
<div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
{getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={Number(params.id)} />}
<NetworkChartClient server_id={Number(params.id)} show={currentTab === tabs[1]} />
</div>
</div>
) )
} }