diff --git a/app/(main)/ClientComponents/ServerListClient.tsx b/app/(main)/ClientComponents/ServerListClient.tsx index ff5345c..d907280 100644 --- a/app/(main)/ClientComponents/ServerListClient.tsx +++ b/app/(main)/ClientComponents/ServerListClient.tsx @@ -82,12 +82,20 @@ export default function ServerListClient() { ? sortedServers : sortedServers.filter((server) => server.tag === tag); + const tagCountMap: Record = {}; + sortedServers.forEach((server) => { + if (server.tag) { + tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1; + } + }); + return ( <> {getEnv("NEXT_PUBLIC_ShowTag") === "true" && uniqueTags.length > 1 && ( )} diff --git a/bun.lockb b/bun.lockb index 8a8e816..5b87449 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/LanguageSwitcher.tsx b/components/LanguageSwitcher.tsx index 28f3cdf..2febc2f 100644 --- a/components/LanguageSwitcher.tsx +++ b/components/LanguageSwitcher.tsx @@ -9,16 +9,17 @@ import { } from "@/components/ui/dropdown-menu"; import { localeItems } from "@/i18n-metadata"; import { setUserLocale } from "@/i18n/locale"; +import { CheckCircleIcon } from "@heroicons/react/20/solid"; import { useLocale } from "next-intl"; import * as React from "react"; export function LanguageSwitcher() { const locale = useLocale(); - function onChange(value: string) { - const locale = value; - setUserLocale(locale); - } + const handleSelect = (e: Event, newLocale: string) => { + e.preventDefault(); // 阻止默认的关闭行为 + setUserLocale(newLocale); + }; return ( @@ -32,10 +33,15 @@ export function LanguageSwitcher() { Change language - + {localeItems.map((item) => ( - onChange(item.code)}> - {item.name} + handleSelect(e, item.code)} + className={locale === item.code ? "bg-muted gap-3" : ""} + > + {item.name}{" "} + {locale === item.code && } ))} diff --git a/components/Switch.tsx b/components/Switch.tsx index acd68c6..79d6cda 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -8,10 +8,12 @@ import React, { createRef, useEffect, useRef } from "react"; export default function Switch({ allTag, nowTag, + tagCountMap, onTagChange, }: { allTag: string[]; nowTag: string; + tagCountMap: Record; onTagChange: (tag: string) => void; }) { const scrollRef = useRef(null); @@ -84,9 +86,14 @@ export default function Switch({ /> )}
-

- {tag === "defaultTag" ? t("defaultTag") : tag} -

+
+ {tag === "defaultTag" ? t("defaultTag") : tag}{" "} + {tag !== "defaultTag" && ( +
+ {tagCountMap[tag]} +
+ )} +
))} diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx index c2f41a6..2daabf1 100644 --- a/components/ThemeSwitcher.tsx +++ b/components/ThemeSwitcher.tsx @@ -7,14 +7,21 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; +import { cn } from "@/lib/utils"; +import { CheckCircleIcon } from "@heroicons/react/20/solid"; import { Moon, Sun } from "lucide-react"; import { useTranslations } from "next-intl"; import { useTheme } from "next-themes"; -import * as React from "react"; export function ModeToggle() { - const { setTheme } = useTheme(); + const { setTheme, theme } = useTheme(); const t = useTranslations("ThemeSwitcher"); + + const handleSelect = (e: Event, newTheme: string) => { + e.preventDefault(); + setTheme(newTheme); + }; + return ( @@ -28,15 +35,27 @@ export function ModeToggle() { Toggle theme - - setTheme("light")}> - {t("Light")} + + handleSelect(e, "light")} + > + {t("Light")}{" "} + {theme === "light" && } - setTheme("dark")}> - {t("Dark")} + handleSelect(e, "dark")} + > + {t("Dark")}{" "} + {theme === "dark" && } - setTheme("system")}> - {t("System")} + handleSelect(e, "system")} + > + {t("System")}{" "} + {theme === "system" && } diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index ab39dec..6ce8530 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -64,7 +64,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg shadow-neutral-200/50 dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-md border bg-popover p-1.5 text-popover-foreground shadow-2xl dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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, )} {...props} @@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<