feat: Support dynamic acquisition of clash_mode (#908)

* feat: Dynamic clash_mode support

* fix: Constraint modes & implement part i18n

* refactor: Optimize select option generation logic & set modes default value

* feat: Some clash_mode keywords are translated using i18n

* refactor: Use For instead of JS map()

* refactor: Remove the MODE_OPTIONS enum

src/constants/index.ts

@@ -151,12 +151,6 @@ export enum TAILWINDCSS_SIZE {
   LG = 'lg',
 }
 
-export enum MODE_OPTIONS {
-  Global = 'global',
-  Rule = 'rule',
-  Direct = 'direct',
-}
-
 export enum LOG_LEVEL {
   Info = 'info',
   Error = 'error',

src/pages/Config.tsx

@@ -21,7 +21,7 @@ import {
   upgradingUI,
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
-import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
+import { LANG, ROUTES, themes } from '~/constants'
 import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
@@ -179,6 +179,10 @@ const ConfigForm = () => {
     }
   })
 
+  const modes = () => {
+    return configsData()?.modes || ["rule", "direct", "global"]
+  }
+
   return (
     <div class="flex flex-col gap-4">
       <select
@@ -188,9 +192,11 @@ const ConfigForm = () => {
           void updateBackendConfigAPI('mode', e.target.value, refetch)
         }
       >
-        <option value={MODE_OPTIONS.Global}>{t('global')}</option>
-        <option value={MODE_OPTIONS.Rule}>{t('rule')}</option>
-        <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
+        <For echo={modes()}>
+          {(name) => (
+            <option value={name}>{t(name) ?? name}</option>
+          )}
+        </For>
       </select>
 
       <Show when={!isSingBox()}>

src/types/index.d.ts

@@ -117,7 +117,8 @@ export type Log = {
 export type LogWithSeq = Log & { seq: number }
 
 export type Config = {
-  mode: 'global' | 'rule' | 'direct'
+  mode: string
+  modes?: string[]
   port: number
   'socks-port': number
   'redir-port': number