Feature: add mixed-port in settings (#47)

src/containers/Settings/index.tsx

@@ -21,7 +21,8 @@ export default function Settings () {
     const { t } = useTranslation('Settings')
     const [info, set] = useObject({
         socks5ProxyPort: 7891,
-        httpProxyPort: 7890
+        httpProxyPort: 7890,
+        mixedProxyPort: 0
     })
 
     useEffect(() => {
@@ -32,6 +33,7 @@ export default function Settings () {
     useEffect(() => {
         set('socks5ProxyPort', general.socksPort)
         set('httpProxyPort', general.port)
+        set('mixedProxyPort', general.mixedPort ?? 0)
     }, [general])
 
     async function handleProxyModeChange (mode: string) {
@@ -63,6 +65,11 @@ export default function Settings () {
         await fetchGeneral()
     }
 
+    async function handleMixedPortSave () {
+        await updateConfig({ 'mixed-port': info.mixedProxyPort })
+        await fetchGeneral()
+    }
+
     async function handleAllowLanChange (state: boolean) {
         await updateConfig({ 'allow-lan': state })
         await fetchGeneral()
@@ -182,6 +189,21 @@ export default function Settings () {
                             />
                         </Col>
                     </Col>
+                    <Col span={12}>
+                        <Col span={14} offset={1}>
+                            <span className="label">{t('labels.mixedProxyPort')}</span>
+                        </Col>
+                        <Col span={8}>
+                            <Input
+                                disabled={clashXData.isClashX}
+                                value={info.mixedProxyPort}
+                                onChange={mixedProxyPort => set('mixedProxyPort', +mixedProxyPort)}
+                                onBlur={handleMixedPortSave}
+                            />
+                        </Col>
+                    </Col>
+                </Row>
+                <Row>
                     <Col span={12}>
                         <Col span={12} offset={1}>
                             <span className="label">{t('labels.externalController')}</span>

src/i18n/en_US.ts

@@ -18,6 +18,7 @@ export default {
             proxyMode: 'Mode',
             socks5ProxyPort: 'Socks5 proxy port',
             httpProxyPort: 'HTTP proxy port',
+            mixedProxyPort: 'Mixed proxy port',
             externalController: 'External controller'
         },
         values: {

src/i18n/zh_CN.ts

@@ -18,6 +18,7 @@ export default {
             proxyMode: '代理模式',
             socks5ProxyPort: 'Socks5 代理端口',
             httpProxyPort: 'HTTP 代理端口',
+            mixedProxyPort: '混合代理端口',
             externalController: '外部控制设置'
         },
         values: {

src/lib/request.ts

@@ -9,6 +9,7 @@ export interface Config {
     port: number
     'socks-port': number
     'redir-port': number
+    'mixed-port': number
     'allow-lan': boolean
     mode: string
     'log-level': string
@@ -160,7 +161,7 @@ export async function getProxyProviders () {
             return (status >= 200 && status < 300) || status === 404
         }
     })
-    // compatible old version
+        // compatible old version
         .then(resp => {
             if (resp.status === 404) {
                 resp.data = { providers: {} }

src/models/Config.ts

@@ -79,6 +79,11 @@ export interface Data {
          */
         socksPort?: number
 
+        /**
+         * mixed porxy port
+         */
+        mixedPort?: number
+
         /**
          * redir proxy port
          */

src/stores/recoil.ts

@@ -163,6 +163,7 @@ export function useGeneral () {
         set({
             port: data.port,
             socksPort: data['socks-port'],
+            mixedPort: data['mixed-port'] ?? 0,
             redirPort: data['redir-port'],
             mode: data.mode.toLowerCase() as Models.Data['general']['mode'],
             logLevel: data['log-level'],