diff --git a/src/components/CheckItem.tsx b/src/components/CheckItem.tsx index 2395710..60786f0 100644 --- a/src/components/CheckItem.tsx +++ b/src/components/CheckItem.tsx @@ -31,12 +31,15 @@ export default function CheckItem({ id, name, fetcher, + enabled, content, }: CheckItemProps) { const { data, error, isLoading } = useQuery({ queryKey: [id], queryFn: fetcher, - }) + enabled: !enabled ? undefined : enabled() + }, +) return ( <> diff --git a/src/components/Checker.tsx b/src/components/Checker.tsx index e1b5060..0ef2e3d 100644 --- a/src/components/Checker.tsx +++ b/src/components/Checker.tsx @@ -1,22 +1,39 @@ "use client" import CheckItem from "./CheckItem" import { CheckItemType } from "@/types/CheckItem" -import { useRef } from "react" -import { QueryClient, QueryClientProvider } from "@tanstack/react-query" +import { useRef, useEffect, useState } from "react" +import { + QueryClient, + QueryClientProvider, + useQueryClient, +} from "@tanstack/react-query" + +const queryClient = new QueryClient() export default function Checker() { - const IPv4 = useRef("") - const IPv6 = useRef("") + // const IPv4 = useRef(null) + const [IPv6, setIPv6] = useState(null) + + useEffect(() => { + if (IPv6) { + queryClient.invalidateQueries( + { + queryKey: ['ISP'], + refetchType: 'all', + }, + ) + } + }, [IPv6]) const checkList: CheckItemType[] = [ { id: "IPv6", name: "公网 IPv6 地址", - fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()), + fetcher: () => fetch("/api/ip/myip").then((res) => res.json()), content: (data) => { const success = data?.version == 6 if (success && data.address != null) { - IPv6.current = data.address + setIPv6(data.address) } return { state: success ? "ok" : "error", @@ -27,13 +44,14 @@ export default function Checker() { { id: "IPv4", name: "公网 IPv4 地址", - fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()), + fetcher: () => + fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()), content: (data) => { const success = data?.version == 4 - if (success && data.address != null) { - IPv4.current = data.address - } + // if (success && data.address != null) { + // IPv4.current = data.address + // } return { state: success ? "ok" : "error", @@ -44,7 +62,7 @@ export default function Checker() { { id: "ipv4andipv6", name: "双协议栈测试", - fetcher: () => fetch("https://test.ipv6test.online/ip/myip").then((res) => res.json()), + fetcher: () => fetch("/api/ip/myip").then((res) => res.json()), content: (data) => { const isIPv6 = data?.version == 6 const isIPv4 = data?.version == 4 @@ -62,20 +80,19 @@ export default function Checker() { fetch("https://test.ipv6test.online/ip/isp", { method: "POST", body: JSON.stringify({ - address: IPv6.current, + address: IPv6, }), }).then((res) => res.json()), + enabled: () => !!IPv6, // 确保在检测到 IPv6 地址时也进行 ISP 检查 content: (data) => { return { - text: data.isp, + state: data.isp ? "ok" : "error", // 确保返回 state 字段 + text: data.isp || "未检测到", } }, }, ] - const queryClient = new QueryClient(); - - return ( {checkList.map((item, i) => { @@ -85,6 +102,7 @@ export default function Checker() { id={item.id} name={item.name} fetcher={item.fetcher} + enabled={item.enabled} content={item.content} /> ) diff --git a/src/types/CheckItem.ts b/src/types/CheckItem.ts index 91c05b3..ef07d64 100644 --- a/src/types/CheckItem.ts +++ b/src/types/CheckItem.ts @@ -2,6 +2,7 @@ export interface CheckItemType { id: string name: string fetcher: () => Promise + enabled?: () => boolean content: (data: any) => {state?: CheckItemIconState, text: string} }