wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update: Log container

Browse Source
This commit is contained in:
Dreamacro 2018-09-24 23:44:30 +08:00
parent 6c1bbe0abf
commit 417b452953
3 changed files with 92 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/containers/Logs/index.tsx
View File

@ -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>
)
}

26
src/containers/Logs/style.scss
View File

@ -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;
}

3
src/styles/common.scss
View File

@ -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;