smallstonesk
4 years ago
2 changed files with 82 additions and 55 deletions
@ -0,0 +1,7 @@ |
|||
.container { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 10px; |
|||
background: #272823; |
|||
overflow: scroll; |
|||
} |
@ -1,78 +1,98 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
interface ConsoleType { |
|||
logType: string |
|||
infos: any[] |
|||
import React, { |
|||
useState, |
|||
useEffect |
|||
} from 'react'; |
|||
|
|||
import styles from './index.module.less'; |
|||
|
|||
interface ILog { |
|||
type: string; |
|||
data: any[]; |
|||
} |
|||
|
|||
const isPlainObject = (value: any): boolean => { |
|||
return typeof value === 'object' && value !== null; |
|||
} |
|||
|
|||
const hijackMap: {[key: string]: any} = { |
|||
log: { |
|||
color: '#ffffff', |
|||
originMethod: console.log |
|||
}, |
|||
info: { |
|||
color: '#76cd75', |
|||
originMethod: console.info |
|||
}, |
|||
warn: { |
|||
color: '#faad14', |
|||
originMethod: console.warn |
|||
}, |
|||
debug: { |
|||
color: '#1890ff', |
|||
originMethod: console.debug |
|||
}, |
|||
error: { |
|||
color: '#ff4d4f', |
|||
originMethod: console.error |
|||
} |
|||
} |
|||
|
|||
const MyConsole: React.FC = () => { |
|||
const [logList, setLogList] = useState<ConsoleType[]>([]) |
|||
const [logList, setLogList] = useState<ILog[]>([]); |
|||
|
|||
useEffect(() => { |
|||
executeConsole() |
|||
}, []) |
|||
hijackConsole(); |
|||
return () => { |
|||
resetConsole(); |
|||
}; |
|||
}, [logList]); |
|||
|
|||
const addLog = (log: ConsoleType) => { |
|||
setLogList([...logList, log]) |
|||
const addLog = (log: ILog) => { |
|||
setLogList([...logList, log]); |
|||
} |
|||
|
|||
const clearLog = () => { |
|||
setLogList([]) |
|||
setLogList([]); |
|||
} |
|||
|
|||
const executeConsole = () => { |
|||
if (!window.console) { |
|||
return |
|||
} |
|||
|
|||
const methodList = ['log', 'info', 'warn', 'debug', 'error'] |
|||
|
|||
// 拦截浏览器中的console方法并重写
|
|||
methodList.forEach(method => { |
|||
const hijackConsole = () => { |
|||
Object.keys(hijackMap).forEach(method => { |
|||
// @ts-ignore
|
|||
window.console[method] = (...args: any[]) => { |
|||
addLog({ |
|||
logType: method, |
|||
infos: args |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
window.console.clear = () => { |
|||
clearLog() |
|||
} |
|||
addLog({ type: method, data: args }); |
|||
hijackMap[method].originMethod(...args); |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
const resetConsole = () => { |
|||
Object.keys(hijackMap).forEach(method => { |
|||
// @ts-ignore
|
|||
window.console[method] = hijackMap[method].originMethod; |
|||
}); |
|||
}; |
|||
|
|||
// 根据不同console类型展示不同的样式
|
|||
const renderLogList = (logList: ConsoleType[]) => { |
|||
return logList.map((log: ConsoleType, index: number) => { |
|||
const renderItem = (color: string) => <p key={index} style={{ color: color }}>{log.infos}</p> |
|||
let wrap = null |
|||
switch (log.logType) { |
|||
case 'warn': |
|||
wrap = renderItem('#faad14') |
|||
break |
|||
case 'log': |
|||
wrap = renderItem('#ffffff') |
|||
break |
|||
case 'error': |
|||
wrap = renderItem('#ff4d4f') |
|||
break |
|||
case 'info': |
|||
wrap = renderItem('#76cd75') |
|||
break |
|||
case 'debug': |
|||
wrap = renderItem('#1890ff') |
|||
break |
|||
} |
|||
return wrap |
|||
}) |
|||
const renderLogList = (logList: ILog[]) => { |
|||
return logList.map((log: ILog, index: number) => { |
|||
const {color} = hijackMap[log.type]; |
|||
const showText = log.data.map(o => { |
|||
return isPlainObject(o) ? JSON.stringify(log.data, null, 2) : o; |
|||
}).join(' '); |
|||
// TODO: use react-json-view to render object
|
|||
return ( |
|||
<p key={index} style={{color}}> |
|||
{showText} |
|||
</p> |
|||
); |
|||
}); |
|||
} |
|||
|
|||
return ( |
|||
<div style={{ height: '100%', background: 'rgb(39,40,35)', padding: 10 }}> |
|||
<div style={{ height: '100%', overflow: 'auto' }}>{renderLogList(logList)}</div> |
|||
<div className={styles.container}> |
|||
{renderLogList(logList)} |
|||
</div> |
|||
) |
|||
); |
|||
} |
|||
|
|||
export default MyConsole |
|||
|
Loading…
Reference in new issue