fix: add service fetching and conditional rendering for service button

This commit is contained in:
hamster1963
2026-06-06 19:11:23 +08:00
parent 3c9613a179
commit 67f70ab7d3
+40 -22
View File
@@ -20,7 +20,7 @@ import { SORT_TYPES } from "@/context/sort-context";
import { useSort } from "@/hooks/use-sort"; import { useSort } from "@/hooks/use-sort";
import { useStatus } from "@/hooks/use-status"; import { useStatus } from "@/hooks/use-status";
import { useWebSocketContext } from "@/hooks/use-websocket-context"; import { useWebSocketContext } from "@/hooks/use-websocket-context";
import { fetchServerGroup } from "@/lib/nezha-api"; import { fetchServerGroup, fetchService } from "@/lib/nezha-api";
import { cn, formatNezhaInfo } from "@/lib/utils"; import { cn, formatNezhaInfo } from "@/lib/utils";
import type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api"; import type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
@@ -31,6 +31,16 @@ export default function Servers() {
queryKey: ["server-group"], queryKey: ["server-group"],
queryFn: () => fetchServerGroup(), queryFn: () => fetchServerGroup(),
}); });
const { data: serviceData } = useQuery({
queryKey: ["service"],
queryFn: () => fetchService(),
refetchOnMount: true,
refetchOnWindowFocus: true,
refetchInterval: 10000,
});
const hasServices =
!!serviceData?.data?.services &&
Object.keys(serviceData.data.services).length > 0;
const { lastMessage, connected } = useWebSocketContext(); const { lastMessage, connected } = useWebSocketContext();
const { status } = useStatus(); const { status } = useStatus();
const [showServices, setShowServices] = useState<string>("0"); const [showServices, setShowServices] = useState<string>("0");
@@ -69,6 +79,12 @@ export default function Servers() {
} }
}, []); }, []);
useEffect(() => {
if (!hasServices) {
setShowServices("0");
}
}, [hasServices]);
useEffect(() => { useEffect(() => {
const checkInlineSettings = () => { const checkInlineSettings = () => {
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
@@ -305,27 +321,29 @@ export default function Servers() {
> >
<MapIcon className="size-[13px]" /> <MapIcon className="size-[13px]" />
</button> </button>
<button {hasServices && (
onClick={() => { <button
setShowServices(showServices === "0" ? "1" : "0"); onClick={() => {
localStorage.setItem( setShowServices(showServices === "0" ? "1" : "0");
"showServices", localStorage.setItem(
showServices === "0" ? "1" : "0", "showServices",
); showServices === "0" ? "1" : "0",
}} );
className={cn( }}
"inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100", className={cn(
{ "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-2.5 text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100",
"inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600": {
showServices === "1", "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600":
}, showServices === "1",
{ },
"bg-opacity-70 dark:bg-opacity-70": customBackgroundImage, {
}, "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
)} },
> )}
<ChartBarSquareIcon className="size-[13px]" /> >
</button> <ChartBarSquareIcon className="size-[13px]" />
</button>
)}
<button <button
onClick={() => { onClick={() => {
setInline(inline === "0" ? "1" : "0"); setInline(inline === "0" ? "1" : "0");