feat(config): select tunnel mode

src/constants/index.ts

@@ -36,7 +36,6 @@ export const themes = [
 export enum ROUTES {
   Overview = '/overview',
   Proxies = '/proxies',
-  ProxyProvider = '/proxyprovider',
   Rules = '/rules',
   Conns = '/conns',
   Log = '/logs',
@@ -148,3 +147,9 @@ export enum TAILWINDCSS_SIZE {
   MD = 'md',
   LG = 'lg',
 }
+
+export enum MODE_OPTIONS {
+  Global = 'global',
+  Rule = 'rule',
+  Direct = 'direct',
+}

src/i18n/en.ts

@@ -75,4 +75,7 @@ export default {
   details: 'Details',
   endpointURL: 'Endpoint URL',
   secret: 'Secret',
+  global: 'Global',
+  rule: 'Rule',
+  direct: 'Direct',
 }

src/i18n/zh.ts

@@ -75,4 +75,7 @@ export default {
   details: '详情',
   endpointURL: '后端地址',
   secret: '密钥',
+  global: '全局',
+  rule: '规则',
+  direct: '直连',
 }

src/pages/Config.tsx

@@ -14,6 +14,7 @@ import { z } from 'zod'
 import { Button } from '~/components'
 import {
   LANG,
+  MODE_OPTIONS,
   PROXIES_ORDERING_TYPE,
   PROXIES_PREVIEW_TYPE,
   ROUTES,
@@ -24,14 +25,17 @@ import {
   applyThemeByMode,
   autoCloseConns,
   autoSwitchTheme,
+  backendConfig,
   favDayTheme,
   favNightTheme,
+  fetchBackendConfig,
   latencyTestTimeoutDuration,
   proxiesOrderingType,
   proxiesPreviewType,
   renderInTwoColumns,
   setAutoCloseConns,
   setAutoSwitchTheme,
+  setBackendConfig,
   setFavDayTheme,
   setFavNightTheme,
   setLatencyTestTimeoutDuration,
@@ -43,11 +47,12 @@ import {
   setTwemoji,
   setUrlForLatencyTest,
   tableSize,
+  updateBackendConfig,
   urlForLatencyTest,
   useRequest,
   useTwemoji,
 } from '~/signals'
-import type { BackendVersion, DNSQuery, Config as IConfig } from '~/types'
+import type { BackendVersion, DNSQuery } from '~/types'
 
 const dnsQueryFormSchema = z.object({
   name: z.string(),
@@ -155,8 +160,8 @@ const ConfigForm = () => {
   >({ extend: validator({ schema: configFormSchema }) })
 
   onMount(async () => {
-    const configs = await request.get('configs').json<IConfig>()
-
+    const configs = await fetchBackendConfig()
+    setBackendConfig(configs)
     setInitialValues(configs)
     reset()
   })
@@ -191,6 +196,16 @@ const ConfigForm = () => {
 
   return (
     <div class="flex flex-col gap-4">
+      <select
+        class="select select-bordered"
+        value={backendConfig()?.mode}
+        onChange={(e) => updateBackendConfig('mode', e.target.value)}
+      >
+        <option value={MODE_OPTIONS.Global}>{t('global')}</option>
+        <option value={MODE_OPTIONS.Rule}>{t('rule')}</option>
+        <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
+      </select>
+
       <form class="contents" use:form={form}>
         <For each={portsList}>
           {(item) => (

src/pages/Connections.tsx

@@ -334,20 +334,20 @@ export default () => {
         <div class="join flex w-full items-center md:flex-1">
           <input
             type="search"
-            class="input join-item input-primary flex-1 sm:input-md"
+            class="input join-item input-primary input-sm min-w-0 flex-1 sm:input-md"
             placeholder={t('search')}
             onInput={(e) => setGlobalFilter(e.target.value)}
           />
 
           <Button
-            class="join-item sm:btn-md"
+            class="join-item btn-sm sm:btn-md"
             onClick={() => setPaused((paused) => !paused)}
           >
             {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
           </Button>
 
           <Button
-            class="join-item sm:btn-md"
+            class="join-item btn-sm sm:btn-md"
             onClick={() => {
               if (table.getState().globalFilter) {
                 table
@@ -362,7 +362,7 @@ export default () => {
           </Button>
 
           <Button
-            class="btn join-item sm:btn-md"
+            class="btn join-item btn-sm sm:btn-md"
             onClick={() => {
               const modal = document.querySelector(
                 '#connections-table-ordering-modal',

src/pages/Logs.tsx

@@ -82,7 +82,7 @@ export default () => {
     <div class="flex h-full flex-col gap-4 p-1">
       <input
         type="search"
-        class="input input-primary flex-shrink-0"
+        class="input input-primary input-sm flex-shrink-0 sm:input-md"
         placeholder={t('search')}
         onInput={(e) => setSearch(e.target.value)}
       />

src/pages/Proxies.tsx

@@ -99,7 +99,7 @@ export default () => {
                 <button
                   class={twMerge(
                     activeTab() === tab.type && 'tab-active',
-                    'tab gap-2 px-2',
+                    'tab tab-sm gap-2 px-2 sm:tab-md',
                   )}
                   onClick={() => setActiveTab(tab.type)}
                 >

src/pages/Rules.tsx

@@ -63,13 +63,13 @@ export default () => {
     <div class="flex h-full flex-col gap-2">
       <Show when={ruleProviders().length > 0}>
         <div class="flex items-center gap-2">
-          <div class="tabs-boxed tabs gap-2">
+          <div class="tabs tabs-boxed gap-2">
             <For each={tabs()}>
               {(tab) => (
                 <button
                   class={twMerge(
                     activeTab() === tab.type && 'tab-active',
-                    'tab gap-2 px-2',
+                    'tab tab-sm gap-2 px-2 md:tab-md',
                   )}
                   onClick={() => setActiveTab(tab.type)}
                 >

src/signals/config.ts

@@ -1,5 +1,6 @@
 import { makePersisted } from '@solid-primitives/storage'
 import { createSignal } from 'solid-js'
+import { toast } from 'solid-toast'
 import {
   LATENCY_QUALITY_MAP_HTTP,
   LATENCY_QUALITY_MAP_HTTPS,
@@ -7,7 +8,8 @@ import {
   PROXIES_PREVIEW_TYPE,
   TAILWINDCSS_SIZE,
 } from '~/constants'
-import { setCurTheme } from '~/signals'
+import { setCurTheme, useRequest } from '~/signals'
+import { Config } from '~/types'
 
 export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
   createSignal(PROXIES_PREVIEW_TYPE.Auto),
@@ -103,3 +105,34 @@ export const useAutoSwitchTheme = () => {
     .matchMedia('(prefers-color-scheme: dark)')
     .addEventListener('change', (event) => setTheme(event.matches))
 }
+
+export const [backendConfig, setBackendConfig] = createSignal<Config>()
+
+export const fetchBackendConfig = () => {
+  const request = useRequest()
+
+  return request.get('configs').json<Config>()
+}
+
+export const updateBackendConfig = async (
+  key: keyof Config,
+  value: Config[keyof Config],
+) => {
+  try {
+    const request = useRequest()
+
+    await request
+      .patch('configs', {
+        body: JSON.stringify({
+          [key]: value,
+        }),
+      })
+      .json<Config>()
+
+    const updatedConfig = await fetchBackendConfig()
+
+    setBackendConfig(updatedConfig)
+  } catch (err) {
+    toast.error((err as Error).message)
+  }
+}

src/types/index.d.ts

@@ -111,6 +111,7 @@ export type Log = {
 }
 
 export type Config = {
+  mode: 'global' | 'rule' | 'direct'
   port: number
   'socks-port': number
   'redir-port': number
@@ -137,7 +138,6 @@ export type Config = {
   'allow-lan': boolean
   'bind-address': string
   'inbound-tfo': boolean
-  mode: 'rule' | 'global'
   UnifiedDelay: boolean
   'log-level': string
   ipv6: boolean