mirror of
https://github.com/woodchen-ink/nezha-dash-v1.git
synced 2025-07-18 09:31:55 +08:00
feat: FixedTopServerName
This commit is contained in:
hamster1963
parent
ae8e3ea144
commit
b8ec538fd9
12
package.json
12
package.json
@ -24,8 +24,8 @@
|
||||
"@radix-ui/react-separator": "^1.1.1",
|
||||
"@radix-ui/react-slot": "^1.1.1",
|
||||
"@radix-ui/react-switch": "^1.1.2",
|
||||
"@tanstack/react-query": "^5.62.7",
|
||||
"@tanstack/react-query-devtools": "^5.62.7",
|
||||
"@tanstack/react-query": "^5.62.8",
|
||||
"@tanstack/react-query-devtools": "^5.62.8",
|
||||
"@tanstack/react-table": "^8.20.6",
|
||||
"@trivago/prettier-plugin-sort-imports": "^5.2.0",
|
||||
"@types/d3-geo": "^3.1.0",
|
||||
@ -36,7 +36,7 @@
|
||||
"d3-geo": "^3.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"framer-motion": "^12.0.0-alpha.2",
|
||||
"i18next": "^24.1.0",
|
||||
"i18next": "^24.1.2",
|
||||
"lucide-react": "^0.460.0",
|
||||
"luxon": "^3.5.0",
|
||||
"prettier-plugin-tailwindcss": "^0.6.9",
|
||||
@ -52,16 +52,16 @@
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react": "^19.0.2",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"@vitejs/plugin-react-swc": "^3.7.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-react-hooks": "^5.1.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.16",
|
||||
"globals": "^15.13.0",
|
||||
"globals": "^15.14.0",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.16",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.6.3",
|
||||
"typescript-eslint": "^8.18.1",
|
||||
"vite": "^6.0.3"
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import ServerFlag from "@/components/ServerFlag"
|
||||
import ServerUsageBar from "@/components/ServerUsageBar"
|
||||
import { formatBytes } from "@/lib/format"
|
||||
import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
|
||||
import { cn, formatNezhaInfo, parsePublicNote } from "@/lib/utils"
|
||||
import { NezhaServer } from "@/types/nezha-api"
|
||||
import { useTranslation } from "react-i18next"
|
||||
@ -14,7 +15,10 @@ import { Card } from "./ui/card"
|
||||
export default function ServerCard({ now, serverInfo }: { now: number; serverInfo: NezhaServer }) {
|
||||
const { t } = useTranslation()
|
||||
const navigate = useNavigate()
|
||||
const { name, country_code, online, cpu, up, down, mem, stg, net_in_transfer, net_out_transfer, public_note } = formatNezhaInfo(now, serverInfo)
|
||||
const { name, country_code, online, cpu, up, down, mem, stg, net_in_transfer, net_out_transfer, public_note, platform } = formatNezhaInfo(
|
||||
now,
|
||||
serverInfo,
|
||||
)
|
||||
|
||||
const showFlag = true
|
||||
|
||||
@ -25,16 +29,31 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
||||
// @ts-expect-error ShowNetTransfer is a global variable
|
||||
const showNetTransfer = window.ShowNetTransfer as boolean
|
||||
|
||||
// @ts-expect-error FixedTopServerName is a global variable
|
||||
const fixedTopServerName = window.FixedTopServerName as boolean
|
||||
|
||||
const parsedData = parsePublicNote(public_note)
|
||||
|
||||
return online ? (
|
||||
<Card
|
||||
className={cn("flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors", {
|
||||
"bg-card/50": customBackgroundImage,
|
||||
})}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
|
||||
{
|
||||
"flex-col": fixedTopServerName,
|
||||
"lg:flex-row": !fixedTopServerName,
|
||||
},
|
||||
{
|
||||
"bg-card/50": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={() => navigate(`/server/${serverInfo.id}`)}
|
||||
>
|
||||
<section className={cn("grid items-center gap-2 lg:w-40")} style={{ gridTemplateColumns: "auto auto 1fr" }}>
|
||||
<section
|
||||
className={cn("grid items-center gap-2", {
|
||||
"lg:w-40": !fixedTopServerName,
|
||||
})}
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
|
||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
@ -45,7 +64,26 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex flex-col gap-2">
|
||||
<section className={cn("grid grid-cols-5 items-center gap-3")}>
|
||||
<section
|
||||
className={cn("grid grid-cols-5 items-center gap-3", {
|
||||
"lg:grid-cols-6 lg:gap-4": fixedTopServerName,
|
||||
})}
|
||||
>
|
||||
{fixedTopServerName && (
|
||||
<div className={"hidden col-span-1 items-center lg:flex lg:flex-row gap-2"}>
|
||||
<div className="text-xs font-semibold">
|
||||
{platform.includes("Windows") ? (
|
||||
<MageMicrosoftWindows className="size-[10px]" />
|
||||
) : (
|
||||
<p className={`fl-${GetFontLogoClass(platform)}`} />
|
||||
)}
|
||||
</div>
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{t("serverCard.system")}</p>
|
||||
<div className="flex items-center text-[10.5px] font-semibold">{platform.includes("Windows") ? "Windows" : GetOsName(platform)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={"flex w-14 flex-col"}>
|
||||
<p className="text-xs text-muted-foreground">{"CPU"}</p>
|
||||
<div className="flex items-center text-xs font-semibold">{cpu.toFixed(2)}%</div>
|
||||
@ -96,15 +134,24 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
|
||||
) : (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-start gap-3 sm:gap-0 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
|
||||
"flex flex-col items-center justify-start gap-3 sm:gap-0 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
|
||||
showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
|
||||
{
|
||||
"flex-col": fixedTopServerName,
|
||||
"lg:flex-row": !fixedTopServerName,
|
||||
},
|
||||
{
|
||||
"bg-card/50": customBackgroundImage,
|
||||
},
|
||||
)}
|
||||
onClick={() => navigate(`/server/${serverInfo.id}`, { replace: true })}
|
||||
>
|
||||
<section className={cn("grid items-center gap-2 lg:w-40")} style={{ gridTemplateColumns: "auto auto 1fr" }}>
|
||||
<section
|
||||
className={cn("grid items-center gap-2", {
|
||||
"lg:w-40": !fixedTopServerName,
|
||||
})}
|
||||
style={{ gridTemplateColumns: "auto auto 1fr" }}
|
||||
>
|
||||
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
|
||||
<div className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")}>
|
||||
{showFlag ? <ServerFlag country_code={country_code} /> : null}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user