feat: auto close all connections before switch proxy

src/components/ProxyNodePreview.tsx

@@ -1,6 +1,6 @@
 import { Show, createMemo } from 'solid-js'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
-import { proxiesPreviewType } from '~/pages/Config'
+import { proxiesPreviewType } from '~/signals/config'
 import ProxyPreviewBar from './ProxyPreviewBar'
 import ProxyPreviewDots from './ProxyPreviewDots'
 

src/i18n/en.ts

@@ -39,4 +39,5 @@ export default {
   auto: 'Auto',
   proxiesPreviewType: 'Proxies preview type',
   urlForDelayTest: 'Url for delay test',
+  autoCloseConns: 'Automatically close all connections',
 }

src/i18n/zh.ts

@@ -39,4 +39,5 @@ export default {
   auto: '自适应',
   proxiesPreviewType: '节点组预览样式',
   urlForDelayTest: '测速链接',
+  autoCloseConns: '切换代理时自动断开全部连接',
 }

src/pages/Config.tsx

@@ -1,11 +1,18 @@
 import { createForm } from '@felte/solid'
 import { validator } from '@felte/validator-zod'
 import { useI18n } from '@solid-primitives/i18n'
-import { makePersisted } from '@solid-primitives/storage'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { z } from 'zod'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
 import { useRequest } from '~/signals'
+import {
+  autoCloseConns,
+  proxiesPreviewType,
+  setAutoCloseConns,
+  setProxiesPreviewType,
+  setUrlForDelayTest,
+  urlForDelayTest,
+} from '~/signals/config'
 import type { DNSQuery, Config as IConfig } from '~/types'
 
 const dnsQueryFormSchema = z.object({
@@ -128,31 +135,24 @@ const ConfigForm = () => {
   )
 }
 
-export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
-  createSignal(PROXIES_PREVIEW_TYPE.BAR),
-  { name: 'proxiesPreviewType', storage: localStorage },
-)
-export const [urlForDelayTest, setUrlForDelayTest] = makePersisted(
-  createSignal('https://www.gstatic.com/generate_204'),
-  { name: 'urlForDelayTest', storage: localStorage },
-)
-
 const ConfigForXd = () => {
   const [t] = useI18n()
 
   return (
-    <>
+    <div class="flex flex-col gap-4">
-      <div>{t('proxiesPreviewType')}</div>
+      <div>
-      <div class="flex">
+        <div class="pb-4">{t('proxiesPreviewType')}</div>
+
+        <div class="flex items-center gap-4">
           <For each={Object.values(PROXIES_PREVIEW_TYPE)}>
             {(value) => (
-            <label class="flex items-center">
+              <label class="flex items-center gap-2">
-              {t(value)}
+                <span>{t(value)}</span>
+
                 <input
-                class="radio m-4"
+                  class="radio"
                   aria-label={value}
                   type="radio"
-                name="proxiesPreviewType"
                   checked={value === proxiesPreviewType()}
                   onChange={() => setProxiesPreviewType(value)}
                 />
@@ -160,15 +160,29 @@ const ConfigForXd = () => {
             )}
           </For>
         </div>
-      <div>{t('urlForDelayTest')}</div>
+      </div>
+
       <div>
+        <div class="pb-4">{t('autoCloseConns')}</div>
+
+        <input
+          class="toggle"
+          type="checkbox"
+          checked={autoCloseConns()}
+          onChange={(e) => setAutoCloseConns(e.target.checked)}
+        />
+      </div>
+
+      <div>
+        <div class="pb-4">{t('urlForDelayTest')}</div>
+
         <input
           class="input input-bordered w-96"
           value={urlForDelayTest()}
           onChange={(e) => setUrlForDelayTest(e.target?.value!)}
         />
       </div>
-    </>
+    </div>
   )
 }
 

src/signals/config.ts

@@ -0,0 +1,16 @@
+import { makePersisted } from '@solid-primitives/storage'
+import { createSignal } from 'solid-js'
+import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
+
+export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
+  createSignal(PROXIES_PREVIEW_TYPE.BAR),
+  { name: 'proxiesPreviewType', storage: localStorage },
+)
+export const [urlForDelayTest, setUrlForDelayTest] = makePersisted(
+  createSignal('https://www.gstatic.com/generate_204'),
+  { name: 'urlForDelayTest', storage: localStorage },
+)
+export const [autoCloseConns, setAutoCloseConns] = makePersisted(
+  createSignal(false),
+  { name: 'autoCloseConns', storage: localStorage },
+)

src/signals/proxies.ts

@@ -1,6 +1,6 @@
 import { createSignal } from 'solid-js'
-import { urlForDelayTest } from '~/pages/Config'
 import { useRequest } from '~/signals'
+import { autoCloseConns, urlForDelayTest } from '~/signals/config'
 import type { Proxy, ProxyNode, ProxyProvider } from '~/types'
 
 type ProxyInfo = {
@@ -37,6 +37,7 @@ export function useProxies() {
       })
     })
   }
+
   const updateProxy = async () => {
     const { providers } = await request
       .get('providers/proxies')
@@ -73,14 +74,18 @@ export function useProxies() {
     const proxyGroupList = proxies().slice()
     const proxyGroup = proxyGroupList.find((i) => i.name === proxy.name)!
 
+    if (autoCloseConns()) request.delete('connections')
+
     await request.put(`proxies/${proxy.name}`, {
       body: JSON.stringify({
         name: proxyName,
       }),
     })
+
     proxyGroup.now = proxyName
+
     setProxies(proxyGroupList)
-    setTimeout(updateProxy)
+    queueMicrotask(updateProxy)
   }
 
   const delayTestByProxyGroupName = async (proxyGroupName: string) => {