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

fix: server name mask

Browse Source
This commit is contained in:
hamster1963 2024-11-02 23:35:52 +08:00
parent 42c7acabb3
commit 8930cea0c4
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/ServerCard.tsx
View File

@ -14,6 +14,7 @@ import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
export default function ServerCard({
serverInfo,
@ -26,9 +27,19 @@ export default function ServerCard({
formatNezhaInfo(serverInfo);
const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
const nameRef = useRef<HTMLParagraphElement | null>(null);
const [isNameOverflow, setIsNameOverflow] = useState(false);
useEffect(() => {
if (nameRef.current) {
setIsNameOverflow(
nameRef.current.scrollWidth > nameRef.current.clientWidth,
);
}
}, [name]);
return online ? (
<Link href={`/${id}`} prefetch={true}>
<Card
@ -55,6 +66,7 @@ export default function ServerCard({
<TooltipTrigger asChild>
<div className="relative">
<p
ref={nameRef}
className={cn(
"break-all font-bold tracking-tight text-nowrap lg:max-w-[80px] overflow-x-scroll scrollbar-hidden pr-4",
showFlag ? "text-[11px]" : "text-sm",
@ -62,7 +74,9 @@ export default function ServerCard({
>
{name}
</p>
<div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
{isNameOverflow && (
<div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
)}
</div>
</TooltipTrigger>
<TooltipContent>
@ -169,7 +183,9 @@ export default function ServerCard({
>
{name}
</p>
<div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
{isNameOverflow && (
<div className="absolute inset-y-0 right-0 w-4 bg-gradient-to-l from-background to-transparent pointer-events-none" />
)}
</div>
</TooltipTrigger>
<TooltipContent>