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: <Logs> i18n

Browse Source
This commit is contained in:
Dreamacro 2018-09-25 00:16:19 +08:00
parent f9f3e83e31
commit 5820563c1d
4 changed files with 41 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,37 @@
import * as React from 'react'
import * as dayjs from 'dayjs'
import { translate } from 'react-i18next'
import { I18nProps } from '@i18n'
import { Card, Header } from '@components'
import './style.scss'
interface LogsState {
listHeight: number
interface Log {
type: string
payload: string,
time: Date
}
export default class Logs extends React.Component<{}, LogsState> {
interface LogsProps extends I18nProps {}
interface LogsState {
listHeight: number
logs: Log[]
}
class Logs extends React.Component<LogsProps, LogsState> {
state: LogsState = {
listHeight: 0
listHeight: 0,
logs: []
}
private listRef = React.createRef<HTMLUListElement>()
componentDidMount () {
this.setListHeight()
const logs: Log[] = Array.from(
{ length: 32 },
() => ({ type: 'info', payload: 'google.com match DomainSuffix using Proxy', time: new Date() })
)
this.setState({ logs }, () => this.scrollToBottom())
}
setListHeight = () => {
@ -22,45 +40,21 @@ export default class Logs extends React.Component<{}, LogsState> {
})
}
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() }
]
scrollToBottom = () => {
const ul = this.listRef.current
ul.scrollTop = ul.scrollHeight
}
render () {
const listHeight = { height: this.state.listHeight }
const { t } = this.props
return (
<div className="page">
<Header title="日志" />
<Header title={ t('title') } />
<Card className="logs-card">
<ul className="logs-panel" style={listHeight}>
<ul className="logs-panel" style={listHeight} ref={this.listRef}>
{
logs.map(
this.state.logs.map(
log => (
<li>
<span className="logs-panel-time">{ dayjs().format('YYYY-MM-DD HH:mm:ss') }</span>
@ -75,3 +69,5 @@ export default class Logs extends React.Component<{}, LogsState> {
)
}
}
export default translate(['Logs'])(Logs)

3
src/i18n/en_US.ts
View File

@ -27,5 +27,8 @@ export default {
},
versionString: 'Current ClashX is the latest version：{{version}}',
checkUpdate: 'Check Update'
},
Logs: {
title: 'Logs'
}
}

3
src/i18n/index.ts
View File

@ -10,7 +10,8 @@ const options = {
ns: [
'SideBar',
'Settings'
'Settings',
'Logs'
],
resources: {

3
src/i18n/zh_CN.ts
View File

@ -27,5 +27,8 @@ export default {
},
versionString: '当前 ClashX 已是最新版本：{{version}}',
checkUpdate: '检查更新'
},
Logs: {
title: '日志'
}
}