yangpei
4 years ago
10 changed files with 102 additions and 203 deletions
@ -1,59 +0,0 @@ |
|||
import React from 'react' |
|||
import DataView from '../logView' |
|||
import { ConsoleType } from '../store' |
|||
|
|||
interface Props { |
|||
logList: ConsoleType[] |
|||
} |
|||
|
|||
const Log: React.FC<Props> = (props) => { |
|||
const renderLogList = (logList: ConsoleType[]) => { |
|||
return logList.map((log: ConsoleType, index: number) => { |
|||
const dataView = log.infos.map((info: any, i: number) => { |
|||
return typeof info !== 'object' || info === null ? |
|||
<div key={i}>{`${info}`}</div> : |
|||
<DataView data={info} key={i} /> |
|||
}) |
|||
let ele = null |
|||
|
|||
// 根据不同console类型展示不同的样式
|
|||
switch (log.logType) { |
|||
case 'warn': |
|||
ele = <div |
|||
key={index} |
|||
style={{ |
|||
background: '#fffacd', |
|||
color: 'orange', |
|||
border: '1px solid #ffb930' |
|||
}} |
|||
> |
|||
{dataView} |
|||
</div> |
|||
break |
|||
case 'log': |
|||
ele = <div key={index}> |
|||
{dataView} |
|||
</div> |
|||
break |
|||
case 'error': |
|||
ele = <div |
|||
key={index} |
|||
style={{ |
|||
background: '#ffe4e1', |
|||
border: '1px solid #f4a0ab' |
|||
}} |
|||
> |
|||
<div style={{ color: '#dc143c' }}>{dataView}</div> |
|||
</div> |
|||
break |
|||
} |
|||
return ele |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(props.logList)}</div> |
|||
) |
|||
} |
|||
|
|||
export default Log |
@ -1,35 +0,0 @@ |
|||
export interface ConsoleType { |
|||
logType: string |
|||
infos: any[] |
|||
} |
|||
|
|||
export class ConsoleStore { |
|||
logList: ConsoleType[] = [] |
|||
logType: string = 'All' |
|||
|
|||
addLog(log: ConsoleType) { |
|||
this.logList.push(log) |
|||
} |
|||
|
|||
clearLog() { |
|||
this.logList = [] |
|||
} |
|||
|
|||
get computeLogList() { |
|||
let ret: ConsoleType[] = [] |
|||
if (this.logType === 'All') { |
|||
ret = this.logList |
|||
} else { |
|||
ret = this.logList.filter((item) => { |
|||
return item.logType === this.logType.toLowerCase() |
|||
}) |
|||
} |
|||
return ret |
|||
} |
|||
|
|||
changeLogType(type: string) { |
|||
this.logType = type |
|||
} |
|||
} |
|||
|
|||
export default new ConsoleStore() |
Loading…
Reference in new issue