Browse Source

fix: Console component show error

master
smallstonesk 5 years ago
parent
commit
a4fee9b6bd
  1. 7
      packages/core/src/components/console/index.module.less
  2. 130
      packages/core/src/components/console/index.tsx

7
packages/core/src/components/console/index.module.less

@ -0,0 +1,7 @@
.container {
width: 100%;
height: 100%;
padding: 10px;
background: #272823;
overflow: scroll;
}

130
packages/core/src/components/console/index.tsx

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

Loading…
Cancel
Save