feat: Dynamic clash_mode support

Author: CHIZI-0618

src/components/Config.tsx

@@ -51,11 +51,10 @@ const langOptions = [
   ['en', 'English'],
 ];
 
-const modeOptions = [
-  ['Global', 'Global'],
-  ['Rule', 'Rule'],
-  ['Direct', 'Direct'],
-];
+const modeOptions = useMemo(() => {
+    return configState.modes || [['Rule', 'Rule'], ['Global', 'Global'], ['Direct', 'Direct']];
+  }, [configState.modes]);
+
 
 const mapState = (s: State) => ({
   configs: getConfigs(s),
@@ -254,7 +253,7 @@ function ConfigImpl({
         <div>
           <div className={s0.label}>Mode</div>
           <Select
-            options={modeOptions}
+            options={modeOptions.map((mode) => [mode, mode])}
             selected={mode}
             onChange={(e) => handleChangeValue({ name: 'mode', value: e.target.value })}
           />

src/store/types.ts

@@ -22,6 +22,7 @@ export type ClashGeneralConfig = {
   'redir-port': number;
   'allow-lan': boolean;
   mode: string;
+  modes?: string[];
   'log-level': string;
 };