Update: support change language

src/components/Header/style.scss

@@ -14,5 +14,6 @@
         font-weight: 500;
         text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
         user-select: none;
+        line-height: 32px;
     }
 }

src/containers/Settings/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
-import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input } from '@components'
+import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
 import { translate } from 'react-i18next'
+import { changeLanguage } from 'i18next'
 import { I18nProps } from '@i18n'
 import './style.scss'
 
@@ -8,10 +9,9 @@ class Settings extends React.Component<I18nProps, {}> {
 
     state = {
         startAtLogin: false,
-        language: 'en',
         setAsSystemProxy: true,
         allowConnectFromLan: true,
-        proxyMode: 'rule',
+        proxyMode: 'Rule',
         socks5ProxyPort: 7891,
         httpProxyPort: 7890,
         externalController: '127.0.0.1:7892'
@@ -22,17 +22,14 @@ class Settings extends React.Component<I18nProps, {}> {
         { label: 'English', value: 'en' }
     ]
 
-    proxyModeOptions: ButtonSelectOptions[] = [
-        { label: '全局', value: 'global' },
-        { label: '规则', value: 'rule' },
-        { label: '直连', value: 'none' }
-    ]
+    changeLanguage = (language: string) => {
+        changeLanguage(language)
+    }
 
     render () {
-        const { t } = this.props
+        const { t, lng } = this.props
         const {
             startAtLogin,
-            language,
             setAsSystemProxy,
             allowConnectFromLan,
             proxyMode,
@@ -40,6 +37,11 @@ class Settings extends React.Component<I18nProps, {}> {
             httpProxyPort,
             externalController
         } = this.state
+        const proxyModeOptions: ButtonSelectOptions[] = [
+            { label: t('values.global'), value: 'Global' },
+            { label: t('values.rules'), value: 'Rule' },
+            { label: t('values.direct'), value: 'Direct' }
+        ]
 
         return (
             <div className="page">
@@ -61,8 +63,8 @@ class Settings extends React.Component<I18nProps, {}> {
                         <Col span={7} className="value-column">
                             <ButtonSelect
                                 options={this.languageOptions}
-                                value={language}
-                                onSelect={language => this.setState({ language })}
+                                value={lng}
+                                onSelect={this.changeLanguage}
                             />
                         </Col>
                     </Row>
@@ -87,6 +89,7 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                     </Row>
                 </Card>
+
                 <Card className="settings-card">
                     <Row gutter={24} align="middle">
                         <Col span={3} offset={1}>
@@ -94,7 +97,7 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                         <Col span={7} className="value-column">
                             <ButtonSelect
-                                options={this.proxyModeOptions}
+                                options={proxyModeOptions}
                                 value={proxyMode}
                                 onSelect={proxyMode => this.setState({ proxyMode })}
                             />
@@ -107,20 +110,28 @@ class Settings extends React.Component<I18nProps, {}> {
                         </Col>
                     </Row>
                     <Row gutter={24} align="middle">
-                        <Col span={4} offset={1}>
+                        <Col span={5} offset={1}>
                             <span className="label">{t('labels.httpProxyPort')}</span>
                         </Col>
-                        <Col span={3} offset={3}>
+                        <Col span={3} offset={2}>
                             <Input value={httpProxyPort} onChange={httpProxyPort => this.setState({ httpProxyPort })}></Input>
                         </Col>
-                        <Col span={4} offset={1}>
+                        <Col span={5} offset={1}>
                             <span className="label">{t('labels.externalController')}</span>
                         </Col>
-                        <Col span={5} offset={2}>
+                        <Col span={5} offset={1}>
                             <Input value={externalController} ></Input>
                         </Col>
                     </Row>
                 </Card>
+
+                <Card className="clash-version" style={{ display: 'none' }}>
+                    <span className="check-icon">
+                        <Icon type="check" size={20}/>
+                    </span>
+                    <p className="version-info">{t('versionString', { version: 'unknown' })}</p>
+                    <span className="check-update-btn">{t('checkUpdate')}</span>
+                </Card>
             </div>
         )
     }

src/containers/Settings/style.scss

@@ -5,6 +5,7 @@
     padding: 20px 0;
 
     .column {
+        font-weight: bold;
         align-items: center;
     }
 
@@ -17,3 +18,47 @@
         color: $color-primary-darken;
     }
 }
+
+.clash-version {
+    position: relative;
+    margin-top: 25px;
+    padding: 20px 45px;
+    display: flex;
+
+    .check-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, $color-primary, $color-primary-dark);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        > i {
+            transform: scale(0.5);
+            color: #fff;
+            font-weight: bold;
+        }
+    }
+
+    .version-info {
+        margin-left: 10px;
+        font-size: 14px;
+        line-height: 24px;
+        color: $color-primary-darken;
+    }
+
+    .check-update-btn {
+        position: absolute;
+        right: 45px;
+        font-size: 14px;
+        line-height: 24px;
+        color: $color-gray-dark;
+        cursor: pointer;
+        transition: all 150ms ease;
+
+        &:hover {
+            color: $color-primary-darken;
+        }
+    }
+}

src/containers/Sidebar/style.scss

@@ -41,7 +41,7 @@
         }
 
         > a.active {
-            background: linear-gradient(to right, $color-primary, $color-primary-dark);
+            background: linear-gradient(135deg, $color-primary, $color-primary-dark);
             color: #fff;
             box-shadow: 0 2px 8px rgba($color: $color-primary-dark, $alpha: 0.5);
         }

src/i18n/index.ts

@@ -25,7 +25,8 @@ const options = {
 }
 
 export interface I18nProps {
-    t? (key: string): string
+    t? (key: string, variables?: { [key: string]: any }): string
+    lng?: string
 }
 
 export default i18n.use(LanguageDetector).init(options)