feat: add dual protocol stack check

src/components/CheckItem.tsx

@@ -12,7 +12,7 @@ const icon = {
   ok: (
     <Icon
       icon='material-symbols:check-circle-outline-rounded'
-      className='stroke-1 text-info h-6 w-6 shrink-0'
+      className='stroke-1 text-success h-6 w-6 shrink-0'
     />
   ),
   loading: <span className='loading loading-spinner loading-xs'></span>,
@@ -25,13 +25,13 @@ const icon = {
   error: (
     <Icon
       icon='material-symbols:error-outline'
-      className='stroke-1 text-info h-6 w-6 shrink-0'
+      className='stroke-1 text-error h-6 w-6 shrink-0'
     />
   ),
 }
 
-export default function CheckItem({ url, content }: CheckItemProps) {
+export default function CheckItem({ name, url, content }: CheckItemProps) {
-  const { data, error, isLoading } = useSWRImmutable(url, fetcher)
+  const { data, error, isLoading } = useSWRImmutable<any, Error>(url, fetcher)
 
   return (
     <>
@@ -44,7 +44,17 @@ export default function CheckItem({ url, content }: CheckItemProps) {
           ? icon[content(data).state]
           : null}
 
-        {data != undefined ? <span>{content(data).text}</span> : null}
+        <div>
+          <span className="mr-4"><b>{name}</b></span>
+
+          <span>
+            {data != undefined
+              ? content(data).text
+              : error != null
+              ? `无法获取: ${error.name}`
+              : null}
+          </span>
+        </div>
       </div>
     </>
   )

src/components/Checker.tsx

@@ -4,22 +4,37 @@ import { CheckItemType } from "@/types/CheckItem"
 
 const checkList: CheckItemType[] = [
   {
+    name: "公网 IPv6 地址",
     url: "https://6.ipv6test.online/ip/myip",
     content: (data) => {
-      const isIPv6 = data?.version == 6
+      const success = data?.version == 6
       return {
-        state: isIPv6 ? "ok" : "error",
+        state: success ? "ok" : "error",
-        text: "公网 IPv6 地址: " + (isIPv6 ? `${data?.address}` : "未检测到"),
+        text: (success ? `${data?.address}` : "未检测到"),
       }
     },
   },
   {
+    name: "公网 IPv4 地址",
     url: "https://4.ipv6test.online/ip/myip",
     content: (data) => {
-      const isIPv4 = data?.version == 4
+      const success = data?.version == 4
       return {
-        state: isIPv4 ? "ok" : "error",
+        state: success ? "ok" : "error",
-        text: "公网 IPv4 地址: " + (isIPv4 ? `${data?.address}` : "未检测到"),
+        text: (success ? `${data?.address}` : "未检测到"),
+      }
+    },
+  },
+  {
+    name: "双协议栈测试",
+    url: "https://test.ipv6test.online/ip/myip",
+    content: (data) => {
+      const isIPv6 = data?.version == 6
+      const isIPv4 = data?.version == 4
+
+      return {
+        state: isIPv6 ? "ok" : "error",
+        text: isIPv6 ? "你的网络IPv6访问优先" : isIPv4 ? "你的网络IPv4访问优先" : "未检测到",
       }
     },
   },
@@ -29,7 +44,7 @@ export default function Checker() {
   return (
     <>
       {checkList.map((item, i) => {
-        return <CheckItem key={i} url={item.url} content={item.content} />
+        return <CheckItem key={i} name={item.name} url={item.url} content={item.content} />
       })}
     </>
   )

src/types/CheckItem.ts

@@ -1,4 +1,5 @@
 export interface CheckItemType {
+  name: string
   url: string
   content: (data: any) => {state: CheckItemIconState, text: string}
 }