diff --git a/package.json b/package.json index 53fa015..0c227c0 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "@tanstack/react-query": "^5.51.23", "next": "14.2.5", "react": "^18", "react-dom": "^18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b4978a9..4dd44de 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@tanstack/react-query': + specifier: ^5.51.23 + version: 5.51.23(react@18.3.1) next: specifier: 14.2.5 version: 14.2.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -207,6 +210,14 @@ packages: '@swc/helpers@0.5.5': resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + '@tanstack/query-core@5.51.21': + resolution: {integrity: sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==} + + '@tanstack/react-query@5.51.23': + resolution: {integrity: sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==} + peerDependencies: + react: ^18.0.0 + '@types/json5@0.0.29': resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} @@ -1691,6 +1702,13 @@ snapshots: '@swc/counter': 0.1.3 tslib: 2.6.3 + '@tanstack/query-core@5.51.21': {} + + '@tanstack/react-query@5.51.23(react@18.3.1)': + dependencies: + '@tanstack/query-core': 5.51.21 + react: 18.3.1 + '@types/json5@0.0.29': {} '@types/node@20.14.15': diff --git a/src/app/layout.tsx b/src/app/layout.tsx index dfbdd79..6fa680c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -19,11 +19,13 @@ export default function RootLayout({ return ( -
+
+ ) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1ee3601..6613bc3 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,34 +1,15 @@ -"use client" -import useSWR from "swr" - -const fetcher = (url: string | URL | Request) => - fetch(url).then((r) => r.json()) - -interface Myip { - address: string - version: string -} +import Checker from "@/components/Checker" export default function Home() { - const { data: http4 } = useSWR("https://4.ipv6test.online/ip/myip", fetcher) - const { data: http6 } = useSWR("https://6.ipv6test.online/ip/myip", fetcher) - - return ( -
-
-
-

免费IPv6测试

+ <> +

IPv6测试

-
-
-

IPv4 {http4?.address}

-

IPv6 {http6?.address}

-
-
- {/* */} +
+
+
-
+ ) } diff --git a/src/components/CheckItem.tsx b/src/components/CheckItem.tsx new file mode 100644 index 0000000..9197552 --- /dev/null +++ b/src/components/CheckItem.tsx @@ -0,0 +1,50 @@ +import { CheckItemIconState, CheckItemType } from "@/types/CheckItem" +import { Icon } from "@iconify/react/dist/iconify.js" +import useSWRImmutable from "swr/immutable" + +type CheckItemProps = CheckItemType + +const fetcher = (url: string | URL | Request) => + fetch(url).then((r) => r.json()) + +const icon = { + ok: ( + + ), + loading: , + info: ( + + ), + error: ( + + ), +} + +export default function CheckItem({ url, content }: CheckItemProps) { + const { data, error, isLoading } = useSWRImmutable(url, fetcher) + + return ( + <> +
+ {error + ? icon["error"] + : isLoading + ? icon["loading"] + : data != undefined + ? icon[content(data).state] + : null} + + {data != undefined ? {content(data).text} : null} +
+ + ) +} diff --git a/src/components/Checker.tsx b/src/components/Checker.tsx new file mode 100644 index 0000000..df2c997 --- /dev/null +++ b/src/components/Checker.tsx @@ -0,0 +1,35 @@ +import CheckItem from "./CheckItem" +import { CheckItemType } from "@/types/CheckItem" + +const checkList: CheckItemType[] = [ + { + url: "https://6.ipv6test.online/ip/myip", + content: (data) => { + const isIPv6 = data?.version == 6 + return { + state: isIPv6 ? "ok" : "error", + text: "公网 IPv6 地址: " + (isIPv6 ? `${data?.address}` : "未检测到") + } + }, + }, + { + url: "https://4.ipv6test.online/ip/myip", + content: (data) => { + const isIPv4 = data?.version == 4 + return { + state: isIPv4 ? "ok" : "error", + text: "公网 IPv4 地址: " + (isIPv4 ? `${data?.address}` : "未检测到") + } + }, + }, +] + +export default function Checker() { + return ( + <> + {checkList.map((item, i) => { + return + })} + + ) +} diff --git a/src/components/IPAddress.tsx b/src/components/IPAddress.tsx new file mode 100644 index 0000000..c4d1cc7 --- /dev/null +++ b/src/components/IPAddress.tsx @@ -0,0 +1,10 @@ +type Props = { + address: string + version: number +}; + +export default function IPAddress({address, version}: Props) { + return ( +

IPv4 {address}

+ ) +} \ No newline at end of file diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index 3f7ecb1..7415ddd 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -3,15 +3,15 @@ import Link from "next/link" export default function Nav() { return ( -
+
  • - - + +
diff --git a/src/types/CheckItem.ts b/src/types/CheckItem.ts new file mode 100644 index 0000000..40d84c8 --- /dev/null +++ b/src/types/CheckItem.ts @@ -0,0 +1,6 @@ +export interface CheckItemType { + url: string + content: (data: any) => {state: CheckItemIconState, text: string} +} + +export type CheckItemIconState = "ok" | "loading" | "info" | "error" diff --git a/src/types/MyIPResponse.ts b/src/types/MyIPResponse.ts new file mode 100644 index 0000000..a7c31f4 --- /dev/null +++ b/src/types/MyIPResponse.ts @@ -0,0 +1,4 @@ +export default interface MyIPResponse { + address: string + version: number +} \ No newline at end of file