From a4fee9b6bd621ce028901b2e56fcf70e0f81ba38 Mon Sep 17 00:00:00 2001 From: smallstonesk <575913857@qq.com> Date: Sun, 17 Jan 2021 23:35:30 +0800 Subject: [PATCH] fix: Console component show error --- .../src/components/console/index.module.less | 7 + .../core/src/components/console/index.tsx | 130 ++++++++++-------- 2 files changed, 82 insertions(+), 55 deletions(-) create mode 100644 packages/core/src/components/console/index.module.less diff --git a/packages/core/src/components/console/index.module.less b/packages/core/src/components/console/index.module.less new file mode 100644 index 0000000..c146810 --- /dev/null +++ b/packages/core/src/components/console/index.module.less @@ -0,0 +1,7 @@ +.container { + width: 100%; + height: 100%; + padding: 10px; + background: #272823; + overflow: scroll; +} \ No newline at end of file diff --git a/packages/core/src/components/console/index.tsx b/packages/core/src/components/console/index.tsx index 4741483..28ce8be 100644 --- a/packages/core/src/components/console/index.tsx +++ b/packages/core/src/components/console/index.tsx @@ -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([]) + const [logList, setLogList] = useState([]); 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) =>

{log.infos}

- 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 ( +

+ {showText} +

+ ); + }); } return ( -
-
{renderLogList(logList)}
+
+ {renderLogList(logList)}
- ) + ); } export default MyConsole