From 417b452953751992f816d0ce6fcccd2514b84206 Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Mon, 24 Sep 2018 23:44:30 +0800
Subject: [PATCH] Update: Log container

---
 src/containers/Logs/index.tsx  | 67 +++++++++++++++++++++++++++++++++-
 src/containers/Logs/style.scss | 26 ++++++++++++-
 src/styles/common.scss         |  3 +-
 3 files changed, 92 insertions(+), 4 deletions(-)

diff --git a/src/containers/Logs/index.tsx b/src/containers/Logs/index.tsx
index be9cf49..9a04cda 100644
--- a/src/containers/Logs/index.tsx
+++ b/src/containers/Logs/index.tsx
@@ -1,13 +1,76 @@
 import * as React from 'react'
+import * as dayjs from 'dayjs'
 import { Card, Header } from '@components'
 import './style.scss'
 
-export default class Logs extends React.Component<{}, {}> {
+interface LogsState {
+    listHeight: number
+}
+
+export default class Logs extends React.Component<{}, LogsState> {
+    state: LogsState = {
+        listHeight: 0
+    }
+
+    componentDidMount () {
+        this.setListHeight()
+    }
+
+    setListHeight = () => {
+        this.setState({
+            listHeight: document.querySelector('.logs-card').clientHeight - 30
+        })
+    }
+
     render () {
+        const logs = [
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() },
+            { type: 'info', payload: 'google.com match DomainSuffix using Proxy', timestamp: +new Date() }
+        ]
+
+        const listHeight = { height: this.state.listHeight }
         return (
             <div className="page">
                 <Header title="日志" />
-                <Card className="logs-card" />
+                <Card className="logs-card">
+                    <ul className="logs-panel" style={listHeight}>
+                        {
+                            logs.map(
+                                log => (
+                                    <li>
+                                        <span className="logs-panel-time">{ dayjs().format('YYYY-MM-DD HH:mm:ss') }</span>
+                                        <span>[{ log.type }] { log.payload }</span>
+                                    </li>
+                                )
+                            )
+                        }
+                    </ul>
+                </Card>
             </div>
         )
     }
diff --git a/src/containers/Logs/style.scss b/src/containers/Logs/style.scss
index b7ba969..17e214f 100644
--- a/src/containers/Logs/style.scss
+++ b/src/containers/Logs/style.scss
@@ -1,3 +1,27 @@
 .logs-card {
-    margin-top: 20px;
+    flex: 1;
+    margin-top: 25px;
+}
+
+.logs-panel {
+    display: flex;
+    flex-direction: column;
+    height: 0;
+    list-style: none;
+    padding: 10px;
+    border-radius: 2px;
+    background-color: #f3f6f9;
+    font-size: 14px;
+    color: #73808f;
+    overflow-y: auto;
+
+    li {
+        line-height: 20px;
+        display: inline-block;
+    }
+}
+
+.logs-panel-time {
+    margin-right: 10px;
+    color: #adb7c3;
 }
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 9f16f68..87e46a9 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -28,12 +28,13 @@ body {
 
 .page-container {
     width: 100%;
-    margin-top: 20px;
+    margin: 20px 0;
 }
 
 .page {
     padding: 10px 35px;
     width: 100%;
+    height: 100%;
     max-width: 1200px;
     margin: 0 auto;
     display: flex;