feat(Settings, components/Input): add component input

src/components/Input/index.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { BaseComponentProps } from '@models/BaseProps'
+// import classnames from 'classnames'
+import './style.scss'
+
+interface InputProps extends BaseComponentProps {
+    value?: string | number
+    disabled?: boolean
+    onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export class Input extends React.Component<InputProps, {}> {
+    static defaultProps: InputProps = {
+        value: '',
+        disabled: false,
+        onChange: () => {}
+    }
+
+    render() {
+        const { onChange, value } = this.props
+        return (
+            <input className="input" onChange={(event) => {
+                onChange(event.target.value, event)
+            }} value={value} ></input>
+        )
+    }
+}

src/components/Input/style.scss

@@ -0,0 +1,21 @@
+@import '~@styles/variables';
+
+.input {
+    display: inline-block;
+    height: 30px;
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid $color-primary-lightly;
+    padding: 4px 11px;
+    font-size: 14px;
+    color: $color-primary-darken;
+    text-align: center;
+    line-height: 1.5;
+    transition: all 0.3s;
+
+    &:focus {
+        outline: 0;
+        border-color: $color-primary;
+        box-shadow: 0 2px 10px rgba($color: $color-primary, $alpha: 0.5);
+    }
+}

src/components/index.ts

@@ -6,3 +6,4 @@ export * from './Row'
 export * from './Col'
 export * from './ButtonSelect'
 export * from './Tags'
+export * from './Input'

src/containers/Settings/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions } from '@components'
+import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input } from '@components'
 import { translate } from 'react-i18next'
 import { I18nProps } from '@i18n'
 import './style.scss'
@@ -10,7 +10,11 @@ class Settings extends React.Component<I18nProps, {}> {
         startAtLogin: false,
         language: 'en',
         setAsSystemProxy: true,
-        allowConnectFromLan: true
+        allowConnectFromLan: true,
+        proxyMode: 'rule',
+        socketProxyPort: 7891,
+        httpProxyPort: 7890,
+        externalController: '127.0.0.1:7892'
     }
 
     languageOptions: ButtonSelectOptions[] = [
@@ -18,13 +22,23 @@ class Settings extends React.Component<I18nProps, {}> {
         { label: 'English', value: 'en' }
     ]
 
+    proxyModeOptions: ButtonSelectOptions[] = [
+        { label: '全局', value: 'global' },
+        { label: '规则', value: 'rule' },
+        { label: '直连', value: 'none' }
+    ]
+
     render () {
         const { t } = this.props
         const {
             startAtLogin,
             language,
             setAsSystemProxy,
-            allowConnectFromLan
+            allowConnectFromLan,
+            proxyMode,
+            socketProxyPort,
+            httpProxyPort,
+            externalController,
         } = this.state
 
         return (
@@ -73,6 +87,40 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                     </Row>
                 </Card>
+                <Card className="settings-card">
+                    <Row gutter={24} align="middle">
+                        <Col span={3} offset={1}>
+                            <span className="label">{t('labels.proxyMode')}</span>
+                        </Col>
+                        <Col span={7} className="value-column">
+                            <ButtonSelect
+                                options={this.proxyModeOptions}
+                                value={proxyMode}
+                                onSelect={proxyMode => this.setState({ proxyMode })}
+                            />
+                        </Col>
+                        <Col span={4} offset={1}>
+                            <span className="label">{t('labels.socketProxyPort')}</span>
+                        </Col>
+                        <Col span={3} offset={4}>
+                            <Input value={socketProxyPort} onChange={socketProxyPort => this.setState({socketProxyPort})}></Input>
+                        </Col>
+                    </Row>
+                    <Row gutter={24} align="middle">
+                        <Col span={4} offset={1}>
+                            <span className="label">{t('labels.httpProxyPort')}</span>
+                        </Col>
+                        <Col span={3} offset={3}>
+                            <Input value={httpProxyPort} onChange={httpProxyPort => this.setState({httpProxyPort})}></Input>
+                        </Col>
+                        <Col span={4} offset={1}>
+                            <span className="label">{t('labels.externalController')}</span>
+                        </Col>
+                        <Col span={5} offset={2}>
+                            <Input value={externalController} ></Input>
+                        </Col>
+                    </Row>
+                </Card>
             </div>
         )
     }