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: server name text no wrap

Browse Source
This commit is contained in:
hamster1963 2024-11-02 21:30:46 +08:00
parent f42c1d1166
commit 795ced7f38
8 changed files with 70 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/(main)/footer.tsx
View File

@ -1,7 +1,7 @@
import pack from "@/package.json"; import pack from "@/package.json";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
export const experimental_ppr = true export const experimental_ppr = true;
export default function Footer() { export default function Footer() {
const t = useTranslations("Footer"); const t = useTranslations("Footer");

4
app/(main)/header.tsx
View File

@ -11,7 +11,7 @@ import Image from "next/image";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
export const experimental_ppr = true export const experimental_ppr = true;
function Header() { function Header() {
const t = useTranslations("Header"); const t = useTranslations("Header");
@ -64,7 +64,7 @@ function Header() {
// https://github.com/streamich/react-use/blob/master/src/useInterval.ts // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
const useInterval = (callback: () => void, delay: number | null) => { const useInterval = (callback: () => void, delay: number | null) => {
const savedCallback = useRef<() => void>(() => { }); const savedCallback = useRef<() => void>(() => {});
useEffect(() => { useEffect(() => {
savedCallback.current = callback; savedCallback.current = callback;
}); });

2
app/(main)/page.tsx
View File

@ -1,7 +1,7 @@
import ServerList from "@/components/ServerList"; import ServerList from "@/components/ServerList";
import ServerOverview from "@/components/ServerOverview"; import ServerOverview from "@/components/ServerOverview";
export const experimental_ppr = true export const experimental_ppr = true;
export default function Home() { export default function Home() {
return ( return (
<div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6"> <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">

BIN
bun.lockb
View File

Binary file not shown.

105
components/ServerCard.tsx
View File

@ -4,10 +4,11 @@ import ServerUsageBar from "@/components/ServerUsageBar";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card } from "@/components/ui/card"; import { Card } from "@/components/ui/card";
import { import {
Popover, Tooltip,
PopoverContent, TooltipContent,
PopoverTrigger, TooltipProvider,
} from "@/components/ui/popover"; TooltipTrigger,
} from "@/components/ui/tooltip";
import getEnv from "@/lib/env-entry"; import getEnv from "@/lib/env-entry";
import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"; import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
@ -36,7 +37,7 @@ export default function ServerCard({
} }
> >
<section <section
className="grid items-center gap-2 lg:w-28 " className="grid items-center gap-2 lg:w-28"
style={{ gridTemplateColumns: "auto auto 1fr" }} style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span> <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
@ -48,17 +49,30 @@ export default function ServerCard({
> >
{showFlag ? <ServerFlag country_code={country_code} /> : null} {showFlag ? <ServerFlag country_code={country_code} /> : null}
</div> </div>
<p
className={cn( <TooltipProvider delayDuration={50}>
"break-all font-bold tracking-tight", <Tooltip>
showFlag ? "text-xs" : "text-sm", <TooltipTrigger asChild>
)} <div className="relative">
> <p
{name} className={cn(
</p> "break-all font-bold tracking-tight text-nowrap lg:max-w-[80px] overflow-x-scroll scrollbar-hidden pr-4",
showFlag ? "text-[11px]" : "text-sm",
)}
>
{name}
</p>
<div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
</div>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs text-muted-foreground">{name}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</section> </section>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<section className={"grid grid-cols-5 items-center gap-3"}> <section className={"grid grid-cols-5 items-center gap-3"}>
<div className={"flex w-14 flex-col"}> <div className={"flex w-14 flex-col"}>
<p className="text-xs text-muted-foreground">{t("CPU")}</p> <p className="text-xs text-muted-foreground">{t("CPU")}</p>
<div className="flex items-center text-xs font-semibold"> <div className="flex items-center text-xs font-semibold">
@ -130,35 +144,40 @@ export default function ServerCard({
: "lg:min-h-[61px] min-h-[93px]", : "lg:min-h-[61px] min-h-[93px]",
)} )}
> >
<Popover> <section
<PopoverTrigger asChild> className="grid items-center gap-2 lg:w-28"
<section style={{ gridTemplateColumns: "auto auto 1fr" }}
className="grid items-center gap-2 lg:w-28" >
style={{ gridTemplateColumns: "auto auto 1fr" }} <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
> <div
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span> className={cn(
<div "flex items-center justify-center",
className={cn( showFlag ? "min-w-[17px]" : "min-w-0",
"flex items-center justify-center", )}
showFlag ? "min-w-[17px]" : "min-w-0", >
)} {showFlag ? <ServerFlag country_code={country_code} /> : null}
> </div>
{showFlag ? <ServerFlag country_code={country_code} /> : null} <TooltipProvider delayDuration={50}>
</div> <Tooltip>
<p <TooltipTrigger asChild>
className={cn( <div className="relative">
"break-all font-bold tracking-tight", <p
showFlag ? "text-xs" : "text-sm", className={cn(
)} "break-all font-bold tracking-tight text-nowrap overflow-x-scroll scrollbar-hidden pr-4",
> showFlag ? "text-xs max-w-[80px]" : "text-sm",
{name} )}
</p> >
</section> {name}
</PopoverTrigger> </p>
<PopoverContent className="w-fit p-2" side="top"> <div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
<p className="text-sm text-muted-foreground">{t("Offline")}</p> </div>
</PopoverContent> </TooltipTrigger>
</Popover> <TooltipContent>
<p className="text-xs text-muted-foreground">{name}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</section>
</Card> </Card>
); );
} }

2
components/ui/tooltip.tsx
View File

@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "z-50 overflow-hidden rounded-[10px] border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className, className,
)} )}
{...props} {...props}

2
next.config.mjs
View File

@ -23,7 +23,7 @@ const withPWA = withPWAInit({
const nextConfig = { const nextConfig = {
output: "standalone", output: "standalone",
experimental: { experimental: {
ppr: 'incremental', ppr: "incremental",
}, },
reactStrictMode: true, reactStrictMode: true,
logging: { logging: {

4
package.json
View File

@ -32,7 +32,7 @@
"framer-motion": "^12.0.0-alpha.1", "framer-motion": "^12.0.0-alpha.1",
"lucide-react": "^0.451.0", "lucide-react": "^0.451.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"next": "^15.0.3-canary.3", "next": "^15.0.3-canary.4",
"next-auth": "^5.0.0-beta.25", "next-auth": "^5.0.0-beta.25",
"next-intl": "^3.24.0", "next-intl": "^3.24.0",
"next-runtime-env": "^3.2.2", "next-runtime-env": "^3.2.2",
@ -57,7 +57,7 @@
"@types/react": "npm:types-react@19.0.0-rc.1", "@types/react": "npm:types-react@19.0.0-rc.1",
"@types/react-dom": "npm:types-react-dom@19.0.0-rc.1", "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"eslint": "^9.13.0", "eslint": "^9.14.0",
"eslint-config-next": "15.0.2", "eslint-config-next": "15.0.2",
"postcss": "^8.4.47", "postcss": "^8.4.47",
"prettier": "^3.3.3", "prettier": "^3.3.3",