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

feat: components with custom background use transparent background

Browse Source
This commit is contained in:
hamster1963 2024-12-19 10:40:11 +08:00
parent d8c68ffe5f
commit 3d66582a3a
10 changed files with 106 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CycleTransferStatsClient.tsx
View File

@ -29,11 +29,17 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
className,
}) => {
const { t } = useTranslation()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return (
<div
className={cn(
"w-full bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
"w-full bg-white px-4 py-3 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
className,
{
"bg-card/50": customBackgroundImage,
},
)}
>
{serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {

12
src/components/GroupSwitch.tsx
View File

@ -10,9 +10,19 @@ export default function GroupSwitch({
currentTab: string
setCurrentTab: (tab: string) => void
}) {
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return (
<div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
<div
className={cn(
"flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800",
{
"bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
},
)}
>
{tabs.map((tab: string) => (
<div
key={tab}

9
src/components/LanguageSwitcher.tsx
View File

@ -7,12 +7,17 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"
import { CheckCircleIcon } from "@heroicons/react/20/solid"
import { useTranslation } from "react-i18next"
export function LanguageSwitcher() {
const { t, i18n } = useTranslation()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const locale = i18n.languages[0]
const handleSelect = (e: Event, newLocale: string) => {
@ -32,7 +37,9 @@ export function LanguageSwitcher() {
<Button
variant="outline"
size="sm"
className="rounded-full px-[9px] bg-white dark:bg-black"
className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
"bg-white/50 dark:bg-black/50": customBackgroundImage,
})}
>
{localeItems.find((item) => item.code === locale)?.name}
<span className="sr-only">Change language</span>

11
src/components/ServerCard.tsx
View File

@ -27,6 +27,11 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
} = formatNezhaInfo(now, serverInfo)
const showFlag = true
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
// @ts-expect-error ShowNetTransfer is a global variable
const showNetTransfer = window.ShowNetTransfer as boolean
@ -47,6 +52,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
<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,
},
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>
@ -187,6 +195,9 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
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",
showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
{
"bg-card/50": customBackgroundImage,
},
)}
onClick={() => navigate(`/server/${serverInfo.id}`, { replace: true })}
>

10
src/components/ServerCardInline.tsx
View File

@ -37,6 +37,10 @@ export default function ServerCardInline({
const showFlag = true
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const parsedData = parsePublicNote(public_note)
let daysLeft = 0
@ -55,6 +59,9 @@ export default function ServerCardInline({
<Card
className={cn(
"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
{
"bg-card/50": customBackgroundImage,
},
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>
@ -221,6 +228,9 @@ export default function ServerCardInline({
<Card
className={cn(
"flex min-h-[61px] min-w-[900px] items-center justify-start gap-3 p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
{
"bg-card/50": customBackgroundImage,
},
)}
onClick={() => navigate(`/server/${serverInfo.id}`)}
>

20
src/components/ServerOverview.tsx
View File

@ -33,6 +33,10 @@ export default function ServerOverview({
// @ts-expect-error CustomIllustration is a global variable
const customIllustration = window.CustomIllustration || "/animated-man.webp"
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return (
<>
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
@ -40,7 +44,9 @@ export default function ServerOverview({
onClick={() => {
setStatus("all")
}}
className={cn("hover:border-blue-500 cursor-pointer transition-all")}
className={cn("hover:border-blue-500 cursor-pointer transition-all", {
"bg-card/50": customBackgroundImage,
})}
>
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
@ -60,6 +66,9 @@ export default function ServerOverview({
}}
className={cn(
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
{
"bg-card/50": customBackgroundImage,
},
{
"ring-green-500 ring-2 border-transparent": status === "online",
},
@ -87,6 +96,9 @@ export default function ServerOverview({
}}
className={cn(
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
{
"bg-card/50": customBackgroundImage,
},
{
"ring-red-500 ring-2 border-transparent": status === "offline",
},
@ -107,7 +119,11 @@ export default function ServerOverview({
</section>
</CardContent>
</Card>
<Card className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all")}>
<Card
className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all", {
"bg-card/50": customBackgroundImage,
})}
>
<CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1 w-full">
<div className="flex items-center w-full justify-between">

8
src/components/ServiceTrackerClient.tsx
View File

@ -23,11 +23,17 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
avgDelay = 0,
}) => {
const { t } = useTranslation()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return (
<div
className={cn(
"w-full space-y-3 bg-white px-4 py-4 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
"w-full space-y-3 bg-white px-4 py-4 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
className,
{
"bg-card/50": customBackgroundImage,
},
)}
>
<div className="flex justify-between items-center">

12
src/components/TabSwitch.tsx
View File

@ -12,9 +12,19 @@ export default function TabSwitch({
setCurrentTab: (tab: string) => void
}) {
const { t } = useTranslation()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
return (
<div className="z-50 flex flex-col items-start rounded-[50px]">
<div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
<div
className={cn(
"flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800",
{
"bg-stone-100/50 dark:bg-stone-800/50": customBackgroundImage,
},
)}
>
{tabs.map((tab: string) => (
<div
key={tab}

8
src/components/ThemeSwitcher.tsx
View File

@ -17,6 +17,10 @@ export function ModeToggle() {
const { t } = useTranslation()
const { setTheme, theme } = useTheme()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const handleSelect = (e: Event, newTheme: Theme) => {
e.preventDefault()
setTheme(newTheme)
@ -28,7 +32,9 @@ export function ModeToggle() {
<Button
variant="outline"
size="sm"
className="rounded-full px-[9px] bg-white dark:bg-black"
className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
"bg-white/50 dark:bg-black/50": customBackgroundImage,
})}
>
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

16
src/pages/Server.tsx
View File

@ -43,6 +43,10 @@ export default function Servers() {
const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
const [currentGroup, setCurrentGroup] = useState<string>("All")
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
useEffect(() => {
const showServicesState = localStorage.getItem("showServices")
if (showServicesState !== null) {
@ -224,6 +228,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<MapIcon className="size-[13px]" />
@ -238,6 +245,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<ChartBarSquareIcon className="size-[13px]" />
@ -252,6 +262,9 @@ export default function Servers() {
{
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
},
{
"bg-opacity-50": customBackgroundImage,
},
)}
>
<ViewColumnsIcon className="size-[13px]" />
@ -267,6 +280,9 @@ export default function Servers() {
"shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] dark:bg-stone-700 bg-stone-200":
settingsOpen,
},
{
"dark:bg-stone-800/50 bg-stone-100/50 ": customBackgroundImage,
},
)}
>
<p className="text-[10px] font-bold whitespace-nowrap">