feat(config): add setting, requestTimeoutDuration

src/i18n/en.ts

@@ -40,7 +40,7 @@ export default {
   auto: 'Auto',
   off: 'Off',
   proxiesPreviewType: 'Proxies preview type',
-  urlForLatencyTest: 'Url for latency test',
+  urlForLatencyTest: 'URL for latency test',
   autoCloseConns: 'Automatically close all connections',
   useTwemoji: 'Use Twemoji Mozilla Font',
   autoSwitchTheme: 'Automatically switch theme',
@@ -66,4 +66,5 @@ export default {
   lg: 'Large size',
   switchEndpoint: 'Switch Endpoint',
   switchLanguage: 'Switch Language',
+  requestTimeoutDuration: 'Request Timeout Duration',
 }

src/i18n/zh.ts

@@ -66,4 +66,5 @@ export default {
   lg: '超大尺寸',
   switchEndpoint: '切换后端',
   switchLanguage: '切换语言',
+  requestTimeoutDuration: '请求超时时间',
 }

src/pages/Config.tsx

@@ -2,7 +2,14 @@ import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
 import { useI18n } from '@solid-primitives/i18n'
 import { useNavigate } from '@solidjs/router'
-import { For, Show, createSignal, onMount } from 'solid-js'
+import {
+  For,
+  ParentComponent,
+  Show,
+  children,
+  createSignal,
+  onMount,
+} from 'solid-js'
 import { z } from 'zod'
 import { Button } from '~/components'
 import {
@@ -23,6 +30,7 @@ import {
   proxiesPreviewType,
   renderInTwoColumn,
   renderProxiesInSamePage,
+  requestTimeoutDuration,
   setAutoCloseConns,
   setAutoSwitchTheme,
   setFavDayTheme,
@@ -31,6 +39,7 @@ import {
   setProxiesPreviewType,
   setRenderInTwoColumn,
   setRenderProxiesInSamePage,
+  setRequestTimeoutDuration,
   setSelectedEndpoint,
   setTableSize,
   setTwemoji,
@@ -47,6 +56,12 @@ const dnsQueryFormSchema = z.object({
   type: z.string(),
 })
 
+const ConfigTitle: ParentComponent = (props) => (
+  <div class="pb-4 text-lg font-semibold">
+    {children(() => props.children)()}
+  </div>
+)
+
 const DNSQueryForm = () => {
   const [t] = useI18n()
   const request = useRequest()
@@ -73,6 +88,7 @@ const DNSQueryForm = () => {
     <div class="flex flex-col">
       <form use:form={form} class="flex flex-col gap-2 sm:flex-row">
         <input name="name" class="input input-bordered w-full sm:flex-1" />
+
         <div class="flex items-center gap-2">
           <select name="type" class="select select-bordered">
             <option>A</option>
@@ -207,17 +223,30 @@ const ConfigForm = () => {
       </div>
 
       <div class="flex flex-col">
-        <div class="pb-4 text-lg font-semibold">{t('urlForLatencyTest')}</div>
+        <ConfigTitle>{t('urlForLatencyTest')}</ConfigTitle>
 
         <input
-          class="w-100 input input-bordered max-w-md"
+          class="input input-bordered max-w-md"
           value={urlForLatencyTest()}
           onChange={(e) => setUrlForLatencyTest(e.target.value)}
         />
       </div>
 
       <div>
-        <div class="pb-4 text-lg font-semibold">{t('autoCloseConns')}</div>
+        <ConfigTitle>
+          {t('requestTimeoutDuration')} ({t('ms')})
+        </ConfigTitle>
+
+        <input
+          type="number"
+          class="input input-bordered w-full max-w-md"
+          value={requestTimeoutDuration()}
+          onChange={(e) => setRequestTimeoutDuration(Number(e.target.value))}
+        />
+      </div>
+
+      <div>
+        <ConfigTitle>{t('autoCloseConns')}</ConfigTitle>
 
         <input
           class="toggle"
@@ -242,7 +271,8 @@ const ConfigForXd = () => {
   return (
     <div class="grid gap-4">
       <div class="flex flex-col">
-        <div class="pb-4 text-lg font-semibold">{t('renderInTwoColumns')}</div>
+        <ConfigTitle>{t('renderInTwoColumns')}</ConfigTitle>
+
         <input
           type="checkbox"
           class="toggle"
@@ -253,9 +283,8 @@ const ConfigForXd = () => {
         />
       </div>
       <div class="flex flex-col">
-        <div class="pb-4 text-lg font-semibold">
-          {t('renderProxiesInSamePage')}
-        </div>
+        <ConfigTitle>{t('renderProxiesInSamePage')}</ConfigTitle>
+
         <input
           type="checkbox"
           class="toggle"
@@ -265,8 +294,10 @@ const ConfigForXd = () => {
           }}
         />
       </div>
+
       <div class="flex flex-col">
-        <div class="pb-4 text-lg font-semibold">{t('autoSwitchTheme')}</div>
+        <ConfigTitle>{t('autoSwitchTheme')}</ConfigTitle>
+
         <input
           type="checkbox"
           class="toggle"
@@ -277,9 +308,11 @@ const ConfigForXd = () => {
           }}
         />
       </div>
+
       <Show when={autoSwitchTheme()}>
         <div class="flex flex-col">
-          <div class="pb-4 text-lg font-semibold">{t('favDayTheme')}</div>
+          <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
+
           <select
             class="select select-bordered w-full max-w-xs"
             onChange={(e) => {
@@ -297,7 +330,7 @@ const ConfigForXd = () => {
           </select>
         </div>
         <div class="flex flex-col">
-          <div class="pb-4 text-lg font-semibold">{t('favNightTheme')}</div>
+          <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
 
           <select
             class="select select-bordered w-full max-w-xs"
@@ -318,7 +351,7 @@ const ConfigForXd = () => {
       </Show>
 
       <div>
-        <div class="pb-4 text-lg font-semibold">{t('useTwemoji')}</div>
+        <ConfigTitle>{t('useTwemoji')}</ConfigTitle>
 
         <input
           class="toggle"
@@ -329,7 +362,7 @@ const ConfigForXd = () => {
       </div>
 
       <div>
-        <div class="pb-4 text-lg font-semibold">{t('proxiesPreviewType')}</div>
+        <ConfigTitle>{t('proxiesPreviewType')}</ConfigTitle>
 
         <select
           class="select select-bordered w-full max-w-xs"
@@ -345,7 +378,7 @@ const ConfigForXd = () => {
       </div>
 
       <div>
-        <div class="pb-4 text-lg font-semibold">{t('proxiesSorting')}</div>
+        <ConfigTitle>{t('proxiesSorting')}</ConfigTitle>
 
         <select
           class="select select-bordered w-full max-w-xs"
@@ -365,7 +398,7 @@ const ConfigForXd = () => {
       </div>
 
       <div>
-        <div class="pb-4 text-lg font-semibold">{t('tableSize')}</div>
+        <ConfigTitle>{t('tableSize')}</ConfigTitle>
 
         <select
           class="select select-bordered w-full max-w-xs"

src/signals/config.ts

@@ -54,6 +54,11 @@ export const [tableSize, setTableSize] = makePersisted(
   createSignal<TAILWINDCSS_SIZE>(TAILWINDCSS_SIZE.XS),
   { name: 'tableSize', storage: localStorage },
 )
+export const [requestTimeoutDuration, setRequestTimeoutDuration] =
+  makePersisted(createSignal(10000), {
+    name: 'requestTimeoutDuration',
+    storage: localStorage,
+  })
 
 export const isLatencyTestByHttps = () =>
   urlForLatencyTest().startsWith('https')

src/signals/proxies.ts

@@ -91,10 +91,7 @@ export const useProxies = () => {
   const latencyTestByProxyGroupName = async (proxyGroupName: string) => {
     const data: Record<string, number> = await request
       .get(`group/${proxyGroupName}/delay`, {
-        searchParams: {
-          url: urlForLatencyTest(),
-          timeout: 2000,
-        },
+        searchParams: { url: urlForLatencyTest() },
       })
       .json()
 
@@ -121,9 +118,7 @@ export const useProxies = () => {
   }
 
   const healthCheckByProviderName = async (providerName: string) => {
-    await request.get(`providers/proxies/${providerName}/healthcheck`, {
-      timeout: 30 * 1000, // this api is a little bit slow sometimes...
-    })
+    await request.get(`providers/proxies/${providerName}/healthcheck`)
     await updateProxies()
   }
 

src/signals/request.ts

@@ -1,6 +1,7 @@
 import { makePersisted } from '@solid-primitives/storage'
 import ky from 'ky'
 import { createSignal } from 'solid-js'
+import { requestTimeoutDuration } from '~/signals/config'
 
 export const [selectedEndpoint, setSelectedEndpoint] = makePersisted(
   createSignal(''),
@@ -26,9 +27,8 @@ export const useRequest = () => {
 
   return ky.create({
     prefixUrl: e?.url,
-    headers: {
-      Authorization: e?.secret ? `Bearer ${e.secret}` : '',
-    },
+    timeout: requestTimeoutDuration(),
+    headers: { Authorization: e?.secret ? `Bearer ${e.secret}` : '' },
   })
 }