Feat: manual speed test

.travis.yml

@@ -20,4 +20,3 @@ deploy:
     on:
         repo: Dreamacro/clash-dashboard
         branch: master
-        tags: true

src/components/Header/style.scss

@@ -18,3 +18,8 @@
         line-height: 32px;
     }
 }
+
+.operations {
+    display: flex;
+    align-items: center;
+}

src/containers/Proxies/components/Proxy/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import classnames from 'classnames'
-// import { Icon } from '@components'
 import { BaseComponentProps, TagColors } from '@models'
 import { getProxyDelay, Proxy as IProxy } from '@lib/request'
+import EE, { Action } from '@lib/event'
 import { isClashX, jsBridge } from '@lib/jsBridge'
 import { to, getLocalStorageItem, setLocalStorageItem, sample } from '@lib/helper'
 import './style.scss'
@@ -48,7 +48,15 @@ export class Proxy extends React.Component<ProxyProps , ProxyState> {
         }
     }
 
-    async componentDidMount () {
+    componentDidMount () {
+        EE.subscribe(Action.SPEED_NOTIFY, this.speedTest)
+    }
+
+    componentWillUnmount () {
+        EE.unsubscribe(Action.SPEED_NOTIFY, this.speedTest)
+    }
+
+    speedTest = async () => {
         const { config } = this.props
         if (isClashX()) {
             const delay = await jsBridge.getProxyDelay(config.name)

src/containers/Proxies/index.tsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { translate } from 'react-i18next'
 import { inject, observer } from 'mobx-react'
 import { storeKeys } from '@lib/createStore'
-import { Card, Header } from '@components'
+import EE from '@lib/event'
+import { Card, Header, Icon } from '@components'
 import { I18nProps, BaseRouterProps } from '@models'
 
 import { Proxy, Group } from './components'
@@ -20,6 +21,10 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
         this.props.store.fetchData()
     }
 
+    handleNotitySpeedTest = () => {
+        EE.notifySpeedTest()
+    }
+
     render () {
         const { t, store } = this.props
 
@@ -40,7 +45,10 @@ class Proxies extends React.Component<ProxiesProps, ProxiesState> {
                     </Card>
                 </div>
                 <div className="proxies-container">
-                    <Header title={t('title')} />
+                    <Header title={t('title')}>
+                        <Icon type="speed" size={20} />
+                        <span className="proxies-speed-test" onClick={this.handleNotitySpeedTest}>测速</span>
+                    </Header>
                     <ul className="proxies-list">
                         {
                             store.data.proxy.map(p => (

src/containers/Proxies/style.scss

@@ -6,6 +6,7 @@
 
     display: flex;
     margin-right: calc(-1 * var(--gap));
+    margin-top: 20px;
     padding-bottom: 100px;
     flex-wrap: wrap;
     align-content: flex-start;
@@ -57,5 +58,13 @@
 }
 
 .proxies-group-card {
-    margin: 15px 0 20px;
+    margin: 20px 0;
+}
+
+.proxies-speed-test {
+    line-height: 32px;
+    margin: 0 2px 0 6px;
+    color: $color-primary-dark;
+    text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
+    cursor: pointer;
 }

src/lib/event.ts

@@ -0,0 +1,23 @@
+import * as EventEmitter from 'eventemitter3'
+
+export enum Action {
+    SPEED_NOTIFY = 'speed-notify'
+}
+
+class Event {
+    protected EE = new EventEmitter()
+
+    notifySpeedTest () {
+        this.EE.emit(Action.SPEED_NOTIFY)
+    }
+
+    subscribe<T> (event: Action, callback: (data?: T) => void) {
+        this.EE.addListener(event, callback)
+    }
+
+    unsubscribe<T> (event: Action, callback: (data?: T) => void) {
+        this.EE.removeListener(event, callback)
+    }
+}
+
+export default new Event()

src/styles/iconfont.scss

@@ -6,7 +6,7 @@
 
 @font-face {
     font-family: "clash-iconfont";
-    src: url('//at.alicdn.com/t/font_841708_e9dax11p22i.ttf') format('truetype');
+    src: url('//at.alicdn.com/t/font_841708_6gtmjlak9k2.ttf?t=1551607902712') format('truetype');
 }
 
 .clash-iconfont {
@@ -18,6 +18,8 @@
     color: $color-primary-dark;
 }
 
+.icon-speed::before { content: "\e61b"; }
+
 .icon-close::before { content: "\e602"; }
 
 .icon-drag::before { content: "\e604"; }