feat(config): reload config file, flush fake-ip data

src/apis/index.ts

@@ -1,6 +1,6 @@
-import { createSignal } from 'solid-js'
+import { createSignal, ResourceActions } from 'solid-js'
 import { toast } from 'solid-toast'
-import { setBackendConfig, useRequest } from '~/signals'
+import { useRequest } from '~/signals'
 import {
   BackendVersion,
   Config,
@@ -22,11 +22,34 @@ export const closeSingleConnectionAPI = (id: string) => {
   return request.delete(`connections/${id}`)
 }
 
+export const [reloadingConfigFile, setReloadingConfigFile] = createSignal(false)
 export const [updatingGEODatabases, setUpdatingGEODatabases] =
   createSignal(false)
+export const [flushingFakeIPData, setFlushingFakeIPData] = createSignal(false)
 export const [upgradingBackend, setUpgradingBackend] = createSignal(false)
 export const [restartingBackend, setRestartingBackend] = createSignal(false)
 
+export const reloadConfigFileAPI = async () => {
+  const request = useRequest()
+  setReloadingConfigFile(true)
+  try {
+    await request.put('configs', {
+      searchParams: { force: true },
+      json: { path: '', payload: '' },
+    })
+  } catch {}
+  setReloadingConfigFile(false)
+}
+
+export const flushFakeIPDataAPI = async () => {
+  const request = useRequest()
+  setFlushingFakeIPData(true)
+  try {
+    await request.post('cache/fakeip/flush')
+  } catch {}
+  setFlushingFakeIPData(false)
+}
+
 export const updateGEODatabasesAPI = async () => {
   const request = useRequest()
   setUpdatingGEODatabases(true)
@@ -63,21 +86,14 @@ export const fetchBackendConfigAPI = () => {
 export const updateBackendConfigAPI = async (
   key: keyof Config,
   value: Config[keyof Config],
+  refetch: ResourceActions<Config | undefined>['refetch'],
 ) => {
   try {
     const request = useRequest()
 
-    await request
-      .patch('configs', {
-        body: JSON.stringify({
-          [key]: value,
-        }),
-      })
-      .json<Config>()
-
-    const updatedConfig = await fetchBackendConfigAPI()
+    await request.patch('configs', { json: { [key]: value } }).json<Config>()
 
-    setBackendConfig(updatedConfig)
+    await refetch()
   } catch (err) {
     toast.error((err as Error).message)
   }

src/i18n/en.ts

@@ -87,4 +87,6 @@ export default {
   closed: 'Closed',
   sort: 'Sort',
   hideUnAvailableProxies: 'Hide UnAvailable Proxies',
+  reloadConfigFile: 'Reload Config File',
+  flushFakeIPData: 'Flush Fake-IP Data',
 }

src/i18n/zh.ts

@@ -87,4 +87,6 @@ export default {
   closed: '已关闭',
   sort: '排序',
   hideUnAvailableProxies: '隐藏不可用节点',
+  reloadConfigFile: '重新加载配置文件',
+  flushFakeIPData: '清空 Fake-IP 数据',
 }

src/pages/Config.tsx

@@ -2,11 +2,22 @@ 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,
+  Show,
+  createEffect,
+  createResource,
+  createSignal,
+  onMount,
+} from 'solid-js'
 import { z } from 'zod'
 import {
   fetchBackendConfigAPI,
   fetchBackendVersionAPI,
+  flushFakeIPDataAPI,
+  flushingFakeIPData,
+  reloadConfigFileAPI,
+  reloadingConfigFile,
   restartBackendAPI,
   restartingBackend,
   updateBackendConfigAPI,
@@ -19,11 +30,9 @@ import { Button, ConfigTitle } from '~/components'
 import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
 import {
   autoSwitchTheme,
-  backendConfig,
   favDayTheme,
   favNightTheme,
   setAutoSwitchTheme,
-  setBackendConfig,
   setFavDayTheme,
   setFavNightTheme,
   setSelectedEndpoint,
@@ -103,47 +112,85 @@ const configFormSchema = z.object({
 
 const ConfigForm = () => {
   const [t] = useI18n()
+  const navigate = useNavigate()
 
   const portsList = [
     {
       label: 'HTTP Port',
       key: 'port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI('port', Number(e.target.value), refetch),
     },
     {
       label: 'Socks Port',
       key: 'socks-port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI(
+          'socks-port',
+          Number(e.target.value),
+          refetch,
+        ),
     },
     {
       label: 'Redir Port',
       key: 'redir-port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI(
+          'redir-port',
+          Number(e.target.value),
+          refetch,
+        ),
     },
     {
       label: 'TProxy Port',
       key: 'tproxy-port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI(
+          'tproxy-port',
+          Number(e.target.value),
+          refetch,
+        ),
     },
     {
       label: 'Mixed Port',
       key: 'mixed-port',
+      onChange: (e: Event & { target: HTMLInputElement }) =>
+        void updateBackendConfigAPI(
+          'mixed-port',
+          Number(e.target.value),
+          refetch,
+        ),
     },
   ]
 
   const { form, setInitialValues, reset } = createForm<
     z.infer<typeof configFormSchema>
   >({ extend: validator({ schema: configFormSchema }) })
 
-  onMount(async () => {
-    const configs = await fetchBackendConfigAPI()
-    setBackendConfig(configs)
-    setInitialValues(configs)
-    reset()
+  const [configsData, { refetch }] = createResource(fetchBackendConfigAPI)
+
+  createEffect(() => {
+    const configs = configsData()
+
+    if (configs) {
+      setInitialValues(configs)
+      reset()
+    }
   })
 
+  const onSwitchEndpointClick = () => {
+    setSelectedEndpoint('')
+    navigate(ROUTES.Setup)
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <select
         class="select select-bordered"
-        value={backendConfig()?.mode}
-        onChange={(e) => updateBackendConfigAPI('mode', e.target.value)}
+        value={configsData()?.mode}
+        onChange={(e) =>
+          void updateBackendConfigAPI('mode', e.target.value, refetch)
+        }
       >
         <option value={MODE_OPTIONS.Global}>{t('global')}</option>
         <option value={MODE_OPTIONS.Rule}>{t('rule')}</option>
@@ -163,13 +210,22 @@ const ConfigForm = () => {
                 type="number"
                 class="input input-bordered"
                 placeholder={item.label}
+                onChange={item.onChange}
               />
             </div>
           )}
         </For>
       </form>
 
       <div class="flex flex-wrap items-center gap-2">
+        <Button loading={reloadingConfigFile()} onClick={reloadConfigFileAPI}>
+          {t('reloadConfigFile')}
+        </Button>
+
+        <Button loading={flushingFakeIPData()} onClick={flushFakeIPDataAPI}>
+          {t('flushFakeIPData')}
+        </Button>
+
         <Button
           loading={updatingGEODatabases()}
           onClick={updateGEODatabasesAPI}
@@ -184,19 +240,15 @@ const ConfigForm = () => {
         <Button loading={restartingBackend()} onClick={restartBackendAPI}>
           {t('restartCore')}
         </Button>
+
+        <Button onClick={onSwitchEndpointClick}>{t('switchEndpoint')}</Button>
       </div>
     </div>
   )
 }
 
 const ConfigForXd = () => {
   const [t, { locale }] = useI18n()
-  const navigate = useNavigate()
-
-  const onSwitchEndpointClick = () => {
-    setSelectedEndpoint('')
-    navigate(ROUTES.Setup)
-  }
 
   const autoSwitchThemeSubChild = () => (
     <Show when={autoSwitchTheme()}>
@@ -284,10 +336,6 @@ const ConfigForXd = () => {
           {t('switchLanguage')}
         </Button>
       </div>
-
-      <div>
-        <Button onClick={onSwitchEndpointClick}>{t('switchEndpoint')}</Button>
-      </div>
     </div>
   )
 }

src/signals/config.ts

@@ -10,7 +10,6 @@ import {
   TAILWINDCSS_SIZE,
 } from '~/constants'
 import { setCurTheme } from '~/signals'
-import { Config } from '~/types'
 
 export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
   createSignal(PROXIES_PREVIEW_TYPE.Auto),
@@ -112,5 +111,3 @@ export const useAutoSwitchTheme = () => {
     }
   })
 }
-
-export const [backendConfig, setBackendConfig] = createSignal<Config>()

src/signals/proxies.ts

@@ -25,6 +25,7 @@ type ProxyInfo = {
   xudp: boolean
   type: string
 }
+
 // these signals should be global state
 const [proxies, setProxies] = createSignal<Proxy[]>([])
 const [proxyProviders, setProxyProviders] = createSignal<ProxyProvider[]>([])