import * as React from 'react' import { translate } from 'react-i18next' import { changeLanguage } from 'i18next' import { inject, observer } from 'mobx-react' import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components' import { ExternalControllerModal } from './components' import { I18nProps, BaseRouterProps } from '@models' import { updateConfig } from '@lib/request' import { setLocalStorageItem, to } from '@lib/helper' import { rootStores, storeKeys } from '@lib/createStore' import './style.scss' import { isClashX, jsBridge } from '@lib/jsBridge' interface SettingProps extends BaseRouterProps, I18nProps {} @inject(...storeKeys) @observer class Settings extends React.Component { state = { socks5ProxyPort: 7891, httpProxyPort: 7890, externalControllerHost: '127.0.0.1', externalControllerPort: '8080', externalControllerSecret: '', showEditDrawer: false, isClashX: false } languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh' }, { label: 'English', value: 'en' }] changeLanguage = (language: string) => { changeLanguage(language) } handleExternalControllerChange = (host: string, port: string, secret: string) => { setLocalStorageItem('externalControllerAddr', host) setLocalStorageItem('externalControllerPort', port) setLocalStorageItem('secret', secret) this.setState({ showEditDrawer: false, externalControllerHost: host, externalControllerPort: port, externalControllerSecret: secret }) } handleProxyModeChange = async (mode: string) => { const [, err] = await to(updateConfig({ mode })) if (!err) { rootStores.store.fetchData() } } handleHttpPortSave = async () => { const [, err] = await to(updateConfig({ 'port': this.state.httpProxyPort })) if (!err) { await this.props.store.fetchData() this.setState({ httpProxyPort: this.props.store.data.general.port }) } } handleSocksPortSave = async () => { const [, err] = await to(updateConfig({ 'socks-port': this.state.socks5ProxyPort })) if (!err) { await this.props.store.fetchData() this.setState({ socks5ProxyPort: this.props.store.data.general.socksPort }) } } handleAllowLanChange = async (state: boolean) => { const [, err] = await to(updateConfig({ 'allow-lan': state })) if (!err) { await this.props.store.fetchData() } } handleStartAtLoginChange = async (state: boolean) => { await jsBridge.setStartAtLogin(state) this.setState({ startAtLogin: state }) } handleSetSystemProxy = async (state: boolean) => { await jsBridge.setSystemProxy(state) this.setState({ setAsSystemProxy: state }) } async componentWillMount () { await rootStores.store.fetchData() if (isClashX()) { await rootStores.store.fetchClashXData() const apiInfo = await jsBridge.getAPIInfo() this.setState({ isClashX: true, externalControllerHost: apiInfo.host, externalControllerPort: apiInfo.port, externalControllerSecret: apiInfo.secret }) } const general = this.props.store.data.general this.setState({ socks5ProxyPort: general.socksPort, httpProxyPort: general.port }) } render () { const { t, lng, store } = this.props const { isClashX, externalControllerHost, externalControllerPort, externalControllerSecret, showEditDrawer, socks5ProxyPort, httpProxyPort } = this.state const { allowLan, mode } = store.data.general const { startAtLogin, systemProxy } = store.clashxData const proxyModeOptions: ButtonSelectOptions[] = [ { label: t('values.global'), value: 'Global' }, { label: t('values.rules'), value: 'Rule' }, { label: t('values.direct'), value: 'Direct' } ] return (
{t('labels.startAtLogin')} {t('labels.language')} {t('labels.setAsSystemProxy')} {t('labels.allowConnectFromLan')} {t('labels.proxyMode')} {t('labels.socks5ProxyPort')} this.setState({ socks5ProxyPort: parseInt(socks5ProxyPort, 10) })} onBlur={this.handleSocksPortSave} /> {t('labels.httpProxyPort')} this.setState({ httpProxyPort: parseInt(httpProxyPort, 10) })} onBlur={this.handleHttpPortSave} /> {t('labels.externalController')} {`${externalControllerHost}:${externalControllerPort}`} this.setState({ showEditDrawer: true })}> 修改

{t('versionString', { version: 'unknown' })}

{t('checkUpdate')}
this.setState({ showEditDrawer: false })} />
) } } export default translate(['Settings'])(Settings)