Add: component <Header>

package-lock.json

@@ -2263,6 +2263,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",

package.json

@@ -58,6 +58,7 @@
         "webpack-merge": "^4.1.4"
     },
     "dependencies": {
+        "classnames": "^2.2.6",
         "i18next": "^11.9.0",
         "i18next-browser-languagedetector": "^2.2.3",
         "ini": "^1.3.5",

src/components/Header/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { BaseComponentProps } from '@models/BaseProps'
+import classnames from 'classnames'
+import './style.scss'
+
+interface HeaderProps extends BaseComponentProps {
+    // header title
+    title: string
+}
+
+export class Header extends React.Component<HeaderProps, {}> {
+    render () {
+        const { title, children, className, style } = this.props
+
+        return <header className={classnames('header', className)} style={style}>
+            <h1>{title}</h1>
+            <div className="operations">{children}</div>
+        </header>
+    }
+}

src/components/Header/style.scss

@@ -0,0 +1,18 @@
+@import '~@styles/variables';
+
+.header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    > h1 {
+        flex-shrink: 0;
+        font-size: 30px;
+        color: $color-primary-dark;
+        font-weight: 500;
+        text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
+        user-select: none;
+    }
+}

src/components/index.ts

@@ -0,0 +1 @@
+export * from './Header'

src/containers/Proxies/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Header } from '@components'
+
+export default class Proxies extends React.Component<{}, {}> {
+    render () {
+        return <div className="container">
+            <Header title="代理" >
+
+            </Header>
+        </div>
+    }
+}

src/containers/Proxies/style.scss

@@ -0,0 +1 @@
+@import '~@styles/variables';

src/containers/ProxyGroup/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { Header } from '@components'
+
+export default class ProxyGroup extends React.Component<{}, {}> {
+    render () {
+        return <div className="container">
+            <Header title="策略组" />
+        </div>
+    }
+}

src/containers/ProxyGroup/style.scss

@@ -0,0 +1 @@
+@import '~@styles/variables';

src/containers/Sidebar/style.scss

@@ -4,6 +4,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    flex-shrink: 0;
     width: 120px;
 }
 

src/models/BaseProps.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react'
 import { RouteComponentProps } from 'react-router'
 import { RouterStore, ConfigStore } from '@stores'
 
@@ -10,8 +11,13 @@ export interface BaseRouterProps extends RouteComponentProps<any>, BaseProps {}
 /**
  * use when component is inject by mobx
  */
-export interface BaseProps {
+export interface BaseProps extends BaseComponentProps {
     styles?: any
     router?: RouterStore
     config?: ConfigStore
 }
+
+export interface BaseComponentProps {
+    className?: string
+    style?: CSSProperties
+}

src/styles/common.scss

@@ -24,3 +24,20 @@ body {
     min-height: 100vh;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
+
+.page-container {
+    width: 100%;
+}
+
+.page {
+    padding: 10px 35px;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.container {
+    margin: 20px 0;
+}

src/views/App.tsx

@@ -27,7 +27,7 @@ export default class App extends React.Component<AppProps, {}> {
         return (
             <div className="app">
                 <SlideBar routes={routes} />
-                <div>
+                <div className="page-container">
                     {
                         routes.map(
                             route => <Route exact={!!route.exact} path={route.path} component={route.component}/>

src/views/Proxies/index.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react'
 
+// containers
+import ProxiesContainer from '@containers/Proxies'
+import ProxyGroupContainer from '@containers/ProxyGroup'
+
 export default class Proxies extends React.Component<{}, {}> {
     render () {
-        return 'Proxies'
+        return <div className="page">
+            <ProxiesContainer />
+            <ProxyGroupContainer />
+        </div>
     }
 }