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 { useStatus } from "@/hooks/use-status";
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 type { NezhaWebsocketResponse, ServerGroup } from "@/types/nezha-api";
@@ -31,6 +31,16 @@ export default function Servers() {
queryKey: ["server-group"],
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 { status } = useStatus();
const [showServices, setShowServices] = useState<string>("0");
@@ -69,6 +79,12 @@ export default function Servers() {
}
}, []);
useEffect(() => {
if (!hasServices) {
setShowServices("0");
}
}, [hasServices]);
useEffect(() => {
const checkInlineSettings = () => {
const isMobile = window.innerWidth < 768;
@@ -305,27 +321,29 @@ export default function Servers() {
>
<MapIcon className="size-[13px]" />
</button>
<button
onClick={() => {
setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem(
"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",
{
"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,
},
)}
>
<ChartBarSquareIcon className="size-[13px]" />
</button>
{hasServices && (
<button
onClick={() => {
setShowServices(showServices === "0" ? "1" : "0");
localStorage.setItem(
"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",
{
"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,
},
)}
>
<ChartBarSquareIcon className="size-[13px]" />
</button>
)}
<button
onClick={() => {
setInline(inline === "0" ? "1" : "0");