feat: update ISP check

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 (
     <>

src/components/Checker.tsx

@@ -1,22 +1,39 @@
 "use client"
 import CheckItem from "./CheckItem"
 import { CheckItemType } from "@/types/CheckItem"
-import { useRef } from "react"
+import { useRef, useEffect, useState } from "react"
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from "@tanstack/react-query"
+
+const queryClient = new QueryClient()
 
 export default function Checker() {
-  const IPv4 = useRef("")
+  // const IPv4 = useRef(null)
-  const IPv6 = useRef("")
+  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) {
+        // if (success && data.address != null) {
-          IPv4.current = data.address
+        //   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 (
     <QueryClientProvider client={queryClient}>
       {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}
           />
         )

src/types/CheckItem.ts

@@ -2,6 +2,7 @@ export interface CheckItemType {
   id: string
   name: string
   fetcher: () => Promise<any>
+  enabled?: () => boolean
   content: (data: any) => {state?: CheckItemIconState, text: string}
 }