Add: settings page

src/containers/Settings/index.tsx

@@ -1,7 +1,25 @@
 import * as React from 'react'
+import { Header, Card } from '@components'
+import { translate } from 'react-i18next'
+import { I18nProps } from '@i18n'
+
+class Settings extends React.Component<I18nProps, {}> {
+
+    state = {
+        startAtLogin: false
+    }
 
-export default class Settings extends React.Component<{}, {}> {
     render () {
-        return 'Settings'
+        const { t } = this.props
+
+        return (
+            <div className="page">
+                <Header title={t('title')} />
+                <Card style={{ marginTop: 25 }}>
+                </Card>
+            </div>
+        )
     }
 }
+
+export default translate(['Settings'])(Settings)

src/containers/Settings/style.scss

@@ -0,0 +1,12 @@
+@import '~@styles/variables';
+
+.proxies-list {
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+
+    li {
+        margin: 20px 15px 20px 0;
+    }
+}

src/containers/Sidebar/index.tsx

@@ -18,9 +18,9 @@ class Sidebar extends React.Component<SidebarProps, {}> {
     render () {
         const { routes, t } = this.props
         return (
-            <div className="slidebar">
+            <div className="sidebar">
-                <img src={logo} className="slidebar-logo" />
+                <img src={logo} className="sidebar-logo" />
-                <ul className="slidebar-menu">
+                <ul className="sidebar-menu">
                     {
                         routes.map(
                             ({ path, name, exact }) => (
@@ -36,4 +36,4 @@ class Sidebar extends React.Component<SidebarProps, {}> {
     }
 }
 
-export default translate(['slidebar'])(Sidebar)
+export default translate(['SideBar'])(Sidebar)

src/containers/Sidebar/style.scss

@@ -1,6 +1,6 @@
 @import '~@styles/variables';
 
-.slidebar {
+.sidebar {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -8,13 +8,13 @@
     width: 140px;
 }
 
-.slidebar-logo {
+.sidebar-logo {
     margin-top: 50px;
     width: 60px;
     height: 60px;
 }
 
-.slidebar-menu {
+.sidebar-menu {
     display: flex;
     flex-direction: column;
     margin-top: 12px;

src/i18n/en_US.ts

@@ -0,0 +1,31 @@
+export default {
+    SideBar: {
+        Proxies: 'Proxies',
+        Overview: 'Overview',
+        Logs: 'Logs',
+        Rules: 'Rules',
+        Settings: 'Setting'
+    },
+    Settings: {
+        title: 'Settings',
+        labels: {
+            startAtLogin: 'Start at login',
+            language: 'language',
+            setAsSystemProxy: 'Set as system proxy',
+            allowConnectFromLan: 'Allow connect from Lan',
+            proxyMode: 'Mode',
+            socketProxyPort: 'Socket proxy port',
+            httpProxyPort: 'HTTP proxy port',
+            externalController: 'External controller'
+        },
+        values: {
+            cn: '中文',
+            en: 'English',
+            global: 'Global',
+            rules: 'Rules',
+            direct: 'Direct'
+        },
+        versionString: 'Current ClashX is the latest version：{{version}}',
+        checkUpdate: 'Check Update'
+    }
+}

src/i18n/index.ts

@@ -1,30 +1,23 @@
 import * as i18n from 'i18next'
 import * as LanguageDetector from 'i18next-browser-languagedetector'
 
-const options = {
+// locales
-    fallbackLng: 'en',
+import en_US from './en_US'
+import zh_CN from './zh_CN'
+
+const options = {
+    fallbackLng: 'en_US',
+
+    ns: [
+        'SideBar',
+        'Settings'
+    ],
 
-    ns: ['slidebar'],
     resources: {
-        en: {
+        en: en_US,
-            slidebar: {
+        zh: zh_CN
-                Proxies: 'Proxies',
-                Overview: 'Overview',
-                Logs: 'Logs',
-                Rules: 'Rules',
-                Settings: 'Setting'
-            }
-        },
-        'zh-CN': {
-            slidebar: {
-                Proxies: '代理',
-                Overview: '总览',
-                Logs: '日志',
-                Rules: '规则',
-                Settings: '设置'
-            }
-        }
     },
+
     react: {
         wait: true
     }

src/i18n/zh_CN.ts

@@ -0,0 +1,31 @@
+export default {
+    SideBar: {
+        Proxies: '代理',
+        Overview: '总览',
+        Logs: '日志',
+        Rules: '规则',
+        Settings: '设置'
+    },
+    Settings: {
+        title: '设置',
+        labels: {
+            startAtLogin: '开机时启动',
+            language: '语言',
+            setAsSystemProxy: '设置为系统代理',
+            allowConnectFromLan: '允许来自局域网的连接',
+            proxyMode: '代理模式',
+            socketProxyPort: 'Socket 代理端口',
+            httpProxyPort: 'HTTP 代理端口',
+            externalController: '外部控制设置'
+        },
+        values: {
+            cn: '中文',
+            en: 'English',
+            global: '全局',
+            rules: '规则',
+            direct: '直连'
+        },
+        versionString: '当前 ClashX 已是最新版本：{{version}}',
+        checkUpdate: '检查更新'
+    }
+}