From 42a6dfea8768b0196dd47f252bfe6c6f58787913 Mon Sep 17 00:00:00 2001 From: Dreamacro <305009791@qq.com> Date: Sun, 23 Dec 2018 20:29:52 +0800 Subject: [PATCH] Chore: adjust style & logic --- src/components/Tags/style.scss | 2 +- src/containers/Rules/index.tsx | 8 ++-- src/containers/Settings/index.tsx | 72 ++++++++++++++++--------------- src/index.html.ejs | 4 -- src/models/Config.ts | 5 +++ src/stores/ConfigStore.ts | 19 ++++++++ src/styles/common.scss | 1 + 7 files changed, 68 insertions(+), 43 deletions(-) diff --git a/src/components/Tags/style.scss b/src/components/Tags/style.scss index fb81856..8b72b24 100644 --- a/src/components/Tags/style.scss +++ b/src/components/Tags/style.scss @@ -46,7 +46,7 @@ $delete-height: 22px; .tags-expand { height: 30px; line-height: 30px; - padding: 0 10px; + padding: 0 20px; user-select: none; cursor: pointer; } diff --git a/src/containers/Rules/index.tsx b/src/containers/Rules/index.tsx index 1839789..250eaa2 100644 --- a/src/containers/Rules/index.tsx +++ b/src/containers/Rules/index.tsx @@ -4,17 +4,17 @@ import { Header, Card, Row, Col } from '@components' import { I18nProps, BaseRouterProps } from '@models' import './style.scss' import { storeKeys } from '@lib/createStore' -import { inject } from 'mobx-react' +import { inject, observer } from 'mobx-react' import { List, AutoSizer } from 'react-virtualized' interface RulesProps extends BaseRouterProps, I18nProps {} @inject(...storeKeys) +@observer class Rules extends React.Component { - async componentDidMount () { - const { store } = this.props - await store.fetchData() + async componentWillMount () { + await this.props.store.fetchData() } renderRuleItem = ({ index, key, style }) => { diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx index 348bad9..2177723 100644 --- a/src/containers/Settings/index.tsx +++ b/src/containers/Settings/index.tsx @@ -1,21 +1,22 @@ 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 } from '@models' +import { I18nProps, BaseRouterProps } from '@models' import { updateConfig } from '@lib/request' import { setLocalStorageItem, to } from '@lib/helper' -import { rootStores } from '@lib/createStore' +import { rootStores, storeKeys } from '@lib/createStore' import './style.scss' import { isClashX, jsBridge } from '@lib/jsBridge' -class Settings extends React.Component { +interface SettingProps extends BaseRouterProps, I18nProps {} + +@inject(...storeKeys) +@observer +class Settings extends React.Component { state = { - startAtLogin: false, - setAsSystemProxy: false, - allowConnectFromLan: false, - proxyMode: 'Rule', socks5ProxyPort: 7891, httpProxyPort: 7890, externalControllerHost: '127.0.0.1', @@ -45,25 +46,31 @@ class Settings extends React.Component { handleProxyModeChange = async (mode: string) => { const [, err] = await to(updateConfig({ mode })) - if (err === null) { - this.setState({ proxyMode: mode }) + if (!err) { + rootStores.store.fetchData() } } handleHttpPortSave = async () => { const [, err] = await to(updateConfig({ 'port': this.state.httpProxyPort })) - if (err === null) {} + 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 === null) {} + 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 === null) { - this.setState({ allowConnectFromLan: state }) + if (!err) { + await this.props.store.fetchData() } } @@ -77,47 +84,43 @@ class Settings extends React.Component { this.setState({ setAsSystemProxy: state }) } - async componentDidMount () { + async componentWillMount () { + await rootStores.store.fetchData() if (isClashX()) { - await rootStores.store.fetchAndParseConfig() - const startAtLogin = await jsBridge.getStartAtLogin() - const setAsSystemProxy = await jsBridge.isSystemProxySet() + await rootStores.store.fetchClashXData() const apiInfo = await jsBridge.getAPIInfo() this.setState({ - startAtLogin, - setAsSystemProxy, isClashX: true, externalControllerHost: apiInfo.host, externalControllerPort: apiInfo.port, externalControllerSecret: apiInfo.secret }) } - await rootStores.store.fetchData() - const general = rootStores.store.data.general + const general = this.props.store.data.general this.setState({ - allowConnectFromLan: general.allowLan, - proxyMode: general.mode, socks5ProxyPort: general.socksPort, httpProxyPort: general.port }) } render () { - const { t, lng } = this.props + const { t, lng, store } = this.props const { isClashX, - startAtLogin, - setAsSystemProxy, - allowConnectFromLan, - proxyMode, - socks5ProxyPort, - httpProxyPort, externalControllerHost, externalControllerPort, externalControllerSecret, - showEditDrawer + 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' }, @@ -149,7 +152,7 @@ class Settings extends React.Component { @@ -158,7 +161,7 @@ class Settings extends React.Component { @@ -173,7 +176,7 @@ class Settings extends React.Component { @@ -194,6 +197,7 @@ class Settings extends React.Component { this.setState({ httpProxyPort: parseInt(httpProxyPort, 10) })} onBlur={this.handleHttpPortSave} diff --git a/src/index.html.ejs b/src/index.html.ejs index eab655d..f8471f7 100644 --- a/src/index.html.ejs +++ b/src/index.html.ejs @@ -7,9 +7,5 @@
- - - - diff --git a/src/models/Config.ts b/src/models/Config.ts index 9d111bc..d2ecdd7 100644 --- a/src/models/Config.ts +++ b/src/models/Config.ts @@ -64,6 +64,11 @@ export interface Config { } +export interface ClashXData { + startAtLogin: boolean + systemProxy: boolean +} + export interface Data { general?: { diff --git a/src/stores/ConfigStore.ts b/src/stores/ConfigStore.ts index 96bdd92..4fb9f46 100644 --- a/src/stores/ConfigStore.ts +++ b/src/stores/ConfigStore.ts @@ -22,6 +22,12 @@ export class ConfigStore { rules: [] } + @observable + clashxData: Models.ClashXData = { + startAtLogin: false, + systemProxy: false + } + @action async fetchData () { const [{ data: general }, rawProxies, rules] = await Promise.all([API.getConfig(), API.getProxies(), API.getRules()]) @@ -49,6 +55,19 @@ export class ConfigStore { }) } + @action + async fetchClashXData () { + const startAtLogin = await jsBridge.getStartAtLogin() + const systemProxy = await jsBridge.isSystemProxySet() + + runInAction(() => { + this.clashxData = { + startAtLogin, + systemProxy + } + }) + } + @action async fetchAndParseConfig () { const rawConfig = await jsBridge.readConfigString() diff --git a/src/styles/common.scss b/src/styles/common.scss index e667dce..24cc018 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -33,6 +33,7 @@ body { .page-container { width: 100%; height: 100vh; + overflow-y: scroll; } .page {