feat: render protocl and udp

src/components/Collpase.tsx

@@ -39,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
+          'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
         )}
       >
         {content}

src/components/ProxyNodeCard.tsx

@@ -1,3 +1,4 @@
+import { createMemo } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { useProxies } from '~/signals/proxies'
 
@@ -7,17 +8,24 @@ export default (props: {
   onClick?: () => void
 }) => {
   const { proxyName, isSelected, onClick } = props
-  const { delayMap } = useProxies()
+  const { delayMap, proxyNodeMap } = useProxies()
+  const proxyNode = createMemo(() => proxyNodeMap()[proxyName])
   const Delay = (proxyname: string) => {
     const delay = delayMap()[proxyname]
+    let textClassName = 'text-green-500'
 
     if (typeof delay !== 'number' || delay === 0) {
       return ''
     }
 
-    return <span>{delay}ms</span>
+    if (delay > 500) {
+      textClassName = 'text-red-500'
+    } else if (delay > 200) {
+      textClassName = 'text-yellow-500'
+    }
+
+    return <span class={textClassName}>{delay}ms</span>
   }
-  console.log(proxyName)
 
   return (
     <div
@@ -26,13 +34,19 @@ export default (props: {
           ? 'border-primary bg-success-content text-success'
           : 'border-secondary',
         onClick && 'cursor-pointer',
-        'card card-bordered tooltip tooltip-bottom card-compact flex flex-row justify-between gap-2 p-4',
+        'card card-bordered tooltip tooltip-bottom card-compact gap-2 p-4',
       )}
       onClick={() => onClick?.()}
       data-tip={proxyName}
     >
-      <span class="truncate">{proxyName}</span>
+      <div class="flex truncate">{proxyName}</div>
-      <span>{Delay(proxyName)}</span>
+      <div class="flex flex-row">
+        <div class="flex flex-1 truncate">
+          {proxyNode().type}
+          {proxyNode().udp ? ' :: udp' : ''}
+        </div>
+        <div>{Delay(proxyName)}</div>
+      </div>
     </div>
   )
 }

src/signals/proxies.ts

@@ -1,12 +1,16 @@
 import { createSignal } from 'solid-js'
 import { useRequest } from '~/signals'
-import type { Proxy, ProxyProvider } from '~/types'
+import type { Proxy, ProxyNode, ProxyProvider } from '~/types'
 
 // these signals should be global state
 const [proxies, setProxies] = createSignal<Proxy[]>([])
-const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
 const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])
 
+const [delayMap, setDelayMap] = createSignal<Record<string, number>>({})
+const [proxyNodeMap, setProxyNodeMap] = createSignal<Record<string, ProxyNode>>(
+  {},
+)
+
 export function useProxies() {
   const request = useRequest()
 
@@ -18,6 +22,7 @@ export function useProxies() {
 
     Object.values(providers).forEach((provider) => {
       provider.proxies.forEach((proxy) => {
+        setProxyNodeMap({ ...proxyNodeMap(), [proxy.name]: proxy })
         delay[proxy.name] = proxy.history[proxy.history.length - 1]?.delay
       })
     })
@@ -73,6 +78,7 @@ export function useProxies() {
     proxies,
     proxyProviders,
     delayTestByProxyGroupName,
+    proxyNodeMap,
     delayMap,
     updateProxy,
     setProxiesByProxyName,

src/types.d.ts

@@ -21,22 +21,24 @@ export type Proxy = {
   now: string
 }
 
+export type ProxyNode = {
+  alive: boolean
+  type: string
+  name: string
+  tfo: boolean
+  udp: boolean
+  xudp: boolean
+  id: string
+  extra: Record<string, unknown>
+  history: {
+    time: string
+    delay: number
+  }[]
+}
+
 export type ProxyProvider = {
   name: string
-  proxies: {
+  proxies: ProxyNode[]
-    alive: boolean
-    type: string
-    name: string
-    tfo: boolean
-    udp: boolean
-    xudp: boolean
-    id: string
-    extra: Record<string, unknown>
-    history: {
-      time: string
-      delay: number
-    }[]
-  }[]
   testUrl: string
   updatedAt: string
   vehicleType: string