Chore: adjust style & logic

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;
 }

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<RulesProps, {}> {
 
-    async componentDidMount () {
+    async componentWillMount () {
-        const { store } = this.props
+        await this.props.store.fetchData()
-        await store.fetchData()
     }
 
     renderRuleItem = ({ index, key, style }) => {

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<I18nProps, {}> {
+interface SettingProps extends BaseRouterProps, I18nProps {}
+
+@inject(...storeKeys)
+@observer
+class Settings extends React.Component<SettingProps, {}> {
     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<I18nProps, {}> {
 
     handleProxyModeChange = async (mode: string) => {
         const [, err] = await to(updateConfig({ mode }))
-        if (err === null) {
+        if (!err) {
-            this.setState({ proxyMode: mode })
+            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) {
+        if (!err) {
-            this.setState({ allowConnectFromLan: state })
+            await this.props.store.fetchData()
         }
     }
 
@@ -77,47 +84,43 @@ class Settings extends React.Component<I18nProps, {}> {
         this.setState({ setAsSystemProxy: state })
     }
 
-    async componentDidMount () {
+    async componentWillMount () {
+        await rootStores.store.fetchData()
         if (isClashX()) {
-            await rootStores.store.fetchAndParseConfig()
+            await rootStores.store.fetchClashXData()
-            const startAtLogin = await jsBridge.getStartAtLogin()
-            const setAsSystemProxy = await jsBridge.isSystemProxySet()
             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<I18nProps, {}> {
                         <Col span={4} className="value-column">
                             <Switch
                                 disabled={!isClashX}
-                                checked={setAsSystemProxy}
+                                checked={systemProxy}
                                 onChange={this.handleSetSystemProxy}
                             />
                         </Col>
@@ -158,7 +161,7 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                         <Col span={4} className="value-column">
                             <Switch
-                                checked={allowConnectFromLan}
+                                checked={allowLan}
                                 onChange={this.handleAllowLanChange}
                             />
                         </Col>
@@ -173,7 +176,7 @@ class Settings extends React.Component<I18nProps, {}> {
                         <Col span={7} className="value-column">
                             <ButtonSelect
                                 options={proxyModeOptions}
-                                value={proxyMode}
+                                value={mode}
                                 onSelect={this.handleProxyModeChange}
                             />
                         </Col>
@@ -194,6 +197,7 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                         <Col span={3} offset={2}>
                             <Input
+                                type="number"
                                 value={httpProxyPort}
                                 onChange={httpProxyPort => this.setState({ httpProxyPort: parseInt(httpProxyPort, 10) })}
                                 onBlur={this.handleHttpPortSave}

src/index.html.ejs

@@ -7,9 +7,5 @@
     </head>
     <body>
         <div id="root"></div>
-
-        <!-- Dependencies -->
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script> -->
-        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script> -->
     </body>
 </html>

src/models/Config.ts

@@ -64,6 +64,11 @@ export interface Config {
 
 }
 
+export interface ClashXData {
+    startAtLogin: boolean
+    systemProxy: boolean
+}
+
 export interface Data {
 
     general?: {

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()

src/styles/common.scss

@@ -33,6 +33,7 @@ body {
 .page-container {
     width: 100%;
     height: 100vh;
+    overflow-y: scroll;
 }
 
 .page {