feat(settings): add proxy setting

src/main/index.ts

@@ -1,6 +1,6 @@
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 import * as Sentry from '@sentry/electron/main'
-import { app, BrowserWindow, ipcMain, Menu, MenuItem, shell } from 'electron'
+import { app, BrowserWindow, ipcMain, Menu, MenuItem, session, shell } from 'electron'
 import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'
 import windowStateKeeper from 'electron-window-state'
 import { join } from 'path'
@@ -101,6 +101,10 @@ app.whenReady().then(() => {
     shell.openExternal(url)
   })
 
+  ipcMain.handle('set-proxy', (_, proxy: string) => {
+    session.defaultSession.setProxy({ proxyRules: proxy })
+  })
+
   // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
   ipcMain.handle('check-for-update', async () => {
     autoUpdater.logger?.info('触发检查更新')

src/preload/index.d.ts

@@ -10,6 +10,7 @@ declare global {
       }>
       checkForUpdate: () => void
       openWebsite: (url: string) => void
+      setProxy: (proxy: string) => void
     }
   }
 }

src/preload/index.ts

@@ -5,7 +5,8 @@ import { electronAPI } from '@electron-toolkit/preload'
 const api = {
   getAppInfo: () => ipcRenderer.invoke('get-app-info'),
   checkForUpdate: () => ipcRenderer.invoke('check-for-update'),
-  openWebsite: (url: string) => ipcRenderer.invoke('open-website', url)
+  openWebsite: (url: string) => ipcRenderer.invoke('open-website', url),
+  setProxy: (proxy: string) => ipcRenderer.invoke('set-proxy', proxy)
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/src/hooks/useAppInit.ts

@@ -4,9 +4,11 @@ import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
 import { useEffect } from 'react'
+import { useSettings } from './useSettings'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
+  const { proxyUrl } = useSettings()
 
   useEffect(() => {
     runAsyncFunction(async () => {
@@ -22,4 +24,8 @@ export function useAppInit() {
       isPackaged && setTimeout(window.api.checkForUpdate, 3000)
     })
   }, [])
+
+  useEffect(() => {
+    proxyUrl && window.api.setProxy(proxyUrl)
+  }, [proxyUrl])
 }

src/renderer/src/i18n/index.ts

@@ -39,6 +39,7 @@ const resources = {
         'error.enter.api.key': 'Please enter your API key first',
         'error.enter.api.host': 'Please enter your API host first',
         'error.enter.model': 'Please select a model first',
+        'error.invalid.proxy.url': 'Invalid proxy URL',
         'api.connection.failed': 'Connection failed',
         'api.connection.success': 'Connection successful',
         'chat.completion.paused': 'Chat completion paused',
@@ -142,7 +143,8 @@ const resources = {
         'about.feedback.title': '📝 Feedback',
         'about.feedback.button': 'Feedback',
         'about.contact.title': '📧 Contact',
-        'about.contact.button': 'Email'
+        'about.contact.button': 'Email',
+        'proxy.title': 'Proxy Address'
       }
     }
   },
@@ -182,6 +184,7 @@ const resources = {
         'error.enter.api.key': '请输入您的 API 密钥',
         'error.enter.api.host': '请输入您的 API 地址',
         'error.enter.model': '请选择一个模型',
+        'error.invalid.proxy.url': '无效的代理地址',
         'api.connection.failed': '连接失败',
         'api.connection.success': '连接成功',
         'chat.completion.paused': '会话已停止',
@@ -286,7 +289,8 @@ const resources = {
         'about.feedback.title': '📝 意见反馈',
         'about.feedback.button': '反馈',
         'about.contact.title': '📧 邮件联系',
-        'about.contact.button': '邮件'
+        'about.contact.button': '邮件',
+        'proxy.title': '代理地址'
       }
     }
   }

src/renderer/src/pages/settings/GeneralSettings.tsx

@@ -1,20 +1,22 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components'
-import { Avatar, Select, Upload } from 'antd'
+import { Avatar, Input, Select, Upload } from 'antd'
 import styled from 'styled-components'
 import LocalStorage from '@renderer/services/storage'
-import { compressImage } from '@renderer/utils'
+import { compressImage, isValidProxyUrl } from '@renderer/utils'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { setLanguage } from '@renderer/store/settings'
 import { useTranslation } from 'react-i18next'
+import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings'
 import i18n from '@renderer/i18n'
 
 const GeneralSettings: FC = () => {
   const avatar = useAvatar()
-  const { language } = useSettings()
+  const { language, proxyUrl: storeProxyUrl } = useSettings()
+  const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
 
@@ -24,6 +26,16 @@ const GeneralSettings: FC = () => {
     localStorage.setItem('language', value)
   }
 
+  const onSetProxyUrl = () => {
+    if (!proxyUrl || !isValidProxyUrl(proxyUrl)) {
+      window.message.error({ content: t('message.error.invalid.proxy.url'), key: 'proxy-error' })
+      return
+    }
+
+    dispatch(_setProxyUrl(proxyUrl))
+    window.api.setProxy(proxyUrl)
+  }
+
   return (
     <SettingContainer>
       <SettingTitle>{t('settings.general.title')}</SettingTitle>
@@ -62,6 +74,18 @@ const GeneralSettings: FC = () => {
         </Upload>
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.proxy.title')}</SettingRowTitle>
+        <Input
+          placeholder="socks5://127.0.0.1:6153"
+          value={proxyUrl}
+          onChange={(e) => setProxyUrl(e.target.value)}
+          style={{ width: 300 }}
+          onBlur={() => onSetProxyUrl()}
+          type="url"
+        />
+      </SettingRow>
+      <SettingDivider />
     </SettingContainer>
   )
 }

src/renderer/src/store/migrate.ts

@@ -250,7 +250,8 @@ const migrate = createMigrate({
       ...state,
       settings: {
         ...state.settings,
-        showAssistants: true
+        showAssistants: true,
+        proxyUrl: undefined
       }
     }
   }

src/renderer/src/store/settings.ts

@@ -7,13 +7,15 @@ export interface SettingsState {
   showAssistants: boolean
   sendMessageShortcut: SendMessageShortcut
   language: string
+  proxyUrl?: string
 }
 
 const initialState: SettingsState = {
   showRightSidebar: true,
   showAssistants: true,
   sendMessageShortcut: 'Enter',
-  language: navigator.language
+  language: navigator.language,
+  proxyUrl: undefined
 }
 
 const settingsSlice = createSlice({
@@ -31,10 +33,14 @@ const settingsSlice = createSlice({
     },
     setLanguage: (state, action: PayloadAction<string>) => {
       state.language = action.payload
+    },
+    setProxyUrl: (state, action: PayloadAction<string | undefined>) => {
+      state.proxyUrl = action.payload
     }
   }
 })
 
-export const { toggleRightSidebar, toggleShowAssistants, setSendMessageShortcut, setLanguage } = settingsSlice.actions
+export const { toggleRightSidebar, toggleShowAssistants, setSendMessageShortcut, setLanguage, setProxyUrl } =
+  settingsSlice.actions
 
 export default settingsSlice.reducer

src/renderer/src/utils/index.ts

@@ -203,3 +203,13 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[])
 export const capitalizeFirstLetter = (str: string) => {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
+
+// is valid proxy url
+export const isValidProxyUrl = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}