Improve: use scrolling css & history api

src/components/Modal/style.scss

@@ -19,6 +19,7 @@ $mobileBigWidth: 480px;
     display: flex;
     justify-content: center;
     align-items: center;
+    z-index: 11;
 
     .modal {
         margin-top: -50px;
@@ -82,6 +83,11 @@ $mobileBigWidth: 480px;
 
 @media (max-width: 768px) {
     .modal-mask {
+        .modal {
+            margin-top: 0;
+            padding: 18px 20px;
+        }
+
         .modal-small {
             width: $mobileWidth;
         }

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

@@ -19,7 +19,7 @@ interface ProxyState {
 }
 
 export class Proxy extends React.Component<ProxyProps , ProxyState> {
-    constructor (props) {
+    constructor (props: ProxyProps) {
         super(props)
 
         const { config } = props
@@ -31,9 +31,10 @@ export class Proxy extends React.Component<ProxyProps , ProxyState> {
             setLocalStorageItem(name, color)
         }
 
+        const delay = config.history.length ? config.history.slice(-1)[0].delay : 0
         this.state = {
-            delay: -1,
+            delay,
-            hasError: false,
+            hasError: delay === 0,
             color
         }
     }
@@ -85,7 +86,7 @@ export class Proxy extends React.Component<ProxyProps , ProxyState> {
             <div className={classnames('proxy-item', { 'proxy-error': hasError }, className)}>
                 <span className="proxy-type" style={{ backgroundColor }}>{config.type}</span>
                 <p className="proxy-name">{config.name}</p>
-                <p className="proxy-delay">{delay === -1 ? '-' : `${delay}ms`}</p>
+                <p className="proxy-delay">{delay === 0 ? '-' : `${delay}ms`}</p>
                 {/* <Icon className="proxy-editor" type="setting" onClick={onEdit} /> */}
             </div>
         )

src/lib/request.ts

@@ -32,9 +32,15 @@ export interface Proxies {
     }
 }
 
+interface History {
+    time: string
+    delay: number
+}
+
 export interface Proxy {
     name: string
     type: 'Direct' | 'Reject' | 'Shadowsocks' | 'Vmess' | 'Socks' | 'Http'
+    history: History[]
 }
 
 export interface Group {
@@ -42,6 +48,7 @@ export interface Group {
     type: 'Selector' | 'URLTest' | 'Fallback'
     now: string
     all: string[]
+    history: History[]
 }
 
 export async function getConfig () {
@@ -130,7 +137,7 @@ export async function getExternalControllerConfig () {
     }
 
     const hostname = getLocalStorageItem('externalControllerAddr', '127.0.0.1')
-    const port = getLocalStorageItem('externalControllerPort', '8080')
+    const port = getLocalStorageItem('externalControllerPort', '9090')
     const secret = getLocalStorageItem('secret', '')
 
     if (!hostname || !port) {

src/stores/ConfigStore.ts

@@ -25,7 +25,7 @@ export class ConfigStore {
     @observable
     apiInfo: Models.APIInfo = {
         hostname: '127.0.0.1',
-        port: '8080',
+        port: '9090',
         secret: ''
     }
 
@@ -153,7 +153,7 @@ export class ConfigStore {
                 allowLan: config['allow-lan'],
                 mode: config.mode,
                 externalControllerAddr: getLocalStorageItem('externalControllerAddr', '127.0.0.1'),
-                externalControllerPort: getLocalStorageItem('externalControllerPort', '8080'),
+                externalControllerPort: getLocalStorageItem('externalControllerPort', '9090'),
                 secret: getLocalStorageItem('secret', '')
             }
         }

src/styles/common.scss

@@ -71,6 +71,7 @@ body {
         width: 100%;
         padding: 0 10px;
         height: calc(100vh - 60px);
+        -webkit-overflow-scrolling: touch;
 
         &::-webkit-scrollbar {
             display: none;