From 44df379fd6a18ef7d855dac91897480421e494e5 Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Wed, 30 Aug 2023 23:54:49 +0800
Subject: [PATCH] feat: render protocl and udp

---
 src/components/Collpase.tsx      |  2 +-
 src/components/ProxyNodeCard.tsx | 26 ++++++++++++++++++++------
 src/signals/proxies.ts           | 10 ++++++++--
 src/types.d.ts                   | 30 ++++++++++++++++--------------
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/components/Collpase.tsx b/src/components/Collpase.tsx
index 7f96742..c41a889 100644
--- a/src/components/Collpase.tsx
+++ b/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}
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index f0d4115..f0d16c4 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/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>
-      <span>{Delay(proxyName)}</span>
+      <div class="flex truncate">{proxyName}</div>
+      <div class="flex flex-row">
+        <div class="flex flex-1 truncate">
+          {proxyNode().type}
+          {proxyNode().udp ? ' :: udp' : ''}
+        </div>
+        <div>{Delay(proxyName)}</div>
+      </div>
     </div>
   )
 }
diff --git a/src/signals/proxies.ts b/src/signals/proxies.ts
index 20dbc6c..8ead3bb 100644
--- a/src/signals/proxies.ts
+++ b/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,
diff --git a/src/types.d.ts b/src/types.d.ts
index bcff54c..0393ba8 100644
--- a/src/types.d.ts
+++ b/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: {
-    alive: boolean
-    type: string
-    name: string
-    tfo: boolean
-    udp: boolean
-    xudp: boolean
-    id: string
-    extra: Record<string, unknown>
-    history: {
-      time: string
-      delay: number
-    }[]
-  }[]
+  proxies: ProxyNode[]
   testUrl: string
   updatedAt: string
   vehicleType: string