feat: speed test (#38)

Author: Zephyruso

src/App.tsx

@@ -30,12 +30,12 @@ export const App = () => {
       <div class="flex-1 overflow-y-auto p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
-            <Route path="/" component={Overview} />
             <Route path="/proxies" component={Proxies} />
             <Route path="/rules" component={Rules} />
             <Route path="/conns" component={Connections} />
             <Route path="/logs" component={Logs} />
             <Route path="/config" component={Config} />
+            <Route path="*" component={Overview} />
           </Show>
 
           <Route path="/setup" component={Setup} />

src/components/Header.tsx

@@ -65,7 +65,7 @@ const ThemeSwitcher = () => (
 
 const navs = () => [
   {
-    href: '/',
+    href: '/overview',
     name: 'Overview',
     icon: <IconHome />,
   },

src/pages/Proxies.tsx

@@ -1,3 +1,4 @@
+import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
 import { For, createSignal, onMount } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import { useProxies } from '~/signals/proxies'
@@ -10,6 +11,7 @@ export default () => {
     delayMap,
     updateProxy,
     setProxiesByProxyName,
+    delayTestByProxyGroupName,
   } = useProxies()
   const [collapseMap, setCollapseMap] = createSignal<Record<string, boolean>>(
     {},
@@ -40,6 +42,11 @@ export default () => {
     setCollapseMap({ ...cMap })
   }
 
+  const onSpeedTestClick = (e: MouseEvent, name: string) => {
+    e.stopPropagation()
+    delayTestByProxyGroupName(name)
+  }
+
   const getCollapseClassName = (name: string) => {
     return collapseMap()[name] ? 'collapse-open' : 'collapse-close'
   }
@@ -59,10 +66,14 @@ export default () => {
                 )}
               >
                 <div
-                  class="collapse-title text-xl font-medium"
+                  class="collapse-title flex items-center text-xl font-medium"
                   onClick={() => onCollapseTitleClick(proxy.name)}
                 >
                   {proxy.name} {proxy.type}
+                  <IconBrandSpeedtest
+                    class="m-4 cursor-pointer"
+                    onClick={(e) => onSpeedTestClick(e, proxy.name)}
+                  />
                 </div>
                 <div class="collapse-content grid grid-cols-1 gap-2 sm:grid-cols-3 lg:grid-cols-5">
                   <For each={proxy.all}>

src/pages/Setup.tsx

@@ -82,7 +82,7 @@ export default () => {
               class="badge badge-info flex w-full cursor-pointer items-center gap-4 py-4"
               onClick={() => {
                 setSelectedEndpoint(id)
-                navigate('/')
+                navigate('/overview')
               }}
             >
               {url}

src/signals/proxies.ts

@@ -31,11 +31,15 @@ export function useProxies() {
     const { proxies } = await request
       .get('proxies')
       .json<{ proxies: Record<string, Proxy> }>()
+    const sortIndex = proxies['GLOBAL'].all ?? []
 
     setProxies(
-      Object.values(proxies).filter(
-        (proxy) => proxy.all && proxy.all.length > 0,
-      ),
+      Object.values(proxies)
+        .filter((proxy) => proxy.all && proxy.all.length > 0)
+        .sort(
+          (pre, next) =>
+            sortIndex.indexOf(pre.name) - sortIndex.indexOf(next.name),
+        ),
     )
   }
 
@@ -48,9 +52,25 @@ export function useProxies() {
     await updateProxy()
   }
 
+  const delayTestByProxyGroupName = async (proxyGroupName: string) => {
+    const data: Record<string, number> = await request
+      .get(
+        `group/${proxyGroupName}/delay?url=https%3A%2F%2Fwww.gstatic.com%2Fgenerate_204&timeout=2000`,
+      )
+      .json()
+    const dMap = delayMap()
+
+    Object.entries(data).forEach(([name, time]) => {
+      dMap[name] = time
+    })
+
+    setDelayMap({ ...dMap })
+  }
+
   return {
     proxies,
     proxyProviders,
+    delayTestByProxyGroupName,
     delayMap,
     updateProxy,
     setProxiesByProxyName,